/* ==========================================================================
   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:#1E1B4B;
  --brand-mid:#4F46E5;
  --brand-lt:#A5B4FC;
  --brand-pale:#EEF0FE;
  --signal:#E4541B;
  --signal-lt:#FB923C;
  --signal-pale:#FFF2E8;

  /* 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:#F8F6F2;
  --surface:#FFFFFF;
  --tint:#EFECE5;
  --ink:#171420;
  --ink-soft:#403C52;
  --muted:#6B6780;
  --rule:#E3DFD6;
  --rule-strong:#BFB9AC;

  /* FORM CONTROLS — must stay legible against --surface cards */
  --field-bg:#EAE6DD;
  --field-border:#8C8676;
  --field-ink:#171420;
  --field-ph:#7C7668;

  /* DARK STAGE ----------------------------------------------- */
  --night:#0C0A2B;
  --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:"Gabarito","Avenir Next",system-ui,sans-serif;
  --body:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Martian 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)}
.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,#0C0A2B,#1E1B4B,#4F46E5,#A5B4FC,#FB923C,#E4541B,#FBBF24)}

/* --------------------------------------------------- 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}
}
.navlinks{display:flex;gap:clamp(16px,1.9vw,26px);align-items:center}
.navlinks a{
  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)}
.navphone{
  font-family:var(--mono);font-size:.79rem;color:var(--stage-faint);
  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(79,70,229,.40),transparent 64%),
    radial-gradient(42% 44% at 8% 96%,rgba(228,84,27,.30),transparent 66%),
    radial-gradient(36% 38% at 46% 52%,rgba(165,180,252,.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(79,70,229,.30),transparent 66%),
             radial-gradient(40% 40% at 4% 90%,rgba(228,84,27,.20),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;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:30px}
footer .logo b{color:#fff}
footer .logo span{color:var(--signal-lt)}
footer h4{font-family:var(--mono);font-size:.59rem;text-transform:uppercase;letter-spacing:.22em;color:var(--stage-faint);font-weight:600;margin-bottom:12px}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-top:8px}
footer a{color:var(--stage-soft);text-decoration:none;transition:color .25s}
footer a:hover{color:var(--brand-lt)}
.legal{margin-top:38px;padding-top:20px;border-top:1px solid var(--stage-rule);font-size:.76rem;color:var(--stage-faint)}
.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)}


/* ============================================================ TOP RENO ==== */

/* ---- the scan hero: the drawing IS the page, not a decoration beside it --- */
.scanhero{padding-block:clamp(44px,6vw,72px) 0}
.scanwrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.scantop{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,4vw,60px);
  align-items:end;margin-bottom:clamp(28px,4vw,44px)}
@media(max-width:980px){.scantop{grid-template-columns:1fr;gap:24px;align-items:start}}
.scantop h1{font-size:clamp(2.3rem,6.6vw,4.1rem);line-height:.95;letter-spacing:-.045em;
  color:#fff;font-family:var(--display);font-weight:800;margin-top:16px}
.scantop h1 em{font-style:normal;color:var(--signal-lt)}
.scanaside{display:flex;flex-direction:column;gap:18px;padding-bottom:6px}
.scanaside p{color:var(--stage-soft);font-size:clamp(1rem,2vw,1.12rem);line-height:1.6}
.scanart{border:1px solid var(--stage-rule-2);
  background:linear-gradient(165deg,rgba(255,255,255,.06),rgba(255,255,255,.01));
  padding:clamp(16px,2.4vw,30px) clamp(16px,2.4vw,30px) clamp(12px,2vw,20px)}
.scanart .thermkey{color:var(--stage-faint)}
.scanhint{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--stage-faint);margin-top:14px}

/* ---- the clock. A real deadline, counted honestly. ---------------------- */
.clockband{background:var(--ink);color:#fff;padding-block:clamp(34px,5vw,54px)}
.clockin{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut);
  display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,4vw,56px);align-items:center}
@media(max-width:860px){.clockin{grid-template-columns:1fr;gap:22px}}
.bignum{font-family:var(--display);font-weight:800;line-height:.82;letter-spacing:-.07em;
  font-size:clamp(4.4rem,15vw,9rem);color:var(--signal-lt);font-variant-numeric:tabular-nums}
.bignum b{display:block;font-weight:800}
.bignum .cap{display:block;font-family:var(--mono);font-size:.6rem;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.62);margin-top:14px;
  line-height:1.5}
.clockfacts{display:grid;gap:14px}
.clockfacts div{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;
  padding-top:14px;border-top:1px solid rgba(255,255,255,.14)}
.clockfacts b{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brand-lt);font-weight:600;padding-top:3px;white-space:nowrap}
.clockfacts p{color:rgba(255,255,255,.82);font-size:.97rem;line-height:1.55;margin:0}
.clockfacts a{color:#fff}

/* ---- the ruler: an answer before a form -------------------------------- */
.ruler{background:var(--brand-pale);border-block:1px solid var(--rule);
  padding-block:clamp(44px,6vw,70px)}
.rulerin{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut);
  display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,4.5vw,62px);align-items:start}
@media(max-width:900px){.rulerin{grid-template-columns:1fr;gap:28px}}
.rulerin h2{font-size:clamp(1.7rem,4.4vw,2.5rem);letter-spacing:-.04em;line-height:1.03}
.rulerin .sub{color:var(--ink-soft);margin-top:16px;font-size:1.02rem;line-height:1.6}
.depthopts{display:grid;gap:10px}
.dopt{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;
  width:100%;text-align:left;background:var(--surface);border:1.5px solid var(--rule-strong);
  padding:16px 18px;cursor:pointer;font:inherit;color:var(--ink);
  transition:border-color .2s var(--ease),background .2s var(--ease)}
.dopt:hover{border-color:var(--brand-mid)}
.dopt[aria-pressed="true"]{border-color:var(--brand-deep);background:#fff;
  box-shadow:inset 0 0 0 1.5px var(--brand-deep)}
.dopt .bar{width:52px;height:30px;background:var(--tint);position:relative;flex:none;
  border:1px solid var(--rule-strong)}
.dopt .bar i{position:absolute;left:0;right:0;bottom:0;display:block;
  background:var(--signal);opacity:.72}
.dopt[aria-pressed="true"] .bar i{background:var(--brand-mid);opacity:.9}
.dopt .t{font-weight:600}
.dopt .t small{display:block;font-weight:400;color:var(--muted);font-size:.83rem;margin-top:3px}
.dopt .r{font-family:var(--mono);font-size:.68rem;color:var(--muted);white-space:nowrap}
.answer{margin-top:22px;border:1.5px solid var(--brand-deep);background:var(--surface);padding:0}
.answer .top{background:var(--brand-deep);color:#fff;padding:20px 24px}
.answer .top .k{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brand-lt);font-weight:600}
.answer .top .v{font-family:var(--display);font-weight:800;letter-spacing:-.05em;
  font-size:clamp(2.2rem,7vw,3.2rem);line-height:1;margin-top:8px}
.answer .body{padding:20px 24px 22px}
.answer .body p{color:var(--ink-soft);font-size:.95rem;line-height:1.6}
.answer .body p+p{margin-top:12px}
.answer .body .warn{color:var(--signal);font-weight:600}
.answer .act{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}

/* ---- two pathways ------------------------------------------------------ */
.paths{display:grid;grid-template-columns:1fr 1fr;gap:0;
  border:1px solid var(--rule);background:var(--surface)}
@media(max-width:840px){.paths{grid-template-columns:1fr}}
.path{padding:clamp(24px,3.4vw,36px);border-right:1px solid var(--rule)}
.path:last-child{border-right:0}
@media(max-width:840px){.path{border-right:0;border-bottom:1px solid var(--rule)}}
.path .tag{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;color:var(--signal)}
.path.slow .tag{color:var(--brand-mid)}
.path h3{font-size:clamp(1.25rem,3vw,1.62rem);letter-spacing:-.035em;margin-top:12px}
.path>p{color:var(--ink-soft);margin-top:12px;font-size:.96rem;line-height:1.6}
.path ul{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:11px}
.path li{display:grid;grid-template-columns:auto 1fr;gap:12px;font-size:.93rem;
  color:var(--ink-soft);line-height:1.5}
.path li::before{content:"";width:8px;height:8px;margin-top:7px;background:var(--brand-mid)}
.path.fast li::before{background:var(--signal)}
.path .amt{font-family:var(--display);font-weight:800;font-size:clamp(1.7rem,4.5vw,2.3rem);
  letter-spacing:-.045em;color:var(--brand-deep);margin-top:20px;line-height:1}
.path .amt small{display:block;font-family:var(--mono);font-weight:400;font-size:.62rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:9px}

/* ---- zones ------------------------------------------------------------- */
.zones{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
  gap:1px;background:var(--rule)}
.zone-c{background:var(--surface);padding:clamp(22px,3vw,30px);display:flex;flex-direction:column;
  gap:12px;text-decoration:none;color:inherit;position:relative;
  transition:background .3s var(--ease)}
.zone-c:hover{background:var(--brand-pale)}
.zone-c .n{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;color:var(--signal);
  font-weight:600}
.zone-c h3{font-size:clamp(1.15rem,2.6vw,1.4rem);letter-spacing:-.03em}
.zone-c p{color:var(--ink-soft);font-size:.92rem;line-height:1.55;flex:1}
.zone-c .go{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;color:var(--brand-deep);
  font-weight:600}

/* ---- real reviews, and only real ones ---------------------------------- */
.gproof{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap:clamp(18px,3vw,28px)}
.gquote{background:var(--surface);border:1px solid var(--rule);padding:clamp(22px,3vw,30px);
  display:flex;flex-direction:column;gap:14px}
.gquote .stars{color:var(--signal);letter-spacing:.12em;font-size:.9rem}
.gquote blockquote{margin:0;font-size:1rem;line-height:1.62;color:var(--ink)}
.gquote figcaption{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-top:auto;padding-top:12px;
  border-top:1px solid var(--rule)}
.gnote{font-size:.83rem;color:var(--muted);margin-top:20px;max-width:64ch}

/* ---- the administrator band: a document, not a marketing box ----------- */
.adminband{background:var(--ink);color:#fff;padding-block:clamp(38px,5vw,60px)}
.adminin{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.admintop{display:flex;gap:16px;flex-wrap:wrap;align-items:baseline;
  padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.18)}
.admintop .k{font-family:var(--mono);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--brand-lt);font-weight:600}
.admintop .k2{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;
  color:rgba(255,255,255,.5);margin-left:auto}
.adminin h2{color:#fff;font-size:clamp(1.5rem,3.6vw,2.1rem);letter-spacing:-.04em;margin-top:22px}
.adminin>p{color:rgba(255,255,255,.78);max-width:66ch;margin-top:14px;line-height:1.6}
.adminrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));
  gap:0;margin-top:26px;border-top:1px solid rgba(255,255,255,.18)}
.adminrow div{padding:18px 20px 18px 0;border-right:1px solid rgba(255,255,255,.12)}
.adminrow div:last-child{border-right:0}
.adminrow dt{font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.5);font-weight:600}
.adminrow dd{margin:8px 0 0;color:#fff;font-size:.95rem;line-height:1.45}

/* ---- commercial strip -------------------------------------------------- */
.commstrip{background:var(--brand-deep);color:#fff;padding-block:clamp(34px,4.6vw,52px)}
.commin{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut);
  display:grid;grid-template-columns:1fr auto;gap:clamp(22px,4vw,48px);align-items:center}
@media(max-width:820px){.commin{grid-template-columns:1fr}}
.commin h2{color:#fff;font-size:clamp(1.4rem,3.4vw,2rem);letter-spacing:-.04em}
.commin p{color:rgba(255,255,255,.8);margin-top:12px;max-width:58ch;line-height:1.6}

/* ---- service area list ------------------------------------------------- */
.areas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule)}
.areas span{background:var(--surface);padding:14px 16px;font-family:var(--mono);
  font-size:.68rem;letter-spacing:.08em;color:var(--ink-soft)}
.areas span.hq{background:var(--brand-pale);color:var(--brand-deep);font-weight:600}

/* ---- a plain figure list used on the rebate page ----------------------- */
.rtable{width:100%;border-collapse:collapse;margin-top:22px;font-size:.93rem}
.rtable th,.rtable td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--rule);
  vertical-align:top}
.rtable th{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);font-weight:600;background:var(--tint)}
.rtable td.amt{font-family:var(--display);font-weight:800;letter-spacing:-.03em;
  color:var(--brand-deep);white-space:nowrap;font-size:1.05rem}
.rtable tr:last-child td{border-bottom:0}
@media(max-width:620px){.rtable th,.rtable td{padding:10px 10px;font-size:.86rem}}

/* ---------- TopReno artwork ---------- */
.tr .zone{cursor:pointer}
.tr .zoneface{fill:var(--signal);fill-opacity:0;transition:fill-opacity .3s var(--ease)}
.tr .zone:hover .zoneface,.tr .zone:focus-visible .zoneface{fill-opacity:.20}
.tr .zoneline{stroke:var(--stage-rule-2);stroke-width:1.2;stroke-dasharray:3 4}
.tr .hot{fill:var(--signal-lt)}
.tr .cold{fill:var(--brand-lt)}
.tr .keyline{stroke:var(--brand-lt);stroke-width:2;fill:none}
.tr .solid{stroke:var(--signal-lt);stroke-width:2.4;fill:none;stroke-linecap:round}
@media (prefers-reduced-motion:no-preference){
  .tr .rise{animation:trrise 4s ease-in-out infinite}
  .tr .rise2{animation:trrise 4s ease-in-out infinite;animation-delay:1.3s}
  .tr .rise3{animation:trrise 4s ease-in-out infinite;animation-delay:2.6s}
}
@keyframes trrise{0%{opacity:0;transform:translateY(10px)}
  35%{opacity:.85}100%{opacity:0;transform:translateY(-26px)}}

/* the thermal key that sits under the big drawings */
.thermkey{display:flex;align-items:center;gap:14px;margin-top:18px;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase}
.thermkey .bar{flex:1;height:8px;border-radius:99px;
  background:linear-gradient(90deg,var(--brand-deep),var(--brand-mid),var(--brand-lt),var(--signal-lt),var(--signal))}