/* ==========================================================================
   COMMERCIAL ENERGY AUDIT — EnerSolution Inc.
   Design system v2 "Title Card"
   --------------------------------------------------------------------------
   Type      Archivo (expanded grotesk) · Instrument Sans · IBM Plex Mono
   Structure Alternating dark "acts" and light "documents"
   Surface   Film grain + aurora light + hairline architectural grid
   Re-skin   Change only the BRAND block to move this to another Ener division.
   ========================================================================== */

/* --------------------------------------------------- 1. TOKENS */
:root{
  /* BRAND ---------------------------------------------------- */
  --brand-deep:#B54722;
  --brand-mid:#F8612E;
  --brand-lt:#FA9877;
  --brand-pale:#FEF2EE;
  --signal:#1A66A8;
  /* A darker signal for surfaces that carry WHITE text on the brand colour.
     The brand signal itself is tuned for decoration and large display type;
     white on it measured 3.60-4.49:1 on several sites, so the primary CTA
     button - the most important control on the lead path - failed AA.
     Per-site values are set in each site's neutral block. 4 Oct 2026. */
  --signal-deep:#17598F;
  --signal-lt:#74A8D7;
  --signal-pale:#EFF5FA;

  /* energy performance scale, A → G */
  --e-a:#0A7D53; --e-b:#4CA83F; --e-c:#8FBE2E; --e-d:#DCC61F;
  --e-e:#E89B2B; --e-f:#D9682A; --e-g:#C13F2C;

  /* LIGHT SURFACES ------------------------------------------- */
  --paper:#FFFFFF;
  --surface:#FFFFFF;
  --tint:#EBEBEB;
  --ink:#2B2B2B;
  --ink-soft:#434848;
  --muted:#4C5050;
  --rule:#E2E2E2;
  --rule-strong:#C4C4C4;

  /* FORM CONTROLS — must stay legible against --surface cards */
  --field-bg:#F5F5F5;
  --field-border:#9A9F9F;
  --field-ink:#2B2B2B;
  --field-ph:#6E7474;

  /* DARK STAGE ----------------------------------------------- */
  --night:#1F2222;
  --night-2:#05221A;
  --night-3:#082C22;
  --stage-ink:#F2FAF6;
  --stage-soft:rgba(226,243,235,.74);
  /* Raised from .46 on 4 Oct 2026. At .46 this measured 3.72-4.21:1 against
     the dark footers, panels and breadcrumbs it is painted on, so every
     footer heading, footer small print and form label on a dark panel
     failed AA across all five sites. .58 clears it everywhere with margin
     and does not change the character. */
  --stage-faint:rgba(226,243,235,.58);
  --stage-rule:rgba(160,205,186,.20);
  --stage-rule-2:rgba(160,205,186,.34);

  /* TYPE ------------------------------------------------------ */
  --display:"Anybody","Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"Roboto",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --wide:108%;
  --wider:116%;

  /* SPACE / SHAPE --------------------------------------------- */
  --wrap:1200px;
  --gut:clamp(20px,5vw,32px);
  --shadow:0 2px 6px -3px rgba(6,33,26,.10), 0 30px 64px -40px rgba(6,33,26,.50);
  --shadow-lift:0 4px 12px -6px rgba(6,33,26,.16), 0 44px 90px -50px rgba(6,33,26,.62);
  --ease:cubic-bezier(.16,1,.3,1);
}

/* dark mode: the light surfaces darken, the stage stays the stage */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --brand-deep:#DC6942; --brand-mid:#E1440E; --brand-lt:#963B1C; --brand-pale:#2B140D;
    --signal:#57A3E5; --signal-lt:#8CC0ED; --signal-pale:#0C2031; --signal-deep:#175A91;
    --paper:#04140F; --surface:#0A2019; --tint:#071A14;
    --ink:#E8F3EE; --ink-soft:#BBD0C7; --muted:#89A398;
    --rule:#163027; --rule-strong:#26453A;
    --field-bg:#061711; --field-border:#2F5346; --field-ink:#E8F3EE; --field-ph:#7E988C;
    --shadow:0 2px 6px -3px rgba(0,0,0,.6), 0 30px 64px -40px rgba(0,0,0,.95);
    --shadow-lift:0 4px 12px -6px rgba(0,0,0,.7), 0 44px 90px -50px rgba(0,0,0,1);
  }
}
:root[data-theme="dark"]{
  --brand-deep:#DC6942; --brand-mid:#E1440E; --brand-lt:#963B1C; --brand-pale:#2B140D;
  --signal:#57A3E5; --signal-lt:#8CC0ED; --signal-pale:#0C2031; --signal-deep:#175A91;
  --paper:#04140F; --surface:#0A2019; --tint:#071A14;
  --ink:#E8F3EE; --ink-soft:#BBD0C7; --muted:#89A398;
  --rule:#163027; --rule-strong:#26453A;
  --field-bg:#061711; --field-border:#2F5346; --field-ink:#E8F3EE; --field-ph:#7E988C;
  --shadow:0 2px 6px -3px rgba(0,0,0,.6), 0 30px 64px -40px rgba(0,0,0,.95);
  --shadow-lift:0 4px 12px -6px rgba(0,0,0,.7), 0 44px 90px -50px rgba(0,0,0,1);
}

/* --------------------------------------------------- 2. RESET / BASE */
*{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  overflow-x:hidden;
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.62;
  font-feature-settings:"kern" 1,"liga" 1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color:transparent;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto}
button,a{touch-action:manipulation}

/* film grain — the single biggest cue that a human art-directed this */
body::after{
  content:"";position:fixed;inset:-50%;z-index:9999;pointer-events:none;
  opacity:.030;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}

/* --------------------------------------------------- 3. TYPE SCALE */
h1,h2,h3,h4{
  font-family:var(--display);
  font-stretch:var(--wide);
  margin:0;line-height:1.02;
  text-wrap:balance;
  letter-spacing:-.035em;
  color:var(--ink);
}
h1{font-size:clamp(2.3rem,5.4vw,4.3rem);font-weight:800;letter-spacing:-.045em;line-height:.97}
h2{font-size:clamp(1.8rem,4.3vw,3.15rem);font-weight:800;letter-spacing:-.04em}
h3{font-size:1.18rem;font-weight:700;letter-spacing:-.025em;font-stretch:105%}
h4{font-size:1rem;font-weight:700;letter-spacing:-.015em;font-stretch:105%}
p{margin:0;text-wrap:pretty}
a{color:var(--brand-deep);text-underline-offset:3px}

.eyebrow{
  font-family:var(--mono);font-size:.66rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.24em;margin:0;color:var(--signal);
}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
::selection{background:var(--brand-deep);color:#fff}

/* --------------------------------------------------- 4. BUTTONS */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:14px 30px;
  font-family:var(--display);font-stretch:106%;font-size:.95rem;font-weight:700;letter-spacing:-.008em;
  border:1.5px solid var(--brand-deep);background:var(--brand-deep);color:#fff;
  text-decoration:none;cursor:pointer;
  transition:color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease),
             box-shadow .3s var(--ease),background-size .42s var(--ease);
}
.btn{
  background-image:linear-gradient(var(--ink),var(--ink));
  background-repeat:no-repeat;background-position:50% 100%;background-size:100% 0%;
}
.btn:hover{transform:translateY(-2px);background-size:100% 100%;
  box-shadow:0 16px 34px -18px rgba(10,107,75,.85)}
.btn:active{transform:translateY(0)}
/* Dark mode button text, corrected 4 Oct 2026.
   One rule used to paint ALL buttons near-black in dark mode. That is right for
   the primary button, whose background becomes a light accent, and wrong for the
   other two: the signal button's background stays dark, so black on it measured
   2.07:1, and the ghost button is transparent over a dark surface, where black
   measured 1.13:1. Both are on the lead path. */
:root[data-theme="dark"] .btn{color:#03130F}
:root[data-theme="dark"] .btn.signal{color:#fff}
:root[data-theme="dark"] .btn.ghost{color:var(--ink)}
:root[data-theme="dark"] .btn.ghost:hover{color:var(--paper);background-color:var(--ink)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .btn{color:#03130F}
  :root:not([data-theme="light"]) .btn.signal{color:#fff}
  :root:not([data-theme="light"]) .btn.ghost{color:var(--ink)}
  :root:not([data-theme="light"]) .btn.ghost:hover{color:var(--paper);background-color:var(--ink)}
}

.btn.signal{background-color:var(--signal-deep);border-color:var(--signal-deep);color:#fff}
.btn.signal:hover{box-shadow:0 16px 34px -18px rgba(26,102,168,.9)}
.btn.ghost{background-color:transparent;color:var(--ink);border-color:var(--rule-strong)}
/* A ghost button standing on a dark band. Without this the border and label
   inherit ink colours and the button disappears, which is exactly what happened
   on the CABCEP industry-watch and magazine bands. */
.btn.ghost.light{color:#fff;border-color:rgba(255,255,255,.42);background-color:transparent}
.btn.ghost.light:hover{border-color:#fff;background-color:rgba(255,255,255,.1)}
.btn.ghost{background-image:linear-gradient(var(--ink),var(--ink))}
.btn.ghost:hover{color:var(--paper);border-color:var(--ink);box-shadow:none}

/* energy spectrum hairline */
.escale{height:3px;width:100%;
  background:linear-gradient(90deg,#1F2222,#8F3517,#B54722,#F8612E,#F8A77F,#5E93C2,#1A66A8)}

/* --------------------------------------------------- 5. ALERT BAR */
.alertbar{background:var(--signal);color:#fff;position:relative;z-index:70}
.alertin{
  max-width:var(--wrap);margin:0 auto;
  padding:10px var(--gut);
  padding-left:max(var(--gut),env(safe-area-inset-left));
  padding-right:max(var(--gut),env(safe-area-inset-right));
  display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;
  font-size:.86rem;font-weight:500;text-align:center;letter-spacing:-.005em}
.alertin b{font-family:var(--mono);font-weight:600;font-size:.92rem;font-variant-numeric:tabular-nums}
.alertin a{color:#fff;text-decoration:underline;text-underline-offset:3px;font-weight:600}

/* --------------------------------------------------- 6. NAVIGATION (dark, sticky, condensing) */
header.nav{
  position:sticky;top:0;z-index:60;
  background:var(--night);
  border-bottom:1px solid var(--stage-rule);
  transition:padding .35s var(--ease),background .35s var(--ease),box-shadow .35s var(--ease);
}
header.nav.condensed{box-shadow:0 18px 40px -30px rgba(0,0,0,.9)}
.navin{min-height:74px;
  max-width:var(--wrap);margin:0 auto;
  padding:18px var(--gut);
  padding-left:max(var(--gut),env(safe-area-inset-left));
  padding-right:max(var(--gut),env(safe-area-inset-right));
  display:flex;align-items:center;gap:30px;
  transition:padding .35s var(--ease);
}
/* The header button is the one control in the header that must never wrap.
   On CABCEP the long wordmark and the nav squeezed it to 86px, so "Get listed"
   broke onto two lines and the button grew to 67px tall. Flex was free to
   shrink it because .btn sets no basis of its own. 4 Oct 2026. */
.navin>.btn{flex:0 0 auto;white-space:nowrap}
.navin>.navphone{flex:0 0 auto;white-space:nowrap}
header.nav.condensed .navin{padding-block:11px}
.logo{margin-right:auto;display:flex;flex-direction:column;line-height:1.05;text-decoration:none;min-width:0}
.logo b{
  font-family:var(--display);font-stretch:var(--wider);font-weight:800;
  font-size:clamp(1.12rem,3.1vw,1.62rem);letter-spacing:-.035em;color:#fff;
  white-space:nowrap;line-height:1}
.logo span{
  font-family:var(--mono);font-size:.6rem;text-transform:uppercase;
  letter-spacing:.2em;color:var(--brand-lt);margin-top:6px;white-space:nowrap}
/* long wordmarks need a smaller sub-line so the nav does not wrap */
.logo.longsub span{font-size:.54rem;letter-spacing:.16em}

/* Masthead sizes. A reference site's name has to carry the bar the way a
   newspaper's does — CABCEP gets .xl. .lg is the moderate lift, sized so the
   72px bar still holds the wordmark and its sub-line without growing. */
.logo.lg b{font-size:clamp(1.3rem,3.7vw,1.92rem);letter-spacing:-.042em}
.logo.xl b{font-size:clamp(1.62rem,4.6vw,2.6rem);letter-spacing:-.045em}
.logo.xl span{font-size:.64rem;letter-spacing:.22em;margin-top:7px}
.logo.xl.longsub span{font-size:.58rem;letter-spacing:.18em}
.navin:has(.logo.xl){min-height:98px}
.navin:has(.logo.lg){min-height:84px}
header.nav.condensed .logo.xl b{font-size:clamp(1.42rem,3.8vw,2.1rem)}
header.nav.condensed .logo.lg b{font-size:clamp(1.2rem,3.2vw,1.66rem)}
.logo b,.logo span{transition:font-size .35s var(--ease)}

@media(max-width:900px){
  .logo b{font-size:clamp(1.02rem,3.4vw,1.28rem)}
  .logo span{font-size:.52rem;letter-spacing:.14em}
  .logo.lg b{font-size:clamp(1.14rem,4vw,1.42rem)}
  .logo.xl b{font-size:clamp(1.32rem,5vw,1.74rem)}
  .logo.xl span{font-size:.56rem;letter-spacing:.18em}
}
@media(max-width:620px){
  .logo.xl b{font-size:1.3rem}
  .logo.lg b{font-size:1.12rem}
  .navin:has(.logo.xl),.navin:has(.logo.lg){min-height:76px}
}
/* a real logotype in place of the text wordmark. It has to hold the bar the way
   a wordmark does, so it is scaled to the nav height rather than to a fixed px. */
.logo img{
  height:clamp(68px,8.4vw,102px);width:auto;display:block;
  transition:height .35s var(--ease)}
.logo.hasimg{flex-direction:row;align-items:center;padding-block:2px}
header.nav.condensed .logo img{height:clamp(52px,6.2vw,74px)}
/* only the divisions that carry a real logotype need the taller bar */
.navin:has(.logo.hasimg){min-height:118px}
@media(max-width:900px){
  .logo img{height:clamp(54px,8.6vw,72px)}
  .navin:has(.logo.hasimg){min-height:96px}
}
@media(max-width:620px){
  .logo img{height:48px}
  .navin:has(.logo.hasimg){min-height:80px}
}
/* the national mark: a leaf, not a flag — see common.national_mark */
.natmark{display:inline-flex;align-items:center;gap:7px;color:#D52B1E;flex:none;
  padding-left:clamp(10px,1.4vw,16px);margin-left:clamp(10px,1.4vw,16px);
  border-left:1px solid var(--stage-rule)}
.natmark svg{display:block}
.natmark b{font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;color:var(--stage-soft)}
@media(max-width:1100px){.natmark b{display:none}}
@media(max-width:560px){.natmark{padding-left:8px;margin-left:8px}}
.navlinks{display:flex;gap:clamp(16px,1.9vw,26px);align-items:center}
.navlinks a{
  white-space:nowrap;position:relative;font-size:.86rem;font-weight:500;color:var(--stage-soft);
  text-decoration:none;padding-block:4px;transition:color .25s var(--ease)}
.navlinks a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--brand-lt);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.navlinks a:hover{color:#fff}
.navlinks a:hover::after{transform:scaleX(1)}
/* The contact link keeps the mono face so it reads as a different kind of
   item from the section links, but it takes their colour. At --stage-faint it
   sat near 3:1 on the dark masthead, which is under AA for text this size and
   made a live link look disabled. */
.navphone{
  font-family:var(--mono);font-size:.82rem;color:var(--stage-soft);
  text-decoration:none;font-weight:500;white-space:nowrap;transition:color .25s}
.navphone:hover{color:#fff}
header.nav .btn{min-height:42px;padding:10px 20px;font-size:.86rem}

/* burger + drawer, injected by site.js */
.burger{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:46px;height:46px;flex:none;margin-left:auto;
  background:none;border:0;cursor:pointer;padding:0}
.burger i{display:block;height:1.5px;width:24px;background:#fff;margin-inline:auto;
  transition:transform .4s var(--ease),opacity .25s var(--ease)}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.drawer{
  position:fixed;inset:0;z-index:80;background:var(--night);
  display:flex;flex-direction:column;
  padding:calc(env(safe-area-inset-top) + 22px) var(--gut) calc(env(safe-area-inset-bottom) + 30px);
  transform:translateY(-100%);transition:transform .5s var(--ease);
  overflow-y:auto;-webkit-overflow-scrolling:touch}
.drawer.open{transform:translateY(0)}
.drawer .dtop{display:flex;align-items:center;justify-content:space-between;margin-bottom:34px}
.drawer nav{display:flex;flex-direction:column}
.drawer nav a{
  font-family:var(--display);font-stretch:108%;font-weight:700;font-size:1.55rem;letter-spacing:-.035em;
  color:#fff;text-decoration:none;padding:15px 0;border-bottom:1px solid var(--stage-rule)}
.drawer nav a:active{color:var(--brand-lt)}
.drawer .dfoot{margin-top:auto;padding-top:32px;display:flex;flex-direction:column;gap:14px}
.drawer .dfoot .btn{width:100%}
.drawer .dph{font-family:var(--mono);font-size:1rem;color:var(--brand-lt);text-decoration:none;font-weight:500}
body.locked{overflow:hidden}

@media(max-width:1180px){
  .navlinks,.navphone,header.nav .btn{display:none}
  .burger{display:flex}
}

/* --------------------------------------------------- 7. THE STAGE (dark heroes) */
.hero,.pagehero{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--night);
  color:var(--stage-ink);
  border-bottom:1px solid var(--stage-rule);
}
.hero{padding-block:clamp(56px,9vw,104px) clamp(64px,10vw,110px)}
.pagehero{padding-block:clamp(48px,7vw,80px) clamp(52px,8vw,86px)}

/* hairline architecture */
.hero::before,.pagehero::before{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;opacity:.55;
  background-image:linear-gradient(var(--stage-rule) 1px,transparent 1px),
                   linear-gradient(90deg,var(--stage-rule) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(900px 620px at 76% 6%,#000,transparent 74%);
  -webkit-mask-image:radial-gradient(900px 620px at 76% 6%,#000,transparent 74%)}

/* aurora — slow drifting energy light */
.hero::after,.pagehero::after{
  content:"";position:absolute;inset:-25%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(48% 46% at 78% 4%,rgba(248,97,46,.40),transparent 64%),
    radial-gradient(42% 44% at 8% 96%,rgba(30,115,190,.26),transparent 66%),
    radial-gradient(36% 38% at 46% 52%,rgba(250,152,119,.18),transparent 70%);
  filter:blur(6px);
  animation:drift 26s var(--ease) infinite alternate}
@keyframes drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(-3%,2%,0) scale(1.09)}
}

.hero .wrap,.pagehero .wrap{position:relative;z-index:1}
.hero h1,.pagehero h1{color:#fff}
.hero h1 em,.pagehero h1 em{
  font-style:normal;
  /* The midpoint used to be a hard-coded mint green that no site substituted, so
     the emphasised word in every hero faded through the DEFAULT brand's colour
     rather than its own. Visible on the indigo palette as a green word in an
     indigo headline. Now it runs brand to signal, which is each site's own
     spectrum. 4 Oct 2026. */
  background:linear-gradient(96deg,var(--brand-lt),var(--brand-mid) 46%,var(--signal-lt));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lede,.pagehero .lede{color:var(--stage-soft)}
.hero .eyebrow,.pagehero .eyebrow{color:var(--signal-lt)}

.herogrid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(34px,5vw,64px);align-items:start}
@media(min-width:1001px){.herogrid>.panel{position:sticky;top:104px}}
@media(max-width:1000px){.herogrid{grid-template-columns:1fr;gap:40px}}
.hero h1{margin-top:20px}
.hero .lede{margin-top:24px;font-size:clamp(1.02rem,2.1vw,1.2rem);max-width:52ch}
.herocta{display:flex;gap:13px;flex-wrap:wrap;margin-top:36px}
.hero .btn.ghost,.pagehero .btn.ghost{color:#fff;border-color:var(--stage-rule-2)}
.hero .btn.ghost,.pagehero .btn.ghost{background-image:linear-gradient(#fff,#fff)}
.hero .btn.ghost:hover,.pagehero .btn.ghost:hover{color:var(--night);border-color:#fff}

.creds{display:flex;flex-wrap:wrap;gap:7px;margin-top:34px}
.creds span{
  font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.13em;
  padding:7px 12px;border:1px solid var(--stage-rule-2);color:var(--stage-soft);
  font-weight:500;background:rgba(255,255,255,.035);backdrop-filter:blur(4px)}

/* countdown as instrument readout */
.countdown{
  margin-top:38px;position:relative;padding:24px 26px;
  border:1px solid rgba(238,154,78,.45);
  background:linear-gradient(180deg,rgba(26,102,168,.20),rgba(26,102,168,.07));
  backdrop-filter:blur(6px)}
.countdown::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--signal-lt)}
.countdown .lbl{font-family:var(--mono);font-size:.63rem;text-transform:uppercase;letter-spacing:.2em;color:var(--signal-lt);font-weight:600}
.countdown .big{display:flex;align-items:baseline;gap:14px;margin-top:10px;flex-wrap:wrap}
.countdown .days{
  font-family:var(--display);font-stretch:var(--wider);font-size:clamp(2.6rem,6vw,4rem);
  font-weight:800;letter-spacing:-.06em;color:#fff;line-height:.9;font-variant-numeric:tabular-nums}
.countdown .unit{font-family:var(--display);font-stretch:106%;font-size:1rem;font-weight:700;color:var(--signal-lt);letter-spacing:-.02em}
.countdown p{margin-top:12px;font-size:.94rem;color:var(--stage-soft);max-width:52ch}
.countdown p strong{color:#fff}

.pagehero h1{font-size:clamp(2.05rem,5.2vw,3.7rem);margin-top:14px;max-width:19ch}
.pagehero .lede{margin-top:20px;font-size:clamp(1rem,2vw,1.16rem);max-width:58ch}
.pagehero .herocta{margin-top:30px}
.crumb{font-family:var(--mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.2em;color:var(--stage-faint);margin-bottom:8px}
.crumb a{color:var(--stage-faint);text-decoration:none}
.crumb a:hover{color:var(--brand-lt)}

/* --------------------------------------------------- 8. GLASS PANEL (compliance checker on the stage) */
.panel{
  background:rgba(255,255,255,.055);
  border:1px solid var(--stage-rule-2);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9)}
.panel .top{padding:24px 26px 19px;border-bottom:1px solid var(--stage-rule);background:rgba(255,255,255,.035)}
.panel .top .eyebrow{color:var(--brand-lt)}
.panel .top h3{margin-top:10px;color:#fff}
.panel .top p{font-size:.89rem;color:var(--stage-faint);margin-top:7px}
.panel .mid{padding:22px 26px 26px;display:flex;flex-direction:column;gap:15px}
.field{display:flex;flex-direction:column;gap:8px}
/* DEFAULT = light ground. The dark-panel overrides come immediately after and
   must stay scoped to .panel — an unscoped pale label is invisible on white. */
.field label{font-family:var(--mono);font-size:.67rem;text-transform:uppercase;
  letter-spacing:.15em;color:var(--ink-soft);font-weight:600}
.panel .field label{color:var(--stage-faint)}
/* NEVER use the `background` shorthand here. It resets background-repeat to
   `repeat` and background-position to 0 0, which tiles the select chevron
   across the whole control. Always background-color. */
.panel select,.panel input,.panel textarea{
  background-color:rgba(3,19,15,.62);border:1.5px solid var(--stage-rule-2);color:#fff}
.panel select::placeholder,.panel input::placeholder,.panel textarea::placeholder{
  color:rgba(255,255,255,.55)}
.panel select:focus,.panel input:focus,.panel textarea:focus{
  background-color:rgba(3,19,15,.80);
  border-color:var(--brand-lt);box-shadow:0 0 0 3px rgba(255,255,255,.10)}
.panel select:hover,.panel input:hover,.panel textarea:hover{border-color:var(--brand-lt)}
.panel select option{background:var(--night-2);color:#fff}
.panel .btn{width:100%}
.out{border-top:1px solid var(--stage-rule);padding:22px 26px 26px;background:rgba(3,19,15,.4)}
.ob{display:flex;gap:15px;padding:16px 0;border-bottom:1px dashed var(--stage-rule)}
.ob:last-of-type{border-bottom:0}
.ob .bar{flex:none;width:3px;background:var(--brand-lt);align-self:stretch}
.ob.hot .bar{background:var(--signal-lt)}
.ob .t{font-family:var(--display);font-stretch:105%;font-weight:700;font-size:1rem;letter-spacing:-.025em;color:#fff}
.ob .d{font-family:var(--mono);font-size:.71rem;color:var(--signal-lt);letter-spacing:.06em;font-weight:500;margin-top:5px}
.ob .x{font-size:.91rem;color:var(--stage-soft);margin-top:7px;line-height:1.5}
.outfoot{margin-top:18px;padding-top:16px;border-top:1px solid var(--stage-rule);font-size:.85rem;color:var(--stage-faint)}

/* generic form controls on light ground.
   The fill is --field-bg, NEVER --surface: the cards these sit in are --surface,
   and a white input inside a white card has no visible boundary. */
select,input,textarea{
  font-family:var(--body);font-size:16px;color:var(--field-ink);
  background-color:var(--field-bg);
  border:1.5px solid var(--field-border);padding:14px 15px;width:100%;border-radius:0;
  min-height:50px;transition:border-color .2s var(--ease),box-shadow .2s var(--ease),
             background-color .2s var(--ease);
  appearance:none;-webkit-appearance:none}
/* Checkboxes and radios are inputs too, and the rule above was eating them:
   appearance:none strips the tick and the dot, width:100% stretches them to
   the width of their container and min-height:50px makes them a block. The
   result was a large white rectangle where a radio should be. Nothing on any
   site rendered one correctly until this was added, so this is a fix rather
   than a restyle. accent-color lets the native control take the brand. */
input[type=checkbox],input[type=radio]{
  appearance:auto;-webkit-appearance:auto;
  width:20px;height:20px;min-height:0;flex:none;
  padding:0;border:0;background:none;border-radius:0;
  accent-color:var(--signal);cursor:pointer}
input::placeholder,textarea::placeholder{color:var(--field-ph);opacity:1}
textarea{min-height:120px;line-height:1.55}
select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='9'%3E%3Cpath d='M1.4 1.4l5.1 5.1 5.1-5.1' fill='none' stroke='%23566C63' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:42px}
.panel select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='9'%3E%3Cpath d='M1.4 1.4l5.1 5.1 5.1-5.1' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center}
select:hover,input:hover,textarea:hover{border-color:var(--brand-mid)}
select:focus,input:focus,textarea:focus{
  border-color:var(--brand-deep);outline:none;background-color:var(--surface);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand-mid) 26%, transparent)}
/* selects render their own popup list — force readable option colours */
select option{background:var(--surface);color:var(--ink)}
.panel select option{background:var(--night-2);color:#fff}

/* --------------------------------------------------- 9. SECTIONS */
section{padding-block:clamp(62px,9vw,110px)}
.sechead{max-width:62ch;margin-bottom:clamp(32px,5vw,50px)}
.sechead h2{margin-top:14px}
.sechead p{margin-top:18px;color:var(--ink-soft);font-size:clamp(1rem,2vw,1.08rem)}

/* rating band */
.ratingband{background:var(--tint);border-block:1px solid var(--rule);padding-block:clamp(38px,6vw,56px)}
.rbgrid{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(26px,4vw,48px);align-items:center}
@media(max-width:900px){.rbgrid{grid-template-columns:1fr;gap:26px}}
.rbgrid h3{font-size:clamp(1.3rem,3vw,1.6rem);font-stretch:var(--wide);letter-spacing:-.035em}
.rbgrid p{margin-top:12px;color:var(--ink-soft);font-size:1rem}
.scale{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.scale div{
  padding:clamp(12px,2.4vw,18px) 6px;text-align:center;
  font-family:var(--display);font-stretch:var(--wider);font-weight:800;
  font-size:clamp(.9rem,2.4vw,1.1rem);color:#fff;letter-spacing:-.02em}
.scalelbl{display:flex;justify-content:space-between;margin-top:9px;font-family:var(--mono);font-size:.63rem;color:var(--muted);text-transform:uppercase;letter-spacing:.14em}

/* service groups */
.grp{margin-top:clamp(40px,6vw,64px)}
.grphead{display:flex;align-items:baseline;gap:16px;padding-bottom:14px;border-bottom:1.5px solid var(--ink)}
.grphead .gn{font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.24em;color:var(--signal)}
.grphead h3{font-size:clamp(1.3rem,3.2vw,1.7rem);font-stretch:var(--wide);letter-spacing:-.04em}
.grphead .gd{margin-left:auto;font-size:.9rem;color:var(--muted);text-align:right}
@media(max-width:760px){.grphead{flex-wrap:wrap;gap:8px}.grphead .gd{margin-left:0;text-align:left;width:100%}}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));
  gap:0;background:var(--surface);border:1px solid var(--rule);border-top:0;border-right:0;border-bottom:0}
.card{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.card{
  background:var(--surface);padding:30px 26px 28px;display:flex;flex-direction:column;gap:10px;
  position:relative;overflow:hidden;transition:background .35s var(--ease)}
.card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--brand-deep),var(--brand-lt));
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.card:hover{background:var(--tint)}
.card:hover::before{transform:scaleX(1)}
.card .no{font-family:var(--mono);font-size:.68rem;font-weight:500;color:var(--brand-lt);letter-spacing:.14em}
.card p{font-size:.93rem;color:var(--ink-soft)}
.card .hl{margin-top:auto;padding-top:15px;border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:.7rem;color:var(--brand-deep);font-weight:500;letter-spacing:.03em}

/* duration chart */
.dur{background:var(--surface);border:1px solid var(--rule);padding:clamp(22px,4vw,34px)}
.dur .cap{font-size:.9rem;color:var(--muted);margin-top:6px;margin-bottom:28px}
.durrow{display:grid;grid-template-columns:200px 1fr;gap:20px;align-items:center;margin-bottom:16px}
@media(max-width:700px){.durrow{grid-template-columns:1fr;gap:7px;margin-bottom:22px}}
.durrow .name{font-family:var(--display);font-stretch:105%;font-weight:700;font-size:.97rem;letter-spacing:-.025em}
.durrow .name small{display:block;font-family:var(--mono);font-size:.64rem;font-weight:400;color:var(--muted);
  text-transform:uppercase;letter-spacing:.14em;margin-top:3px}
.track{position:relative;height:30px;background:var(--tint);border:1px solid var(--rule)}
.seg{position:absolute;top:3px;bottom:3px;display:flex;align-items:center;padding-left:11px;
  box-shadow:0 0 0 2px var(--surface)}
.seg span{font-family:var(--mono);font-size:.69rem;font-weight:600;color:#fff;white-space:nowrap}
.axis{display:grid;grid-template-columns:200px 1fr;gap:20px;margin-top:6px}
@media(max-width:700px){.axis{grid-template-columns:1fr}}
.ticks{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.64rem;color:var(--muted)}

/* --------------------------------------------------- 10. DARK ACT: compliance calendar */
.compliance{background:var(--night);color:var(--stage-ink);position:relative;overflow:hidden;isolation:isolate}
.compliance::before{
  content:"";position:absolute;inset:-20%;z-index:-1;pointer-events:none;
  background:radial-gradient(44% 46% at 90% 4%,rgba(248,97,46,.30),transparent 66%),
             radial-gradient(40% 40% at 4% 90%,rgba(30,115,190,.18),transparent 68%);
  animation:drift 30s var(--ease) infinite alternate}
.compliance .wrap{position:relative;z-index:1}
.compliance h2{color:#fff}
.compliance .eyebrow{color:var(--signal-lt)}
.compliance .sechead p{color:var(--stage-soft)}
.cal{border:1px solid var(--stage-rule-2);overflow-x:auto;background:rgba(255,255,255,.03);-webkit-overflow-scrolling:touch}
.calrow{display:grid;grid-template-columns:1.4fr 2fr 1.05fr;border-bottom:1px solid var(--stage-rule);min-width:680px}
.calrow:last-child{border-bottom:0}
.calrow.head{background:rgba(255,255,255,.06)}
.calrow.head div{font-family:var(--mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.2em;color:var(--stage-faint);padding:14px 20px;font-weight:600}
.calrow div{padding:19px 20px;font-size:.93rem;color:var(--stage-soft)}
.calrow .k{font-weight:700;color:#fff;font-family:var(--display);font-stretch:105%;letter-spacing:-.02em}
.calrow .dl{font-family:var(--mono);font-size:.83rem;color:var(--signal-lt);white-space:nowrap;font-weight:500}
.calrow.flag{background:rgba(26,102,168,.22);box-shadow:inset 3px 0 0 var(--signal-lt)}
.note{margin-top:26px;font-size:.96rem;color:var(--stage-soft);max-width:74ch}
.note strong{color:#fff}

/* --------------------------------------------------- 11. SECTORS / STATS / PROCESS */
.sectors{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  gap:0;background:var(--surface);border:1px solid var(--rule);border-right:0;border-bottom:0}
.sectors>div{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.sectors>div{background:var(--surface);padding:26px 23px;display:flex;flex-direction:column;gap:9px;transition:background .3s var(--ease)}
.sectors>div:hover{background:var(--tint)}
.sectors .k{font-family:var(--mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.2em;color:var(--signal);font-weight:600}
.sectors p{font-size:.9rem;color:var(--ink-soft)}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:clamp(26px,4vw,40px)}
.stat .v{
  font-family:var(--display);font-stretch:var(--wider);
  font-size:clamp(2.6rem,6vw,3.6rem);font-weight:800;letter-spacing:-.06em;
  color:var(--brand-deep);line-height:.92;font-variant-numeric:tabular-nums}
.stat .l{font-size:.93rem;color:var(--ink-soft);margin-top:14px}

.proc{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));
  gap:0;background:var(--surface);border:1px solid var(--rule);border-right:0;border-bottom:0}
.proc>div{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.proc>div{background:var(--surface);padding:26px 21px;display:flex;flex-direction:column;gap:9px}
.proc .s{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;color:var(--signal);font-weight:600}
.proc .w{font-family:var(--mono);font-size:.69rem;color:var(--muted)}
.proc p{font-size:.88rem;color:var(--ink-soft)}

.why{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:clamp(26px,4vw,40px)}
.why p{font-size:.96rem;color:var(--ink-soft);margin-top:11px}

.cta{background:var(--brand-pale);border-block:1px solid var(--rule)}
.cta p{color:var(--ink-soft);max-width:58ch;margin-top:18px;font-size:clamp(1rem,2vw,1.1rem)}
.ctarow{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:32px}
.ctarow .ph{font-family:var(--mono);font-size:.98rem;color:var(--ink);text-decoration:none;font-weight:500}

/* --------------------------------------------------- 12. PROPOSAL WIZARD */
.wiz{background:var(--surface);border:1px solid var(--rule-strong);box-shadow:var(--shadow-lift);max-width:860px;margin:clamp(30px,5vw,48px) auto 0}
.wizhead{padding:26px clamp(22px,4vw,34px) 0}
.prog{display:flex;gap:4px;margin-top:20px}
.prog div{height:3px;flex:1;background:var(--tint);transition:background .4s var(--ease)}
.prog div.on{background:var(--signal)}
.prog div.done{background:var(--brand-deep)}
.stepno{font-family:var(--mono);font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:15px;font-weight:600}
.wizbody{padding:22px clamp(22px,4vw,34px) 30px;display:flex;flex-direction:column;gap:20px}
.wizstep{display:flex;flex-direction:column;gap:18px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:15px}
@media(max-width:620px){.two{grid-template-columns:1fr}}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:9px}
.opt{border:1.5px solid var(--field-border);padding:14px 15px;cursor:pointer;display:flex;gap:11px;
  align-items:flex-start;background:var(--field-bg);min-height:48px;
  transition:border-color .25s var(--ease),background .25s var(--ease),transform .25s var(--ease)}
.opt:hover{border-color:var(--brand-deep);background:var(--brand-pale)}
.opt.sel{border-color:var(--brand-deep);border-width:2.5px;padding:12.5px 13.5px;background:var(--brand-pale)}
.opt input{margin:3px 0 0;flex:none;width:auto;min-height:0;padding:0;accent-color:var(--brand-deep)}
.opt .ot{font-weight:600;font-size:.93rem;display:block;color:var(--ink)}
.opt .od{font-size:.81rem;color:var(--muted);display:block;margin-top:2px;line-height:1.4}
.wizfoot{padding:18px clamp(22px,4vw,34px);border-top:1px solid var(--rule);display:flex;gap:14px;
  justify-content:space-between;align-items:center;background:var(--tint);flex-wrap:wrap}
.wizfoot .hint{font-size:.82rem;color:var(--muted)}
.review{background:var(--tint);border:1px solid var(--rule);padding:20px 22px}
.review dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:10px 20px;font-size:.91rem}
@media(max-width:520px){.review dl{grid-template-columns:1fr;gap:4px 0}.review dd{margin-bottom:10px}}
.review dt{font-family:var(--mono);font-size:.63rem;text-transform:uppercase;letter-spacing:.15em;color:var(--muted);padding-top:3px;font-weight:600}
.review dd{margin:0;color:var(--ink)}
.done{text-align:center;padding:44px 20px}
.done .big{font-family:var(--display);font-stretch:var(--wide);font-size:clamp(1.6rem,4.5vw,2rem);
  font-weight:800;letter-spacing:-.04em;color:var(--brand-deep);margin-bottom:12px}
.refbox{display:inline-block;margin-top:22px;border:1.5px solid var(--brand-deep);background:var(--brand-pale);padding:16px 26px}
.refbox .rl{font-family:var(--mono);font-size:.61rem;text-transform:uppercase;letter-spacing:.18em;color:var(--muted);font-weight:600}
.refbox .rv{font-family:var(--mono);font-size:clamp(1.1rem,4vw,1.4rem);font-weight:600;color:var(--ink);margin-top:6px;letter-spacing:.05em}
.err{background:var(--signal-pale);border:1px solid var(--signal);padding:13px 16px;font-size:.89rem;color:var(--ink)}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}

/* --------------------------------------------------- 13. FOOTER */
footer{
  background:var(--night);color:var(--stage-soft);font-size:.89rem;
  padding-block:clamp(44px,6vw,62px);
  padding-bottom:calc(clamp(44px,6vw,62px) + env(safe-area-inset-bottom))}
.footgrid{display:grid;gap:clamp(30px,4vw,54px);
  grid-template-columns:minmax(220px,1.15fr) minmax(0,2.6fr) minmax(190px,.95fr);
  align-items:start}
@media(max-width:1080px){.footgrid{grid-template-columns:minmax(220px,1fr) minmax(0,1.7fr)}
  .fcontact{grid-column:1/-1;border-top:1px solid var(--stage-rule);padding-top:26px}}
@media(max-width:700px){.footgrid{grid-template-columns:1fr}}
.fbrand .fmark{margin-bottom:16px}
.fblurb{font-size:.87rem;line-height:1.65;max-width:34ch}
.fcols{display:grid;gap:26px 20px;
  grid-template-columns:repeat(auto-fit,minmax(126px,1fr))}
.fcol h4,.fcontact h4{font-family:var(--mono);font-size:.59rem;text-transform:uppercase;
  letter-spacing:.22em;color:var(--stage-faint);font-weight:600;margin-bottom:13px}
footer .logo b{color:#fff}
footer .logo span{color:var(--signal-lt)}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-top:9px;line-height:1.35}
footer a{color:var(--stage-soft);text-decoration:none;transition:color .25s}
footer a:hover{color:var(--brand-lt)}
.fcontact .fphone{display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(1.1rem,2vw,1.3rem);color:#fff;letter-spacing:-.02em;
  white-space:nowrap}
.fcontact .fphone:hover{color:var(--signal-lt)}
.fhours{font-size:.8rem;color:var(--stage-faint);margin:8px 0 18px;line-height:1.5}
.fcontact .btn{width:100%;justify-content:center}
.legal{margin-top:clamp(34px,5vw,50px);padding-top:20px;
  border-top:1px solid var(--stage-rule);font-size:.76rem;color:var(--stage-faint);
  display:grid;gap:14px}
.legal p{margin:0;line-height:1.7;max-width:110ch}
.fpolicy{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px}
.fpolicy li{margin:0}
.fpolicy a{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--stage-faint)}
.fpolicy a:hover{color:#fff}
.hidden{display:none!important}
/* A class cannot be relied on here: .btn sets display:inline-flex, which wins
   over the user-agent rule for [hidden] and leaves hidden buttons visible.
   This is why the wizard showed Back, Continue and Send simultaneously. */
[hidden]{display:none!important}

/* --------------------------------------------------- 14. ARTICLE / INNER PAGES */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:clamp(36px,5vw,64px);align-items:start}
@media(max-width:980px){.layout{grid-template-columns:1fr;gap:40px}}
.article{max-width:none;min-width:0}
.article h2{font-size:clamp(1.42rem,3.4vw,2.05rem);margin-top:clamp(38px,6vw,56px);font-stretch:var(--wide)}
.article h2:first-child{margin-top:0}
.article h3{font-size:1.12rem;margin-top:32px}
.article p{margin-top:15px;color:var(--ink-soft)}
.article p.first{font-size:clamp(1.02rem,2vw,1.1rem);color:var(--ink-soft)}
.article ul,.article ol{margin-top:15px;padding-left:1.15em;color:var(--ink-soft)}
.article li{margin-top:9px}
.article li strong,.article strong{color:var(--ink);font-weight:600}
.article .tw{margin-top:22px}

.keybox{border-left:3px solid var(--brand-deep);border-top:1px solid var(--rule);border-right:1px solid var(--rule);
  border-bottom:1px solid var(--rule);background:var(--brand-pale);padding:22px 24px;margin-top:26px}
.keybox .kl{font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.2em;color:var(--brand-deep);font-weight:600}
.keybox p{margin-top:10px;color:var(--ink)}

.warnbox{border-left:3px solid var(--signal);border-top:1px solid var(--rule);border-right:1px solid var(--rule);
  border-bottom:1px solid var(--rule);background:var(--signal-pale);padding:22px 24px;margin-top:26px}
.warnbox .kl{font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.2em;color:var(--signal);font-weight:600}
.warnbox p{margin-top:10px;color:var(--ink)}

.tw{overflow-x:auto;border:1px solid var(--rule);background:var(--surface);-webkit-overflow-scrolling:touch}
.tw table{border-collapse:collapse;width:100%;min-width:520px;font-family:var(--body);font-size:.89rem}
.tw caption{text-align:left;font-family:var(--mono);font-size:.61rem;text-transform:uppercase;letter-spacing:.18em;color:var(--muted);padding:12px 16px;border-bottom:1px solid var(--rule);font-weight:600}
.tw th{text-align:left;font-family:var(--mono);font-weight:600;font-size:.66rem;text-transform:uppercase;letter-spacing:.14em;color:var(--ink);padding:13px 16px;border-bottom:1.5px solid var(--rule-strong);white-space:nowrap;background:var(--tint)}
.tw td{padding:13px 16px;border-bottom:1px solid var(--rule);color:var(--ink-soft);vertical-align:top}
.tw tr:last-child td{border-bottom:0}
.tw td.k{color:var(--ink);font-weight:600}
.tw td.n,.tw th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tw tr.flag td{background:var(--signal-pale)}

aside.side{position:sticky;top:104px;display:flex;flex-direction:column;gap:18px}
@media(max-width:980px){aside.side{position:static}}
.sbox{border:1px solid var(--rule);background:var(--surface);padding:24px 22px}
.sbox.dark{background:var(--night);border-color:var(--night);color:var(--stage-ink);position:relative;overflow:hidden}
.sbox.dark::before{content:"";position:absolute;inset:0;pointer-events:none;
  /* This glow was the DEFAULT brand green, hard-coded, so every division's dark
     sidebar box glowed green regardless of its own palette. aurora_a is each
     site's own version of the same colour and is already substituted. 4 Oct 2026. */
  background:radial-gradient(70% 60% at 100% 0%,rgba(248,97,46,.40),transparent 70%)}
.sbox.dark>*{position:relative;z-index:1}
.sbox.dark h4,.sbox.dark .sv{color:#fff}
.sbox.dark p,.sbox.dark li{color:var(--stage-soft)}
.sbox .sl{font-family:var(--mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.2em;color:var(--signal);font-weight:600}
.sbox.dark .sl{color:var(--signal-lt)}
.sbox h4{margin-top:9px}
.sbox p{margin-top:10px;font-size:.91rem;color:var(--ink-soft)}
.sbox .sv{font-family:var(--display);font-stretch:var(--wider);font-size:clamp(2rem,5vw,2.5rem);
  font-weight:800;letter-spacing:-.05em;color:var(--brand-deep);line-height:.92;margin-top:10px;font-variant-numeric:tabular-nums}
.sbox ul{list-style:none;margin:12px 0 0;padding:0;font-size:.91rem}
.sbox li{margin-top:9px;padding-left:15px;position:relative;color:var(--ink-soft)}
.sbox li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;background:var(--brand-lt)}
.sbox.dark li::before{background:var(--brand-lt)}
.sbox .btn{margin-top:16px;width:100%;padding-inline:12px}

.faq{margin-top:26px;border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;padding:18px 0;font-family:var(--display);font-stretch:105%;font-weight:700;
  font-size:1.02rem;letter-spacing:-.025em;color:var(--ink);list-style:none;display:flex;gap:14px;align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";font-family:var(--mono);color:var(--signal);font-weight:500;flex:none;margin-top:1px;transition:transform .3s var(--ease)}
.faq details[open] summary::before{content:"–"}
.faq details p{padding:0 0 18px 26px;color:var(--ink-soft);font-size:.95rem;margin-top:0}

.related{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  gap:0;background:var(--surface);border:1px solid var(--rule);border-right:0;border-bottom:0;margin-top:20px}
.related a{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.related a{background:var(--surface);padding:24px 22px;text-decoration:none;display:flex;flex-direction:column;gap:8px;
  position:relative;overflow:hidden;transition:background .3s var(--ease)}
.related a::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--brand-lt);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.related a:hover{background:var(--tint)}
.related a:hover::before{transform:scaleX(1)}
.related .rk{font-family:var(--mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.2em;color:var(--signal);font-weight:600}
.related .rt{font-family:var(--display);font-stretch:105%;font-weight:700;font-size:1.02rem;color:var(--ink);letter-spacing:-.025em}
.related .rd{font-size:.88rem;color:var(--ink-soft)}

/* --------------------------------------------------- 15. MOTION */
[data-reveal]{opacity:0;transform:translateY(22px);
  transition:opacity .85s var(--ease),transform .85s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none}}

/* --------------------------------------------------- 16. MOBILE REFINEMENT */
@media(max-width:700px){
  body{font-size:16.5px}
  h1{font-size:clamp(2.05rem,8.4vw,2.9rem)}
  .hero h1{letter-spacing:-.04em}
  .herocta .btn,.pagehero .herocta .btn{flex:1 1 100%}
  .ctarow .btn{flex:1 1 100%}
  .creds span{font-size:.58rem;padding:6px 10px}
  .countdown{padding:20px}
  .panel .top,.panel .mid,.out{padding-inline:20px}
  .cards{grid-template-columns:1fr}
  .card{padding:26px 22px}
  .alertin{font-size:.75rem;line-height:1.38;padding-block:8px;gap:7px}
  .alertin b{font-size:.82rem}
  .scale div{font-size:.8rem;padding-inline:2px}
  .scalelbl{font-size:.56rem}
  .stat .v{font-size:2.9rem}
  section{padding-block:56px}
}
@media(max-width:400px){
  .logo b{font-size:.76rem}
  .logo span{font-size:.5rem;letter-spacing:.18em}
}
/* iOS: kill the input zoom, respect the notch, keep momentum scroll */
@supports (-webkit-touch-callout:none){
  select,input,textarea{font-size:16px}
  .hero,.pagehero{background-attachment:scroll}
}


/* ==========================================================================
   17. EDITORIAL LAYER — inner pages
   The homepage is a pitch. These pages are documents, and they are read by
   people who will decide whether to put you on a tender list. They get
   numbered sections, real vertical rhythm and instrument-grade tables.
   ========================================================================== */

/* --- column structure: a hairline separates argument from evidence ------- */
.layout{grid-template-columns:minmax(0,1fr) 320px;gap:clamp(30px,4vw,52px)}
@media(min-width:981px){
  aside.side{
    border-left:1px solid var(--rule);
    padding-left:clamp(26px,2.6vw,38px);
    gap:22px}
}
@media(max-width:980px){.layout{grid-template-columns:1fr;gap:48px}}

/* --- numbered sections --------------------------------------------------- */
.article{counter-reset:sec}
.article h2{
  counter-increment:sec;
  position:relative;
  margin-top:clamp(52px,6.5vw,86px);
  padding-top:30px;
  line-height:1.04}
.article h2::after{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,var(--brand-deep) 0 64px,var(--rule) 64px)}
.article h2::before{
  content:counter(sec,decimal-leading-zero);
  display:block;font-family:var(--mono);font-size:.63rem;font-weight:600;
  letter-spacing:.26em;color:var(--signal);margin-bottom:16px}
.article h2:first-child{margin-top:0}

.article h3{
  font-size:1.13rem;margin-top:38px;
  padding-left:16px;border-left:2px solid var(--brand-lt)}

/* --- reading rhythm ------------------------------------------------------ */
.article p{margin-top:18px;line-height:1.68;max-width:70ch}
.article p.first{
  font-size:clamp(1.06rem,2.1vw,1.19rem);
  line-height:1.58;color:var(--ink);margin-top:20px}
.article p.first+p{margin-top:20px}

/* --- lists: a rotated square, not a browser bullet ----------------------- */
.article ul{list-style:none;padding-left:0;margin-top:22px}
.article ul li{position:relative;padding-left:28px;margin-top:14px;max-width:68ch;line-height:1.62}
.article ul li::before{
  content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;
  background:var(--brand-lt);transform:rotate(45deg)}
.article ol{padding-left:0;margin-top:22px;counter-reset:ol;list-style:none}
.article ol li{position:relative;padding-left:34px;margin-top:14px;max-width:68ch;counter-increment:ol}
.article ol li::before{
  content:counter(ol,decimal-leading-zero);position:absolute;left:0;top:.14em;
  font-family:var(--mono);font-size:.72rem;font-weight:600;color:var(--brand-deep);letter-spacing:.06em}

/* --- callouts: a chip label, real padding, room to breathe --------------- */
.keybox,.warnbox{
  padding:28px 30px 30px;margin-top:38px;margin-bottom:8px;
  border-top:1px solid var(--rule);border-right:1px solid var(--rule);
  border-bottom:1px solid var(--rule)}
.keybox{border-left:3px solid var(--brand-deep);background:var(--brand-pale)}
.warnbox{border-left:3px solid var(--signal);background:var(--signal-pale)}
.keybox .kl,.warnbox .kl{
  display:inline-block;padding:6px 11px;color:#fff;
  font-family:var(--mono);font-size:.57rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.22em}
.keybox .kl{background:var(--brand-deep)}
.warnbox .kl{background:var(--signal)}
:root[data-theme="dark"] .keybox .kl,:root[data-theme="dark"] .warnbox .kl{color:#03130F}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .keybox .kl,
  :root:not([data-theme="light"]) .warnbox .kl{color:#03130F}}
.keybox p,.warnbox p{margin-top:16px;color:var(--ink);max-width:66ch}
.keybox p+p,.warnbox p+p{margin-top:13px}

/* --- tables: instrument-grade -------------------------------------------- */
.tw{margin-top:30px;margin-bottom:8px}
.tw caption{padding:14px 20px;letter-spacing:.22em;background:var(--surface)}
.tw th{padding:15px 20px;font-size:.62rem;letter-spacing:.18em}
.tw td{padding:16px 20px;line-height:1.55}
.tw tbody tr{transition:background .22s var(--ease)}
.tw tbody tr:hover{background:var(--tint)}
.tw tr.flag td{background:var(--signal-pale)}
.tw tr.flag:hover td{background:var(--signal-pale)}
.tw td.k{white-space:normal}

/* --- FAQ ------------------------------------------------------------------ */
.faq{margin-top:34px;border-top:1px solid var(--rule)}
.faq summary{padding:22px 0;gap:16px;transition:color .22s var(--ease)}
.faq summary:hover{color:var(--brand-deep)}
.faq summary::before{font-size:1.1rem;line-height:1.3}
.faq details p{padding:0 0 24px 30px;max-width:66ch;line-height:1.66}
.faq details[open] summary{color:var(--brand-deep)}

/* --- sidebar -------------------------------------------------------------- */
.sbox{padding:26px 24px 28px}
.sbox h4{margin-top:11px;line-height:1.25}
.sbox p{margin-top:13px;line-height:1.58}
.sbox ul{margin-top:16px}
.sbox li{margin-top:12px;padding-left:18px;line-height:1.5}
.sbox li::before{top:.55em;width:6px;height:6px;transform:rotate(45deg)}
.sbox .btn{margin-top:20px}
.sbox.dark{padding:28px 26px 30px}

/* --- related: a tonal step between the document and the close ------------- */
section:has(.related){background:var(--tint);border-top:1px solid var(--rule)}
.related{margin-top:26px}
.related a{padding:28px 26px 30px;gap:10px}
.related a .rt{line-height:1.28}
.related a::after{
  content:"→";position:absolute;right:24px;bottom:26px;
  font-family:var(--mono);color:var(--brand-deep);opacity:0;
  transform:translateX(-6px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.related a:hover::after{opacity:1;transform:translateX(0)}
.related a:hover .rt{color:var(--brand-deep)}

/* --- closing call to action ---------------------------------------------- */
.cta{position:relative;overflow:hidden;isolation:isolate}
.cta::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--rule-strong) 1px,transparent 1px),
                   linear-gradient(90deg,var(--rule-strong) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(760px 420px at 88% 8%,#000,transparent 72%);
  -webkit-mask-image:radial-gradient(760px 420px at 88% 8%,#000,transparent 72%)}
.cta h2{margin-top:15px;max-width:19ch}
.cta p{margin-top:19px}
.cta p+p{margin-top:13px}

/* --- mobile refinement for the editorial layer --------------------------- */
@media(max-width:700px){
  .article h2{margin-top:46px;padding-top:26px}
  .article h2::after{background:linear-gradient(90deg,var(--brand-deep) 0 48px,var(--rule) 48px)}
  .article h3{margin-top:32px;padding-left:13px}
  .article p,.article ul li,.article ol li{max-width:none}
  .keybox,.warnbox{padding:24px 22px 26px;margin-top:32px}
  .tw th,.tw td{padding:13px 16px}
  .related a{padding:24px 22px 26px}
  .faq summary{padding:20px 0}
  .faq details p{padding-left:26px;padding-bottom:20px}
}

/* --------------------------------------------------- 18. TOOL BAND
   The interactive checker used to live in a glass panel on the dark stage.
   It now sits in its own full-width band under the hero, on light ground,
   so the hero can carry the technical artwork instead. */
.toolband{background:var(--tint);border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);padding-block:clamp(38px,5.2vw,62px)}
.toolband .tbin{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.toolband .tbhead{max-width:64ch}
.toolband .tbhead h3{font-size:clamp(1.35rem,3vw,2rem);margin-top:12px;line-height:1.1}
.toolband .tbhead p{margin-top:11px;color:var(--ink-soft);font-size:.96rem}
.toolband .tbq{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,235px),1fr));
  gap:16px;margin-top:28px;align-items:end}
.toolband .field label{color:var(--ink-soft)}
.toolband .out{border:1px solid var(--rule-strong);background:var(--surface);
  margin-top:26px;padding:24px 26px 26px}
.toolband .ob{display:flex;gap:16px;padding:16px 0;border-bottom:1px dashed var(--rule)}
.toolband .ob:last-of-type{border-bottom:0}
.toolband .ob .bar{flex:none;width:3px;background:var(--brand-mid);align-self:stretch}
.toolband .ob.hot .bar{background:var(--signal)}
.toolband .ob .t{color:var(--ink)}
.toolband .ob .d{color:var(--signal)}
.toolband .ob .x{color:var(--ink-soft)}
.toolband .outfoot{border-top:1px solid var(--rule);color:var(--muted)}
@media(min-width:980px){
  .toolband .out{display:grid;grid-template-columns:1fr 1fr;gap:0 36px;align-items:start}
  .toolband .outfoot{grid-column:1/-1}
}

/* hero variants — one per division, so they do not all open the same way */
.hero.artled .herogrid{grid-template-columns:1fr 1.02fr}
.hero.artflip .herogrid{grid-template-columns:.98fr 1fr}
.hero.artflip .herogrid>*:first-child{order:2}
.hero.artflip .herogrid>*:last-child{order:1}
@media(max-width:1000px){
  .hero.artled .herogrid,.hero.artflip .herogrid{grid-template-columns:1fr}
  .hero.artflip .herogrid>*:first-child{order:1}
  .hero.artflip .herogrid>*:last-child{order:2}
}
.hero.centred{padding-block:clamp(44px,6vw,72px) clamp(48px,7vw,84px)}
.hero.centred .herogrid{grid-template-columns:1fr;text-align:center;justify-items:center;gap:30px}
.hero.centred .herogrid>*:first-child{max-width:800px}
.hero.centred h1{font-size:clamp(2rem,4.4vw,3.35rem)}
.hero.centred .lede{max-width:60ch;margin-inline:auto}
.hero.centred .herocta,.hero.centred .creds{justify-content:center}
.hero.centred .countdown{max-width:640px;margin-inline:auto;text-align:left}
.hero.centred .artframe{max-width:720px;width:100%}

/* --------------------------------------------------- 19. INSTITUTIONAL LAYOUT
   Used by CABCEP. A board should look like a standards body: light, dense,
   document-like, opening on a search rather than on a marketing hero. */
.inst{background:var(--paper);padding-block:clamp(40px,5vw,66px) clamp(34px,4vw,52px);
  border-bottom:1px solid var(--rule)}
.inst .wrap{max-width:1120px}
.inst .kick{font-family:var(--mono);font-size:.63rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--signal);font-weight:600}
.inst h1{margin-top:16px;font-size:clamp(1.9rem,4.1vw,3.1rem);max-width:19ch}
.inst .sub{margin-top:18px;font-size:clamp(1rem,1.9vw,1.14rem);color:var(--ink-soft);
  max-width:60ch;line-height:1.6}
.insttop{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,54px);align-items:end}
@media(max-width:940px){.insttop{grid-template-columns:1fr;gap:30px}}

/* the search block — the centrepiece, in place of a hero form */
.rsearch{border:2px solid var(--brand-deep);background:var(--surface);
  box-shadow:0 30px 70px -48px rgba(0,0,0,.55)}
.rsearch .rshead{background:var(--brand-deep);color:#fff;padding:14px 20px;
  font-family:var(--mono);font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.rsearch .rshead span{opacity:.72}
.rsearch .rsbody{padding:20px;display:grid;gap:13px}
.rsearch .two{display:grid;grid-template-columns:1fr 1fr;gap:13px}
@media(max-width:520px){.rsearch .two{grid-template-columns:1fr}}
.rsearch .btn{width:100%}
.rsearch .rsnote{font-size:.78rem;color:var(--muted);line-height:1.5}

/* results */
.rres{border-top:1px solid var(--rule);max-height:330px;overflow:auto}
.rres .ritem{padding:15px 20px;border-bottom:1px solid var(--rule);display:grid;
  grid-template-columns:1fr auto;gap:10px 16px;align-items:center}
.rres .ritem:last-child{border-bottom:0}
.rres .rn{font-family:var(--display);font-weight:700;font-size:.98rem;font-stretch:var(--wide)}
.rres .rm{font-size:.84rem;color:var(--ink-soft);margin-top:3px}
.rres .rtag{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 9px;border:1px solid var(--brand-deep);color:var(--brand-deep);white-space:nowrap}
.rres .rtag.q{background:var(--brand-deep);color:#fff}
.rres .rempty{padding:26px 20px;color:var(--muted);font-size:.9rem;line-height:1.6}

/* four pillars, AEE's feature row done as a board would */
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:clamp(34px,4vw,50px)}
.pillars a{background:var(--surface);padding:26px 24px 28px;text-decoration:none;display:block;
  transition:background .25s var(--ease)}
.pillars a:hover{background:var(--tint)}
.pillars svg{width:26px;height:26px;color:var(--brand-deep)}
.pillars .pt{display:block;font-family:var(--display);font-weight:700;font-size:1.06rem;
  color:var(--ink);margin-top:15px;font-stretch:var(--wide);line-height:1.2}
.pillars .pd{display:block;font-size:.9rem;color:var(--ink-soft);margin-top:10px;line-height:1.58}
.pillars .pl{font-family:var(--mono);font-size:.61rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--signal);margin-top:14px;display:block;font-weight:600}

/* credential catalogue — AEE's badge showcase, re-cut for other bodies' marks */
.cat{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,268px),1fr));
  gap:16px;margin-top:34px}
.catcard{border:1px solid var(--rule-strong);background:var(--surface);padding:0;display:flex;
  flex-direction:column;text-decoration:none;transition:transform .28s var(--ease),box-shadow .28s var(--ease)}
.catcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.catcard .ctop{padding:18px 20px;border-bottom:1px solid var(--rule);display:flex;
  align-items:center;gap:13px}
.catcard .ctop svg{width:22px;height:22px;color:var(--brand-deep);flex:none}
.catcard .ctrack{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--signal);font-weight:600}
.catcard .cbody{padding:20px;flex:1}
.catcard h4{font-size:1.08rem;line-height:1.2;color:var(--ink)}
.catcard .cwho{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:var(--muted);margin-top:9px}
.catcard p{font-size:.9rem;color:var(--ink-soft);margin-top:12px;line-height:1.58}
.catcard .cfoot{padding:13px 20px;border-top:1px solid var(--rule);background:var(--tint);
  font-family:var(--mono);font-size:.61rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand-deep);font-weight:600}
.catcard.gap{border-color:var(--signal);border-style:dashed;border-width:1.5px}
.catcard.gap .ctrack,.catcard.gap .cfoot{color:var(--signal)}
.catcard.gap .cfoot{background:var(--signal-pale)}
.catcard.gap .ctop svg{color:var(--signal)}

/* notices — the thing that brings people back */
.notices{border-top:2px solid var(--brand-deep);margin-top:32px}
.notice{display:grid;grid-template-columns:132px 1fr;gap:20px;padding:18px 0;
  border-bottom:1px solid var(--rule);align-items:baseline}
@media(max-width:620px){.notice{grid-template-columns:1fr;gap:6px}}
.notice .nd{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;color:var(--muted);
  text-transform:uppercase}
.notice .nt{font-size:.98rem;line-height:1.55;color:var(--ink)}
.notice .nt b{font-weight:600}
.notice.flag .nd{color:var(--signal);font-weight:600}

/* the standing disclosure, used everywhere on this site */
.declare{border:1px solid var(--signal);border-left-width:4px;background:var(--signal-pale);
  padding:22px 26px;margin:30px 0}
.declare b{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--signal);margin-bottom:10px}
.declare p{margin:0 0 11px;font-size:.95rem;line-height:1.6}
.declare p:last-child{margin-bottom:0}

/* --------------------------------------------------- 20. LONG APPLICATION FORM
   The company listing application. Long by necessity — it carries licensing,
   insurance and coverage evidence — so it is banded into numbered fieldsets. */
.appform{margin-top:34px}
.fset{border:1px solid var(--rule-strong);background:var(--surface);margin-bottom:18px}
.fset > .fhead{background:var(--tint);border-bottom:1px solid var(--rule);padding:16px 22px;
  display:flex;gap:16px;align-items:baseline}
.fset .fn{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;color:var(--signal);
  font-weight:600;flex:none}
.fset .ft{font-family:var(--display);font-weight:700;font-size:1.04rem;font-stretch:var(--wide);
  color:var(--ink);line-height:1.2}
.fset .fw{font-size:.86rem;color:var(--muted);margin-top:5px;line-height:1.5}
.fset .fbody{padding:22px;display:grid;gap:16px}
.fset .two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fset .three{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
@media(max-width:700px){.fset .two,.fset .three{grid-template-columns:1fr}}
.fset .hint{font-size:.82rem;color:var(--muted);line-height:1.5}
.checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:10px}
.chk{display:flex;gap:11px;align-items:flex-start;border:1.5px solid var(--field-border);
  background:var(--field-bg);padding:13px 14px;cursor:pointer;min-height:48px;
  transition:border-color .22s var(--ease),background .22s var(--ease)}
.chk:hover{border-color:var(--brand-mid)}
.chk.sel{border-color:var(--brand-deep);border-width:2.5px;padding:11.5px 12.5px;background:var(--brand-pale)}
.chk input{width:auto;min-height:0;padding:0;margin:2px 0 0;flex:none;accent-color:var(--brand-deep)}
.chk span{font-size:.9rem;line-height:1.4;color:var(--ink)}
.declbox{border-left:3px solid var(--brand-deep);background:var(--brand-pale);padding:18px 20px}
.declbox label{display:flex;gap:12px;align-items:flex-start;cursor:pointer;margin-bottom:13px}
.declbox label:last-child{margin-bottom:0}
.declbox input{width:auto;min-height:0;padding:0;margin:3px 0 0;flex:none;accent-color:var(--brand-deep)}
.declbox span{font-size:.9rem;line-height:1.55;color:var(--ink)}

/* the three verification tiers, side by side */
.tiergrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
  gap:16px;margin-top:32px}
.tcard{border:1.5px solid var(--rule-strong);background:var(--surface);padding:24px 22px 26px}
.tcard.mid{border-color:var(--brand-mid)}
.tcard.top{border-color:var(--brand-deep);border-width:2.5px;padding:23px 21px 25px}
.tcard .tlvl{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--signal);font-weight:600}
.tcard h4{margin-top:11px;font-size:1.14rem}
.tcard .tmeans{font-size:.92rem;color:var(--ink-soft);margin-top:11px;line-height:1.55;
  padding-bottom:15px;border-bottom:1px solid var(--rule)}
.tcard ul{list-style:none;padding:0;margin:15px 0 0;display:grid;gap:9px}
.tcard li{position:relative;padding-left:24px;font-size:.87rem;line-height:1.5;color:var(--ink-soft)}
.tcard li::before{content:"";position:absolute;left:1px;top:.5em;width:7px;height:7px;
  background:var(--brand-mid);transform:rotate(45deg)}
.tcard.top li::before{background:var(--brand-deep)}

/* --------------------------------------------------- 21. PER-DIVISION ARCHITECTURE
   Four companies, four ways of opening a page. These are not skins. */

/* ---- SOLAR CANADA: light, price-first. A course marketplace, not a brochure. */
.hero.lightstage{background:var(--paper);color:var(--ink);border-bottom:1px solid var(--rule)}
.hero.lightstage::before,.hero.lightstage::after{display:none}
.hero.lightstage h1{color:var(--ink)}
.hero.lightstage h1 em{color:var(--brand-deep);font-style:normal}
.hero.lightstage .lede{color:var(--ink-soft)}
.hero.lightstage .eyebrow{color:var(--signal)}
.hero.lightstage .creds span{color:var(--muted);border-color:var(--rule-strong);background:var(--surface)}
.hero.lightstage .countdown{background:var(--brand-pale);border-color:var(--brand-deep)}
.hero.lightstage .countdown .lbl{color:var(--brand-deep)}
.hero.lightstage .countdown .days{color:var(--ink)}
.hero.lightstage .countdown .unit,.hero.lightstage .countdown p{color:var(--ink-soft)}
.hero.lightstage .countdown strong{color:var(--ink)}
.hero.lightstage .artframe{border-color:var(--rule-strong);background:var(--surface);
  box-shadow:var(--shadow);backdrop-filter:none;-webkit-backdrop-filter:none}
.hero.lightstage .artframe .cap{border-top-color:var(--rule)}
.hero.lightstage .artframe .cap span{color:var(--muted)}
.hero.lightstage .artframe .cap b{color:var(--brand-deep)}
.hero.lightstage .art .lbl{fill:var(--muted)}
.hero.lightstage .art .lbl.on{fill:var(--brand-deep)}
.hero.lightstage .art .lbl.hot{fill:var(--signal)}
.hero.lightstage .art .val{fill:var(--ink)}
.hero.lightstage .art .thin{stroke:var(--rule-strong)}
.hero.lightstage .btn.ghost{color:var(--ink);border-color:var(--rule-strong)}

/* the price rail — Solar Canada's signature element, straight under the hero */
.pricerail{background:var(--night);color:#fff;padding:0 var(--gut)}
.prin{max-width:var(--wrap);margin:0 auto;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
.prin > a{padding:22px 18px 24px;text-decoration:none;color:#fff;display:block;
  border-right:1px solid rgba(255,255,255,.14);transition:background .25s var(--ease)}
.prin > a:last-child{border-right:0}
.prin > a:hover{background:rgba(255,255,255,.07)}
.prin .pk{display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brand-lt)}
.prin .pv{display:block;font-family:var(--display);font-stretch:var(--wide);font-weight:800;
  font-size:clamp(1.5rem,3.4vw,2.05rem);letter-spacing:-.04em;margin-top:9px;line-height:1}
.prin .pn{display:block;font-size:.87rem;color:rgba(255,255,255,.76);margin-top:8px;line-height:1.4}
.prin .pgo{font-family:var(--mono);font-size:.59rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--signal-lt);margin-top:12px;display:block}
@media(max-width:760px){.prin > a{border-right:0;border-bottom:1px solid rgba(255,255,255,.14)}
  .prin > a:last-child{border-bottom:0}}

/* ---- GROUND SOURCE: the page descends. A spine with depth markers. */
.descent{position:relative;padding-block:clamp(48px,6.5vw,84px)}
.descent .dwrap{max-width:900px;margin:0 auto;padding-inline:var(--gut);position:relative}
.descent .dwrap::before{content:"";position:absolute;left:calc(var(--gut) - 1px);top:0;bottom:0;
  width:2px;background:linear-gradient(180deg,var(--brand-lt),var(--brand-deep) 40%,var(--rule));
  opacity:.5}
@media(max-width:700px){.descent .dwrap::before{display:none}}
.dstep{position:relative;padding-left:clamp(0px,5vw,58px);margin-bottom:clamp(40px,5vw,64px)}
.dstep:last-child{margin-bottom:0}
.dstep .dmark{position:absolute;left:calc(var(--gut) - 40px);top:6px;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;color:var(--signal);
  background:var(--paper);padding:4px 0;font-weight:600}
@media(max-width:700px){.dstep{padding-left:0}.dstep .dmark{position:static;display:block;margin-bottom:10px}}
.dstep h3{font-size:clamp(1.25rem,2.8vw,1.75rem);line-height:1.15}
.dstep p{margin-top:14px;color:var(--ink-soft);line-height:1.68;max-width:64ch}
.dstep .dnum{position:absolute;left:calc(var(--gut) - 9px);top:10px;width:16px;height:16px;
  background:var(--paper);border:2.5px solid var(--brand-deep);border-radius:50%}
@media(max-width:700px){.dstep .dnum{display:none}}

/* ---- ENERIS: a technical dossier. Sticky spec rail beside the document. */
.dossier{padding-block:clamp(46px,6vw,80px)}
.dosgrid{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut);
  display:grid;grid-template-columns:266px 1fr;gap:clamp(28px,4vw,56px);align-items:start}
@media(max-width:940px){.dosgrid{grid-template-columns:1fr;gap:26px}}
.specrail{border:1px solid var(--rule-strong);background:var(--surface);position:sticky;top:96px}
@media(max-width:940px){.specrail{position:static}}
.specrail .srh{background:var(--night);color:#fff;padding:13px 18px;font-family:var(--mono);
  font-size:.6rem;letter-spacing:.2em;text-transform:uppercase}
.specrow{display:grid;grid-template-columns:1fr auto;gap:10px;padding:12px 18px;
  border-bottom:1px solid var(--rule);align-items:baseline}
.specrow:last-child{border-bottom:0}
.specrow .sk{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted)}
.specrow .sv{font-family:var(--display);font-weight:700;font-size:.94rem;color:var(--ink);
  font-stretch:var(--wide);text-align:right}
.specrow .sv.hot{color:var(--signal)}
.specrail .srf{padding:15px 18px;background:var(--tint);border-top:1px solid var(--rule)}
.specrail .srf .btn{width:100%;min-height:44px;padding:11px 18px;font-size:.88rem}

/* --------------------------------------------------- 22. AUTHORIZED PROVIDER BAND
   Solar Canada's exam-provider status, given the prominence it deserves.
   Deliberately typographic: NABCEP's mark-use policy requires written permission
   for its logo and wordmark, and nominative descriptive wording is what is
   permitted without it. If written permission and the official artwork arrive,
   drop the file into .provmark and delete the .provtype block. */
.provband{background:var(--surface);border-top:3px solid var(--brand-mid);
  border-bottom:1px solid var(--rule);padding-block:clamp(28px,4vw,44px)}
.provin{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut);
  display:grid;grid-template-columns:auto 1fr auto;gap:clamp(20px,3.4vw,46px);align-items:center}
@media(max-width:900px){.provin{grid-template-columns:1fr;gap:22px;text-align:left}}
.provseal{width:clamp(104px,11.5vw,146px);height:auto;flex:none}
.provtype .pl{font-family:var(--mono);font-size:.63rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--signal);font-weight:600}
.provtype .pm{font-family:var(--display);font-stretch:var(--wide);font-weight:800;
  font-size:clamp(1.42rem,3.6vw,2.15rem);letter-spacing:-.035em;color:var(--ink);
  margin-top:10px;line-height:1.08}
.provtype .pm em{font-style:normal;color:var(--brand-deep)}
.provtype .ps{font-size:.95rem;color:var(--ink-soft);margin-top:12px;max-width:62ch;line-height:1.55}
.provtype .pf{font-size:.76rem;color:var(--muted);margin-top:14px;max-width:70ch;line-height:1.5}
/* one even column, not a ragged staircase of differently sized chips */
.provwhere{display:grid;gap:8px;justify-items:stretch}
@media(max-width:900px){.provwhere{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}
.provwhere span{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);border:1px solid var(--rule-strong);
  padding:8px 13px;white-space:nowrap;text-align:center}
.provwhere span.hot{border-color:var(--signal);color:var(--signal);font-weight:600}

/* =====================================================================
   DARK MODE, THE LIGHT SURFACES — added 5 October 2026, pre-launch audit.

   The dark ramp inverts the brand and signal scales so they read as
   accents on a dark ground. That is right for TEXT and wrong for the
   handful of components that paint one of those colours as a BACKGROUND
   and then put white on top: in dark mode --signal and --brand-deep are
   LIGHT, so white on them lands at 2.4-2.5:1. A sitewide painted-pixel
   audit found 470 instances of it across Solar Canada alone, every one of
   them invisible to a light-mode check.

   Two rules, applied to the shared components:
     a surface painted with a dark-mode-light token takes dark ink;
     text painted with --brand-lt on a dark ground takes the light end.
   ===================================================================== */
:root{--on-accent:#fff}

.alertbar{color:var(--on-accent)}
.alertbar a,.alertbar b,.alertbar strong,.alertbar span{color:inherit}
.drawer .dph{color:var(--dark-accent-ink,var(--brand-lt))}
.fcol h4,.fcontact h4{color:var(--dark-accent-ink,var(--stage-faint))}

:root[data-theme="dark"]{--on-accent:#0A2019;--dark-accent-ink:#F0902E}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--on-accent:#0A2019;--dark-accent-ink:#F0902E}
}

/* --- footer locations, 5 October 2026 -------------------------------------
   Three addresses above the legal line. Head office first, because that is
   the one that has to match the Google Business Profile exactly. Uses the
   same ink as the rest of the footer so it inherits the dark-mode fix. --- */
.flocs{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  gap:1rem 1.6rem;padding-bottom:1.1rem;margin-bottom:.2rem}
.flocs h5{font-family:var(--mono);font-size:.59rem;letter-spacing:.22em;
  text-transform:uppercase;font-weight:600;margin:0 0 .4rem;
  color:var(--dark-accent-ink,var(--stage-faint))}
.flocs address{font-style:normal;font-size:.86rem;line-height:1.55;
  color:var(--stage-soft,rgba(255,255,255,.82))}
@media(max-width:700px){.flocs{gap:.9rem}}

/* ---- measured ink, Solar Canada ----------------------------------
   light: {'light on-accent': 5.98, 'light accent-ink': 4.57, 'light signal-ink': 5.98, 'dark on-accent': 7.14, 'dark accent-ink': 4.63, 'dark signal-ink': 4.54, 'accent-ink on night': 4.53, 'signal-ink on night': 4.54}
   dark:  {'light on-accent': 5.98, 'light accent-ink': 4.57, 'light signal-ink': 5.98, 'dark on-accent': 7.14, 'dark accent-ink': 4.63, 'dark signal-ink': 4.54, 'accent-ink on night': 4.53, 'signal-ink on night': 4.54}
   --on-accent      text that sits ON a painted accent surface
   --accent-ink     the brand hue AS text, on the page ground
   --signal-ink     the signal hue AS text, on the page ground
   --accent-surface the accent as a surface that carries text
   --dark-accent-ink is kept as an alias so the rules already
   written against it pick up this site's value instead of
   EnerSolution's orange.                                  ---- */
:root{--accent-ink:#D93C07;--accent-ink-night:#F97C52;--accent-surface:#1A66A8;--on-accent:#FFFFFF;--signal-ink:#1A66A8;--signal-ink-night:#5CA6E6;--dark-accent-ink:#F97C52}
:root[data-theme="dark"]{--accent-ink:#E48B6D;--accent-ink-night:#E48B6D;--accent-surface:#57A3E5;--on-accent:#0B0F0E;--signal-ink:#5CA6E6;--signal-ink-night:#5CA6E6;--dark-accent-ink:#E48B6D}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--accent-ink:#E48B6D;--accent-ink-night:#E48B6D;--accent-surface:#57A3E5;--on-accent:#0B0F0E;--signal-ink:#5CA6E6;--signal-ink-night:#5CA6E6;--dark-accent-ink:#E48B6D}
}


/* ---------- technical artwork ---------- */
.art{display:block;width:100%;height:auto}
.art .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  fill:var(--stage-faint)}
.art .lbl.on{fill:var(--brand-lt)}
.art .lbl.hot{fill:var(--signal-lt)}
.art .val{font-family:var(--display);font-weight:700;font-size:19px;fill:#fff;letter-spacing:-.02em}
.art .thin{stroke:var(--stage-rule-2);stroke-width:1;fill:none}
/* boxes that must stay legible whichever ground the drawing sits on */
.art .cardfill{fill:var(--surface)}
.art .lbl.oncard{fill:var(--ink)}
.art .lbl.oncard.on{fill:var(--brand-deep)}
.art .flow{stroke-dasharray:7 9;stroke-linecap:round}
@media (prefers-reduced-motion:no-preference){
  .art .flow.dn{animation:flowdn 2.6s linear infinite}
  .art .flow.up{animation:flowup 2.6s linear infinite}
  .art .pulse{animation:pulse 3.4s ease-in-out infinite}
  .art .ray{animation:ray 3.2s ease-in-out infinite}
}
@keyframes flowdn{to{stroke-dashoffset:-32}}
@keyframes flowup{to{stroke-dashoffset:32}}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes ray{0%,100%{opacity:.25}50%{opacity:.85}}

/* artwork on a light ground uses ink instead of stage colours */
.artlight .lbl{fill:var(--muted)}
.artlight .lbl.on{fill:var(--brand-deep)}
.artlight .val{fill:var(--ink)}
.artlight .thin{stroke:var(--rule-strong)}

/* the frame the hero artwork sits in */
.artframe{position:relative;border:1px solid var(--stage-rule-2);
  background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  padding:22px 22px 18px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.artframe .cap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--stage-rule)}
.artframe .cap span{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--stage-faint)}
.artframe .cap b{color:var(--brand-lt);font-weight:600}


/* a drawing placed inside an article */
.fig{margin:38px 0 8px;border:1px solid var(--rule);background:var(--surface)}
.fig .figbody{padding:24px 26px 14px}
.fig figcaption{border-top:1px solid var(--rule);background:var(--tint);
  padding:13px 26px;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;
  color:var(--ink-soft);display:flex;gap:14px;justify-content:space-between;flex-wrap:wrap}
.fig figcaption b{color:var(--brand-deep);font-weight:600}
.fig .art .lbl{fill:var(--muted)}
.fig .art .lbl.on{fill:var(--brand-deep)}
.fig .art .lbl.hot{fill:var(--signal)}
.fig .art .val{fill:var(--ink)}
.fig .art .thin{stroke:var(--rule-strong)}


/* --- announcement bar, 10 October 2026 ------------------------------------
   The blue "prices are published" line is gone. This is NABCEP orange with
   near-black ink, which is 5.21:1 - the white it used to carry on orange would
   have been 3.11:1 and failed. The flag and the button are dark pills: white on
   #1F2222 is 16.2:1, and the pill reads 5.21:1 against the bar behind it, so
   both the text and the shape itself clear AA. The date chips are white, 3.11:1
   against the bar, which is the non-text threshold, with 15.9:1 ink on them.
   Selectors are .alertbar-prefixed because base.css sets .alertbar a/b/span to
   var(--on-accent) and would otherwise win on specificity. Order o-n22. ---- */
.alertbar{background:#F8612E;color:#1F2222;border-bottom:1px solid #C44A1E}
.alertbar a,.alertbar b,.alertbar strong,.alertbar span{color:#1F2222}
.alertin{padding-top:9px;padding-bottom:9px;gap:11px;font-size:.88rem}
.alertbar .annflag{display:inline-flex;align-items:center;gap:7px;
  background:#1F2222;color:#FFFFFF;font-family:var(--mono);font-weight:700;
  font-size:.71rem;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 10px 5px 9px;border-radius:2px;white-space:nowrap}
.alertbar .annflag::before{content:"";width:7px;height:7px;border-radius:50%;
  background:#F8A77F;flex:none;animation:annpulse 1.9s ease-in-out infinite}
@keyframes annpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.7)}}
@media (prefers-reduced-motion:reduce){.alertbar .annflag::before{animation:none}}
.alertbar .anntxt{font-weight:600}
.alertbar .anndates{display:flex;gap:5px;flex-wrap:wrap;justify-content:center}
.alertbar .anndates b{background:#FFFFFF;color:#1F2222;border-radius:2px;
  padding:4px 8px;font-size:.76rem;letter-spacing:.03em;line-height:1.15}
.alertbar .annbtn{background:#1F2222;color:#FFFFFF;text-decoration:none;
  font-weight:700;font-size:.79rem;letter-spacing:.015em;padding:7px 13px;
  border-radius:2px;white-space:nowrap}
.alertbar .annbtn:hover,.alertbar .annbtn:focus-visible{background:#000000}
@media(max-width:820px){
  .alertin{gap:8px;padding-top:11px;padding-bottom:11px}
  .alertbar .anntxt{width:100%}
  .alertbar .anndates b{font-size:.71rem;padding:3px 6px;letter-spacing:.02em}
  .alertbar .annbtn{font-size:.76rem;padding:6px 12px}
}

/* price table — the whole point of the site */
.ptab{display:grid;gap:0;border:1px solid var(--rule);border-radius:3px;overflow:hidden;margin:34px 0}
.prow{display:grid;grid-template-columns:1.55fr 2.4fr .8fr;gap:22px;padding:22px 24px;
  border-bottom:1px solid var(--rule);align-items:start;background:var(--surface)}
.prow:last-child{border-bottom:0}
.prow.head{background:var(--night);color:#fff;border-bottom:0;
  font-family:var(--mono);font-size:.63rem;letter-spacing:.24em;text-transform:uppercase;padding:14px 24px}
.prow.head>div{color:rgba(255,255,255,.62)}
.prow .pn{font-family:var(--display);font-weight:650;font-size:1.03rem;
  font-variation-settings:"wdth" var(--wide);line-height:1.2}
.prow .pn small{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--signal);margin-top:7px;font-weight:600}
.prow .pd{font-size:.93rem;color:var(--ink-soft);line-height:1.6}
.prow .pp{font-family:var(--display);font-weight:700;font-size:1.32rem;text-align:right;
  font-variation-settings:"wdth" var(--wide);white-space:nowrap}
.prow .pp span{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;
  color:var(--muted);font-weight:500;margin-top:5px;text-transform:uppercase}
.prow.flag{background:var(--brand-pale)}
@media(max-width:780px){
  .prow{grid-template-columns:1fr;gap:12px;padding:20px}
  .prow .pp{text-align:left}
  .prow.head{display:none}
}
/* the impartiality statement — a deliberate, quiet block */
.fair{border-left:3px solid var(--signal);background:var(--signal-pale);
  padding:26px 28px;border-radius:3px;margin:30px 0}
.fair b{display:block;font-family:var(--mono);font-size:.63rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--signal);margin-bottom:10px}
.fair p{margin:0;font-size:.97rem;line-height:1.62}

/* ======= Solar Canada home, pass 2, 1 Oct 2026 ======= */

/* --- chrome: Ali asked for a bigger logo, and a phone and ENROL you cannot
       miss. The nav bar grows to hold them. --- */
header.nav .logo img{height:clamp(84px,10.4vw,124px)}
header.nav.condensed .logo img{height:clamp(62px,7.4vw,88px)}
.navin:has(.logo.hasimg){min-height:138px}
.navphone{font-family:var(--display);font-size:clamp(1rem,1.5vw,1.26rem);font-weight:800;
  color:#fff;letter-spacing:-.01em}
.navphone::before{content:"\260E";font-size:.86em;margin-right:.4em;opacity:.75}
.navphone:hover{color:var(--signal-lt)}
header.nav .btn{min-height:50px;padding:12px 28px;font-size:1rem;font-weight:750;letter-spacing:.01em}
@media(max-width:900px){
  header.nav .logo img{height:clamp(58px,9.6vw,78px)}
  .navin:has(.logo.hasimg){min-height:104px}
}
@media(max-width:620px){
  header.nav .logo img{height:54px}
  .navin:has(.logo.hasimg){min-height:88px}
  .alertbar{font-size:.8rem;line-height:1.35;padding-block:.5rem}
}

/* --- banner --- */
.nh-hero{position:relative;padding:clamp(2.4rem,6.4vw,5rem) 0 clamp(1.8rem,4vw,3rem);
  background:
    radial-gradient(118% 88% at 82% 8%, var(--brand-pale) 0%, transparent 62%),
    linear-gradient(180deg,var(--surface) 0%,var(--paper) 100%)}
.nh-herogrid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(1.5rem,4vw,3.4rem);align-items:center}
.nh-eyebrow{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand-deep);margin:0 0 .85rem;font-weight:600}
.nh-eyebrow-warm{color:var(--signal)}
.nh-hero h1{font-family:var(--display);font-weight:800;line-height:1.04;margin:0 0 1rem;
  font-size:clamp(2.2rem,5.8vw,4.1rem);letter-spacing:-.016em;color:var(--ink)}
.nh-hero h1 em{font-style:normal;color:var(--brand-deep)}
/* brand-deep is tuned to be legible on WHITE; on the dark panel it drops to
   2.2:1. dark-accent-ink is the same orange lifted for a dark background. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .nh-hero h1 em{color:var(--dark-accent-ink,var(--brand-lt))}
}
:root[data-theme="dark"] .nh-hero h1 em{color:var(--dark-accent-ink,var(--brand-lt))}
.nh-lede{font-size:clamp(1.02rem,1.6vw,1.22rem);line-height:1.55;color:var(--ink-soft);
  margin:0 0 1.6rem;max-width:34em}
.nh-cta{display:flex;flex-wrap:wrap;gap:.7rem}
.nh-btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  padding:.86rem 1.5rem;border-radius:999px;font-weight:700;font-size:1rem;
  text-decoration:none;border:1.5px solid transparent;
  transition:transform .12s ease,box-shadow .18s ease,background-color .18s ease}
.nh-btn:hover{transform:translateY(-1px)}
.nh-primary{background:var(--signal);color:#fff;border-color:var(--signal)}
.nh-primary:hover{box-shadow:0 16px 32px -18px var(--signal)}
.nh-ghost{background:transparent;color:var(--ink);border-color:var(--rule-strong)}
.nh-ghost:hover{border-color:var(--brand-deep);color:var(--brand-deep)}
.nh-ghost-light{color:#fff;border-color:rgba(255,255,255,.44)}
.nh-ghost-light:hover{color:#fff;border-color:#fff;background:rgba(255,255,255,.1)}

.nh-herofig{display:flex;flex-direction:column;align-items:center;gap:.9rem}
.nh-seal{display:inline-flex;align-items:center;justify-content:center;background:#fff;
  border-radius:50%;padding:clamp(.6rem,1.4vw,1.1rem);
  box-shadow:0 18px 44px -22px rgba(0,0,0,.42),0 0 0 1px rgba(0,0,0,.06)}
.nh-seal img{display:block;width:100%;height:auto;max-width:300px}
.nh-seal-lg img{max-width:220px}
.nh-sealcap{margin:0;text-align:center;font-family:var(--mono);font-size:.74rem;
  letter-spacing:.07em;color:var(--muted);text-transform:uppercase;line-height:1.7}
.nh-sealcap b{color:var(--ink);letter-spacing:.08em}
.nh-verify{font-size:.8rem;font-weight:650;color:var(--signal);text-decoration:none}
.nh-verify:hover{text-decoration:underline}

.nh-facts{border-block:1px solid var(--rule);background:var(--surface)}
.nh-factsin{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.nh-fact{padding:1.05rem 1.2rem;display:flex;flex-direction:column;gap:.2rem;
  border-left:1px solid var(--rule)}
.nh-fact:first-child{border-left:0}
.nh-fact b{font-size:.98rem;color:var(--ink);font-weight:700}
.nh-fact span{font-size:.84rem;color:var(--muted)}

/* --- generic section --- */
.nh-sec{padding:clamp(2.6rem,6vw,4.6rem) 0}
.nh-tint{background:var(--tint)}
.nh-head{margin:0 0 clamp(1.4rem,3vw,2.2rem);max-width:50em}
.nh-head h2{font-family:var(--display);font-weight:800;letter-spacing:-.014em;
  font-size:clamp(1.65rem,3.5vw,2.6rem);line-height:1.1;margin:0 0 .5rem;color:var(--ink)}
.nh-head p{margin:0;color:var(--muted);font-size:1.02rem;line-height:1.55}
.nh-head-light h2{color:#fff}
.nh-head-light p{color:rgba(255,255,255,.72)}

/* --- courses --- */
.nh-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(17.5rem,1fr));gap:1rem}
.nh-card{position:relative;display:flex;flex-direction:column;gap:.5rem;
  background:var(--surface);border:1px solid var(--rule);border-radius:18px;
  padding:1.35rem 1.3rem 1.2rem;transition:border-color .16s ease,transform .14s ease,box-shadow .18s ease}
.nh-card:hover{border-color:var(--brand-lt);transform:translateY(-2px);
  box-shadow:0 22px 44px -28px rgba(0,0,0,.5)}
.nh-card-lead{border-color:var(--brand-mid);box-shadow:0 0 0 1px var(--brand-mid) inset}
.nh-card-exam{border-style:dashed}
.nh-card-soon{background:var(--tint)}
.nh-badge{align-self:flex-start;font-family:var(--mono);font-size:.63rem;letter-spacing:.1em;
  text-transform:uppercase;background:var(--brand-deep);color:#fff;border-radius:999px;
  padding:.28rem .62rem;font-weight:700}
.nh-badge-alt{background:var(--signal)}
.nh-badge-soon{background:var(--muted)}
.nh-chip{font-family:var(--mono);font-size:.71rem;letter-spacing:.07em;color:var(--muted);
  text-transform:uppercase}
.nh-cname{font-family:var(--display);font-weight:780;font-size:1.2rem;line-height:1.18;
  color:var(--ink);margin:0;display:flex;flex-direction:column;gap:.18rem}
.nh-cname small{font-weight:500;font-size:.84rem;color:var(--muted);font-family:var(--body)}
.nh-cline{font-size:.92rem;line-height:1.52;color:var(--ink-soft);margin:0;flex:1 1 auto}
.nh-cmeta{margin:0;font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;
  color:var(--brand-deep);text-transform:uppercase}
.nh-cfoot{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap;
  margin-top:.5rem;padding-top:.8rem;border-top:1px solid var(--rule)}
.nh-pricewrap{display:flex;align-items:baseline;gap:.35rem;flex-wrap:wrap}
/* Ali, 5 Oct 2026: the struck old price was grey and easy to miss, and the
   discounted price read as brown rather than a discount. The old price is now
   near-black and bold so the saving is obvious, and the new price is a plain
   red. The red has two values because one cannot serve both schemes: #C62828
   is 5.6:1 on the light card, and would be 2.9:1 on the dark one, so dark mode
   takes the lighter #FF6B6B at 6.0:1. */
.nh-was{font-size:1rem;font-weight:700;color:var(--ink);text-decoration:line-through;
  text-decoration-thickness:2px;text-decoration-color:var(--ink);opacity:.9}
.nh-price{font-family:var(--display);font-weight:800;font-size:1.56rem;
  color:var(--price-red,#C62828);letter-spacing:-.012em}
.nh-cur{font-family:var(--mono);font-size:.7rem;font-weight:600;letter-spacing:.1em;
  color:var(--muted)}
.nh-poa{font-size:.95rem;font-weight:650;color:var(--muted)}
.nh-enrol{display:inline-flex;align-items:center;gap:.3rem;background:var(--signal);color:#fff;
  border-radius:999px;padding:.52rem 1.05rem;font-size:.88rem;font-weight:700;text-decoration:none;
  transition:box-shadow .18s ease,transform .12s ease}
.nh-enrol:hover{transform:translateY(-1px);box-shadow:0 12px 24px -14px var(--signal)}
.nh-card-soon .nh-enrol{background:var(--brand-deep)}
.nh-cdetail{font-size:.84rem;font-weight:600;color:var(--brand-deep);text-decoration:none;
  margin-top:.15rem}
.nh-cdetail:hover{text-decoration:underline}
.nh-more{margin:1.4rem 0 0;font-size:.94rem;color:var(--muted)}
.nh-more a{color:var(--brand-deep);font-weight:650}

/* --- steps --- */
.nh-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem}
.nh-step{background:var(--surface);border:1px solid var(--rule);border-radius:16px;padding:1.4rem 1.3rem}
.nh-num{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;
  border-radius:50%;background:var(--brand-pale);color:var(--brand-deep);
  font-family:var(--mono);font-weight:700;font-size:.95rem;margin-bottom:.7rem}
.nh-step h3{font-family:var(--display);font-weight:740;font-size:1.1rem;margin:0 0 .35rem;color:var(--ink)}
.nh-step p{margin:0;font-size:.93rem;line-height:1.5;color:var(--ink-soft)}

/* --- NABCEP band --- */
.nh-nabcep{background:var(--surface);border-block:1px solid var(--rule);
  padding:clamp(2.6rem,6vw,4.4rem) 0}
.nh-nabin{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);
  gap:clamp(1.6rem,4vw,3.2rem);align-items:center}
.nh-nabseal{display:flex;flex-direction:column;align-items:center;gap:.8rem}
.nh-nabtext h2{font-family:var(--display);font-weight:800;font-size:clamp(1.55rem,3.2vw,2.4rem);
  line-height:1.12;margin:0 0 .7rem;color:var(--ink);letter-spacing:-.014em}
.nh-nablede{font-size:1.04rem;line-height:1.58;color:var(--ink-soft);margin:0 0 1.2rem;max-width:44em}
.nh-feegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.9rem;
  max-width:46em}
.nh-feebox{display:grid;gap:.28rem;background:var(--brand-pale);border:1px solid var(--rule);
  border-radius:14px;padding:1rem 1.1rem}
.nh-feebox-alt{background:var(--signal-pale)}
.nh-feelbl{font-family:var(--mono);font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--brand-deep);font-weight:700}
.nh-feebox-alt .nh-feelbl{color:var(--signal)}
.nh-feeval{font-family:var(--display);font-weight:800;font-size:1.85rem;color:var(--ink);line-height:1}
.nh-feenote{font-size:.88rem;line-height:1.5;color:var(--ink-soft)}
.nh-feelink{display:inline-block;margin-top:.9rem;font-size:.9rem;font-weight:700;color:var(--signal);
  text-decoration:none}
.nh-feelink:hover{text-decoration:underline}
.nh-nablegal{margin:1.1rem 0 0;font-size:.78rem;line-height:1.55;color:var(--muted);max-width:56em}

/* --- ticker, in the spirit of the one on nabcep.org, our own content --- */
.nh-ticker{overflow:hidden;background:var(--signal);color:#fff;padding:.62rem 0;
  border-block:1px solid rgba(0,0,0,.14)}
.nh-tkrun{display:inline-flex;gap:0;white-space:nowrap;
  animation:nh-scroll 46s linear infinite;will-change:transform}
.nh-ticker:hover .nh-tkrun{animation-play-state:paused}
.nh-tk{font-family:var(--mono);font-size:.82rem;letter-spacing:.07em;text-transform:uppercase;
  font-weight:600;padding-inline:1.6rem;position:relative}
.nh-tk::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.55)}
@keyframes nh-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .nh-tkrun{animation:none}
  .nh-ticker{overflow-x:auto}
}

/* --- dates, on the night stage --- */
.nh-dark{background:var(--night);color:#fff}
.nh-dgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));
  gap:clamp(1.2rem,3vw,2.4rem)}
.nh-dh{font-family:var(--mono);font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.6);margin:0 0 .9rem;font-weight:700}
.nh-dates{display:grid;gap:.6rem}
.nh-date,.nh-ev{display:grid;gap:.24rem;text-decoration:none;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);
  border-radius:14px;padding:1rem 1.1rem;transition:background-color .18s ease,border-color .18s ease}
.nh-date:hover,.nh-ev:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3)}
.nh-date{border-left:3px solid var(--brand-lt)}
.nh-d-exam{border-left-color:var(--signal-lt)}
.nh-dchip{font-family:var(--mono);font-size:.64rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--brand-lt);font-weight:700}
.nh-d-exam .nh-dchip{color:var(--signal-lt)}
.nh-dwhen{font-family:var(--display);font-weight:780;font-size:1.06rem;color:#fff}
.nh-dtitle{font-size:.94rem;color:rgba(255,255,255,.84)}
.nh-dwhere{font-size:.84rem;color:rgba(255,255,255,.56)}
.nh-evwhen{font-family:var(--mono);font-size:.76rem;letter-spacing:.07em;color:var(--signal-lt);font-weight:700}
.nh-evname{font-family:var(--display);font-weight:780;font-size:1.06rem;color:#fff}
.nh-evwhere{font-size:.88rem;color:rgba(255,255,255,.8)}
.nh-evnote{font-size:.85rem;line-height:1.5;color:rgba(255,255,255,.58);margin-top:.2rem}
.nh-evchk{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.42);margin-top:.3rem}

/* --- why --- */
.nh-why{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem}
.nh-w{background:var(--surface);border:1px solid var(--rule);border-radius:14px;padding:1.2rem}
.nh-w h3{font-family:var(--display);font-weight:740;font-size:1.04rem;margin:0 0 .35rem;color:var(--ink)}
.nh-w p{margin:0;font-size:.91rem;line-height:1.5;color:var(--ink-soft)}

/* --- the honest band, restyled --- */
.nh-honest{background:
   linear-gradient(180deg,var(--signal-pale) 0%,var(--paper) 72%)}
.nh-hgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:1rem}
.nh-hcard{background:var(--surface);border:1px solid var(--rule);border-radius:18px;
  padding:1.35rem 1.3rem;display:flex;flex-direction:column;gap:.5rem;
  border-top:3px solid var(--signal)}
.nh-hclaim{font-family:var(--body);font-style:italic;font-size:.92rem;color:var(--muted);
  text-decoration:line-through;text-decoration-color:var(--signal);text-decoration-thickness:1.5px}
.nh-htruth{font-family:var(--display);font-weight:800;font-size:1.18rem;line-height:1.22;
  margin:0;color:var(--ink);letter-spacing:-.01em}
.nh-hwhy{margin:0;font-size:.92rem;line-height:1.56;color:var(--ink-soft)}
.nh-hfoot{margin:1.5rem 0 0;font-size:.95rem;line-height:1.6;color:var(--ink-soft);max-width:62em;
  padding-top:1.1rem;border-top:1px solid var(--rule)}
.nh-hfoot a{color:var(--signal);font-weight:700;text-decoration:none}
.nh-hfoot a:hover{text-decoration:underline}

/* --- closing --- */
.nh-close{background:var(--brand-deep);color:#fff;padding:clamp(2.2rem,5vw,3.6rem) 0}
.nh-closein{display:flex;align-items:center;justify-content:space-between;gap:1.6rem;flex-wrap:wrap}
.nh-close h2{font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,3vw,2.2rem);
  margin:0 0 .4rem;letter-spacing:-.014em}
.nh-close p{margin:0;max-width:40em;color:rgba(255,255,255,.94);line-height:1.55}
.nh-closecta{display:flex;gap:.7rem;flex-wrap:wrap}
.nh-close .nh-primary{background:#fff;color:var(--brand-deep);border-color:#fff}
.nh-close .nh-primary:hover{box-shadow:0 16px 32px -18px rgba(0,0,0,.6)}

@media (max-width:860px){
  .nh-hero{padding-top:1.6rem}
  .nh-herogrid{grid-template-columns:1fr;gap:1.1rem}
  .nh-herofig{order:-1;flex-direction:row;align-items:center;gap:.85rem;justify-content:flex-start}
  .nh-seal{padding:.35rem}
  .nh-seal img{max-width:88px}
  .nh-sealcap{text-align:left;font-size:.68rem;line-height:1.5}
  .nh-hero h1{font-size:clamp(1.95rem,8.4vw,2.7rem)}
  .nh-lede{font-size:1rem;margin-bottom:1.1rem}
  .nh-btn{flex:1 1 auto;padding:.8rem 1rem;font-size:.95rem}
  .nh-nabin{grid-template-columns:1fr}
  .nh-nabseal .nh-seal{padding:.9rem}
  .nh-nabseal .nh-seal img{max-width:180px}
  .nh-nabseal .nh-sealcap{text-align:center}
  .nh-factsin{grid-template-columns:1fr}
  .nh-fact{border-left:0;border-top:1px solid var(--rule)}
  .nh-fact:first-child{border-top:0}
  .nh-closein{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .nh-btn,.nh-card,.nh-enrol{transition:none}
  .nh-btn:hover,.nh-card:hover,.nh-enrol:hover{transform:none}
}

/* ===== DARK MODE: the accent surfaces, 5 October 2026 ==============
   In dark mode --signal and --brand-deep become LIGHT, so every badge,
   pill and closing band that paints one of them and puts white on top
   fell to 2.4-2.5:1. Found by a painted-pixel audit of all 54 pages,
   not by eye and not by a computed-colour check. The ink flips; the
   surfaces are left exactly as designed. ================================= */
.nh-badge,.nh-badge-alt,.nh-badge-soon,.nh-enrol,.nh-close,.trustrip b{
  color:var(--on-accent)}
.nh-close h2{color:var(--on-accent)}
.nh-close p{color:var(--on-accent-soft,rgba(255,255,255,.94))}
.nh-close .nh-primary{color:var(--on-accent-strong,var(--brand-deep))}
.nh-close .nh-ghost-light{color:var(--on-accent);border-color:var(--on-accent-rule,rgba(255,255,255,.44))}
.nh-close .nh-ghost-light:hover{color:var(--on-accent);border-color:var(--on-accent)}
.nh-evchk{color:var(--evchk-ink,rgba(255,255,255,.62))}
.nh-ticker,.nh-tk,.nh-primary{color:var(--on-accent)}
.nh-dchip{color:var(--dark-accent-ink,var(--brand-lt))}

:root{--price-red:#C62828}
:root[data-theme="dark"]{
  --price-red:#FF6B6B;
  --on-accent-soft:rgba(10,32,25,.94); --on-accent-strong:#0A2019;
  --on-accent-rule:rgba(10,32,25,.5);  --evchk-ink:rgba(255,255,255,.62)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --price-red:#FF6B6B;
    --on-accent-soft:rgba(10,32,25,.94); --on-accent-strong:#0A2019;
    --on-accent-rule:rgba(10,32,25,.5);  --evchk-ink:rgba(255,255,255,.62)}
}

/* --- /register: the "this is not the enrolment form" notice -------------
   Ali, 5 Oct 2026: people who want an OPEN course were filling this form and
   waiting for a reply instead of enrolling in two clicks. The four open
   courses were removed from the checkbox list entirely, and this notice sits
   above the form so the mistake is hard to make. Signal-coloured rather than
   red: it is a redirection, not an error. --- */
.rgwarn{border:1.5px solid var(--signal);border-left-width:5px;border-radius:14px;
  background:var(--signal-pale);padding:1.15rem 1.25rem 1.05rem;margin:0 0 1.5rem}
.rgwarn p{margin:0 0 .6rem;color:var(--ink-soft);font-size:.96rem;line-height:1.55}
.rgwarn p:last-child{margin-bottom:0}
.rgwarn-h{font-family:var(--display);font-weight:800;font-size:1.12rem;color:var(--ink);
  letter-spacing:-.01em}
.rgwarn-h::before{content:"\26A0";color:var(--signal);margin-right:.5rem;font-weight:400}
.rgwarn b{color:var(--ink)}
.rgwarn-cta{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.9rem}
.rgwarn-cta .btn{min-height:46px}
.rgwarn-f{border-top:1px solid var(--rule);padding-top:.75rem;margin-top:.9rem;
  font-size:.9rem;color:var(--muted)}
.opthint{margin:-.2rem 0 .7rem;font-size:.88rem;line-height:1.5;color:var(--muted)}
.opthint a{color:var(--signal);font-weight:650}
@media(max-width:560px){.rgwarn-cta .btn{width:100%}}

/* --- Start Your Own Solar Company: the three-cell opener --- */
.soGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:.9rem;
  margin:1.6rem 0 2.2rem}
.soCell{background:var(--brand-pale);border:1px solid var(--rule);border-radius:16px;
  padding:1.2rem 1.2rem 1.1rem;position:relative}
.soN{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;color:var(--signal);
  font-weight:700;display:block;margin-bottom:.45rem}
.soCell h3{font-family:var(--display);font-weight:780;font-size:1.08rem;margin:0 0 .35rem;
  color:var(--ink);letter-spacing:-.008em}
.soCell p{margin:0;font-size:.92rem;line-height:1.52;color:var(--ink-soft)}

/* --- "on request" where a course has no published price --- */
.poa{font-style:normal;font-family:var(--display);font-weight:700;font-size:1.02rem;
  color:var(--muted)}
.pp .cur{font-family:var(--mono);font-size:.62rem;font-weight:600;letter-spacing:.1em;
  color:var(--muted);margin-left:.3rem;display:inline-block;vertical-align:.35em}

/* --- footer: aligned columns, a phone you can see, tidier legal --- */
footer .footgrid{align-items:start}
footer .fcol h4,footer .fcontact h4{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;margin:0 0 .9rem;
  color:var(--dark-accent-ink,var(--brand-lt))}
footer .fcol ul{margin:0;padding:0;list-style:none;display:grid;gap:.52rem}
footer .fcol a{font-size:.92rem;line-height:1.35;text-decoration:none}
footer .fcol a:hover{text-decoration:underline}
footer .fphone{font-family:var(--display);font-weight:800;
  font-size:clamp(1.3rem,2.4vw,1.75rem);letter-spacing:-.015em;color:#fff;
  text-decoration:none;display:inline-block;margin-bottom:.3rem}
footer .fphone:hover{color:var(--signal-lt)}
footer .fhours{font-size:.84rem;line-height:1.5;margin:0 0 1rem}
footer .legal{border-top:1px solid rgba(255,255,255,.14);margin-top:clamp(1.6rem,3vw,2.4rem);
  padding-top:1.2rem}
footer .legal p{font-size:.78rem;line-height:1.65;max-width:78ch}

/* --- the Fast-Track buy box and day list, 1 Oct 2026 --- */
.se-buybox{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem;
  background:var(--brand-pale);border:1px solid var(--rule);border-radius:18px;
  padding:1.3rem 1.4rem;margin:1.6rem 0 2.2rem}
.se-buyl{display:flex;flex-direction:column;gap:.25rem}
.se-lbl{font-family:var(--mono);font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--brand-deep);font-weight:700}
.se-price{font-family:var(--display);font-size:2rem;font-weight:800;color:var(--ink);line-height:1}
.se-price s{font-size:.6em;font-weight:600;color:var(--muted)}
.se-price em{font-style:normal;font-family:var(--mono);font-size:.42em;font-weight:600;
  letter-spacing:.1em;color:var(--muted)}
.se-note{font-size:.84rem;color:var(--ink-soft)}
.se-buyr{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem}
.se-next{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--signal);font-weight:700}
.se-days{margin:1rem 0 0;padding-left:1.2rem;display:grid;gap:.75rem}
.se-days li{line-height:1.6;color:var(--ink-soft)}
.se-days b{color:var(--ink)}
.se-after{margin-top:1rem}
@media(max-width:620px){
  .se-buybox{flex-direction:column;align-items:flex-start}
}

/* --- /book-exam-seat, 2 Oct 2026 --- */
.bk-top{display:flex;flex-wrap:wrap;gap:1.4rem;align-items:center;justify-content:space-between;
  background:var(--brand-pale);border:1px solid var(--rule);border-radius:18px;
  padding:1.3rem 1.4rem;margin:0 0 1.8rem}
.bk-price{display:flex;flex-direction:column;gap:.2rem;min-width:13rem}
.bk-lbl{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--brand-deep);font-weight:700}
.bk-val{font-family:var(--display);font-size:2.3rem;font-weight:800;color:var(--ink);line-height:1}
.bk-val em{font-style:normal;font-family:var(--mono);font-size:.34em;font-weight:600;
  letter-spacing:.1em;color:var(--muted)}
.bk-sub{font-size:.82rem;line-height:1.5;color:var(--ink-soft);max-width:30ch}
.bk-inc{margin:0;padding:0;list-style:none;display:grid;gap:.4rem;flex:1 1 16rem}
.bk-inc li{position:relative;padding-left:1.35rem;font-size:.93rem;line-height:1.45;color:var(--ink)}
.bk-inc li:before{content:"";position:absolute;left:0;top:.5em;width:.62rem;height:.62rem;
  border-radius:50%;background:var(--signal)}

.bkform{margin:1.6rem 0 0}
.bkgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem}
.bkf{display:flex;flex-direction:column;gap:.35rem}
.bkf>span{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:var(--ink-soft)}
.bkf>span small{font-family:var(--sans);letter-spacing:0;text-transform:none;font-weight:500;
  color:var(--muted);font-size:.78rem;margin-left:.3rem}
.bkf input,.bkf select,.bkf textarea{font:inherit;font-size:.96rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule);border-radius:11px;padding:.7rem .8rem;
  width:100%;box-sizing:border-box}
.bkf textarea{resize:vertical;min-height:4.5rem}
.bkf input:focus,.bkf select:focus,.bkf textarea:focus{outline:2px solid var(--signal);
  outline-offset:1px;border-color:var(--signal)}
.bkwide{grid-column:1/-1}
.bkhide{position:absolute;left:-9999px;opacity:0;height:0;width:0}
#bksend{margin-top:1.3rem}
.bknote{font-size:.84rem;line-height:1.55;color:var(--ink-soft);margin:.9rem 0 0;max-width:62ch}
.bksteps{margin:1rem 0 0;padding-left:1.2rem;display:grid;gap:.6rem}
.bksteps li{line-height:1.55;color:var(--ink-soft)}
.bksteps b,.bksteps strong{color:var(--ink)}
@media(max-width:620px){
  .bk-top{flex-direction:column;align-items:flex-start}
  .bk-val{font-size:2rem}
}

/* --- the three locations on the contact page, 5 Oct 2026 --- */
.addrlist{margin:.6rem 0 1rem;padding:0;list-style:none;display:grid;gap:.45rem}
.addrlist li{font-size:.95rem;line-height:1.55;color:var(--ink-soft)}
.addrlist strong{color:var(--ink)}