/* ==========================================================================
   Goggles Energy — site design system
   "Blueprint / titleblock" — one stylesheet for every page.

   0. Tokens          5. Photo frame      10. Sub-page: article
   1. Base            6. Nav + progress   11. Sub-page: case studies
   2. Layout          7. Home page        12. FAQ page
   3. Titleblock      8. Forms            13. 404
   4. Buttons         9. Footer           14. Motion / a11y guards
   ========================================================================== */

/* ── 0. Tokens ─────────────────────────────────────────────────────────── */
:root{
  color-scheme:light;

  /* Surfaces */
  --paper:#F3F4F1; --paper2:#FFFFFF; --panel:#EDEFEA;
  --line:#D9DDD8; --line2:#E7EAE5;

  /* Ink */
  --ink:#0B1B2E; --slate:#1E3044; --mist:#3C4F62;

  /* Navy field */
  --navy:#0C2740; --navy2:#0A1D31; --navy3:#081827;

  /* Accents */
  --blue:#1F5C99; --blue2:#17497C; --blue-lite:#9BBBD9; --blue-pale:#DDE6EF;
  --signal:#E4611E; --signal2:#BA4805; --signal-tint:#FBEDE3;
  /* White text needs 4.5:1, which brand orange cannot give — filled controls
     use the deep variant while --signal stays the graphic accent (3:1 suffices). */
  --signal-deep:#C24906; --signal-deep2:#A03D04;
  --ok:#1C7A54;

  /* Type */
  --fd:"Archivo",system-ui,-apple-system,sans-serif;
  --fb:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
  --fm:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;

  /* Fluid type scale */
  --t-mono:.68rem;
  --t-body:1.0625rem;
  --t-lead:clamp(1.02rem,.96rem + .35vw,1.24rem);
  --t-h4:clamp(1.08rem,1.02rem + .3vw,1.2rem);
  --t-h3:clamp(1.35rem,1.15rem + .9vw,2rem);
  --t-h2:clamp(1.9rem,1.45rem + 2.1vw,3.1rem);
  --t-h1:clamp(1.95rem,1.05rem + 3.9vw,4.3rem);

  /* Rhythm */
  --mw:1240px; --mw-narrow:1180px;
  --gut:clamp(20px,5vw,64px);
  --sp-section:clamp(60px,9vw,120px);
  --sp-block:clamp(2rem,4vw,3.4rem);

  /* Motion — strong curves; built-in easings are too weak */
  --ease:cubic-bezier(.23,1,.32,1);
  --ease-io:cubic-bezier(.77,0,.175,1);
  --spring:cubic-bezier(.34,1.3,.5,1);
  --d-fast:140ms; --d-ui:220ms; --d-slow:320ms;

  /* Blueprint hairline grid */
  --grid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M44 0H0V44' fill='none' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1'/%3E%3C/svg%3E");

  --nav-h:74px;
}

/* ── 1. Base ───────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 16px)}
body{
  font-family:var(--fb);color:var(--slate);background:var(--paper);
  line-height:1.62;font-size:var(--t-body);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;touch-action:manipulation;
}
h1,h2,h3,h4{
  font-family:var(--fd);color:var(--ink);line-height:1.05;
  font-weight:800;letter-spacing:-.02em;text-wrap:balance;
}
p{text-wrap:pretty}
a{color:inherit;text-decoration:none}
img,svg,video{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
strong{color:var(--ink);font-weight:600}
::selection{background:var(--signal);color:#fff}
:focus-visible{outline:2.5px solid var(--signal);outline-offset:3px;border-radius:2px}
.dark :focus-visible,.navy-field :focus-visible{outline-color:var(--signal)}
[hidden]{display:none!important}

.skip{
  position:absolute;left:-9999px;top:0;z-index:600;
  background:var(--signal-deep);color:#fff;font-family:var(--fm);
  font-size:.8rem;letter-spacing:.04em;padding:.7em 1.1em;border-radius:2px;
}
.skip:focus{left:12px;top:12px;outline:2.5px solid #fff;outline-offset:2px}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── 2. Layout ─────────────────────────────────────────────────────────── */
.w{max-width:var(--mw);margin-inline:auto;padding-inline:var(--gut)}
.wq{max-width:1440px;margin-inline:auto;padding-inline:var(--gut)}
.wn{max-width:var(--mw-narrow);margin-inline:auto;padding-inline:var(--gut)}
section{padding:var(--sp-section) 0;position:relative}
.dark{background:var(--navy);color:var(--blue-lite)}
.dark h2,.dark h3,.dark h4{color:#fff}
.bleed{padding-inline:0}
.bleed>*{margin-inline:var(--gut)}

/* ── 3. Titleblock system (the signature) ──────────────────────────────── */
.tb{
  display:flex;align-items:center;gap:.7rem;
  font-family:var(--fm);font-size:var(--t-mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--signal2);font-weight:500;
}
.tb .idx{color:var(--ink);font-variant-numeric:tabular-nums}
.tb .tick{width:9px;height:9px;background:var(--signal);flex:none;transform:rotate(45deg)}
.tb .rule{height:1px;background:var(--line);flex:1;min-width:24px}
.tb.on-dark{color:var(--blue-lite)}
.tb.on-dark .idx{color:#fff}
.tb.on-dark .rule{background:rgba(255,255,255,.16)}

.sh{max-width:60ch;margin-top:1.4rem}
.sh h2{font-size:var(--t-h2);margin:0 0 .35em;letter-spacing:-.028em}
.sh p{color:var(--ink);font-size:1.12rem;max-width:56ch}
.sh.on-dark h2{color:#fff}
.sh.on-dark p{color:var(--blue-lite)}
.head{margin-bottom:var(--sp-block)}
.head-split{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:var(--sp-block)}

/* ── 4. Buttons + links + tags ─────────────────────────────────────────── */
.btn{
  --lift:0px;
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--fb);font-weight:600;font-size:.98rem;
  padding:.85em 1.5em;cursor:pointer;border:none;border-radius:2px;
  min-height:48px;position:relative;text-align:center;
  transform:translate3d(var(--mx,0),calc(var(--my,0px) + var(--lift)),0);
  transition:transform var(--d-ui) var(--ease),background var(--d-fast) ease,
             box-shadow var(--d-ui) var(--ease),color var(--d-fast) ease;
}
.btn svg{width:17px;height:17px;flex:none;transition:transform var(--d-ui) var(--spring)}
.btn:hover svg{transform:translateX(4px)}
.btn:active{--lift:0px;transform:translate3d(var(--mx,0),0,0) scale(.985)}
.bp{background:var(--signal-deep);color:#fff;box-shadow:0 1px 0 var(--signal-deep2)}
.bd{background:var(--ink);color:#fff}
.bo{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.bo.on-dark{color:#fff;border-color:rgba(255,255,255,.28)}
@media (hover:hover) and (pointer:fine){
  .bp:hover{background:var(--signal-deep2);--lift:-2px;box-shadow:0 12px 24px -10px rgba(194,73,6,.55)}
  .bd:hover{--lift:-2px;box-shadow:0 12px 26px -12px rgba(11,27,46,.6)}
  .bo:hover{border-color:var(--ink);--lift:-2px}
  .bo.on-dark:hover{border-color:#fff;background:rgba(255,255,255,.06)}
}

.lk{
  display:inline-flex;align-items:center;gap:.4em;
  font-family:var(--fm);font-size:.78rem;letter-spacing:.06em;
  text-transform:uppercase;font-weight:500;color:var(--ink);
  border-bottom:1px solid transparent;padding-block:.35em;
  transition:border-color var(--d-fast) ease;
}
.lk svg{width:14px;height:14px;flex:none;transition:transform var(--d-fast) var(--spring)}
.lk:hover{border-color:var(--signal)}
.lk:hover svg{transform:translateX(3px)}
.lk.on-dark{color:#fff}

.tag-ind,.tag-est,.tag-assess,.tag-ver{
  display:inline-flex;align-items:center;gap:.35em;
  font-family:var(--fm);font-size:.56rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;padding:.28em .55em;border-radius:2px;vertical-align:middle;
}
.tag-ind{background:var(--signal-tint);color:var(--signal2)}
.tag-ver{background:var(--signal);color:#fff}
.tag-est{background:rgba(31,92,153,.12);color:var(--blue2)}
.tag-assess{background:var(--panel);color:var(--slate);border:1px solid var(--line)}
.tag-ind.on-dark,.tag-est.on-dark,.tag-assess.on-dark{background:rgba(255,255,255,.12);color:#fff;border:0}

.note{
  font-family:var(--fm);font-size:.68rem;color:var(--mist);letter-spacing:.03em;
  line-height:1.6;display:flex;gap:.55rem;align-items:flex-start;
}
.note .tick{width:7px;height:7px;background:var(--signal);transform:rotate(45deg);flex:none;margin-top:.5em}
.note.on-dark{color:var(--blue-lite)}

/* ── 4b. Dark-context token re-scoping ────────────────────────────────────
   On a navy field the light-surface values fall below 4.5:1 for small text.
   Redefining the tokens here fixes every rule that reads them, in one place. */
.dark,.hero,.cta,.cta-band,.bipv,.phero,.e404,.scorecard,
.sol-txt,.pf-item .meta,.pf-item.plate,.nav,.nk,.mcta,.calc-out .o.hero-o{
  --mist:#8B99A6;
  --signal:#E76421;
}
/* …and back again for the light cards that sit inside those dark sections. */
.form,.calc-wrap,.keybox,.toc{
  --mist:#3C4F62;
  --signal:#E4611E;
}

/* ── 5. Photo frame ────────────────────────────────────────────────────── */
.ph{position:relative;overflow:hidden;background:linear-gradient(135deg,#123f6b,#0a1d31)}
.ph::before{content:"";position:absolute;inset:0;background-image:var(--grid);background-size:44px 44px;opacity:.7;z-index:0}
.ph::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 100% 0,rgba(228,97,30,.14),transparent 55%);z-index:0}
.ph img,.ph picture{position:relative;z-index:1;width:100%;height:100%}
.ph img{object-fit:cover;transition:transform 1.1s var(--ease),opacity .5s ease}
.ph picture{display:block}
/* Blueprint illustration fallback — used where no true photograph exists */
.ph.illus{background:linear-gradient(160deg,#0f3459,#081827)}
.ph.illus svg{position:relative;z-index:1;width:100%;height:100%;object-fit:contain}

/* Corner registration marks */
.ticks{position:absolute;inset:14px;z-index:3;pointer-events:none;opacity:0;transition:opacity var(--d-slow) ease}
.ticks span{position:absolute;width:14px;height:14px;border:2px solid var(--signal)}
.ticks .t1{top:0;left:0;border-right:0;border-bottom:0}
.ticks .t2{top:0;right:0;border-left:0;border-bottom:0}
.ticks .t3{bottom:0;left:0;border-right:0;border-top:0}
.ticks .t4{bottom:0;right:0;border-left:0;border-top:0}

/* ── 6. Nav + scroll progress ──────────────────────────────────────────── */
#prog{position:fixed;top:0;left:0;height:2px;background:var(--signal);z-index:300;width:100%;transform:scaleX(0);transform-origin:0 50%;transition:transform .1s linear;will-change:transform}

.nav{position:fixed;top:0;left:0;right:0;z-index:200;transition:background var(--d-slow) var(--ease),box-shadow var(--d-slow) var(--ease)}
.nav > .in{display:flex;align-items:center;gap:1rem;height:var(--nav-h);max-width:var(--mw);margin-inline:auto;padding-inline:var(--gut)}
.nav.solid,.nav.scrolled{background:rgba(9,24,39,.88);-webkit-backdrop-filter:saturate(140%) blur(14px);backdrop-filter:saturate(140%) blur(14px);box-shadow:0 1px 0 rgba(255,255,255,.08)}
.nav::after{content:"";position:absolute;left:0;right:0;top:100%;height:22px;pointer-events:none;background:linear-gradient(rgba(9,24,39,.45),transparent);opacity:0;transition:opacity var(--d-slow) var(--ease)}
.nav.scrolled::after{opacity:1}

.brand{display:flex;align-items:center;color:#fff;flex:none}
.brand .logo-mark{height:34px;width:auto;display:block;overflow:visible}
.logo-img{height:46px;width:auto;display:block;filter:drop-shadow(0 1px 7px rgba(0,0,0,.5))}
.fb .logo-img,.site-footer .logo-img{height:40px;margin-bottom:1.2rem}

.nk{display:flex;gap:.1rem;margin-left:auto;align-items:center}
.nk a{
  font-family:var(--fm);font-size:.78rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:rgba(255,255,255,.9);padding:.6em .7em;border-radius:2px;position:relative;
  white-space:nowrap;
  transition:color var(--d-fast) ease;
}
.nk a:hover{color:#fff}
.nk a.act,.nk a[aria-current]{color:#fff}
.nk a.act::after,.nk a[aria-current]::after{content:"";position:absolute;left:.85em;right:.85em;bottom:.25em;height:2px;background:var(--signal)}
.nc{display:flex;align-items:center;gap:.6rem;margin-left:.4rem;flex:none}
.wa{width:44px;height:44px;border:1.5px solid rgba(255,255,255,.22);display:grid;place-items:center;color:#fff;border-radius:2px;transition:border-color var(--d-fast) ease,transform var(--d-fast) var(--ease),background var(--d-fast) ease}
.wa svg{width:19px;height:19px}
@media (hover:hover) and (pointer:fine){.wa:hover{border-color:#fff;transform:translateY(-2px);background:rgba(255,255,255,.06)}}

.burger{display:none;width:46px;height:46px;border:1.5px solid rgba(255,255,255,.22);background:transparent;cursor:pointer;flex-direction:column;gap:4px;align-items:center;justify-content:center;border-radius:2px;flex:none}
.burger span{width:18px;height:2px;background:#fff;transition:transform var(--d-ui) var(--ease),opacity var(--d-fast) ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.nav-scrim{position:fixed;inset:0;z-index:190;background:rgba(6,17,29,.55);opacity:0;pointer-events:none;transition:opacity var(--d-ui) var(--ease)}
.nav-scrim.on{opacity:1;pointer-events:auto}

@media(max-width:1240px){
  .nk{
    position:fixed;top:var(--nav-h);left:0;right:0;z-index:201;
    flex-direction:column;align-items:stretch;gap:0;margin:0;
    background:rgba(9,24,39,.98);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    padding:.6rem var(--gut) 1.4rem;border-top:1px solid rgba(255,255,255,.1);
    transform:translateY(-8px);opacity:0;visibility:hidden;
    transition:opacity var(--d-ui) var(--ease),transform var(--d-ui) var(--ease),visibility 0s linear var(--d-ui);
  }
  .nk.open{transform:none;opacity:1;visibility:visible;transition-delay:0s}
  .nk a{padding:1em .2em;font-size:.86rem;font-weight:700;border-bottom:1px solid rgba(255,255,255,.08)}
  .nk a.act::after,.nk a[aria-current]::after{left:.2em;right:auto;width:20px;bottom:.5em}
  .burger{display:flex}
  .nc .btn{display:none}
}

/* Mobile persistent CTA */
.mcta{display:none}
@media(max-width:900px){
  .mcta{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:180;gap:.6rem;
    padding:.7rem var(--gut) calc(.7rem + env(safe-area-inset-bottom,0px));
    background:rgba(9,24,39,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    border-top:1px solid rgba(255,255,255,.12);
    transition:transform var(--d-slow) var(--ease);
  }
  .mcta.hide{transform:translateY(130%)}
  .mcta .btn{flex:1}
  .mcta .wa{flex:none;border-color:rgba(255,255,255,.32)}
}

/* ── 7. Home page ──────────────────────────────────────────────────────── */

/* Hero */
.hero{min-height:100svh;display:flex;align-items:flex-end;position:relative;background:var(--navy3);padding:calc(var(--nav-h) + 46px) 0 clamp(40px,6vw,72px)}
.hero .bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:linear-gradient(135deg,#123f6b,#081827)}
.hero .bg::before{content:"";position:absolute;inset:0;background-image:var(--grid);background-size:52px 52px;opacity:.6}
.hero .bg img{width:100%;height:100%;object-fit:cover;opacity:.62;transform:scale(1.08);transition:transform 8s var(--ease),opacity 1.2s ease}
.hero.ready .bg img{transform:scale(1)}
.hero .veil{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(8,24,39,.68) 0%,rgba(8,24,39,.3) 34%,rgba(8,24,39,.64) 74%,rgba(8,24,39,.94) 100%)}
.hero .veil2{position:absolute;inset:0;z-index:1;background:radial-gradient(90% 70% at 88% 6%,rgba(228,97,30,.2),transparent 52%)}
.hero > .in{position:relative;z-index:2;max-width:var(--mw);margin-inline:auto;padding-inline:var(--gut);width:100%}
.hero .eyerow{display:flex;align-items:center;gap:.75rem;margin-bottom:1.5rem}
.hero .eyerow .tick{width:9px;height:9px;background:var(--signal);transform:rotate(45deg);flex:none}
.hero .eyerow span{font-family:var(--fm);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;font-weight:500}
.hero h1{color:#fff;font-size:var(--t-h1);letter-spacing:-.035em;line-height:.98;max-width:17ch;text-wrap:initial}
.hero h1 .l2{color:var(--blue-lite)}
.hero h1 .l3{color:var(--signal)}
.hero .lead{color:var(--blue-pale);font-size:clamp(1.1rem,1.0rem + .4vw,1.34rem);max-width:52ch;margin:1.4rem 0 2rem;line-height:1.5}
.caps{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem .8rem;margin:1.5rem 0 .2rem;font-family:var(--fm);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-pale)}
.caps i{width:5px;height:5px;background:var(--signal);transform:rotate(45deg);flex:none;display:inline-block}
.hcta{display:flex;flex-wrap:wrap;gap:.9rem 1.2rem;align-items:center}
.hstat{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .95rem;margin:1.6rem 0 .2rem;font-family:var(--fm);font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;color:var(--blue-pale)}
.hstat span{white-space:nowrap}
.hstat i{width:1px;height:.95em;background:rgba(255,255,255,.28);flex:none;display:inline-block}
.metaline{display:flex;flex-wrap:wrap;gap:1.6rem 2.4rem;margin-top:2.6rem;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.16)}
.metaline .m{display:flex;flex-direction:column}
.metaline dd{order:1;margin:0}
.metaline dt{order:2}
.metaline .k{font-family:var(--fd);font-weight:800;font-size:clamp(1.5rem,2.4vw,2.1rem);color:#fff;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.metaline .k b{color:var(--signal);font-weight:800}
.metaline .u{font-family:var(--fm);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-lite);margin-top:.4em}
.scrolln{position:absolute;right:var(--gut);bottom:clamp(40px,6vw,72px);z-index:2;display:flex;align-items:center;gap:.6rem;font-family:var(--fm);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5);writing-mode:vertical-rl}
.scrolln .ln{width:1px;height:46px;background:linear-gradient(rgba(255,255,255,.5),transparent);margin-top:.4rem}
@media(max-width:900px){.scrolln{display:none}.caps{font-size:.62rem;gap:.4rem .55rem}.hstat{font-size:.64rem;gap:.4rem .7rem}}

/* Credibility strip */
.cred{background:var(--paper2);border-bottom:1px solid var(--line);padding:0}
.cred > .in{display:grid;grid-template-columns:repeat(4,1fr);max-width:var(--mw);margin-inline:auto;padding-inline:var(--gut)}
.cred .c{padding:clamp(2rem,4vw,3.2rem) clamp(1rem,2.5vw,2rem);border-right:1px solid var(--line)}
.cred .c:last-child{border-right:0}
.cred .idx{font-family:var(--fm);font-size:.6rem;letter-spacing:.12em;color:var(--signal2);text-transform:uppercase}
.cred .n{font-family:var(--fd);font-weight:800;font-size:clamp(2rem,4.6vw,3.4rem);color:var(--ink);letter-spacing:-.04em;line-height:1;margin-top:.5rem;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:.16em;white-space:nowrap}
.cred .n .u{font-size:.38em;color:var(--signal2);font-weight:700;letter-spacing:.02em;line-height:1}
.cred .l{font-family:var(--fm);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mist);margin-top:.5rem}

/* Signature projects */
.proj{display:grid;grid-template-columns:1fr;border-top:1px solid var(--line)}
.pr{display:grid;grid-template-columns:.92fr 1.08fr;align-items:stretch;border-bottom:1px solid var(--line)}
.pr:nth-child(even){grid-template-columns:1.08fr .92fr}
.pr:nth-child(even) .pr-txt{order:-1}
.pr-img{position:relative;min-height:340px}
.pr-img .ph{position:absolute;inset:0}
.pr-img .cap{position:absolute;left:0;bottom:0;z-index:3;background:var(--ink);color:#fff;font-family:var(--fm);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;padding:.55em .9em}
@media (hover:hover) and (pointer:fine){
  .pr:hover .pr-img .ph img{transform:scale(1.05)}
  .pr:hover .ticks{opacity:1}
}
.pr-txt{padding:clamp(1.8rem,4vw,3.4rem);display:flex;flex-direction:column;justify-content:center;background:var(--paper2)}
.pr-txt .sector{font-family:var(--fm);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--signal2);display:flex;align-items:center;gap:.5em;margin-bottom:1rem}
.pr-txt .sector .tick{width:7px;height:7px;background:var(--signal);transform:rotate(45deg);flex:none}
.pr-txt h3{font-size:var(--t-h3);letter-spacing:-.025em;margin-bottom:.4rem}
.pr-txt .loc{font-family:var(--fm);font-size:.72rem;letter-spacing:.05em;color:var(--mist);text-transform:uppercase;margin-bottom:1.4rem}
.pr-specs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:1.4rem}
.pr-specs .s{background:var(--paper2);padding:.9rem 1rem}
.pr-specs .v{font-family:var(--fd);font-weight:700;font-size:1.35rem;color:var(--blue);letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.pr-specs .v small{font-size:.5em;color:var(--mist);font-weight:600;letter-spacing:.03em;vertical-align:baseline;margin-left:.3em}
.pr-specs .k{font-family:var(--fm);font-size:.58rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mist);margin-top:.4rem}
.pr-cs{display:grid;gap:0;margin-bottom:1.5rem;border-top:1px solid var(--line)}
.pr-cs .b{display:grid;grid-template-columns:9.5rem 1fr;gap:1rem;align-items:start;padding:.85rem 0;border-bottom:1px solid var(--line)}
.pr-cs .tag{font-family:var(--fm);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--signal2);padding-top:.25rem;white-space:nowrap;display:inline-flex;align-items:center;gap:.5rem}
.pr-cs .tag svg{width:14px;height:14px;flex:none;stroke:var(--signal);stroke-width:1.5}
.pr-cs p{font-size:1.05rem;color:var(--slate);text-wrap:pretty}
@media (max-width:640px){.pr-cs .b{grid-template-columns:1fr;gap:.35rem}}

.cs-specs .v small{font-size:.5em;vertical-align:baseline;margin-left:.3em}

/* Solutions */
.sol{border-top:1px solid rgba(255,255,255,.12)}
.solrow{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid rgba(255,255,255,.12);align-items:stretch}
.solrow:nth-child(even) .sol-txt{order:2}
.sol-img{position:relative;min-height:clamp(320px,44vw,520px)}
.sol-img .ph{position:absolute;inset:0}
.sol-img .no{position:absolute;top:20px;left:20px;z-index:3;font-family:var(--fm);font-size:.7rem;letter-spacing:.1em;color:#fff;background:rgba(8,24,39,.6);border:1px solid rgba(255,255,255,.25);padding:.4em .7em;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.sol-txt{padding:clamp(2rem,5vw,4.5rem) clamp(1.6rem,4vw,4rem);display:flex;flex-direction:column;justify-content:center}
.sol-txt h3{font-size:var(--t-h3);color:#fff;letter-spacing:-.025em;margin-bottom:1rem}
.sol-txt p{color:var(--blue-lite);font-size:1.04rem;max-width:44ch;margin-bottom:1.6rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.6rem}
.chips span{font-family:var(--fm);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-lite);border:1px solid rgba(255,255,255,.2);padding:.42em .8em}
/* Light-background variant: dark, larger chips on the white models teaser */
#models-teaser .chips span{color:var(--ink);border-color:var(--ink);font-size:.82rem;font-weight:600;padding:.5em .95em}

/* Engineering grid — aligned to the .w column, not full-bleed */
.eng-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line);max-width:var(--mw);margin-inline:auto;width:calc(100% - var(--gut)*2)}
.eng-c{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(1.5rem,2.5vw,2.1rem);background:var(--paper2);transition:background var(--d-ui) ease,transform var(--d-slow) var(--ease)}
.eng-c .no{font-family:var(--fm);font-size:.66rem;letter-spacing:.06em;color:var(--signal2);font-variant-numeric:tabular-nums}
.eng-ic{width:28px;height:28px;margin-bottom:.6rem}
.eng-c h4{font-size:var(--t-h4);margin:1.4rem 0 .5rem;letter-spacing:-.01em}
.eng-c p{font-size:.9rem;color:var(--mist);line-height:1.55}
.eng-c .std{font-family:var(--fm);font-size:.6rem;letter-spacing:.05em;color:var(--blue);text-transform:uppercase;margin-top:1rem;display:block}
.eng-c .ln{width:26px;height:2px;background:var(--signal);margin-top:1.3rem}

/* Journey */
.journey{background:var(--paper2);border-top:1px solid var(--line)}
.journey .steps-wrap{position:relative;margin-top:var(--sp-block)}
.journey .steps{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line)}
.journey .st{padding:calc(clamp(1.4rem,2.5vw,2rem) + 30px) clamp(1.4rem,2.5vw,2rem) clamp(1.4rem,2.5vw,2rem);border-right:1px solid var(--line);transition:background var(--d-ui) ease,transform var(--d-slow) var(--ease)}
.journey .st:last-child{border-right:0}
.journey .st .scene{height:120px;margin-bottom:1.2rem;display:flex;align-items:center;justify-content:center}
.journey .st .scene svg{height:100%;width:auto;max-width:100%;aspect-ratio:104/72;display:block}
/* Survey-line rail connecting the four steps */
.journey .rail{position:absolute;left:12.5%;right:12.5%;top:24px;height:12px;pointer-events:none;z-index:2}
.journey .rail svg{width:100%;height:100%;display:block;overflow:visible}
.journey .rail .rail-flow{opacity:0}
.gx-scene.is-live .rail-flow{animation:gx-fade .6s var(--ease) .9s both,gx-flow 1.6s linear 1s infinite;stroke-dasharray:6 6}
.journey .rail-node{position:absolute;top:2px;width:8px;height:8px;border:1.5px solid var(--signal);background:var(--paper2);transform:rotate(45deg)}
.journey .rail-node:nth-of-type(1){left:-4px}
.journey .rail-node:nth-of-type(2){left:calc(33.333% - 4px)}
.journey .rail-node:nth-of-type(3){left:calc(66.666% - 4px)}
.journey .rail-node:nth-of-type(4){left:calc(100% - 4px)}
@keyframes gx-rail-run{0%{transform:translateX(0);opacity:0}6%{opacity:1}92%{opacity:1}100%{transform:translateX(1000px);opacity:0}}
.journey .rail-run{opacity:0}
.gx-scene.is-live .rail-run{animation:gx-rail-run 7s var(--ease-io) 4.4s infinite}
@media(max-width:900px){
  .journey .rail{display:none}
  .journey .st{padding-top:clamp(1.4rem,2.5vw,2rem);position:relative}
  .journey .scene{--sb:0!important}
  .journey .st:not(:last-child)::after{content:"";position:absolute;left:50%;bottom:-13px;width:0;height:26px;border-left:1.5px dashed var(--blue-lite);z-index:1}
}
@media(max-width:900px) and (min-width:561px){.journey .st:nth-child(2)::after{display:none}}
.journey .st .no{font-family:var(--fm);font-size:.6rem;letter-spacing:.1em;color:var(--signal2);text-transform:uppercase}
.journey .st h4{font-size:var(--t-h4);margin:.5rem 0 .35rem;letter-spacing:-.01em}
.journey .st p{font-size:.88rem;color:var(--mist);line-height:1.5}

/* BIPV */
.bipv{background:var(--navy2);color:var(--blue-lite);overflow:hidden;position:relative}
.bipv .lead-img{position:relative;height:clamp(340px,50vw,600px);margin-bottom:var(--sp-block)}
.bipv .lead-img .ph{position:absolute;inset:0}
.bipv .lead-img .ov{position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,rgba(10,29,49,.86),rgba(10,29,49,.2) 62%,transparent);display:flex;align-items:flex-end;padding:clamp(1.6rem,4vw,3rem)}
.bipv .lead-img .ov .txt{max-width:44ch}
.bipv .lead-img .ov h2{color:#fff;font-size:var(--t-h2);letter-spacing:-.03em;margin-bottom:.6rem}
.bipv .lead-img .ov p{color:var(--blue-pale);font-size:1.04rem}
.bipv-detail{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,.14);margin-inline:var(--gut)}
.bipv-detail .d{padding:clamp(1.6rem,3vw,2.4rem);border-right:1px solid rgba(255,255,255,.14);transition:background var(--d-ui) ease,transform var(--d-slow) var(--ease)}
.bipv-detail .d:last-child{border-right:0}
.bipv-detail .no{font-family:var(--fm);font-size:.64rem;letter-spacing:.1em;color:var(--signal);text-transform:uppercase}
.bipv-detail h4{color:#fff;font-size:var(--t-h4);margin:1rem 0 .6rem}
.bipv-detail p{font-size:.92rem;color:var(--blue-lite);line-height:1.55}
.bipv-detail .spec{font-family:var(--fm);font-size:.6rem;letter-spacing:.05em;color:rgba(255,255,255,.55);text-transform:uppercase;margin-top:1rem;display:block}

/* Commercial models — cashflow theater + deal cards */
.cf-theater{margin-top:var(--sp-block)}
.cf-tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}
.cf-tabs button{font-family:var(--fm);font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;color:var(--slate);background:var(--paper2);border:1px solid var(--line);border-radius:2px;padding:.55em 1em;min-height:44px;cursor:pointer;transition:background var(--d-fast) ease,color var(--d-fast) ease,border-color var(--d-fast) ease}
.cf-tabs button[aria-pressed="true"]{background:var(--navy);color:#fff;border-color:var(--navy)}
@media (hover:hover) and (pointer:fine){.cf-tabs button:hover{border-color:var(--ink)}}
.cf-stage{background:var(--panel);border:1px solid var(--line);padding:clamp(.8rem,2vw,1.4rem)}
.cf-stage svg{display:block;width:100%;height:auto}
.cf-c{transition:opacity var(--d-ui) ease}
.cf-stage.has-focus .cf-c{opacity:.18}
.cf-stage.has-focus .cf-c.focus{opacity:1}
.cf-a{opacity:0;transform:translateY(6px);transition:opacity var(--d-ui) var(--ease),transform var(--d-ui) var(--ease)}
.cf-a.on{opacity:1;transform:none}
.cf-stage.has-focus .cf-a{opacity:0}
.cf-stage.has-focus .cf-a.on.focus{opacity:1}
.cf-note{font-family:var(--fm);font-size:.74rem;letter-spacing:.03em;color:var(--slate);margin-top:.8rem;min-height:2.4em;line-height:1.5}
@media (prefers-reduced-motion:reduce){.cf-a{opacity:1;transform:none}#cfCursor{display:none}}
.model-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(1.4rem,2.5vw,2rem)}
.model-card{background:var(--paper2);padding:clamp(1.2rem,2vw,1.6rem);display:flex;flex-direction:column}
.mc-head{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;flex-wrap:wrap}
.mc-nm{font-family:var(--fd);font-weight:800;font-size:1.02rem;color:var(--ink);letter-spacing:-.01em}
.mc-tag{font-family:var(--fm);font-size:.52rem;letter-spacing:.06em;text-transform:uppercase;color:var(--signal2);font-weight:600}
.mc-best{font-size:.82rem;color:var(--mist);line-height:1.45;margin:.55rem 0 .9rem;min-height:2.6em}
.mc-facts{display:grid;grid-template-columns:1fr;gap:.35rem;margin-top:auto;border-top:1px solid var(--line2);padding-top:.75rem}
.mc-facts div{display:flex;justify-content:space-between;gap:.5rem;align-items:baseline}
.mc-facts dt{font-family:var(--fm);font-size:.54rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mist)}
.mc-facts dd{font-size:.8rem;color:var(--ink);text-align:right}
@media(max-width:900px){.model-cards{grid-template-columns:1fr 1fr}.mc-best{min-height:0}}
@media(max-width:560px){.model-cards{grid-template-columns:1fr}}
.mtx-details{border:0}
.mtx-details>summary{cursor:pointer;list-style:none;padding:1.1rem;font-family:var(--fm);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);display:flex;align-items:center;gap:.5rem;min-height:44px;background:var(--panel);border-bottom:1px solid var(--line)}
.mtx-details:not([open])>summary{border-bottom:0}
.mtx-details>summary::-webkit-details-marker{display:none}
.mtx-details>summary .chev{width:14px;height:14px;color:var(--signal);transition:transform var(--d-ui) var(--ease)}
.mtx-details[open]>summary .chev{transform:rotate(90deg)}
.mtx-wrap{border:1px solid var(--line);background:var(--paper2);overflow-x:auto;margin-inline:var(--gut);margin-top:clamp(1.2rem,2vw,1.8rem)}
.mtx{width:100%;border-collapse:collapse;font-size:.92rem;min-width:760px}
.mtx caption{text-align:left;padding:1rem;font-family:var(--fm);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mist);border-bottom:1px solid var(--line)}
.mtx thead th{border-bottom:1px solid var(--line);border-left:1px solid var(--line2);padding:1.1rem 1rem;text-align:left;vertical-align:top;background:var(--panel);font-family:var(--fm);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mist);font-weight:600}
.mtx thead th:first-child{border-left:0}
.mtx tbody th{text-align:left;padding:1.1rem 1rem;border-top:1px solid var(--line2);background:var(--paper2);vertical-align:top}
.mtx tbody th .nm2{font-family:var(--fd);font-weight:800;font-size:1.05rem;color:var(--ink);letter-spacing:-.01em;display:flex;align-items:center;gap:.5rem}
.mtx tbody th .nm2 svg{width:20px;height:20px;color:var(--signal);flex:none}
.mtx tbody th .bd2{display:block;font-family:var(--fm);font-size:.54rem;letter-spacing:.06em;color:var(--signal2);text-transform:uppercase;margin-top:.35rem;font-weight:600}
.mtx tbody tr.feat th{box-shadow:inset 3px 0 0 var(--signal)}
.mtx tbody td{padding:1.1rem 1rem;border-top:1px solid var(--line2);border-left:1px solid var(--line2);color:var(--ink);vertical-align:top;line-height:1.45;font-size:.9rem}
.mtx tbody tr.feat td{background:rgba(12,39,64,.03)}
.mtx .rowlbl-m{display:none}
@media(max-width:860px){
  .mtx-wrap{border:0;overflow:visible;margin-inline:var(--gut)}
  .mtx{min-width:0}
  .mtx,.mtx thead,.mtx tbody,.mtx tr,.mtx th,.mtx td{display:block;width:100%}
  .mtx caption{border:1px solid var(--line);border-bottom:0;background:var(--panel)}
  .mtx thead{position:absolute;left:-9999px}
  .mtx tbody{display:grid;grid-template-columns:1fr;gap:1.4rem}
  .mtx tbody tr{border:1px solid var(--line);background:var(--paper2)}
  .mtx tbody th{background:var(--navy);padding:.9rem 1rem;box-shadow:none!important}
  .mtx tbody th .nm2{color:#fff}
  .mtx tbody th .bd2{color:var(--signal)}
  .mtx tbody tr.feat th{box-shadow:inset 0 3px 0 var(--signal)!important}
  .mtx tbody td{border-left:0;display:grid;grid-template-columns:8.5rem 1fr;gap:.6rem;align-items:baseline}
  .mtx tbody td .rowlbl-m{display:block;font-family:var(--fm);font-size:.55rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mist)}
}

/* Portfolio */
.filters{display:flex;flex-wrap:wrap;gap:.5rem}
.filters button{font-family:var(--fm);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;padding:.7em 1em;border:1px solid var(--line);background:var(--paper2);color:var(--mist);cursor:pointer;border-radius:2px;min-height:44px;transition:border-color var(--d-fast) ease,color var(--d-fast) ease,background var(--d-fast) ease}
.filters button:hover{border-color:var(--ink);color:var(--ink)}
.filters button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line)}
.pf-item{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--paper2);display:block;color:inherit}
.pf-item .ph{position:absolute;inset:0}
/* Opaque up to 44% so the caption never depends on how bright the photo is. */
.pf-item .meta{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:flex-end;padding:1.2rem;background:linear-gradient(0deg,var(--navy3) 0%,var(--navy3) 44%,rgba(8,24,39,.45) 72%,transparent 100%);transition:opacity var(--d-slow) ease}
.pf-item .meta .cat{font-family:var(--fm);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--signal)}
.pf-item .meta h3,.pf-item .meta h4{color:#fff;font-size:1.02rem;margin:.4rem 0 .2rem;letter-spacing:-.01em}
.pf-item .meta .l{font-family:var(--fm);font-size:.64rem;letter-spacing:.05em;color:var(--blue-pale);text-transform:uppercase}
.pf-item .badge-cap{position:absolute;top:12px;left:12px;z-index:4;font-family:var(--fm);font-size:.58rem;letter-spacing:.06em;color:#fff;background:rgba(8,24,39,.62);border:1px solid rgba(255,255,255,.22);padding:.35em .6em;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.pf-item[hidden]{display:none}
@media (hover:hover) and (pointer:fine){
  .pf-item .meta{opacity:0}
  .pf-item:hover .meta,.pf-item:focus-visible .meta{opacity:1}
  .pf-item:hover .ph img{transform:scale(1.06)}
}

/* Case-study teaser cards */
.cases{background:var(--paper2);border-top:1px solid var(--line)}
.cs-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.cs-card{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(1.4rem,2.4vw,1.9rem);background:var(--paper2);color:inherit;display:flex;flex-direction:column;gap:.35rem;position:relative;overflow:hidden;transition:background var(--d-ui) ease,transform var(--d-slow) var(--ease)}
.cs-card::after{content:"";position:absolute;top:12px;right:12px;width:12px;height:12px;border-top:2px solid var(--signal);border-right:2px solid var(--signal);opacity:0;transition:opacity var(--d-slow) ease}
.cs-card:hover{background:var(--panel)}
.cs-card:hover::after,.cs-card:focus-visible::after{opacity:1}
.cs-card .sect{font-family:var(--fm);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:var(--signal2)}
.cs-card h4{font-size:1rem;letter-spacing:-.01em;line-height:1.25;margin-top:.15rem}
.cs-card .metric{font-family:var(--fd);font-weight:800;font-size:1.5rem;color:var(--blue);letter-spacing:-.03em;margin-top:.5rem;line-height:1;font-variant-numeric:tabular-nums}
.cs-card .metric small{font-size:.4em;color:var(--mist);font-weight:600;margin-left:.15em;letter-spacing:.02em}
.cs-card .go{margin-top:auto;font-family:var(--fm);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);display:inline-flex;align-items:center;gap:.4em;padding-top:.7rem}
.cs-card .go svg{width:13px;height:13px;transition:transform var(--d-fast) var(--spring)}
.cs-card:hover .go svg{transform:translateX(3px)}

/* Estimator */
.calc-wrap{background:var(--paper2);border:1px solid var(--line);overflow:hidden}
.calc-top{padding:clamp(2rem,4vw,3.2rem);border-bottom:1px solid var(--line)}
.est-badge{display:inline-flex;align-items:center;gap:.45em;font-family:var(--fm);font-size:.6rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--signal2);background:var(--signal-tint);padding:.45em .8em;border-radius:2px;margin-bottom:1rem}
.est-badge .tick{width:7px;height:7px;background:var(--signal2);transform:rotate(45deg);flex:none}
.slabel{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}
.slabel .t{font-family:var(--fm);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mist)}
.slabel .v{font-family:var(--fd);font-weight:800;font-size:clamp(2rem,4vw,3rem);color:var(--blue);letter-spacing:-.03em;font-variant-numeric:tabular-nums;transition:transform var(--d-fast) var(--spring)}
.slabel .v.bump{transform:scale(1.05)}
.strack{position:relative;height:44px;display:flex;align-items:center}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;background:var(--panel);outline:none;cursor:pointer;position:relative;z-index:2;border-radius:100px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:var(--signal);border:3px solid var(--paper2);box-shadow:0 2px 10px rgba(228,97,30,.5);cursor:grab;transition:transform var(--d-fast) var(--spring)}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.14)}
input[type=range]::-webkit-slider-thumb:active{cursor:grabbing}
input[type=range]::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--signal);border:3px solid var(--paper2);box-shadow:0 2px 10px rgba(228,97,30,.5);cursor:grab}
.sfill{position:absolute;left:0;top:50%;transform:translateY(-50%);height:6px;background:var(--blue);border-radius:100px 0 0 100px;pointer-events:none;z-index:1;transition:width 60ms linear}
.srange{display:flex;justify-content:space-between;font-family:var(--fm);font-size:.64rem;color:var(--mist);margin-top:.6rem;letter-spacing:.04em}
.est-refine{margin-top:1.2rem;border-top:1px solid var(--line)}
.est-refine>summary{cursor:pointer;list-style:none;padding:1.1rem 0 .2rem;font-family:var(--fm);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);display:flex;align-items:center;gap:.5rem;min-height:44px}
.est-refine>summary::-webkit-details-marker{display:none}
.est-refine>summary .chev{width:14px;height:14px;color:var(--signal);transition:transform var(--d-ui) var(--ease)}
.est-refine[open]>summary .chev{transform:rotate(90deg)}
.est-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;padding:1.2rem 0 .4rem}
.est-grid label{display:block;font-family:var(--fm);font-size:.58rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mist);margin-bottom:.4rem}
.est-grid input,.est-grid select{width:100%;font-family:var(--fb);font-size:.95rem;color:var(--ink);background:var(--paper);border:1.5px solid var(--line);padding:.6em .8em;border-radius:2px;min-height:44px}
.est-grid input:focus,.est-grid select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(31,92,153,.14)}
.calc-out{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line)}
.calc-out .o{background:var(--paper2);padding:clamp(1.4rem,2.5vw,2rem)}
.calc-out .o .big{font-family:var(--fd);font-weight:700;font-size:clamp(1.5rem,2.6vw,2rem);color:var(--ink);letter-spacing:-.025em;line-height:1;font-variant-numeric:tabular-nums;transition:transform var(--d-fast) var(--spring)}
.calc-out .o .lbl{font-family:var(--fm);font-size:.6rem;letter-spacing:.07em;text-transform:uppercase;color:var(--mist);margin-top:.55rem}
/* Featured pair sits on the navy field — declared last so it wins the cascade. */
.calc-out .o.hero-o{grid-column:span 2;background:var(--navy);display:grid;grid-template-columns:1fr 1fr;gap:1px}
.calc-out .o.hero-o .oo{background:var(--navy)}
.calc-out .o.hero-o .big{font-weight:800;font-size:clamp(1.9rem,3.6vw,2.8rem);color:#fff;letter-spacing:-.03em}
.calc-out .o.hero-o .lbl{font-size:.62rem;letter-spacing:.08em;color:var(--blue-lite);margin-top:.6rem}
.calc-out .big.bump{transform:scale(1.05)}

/* Self-consumed vs exported split — reads the estimate at a glance */
.split-viz{background:var(--paper2);border-top:1px solid var(--line);padding:clamp(1.3rem,2.5vw,1.8rem) clamp(1.4rem,2.5vw,2rem)}
.split-cap{display:flex;align-items:center;gap:.5rem;font-family:var(--fm);font-size:.6rem;letter-spacing:.09em;text-transform:uppercase;color:var(--mist);margin-bottom:.75rem}
.split-cap .tick{width:6px;height:6px;background:var(--signal);transform:rotate(45deg);flex:none}
.split-bar{display:flex;height:16px;border:1px solid var(--line);overflow:hidden;background:var(--panel)}
.split-bar .seg{height:100%;transition:width var(--d-slow) var(--ease)}
.split-bar .s-self{background:var(--signal-deep)}
.split-bar .s-exp{background:var(--blue-lite)}
.split-key{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;margin-top:.7rem;font-size:.78rem;color:var(--mist)}
.split-key span{display:inline-flex;align-items:center;gap:.45rem}
.split-key i{width:10px;height:10px;flex:none}
.split-key .k-self{background:var(--signal-deep)}
.split-key .k-exp{background:var(--blue-lite)}
@media (prefers-reduced-motion:reduce){.split-bar .seg{transition:none}}

/* Opportunity scorer */
.scorer{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,.9fr);gap:clamp(1.5rem,3vw,2.6rem);align-items:start}
.q-list{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line)}
.q{background:var(--paper2);padding:clamp(1.1rem,2vw,1.5rem);border:0}
.q legend{display:flex;align-items:baseline;gap:.6rem;margin-bottom:.9rem;padding:0}
.q legend .qn{font-family:var(--fm);font-size:.62rem;letter-spacing:.1em;color:var(--signal2);font-weight:600}
.q legend .qt{font-family:var(--fd);font-size:1rem;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.seg-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.5rem}
.seg-opts button{display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--fb);font-size:.86rem;font-weight:500;color:var(--slate);background:var(--paper);border:1.5px solid var(--line);padding:.45em .6em;line-height:1.25;cursor:pointer;border-radius:2px;min-height:48px;transition:border-color var(--d-fast) ease,background var(--d-fast) ease,color var(--d-fast) ease,transform var(--d-fast) var(--spring)}
.seg-opts button:hover{border-color:var(--ink);color:var(--ink)}
.seg-opts button:active{transform:scale(.97)}
.seg-opts button[aria-pressed="true"]{background:var(--navy);color:#fff;border-color:var(--navy)}
@media(max-width:420px){.seg-opts{grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}}
.score-col{position:sticky;top:calc(var(--nav-h) + 22px)}
.scorecard{background:var(--navy);color:var(--blue-lite);padding:clamp(1.5rem,2.5vw,2rem);overflow:hidden;position:relative}
.scorecard::after{content:"";position:absolute;inset:0;background:radial-gradient(80% 60% at 100% 0,rgba(228,97,30,.18),transparent 55%);pointer-events:none}
.scorecard>*{position:relative;z-index:1}
.scorecard .lab{font-family:var(--fm);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-lite)}
.gauge{margin:.9rem 0 1.5rem}
.gauge .cells{display:grid;grid-template-columns:repeat(12,1fr);gap:2px;height:12px}
.gauge .cells i{background:rgba(255,255,255,.12);border-radius:1px;transition:background var(--d-fast) ease;transition-delay:calc(var(--i,0)*30ms)}
.gauge .cells i.on{background:var(--signal)}
.gauge .marks{position:relative;height:16px;margin-top:.5rem}
.gauge .marks span{position:absolute;top:0;transform:translateX(-50%);font-family:var(--fm);font-size:.54rem;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.55);white-space:nowrap}
.gauge .marks em{display:block;width:1px;height:5px;background:rgba(255,255,255,.45);margin:0 auto 3px}
.verdict{font-family:var(--fd);font-weight:800;font-size:clamp(1.5rem,2.6vw,1.9rem);color:#fff;letter-spacing:-.02em;min-height:2.15em;line-height:1.05}
.verdict.strong{color:var(--signal)}
.verdict-sub{font-size:.92rem;color:var(--blue-lite);margin:.7rem 0 1.3rem;line-height:1.5;min-height:6em}
.scorecard .btn{width:100%;min-height:52px}
.next-check{border:1px solid var(--line);border-top:0;background:var(--paper2);padding:1.2rem 1.4rem}
.next-check .lab{font-family:var(--fm);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--signal2);margin-bottom:.7rem}
.next-check ul{list-style:none}
.next-check li{font-family:var(--fm);font-size:.72rem;color:var(--slate);padding:.4rem 0;border-bottom:1px dashed var(--line);line-height:1.4}
.next-check li::before{content:"— ";color:var(--signal)}
.next-check li:last-child{border-bottom:0}
@media(max-width:900px){.scorer{grid-template-columns:1fr}.score-col{position:static}.next-check{display:none}}

/* Why grid */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,.14);border-left:1px solid rgba(255,255,255,.14)}
.why-c{border-right:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14);padding:clamp(1.6rem,3vw,2.4rem);transition:background var(--d-ui) ease,transform var(--d-slow) var(--ease)}
.why-c .stat{font-family:var(--fd);font-weight:800;font-size:clamp(1.8rem,3.4vw,2.6rem);color:var(--signal);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.why-c .stat small{font-size:.34em;color:var(--blue-lite);font-weight:600;letter-spacing:.04em;vertical-align:super;margin-left:.2em}
.why-ic{width:28px;height:28px;margin:1rem 0 .5rem}
.why-c h4{color:#fff;font-size:var(--t-h4);margin:.4rem 0 .55rem}
.why-c p{font-size:.92rem;color:var(--blue-lite);line-height:1.55}

/* Insights */
.ins-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.art{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(1.5rem,2.5vw,2.2rem);background:var(--paper2);display:flex;flex-direction:column;gap:.9rem;color:inherit;transition:background var(--d-ui) ease,transform var(--d-slow) var(--ease)}
.art:hover{background:var(--panel)}
.art-ic{width:32px;height:32px;flex:none}
.art .top{display:flex;justify-content:space-between;align-items:center;gap:1rem;font-family:var(--fm);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--signal2)}
.art .top .rt{color:var(--mist)}
.art h4{font-size:var(--t-h4);letter-spacing:-.015em;line-height:1.2}
.art p{font-size:.92rem;color:var(--mist);line-height:1.55;flex:1}
.art .more{font-family:var(--fm);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);display:inline-flex;align-items:center;gap:.4em}
.art .more svg{width:13px;height:13px;transition:transform var(--d-fast) var(--spring)}
.art:hover .more svg{transform:translateX(3px)}

/* FAQ accordion (home + faq page) */
.faq-wrap{border-top:1px solid var(--line);max-width:900px}
.fq{border-bottom:1px solid var(--line)}
.fq>button{width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:1.4rem 0;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;font-family:var(--fd);font-weight:700;font-size:clamp(1.02rem,1.6vw,1.2rem);color:var(--ink);letter-spacing:-.01em;min-height:56px}
.fq .ic{width:26px;height:26px;flex:none;position:relative}
.fq .ic::before,.fq .ic::after{content:"";position:absolute;background:var(--signal);top:50%;left:50%;transform:translate(-50%,-50%)}
.fq .ic::before{width:14px;height:2px}
.fq .ic::after{width:2px;height:14px;transition:transform var(--d-slow) var(--ease)}
.fq>button[aria-expanded="true"] .ic::after{transform:translate(-50%,-50%) scaleY(0)}
.fq .ans{height:0;overflow:hidden;transition:height var(--d-slow) var(--ease)}
.fq .ans-in{padding:0 0 1.5rem}
.fq .ans p{color:var(--slate);font-size:1rem;max-width:70ch}
.fq .ans p+p{margin-top:.8rem}
.fq .ans ul{margin:.7rem 0 0 1.2rem;color:var(--slate)}
.fq .ans li{margin-bottom:.4rem}
.fq .ans a{color:var(--blue2);border-bottom:1px solid var(--line)}
.fq .ans a:hover{border-color:var(--signal)}

/* PV flow diagram */
.pv-flow{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.4rem;margin:.2rem 0 1.4rem;max-width:640px}
.pv-flow .node{display:flex;flex-direction:column;align-items:center;gap:.5rem;flex:1;min-width:64px;text-align:center}
.pv-flow .chip{width:44px;height:44px;display:grid;place-items:center;border:1.5px solid var(--line);border-radius:2px;background:var(--paper2)}
.pv-flow .chip svg{width:24px;height:24px;stroke:var(--signal);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pv-flow .node span{font-family:var(--fm);font-size:.55rem;letter-spacing:.05em;text-transform:uppercase;color:var(--mist);line-height:1.3}
.pv-flow .arrow{flex:none;align-self:center;margin-top:-1.1rem}
.pv-flow .arrow svg{width:18px;height:18px;stroke:var(--blue);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:520px){.pv-flow .arrow{transform:rotate(90deg)}.pv-flow{gap:.2rem}}

/* Final CTA */
.cta{background:var(--navy);position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0;background-image:var(--grid);background-size:52px 52px;opacity:.5}
.cta::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 90% 4%,rgba(228,97,30,.22),transparent 55%)}
.cta > .in{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,5vw,5rem);align-items:start;max-width:var(--mw);margin-inline:auto;padding-inline:var(--gut)}
.cta h2{color:#fff;font-size:var(--t-h2);letter-spacing:-.03em;line-height:1.02}
.cta .lead{color:var(--blue-lite);font-size:1.1rem;margin:1.3rem 0 1.8rem;max-width:42ch}
.assur{display:flex;flex-direction:column;gap:.9rem;margin-top:2rem}
.assur .a{display:flex;gap:.7rem;align-items:flex-start;color:var(--blue-pale);font-size:.96rem}
.assur .a svg{width:19px;height:19px;color:var(--signal);flex:none;margin-top:.15em}
.cta-human{display:flex;align-items:center;gap:.9rem;margin-top:1.8rem;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.16)}
.cta-human .scene{height:52px;flex:none}
.cta-human .scene svg{height:100%;width:auto}
.cta-human p{color:var(--blue-pale);font-size:.96rem;line-height:1.45}
.cta-human p strong{color:#fff}

/* ── 8. Forms ──────────────────────────────────────────────────────────── */
.form{background:var(--paper2);padding:clamp(1.8rem,3vw,2.6rem)}
.form h3{font-size:1.35rem;letter-spacing:-.02em;margin-bottom:.35rem}
.form .sub{font-size:.92rem;color:var(--mist);margin-bottom:1.6rem}
.fld{margin-bottom:1rem}
.fld label{display:block;font-family:var(--fm);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mist);margin-bottom:.4rem}
.fld input,.fld select{width:100%;font-family:var(--fb);font-size:.98rem;color:var(--ink);background:var(--paper);border:1.5px solid var(--line);padding:.75em .9em;border-radius:2px;min-height:48px;transition:border-color var(--d-fast) ease,box-shadow var(--d-fast) ease}
.fld input:focus,.fld select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(31,92,153,.14)}
.fld input[aria-invalid="true"],.fld select[aria-invalid="true"]{border-color:var(--signal)}
.fld.two{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form .btn{width:100%;margin-top:.6rem}
.form .fp{font-family:var(--fm);font-size:.64rem;color:var(--mist);text-align:center;margin-top:.9rem;letter-spacing:.03em;line-height:1.6}
.form .err{display:none;background:var(--signal-tint);border:1px solid var(--signal);color:var(--signal2);font-size:.85rem;padding:.8rem 1rem;border-radius:2px;margin-top:1rem;line-height:1.5}
.form .err.show{display:block}
.form .err a{color:var(--signal2);text-decoration:underline;font-weight:600}
.form .sending{opacity:.6;pointer-events:none}
.form .done{display:none;text-align:center;padding:1.5rem 0}
.form .done.show{display:block}
.form .done .ic{width:52px;height:52px;color:var(--ok);margin:0 auto .8rem}
.form .done h3{color:var(--ok)}
.form .done p{color:var(--slate);margin-top:.4rem}

/* ── 9. Footer ─────────────────────────────────────────────────────────── */
.site-footer{background:var(--navy3);color:var(--blue-lite);padding:clamp(3rem,6vw,5rem) 0 2rem;border-top:1px solid rgba(255,255,255,.1)}
.fg{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:2.5rem}
.site-footer h4{font-family:var(--fm);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--signal);margin-bottom:1.2rem;font-weight:500}
.site-footer .fnav a{display:block;color:var(--blue-lite);font-size:.9rem;padding:.3em 0;transition:color var(--d-fast) ease,transform var(--d-fast) var(--spring)}
.site-footer .fnav a:hover{color:#fff;transform:translateX(3px)}
.fb .logo-mark{height:30px;width:auto;color:#fff;margin-bottom:1.2rem;overflow:visible}
.fb p{font-size:.9rem;color:var(--blue-lite);max-width:34ch;line-height:1.55}
.fb .pos{font-family:var(--fm);font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mist);margin-top:1rem}
.fc-row{display:flex;align-items:flex-start;gap:.65rem;color:var(--blue-lite);font-size:.9rem;padding:.34em 0;transition:color var(--d-fast) ease,transform var(--d-fast) var(--spring)}
.fc-row svg{width:16px;height:16px;color:var(--signal);flex:none;margin-top:.18em}
.fc-row strong{color:#fff;font-family:var(--fm);letter-spacing:.02em;font-size:.95rem}
a.fc-row:hover{color:#fff;transform:translateX(3px)}
.fc-row .addr2{line-height:1.55;color:var(--mist);font-size:.84rem}
.social{display:flex;gap:.6rem;margin-top:1.2rem}
.social a{width:42px;height:42px;border:1px solid rgba(255,255,255,.2);display:grid;place-items:center;transition:border-color var(--d-fast) ease,transform var(--d-fast) var(--ease)}
.social a:hover{border-color:#fff;transform:translateY(-2px)}
.social a svg{width:16px;height:16px}
/* Per-office register strip — titleblock language, drafting ticks */
.offices{margin-top:2.8rem;padding-top:1.8rem;border-top:1px solid rgba(255,255,255,.1);display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem;max-width:720px}
.office{position:relative;padding-left:.2rem}
.office+.office{padding-left:1.6rem;border-left:1px solid rgba(255,255,255,.1)}
.office-tag{display:flex;align-items:center;gap:.5rem;font-family:var(--fm);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--signal);margin-bottom:.7rem}
.office-tag .tick{width:6px;height:6px;background:var(--signal);transform:rotate(45deg);flex:none}
.office address{font-style:normal;line-height:1.55;color:var(--blue-lite);font-size:.86rem;margin-bottom:.55rem}
.office>a{display:inline-block;color:#fff;font-family:var(--fm);font-size:.9rem;letter-spacing:.02em;transition:color var(--d-fast) ease,transform var(--d-fast) var(--spring)}
.office>a:hover{color:var(--signal);transform:translateX(2px)}
.office-hours{display:inline-block;font-family:var(--fm);font-size:.68rem;letter-spacing:.06em;color:var(--mist)}
@media(max-width:760px){
  .offices{grid-template-columns:1fr;gap:1.4rem}
  .office+.office{padding-left:.2rem;border-left:0;border-top:1px solid rgba(255,255,255,.08);padding-top:1.4rem}
}
.fbot{border-top:1px solid rgba(255,255,255,.1);margin-top:2.6rem;padding-top:1.4rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-family:var(--fm);font-size:.66rem;letter-spacing:.04em;color:var(--mist)}
.fbot a:hover{color:var(--signal-deep)}

/* Article & case-study diagram figures — shared frame for gx- scenes */
.gx-fig{margin:clamp(1.8rem,4vw,2.6rem) 0;border:1px solid var(--line);background:var(--paper2)}
.gx-fig svg{display:block;width:100%;height:auto;background:var(--panel);border-bottom:1px solid var(--line)}
.gx-fig figcaption{padding:.85rem 1.1rem;font-family:var(--fm);font-size:.66rem;letter-spacing:.05em;color:var(--mist);line-height:1.5}
.gx-fig figcaption b{color:var(--ink);font-weight:600}
.gx-fig .fig-legend{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin-top:.55rem}
.gx-fig .fig-legend span{display:inline-flex;align-items:center;gap:.4rem;text-transform:none;letter-spacing:0;font-size:.72rem}
.gx-fig .fig-legend i{width:11px;height:11px;flex:none}
/* Case-study metric mini-bars */
.cs-bars{display:grid;gap:.5rem;margin:1rem 0 .2rem}
.cs-bar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.6rem}
.cs-bar .cb-lbl{font-family:var(--fm);font-size:.56rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mist);min-width:5.2em}
.cs-bar .cb-track{height:8px;background:var(--panel);border:1px solid var(--line2);overflow:hidden}
.cs-bar .cb-fill{display:block;height:100%;transform-origin:left center}
.cs-bar .cb-val{font-family:var(--fm);font-size:.72rem;color:var(--ink);font-variant-numeric:tabular-nums;min-width:4.5em;text-align:right}

/* ── 10. Sub-page: hero + article ──────────────────────────────────────── */
.phero{background:var(--navy);color:var(--blue-lite);position:relative;overflow:hidden;padding:calc(var(--nav-h) + clamp(2.4rem,5vw,4rem)) 0 clamp(2.4rem,5vw,3.5rem)}
.phero::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 90% 0,rgba(228,97,30,.16),transparent 55%);pointer-events:none}
.phero::before{content:"";position:absolute;inset:0;background-image:var(--grid);background-size:44px 44px;opacity:.5;pointer-events:none}
.phero > .in{position:relative;z-index:1;max-width:var(--mw);margin-inline:auto;padding-inline:var(--gut)}
.crumbs{font-family:var(--fm);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--blue-lite);display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-bottom:1.4rem}
.crumbs a{border-bottom:1px solid transparent;transition:border-color var(--d-fast) ease;padding-block:.3em}
.crumbs a:hover{border-color:var(--signal)}
.crumbs .sep{color:rgba(255,255,255,.3)}
.crumbs [aria-current]{color:#fff}
.phero h1{color:#fff;font-size:clamp(2rem,4.6vw,3.4rem);letter-spacing:-.03em;max-width:22ch;line-height:1.04}
.phero .dek{color:var(--blue-pale);font-size:var(--t-lead);max-width:60ch;margin-top:1.2rem;line-height:1.5}
.phero .meta{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;margin-top:1.6rem;font-family:var(--fm);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--blue-lite)}
.phero .meta b{color:var(--signal);font-weight:500}

.article{padding:clamp(40px,6vw,72px) 0}
.article .body{max-width:68ch;margin-inline:auto}
.article .body h2{font-size:clamp(1.4rem,2.6vw,1.9rem);letter-spacing:-.02em;margin:2.2rem 0 .8rem;scroll-margin-top:calc(var(--nav-h) + 20px)}
.article .body h3{font-size:1.18rem;margin:1.6rem 0 .5rem}
.article .body p{font-size:1.05rem;color:var(--slate);margin-bottom:1.1rem;line-height:1.7}
.article .body ul,.article .body ol{margin:.4rem 0 1.2rem 1.3rem;color:var(--slate)}
.article .body li{margin-bottom:.5rem;line-height:1.6}
.article .body a{color:var(--blue2);border-bottom:1px solid var(--line);transition:border-color var(--d-fast) ease}
.article .body a:hover{border-color:var(--signal)}
.pullquote{border-left:3px solid var(--signal);padding:.4rem 0 .4rem 1.3rem;margin:1.8rem 0;font-family:var(--fd);font-weight:700;font-size:clamp(1.2rem,2.2vw,1.55rem);color:var(--ink);letter-spacing:-.01em;line-height:1.25}
.keybox{background:var(--paper2);border:1px solid var(--line);border-left:3px solid var(--signal);padding:clamp(1.3rem,2.5vw,1.8rem);margin:2rem 0}
.keybox h3,.keybox h4{font-family:var(--fm);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--signal2);margin-bottom:.9rem;font-weight:500}
.keybox ul{list-style:none;margin:0;display:flex;flex-direction:column;gap:.75rem}
.keybox li{position:relative;padding-left:1.55rem;font-size:.96rem;color:var(--slate);line-height:1.55;margin:0}
.keybox li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;background:var(--signal);transform:rotate(45deg)}
.keybox a{color:var(--signal2);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;transition:color .15s ease}
.keybox a:hover{color:var(--signal)}
.tablewrap{overflow-x:auto;margin:1.6rem 0;border:1px solid var(--line)}
.article-table{width:100%;border-collapse:collapse;font-size:.94rem;min-width:460px}
.article-table th,.article-table td{border-bottom:1px solid var(--line);border-right:1px solid var(--line);padding:.75rem .9rem;text-align:left}
.article-table tr:last-child td{border-bottom:0}
.article-table th:last-child,.article-table td:last-child{border-right:0}
.article-table th{background:var(--panel);font-family:var(--fm);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mist);font-weight:600}
.article-table td{color:var(--ink);font-variant-numeric:tabular-nums}

/* Table of contents */
.toc{background:var(--paper2);border:1px solid var(--line);border-left:3px solid var(--blue);padding:1.3rem 1.5rem;margin:0 0 2.2rem}
.toc h2{font-family:var(--fm);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--blue2);margin-bottom:.8rem;font-weight:500}
.toc ol{margin:0;padding-left:1.2rem;counter-reset:none}
.toc li{margin-bottom:.35rem;font-size:.94rem;line-height:1.45}
.toc a{color:var(--slate);border-bottom:1px solid transparent}
.toc a:hover{color:var(--ink);border-color:var(--signal)}

/* Related reading */
.related{border-top:1px solid var(--line);padding-top:clamp(1.8rem,3vw,2.4rem);margin-top:clamp(2.4rem,4vw,3.2rem)}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:1.4rem}
.related-grid a{background:var(--paper2);padding:1.2rem 1.3rem;display:flex;flex-direction:column;gap:.4rem;color:inherit;transition:background var(--d-ui) ease}
.related-grid a:hover{background:var(--panel)}
.related-grid .cat{font-family:var(--fm);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:var(--signal2)}
.related-grid h3,.related-grid h4{font-size:.98rem;line-height:1.3;letter-spacing:-.01em}
@media(max-width:760px){.related-grid{grid-template-columns:1fr}}

.cta-band{background:var(--navy);color:var(--blue-lite);padding:clamp(2.4rem,5vw,3.6rem) 0;position:relative;overflow:hidden;margin-top:var(--sp-block)}
.cta-band::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 88% 0,rgba(228,97,30,.2),transparent 55%);pointer-events:none}
.cta-band > .in{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;max-width:var(--mw);margin-inline:auto;padding-inline:var(--gut)}
.cta-band h3{color:#fff;font-size:clamp(1.3rem,2.4vw,1.8rem);letter-spacing:-.02em;max-width:24ch}

/* ── 11. Sub-page: case studies + blog hub ─────────────────────────────── */
.cs-section{padding:clamp(48px,7vw,88px) 0}
.cs-full-grid{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.cs-full{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(1.6rem,3vw,2.4rem);background:var(--paper2);position:relative;transition:background var(--d-ui) ease;scroll-margin-top:calc(var(--nav-h) + 24px)}
.cs-full:hover{background:var(--paper)}
.cs-full:target{background:var(--signal-tint)}
.cs-full .top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:1rem}
.cs-full .sect{font-family:var(--fm);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--signal2);font-weight:600}
.cs-full .loc{font-family:var(--fm);font-size:.6rem;letter-spacing:.05em;text-transform:uppercase;color:var(--mist)}
.cs-full h3{font-size:clamp(1.2rem,2vw,1.5rem);letter-spacing:-.02em;margin-bottom:1.1rem;line-height:1.2}
.cs-specs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:1.3rem}
.cs-specs .s{background:var(--paper2);padding:.9rem 1rem}
.cs-specs .v{font-family:var(--fd);font-weight:700;font-size:1.4rem;color:var(--blue);letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.cs-specs .v small{font-size:.4em;color:var(--mist);font-weight:600;margin-left:.1em}
.cs-specs .k{font-family:var(--fm);font-size:.56rem;letter-spacing:.05em;text-transform:uppercase;color:var(--mist);margin-top:.4rem}
.cs-body{display:flex;flex-direction:column;gap:.85rem;margin-bottom:1.2rem}
.cs-body .r{display:grid;grid-template-columns:6rem 1fr;gap:.7rem;align-items:start}
.cs-body .tag{font-family:var(--fm);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:var(--signal2);padding-top:.15rem;white-space:nowrap}
.cs-body p{font-size:.94rem;color:var(--slate);line-height:1.5}

/* Jump-to chip index — single scrollable row of clickable chips, overriding the dark-hero .crumbs palette for the light case-studies bg */
.cs-index{gap:.5rem;align-items:center;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--line2) transparent;margin:0 0 clamp(2rem,4vw,3rem);padding-bottom:.55rem}
.cs-index::-webkit-scrollbar{height:6px}
.cs-index::-webkit-scrollbar-thumb{background:var(--line2);border-radius:999px}
.cs-index .sep{color:var(--mist);font-weight:600;flex:0 0 auto}
.cs-index a{
  flex:0 0 auto;white-space:nowrap;border-bottom:0;padding:.44em .8em;font-size:.7rem;line-height:1;
  color:var(--slate);background:var(--paper2);border:1px solid var(--line);border-radius:999px;
  transition:background var(--d-fast) ease,border-color var(--d-fast) ease,color var(--d-fast) ease;
}
.cs-index a:hover,.cs-index a:focus-visible{color:var(--signal2);border-color:var(--signal);background:var(--signal-tint)}

.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.blog-card{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(1.5rem,2.6vw,2.2rem);background:var(--paper2);display:flex;flex-direction:column;gap:.8rem;color:inherit;position:relative;overflow:hidden;transition:background var(--d-ui) ease,transform var(--d-slow) var(--ease)}
.blog-card::after{content:"";position:absolute;top:12px;right:12px;width:12px;height:12px;border-top:2px solid var(--signal);border-right:2px solid var(--signal);opacity:0;transition:opacity var(--d-slow) ease}
.blog-card:hover{background:var(--panel)}
.blog-card:hover::after,.blog-card:focus-visible::after{opacity:1}
.blog-card .cat{display:flex;justify-content:space-between;gap:1rem;font-family:var(--fm);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--signal2)}
.blog-card .cat .rt{color:var(--mist)}
.blog-card h3{font-size:1.16rem;letter-spacing:-.015em;line-height:1.25}
.blog-card p{font-size:.92rem;color:var(--mist);line-height:1.55;flex:1}
.blog-card .go{font-family:var(--fm);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);display:inline-flex;align-items:center;gap:.4em}
.blog-card .go svg{width:13px;height:13px;transition:transform var(--d-fast) var(--spring)}
.blog-card:hover .go svg{transform:translateX(3px)}

/* ── 12. FAQ page ──────────────────────────────────────────────────────── */
.faq-layout{display:grid;grid-template-columns:230px 1fr;gap:clamp(2rem,4vw,3.5rem);align-items:start}
.faq-side{position:sticky;top:calc(var(--nav-h) + 24px)}
.faq-side h4{font-family:var(--fm);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--signal2);margin-bottom:1rem;font-weight:500}
.faq-side a{display:block;font-size:.92rem;color:var(--mist);padding:.45em 0 .45em .9rem;border-left:2px solid var(--line);transition:color var(--d-fast) ease,border-color var(--d-fast) ease}
.faq-side a:hover,.faq-side a.act{color:var(--ink);border-color:var(--signal)}
.faq-group{margin-bottom:clamp(2.2rem,4vw,3.2rem);scroll-margin-top:calc(var(--nav-h) + 24px)}
.faq-group>h2{font-size:clamp(1.35rem,2.4vw,1.8rem);letter-spacing:-.02em;margin-bottom:.4rem}
.faq-group>.gd{color:var(--mist);font-size:.96rem;margin-bottom:1.2rem;max-width:60ch}
.faq-group .faq-wrap{max-width:none}
@media(max-width:860px){.faq-layout{grid-template-columns:1fr}.faq-side{position:static;border-bottom:1px solid var(--line);padding-bottom:1.4rem}.faq-side .faq-side-nav{display:flex;flex-wrap:wrap;gap:.5rem}.faq-side a{border-left:0;border:1px solid var(--line);padding:.5em .9em;font-size:.82rem}}

/* ── 13. 404 ───────────────────────────────────────────────────────────── */
.e404{min-height:80svh;display:flex;align-items:center;background:var(--navy);position:relative;overflow:hidden;padding-top:var(--nav-h)}
.e404::before{content:"";position:absolute;inset:0;background-image:var(--grid);background-size:52px 52px;opacity:.55}
.e404::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 88% 6%,rgba(228,97,30,.2),transparent 55%)}
.e404 .in{position:relative;z-index:2}
.e404 .code{font-family:var(--fm);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--signal);margin-bottom:1.4rem}
.e404 h1{color:#fff;font-size:clamp(2.2rem,5.5vw,4rem);letter-spacing:-.035em;max-width:16ch}
.e404 p{color:var(--blue-lite);font-size:var(--t-lead);max-width:52ch;margin:1.3rem 0 2rem}
.e404 .links{display:flex;flex-wrap:wrap;gap:.8rem 1.2rem;align-items:center}

/* ── 14. Reveal, responsive, motion + a11y guards ──────────────────────── */
.rvx{opacity:0;transform:translate3d(0,26px,0);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rvx.in{opacity:1;transform:none}
.rvx[data-d="1"]{transition-delay:.06s}
.rvx[data-d="2"]{transition-delay:.12s}
.rvx[data-d="3"]{transition-delay:.18s}
.rvx[data-d="4"]{transition-delay:.24s}
.rvx[data-d="5"]{transition-delay:.30s}

@media (hover:hover) and (pointer:fine){
  .journey .st:hover,.cs-card:hover,.blog-card:hover{transform:translateY(-4px)}
  .eng-c:hover,.why-c:hover,.bipv-detail .d:hover{background:rgba(255,255,255,.04)}
  .eng-c:hover{background:var(--panel)}
}

@media(max-width:1080px){
  .cred > .in{grid-template-columns:repeat(2,1fr)}
  .cred .c:nth-child(2){border-right:0}
  .cred .c:nth-child(1),.cred .c:nth-child(2){border-bottom:1px solid var(--line)}
  .eng-grid,.why-grid,.pf-grid,.ins-grid,.blog-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .cs-grid{grid-template-columns:repeat(2,1fr)}
  .pr,.pr:nth-child(even){grid-template-columns:1fr}
  .pr:nth-child(even) .pr-txt{order:0}
  .pr-img{min-height:280px}
  .solrow{grid-template-columns:1fr}
  .solrow:nth-child(even) .sol-txt{order:0}
  .bipv-detail{grid-template-columns:1fr}
  .bipv-detail .d{border-right:0;border-bottom:1px solid rgba(255,255,255,.14)}
  .cta > .in{grid-template-columns:1fr}
  .fg{grid-template-columns:1fr 1fr}
  .fld.two{grid-template-columns:1fr}
  .journey .steps{grid-template-columns:1fr 1fr}
  .journey .st:nth-child(2){border-right:0}
  .journey .st:nth-child(1),.journey .st:nth-child(2){border-bottom:1px solid var(--line)}
  .cs-full-grid{grid-template-columns:1fr}
  body{padding-bottom:76px}   /* clearance for the mobile CTA bar */
}
@media(max-width:560px){
  body{font-size:16px}
  .cred > .in{grid-template-columns:1fr}
  .cred .c{border-right:0;border-bottom:1px solid var(--line)}
  .eng-grid,.why-grid,.pf-grid,.ins-grid,.cs-grid,.blog-grid{grid-template-columns:1fr}
  .pr-specs,.cs-specs{grid-template-columns:1fr 1fr}
  .pr-specs .s:nth-child(3):nth-last-child(1),.cs-specs .s:nth-child(3):nth-last-child(1){grid-column:1 / -1}
  .calc-out{grid-template-columns:1fr}
  .calc-out .o.hero-o{grid-column:span 1;grid-template-columns:1fr}
  .est-grid{grid-template-columns:1fr}
  .fg{grid-template-columns:1fr}
  .journey .steps{grid-template-columns:1fr}
  .journey .st{border-right:0;border-bottom:1px solid var(--line)}
  .journey .st:last-child{border-bottom:0}
}
@media(min-width:561px) and (max-width:680px){.est-grid{grid-template-columns:1fr 1fr}}

/* Reduced transparency — Apple materials fallback */
@media (prefers-reduced-transparency:reduce){
  .nav.solid,.nav.scrolled,.nk,.mcta{background:#091827;-webkit-backdrop-filter:none;backdrop-filter:none}
  .pf-item .badge-cap,.sol-img .no{-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* Reduced motion — gentler, not zero */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .rvx{opacity:1!important;transform:none!important}
  .hero .bg img{transform:none!important}
  .fq .ans{transition:none}
  .btn{transform:none!important}
}

/* ── 17. Footer readability pass ─────────────────────────────────────── */
.site-footer{background:#fff;color:var(--slate);border-top:1px solid var(--line)}
.site-footer h4{color:var(--signal-deep);font-size:.72rem;letter-spacing:.14em}
.site-footer .fnav a{font-size:1rem;color:var(--slate);padding:.42em 0}
.site-footer .fnav a:hover{color:var(--ink)}
.site-footer .logo-mark{color:var(--navy3)}
.fb p{font-size:1rem;color:var(--slate)}
.fb .pos{color:var(--mist);border-color:var(--line)}
.fc-row{font-size:1rem;color:var(--slate)}
.fc-row:hover{color:var(--ink)}
.fc-row strong{color:var(--ink)}
.site-footer .social{display:flex;flex-wrap:nowrap;gap:.45rem}
.site-footer .social a{color:var(--slate);border-color:var(--line);display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;width:auto;height:auto;padding:.45em .7em;white-space:nowrap}
.site-footer .social a svg{width:15px;height:15px;flex:none}
.site-footer .social a:hover{color:var(--signal-deep);border-color:var(--signal)}
.site-footer .offices,.site-footer .office,.site-footer .fbot,.site-footer .fg{border-color:var(--line)}
.site-footer .office>a{display:inline-flex;align-items:center;gap:.4rem;color:var(--ink);font-weight:700;font-size:.98rem;visibility:visible}
.site-footer .office>a:hover{color:var(--signal-deep);transform:none}
.site-footer .office-tag{color:var(--signal-deep);font-weight:700;font-size:.76rem;letter-spacing:.13em}
.office address{color:var(--slate);font-size:.98rem;line-height:1.65;font-style:normal}
.office-hours{color:var(--mist)}
.site-footer .office{padding-left:0}
.site-footer .office+.office{padding-left:0;border-left:0}
.dirlink{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--fm);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--blue2);margin-top:.6rem;transition:color var(--d-fast) ease}
.dirlink:hover{color:var(--ink)}
.fbot,.fbot span{color:var(--mist);font-size:.86rem;line-height:1.6}

/* Print */
@media print{
  .nav,.mcta,#prog,.scrolln,.nav-scrim,.cta-band,.site-footer .social{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .ph,.hero .bg{display:none}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;color:#555}
}

/* ── 15. Project register plates ───────────────────────────────────────────
   A portfolio tile with no verified photograph renders as a drawing plate
   rather than borrowing another project's image. Add a <picture> inside
   .ph and remove the .plate class to promote it to a photo tile.          */
.pf-item.plate{background:var(--navy2)}
.pf-item.plate .plate-face{
  position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;
  justify-content:space-between;padding:1.3rem;
  background-image:var(--grid);background-size:38px 38px;
}
.pf-item.plate .plate-face::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(90% 70% at 100% 0,rgba(228,97,30,.14),transparent 58%);
  pointer-events:none;
}
.pf-item.plate .pl-top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;position:relative;z-index:1}
.pf-item.plate .pl-sect{font-family:var(--fm);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--signal)}
.pf-item.plate .pl-no{font-family:var(--fm);font-size:.56rem;letter-spacing:.1em;color:rgba(255,255,255,.42);font-variant-numeric:tabular-nums}
.pf-item.plate .pl-cap{
  position:relative;z-index:1;font-family:var(--fd);font-weight:800;
  font-size:clamp(2.1rem,4.6vw,3rem);color:#fff;letter-spacing:-.04em;line-height:.95;
  font-variant-numeric:tabular-nums;
}
.pf-item.plate .pl-cap small{font-size:.36em;color:var(--signal);font-weight:700;margin-left:.12em;vertical-align:super;letter-spacing:.02em}
.pf-item.plate .pl-btm{position:relative;z-index:1;display:flex;flex-direction:column;gap:.3rem}
.pf-item.plate h4{color:#fff;font-size:.98rem;letter-spacing:-.01em;line-height:1.25}
.pf-item.plate .pl-loc{font-family:var(--fm);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:var(--blue-lite)}
.pf-item.plate .pl-rule{height:1px;background:rgba(255,255,255,.16);margin:.7rem 0 .55rem;position:relative;z-index:1}
.pf-item.plate .pl-mark{position:absolute;width:11px;height:11px;border:1.5px solid rgba(228,97,30,.75);z-index:2}
.pf-item.plate .m1{top:10px;left:10px;border-right:0;border-bottom:0}
.pf-item.plate .m2{bottom:10px;right:10px;border-left:0;border-top:0}
.pf-item.plate .meta{display:none}
@media (hover:hover) and (pointer:fine){
  .pf-item.plate:hover .plate-face{background-color:rgba(255,255,255,.03)}
  .pf-item.plate:hover .pl-cap{color:#fff}
}

/* ── 16. Motion library — cinematic scenes (gx-) ──────────────────────────
   Convention: default markup is the FINISHED scene (no-JS / reduced-motion
   safe). site.js adds .gx-armed to hide parts, then .is-live to play them.
   Only transform / opacity / stroke-dashoffset ever animate.             */
@keyframes gx-draw{to{stroke-dashoffset:0}}
@keyframes gx-rise{from{opacity:0;transform:translate3d(0,12px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes gx-drop{from{opacity:0;transform:translate3d(0,-10px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes gx-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
@keyframes gx-sweep{from{transform:translateX(-15%);opacity:0}12%{opacity:1}85%{opacity:1}to{transform:translateX(110%);opacity:0}}
@keyframes gx-pulse{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes gx-flow{to{stroke-dashoffset:-48}}
@keyframes gx-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes gx-fade{from{opacity:0}to{opacity:1}}

.gx-line{stroke-dasharray:var(--len,600) calc(var(--len,600) + 2px);stroke-dashoffset:0}
.gx-b{transform-origin:left center}
.gx-sw{opacity:0}                          /* scanner elements exist only mid-animation */

/* Armed: start states, applied by JS just before the scene scrolls in */
.gx-scene.gx-armed .gx-line{stroke-dashoffset:var(--len,600)}
.gx-scene.gx-armed .gx-r,
.gx-scene.gx-armed .gx-p,
.gx-scene.gx-armed .gx-d,
.gx-scene.gx-armed .gx-f{opacity:0}
.gx-scene.gx-armed .gx-b{transform:scaleX(0)}

/* Live: choreography. Stagger via inline style="--gd:n" (80ms steps).
   --sb is an optional per-scene base offset so several scenes can play as
   one continuous cross-card timeline (e.g. the journey). */
.gx-scene.is-live .gx-line{animation:gx-draw .8s var(--ease) both;animation-delay:calc((var(--gd,0) + var(--sb,0))*80ms)}
.gx-scene.is-live .gx-r{animation:gx-rise .6s var(--ease) both;animation-delay:calc((var(--gd,0) + var(--sb,0))*80ms)}
.gx-scene.is-live .gx-d{animation:gx-drop .55s var(--spring) both;animation-delay:calc((var(--gd,0) + var(--sb,0))*80ms)}
.gx-scene.is-live .gx-p{animation:gx-pop .5s var(--spring) both;animation-delay:calc((var(--gd,0) + var(--sb,0))*80ms)}
.gx-scene.is-live .gx-f{animation:gx-fade .6s var(--ease) both;animation-delay:calc((var(--gd,0) + var(--sb,0))*80ms)}
.gx-scene.is-live .gx-b{animation:gx-grow .8s var(--ease) both;animation-delay:calc((var(--gd,0) + var(--sb,0))*80ms)}
.gx-scene.is-live .gx-sw{animation:gx-sweep 1.15s var(--ease-io) both;animation-delay:calc((var(--gd,0) + var(--sb,0))*80ms)}
.gx-scene.is-live .gx-pulse{animation:gx-pulse 2.4s ease-in-out infinite;animation-delay:calc((var(--gd,0) + var(--sb,0))*80ms + 1s)}
.gx-scene.is-live .gx-flow{stroke-dasharray:6 6;animation:gx-flow 1.6s linear infinite}

/* Journey ambient after-life — subtle idle loops after the entrance.
   Reduced-motion guard (section 14) collapses these to a static frame. */
@keyframes gx-idle-x{0%,74%{transform:translateX(0);opacity:0}78%{opacity:.85}97%,100%{transform:translateX(var(--ix,36px));opacity:0}}
@keyframes gx-offset{to{offset-distance:100%}}
.gx-scene.is-live .gx-amb{animation:gx-pulse var(--amb-d,5s) ease-in-out infinite;animation-delay:calc((var(--gd,0) + var(--sb,0))*80ms + 1.4s)}
.gx-scene.is-live .gx-ambx{animation:gx-idle-x 6s var(--ease-io) infinite;animation-delay:calc(var(--sb,0)*80ms + 2s)}
.journey .mon-dot{offset-path:path("M16 48c10 2 14-14 24-14s16 12 26 6 14-14 20-14");offset-distance:0}
.gx-scene.is-live .mon-dot{animation:gx-offset 5s var(--ease-io) infinite;animation-delay:calc(var(--sb,0)*80ms + 2.2s)}

/* Nav logo draw-on — pure CSS, runs once per load, ≤700ms total.
   Classes are emitted by build.py's logo(animated=True); reduced-motion
   guard in section 14 collapses it to an instant settle.               */
.logo-mark .lm-ring{stroke-dasharray:252 254;stroke-dashoffset:252;animation:gx-draw .55s var(--ease) forwards}
.logo-mark .lm-c{opacity:0;transform-box:fill-box;transform-origin:center;animation:gx-pop .4s var(--spring) forwards;animation-delay:calc(.3s + var(--i,0)*60ms)}
.logo-mark .lm-word{opacity:0;animation:gx-rise .5s var(--ease) forwards;animation-delay:.26s}

/* ==========================================================================
   15. Materials layer — glassmorphism + neumorphism (additive depth)
   Layered on top of the blueprint system and overriding by cascade order.
   Palette, type, hairline grids and the 2px default radius are unchanged;
   depth is added only where it earns its keep. Every backdrop-filter here
   is disabled again in the reduced-transparency guard at the end of §15.
   ========================================================================== */

/* ── Tokens for this layer (custom props cascade regardless of order) ───── */
:root{
  /* Glass — for navy/dark fields. */
  --glass-bg:rgba(255,255,255,.06);        /* faint frost over dark imagery   */
  --glass-bg-strong:rgba(9,24,39,.55);     /* legible frost over busy navy    */
  --glass-brd:rgba(255,255,255,.14);       /* hairline glass edge             */
  --glass-hi:rgba(255,255,255,.22);        /* inner top highlight (the shine) */
  --glass-blur:16px; --glass-sat:140%;
  --glass-shadow:0 20px 48px -24px rgba(4,12,22,.7);  /* ambient float        */
  /* Neumorphism — tuned to the #F3F4F1 paper field. */
  --neu-lo:rgba(11,27,46,.14);             /* lower-right cast shadow          */
  --neu-hi:rgba(255,255,255,.9);           /* upper-left light                 */
  --neu-out:6px 6px 14px var(--neu-lo),-6px -6px 14px var(--neu-hi);          /* raised */
  --neu-out-sm:3px 3px 8px var(--neu-lo),-3px -3px 8px var(--neu-hi);         /* subtle */
  --neu-in:inset 4px 4px 9px var(--neu-lo),inset -4px -4px 9px var(--neu-hi); /* well   */
  --neu-r:6px;   /* one contained soft radius, only on neumorphic controls + glass panels */
}

/* ── Glass — navigation frosts over the hero image on scroll ───────────── */
.nav.solid,.nav.scrolled{
  background:rgba(9,24,39,.6);
  -webkit-backdrop-filter:saturate(var(--glass-sat)) blur(var(--glass-blur));
  backdrop-filter:saturate(var(--glass-sat)) blur(var(--glass-blur));
  box-shadow:inset 0 1px 0 var(--glass-hi),0 10px 30px -18px rgba(4,12,22,.85);
}

/* ── Glass — opportunity scorecard: a floating crystal panel on paper ──── */
.scorecard{
  border:1px solid var(--glass-brd);
  border-radius:var(--neu-r);
  background:linear-gradient(180deg,rgba(12,39,64,.9),rgba(8,24,39,.94));
  box-shadow:inset 0 1px 0 var(--glass-hi),var(--glass-shadow);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
}

/* ── Glass — photo chips unified to one material (crisper blur + shine) ── */
.sol-img .no,.pf-item .badge-cap{
  -webkit-backdrop-filter:blur(10px) saturate(var(--glass-sat));
  backdrop-filter:blur(10px) saturate(var(--glass-sat));
  box-shadow:inset 0 1px 0 var(--glass-hi);
}

/* ── Glass — BIPV detail cells gain a crystalline hover ────────────────── */
@media (hover:hover) and (pointer:fine){
  .bipv-detail .d:hover{background:var(--glass-bg);box-shadow:inset 0 1px 0 var(--glass-hi)}
}

/* ── Neumorphism — group containers lift off the paper field ───────────── */
.calc2{border-radius:var(--neu-r);overflow:hidden;box-shadow:var(--neu-out)}

/* ── Neumorphism — range sliders: inset groove + raised orange puck ────── */
input[type=range]{height:8px;box-shadow:var(--neu-in)}
input[type=range]::-webkit-slider-thumb{box-shadow:var(--neu-out-sm),0 2px 10px rgba(228,97,30,.45)}
input[type=range]::-moz-range-thumb{box-shadow:var(--neu-out-sm),0 2px 10px rgba(228,97,30,.45)}

/* ── Neumorphism — segmented controls (model tabs, portfolio filters,
   opportunity questions): raised at rest, pushed-in when active ─────────── */
button[aria-pressed]{border-radius:var(--neu-r);box-shadow:var(--neu-out-sm)}
button[aria-pressed]:active{box-shadow:var(--neu-in)}
button[aria-pressed="true"]{box-shadow:inset 0 2px 6px rgba(0,0,0,.4)}

/* ── Neumorphism — form fields become soft inset wells (focus ring kept) ─ */
.est-grid input,.est-grid select,.fld input,.fld select{
  border-radius:var(--neu-r);box-shadow:var(--neu-in);
}
.est-grid input:focus,.est-grid select:focus,
.fld input:focus,.fld select:focus{
  box-shadow:var(--neu-in),0 0 0 3px rgba(31,92,153,.14);
}

/* ── Polish — primary CTA carries a soft ambient glow at rest ──────────── */
.bp{box-shadow:0 1px 0 var(--signal-deep2),0 10px 22px -14px rgba(194,73,6,.5)}

/* ── A11y — reduced transparency: drop every new blur to a solid surface ─ */
@media (prefers-reduced-transparency:reduce){
  .nav.solid,.nav.scrolled{background:#091827;-webkit-backdrop-filter:none;backdrop-filter:none}
  .scorecard{background:var(--navy);-webkit-backdrop-filter:none;backdrop-filter:none}
  .sol-img .no,.pf-item .badge-cap{-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* ==========================================================================
   16. Footer — WhatsApp "chat with us" CTA + alignment pass
   ========================================================================== */

/* Top-align all footer columns so the office/nav blocks read as a clean row. */
.site-footer .fg2{align-items:start}
.site-footer .fnav{align-self:start}

/* Enlarged, recognizable WhatsApp CTA in the brand column (WhatsApp green,
   styled with the site's radius + a tinted float shadow). */
.wa-cta{
  display:inline-flex;align-items:center;gap:.55rem;margin-top:1.4rem;
  background:#25D366;color:#0A2417;
  border-radius:var(--neu-r);padding:.45rem .95rem .45rem .45rem;
  box-shadow:0 8px 18px -10px rgba(37,211,102,.55);
  transition:transform var(--d-ui) var(--ease),box-shadow var(--d-ui) var(--ease),background var(--d-fast) ease;
}
.wa-cta .wa-cta-ic{
  width:32px;height:32px;flex:none;border-radius:50%;background:#fff;
  display:grid;place-items:center;box-shadow:0 1px 2px rgba(10,36,23,.25);
}
.wa-cta .wa-cta-ic svg{width:20px;height:20px;color:#25D366}
.wa-cta .wa-cta-tx{font-family:var(--fb);font-weight:700;font-size:.96rem;letter-spacing:-.01em}
@media (hover:hover) and (pointer:fine){
  .wa-cta:hover{transform:translateY(-2px);background:#20C65E;box-shadow:0 16px 30px -12px rgba(37,211,102,.72)}
}
@media (prefers-reduced-motion:reduce){.wa-cta{transition:none}.wa-cta:hover{transform:none}}
@media (max-width:640px){.wa-cta{max-width:none}}

/* ==========================================================================
   17. Materials — depth boost + motion graphics
   Makes the glass/neo perceptible and adds tasteful, GPU-cheap motion.
   Every infinite animation here is auto-neutralised by the reduced-motion
   guard in §14 (animation-duration:.01ms), so no separate guard is needed.
   ========================================================================== */

/* ── Neumorphism — stronger lift on the estimator panel ────────────────── */
.calc2{
  box-shadow:9px 9px 22px rgba(11,27,46,.17),-9px -9px 22px rgba(255,255,255,.96);
}

/* ── Slider — a legible inset groove, glowing fill, defined puck ────────── */
input[type=range]{
  height:10px;background:var(--panel);
  box-shadow:var(--neu-in),inset 0 0 0 1px rgba(11,27,46,.06);
}
.sfill{height:10px;box-shadow:0 0 10px rgba(31,92,153,.55);border-radius:100px 0 0 100px}
input[type=range]::-webkit-slider-thumb{
  width:28px;height:28px;box-shadow:var(--neu-out-sm),0 3px 14px rgba(228,97,30,.6);
}
input[type=range]::-moz-range-thumb{width:28px;height:28px;box-shadow:var(--neu-out-sm),0 3px 14px rgba(228,97,30,.6)}

/* ── Glass sheen — a slow light sweep drifts across the frosted panels ──── */
@keyframes ge-sheen{0%{transform:translateX(-120%) skewX(-18deg)}100%{transform:translateX(320%) skewX(-18deg)}}
.scorecard{position:relative;isolation:isolate}
.scorecard::before{
  content:"";position:absolute;top:0;bottom:0;left:0;width:34%;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);
  animation:ge-sheen 8s ease-in-out infinite;animation-delay:1.2s;
}

/* ── WhatsApp CTA — the icon chip pulses a soft ring to draw the eye ────── */
@keyframes ge-wa-pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 12px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
.wa-cta .wa-cta-ic{animation:ge-wa-pulse 2.8s ease-out infinite}

/* ── Stat count-up numbers get a subtle rise as they settle ────────────── */
@keyframes ge-stat-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.cred .c .n{animation:ge-stat-rise .6s var(--ease) both}
.cred .c:nth-child(2) .n{animation-delay:.08s}
.cred .c:nth-child(3) .n{animation-delay:.16s}
.cred .c:nth-child(4) .n{animation-delay:.24s}

/* ==========================================================================
   18. Hotfixes
   ========================================================================== */

/* B. Footer email/phone stayed visible on the WHITE footer.
   The dark-footer base rule a.fc-row:hover{color:#fff} out-specified the
   readability override, so hover/tap turned the email white → invisible.
   This higher-specificity rule restores a visible (dark-orange) hover. */
.site-footer a.fc-row:hover,
.site-footer a.fc-row:hover strong{color:var(--signal-deep)}

/* C. Opportunity-check list — cinematic.css intentionally renders this as a
   transparent, borderless stacked list (dividers only). Do NOT add a card/
   shadow here: it created a phantom shadow-box with edge-flush text. */

/* D. Required-field markers — auto asterisk on any required lead-form field. */
#leadForm label:has(+ input:required)::after,
#leadForm label:has(+ select:required)::after{content:" *";color:var(--signal-deep);font-weight:700}

/* ==========================================================================
   19. Clients — "trusted across industries" logo band
   Grayscale + muted so real logos and styled wordmarks read as one cohesive
   set; colour/full opacity on hover. Centred flex-wrap handles 7 items with
   no empty grid cell.
   ========================================================================== */
.clients{background:var(--paper2);border-top:1px solid var(--line)}

/* Auto-scrolling logo carousel: seamless loop (2 identical sets, translate -50%),
   edge fade mask, pause on hover. Each logo sits in a uniform white chip so mixed
   source backgrounds read as one cohesive, premium set. */
.logo-marquee{
  margin-top:var(--sp-block);overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.logo-track{list-style:none;display:flex;align-items:center;width:max-content;animation:logo-scroll 34s linear infinite}
.logo-marquee:hover .logo-track{animation-play-state:paused}
.logo-cell{
  flex:none;display:grid;place-items:center;
  height:88px;margin-right:clamp(2.75rem,6vw,5.5rem);
}
.logo-cell img{max-height:72px;max-width:220px;width:auto;height:auto;object-fit:contain;opacity:.9;transition:opacity var(--d-ui) ease,transform var(--d-ui) ease}
@media (hover:hover) and (pointer:fine){.logo-cell:hover img{opacity:1;transform:scale(1.05)}}
@keyframes logo-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .logo-marquee{-webkit-mask-image:none;mask-image:none}
  .logo-track{animation:none;flex-wrap:wrap;justify-content:center;gap:1rem 2.5rem;width:auto}
  .logo-cell{margin:0}
  .logo-cell[aria-hidden="true"]{display:none}
}

/* Nav density: fit the longer "Calculate my savings" CTA within the --mw cap on desktop (full nav shows >1240px) */
@media(min-width:1241px){
  .nav > .in{gap:.6rem}
  .nk{gap:0}
  .nk a{padding:.55em .5em}
  .nc{gap:.5rem;margin-left:.3rem}
  .nav .nc .btn{white-space:nowrap;font-size:.86rem;padding:.75em 1.05em;min-height:44px}
  .nav .nc .btn svg{width:16px;height:16px}
}