/* ==========================================================================
   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:#0B5136;
  --brand-mid:#12885C;
  --brand-lt:#63C79B;
  --brand-pale:#E4F3EC;
  --signal:#C2571C;
  --signal-lt:#E8934E;
  --signal-pale:#FCF0E6;

  /* 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:#FBFCFB;
  --surface:#FFFFFF;
  --tint:#EFF4F1;
  --ink:#0C1F17;
  --ink-soft:#33493E;
  --muted:#5C7269;
  --rule:#DDE7E1;
  --rule-strong:#B3C6BC;

  /* FORM CONTROLS — must stay legible against --surface cards */
  --field-bg:#E8F0EB;
  --field-border:#7B9689;
  --field-ink:#0C1F17;
  --field-ph:#6B8378;

  /* DARK STAGE ----------------------------------------------- */
  --night:#06170F;
  --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:"Fraunces","Iowan Old Style",Georgia,serif;
  --body:"Public Sans",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,#0A7D53,#4CA83F,#8FBE2E,#DCC61F,#E89B2B,#D9682A,#C13F2C)}

/* --------------------------------------------------- 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(18,136,92,.40),transparent 64%),
    radial-gradient(42% 44% at 8% 96%,rgba(194,87,28,.24),transparent 66%),
    radial-gradient(36% 38% at 46% 52%,rgba(99,199,155,.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(18,136,92,.30),transparent 66%),
             radial-gradient(40% 40% at 4% 90%,rgba(194,87,28,.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)}


/* ==========================================================================
   EnerSolution — layout layer
   --------------------------------------------------------------------------
   Same two rules the CABCEP rebuild established, because they were the right
   ones:
     1. One spacing token, --band-y, sets every band's vertical rhythm.
     2. No two adjacent bands share a background. The audit fails the build if
        they do.
   --r was never defined in base.css, so every "rounded" card on every Ener
   site renders square unless a division defines it. Defined here.
   ========================================================================== */
:root{
  --r:8px;
  --band-y:clamp(42px,5.6vw,76px);
  --acc-sun:#D9A441;
  --acc-sun-lt:#EFC87B;
}

section{padding-block:var(--band-y)}
.sechead{margin-bottom:clamp(18px,2.6vw,30px);max-width:70ch}
.sechead h2{margin-top:9px}
.sechead p{margin-top:11px;font-size:.99rem;line-height:1.58}
.pagehero{padding-block:clamp(30px,4.4vw,54px) clamp(32px,4.8vw,58px)}
.pagehero h1{margin-top:10px;max-width:22ch}
.pagehero .lede{margin-top:13px;line-height:1.5}
.pagehero .herocta{margin-top:20px}
.article h2{margin-top:clamp(26px,3.6vw,40px)}
.article h3{margin-top:22px}
.article p{margin-top:11px;line-height:1.66}
.article li{margin-top:6px;line-height:1.58}
.keybox,.warnbox{margin-top:22px;padding:18px 20px 19px}
.cta{padding-block:var(--band-y)}
.wrap.narrow{max-width:860px}
@media(max-width:620px){:root{--band-y:38px}.article p{margin-top:12px}}

/* ---- the masthead phone number, which the live site does not have ------- */
.navphone{font-family:var(--mono);font-weight:600;letter-spacing:.02em;
  font-size:.86rem!important;color:#fff!important}
.navphone::before{content:"\260E";margin-right:7px;color:var(--brand-lt);font-size:1.05em}

/* ---- HERO (its own class: base.css .hero is a DARK hero) -------------------------------------------------------------- */
.eshero{background:var(--paper);position:relative;overflow:hidden;
  padding-block:clamp(30px,4.4vw,56px) clamp(34px,4.8vw,64px)}
.eshero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(42% 56% at 100% -8%,rgba(18,136,92,.12),transparent 64%),
             radial-gradient(34% 48% at -6% 10%,rgba(217,164,65,.14),transparent 66%)}
.eshero .wrap{position:relative}
.heroin{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(24px,4vw,56px);align-items:center}
@media(max-width:940px){.heroin{grid-template-columns:1fr}}
.kick{font-family:var(--mono);font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--signal);font-weight:600}
.heroc h1{margin-top:14px;font-size:clamp(2rem,4.8vw,3.3rem);letter-spacing:-.045em;
  line-height:1.03;max-width:16ch}
.heroc .sub{margin-top:16px;font-size:clamp(1rem,1.9vw,1.13rem);color:var(--ink-soft);
  line-height:1.6;max-width:56ch}
/* Three across, stacked, so the third never drops to a lonely second row —
   which is what a flex row did at the hero column's real width. */
.herofacts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 20px;
  margin-top:22px;padding-top:17px;border-top:1px solid var(--rule)}
.herofacts span{display:flex;flex-direction:column;gap:3px;font-size:.8rem;color:var(--muted);
  line-height:1.32}
@media(max-width:400px){.herofacts{grid-template-columns:1fr 1fr}}
.herofacts b{font-family:var(--display);font-weight:800;font-size:1.3rem;letter-spacing:-.04em;
  color:var(--brand-deep)}
.heroartcap{margin-top:12px;font-size:.82rem;color:var(--muted);line-height:1.5;
  text-align:center;max-width:52ch;margin-inline:auto}

/* ---- THE CORRECTION BAND ------------------------------------------------ */
.truth{background:var(--night);color:#fff;position:relative;overflow:hidden}
.truth::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(56% 72% at 92% 0%,rgba(194,87,28,.26),transparent 62%)}
.truth .wrap{position:relative}
.truthin{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(24px,4vw,52px);align-items:start}
/* The closed-programme column is six cards tall and the argument beside it is
   four paragraphs, which left a screen-and-a-half of dead space on desktop.
   The prose rides down with the reader instead. */
@media(min-width:941px){.truthl{position:sticky;top:clamp(86px,10vh,118px)}}
@media(max-width:940px){.truthin{grid-template-columns:1fr}}
.truth .eyebrow{color:var(--signal-lt)}
.truthl h2{color:#fff;font-size:clamp(1.7rem,4.2vw,2.5rem);letter-spacing:-.045em;
  margin-top:9px;line-height:1.08}
.truthl p{color:rgba(255,255,255,.76);margin-top:13px;line-height:1.62;max-width:62ch}
.truthl strong{color:#fff}
.truthp{border-left:3px solid var(--brand-lt);padding-left:18px;margin-top:20px!important}
.tl{font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.55);font-weight:600;display:block;margin-bottom:12px}

/* ---- programme cards (used in six places, so they earn their weight) ---- */
.pgrid{display:grid;gap:11px;grid-template-columns:repeat(auto-fit,minmax(min(100%,272px),1fr))}
.pgrid.one{grid-template-columns:minmax(0,1fr);max-width:520px}
.pgrid.tight{grid-template-columns:1fr;gap:8px}
.pcard{--tone:var(--brand-mid);
  display:flex;flex-direction:column;gap:5px;text-decoration:none;
  background:var(--surface);border:1px solid var(--rule);border-left:3px solid var(--tone);
  border-radius:0 var(--r) var(--r) 0;padding:14px 16px 15px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.pcard:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.pcard.s-open{--tone:var(--brand-mid)}
.pcard.s-waitlist{--tone:var(--acc-sun)}
.pcard.s-closed{--tone:#96A7A0}
.pcard.s-code{--tone:#3E7FA6}
.pj{font-family:var(--mono);font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);font-weight:600}
.pn{font-family:var(--display);font-weight:700;font-size:1.01rem;letter-spacing:-.02em;
  color:var(--ink);line-height:1.25}
.ph{font-size:.855rem;line-height:1.48;color:var(--ink-soft);flex:1}
.pchip{align-self:flex-start;margin-top:6px;font-family:var(--mono);font-size:.55rem;
  letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--tone);
  border:1px solid var(--tone);border-radius:20px;padding:3px 9px}
/* on the dark correction band the cards invert */
.truth .pcard{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.truth .pn{color:#fff}
.truth .ph{color:rgba(255,255,255,.7)}
.truth .pj{color:rgba(255,255,255,.5)}
.truth .pcard.s-closed{--tone:#8FA39B}

/* ---- OPEN BAND --------------------------------------------------------- */
.openband{background:var(--brand-pale)}
.openfoot{margin-top:20px;padding-top:18px;border-top:1px solid var(--rule-strong);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center}
@media(max-width:760px){.openfoot{grid-template-columns:1fr}}
.openfoot p{margin:0;color:var(--ink-soft);line-height:1.56;max-width:70ch;font-size:.94rem}

/* ---- EXPLAIN ----------------------------------------------------------- */
.explain{background:var(--paper)}
.explaingrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(22px,3.6vw,48px);align-items:center}
@media(max-width:940px){.explaingrid{grid-template-columns:1fr}}
.explaint h3{font-size:clamp(1.2rem,2.7vw,1.6rem);letter-spacing:-.03em}
.explaint p{margin-top:12px;color:var(--ink-soft);line-height:1.62}
.explainnote{font-size:.82rem!important;color:var(--muted)!important;
  border-left:2px solid var(--rule-strong);padding-left:12px}
.explaint .btn{margin-top:18px}

/* ---- photographs ------------------------------------------------------- */
/* Every photograph sits on a branded panel. If the image cannot load — and on
   any domain other than enersolution.ca it cannot, because the old platform's
   CDN is hotlink-protected — what shows is a clean tinted panel with the
   caption, not a broken-image icon. */
.shot,.heroshot,.shotgrid figure{position:relative;overflow:hidden;border-radius:var(--r);
  background:linear-gradient(150deg,var(--brand-pale),var(--tint));
  border:1px solid var(--rule)}
.phi{position:absolute;inset:auto 0 0 0;padding:12px 14px;font-family:var(--mono);
  font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-deep);
  opacity:.5;pointer-events:none}
.shot img,.heroshot img,.shotgrid img{position:relative;display:block;width:100%;height:auto}
.heroshot{margin:0 0 16px;aspect-ratio:16/7}
.heroshot img{height:100%;object-fit:cover;box-shadow:var(--shadow)}
.whosec{margin-top:clamp(26px,3.4vw,42px)}
.shotgrid{display:grid;gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.shotgrid figure{margin:0;aspect-ratio:4/3}
.shotgrid img{height:100%;object-fit:cover}
.shotgrid figcaption{position:absolute;left:0;right:0;bottom:0;margin:0;padding:10px 12px;
  background:linear-gradient(transparent,rgba(6,23,15,.82));font-family:var(--mono);font-size:.56rem;
  letter-spacing:.16em;text-transform:uppercase;color:#EAF3EE}
/* A mark is not a photograph. Contain it on white, pad it off the edges, and
   give the caption an opaque bar instead of a gradient that would sit on top
   of a logo's own whitespace. */
.shotgrid figure.mk{background:#fff}
.shotgrid figure.mk img{object-fit:contain;padding:18px 18px 34px}
.shotgrid figure.mk figcaption{background:var(--brand-pale);color:var(--brand-deep)}

/* ---- PROCESS ----------------------------------------------------------- */
.processband{background:var(--tint)}

/* ---- WHO --------------------------------------------------------------- */
.whoband{background:var(--paper)}
.whogrid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.who{background:var(--surface);border:1px solid var(--rule);border-top:3px solid var(--brand-deep);
  border-radius:0 0 var(--r) var(--r);padding:18px 19px 19px;text-decoration:none;
  display:flex;flex-direction:column;transition:transform .3s var(--ease),
  box-shadow .3s var(--ease)}
.who:nth-child(2){border-top-color:var(--brand-mid)}
.who:nth-child(3){border-top-color:var(--acc-sun)}
.who:nth-child(4){border-top-color:var(--signal)}
.who:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.wk{font-family:var(--mono);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--signal);font-weight:700}
.who h3{font-size:1.05rem;letter-spacing:-.025em;margin:9px 0 0;line-height:1.25;color:var(--ink)}
.who p{margin-top:9px;font-size:.885rem;line-height:1.52;color:var(--ink-soft);flex:1}
.wl{margin-top:13px;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--brand-deep);font-weight:700}

/* ---- TRUST ------------------------------------------------------------- */
.trustband{background:var(--tint)}
.trustin{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(22px,3.6vw,48px);align-items:start}
@media(max-width:940px){.trustin{grid-template-columns:1fr}}
.trustl h2{font-size:clamp(1.55rem,3.6vw,2.2rem);letter-spacing:-.04em;margin-top:9px;
  line-height:1.12}
.trustl p{margin-top:12px;color:var(--ink-soft);line-height:1.62;max-width:62ch}
.trustlist{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:2px}
.trustlist li{border-top:1px solid var(--rule);padding:14px 0;color:var(--ink-soft);
  font-size:.92rem;line-height:1.56}
.trustlist b{color:var(--ink)}

/* ---- BOOK -------------------------------------------------------------- */
.bookband{background:var(--paper)}

/* ---- the evaluation box, the signature element ------------------------- */
.ersbox{--et:var(--brand-mid);
  border:1px solid var(--rule);border-left:4px solid var(--et);background:var(--surface);
  border-radius:0 var(--r) var(--r) 0;padding:18px 20px 20px;margin:22px 0}
.ersbox.e-yes{--et:var(--brand-mid);background:var(--brand-pale)}
.ersbox.e-maybe{--et:var(--acc-sun);background:#FDF8EC}
.ersbox.e-no{--et:#7C8F87;background:var(--tint)}
.ersbox .el{font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--et);font-weight:700}
.ersbox h3{font-size:1.1rem!important;letter-spacing:-.025em;margin:8px 0 0!important;
  line-height:1.25}
.ersbox p{margin-top:9px!important;font-size:.92rem;line-height:1.56;color:var(--ink-soft);
  max-width:70ch}
.ersbox .btn{margin-top:15px}

/* ---- programme page furniture ------------------------------------------ */
.statusrow{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.chip{font-family:var(--mono);font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;border-radius:20px;padding:5px 11px;border:1px solid currentColor}
.chip.s-open{color:var(--brand-deep);background:var(--brand-pale)}
.chip.s-waitlist{color:#8A6314;background:#FDF8EC}
.chip.s-closed{color:#5E6E67;background:var(--tint)}
.chip.s-code{color:#2F6480;background:#EDF4F8}
.chip.j,.chip.d{color:var(--muted);background:transparent;font-weight:600}
.amounts{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
  padding:16px 18px 18px;margin-top:20px}
.al{font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--brand-deep);font-weight:700}
.amounts ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.amounts li{position:relative;padding-left:19px;font-size:.92rem;line-height:1.5;
  color:var(--ink-soft)}
.amounts li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;
  border-radius:2px;background:var(--brand-mid)}
.srcline{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;margin-top:16px;
  padding-top:13px;border-top:1px solid var(--rule);font-family:var(--mono);font-size:.62rem;
  letter-spacing:.1em;text-transform:uppercase}
.srcline span{color:var(--muted)}
.srcline a{color:var(--signal);font-weight:700;text-decoration:none;
  border-bottom:1px solid transparent}
.srcline a:hover{border-bottom-color:var(--signal)}

/* ---- hubs -------------------------------------------------------------- */
.hubintro{max-width:78ch;margin-bottom:clamp(20px,3vw,32px)}
.hubintro .first{font-size:clamp(1.02rem,2vw,1.14rem);line-height:1.62}
.gblurb{color:var(--muted);margin:6px 0 14px;font-size:.93rem}
.svcgrid{display:grid;gap:11px;margin-bottom:10px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,272px),1fr))}
.svc{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
  padding:16px 18px 17px;text-decoration:none;display:flex;flex-direction:column;
  transition:border-color .3s var(--ease),transform .3s var(--ease)}
.svc:hover{border-color:var(--brand-lt);transform:translateY(-2px)}
.svc h3{font-size:1rem;letter-spacing:-.02em;margin:0;line-height:1.25;color:var(--ink)}
.svc p{margin-top:8px;font-size:.87rem;line-height:1.5;color:var(--ink-soft);flex:1}
.sd{margin-top:11px;padding-top:10px;border-top:1px solid var(--rule);font-size:.79rem;
  line-height:1.45;color:var(--muted)}
.citylinks{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0 6px}
.citylinks a{font-size:.855rem;text-decoration:none;color:var(--ink-soft);
  background:var(--surface);border:1px solid var(--rule);border-radius:20px;padding:6px 13px;
  transition:border-color .25s,color .25s}
.citylinks a:hover{border-color:var(--brand-mid);color:var(--brand-deep)}
.morelink{margin-top:12px!important;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.12em;text-transform:uppercase}
.morelink a{color:var(--signal);font-weight:700;text-decoration:none}
.needbox{background:var(--night);color:#fff;border-radius:var(--r);
  padding:clamp(20px,3vw,30px);margin:24px 0 30px}
.needbox .nl{font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--signal-lt);font-weight:700}
.needbox h2{color:#fff!important;font-size:clamp(1.3rem,3vw,1.8rem)!important;
  margin:9px 0 0!important;letter-spacing:-.035em}
.needbox p{color:rgba(255,255,255,.76)!important;margin-top:11px!important;line-height:1.56}
.needlist{list-style:none;margin:16px 0 18px;padding:0;display:grid;gap:2px}
.needlist li{border-top:1px solid rgba(255,255,255,.14);padding:11px 0;font-size:.93rem}
.needlist a{color:#fff;font-weight:600;text-decoration:none;border-bottom:1px solid
  rgba(255,255,255,.3)}
.needlist a:hover{border-bottom-color:#fff}
.needlist span{color:rgba(255,255,255,.55);font-family:var(--mono);font-size:.68rem;
  letter-spacing:.1em;text-transform:uppercase}

/* ---- offices, deliverables, photos, contact, posts ---------------------- */
.offices{display:grid;gap:10px;margin:16px 0 4px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.off{background:var(--surface);border:1px solid var(--rule);border-top:3px solid var(--brand-mid);
  border-radius:0 0 var(--r) var(--r);padding:14px 16px 15px}
.ol{font-family:var(--mono);font-size:.55rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--signal);font-weight:700}
.off address{font-style:normal;margin-top:8px;font-size:.87rem;line-height:1.5;
  color:var(--ink-soft)}
.trustr .offices{grid-template-columns:1fr 1fr}
/* Four office cards are short and the licence argument beside them is long, so
   the column used to end in a void. The blower door fills it with the one
   instrument the argument is actually about. */
.bdbox{margin-top:clamp(18px,2.4vw,28px);background:var(--surface);
  border:1px solid var(--rule);border-radius:var(--r);padding:18px 18px 16px}
.bdbox .art{width:100%;height:auto;display:block;margin-top:10px}
.bdnote{font-size:.85rem;color:var(--muted);line-height:1.56;margin-top:12px;max-width:56ch}
.officenote{font-size:.85rem!important;color:var(--muted)!important;max-width:70ch}
.deliv{display:grid;gap:11px;margin-top:22px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.deliv>div{background:var(--brand-pale);border-radius:var(--r);padding:15px 17px 16px}
.dl{font-family:var(--mono);font-size:.55rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--brand-deep);font-weight:700}
.deliv p{margin-top:8px!important;font-size:.89rem;line-height:1.5;color:var(--ink-soft)}
.shot{margin:22px 0 4px;aspect-ratio:16/8}
.shot img{height:100%;object-fit:cover}
.contactgrid{display:grid;gap:11px;margin:4px 0 8px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.ccard{background:var(--surface);border:1px solid var(--rule);border-top:3px solid var(--signal);
  border-radius:0 0 var(--r) var(--r);padding:17px 18px 18px;text-decoration:none;
  display:flex;flex-direction:column;transition:transform .3s var(--ease)}
.ccard:hover{transform:translateY(-3px)}
.ck{font-family:var(--mono);font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--signal);font-weight:700}
.ccard h3{font-size:1.04rem!important;margin:9px 0 0!important;letter-spacing:-.025em;
  line-height:1.25}
.ccard p{margin-top:8px!important;font-size:.875rem;line-height:1.5;color:var(--ink-soft);flex:1}
.cl{margin-top:12px;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--brand-deep);font-weight:700}
.bigtel{font-family:var(--mono);font-weight:700;font-size:1.06em;color:var(--brand-deep);
  text-decoration:none;border-bottom:2px solid var(--brand-lt)}
.postgrid{display:grid;gap:11px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.post{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
  padding:17px 19px 18px;text-decoration:none;display:flex;flex-direction:column;
  transition:border-color .3s var(--ease),transform .3s var(--ease)}
.post:hover{border-color:var(--brand-lt);transform:translateY(-2px)}
.post .pd{font-family:var(--mono);font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);font-weight:600}
.post h3{font-size:1.04rem;letter-spacing:-.025em;margin:9px 0 0;line-height:1.28;
  color:var(--ink)}
.post p{margin-top:9px;font-size:.88rem;line-height:1.52;color:var(--ink-soft);flex:1}
.pr{margin-top:12px;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--signal);font-weight:700}

/* ---- footer ------------------------------------------------------------ */
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(18,136,92,.28),transparent 64%),
             radial-gradient(36% 52% at 2% 110%,rgba(194,87,28,.18),transparent 66%)}
footer .wrap{position:relative}
.fblurb{font-size:.88rem;line-height:1.55;color:var(--stage-soft);margin-top:12px;max-width:46ch}
.fcol h4{margin-bottom:11px;color:var(--brand-lt)!important}
footer li{margin-top:7px;font-size:.855rem}
.fcontact h4{color:var(--brand-lt)!important}
.fphone{font-family:var(--mono);font-size:1.12rem;font-weight:700;color:#fff!important;
  text-decoration:none;display:block;margin-bottom:6px}
.fhours{font-size:.8rem;color:var(--stage-faint);margin:0 0 14px}
.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:700}

/* ---------------------------------------------------- EnerSolution art -- */
/* the EnerGuide scale */
.egscale{width:100%}
.egend{font-family:var(--mono);font-size:14px;letter-spacing:.2em;fill:var(--muted)}
.egticks path{stroke:rgba(255,255,255,.55);stroke-width:2}
.egpin{fill:var(--ink)}
.egchip{fill:var(--ink)}
.egchipt{font-family:var(--body);font-size:15px;font-weight:600;fill:var(--paper)}
.eglbl text{font-family:var(--body);font-size:15px;fill:var(--muted)}
@media(max-width:760px){
  .egend{font-size:19px}.eglbl text{font-size:19px}}

/* heat loss house */
.hlhouse{width:100%}
.hlground{stroke:var(--ink);stroke-width:3}
.hlsoil{fill:var(--tint)}
.hlbody{fill:var(--surface);stroke:var(--brand-deep);stroke-width:2.5}
.hlroof{fill:none;stroke:var(--signal);stroke-width:5;stroke-linejoin:round}
.hlattic,.hlfloor{stroke:var(--rule-strong);stroke-width:2;stroke-dasharray:6 6}
.hlbase{fill:var(--brand-pale);stroke:var(--brand-deep);stroke-width:2.5}
.hlwin{fill:var(--brand-lt);opacity:.55;stroke:var(--brand-deep);stroke-width:2}
.hldoor{fill:var(--brand-deep);opacity:.8}
.hlarrow{stroke:var(--signal);fill:none;stroke-linecap:round;
  marker-end:url(#none);stroke-dasharray:9 9}
.hlarrow.big{stroke-width:14;opacity:.85}
.hlarrow.mid{stroke-width:9;opacity:.7}
.hlarrow.sml{stroke-width:6;opacity:.55}
@media (prefers-reduced-motion:no-preference){
  .hlflow .hlarrow{animation:hlmove 2.4s linear infinite}}
@keyframes hlmove{to{stroke-dashoffset:-36}}
.hlkbox{fill:var(--surface);stroke:var(--rule);stroke-width:1.4}
.hlkbox.hot{fill:var(--signal-pale);stroke:var(--signal)}
.hlkn{font-family:var(--display);font-size:22px;font-weight:800;letter-spacing:-.02em;
  fill:var(--brand-deep)}
.hlkn.hot{fill:var(--signal)}
.hlkt{font-family:var(--body);font-size:14px;fill:var(--ink-soft)}
@media(max-width:820px){.hlkn{font-size:26px}.hlkt{font-size:17px}}

/* blower door */
.bdoor{width:100%}
.bdwall{fill:var(--tint);stroke:var(--rule-strong);stroke-width:2}
.bdopen{fill:var(--surface);stroke:var(--brand-deep);stroke-width:2.5}
.bdpanel{fill:var(--brand-pale);stroke:var(--brand-deep);stroke-width:1.6}
.bdring{fill:none;stroke:var(--brand-deep);stroke-width:4}
.bdhub{fill:var(--surface);stroke:var(--rule-strong);stroke-width:1.5}
.bdblade path{fill:var(--brand-mid);opacity:.75}
@media (prefers-reduced-motion:no-preference){
  .bdblade{transform-origin:210px 262px;animation:bdspin 1.6s linear infinite}}
@keyframes bdspin{to{transform:rotate(360deg)}}
.bdcap{fill:var(--brand-deep)}
.bdgauge{fill:var(--ink);stroke:none}
.bdgl{font-family:var(--mono);font-size:12px;letter-spacing:.18em;fill:var(--brand-lt)}
.bdgv{font-family:var(--display);font-size:30px;font-weight:800;fill:#fff}
.bdl{stroke:var(--signal);stroke-width:4;stroke-linecap:round;stroke-dasharray:8 10}
.bdlt text{font-family:var(--mono);font-size:15px;letter-spacing:.06em;fill:var(--ink-soft);
  text-anchor:start}
@media(max-width:760px){.bdlt text{font-size:18px}.bdgv{font-size:36px}}

/* process rail */
.prail{width:100%}
.prline{stroke:var(--rule-strong);stroke-width:2;stroke-dasharray:4 7}
.prcirc{fill:var(--brand-deep)}
.prs:nth-of-type(4) .prcirc{fill:var(--signal)}
.prn{font-family:var(--mono);font-size:14px;font-weight:700;fill:#fff;letter-spacing:.06em}
.prh{font-family:var(--display);font-size:21px;font-weight:700;letter-spacing:-.02em;
  fill:var(--ink)}
.prp{font-family:var(--body);font-size:13.5px;line-height:1.45;color:var(--ink-soft)}

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