/* ==========================================================================
   SUNROOF SOLAR  |  main.css  |  Design system v2 "Golden Hour Editorial"
   --------------------------------------------------------------------------
   Brand source: Sunroof-Solar-Logo-Kit  (navy #042D5A · solar blue #0064AF · sun #FFD000 / #FF9600 / #F57A2C)
   Principles
     1  Type: Outfit everywhere (variable weight, 100 to 900).
     2  Rules, not boxes. Hairlines and open columns replace shadowed cards and icon tiles.
     3  One graphic idea: the flat sun dome of the logo, plus concentric "sun-path" arcs. No glows, no glass.
     4  BRIGHT surfaces only: white, sky, butter and vivid solar blue. Navy is for text and hairlines, never a background.
     5  Motion that explains (sun path, roof reveal, line drawing), never decoration for its own sake.
   Contrast: navy text on sun buttons (never white on orange). Orange text on light = --sun-ink or large display only.
   Motion: transform/opacity/clip-path only; LCP element never opacity-gated; all off under prefers-reduced-motion.
   ========================================================================== */

/* 1 · TOKENS ------------------------------------------------------------- */

@font-face{font-family:"Outfit";src:url("../fonts/outfit-latin.woff2") format("woff2");font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:"Outfit Fallback";src:local("Arial");font-weight:400 600;size-adjust:99.1%}
@font-face{font-family:"Outfit Fallback";src:local("Arial Bold"),local("Arial-BoldMT");font-weight:700 800;size-adjust:94.8%}

:root{
  /* text + lines (navy is for TEXT only; every surface below is bright) */
  --navy:#042D5A; --ink:#0B2340; --muted:#41597A;
  --rule:rgba(4,45,90,.15); --rule-strong:#042D5A;
  /* bright surfaces */
  --white:#FFFFFF; --paper:#FFFFFF; --sky-50:#F3FAFF; --sky:#E4F3FF; --sky-2:#CFE9FF; --paper-2:#FFF3C0;
  --blue-band:#0069D9; --blue-band-2:#0A7BFF; --blue:#0069D9; --blue-deep:#0054B0; --navy-900:#0062CC; --navy-700:#0A7BFF;
  /* sun */
  --sun:#FFC21F; --sun-deep:#FF9600; --sun-hot:#F57A2C; --sun-soft:#FFF0B8;
  --orange:#FF9248;            /* large display accent only */
  --sun-ink:#B53A00;           /* orange text at body size (5.9:1) */
  --font-display:"Outfit","Outfit Fallback","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --font-body:"Outfit","Outfit Fallback","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --font-mono:"Outfit","Outfit Fallback","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --r-sm:8px; --r:14px; --r-lg:22px;
  --maxw:1280px; --gutter:clamp(20px,4.2vw,56px);
  --sec:clamp(76px,9.5vw,152px);
  --ease:cubic-bezier(.16,1,.3,1);
  --header-h:84px;
}

/* 2 · BASE --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 24px)}
body{margin:0;font-family:var(--font-body);font-size:1.12rem;font-weight:500;line-height:1.55;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg,video{max-width:100%;height:auto;display:block}
img{background:var(--sky)}
a{color:var(--blue);text-decoration-thickness:.07em;text-underline-offset:.2em}
a:hover{color:var(--blue-deep)}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--navy);margin:0 0 .5em;font-weight:800;text-wrap:balance}
h1{font-size:clamp(3rem,6.8vw,6.4rem);line-height:1;letter-spacing:-.02em;font-weight:800}
h2{font-size:clamp(2.25rem,4.6vw,4.1rem);line-height:1.02;letter-spacing:-.02em}
h3{font-size:clamp(1.3rem,1.9vw,1.65rem);line-height:1.1;letter-spacing:-.01em;font-weight:800}
h4{font-family:var(--font-body);font-size:1rem;font-weight:700;letter-spacing:0}
p{margin:0 0 1.1em}
ul,ol{margin:0 0 1.1em;padding-left:1.2em}
:focus-visible{outline:2px solid var(--navy);outline-offset:4px;border-radius:4px}
::selection{background:var(--sun);color:var(--navy)}
[hidden]{display:none!important}
.skip{position:absolute;left:12px;top:-60px;z-index:300;background:var(--navy);color:#fff;padding:12px 18px;border-radius:8px;font-weight:700;text-decoration:none;transition:top .2s}
.skip:focus{top:12px;color:#fff}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.i{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
h1,h2,h3,.stat b,.sunday__time{-webkit-text-stroke:.022em currentColor;paint-order:stroke fill}
.pkg__size b,.pkg__size span,.result .big,.range output,.timeline__dot,.cell__label{-webkit-text-stroke:.01em currentColor;paint-order:stroke fill}
.mono,.eyebrow,.guide-meta,.tile__num{font-family:var(--font-mono);font-weight:700;letter-spacing:.1em;text-transform:uppercase}

/* 3 · LAYOUT ------------------------------------------------------------- */
.container{width:100%;max-width:calc(var(--maxw) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}
.container--narrow{max-width:calc(860px + var(--gutter)*2)}
.sec{position:relative;padding-block:var(--sec)}
.sec--tight{padding-block:clamp(52px,6.5vw,96px)}
.sec--sky{background:var(--sky)}
.sec--cream{background:var(--paper-2)}
.sec--navy{background:var(--blue-band);color:rgba(255,255,255,.92)}
.sec--navy :is(h1,h2,h3,h4){color:#fff}
.sec--navy a:not(.btn){color:var(--sun-soft)}
/* legacy gable modifiers kept as no-ops; the single deliberate gable is .gable */
.pitch-bottom,.pitch-top,.pitch-both{clip-path:none;margin-top:0}
.gable{--g:clamp(32px,5vw,72px);clip-path:polygon(0 var(--g),50% 0,100% var(--g),100% 100%,0 100%);padding-top:calc(var(--sec) + var(--g));margin-top:calc(var(--g)*-1)}
.sec-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:18px clamp(24px,6vw,96px);align-items:end;margin:0 0 clamp(36px,5vw,72px);max-width:none;text-align:left}
.sec-head .eyebrow{grid-column:1/-1;margin:0}
.sec-head h2{margin:0}
.sec-head p{margin:0;color:var(--muted);font-size:1.1rem;max-width:30em}
.sec--navy .sec-head p{color:rgba(255,255,255,.9)}
@media (max-width:900px){.sec-head{grid-template-columns:1fr}}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:.88rem;color:var(--blue-deep);margin-bottom:18px}
.eyebrow::before{content:"";width:16px;height:8px;border-radius:16px 16px 0 0;background:var(--sun);flex:none}
.sec--navy .eyebrow,.on-dark .eyebrow{color:#fff}
.lead{font-size:clamp(1.12rem,1.5vw,1.3rem);color:var(--muted);line-height:1.6;max-width:34em}
.hl{font-style:normal;color:inherit;background:linear-gradient(transparent 70%,var(--sun) 70%,var(--sun) 95%,transparent 95%);padding:0 .06em;margin:0 -.06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.sec--navy .hl,.on-dark .hl,.cta-band .hl,.band .hl,.popup .hl{background:none;color:var(--sun)}
.grid{display:grid;gap:clamp(28px,3.4vw,52px) clamp(22px,2.6vw,40px)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,7vw,120px);align-items:center}
.split--rev>:first-child{order:2}
@media (min-width:981px){.split--flow{grid-template-columns:.8fr 1.2fr}.split--form{grid-template-columns:1.25fr .75fr;align-items:start}}
.stack>*+*{margin-top:1.4rem}
.center{text-align:center}
.mt-0{margin-top:0!important}.mb-0{margin-bottom:0!important}
.cells{background-image:linear-gradient(rgba(0,105,217,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(0,105,217,.13) 1px,transparent 1px);background-size:64px 64px}
.cells-fade{-webkit-mask-image:linear-gradient(180deg,#000 0,transparent 88%);mask-image:linear-gradient(180deg,#000 0,transparent 88%)}
.arcs{background-image:repeating-radial-gradient(circle at var(--ax,100%) var(--ay,100%),transparent 0 56px,var(--arc,rgba(4,45,90,.1)) 56px 57px)}
@media (max-width:980px){
  .grid--3,.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split{grid-template-columns:1fr}.split--rev>:first-child{order:0}
}
@media (max-width:640px){.grid--2,.grid--3,.grid--4{grid-template-columns:1fr}}

/* 4 · BUTTONS / LINKS ---------------------------------------------------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:56px;padding:6px 6px 6px 28px;border-radius:999px;border:1px solid transparent;font:600 .98rem/1 var(--font-body);white-space:nowrap;text-decoration:none;cursor:pointer;transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s,transform .45s var(--ease)}
.btn .i-arrow{width:44px;height:44px;padding:12px;border-radius:50%;stroke-width:2;transition:transform .5s var(--ease),background-color .35s,color .35s}
.btn:hover .i-arrow{transform:translateX(3px) rotate(-45deg)}
.btn--lg{min-height:64px;padding-left:34px;font-size:1.04rem}.btn--lg .i-arrow{width:52px;height:52px;padding:15px}
.btn--sm{min-height:46px;padding:4px 4px 4px 20px;font-size:.92rem;gap:12px}.btn--sm .i-arrow{width:36px;height:36px;padding:9px}
.btn--sun{background:var(--sun);color:var(--navy)}
.btn--sun .i-arrow{background:var(--blue-band);color:#fff}
.btn--sun:hover{background:var(--blue-band);color:#fff}
.btn--sun:hover .i-arrow{background:var(--sun);color:var(--navy)}
.btn--navy{background:var(--blue-band);color:#fff}
.btn--navy .i-arrow{background:var(--sun);color:var(--navy)}
.btn--navy:hover{background:var(--sun);color:var(--navy)}
.btn--navy:hover .i-arrow{background:var(--blue-band);color:#fff}
.btn--white{background:#fff;color:var(--navy)}
.btn--white .i-arrow{background:var(--blue-band);color:#fff}
.btn--white:hover{background:var(--sun);color:var(--navy)}
.btn--ghost,.btn--outline-light{padding:0 2px 6px;min-height:auto;border:0;border-radius:0;background-color:transparent;color:var(--navy);gap:8px;font-weight:600;background-image:linear-gradient(currentColor,currentColor);background-size:100% 1px;background-position:0 100%;background-repeat:no-repeat;transition:background-size .5s var(--ease),color .3s}
.btn--ghost:hover,.btn--outline-light:hover{background-color:transparent;background-size:0 1px;background-position:100% 100%;color:var(--blue)}
.btn--outline-light{color:#fff}.btn--outline-light:hover{color:var(--sun)}
.btn-row{display:flex;flex-wrap:wrap;gap:20px 32px;align-items:center}
.link-arrow{display:inline-flex;align-items:center;gap:10px;font-weight:600;text-decoration:none;color:var(--navy);border-bottom:1px solid var(--rule-strong);padding-bottom:4px;transition:gap .4s var(--ease),color .3s,border-color .3s}
.link-arrow .i{transition:transform .4s var(--ease)}
.link-arrow:hover{color:var(--blue);gap:16px;border-color:var(--blue)}
.chip{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;border:1px solid var(--rule);font-size:.9rem;font-weight:500;color:var(--navy)}
.badge{display:inline-block;padding:6px 12px;border-radius:999px;background:var(--sun);color:var(--navy);font:500 .68rem/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase}

/* 5 · HEADER / NAV ------------------------------------------------------- */
.sunpath{position:fixed;inset:0 0 auto 0;height:3px;z-index:120;pointer-events:none}
.sunpath__bar{position:absolute;inset:0;background:var(--blue-band);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.sunpath__sun{position:absolute;top:-5px;left:0;width:16px;height:8px;border-radius:16px 16px 0 0;background:var(--sun);transform:translateX(calc(var(--p,0) * (100vw - 16px)))}
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.95);border-bottom:1px solid transparent;transition:border-color .3s,background-color .3s}
.site-header.is-stuck{border-color:var(--rule);background:rgba(255,255,255,.98)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:28px;min-height:var(--header-h)}
.brand{display:block;flex:none;line-height:0}
.brand img{width:184px;height:auto;background:none}
.nav__list{display:flex;align-items:center;gap:clamp(8px,1.6vw,26px);list-style:none;margin:0;padding:0}
.nav__item{position:relative}
.nav__link{position:relative;display:flex;align-items:center;gap:6px;padding:10px 2px;font:700 .96rem var(--font-body);color:var(--navy);text-decoration:none;white-space:nowrap;background:none;border:0;cursor:pointer}
.nav__link::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:100% 50%;transition:transform .45s var(--ease)}
.nav__link:hover::after,.nav__item:focus-within>.nav__link::after,.nav__link[aria-current="page"]::after{transform:scaleX(1);transform-origin:0 50%}
.nav__link[aria-current="page"]::after{height:2px;background:var(--sun-deep)}
.nav__link .i{width:.85em;height:.85em;transition:transform .35s var(--ease)}
.nav__item:hover .i,.nav__item:focus-within .i,.nav__item.is-open .i{transform:rotate(180deg)}
.nav__drop{position:absolute;left:-24px;top:100%;min-width:370px;padding:10px;margin:6px 0 0;list-style:none;background:#fff;border:1px solid var(--rule);border-radius:var(--r);box-shadow:0 30px 60px -30px rgba(4,45,90,.35);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .25s,transform .4s var(--ease),visibility .25s}
.nav__item:hover>.nav__drop,.nav__item:focus-within>.nav__drop,.nav__item.is-open>.nav__drop{opacity:1;visibility:visible;transform:none}
.nav__drop::before{content:"";position:absolute;inset:-14px 0 auto 0;height:14px}
.nav__drop a{display:grid;grid-template-columns:36px 1fr;gap:6px 14px;align-items:start;padding:14px;border-radius:6px;text-decoration:none;color:var(--navy);transition:background-color .25s}
.nav__drop a:hover{background:var(--paper-2)}
.nav__drop .ib{font-size:1.4rem;margin-top:2px}
.nav__drop strong{display:block;font:800 1.12rem/1.15 var(--font-display);letter-spacing:-.01em}
.nav__drop small{display:block;color:var(--muted);font-size:.86rem;line-height:1.4;margin-top:3px}
.header-cta{display:flex;align-items:center;gap:22px}
.header-phone{display:flex;align-items:center;gap:8px;white-space:nowrap;font:500 .94rem var(--font-body);color:var(--navy);text-decoration:none}
.header-phone .i{color:var(--blue)}
.nav-toggle{display:none;width:48px;height:48px;border-radius:50%;border:1px solid var(--rule-strong);background:none;color:var(--navy);cursor:pointer;align-items:center;justify-content:center}
.nav-toggle .i{width:22px;height:22px}.nav-toggle .i-close{display:none}
.nav-open .nav-toggle .i-menu{display:none}.nav-open .nav-toggle .i-close{display:block}
@media (max-width:1240px){.header-phone span{display:none}.header-phone{width:44px;height:44px;border:1px solid var(--rule);border-radius:50%;justify-content:center}}
@media (max-width:1180px){
  .nav-toggle{display:inline-flex}
  .header-cta .btn,.header-phone{display:none}
  :root{--header-h:72px}
  .brand img{width:158px}
  .brand,.header-cta{position:relative;z-index:95}
  .nav{position:fixed;inset:0;z-index:90;background:#fff;padding:calc(var(--header-h) + 28px) var(--gutter) 120px;overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .3s,transform .45s var(--ease),visibility .3s}
  .nav-open .nav{opacity:1;visibility:visible;transform:none}
  .nav-open{overflow:hidden}
  .nav-open .site-header{z-index:130;background:#fff}
  .nav__list{flex-direction:column;align-items:stretch;gap:0}
  .nav__item{border-bottom:1px solid var(--rule)}
  .nav__link{width:100%;justify-content:space-between;padding:20px 0;font:800 1.9rem/1 var(--font-display);letter-spacing:-.02em}
  .nav__link::after{display:none}
  .nav__drop{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;min-width:0;margin:0;padding:0 0 14px;display:none;background:none}
  .nav__item.is-open>.nav__drop{display:block}
  .nav__drop a{padding:12px 0}.nav__drop::before{display:none}
  .nav__mobile-cta{display:flex;flex-direction:column;align-items:flex-start;gap:18px;margin-top:36px}
}
@media (min-width:1181px){.nav__mobile-cta{display:none}}

/* 6 · HERO --------------------------------------------------------------- */
.hero{position:relative;overflow:hidden;isolation:isolate;padding-top:clamp(28px,5vw,72px);background:linear-gradient(180deg,#BFE3FF 0%,#DDF0FF 48%,#F6FBFF 100%);border-bottom:1px solid var(--rule-strong)}
.hero .cells-bg{position:absolute;inset:0;z-index:-2;opacity:.55}
.hero__sun{position:absolute;z-index:-1;width:min(46vw,640px);aspect-ratio:1;border-radius:50%;background:var(--sun);right:max(-2vw,-30px);top:5%;animation:sunrise 1.8s var(--ease) both}
.hero__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,72px);align-items:end}
.hero__copy{padding-bottom:clamp(36px,5vw,72px)}
.hero h1{margin:0 0 .4em;max-width:9.5em}
.hero .lead{margin-bottom:2.2rem}
.hero__art{position:relative;justify-self:end;width:min(100%,460px)}
.arch-ring{position:relative}
.arch-ring::before{content:"";position:absolute;inset:-14px -14px 0 -14px;border:1px solid var(--rule-strong);border-bottom:0;border-radius:999px 999px 0 0;pointer-events:none}
.arch{position:relative;border-radius:999px 999px 0 0;overflow:hidden;aspect-ratio:4/5;background:var(--sky-2)}
.arch img,.arch picture{width:100%;height:100%;object-fit:cover;animation:settle 2.2s var(--ease) both}
.hero__facts{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule-strong);padding:0;margin:0}
.hero__facts li{list-style:none;display:flex;gap:14px;align-items:center;padding:20px 24px 20px 0;font-weight:500;color:var(--navy);font-size:.98rem}
.hero__facts li+li{padding-left:24px;border-left:1px solid var(--rule)}
.hero__facts .i{color:var(--blue);width:1.3em;height:1.3em}
.ib{display:inline-flex;align-items:center;justify-content:center;color:var(--blue);font-size:1.7rem;flex:none;background:none;width:auto;height:auto}
.ib--sun{color:var(--orange)}.ib--soft{color:var(--blue)}.ib--lg{font-size:2.2rem}
.sec--navy .ib,.cta-band .ib{color:var(--sun)}
@media (max-width:980px){
  .hero__grid{grid-template-columns:1fr}
  .hero__art{justify-self:start;width:min(86%,400px)}
  .hero__sun{width:78vw;right:-24vw;top:auto;bottom:190px}
  .hero__facts{grid-template-columns:1fr}.hero__facts li+li{padding-left:0;border-left:0;border-top:1px solid var(--rule)}
}
.trust{display:none}

/* 7 · COLUMNS / TILES (ruled, not boxed) -------------------------------- */
.card{position:relative;background:none;border:0;border-top:1px solid var(--rule-strong);border-radius:0;box-shadow:none;transition:border-color .4s,transform .5s var(--ease)}
.card::after{content:"";position:absolute;left:0;top:-1px;height:3px;width:0;background:var(--sun-deep);transition:width .6s var(--ease)}
.card:hover::after{width:100%}
.card__body{padding:22px 0 0}
.card__body>*:last-child{margin-bottom:0}
.card h3{margin-bottom:.45em}
.card p{color:var(--muted)}
.tile{display:flex;flex-direction:column;text-decoration:none;color:inherit;border-top:0}
.tile::after{display:none}
.tile:hover{color:inherit}
.tile__media{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r-sm)}
.tile__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.tile:hover .tile__media img{transform:scale(1.05)}
.tile__num{position:absolute;left:14px;top:14px;z-index:2;font-size:.7rem;padding:7px 10px;border-radius:3px;background:#fff;color:var(--navy)}
.tile .card__body{display:flex;flex-direction:column;flex:1;padding-top:20px}
.tile .link-arrow{margin-top:auto;align-self:flex-start}
.tile h3{transition:color .3s}.tile:hover h3{color:var(--blue)}
.feature{display:grid;grid-template-columns:auto 1fr;gap:6px 22px;align-items:start;padding:22px 0;border-top:1px solid var(--rule)}
.feature .ib{display:none}
.stack{counter-reset:ft}
.stack .feature{counter-increment:ft}
.stack .feature::before{content:counter(ft,decimal-leading-zero);font:500 .75rem var(--font-mono);letter-spacing:.08em;color:var(--sun-ink);padding-top:.5em}
.feature h3{margin:0 0 .3em;font-size:1.35rem}
.feature p{margin:0;color:var(--muted);font-size:1rem}
.checklist{list-style:none;padding:0;margin:0 0 1.2em;display:grid;gap:0}
.checklist li{display:flex;gap:14px;align-items:flex-start;padding:13px 0;border-top:1px solid var(--rule)}
.checklist li:last-child{border-bottom:1px solid var(--rule)}
.checklist .i{color:var(--sun-ink);margin-top:.28em;width:1.1em;height:1.1em}
.media{position:relative;border-radius:var(--r-sm);overflow:hidden}
.media img{width:100%;height:100%;object-fit:cover}
.media--tall{aspect-ratio:4/5}.media--wide{aspect-ratio:3/2}.media--sq{aspect-ratio:1}
.media__tag{position:absolute;left:0;bottom:0;z-index:2;display:flex;gap:10px;align-items:center;padding:12px 18px;background:#fff;font:700 .72rem var(--font-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--navy)}
.stat{padding:24px 0;border-top:1px solid var(--rule-strong)}
.stat b{display:block;font:800 clamp(2.4rem,4vw,3.6rem)/1 var(--font-display);color:var(--navy);letter-spacing:-.03em}
.stat span{color:var(--muted);font-size:.94rem}
.note{padding:20px 24px;border-left:4px solid var(--sun-deep);background:var(--paper-2);font-size:.97rem;color:#5A4300;border-radius:0 var(--r-sm) var(--r-sm) 0}
.note strong{color:var(--navy)}
.note--blue{border-left-color:var(--blue);background:var(--sky);color:var(--muted)}
.fineprint{font-size:.84rem;color:var(--muted);line-height:1.55}
.sec--navy .fineprint{color:rgba(255,255,255,.95)}
.card--dark{border-top-color:rgba(255,255,255,.4)}
.card--dark p{color:rgba(255,255,255,.75)}

/* 8 · PACKAGES ----------------------------------------------------------- */
.pkg{display:flex;flex-direction:column}
.pkg .card__body{display:flex;flex-direction:column;flex:1}
.pkg__size{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.pkg__size b{font:800 clamp(5.4rem,9vw,8.6rem)/.82 var(--font-display);letter-spacing:-.06em;color:var(--navy)}
.pkg__size span{font:800 clamp(1.7rem,2.5vw,2.5rem) var(--font-display);color:var(--orange)}
.pkg__for{font-weight:600;color:var(--navy);margin-bottom:20px;min-height:3.2em}
.pkg__specs{list-style:none;padding:0;margin:0 0 28px}
.pkg__specs li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--rule);font-size:.96rem}
.pkg__specs li span{color:var(--muted)}.pkg__specs li strong{text-align:right;color:var(--navy);font-weight:600}
.pkg .btn{margin-top:auto;align-self:flex-start}
.pkg--feature{background:var(--blue-band);border-top:0;padding:0 clamp(22px,2.4vw,34px) clamp(24px,2.4vw,34px);border-radius:var(--r)}
.pkg--feature::after{display:none}
.pkg--feature .card__body{padding-top:clamp(22px,2.4vw,34px)}
.pkg--feature :is(.pkg__size b,.pkg__for,.pkg__specs strong){color:#fff}
.pkg--feature .pkg__size span{color:var(--sun)}
.pkg--feature .pkg__specs li{border-color:rgba(255,255,255,.22)}.pkg--feature .pkg__specs li span{color:rgba(255,255,255,.7)}
.pkg--feature .badge{position:absolute;right:clamp(22px,2.4vw,34px);top:clamp(22px,2.4vw,34px)}
.pkg__img{margin:0 0 22px;border-radius:var(--r-sm);overflow:hidden;aspect-ratio:8/5}
.pkg__img img{width:100%;height:100%;object-fit:cover}
.pkg--feature .pkg__img{margin-top:clamp(22px,2.4vw,34px)}
.pkg--feature .pkg__img+.card__body{padding-top:0}

/* 9 · ENERGY FLOW -------------------------------------------------------- */
.flow{background:var(--white);border:1px solid var(--rule-strong);border-radius:var(--r);padding:clamp(18px,3vw,40px)}
.flow__tabs{display:inline-flex;border:1px solid var(--rule-strong);border-radius:999px;margin-bottom:22px;padding:3px}
.flow__tabs button{display:inline-flex;align-items:center;gap:8px;border:0;background:none;border-radius:999px;padding:10px 20px;font:600 .92rem var(--font-body);color:var(--navy);cursor:pointer;transition:background-color .3s,color .3s}
.flow__tabs button[aria-pressed="true"]{background:var(--blue-band);color:#fff}
.flow .flow__svg{width:100%;height:auto;overflow:visible}
.flow .node circle{fill:var(--sky);stroke:var(--rule-strong);stroke-width:1.5}
.flow .node text{font:800 24px var(--font-display);fill:var(--navy);text-anchor:middle}
.flow .node text.s{font:400 18px var(--font-body);fill:var(--muted)}
.flow .node .ico{stroke:var(--navy);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.flow .line{fill:none;stroke:var(--rule);stroke-width:3;stroke-linecap:round}
.flow .pulse{fill:none;stroke:var(--sun-deep);stroke-width:4;stroke-linecap:round;stroke-dasharray:2 14;opacity:0;transition:opacity .5s}
.flow[data-mode="day"] .on-day,.flow[data-mode="evening"] .on-evening{opacity:1;animation:dash 1.1s linear infinite}
.flow[data-mode="evening"] .on-day-only{opacity:.25}
.flow__caption{margin:18px 0 0;color:var(--muted);font-size:1rem;min-height:3.4em}
.flow__caption [data-for]{display:none}
.flow[data-mode="day"] [data-for="day"],.flow[data-mode="evening"] [data-for="evening"]{display:block}

/* 10 · BATTERY SELECTOR -------------------------------------------------- */
.bat{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,80px);align-items:center}
.bat__tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.bat__tabs button,.states button,.filters button{border:1px solid var(--rule-strong);background:#fff;border-radius:999px;padding:10px 20px;font:700 .78rem var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--navy);cursor:pointer;transition:background-color .3s,color .3s}
.bat__tabs button:hover,.states button:hover,.filters button:hover{background:var(--paper-2)}
.bat__tabs button[aria-selected="true"],.states button[aria-selected="true"],.filters button[aria-pressed="true"]{background:var(--blue-band);border-color:var(--blue-band);color:#fff}
.js .bat__panel:not(.is-active){display:none}
.bat__panel{display:grid;gap:14px}
.bat__panel+.bat__panel{margin-top:32px}.js .bat__panel+.bat__panel{margin-top:0}
.bat__panel h3{font-size:clamp(2rem,3.4vw,3rem);margin:0}
.bat__panel dl{display:grid;margin:0}
.bat__panel dl div{display:flex;justify-content:space-between;gap:20px;padding:14px 0;border-top:1px solid var(--rule)}
.bat__panel dt{color:var(--muted)}
.bat__panel dd{margin:0;font-weight:600;color:var(--navy);text-align:right}
.bat__vis{position:relative;display:grid;place-items:center;padding:clamp(28px,4vw,56px);border-radius:var(--r);background:var(--sky-2);overflow:hidden}
.cell{position:relative;width:min(100%,200px);aspect-ratio:7/10;border-radius:22px;background:#fff;border:3px solid var(--navy);overflow:hidden}
.cell::before{content:"";position:absolute;left:50%;top:-14px;translate:-50% 0;width:34%;height:12px;border-radius:6px 6px 0 0;background:var(--navy)}
.cell__fill{position:absolute;inset:auto 0 0 0;height:var(--fill,24%);background:var(--sun);transition:height 1.1s var(--ease)}
.cell__fill::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(180deg,transparent 0 22px,rgba(4,45,90,.14) 22px 23px)}
.cell__label{position:absolute;inset:0;display:grid;place-content:center;text-align:center;font:800 3.2rem/1 var(--font-display);color:var(--navy);letter-spacing:-.05em}
.cell__label small{display:block;font:500 .72rem var(--font-mono);letter-spacing:.1em;text-transform:uppercase;margin-top:8px}
@media (max-width:900px){.bat{grid-template-columns:1fr}}

/* 11 · STEPS / TIMELINE -------------------------------------------------- */
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(5,1fr);gap:0;counter-reset:s;position:relative;border-top:1px solid rgba(255,255,255,.5)}
.steps::after{content:"";position:absolute;left:0;top:-2px;height:3px;width:100%;background:var(--sun);transform-origin:0 50%;transform:scaleX(var(--line,0));transition:transform 1.8s var(--ease)}
.step{position:relative;padding:34px 22px 0 0;counter-increment:s}
.step__dot{display:block;font:800 clamp(3.4rem,5.4vw,5.4rem)/.9 var(--font-display);letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.8);margin-bottom:22px;transition:color .8s,-webkit-text-stroke-color .8s}
.is-in .step__dot{color:var(--sun);-webkit-text-stroke-color:var(--sun)}
.step:nth-child(2) .step__dot{transition-delay:.3s}.step:nth-child(3) .step__dot{transition-delay:.6s}.step:nth-child(4) .step__dot{transition-delay:.9s}.step:nth-child(5) .step__dot{transition-delay:1.2s}
.step h3{font-size:1.4rem;margin-bottom:.4em}
.step p{font-size:.97rem;margin:0;color:rgba(255,255,255,.92)}
@media (max-width:900px){
  .steps{grid-template-columns:1fr;border-top:0;border-left:1px solid rgba(255,255,255,.3);padding-left:26px;gap:34px}
  .steps::after{left:-1px;top:0;width:3px;height:100%;transform-origin:50% 0;transform:scaleY(var(--line,0))}
  .step{padding:0}
}
.timeline{list-style:none;margin:0;padding:0;display:grid;gap:0;position:relative}
.timeline li{position:relative;display:grid;grid-template-columns:clamp(70px,10vw,130px) 1fr;gap:clamp(16px,3vw,40px);align-items:start;padding:clamp(26px,3.4vw,44px) 0;border-top:1px solid var(--rule-strong)}
.timeline__dot{font:800 clamp(3rem,6vw,5.4rem)/.85 var(--font-display);letter-spacing:-.05em;color:var(--orange)}
.timeline h3{margin-bottom:.35em;font-size:clamp(1.5rem,2.4vw,2.1rem)}
.timeline p{color:var(--muted);margin-bottom:.6em;max-width:36em}

/* 12 · REBATES ----------------------------------------------------------- */
.layers{display:grid;gap:0}
.layer{display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;padding:28px 0;border-top:1px solid var(--rule-strong)}
.layer:last-child{border-bottom:1px solid var(--rule-strong)}
.layer .ib{font-size:2.2rem}
.layer h3{margin:0 0 .2em}.layer p{margin:0;color:var(--muted);font-size:.97rem}
.states{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.js .state-panel:not(.is-active){display:none}
.state-panel{padding:30px 0;border-top:1px solid var(--rule-strong)}
.state-panel+.state-panel{margin-top:14px}.js .state-panel+.state-panel{margin-top:0}
.state-panel h3{font-size:clamp(2rem,3.4vw,3rem);margin-bottom:.4em}
.state-panel p{max-width:42em}
@media (max-width:640px){.layer{grid-template-columns:1fr;gap:10px}}

/* 13 · TABLES ------------------------------------------------------------ */
.table-wrap{overflow-x:auto;border-top:2px solid var(--navy);border-bottom:1px solid var(--rule-strong)}
table{width:100%;border-collapse:collapse;font-size:.97rem;min-width:620px}
th,td{padding:18px 20px 18px 0;text-align:left;border-bottom:1px solid var(--rule);vertical-align:top}
thead th{font:700 .8rem var(--font-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--blue-deep);white-space:nowrap;border-bottom:1px solid var(--rule-strong)}
tbody th{font:800 1.2rem var(--font-display);color:var(--navy);letter-spacing:-.01em;white-space:nowrap}
tbody tr:last-child :is(th,td){border-bottom:0}
caption{caption-side:bottom;text-align:left;padding:14px 0 0;font-size:.84rem;color:var(--muted)}
.todo{display:inline-block;padding:2px 10px;border-radius:3px;background:var(--sun-soft);color:#6B4300;font:500 .72rem var(--font-mono);letter-spacing:.04em}

/* 14 · FAQ --------------------------------------------------------------- */
.faq{display:grid;max-width:none;margin:0}
.faq details{border-top:1px solid var(--rule-strong)}
.faq details:last-child{border-bottom:1px solid var(--rule-strong)}
.faq summary{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;padding:26px 0;cursor:pointer;list-style:none;font:700 clamp(1.25rem,1.9vw,1.6rem)/1.2 var(--font-display);letter-spacing:-.015em;color:var(--navy);transition:color .3s}
.faq summary:hover{color:var(--blue-band)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:44px;height:44px;border:1px solid var(--rule-strong);border-radius:50%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23042D5A' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/18px no-repeat;transition:transform .5s var(--ease),background-color .3s}
.faq details[open] summary::after{transform:rotate(135deg);background-color:var(--sun)}
.faq .faq__a{padding:0 70px 28px 0;color:var(--muted);max-width:46em}
.faq .faq__a>*:last-child{margin-bottom:0}

/* 15 · FORMS / CALCULATOR ------------------------------------------------ */
.form{display:grid;gap:22px}
.form fieldset{border:0;margin:0;padding:0;min-width:0}
.form legend{font:800 clamp(1.7rem,2.6vw,2.2rem) var(--font-display);color:var(--navy);padding:0;margin-bottom:22px;letter-spacing:-.02em}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:22px 20px}
@media (max-width:600px){.form .row{grid-template-columns:1fr}}
.field{display:grid;gap:8px;align-content:start}
.field label,.field .lbl{font:700 .82rem var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--blue-deep)}
.field .opt{text-transform:none;letter-spacing:0;color:var(--muted);font-family:var(--font-body)}
.field input,.field select,.field textarea{width:100%;min-height:56px;padding:14px 16px;border-radius:var(--r-sm);border:1px solid rgba(4,45,90,.35);background:var(--white);font:400 1rem var(--font-body);color:var(--ink);transition:border-color .2s,box-shadow .2s}
.field textarea{min-height:130px;resize:vertical}
.field select{appearance:none;background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23042D5A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 16px center/18px no-repeat;padding-right:46px}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--navy)}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--navy);box-shadow:0 0 0 3px var(--sun)}
.field .err{display:none;color:#B3261E;font-size:.86rem;font-weight:600}
.field.is-bad .err{display:block}.field.is-bad :is(input,select,textarea){border-color:#B3261E;box-shadow:0 0 0 3px rgba(179,38,30,.15)}
.field .hint{font-size:.84rem;color:var(--muted)}
.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.choice{position:relative}
.choice input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0}
.choice span{display:flex;align-items:center;gap:12px;min-height:60px;padding:12px 16px;border-radius:var(--r-sm);border:1px solid rgba(4,45,90,.35);background:var(--white);font-weight:600;color:var(--navy);transition:background-color .3s,border-color .3s,color .3s}
.choice span .i{color:var(--blue)}
.choice input:hover+span{border-color:var(--navy)}
.choice input:checked+span{background:var(--blue-band);border-color:var(--blue-band);color:#fff}
.choice input:checked+span .i{color:var(--sun)}
.choice input:focus-visible+span{outline:2px solid var(--navy);outline-offset:3px}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:.9rem;color:var(--muted)}
.consent input{width:22px;height:22px;margin-top:2px;accent-color:var(--navy);flex:none}
.hp{position:absolute!important;left:-9999px;opacity:0;pointer-events:none}
.stepper{display:none;gap:10px;margin:0 0 34px;padding:0;list-style:none}
.js .stepper{display:flex}
.stepper li{flex:1;font:700 .7rem var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.stepper li::before{content:"";display:block;height:3px;background:var(--rule);margin-bottom:10px;transition:background .5s}
.stepper li.is-done::before,.stepper li.is-current::before{background:var(--blue-band)}
.stepper li.is-current{color:var(--navy)}
.js .form-step:not(.is-active){display:none}
.form-step+.form-step{margin-top:32px}.js .form-step+.form-step{margin-top:0}
.form-nav{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-top:8px}
.js [data-prev]{visibility:hidden}
.no-js [data-next],.no-js [data-prev]{display:none}
.form-panel{padding:clamp(26px,4vw,56px);background:var(--white);border:1px solid var(--rule-strong);border-radius:var(--r)}
.form-status{padding:14px 18px;border-radius:var(--r-sm);background:#E8F7EE;color:#12602F;font-weight:600;display:none}
.form-status.is-on{display:block}
.calc{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,72px);align-items:start}
.range{display:grid;gap:14px}
.range output{font:800 clamp(3.4rem,6vw,5.4rem)/1 var(--font-display);color:var(--navy);letter-spacing:-.05em}
.range output small{font:500 .78rem var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-left:10px}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:6px;background:linear-gradient(90deg,var(--blue-band) var(--fill,30%),var(--sky-2) var(--fill,30%));outline-offset:10px;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:32px;height:32px;border-radius:50%;background:var(--sun);border:2px solid var(--navy);box-shadow:0 0 0 6px rgba(255,194,31,.3)}
input[type=range]::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:var(--sun);border:2px solid var(--navy)}
.result{position:sticky;top:calc(var(--header-h) + 24px);padding:clamp(28px,3.4vw,48px);border-radius:var(--r);background:var(--blue-band);color:rgba(255,255,255,.92);overflow:hidden;isolation:isolate}
.result::before{content:"";position:absolute;inset:0;z-index:-1;background-image:repeating-radial-gradient(circle at 100% 0,transparent 0 46px,rgba(255,255,255,.09) 46px 47px)}
.result h3{color:#fff;font-size:1.3rem}
.result .big{font:800 clamp(5rem,9vw,8rem)/.85 var(--font-display);letter-spacing:-.06em;color:var(--sun);margin:14px 0 18px}
.result .big small{font:800 2rem var(--font-display);letter-spacing:0;margin-left:8px;color:#fff}
.result dl{margin:20px 0 26px;display:grid}.result dl div{display:flex;justify-content:space-between;gap:18px;padding:13px 0;border-top:1px solid rgba(255,255,255,.2)}
.result dt{color:rgba(255,255,255,.88)}.result dd{margin:0;font-weight:600;color:#fff;text-align:right}
@media (max-width:900px){.calc{grid-template-columns:1fr}.result{position:static}}

/* 16 · CTA BAND / FOOTER ------------------------------------------------- */
.cta-band{position:relative;overflow:hidden;isolation:isolate;padding:clamp(44px,7vw,110px);background:var(--blue-band);color:rgba(255,255,255,.94);display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(28px,5vw,80px);align-items:end;border-radius:var(--r)}
.cta-band::before{content:"";position:absolute;z-index:-1;inset:0;background-image:repeating-radial-gradient(circle at 100% 120%,transparent 0 62px,rgba(255,255,255,.1) 62px 63px)}
.cta-band::after{content:"";position:absolute;z-index:-1;right:-90px;top:-210px;width:440px;aspect-ratio:1;border-radius:50%;background:var(--sun)}
.cta-band h2{color:#fff;margin-bottom:.35em;font-size:clamp(2.4rem,5.2vw,4.8rem)}
.cta-band p{margin:0 0 2rem;max-width:30em;color:rgba(255,255,255,.94)}
.cta-band .checklist{margin:0;align-self:end}
.cta-band .checklist li{border-color:rgba(255,255,255,.25);color:#fff;font-weight:500;padding:12px 0}
.cta-band .checklist li:last-child{border-color:rgba(255,255,255,.25)}
.cta-band .checklist .i{color:var(--sun)}
@media (max-width:820px){.cta-band{grid-template-columns:1fr}.cta-band::after{width:260px;right:-70px;top:-130px}}
.site-footer{background:var(--blue-band);color:rgba(255,255,255,.9);font-size:.96rem;position:relative;overflow:hidden;isolation:isolate}
.site-footer::before{content:"";position:absolute;inset:0;z-index:-1;background-image:repeating-radial-gradient(circle at 100% 100%,transparent 0 70px,rgba(255,255,255,.06) 70px 71px)}
.site-footer h2{font:700 .74rem var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:#fff;margin-bottom:20px;line-height:1.4}
.site-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.site-footer a{color:rgba(255,255,255,.95);text-decoration:none;transition:color .25s}
.site-footer a:hover{color:var(--sun)}
.sticky-cta{display:none}
@media (max-width:760px){
  .sticky-cta{position:fixed;inset:auto 0 0 0;z-index:95;display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);border-top:1px solid var(--rule-strong);transform:translateY(110%);transition:transform .5s var(--ease)}
  .sticky-cta.is-on{transform:none}
  .sticky-cta .btn{min-height:54px}
  .site-footer{padding-bottom:78px}
}

/* 17 · INNER PAGES ------------------------------------------------------- */
.page-hero{position:relative;overflow:hidden;isolation:isolate;padding:clamp(28px,4vw,56px) 0 clamp(52px,7vw,104px);background:linear-gradient(180deg,#CBE7FF 0%,#EAF6FF 70%,#F6FBFF 100%);border-bottom:1px solid var(--rule-strong)}
.page-hero .cells-bg{position:absolute;inset:0;z-index:-2;opacity:.5}
.page-hero__sun{position:absolute;z-index:-1;right:max(-12vw,-150px);top:20%;width:min(40vw,520px);aspect-ratio:1;border-radius:50%;background:var(--sun);animation:sunrise 1.8s var(--ease) both}
.page-hero__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,5vw,80px);align-items:end}
.page-hero--plain .page-hero__grid{grid-template-columns:minmax(0,9fr) minmax(0,3fr)}
.page-hero h1{font-size:clamp(2.7rem,6vw,5.6rem);margin-bottom:.35em;max-width:11em}
.page-hero .lead{margin-bottom:2rem}
.page-hero__art{justify-self:end;width:min(100%,380px);margin-bottom:calc(clamp(52px,7vw,104px)*-1)}
.page-hero__art .arch{aspect-ratio:4/5}
.crumbs{margin-bottom:clamp(24px,4vw,56px);font:700 .82rem var(--font-mono);letter-spacing:.07em;text-transform:uppercase}
.crumbs ol{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}
.crumbs li{display:flex;align-items:center;gap:8px;color:var(--muted)}
.crumbs li+li::before{content:"/";color:var(--rule-strong);opacity:.4}
.crumbs a{color:var(--navy);text-decoration:none}.crumbs a:hover{color:var(--blue)}
@media (max-width:900px){.page-hero__grid,.page-hero--plain .page-hero__grid{grid-template-columns:1fr}.page-hero__art{display:none}.page-hero__sun{width:60vw;top:auto;bottom:-20%}}
.prose{max-width:760px}
.prose h2{font-size:clamp(1.7rem,2.6vw,2.2rem);margin-top:2em;letter-spacing:-.02em}
.prose h3{margin-top:1.6em}
.prose p,.prose li{color:#2B425E}
.prose li{margin-bottom:.4em}
.legal-nav{position:sticky;top:calc(var(--header-h) + 24px);padding:22px 0 0;border-top:1px solid var(--rule-strong);font-size:.94rem}
.legal-nav ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.legal-nav a{text-decoration:none;font-weight:500;color:var(--navy)}.legal-nav a:hover{color:var(--blue)}
.legal{display:grid;grid-template-columns:260px 1fr;gap:clamp(30px,6vw,96px);align-items:start}
@media (max-width:900px){.legal{grid-template-columns:1fr}.legal-nav{position:static}}
.guide-card .tile__media{aspect-ratio:3/2}
.guide-meta{display:flex;gap:14px;font-size:.7rem;color:var(--muted);margin-bottom:10px}
.guide-meta b{color:var(--sun-ink);font-weight:700}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:34px}
.contact-card{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;padding:24px 0;border-top:1px solid var(--rule-strong)}
.contact-card .ib{font-size:1.8rem}
.contact-card h3{font-size:1.3rem;margin-bottom:.2em}.contact-card p{margin:0;color:var(--muted);font-size:.97rem}
.contact-card a{font-weight:600;text-decoration:none;color:var(--navy)}.contact-card a:hover{color:var(--blue)}
.quote-aside{display:grid;gap:26px}
.err-hero{min-height:64vh;display:grid;place-items:center;text-align:center;padding-block:var(--sec)}
.err-hero .code{font:800 clamp(8rem,26vw,18rem)/.8 var(--font-display);letter-spacing:-.07em;color:var(--sun);-webkit-text-stroke:2px var(--navy)}

/* 18 · SOLAR SIGNATURE COMPONENTS ---------------------------------------- */
/* 18a  Roof reveal (before / after) */
.compare{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:var(--r-sm);--pos:50%;background:var(--paper-2);-webkit-user-select:none;user-select:none;touch-action:pan-y}
.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.compare__after{clip-path:inset(0 0 0 var(--pos))}
.compare__bar{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:#fff;transform:translateX(-1px);pointer-events:none}
.compare__knob{position:absolute;top:50%;left:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:var(--sun);color:var(--navy);display:grid;place-items:center;box-shadow:0 0 0 6px rgba(255,255,255,.55)}
.compare__knob .i{width:24px;height:24px}
.compare__range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:none}
.compare__range:focus-visible~.compare__bar .compare__knob{outline:3px solid var(--navy);outline-offset:4px}
.compare__tag{position:absolute;top:18px;z-index:2;padding:8px 12px;background:#fff;color:var(--navy);font:700 .7rem var(--font-mono);letter-spacing:.09em;text-transform:uppercase}
.compare__tag--l{left:18px}.compare__tag--r{right:18px}
/* 18b  A day with solar (sun path) */
.sunday{position:relative;background:var(--blue-band);color:#fff;border-radius:var(--r);overflow:hidden;--sky-a:#0B2A55;--sky-b:#3F6EA8;--irr:.6}
.sunday__scene{position:relative;aspect-ratio:2/1;width:100%}
.sunday__scene svg{position:absolute;inset:0;width:100%;height:100%}
.sunday .sk-a{stop-color:var(--sky-a)}.sunday .sk-b{stop-color:var(--sky-b)}
.sunday .arc{fill:none;stroke:rgba(255,255,255,.35);stroke-width:1.5;stroke-dasharray:2 7}
.sunday .sun{transform:translate(calc(var(--sx,500) * 1px),calc(var(--sy,120) * 1px))}
.sunday .sun circle{fill:var(--sun)}
.sunday .halo{fill:#fff;opacity:calc(var(--irr) * .3)}
.sunday .ground{fill:#0A56C2}
.sunday .house-body{fill:#0A3E8F}.sunday .roof{fill:#05306E}
.sunday .pcell{fill:#0A4C8C;fill:color-mix(in srgb,#0A4C8C,#9BE3FF calc(var(--irr) * 78%));stroke:#05306E;stroke-width:2}
.sunday .window{fill:#FFD97A;opacity:var(--lights,0)}
.sunday__ui{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(14px,3vw,36px);align-items:center;padding:20px clamp(18px,3vw,40px);border-top:1px solid rgba(255,255,255,.18)}
.sunday__play{width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.6);background:none;color:#fff;cursor:pointer;display:grid;place-items:center;transition:background-color .3s,color .3s}
.sunday__play:hover{background:var(--sun);color:var(--navy);border-color:var(--sun)}
.sunday__play .i{width:20px;height:20px}.sunday__play .i-pause{display:none}.sunday.is-playing .i-play{display:none}.sunday.is-playing .i-pause{display:block}
.sunday__time{font:800 clamp(2rem,3.6vw,3rem)/1 var(--font-display);letter-spacing:-.03em;min-width:5.6ch;text-align:right}
.sunday input[type=range]{background:linear-gradient(90deg,var(--sun) var(--fill,50%),rgba(255,255,255,.28) var(--fill,50%));outline-color:#fff}
.sunday__stats{display:grid;grid-template-columns:repeat(4,1fr);margin:0;border-top:1px solid rgba(255,255,255,.18)}
.sunday__stats div{padding:20px clamp(16px,2.4vw,36px);border-left:1px solid rgba(255,255,255,.18)}
.sunday__stats div:first-child{border-left:0}
.sunday__stats dt{font:700 .68rem var(--font-mono);letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.9);margin-bottom:8px}
.sunday__stats dd{margin:0;font:800 1.5rem/1.1 var(--font-display);color:#fff;letter-spacing:-.02em}.sunday__stats dd strong{font-weight:inherit}
.sunday__bar{display:block;height:4px;background:rgba(255,255,255,.2);margin-top:12px}
.sunday__bar i{display:block;height:100%;background:var(--sun);width:var(--w,0%);transition:width .3s linear}
.sunday__note{padding:16px clamp(18px,3vw,40px) 22px;margin:0;font-size:.95rem;color:rgba(255,255,255,.95);min-height:4.2em}
@media (max-width:700px){.sunday__scene{aspect-ratio:3/2}.sunday__stats{grid-template-columns:1fr 1fr}.sunday__stats div:nth-child(3){border-left:0}.sunday__stats div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.18)}.sunday__ui{grid-template-columns:auto 1fr}.sunday__time{grid-column:1/-1;text-align:left}}
/* 18c  System map (line-drawn house + hotspots) */
.sysmap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,88px);align-items:center}
.sysmap__fig{position:relative;background:var(--sky);border:1px solid var(--rule-strong);border-radius:var(--r);padding:clamp(10px,2vw,28px)}
.sysmap__fig svg{width:100%;height:auto}
.sysmap .ln{fill:none;stroke:var(--navy);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.js .sysmap .ln{stroke-dashoffset:1}
.sysmap__fig.is-in .ln{stroke-dashoffset:0;transition:stroke-dashoffset 2.4s var(--ease)}
.sysmap .ln.d2{transition-delay:.3s}.sysmap .ln.d3{transition-delay:.6s}.sysmap .ln.d4{transition-delay:.9s}
.sysmap .fillp{fill:var(--sun);opacity:.9}
.js .sysmap .fillp{opacity:0;transition:opacity 1s 1.6s}
.js .sysmap__fig.is-in .fillp{opacity:.9}
.hs{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:1.5px solid var(--navy);background:var(--sun);color:var(--navy);font:700 .72rem var(--font-mono);display:grid;place-items:center;cursor:pointer;padding:0;transition:background-color .3s,color .3s,transform .4s var(--ease)}
.hs::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px solid var(--navy);pointer-events:none;opacity:.35;animation:ping 2.4s var(--ease) infinite}
.hs:hover,.hs.is-active{background:var(--blue-band);border-color:var(--blue-band);color:#fff;transform:scale(1.12)}
.sysmap__list{list-style:none;padding:0;margin:0;border-bottom:1px solid var(--rule-strong)}
.sysmap__list li{border-top:1px solid var(--rule-strong)}
.sysmap__list a{display:grid;grid-template-columns:auto 1fr auto;gap:6px 20px;align-items:baseline;padding:20px 0;text-decoration:none;color:var(--navy);transition:padding .5s var(--ease),color .3s}
.sysmap__list a:hover,.sysmap__list a.is-active{padding-left:14px;color:var(--blue-deep)}
.sysmap__list b{font:700 .74rem var(--font-mono);letter-spacing:.08em;color:var(--sun-ink)}
.sysmap__list strong{font:800 1.5rem/1.1 var(--font-display);letter-spacing:-.02em}
.sysmap__list small{grid-column:2;display:block;color:var(--muted);font-size:.95rem;line-height:1.45}
.sysmap__list .i{align-self:center}
@media (max-width:900px){.sysmap{grid-template-columns:1fr}}
/* 18d  Parallax band */
.band{position:relative;overflow:hidden;isolation:isolate;min-height:clamp(480px,80vh,820px);display:grid;align-items:end;color:#fff}
.band__img{position:absolute;inset:-12% 0;z-index:-2;will-change:transform}
.band__img img{width:100%;height:100%;object-fit:cover}
.band::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,105,217,.05) 0%,rgba(0,84,176,.78) 100%)}
.band__in{padding-block:clamp(48px,8vw,120px)}
.band h2{color:#fff;max-width:13em;font-size:clamp(2.6rem,6.2vw,6rem)}
.band p{max-width:30em;color:#fff;font-size:1.15rem}
/* 18e  Rail gallery */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,29vw);gap:clamp(14px,2vw,28px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:6px;-webkit-overflow-scrolling:touch}
.rail::-webkit-scrollbar{display:none}
.rail figure{margin:0;scroll-snap-align:start}
.rail .tile__media{aspect-ratio:4/5;border-radius:var(--r-sm)}
.rail figcaption{padding-top:14px;font:700 .72rem var(--font-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.rail-ctl{display:flex;gap:10px}
.rail-ctl button{width:54px;height:54px;border-radius:50%;border:1px solid var(--rule-strong);background:none;color:var(--navy);cursor:pointer;display:grid;place-items:center;transition:background-color .3s,color .3s}
.rail-ctl button:hover{background:var(--blue-band);border-color:var(--blue-band);color:#fff}
.rail-ctl .i{width:22px;height:22px}.rail-ctl .prev .i{transform:rotate(180deg)}
@media (max-width:700px){.rail{grid-auto-columns:78%}}
/* 18f  Cell wave (panel cells charging) */
.cellwave{display:grid;grid-template-columns:repeat(16,1fr);gap:5px;padding-block:6px}
.cellwave span{aspect-ratio:3/2;background:#CFDCEB;transform:skewX(-14deg);transition:background-color .6s calc(var(--i) * 70ms),transform .8s calc(var(--i) * 70ms) var(--ease)}
.cellwave.is-in span{background:var(--sun);transform:skewX(-14deg) translateY(-3px)}
.cellwave.is-in span:nth-child(3n){background:var(--sun-deep)}
.cellwave.is-in span:nth-child(5n){background:var(--navy)}
@media (max-width:700px){.cellwave{grid-template-columns:repeat(8,1fr)}}

/* 19 · POPUP ------------------------------------------------------------- */
.popup__head::after{content:"";position:absolute;z-index:-1;right:-70px;top:-90px;width:230px;aspect-ratio:1;border-radius:50%;background:var(--sun)}
.popup__head h2{font-size:clamp(2rem,4.4vw,3rem);margin:0 0 .25em;max-width:9em}
.popup__head p{margin:0;color:var(--muted);max-width:28em}
html.popup-open{overflow:hidden}

/* 20 · EFFECTS + MOTION --------------------------------------------------- */
.js [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:calc(var(--d,0) * 90ms)}
.js [data-reveal="left"]{transform:translateX(-30px)}.js [data-reveal="right"]{transform:translateX(30px)}.js [data-reveal="zoom"]{transform:scale(.97)}
.js [data-reveal].is-in{opacity:1;transform:none}
@media (max-width:980px){.js [data-reveal="left"],.js [data-reveal="right"]{transform:translateY(26px)}}
/* image mask reveal (added by JS to non-LCP images) */
.js .mask{clip-path:inset(0 0 100% 0);transition:clip-path 1.3s var(--ease)}
.js .mask img{transform:scale(1.18);transition:transform 1.8s var(--ease)}
.js .mask.is-in{clip-path:inset(0)}.js .mask.is-in img{transform:none}
.js .tile:hover .tile__media.mask.is-in img{transform:scale(1.05)}
/* split-word headlines (words wrapped at build time) */
.js .sec-head[data-reveal]{opacity:1;transform:none}
.sw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.16em;margin-bottom:-.16em}
.sw>span{display:inline-block}
.js .sw>span{transform:translateY(112%);transition:transform 1.1s var(--ease);transition-delay:calc(var(--i) * 45ms)}
.js .is-in .sw>span{transform:none}
.js .sec-head .eyebrow,.js .sec-head p{opacity:0;transform:translateY(14px);transition:opacity .9s .25s var(--ease),transform .9s .25s var(--ease)}
.js .sec-head.is-in .eyebrow,.js .sec-head.is-in p{opacity:1;transform:none}
@keyframes sunrise{from{transform:translateY(38%)}to{transform:none}}
@keyframes settle{from{transform:scale(1.12)}to{transform:none}}
@keyframes dash{to{stroke-dashoffset:-18}}
@keyframes ping{0%{transform:scale(.8);opacity:.5}80%,100%{transform:scale(1.5);opacity:0}}
@keyframes pop-in{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .28s ease both}
::view-transition-new(root){animation:vt-in .45s var(--ease) both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .js [data-reveal],.js .sec-head .eyebrow,.js .sec-head p{opacity:1;transform:none}
  .js .mask{clip-path:none}.js .mask img,.js .sw>span{transform:none}
  .steps::after{transform:scaleX(1)}
  @view-transition{navigation:none}
}
@media print{
  .site-header,.sunpath,.sticky-cta,.cta-band,.nav,.popup{display:none!important}
  body{font-size:11pt;background:#fff}.sec{padding-block:16pt}.js [data-reveal]{opacity:1;transform:none}
}

/* ==========================================================================
   21 · THEME v3: matches the approved home-page design (mockup)
   Off-white ground, deep-navy text, orange-red accent, navy band + footer,
   rectangular buttons, plain orange labels and links, ruled hairlines.
   Measured from the mockup: text #00104A, muted #54698A, accent #F57A2C,
   band #033C6E, footer #012855, ground #FAF8F5.
   Accessibility: the mockup's #F57A2C is only 3.3:1 against white, so TEXT and
   BUTTON FILLS use a slightly deeper #EE6F23 / #BC5210 (4.5:1+); the exact
   mockup orange is kept for icons and large numerals.
   ========================================================================== */
:root{
  --navy:#00104A; --ink:#17264F; --muted:#54698A;
  --rule:#E3E6EC; --rule-strong:#CBD2DF;
  --paper:#FAF8F5; --white:#FFFFFF; --sky:#F3F5F9; --sky-2:#E6EBF3; --paper-2:#F3EEE8;
  --blue-band:#033C6E; --blue-band-2:#0A5CA8; --blue:#0B3F8F; --blue-deep:#00104A; --navy-900:#012855; --navy-700:#033C6E;
  --accent:#EE6F23; --accent-hover:#D4601B; --accent-text:#BC5210; --accent-icon:#F57A2C;
  --sun:#FF9248; --sun-deep:#F57A2C; --sun-hot:#F57A2C; --sun-soft:#FFEBDD; --orange:#F57A2C; --sun-ink:#BC5210;
  --r-sm:3px; --r:4px; --r-lg:8px;
  --maxw:1200px; --header-h:80px;
  --sec:clamp(56px,7vw,104px);
}
body{font-weight:400;font-size:1.0625rem;line-height:1.6;background:var(--paper);color:var(--ink)}
h1,h2,h3,h4,.stat b,.sunday__time,.pkg__size b,.pkg__size span,.result .big,.range output,.timeline__dot,.cell__label{-webkit-text-stroke:0;font-weight:700;letter-spacing:-.022em}
h1{font-size:clamp(2.5rem,4.7vw,4rem);line-height:1.08}
h2{font-size:clamp(2rem,3.5vw,3rem);line-height:1.1}
h3{font-size:clamp(1.25rem,1.7vw,1.6rem);line-height:1.2;letter-spacing:-.015em}
.hl{color:var(--accent-text);background:none;padding:0;margin:0}
.sec--navy .hl,.on-dark .hl,.band .hl,.popup .hl{color:var(--sun-soft)}
.lead{font-size:clamp(1.12rem,1.6vw,1.45rem);color:var(--muted);line-height:1.5}
/* labels become plain, as in the mockup */
.eyebrow{font-family:var(--font-body);font-weight:500;text-transform:none;letter-spacing:0;font-size:1.05rem;color:var(--accent-text);margin-bottom:14px;gap:0}
.eyebrow::before{display:none}
.sec--navy .eyebrow,.on-dark .eyebrow{color:#FFE3D0}
.mono,.guide-meta{text-transform:none;letter-spacing:0;font-weight:500}
.guide-meta{font-size:.9rem}
.field label,.field .lbl{text-transform:none;letter-spacing:0;font-size:.95rem;color:var(--navy);font-weight:600}
.crumbs{font-size:.9rem;text-transform:none;letter-spacing:0;font-weight:500}
thead th{text-transform:none;letter-spacing:0;font-size:.92rem;color:var(--navy);font-weight:700}
tbody th{font-family:var(--font-display);font-size:1.1rem;font-weight:700}
.bat__tabs button,.states button,.filters button{text-transform:none;letter-spacing:0;font-weight:600;font-size:.95rem;border-radius:4px;padding:10px 18px}
.badge{text-transform:none;letter-spacing:0;border-radius:3px;background:var(--accent);color:#00104A;font-weight:600;font-size:.82rem}
.stepper li,.compare__tag,.tile__num,.media__tag,.rail figcaption,.sunday__stats dt,.footer__accred span,.sysmap__list b{text-transform:none;letter-spacing:0;font-weight:600}
.faq summary,.sysmap__list strong,.nav__drop strong{font-family:var(--font-body)}
/* buttons: rectangular, orange fill, arrow rotated to a north-east arrow */
.btn{border-radius:4px;min-height:52px;padding:0 24px;gap:10px;font-weight:600;font-size:1rem;letter-spacing:0}
.btn .i-arrow,.btn--lg .i-arrow,.btn--sm .i-arrow{width:1em;height:1em;padding:0;border-radius:0;background:none!important;color:inherit!important;stroke-width:2.2;transform:rotate(-45deg)}
.btn:hover .i-arrow{transform:rotate(-45deg) translate(2px,0)}
.btn--lg{min-height:56px;padding:0 28px;font-size:1.05rem}
.btn--sm{min-height:44px;padding:0 18px;font-size:.95rem}
.btn--sun{background:var(--accent);color:#00104A}
.btn--sun:hover{background:var(--accent-hover);color:#fff}
.btn--navy{background:var(--navy);color:#fff}
.btn--navy:hover{background:var(--accent);color:#00104A}
.btn--white{background:#fff;color:var(--navy)}
.btn--white:hover{background:var(--accent);color:#00104A}
.btn--ghost,.btn--outline-light{color:var(--navy);gap:10px;font-weight:500;background-image:linear-gradient(var(--accent),var(--accent));padding-bottom:5px}
.btn--ghost:hover{color:var(--accent-hover)}
.btn--ghost .i{color:var(--accent-icon)}
.btn--outline-light{color:#fff}
.btn-row{gap:18px 32px}
.link-arrow{color:var(--accent-text);border-bottom:1px solid var(--accent-text);font-weight:500;gap:8px;padding-bottom:3px}
.link-arrow .i{transform:rotate(-45deg);width:1em;height:1em}
.link-arrow:hover{color:var(--accent-hover);gap:12px;border-color:var(--accent-hover)}
.link-arrow:hover .i{transform:rotate(-45deg)}
/* header */
.site-header{background:#fff;border-bottom:1px solid var(--rule)}
.site-header.is-stuck{background:#fff;box-shadow:0 2px 14px rgba(0,16,74,.06)}
.brand img{width:190px}
.nav__list{gap:clamp(14px,2.2vw,36px)}
.nav__link{font-weight:500;font-size:.96rem;color:var(--navy)}
.nav__link::after{background:var(--accent)}
.nav__link[aria-current="page"]::after{background:var(--accent);height:2px}
.header-phone{display:none}
.sunpath{display:none}
.nav__drop{border-radius:6px;box-shadow:0 18px 40px -18px rgba(0,16,74,.28)}
.nav__drop strong{font-size:1.02rem;font-weight:700;letter-spacing:-.005em}
.nav__drop .ib,.ib{color:var(--accent-icon)}
@media (max-width:1180px){
  .nav__link{font:700 1.5rem/1.1 var(--font-body);letter-spacing:-.015em}
}
/* decoration from the earlier concept is retired */
.hero__sun,.page-hero__sun,.cells-bg,.arch-ring::before{display:none}
.arch{border-radius:4px}
/* HERO (home) */
.hero{position:relative;background:var(--paper);border:0;overflow:hidden;isolation:isolate;padding:0}
.hero__media{position:absolute;top:0;right:0;bottom:0;width:60%;z-index:-1;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34%);mask-image:linear-gradient(90deg,transparent 0,#000 34%)}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:left center;animation:settle 2.2s var(--ease) both}
.hero__inner{min-height:clamp(480px,47vw,660px);display:grid;align-content:center;padding-block:clamp(48px,6vw,96px)}
.hero__copy{max-width:min(620px,54%);padding:0}
.hero h1{margin:0 0 .5em;max-width:10.6em;font-size:clamp(2.5rem,4.6vw,4.1rem)}
.hero .lead{max-width:20em;margin:0 0 2rem}
@media (max-width:980px){
  .hero__media{position:relative;width:100%;height:clamp(240px,60vw,420px);z-index:0;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 24%);mask-image:linear-gradient(180deg,transparent 0,#000 24%)}
  .hero__media img{object-position:right center}
  .hero__inner{min-height:0;padding-block:40px 0}
  .hero__copy{max-width:none}
  .hero{display:flex;flex-direction:column}
}
/* feature strip */
.strip{background:#fff;border-bottom:1px solid var(--rule)}
.strip__grid{display:grid;grid-template-columns:repeat(3,1fr)}
.strip__item{display:flex;align-items:center;gap:22px;padding:34px clamp(16px,3vw,40px);font-weight:600;color:var(--navy);font-size:1.05rem}
.strip__item+.strip__item{border-left:1px solid var(--rule)}
.strip__item .i{width:48px;height:48px;color:var(--accent-icon);stroke-width:1.2}
@media (max-width:760px){.strip__grid{grid-template-columns:1fr}.strip__item+.strip__item{border-left:0;border-top:1px solid var(--rule)}.strip__item{padding:22px 0}}
/* sections */
.sec--paper{background:var(--paper)}
.sec--white{background:#fff}
.sec--sky{background:var(--sky)}
.sec--cream{background:var(--paper-2)}
.sec-head{margin-bottom:clamp(28px,4vw,52px);grid-template-columns:1fr}
.sec-head p{font-size:1.15rem}
.row-between{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,48px)}
.row-between .sec-head{margin:0}
/* product tiles */
.tiles3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,36px)}
.tiles3 .tile__media{aspect-ratio:3/4;border-radius:0}
.tiles3 .tile__num{display:none}
.tiles3 h3{font-size:clamp(1.5rem,2vw,1.9rem)}
.tiles3 .card__body{padding-top:22px}
.tiles3 p{color:var(--muted);font-size:1.05rem}
.card{border-top:0}
.card::after{display:none}
.card__body{padding-top:18px}
.tile__media{border-radius:0}
@media (max-width:760px){.tiles3{grid-template-columns:1fr}}
/* packages (home) */
.pk3{display:grid;grid-template-columns:repeat(3,1fr);text-align:center}
.pk3__item{padding:6px clamp(18px,3vw,44px)}
.pk3__item+.pk3__item{border-left:1px solid var(--rule-strong)}
.pk3__icon{height:96px;display:grid;place-items:center;margin-bottom:14px}
.pk3__icon svg{height:84px;width:auto}
.pk3 h3{font-size:clamp(1.4rem,2vw,1.8rem);margin-bottom:.4em}
.pk3 p{color:var(--muted);margin:0;font-size:1.05rem}
.pk3__cta{text-align:center;margin-top:44px}
.pk3__note{text-align:center;font-size:.95rem;color:var(--muted);margin:18px 0 0}
@media (max-width:760px){.pk3{grid-template-columns:1fr;gap:28px}.pk3__item+.pk3__item{border-left:0;border-top:1px solid var(--rule-strong);padding-top:28px}}
/* navy band */
.band3{background:var(--blue-band);color:#fff;padding-block:clamp(40px,5vw,72px)}
.band3__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,56px);align-items:center}
.band3 h2{color:#fff;font-size:clamp(2rem,3.4vw,3rem);margin-bottom:.4em}
.band3 p{color:rgba(255,255,255,.95);max-width:20em;margin:0;font-size:1.15rem}
.band3 svg{width:100%;height:auto}
.band3 svg text{font:500 17px var(--font-body);fill:#fff;text-anchor:middle}
@media (max-width:820px){.band3__grid{grid-template-columns:1fr}}
/* cost + rebates duo */
.duo{display:grid;grid-template-columns:1fr 1fr}
.duo__item{padding:6px clamp(20px,4vw,56px) 6px 0}
.duo__item+.duo__item{border-left:1px solid var(--rule-strong);padding-left:clamp(20px,4vw,56px)}
.duo__item>.i{width:48px;height:48px;color:var(--accent-icon);stroke-width:1.2;margin-bottom:14px;display:block}
.duo h3{font-size:clamp(1.5rem,2.2vw,2rem)}
.duo p{color:var(--muted);font-size:1.08rem;max-width:22em}
@media (max-width:760px){.duo{grid-template-columns:1fr;gap:32px}.duo__item+.duo__item{border-left:0;border-top:1px solid var(--rule-strong);padding:28px 0 0}}
/* how it works (home) */
.hw3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px)}
.hw3__num{display:flex;align-items:center;gap:18px;font-size:clamp(2.2rem,3.6vw,3.3rem);font-weight:700;letter-spacing:-.03em;color:var(--accent-icon);line-height:1;margin-bottom:16px}
.hw3__num::after{content:"";flex:1;height:1px;background:var(--rule-strong)}
.hw3 h3{font-size:1.2rem;margin-bottom:.4em}
.hw3 p{color:var(--muted);margin:0;font-size:1.02rem}
@media (max-width:760px){.hw3{grid-template-columns:1fr}}
/* about (home) */
.about3{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.about3__img{aspect-ratio:4/3;overflow:hidden}
.about3__img img{width:100%;height:100%;object-fit:cover}
.about3 h2{font-size:clamp(2rem,3.4vw,2.9rem)}
.about3 p{color:var(--muted);font-size:1.15rem;max-width:22em}
@media (max-width:820px){.about3{grid-template-columns:1fr}}
/* guides (home) */
.gd3{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,3vw,36px)}
.gd3 .tile__media{aspect-ratio:1.9/1;border-radius:0}
.gd3 h3{font-size:clamp(1.2rem,1.7vw,1.5rem)}
@media (max-width:700px){.gd3{grid-template-columns:1fr}}
/* FAQ */
.faq-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:start}
.faq-split .sec-head{margin:0}
.faq details{border-top:1px solid var(--rule-strong)}
.faq details:last-child{border-bottom:1px solid var(--rule-strong)}
.faq summary{padding:17px 0;font:600 1.05rem/1.35 var(--font-body);letter-spacing:0;color:var(--navy)}
.faq summary:hover{color:var(--accent-text)}
.faq summary::after{width:20px;height:20px;border:0;border-radius:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FD4014' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/20px no-repeat}
.faq details[open] summary::after{transform:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FD4014' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E") center/20px no-repeat}
.faq .faq__a{padding:0 44px 18px 0;font-size:1rem;color:var(--muted)}
@media (max-width:860px){.faq-split{grid-template-columns:1fr}}
/* closing call to action (every page) */
.cta3{background:#fff;border-top:1px solid var(--rule)}
.cta3 h2{font-size:clamp(2.2rem,4.4vw,3.6rem);margin-bottom:.3em}
.cta3 p{color:var(--muted);font-size:clamp(1.1rem,1.6vw,1.35rem);max-width:30em;margin:0 0 1.8rem}
/* footer */
.site-footer{background:#012855;color:#fff}
.site-footer::before{display:none}
.site-footer h2{font:700 1rem var(--font-body);letter-spacing:0;text-transform:none;color:#fff;margin-bottom:12px}
.site-footer ul{gap:8px}
.site-footer a{color:rgba(255,255,255,.88);font-size:.95rem}
/* inner pages */
.page-hero{background:var(--paper);border-bottom:1px solid var(--rule)}
.page-hero h1{font-size:clamp(2.3rem,4.4vw,3.6rem);max-width:14em}
.page-hero__art{margin-bottom:0;width:min(100%,440px)}
.hs{background:var(--accent);color:#00104A;border-color:var(--accent)}
.hs:hover,.hs.is-active{background:var(--navy);border-color:var(--navy)}
.cta-band{border-radius:0}
.sec--navy .fineprint,.band3 .fineprint{color:rgba(255,255,255,.95)}
.sec--rule{border-top:1px solid var(--rule)}
.site-header .container{justify-content:flex-start}
.nav{margin-left:auto}
.header-cta{margin-left:clamp(20px,3vw,44px)}
@media (max-width:1180px){.nav{margin-left:0}.header-cta{margin-left:auto}}

/* ==========================================================================
   22 · THEME v4: editorial content system (content-led pages)
   Sticky outlined section numerals, ruled lists, spec-sheet tables, stat rows,
   split image sections, full-bleed photo bands, interactive estimator.
   ========================================================================== */
::selection{background:var(--accent);color:#00104A}
.add{display:inline;background:var(--sun-soft);color:#7A2500;padding:1px 6px;border:1px dashed var(--accent);border-radius:2px;font-weight:600;font-size:.92em;line-height:1.5;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.site-footer .add,.sec--navy .add{background:transparent;color:#FFE3D0;border-color:rgba(255,217,201,.6)}
h2[id],section[aria-labelledby]{scroll-margin-top:calc(var(--header-h) + 64px)}

/* header: six links + button, reading progress */
.site-header{position:sticky;top:0;z-index:90}
.brand img{width:172px}
.nav__list{gap:clamp(12px,1.55vw,26px)}
.nav__link{font-size:.93rem}
.nav__link[data-current="true"]::after{transform:scaleX(1);transform-origin:0 50%;height:2px}
.read-bar{position:absolute;left:0;bottom:-1px;height:3px;width:100%;background:var(--accent);transform:scaleX(var(--read,0));transform-origin:0 50%;pointer-events:none}

/* inner page hero: copy left, image bleeding off the right edge */
.ihero{position:relative;background:var(--paper);overflow:hidden;isolation:isolate;border-bottom:1px solid var(--rule)}
.ihero__in{min-height:clamp(500px,43vw,640px);display:flex;align-items:center;padding-block:clamp(32px,4.5vw,64px)}
.ihero__copy{max-width:min(660px,57%);position:relative;z-index:2}
.ihero .crumbs{margin-bottom:clamp(22px,3vw,40px)}
.ihero h1{font-size:clamp(2.1rem,3.9vw,3.5rem);line-height:1.07;margin:0 0 .5em;max-width:15.5em}
.ihero .lead{max-width:30em;margin:0 0 1.1rem}
.ihero__copy>p:not(.lead){color:var(--muted);font-size:1.05rem;max-width:34em;margin:0 0 1rem}
.ihero .btn-row{margin-top:1.6rem}
.ihero__media{position:absolute;top:0;right:0;bottom:0;width:min(41vw,660px);z-index:1;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 13%);mask-image:linear-gradient(90deg,transparent 0,#000 13%)}
.ihero__media img{width:100%;height:100%;object-fit:cover;object-position:center}
.js .ihero__media{animation:mediaIn 1.5s var(--ease) both}
@keyframes mediaIn{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
.ihero--plain .ihero__in{min-height:0;padding-block:clamp(36px,5vw,72px)}
.ihero--plain .ihero__copy{max-width:760px}
@media (max-width:980px){
  .ihero__in{min-height:0;display:block;padding-bottom:28px}
  .ihero__copy{max-width:none}
  .ihero__media{position:relative;width:100%;height:clamp(220px,58vw,400px);-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%);mask-image:linear-gradient(180deg,transparent 0,#000 22%)}
  .js .ihero__media{animation:none}
}

/* on this page */
.toc{position:sticky;top:var(--header-h);z-index:60;background:#fff;border-bottom:1px solid var(--rule)}
.toc__in{display:flex;align-items:center;gap:20px;overflow-x:auto;scrollbar-width:none}
.toc__in::-webkit-scrollbar{display:none}
.toc__label{font-size:.82rem;font-weight:600;color:var(--muted);white-space:nowrap}
.toc ol{display:flex;gap:2px;list-style:none;margin:0;padding:0}
.toc a{display:flex;gap:8px;align-items:baseline;max-width:19rem;padding:15px 12px 14px;color:var(--muted);text-decoration:none;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-bottom:2px solid transparent;transition:color .25s,border-color .25s}
.toc a b{color:var(--accent-icon);font-variant-numeric:tabular-nums;font-weight:700}
.toc a:hover{color:var(--navy)}
.toc a.is-active{color:var(--navy);border-bottom-color:var(--accent)}
@media (max-width:760px){.toc{display:none}}

/* sections */
.csec{padding-block:clamp(64px,8vw,124px)}
.csec__grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,6vw,100px);align-items:start}
.csec__head.sec-head{display:block;margin:0;position:sticky;top:calc(var(--header-h) + 76px)}
.csec__num{display:block;font-size:clamp(3rem,5.2vw,4.8rem);font-weight:700;letter-spacing:-.04em;line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--accent-icon);margin-bottom:.32em;font-variant-numeric:tabular-nums}
.csec__head h2{font-size:clamp(1.6rem,2.5vw,2.3rem);line-height:1.12}
.sec--navy .csec__num{-webkit-text-stroke-color:#FFC9A3}
@media (max-width:900px){.csec__grid{grid-template-columns:1fr;gap:18px}.csec__head.sec-head{position:static}.csec__num{font-size:2.6rem}}

/* split image sections */
.csec__grid--media{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,104px);align-items:start}
.csec--split-rev .csec__grid--media{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.csec--split-rev .csec__media{order:2}
.csec__media{position:sticky;top:calc(var(--header-h) + 90px)}
.csec__media img{display:block;width:100%;height:auto;border-radius:2px}
.csec__text .csec__head.sec-head{position:static;margin-bottom:1.6rem}
.csec__text .csec__num{font-size:clamp(2.4rem,3.6vw,3.2rem)}
.csec__text .csec__head h2{font-size:clamp(1.6rem,2.6vw,2.4rem)}
@media (max-width:900px){.csec__grid--media,.csec--split-rev .csec__grid--media{grid-template-columns:1fr}.csec--split-rev .csec__media{order:0}.csec__media{position:static}}

/* prose */
.prose{max-width:46rem;min-width:0}
.csec--facts .prose{max-width:none}
.prose>*+*{margin-top:1.3em}
:where(.prose) p{margin:0}
.prose p{font-size:1.07rem;line-height:1.72;color:var(--ink)}
.prose>p:first-child{font-size:1.18rem;color:var(--navy)}
.prose a{color:var(--accent-text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:color .2s}
.prose a:hover{color:var(--accent-hover)}
.prose h3{font-size:1.3rem;margin:2em 0 0}
.prose .link-arrow{text-decoration:none}
.prose__cta{margin-top:2em!important}
.prose strong{color:var(--navy);font-weight:700}
.sec--navy .prose p,.sec--navy .prose{color:rgba(255,255,255,.94)}
.sec--navy .prose strong,.sec--navy .prose>p:first-child{color:#fff}
.sec--navy .prose a{color:#FFE3D0}
.stamp{display:inline-flex;align-items:center;gap:10px;margin:0 0 1.2rem;padding:7px 14px;border:1px solid var(--rule-strong);background:#fff;font-size:.9rem;font-weight:600;color:var(--navy)}
.stamp::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent-icon)}
.fineprint{max-width:46rem}

/* lists */
.bl{list-style:none;padding:0;margin:0;border-top:1px solid var(--rule-strong)}
.bl li{position:relative;padding:15px 0 15px 30px;border-bottom:1px solid var(--rule);line-height:1.6;color:var(--ink)}
.bl li::before{content:"";position:absolute;left:2px;top:1.45em;width:8px;height:8px;background:var(--accent-icon);transform:rotate(45deg)}
.bl--led li{display:grid;grid-template-columns:minmax(0,11.5rem) minmax(0,1fr);gap:4px 30px;padding-left:0;transition:background-color .25s}
.bl--led li::before{display:none}
.bl--led strong{color:var(--navy);font-weight:700;line-height:1.45}
.bl--led span{color:var(--muted)}
.bl--led li:hover strong{color:var(--accent-text)}
@media (max-width:640px){.bl--led li{grid-template-columns:1fr}}
.ol{list-style:none;counter-reset:o;padding:0;margin:0;border-top:1px solid var(--rule-strong)}
.ol li{counter-increment:o;display:grid;grid-template-columns:4.4rem minmax(0,1fr);column-gap:8px;padding:22px 0;border-bottom:1px solid var(--rule)}
.ol li::before{content:counter(o,decimal-leading-zero);grid-row:1/3;font-size:2.1rem;font-weight:700;letter-spacing:-.03em;color:var(--accent-icon);line-height:1}
.ol li>strong{grid-column:2;display:block;color:var(--navy);font-size:1.12rem;line-height:1.35}
.ol li>span{grid-column:2;display:block;color:var(--muted);line-height:1.65}
.ol li>strong+span{margin-top:3px}
.ol li:not(:has(>strong))>span{color:var(--ink);grid-row:1}
.ol li>span strong{color:var(--navy)}
.csec--facts .bl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,4vw,56px);border-top:0}
.csec--facts .bl li{border-top:1px solid var(--rule-strong);border-bottom:0;padding:20px 0 26px 28px}
.csec--facts .bl--led li{display:block;padding-left:0}
.csec--facts .bl--led strong{display:block;font-size:1.18rem;margin-bottom:.4em}
@media (max-width:760px){.csec--facts .bl{grid-template-columns:1fr}}
.sec--navy .bl,.sec--navy .ol{border-top-color:rgba(255,255,255,.35)}
.sec--navy .bl li,.sec--navy .ol li{border-bottom-color:rgba(255,255,255,.2);color:#fff}
.sec--navy .bl--led strong,.sec--navy .ol li>strong,.sec--navy .ol li>span strong{color:#fff}
.sec--navy .bl--led span,.sec--navy .ol li>span{color:rgba(255,255,255,.88)}

/* pull statement */
.pull{padding:4px 0 4px 28px;border-left:3px solid var(--accent-icon)}
.prose>.pull{margin-block:2em}
.prose .pull p{font-size:clamp(1.3rem,2vw,1.7rem);line-height:1.38;color:var(--navy);font-weight:600;letter-spacing:-.015em}
.sec--navy .prose .pull p{color:#fff}

/* stat rows */
.stats{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));margin:0;border-top:2px solid var(--navy)}
.stats--2{--n:2}.stats--3{--n:3}
.stats__item{display:flex;flex-direction:column;gap:8px;padding:20px 20px 24px 0;border-bottom:1px solid var(--rule)}
.stats__item+.stats__item{padding-left:20px;border-left:1px solid var(--rule)}
.stats dt{font-size:.88rem;color:var(--muted);line-height:1.4;order:2}
.stats dd{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;order:1}
.stats dd b{font-size:clamp(2.1rem,3.8vw,3.2rem);font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--navy);font-variant-numeric:tabular-nums}
.stats dd small{font-size:.95rem;color:var(--accent-text);font-weight:600}
.sec--navy .stats{border-top-color:#fff}
.sec--navy .stats dd b{color:#fff}.sec--navy .stats dt{color:rgba(255,255,255,.85)}.sec--navy .stats dd small{color:#FFE3D0}
@media (max-width:640px){.stats{grid-template-columns:1fr}.stats__item+.stats__item{padding-left:0;border-left:0}}

/* figures + tables */
.figure{margin:2.2rem 0 0}
.figure img{display:block;width:100%;height:auto;border-radius:2px}
.table-wrap{overflow-x:auto;border-top:2px solid var(--navy);border-bottom:1px solid var(--rule-strong);-webkit-overflow-scrolling:touch;background:transparent}
.table-wrap:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.prose table{width:100%;min-width:0;font-size:.97rem}
.table-wrap--4 table,.table-wrap--5 table{min-width:640px}
.table-wrap--5 td,.table-wrap--4 td{white-space:nowrap}
.prose th,.prose td{padding:15px 18px 15px 0;text-align:left;vertical-align:top;line-height:1.5}
.prose thead th{font:600 .84rem var(--font-body);color:var(--muted);letter-spacing:0;text-transform:none;white-space:nowrap}
.prose tbody th{font:600 1rem var(--font-body);color:var(--navy);white-space:normal;letter-spacing:0}
.prose td{color:var(--ink);font-variant-numeric:tabular-nums}
.prose tbody tr{transition:background-color .2s}
.prose tbody tr:hover :is(th,td){background:var(--sky)}
.sec--navy .table-wrap{border-top-color:#fff;border-bottom-color:rgba(255,255,255,.4)}
.sec--navy .prose thead th{color:rgba(255,255,255,.8)}
.sec--navy .prose tbody th{color:#fff}.sec--navy .prose td{color:rgba(255,255,255,.94)}
.sec--navy .prose tbody tr:hover :is(th,td){background:rgba(255,255,255,.07)}
.sec--navy .figure img{background:#fff;padding:12px}

/* full-width photo band */
.bleed{position:relative;height:clamp(240px,36vw,520px);overflow:hidden;background:var(--navy)}
.bleed__img{position:absolute;inset:-9% 0;will-change:transform}
.bleed__img img{display:block;width:100%;height:100%;object-fit:cover}
.bleed__cap{position:absolute;left:0;bottom:22px;margin:0;color:#fff;font-weight:500;font-size:1.05rem;text-shadow:0 1px 14px rgba(0,16,74,.55)}

/* battery rebate estimator */
.est{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border:1px solid var(--rule-strong);background:#fff;margin-top:.4rem}
.est__ctrl{padding:clamp(22px,3vw,34px);display:grid;gap:22px;align-content:start;border-right:1px solid var(--rule)}
.est__field label{display:block;font-size:.95rem;font-weight:600;color:var(--navy);margin-bottom:2px}
.est__field output{display:block;font-size:clamp(2rem,3.4vw,2.7rem);font-weight:700;letter-spacing:-.03em;color:var(--navy);line-height:1.15}
.est input[type=range]{width:100%;margin:10px 0 0;accent-color:var(--accent);height:28px;cursor:pointer}
.est__out{margin:0;padding:clamp(22px,3vw,34px);background:var(--paper);display:grid;align-content:start}
.est__out>div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:15px 0;border-bottom:1px solid var(--rule-strong)}
.est__out dt{font-size:.95rem;color:var(--muted)}
.est__out dd{margin:0;font-size:1.35rem;font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums;text-align:right}
.est__out .est__total{border-bottom:0;padding-top:20px}
.est__total dt{font-weight:700;color:var(--navy)}
.est__total dd{font-size:clamp(1.7rem,2.6vw,2.2rem);color:var(--accent-text)}
.est .fineprint{grid-column:1/-1;margin:0;padding:14px clamp(22px,3vw,34px);border-top:1px solid var(--rule);max-width:none}
@media (max-width:760px){.est{grid-template-columns:1fr}.est__ctrl{border-right:0;border-bottom:1px solid var(--rule)}}

/* home extras */
.strip__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.strip__item{gap:16px;font-weight:500;font-size:.93rem;line-height:1.45;padding:28px clamp(14px,2vw,28px);align-items:center}
.strip__item .i{width:34px;height:34px;flex:none}
@media (max-width:1000px){.strip__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.strip__item:nth-child(3){border-left:0}.strip__item:nth-child(n+3){border-top:1px solid var(--rule)}}
@media (max-width:600px){.strip__grid{grid-template-columns:1fr}.strip__item+.strip__item{border-left:0;border-top:1px solid var(--rule)}.strip__item{padding:20px 0}}
.tile__n{display:block;font-size:.95rem;font-weight:700;letter-spacing:.05em;color:var(--accent-text);margin-bottom:.5em;font-variant-numeric:tabular-nums}
.tiles-sec__after{margin:44px 0 0;font-size:1.1rem;color:var(--ink);max-width:44em}
.tiles-sec__after a{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px}
.tiles3 .tile__media img{transition:transform 1.1s var(--ease)}
.tiles3 .tile:hover .tile__media img{transform:scale(1.04)}

/* contact */
.contact__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,6vw,92px);align-items:start}
.contact__form h2{font-size:clamp(1.7rem,2.6vw,2.2rem);margin-bottom:.8em}
.contact__aside{position:sticky;top:calc(var(--header-h) + 28px)}
.contact__photo{margin-bottom:30px}
.contact__photo img{display:block;width:100%;height:auto;border-radius:2px}
.contact__aside h2{font-size:1.5rem;margin-bottom:.7em}
.contact__aside>p{color:var(--ink);margin:1.1em 0 0}
.contact__aside a{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px}
.choices--wrap{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.choice input[type=checkbox]+span::before{content:"";flex:none;width:18px;height:18px;border:1.5px solid var(--navy);border-radius:3px;background:#fff center/12px no-repeat}
.choice input[type=checkbox]:checked+span::before{background-color:var(--sun);border-color:var(--sun);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300104A' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.field .hint{display:block;margin-top:6px;font-size:.85rem;color:var(--muted)}
.field input[type=file]{padding:12px;background:#fff;border:1px dashed var(--rule-strong);width:100%;font:inherit}
.ways{margin:0;border-top:1px solid var(--rule-strong)}
.ways>div{display:grid;grid-template-columns:26px 11rem minmax(0,1fr);gap:14px;align-items:center;padding:17px 0;border-bottom:1px solid var(--rule)}
.ways .i{width:22px;height:22px;color:var(--accent-icon)}
.ways dt{font-weight:600;color:var(--navy)}
.ways dd{margin:0;color:var(--ink)}
@media (max-width:640px){.ways>div{grid-template-columns:26px 1fr}.ways dd{grid-column:2}}
@media (max-width:980px){.contact__grid{grid-template-columns:1fr}.contact__aside{position:static}}

/* footer: all 12 pages, ABN, phone, email */
.site-footer a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* closing call to action: larger, ruled */
.cta3{padding-block:clamp(72px,9vw,140px);background:#fff}
.cta3 h2{font-size:clamp(2rem,4.6vw,3.9rem);max-width:15em;line-height:1.06}
.cta3 p{max-width:34em}

/* image reveal for the new figure types */
.js .csec__media.mask:not(.is-in) img,.js .contact__photo.mask:not(.is-in) img{transform:scale(1.14)}
@media (prefers-reduced-motion:reduce){.js .ihero__media{animation:none}.bleed__img{inset:0}}
.field input[type=file]::file-selector-button{margin-right:14px;padding:9px 16px;border:0;border-radius:3px;background:var(--navy);color:#fff;font:600 .92rem var(--font-body);cursor:pointer;transition:background-color .2s}
.field input[type=file]::file-selector-button:hover{background:var(--accent)}
.js .mask{overflow:hidden}
.legal-nav a{display:inline-block;padding:7px 0}
@media (min-width:1181px){.site-header .container{gap:clamp(16px,2vw,32px)}}
/* responsive hardening */
.csec__text,.csec__media,.csec__body,.hero__copy,.ihero__copy,.contact__form,.contact__aside{min-width:0}
.stats dd b{overflow-wrap:anywhere}
@media (max-width:520px){
  .btn{white-space:normal;text-align:left;line-height:1.25;padding-block:12px;min-height:52px}
  .btn-row{gap:14px 24px}
  .hero__copy .btn-row .btn--ghost,.ihero__copy .btn-row .btn--ghost{min-height:44px}
}
.est__out dd{white-space:nowrap}
.est__total dd{font-size:clamp(1.5rem,2.2vw,2rem)}

/* ==========================================================================
   23 · THEME v5: bolder, more dimensional pass
   Dark hero with solar-cell grid and an angled edge, timeline steps, navy stat cards,
   striped spec-sheet tables, fact cards, boxed FAQ, dark closing banner.
   ========================================================================== */
.btn--sun{box-shadow:0 12px 26px -14px rgba(238,111,35,.75);transition:background-color .25s,transform .25s var(--ease),box-shadow .25s}
.btn--sun:hover{transform:translateY(-2px);box-shadow:0 18px 30px -14px rgba(238,111,35,.8)}

/* inner hero: navy, cell grid, angled bottom edge (echoes the tilted panels in the logo) */
.ihero{background:linear-gradient(115deg,#00104A 0%,#022a63 55%,#033C6E 100%);color:#fff;border-bottom:0;clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - 34px));position:relative;z-index:1}
.ihero::before{content:"";position:absolute;inset:0;z-index:0;background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:linear-gradient(100deg,#000 0,rgba(0,0,0,.2) 62%,transparent 80%);mask-image:linear-gradient(100deg,#000 0,rgba(0,0,0,.2) 62%,transparent 80%)}
.ihero__in{position:relative;z-index:2}
.ihero h1{color:#fff;font-size:clamp(2.2rem,4.1vw,3.7rem)}
.ihero .lead{color:rgba(255,255,255,.93)}
.ihero__copy>p:not(.lead){color:rgba(255,255,255,.8)}
.ihero .eyebrow{color:#FFC9A3}
.ihero .crumbs li,.ihero .crumbs li[aria-current]{color:rgba(255,255,255,.7)}
.ihero .crumbs a{color:#fff}
.ihero .crumbs li+li::before{color:rgba(255,255,255,.4);opacity:1}
.ihero a:not(.btn){color:#FFE3D0;text-decoration-color:rgba(255,217,201,.6)}
.ihero .stamp{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28);color:#fff}
.ihero .btn--ghost{color:#fff;background-image:linear-gradient(#FFC9A3,#FFC9A3)}
.ihero .btn--ghost .i{color:#FFC9A3}
.ihero__media{z-index:1;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%);mask-image:linear-gradient(90deg,transparent 0,#000 22%)}
.ihero__media img{filter:saturate(1.05)}
.ihero--plain .ihero__in{min-height:0}
@media (max-width:980px){
  .ihero{clip-path:none}
  .ihero::before{-webkit-mask-image:linear-gradient(180deg,#000,transparent 70%);mask-image:linear-gradient(180deg,#000,transparent 70%)}
  .ihero__media{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 24%);mask-image:linear-gradient(180deg,transparent 0,#000 24%)}
}
.toc{margin-top:0}

/* timeline steps */
.ol{border-top:0;position:relative}
.ol li{grid-template-columns:3.6rem minmax(0,1fr);padding:0 0 30px;border-bottom:0;position:relative}
.ol li::before{width:2.7rem;height:2.7rem;border-radius:50%;background:var(--accent);color:#00104A;display:grid;place-items:center;font-size:.95rem;font-weight:700;letter-spacing:0;z-index:1;box-shadow:0 8px 18px -8px rgba(238,111,35,.7)}
.ol li:not(:last-child)::after{content:"";position:absolute;left:1.35rem;top:2.7rem;bottom:2px;width:2px;background:linear-gradient(var(--accent),rgba(238,111,35,.18))}
.ol li>strong{padding-top:.42rem}
.ol li:not(:has(>strong))>span{padding-top:.42rem}
.ol li:last-child{padding-bottom:0}
.sec--navy .ol li::after{background:linear-gradient(#FFC9A3,rgba(255,201,163,.2))}

/* lists */
.bl{border-top:0}
.bl li{border-bottom:1px solid var(--rule);transition:box-shadow .25s,background-color .25s}
.bl--led li{padding-block:17px}
.bl--led li:hover{box-shadow:inset 3px 0 0 var(--accent)}
.bl--led li:hover strong{padding-left:14px}
.bl--led strong{transition:padding .25s var(--ease),color .2s}
.bl li:first-child{border-top:1px solid var(--rule-strong)}
.csec--facts .bl{gap:16px}
.csec--facts .bl li,.csec--facts .bl--led li{background:#fff;border:1px solid var(--rule);border-top:4px solid var(--accent-icon);border-radius:6px;padding:24px 24px 26px;box-shadow:0 18px 36px -28px rgba(0,16,74,.35);transition:transform .3s var(--ease),box-shadow .3s}
.csec--facts .bl li::before{display:none}
.csec--facts .bl li:hover{transform:translateY(-4px);box-shadow:0 26px 40px -26px rgba(0,16,74,.42)}
.csec--facts .bl--led li:hover strong{padding-left:0}
.csec--facts.sec--white .bl li,.sec--white.csec--facts .bl li{background:var(--sky)}

/* pull statement */
.pull{background:var(--sky);padding:26px 30px;border-left:4px solid var(--accent-icon);border-radius:0 6px 6px 0}
.sec--navy .pull{background:rgba(255,255,255,.08)}

/* stat cards */
.stats{border-top:0;gap:14px}
.stats__item,.stats__item+.stats__item{background:var(--navy);padding:24px 24px 26px;border:0;border-top:4px solid var(--accent-icon);border-radius:6px}
.stats dd b{color:#fff}
.stats dd small{color:#FFC9A3}
.stats dt{color:rgba(255,255,255,.82)}
.sec--navy .stats__item{background:rgba(255,255,255,.1)}

/* spec-sheet tables */
.table-wrap{border:1px solid var(--rule-strong);border-radius:8px;box-shadow:0 20px 40px -32px rgba(0,16,74,.4);background:#fff}
.prose thead th{background:var(--navy);color:#fff;padding:14px 18px;font-weight:600;font-size:.86rem}
.prose th,.prose td{padding:14px 18px}
.prose tbody tr:nth-child(even) :is(th,td){background:var(--sky)}
.prose tbody tr:hover :is(th,td){background:#FFEDE4}
.prose tbody tr:last-child :is(th,td){border-bottom:0}
.prose tbody th{color:var(--navy)}
.sec--navy .table-wrap{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.25);box-shadow:none}
.sec--navy .prose thead th{background:rgba(255,255,255,.16);color:#fff}
.sec--navy .prose tbody tr:nth-child(even) :is(th,td){background:rgba(255,255,255,.05)}
.sec--navy .prose tbody tr:hover :is(th,td){background:rgba(255,255,255,.12)}

/* media */
.csec__media img,.figure img,.contact__photo img{border-radius:8px;box-shadow:0 30px 60px -36px rgba(0,16,74,.55)}
.sec--navy .figure img{border-radius:8px}
.bleed::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,16,74,.25),transparent 30%,transparent 70%,rgba(0,16,74,.3));pointer-events:none}

/* FAQ in boxed rows */
.faq{gap:10px}
.faq details,.faq details:last-child{border:1px solid var(--rule-strong);border-radius:8px;background:#fff;padding:0 24px;transition:border-color .25s,box-shadow .25s}
.faq details[open]{border-color:var(--accent);box-shadow:0 22px 36px -26px rgba(0,16,74,.4)}
.faq summary{padding:20px 0}
.faq .faq__a{padding:0 0 24px}
.sec--paper .faq details{background:#fff}

/* estimator + form panel */
.est{border-radius:10px;overflow:hidden;box-shadow:0 30px 60px -38px rgba(0,16,74,.5)}
.form-panel{border-radius:10px;box-shadow:0 30px 60px -40px rgba(0,16,74,.4)}
.ways{border-top:0}
.ways>div{background:#fff;border:1px solid var(--rule);border-radius:6px;margin-bottom:10px;padding:16px 18px}

/* home: strip + tiles */
.strip{background:#fff}
.strip__item .i{box-sizing:border-box;width:48px;height:48px;padding:11px;border-radius:50%;background:var(--sun-soft);color:var(--accent-text)}
.tiles3 .card{background:#fff;border:1px solid var(--rule);border-radius:8px;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s}
.tiles3 .card:hover{transform:translateY(-6px);box-shadow:0 34px 50px -34px rgba(0,16,74,.5)}
.tiles3 .card__body{padding:24px 24px 28px}
.tiles3 .tile__media{border-radius:0}

/* closing call to action: dark with a rising sun */
.cta3{background:linear-gradient(120deg,#00104A 0%,#033C6E 100%);color:#fff;border:0;position:relative;overflow:hidden;isolation:isolate}
.cta3::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:linear-gradient(90deg,#000 0,transparent 75%);mask-image:linear-gradient(90deg,#000 0,transparent 75%)}
.cta3::after{content:"";position:absolute;z-index:-1;right:-8vw;bottom:-22vw;width:min(46vw,640px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 40%,#FF9248,#F57A2C 70%);opacity:.95}
.cta3 h2{color:#fff}
.cta3 p{color:rgba(255,255,255,.92)}
.cta3 .btn--ghost{color:#fff;background-image:linear-gradient(#FFC9A3,#FFC9A3)}
.cta3 .btn--ghost .i{color:#FFC9A3}
.cta3 .btn--sun{background:#fff;color:var(--navy);box-shadow:0 14px 30px -14px rgba(0,0,0,.6)}
.cta3 .btn--sun:hover{background:var(--sun-soft);color:var(--navy)}
@media (max-width:700px){.cta3::after{width:80vw;right:-30vw;bottom:-44vw;opacity:.8}}

/* TOC and hero spacing */
.toc{box-shadow:0 10px 24px -20px rgba(0,16,74,.5)}
/* v5 fixes */
.prose>.bl,.prose>.ol,.prose>.table-wrap,.prose>.stats,.prose>.est{margin-top:1.3em}
.prose>.stats:first-child,.prose>.bl:first-child,.prose>.ol:first-child{margin-top:0}
.cta3 p a{color:#FFE3D0;text-decoration:underline;text-underline-offset:3px}
.cta3 p a:hover{color:#fff}
.cta3 .container[data-reveal]{opacity:1;transform:none}
/* v5 fixes 2: numbers never break mid-figure; wide tables wrap instead of clipping */
.stats dd b{overflow-wrap:normal;white-space:nowrap;font-size:clamp(1.7rem,2.7vw,2.7rem)}
.stats--2 dd b{font-size:clamp(1.9rem,3.2vw,3rem)}
.stats__item,.stats__item+.stats__item{padding:22px 20px 24px}
.table-wrap--4 td,.table-wrap--5 td{white-space:normal}
.table-wrap--4 table,.table-wrap--5 table{min-width:0}
.prose thead th{white-space:normal;line-height:1.3;vertical-align:bottom}
.table-wrap--5 th,.table-wrap--5 td,.table-wrap--4 th,.table-wrap--4 td{padding:13px 12px}
.table-wrap--5 tbody th{white-space:nowrap}
@media (max-width:640px){.table-wrap--4 table,.table-wrap--5 table{min-width:560px}}

/* ==========================================================================
   25 · Typeface: Outfit (variable, round geometric; echoes the logo lettering)
   ========================================================================== */
body{font-weight:400;letter-spacing:0}
h1,h2,h3,h4,.stat b,.sunday__time{letter-spacing:-.02em;font-weight:600}
h1{font-weight:700;letter-spacing:-.025em}
.ihero h1,.hero h1,.cta3 h2{letter-spacing:-.028em}
.eyebrow{font-weight:500;letter-spacing:.01em}
.btn{font-weight:600}
.nav__link{font-weight:500}
.faq summary{font-weight:500}
.csec__num{font-weight:600}
.prose p{font-size:1.1rem}
.lead{font-weight:300}
.stats dd b{font-weight:600}
/* ==========================================================================
   26 · Logo: bigger, with a quiet sun-rise on load and a lift on hover
   ========================================================================== */
.brand{display:block;flex:none;line-height:0;position:relative}
.brand img{width:clamp(168px,13.5vw,200px);height:auto;transition:transform .45s var(--ease),filter .45s}
.brand:hover img,.brand:focus-visible img{transform:translateY(-2px) scale(1.035);filter:drop-shadow(0 10px 14px rgba(245,122,44,.28))}
.js .brand img{animation:logoRise 1s var(--ease) .1s both}
@keyframes logoRise{from{clip-path:inset(100% 0 0 0);transform:translateY(10px)}to{clip-path:inset(0 0 0 0);transform:none}}
@media (max-width:1180px){.brand img{width:190px}}
@media (max-width:420px){.brand img{width:172px}}
@media (prefers-reduced-motion:reduce){.js .brand img{animation:none}.brand:hover img{transform:none;filter:none}}
.hero h1{font-size:clamp(2.2rem,3.9vw,3.5rem);line-height:1.06;max-width:11em}
.hero__copy{max-width:min(600px,52%)}
@media (max-width:980px){.hero__copy{max-width:none}}
.hero h1{font-size:clamp(2.1rem,3.5vw,3.2rem);max-width:10.8em}

/* ==========================================================================
   24 · THEME v8: floating capsule header, mega menus, light footer
   Header: a floating capsule (glass over the navy page heroes, solid white once
   you scroll). Menus: wide panels with linked cards plus a prompt card.
   Mobile: full-screen light menu with numbered rows. Footer: light, with a
   contact strip, four link columns and a large wordmark.
   ========================================================================== */
:root{--header-h:96px}
@media (max-width:1180px){:root{--header-h:78px}}

/* ---- the strip: transparent, with a soft white fade once stuck ---- */
.site-header{position:sticky;top:0;z-index:100;padding:14px 0;background:transparent;border:0;box-shadow:none;pointer-events:none}
.site-header::before{content:"";position:absolute;inset:0 0 -14px;z-index:-1;background:linear-gradient(180deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.95) 58%,rgba(255,255,255,0) 100%);opacity:0;transition:opacity .35s;pointer-events:none}
.site-header.is-stuck::before{opacity:1}
.site-header--over{margin-bottom:calc(var(--header-h) * -1)}
.read-bar{position:absolute;left:0;top:0;bottom:auto;height:3px;width:100%;background:var(--accent);transform:scaleX(var(--read,0));transform-origin:0 50%;pointer-events:none}

/* ---- the capsule ---- */
.site-header .container.hd{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:flex-start;gap:clamp(12px,1.6vw,28px);width:min(100% - 2 * var(--gutter),1320px);max-width:none;min-height:68px;margin-inline:auto;padding:0 10px 0 clamp(20px,2.2vw,32px);pointer-events:auto;border-radius:999px}
.hd::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:rgba(255,255,255,.97);border:1px solid rgba(4,45,90,.08);box-shadow:0 20px 44px -28px rgba(0,16,74,.5),0 2px 8px rgba(0,16,74,.05);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);transition:background-color .35s,border-color .35s,box-shadow .35s}
.brand{display:block;flex:none;line-height:0}
.brand img{width:clamp(168px,13.5vw,200px);height:auto;background:none}
.brand .logo--white{display:none}
.nav__link::after{content:"";position:absolute;left:50%;right:auto;bottom:3px;width:5px;height:5px;border-radius:50%;background:var(--accent-icon);transform:translateX(-50%) scale(0);transform-origin:50% 50%;transition:transform .4s var(--ease)}
.nav__link:hover::after,.nav__item:focus-within>.nav__link::after,.nav__item:hover>.nav__link::after,.nav .nav__link[aria-current="page"]::after,.nav .nav__link[data-current="true"]::after{height:5px;background:var(--accent-icon);transform:translateX(-50%) scale(1)}

/* ---- over the navy hero: glass capsule, white logo and links ---- */
.site-header--over:not(.is-stuck) .hd::before{background:rgba(6,32,84,.34);border-color:rgba(255,255,255,.26);box-shadow:0 20px 44px -30px rgba(0,0,0,.6)}
.site-header--over:not(.is-stuck) .brand .logo--colour{display:none}
.site-header--over:not(.is-stuck) .brand .logo--white{display:block}
html.nav-open .site-header--over .hd::before{background:#fff;border-color:rgba(4,45,90,.08)}
html.nav-open .site-header--over .brand .logo--colour{display:block}
html.nav-open .site-header--over .brand .logo--white{display:none}
.ihero{min-height:0}
.ihero__in{padding-top:calc(var(--header-h) + clamp(28px,4vw,56px))}
.ihero--plain .ihero__in{padding-top:calc(var(--header-h) + clamp(36px,5vw,72px))}
.ihero__media::after{content:"";position:absolute;inset:0 0 auto 0;height:200px;background:linear-gradient(180deg,rgba(0,16,74,.7),rgba(0,16,74,0));pointer-events:none}

/* ---- CTA pill ---- */
.header-cta{display:flex;align-items:center;gap:10px;margin-left:0}
.hd .hd__cta{overflow:hidden;isolation:isolate;min-height:52px;padding:4px 4px 4px 24px;gap:14px;background:var(--blue-deep);color:#fff;font-weight:600;transition:color .35s}
.hd .hd__cta::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--accent);transform:translateY(102%);transition:transform .55s var(--ease)}
.hd .hd__cta:hover::before{transform:none}
.hd .hd__cta .i-arrow{width:44px;height:44px;padding:13px;background:var(--accent);color:#00104A}
.hd .hd__cta:hover{background:var(--blue-deep);color:#fff}
.hd .hd__cta:hover .i-arrow{background:#fff;color:var(--blue-deep)}
.site-header--over:not(.is-stuck) .hd__cta{background:#fff;color:var(--blue-deep)}
.site-header--over:not(.is-stuck) .hd__cta:hover{background:#fff;color:#fff}
.site-header .container.hd{transition:min-height .35s var(--ease)}
.site-header.is-stuck .container.hd{min-height:62px}

/* ---- desktop menu ---- */
@media (min-width:1181px){
  .nav{margin:0 auto}
  .nav__list{gap:2px}
  .nav__item{position:static}
  .nav__link{padding:11px 15px 13px;border-radius:999px;font:600 .94rem var(--font-body);color:var(--navy);transition:background-color .25s,color .25s}
  html:not(.has-pill) .nav__link:hover,html:not(.has-pill) .nav__item:hover>.nav__link{background:rgba(4,45,90,.07)}
  .nav__pill{position:absolute;left:0;top:0;z-index:0;width:var(--w,0);height:var(--h,0);border-radius:999px;background:rgba(4,45,90,.08);transform:translate(var(--x,0),var(--y,0));opacity:0;pointer-events:none;transition:transform .55s var(--ease),width .55s var(--ease),height .55s var(--ease),opacity .3s,background-color .35s}
  .nav__pill.is-on{opacity:1}
  .nav__link{z-index:1}
  .nav__link[aria-current="page"],.nav__link[data-current="true"]{color:var(--accent-text)}
  .nav__link .i{width:.78em;height:.78em;opacity:.65}
  .nav__link:focus-visible{outline-offset:-2px}

  .site-header--over:not(.is-stuck) .nav__link{color:#fff}
  .site-header--over:not(.is-stuck) .nav__pill{background:rgba(255,255,255,.18)}
  html:not(.has-pill) .site-header--over:not(.is-stuck) .nav__link:hover{background:rgba(255,255,255,.16)}
  .site-header--over:not(.is-stuck) .nav__link[aria-current="page"],.site-header--over:not(.is-stuck) .nav__link[data-current="true"]{color:#fff}
  .site-header--over:not(.is-stuck) .nav__link:focus-visible{outline-color:#fff}

  /* mega panel */
  .nav__drop{position:absolute;left:50%;right:auto;top:calc(100% + 12px);width:min(900px,100%);min-width:0;margin:0;padding:12px;display:none;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:12px;border-radius:30px;background:#fff;border:1px solid rgba(4,45,90,.08);box-shadow:0 50px 90px -40px rgba(0,16,74,.6),0 4px 14px rgba(0,16,74,.06);opacity:1;visibility:visible;transform:translateX(-50%);transform-origin:50% 0}
  .nav__item:hover>.nav__drop,.nav__item:focus-within>.nav__drop,.nav__item.is-open>.nav__drop{display:grid;opacity:1;visibility:visible;transform:translateX(-50%);animation:megaIn .45s var(--ease) backwards}
  @keyframes megaIn{from{opacity:0;transform:translate(-50%,14px) scale(.985)}}
  .nav__drop::before{content:"";position:absolute;inset:-34px 0 auto 0;height:34px}
  .nav__cards{list-style:none;margin:0;padding:0;display:grid;gap:8px;align-content:stretch}
  .nav__cards li{display:flex}
  .nav__cards a{position:relative;isolation:isolate;overflow:hidden;flex:1;display:grid;grid-template-columns:34px minmax(0,1fr) 44px;gap:12px;align-items:center;padding:20px 16px 20px 22px;border-radius:22px;background:var(--sky-50);color:var(--navy);text-decoration:none;transition:color .35s}
  .nav__cards a::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--blue-deep);transform:scaleX(0);transform-origin:0 50%;transition:transform .65s var(--ease)}
  .nav__cards a:hover::before,.nav__cards a:focus-visible::before{transform:scaleX(1)}
  .nav__cards a:hover,.nav__cards a:focus-visible{color:#fff;outline-offset:-3px}
  .nav__cards a[aria-current="page"]{background:var(--sun-soft)}
  .nav__n{font:500 .88rem/1 var(--font-body);color:var(--accent-text);transition:color .35s}
  .nav__cards a:hover .nav__n{color:#FFC9A3}
  .nav__t{display:block;transition:transform .55s var(--ease)}
  .nav__cards a:hover .nav__t{transform:translateX(6px)}
  .nav__cards strong{display:block;font:600 1.15rem/1.2 var(--font-body);letter-spacing:-.01em;color:inherit}
  .nav__cards small{display:block;margin-top:4px;font-size:.88rem;line-height:1.4;color:var(--muted);transition:color .35s}
  .nav__cards a:hover small{color:rgba(255,255,255,.8)}
  .nav__cards .i-go{width:44px;height:44px;padding:13px;border-radius:50%;background:#fff;color:var(--navy);opacity:0;transform:translateX(-12px) scale(.8);transition:opacity .3s,transform .55s var(--ease),background-color .3s,color .3s}
  .nav__cards a:hover .i-go,.nav__cards a:focus-visible .i-go{opacity:1;transform:none;background:var(--accent);color:#00104A}
  .nav__feature{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:0;min-height:300px;padding:24px 24px 22px;border-radius:22px;background:#00104A;color:#fff;overflow:hidden;isolation:isolate}
  .nav__feature .nav__img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;background:#00104A;transition:transform 1.2s var(--ease)}
  .nav__feature:hover .nav__img{transform:scale(1.05)}
  .nav__feature::before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(180deg,rgba(0,16,74,.12) 0%,rgba(0,16,74,.55) 42%,rgba(0,16,74,.94) 100%)}
  .nav__tag{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;margin-bottom:14px;border-radius:999px;background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font:500 .8rem/1.2 var(--font-body);color:#fff}
  .nav__tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--sun)}
  .nav__feature strong{display:block;margin-bottom:8px;font:600 1.4rem/1.15 var(--font-body);letter-spacing:-.015em;color:#fff}
  .nav__feature p{margin:0 0 18px;max-width:21em;font-size:.92rem;line-height:1.5;color:rgba(255,255,255,.88)}
  .nav__book{display:inline-flex;white-space:nowrap;align-items:center;gap:12px;padding:5px 5px 5px 18px;border-radius:999px;background:#fff;color:var(--navy);font:600 .9rem/1 var(--font-body);text-decoration:none;transition:background-color .3s,color .3s}
  .nav__book .i-arrow{width:34px;height:34px;padding:9px;border-radius:50%;background:var(--accent);color:#00104A;transition:transform .45s var(--ease)}
  .nav__book:hover{background:var(--sun);color:var(--navy)}
  .nav__book:hover .i-arrow{transform:rotate(-45deg)}
  .nav__contact{display:none}
}

/* ---- mobile and tablet: capsule bar + full-screen light menu ---- */
@media (max-width:1180px){
  .site-header{padding:10px 0}
  .site-header .container.hd{min-height:58px;padding:0 7px 0 20px;justify-content:space-between}
  .hd::before{-webkit-backdrop-filter:none;backdrop-filter:none}
  .site-header--over:not(.is-stuck) .hd::before{background:rgba(6,32,84,.5)}
  .brand img{width:164px}
  .brand,.header-cta{position:relative;z-index:95}
  .hd .hd__cta{display:none}
  .nav-toggle{display:inline-flex;width:44px;height:44px;border:0;border-radius:50%;background:var(--blue-deep);color:#fff;transition:background-color .25s,transform .4s var(--ease)}
  .nav-toggle:hover{background:var(--accent)}
  .nav-open .nav-toggle{background:var(--accent);transform:rotate(90deg)}
  .site-header--over:not(.is-stuck) .nav-toggle{background:#fff;color:var(--blue-deep)}
  html.nav-open .site-header--over .nav-toggle{background:var(--accent);color:#00104A}
  .nav-open .site-header,.nav-open .site-header::before{background:transparent;opacity:1}
  .nav-open .site-header::before{opacity:0}

  .nav{position:fixed;inset:0;z-index:90;overflow-y:auto;overscroll-behavior:contain;padding:calc(var(--header-h) + 12px) var(--gutter) 44px;background:radial-gradient(120% 60% at 100% 0%,rgba(245,122,44,.12),transparent 60%),linear-gradient(180deg,#FFF8F3 0%,#F3FAFF 100%);color:var(--navy);margin:0;opacity:0;visibility:hidden;transform:translateY(-12px);transition:opacity .3s,transform .5s var(--ease),visibility .3s}
  .nav-open .nav{opacity:1;visibility:visible;transform:none}
  .nav::before{display:none}
  .nav__list{counter-reset:n;flex-direction:column;align-items:stretch;gap:0;padding:0}
  .nav__item{counter-increment:n;border-bottom:1px solid var(--rule)}
  .nav__link{width:100%;justify-content:flex-start;gap:14px;padding:17px 0;font:600 clamp(1.5rem,6.2vw,1.9rem)/1.1 var(--font-body);letter-spacing:-.02em;color:var(--navy);background:none;border-radius:0}
  .nav__link::before{content:counter(n,decimal-leading-zero);width:28px;flex:none;text-align:left;font:500 .82rem/1 var(--font-body);letter-spacing:0;color:var(--accent-text)}
  .nav__link::after{display:none}
  .nav__link .i{margin-left:auto;width:36px;height:36px;padding:10px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px var(--rule);color:var(--navy);opacity:1;transition:transform .4s var(--ease),background-color .25s,color .25s}
  .nav__item.is-open>.nav__link .i{background:var(--navy);color:#fff;transform:rotate(180deg)}
  .nav__link[aria-current="page"],.nav__link[data-current="true"]{color:var(--accent-text)}
  .nav__drop{position:static;display:none;width:auto;margin:0;padding:0 0 18px;border:0;border-radius:0;background:none;box-shadow:none;opacity:1;visibility:visible;transform:none;min-width:0}
  .nav__drop::before{display:none}
  .nav__item.is-open>.nav__drop{display:block}
  .nav__cards{list-style:none;margin:0;padding:0 0 0 42px;display:grid;gap:8px}
  .nav__cards a{display:grid;grid-template-columns:30px minmax(0,1fr);gap:0 8px;align-items:start;padding:15px 16px;border-radius:18px;background:#fff;border:1px solid var(--rule);color:var(--navy);text-decoration:none}
  .nav__cards a[aria-current="page"]{background:var(--sun-soft);border-color:transparent}
  .nav__n{padding-top:.28em;font:500 .8rem/1 var(--font-body);color:var(--accent-text)}
  .nav__cards strong{display:block;font:600 1.02rem/1.2 var(--font-body);color:var(--navy)}
  .nav__cards small{display:block;font-size:.84rem;line-height:1.35;color:var(--muted)}
  .nav__cards .i-go,.nav__feature{display:none}
  .nav__drop{animation:none}
  .nav__mobile-cta{display:flex;flex-direction:column;align-items:stretch;gap:22px;margin-top:30px}
  .nav__mobile-cta .btn{justify-content:space-between;width:100%}
  .nav__contact{list-style:none;margin:0;padding:20px 0 0;border-top:1px solid var(--rule);display:grid;gap:6px;font-size:.98rem}
  .nav__contact small{flex:none;width:50px;font-size:.78rem;font-weight:500;color:var(--muted)}
  .nav__contact a{display:inline-flex;align-items:center;gap:12px;min-height:40px;color:var(--navy);text-decoration:none;font-weight:500}
  .nav__contact .i{width:20px;height:20px;color:var(--accent-icon)}
  .nav__contact .add{background:var(--sun-soft);color:var(--accent-text);border-color:rgba(188,82,16,.5)}
}
@media (max-width:420px){.brand img{width:148px}}
@media (min-width:1181px){.nav__mobile-cta{display:none}}

/* ---- footer ---- */
.site-footer{position:relative;isolation:isolate;overflow:hidden;background:var(--sky-50);color:var(--ink);border-top:1px solid var(--rule);padding-top:clamp(48px,6vw,88px);font-size:1rem}
.site-footer::before{content:"";display:block;position:absolute;inset:0 0 auto 0;height:4px;z-index:2;background:linear-gradient(90deg,#F57A2C,#FFB070 45%,#FFC21F)}
.site-footer::after{content:"";position:absolute;z-index:-1;right:-8vw;top:-12vw;width:min(38vw,520px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,146,72,.17),rgba(255,146,72,0) 68%)}
.site-footer .add{background:rgba(245,122,44,.07);color:#A94A10;border-color:rgba(188,82,16,.5)}
.site-footer ul{margin:0;padding:0;list-style:none}

.ft-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 48px;padding-bottom:clamp(24px,3vw,36px)}
.ft-head__brand img{width:clamp(210px,16vw,250px);height:auto;background:none}
.ft-head__brand p{max-width:27em;margin:18px 0 0;font-size:1.12rem;line-height:1.5;color:var(--muted)}
.ft-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
.ft-banner{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:flex-end;min-height:clamp(300px,30vw,400px);margin-bottom:clamp(26px,3vw,40px);border-radius:clamp(22px,2.4vw,34px);background:#00104A;color:#fff}
.ft-banner__img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;background:#00104A;transition:transform 1.6s var(--ease)}
.ft-banner:hover .ft-banner__img{transform:scale(1.045)}
.ft-banner::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,16,74,.92) 0%,rgba(0,16,74,.62) 48%,rgba(0,16,74,.08) 100%)}
.ft-banner__in{max-width:36em;padding:clamp(26px,4vw,56px)}
.site-footer .ft-banner h2{margin:0 0 14px;font:600 clamp(1.8rem,3.3vw,2.9rem)/1.08 var(--font-body);letter-spacing:-.025em;color:#fff;text-transform:none}
.ft-banner p{max-width:30em;margin:0 0 24px;font-size:1.08rem;line-height:1.5;color:rgba(255,255,255,.9)}
.ft-chips li{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--rule);border-radius:999px;background:#fff;font-size:.86rem;font-weight:500;color:var(--navy)}
.ft-chips li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent-icon)}

.ft-contact{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-block:1px solid var(--rule)}
.ft-contact li+li{border-left:1px solid var(--rule)}
.ft-contact a{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:clamp(20px,2.2vw,30px) clamp(16px,2.4vw,32px);color:var(--navy);text-decoration:none;font-size:1.08rem;font-weight:600;line-height:1.25;transition:color .25s}
.ft-contact a::before{content:"";position:absolute;inset:0;z-index:-1;background:#fff;transform:scaleY(0);transform-origin:50% 100%;transition:transform .55s var(--ease)}
.ft-contact a:hover::before{transform:scaleY(1)}
.ft-contact .i-go{flex:none;width:44px;height:44px;padding:13px;border-radius:50%;background:var(--navy);color:#fff;opacity:0;transform:translateX(-10px) scale(.8);transition:opacity .3s,transform .55s var(--ease),background-color .3s}
.ft-contact a:hover .i-go{opacity:1;transform:rotate(-45deg);background:var(--accent)}
.ft-contact small{display:block;margin-bottom:3px;font-size:.82rem;font-weight:500;color:var(--muted)}
.ft-contact a:hover{color:var(--accent-text);text-decoration:none}

.ft-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,4vw,64px);padding-block:clamp(36px,4.4vw,60px) clamp(10px,2vw,24px)}
.site-footer .ft-cols h2{margin:0 0 16px;font:600 1.05rem/1.3 var(--font-body);letter-spacing:0;text-transform:none;color:var(--navy)}
.ft-cols ul{display:grid;gap:4px;justify-items:start}
.site-footer .ft-cols a{display:inline;padding:4px 0 3px;font-size:1rem;line-height:1.7;color:var(--ink);text-decoration:none;background:linear-gradient(var(--accent-icon),var(--accent-icon)) 0 100%/0 2px no-repeat;transition:background-size .55s var(--ease),color .25s,opacity .3s}
.site-footer .ft-cols a:hover,.site-footer .ft-cols a:focus-visible{color:var(--accent-text);background-size:100% 2px;text-decoration:none}
.ft-cols ul:hover a:not(:hover):not(:focus-visible){opacity:.45}

.ft-mark{margin:clamp(6px,2vw,22px) 0 0;padding:0 var(--gutter);text-align:center;font:700 clamp(4.2rem,20vw,18.5rem)/.8 var(--font-display);letter-spacing:-.05em;white-space:nowrap;overflow:hidden;color:transparent;-webkit-text-stroke:0;background:radial-gradient(520px 340px at var(--mx,50%) 100%,rgba(245,122,44,.55),rgba(245,122,44,0) 70%),linear-gradient(180deg,rgba(4,45,90,.16),rgba(4,45,90,.02) 88%);-webkit-background-clip:text;background-clip:text;user-select:none;pointer-events:none}
.ft-mark span{color:var(--accent-icon);-webkit-text-stroke:0;-webkit-text-fill-color:var(--accent-icon)}
.ft-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px;padding-block:20px 26px;border-top:1px solid var(--rule);font-size:.92rem;color:var(--muted)}
.site-footer .ft-up{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border:1px solid var(--rule);border-radius:999px;background:#fff;color:var(--navy);font-weight:500;text-decoration:none;transition:background-color .25s,color .25s,border-color .25s}
.ft-up .i{width:16px;height:16px;transform:rotate(-90deg)}
.site-footer .ft-up:hover{background:var(--accent);border-color:var(--accent);color:#00104A}

@media (max-width:1000px){
  .ft-chips{justify-content:flex-start}
  .ft-contact{grid-template-columns:1fr}
  .ft-contact li+li{border-left:0;border-top:1px solid var(--rule)}
  .ft-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){.ft-banner{min-height:360px}.ft-banner::after{background:linear-gradient(0deg,rgba(0,16,74,.94) 0%,rgba(0,16,74,.7) 55%,rgba(0,16,74,.15) 100%)}}
@media (max-width:420px){.ft-cols{grid-template-columns:1fr}.ft-bar{flex-direction:column;align-items:flex-start}}
@media (prefers-reduced-motion:reduce){.nav__pill,.nav__cards a::before,.nav__t,.ft-banner__img,.hd .hd__cta::before{transition:none}.ft-banner:hover .ft-banner__img,.nav__feature:hover .nav__img{transform:none}}

/* ==========================================================================
   28 · Enquiry popup v9: two panels on desktop, one compact column on phones.
   Always fits the viewport (dvh): nothing scrolls on a normal screen.
   ========================================================================== */
.popup{width:min(900px,calc(100vw - 24px));max-width:none;max-height:calc(100dvh - 24px);margin:auto;padding:0;border:0;border-radius:28px;background:#fff;color:var(--ink);overflow:hidden;box-shadow:0 60px 120px -40px rgba(0,16,74,.75)}
.popup::backdrop{background:rgba(0,16,74,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.popup[open]{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);animation:pop-in .55s var(--ease)}
.popup[open]::backdrop{animation:fade-in .4s ease}
.pop__side{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;gap:28px;padding:clamp(26px,3.2vw,40px);background:linear-gradient(160deg,#00104A 0%,#033C6E 100%);color:#fff;overflow:hidden}
.pop__side::before{content:"";position:absolute;z-index:-1;right:-90px;bottom:-110px;width:300px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,146,72,.8),rgba(245,122,44,.22) 60%,transparent 70%)}
.pop__side::after{content:"";position:absolute;z-index:-1;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:40px 40px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 80%);mask-image:linear-gradient(180deg,#000,transparent 80%)}
.pop__tag{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:6px 13px;border-radius:999px;background:rgba(255,255,255,.14);font:500 .82rem/1.2 var(--font-body);color:#fff}
.pop__tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--sun)}
.pop__side h2{margin:0 0 12px;font:600 clamp(1.7rem,2.7vw,2.4rem)/1.07 var(--font-body);letter-spacing:-.028em;color:#fff}
.pop__side p{margin:0;font-size:1rem;line-height:1.5;color:rgba(255,255,255,.88)}
.pop__pts{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:.95rem}
.pop__pts li{display:flex;gap:11px;align-items:flex-start;color:#fff}
.pop__pts li::before{content:"";flex:none;width:8px;height:8px;margin-top:.55em;border-radius:50%;background:var(--sun)}

.pop__main{display:flex;flex-direction:column;justify-content:center;min-height:0;padding:clamp(18px,2.4vw,30px) clamp(22px,3vw,40px) clamp(20px,2.6vw,32px);overflow-y:auto}
.pop__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:clamp(10px,1.6vw,18px);font:600 1.05rem var(--font-body);color:var(--navy)}
.popup__close{flex:none;width:42px;height:42px;border-radius:50%;border:0;background:var(--sky);color:var(--navy);display:grid;place-items:center;cursor:pointer;transition:background-color .3s,color .3s,transform .5s var(--ease)}
.popup__close .i{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.popup__close:hover{background:var(--accent);color:#00104A;transform:rotate(90deg)}
.popup .form{gap:clamp(10px,1.5vw,14px)}
.popup .form .row{gap:12px;grid-template-columns:1fr 1fr}
.popup .field{gap:5px}
.popup .field label{font-size:.86rem;font-weight:600;color:var(--navy)}
.popup .field input,.popup .field select{min-height:48px;padding:10px 14px;border-radius:12px;font-size:1rem}
.popup .field select{padding-right:40px}
.popup .field .err{font-size:.8rem}
.popup .consent{gap:10px;font-size:.8rem;line-height:1.4}
.popup .consent input{width:20px;height:20px;margin-top:1px}
.popup .btn{width:100%;justify-content:space-between}
.popup__fine{margin:12px 0 0;font-size:.82rem;text-align:center;color:var(--muted)}

/* phones, and any very short window: one compact column, title bar on top */
@media (max-width:720px),(max-height:520px){
  .popup{width:min(520px,calc(100vw - 20px));border-radius:24px}
  .popup[open]{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  .pop__side{gap:0;padding:20px 64px 16px 22px;justify-content:flex-start}
  .pop__side::before{width:200px;right:-70px;bottom:auto;top:-110px}
  .pop__side::after{display:none}
  .pop__tag,.pop__side p,.pop__pts{display:none}
  .pop__side h2{margin:0;font-size:clamp(1.35rem,5.6vw,1.7rem)}
  .pop__main{position:static;padding:16px 20px 18px;justify-content:flex-start}
  .pop__bar{position:absolute;top:12px;right:12px;z-index:3;margin:0}
  .pop__bar span{display:none}
  .popup__close{background:rgba(255,255,255,.16);color:#fff}
  .popup__close:hover{background:var(--accent)}
}
@media (max-width:420px){.popup .form .row{grid-template-columns:1fr}}
@media (max-height:760px){
  .popup .field input,.popup .field select{min-height:44px;padding-block:8px}
  .popup .field label{font-size:.82rem}
  .popup__fine{margin-top:8px}
}
@media (max-height:640px){
  .pop__side{padding-block:14px 12px}
  .popup .btn--lg{min-height:52px}.popup .btn--lg .i-arrow{width:42px;height:42px;padding:12px}
  .popup__fine{display:none}
}

/* landscape phones: fields in a 6-column grid so the whole form stays in view */
@media (max-height:520px) and (min-width:600px){
  .popup{width:min(780px,calc(100vw - 20px))}
  .pop__side{padding:12px 64px 10px 20px}
  .pop__main{padding:12px 20px 14px}
  .popup .form{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px 12px}
  .popup .form .row{display:contents}
  .popup .form>*{grid-column:1/-1}
  .popup .form .field{grid-column:span 2}
  .popup .form .field:has(#pq-post){grid-column:span 6}
  .popup .field{gap:3px}
  .popup .field label{font-size:.78rem}
  .popup .field input,.popup .field select{min-height:38px;padding-block:6px;font-size:.95rem}
  .popup .consent{font-size:.74rem;line-height:1.3}
  .popup .btn--lg{min-height:46px}.popup .btn--lg .i-arrow{width:38px;height:38px;padding:11px}
}
.nav__feature .nav__book{display:inline-flex;grid-template-columns:none;align-items:center;gap:12px;padding:5px 5px 5px 18px;border-radius:999px;background:#fff;color:var(--navy);white-space:nowrap}
.nav__feature .nav__book:hover{background:var(--sun);color:var(--navy)}
/* touch: footer links and logo get a 44px tap target */
@media (pointer:coarse),(max-width:1000px){
  .site-footer .ft-cols a{display:inline-flex;align-items:center;min-height:44px;padding-block:0}
  .ft-cols ul{gap:0}
  .ft-head__brand>a{display:inline-flex;align-items:center;min-height:44px}
}
@media (max-width:1180px){.brand{padding-block:6px}}

/* popup polish: sun-over-roof art, check list, Perth chip, interest chips */
.pop__art{position:absolute;z-index:-1;right:-52px;top:-52px;width:150px;height:auto;pointer-events:none}
.pop__pts li::before{width:20px;height:20px;margin-top:.1em;background:var(--sun) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300104A' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/13px no-repeat}
.pop__pts li{gap:12px}
.pop__loc{display:flex;align-items:center;gap:9px;margin:0;padding-top:16px;border-top:1px solid rgba(255,255,255,.2);font:500 .88rem/1.3 var(--font-body);color:#fff}
.pop__loc .i{flex:none;width:18px;height:18px;stroke:var(--sun);fill:none;stroke-width:2}
.pop__title{display:grid;gap:2px}
.pop__title small{font:400 .82rem var(--font-body);color:var(--muted)}
.popup .chips{border:0;margin:0;padding:0;min-width:0;display:grid;gap:8px}
.popup .chips legend{padding:0;margin-bottom:8px;font-size:.86rem;font-weight:600;color:var(--navy)}
.chips__list{display:flex;flex-wrap:wrap;gap:8px}
.pchip{position:relative;cursor:pointer}
.pchip input{position:absolute;inset:0;opacity:0;margin:0;width:100%;height:100%;cursor:pointer}
.pchip span{display:inline-flex;align-items:center;min-height:40px;padding:8px 15px;border-radius:999px;border:1.5px solid rgba(0,16,74,.22);background:#fff;font:500 .9rem/1.2 var(--font-body);color:var(--navy);transition:background-color .25s,border-color .25s,color .25s,transform .25s var(--ease)}
.pchip:hover span{border-color:var(--navy)}
.pchip input:checked+span{background:var(--navy);border-color:var(--navy);color:#fff}
.pchip input:focus-visible+span{outline:3px solid var(--sun);outline-offset:2px}
.pchip:active span{transform:scale(.97)}
.popup .field input:focus{border-color:var(--navy);box-shadow:0 0 0 4px rgba(255,146,72,.28)}
@media (max-width:720px),(max-height:520px){.pop__art{display:none}.pop__title small{display:none}.popup .chips legend{margin-bottom:6px}.pchip span{min-height:38px;padding:6px 13px;font-size:.86rem}}
@media (max-height:760px){.pchip span{min-height:36px;padding-block:5px}.popup .chips legend{margin-bottom:4px}}
@media (prefers-reduced-motion:reduce){.pchip span{transition:none}}

/* ---- section gradients: soft tonal washes in brand colours, alternating corners so no two neighbours match ---- */
.sec.sec--paper{background:radial-gradient(900px 460px at 100% 0%,rgba(255,146,72,.10),transparent 70%),linear-gradient(180deg,#FAF8F5 0%,#F3EDE5 100%)}
.sec.sec--paper:nth-of-type(even){background:radial-gradient(900px 460px at 0% 100%,rgba(3,60,110,.08),transparent 70%),linear-gradient(0deg,#FAF8F5 0%,#F1ECE4 100%)}
.sec.sec--white{background:radial-gradient(900px 460px at 0% 0%,rgba(3,60,110,.08),transparent 70%),linear-gradient(180deg,#fff 0%,#F1F5FB 100%)}
.sec.sec--white:nth-of-type(even){background:radial-gradient(900px 460px at 100% 100%,rgba(255,146,72,.09),transparent 70%),linear-gradient(0deg,#fff 0%,#F3F6FB 100%)}
.sec.sec--navy{background:radial-gradient(760px 420px at 100% 0%,rgba(255,146,72,.30),transparent 70%),linear-gradient(135deg,#033C6E 0%,#00104A 100%)}
.strip{background:linear-gradient(90deg,#fff 0%,#F3F6FB 50%,#fff 100%)}
.site-footer{background:radial-gradient(800px 380px at 100% 0%,rgba(255,146,72,.10),transparent 70%),linear-gradient(180deg,#F3FAFF 0%,#E7EDF6 100%)}
.cta3{background:radial-gradient(700px 420px at 0% 100%,rgba(255,146,72,.28),transparent 70%),linear-gradient(120deg,#00104A 0%,#033C6E 100%)}

/* ---- image backplates: offset solid block with a dot grid, plus an orange crop mark. No glows, no blur. ---- */
.csec__media{isolation:isolate}.contact__photo{position:relative;isolation:isolate}
.csec__media::before,.contact__photo::before{content:"";position:absolute;z-index:-1;inset:clamp(14px,2vw,26px) calc(clamp(14px,2vw,26px)*-1) calc(clamp(14px,2vw,26px)*-1) clamp(14px,2vw,26px);border-radius:10px;background:radial-gradient(circle,rgba(0,16,74,.22) 1.4px,transparent 1.6px) 0 0/14px 14px,linear-gradient(135deg,#E6EBF3,#D6E0EE)}
.csec__media::after,.contact__photo::after{content:"";position:absolute;z-index:2;left:calc(clamp(10px,1.4vw,18px)*-1);top:calc(clamp(10px,1.4vw,18px)*-1);width:clamp(40px,5vw,64px);aspect-ratio:1;border-top:4px solid var(--accent-icon);border-left:4px solid var(--accent-icon);border-top-left-radius:10px;pointer-events:none}
.csec--split-rev .csec__media::before{inset:clamp(14px,2vw,26px) clamp(14px,2vw,26px) calc(clamp(14px,2vw,26px)*-1) calc(clamp(14px,2vw,26px)*-1);background:radial-gradient(circle,rgba(0,16,74,.22) 1.4px,transparent 1.6px) 0 0/14px 14px,linear-gradient(225deg,#FFEBDD,#FFD2BC)}
.csec--split-rev .csec__media::after{left:auto;right:calc(clamp(10px,1.4vw,18px)*-1);border-left:0;border-right:4px solid var(--accent-icon);border-top-left-radius:0;border-top-right-radius:10px}
.sec--navy .csec__media::before{background:radial-gradient(circle,rgba(255,255,255,.28) 1.4px,transparent 1.6px) 0 0/14px 14px,linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.06))}
/* diagrams and charts: hard offset shadow gives them the same lifted feel */
.figure img{box-shadow:14px 14px 0 #DCE5F1,0 30px 60px -36px rgba(0,16,74,.5)}
.sec--paper .figure img{box-shadow:14px 14px 0 #F6D9C9,0 30px 60px -36px rgba(0,16,74,.5)}
.sec--navy .figure img{box-shadow:14px 14px 0 rgba(255,255,255,.14)}
/* the reveal used to clip the whole wrapper, which would cut the backplate off: clip only the photo */
.js .csec__media.mask,.js .contact__photo.mask{clip-path:none}
.js .csec__media.mask img,.js .contact__photo.mask img{clip-path:inset(0 0 100% 0);transition:clip-path 1.3s var(--ease),transform 1.8s var(--ease)}
.js .csec__media.mask.is-in img,.js .contact__photo.mask.is-in img{clip-path:inset(-40px)}
@media (max-width:900px){
  .csec__media::before,.contact__photo::before{inset:12px 0 -12px 12px}
  .csec--split-rev .csec__media::before{inset:12px 12px -12px 0}
  .csec__media::after,.contact__photo::after{left:-8px;top:-8px}
  .csec--split-rev .csec__media::after{right:-8px}
  .figure img,.sec--paper .figure img,.sec--navy .figure img{box-shadow:10px 10px 0 #DCE5F1}
}
@media (prefers-reduced-motion:reduce){.js .csec__media.mask img,.js .contact__photo.mask img{clip-path:none}}

/* ---- live sun / roof / solar scenes (scenes.js) ---- */
.has-scene{position:relative;isolation:isolate}
.scene{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.sc-svg{position:absolute;display:block;height:auto;overflow:visible}
.sc-rays path{fill:none;stroke-linecap:round}
.scene *{animation-play-state:paused}
.is-live .scene *{animation-play-state:running}
/* sunrise: closing banners and navy bands */
.cta3.has-scene::after{display:none}
.scene--sunrise .sc-svg{right:0;bottom:0;width:min(54vw,800px)}
.sc-roof{fill:#00104A}
.sc-ridge{fill:none;stroke:rgba(255,255,255,.6);stroke-width:2.5;stroke-linejoin:round}
.sc-tiles{fill:none;stroke:rgba(255,255,255,.13);stroke-width:1.5}
.sc-chimney{fill:#00104A;stroke:rgba(255,255,255,.28);stroke-width:1.2}
.sc-panel{fill:#0B4A93;stroke:rgba(255,255,255,.62);stroke-width:1.3;animation:sc-glint 5.5s ease-in-out infinite}
.sc-disc{fill:#FF9248}
.scene--sunrise .sc-disc{fill:#FF9248;filter:none}
.scene--sunrise .sc-halo{fill:rgba(255,146,72,.10)}
.scene--sunrise .sc-halo2{fill:rgba(255,146,72,.16)}
.scene--sunrise .sc-rays path{stroke:#FFC9A3;stroke-width:3;stroke-opacity:.6}
.sc-rays{transform-origin:360px 230px;animation:sc-spin 90s linear infinite}
.sc-sun{transform-origin:360px 230px;animation:sc-breathe 6s ease-in-out infinite}
.sc-rise{transition:transform 2.2s cubic-bezier(.2,.7,.2,1)}
.js .has-scene:not(.is-live) .sc-rise{transform:translateY(96px)}
.scene--soft{opacity:.55}
.scene--soft .sc-svg{width:min(44vw,620px)}
/* beams: page heroes */
.scene--beams .sc-svg{right:0;top:0;width:min(90vw,1100px);aspect-ratio:1;-webkit-mask-image:radial-gradient(circle at 100% 0,#000 0,transparent 68%);mask-image:radial-gradient(circle at 100% 0,#000 0,transparent 68%)}
.scene--beams .sc-rays{transform-origin:800px 0}
.scene--beams .sc-rays path{stroke:#FF9248;stroke-width:1.4;stroke-opacity:.2}
.scene--beams .sc-halo2{fill:rgba(255,146,72,.22)}
.sc-sweep{position:absolute;top:-20%;bottom:-20%;left:-30%;width:22%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.09),transparent);transform:skewX(-18deg) translateX(0);animation:sc-sweep 9s ease-in-out infinite}
/* light sections: corner burst and a roofline of houses */
.scene--light .sc-svg--burst,.scene--burst .sc-svg--burst{right:-110px;top:-110px;width:320px;aspect-ratio:1}
.scene--light .sc-svg--burst.is-flip,.scene--burst .sc-svg--burst.is-flip{right:auto;left:-110px;top:auto;bottom:-110px}
.sc-svg--burst .sc-rays{transform-origin:150px 150px;animation-duration:120s}
.sc-svg--burst .sc-rays path{stroke:#F57A2C;stroke-width:1.4;stroke-opacity:.26}
.sc-svg--burst .sc-disc{fill:#FF9248;fill-opacity:.2}
.sc-svg--line{left:0;bottom:0;width:100%;height:64px}
.sc-house{fill:#00104A;fill-opacity:.055}
.sc-glint{fill:#F57A2C;fill-opacity:0;animation:sc-flicker 6s ease-in-out infinite}
@keyframes sc-spin{to{transform:rotate(360deg)}}
@keyframes sc-breathe{50%{transform:scale(1.035)}}
@keyframes sc-glint{0%,55%,100%{fill:#0B4A93}70%{fill:#5BA4FF}}
@keyframes sc-flicker{0%,60%,100%{fill-opacity:0}72%{fill-opacity:.5}}
@keyframes sc-sweep{0%{transform:skewX(-18deg) translateX(0)}60%,100%{transform:skewX(-18deg) translateX(620%)}}
@media (max-width:700px){
  .scene--sunrise .sc-svg{width:100vw;opacity:.7}
  .scene--light .sc-svg--burst,.scene--burst .sc-svg--burst{width:220px;right:-80px;top:-80px}
  .scene--light .sc-svg--burst.is-flip,.scene--burst .sc-svg--burst.is-flip{left:-80px;bottom:-80px}
}
@media (prefers-reduced-motion:reduce){
  .scene *{animation:none!important}
  .js .has-scene:not(.is-live) .sc-rise{transform:none}
  .sc-rise{transition:none}
}
@media print{.scene{display:none}}

/* ---- header menu v10: no dot; one orange pill slides to the hovered link, roof marker on the current page ---- */
@media (min-width:1181px){
  .nav__link::after{display:none}
  .nav .nav__link[aria-current="page"]::after,.nav .nav__link[data-current="true"]::after{display:block;content:"";left:50%;right:auto;bottom:1px;width:13px;height:7px;border-radius:0;background:var(--accent-icon);clip-path:polygon(50% 0,100% 100%,0 100%);transform:translateX(-50%);transition:none}
  .nav__pill{background:linear-gradient(100deg,#F07A2E 0%,#FF9248 50%,#F07A2E 100%);background-size:220% 100%;animation:pill-flow 3.2s ease-in-out infinite alternate;box-shadow:0 14px 26px -10px rgba(245,122,44,.7)}
  html.has-pill .site-header .nav .nav__item:hover>.nav__link,html.has-pill .site-header .nav .nav__item:focus-within>.nav__link{color:#fff}
  html.has-pill .site-header .nav .nav__item:hover>.nav__link[aria-current="page"]::after,html.has-pill .site-header .nav .nav__item:hover>.nav__link[data-current="true"]::after{background:#fff}
  .site-header--over:not(.is-stuck) .nav__pill{background:linear-gradient(100deg,#F07A2E 0%,#FF9248 50%,#F07A2E 100%);background-size:220% 100%}
  /* mega panel cards: white, with a navy sweep and a sun rising from the corner on hover */
  .nav__cards a{background:#fff;box-shadow:inset 0 0 0 1px rgba(4,45,90,.1),0 12px 26px -22px rgba(0,16,74,.6);transition:color .35s,transform .55s var(--ease),box-shadow .55s var(--ease)}
  .nav__cards a::before{background:linear-gradient(110deg,#00104A 0%,#033C6E 100%)}
  .nav__cards a::after{content:"";position:absolute;z-index:-1;right:-30px;bottom:-70px;width:150px;aspect-ratio:1;border-radius:50%;background:#FF9248;opacity:0;transform:translateY(46px) scale(.6);transition:transform .8s var(--ease),opacity .4s}
  .nav__cards a:hover,.nav__cards a:focus-visible{transform:translateY(-3px);box-shadow:inset 0 0 0 1px rgba(255,255,255,0),0 24px 34px -20px rgba(0,16,74,.75)}
  .nav__cards a:hover::after,.nav__cards a:focus-visible::after{opacity:1;transform:none}
  .nav__cards a:hover .i-go,.nav__cards a:focus-visible .i-go{background:#fff;color:var(--navy)}
  .nav__n{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--sun-soft);font-weight:600;transition:background-color .35s,color .35s}
  .nav__cards a:hover .nav__n,.nav__cards a:focus-visible .nav__n{background:#FF9248;color:#00104A}
  .nav__cards a[aria-current="page"]{background:var(--sun-soft)}
  .nav__cards li{animation:nav-card-in .6s var(--ease) both}
  .nav__cards li:nth-child(2){animation-delay:.07s}.nav__cards li:nth-child(3){animation-delay:.14s}.nav__cards li:nth-child(4){animation-delay:.21s}
  .nav__feature{animation:nav-card-in .7s .1s var(--ease) both}
}
@keyframes pill-flow{to{background-position:100% 0}}
@keyframes nav-card-in{from{opacity:0;transform:translateY(16px)}}
@media (prefers-reduced-motion:reduce){.nav__pill{animation:none}.nav__cards li,.nav__feature{animation:none}}

/* ---- cards: orange top and side lines removed; one shared hover (lift, sun rising in the corner, a light sweep) ---- */
.csec--facts .bl li,.csec--facts .bl--led li,.stats__item,.stats__item+.stats__item,.pull{position:relative;isolation:isolate;overflow:hidden}
.csec--facts .bl li,.csec--facts .bl--led li{border:1px solid var(--rule);border-top:1px solid var(--rule)}
.stats__item,.stats__item+.stats__item{border:0;border-top:0}
.pull,.sec--navy .pull{border-left:0;border-radius:14px;padding:28px 32px}
.csec--facts .bl li::before,.stats__item::before,.pull::before{content:"";display:block;position:absolute;z-index:-1;inset:0;background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.75) 50%,transparent 62%);transform:translateX(-130%);pointer-events:none}
.stats__item::before,.sec--navy .pull::before{background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.16) 50%,transparent 62%)}
.csec--facts .bl li::after,.stats__item::after,.pull::after{content:"";position:absolute;z-index:-1;right:-44px;top:-44px;width:130px;aspect-ratio:1;border-radius:50%;background:var(--sun-soft);opacity:0;transform:scale(.3);transform-origin:70% 30%;pointer-events:none;transition:transform .8s var(--ease),opacity .45s}
.stats__item::after{background:#FF9248;right:-38px;top:auto;bottom:-52px;transform-origin:70% 70%;width:120px}
.sec--navy .pull::after{background:rgba(255,146,72,.35)}
.csec--facts .bl li,.stats__item,.pull,.faq details,.contact-card{transition:transform .6s var(--ease),box-shadow .6s var(--ease),border-color .35s,background-color .35s}
.tile .tile__media{transition:box-shadow .6s var(--ease),transform .6s var(--ease)}
.tile .tile__media::after{content:"";position:absolute;z-index:2;right:-34px;bottom:-34px;width:96px;aspect-ratio:1;border-radius:50%;background:#FF9248;transform:scale(.2);opacity:0;transition:transform .7s var(--ease),opacity .4s}
@media (hover:hover){
  .csec--facts .bl li:hover,.csec--facts .bl--led li:hover{transform:translateY(-7px);border-color:rgba(4,45,90,.28);box-shadow:0 34px 50px -26px rgba(0,16,74,.5)}
  .stats__item:hover{transform:translateY(-7px);box-shadow:0 34px 50px -24px rgba(0,16,74,.7)}
  .pull:hover{transform:translateY(-5px);box-shadow:0 28px 44px -26px rgba(0,16,74,.45)}
  .csec--facts .bl li:hover::before,.stats__item:hover::before,.pull:hover::before{transform:translateX(130%);transition:transform 1s var(--ease)}
  .csec--facts .bl li:hover::after,.stats__item:hover::after,.pull:hover::after{opacity:1;transform:scale(1)}
  .csec--facts .bl li:hover strong{color:var(--accent-text)}
  .faq details:hover{transform:translateY(-3px);border-color:var(--navy);box-shadow:0 22px 36px -26px rgba(0,16,74,.5)}
  .contact-card:hover{transform:translateX(6px)}
  .tile:hover .tile__media{transform:translateY(-5px);box-shadow:0 28px 40px -22px rgba(0,16,74,.55)}
  .tile:hover .tile__media::after{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){.csec--facts .bl li,.stats__item,.pull,.faq details,.contact-card,.tile .tile__media{transition:none}.csec--facts .bl li:hover,.stats__item:hover,.pull:hover,.faq details:hover,.contact-card:hover,.tile:hover .tile__media{transform:none}}

/* ---- footer links: no underlines. A soft white pill grows around the link and an arrow slides in (same family as the header pill) ---- */
.site-footer a:hover{text-decoration:none}
.site-footer .ft-cols a{position:relative;display:inline-flex;align-items:center;margin-left:-14px;padding:6px 14px;border-radius:999px;background:none;transition:color .3s,background-color .35s,box-shadow .5s var(--ease),opacity .3s}
.site-footer .ft-cols a::after,.site-footer .ft-bar a::after{content:"";flex:none;width:0;height:13px;margin-left:0;opacity:0;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;transition:width .45s var(--ease),margin-left .45s var(--ease),opacity .3s}
.site-footer .ft-bar a{position:relative;display:inline-flex;align-items:center;padding:5px 12px;margin-inline:-12px;border-radius:999px;transition:color .3s,background-color .35s,box-shadow .5s var(--ease)}
.site-footer .ft-cols a:hover,.site-footer .ft-cols a:focus-visible,.site-footer .ft-bar a:hover,.site-footer .ft-bar a:focus-visible{background-color:#fff;color:var(--accent-text);box-shadow:0 14px 24px -14px rgba(0,16,74,.55),inset 0 0 0 1px rgba(4,45,90,.07);background-size:0}
.site-footer .ft-cols a:hover::after,.site-footer .ft-cols a:focus-visible::after,.site-footer .ft-bar a:hover::after,.site-footer .ft-bar a:focus-visible::after{width:13px;margin-left:8px;opacity:1}
.ft-cols ul:hover a:not(:hover):not(:focus-visible){opacity:.55}
@media (prefers-reduced-motion:reduce){.site-footer .ft-cols a,.site-footer .ft-bar a,.site-footer .ft-cols a::after,.site-footer .ft-bar a::after{transition:none}}
main{overflow-x:clip}

/* ---- dropdown prompt card v2: flat illustration, no photo, no dot, no glass ---- */
@media (min-width:1181px){
  .nav__feature{justify-content:flex-start;gap:0;min-height:300px;padding:22px 24px 22px;background:linear-gradient(160deg,#033C6E 0%,#00104A 100%)}
  .nav__feature::before{inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:34px 34px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 75%);mask-image:linear-gradient(180deg,#000,transparent 75%)}
  .nav__art{display:block;width:100%;height:118px;margin:0 0 auto;overflow:visible}
  .nav__rays{transform-box:fill-box;transform-origin:center;animation:sc-spin 60s linear infinite}
  .nav__rays path{fill:none;stroke:#FFC9A3;stroke-opacity:.6;stroke-width:2.4;stroke-linecap:round}
  .nav__bar{fill:#FF9248;animation:nav-charge 2.8s ease-in-out infinite}
  .nav__badge{transform-box:fill-box;transform-origin:center;transition:transform .7s var(--ease)}
  .nav__feature:hover .nav__badge{transform:rotate(-12deg) scale(1.06)}
  .nav__tag{padding:0;margin:18px 0 8px;border-radius:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;font:600 .84rem/1.2 var(--font-body);letter-spacing:.01em;color:#FFC9A3}
  .nav__tag::before{display:none}
  .nav__feature strong{font-size:1.45rem;margin-bottom:8px}
  .nav__feature p{margin-bottom:18px}
  .nav__feature .nav__book:hover{background:#FFEBDD}
}
@keyframes nav-charge{0%,100%{fill-opacity:.25}45%,70%{fill-opacity:1}}
@media (prefers-reduced-motion:reduce){.nav__rays,.nav__bar{animation:none}}

/* ---- cool, fresh section gradients (override the earlier warm washes): icy sky, aqua and mint, kept faint so text stays calm ---- */
.sec.sec--paper{background:radial-gradient(900px 480px at 100% 0%,rgba(25,195,177,.12),transparent 70%),linear-gradient(180deg,#F7FBFE 0%,#E9F4FB 100%)}
.sec.sec--paper:nth-of-type(even){background:radial-gradient(900px 480px at 0% 100%,rgba(56,150,255,.11),transparent 70%),linear-gradient(0deg,#F7FBFE 0%,#E6F3F8 100%)}
.sec.sec--white{background:radial-gradient(900px 480px at 0% 0%,rgba(56,150,255,.10),transparent 70%),linear-gradient(180deg,#fff 0%,#EEF7FD 100%)}
.sec.sec--white:nth-of-type(even){background:radial-gradient(900px 480px at 100% 100%,rgba(25,195,177,.11),transparent 70%),linear-gradient(0deg,#fff 0%,#EDF8F7 100%)}
.sec.sec--navy{background:radial-gradient(760px 420px at 100% 0%,rgba(34,170,255,.30),transparent 70%),linear-gradient(135deg,#05508F 0%,#00104A 100%)}
.strip{background:linear-gradient(90deg,#fff 0%,#EEF7FD 50%,#fff 100%)}
.site-footer{background:radial-gradient(800px 380px at 100% 0%,rgba(25,195,177,.12),transparent 70%),radial-gradient(700px 360px at 0% 100%,rgba(56,150,255,.10),transparent 70%),linear-gradient(180deg,#F3FAFF 0%,#E2F0F9 100%)}
.cta3{background:radial-gradient(700px 420px at 0% 100%,rgba(34,170,255,.26),transparent 70%),linear-gradient(120deg,#00104A 0%,#05508F 100%)}
.ihero{background:linear-gradient(115deg,#00104A 0%,#043579 52%,#0A62AD 100%)}
.csec__media::before,.contact__photo::before{background:radial-gradient(circle,rgba(0,16,74,.2) 1.4px,transparent 1.6px) 0 0/14px 14px,linear-gradient(135deg,#DDF0FB,#C6E4F6)}
.csec--split-rev .csec__media::before{background:radial-gradient(circle,rgba(0,16,74,.2) 1.4px,transparent 1.6px) 0 0/14px 14px,linear-gradient(225deg,#D9F5EE,#BFEBDF)}
.figure img{box-shadow:14px 14px 0 #CFE7F6,0 30px 60px -36px rgba(0,16,74,.5)}
.sec--paper .figure img{box-shadow:14px 14px 0 #CDEFE8,0 30px 60px -36px rgba(0,16,74,.5)}
@media (max-width:900px){.figure img,.sec--paper .figure img,.sec--navy .figure img{box-shadow:10px 10px 0 #CFE7F6}}

/* ---- WhatsApp button: fixed on every page, lifts above the mobile action bar ---- */
.wa-fab{position:fixed;right:clamp(14px,2vw,26px);bottom:clamp(16px,2vw,26px);z-index:94;display:flex;align-items:center;justify-content:center;gap:0;height:58px;min-width:58px;padding:0;border-radius:999px;background:#25D366;color:#fff;text-decoration:none;box-shadow:0 14px 28px -10px rgba(0,16,74,.5),0 2px 6px rgba(0,16,74,.18);transition:transform .45s var(--ease),box-shadow .45s var(--ease),bottom .4s var(--ease),padding .45s var(--ease),gap .45s var(--ease)}
.wa-fab svg{flex:none;width:32px;height:32px;fill:currentColor}
.wa-fab__tip{max-width:0;overflow:hidden;white-space:nowrap;font:600 .95rem/1 var(--font-body);opacity:0;transition:max-width .5s var(--ease),opacity .3s}
.wa-fab:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
@media (hover:hover){.wa-fab:hover{padding:0 20px 0 14px;gap:10px;transform:translateY(-3px);box-shadow:0 22px 34px -12px rgba(0,16,74,.55)}.wa-fab:hover .wa-fab__tip{max-width:140px;opacity:1}}
@media (max-width:760px){
  .wa-fab{height:54px;min-width:54px;right:14px;bottom:calc(16px + env(safe-area-inset-bottom))}
  .wa-fab svg{width:30px;height:30px}
  .sticky-cta.is-on~.wa-fab{bottom:calc(88px + env(safe-area-inset-bottom))}
}
html.nav-open .wa-fab,html.popup-open .wa-fab{opacity:0;pointer-events:none}
@media print{.wa-fab{display:none}}
@media (prefers-reduced-motion:reduce){.wa-fab,.wa-fab__tip{transition:none}}

/* ---- CTA system v11: one pill family. Primary has a round arrow chip; on hover the chip's colour floods the whole button. Secondary is an outlined pill that fills. ---- */
.btn:not(.hd__cta){--cs:46px;--bg:var(--accent);--ink:#fff;--fill:#00104A;--fill-ink:#fff;--chip:#fff;--chip-ink:var(--accent);--chip-h:#fff;--chip-h-ink:#00104A;
  position:relative;isolation:isolate;overflow:hidden;gap:18px;min-height:calc(var(--cs) + 12px);padding:6px 6px 6px 28px;border:0;border-radius:999px;background:var(--bg);color:var(--ink);box-shadow:none;
  font:600 1rem/1.15 var(--font-body);letter-spacing:0;transition:color .45s var(--ease),transform .55s var(--ease),background-color .3s}
.btn--lg:not(.hd__cta){--cs:52px;padding-left:32px;font-size:1.04rem}
.btn--sm:not(.hd__cta){--cs:38px;padding-left:22px;font-size:.94rem;gap:14px}
.btn--navy:not(.hd__cta){--bg:#00104A;--fill:var(--accent);--chip:#FF9248;--chip-ink:#00104A;--chip-h:#fff;--chip-h-ink:var(--accent)}
.btn--white:not(.hd__cta){--bg:#fff;--ink:#00104A;--fill:#FFEBDD;--fill-ink:#00104A;--chip:var(--accent);--chip-ink:#fff;--chip-h:#00104A;--chip-h-ink:#fff}
/* on dark surfaces the flood is white, so the button never melts into the background */
.ihero .btn--sun:not(.hd__cta),.sec--navy .btn--sun:not(.hd__cta),.ft-banner .btn--sun:not(.hd__cta),.band .btn--sun:not(.hd__cta),.hero .btn--sun:not(.hd__cta){--fill:#fff;--fill-ink:#00104A;--chip-h:var(--accent);--chip-h-ink:#fff}
.cta3 .btn--sun:not(.hd__cta),.cta3 .btn--white:not(.hd__cta){--bg:#fff;--ink:#00104A;--fill:#FFEBDD;--fill-ink:#00104A;--chip:var(--accent);--chip-ink:#fff;--chip-h:#00104A;--chip-h-ink:#fff}
.btn--sun:not(.hd__cta)::before,.btn--navy:not(.hd__cta)::before,.btn--white:not(.hd__cta)::before{content:"";position:absolute;z-index:-1;right:6px;top:50%;width:var(--cs);height:var(--cs);margin-top:calc(var(--cs) / -2);border-radius:50%;background:var(--fill);transform:scale(.88);transition:transform .8s var(--ease)}
.btn:not(.hd__cta) .i-arrow,.btn--lg:not(.hd__cta) .i-arrow,.btn--sm:not(.hd__cta) .i-arrow{flex:none;width:var(--cs);height:var(--cs);padding:calc(var(--cs) * .3);border-radius:50%;background:var(--chip)!important;color:var(--chip-ink)!important;stroke-width:2.2;transform:rotate(-45deg);transition:transform .55s var(--ease),background-color .4s,color .4s}
.btn:not(.hd__cta):hover{transform:none}
.btn--sun:not(.hd__cta):hover,.btn--navy:not(.hd__cta):hover,.btn--white:not(.hd__cta):hover{background:var(--bg);color:var(--fill-ink);box-shadow:none;transform:translateY(-2px)}
.btn--sun:not(.hd__cta):hover::before,.btn--navy:not(.hd__cta):hover::before,.btn--white:not(.hd__cta):hover::before{transform:scale(34)}
.btn:not(.hd__cta):hover .i-arrow,.btn--lg:not(.hd__cta):hover .i-arrow,.btn--sm:not(.hd__cta):hover .i-arrow{background:var(--chip-h)!important;color:var(--chip-h-ink)!important;transform:rotate(0) translateX(2px)}
.btn:not(.hd__cta):focus-visible{outline:3px solid #FF9248;outline-offset:3px}
/* secondary: outlined pill that fills */
.btn.btn--ghost:not(.hd__cta),.btn.btn--outline-light:not(.hd__cta){--ink:#00104A;gap:12px;min-height:58px;padding:0 26px;border:1.5px solid #00104A;background:transparent;background-image:none;color:var(--ink);font-weight:600;transition:background-color .4s var(--ease),color .4s var(--ease),border-color .4s}
.btn--ghost .i{flex:none;width:18px;height:18px;transform:rotate(-45deg);transition:transform .5s var(--ease)}
.btn.btn--ghost:not(.hd__cta):hover{background:#00104A;border-color:#00104A;color:#fff}
.btn.btn--ghost:not(.hd__cta):hover .i{transform:rotate(0) translateX(3px);color:#fff}
.ihero .btn--ghost:not(.hd__cta),.sec--navy .btn--ghost:not(.hd__cta),.cta3 .btn.btn--ghost:not(.hd__cta),.btn.btn--outline-light:not(.hd__cta),.band .btn--ghost:not(.hd__cta){color:#fff;border-color:rgba(255,255,255,.7);background-image:none}
.ihero .btn--ghost:not(.hd__cta):hover,.sec--navy .btn--ghost:not(.hd__cta):hover,.cta3 .btn.btn--ghost:not(.hd__cta):hover,.btn.btn--outline-light:not(.hd__cta):hover,.band .btn--ghost:not(.hd__cta):hover{background:#fff;border-color:#fff;color:#00104A}
.ihero .btn--ghost:hover .i,.sec--navy .btn--ghost:hover .i,.cta3 .btn--ghost:hover .i,.btn--outline-light:hover .i,.band .btn--ghost:hover .i{color:var(--accent)}
/* text links with an arrow */
.link-arrow{gap:12px;padding:0;border-bottom:0;color:var(--navy);font-weight:600}
.link-arrow .i{flex:none;width:32px;height:32px;padding:9px;border-radius:50%;background:var(--sun-soft);color:var(--accent);transform:rotate(-45deg);transition:transform .5s var(--ease),background-color .35s,color .35s}
.link-arrow:hover{gap:12px;color:var(--accent-text);border-color:transparent}
.link-arrow:hover .i{background:var(--accent);color:#00104A;transform:rotate(0) translateX(3px)}
@media (max-width:700px){.btn:not(.hd__cta){white-space:normal;text-align:left}.btn-row .btn{max-width:100%}}
@media (prefers-reduced-motion:reduce){.btn:not(.hd__cta),.btn:not(.hd__cta)::before,.btn .i-arrow,.link-arrow .i{transition:none!important}}

/* ---- heroes: every page hero fits one screen (100svh), type scales with the screen height, mobile gets a full-bleed photo with the copy anchored below ---- */
@media (min-width:981px){
  .ihero:not(.ihero--plain){min-height:clamp(560px,100svh,960px)}
  .ihero:not(.ihero--plain) .ihero__in{min-height:inherit;padding-top:calc(var(--header-h) + clamp(14px,2.6svh,36px));padding-bottom:clamp(44px,7.5svh,76px)}
  .ihero__copy{max-width:min(700px,60%)}
  .ihero h1{font-size:clamp(2rem,min(3.9vw,6.3svh),3.6rem);margin-bottom:.4em}
  .ihero .lead{max-width:36em;margin-bottom:.9rem;font-size:clamp(1rem,min(1.3vw,2.4svh),1.26rem);line-height:1.5}
  .ihero__copy>p:not(.lead){margin-bottom:.5rem;font-size:clamp(.9rem,2svh,1.02rem);line-height:1.5}
  .ihero .crumbs{margin-bottom:clamp(10px,2.4svh,28px)}
  .ihero .btn-row{margin-top:clamp(.8rem,2.4svh,1.6rem)}
  .hero{min-height:clamp(520px,calc(100svh - var(--header-h) - 16px),900px);display:flex;align-items:center}
  .hero__inner{min-height:0;width:100%;padding-block:clamp(24px,5svh,56px)}
  .hero h1{font-size:clamp(2.2rem,min(4.6vw,7.4svh),4.1rem)}
}
@media (max-width:980px){
  .ihero:not(.ihero--plain){min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end}
  .ihero:not(.ihero--plain) .ihero__media{position:absolute;inset:0 0 auto 0;width:100%;height:58%;z-index:0;-webkit-mask-image:linear-gradient(180deg,#000 30%,transparent);mask-image:linear-gradient(180deg,#000 30%,transparent)}
  .ihero:not(.ihero--plain) .ihero__media::after{display:none}
  .ihero:not(.ihero--plain) .ihero__in{position:relative;display:block;min-height:0;padding-top:calc(var(--header-h) + 24svh);padding-bottom:clamp(30px,6svh,48px)}
  .ihero:not(.ihero--plain) .ihero__in::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,16,74,0) 0%,rgba(0,16,74,.82) 34%,#00104A 66%)}
  .ihero .crumbs,.ihero__copy>p:not(.lead){display:none}
  .ihero h1{font-size:clamp(1.8rem,7.4vw,2.6rem);margin-bottom:.45em}
  .ihero .lead{font-size:1rem;line-height:1.5;margin-bottom:1.1rem;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
  .ihero .btn-row{margin-top:0}
  .hero{min-height:100svh}
  .hero__media{height:min(clamp(200px,48vw,360px),32svh)}
  .hero__inner{padding-block:20px 28px}
}
@media (min-width:981px){
  .hero h1{font-size:clamp(2.1rem,min(4.2vw,6.5svh),4.1rem)}
  .hero .lead{font-size:clamp(1rem,min(1.4vw,2.5svh),1.3rem);margin-bottom:clamp(1rem,3svh,2rem)}
}
@media (max-width:980px){
  .hero{min-height:calc(100svh - var(--header-h) - 12px)}
  .hero__media{height:min(clamp(180px,44vw,320px),26svh)}
  .hero h1{font-size:clamp(1.9rem,8vw,2.6rem)}
  .hero .lead{font-size:1rem;line-height:1.5;margin-bottom:1.1rem}
}
@media (max-width:760px){
  .ihero:not(.ihero--plain) .ihero__in{padding-bottom:88px}
  .hero__inner{padding-bottom:88px}
}

/* ---- dropdown photos: thumbnail on every card, photo on top of the prompt card ---- */
.nav__thumb{display:block;overflow:hidden;background:#DDF0FB}
.nav__thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.nav__cards a:hover .nav__thumb img,.nav__cards a:focus-visible .nav__thumb img{transform:scale(1.1)}
@media (min-width:1181px){
  .nav__cards a{grid-template-columns:128px minmax(0,1fr) 44px;gap:18px;padding:10px 16px 10px 10px;border-radius:24px}
  .nav__thumb{align-self:stretch;min-height:104px;border-radius:16px}
  .nav__photo{position:relative;align-self:stretch;height:150px;margin:-22px -24px 18px;overflow:hidden;clip-path:polygon(0 0,100% 0,100% 86%,0 100%)}
  .nav__photo .nav__img{position:static;display:block;width:100%;height:100%;object-fit:cover;z-index:auto;transition:transform 1.2s var(--ease)}
  .nav__feature:hover .nav__photo .nav__img{transform:scale(1.06)}
  .nav__art{display:none}
  .nav__tag{margin-top:6px}
}
@media (max-width:1180px){
  .nav__cards a{grid-template-columns:64px minmax(0,1fr);gap:0 14px;align-items:center}
  .nav__thumb{width:64px;height:64px;border-radius:14px}
}

/* ---- WhatsApp button v2: 3D. Lit from above: gloss, bevel, a solid lower edge that gives it thickness, and it presses down when clicked. Still static. ---- */
.wa-fab{overflow:visible;background:linear-gradient(165deg,#5CEB95 0%,#25D366 42%,#12A24B 100%);box-shadow:inset 0 2px 1px rgba(255,255,255,.65),inset 0 -4px 6px rgba(0,86,34,.4),0 6px 0 #0B7F3C,0 12px 14px -2px rgba(0,16,74,.38),0 22px 26px -10px rgba(0,16,74,.35);transform:translateY(0)}
.wa-fab::before{content:"";position:absolute;z-index:0;top:3px;left:9px;right:9px;height:46%;border-radius:999px 999px 60% 60%/999px 999px 100% 100%;background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,.05));pointer-events:none}
.wa-fab svg{position:relative;z-index:1;filter:drop-shadow(0 2px 0 rgba(0,84,32,.55)) drop-shadow(0 4px 3px rgba(0,60,24,.35))}
.wa-fab__tip{position:relative;z-index:1;text-shadow:0 1px 0 rgba(0,84,32,.5)}
@media (hover:hover){.wa-fab:hover{transform:translateY(-3px);box-shadow:inset 0 2px 1px rgba(255,255,255,.7),inset 0 -4px 6px rgba(0,86,34,.4),0 9px 0 #0B7F3C,0 18px 18px -2px rgba(0,16,74,.4),0 30px 30px -12px rgba(0,16,74,.35)}}
.wa-fab:active{transform:translateY(5px);box-shadow:inset 0 2px 1px rgba(255,255,255,.5),inset 0 -2px 4px rgba(0,86,34,.4),0 1px 0 #0B7F3C,0 4px 6px -1px rgba(0,16,74,.4)}

/* ---- header Contact button v2: orange pill, white arrow chip, navy (or white over the hero) floods out from the chip on hover ---- */
.site-header .hd .hd__cta{min-height:52px;padding:5px 5px 5px 26px;gap:16px;border:0;border-radius:999px;background:linear-gradient(100deg,#EE6F23 0%,#FF9248 100%);color:#fff;font-weight:600;box-shadow:0 12px 22px -14px rgba(238,111,35,.9);transition:color .45s var(--ease),transform .55s var(--ease)}
.site-header .hd .hd__cta::before{content:"";position:absolute;z-index:-1;inset:auto;right:5px;top:50%;width:42px;height:42px;margin-top:-21px;border-radius:50%;background:#00104A;transform:scale(.88);transition:transform .8s var(--ease)}
.site-header .hd .hd__cta .i-arrow{flex:none;width:42px;height:42px;padding:12px;border-radius:50%;background:#fff!important;color:var(--accent)!important;stroke-width:2.2;transform:rotate(-45deg);transition:transform .55s var(--ease),background-color .4s,color .4s}
.site-header .hd .hd__cta:hover{background:linear-gradient(100deg,#EE6F23 0%,#FF9248 100%);color:#fff;transform:translateY(-2px)}
.site-header .hd .hd__cta:hover::before{transform:scale(14)}
.site-header .hd .hd__cta:hover .i-arrow{background:#fff!important;color:#00104A!important;transform:rotate(0) translateX(2px)}
.site-header--over:not(.is-stuck) .hd .hd__cta,.site-header--over:not(.is-stuck) .hd .hd__cta:hover{background:linear-gradient(100deg,#EE6F23 0%,#FF9248 100%)}
.site-header--over:not(.is-stuck) .hd .hd__cta::before{background:#fff}
.site-header--over:not(.is-stuck) .hd .hd__cta:hover{color:#00104A}
.site-header--over:not(.is-stuck) .hd .hd__cta:hover .i-arrow{background:var(--accent)!important;color:#00104A!important}
.site-header .hd .hd__cta:focus-visible{outline:3px solid #00104A;outline-offset:3px}
.site-header--over:not(.is-stuck) .hd .hd__cta:focus-visible{outline-color:#fff}
@media (prefers-reduced-motion:reduce){.site-header .hd .hd__cta,.site-header .hd .hd__cta::before,.site-header .hd .hd__cta .i-arrow{transition:none}}

/* ---- legal pages: summary cards, sticky contents card, numbered section cards, WhatsApp callout ---- */
.lg-chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:1.2rem 0 0;padding:0}
.lg-chips li{padding:8px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#fff;font:600 .88rem/1 var(--font-body)}
.lg-glance{padding-block:clamp(40px,5vw,72px)}
.lg-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.lg-card{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;gap:8px;padding:26px 24px 28px;border:1px solid var(--rule);border-radius:20px;background:#fff;box-shadow:0 18px 36px -30px rgba(0,16,74,.4);transition:transform .6s var(--ease),box-shadow .6s var(--ease),border-color .35s}
.lg-card b{font:600 2.4rem/1 var(--font-body);color:transparent;-webkit-text-stroke:1.5px var(--accent-icon);letter-spacing:-.02em}
.lg-card strong{margin-top:6px;font:600 1.18rem/1.2 var(--font-body);color:var(--navy)}
.lg-card span{font-size:.96rem;line-height:1.5;color:var(--muted)}
.lg-card::after{content:"";position:absolute;z-index:-1;right:-44px;top:-44px;width:130px;aspect-ratio:1;border-radius:50%;background:var(--sun-soft);opacity:0;transform:scale(.3);transition:transform .8s var(--ease),opacity .45s}
@media (hover:hover){.lg-card:hover{transform:translateY(-6px);border-color:rgba(4,45,90,.28);box-shadow:0 30px 44px -26px rgba(0,16,74,.5)}.lg-card:hover::after{opacity:1;transform:scale(1)}}
.lg-body{padding-top:clamp(36px,5vw,64px)}
.lg-grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
.lg-nav{position:sticky;top:calc(var(--header-h) + 24px);padding:22px;border:1px solid var(--rule);border-radius:22px;background:#fff;box-shadow:0 24px 44px -34px rgba(0,16,74,.45)}
.lg-nav>strong{display:block;margin-bottom:12px;font:600 1rem var(--font-body);color:var(--navy)}
.lg-nav ol{list-style:none;margin:0;padding:0;display:grid;gap:2px;max-height:calc(100svh - var(--header-h) - 250px);overflow:auto}
.lg-nav a:not(.lg-nav__wa){display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:12px;color:var(--muted);text-decoration:none;font-size:.94rem;font-weight:500;transition:background-color .3s,color .3s}
.lg-nav a b{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--sky);font:600 .74rem var(--font-body);color:var(--navy);transition:background-color .3s,color .3s}
.lg-nav a:not(.lg-nav__wa):hover{background:var(--sky);color:var(--navy)}
.lg-nav a.is-active{background:var(--sun-soft);color:var(--navy);font-weight:600}
.lg-nav a.is-active b{background:var(--accent);color:#00104A}
.lg-nav__wa{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px;padding:14px 16px;border-radius:16px;background:#0B7F3C;color:#fff;font:600 .9rem/1.3 var(--font-body);text-decoration:none;transition:background-color .3s,transform .5s var(--ease)}
.lg-nav__wa:hover{background:#096a33;color:#fff;transform:translateY(-2px)}
.lg-nav__wa .i{flex:none;width:18px;height:18px;transform:rotate(-45deg)}
.lg-main{display:grid;gap:18px;min-width:0}
.lg-sec{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:76px minmax(0,1fr);gap:8px 20px;padding:clamp(24px,3vw,36px);border:1px solid var(--rule);border-radius:24px;background:#fff;box-shadow:0 20px 40px -34px rgba(0,16,74,.4);scroll-margin-top:calc(var(--header-h) + 24px);transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.lg-num{font:600 2.6rem/1 var(--font-body);color:transparent;-webkit-text-stroke:1.5px var(--accent-icon);letter-spacing:-.02em}
.lg-sec__body{min-width:0}
.lg-sec h2{margin:.1em 0 .5em;font:600 clamp(1.4rem,2.3vw,1.9rem)/1.15 var(--font-body);letter-spacing:-.02em;color:var(--navy)}
.lg-sec p{margin:0 0 1em;font-size:1.04rem;line-height:1.65;color:var(--ink)}
.lg-sec p:last-child{margin-bottom:0}
.lg-sec a:not(.btn){color:var(--accent-text);text-decoration-thickness:1px;text-underline-offset:3px}
.lg-sec ul{list-style:none;margin:0 0 1em;padding:0;display:grid;gap:10px}
.lg-sec ul li{position:relative;padding-left:32px;line-height:1.55}
.lg-sec ul li::before{content:"";position:absolute;left:0;top:.15em;width:20px;height:20px;border-radius:50%;background:var(--sun-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23CC3600' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat}
.lg-sec .table-wrap{margin:0 0 1em;border-radius:14px;border:1px solid var(--rule)}
.lg-sec--contact{background:linear-gradient(135deg,#05508F 0%,#00104A 100%);border-color:transparent;color:#fff}
.lg-sec--contact .lg-num{-webkit-text-stroke-color:#FFC9A3}
.lg-sec--contact h2{color:#fff}
.lg-callout{display:grid;gap:22px;justify-items:start}
.lg-sec--contact .lg-callout p{color:rgba(255,255,255,.92);font-size:1.12rem}
.lg-sec--contact .btn--sun{--fill:#fff;--fill-ink:#00104A;--chip-h:var(--accent);--chip-h-ink:#fff}
.lg-callout dl{margin:0;display:grid;grid-template-columns:repeat(3,auto);gap:12px 36px;justify-content:start}
.lg-callout dt{font:600 .78rem var(--font-body);color:#FFC9A3;margin-bottom:4px}
.lg-callout dd{margin:0;font-size:.98rem;color:#fff}
.lg-sec--contact a:not(.btn){color:#fff}
.lg-other{margin:6px 0 0;font-size:1rem;color:var(--muted)}
.lg-other a{color:var(--accent-text);font-weight:600}
@media (hover:hover){.lg-sec:not(.lg-sec--contact):hover{transform:translateY(-4px);box-shadow:0 30px 48px -30px rgba(0,16,74,.45)}}
@media (max-width:1100px){.lg-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.lg-grid{grid-template-columns:1fr}.lg-nav{position:static}.lg-nav ol{max-height:none;grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.lg-cards{grid-template-columns:1fr}.lg-nav ol{grid-template-columns:1fr}.lg-sec{grid-template-columns:1fr;padding:22px 20px}.lg-num{font-size:2rem}.lg-callout dl{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.lg-card,.lg-sec{transition:none}}
.lg-sec table{width:100%;table-layout:fixed}
.lg-sec thead th:nth-child(1){width:31%}.lg-sec thead th:nth-child(2){width:44%}.lg-sec thead th:nth-child(3){width:25%}
.lg-sec th,.lg-sec td{padding:14px 16px;vertical-align:top;font-size:.96rem;line-height:1.5}
@media (max-width:640px){.lg-sec .table-wrap{overflow-x:auto}.lg-sec table{min-width:560px}}
.lg-sec th,.lg-sec td{white-space:normal;overflow-wrap:break-word;word-break:normal}.lg-sec tbody th{width:auto}

/* ---- popup: always fully visible in one screen, compacting step by step as the window gets shorter ---- */
.popup{max-height:calc(100dvh - 16px)}
@media (max-height:680px){
  .popup .form{gap:8px}
  .popup .form .row{grid-template-columns:1fr 1fr;gap:10px}
  .popup .field{gap:3px}
  .popup .field label,.popup .chips legend{font-size:.78rem}
  .popup .field input,.popup .field select{min-height:40px;padding:6px 12px;font-size:.96rem;border-radius:10px}
  .popup .field .err{font-size:.74rem}
  .pchip span{min-height:34px;padding:4px 12px;font-size:.82rem}
  .chips__list{gap:6px}
  .popup .chips legend{margin-bottom:4px}
  .popup .consent{font-size:.74rem;line-height:1.3;gap:8px}
  .popup .consent input{width:18px;height:18px}
  .pop__main{padding:12px 18px 14px}
  .pop__bar{margin-bottom:8px}
  .popup .btn--lg{--cs:44px;min-height:54px}
  .popup__fine{display:none}
}
@media (max-height:600px){
  .popup .form{gap:6px}
  .popup .field input,.popup .field select{min-height:36px;padding-block:4px;font-size:.92rem}
  .pchip span{min-height:30px;padding:3px 10px;font-size:.78rem}
  .popup .consent{font-size:.7rem}
  .popup .btn--lg{--cs:38px;min-height:46px;font-size:.96rem}
  .pop__side{padding-block:10px 8px}
  .pop__side h2{font-size:1.2rem}
}
@media (max-height:420px) and (min-width:560px){
  .popup .chips{display:none}
  .popup .consent{font-size:.66rem}
}
.pop__tag::before{display:none}.pop__tag{padding:6px 14px}

/* ---- dropdown v3: a short, wide panel (about 190px tall instead of 370px). Two compact link cards, one compact photo card. ---- */
@media (min-width:1181px){
  .nav__drop{width:min(840px,100%);grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:10px;padding:10px;border-radius:26px}
  .nav__cards{gap:8px}
  .nav__cards a{grid-template-columns:76px minmax(0,1fr) 38px;gap:14px;padding:8px 12px 8px 8px;border-radius:20px;min-height:0}
  .nav__thumb{width:76px;height:76px;min-height:0;align-self:center;border-radius:14px}
  .nav__cards strong{font-size:1.06rem;line-height:1.2}
  .nav__cards small{margin-top:2px;font-size:.84rem;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .nav__cards .i-go{width:38px;height:38px;padding:11px}
  .nav__cards a::after{right:-24px;bottom:-56px;width:110px}
  .nav__feature{display:flex;align-items:stretch;justify-content:flex-start;min-height:0;padding:0;border-radius:20px}
  .nav__photo{position:relative;flex:none;width:132px;height:auto;margin:0;align-self:stretch;clip-path:polygon(0 0,100% 0,88% 100%,0 100%)}
  .nav__photo .nav__img{position:absolute;inset:0;width:100%;height:100%}
  .nav__copy{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:14px 18px 14px 6px}
  .nav__tag{margin:0 0 6px;font-size:.78rem}
  .nav__feature strong{margin:0 0 12px;font-size:1.12rem;line-height:1.18}
  .nav__feature p{display:none}
  .nav__book{padding:4px 4px 4px 14px;gap:10px;font-size:.84rem}
  .nav__book .i-arrow{width:30px;height:30px;padding:8px}
}
@media (min-width:1181px){.nav__photo .nav__img{z-index:auto;background:#00104A}}
@media (min-width:1181px){.nav__feature{flex-direction:row}}

/* ---- CTAs v12: labels never wrap, hero buttons sit side by side, ghost matches primary height ---- */
.btn:not(.hd__cta){white-space:nowrap;text-align:left}
.btn-row{flex-wrap:wrap;gap:14px 16px;align-items:center}
@media (min-width:981px){
  .btn--lg:not(.hd__cta){font-size:1rem;padding-left:28px;gap:16px}
  .btn-row .btn--ghost{min-height:64px;padding:0 24px}
  .hero__copy{max-width:min(780px,62%)}
  .ihero__copy{max-width:min(780px,64%)}
  .hero__copy .btn-row,.ihero__copy .btn-row{flex-wrap:nowrap}
  .hero h1,.hero .lead{max-width:min(100%,24em)}
}
@media (max-width:700px){
  .btn:not(.hd__cta){font-size:clamp(.74rem,3.8vw,1rem);gap:10px}
  .btn--lg:not(.hd__cta){--cs:46px;padding-left:20px;min-height:58px}
  .btn-row{flex-direction:column;align-items:stretch;gap:12px}
  .btn-row .btn{width:100%;max-width:100%;justify-content:space-between}
  .btn-row .btn--ghost{min-height:58px;padding:0 20px}
}

/* ---- "What we install" tiles: the whole section (heading + three cards) fits one screen ---- */
@media (min-width:761px){
  .tiles-sec{padding-block:clamp(28px,5.5svh,64px)}
  .tiles-sec .sec-head{margin-bottom:clamp(16px,3svh,32px)}
  .tiles-sec .sec-head h2{font-size:clamp(1.9rem,min(3.2vw,5.4svh),2.8rem);margin-bottom:.25em}
  .tiles-sec .sec-head p{margin:0;max-width:44em;font-size:clamp(.96rem,2.1svh,1.1rem);line-height:1.5}
  .tiles3{gap:clamp(14px,2vw,28px)}
  .tiles3 .tile__media{aspect-ratio:auto;height:clamp(150px,calc(100svh - 590px),400px)}
  .tiles3 .card__body{padding:clamp(14px,2.4svh,22px) clamp(16px,1.6vw,24px) clamp(16px,2.6svh,24px)}
  .tiles3 .tile__n{display:none}
  .tiles3 h3{font-size:clamp(1.3rem,min(1.8vw,3.4svh),1.7rem);margin:0 0 .3em}
  .tiles3 p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:0 0 .8em;font-size:clamp(.92rem,2svh,1.02rem);line-height:1.5}
}
@media (max-width:760px){
  .tiles-sec{padding-block:32px}
  .tiles-sec .sec-head{margin-bottom:16px}
  .tiles-sec .sec-head h2{font-size:clamp(1.7rem,7.4vw,2.2rem)}
  .tiles-sec .sec-head p{margin:0;font-size:.98rem;line-height:1.5}
  .tiles3{grid-template-columns:1fr;gap:12px}
  .tiles3 .tile{flex-direction:row;align-items:stretch}
  .tiles3 .tile__media{flex:none;width:34%;height:auto;aspect-ratio:auto;min-height:118px}
  .tiles3 .card__body{padding:14px 16px;justify-content:center}
  .tiles3 .tile__n{display:none}
  .tiles3 h3{font-size:1.25rem;margin:0 0 .25em}
  .tiles3 p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0 0 .5em;font-size:.9rem;line-height:1.4}
  .tiles3 .link-arrow{font-size:.88rem;gap:8px}
  .tiles3 .link-arrow .i{width:26px;height:26px;padding:7px}
}
@media (min-width:761px){.tiles3 .tile__media{height:clamp(150px,calc(100svh - 625px),400px)}}
@media (max-width:760px){
  .tiles-sec{padding-block:24px}
  .tiles-sec .sec-head{margin-bottom:12px}
  .tiles-sec .sec-head h2{font-size:clamp(1.55rem,7vw,2rem)}
  .tiles-sec .sec-head p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.92rem}
  .tiles3{gap:10px}
  .tiles3 .tile__media{min-height:104px}
  .tiles3 .card__body{padding:10px 14px}
}
@media (max-width:760px) and (max-height:780px){
  .tiles-sec .sec-head p{display:none}
  .tiles3 .link-arrow{display:none}
}
@media (max-width:760px) and (max-height:780px){.tiles3 .tile__media{min-height:96px}.tiles3 p{-webkit-line-clamp:2}.tiles3 .card__body{padding:8px 14px}}
@media (max-width:380px){
  .btn:not(.hd__cta){font-size:3.4vw}
  .btn--lg:not(.hd__cta){--cs:40px;padding-left:16px;gap:8px;min-height:52px}
  .btn-row .btn--ghost{padding:0 16px}
}
@media (min-width:701px){.btn-row .btn.btn--ghost:not(.hd__cta){min-height:64px;padding:0 24px}.btn-row .btn--sm.btn--ghost:not(.hd__cta){min-height:50px}}

/* ---- page colour themes: every page has its own cool gradient pair (sky, indigo, teal, cyan...) used by all its sections ---- */
body{--g1:#38A6FF;--g2:#19C3B1;--h2:#043579;--h3:#0A62AD}
body[data-theme="panels"],body[data-theme="panelInstall"]{--g1:#3BA0FF;--g2:#7AA2FF;--h2:#05358A;--h3:#1062C8}
body[data-theme="batteries"],body[data-theme="batteryInstall"]{--g1:#6C7CFF;--g2:#38BDF8;--h2:#1B2A7A;--h3:#3750C9}
body[data-theme="ev"]{--g1:#19C3B1;--g2:#5BE2A5;--h2:#04485A;--h3:#0B7A75}
body[data-theme="rebates"],body[data-theme="batteryRebate"]{--g1:#38BDF8;--g2:#A5B4FC;--h2:#06456F;--h3:#0B7FA8}
body[data-theme="locations"],body[data-theme="perth"]{--g1:#22D3EE;--g2:#3B82F6;--h2:#04485E;--h3:#0A8AA3}
body[data-theme="about"]{--g1:#818CF8;--g2:#38BDF8;--h2:#1E2F7A;--h3:#3A5BC7}
body[data-theme="privacy"],body[data-theme="terms"]{--g1:#60A5FA;--g2:#2DD4BF;--h2:#0B2D6B;--h3:#1F5AA8}
.sec.sec--paper{background:radial-gradient(900px 520px at 100% 0%,color-mix(in srgb,var(--g2) 22%,transparent),transparent 70%),radial-gradient(700px 420px at 0% 100%,color-mix(in srgb,var(--g1) 14%,transparent),transparent 70%),linear-gradient(180deg,#F8FCFF 0%,color-mix(in srgb,var(--g1) 10%,#F5FAFE) 100%)}
.sec.sec--paper:nth-of-type(even){background:radial-gradient(900px 520px at 0% 0%,color-mix(in srgb,var(--g1) 20%,transparent),transparent 70%),radial-gradient(700px 420px at 100% 100%,color-mix(in srgb,var(--g2) 15%,transparent),transparent 70%),linear-gradient(0deg,#F8FCFF 0%,color-mix(in srgb,var(--g2) 9%,#F5FAFE) 100%)}
.sec.sec--white{background:radial-gradient(900px 520px at 0% 0%,color-mix(in srgb,var(--g1) 17%,transparent),transparent 70%),radial-gradient(700px 420px at 100% 100%,color-mix(in srgb,var(--g2) 12%,transparent),transparent 70%),linear-gradient(180deg,#fff 0%,color-mix(in srgb,var(--g1) 8%,#fff) 100%)}
.sec.sec--white:nth-of-type(even){background:radial-gradient(900px 520px at 100% 0%,color-mix(in srgb,var(--g2) 19%,transparent),transparent 70%),radial-gradient(700px 420px at 0% 100%,color-mix(in srgb,var(--g1) 11%,transparent),transparent 70%),linear-gradient(0deg,#fff 0%,color-mix(in srgb,var(--g2) 8%,#fff) 100%)}
.sec.sec--navy{background:radial-gradient(760px 440px at 100% 0%,color-mix(in srgb,var(--g1) 45%,transparent),transparent 70%),linear-gradient(135deg,var(--h3) 0%,#00104A 100%)}
.cta3{background:radial-gradient(720px 440px at 0% 100%,color-mix(in srgb,var(--g1) 38%,transparent),transparent 70%),radial-gradient(600px 380px at 100% 0%,color-mix(in srgb,var(--g2) 24%,transparent),transparent 70%),linear-gradient(120deg,#00104A 0%,var(--h3) 100%)}
.ihero{background:radial-gradient(820px 480px at 100% 100%,color-mix(in srgb,var(--g2) 30%,transparent),transparent 70%),linear-gradient(115deg,#00104A 0%,var(--h2) 52%,var(--h3) 100%)}
.strip{background:linear-gradient(90deg,#fff 0%,color-mix(in srgb,var(--g1) 10%,#fff) 50%,#fff 100%)}
.site-footer{background:radial-gradient(800px 400px at 100% 0%,color-mix(in srgb,var(--g2) 20%,transparent),transparent 70%),radial-gradient(700px 380px at 0% 100%,color-mix(in srgb,var(--g1) 15%,transparent),transparent 70%),linear-gradient(180deg,#F5FBFF 0%,color-mix(in srgb,var(--g1) 14%,#EAF3FA) 100%)}
.csec__media::before,.contact__photo::before{background:radial-gradient(circle,rgba(0,16,74,.2) 1.4px,transparent 1.6px) 0 0/14px 14px,linear-gradient(135deg,color-mix(in srgb,var(--g1) 24%,#fff),color-mix(in srgb,var(--g2) 30%,#fff))}

/* ---- popup: sunrise scene and trust chips on the side panel (hidden when space is tight) ---- */
.pop__scene{display:block;width:100%;height:auto;max-height:96px;overflow:visible;margin-top:-6px}
.pop__rays{transform-box:fill-box;transform-origin:center;animation:sc-spin 70s linear infinite}
.pop__rays path{fill:none;stroke:#FFC9A3;stroke-opacity:.6;stroke-width:2;stroke-linecap:round}
.pop__chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pop__chips li{padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.12);color:#fff;font:600 .78rem/1 var(--font-body)}
.pop__loc{border-top:0;padding-top:0}
.pop__side{background:radial-gradient(420px 260px at 100% 100%,rgba(34,170,255,.35),transparent 70%),linear-gradient(160deg,#05508F 0%,#00104A 100%)}
@media (max-height:760px),(max-width:720px){.pop__scene,.pop__chips{display:none}}
@media (prefers-reduced-motion:reduce){.pop__rays{animation:none}}
@media (min-width:981px) and (max-width:1239px){.hero__copy .btn-row,.ihero__copy .btn-row{flex-wrap:wrap}}
@media (max-width:760px) and (max-height:780px){.tiles-sec{padding-block:16px}.tiles3{gap:8px}}

/* ---- larger type site-wide: the root size drives every rem value (text, buttons, cards, menus) ---- */
html{font-size:112.5%}
@media (max-width:1023px){html{font-size:106.25%}}
@media (max-width:380px){html{font-size:100%}}
body{line-height:1.6}

/* =====================================================================
   DESIGN v13: editorial, not template.
   What was removed because it reads as AI/template output: pill buttons with circle-arrow chips, frosted floating
   capsule header, blurry radial colour blobs, sun-burst and icon-in-circle decoration, uniform soft-shadow rounded cards.
   What replaces it: small-radius blocks, 2px navy borders, hard offset shadows that "press" on hover, flat colour fields
   with hard-edged diagonal splits (roof pitch), a faint solar-cell grid, and a dark footer.
   ===================================================================== */
:root{--hard:#00104A}
body{--tint:color-mix(in srgb,var(--g1) 13%,#fff);--tint2:color-mix(in srgb,var(--g2) 22%,#fff)}

/* ---------- buttons ---------- */
html .btn:not(.hd__cta),html .site-header .hd .hd__cta{--bg:#FF9248;--ink:#00104A;--bd:#00104A;--sh:#00104A;
  position:relative;isolation:auto;overflow:visible;display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:58px;padding:0 26px;border:2px solid var(--bd);border-radius:6px;background:var(--bg);color:var(--ink);box-shadow:5px 5px 0 var(--sh);
  font:700 1rem/1.1 var(--font-body);letter-spacing:.005em;white-space:nowrap;text-align:left;transition:transform .22s var(--ease),box-shadow .22s var(--ease),background-color .22s,color .22s,border-color .22s}
html .btn:not(.hd__cta)::before,html .site-header .hd .hd__cta::before{content:none}
html .btn--lg:not(.hd__cta){min-height:64px;padding:0 30px;font-size:1.06rem}
html .btn--sm:not(.hd__cta),html .site-header .hd .hd__cta{min-height:48px;padding:0 20px;font-size:.94rem;gap:12px;box-shadow:4px 4px 0 var(--sh)}
html .btn--navy:not(.hd__cta){--bg:#00104A;--ink:#fff;--sh:#FF9248}
html .btn--white:not(.hd__cta){--bg:#fff;--ink:#00104A;--sh:#00104A}
html .btn:not(.hd__cta) .i-arrow,html .btn--lg:not(.hd__cta) .i-arrow,html .btn--sm:not(.hd__cta) .i-arrow,html .site-header .hd .hd__cta .i-arrow{flex:none;width:1.15em;height:1.15em;padding:0;border-radius:0;background:none!important;color:inherit!important;stroke-width:2.6;transform:none;transition:transform .22s var(--ease)}
html .btn:not(.hd__cta):hover,html .site-header .hd .hd__cta:hover{background:var(--bg);color:var(--ink);transform:translate(4px,4px);box-shadow:1px 1px 0 var(--sh)}
html .btn:not(.hd__cta):hover .i-arrow,html .site-header .hd .hd__cta:hover .i-arrow{background:none!important;color:inherit!important;transform:translateX(4px)}
html .btn:not(.hd__cta):focus-visible,html .site-header .hd .hd__cta:focus-visible{outline:3px solid #FFC21F;outline-offset:3px}
/* secondary: outlined block that fills */
html .btn.btn--ghost:not(.hd__cta),html .btn.btn--outline-light:not(.hd__cta){--bg:transparent;--ink:#00104A;--bd:#00104A;--sh:transparent;min-height:58px;padding:0 24px;box-shadow:none;background:transparent;background-image:none}
html .btn--ghost .i{flex:none;width:1.1em;height:1.1em;color:inherit;transform:none}
html .btn.btn--ghost:not(.hd__cta):hover{background:#00104A;color:#fff;border-color:#00104A;transform:none;box-shadow:none}
html .btn.btn--ghost:not(.hd__cta):hover .i{transform:translateX(4px);color:#fff}
/* on dark fields */
html .ihero .btn--sun:not(.hd__cta),html .sec--navy .btn--sun:not(.hd__cta),html .cta3 .btn--sun:not(.hd__cta),html .band .btn--sun:not(.hd__cta),html .ft-banner .btn--sun:not(.hd__cta),html .lg-sec--contact .btn--sun:not(.hd__cta),html .site-header--over:not(.is-stuck) .hd .hd__cta{--bd:#fff;--sh:#fff}
html .ihero .btn--ghost:not(.hd__cta),html .sec--navy .btn--ghost:not(.hd__cta),html .cta3 .btn.btn--ghost:not(.hd__cta),html .band .btn--ghost:not(.hd__cta),html .btn.btn--outline-light:not(.hd__cta){--ink:#fff;--bd:#fff;color:#fff;border-color:#fff}
html .ihero .btn--ghost:not(.hd__cta):hover,html .sec--navy .btn--ghost:not(.hd__cta):hover,html .cta3 .btn.btn--ghost:not(.hd__cta):hover,html .band .btn--ghost:not(.hd__cta):hover,html .btn.btn--outline-light:not(.hd__cta):hover{background:#fff;color:#00104A;border-color:#fff}
html .ihero .btn--ghost:hover .i,html .sec--navy .btn--ghost:hover .i,html .cta3 .btn--ghost:hover .i,html .btn--outline-light:hover .i{color:#00104A}
html .cta3 .btn--sun:not(.hd__cta){--bg:#fff;--ink:#00104A;--bd:#fff;--sh:#FF9248}
.btn-row{gap:16px 22px}
/* text link with arrow */
html .link-arrow{display:inline-flex;align-items:center;gap:10px;padding:0;border:0;color:var(--navy);font-weight:700;text-decoration:underline;text-decoration-color:var(--accent-icon);text-decoration-thickness:2px;text-underline-offset:6px}
html .link-arrow .i{flex:none;width:1.1em;height:1.1em;padding:0;border-radius:0;background:none;color:var(--accent-icon);transform:none;transition:transform .22s var(--ease)}
html .link-arrow:hover{gap:10px;color:var(--navy)}
html .link-arrow:hover .i{background:none;color:var(--accent-icon);transform:translateX(5px)}
@media (max-width:700px){html .btn:not(.hd__cta){justify-content:space-between}}

/* ---------- header: a flush bar, no floating capsule, no blur ---------- */
@media (min-width:1181px){:root{--header-h:92px}}
html .site-header{padding:0}
html .site-header .container.hd{width:100%;max-width:none;margin:0;min-height:var(--header-h);padding:0 clamp(20px,3.2vw,56px);border-radius:0}
html .hd::before{border-radius:0;background:#fff;border:0;border-bottom:2px solid var(--hard);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
html .site-header--over:not(.is-stuck) .hd::before{background:transparent;border-bottom:1px solid rgba(255,255,255,.28)}
html .brand img{width:clamp(210px,17vw,270px)}
@media (max-width:1180px){html .brand img{width:clamp(170px,46vw,220px)}}
@media (min-width:1181px){
  html .nav__pill{border-radius:6px;background:#00104A;animation:none;box-shadow:none}
  html .site-header--over:not(.is-stuck) .nav__pill{background:#fff;animation:none}
  html.has-pill .site-header .nav .nav__item:hover>.nav__link,html.has-pill .site-header .nav .nav__item:focus-within>.nav__link{color:#fff}
  html.has-pill .site-header--over:not(.is-stuck) .nav .nav__item:hover>.nav__link,html.has-pill .site-header--over:not(.is-stuck) .nav .nav__item:focus-within>.nav__link{color:#00104A}
  html .nav__link{font-weight:600}
  html .nav__drop{border-radius:8px;border:2px solid var(--hard);box-shadow:8px 8px 0 var(--hard);padding:10px}
  html .nav__cards a{border-radius:6px;box-shadow:inset 0 0 0 1.5px rgba(0,16,74,.18)}
  html .nav__thumb{border-radius:4px}
  html .nav__feature{border-radius:6px}
  html .nav__book{border-radius:4px}
  html .nav__cards a::after{display:none}
  html .nav__cards a:hover{transform:none;box-shadow:inset 0 0 0 1.5px #00104A}
  html .nav__cards a::before{background:#00104A}
}

/* ---------- section backgrounds: flat colour fields, hard diagonal splits, a faint solar-cell grid ---------- */
.sec.sec--paper{background-color:var(--tint);background-image:linear-gradient(rgba(0,16,74,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,16,74,.05) 1px,transparent 1px);background-size:72px 72px}
.sec.sec--paper:nth-of-type(even){background-color:var(--tint2);background-image:linear-gradient(rgba(0,16,74,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,16,74,.05) 1px,transparent 1px);background-size:72px 72px}
.sec.sec--white{background:linear-gradient(177deg,var(--tint2) 0,var(--tint2) 84px,#fff 84px)}
.sec.sec--white:nth-of-type(even){background:linear-gradient(183deg,var(--tint) 0,var(--tint) 84px,#fff 84px)}
.sec.sec--navy{background:linear-gradient(112deg,#00104A 0,#00104A 66%,var(--h3) 66%,var(--h3) 100%)}
.cta3{background:linear-gradient(105deg,#00104A 0,#00104A 64%,#FF9248 64%,#FF9248 100%)}
.cta3::before{background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px)}
.ihero{background:linear-gradient(112deg,#00104A 0,#00104A 55%,var(--h2) 55%,var(--h2) 100%)}
.strip{background:var(--tint)}
.hero{background:linear-gradient(112deg,#FAF8F5 0,#FAF8F5 58%,var(--tint2) 58%,var(--tint2) 100%)}
@media (max-width:760px){.cta3{background:linear-gradient(180deg,#00104A 0,#00104A 72%,#FF9248 72%,#FF9248 100%)}}
/* the sun on the orange panel is yellow, the roof stays navy */
.cta3 .sc-disc{fill:#FFD23F}.cta3 .sc-halo,.cta3 .sc-halo2{display:none}.cta3 .sc-rays path{stroke:#00104A;stroke-opacity:.35}
/* hero labels: a solid tag, not a floating caption */
.ihero .eyebrow,.hero .eyebrow{display:inline-block;margin-bottom:14px;padding:6px 12px;border-radius:3px;background:#FF9248;color:#00104A;font-weight:700;letter-spacing:.01em}

/* ---------- cards: 2px navy border, small radius, no glow; hover moves the card and shows an orange offset block ---------- */
html .lg-card,html .lg-sec:not(.lg-sec--contact),html .csec--facts .bl li,html .csec--facts .bl--led li,html .tiles3 .card,html .faq details{border:2px solid var(--hard);border-radius:8px;box-shadow:none;background:#fff}
html .lg-sec--contact{border:2px solid var(--hard);border-radius:8px;background:#00104A}
html .stats__item,html .stats__item+.stats__item{border-radius:8px;border:2px solid var(--hard)}
html .pull,html .sec--navy .pull{border:2px solid var(--hard);border-radius:8px;background:var(--tint2)}
html .csec--facts .bl li::before,html .csec--facts .bl li::after,html .stats__item::before,html .stats__item::after,html .pull::before,html .pull::after,html .lg-card::after{display:none}
@media (hover:hover){
  html .lg-card:hover,html .lg-sec:not(.lg-sec--contact):hover,html .csec--facts .bl li:hover,html .csec--facts .bl--led li:hover,html .stats__item:hover,html .pull:hover,html .tiles3 .card:hover,html .faq details:hover{transform:translate(-4px,-4px);border-color:var(--hard);box-shadow:8px 8px 0 #FF9248}
  html .csec--facts .bl li:hover strong{color:var(--hard)}
}
.lg-num,.lg-card b{-webkit-text-stroke:0;color:var(--accent-icon)}
.lg-sec ul li::before{top:.55em;left:4px;width:10px;height:10px;border-radius:2px;background:#FF9248}
.pop__pts li::before{width:10px;height:10px;margin-top:.6em;border-radius:2px;background:#FF9248}
.lg-nav,.lg-nav a:not(.lg-nav__wa),.lg-nav__wa{border-radius:6px}
.lg-nav{border:2px solid var(--hard);box-shadow:none}
.lg-nav a b{border-radius:4px}
.lg-nav__wa{background:#00104A}
.lg-chips li{border-radius:3px}
.table-wrap,.lg-sec .table-wrap{border-radius:6px}

/* ---------- footer: dark, solid, a flat orange rule on top ---------- */
.site-footer{background:#00104A;color:rgba(255,255,255,.86);border-top:0}
.site-footer::before{height:8px;background:#FF9248}
.site-footer::after{display:none}
.ft-head__brand img{width:clamp(280px,22vw,340px)}
.ft-head__brand p{color:rgba(255,255,255,.8)}
.ft-banner{border-radius:8px;border:2px solid #fff}
.site-footer .ft-cols h2{color:#FFC9A3;font-weight:700;font-size:.95rem;letter-spacing:.04em}
.site-footer .ft-cols a{color:rgba(255,255,255,.9)}
.site-footer .ft-cols a:hover,.site-footer .ft-cols a:focus-visible{background-color:#FF9248;color:#00104A;box-shadow:none;border-radius:4px}
.ft-contact{border-block-color:rgba(255,255,255,.25)}
.ft-contact li+li{border-left-color:rgba(255,255,255,.25)}
.ft-contact a{color:#fff}
.ft-contact a::before{background:#FF9248}
.ft-contact small{color:rgba(255,255,255,.7)}
.ft-contact a:hover{color:#00104A}
.ft-contact a:hover small{color:#00104A}
.ft-contact .i-go{border-radius:4px;background:#fff;color:#00104A}
.ft-contact a:hover .i-go{background:#00104A;color:#fff}
.ft-mark{background:none;-webkit-text-fill-color:rgba(255,255,255,.08);color:rgba(255,255,255,.08)}
.ft-mark span{-webkit-text-fill-color:#FF9248;color:#FF9248}
.ft-bar{border-top-color:rgba(255,255,255,.25);color:rgba(255,255,255,.75)}
.ft-bar a{color:#fff}
.site-footer .ft-bar a:hover,.site-footer .ft-bar a:focus-visible{background-color:#FF9248;color:#00104A}
.site-footer .ft-up{border:2px solid #fff;border-radius:4px;background:transparent;color:#fff}
.site-footer .ft-up:hover{background:#FF9248;border-color:#FF9248;color:#00104A}
.site-footer .add{background:rgba(255,146,72,.18);color:#FFE3D0;border-color:rgba(255,201,163,.6)}

/* ---------- WhatsApp: a flat tag, green square with the glyph plus a label ---------- */
html .wa-fab{right:clamp(14px,2vw,28px);bottom:clamp(16px,2vw,28px);height:56px;min-width:0;padding:0 18px 0 0;gap:12px;overflow:visible;border:2px solid var(--hard);border-radius:6px;background:#fff;color:var(--hard);box-shadow:5px 5px 0 var(--hard);transform:none;transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
html .wa-fab::before{content:none}
html .wa-fab svg{width:52px;height:52px;padding:12px;flex:none;border-radius:3px 0 0 3px;background:#25D366;fill:#fff;filter:none}
html .wa-fab__tip{max-width:none;opacity:1;overflow:visible;font:700 .95rem/1 var(--font-body);text-shadow:none;color:var(--hard)}
@media (hover:hover){html .wa-fab:hover{padding:0 18px 0 0;gap:12px;transform:translate(4px,4px);box-shadow:1px 1px 0 var(--hard)}html .wa-fab:hover .wa-fab__tip{max-width:none;opacity:1}}
html .wa-fab:active{transform:translate(5px,5px);box-shadow:0 0 0 var(--hard)}
@media (max-width:760px){html .wa-fab{height:52px;padding:0;gap:0}html .wa-fab svg{width:48px;height:48px;padding:11px;border-radius:3px}html .wa-fab__tip{display:none}}

/* ---------- popup ---------- */
.popup{border-radius:10px}
.popup .field input,.popup .field select{border-radius:6px}
.pchip span{border-radius:4px}
.popup .consent input{border-radius:3px}
html .btn.btn--ghost:not(.hd__cta){--bg:#fff;background:var(--bg)}
html .ihero .btn--ghost:not(.hd__cta),html .sec--navy .btn--ghost:not(.hd__cta),html .cta3 .btn.btn--ghost:not(.hd__cta),html .band .btn--ghost:not(.hd__cta),html .btn.btn--outline-light:not(.hd__cta){--bg:transparent}
html .btn.btn--ghost:not(.hd__cta):hover{background:#00104A}
html .ihero .btn--ghost:not(.hd__cta):hover,html .sec--navy .btn--ghost:not(.hd__cta):hover,html .cta3 .btn.btn--ghost:not(.hd__cta):hover,html .band .btn--ghost:not(.hd__cta):hover,html .btn.btn--outline-light:not(.hd__cta):hover{background:#fff}
@media (min-width:761px){.ft-bar{padding-right:260px}}
@media (min-width:701px){html .tiles3 .tile__media{height:clamp(150px,calc(100svh - 655px),400px)}}
@media (max-width:1180px){html .site-header .hd .hd__cta{display:none}}
@media (max-width:700px){
  html .btn:not(.hd__cta),html .btn--lg:not(.hd__cta){font-size:clamp(.72rem,3.6vw,1.02rem);padding:0 18px;gap:10px;min-height:56px}
  html .btn.btn--ghost:not(.hd__cta){padding:0 18px}
  .hero h1{font-size:clamp(1.75rem,7.2vw,2.4rem)}
  .hero .lead{font-size:.96rem;margin-bottom:.9rem}
  .hero__inner{padding-block:16px 84px}
}
@media (max-width:760px) and (max-height:860px){.tiles-sec .sec-head p{display:none}}
@media (min-width:701px){html .tiles3 .tile__media{height:clamp(150px,calc(100svh - 668px),400px)}}

/* footer wordmark: each letter takes its own brand colour and lifts when the pointer passes over it */
.ft-mark{padding-top:.08em;overflow:hidden}
.ft-l{display:inline-block;font-style:normal;-webkit-text-fill-color:rgba(255,255,255,.1);color:rgba(255,255,255,.1);transition:-webkit-text-fill-color .35s,color .35s,transform .6s var(--ease)}
.ft-l:nth-child(1){--c:#FF9248}.ft-l:nth-child(2){--c:#FFD23F}.ft-l:nth-child(3){--c:#38A6FF}.ft-l:nth-child(4){--c:#19C3B1}.ft-l:nth-child(5){--c:#FF9248}.ft-l:nth-child(6){--c:#FFD23F}.ft-l:nth-child(7){--c:#38A6FF}
@media (hover:hover){.ft-l:hover{-webkit-text-fill-color:var(--c);color:var(--c);transform:translateY(-.05em)}}
@media (prefers-reduced-motion:reduce){.ft-l{transition:none}.ft-l:hover{transform:none}}
.ft-mark{pointer-events:auto;cursor:default}.ft-mark span{pointer-events:none}

/* ---- popup v4: same language as the rest of the site. Navy dialog with an orange offset block, a diagonal orange foot on the side panel, square fields that lift on focus ---- */
html .popup{border:2px solid #00104A;border-radius:8px;background:#fff;box-shadow:12px 12px 0 #FF9248}
.popup::backdrop{background:rgba(0,16,74,.78);-webkit-backdrop-filter:none;backdrop-filter:none}
html .pop__side{--pp:clamp(26px,3.2vw,40px);background:#00104A;padding:var(--pp);padding-bottom:0;gap:20px}
html .pop__side::before{display:none}
html .pop__tag{align-self:flex-start;padding:6px 12px;border-radius:3px;background:#FF9248;color:#00104A;font-weight:700;font-size:.8rem}
html .pop__side h2{font-size:clamp(1.9rem,2.9vw,2.6rem);line-height:1.05}
.pop__foot{position:relative;margin:auto calc(var(--pp) * -1) 0;padding:34px var(--pp) 22px;background:#FF9248;clip-path:polygon(0 22px,100% 0,100% 100%,0 100%);display:grid;gap:10px}
.pop__foot .pop__scene{margin:-6px 0 0;max-height:84px}
.pop__foot .pop__scene circle{fill:#FFD23F}
.pop__foot .pop__rays path{stroke:#00104A;stroke-opacity:.4}
.pop__foot .pop__loc{margin:0;padding:0;border:0;color:#00104A;font-weight:700}
.pop__foot .pop__loc .i{stroke:#00104A}
html .pop__title span{font-size:1.3rem;font-weight:700;color:#00104A}
html .popup__close{width:42px;height:42px;border:2px solid #00104A;border-radius:4px;background:#fff;color:#00104A;transform:none;transition:background-color .2s,transform .2s,box-shadow .2s}
html .popup__close:hover{background:#FF9248;color:#00104A;transform:none}
html .popup .field label,html .popup .chips legend{font-weight:700;color:#00104A}
html .popup .field input,html .popup .field select{border:2px solid #00104A;border-radius:4px;background-color:#fff;transition:box-shadow .18s,transform .18s}
html .popup .field input:focus,html .popup .field select:focus{outline:0;border-color:#00104A;box-shadow:4px 4px 0 #FF9248;transform:translate(-2px,-2px)}
html .popup .field input:hover,html .popup .field select:hover{border-color:#00104A}
html .pchip span{border:2px solid #00104A;border-radius:4px;font-weight:600;background:#fff}
html .pchip input:checked+span{background:#00104A;border-color:#00104A;color:#fff;box-shadow:3px 3px 0 #FF9248}
html .pchip:hover span{border-color:#00104A;background:#FFEBDD}
html .pchip input:checked+span:hover{background:#00104A}
html .popup .consent input{accent-color:#00104A}
html .popup .btn{width:100%;justify-content:space-between}
html .popup__fine a{color:#00104A;font-weight:700}
@media (max-width:720px),(max-height:760px){.pop__foot{display:none}html .pop__side{padding-bottom:var(--pp)}}
@media (max-width:720px){html .popup{box-shadow:6px 6px 0 #FF9248}html .pop__side{padding:20px 64px 16px 22px}}
.pop__art{display:none}

/* =====================================================================
   CARDS v14: each card type has one clear hover that changes its colours, not just its shadow.
   Fact and summary cards invert to navy, stat cards flip to orange, photo tiles darken their text panel and show an arrow tag.
   ===================================================================== */
html .csec--facts .bl{counter-reset:fact}
html .csec--facts .bl li{counter-increment:fact;position:relative;overflow:hidden;padding:24px 24px 26px;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background-color .25s,color .25s,border-color .25s}
html .csec--facts .bl li::before{display:block;content:counter(fact,decimal-leading-zero);position:static;width:auto;height:auto;margin:0 0 12px;padding:0;border:0;background:none;color:var(--accent-text);font:700 .85rem/1 var(--font-body);letter-spacing:.08em;transition:color .25s}
html .csec--facts .bl li strong{transition:color .25s}
html .csec--facts .bl li,html .lg-card{color:var(--ink)}
@media (hover:hover){
  html .csec--facts .bl li:hover,html .csec--facts .bl--led li:hover,html .lg-card:hover{background:#00104A;color:rgba(255,255,255,.88);border-color:#00104A}
  html .csec--facts .bl li:hover strong,html .csec--facts .bl--led li:hover strong,html .lg-card:hover strong{color:#fff}
  html .csec--facts .bl li:hover::before,html .lg-card:hover b{color:#FFC9A3}
  html .csec--facts .bl li:hover span,html .lg-card:hover span{color:rgba(255,255,255,.88)}
  html .stats__item:hover{background:#FF9248;border-color:#00104A}
  html .stats__item:hover *{color:#00104A}
  html .pull:hover,html .sec--navy .pull:hover{background:#00104A;color:#fff}
  html .pull:hover *{color:#fff}
  html .tiles3 .card:hover .card__body{background:#00104A}
  html .tiles3 .card:hover .card__body h3,html .tiles3 .card:hover .card__body p,html .tiles3 .card:hover .card__body .link-arrow{color:#fff}
  html .tiles3 .card:hover .tile__media img{transform:scale(1.06)}
}
html .tiles3 .card .card__body{transition:background-color .25s,color .25s}
html .tiles3 .card .card__body h3,html .tiles3 .card .card__body p,html .tiles3 .card .card__body .link-arrow{transition:color .25s}
html .tile .tile__media::after{content:"\2197";position:absolute;z-index:2;right:0;top:0;width:46px;height:46px;display:grid;place-items:center;border-radius:0;background:#FF9248;color:#00104A;font:700 1.3rem/1 var(--font-body);opacity:0;transform:translate(10px,-10px);transition:opacity .25s,transform .25s var(--ease)}
@media (hover:hover){html .tile:hover .tile__media::after{opacity:1;transform:none}}
html .faq details{transition:background-color .2s,transform .25s var(--ease),box-shadow .25s var(--ease)}
html .faq details[open]{background:var(--tint)}
html .faq summary:hover{color:var(--accent-text)}
html .lg-card{transition:transform .25s var(--ease),box-shadow .25s var(--ease),background-color .25s,color .25s,border-color .25s}
html .lg-card strong,html .lg-card span,html .lg-card b{transition:color .25s}
html .lg-sec:not(.lg-sec--contact){transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
html .stats__item{transition:transform .25s var(--ease),box-shadow .25s var(--ease),background-color .25s}
html .stats__item *{transition:color .25s}
html .pull{transition:transform .25s var(--ease),box-shadow .25s var(--ease),background-color .25s,color .25s}

/* =====================================================================
   FAQ v15: every item is the same block (the old :last-child rule gave the final one a lighter border).
   Numbered question, square plus/minus key, open item gets an orange offset block.
   ===================================================================== */
html .faq{display:grid;gap:12px;counter-reset:q}
html .faq details,html .faq details:first-child,html .faq details:last-child{counter-increment:q;border:2px solid #00104A;border-bottom:2px solid #00104A;border-top:2px solid #00104A;border-radius:8px;background:#fff;padding:0 22px;box-shadow:none;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background-color .2s}
html .faq details[open],html .faq details[open]:last-child{background:var(--tint);border-color:#00104A;box-shadow:6px 6px 0 #FF9248;transform:translate(-3px,-3px)}
html .faq summary{display:grid;grid-template-columns:auto minmax(0,1fr) 36px;gap:16px;align-items:center;padding:20px 0;font:700 1.08rem/1.35 var(--font-body);letter-spacing:0;color:#00104A;cursor:pointer;list-style:none}
html .faq summary::-webkit-details-marker{display:none}
html .faq summary::before{content:counter(q,decimal-leading-zero);font:700 .85rem/1 var(--font-body);letter-spacing:.08em;color:var(--accent-text)}
html .faq summary::after{content:"";width:36px;height:36px;border:2px solid #00104A;border-radius:4px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300104A' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/16px no-repeat;transform:none;transition:background-color .2s}
html .faq details[open] summary::after{transform:none;background:#FF9248 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300104A' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E") center/16px no-repeat}
html .faq summary:hover{color:#00104A}
html .faq summary:hover::after{background-color:#FFEBDD}
html .faq details[open] summary:hover::after{background-color:#FF9248}
html .faq .faq__a{padding:0 0 22px 46px;font-size:1.02rem;line-height:1.65;color:var(--ink);max-width:none;animation:faq-in .3s var(--ease)}
html .faq .faq__a a{color:var(--accent-text);font-weight:600}
@keyframes faq-in{from{opacity:0;transform:translateY(-6px)}}
@media (hover:hover){html .faq details:not([open]):hover,html .faq details:not([open]):last-child:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 #FF9248;border-color:#00104A}}
@media (max-width:600px){html .faq details{padding:0 16px}html .faq summary{grid-template-columns:minmax(0,1fr) 36px;gap:12px;font-size:1rem}html .faq summary::before{display:none}html .faq .faq__a{padding-left:0}}
@media (prefers-reduced-motion:reduce){html .faq .faq__a{animation:none}}

/* =====================================================================
   "On this page" bar v16: navy label tag, square tabs with a numbered key, active tab filled navy. Scrolls sideways with a fade, and now shows on phones too.
   ===================================================================== */
html .toc{background:#fff;border-bottom:2px solid #00104A;box-shadow:none}
html .toc__in{gap:14px;padding-block:10px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);scroll-padding-inline:16px}
html .toc__label{flex:none;padding:8px 12px;border-radius:3px;background:#00104A;color:#fff;font:700 .8rem/1 var(--font-body);letter-spacing:.02em}
html .toc ol{gap:6px}
html .toc a{align-items:center;gap:10px;max-width:20rem;padding:8px 14px 8px 8px;border:2px solid transparent;border-radius:4px;color:#00104A;font:600 .92rem/1.2 var(--font-body);transition:background-color .2s,color .2s,border-color .2s}
html .toc a b{flex:none;display:grid;place-items:center;min-width:24px;height:24px;padding:0 4px;border-radius:3px;background:#FF9248;color:#00104A;font:700 .78rem/1 var(--font-body)}
html .toc a:hover{background:var(--tint);border-color:#00104A;color:#00104A}
html .toc a.is-active{background:#00104A;border-color:#00104A;color:#fff}
html .toc a.is-active b{background:#FF9248;color:#00104A}
@media (max-width:760px){
  html .toc{display:block}
  html .toc__label{display:none}
  html .toc__in{gap:8px;padding-block:8px}
  html .toc a{max-width:13rem;padding:7px 10px 7px 7px;font-size:.86rem}
}

/* sticky offsets follow the compact (stuck) header height, 62px, so the contents bar sits flush under it */
html .toc{top:62px}
@media (min-width:901px){html .csec__head.sec-head{top:calc(62px + 66px + 28px)}html .csec__media{top:calc(62px + 66px + 28px)}}
html .lg-nav{top:calc(62px + 24px)}
html .contact__aside{top:calc(62px + 28px)}
html .toc a{max-width:none;overflow:visible;text-overflow:clip}

/* ---- images: show whole subjects, never a thin slice ---- */
@media (min-width:761px){
  html .tiles3 .tile__media{height:auto;aspect-ratio:4/3}
  html .tiles3 .tile__media img{object-position:center 40%}
  html .tiles3 p{-webkit-line-clamp:2}
  html .tiles3 .card__body{padding:14px 20px 18px}
  html .tiles-sec{padding-block:clamp(24px,4svh,48px)}
  html .tiles-sec .sec-head{margin-bottom:14px}
  html .tiles-sec .sec-head p{display:none}
}
@media (max-width:760px){
  html .tiles3 .tile__media{width:38%;min-height:132px}
  html .tiles3 .tile__media img{object-position:center 35%}
}
html .hero__media img{object-position:62% center}
@media (max-width:980px){html .hero__media{height:min(clamp(210px,56vw,340px),30svh)}html .hero__media img{object-position:60% 55%}}
html .bleed__img img{object-position:center 55%}
@media (max-width:700px){html .bleed{height:clamp(240px,62vw,360px)}}
@media (max-width:700px){html .bleed{height:clamp(190px,46vw,300px)}}

/* ---- mid-page conversion strip: a navy ribbon with an orange wedge, copy left, buttons right ---- */
.midcta{position:relative;padding:0;background:#00104A;color:#fff;overflow:hidden;isolation:isolate}
.midcta::before{content:"";position:absolute;z-index:-1;top:0;right:0;bottom:0;width:34%;background:#FF9248;clip-path:polygon(22% 0,100% 0,100% 100%,0 100%)}
.midcta__in{display:grid;grid-template-columns:minmax(0,1.3fr) auto;gap:20px 48px;align-items:center;padding-block:clamp(28px,4vw,44px)}
.midcta h2{margin:0 0 .3em;color:#fff;font:700 clamp(1.5rem,2.6vw,2.2rem)/1.12 var(--font-body);letter-spacing:-.02em}
.midcta p{margin:0;max-width:40em;color:rgba(255,255,255,.88);font-size:1.02rem;line-height:1.55}
.midcta .btn-row{flex-wrap:nowrap}
html .midcta .btn--sun:not(.hd__cta){--bd:#fff;--sh:#fff}
html .midcta .btn.btn--ghost:not(.hd__cta){--ink:#00104A;--bg:#fff;--bd:#00104A;background:#fff;color:#00104A;border-color:#00104A}
html .midcta .btn.btn--ghost:not(.hd__cta):hover{background:#00104A;color:#fff;border-color:#fff}
@media (max-width:1100px){.midcta__in{grid-template-columns:1fr}.midcta::before{width:100%;top:auto;height:46%;clip-path:polygon(0 30%,100% 0,100% 100%,0 100%);opacity:.0}.midcta .btn-row{flex-wrap:wrap}}
@media (max-width:700px){.midcta .btn-row{flex-direction:column;align-items:stretch}}
.midcta::before{width:clamp(0px,calc((100vw - 1200px) / 2 + 28px),260px);clip-path:polygon(34% 0,100% 0,100% 100%,0 100%)}
.midcta .midcta__in{opacity:1!important;transform:none!important}
@media (max-width:1100px){.midcta::before{display:none}}

/* =====================================================================
   CARDS v17: one grid rhythm (gap 20px, padding 28px, radius 12px), equal heights, content pinned top-to-bottom.
   Hover is a soft lift, a tinted fill and the number turning into a filled marker. No navy inversion, no offset blocks.
   ===================================================================== */
html .csec--facts .bl,html .lg-cards,html .stats,html .tiles3{align-items:stretch}
html .csec--facts .bl{gap:20px}
html .csec--facts .bl li,html .csec--facts .bl--led li,html .lg-card,html .tiles3 .card,html .stats__item,html .stats__item+.stats__item,html .pull,html .contact-card{
  border:1.5px solid rgba(0,16,74,.18);border-radius:12px;background:#fff;box-shadow:0 1px 0 rgba(0,16,74,.04),0 12px 26px -22px rgba(0,16,74,.4);color:var(--ink);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .25s,background-color .25s}
html .csec--facts .bl li,html .csec--facts .bl--led li{display:flex;flex-direction:column;gap:10px;height:100%;padding:28px 28px 30px;transform:none;overflow:visible}
html .csec--facts .bl li::before{align-self:flex-start;display:grid;place-items:center;min-width:34px;height:34px;margin:0 0 6px;padding:0 8px;border-radius:8px;background:var(--sun-soft);color:#00104A;font:700 .85rem/1 var(--font-body);letter-spacing:.04em;transition:background-color .25s,color .25s}
html .csec--facts .bl li strong,html .csec--facts .bl--led li strong{display:block;margin:0 0 4px;color:#00104A;font:700 1.12rem/1.3 var(--font-body)}
html .csec--facts .bl li span{color:var(--muted);line-height:1.6}
html .lg-card{height:100%;padding:28px 26px 30px;gap:10px}
html .lg-card b{display:grid;place-items:center;align-self:flex-start;min-width:34px;height:34px;padding:0 8px;border-radius:8px;background:var(--sun-soft);color:#00104A;font:700 .85rem/1 var(--font-body);-webkit-text-stroke:0;transition:background-color .25s}
html .lg-card strong{margin-top:4px;color:#00104A}
html .lg-card span{color:var(--muted)}
html .stats__item,html .stats__item+.stats__item{background:#00104A;border-color:#00104A;padding:26px 26px 28px;height:100%;box-shadow:0 14px 28px -20px rgba(0,16,74,.7)}
html .stats__item *{color:inherit}
html .pull,html .sec--navy .pull{padding:28px 32px;background:var(--tint2);border-color:rgba(0,16,74,.18)}
html .tiles3 .card{display:flex;flex-direction:column;height:100%;overflow:hidden}
html .tiles3 .card .card__body{background:#fff;padding:20px 22px 22px;gap:0}
html .tiles3 .card .card__body h3{color:#00104A}
html .tiles3 .card .card__body p{color:var(--muted)}
html .tile .tile__media::after{display:none}
@media (hover:hover){
  html .csec--facts .bl li:hover,html .csec--facts .bl--led li:hover,html .lg-card:hover,html .tiles3 .card:hover,html .contact-card:hover{transform:translateY(-6px);background:var(--tint);border-color:rgba(0,16,74,.55);box-shadow:0 28px 40px -24px rgba(0,16,74,.5)}
  html .csec--facts .bl li:hover::before,html .lg-card:hover b{background:#FF9248;color:#00104A}
  html .csec--facts .bl li:hover strong,html .csec--facts .bl--led li:hover strong,html .lg-card:hover strong{color:#00104A}
  html .csec--facts .bl li:hover span,html .lg-card:hover span{color:var(--ink)}
  html .stats__item:hover{transform:translateY(-6px);background:#00104A;border-color:#00104A;box-shadow:0 30px 44px -22px rgba(0,16,74,.8)}
  html .stats__item:hover b,html .stats__item:hover dd b{color:#FFC9A3}
  html .pull:hover{transform:translateY(-4px);background:var(--tint2);color:inherit;box-shadow:0 24px 36px -24px rgba(0,16,74,.45)}
  html .pull:hover *{color:inherit}
  html .tiles3 .card:hover .card__body{background:transparent}
  html .tiles3 .card:hover .card__body h3{color:var(--accent-text)}
  html .tiles3 .card:hover .card__body p{color:var(--ink)}
  html .tiles3 .card:hover .link-arrow .i{background:#FF9248;color:#00104A;transform:translateX(4px)}
  html .tiles3 .card:hover .tile__media img{transform:scale(1.05)}
}
html .tiles3 .link-arrow{margin-top:auto;padding-top:14px}
html .tiles3 .link-arrow .i{background:var(--sun-soft);color:#00104A}
@media (prefers-reduced-motion:reduce){html .csec--facts .bl li,html .lg-card,html .tiles3 .card,html .stats__item,html .pull{transition:none}}

/* ---- images: one shot. No image is taller than the visible window (below the header and contents bar) ---- */
html .csec__media img,html .contact__photo img{width:100%;height:auto;max-height:calc(100svh - 190px);object-fit:cover}
html .figure img{width:100%;height:auto;max-height:calc(100svh - 190px);object-fit:contain;background:#fff}
@media (max-width:900px){html .csec__media img,html .figure img,html .contact__photo img{max-height:calc(100svh - 150px)}}
html .csec--facts .bl li::before{position:static;inset:auto;left:auto;top:auto;transform:none;content:counter(fact,decimal-leading-zero)}
html .csec--facts .bl li::after{display:none}
@media (hover:hover){html .tiles3 .card:hover .card__body .link-arrow{color:#00104A}html .tiles3 .card:hover .card__body .link-arrow{text-decoration-color:var(--accent-icon)}}
html .tiles3 .card .card__body .link-arrow{color:#00104A}
@media (hover:hover){html .csec--facts .bl li:hover::before{margin:0 0 6px;transform:none;left:auto;position:static;width:auto}}

/* contents bar: padding inside the scroller (so the first tab is never flush against the clip), edge fades only where tabs continue */
html .toc__in{padding-inline:max(var(--gutter,20px),calc((100vw - 1200px) / 2));-webkit-mask-image:none;mask-image:none;scroll-padding-inline:24px}
html .toc__in.has-right{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent)}
html .toc__in.has-left{-webkit-mask-image:linear-gradient(90deg,transparent,#000 56px);mask-image:linear-gradient(90deg,transparent,#000 56px)}
html .toc__in.has-left.has-right{-webkit-mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent)}
html .toc__label{position:sticky;left:0}

/* stat cards: light text on navy (the shared card rule had made the small lines inherit dark ink) */
html .stats__item,html .stats__item+.stats__item,html .sec--navy .stats__item{color:#fff}
html .stats__item *{color:inherit}
html .stats__item dt,html .stats__item p,html .stats__item span:not(.u),html .stats__item small{color:rgba(255,255,255,.88)}
html .stats__item b,html .stats__item dd b,html .stats__item strong{color:#fff}
html .stats__item small,html .stats__item dd small{color:#FFC9A3}
@media (hover:hover){html .stats__item:hover dt,html .stats__item:hover p,html .stats__item:hover span{color:rgba(255,255,255,.95)}html .stats__item:hover b,html .stats__item:hover dd b{color:#fff}html .stats__item:hover small,html .stats__item:hover dd small{color:#FFC9A3}}

/* ---- footer wordmark v2: outlined letters; the one under the pointer fills with its colour, lifts and casts a solid shadow, neighbours lean away ---- */
.ft-mark{padding-top:.12em;padding-bottom:.05em;cursor:default}
.ft-l{--c:#FF9248;--d:#C25A14;-webkit-text-fill-color:transparent;color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.28);transition:-webkit-text-fill-color .3s,-webkit-text-stroke-color .3s,transform .45s var(--ease),text-shadow .3s}
.ft-l:nth-child(1){--c:#FF9248;--d:#C25A14}.ft-l:nth-child(2){--c:#FFD23F;--d:#B88A00}.ft-l:nth-child(3){--c:#5CB8FF;--d:#1F6FB8}.ft-l:nth-child(4){--c:#35D4C2;--d:#12877B}.ft-l:nth-child(5){--c:#FF9248;--d:#C25A14}.ft-l:nth-child(6){--c:#FFD23F;--d:#B88A00}.ft-l:nth-child(7){--c:#5CB8FF;--d:#1F6FB8}
@media (hover:hover){
  .ft-l:hover{-webkit-text-fill-color:var(--c);color:var(--c);-webkit-text-stroke-color:var(--c);transform:translateY(-.07em);text-shadow:.04em .05em 0 var(--d)}
  .ft-l:hover+.ft-l{transform:translateX(.025em) rotate(1.5deg)}
  .ft-l:has(+ .ft-l:hover){transform:translateX(-.025em) rotate(-1.5deg)}
  .ft-mark:hover .ft-l:not(:hover){-webkit-text-stroke-color:rgba(255,255,255,.42)}
}
@media (prefers-reduced-motion:reduce){.ft-l,.ft-l:hover+.ft-l,.ft-l:has(+ .ft-l:hover){transform:none!important;transition:none}}
.lg-num,.lg-card b{color:#B8500F}

/* ---- mobile and tablet: one sticky line, always on. WhatsApp left, Book Assessment right. The floating WhatsApp tag is hidden here. ---- */
@media (max-width:1023px){
  html .sticky-cta{position:fixed;inset:auto 0 0 0;z-index:95;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:10px;align-items:center;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:#fff;border-top:2px solid #00104A;transform:none;transition:none}
  html .sticky-cta .btn,html .sticky-cta .btn--sm{width:100%;min-height:52px;padding:0 12px;gap:8px;justify-content:center;font-size:clamp(.82rem,3.6vw,1rem);white-space:nowrap;box-shadow:3px 3px 0 #00104A}
  html .sticky-cta .btn--sun{--sh:#00104A;--bd:#00104A;justify-content:space-between;padding:0 14px}
  html .sticky-cta .sticky-cta__wa{--bg:#25D366;--ink:#00104A;--bd:#00104A;--sh:#00104A;background:#25D366;color:#00104A;border:2px solid #00104A;font-weight:700}
  html .sticky-cta .sticky-cta__wa:hover{background:#25D366;color:#00104A}
  html .sticky-cta__wa svg{flex:none;width:24px;height:24px;fill:currentColor}
  html .wa-fab{display:none}
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  html .site-footer .ft-bar{padding-right:0}
}
@media (min-width:1024px){html .sticky-cta{display:none}}
@media (max-width:1023px){html .hero__inner{padding-bottom:104px}html .ihero:not(.ihero--plain) .ihero__in{padding-bottom:104px}html .hero,html .ihero:not(.ihero--plain){min-height:100svh}}
@media (max-width:1023px){
  html .hero__media{height:min(clamp(170px,44vw,300px),24svh)}
  html .hero h1{font-size:clamp(1.6rem,6.6vw,2.2rem);margin-bottom:.35em}
  html .hero .lead{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;font-size:.94rem;line-height:1.45;margin-bottom:.9rem}
  html .hero__inner{padding-top:14px}
}
@media (max-width:1023px) and (max-height:760px){html .hero .lead{-webkit-line-clamp:3}html .hero .eyebrow{margin-bottom:8px}}

/* =====================================================================
   GLASS v18: every CTA is a frosted pane (translucent fill, backdrop blur, bright top edge, soft inner shade).
   Buttons never move on hover: hover only changes the glass (fill, edge light, shadow). No translate, no offset-shadow shuffle, no icon slide.
   ===================================================================== */
html .btn:not(.hd__cta),html .site-header .hd .hd__cta,html .sticky-cta .btn{
  --g-fill:linear-gradient(180deg,rgba(255,178,128,.95) 0%,rgba(245,122,44,.86) 100%);--g-fill-h:linear-gradient(180deg,rgba(255,196,152,.98) 0%,rgba(250,136,60,.92) 100%);--g-ink:#00104A;--g-edge:rgba(255,255,255,.7);--g-shadow:rgba(185,80,10,.55);
  background:var(--g-fill);color:var(--g-ink);border:1.5px solid var(--g-edge);border-radius:12px;
  -webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -12px 18px -8px rgba(160,60,0,.28),0 12px 26px -12px var(--g-shadow);
  transition:background .3s,box-shadow .3s,border-color .3s,color .3s}
html .btn:not(.hd__cta)::after,html .site-header .hd .hd__cta::after{content:"";position:absolute;inset:1px 1px 52% 1px;border-radius:10px 10px 40% 40%/10px 10px 22px 22px;background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0));pointer-events:none}
html .btn:not(.hd__cta):hover,html .btn:not(.hd__cta):active,html .btn:not(.hd__cta):focus-visible,html .site-header .hd .hd__cta:hover,html .sticky-cta .btn:hover{transform:none!important;background:var(--g-fill-h);color:var(--g-ink);border-color:rgba(255,255,255,.95);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -12px 18px -8px rgba(160,60,0,.2),0 16px 30px -12px var(--g-shadow)}
html .btn:not(.hd__cta) .i-arrow,html .btn:not(.hd__cta):hover .i-arrow,html .site-header .hd .hd__cta .i-arrow,html .site-header .hd .hd__cta:hover .i-arrow{transform:none!important;transition:none}
html .btn--ghost .i,html .btn--ghost:hover .i,html .btn--outline-light .i,html .btn--outline-light:hover .i{transform:none!important;transition:none}
/* secondary: clear glass */
html .btn.btn--ghost:not(.hd__cta),html .btn.btn--outline-light:not(.hd__cta){--g-fill:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.5));--g-fill-h:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.75));--g-edge:rgba(0,16,74,.38);--g-shadow:rgba(0,16,74,.35);color:#00104A;background:var(--g-fill)}
html .btn.btn--ghost:not(.hd__cta):hover,html .btn.btn--outline-light:not(.hd__cta):hover{background:var(--g-fill-h);color:#00104A;border-color:#00104A}
html .btn--ghost:not(.hd__cta)::after{opacity:.6}
/* on dark fields the secondary pane is smoked glass */
html .ihero .btn.btn--ghost:not(.hd__cta),html .sec--navy .btn.btn--ghost:not(.hd__cta),html .cta3 .btn.btn--ghost:not(.hd__cta),html .band .btn.btn--ghost:not(.hd__cta),html .btn.btn--outline-light:not(.hd__cta){--g-fill:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.08));--g-fill-h:linear-gradient(180deg,rgba(255,255,255,.36),rgba(255,255,255,.16));--g-edge:rgba(255,255,255,.55);color:#fff;background:var(--g-fill)}
html .ihero .btn.btn--ghost:not(.hd__cta):hover,html .sec--navy .btn.btn--ghost:not(.hd__cta):hover,html .cta3 .btn.btn--ghost:not(.hd__cta):hover,html .band .btn.btn--ghost:not(.hd__cta):hover,html .btn.btn--outline-light:not(.hd__cta):hover{background:var(--g-fill-h);color:#fff;border-color:rgba(255,255,255,.95)}
html .ihero .btn--ghost:hover .i,html .sec--navy .btn--ghost:hover .i,html .cta3 .btn--ghost:hover .i{color:#fff}
/* white and navy variants */
html .btn--white:not(.hd__cta),html .cta3 .btn--sun:not(.hd__cta),html .cta3 .btn--white:not(.hd__cta){--g-fill:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.78));--g-fill-h:linear-gradient(180deg,#fff,rgba(255,255,255,.92));--g-edge:rgba(255,255,255,.95);--g-shadow:rgba(0,16,74,.5);color:#00104A;background:var(--g-fill)}
html .btn--navy:not(.hd__cta){--g-fill:linear-gradient(180deg,rgba(18,48,120,.92),rgba(0,16,74,.92));--g-fill-h:linear-gradient(180deg,rgba(30,64,150,.96),rgba(0,16,74,.96));--g-ink:#fff;--g-edge:rgba(255,255,255,.35);--g-shadow:rgba(0,16,74,.7);color:#fff;background:var(--g-fill)}
html .site-header--over:not(.is-stuck) .hd .hd__cta{--g-edge:rgba(255,255,255,.8)}
/* mobile bar */
html .sticky-cta .sticky-cta__wa{--g-fill:linear-gradient(180deg,rgba(94,232,146,.95),rgba(37,211,102,.86));--g-fill-h:linear-gradient(180deg,rgba(120,240,166,.98),rgba(46,222,112,.92));--g-shadow:rgba(10,120,60,.5);background:var(--g-fill);color:#00104A}
html .sticky-cta .sticky-cta__wa:hover{background:var(--g-fill-h)}
html .sticky-cta{background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);border-top:1px solid rgba(0,16,74,.18)}
html .sticky-cta .btn,html .sticky-cta .btn--sm{box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -12px 18px -8px rgba(160,60,0,.28),0 10px 20px -12px var(--g-shadow)}
/* floating WhatsApp: glass tag with a green glass key; no movement on hover */
html .wa-fab{border:1.5px solid rgba(255,255,255,.8);border-radius:14px;background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(16px) saturate(1.6);backdrop-filter:blur(16px) saturate(1.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 16px 30px -14px rgba(0,16,74,.55);transition:background .3s,box-shadow .3s}
html .wa-fab svg{background:linear-gradient(180deg,rgba(94,232,146,.98),rgba(30,190,92,.92));border-radius:11px 0 0 11px;box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
@media (hover:hover){html .wa-fab:hover,html .wa-fab:active{transform:none;padding:0 18px 0 0;gap:12px;background:rgba(255,255,255,.85);box-shadow:inset 0 1px 0 #fff,0 20px 34px -14px rgba(0,16,74,.6)}}
@media (max-width:760px){html .wa-fab svg{border-radius:11px}}
/* other relevant surfaces */
html .site-header.is-stuck .hd::before{background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6)}
html .site-header--over:not(.is-stuck) .hd::before{background:rgba(0,16,74,.22);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid rgba(255,255,255,.3)}
html .toc{background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5)}
html .ihero .eyebrow,html .hero .eyebrow{background:linear-gradient(180deg,rgba(255,178,128,.95),rgba(245,122,44,.86));border:1px solid rgba(255,255,255,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.7);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
html .nav__feature .nav__book{background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.9)}
html .lg-chips li{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.4);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
html .midcta{background:linear-gradient(112deg,#00104A 0%,#0A2A6E 100%)}
html .ft-banner__in{background:rgba(0,16,74,.45);-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3);border-radius:10px}
html .popup__close{background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
@media (prefers-reduced-motion:reduce){html .btn:not(.hd__cta),html .wa-fab{transition:none}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){html .btn.btn--ghost:not(.hd__cta){background:#fff}html .wa-fab{background:#fff}html .sticky-cta{background:#fff}}

/* contents bar: the "On this page" tag scrolls with the tabs (it was sticky and covered them) */
html .toc__label{position:static;left:auto;z-index:auto}

/* =====================================================================
   CTA v19: solid, flat, confident at rest. The glass appears only on hover: the fill turns to frosted glass, the edge lights up and a pane of light
   sweeps across. The button itself never moves.
   ===================================================================== */
html .btn:not(.hd__cta),html .site-header .hd .hd__cta{
  --bg:#FF9248;--ink:#00104A;--bd:#00104A;--gl:rgba(255,146,72,.5);--gl-bd:rgba(255,255,255,.95);--gl-ink:#00104A;
  position:relative;overflow:hidden;isolation:isolate;background:var(--bg);color:var(--ink);border:2px solid var(--bd);border-radius:10px;
  -webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);box-shadow:none;
  transition:background-color .35s,color .35s,border-color .35s,-webkit-backdrop-filter .35s,backdrop-filter .35s,box-shadow .35s}
/* the sweeping pane of light */
html .btn:not(.hd__cta)::after,html .site-header .hd .hd__cta::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(105deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.7) 48%,rgba(255,255,255,.25) 56%,rgba(255,255,255,0) 70%);background-size:260% 100%;background-position:135% 0;transition:background-position .9s cubic-bezier(.2,.7,.2,1)}
html .btn:not(.hd__cta):hover::after,html .btn:not(.hd__cta):focus-visible::after,html .site-header .hd .hd__cta:hover::after{background-position:-35% 0}
/* hover = frosted glass, no movement */
html .btn:not(.hd__cta):hover,html .btn:not(.hd__cta):focus-visible,html .btn:not(.hd__cta):active,html .site-header .hd .hd__cta:hover{
  transform:none!important;background:var(--gl);color:var(--gl-ink);border-color:var(--gl-bd);
  -webkit-backdrop-filter:blur(12px) saturate(1.7);backdrop-filter:blur(12px) saturate(1.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(255,255,255,.35),0 18px 34px -16px rgba(0,16,74,.55)}
/* secondary: transparent at rest, white glass on hover */
html .btn.btn--ghost:not(.hd__cta),html .btn.btn--outline-light:not(.hd__cta){--bg:transparent;--ink:#00104A;--bd:#00104A;--gl:rgba(255,255,255,.55);--gl-bd:#00104A;--gl-ink:#00104A;background:transparent}
/* dark fields */
html .ihero .btn.btn--ghost:not(.hd__cta),html .sec--navy .btn.btn--ghost:not(.hd__cta),html .cta3 .btn.btn--ghost:not(.hd__cta),html .band .btn.btn--ghost:not(.hd__cta),html .midcta .btn.btn--ghost:not(.hd__cta),html .btn.btn--outline-light:not(.hd__cta){--ink:#fff;--bd:rgba(255,255,255,.85);--gl:rgba(255,255,255,.22);--gl-bd:#fff;--gl-ink:#fff;color:#fff;background:transparent}
html .ihero .btn--sun:not(.hd__cta),html .sec--navy .btn--sun:not(.hd__cta),html .band .btn--sun:not(.hd__cta),html .ft-banner .btn--sun:not(.hd__cta),html .midcta .btn--sun:not(.hd__cta),html .lg-sec--contact .btn--sun:not(.hd__cta),html .site-header--over:not(.is-stuck) .hd .hd__cta{--bd:#fff;--gl:rgba(255,146,72,.42);--gl-ink:#fff}
/* white and navy variants */
html .btn--white:not(.hd__cta),html .cta3 .btn--sun:not(.hd__cta),html .cta3 .btn--white:not(.hd__cta){--bg:#fff;--ink:#00104A;--bd:#fff;--gl:rgba(255,255,255,.4);--gl-ink:#fff;--gl-bd:#fff}
html .btn--navy:not(.hd__cta){--bg:#00104A;--ink:#fff;--bd:#00104A;--gl:rgba(0,16,74,.55);--gl-ink:#fff;--gl-bd:rgba(255,255,255,.7)}
/* arrows are static */
html .btn:not(.hd__cta) .i-arrow,html .btn:not(.hd__cta):hover .i-arrow,html .btn--ghost .i,html .btn--ghost:hover .i{transform:none!important;transition:none}
/* mobile bar and header keep the same behaviour */
html .sticky-cta .btn{box-shadow:none}
html .sticky-cta .sticky-cta__wa{--bg:#3DDC84;--gl:rgba(61,220,132,.5);--gl-ink:#00104A}
html .sticky-cta .btn:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 14px 26px -14px rgba(0,16,74,.5)}
@media (prefers-reduced-motion:reduce){html .btn:not(.hd__cta)::after{transition:none}}

/* =====================================================================
   CTA v20: premium, no outlines. Depth comes from a soft gradient, a bright top edge (inset light) and a coloured shadow, not from drawn lines.
   Secondary buttons are tinted glass panels. Text links lose their underline; the arrow sits in a soft tint.
   Hero buttons wrap below each other inside a safe column so they never run over the photo.
   ===================================================================== */
html .btn:not(.hd__cta),html .site-header .hd .hd__cta{
  --bg:linear-gradient(180deg,#FFA766 0%,#FF8B40 100%);--ink:#1A0F00;--gl:rgba(255,150,80,.48);--gl-ink:#00104A;
  border:0;border-radius:14px;background:var(--bg);color:var(--ink);letter-spacing:.005em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 0 rgba(190,80,10,.18),0 12px 26px -12px rgba(230,100,20,.7)}
html .btn--lg:not(.hd__cta){min-height:62px;padding:0 30px}
html .btn:not(.hd__cta):hover,html .btn:not(.hd__cta):focus-visible,html .btn:not(.hd__cta):active,html .site-header .hd .hd__cta:hover{
  border:0;background:var(--gl);color:var(--gl-ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.55),0 20px 36px -16px rgba(0,16,74,.5)}
html .btn:not(.hd__cta):focus-visible{outline:3px solid #00104A;outline-offset:3px}
/* secondary: tinted glass panel, no border */
html .btn.btn--ghost:not(.hd__cta),html .btn.btn--outline-light:not(.hd__cta){
  --bg:rgba(255,255,255,.72);--ink:#00104A;--gl:rgba(255,255,255,.92);--gl-ink:#00104A;
  border:0;background:var(--bg);-webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 10px 24px -14px rgba(0,16,74,.45)}
html .btn.btn--ghost:not(.hd__cta):hover,html .btn.btn--outline-light:not(.hd__cta):hover{border:0;background:var(--gl);box-shadow:inset 0 1px 0 #fff,0 18px 32px -16px rgba(0,16,74,.55)}
html .ihero .btn.btn--ghost:not(.hd__cta),html .sec--navy .btn.btn--ghost:not(.hd__cta),html .cta3 .btn.btn--ghost:not(.hd__cta),html .band .btn.btn--ghost:not(.hd__cta),html .midcta .btn.btn--ghost:not(.hd__cta),html .btn.btn--outline-light:not(.hd__cta){
  --bg:rgba(255,255,255,.14);--ink:#fff;--gl:rgba(255,255,255,.28);--gl-ink:#fff;border:0;background:var(--bg);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 10px 24px -14px rgba(0,0,0,.6)}
html .ihero .btn.btn--ghost:not(.hd__cta):hover,html .sec--navy .btn.btn--ghost:not(.hd__cta):hover,html .cta3 .btn.btn--ghost:not(.hd__cta):hover,html .band .btn.btn--ghost:not(.hd__cta):hover,html .midcta .btn.btn--ghost:not(.hd__cta):hover,html .btn.btn--outline-light:not(.hd__cta):hover{background:var(--gl);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 18px 32px -16px rgba(0,0,0,.6)}
/* dark fields: primary keeps the orange, hover glass stays warm */
html .ihero .btn--sun:not(.hd__cta),html .sec--navy .btn--sun:not(.hd__cta),html .band .btn--sun:not(.hd__cta),html .ft-banner .btn--sun:not(.hd__cta),html .midcta .btn--sun:not(.hd__cta),html .lg-sec--contact .btn--sun:not(.hd__cta),html .site-header--over:not(.is-stuck) .hd .hd__cta{--gl:rgba(255,150,80,.4);--gl-ink:#fff}
/* white and navy variants */
html .btn--white:not(.hd__cta),html .cta3 .btn--sun:not(.hd__cta),html .cta3 .btn--white:not(.hd__cta){--bg:linear-gradient(180deg,#fff,#EEF3FA);--ink:#00104A;--gl:rgba(255,255,255,.4);--gl-ink:#fff;box-shadow:inset 0 1px 0 #fff,0 12px 26px -12px rgba(0,0,0,.55)}
html .btn--navy:not(.hd__cta){--bg:linear-gradient(180deg,#163A86,#00104A);--ink:#fff;--gl:rgba(0,16,74,.55);--gl-ink:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 12px 26px -12px rgba(0,16,74,.7)}
/* mobile bar */
html .sticky-cta{border-top:0;box-shadow:0 -10px 30px -18px rgba(0,16,74,.5)}
html .sticky-cta .btn{box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 8px 18px -10px rgba(230,100,20,.7)}
html .sticky-cta .sticky-cta__wa{--bg:linear-gradient(180deg,#5BE79A,#2FCF78);--gl:rgba(61,220,132,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 8px 18px -10px rgba(10,130,70,.7)}
/* floating WhatsApp and popup chips: no outlines */
html .wa-fab{border:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 16px 30px -14px rgba(0,16,74,.55)}
/* text links: no underline, soft tint under the arrow */
html .link-arrow,html .tiles3 .card .card__body .link-arrow{text-decoration:none;border:0;background-image:none}
html .tiles3 .link-arrow .i{background:rgba(255,146,72,.22);color:#B8500F;border-radius:8px;width:30px;height:30px;padding:8px}
@media (hover:hover){html .tiles3 .card:hover .link-arrow .i{background:#FF9248;color:#00104A;transform:none}}
/* hero: buttons stay in a safe column (clear of the photo) and stack when two do not fit */
@media (min-width:981px){
  html .hero__copy .btn-row,html .ihero__copy .btn-row{flex-wrap:wrap;max-width:460px;gap:14px}
  html .hero__copy .btn-row .btn,html .ihero__copy .btn-row .btn{max-width:100%}
}

/* mobile and tablet bar: two equal buttons, same height, content centred */
@media (max-width:1023px){
  html .sticky-cta{grid-template-columns:1fr 1fr;gap:10px}
  html .sticky-cta .btn,html .sticky-cta .btn--sm,html .sticky-cta .btn--sun{width:100%;min-height:54px;height:54px;padding:0 10px;justify-content:center;gap:10px;font-size:clamp(.84rem,3.7vw,1rem)}
}
@media (max-width:380px){html .sticky-cta .btn--sun .i-arrow{display:none}html .sticky-cta .btn{font-size:.8rem;gap:6px;padding:0 8px}}
/* hero button pairs: identical width and height, stacked, safely left of the photo */
@media (min-width:981px){
  html .hero__copy .btn-row,html .ihero__copy .btn-row{display:grid;grid-template-columns:1fr;width:min(100%,430px);max-width:430px;gap:14px}
  html .hero__copy .btn-row .btn,html .ihero__copy .btn-row .btn{width:100%;min-height:62px;height:62px;justify-content:space-between;padding:0 26px}
}
@media (max-width:980px){html .hero__copy .btn-row .btn,html .ihero__copy .btn-row .btn{min-height:58px;height:58px}}

/* ---- "next step" panel: replaces plain cross-link sentences. A label block, one line of copy, one clear link. ---- */
.nextbar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px 26px;margin:clamp(28px,4vw,48px) 0 0;padding:14px 14px 14px 14px;border-radius:16px;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 18px 36px -24px rgba(0,16,74,.5)}
.nextbar__tag{align-self:stretch;display:grid;align-items:center;padding:0 22px;border-radius:11px;background:linear-gradient(180deg,#FFA766,#FF8B40);color:#1A0F00;font:700 .98rem/1.2 var(--font-body);box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}
.nextbar p{margin:0;font-size:1.04rem;line-height:1.5;color:var(--ink)}
.nextbar__link{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 22px;border-radius:12px;background:#00104A;color:#fff;font:700 .96rem/1 var(--font-body);text-decoration:none;white-space:nowrap;box-shadow:inset 0 1px 0 rgba(255,255,255,.28);transition:background-color .3s,box-shadow .3s}
.nextbar__link .i{flex:none;width:1.1em;height:1.1em;stroke-width:2.4;color:#FFC9A3}
.nextbar__link:hover{background:rgba(0,16,74,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 14px 26px -14px rgba(0,16,74,.6)}
.csec__body .nextbar,.prose .nextbar{margin-top:1.6em}
@media (max-width:900px){.nextbar{grid-template-columns:1fr;gap:12px;padding:16px}.nextbar__tag{padding:12px 16px}.nextbar__link{justify-content:space-between;width:100%}}
.prose p .nextbar{display:grid}
html .nextbar a.nextbar__link,html .prose .nextbar a.nextbar__link{color:#fff;text-decoration:none;border:0;background-image:none}
html .prose .nextbar,html .csec__body .nextbar{grid-template-columns:1fr;gap:12px;padding:16px}
html .prose .nextbar .nextbar__tag{justify-self:start;padding:10px 16px}
html .prose .nextbar .nextbar__link{justify-self:start}
html .prose .nextbar p{max-width:none}

/* ---- breadcrumb: quiet, one line, chevron separators, current page in full white. The label under it is now the page's own descriptor, never a repeat of the crumb. ---- */
html .crumbs{margin-bottom:16px;font:500 .9rem/1.2 var(--font-body);letter-spacing:0;text-transform:none}
html .crumbs ol{gap:2px 0;align-items:center}
html .crumbs li{gap:0;color:rgba(255,255,255,.72)}
html .crumbs li+li::before{content:"";width:6px;height:6px;margin:0 12px;border-top:1.6px solid currentColor;border-right:1.6px solid currentColor;transform:rotate(45deg);opacity:.55;color:inherit;background:none;font-size:0}
html .crumbs a{color:rgba(255,255,255,.9);padding:4px 0;text-decoration:none;transition:color .2s}
html .crumbs a:hover{color:#FFC9A3}
html .crumbs li[aria-current]{color:#fff;font-weight:700}
html .hero .crumbs li,html .sec .crumbs li{color:var(--muted)}
html .hero .crumbs a,html .sec .crumbs a{color:var(--navy)}
html .ihero .eyebrow,html .hero .eyebrow{margin-bottom:16px;padding:7px 14px;border-radius:8px;font-size:.84rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}

/* =====================================================================
   HERO v21. One system for every page.
   Copy column (breadcrumb, tag, H1, one-sentence lead, two buttons of equal size, three proof points) on the left.
   The photo is a separate column with a hard diagonal edge, so text and buttons can never run over it.
   Everything fits one screen (100svh) from 1280x720 up; on phones the photo sits on top and the copy below.
   ===================================================================== */
@media (min-width:981px){
  html .ihero:not(.ihero--plain),html .hero{min-height:clamp(560px,100svh,940px);background:#00104A}
  html .ihero:not(.ihero--plain) .ihero__in,html .hero__inner{min-height:inherit;display:flex;align-items:center;padding-top:calc(var(--header-h) + clamp(10px,2svh,28px));padding-bottom:clamp(36px,6svh,64px)}
  html .ihero__copy,html .hero__copy{max-width:min(640px,calc(54vw - max(var(--gutter,24px),(100vw - 1200px) / 2) - 28px));position:relative;z-index:3}
  html .ihero__media,html .hero__media{position:absolute;top:0;right:0;bottom:0;left:auto;width:46vw;max-width:860px;z-index:1;-webkit-mask-image:none;mask-image:none;clip-path:polygon(15% 0,100% 0,100% 100%,0 100%)}
  html .ihero__media img,html .hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 35%}
  html .ihero__media::after,html .hero__media::after{display:none}
  html .hero{background:#FAF8F5}
  html .ihero h1,html .hero h1{max-width:none;font-size:clamp(2rem,min(3.5vw,5.6svh),3.35rem);line-height:1.06;letter-spacing:-.022em;margin:0 0 .45em}
  html .ihero .lead,html .hero .lead{max-width:34em;margin:0 0 clamp(18px,3svh,28px);font-size:clamp(1.02rem,min(1.3vw,2.5svh),1.22rem);line-height:1.55;display:block;overflow:visible}
  html .ihero .btn-row,html .hero .btn-row{display:flex;flex-wrap:wrap;gap:14px;width:100%;max-width:640px;margin:0}
  html .ihero .btn-row .btn,html .hero .btn-row .btn{flex:1 1 0;min-width:236px;width:auto;height:62px;min-height:62px;padding:0 24px;justify-content:space-between}
}
/* proof points: three short facts, a small orange square each, no boxes, no lines */
.hproof{list-style:none;display:flex;flex-wrap:wrap;gap:10px 26px;margin:clamp(18px,3.2svh,28px) 0 0;padding:0}
.hproof li{position:relative;padding-left:18px;font:600 .9rem/1.3 var(--font-body);color:rgba(255,255,255,.88)}
.hproof li::before{content:"";position:absolute;left:0;top:.42em;width:8px;height:8px;border-radius:2px;background:#FF9248}
.hero .hproof li{color:var(--navy)}
/* intro text under the hero: the full original opening, set larger and narrower, easy to read */
.lede{padding:clamp(34px,5vw,64px) 0 clamp(6px,1vw,14px);background:#fff}
.lede__in{max-width:860px}
.lede p{margin:0 0 1.1em;font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.7;color:var(--ink)}
.lede .lede__lead{font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.5;font-weight:600;color:var(--navy)}
.lede a{color:var(--accent-text);font-weight:600}
.lede .stamp{display:inline-block}
@media (max-width:980px){
  html .ihero:not(.ihero--plain) .ihero__media{clip-path:none}
  html .ihero h1,html .hero h1{font-size:clamp(1.7rem,7vw,2.3rem)}
  html .ihero .lead,html .hero .lead{font-size:1rem;line-height:1.5;-webkit-line-clamp:5;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
  .hproof{gap:6px 18px;margin-top:16px}
  .hproof li{font-size:.84rem}
  html .ihero .btn-row,html .hero .btn-row{flex-direction:column;align-items:stretch;gap:10px}
  html .ihero .btn-row .btn,html .hero .btn-row .btn{width:100%;height:58px;min-height:58px}
}
@media (max-width:760px){.hproof li:nth-child(3){display:none}}

/* hero v21 fixes: static diagonal photo edge, identical button heights, proof points in three even columns, home hero measured under the header */
@media (min-width:981px){
  html .ihero__media,html .hero__media{animation:none!important;clip-path:polygon(15% 0,100% 0,100% 100%,0 100%)!important}
  html .ihero .btn-row .btn,html .hero .btn-row .btn{height:62px!important;min-height:62px!important}
  html .hero{min-height:calc(clamp(560px,100svh,940px) - var(--header-h))}
  .hproof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 22px;max-width:640px}
  .hproof li{font-size:.86rem;line-height:1.35}
}
html .hero .btn-row .btn.btn--ghost{--bg:rgba(0,16,74,.07);background:var(--bg)}
html .hero .btn.btn--ghost:not(.hd__cta):hover{background:rgba(0,16,74,.14)}
@media (max-width:980px){html .hero{min-height:calc(100svh - var(--header-h))}}
@media (max-width:980px){html .ihero .lead,html .hero .lead{-webkit-line-clamp:4}}
html .hero .btn-row .btn.btn--ghost{--bg:#fff;background:#fff;box-shadow:inset 0 1px 0 #fff,0 10px 24px -14px rgba(0,16,74,.45)}
html .hero .btn.btn--ghost:not(.hd__cta):hover{background:rgba(255,255,255,.7)}
html .ihero .btn.btn--ghost:not(.hd__cta){--bg:rgba(255,255,255,.2);--gl:rgba(255,255,255,.34)}
@media (min-width:981px){html .ihero__media img{object-position:center 35%}html .ihero__media img[src*="aerial"]{object-position:38% center}}

/* =====================================================================
   HERO v22. Framed photo, sunrise glow, larger type, glass proof pills.
   Replaces the flat diagonal slab of v21. Desktop: copy left, rounded photo frame right,
   100svh. Phones: photo on top, copy below. No lines on buttons, no outline borders.
   ===================================================================== */
@media (min-width:981px){
  html .ihero:not(.ihero--plain){
    background:
      radial-gradient(640px 520px at 76% 46%,rgba(255,146,72,.30),transparent 68%),
      radial-gradient(900px 600px at 0% 100%,rgba(38,120,200,.32),transparent 70%),
      linear-gradient(118deg,#00104A 0%,#05276A 58%,#0B4A8F 100%);
  }
  html .ihero:not(.ihero--plain)::before{-webkit-mask-image:linear-gradient(100deg,#000 0,rgba(0,0,0,.25) 55%,transparent 78%);mask-image:linear-gradient(100deg,#000 0,rgba(0,0,0,.25) 55%,transparent 78%)}
  html .ihero:not(.ihero--plain) .ihero__in{align-items:center;padding-top:calc(var(--header-h) + clamp(18px,3.4svh,40px));padding-bottom:clamp(44px,8svh,84px)}
  html .ihero__copy,html .hero__copy{max-width:min(610px,calc(100vw - 2 * var(--gutter,24px) - 560px))}
  html .ihero h1,html .hero h1{font-size:clamp(2.2rem,min(3.9vw,6.4svh),3.9rem);line-height:1.04;letter-spacing:-.028em;margin:0 0 .42em;text-wrap:balance}
  html .ihero .lead,html .hero .lead{max-width:31em;font-size:clamp(1.08rem,min(1.45vw,2.7svh),1.3rem);line-height:1.55;color:rgba(255,255,255,.86);margin:0 0 clamp(22px,3.6svh,34px)}
  html .hero .lead{color:var(--ink)}

  /* photo frame */
  html .ihero:not(.ihero--plain) .ihero__media,html .hero__media{
    position:absolute;z-index:2;left:auto;bottom:auto;
    top:calc(var(--header-h) + clamp(18px,3.4svh,40px));
    height:calc(100% - var(--header-h) - clamp(18px,3.4svh,40px) - clamp(44px,8svh,84px));
    right:max(var(--gutter,24px),calc((100vw - 1200px) / 2));
    width:min(520px,44vw);max-width:none;
    clip-path:none;-webkit-mask-image:none;mask-image:none;
    border-radius:30px;
    box-shadow:0 34px 70px -28px rgba(0,8,40,.75),0 10px 24px -12px rgba(0,8,40,.5);
  }
  html .ihero:not(.ihero--plain) .ihero__media::before,html .hero__media::before{
    content:"";position:absolute;inset:0;z-index:-1;border-radius:30px;
    background:linear-gradient(150deg,rgba(255,170,110,.55),rgba(255,146,72,.12));
    transform:translate(20px,20px);
  }
  html .ihero:not(.ihero--plain) .ihero__media::after,html .hero__media::after{
    display:block;content:"";position:absolute;inset:0;border-radius:30px;pointer-events:none;
    background:linear-gradient(180deg,rgba(0,16,74,0) 62%,rgba(0,16,74,.38) 100%),linear-gradient(210deg,rgba(255,190,130,.20),transparent 40%);
  }
  html .ihero:not(.ihero--plain) .ihero__media img,html .hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 40%;border-radius:30px;display:block}

  /* home hero (light) keeps its paper colour, gains the same frame and a warm wash */
  html .hero{background:radial-gradient(620px 500px at 78% 48%,rgba(255,146,72,.22),transparent 68%),linear-gradient(120deg,#FFF7EE 0%,#FAF8F5 55%,#EEF4FB 100%)}
  html .hero__media::before{background:linear-gradient(150deg,rgba(255,146,72,.5),rgba(255,146,72,.1))}
  html .hero__media::after{background:linear-gradient(180deg,rgba(0,16,74,0) 70%,rgba(0,16,74,.25) 100%)}
}

/* proof points: glass pills with a check, no lines */
.hproof{gap:10px;margin-top:clamp(20px,3.6svh,32px)}
.hproof li{padding:9px 15px 9px 36px;border-radius:999px;background:rgba(255,255,255,.10);-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3);color:#fff;font:600 .9rem/1.2 var(--font-body)}
.hproof li::before{left:13px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:0;background:#FFA667;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.hero .hproof li{background:rgba(0,16,74,.07);color:var(--navy)}
.hero .hproof li::before{background:#F0762A}

/* compact legal heroes: larger type, warm glow, no empty slab */
html .ihero--plain{background:radial-gradient(520px 320px at 88% 10%,rgba(255,146,72,.26),transparent 70%),linear-gradient(118deg,#00104A 0%,#05276A 60%,#0B4A8F 100%)}
html .ihero--plain h1{font-size:clamp(2.2rem,4.2vw,3.4rem);letter-spacing:-.026em}

@media (max-width:980px){
  html .ihero:not(.ihero--plain) .ihero__media{border-radius:0}
  .hproof li{padding:8px 13px 8px 33px;font-size:.84rem}
}

.ft-contact{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:700px){.ft-contact{grid-template-columns:1fr}.ft-contact li+li{border-left:0;border-top:1px solid var(--rule)}}

/* =====================================================================
   TRUST BAR (home). Replaces the icon strip: four plain statements on a sunrise panel.
   ===================================================================== */
.trustbar{position:relative;isolation:isolate;overflow:hidden;color:#fff;padding:clamp(40px,5vw,72px) 0;background:radial-gradient(520px 260px at 92% 0%,rgba(255,146,72,.26),transparent 70%),radial-gradient(640px 320px at 0% 100%,rgba(38,120,200,.30),transparent 70%),linear-gradient(115deg,#00104A 0%,#05276A 60%,#0B4A8F 100%)}
.trustbar__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1.2vw,16px)}
.trustbar__item{padding:clamp(20px,2.2vw,30px);border-radius:20px;background:rgba(255,255,255,.06);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background-color .35s var(--ease)}
.trustbar__item:hover{background:rgba(255,255,255,.12)}
.trustbar__n{display:block;margin-bottom:14px;font:700 .95rem/1 var(--font-body);letter-spacing:.08em;color:#FFA667}
.trustbar__t{display:block;margin:0 0 10px;font-family:var(--font-head);font-weight:700;font-size:clamp(1.15rem,1.5vw,1.35rem);line-height:1.2;color:#fff}
.trustbar p{margin:0;font-size:1rem;line-height:1.55;color:rgba(255,255,255,.80)}
@media (max-width:1000px){.trustbar__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.trustbar__grid{grid-template-columns:1fr}.trustbar__item{padding:20px}}

/* =====================================================================
   HERO v22b. Hero tag is a plain label (not a button); proof points are plain text, no ticks, no pills.
   ===================================================================== */
html .ihero .eyebrow,html .hero .eyebrow{display:block;margin:0 0 16px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;font:700 .86rem/1.2 var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:#FFB27E}
html .hero .eyebrow{color:#C2551A}
.hproof{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:clamp(22px,3.6svh,34px)}
.hproof li,.hero .hproof li{padding:0;border-radius:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;font:600 .98rem/1.3 var(--font-body);color:rgba(255,255,255,.88)}
.hero .hproof li{color:var(--navy)}
.hproof li::before,.hero .hproof li::before{display:none}
.hproof li+li::before{display:none}

/* HERO v22c: beat the v21 diagonal (!important) and the old 200px top fade; larger frame */
@media (min-width:981px){
  html .ihero:not(.ihero--plain) .ihero__media,html .hero__media{clip-path:none!important;animation:none!important;width:min(580px,46vw)}
  html .ihero:not(.ihero--plain) .ihero__media::after,html .hero__media::after{height:auto;inset:0;bottom:0}
  html .ihero__copy,html .hero__copy{max-width:min(600px,calc(100vw - 2 * var(--gutter,24px) - 620px))}
}

/* POPUP v22: same language as the new heroes. Plain label instead of a button-like pill, plain lines instead of ticked points. */
html .pop__tag{display:block;align-self:flex-start;padding:0;border-radius:0;background:none;box-shadow:none;border:0;font:700 .8rem/1.2 var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:#FFB27E}
html .pop__pts{gap:8px;font-size:1rem}
html .pop__pts li{display:block;padding:0;font-weight:500;line-height:1.45;color:rgba(255,255,255,.86)}
html .pop__pts li::before{display:none}

/* HERO v22d: warmer sun glow behind the photo, a little more room above the WhatsApp tag */
@media (min-width:981px){
  html .ihero:not(.ihero--plain) .ihero__media::before,html .hero__media::before{background:linear-gradient(150deg,rgba(255,176,118,.9),rgba(255,146,72,.35));transform:translate(18px,18px)}
  html .ihero:not(.ihero--plain) .ihero__in{padding-bottom:clamp(64px,10svh,104px)}
  html .ihero:not(.ihero--plain) .ihero__media,html .hero__media{height:calc(100% - var(--header-h) - clamp(18px,3.4svh,40px) - clamp(64px,10svh,104px))}
}

@media (max-width:600px){html .popup__fine{display:none}}

/* No button-looking tags in heroes: date stamp and legal meta are plain text */
html .ihero .stamp{display:block;margin:0 0 clamp(16px,2.6svh,24px);padding:0;border:0;border-radius:0;background:none;box-shadow:none;font:500 .95rem/1.3 var(--font-body);color:rgba(255,255,255,.78)}
html .ihero .stamp::before{display:none}
html .lg-chips{gap:6px 26px}
html .lg-chips li{padding:0;border:0;border-radius:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;font:500 .95rem/1.3 var(--font-body);color:rgba(255,255,255,.78)}

/* =====================================================================
   SECTION BACKGROUNDS v23. "Perth sunrise" system.
   Warm cream/peach and cool sky/sea sections alternate down every page. Each has two soft
   colour glows and one wide sunbeam sweep. No grid, no hard bands, no lines.
   Page themes (--g1, --g2) still tint the cool glows per page.
   ===================================================================== */
body{--cream1:#FFF9F2;--cream2:#FFE9D4;--sky1:#F1F7FF;--sky2:#D8E8FB;--sea1:#F0FAF8;--sea2:#CFEFE9}
/* warm: sunrise cream with a peach sun glow top-left and a cool glow bottom-right */
html .sec.sec--paper{background:
  radial-gradient(780px 440px at 3% 0%,rgba(255,168,108,.38),transparent 68%),
  radial-gradient(840px 480px at 100% 100%,color-mix(in srgb,var(--g1) 24%,transparent),transparent 70%),
  linear-gradient(112deg,transparent 36%,rgba(255,255,255,.62) 50%,transparent 64%),
  linear-gradient(180deg,var(--cream1) 0%,var(--cream2) 100%)}
/* cool: open sky, blue glow top-right, soft amber low-left */
html .sec.sec--paper:nth-of-type(even){background:
  radial-gradient(820px 460px at 98% 0%,color-mix(in srgb,var(--g1) 34%,transparent),transparent 68%),
  radial-gradient(700px 400px at 0% 100%,rgba(255,176,120,.24),transparent 70%),
  linear-gradient(68deg,transparent 36%,rgba(255,255,255,.62) 50%,transparent 64%),
  linear-gradient(180deg,var(--sky1) 0%,var(--sky2) 100%)}
/* white sections: clean, with a sea-glass glow so they never read as blank */
html .sec.sec--white{background:
  radial-gradient(760px 420px at 0% 0%,color-mix(in srgb,var(--g2) 26%,transparent),transparent 68%),
  radial-gradient(700px 400px at 100% 100%,rgba(255,176,120,.22),transparent 70%),
  linear-gradient(180deg,#fff 0%,var(--sea1) 100%)}
html .sec.sec--white:nth-of-type(even){background:
  radial-gradient(760px 420px at 100% 0%,rgba(255,176,120,.30),transparent 68%),
  radial-gradient(720px 420px at 0% 100%,color-mix(in srgb,var(--g1) 20%,transparent),transparent 70%),
  linear-gradient(180deg,#fff 0%,var(--cream1) 100%)}
/* navy: sun glow top-right, deep blue wash, soft cool glow bottom-left */
html .sec.sec--navy{background:
  radial-gradient(640px 380px at 96% 0%,rgba(255,146,72,.34),transparent 68%),
  radial-gradient(760px 440px at 0% 100%,color-mix(in srgb,var(--g1) 34%,transparent),transparent 70%),
  linear-gradient(125deg,#00104A 0%,#062D78 55%,var(--h3) 100%)}
/* intro under the hero */
html .lede{background:radial-gradient(720px 300px at 0% 0%,rgba(255,168,108,.20),transparent 70%),linear-gradient(180deg,#fff 0%,var(--cream1) 100%)}
/* faq and facts cards sit on white so they stay crisp on the tinted grounds */
html .sec--paper .faq details,html .sec--white .faq details{background:#fff}

/* quotes inside navy sections: dark glass with light text (was light text on a pale fill) */
html .sec--navy .pull{background:rgba(255,255,255,.09);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-color:rgba(255,255,255,.16);color:#fff}
html .sec--navy .pull:hover{background:rgba(255,255,255,.15);color:#fff}

/* =====================================================================
   HERO v24. Light heroes with gradient "drops" of colour instead of a filled slab.
   White ground; an orange sun drop behind the photo, a sky drop top-left, a sea drop low.
   The header is the solid white bar on every page, so heroes start below it.
   ===================================================================== */
html body .ihero,html body .ihero:not(.ihero--plain),html body .hero{
  color:var(--navy);clip-path:none;border:0;
  background:
    radial-gradient(closest-side at 80% 44%,rgba(255,138,58,.42),rgba(255,138,58,0) 100%) 100% 40%/640px 640px no-repeat,
    radial-gradient(closest-side,color-mix(in srgb,var(--g1) 36%,transparent),transparent 100%) -140px -180px/620px 560px no-repeat,
    radial-gradient(closest-side,color-mix(in srgb,var(--g2) 30%,transparent),transparent 100%) 42% 112%/560px 380px no-repeat,
    radial-gradient(closest-side,rgba(168,140,255,.20),transparent 100%) 100% 112%/420px 320px no-repeat,
    linear-gradient(180deg,#fff 0%,#FCFCFE 100%);
}
html body .ihero::before,html body .ihero:not(.ihero--plain)::before{display:none}
html body .ihero h1{color:var(--navy)}
html body .ihero .lead{color:#17264F}
html body .ihero .eyebrow{color:#C2551A}
html body .ihero .crumbs li{color:var(--muted)}
html body .ihero .crumbs a{color:var(--navy)}
html body .ihero .stamp{color:#33456F}
html body .lg-chips li{color:#33456F}
/* secondary button: white glass, same as the home hero */
html body .ihero .btn.btn--ghost:not(.hd__cta){background:#fff;background-image:none;color:#00104A;border:0;-webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);box-shadow:inset 0 1px 0 #fff,0 10px 24px -14px rgba(0,16,74,.45)}
html body .ihero .btn.btn--ghost:not(.hd__cta):hover{background:#FFF3E8;color:#00104A;box-shadow:inset 0 1px 0 #fff,0 14px 28px -14px rgba(0,16,74,.5)}
html body .ihero .btn--ghost .i{color:#00104A}
html body .ihero .btn.btn--ghost:not(.hd__cta)::before,html body .ihero .btn.btn--ghost:not(.hd__cta)::after{opacity:0}

@media (min-width:981px){
  html body .ihero:not(.ihero--plain){min-height:max(540px,calc(100svh - var(--header-h)))}
  html body .ihero:not(.ihero--plain) .ihero__in{padding-top:clamp(24px,4svh,48px);padding-bottom:clamp(40px,7svh,72px)}
  html body .ihero:not(.ihero--plain) .ihero__media,html body .hero__media{top:clamp(24px,4svh,48px);height:calc(100% - clamp(24px,4svh,48px) - clamp(40px,7svh,72px));box-shadow:0 30px 60px -30px rgba(0,16,74,.45),0 8px 20px -10px rgba(0,16,74,.25)}
  html body .ihero:not(.ihero--plain) .ihero__media::before,html body .hero__media::before{background:linear-gradient(150deg,rgba(255,178,120,.95),rgba(255,146,72,.40))}
  html body .ihero .lead{color:#17264F}
}
/* legal heroes: same light ground, compact */
html body .ihero--plain .ihero__in{padding-top:clamp(28px,4vw,56px);padding-bottom:clamp(28px,4vw,56px)}
html body .ihero--plain h1{color:var(--navy)}

/* phones and tablets: photo on top, copy below, all on the light ground */
@media (max-width:980px){
  html body .ihero:not(.ihero--plain){display:block;min-height:0}
  html body .ihero:not(.ihero--plain) .ihero__media{position:relative;inset:auto;width:calc(100% - 2 * var(--gutter,20px));height:clamp(190px,32svh,320px);margin:14px auto 0;border-radius:22px;-webkit-mask-image:none;mask-image:none;clip-path:none!important;box-shadow:0 22px 40px -24px rgba(0,16,74,.5)}
  html body .ihero:not(.ihero--plain) .ihero__media img{border-radius:22px}
  html body .ihero:not(.ihero--plain) .ihero__media::after{display:none}
  html body .ihero:not(.ihero--plain) .ihero__in{display:block;position:relative;min-height:0;padding-top:18px;padding-bottom:104px}
  html body .ihero:not(.ihero--plain) .ihero__in::before{display:none}
  html body .ihero .lead{-webkit-line-clamp:3}
}

/* breadcrumb: readable current page on the light hero */
html body .ihero .crumbs li,html body .ihero .crumbs [aria-current],html body .ihero .crumbs span{color:#4A5B85}
html body .ihero .crumbs a{color:var(--navy)}

/* =====================================================================
   SECTION GROUNDS v25. Clean white grounds with soft gradient "drops" of colour,
   not a tint over the whole section. Two drops per section, moved around by section so
   the page keeps a rhythm: sun (peach), sky, sea and a touch of lilac.
   Navy bands stay as the deliberate dark contrast.
   ===================================================================== */
html body .sec.sec--paper{background:
  radial-gradient(closest-side,rgba(255,150,74,.34),transparent 100%) -140px -150px/600px 480px no-repeat,
  radial-gradient(closest-side,color-mix(in srgb,var(--g1) 34%,transparent),transparent 100%) 108% 104%/660px 460px no-repeat,
  linear-gradient(180deg,#fff,#FDFCFB)}
html body .sec.sec--paper:nth-of-type(even){background:
  radial-gradient(closest-side,color-mix(in srgb,var(--g1) 34%,transparent),transparent 100%) 108% -140px/640px 460px no-repeat,
  radial-gradient(closest-side,color-mix(in srgb,var(--g2) 32%,transparent),transparent 100%) -160px 104%/600px 440px no-repeat,
  linear-gradient(180deg,#fff,#FCFDFE)}
html body .sec.sec--white{background:
  radial-gradient(closest-side,rgba(160,140,255,.22),transparent 100%) 108% -120px/620px 440px no-repeat,
  radial-gradient(closest-side,rgba(255,150,74,.28),transparent 100%) -140px 104%/600px 440px no-repeat,
  #fff}
html body .sec.sec--white:nth-of-type(even){background:
  radial-gradient(closest-side,color-mix(in srgb,var(--g2) 32%,transparent),transparent 100%) -150px -130px/620px 460px no-repeat,
  radial-gradient(closest-side,color-mix(in srgb,var(--g1) 30%,transparent),transparent 100%) 108% 104%/640px 460px no-repeat,
  #fff}
html body .lede{background:radial-gradient(closest-side,rgba(255,150,74,.24),transparent 100%) -120px -140px/520px 380px no-repeat,#fff}

/* HERO v24b (phones/tablets): photo first, then copy; full lead text, no ellipsis */
@media (max-width:980px){
  html body .ihero:not(.ihero--plain){display:flex;flex-direction:column;min-height:0}
  html body .ihero:not(.ihero--plain) .ihero__media{order:-1;height:clamp(150px,24svh,300px);margin-top:12px}
  html body .ihero:not(.ihero--plain) .ihero__in{order:1;padding-top:16px}
  html body .ihero .lead,html body .hero .lead{display:block;overflow:visible;-webkit-line-clamp:unset;font-size:.97rem;line-height:1.5}
}

/* =====================================================================
   FOOTER BANNER v2. The photo dissolves into the footer navy (left, top, bottom and right),
   no outline, no frosted panel, so text and image read as one scene on every page.
   ===================================================================== */
html .ft-banner{border:0;border-radius:0;background:transparent;overflow:hidden;min-height:clamp(330px,31vw,430px)}
html .ft-banner__img{inset:0 0 0 auto;width:70%;height:100%;border-radius:0;background:transparent;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 44%,#000 88%,transparent 100%),linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 44%,#000 88%,transparent 100%),linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%);
  mask-composite:intersect}
html .ft-banner::after{background:linear-gradient(90deg,rgba(0,16,74,.72) 0%,rgba(0,16,74,.38) 40%,rgba(0,16,74,0) 66%)}
html .ft-banner__in{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:0;padding-left:0}
@media (max-width:640px){
  html .ft-banner{min-height:0;display:block}
  html .ft-banner__img{position:relative;inset:auto;display:block;width:100%;height:240px;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 24%,#000 48%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 24%,#000 48%,transparent 100%);-webkit-mask-composite:source-over;mask-composite:add}
  html .ft-banner::after{display:none}
  html .ft-banner__in{margin-top:-70px;padding:0 0 8px;position:relative}
}

/* =====================================================================
   HERO PHOTO v26. No colour or backplate behind the photo. The photo takes a roof-gable
   silhouette (the Sunroof mark) with a soft real shadow and a faint golden-hour light on its top edge.
   ===================================================================== */
html body .ihero,html body .ihero:not(.ihero--plain),html body .hero{
  background:
    radial-gradient(closest-side,color-mix(in srgb,var(--g1) 36%,transparent),transparent 100%) -140px -180px/620px 560px no-repeat,
    radial-gradient(closest-side,color-mix(in srgb,var(--g2) 30%,transparent),transparent 100%) 34% 112%/560px 380px no-repeat,
    linear-gradient(180deg,#fff 0%,#FCFCFE 100%)}
html body .ihero:not(.ihero--plain) .ihero__media,html body .hero__media{border-radius:0;box-shadow:none;background:none;-webkit-filter:drop-shadow(0 26px 24px rgba(0,16,74,.24)) drop-shadow(0 6px 8px rgba(0,16,74,.14));filter:drop-shadow(0 26px 24px rgba(0,16,74,.24)) drop-shadow(0 6px 8px rgba(0,16,74,.14))}
html body .ihero:not(.ihero--plain) .ihero__media::before,html body .hero__media::before{display:none}
html body .ihero:not(.ihero--plain) .ihero__media img,html body .hero__media img{border-radius:0;-webkit-clip-path:url(#roof-photo);clip-path:url(#roof-photo)}
html body .ihero:not(.ihero--plain) .ihero__media::after,html body .hero__media::after{display:block;content:"";position:absolute;inset:0;height:auto;border-radius:0;pointer-events:none;-webkit-clip-path:url(#roof-photo);clip-path:url(#roof-photo);background:linear-gradient(205deg,rgba(255,206,140,.26) 0%,rgba(255,206,140,0) 34%)}
@media (max-width:980px){
  html body .ihero:not(.ihero--plain) .ihero__media{border-radius:0;box-shadow:none;-webkit-filter:drop-shadow(0 16px 16px rgba(0,16,74,.22));filter:drop-shadow(0 16px 16px rgba(0,16,74,.22))}
  html body .ihero:not(.ihero--plain) .ihero__media img{border-radius:0}
  html body .ihero:not(.ihero--plain) .ihero__media::after{display:block}
}

/* =====================================================================
   HERO BUTTONS v26. Content-sized pair of equal width (no stretched empty space); orange primary,
   deep navy secondary with its own arrow. Phones stack them full width.
   ===================================================================== */
@media (min-width:981px){
  html body .ihero .btn-row,html body .hero .btn-row{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:14px;width:auto;max-width:100%;margin:0}
  html body .ihero .btn-row .btn,html body .hero .btn-row .btn{flex:none;width:auto;min-width:0;padding:0 30px;justify-content:center;gap:14px;white-space:nowrap}
}
@media (min-width:981px) and (max-width:1300px){
  html body .ihero .btn-row .btn,html body .hero .btn-row .btn{padding:0 22px;gap:10px;font-size:.98rem}
}
html body .ihero .btn.btn--ghost:not(.hd__cta),html body .hero .btn.btn--ghost:not(.hd__cta){background:linear-gradient(180deg,#1E55C8 0%,#0A2A7A 58%,#00104A 100%);color:#fff;border:0;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 14px 26px -14px rgba(0,16,74,.8)}
html body .ihero .btn.btn--ghost:not(.hd__cta):hover,html body .hero .btn.btn--ghost:not(.hd__cta):hover{background:linear-gradient(180deg,#2C68E0 0%,#103590 58%,#021B63 100%);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 16px 28px -14px rgba(0,16,74,.85)}
html body .ihero .btn--ghost .i,html body .hero .btn--ghost .i{color:#fff}

/* Keep the complete home battery inside the desktop hero's roof-shaped crop. */
@media (min-width:981px){html body .hero__media img{object-position:66% 40%}}

/* =====================================================================
   HERO SPACING v27. A clear gutter (72px+) between the copy/buttons and the photo.
   Buttons sit side by side only when the column is wide enough, otherwise they stack.
   ===================================================================== */
@media (min-width:981px){
  html body .ihero:not(.ihero--plain) .ihero__media,html body .hero__media{width:min(520px,42vw)}
  html body .ihero__copy,html body .hero__copy{max-width:min(600px,calc(100vw - 2 * var(--gutter,24px) - min(520px,42vw) - 72px))}
}
@media (min-width:981px) and (max-width:1180px){
  html body .ihero .btn-row,html body .hero .btn-row{grid-auto-flow:row;grid-auto-columns:minmax(0,max-content)}
}

/* =====================================================================
   CTA COLOUR v27. Primary buttons: a rich sunrise gradient (amber to orange to coral) instead of a pale orange.
   Dark navy text keeps contrast above 4.5:1 across the whole gradient. Hover brightens the gradient and
   deepens the glow. Same treatment on the header Contact button, sticky bar and tags.
   ===================================================================== */
html body .btn:not(.btn--ghost):not(.btn--navy):not(.btn--white):not(.btn--outline-light):not(.hd__cta),html body .site-header .hd .hd__cta{
  --bg:linear-gradient(118deg,#FFB347 0%,#FF7A1F 46%,#F2483C 100%);--ink:#00104A;
  background:var(--bg);color:var(--ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 0 rgba(150,30,10,.16),0 14px 28px -12px rgba(240,86,40,.75)}
html body .btn:not(.btn--ghost):not(.btn--navy):not(.btn--white):not(.btn--outline-light):not(.hd__cta):hover,
html body .btn:not(.btn--ghost):not(.btn--navy):not(.btn--white):not(.btn--outline-light):not(.hd__cta):focus-visible,
html body .site-header .hd .hd__cta:hover{
  background:linear-gradient(118deg,#FFC35F 0%,#FF8A33 46%,#F85A48 100%);color:#00104A;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -2px 0 rgba(150,30,10,.12),0 18px 32px -12px rgba(240,86,40,.85)}
html body .ihero .btn--sun:not(.hd__cta):hover,html body .midcta .btn--sun:not(.hd__cta):hover,html body .ft-banner .btn--sun:not(.hd__cta):hover,html body .sec--navy .btn--sun:not(.hd__cta):hover{color:#00104A}
html body .nextbar__tag,html body .tag--sun{background:linear-gradient(118deg,#FFB347 0%,#FF7A1F 52%,#F2483C 100%);color:#00104A}
html body .sticky-cta .btn--sun{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 8px 18px -10px rgba(240,86,40,.8)}
html body .tiles3 .link-arrow .i{background:rgba(255,122,31,.18);color:#C2410C}

/* =====================================================================
   TABLES ON SMALL SCREENS v28. Each row becomes a labelled card (labels come from the column headings
   via main.js). No sideways scrolling, nothing cut off. Desktop tables are unchanged.
   ===================================================================== */
@media (max-width:760px){
  html .table-wrap{overflow:visible;border:0;border-radius:0;background:none;box-shadow:none}
  html .table-wrap table.table--stack{display:block;width:100%;min-width:0}
  html .table-wrap table.table--stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  html .table-wrap table.table--stack tbody,html .table-wrap table.table--stack tr{display:block}
  html .table-wrap table.table--stack tr{margin:0 0 14px;padding:0 0 6px;overflow:hidden;border-radius:16px;background:#fff;box-shadow:0 16px 30px -22px rgba(0,16,74,.55),0 0 0 1px rgba(0,16,74,.08)}
  html .table-wrap table.table--stack tbody th{display:block;margin:0;padding:14px 16px 12px;border:0;white-space:normal;background:linear-gradient(135deg,#EEF4FF,#FFF3E8);font:700 1.02rem/1.3 var(--font-body);color:var(--navy)}
  html .table-wrap table.table--stack td{display:grid;grid-template-columns:minmax(92px,36%) minmax(0,1fr);gap:12px;align-items:baseline;padding:10px 16px;border:0;border-bottom:1px solid rgba(0,16,74,.07);white-space:normal;font-size:.97rem;line-height:1.45;text-align:left}
  html .table-wrap table.table--stack td:last-child{border-bottom:0}
  html .table-wrap table.table--stack td::before{content:attr(data-label);font:700 .78rem/1.4 var(--font-body);letter-spacing:.04em;text-transform:uppercase;color:#5A6A90}
  html .table-wrap table.table--stack td:not([data-label]){display:block}
  html .table-wrap table.table--stack td:not([data-label])::before{display:none}
  html .sec--navy .table-wrap table.table--stack tr{background:rgba(255,255,255,.08);box-shadow:0 0 0 1px rgba(255,255,255,.16)}
  html .sec--navy .table-wrap table.table--stack tbody th{background:rgba(255,255,255,.1);color:#fff}
  html .sec--navy .table-wrap table.table--stack td{border-bottom-color:rgba(255,255,255,.12);color:rgba(255,255,255,.92)}
  html .sec--navy .table-wrap table.table--stack td::before{color:#FFC9A3}
}

@media (max-width:760px){html .table-wrap table.table--stack td,html .table-wrap table.table--stack tr:nth-child(even) td,html .table-wrap table.table--stack tr:nth-child(odd) td{background:transparent}}

/* ALIGNMENT v28: intro text and the "On this page" bar start on the same left edge as every other section */
html .lede .lede__in{max-width:calc(var(--maxw) + var(--gutter) * 2)}
html .lede .lede__in>*{max-width:860px}
html .toc__in{padding-inline:var(--gutter)}

/* "What we install" cards on phones: full-width photo on top of the text (was a 38% thumbnail with empty space) */
@media (max-width:760px){html .tiles3 .tile__media{width:100%;min-height:0;height:auto;aspect-ratio:16/10}}

/* =====================================================================
   MOBILE + TABLET FIXES v29
   ===================================================================== */

/* Photo backplate on split sections: the media box was static on phones, so its backplate stretched
   to the full height of the section and sat behind the text. Keep the box positioned so the
   backplate stays behind the photo only. */
@media (max-width:900px){
  html body .csec__media,html body .contact__photo{position:relative}
  html body .csec__media::before,html body .contact__photo::before{inset:12px 0 -12px 12px;height:auto}
  html body .csec--split-rev .csec__media::before{inset:12px 12px -12px 0}
}

/* Touch screens keep :hover after a tap, which left list rows with an orange bar and shifted text.
   Only real pointers get the hover treatment. */
@media (hover:none){
  html body .bl--led li:hover{box-shadow:none}
  html body .bl--led li:hover strong{padding-left:0;color:var(--navy)}
  html body .csec--facts .bl li:hover,html body .csec--facts .bl--led li:hover,html body .tiles3 .card:hover,html body .stats__item:hover,html body .pull:hover,html body .faq details:hover{transform:none}
}

/* Closing call-to-action: on phones and tablets the sun-and-roof scene gets its own orange band
   under the text instead of sitting behind it. */
@media (max-width:1023px){
  html body .cta3{--scH:min(65.6vw,288px);padding-bottom:calc(var(--scH) + 40px);
    background:linear-gradient(180deg,#00104A 0,#00104A calc(100% - var(--scH)),#FF9248 calc(100% - var(--scH)),#FF9248 100%)}
  html body .cta3 .scene--sunrise .sc-svg{width:min(100vw,440px);right:0;bottom:0;opacity:1}
  html body .cta3 p{max-width:34em}
}
/* small laptops: keep the copy on the navy side of the diagonal */
@media (min-width:1024px) and (max-width:1279px){html body .cta3 p{max-width:min(34em,54%)}}

/* Sticky phone/tablet bar: both buttons wear the same sun gradient */
html body .sticky-cta .btn,html body .sticky-cta .sticky-cta__wa{--bg:linear-gradient(180deg,#FFB547,#FF7A2C);color:#00104A;border-color:rgba(255,255,255,.7)}

/* =====================================================================
   POPUP v30. Light card, soft colour drops, a slow sun. Copy follows the button that opened it.
   ===================================================================== */
@keyframes pop-rise{from{opacity:0;transform:translateY(32px) scale(.95)}to{opacity:1;transform:none}}
@keyframes pop-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes pop-orb{from{transform:translate(0,0) scale(1)}to{transform:translate(34px,26px) scale(1.18)}}
@keyframes pop-ping{0%{box-shadow:0 0 0 0 rgba(255,146,72,.65)}70%,100%{box-shadow:0 0 0 9px rgba(255,146,72,0)}}
@keyframes pop-spin{to{transform:rotate(360deg)}}
@keyframes pop-glow{0%,100%{filter:drop-shadow(0 0 8px rgba(255,200,70,.55))}50%{filter:drop-shadow(0 0 20px rgba(255,200,70,.95))}}
@keyframes pop-shine{0%,55%{transform:translateX(-130%)}100%{transform:translateX(130%)}}

html body .popup{border:0;border-radius:26px;background:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.55),0 2px 4px rgba(0,16,74,.08),0 44px 80px -28px rgba(0,16,74,.65),0 90px 120px -60px rgba(255,120,40,.5)}
html body .popup::backdrop{background:radial-gradient(60% 55% at 18% 8%,rgba(255,146,72,.38),transparent 70%),radial-gradient(60% 55% at 92% 96%,rgba(60,160,255,.34),transparent 70%),rgba(0,12,58,.74);
  -webkit-backdrop-filter:blur(10px) saturate(1.25);backdrop-filter:blur(10px) saturate(1.25)}
html body .popup[open]{animation:pop-rise .6s cubic-bezier(.2,.8,.2,1)}

/* left panel: deep navy with two slow colour drops (they take the page's theme colour) */
html body .pop__side{--pp:clamp(26px,3.2vw,40px);position:relative;isolation:isolate;overflow:hidden;padding:var(--pp) var(--pp) 0;gap:20px;color:#fff;
  background:linear-gradient(162deg,#00104A 0%,#07297A 62%,var(--h3,#0B4A93) 140%)}
html body .pop__side::before{content:"";display:block;position:absolute;z-index:-1;inset:auto;left:-100px;top:-120px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,146,72,.62),transparent);animation:pop-orb 9s ease-in-out infinite alternate}
html body .pop__side::after{content:"";display:block;position:absolute;z-index:-1;inset:auto;right:-130px;bottom:26%;width:330px;height:330px;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--g1,#3AA0FF) 58%,transparent),transparent);animation:pop-orb 11s ease-in-out infinite alternate-reverse}
html body .pop__tag{display:flex;align-items:center;gap:10px;align-self:flex-start;padding:0;border:0;border-radius:0;background:none;box-shadow:none;
  font:700 .78rem/1.2 var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:#FFC58F}
html body .pop__tag::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:#FF9248;animation:pop-ping 2.2s ease-out infinite}
html body .pop__side h2{font-size:clamp(1.8rem,2.7vw,2.4rem);line-height:1.08;color:#fff}
html body .pop__pts{gap:0}
html body .pop__pts li{padding:10px 0;border-top:1px solid rgba(255,255,255,.14);font-size:.98rem;line-height:1.4;color:rgba(255,255,255,.9)}
html body .pop__pts li:first-child{padding-top:0;border-top:0}
html body .pop__foot{margin:auto calc(var(--pp) * -1) 0;padding:22px var(--pp) 22px;clip-path:none;gap:8px;
  background:radial-gradient(closest-side,rgba(255,168,84,.78),rgba(255,146,72,.22) 62%,transparent) 62% 96%/130% 170% no-repeat}
html body .pop__foot .pop__scene{max-height:92px;margin:0}
html body .pop__foot .pop__scene circle{fill:#FFD23F;animation:pop-glow 4s ease-in-out infinite}
html body .pop__foot .pop__rays{transform-box:view-box;transform-origin:205px 62px;animation:pop-spin 60s linear infinite}
html body .pop__foot .pop__rays path{stroke:#FFD79A;stroke-opacity:.8;stroke-width:1.6;stroke-linecap:round}
html body .pop__foot .pop__loc{color:#fff;font-weight:600}
html body .pop__foot .pop__loc .i{stroke:#FFD23F}

/* right panel */
html body .pop__main{background:
  radial-gradient(closest-side,rgba(255,150,74,.17),transparent) 100% -70px/400px 320px no-repeat,
  radial-gradient(closest-side,color-mix(in srgb,var(--g1,#3AA0FF) 15%,transparent),transparent) -90px 100%/380px 320px no-repeat,#fff}
html body .pop__title span{font-size:1.32rem;font-weight:700;color:#00104A}
html body .pop__title small{color:#5A6A90}
html body .pop__title::after{content:"";width:44px;height:4px;margin-top:6px;border-radius:4px;background:linear-gradient(90deg,#FFB547,#F2503C)}
html body .popup__close{width:42px;height:42px;border:1px solid rgba(0,16,74,.12);border-radius:50%;background:#fff;color:#00104A;box-shadow:0 8px 18px -10px rgba(0,16,74,.5);transition:transform .4s var(--ease),background .25s,box-shadow .25s}
html body .popup__close:hover{background:linear-gradient(180deg,#FFB547,#FF7A2C);color:#00104A;transform:rotate(90deg);box-shadow:0 12px 22px -10px rgba(240,100,30,.7)}
html body .popup .field label,html body .popup .chips legend{font-weight:700;color:#00104A}
html body .popup .field input,html body .popup .field select{border:1.5px solid #D2DBEC;border-radius:14px;background-color:#F7F9FD;color:#00104A;
  box-shadow:inset 0 1px 2px rgba(0,16,74,.05);transform:none;transition:border-color .2s,box-shadow .25s,background-color .2s}
html body .popup .field input:hover,html body .popup .field select:hover{border-color:#AEBFDD;background-color:#fff}
html body .popup .field input:focus,html body .popup .field select:focus{outline:0;border-color:#FF8A3A;background-color:#fff;transform:none;
  box-shadow:0 0 0 4px rgba(255,138,58,.2),0 12px 24px -14px rgba(255,100,20,.6)}
html body .popup .field.is-bad :is(input,select){border-color:#B3261E;box-shadow:0 0 0 3px rgba(179,38,30,.15)}
html body .pchip span{border:1.5px solid #D2DBEC;border-radius:999px;background:#F7F9FD;font-weight:600;color:#00104A;box-shadow:none;transition:background .2s,border-color .2s,color .2s,box-shadow .25s,transform .2s}
html body .pchip:hover span{border-color:#FF9248;background:#FFF2E8;transform:translateY(-1px)}
html body .pchip input:checked+span,html body .pchip input:checked+span:hover{border-color:transparent;background:linear-gradient(135deg,#00104A,#0B4A93);color:#fff;transform:none;box-shadow:0 10px 18px -10px rgba(0,40,130,.75)}
html body .popup .consent input{accent-color:#F2503C}
html body .popup .btn[data-send]{position:relative;overflow:hidden}
html body .popup .btn[data-send]::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(110deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%);transform:translateX(-130%);animation:pop-shine 4s 1.4s ease-in-out infinite}
html body .popup__fine a{color:#00104A;font-weight:700}

/* staggered entrance */
html body .popup[open] .pop__side>*,html body .popup[open] .pop__bar,html body .popup[open] .form>*{animation:pop-up .6s cubic-bezier(.2,.8,.2,1) backwards}
html body .popup[open] .pop__side>:nth-child(2){animation-delay:.12s}
html body .popup[open] .pop__side>:nth-child(3){animation-delay:.2s}
html body .popup[open] .pop__side>:nth-child(4){animation-delay:.28s}
html body .popup[open] .pop__bar{animation-delay:.1s}
html body .popup[open] .form>:nth-child(n+3){animation-delay:.16s}
html body .popup[open] .form>:nth-child(n+5){animation-delay:.22s}
html body .popup[open] .form>:nth-child(n+7){animation-delay:.28s}
html body .popup[open] .form>:nth-child(n+9){animation-delay:.34s}

/* phones and very short windows: compact header bar, the points and tag stay hidden */
@media (max-width:720px),(max-height:520px){
  html body .popup{border-radius:22px}
  html body .pop__side{padding:20px 64px 16px 22px}
  html body .pop__tag{display:none}
  html body .pop__side h2{font-size:clamp(1.35rem,5.6vw,1.7rem)}
  html body .pop__side::before{left:auto;right:-90px;top:-130px;width:260px;height:260px}
  html body .pop__side::after{display:none}
  html body .popup__close{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4);color:#fff;box-shadow:none}
  html body .popup__close:hover{background:linear-gradient(180deg,#FFB547,#FF7A2C);color:#00104A}
}
@media (prefers-reduced-motion:reduce){
  html body .popup[open],html body .popup[open] *,html body .pop__side::before,html body .pop__side::after,html body .pop__tag::before,html body .pop__foot *{animation:none!important}
}

/* popup polish: the underline belongs to the desktop title only; the sun glow fades in from the top instead of a hard edge */
html body .pop__foot{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 38%);mask-image:linear-gradient(180deg,transparent 0,#000 38%)}
@media (max-width:720px),(max-height:520px){html body .pop__title::after{display:none}}

/* =====================================================================
   IMAGES v31. Photos appear straight away: no reveal mask, no zoom on load or hover, no
   offset backplate, no corner marks, no parallax. Depth comes only from a soft shadow.
   ===================================================================== */
html body .csec__media::before,html body .csec__media::after,html body .contact__photo::before,html body .contact__photo::after{content:none;display:none}
html body .js .mask,html body .js .mask.is-in{clip-path:none}
html body .js .mask img,html body .js .mask.is-in img,html body .js .csec__media.mask img,html body .js .contact__photo.mask img,html body .js .csec__media.mask:not(.is-in) img,html body .js .contact__photo.mask:not(.is-in) img{clip-path:none;transform:none;transition:none;opacity:1}
html body .arch img,html body .arch picture,html body .hero__media img{animation:none}
html body .tile__media img,html body .tiles3 .tile__media img,html body .nav__thumb img,html body .nav__img,html body .ft-banner__img{transition:none}
html body .tile:hover .tile__media img,html body .tiles3 .tile:hover .tile__media img,html body .tiles3 .card:hover .tile__media img,html body .nav__cards a:hover .nav__thumb img,html body .nav__feature:hover .nav__img,html body .ft-banner:hover .ft-banner__img{transform:none}
html body [data-parallax],html body .bleed__img{transform:none}
html body .bleed__img{inset:0}
html body .csec__media img,html body .contact__photo img,html body .figure img,html body .tile__media img{border-radius:14px;
  box-shadow:0 2px 6px rgba(0,16,74,.08),0 22px 44px -22px rgba(0,16,74,.5),0 46px 70px -46px rgba(0,16,74,.35)}
html body .sec--navy .csec__media img,html body .sec--navy .figure img{box-shadow:0 2px 6px rgba(0,0,0,.25),0 26px 48px -20px rgba(0,0,0,.65)}
html body .bleed__img img{box-shadow:none}

/* =====================================================================
   SHORTER SECTIONS v31
   Step lists become a grid of cards instead of one long column beside a tall sticky photo;
   photos on phones are cropped to a sensible height; section padding is trimmed.
   ===================================================================== */
html body .sec.csec{padding-block:clamp(44px,5.4vw,84px)}
@media (min-width:901px){
  html body .csec--steps .csec__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 24px;align-items:start}
  html body .csec--steps .csec__text,html body .csec--steps .csec__body{display:contents}
  html body .csec--steps .csec__head{grid-column:1/-1;position:static;top:auto;max-width:780px;margin:0}
  html body .csec--steps .ol{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 22px}
  html body .csec--steps .ol li{display:flex;flex-direction:column;gap:6px;padding:22px 22px 24px;border:1px solid var(--rule);border-radius:16px;background:#fff;
    box-shadow:0 2px 6px rgba(0,16,74,.05),0 22px 40px -28px rgba(0,16,74,.5)}
  html body .csec--steps .ol li::before{margin-bottom:10px}
  html body .csec--steps .ol li::after{display:none}
  html body .csec--steps .ol li>strong,html body .csec--steps .ol li>span,html body .csec--steps .ol li:not(:has(>strong))>span{padding-top:0}
  html body .csec--steps .csec__media{grid-column:1;position:static;top:auto}
  html body .csec--steps .csec__media img{aspect-ratio:4/5;max-height:440px;object-fit:cover;width:100%}
  html body .csec--steps .figure{grid-column:2/-1;margin:0;align-self:center}
  html body .csec--steps .csec__body>p,html body .csec--steps .csec__body>.faq{grid-column:1/-1}
  html body .csec--steps:not(:has(.figure)) .csec__media{grid-column:1/-1}
  html body .csec--steps:not(:has(.figure)) .csec__media img{aspect-ratio:21/9;max-height:360px}
}
@media (max-width:900px){
  html body .sec.csec{padding-block:44px}
  html body .csec__media img{max-height:320px;object-fit:cover;width:100%}
  html body .figure img{max-height:none}
  html body .ol li{padding-bottom:22px}
  html body .csec__head{margin-bottom:6px}
  html body .tiles-sec .tile__media{aspect-ratio:16/9}
}
@media (min-width:901px){
  html body .csec--steps .csec__head{order:1}
  html body .csec--steps .ol{order:2}
  html body .csec--steps .csec__media,html body .csec--steps .figure{order:3}
  html body .csec--steps .csec__body>p,html body .csec--steps .csec__body>.faq{order:4}
  html body .csec--steps .ol li::before{width:2.4rem;height:2.4rem;margin-bottom:6px}
}

/* "Already have solar?" lead-in is a plain heading, not something that looks clickable */
html body .nextbar .nextbar__tag{background:none;box-shadow:none;border:0;padding:0;color:#00104A;font:700 1.05rem/1.3 var(--font-body);align-self:center}
html body .nextbar .nextbar__tag::before,html body .nextbar .nextbar__tag::after{content:none}
html body .prose .nextbar .nextbar__tag{padding:0}
@media (max-width:900px){html body .nextbar .nextbar__tag{padding:0}}

/* =====================================================================
   PHONES v32. No hero photo on phones (every page): the heading and the call to action come first.
   Both sticky buttons share one look: the same sun gradient, border and shadow.
   ===================================================================== */
@media (max-width:760px){
  html body .hero__media,html body .ihero__media,html body .ihero:not(.ihero--plain) .ihero__media{display:none}
  html body .hero,html body .ihero:not(.ihero--plain){display:block;min-height:0}
  html body .ihero:not(.ihero--plain) .ihero__in,html body .hero .hero__in{padding-top:clamp(28px,7vw,40px)}
}
html body .sticky-cta .btn,html body .sticky-cta .btn--sun,html body .sticky-cta .sticky-cta__wa{
  background:linear-gradient(118deg,#FFB347 0%,#FF7A1F 46%,#F2483C 100%);color:#00104A;border:1px solid rgba(255,255,255,.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 0 rgba(150,30,10,.16),0 8px 18px -10px rgba(240,86,40,.75)}
html body .sticky-cta .sticky-cta__wa svg{fill:#00104A}
@media (max-width:760px){
  html body .hero,html body .ihero:not(.ihero--plain){padding-bottom:36px}
  html body .ihero:not(.ihero--plain) .ihero__in,html body .hero .hero__in{padding-top:40px;padding-bottom:0}
}

/* =====================================================================
   SPACING + OVERLAP FIXES v33 (phones and tablets)
   ===================================================================== */
/* Photos beside long text: a fixed ratio so the grid row is exactly as tall as the photo
   (a max-height on an image with an intrinsic ratio left the row short and the next heading slid up over the photo). */
@media (max-width:900px){
  html body .csec__media img,html body .contact__photo img{width:100%;height:auto;max-height:none;aspect-ratio:16/10;object-fit:cover}
  html body .csec__grid{gap:26px}
  html body .csec__text .csec__head.sec-head,html body .csec__head.sec-head{margin-bottom:12px}
}

/* "What we install" cards: three across on desktop, one wide card per row on tablets (photo left),
   one stacked card per row on phones, always with a clear gap between cards. */
html body .tiles3{display:grid;gap:24px}
html body .tiles3 .tile{display:flex;flex-direction:column;overflow:hidden}
html body .tiles3 .card__body{display:flex;flex-direction:column;justify-content:flex-start}
@media (min-width:1024px){
  html body .tiles3{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
}
@media (min-width:641px) and (max-width:1023px){
  html body .tiles3{grid-template-columns:1fr;gap:24px}
  html body .tiles3 .tile{display:grid;grid-template-columns:minmax(0,40%) minmax(0,1fr);align-items:stretch}
  html body .tiles3 .tile__media{width:auto;height:100%;min-height:220px;aspect-ratio:auto}
  html body .tiles3 .tile__media img{width:100%;height:100%;object-fit:cover}
  html body .tiles3 .card__body{padding:24px 28px;justify-content:center}
  html body .tiles3 p{display:block;-webkit-line-clamp:unset;overflow:visible;font-size:1rem;line-height:1.55;margin:0 0 .8em}
  html body .tiles3 h3{font-size:1.5rem}
  html body .tiles3 .link-arrow{font-size:1rem;gap:10px}
}
@media (max-width:640px){
  html body .tiles3{grid-template-columns:1fr;gap:22px}
  html body .tiles3 .tile{display:flex;flex-direction:column}
  html body .tiles3 .tile__media{width:100%;height:auto;min-height:0;aspect-ratio:16/10}
  html body .tiles3 .tile__media img{width:100%;height:100%;object-fit:cover}
  html body .tiles3 .card__body{padding:20px 20px 24px}
  html body .tiles3 p{display:block;-webkit-line-clamp:unset;overflow:visible;font-size:1rem;line-height:1.55;margin:0 0 .9em}
  html body .tiles3 h3{font-size:1.4rem}
  html body .tiles3 .link-arrow{font-size:.98rem}
}
html body .tiles-sec .nextbar{margin-top:28px}

/* Sticky phone/tablet bar: orange for the main action, WhatsApp green for chat */
html body .sticky-cta .sticky-cta__wa{background:linear-gradient(118deg,#5BE79A 0%,#2FCF78 50%,#16A84F 100%);color:#00104A;border-color:rgba(255,255,255,.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 0 rgba(0,86,34,.18),0 8px 18px -10px rgba(10,130,70,.75)}
html body .sticky-cta .sticky-cta__wa:hover,html body .sticky-cta .sticky-cta__wa:focus-visible{background:linear-gradient(118deg,#74F0AB 0%,#3FD985 50%,#1DB458 100%);color:#00104A}
html body .sticky-cta .sticky-cta__wa svg{fill:#00104A}
@media (max-width:900px){html body .csec__media,html body .contact__photo{top:auto;bottom:auto;left:auto;right:auto}}

/* Cards that stack on phones and tablets get a clear gap (they were 7 to 10px apart) */
@media (max-width:900px){
  html body .csec--facts .bl,html body .csec--facts .bl--led{display:grid;gap:16px}
  html body .csec--facts .bl li,html body .csec--facts .bl--led li{margin:0}
  html body .faq{display:grid;gap:14px}
  html body .faq details{margin:0}
  html body .stats{gap:16px}
  html body .contact-cards,html body .contact__aside,html body .ways{gap:16px}
  html body .contact-card{margin:0}
  html body .lg-cards{gap:16px}
  html body .tiles3 .card+.card{margin-top:0}
  html body .nextbar,html body .midcta{margin-top:24px}
}

/* sticky WhatsApp button: green (needs !important to beat the five-:not() primary-button rule above) */
html body .sticky-cta .sticky-cta__wa,html body .sticky-cta .sticky-cta__wa:hover,html body .sticky-cta .sticky-cta__wa:focus-visible{color:#00104A!important}
html body .sticky-cta .sticky-cta__wa{background:linear-gradient(118deg,#5BE79A 0%,#2FCF78 50%,#16A84F 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 0 rgba(0,86,34,.18),0 8px 18px -10px rgba(10,130,70,.75)!important}
html body .sticky-cta .sticky-cta__wa:hover,html body .sticky-cta .sticky-cta__wa:focus-visible{background:linear-gradient(118deg,#74F0AB 0%,#3FD985 50%,#1DB458 100%)!important}

/* tablet tiles: the photo no longer sets the card height, so cards are as tall as their text needs */
@media (min-width:641px) and (max-width:1023px){
  html body .tiles3 .tile__media{position:relative;min-height:220px;height:auto}
  html body .tiles3 .tile__media img{position:absolute;inset:0;width:100%;height:100%}
  html body .tiles3 .card__body{gap:4px}
}

/* Photos keep their own shape on phones and tablets (a forced wide crop cut the tops off portrait photos) */
@media (max-width:900px){
  html body .csec__media img,html body .contact__photo img{aspect-ratio:auto;height:auto;max-height:none;object-fit:contain}
}
/* Anywhere a photo is cropped on purpose, keep the top (faces, roofs) rather than the middle */
html body .csec--steps .csec__media img,html body .tiles3 .tile__media img,html body .bleed__img img{object-position:center 22%}
/* "What we install" photos are portrait: a squarer frame on phones keeps the subject in view */
@media (max-width:640px){html body .tiles3 .tile__media{aspect-ratio:1/1}html body .tiles3 .tile__media img{object-position:center 35%}}
@media (min-width:641px) and (max-width:1023px){html body .tiles3 .tile__media{min-height:260px}html body .tiles3 .tile__media img{object-position:center 35%}}

/* Hero photos: hidden up to 980px wide (phones and tablets). At those widths they were squeezed into a thin strip that cut most of the photo away. */
@media (max-width:980px){
  html body .hero__media,html body .ihero__media,html body .ihero:not(.ihero--plain) .ihero__media{display:none}
  html body .hero,html body .ihero:not(.ihero--plain){display:block;min-height:0;padding-bottom:36px}
  html body .ihero:not(.ihero--plain) .ihero__in,html body .hero .hero__in{padding-top:40px;padding-bottom:0}
}

/* Steps sections without a diagram: the cards take two columns and the photo sits beside them in its own shape (no banner crop) */
@media (min-width:901px){
  html body .csec--steps:not(:has(.figure)) .csec__head{grid-row:1}
  html body .csec--steps:not(:has(.figure)) .ol{grid-column:1/3;grid-row:2;grid-template-columns:repeat(2,minmax(0,1fr))}
  html body .csec--steps:not(:has(.figure)) .csec__media{grid-column:3;grid-row:2;align-self:start}
  html body .csec--steps:not(:has(.figure)) .csec__media img{aspect-ratio:4/5;max-height:560px;object-position:center 22%}
  html body .csec--steps:not(:has(.figure)) .csec__body>p,html body .csec--steps:not(:has(.figure)) .csec__body>.faq{grid-row:3}
}
/* Full-width photo bands: close to the photo's own wide shape so little is cut away */
@media (min-width:701px){html body .bleed{height:auto;aspect-ratio:21/9;max-height:640px}}
@media (max-width:700px){html body .bleed{height:auto;aspect-ratio:16/9;min-height:0}}

/* No forced crop on step-section photos; squarer home tiles on desktop */
@media (min-width:901px){
  html body .csec--steps .csec__media img,html body .csec--steps:not(:has(.figure)) .csec__media img{aspect-ratio:auto;height:auto;max-height:none}
}
@media (min-width:1024px){html body .tiles3 .tile__media{aspect-ratio:1/1;height:auto}html body .tiles3 .tile__media img{object-position:center 35%}}
/* hero photo framing: keep the whole family in the roof-shaped frame */
html body .ihero__media img[src*="perth-family-local-solar-hero"]{object-position:18% 40%}
html body .ihero:not(.ihero--plain) .ihero__media img[src*="perth-family-local-solar-hero"]{object-position:36% 40%!important}
@media (max-width:700px){html body .bleed{aspect-ratio:2/1}html body .bleed__img img{object-position:center 40%}}

/* =====================================================================
   MOBILE + TABLET MENU v34. One-screen menu: rows scale with the screen height so Home links, the
   quote button and the contact lines fit without scrolling (it only scrolls when a section is opened).
   Rounded menu button that turns into an orange close button; rows rise in one by one.
   ===================================================================== */
@keyframes menu-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (max-width:1180px){
  html body .nav-toggle{width:46px;height:46px;border:0;border-radius:15px;background:linear-gradient(145deg,#0B3A8F,#00104A);color:#fff;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 10px 18px -10px rgba(0,16,74,.8);transition:background .3s,box-shadow .3s,transform .2s}
  html body .nav-toggle:hover{background:linear-gradient(145deg,#0F4AB3,#031A5E)}
  html body .nav-toggle:active{transform:scale(.94)}
  html body .nav-toggle .i{width:24px;height:24px}
  html body.nav-open .nav-toggle,html.nav-open body .nav-toggle,html.nav-open .nav-toggle{background:linear-gradient(118deg,#FFB347,#FF7A1F 55%,#F2483C);color:#00104A;transform:none;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 18px -10px rgba(240,86,40,.8)}
  html.nav-open .site-header--over .nav-toggle{background:linear-gradient(118deg,#FFB347,#FF7A1F 55%,#F2483C);color:#00104A}

  html body .nav{padding:calc(var(--header-h) + 6px) clamp(18px,5vw,40px) calc(14px + env(safe-area-inset-bottom));
    background:radial-gradient(90% 40% at 100% 0%,rgba(255,150,74,.22),transparent 70%),radial-gradient(80% 40% at 0% 100%,rgba(70,160,255,.18),transparent 70%),linear-gradient(180deg,#FFF9F4 0%,#F3F9FF 100%)}
  html body .nav__list,html body .nav__mobile-cta{width:100%;max-width:640px;margin-inline:auto}
  html body .nav__item{border-bottom:1px solid rgba(0,16,74,.1)}
  html body .nav__link{padding:clamp(8px,1.7svh,15px) 0;font:600 clamp(1.2rem,min(5.4vw,3.7svh),1.7rem)/1.1 var(--font-body)}
  html body .nav__link .i{width:clamp(30px,4.6svh,38px);height:clamp(30px,4.6svh,38px);padding:9px}
  html body .nav__mobile-cta{gap:clamp(10px,2svh,18px);margin-top:clamp(14px,2.6svh,26px)}
  html body .nav__mobile-cta .btn{min-height:clamp(48px,7svh,60px)}
  html body .nav__contact{padding:clamp(8px,1.6svh,16px) 0 0;gap:2px;border-top:1px solid rgba(0,16,74,.1)}
  html body .nav__contact a{display:grid;grid-template-columns:86px minmax(0,1fr);align-items:center;gap:0;min-height:clamp(32px,5svh,42px)}
  html body .nav__contact small{width:auto;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#5A6A90}
  html body .nav__cards{padding-left:42px;gap:6px}
  html body .nav__cards a{padding:11px 14px;border-radius:14px}
  html body .nav__drop{padding-bottom:12px}
  html body.nav-open .nav__item,html.nav-open body .nav__item,html.nav-open .nav__item{animation:menu-rise .45s cubic-bezier(.2,.8,.2,1) backwards}
  html.nav-open .nav__item:nth-child(1){animation-delay:.04s}html.nav-open .nav__item:nth-child(2){animation-delay:.08s}
  html.nav-open .nav__item:nth-child(3){animation-delay:.12s}html.nav-open .nav__item:nth-child(4){animation-delay:.16s}
  html.nav-open .nav__item:nth-child(5){animation-delay:.2s}html.nav-open .nav__item:nth-child(6){animation-delay:.24s}
  html.nav-open .nav__mobile-cta{animation:menu-rise .5s .3s cubic-bezier(.2,.8,.2,1) backwards}
}
@media (max-width:1180px) and (max-height:560px){
  html body .nav__contact{display:none}
}
@media (prefers-reduced-motion:reduce){html.nav-open .nav__item,html.nav-open .nav__mobile-cta{animation:none}}
@media (max-width:1180px){html body .nav__link{min-height:clamp(46px,7.4svh,62px);align-items:center}html body .nav__contact a{overflow-wrap:anywhere}}
@media (max-width:1180px) and (max-height:600px){html body .nav__contact{display:none}}

/* Menu open after scrolling: the page body must not become its own scroll box (it pushed the sticky header, with the logo and close button, out of view) */
html.nav-open body,html.popup-open body{overflow:visible}

/* =====================================================================
   COMPACT CARD GRIDS v35 (tablet and phone)
   Card sections that used to run as one tall column now sit two across (two above, two below),
   so a visitor sees the whole set in a screen or two. Wide copy-heavy tables stay one per row on phones.
   ===================================================================== */
@media (max-width:900px){
  /* "Straight answers" / "What we believe" fact cards */
  html body .csec--facts .bl,html body .csec--facts .bl--led{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:stretch}
  html body .csec--facts .bl li,html body .csec--facts .bl--led li{display:flex;flex-direction:column;gap:6px;height:auto;padding:16px 14px 18px;border-radius:14px}
  html body .csec--facts .bl li strong,html body .csec--facts .bl--led li strong{font-size:1rem;line-height:1.3;margin:0}
  html body .csec--facts .bl li span,html body .csec--facts .bl--led li span,html body .csec--facts .bl li p{font-size:.9rem;line-height:1.5}

  /* numbered step lists become small cards */
  html body .csec--steps .ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;border:0;padding:0}
  html body .csec--steps .ol li{display:flex;flex-direction:column;gap:6px;margin:0;padding:16px 14px 18px;border:1px solid var(--rule);border-radius:14px;background:#fff;
    box-shadow:0 2px 6px rgba(0,16,74,.05),0 16px 30px -24px rgba(0,16,74,.5)}
  html body .csec--steps .ol li::before{width:2.2rem;height:2.2rem;margin:0 0 4px;font-size:.85rem}
  html body .csec--steps .ol li::after{display:none}
  html body .csec--steps .ol li>strong,html body .csec--steps .ol li>span,html body .csec--steps .ol li:not(:has(>strong))>span{padding-top:0;grid-column:auto}
  html body .csec--steps .ol li>strong{font-size:1rem;line-height:1.3}
  html body .csec--steps .ol li>span{font-size:.9rem;line-height:1.5}

  /* glance cards (legal pages), contact "ways", trust strip */
  html body .lg-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  html body .lg-card{padding:16px 14px}
  html body .ways{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  html body .ways>div{padding:14px;border-radius:14px;overflow-wrap:anywhere}
  html body .trustbar__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  html body .trustbar__item{padding:16px 14px;border-radius:14px}
  html body .trustbar__t{font-size:1rem;line-height:1.3}
  html body .trustbar__item p,html body .trustbar__item span{font-size:.88rem;line-height:1.45}

  /* three key figures stay in one row */
  html body .stats--3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  html body .stats--3 .stats__item{padding:14px 10px;text-align:center}
  html body .stats--3 dt{font-size:.78rem;line-height:1.3}
  html body .stats--3 dd{font-size:1.15rem;line-height:1.2}
}

/* Home "What we install": two cards across, the third full width beside its photo */
@media (max-width:1023px){
  html body .tiles3{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  html body .tiles3 .tile{display:flex;flex-direction:column;overflow:hidden}
  html body .tiles3 .tile__media{position:relative;width:100%;height:auto;min-height:0;aspect-ratio:4/3}
  html body .tiles3 .tile__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%}
  html body .tiles3 .card__body{padding:14px 14px 16px;gap:2px}
  html body .tiles3 h3{font-size:1.15rem;margin:0 0 .2em}
  html body .tiles3 p{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;font-size:.9rem;line-height:1.45;margin:0 0 .6em}
  html body .tiles3 .link-arrow{font-size:.9rem;gap:8px}
  html body .tiles3 .tile:last-child:nth-child(odd){grid-column:1/-1;display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr);align-items:stretch}
  html body .tiles3 .tile:last-child:nth-child(odd) .tile__media{aspect-ratio:auto;min-height:170px;height:100%}
  html body .tiles3 .tile:last-child:nth-child(odd) .card__body{justify-content:center}
}
@media (max-width:420px){
  html body .tiles3 h3{font-size:1.05rem}
  html body .tiles3 .link-arrow{font-size:.84rem}
  html body .tiles3 .link-arrow .i{width:24px;height:24px;padding:6px}
}

/* Tables that turn into cards: two across on tablets */
@media (min-width:601px) and (max-width:900px){
  html body .table-wrap table.table--stack tbody{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
}
/* closing paragraphs under a steps section flow one after another (they had all been pinned to the same row) */
@media (min-width:901px){
  html body .csec--steps .csec__body>p,html body .csec--steps .csec__body>.faq,html body .csec--steps:not(:has(.figure)) .csec__body>p,html body .csec--steps:not(:has(.figure)) .csec__body>.faq{grid-row:auto;grid-column:1/-1}
}

/* =====================================================================
   HOVER CONTRAST v36. Cards whose hover background is a light tint always get dark text.
   (An older rule turned card text white for a navy hover while a newer rule lightened the background,
   which left white text on a pale card.) Stats cards, trust cards and cards inside navy bands keep their own dark hover.
   ===================================================================== */
html body .csec--facts .bl li:hover,html body .csec--facts .bl--led li:hover,html body .lg-card:hover,html body .tiles3 .card:hover,html body .contact-card:hover{color:#17264F}
html body .csec--facts .bl li:hover :is(strong,b,h3,dt),html body .csec--facts .bl--led li:hover :is(strong,b,h3,dt),html body .lg-card:hover :is(strong,b),
html body .tiles3 .card:hover :is(h3,strong),html body .contact-card:hover :is(strong,b,h3){color:#00104A}
html body .csec--facts .bl li:hover :is(span,p,small,em),html body .csec--facts .bl--led li:hover :is(span,p,small,em),html body .lg-card:hover :is(span,p,small),
html body .tiles3 .card:hover p,html body .contact-card:hover :is(span,p,small){color:#17264F}
html body .csec--facts .bl li:hover a,html body .csec--facts .bl--led li:hover a,html body .lg-card:hover a,html body .contact-card:hover a{color:#9F3F08}

/* inline text links: the hover colour must stay readable on white and on tinted grounds */
html body :is(.sec--white,.sec--paper,.lede) :is(p,li,td,dd,figcaption) a:not(.btn):not(.link-arrow):not(.nextbar__link):hover{color:#9F3F08}
html body .csec--facts .bl li:hover :is(span,p,small,em),html body .csec--facts .bl--led li:hover :is(span,p,small,em){color:#17264F!important}

/* =====================================================================
   MENU CONTACT CARD v37. The contact lines in the mobile and tablet menu: one glass card, three tappable rows,
   each with a coloured icon tile, a small label over a bold value, and a chevron.
   ===================================================================== */
@media (max-width:1180px){
  html body .nav__contact{display:grid;gap:0;margin:clamp(8px,1.6svh,14px) 0 0;padding:0;overflow:hidden;border:1px solid rgba(0,16,74,.09);border-radius:18px;
    background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.62));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 18px 30px -22px rgba(0,16,74,.55)}
  html body .nav__contact li+li{border-top:1px solid rgba(0,16,74,.08)}
  html body .nav__contact a.nc{display:flex;align-items:center;gap:12px;min-height:0;padding:clamp(7px,1.3svh,11px) 14px;text-decoration:none;transition:background-color .25s}
  html body .nav__contact a.nc:hover,html body .nav__contact a.nc:active{background:rgba(255,160,90,.12)}
  html body .nav__contact a.nc::after{content:"";flex:none;margin-left:auto;width:8px;height:8px;border:solid #8A98B8;border-width:2px 2px 0 0;transform:rotate(45deg);transition:transform .25s,border-color .25s}
  html body .nav__contact a.nc:hover::after{transform:translateX(3px) rotate(45deg);border-color:#00104A}
  html body .nav__contact .nc__i{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 8px 14px -8px rgba(0,16,74,.55)}
  html body .nav__contact .nc__i svg{width:20px;height:20px}
  html body .nav__contact .nc--wa .nc__i{background:linear-gradient(150deg,#5BE79A,#16A84F);color:#00104A}
  html body .nav__contact .nc--wa .nc__i svg{fill:currentColor;stroke:none}
  html body .nav__contact .nc--mail .nc__i{background:linear-gradient(150deg,#FFB347,#F2483C);color:#00104A}
  html body .nav__contact .nc--mail .nc__i svg,html body .nav__contact .nc--area .nc__i svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  html body .nav__contact .nc--area .nc__i{background:linear-gradient(150deg,#7CC4FF,#2F7BE0);color:#fff}
  html body .nav__contact .nc__t{display:grid;gap:1px;min-width:0}
  html body .nav__contact .nc__t small{width:auto;font:700 .66rem/1.2 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:#5A6A90}
  html body .nav__contact .nc__t b{font:600 .98rem/1.25 var(--font-body);color:#00104A;overflow-wrap:anywhere}
}
@media (max-width:1180px) and (max-height:720px){
  html body .nav__contact a.nc{padding:6px 12px;gap:10px}
  html body .nav__contact .nc__i{width:30px;height:30px;border-radius:10px}
  html body .nav__contact .nc__i svg{width:17px;height:17px}
  html body .nav__contact .nc__t b{font-size:.9rem}
}
@media (max-width:1180px) and (max-height:600px){html body .nav__contact{display:none}}
html body .nav__contact .nc__i .i,html body .nav__contact .nc__i svg{width:20px;height:20px;color:inherit;opacity:1}
html body .nav__contact .nc--mail .nc__i .i,html body .nav__contact .nc--area .nc__i .i{stroke:currentColor;stroke-width:2;fill:none}
html body .nav__contact .nc--area .nc__i .i{color:#fff}
html body .nav__contact .nc--mail .nc__i .i{color:#00104A}
html body .nav__contact .nc__t b{font-size:.94rem}
html body .nav__contact .nc--area .nc__t b{font-size:.88rem;letter-spacing:-.005em}
@media (max-width:1180px) and (max-height:720px){html body .nav__contact .nc__i .i,html body .nav__contact .nc__i svg{width:17px;height:17px}}

/* =====================================================================
   STEPS v38. "How a Sunroof Solar Project Works" and the other step sections:
   cards react to hover, and the photo sits in its own right-hand column beside the cards (pinned while you read them)
   instead of floating at the top of an empty column.
   ===================================================================== */
html body .csec--steps .ol li{transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s,background-color .3s}
html body .csec--steps .ol li::before{transition:transform .3s var(--ease),box-shadow .3s}
@media (hover:hover){
  html body .csec--steps .ol li:hover{transform:translateY(-6px);background:#F1F7FF;border-color:rgba(0,16,74,.3);box-shadow:0 2px 6px rgba(0,16,74,.06),0 30px 44px -24px rgba(0,16,74,.5)}
  html body .csec--steps .ol li:hover::before{transform:scale(1.1);box-shadow:0 10px 18px -8px rgba(238,111,35,.8)}
  html body .csec--steps .ol li:hover>strong{color:#00104A}
  html body .csec--steps .ol li:hover>span{color:#17264F}
}
@media (min-width:901px){
  /* no-diagram variant: heading and cards on the left two thirds, the photo pinned in the right third */
  html body .csec--steps:not(:has(.figure)) .csec__head{grid-column:1/3;grid-row:1}
  html body .csec--steps:not(:has(.figure)) .ol{grid-column:1/3;grid-row:2}
  html body .csec--steps:not(:has(.figure)) .csec__body>*:not(.ol){grid-column:1/3;grid-row:auto}
  html body .csec--steps:not(:has(.figure)) .csec__media{grid-column:3;grid-row:1/span 8;align-self:start;position:sticky;top:calc(var(--header-h) + 72px)}
  html body .csec--steps:not(:has(.figure)) .csec__media img{width:100%;aspect-ratio:4/5;height:auto;object-fit:cover;object-position:center 20%;max-height:none}
}

/* =====================================================================
   HOME HERO v39 (phones and tablets). A sunrise-over-a-roof scene closes the hero and joins the dark trust section below,
   the heading gets a sun-coloured accent, buttons size to their text on tablets, and spacing is balanced top and bottom.
   ===================================================================== */
html body .hero .hl{background:linear-gradient(100deg,#FF8A1F 0%,#F2483C 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
@media (max-width:980px){
  html body .hero{position:relative;overflow:hidden;padding-bottom:0;background:
    radial-gradient(closest-side,rgba(255,150,74,.30),transparent) 100% 62%/70% 60% no-repeat,
    radial-gradient(closest-side,rgba(70,160,255,.28),transparent) -12% -6%/78% 52% no-repeat,
    linear-gradient(180deg,#F4F9FF 0%,#FFF7EE 78%,#FFE6CC 100%)}
  html body .hero .hero__inner{padding-top:clamp(36px,7vw,60px)}
  html body .hero .eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:clamp(14px,3vw,20px)}
  html body .hero .eyebrow::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#FFE27A,#FF8A1F);box-shadow:0 0 0 5px rgba(255,150,74,.22)}
  html body .hero h1{font-size:clamp(2.15rem,8.6vw,3.7rem);line-height:1.04;letter-spacing:-.03em;max-width:13em}
  html body .hero .lead{max-width:34em;font-size:clamp(1rem,2.6vw,1.2rem);line-height:1.55;color:#33466F}
  html body .hero .btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(20px,4vw,30px)}
  html body .hero .btn-row .btn{flex:1 1 100%}
  /* the scene: sun, rays and a roof with panels; its ground is the navy of the trust section below */
  html body .hero::after{content:"";display:block;height:clamp(150px,34vw,300px);margin-top:clamp(26px,5vw,44px);margin-bottom:-1px;
    background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20800%20260'%20preserveAspectRatio='xMidYMax%20slice'%3E%3Cdefs%3E%3CradialGradient%20id='s'%20cx='50%25'%20cy='40%25'%20r='60%25'%3E%3Cstop%20offset='0'%20stop-color='%23FFE27A'/%3E%3Cstop%20offset='.55'%20stop-color='%23FFB33F'/%3E%3Cstop%20offset='1'%20stop-color='%23FF7A1F'/%3E%3C/radialGradient%3E%3CradialGradient%20id='h'%20cx='50%25'%20cy='50%25'%20r='50%25'%3E%3Cstop%20offset='0'%20stop-color='%23FFB347'%20stop-opacity='.55'/%3E%3Cstop%20offset='1'%20stop-color='%23FFB347'%20stop-opacity='0'/%3E%3C/radialGradient%3E%3ClinearGradient%20id='p'%20x1='0'%20y1='0'%20x2='1'%20y2='1'%3E%3Cstop%20offset='0'%20stop-color='%233C8DE0'/%3E%3Cstop%20offset='1'%20stop-color='%230B4A93'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle%20cx='585'%20cy='214'%20r='190'%20fill='url%28%23h%29'/%3E%3Cg%20stroke='%23FF9248'%20stroke-opacity='.7'%20stroke-width='4'%20stroke-linecap='round'%3E%3Cline%20x1='489.0'%20y1='214.0'%20x2='463.0'%20y2='214.0'/%3E%3Cline%20x1='489.8'%20y1='201.5'%20x2='475.9'%20y2='199.6'/%3E%3Cline%20x1='492.3'%20y1='189.2'%20x2='467.2'%20y2='182.4'/%3E%3Cline%20x1='496.3'%20y1='177.3'%20x2='483.4'%20y2='171.9'/%3E%3Cline%20x1='501.9'%20y1='166.0'%20x2='479.3'%20y2='153.0'/%3E%3Cline%20x1='508.8'%20y1='155.6'%20x2='497.7'%20y2='147.0'/%3E%3Cline%20x1='517.1'%20y1='146.1'%20x2='498.7'%20y2='127.7'/%3E%3Cline%20x1='526.6'%20y1='137.8'%20x2='518.0'%20y2='126.7'/%3E%3Cline%20x1='537.0'%20y1='130.9'%20x2='524.0'%20y2='108.3'/%3E%3Cline%20x1='548.3'%20y1='125.3'%20x2='542.9'%20y2='112.4'/%3E%3Cline%20x1='560.2'%20y1='121.3'%20x2='553.4'%20y2='96.2'/%3E%3Cline%20x1='572.5'%20y1='118.8'%20x2='570.6'%20y2='104.9'/%3E%3Cline%20x1='585.0'%20y1='118.0'%20x2='585.0'%20y2='92.0'/%3E%3Cline%20x1='597.5'%20y1='118.8'%20x2='599.4'%20y2='104.9'/%3E%3Cline%20x1='609.8'%20y1='121.3'%20x2='616.6'%20y2='96.2'/%3E%3Cline%20x1='621.7'%20y1='125.3'%20x2='627.1'%20y2='112.4'/%3E%3Cline%20x1='633.0'%20y1='130.9'%20x2='646.0'%20y2='108.3'/%3E%3Cline%20x1='643.4'%20y1='137.8'%20x2='652.0'%20y2='126.7'/%3E%3Cline%20x1='652.9'%20y1='146.1'%20x2='671.3'%20y2='127.7'/%3E%3Cline%20x1='661.2'%20y1='155.6'%20x2='672.3'%20y2='147.0'/%3E%3Cline%20x1='668.1'%20y1='166.0'%20x2='690.7'%20y2='153.0'/%3E%3Cline%20x1='673.7'%20y1='177.3'%20x2='686.6'%20y2='171.9'/%3E%3Cline%20x1='677.7'%20y1='189.2'%20x2='702.8'%20y2='182.4'/%3E%3Cline%20x1='680.2'%20y1='201.5'%20x2='694.1'%20y2='199.6'/%3E%3Cline%20x1='681.0'%20y1='214.0'%20x2='707.0'%20y2='214.0'/%3E%3C/g%3E%3Ccircle%20cx='585'%20cy='214'%20r='84'%20fill='url%28%23s%29'/%3E%3Cpolygon%20points='60,236%20210,118%20360,236'%20fill='%2300104A'/%3E%3Cpolyline%20points='60,236%20210,118%20360,236'%20fill='none'%20stroke='%23fff'%20stroke-opacity='.55'%20stroke-width='3'%20stroke-linejoin='round'/%3E%3Cg%20transform='translate%28222%20150%29%20skewY%2838%29'%20stroke='%23fff'%20stroke-opacity='.7'%20stroke-width='1.6'%20fill='url%28%23p%29'%3E%3Crect%20x='0'%20y='0'%20width='34'%20height='20'%20rx='2'/%3E%3Crect%20x='40'%20y='0'%20width='34'%20height='20'%20rx='2'/%3E%3Crect%20x='0'%20y='26'%20width='34'%20height='20'%20rx='2'/%3E%3Crect%20x='40'%20y='26'%20width='34'%20height='20'%20rx='2'/%3E%3C/g%3E%3Crect%20x='96'%20y='156'%20width='18'%20height='40'%20fill='%2300104A'%20stroke='%23fff'%20stroke-opacity='.4'%20stroke-width='2'/%3E%3Crect%20x='0'%20y='234'%20width='800'%20height='30'%20fill='%2300104A'/%3E%3C/svg%3E") center bottom/cover no-repeat}
}
@media (min-width:600px) and (max-width:980px){
  html body .hero .btn-row .btn{flex:0 0 auto;min-width:250px}
}
@media (max-width:980px){
  html body .hero .hero__inner,html body .hero .hero__copy{padding-bottom:0;margin-bottom:0;min-height:0}
  html body .hero .hero__inner{padding-top:clamp(34px,6vw,56px)}
  html body .hero::after{margin-top:clamp(22px,4vw,38px)}
}
@media (min-width:600px) and (max-width:980px){
  html body .hero .btn-row{display:flex;flex-direction:row;flex-wrap:wrap;gap:14px}
  html body .hero .btn-row .btn{flex:0 0 auto;width:auto;min-width:260px;justify-content:space-between}
}
html body .hero .hl{background:linear-gradient(100deg,#E35A0A 0%,#D83A2A 100%);-webkit-background-clip:text;background-clip:text}
@media (max-width:980px){html body .hero::after{background-position:22% bottom}}

/* =====================================================================
   CARD TEXT v40. No card ever cuts, clips or crowds its text.
   Number cards sit two across on phones (the odd one full width, left aligned), long words and email addresses wrap inside
   their card, and descriptions are shown in full instead of ending in "...".
   ===================================================================== */
html body :is(.stats__item,.lg-card,.contact-card,.ways>div,.trustbar__item,.csec--facts li,.ol li,.tiles3 .card,.pull,.nextbar) :is(dt,dd,b,strong,small,span,p,em,a,h3){overflow-wrap:anywhere;min-width:0;max-width:100%}
html body .tiles3 .card p,html body .tiles3 p{display:block;-webkit-line-clamp:unset;line-clamp:unset;overflow:visible;max-height:none}

/* number cards: sun glow, readable sizes, a wrapping value */
html body .stats__item b{font-size:clamp(1.7rem,6.4vw,2.7rem);line-height:1.05;white-space:normal}
html body .stats__item dt{line-height:1.4}
@media (max-width:640px){
  html body .stats,html body .stats--3,html body .stats--2,html body .stats--4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  html body .stats .stats__item,html body .stats .stats__item+.stats__item{padding:18px 16px 20px;text-align:left;border-radius:16px;min-width:0}
  html body .stats .stats__item:last-child:nth-child(odd){grid-column:1/-1}
  html body .stats--3 dt,html body .stats .stats__item dt{font-size:.88rem;text-align:left}
  html body .stats .stats__item dd{text-align:left}
}
@media (min-width:641px) and (max-width:900px){
  html body .stats--3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  html body .stats--3 .stats__item{padding:20px 18px 22px;text-align:left}
}

/* touch screens get a gentle press effect, since there is no hover */
@media (hover:none){
  html body :is(.stats__item,.csec--facts .bl li,.csec--facts .bl--led li,.csec--steps .ol li,.tiles3 .card,.lg-card,.contact-card,.ways>div,.trustbar__item){transition:transform .18s var(--ease),box-shadow .18s}
  html body :is(.stats__item,.csec--facts .bl li,.csec--facts .bl--led li,.csec--steps .ol li,.tiles3 .card,.lg-card,.contact-card,.ways>div,.trustbar__item):active{transform:scale(.985);box-shadow:0 10px 22px -16px rgba(0,16,74,.55)}
}
/* the card layout for tables only exists up to 760px; between 761 and 900px they stay ordinary tables */
@media (min-width:761px) and (max-width:900px){html body .table-wrap table.table--stack tbody{display:table-row-group;grid-template-columns:none;gap:0}}