/* ==========================================================================
   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:#16324F;
  --brand-mid:#24567F;
  --brand-lt:#7FA6C6;
  --brand-pale:#E8EFF5;
  --signal:#9C2B2B;
  --signal-lt:#C75757;
  --signal-pale:#FAEDED;

  /* 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:#FAFBFC;
  --surface:#FFFFFF;
  --tint:#EDF1F5;
  --ink:#0B1822;
  --ink-soft:#32485A;
  --muted:#586E82;
  --rule:#DEE5EC;
  --rule-strong:#B4C1CD;

  /* FORM CONTROLS — must stay legible against --surface cards */
  --field-bg:#E6ECF2;
  --field-border:#7B90A2;
  --field-ink:#0B1822;
  --field-ph:#6E8397;

  /* DARK STAGE ----------------------------------------------- */
  --night:#0A1724;
  --night-2:#05221A;
  --night-3:#082C22;
  --stage-ink:#F2FAF6;
  --stage-soft:rgba(226,243,235,.74);
  --stage-faint:rgba(226,243,235,.46);
  --stage-rule:rgba(160,205,186,.20);
  --stage-rule-2:rgba(160,205,186,.34);

  /* TYPE ------------------------------------------------------ */
  --display:"Newsreader","Iowan Old Style",Georgia,serif;
  --body:"Inter Tight",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --wide:100%;
  --wider:100%;

  /* 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:#4ECB9C; --brand-mid:#3DB287; --brand-lt:#2E8264; --brand-pale:#0C2E24;
    --signal:#EE9A4E; --signal-lt:#F6B77F; --signal-pale:#2E1B0D;
    --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:#4ECB9C; --brand-mid:#3DB287; --brand-lt:#2E8264; --brand-pale:#0C2E24;
  --signal:#EE9A4E; --signal-lt:#F6B77F; --signal-pale:#2E1B0D;
  --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)}
:root[data-theme="dark"] .btn{color:#03130F}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn{color:#03130F}}

.btn.signal{background-color:var(--signal);border-color:var(--signal);color:#fff}
.btn.signal:hover{box-shadow:0 16px 34px -18px rgba(194,83,20,.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,#0A1724,#16324F,#24567F,#7FA6C6,#C9A0A0,#C75757,#9C2B2B)}

/* --------------------------------------------------- 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);
}
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(36,86,127,.42),transparent 64%),
    radial-gradient(42% 44% at 8% 96%,rgba(156,43,43,.24),transparent 66%),
    radial-gradient(36% 38% at 46% 52%,rgba(127,166,198,.16),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;
  background:linear-gradient(96deg,var(--brand-lt),#9BE3C6 55%,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(194,83,20,.20),rgba(194,83,20,.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}
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(36,86,127,.32),transparent 66%),
             radial-gradient(40% 40% at 4% 90%,rgba(156,43,43,.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(194,83,20,.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;
  background:radial-gradient(70% 60% at 100% 0%,rgba(18,145,106,.30),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}


/* ---------- 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)}


/* ==========================================================================
   CABCEP — design layer, 21 September 2026 (second pass)
   --------------------------------------------------------------------------
   Three instructions from Ali drive everything below.

   1. "Do not use same background color for cards back to back."
      Bands now declare their ground explicitly — see the rhythm table at the
      top of cabcep_home.py. Two dark bands exist and they are deliberately
      different darks.

   2. "The empty spaces between paragraph and fonts and cards not too much."
      One token, --band-y, sets every band's vertical padding, so the page's
      rhythm can be tightened or loosened in one place instead of in forty
      clamp() calls. It is roughly 60% of what base.css shipped. Card padding,
      section-head margins and paragraph leading come down with it. What does
      NOT come down is tap-target size or the gap between form fields, because
      tight is a desktop virtue and a mobile defect.

   3. "Be more creative, use different colors, not boring."
      Three accent hues join the navy and the red: gold, teal and violet. They
      are not decoration — they carry the category coding on the news band, the
      three registers and the icon set, so the colour is doing work a reader
      can use.

   --r was being referenced across this site and had never been defined
   anywhere, so every "rounded" card was rendering square. Defined here.
   ========================================================================== */
:root{
  --r:8px;
  --band-y:clamp(40px,5.4vw,72px);
  --acc-gold:#C98A1E;
  --acc-gold-lt:#E8B65A;
  --acc-teal:#1F7A6B;
  --acc-teal-lt:#3FA98C;
  --acc-violet:#5B4B8A;
  --acc-violet-lt:#8E7BC4;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --acc-gold:#E8B65A; --acc-gold-lt:#F2CE8C;
    --acc-teal:#4FC4A5; --acc-teal-lt:#7BD8C0;
    --acc-violet:#A794D8; --acc-violet-lt:#C3B6E6;
  }
}
:root[data-theme="dark"]{
  --acc-gold:#E8B65A; --acc-gold-lt:#F2CE8C;
  --acc-teal:#4FC4A5; --acc-teal-lt:#7BD8C0;
  --acc-violet:#A794D8; --acc-violet-lt:#C3B6E6;
}

/* ---- rhythm: the whole point of instruction 2 --------------------------- */
section{padding-block:var(--band-y)}
.sechead{margin-bottom:clamp(18px,2.6vw,28px);max-width:66ch}
.sechead h2{margin-top:9px}
.sechead p{margin-top:11px;font-size:.98rem;line-height:1.56}
.pagehero{padding-block:clamp(30px,4.4vw,52px) clamp(32px,4.8vw,58px)}
.pagehero h1{margin-top:10px}
.pagehero .lede{margin-top:13px;line-height:1.5}
.pagehero .herocta{margin-top:20px}
.article h2{margin-top:clamp(26px,3.6vw,38px)}
.article h3{margin-top:22px}
.article p{margin-top:11px;line-height:1.62}
.article ul,.article ol{margin-top:11px}
.article li{margin-top:6px;line-height:1.55}
.keybox,.warnbox{margin-top:22px;padding:18px 20px 19px}
.keybox p,.warnbox p{margin-top:11px}
.cta{padding-block:var(--band-y)}
.cta p{margin-top:12px}
.ctarow{margin-top:20px}
.related{gap:10px}
/* mobile keeps its air: a phone screen that is tight everywhere is a phone
   screen nobody can hit a link on. */
@media(max-width:620px){
  :root{--band-y:38px}
  .article p{margin-top:12px}
  .article li{margin-top:8px}
}

/* ---- hero -------------------------------------------------------------- */
.inst{background:var(--paper);position:relative;overflow:hidden}
.inst::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(40% 56% at 100% -10%,rgba(36,86,127,.09),transparent 64%),
             radial-gradient(34% 50% at -6% 8%,rgba(201,138,30,.10),transparent 66%)}
.inst .wrap{position:relative}
.instfacts{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:18px;padding-top:15px;
  border-top:1px solid var(--rule)}
.instfacts span{display:flex;align-items:baseline;gap:8px;font-size:.82rem;color:var(--muted);
  line-height:1.3}
.instfacts b{font-family:var(--display);font-weight:800;font-size:1.15rem;letter-spacing:-.03em;
  color:var(--brand-deep)}

/* the building band — the hero image */
.stockband{margin:clamp(20px,3vw,32px) 0 0;padding:0;border-top:1px solid var(--rule);
  padding-top:clamp(14px,2.2vw,22px)}
.stockband figcaption{margin-top:6px;font-size:.82rem;color:var(--muted);line-height:1.5;
  max-width:78ch}

/* ---- tables that have to scroll on a phone ----------------------------- */
/* .tw already scrolled, but nothing on screen said so, so on a 360px phone the
   committee table looked truncated rather than swipeable. Classic CSS scroll
   shadows: the inner pair are painted with background-attachment:local so they
   disappear as you reach each end. */
.tw{background-image:
    linear-gradient(to right,var(--surface) 30%,rgba(255,255,255,0)),
    linear-gradient(to left,var(--surface) 30%,rgba(255,255,255,0)),
    linear-gradient(to right,rgba(11,24,34,.16),rgba(11,24,34,0) 14px),
    linear-gradient(to left,rgba(11,24,34,.16),rgba(11,24,34,0) 14px);
  background-position:0 0,100% 0,0 0,100% 0;
  background-repeat:no-repeat;
  background-size:40px 100%,40px 100%,15px 100%,15px 100%;
  background-attachment:local,local,scroll,scroll}
@media(max-width:620px){
  .tw::before{content:"Swipe the table sideways";display:block;
    font-family:var(--mono);font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;
    color:var(--muted);padding:9px 14px 0;position:sticky;left:0}
}

/* ---- banner artwork in the dark page hero ------------------------------ */
/* .pbanner existed in common.page_hero and had never had a single line of CSS
   written for it anywhere, so any page that set one would have dropped a
   full-bleed unstyled drawing into its hero. It has a frame now. */
.pbanner{margin-top:clamp(20px,3vw,32px);border:1px solid var(--stage-rule-2);
  border-radius:var(--r);padding:clamp(14px,2.2vw,22px);
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  max-width:900px}
.pbanner .art{max-height:320px;margin-inline:auto}
.pbanner .magcov{max-width:260px}
.pbanner .pbcap{margin:12px 0 0;padding-top:11px;border-top:1px solid var(--stage-rule);
  font-size:.8rem;line-height:1.5;color:var(--stage-soft);max-width:72ch}
/* the drawings are authored for a light ground; on the dark hero their
   surfaces have to invert or they vanish into the panel */
.pbanner .rsc rect:first-child{fill:rgba(255,255,255,.08);stroke:rgba(255,255,255,.22)}
.pbanner .rsline{fill:rgba(255,255,255,.22)}
.pbanner .rsline.strong{fill:rgba(255,255,255,.72);opacity:1}
.pbanner .rsdot{fill:rgba(255,255,255,.10);stroke:var(--brand-lt)}
.pbanner .vsbox{fill:rgba(255,255,255,.08);stroke:rgba(255,255,255,.22)}
.pbanner .vsbar{fill:var(--brand-lt)}
.pbanner .vsh{fill:#fff}
.pbanner .vsp{color:rgba(255,255,255,.72)}
.pbanner .vsn{fill:var(--acc-gold-lt)}
.pbanner .btp{fill:var(--brand-lt);opacity:.5}
.pbanner .btable ellipse{fill:rgba(255,255,255,.07);stroke:var(--brand-lt)}
.pbanner .btable rect{fill:rgba(255,255,255,.14);stroke:var(--brand-lt)}
.pbanner .bblbl text{fill:var(--stage-faint)}
.pbanner .bband path[stroke]{stroke:var(--brand-lt)}
.pbanner .bband rect[fill="var(--surface)"],
.pbanner .bband path[fill="var(--surface)"]{fill:rgba(255,255,255,.10)}

/* ---- band 2: the standing disclosure ----------------------------------- */
.declareband{background:var(--signal-pale);border-block:1px solid
  color-mix(in srgb,var(--signal) 22%,transparent);padding-block:clamp(26px,3.4vw,42px)}
.declareband .wrap{max-width:1120px}
.declareband .declare{margin:0}

/* ---- band 4: nobody is accredited -------------------------------------- */
.nonebar{background:var(--paper)}
.nonein{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(20px,3.4vw,44px);
  align-items:center}
@media(max-width:820px){.nonein{grid-template-columns:1fr}}
.nonein h2{font-size:clamp(1.65rem,4vw,2.4rem);letter-spacing:-.045em;line-height:1.1;
  margin-top:9px;max-width:22ch}
.nonein h2 em{color:var(--signal);font-style:italic}
.nonel>p{margin-top:12px;color:var(--ink-soft);line-height:1.58;max-width:66ch;font-size:.97rem}
.nonelink{display:inline-block;margin-top:14px;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--signal);font-weight:600;
  text-decoration:none;border-bottom:1px solid transparent;transition:border-color .25s}
.nonelink:hover{border-bottom-color:var(--signal)}
.nonenum{text-align:center;border:1px solid var(--rule);border-top:3px solid var(--signal);
  border-radius:0 0 var(--r) var(--r);background:var(--surface);
  padding:clamp(18px,2.6vw,28px) clamp(22px,3vw,36px);min-width:min(100%,230px)}
.nonenum b{display:block;font-family:var(--display);font-weight:800;letter-spacing:-.06em;
  font-size:clamp(4rem,11vw,6.5rem);line-height:.86;color:var(--signal)}
.nonenum span{display:block;margin-top:10px;font-size:.82rem;line-height:1.45;
  color:var(--ink-soft);max-width:22ch;margin-inline:auto}

/* ---- band 7: the catalogue --------------------------------------------- */
.cata{background:var(--tint)}
.cata .wrap{max-width:1120px}
.catnote{margin-top:16px;font-size:.84rem;color:var(--muted);max-width:80ch;line-height:1.55}

/* ---- band 9: get listed ------------------------------------------------ */
.listband{background:var(--paper)}

/* ---- the footer, rebuilt ------------------------------------------------ */
footer{padding-block:clamp(34px,4.6vw,56px) 26px;position:relative;overflow:hidden}
footer::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(44% 60% at 96% -20%,rgba(36,86,127,.30),transparent 64%),
             radial-gradient(36% 52% at 2% 110%,rgba(156,43,43,.20),transparent 66%)}
footer .wrap{position:relative}
.footgrid{gap:clamp(22px,3vw,40px)}
.fblurb{font-size:.88rem;line-height:1.55;color:var(--stage-soft);margin-top:12px;max-width:44ch}
.fcols{gap:20px 18px}
.fcol h4{margin-bottom:11px;color:var(--acc-gold-lt)!important}
footer li{margin-top:7px;font-size:.855rem}
footer a:hover{color:var(--acc-gold-lt)}
/* the recruiting card */
.fcta{border:1px solid var(--stage-rule-2);border-radius:var(--r);
  background:linear-gradient(150deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  padding:20px 22px 22px}
.fcta .fl{font-family:var(--mono);font-size:.57rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--acc-gold-lt);font-weight:600}
.fcta h4{font-family:var(--display);font-size:1.08rem;letter-spacing:-.025em;color:#fff;
  margin:9px 0 0;text-transform:none}
.fcta p{font-size:.85rem;line-height:1.5;color:var(--stage-soft);margin:9px 0 15px}
/* the national mark repeated at the foot, so the last thing on the page says
   whose country this board is for */
.fnat{display:flex;align-items:center;gap:9px;margin-top:16px;color:#D52B1E}
.fnat b{font-family:var(--mono);font-size:.57rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--stage-soft);font-weight:600}
.legal{margin-top:clamp(24px,3.4vw,38px);padding-top:16px}
.legal p{font-size:.78rem;line-height:1.62}
.fpolicy{display:flex;flex-wrap:wrap;gap:8px 20px;list-style:none;margin:0 0 14px;padding:0}
.fpolicy a{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600}

/* ---- the masthead: leaf beside the wordmark, not beside the menu -------- */
/* Ali: "Move maple leaf image and CANADA closer to the right of CABCEP and far
   from the Menu bar." The logo carried margin-right:auto, which pushed every
   following item — including the leaf — across to the nav. Moving the auto
   margin onto the mark itself keeps the leaf tight to the wordmark and puts
   the empty space where it belongs. Scoped with :has() so the other four
   divisions' mastheads are untouched. */
.navin:has(.natmark) .logo{margin-right:0}
.navin:has(.natmark) .natmark{margin-right:auto}
/* The mark aligns with the WORDMARK's line, not with the block's bottom. The
   sub-line "Canadian Board · Energy Practitioners" is wider than "CABCEP", so
   a bottom-aligned leaf sat level with the sub-line and read as part of it.
   Level with the wordmark it reads as a masthead device, which is what it is. */
.natmark{padding-left:0;margin-left:11px;border-left:0;align-self:flex-start;
  margin-top:clamp(4px,1vw,13px)}
.natmark svg{filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
.natmark b{color:var(--stage-soft)}
@media(max-width:1100px){.natmark b{display:inline}}
@media(max-width:760px){.natmark b{display:none}}
@media(max-width:560px){.natmark{margin-left:8px;margin-top:3px}}
/* the repeat in the footer is a plain inline mark, not a masthead device */
.fnat .natmark{margin:0;align-self:auto}

/* registry preview strip */
.reg{display:grid;gap:0;border:1px solid var(--rule);border-radius:3px;overflow:hidden;margin:34px 0}
.regrow{display:grid;grid-template-columns:1.3fr 1.5fr 1fr .9fr;gap:20px;padding:19px 22px;
  border-bottom:1px solid var(--rule);background:var(--surface);align-items:center}
.regrow:last-child{border-bottom:0}
.regrow.head{background:var(--night);color:#fff;padding:13px 22px;border-bottom:0;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase}
.regrow.head>div{color:rgba(255,255,255,.6)}
.regrow .rn{font-family:var(--display);font-weight:650;font-variation-settings:"wdth" var(--wide)}
.regrow .rc{font-size:.9rem;color:var(--ink-soft)}
.regrow .rb{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:var(--muted)}
.regrow .rv{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brand-deep);font-weight:600}
@media(max-width:820px){
  .regrow{grid-template-columns:1fr;gap:7px;padding:18px 20px}
  .regrow.head{display:none}}
/* the disclosure block — repeated deliberately */
.state{border:1px solid var(--signal);border-left-width:3px;background:var(--signal-pale);
  padding:26px 28px;border-radius:3px;margin:32px 0}
.state b{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--signal);margin-bottom:10px}
.state p{margin:0 0 12px;font-size:.96rem;line-height:1.62}
.state p:last-child{margin-bottom:0}

/* ---------------------------------------------------- industry watch ---- */
.watch{background:linear-gradient(168deg,#12304C 0%,#0A1724 58%,#122236 100%);
  color:#fff;padding-block:var(--band-y);position:relative;overflow:hidden}
.watch::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(64% 78% at 88% -6%,rgba(201,138,30,.20),transparent 62%),
             radial-gradient(52% 70% at 4% 104%,rgba(156,43,43,.24),transparent 64%)}
.watch .wrap{position:relative}
.whead{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:end;
  margin-bottom:18px}
@media(max-width:820px){.whead{grid-template-columns:1fr;align-items:start}}
.whead h2{color:#fff;font-size:clamp(1.7rem,4.2vw,2.5rem);letter-spacing:-.042em;margin-top:8px}
.whead p{color:rgba(255,255,255,.74);margin-top:11px;line-height:1.58;max-width:68ch;
  font-size:.97rem}
.whead .eyebrow{color:var(--acc-gold-lt)}

/* the colour key — the legend for the stripes on the cards */
.wkeys{display:flex;flex-wrap:wrap;gap:7px 14px;margin-bottom:16px;padding-bottom:16px;
  border-bottom:1px solid rgba(255,255,255,.13)}
.wk{font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.62);display:inline-flex;align-items:center;gap:7px}
.wk::before{content:"";width:12px;height:3px;border-radius:2px;background:var(--tone)}

/* The grid itself. This rule was dropped in the first pass of the rewrite and
   the whole band rendered as nine full-width cards stacked in a column —
   caught on the first screenshot, which is what screenshots are for. */
.wgrid{display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}

/* every card carries its category colour, so the band can be scanned */
.wnote{--tone:var(--brand-lt);
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.13);
  border-radius:var(--r);padding:16px 18px 15px;display:flex;flex-direction:column;
  position:relative;overflow:hidden;
  transition:border-color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease)}
.wnote::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--tone)}
.wnote:hover{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.085);
  transform:translateY(-2px)}
.wnote.flag{box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.t-fed{--tone:#C75757}
.t-prov{--tone:#5FA8D3}
.t-comm{--tone:#E0A93C}
.t-muni{--tone:#8E7BC4}
.t-code{--tone:#3FA98C}
.t-work{--tone:#E07A4A}
.t-reg{--tone:#9AA8B6}

.wmeta{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase}
.wcat{color:var(--tone);font-weight:600}
.wwhen{color:rgba(255,255,255,.78);margin-left:auto;font-weight:600}
.wnote h3{color:#fff;font-size:1.01rem;line-height:1.28;letter-spacing:-.02em;margin:9px 0 0}
.wnote p{color:rgba(255,255,255,.74);font-size:.875rem;line-height:1.52;margin:8px 0 0;flex:1}
.wsrc{display:inline-flex;align-items:baseline;gap:6px;margin-top:12px;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tone);text-decoration:none;border-bottom:1px solid transparent;
  align-self:flex-start;transition:border-color .25s,color .25s}
.wsrc:hover{color:#fff;border-bottom-color:#fff}
.warr{font-size:.8em}
.wchk{font-family:var(--mono);font-size:.54rem!important;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.36)!important;margin-top:8px!important;flex:0}
.wfoot{margin-top:20px;padding-top:18px;
  border-top:1px solid rgba(255,255,255,.14);display:grid;
  grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center}
@media(max-width:820px){.wfoot{grid-template-columns:1fr}}
.wfoot p{color:rgba(255,255,255,.72);margin:0;line-height:1.55;max-width:74ch;font-size:.93rem}
.wfoot strong{color:#fff}

/* the same cards on the light news page */
.wgrid.plain{margin:14px 0 26px}
.wgrid.plain .wnote{background:var(--surface);border-color:var(--rule)}
.wgrid.plain .wnote:hover{border-color:var(--rule-strong);background:var(--tint)}
.wgrid.plain .wnote h3{color:var(--ink)}
.wgrid.plain .wnote p{color:var(--ink-soft)}
.wgrid.plain .wwhen{color:var(--ink)}
.wgrid.plain .wsrc:hover{color:var(--ink);border-bottom-color:var(--ink)}
.wgrid.plain .wchk{color:var(--muted)!important}

/* ------------------------------------------------------------- the voice -- */
.voice{background:var(--tint);padding-block:var(--band-y);position:relative;overflow:hidden}
.voice::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(48% 60% at 96% 0%,rgba(201,138,30,.14),transparent 66%)}
.voice .wrap{position:relative}
.vtop{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:start}
@media(max-width:760px){.vtop{grid-template-columns:1fr}.vtopr{display:none}}
.vtop h2{font-size:clamp(1.8rem,4.4vw,2.85rem);letter-spacing:-.045em;line-height:1.06;
  margin-top:9px}
.vlede{margin-top:13px;color:var(--ink-soft);font-size:clamp(1.02rem,2vw,1.17rem);
  line-height:1.5;max-width:52ch}
.vleaf{color:#D52B1E;opacity:.22;display:block}

/* the three figures, on screen before any argument is made */
.vstats{display:grid;gap:12px;margin:22px 0 0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,214px),1fr))}
.vstat{background:var(--surface);border:1px solid var(--rule);border-top:3px solid var(--brand-mid);
  border-radius:0 0 var(--r) var(--r);padding:17px 18px 18px}
.vstat b{display:block;font-family:var(--display);font-weight:800;letter-spacing:-.055em;
  font-size:clamp(2rem,5.4vw,2.9rem);color:var(--brand-deep);line-height:1}
.vstat span{display:block;margin-top:7px;font-size:.855rem;line-height:1.44;color:var(--ink-soft)}
.vstat.hot{border-top-color:var(--signal);background:var(--signal-pale)}
.vstat.hot b{color:var(--signal)}
.vsrc{margin-top:11px;font-size:.8rem;color:var(--muted);line-height:1.52;max-width:88ch}
.vsrc a{color:var(--brand-deep);font-weight:600}

/* the chart */
.vchart{margin:22px 0 0;background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--r);padding:18px clamp(14px,2.4vw,24px) 14px}
.vchcap{display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline;margin-bottom:10px;
  padding-bottom:10px;border-bottom:1px solid var(--rule)}
.vcheye{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--signal);font-weight:600}
.vchsub{font-size:.855rem;color:var(--muted)}

/* three beats, one sentence each */
.vbeats{display:grid;gap:10px;margin-top:18px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.vbeat{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;
  background:var(--surface);border:1px solid var(--rule);border-left:3px solid var(--acc-gold);
  padding:15px 17px;border-radius:0 var(--r) var(--r) 0}
.vbn{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;color:var(--acc-gold);
  font-weight:700;padding-top:3px}
.vbeat p{margin:0;font-size:.95rem;line-height:1.5;color:var(--ink-soft)}
.vbeat strong{color:var(--ink)}

.vpunch{margin-top:18px;background:var(--night);color:rgba(255,255,255,.86);
  border-left:4px solid var(--signal);border-radius:0 var(--r) var(--r) 0;
  padding:18px clamp(18px,2.6vw,26px);font-size:clamp(1rem,2.1vw,1.12rem);line-height:1.56;
  max-width:none}
.vpunch strong{color:#fff}

/* what a voice does */
.vwhat{margin-top:clamp(28px,3.6vw,44px)}
.vwhead h3{font-size:clamp(1.25rem,2.8vw,1.7rem);letter-spacing:-.035em}
.vsub{color:var(--muted);margin-top:6px;font-size:.93rem}
.vgrid{display:grid;gap:12px;margin-top:16px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.vitem{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
  padding:18px 19px 19px;display:flex;flex-direction:column;
  transition:border-color .3s var(--ease),transform .3s var(--ease)}
.vitem:hover{border-color:var(--brand-lt);transform:translateY(-2px)}
.vtag{font-family:var(--mono);font-size:.55rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);font-weight:600}
.vitem.live .vtag{color:var(--acc-teal)}
.vic{margin-top:11px}
.vic svg{width:24px;height:24px;color:var(--brand-deep)}
.vitem.live .vic svg{color:var(--acc-teal)}
.vitem h4{font-size:1.01rem;letter-spacing:-.02em;margin:9px 0 0;line-height:1.28}
.vitem p{color:var(--ink-soft);font-size:.885rem;line-height:1.5;margin:8px 0 0;flex:1}
.vitem>a{margin-top:12px;font-family:var(--mono);font-size:.63rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--signal);text-decoration:none;font-weight:600;
  align-self:flex-start;border-bottom:1px solid transparent;transition:border-color .25s}
.vitem>a:hover{border-bottom-color:var(--signal)}
.vcta{display:flex;flex-wrap:wrap;gap:11px;align-items:center;margin-top:22px}
.vctalink{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);text-decoration:none;font-weight:600}
.vctalink:hover{color:var(--brand-deep)}

/* ------------------------------------------------------------ registers -- */
.registers{padding-block:var(--band-y);background:var(--paper)}
.rgrid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.rcard{border:1px solid var(--rule);border-top:3px solid var(--brand-deep);
  background:var(--surface);padding:18px 20px 20px;display:flex;flex-direction:column;
  border-radius:0 0 var(--r) var(--r);
  transition:border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
.rcard.r2{border-top-color:var(--acc-teal)}
.rcard.r3{border-top-color:var(--acc-gold)}
.rcard:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.rtop{display:flex;align-items:center;gap:11px}
.ric svg{width:23px;height:23px;color:var(--brand-deep);display:block}
.rcard.r2 .ric svg{color:var(--acc-teal)}
.rcard.r3 .ric svg{color:var(--acc-gold)}
.rtag{font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--signal);font-weight:600}
.rcard h3{font-size:clamp(1.1rem,2.4vw,1.32rem);letter-spacing:-.03em;margin-top:9px;
  line-height:1.2}
.rcard>p{color:var(--ink-soft);font-size:.9rem;line-height:1.5;margin-top:9px}
.rpts{list-style:none;margin:13px 0 16px;padding:0;display:grid;gap:7px;flex:1}
.rpts li{position:relative;padding-left:18px;font-size:.845rem;color:var(--ink-soft);
  line-height:1.4}
.rpts li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;
  border-radius:2px;background:var(--brand-lt)}
.rcard.r2 .rpts li::before{background:var(--acc-teal)}
.rcard.r3 .rpts li::before{background:var(--acc-gold)}
.rcard .btn{align-self:flex-start}
.rverify{margin-top:20px;background:var(--brand-pale);border:1px solid var(--rule);
  border-radius:var(--r);padding:18px clamp(14px,2.4vw,24px) 10px}
.rvhead{margin-bottom:8px}
.rvhead h3{font-size:clamp(1.05rem,2.4vw,1.32rem);letter-spacing:-.03em;margin-top:6px}
.rnote{margin-top:16px;color:var(--muted);font-size:.86rem;max-width:86ch;line-height:1.55}

/* ------------------------------------------------------------- magazine -- */
.mag{background:linear-gradient(150deg,#1A2D52 0%,#12203A 46%,#2A1A2E 100%);
  color:#fff;padding-block:var(--band-y);position:relative;overflow:hidden}
.mag::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(56% 72% at 12% 4%,rgba(201,138,30,.20),transparent 62%),
             repeating-linear-gradient(115deg,rgba(255,255,255,.035) 0 1px,transparent 1px 13px)}
.mag .wrap{position:relative}
.magin{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(24px,4vw,56px);align-items:center}
@media(max-width:940px){.magin{grid-template-columns:1fr}.magart{order:-1}}
.magcopy h2{color:#fff;font-size:clamp(1.75rem,4.4vw,2.6rem);letter-spacing:-.042em;
  margin-top:8px;line-height:1.06}
.magcopy p{color:rgba(255,255,255,.78);line-height:1.58;margin-top:12px;max-width:62ch;
  font-size:.97rem}
.magcopy .eyebrow{color:var(--acc-gold-lt)}
.magcopy em{color:#fff;font-style:italic}
.magcopy strong{color:#fff}
.magpts{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.magpts li{position:relative;padding-left:20px;color:rgba(255,255,255,.76);font-size:.91rem;
  line-height:1.52}
.magpts li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;
  border-radius:2px;background:var(--acc-gold)}
.magpts b{color:#fff}
.magrow{display:flex;flex-wrap:wrap;gap:11px;margin-top:20px}
.magart{display:flex;flex-direction:column;align-items:center}
.magcap{margin-top:12px;font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.4);text-align:center}
.magstrip{position:relative;margin-top:clamp(22px,3vw,36px);padding-top:18px;
  border-top:1px solid rgba(255,255,255,.14);display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.magf b{display:block;font-size:.95rem;color:#fff;letter-spacing:-.01em}
.magf span{display:block;margin-top:5px;font-size:.85rem;line-height:1.48;
  color:rgba(255,255,255,.66)}

/* ------------------------------------------------------ multi-step forms -- */
.appform{border:1px solid var(--rule);background:var(--surface);border-radius:var(--r);
  padding:clamp(20px,3vw,34px);margin-top:26px}
.railwrap{margin-bottom:clamp(20px,2.8vw,30px)}
.railbar{height:3px;background:var(--rule);border-radius:2px;overflow:hidden}
.railbar i{display:block;height:100%;width:0;background:var(--signal);
  transition:width .45s cubic-bezier(.22,1,.36,1)}
.rail{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:16px}
.railstep{display:inline-flex;align-items:center;gap:8px;background:none;border:0;padding:0;
  cursor:default;font:inherit;color:var(--muted)}
.railstep i{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--rule-strong);
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);
  font-size:.62rem;font-style:normal;flex:none;transition:all .3s var(--ease)}
.railstep span{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase}
.railstep.on{color:var(--ink)}
.railstep.on i{border-color:var(--signal);background:var(--signal);color:#fff}
.railstep.done{color:var(--ink-soft);cursor:pointer}
.railstep.done i{border-color:var(--brand-deep);background:var(--brand-deep);color:#fff}
@media(max-width:700px){.railstep span{display:none}.rail{gap:10px}}
.appform fieldset{border:0;margin:0;padding:0}
.appform legend{font-family:var(--display);font-weight:700;
  font-size:clamp(1.15rem,2.6vw,1.45rem);letter-spacing:-.03em;color:var(--ink);
  padding:0;margin-bottom:6px}
.fintro{color:var(--ink-soft);font-size:.93rem;line-height:1.6;margin:0 0 20px;max-width:70ch}
.appform .fgrid{display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.appform label.f,.appform .fgroup{display:grid;gap:7px;font-family:var(--mono);
  font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  font-weight:600}
.appform label.f.wide,.appform .fgroup{grid-column:1/-1}
.appform .lt{display:block}
.appform label.f em{font-style:normal;color:var(--signal);letter-spacing:.1em}
.appform input[type=text],.appform input[type=email],.appform input[type=tel],
.appform input[type=url],.appform select,.appform textarea{
  font:inherit;font-family:var(--body);font-size:.96rem;letter-spacing:0;text-transform:none;
  color:var(--ink);padding:12px 14px;border:1.5px solid var(--rule-strong);background:#fff;
  border-radius:8px;width:100%}
.appform textarea{resize:vertical}
.appform input:focus-visible,.appform select:focus-visible,.appform textarea:focus-visible{
  outline:3px solid var(--signal);outline-offset:2px;border-color:var(--signal)}
.appform .bad{border-color:var(--signal);background:var(--signal-pale)}
.flab{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);font-weight:600}
.chkgrid{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.chkgrid.tight{grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr))}
.chk{display:flex;align-items:flex-start;gap:10px;padding:11px 13px;border:1.5px solid var(--rule);
  border-radius:8px;background:#fff;cursor:pointer;transition:border-color .2s,background .2s}
.chk:hover{border-color:var(--rule-strong)}
.chk input{margin-top:2px;accent-color:var(--signal);flex:none;width:16px;height:16px}
.chk span{font-family:var(--body);font-size:.9rem;letter-spacing:0;text-transform:none;
  color:var(--ink);font-weight:400;line-height:1.4}
.chk:has(input:checked){border-color:var(--signal);background:var(--signal-pale)}
.chk.wide{grid-column:1/-1}
.fhint{font-family:var(--body);font-size:.84rem;letter-spacing:0;text-transform:none;
  color:var(--muted);font-weight:400;margin:2px 0 0;line-height:1.5}
.repeat{display:grid;gap:14px}
.rep{display:grid;gap:14px;padding:18px;border:1px dashed var(--rule-strong);border-radius:10px;
  background:var(--tint);grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.rep label.f{grid-column:auto}
.drop{grid-column:1/-1;justify-self:start;background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--signal)}
.btn.small{padding:9px 16px;font-size:.76rem;min-height:0;justify-self:start}
.review{border:1px solid var(--rule);border-radius:10px;background:var(--tint);
  padding:clamp(16px,2.4vw,24px)}
.revlist{margin:0;display:grid;gap:0}
.revlist>div{display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr);gap:6px 20px;
  padding:11px 0;border-top:1px solid var(--rule)}
.revlist>div:first-child{border-top:0;padding-top:0}
@media(max-width:600px){.revlist>div{grid-template-columns:1fr;gap:2px}}
.revlist dt{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted)}
.revlist dd{margin:0;color:var(--ink);font-size:.94rem;line-height:1.5}
.revempty{color:var(--muted);margin:0}
.fnav{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;padding-top:22px;
  border-top:1px solid var(--rule)}
.appform .err{margin-top:18px}

/* ------------------------------------------------------- CABCEP artwork -- */
.bband{width:100%;max-height:300px}
.bblbl text{font-family:var(--mono);font-size:15px;letter-spacing:.18em;text-transform:uppercase;
  fill:var(--muted)}
@media(max-width:700px){.bblbl text{font-size:20px}}

/* programme timeline */
.tline{width:100%}
.tllbl{font-family:var(--body);font-size:16px;font-weight:650;fill:var(--ink)}
.tlnote{font-family:var(--mono);font-size:13px;letter-spacing:.06em;fill:var(--muted)}
.tlnote.sig{fill:var(--signal)}
.tlnote.warn{fill:var(--acc-gold)}
.tlnote.ok{fill:var(--acc-teal)}
.tlaxis text{font-family:var(--mono);font-size:13px;letter-spacing:.16em;fill:var(--muted)}
.tlgrid path{stroke:var(--rule);stroke-width:1;stroke-dasharray:3 6}
.tlnow{font-family:var(--mono);font-size:11px;letter-spacing:.16em;fill:var(--signal);
  font-weight:700}
@media(max-width:820px){
  .tllbl{font-size:21px}.tlnote{font-size:17px}.tlaxis text{font-size:17px}
  .tlnow{font-size:15px}}

/* verification steps */
.vsteps{width:100%}
.vsbox{fill:var(--surface);stroke:var(--rule);stroke-width:1.4}
.vsbar{fill:var(--brand-deep)}
.vsg:nth-child(2) .vsbar{fill:var(--acc-teal)}
.vsn{font-family:var(--mono);font-size:13px;letter-spacing:.2em;fill:var(--signal);font-weight:600}
.vsh{font-family:var(--display);font-size:21px;font-weight:700;letter-spacing:-.02em;fill:var(--ink)}
.vsp{font-family:var(--body);font-size:13.5px;line-height:1.45;color:var(--ink-soft)}
.vsarrow{stroke:var(--signal);stroke-width:2}

/* magazine cover */
.magcov{width:100%;max-width:400px;filter:drop-shadow(0 30px 50px rgba(0,0,0,.45))}
.mcm{font-family:var(--display);font-size:40px;font-weight:800;letter-spacing:-.03em;fill:#fff}
.mcs{font-family:var(--mono);font-size:11px;letter-spacing:.22em;fill:#7FA6C6}
.mci{font-family:var(--mono);font-size:10px;letter-spacing:.2em;fill:#C75757}
.mch{font-family:var(--display);font-size:38px;font-weight:800;letter-spacing:-.035em;fill:#fff}
.mcd{font-family:var(--body);font-size:15px;fill:rgba(255,255,255,.72)}
.mcl text{font-family:var(--mono);font-size:10px;letter-spacing:.18em;fill:rgba(255,255,255,.5)}

/* board table */
.btable{width:100%}
.btp{fill:var(--brand-deep);opacity:.42}
.btring{fill:none;stroke:var(--signal);stroke-width:3;stroke-dasharray:7 7}
.btplus{stroke:var(--signal);stroke-width:3;stroke-linecap:round}
.btlbl{font-family:var(--mono);font-size:14px;letter-spacing:.24em;fill:var(--signal);font-weight:600}
@media (prefers-reduced-motion:no-preference){
  .btring{animation:btspin 14s linear infinite;transform-origin:center}}
@keyframes btspin{to{stroke-dashoffset:-56}}

/* record stack */
.rstack{width:100%}
.rsc rect:first-child{fill:var(--surface);stroke:var(--rule);stroke-width:1.4}
.rsdot{fill:var(--brand-pale);stroke:var(--brand-deep);stroke-width:1.6}
.rstick{fill:none;stroke:var(--acc-teal);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.rsline{fill:var(--rule)}
.rsline.strong{fill:var(--brand-deep);opacity:.7}
.rspill{fill:var(--brand-pale);stroke:var(--brand-lt);stroke-width:1.2}
.rspill.alt{fill:color-mix(in srgb,var(--acc-teal) 14%,transparent);stroke:var(--acc-teal)}
.rspill.third{fill:color-mix(in srgb,var(--acc-gold) 16%,transparent);stroke:var(--acc-gold)}

/* --------------------------------------------------- contact and joining -- */
.joincall{background:linear-gradient(140deg,#16324F 0%,#0A1724 100%);color:#fff;
  border-radius:var(--r);padding:clamp(20px,3vw,30px);margin:0 0 30px;position:relative;
  overflow:hidden}
.joincall::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 80% at 100% 0%,rgba(201,138,30,.22),transparent 62%)}
.jcl{position:relative}
.jceye{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--acc-gold-lt);font-weight:600}
.joincall h2::before{display:none!important}
.joincall h2{color:#fff!important;font-size:clamp(1.25rem,3vw,1.75rem)!important;
  letter-spacing:-.035em;margin:9px 0 0!important;line-height:1.16}
.joincall p{color:rgba(255,255,255,.78)!important;margin-top:11px!important;line-height:1.55;
  font-size:.94rem}
.joincall .btn{margin-top:16px}

/* The drawing sat in a half-width column inside an already-narrow article
   measure and came out about 250px across, which made an empty chair look
   like a bullet point. It gets the full measure, above the text. */
.jhero{display:block;margin-bottom:8px}
.jhr{max-width:520px;margin:0 auto 18px}

.seatgrid{display:grid;gap:10px;margin:18px 0 6px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,238px),1fr))}
.seat{background:var(--surface);border:1px solid var(--rule);border-left:3px solid var(--brand-lt);
  border-radius:0 var(--r) var(--r) 0;padding:15px 17px 16px}
.seat h3{font-size:1rem!important;letter-spacing:-.02em;margin:0!important;line-height:1.25}
.seat .sk+h3{margin-top:7px!important}
.seat .sk{font-family:var(--mono);font-size:.55rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--signal);font-weight:700}
.seat p{font-size:.865rem!important;line-height:1.48;margin-top:7px!important;
  color:var(--ink-soft)}

.jproc{list-style:none;counter-reset:jp;margin:16px 0 0;padding:0;display:grid;gap:2px}
.jproc li{counter-increment:jp;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:6px 16px;padding:13px 0;border-top:1px solid var(--rule);align-items:baseline;
  color:var(--ink-soft);font-size:.93rem;line-height:1.5}
.jproc li::before{content:counter(jp,decimal-leading-zero);font-family:var(--mono);
  font-size:.66rem;letter-spacing:.1em;color:var(--acc-teal);font-weight:700}
.jproc b{color:var(--ink);font-weight:650}
@media(max-width:620px){
  .jproc li{grid-template-columns:1fr;gap:3px}}