@font-face{font-family:'ApolakiSans';src:url('../fonts/apolaki-sans-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'ApolakiSans';src:url('../fonts/apolaki-sans-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'ApolakiSans';src:url('../fonts/apolaki-sans-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'ApolakiSans';src:url('../fonts/apolaki-sans-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'ApolakiSerif';src:url('../fonts/apolaki-serif-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}

:root{
  /* Apolaki colour ratio, per Josa: blue carries the site.
     50%% #0E6CBD · 12.5%% #FDFDFD · 12.5%% #F2C94C · 12.5%% #193A70 · 12.5%% #00051C */
  --paper-w:#FDFDFD;
  --ink-black:#00051C;

  /* sampled from the Apolaki pitch deck and social posts */
  --cream:#FCF2D3;        /* soft tint only, used sparingly now */
  --cream-2:#FDF7E4;      /* lighter cream for large fields */
  --sky-1:#F1F6FA;        /* pale blue tint */
  --sky-2:#E8F1F9;
  --sky-3:#E3EEF8;
  --hi:#FFDE58;           /* bright highlight yellow */

  --serif:var(--disp);
  --ink:#12203A;
  --ink-70:#4A5261;
  --ink-45:#6B7383;
  --ink-25:#AEB4BF;
  --ink-35:#6E7686;
  --paper:#FFFFFF;
  --paper-2:#F8FAFC;
  --paper-3:#EBF1F8;
  --night:#193A70;
  --night-2:#143460;
  --blue:#0E6CBD;
  --blue-lt:#3E92DC;
  --gold:#F2C94C;
  --hair:#DEE6F0;
  --hair-dk:rgba(255,255,255,.12);
  --max:1240px;
  --pad:clamp(20px,4vw,48px);
  --nav:64px;
  --e:cubic-bezier(.16,1,.3,1);
  --disp:'ApolakiSans','Segoe UI',Roboto,sans-serif;
  --body:'ApolakiSans','Segoe UI',Roboto,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--body);font-size:16px;line-height:1.55;color:var(--ink);
  background:var(--paper);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;font-feature-settings:'kern' 1,'liga' 1;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
::selection{background:var(--blue);color:#fff}

h1,h2,h3,.d{font-family:var(--disp);font-weight:700;letter-spacing:-.024em;line-height:1.08;color:var(--ink)}
h1{font-size:clamp(2.05rem,4.05vw,3.3rem);letter-spacing:-.03em;line-height:1.07}
h2{font-size:clamp(1.62rem,3vw,2.42rem);letter-spacing:-.026em;line-height:1.1}
h3{font-size:clamp(1.02rem,1.5vw,1.2rem);font-weight:700;letter-spacing:-.018em;line-height:1.32}
p{color:var(--ink-70);font-size:.975rem;line-height:1.62}

.w{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}
.sec{padding-block:clamp(76px,9vw,132px)}
.lede{font-size:clamp(1rem,1.35vw,1.12rem);color:var(--ink-70);line-height:1.55;max-width:44ch}
.dim{color:var(--ink-45)}
.mono{font-variant-numeric:tabular-nums}

/* ---------- buttons ---------- */
.b{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--disp);font-weight:600;font-size:.925rem;letter-spacing:-.012em;
  height:46px;padding-inline:24px;border-radius:100px;
  transition:transform .5s var(--e),background .35s var(--e),color .35s var(--e),border-color .35s var(--e),box-shadow .5s var(--e);
  border:1px solid transparent;white-space:nowrap;
}
.b:hover{transform:translateY(-1.5px)}
.b-fill{background:var(--ink);color:#fff}
.b-fill:hover{background:#20252E;box-shadow:0 10px 26px -12px rgba(10,12,16,.6)}
.b-blue{background:var(--blue);color:#fff}
.b-blue:hover{background:#0B5CA3;box-shadow:0 12px 30px -12px rgba(14,108,189,.75)}
.b-glass{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.28);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.b-glass:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.5)}
.b-line{border-color:var(--hair);color:var(--ink)}
.b-line:hover{border-color:var(--ink);background:var(--paper-3)}
.b-sm{height:38px;padding-inline:18px;font-size:.86rem;letter-spacing:0}
.ar{transition:transform .5s var(--e)}
.b:hover .ar{transform:translateX(3px)}
.tl{display:inline-flex;align-items:center;gap:7px;font-family:var(--disp);font-weight:600;font-size:.9rem;letter-spacing:-.015em;color:var(--blue)}
.tl svg{transition:transform .5s var(--e)}
.tl:hover svg{transform:translateX(4px)}

/* ---------- nav ---------- */
.nv{
  position:fixed;inset:0 0 auto;z-index:900;height:var(--nav);
  transition:background .5s var(--e),border-color .5s var(--e),backdrop-filter .5s;
  border-bottom:1px solid transparent;
}
.nv-in{max-width:1400px;margin:0 auto;padding-inline:var(--pad);height:100%;display:flex;align-items:center;gap:24px}
.nv-lg{height:26px;width:auto;transition:opacity .4s var(--e)}
.nv-lg.dark{display:none}
.nv-links{display:flex;gap:1px;flex:1;margin-left:6px}
.nv-links a{
  font-family:var(--disp);font-weight:520;font-size:.845rem;letter-spacing:-.008em;
  padding:7px 11px;border-radius:8px;color:rgba(255,255,255,.72);transition:color .3s,background .3s;
}
.nv-links a:hover{color:#fff;background:rgba(255,255,255,.1)}
.nv-act{display:flex;align-items:center;gap:6px}
.nv-act .lgin{font-family:var(--disp);font-weight:520;font-size:.86rem;padding:8px 14px;border-radius:8px;color:rgba(255,255,255,.85);transition:.3s}
.nv-act .lgin:hover{background:rgba(255,255,255,.1);color:#fff}
/* solid state */
.nv.solid{background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);border-bottom-color:var(--hair)}
.nv.solid .nv-lg{display:none}
.nv.solid .nv-lg.dark{display:block}
.nv.solid .nv-links a{color:var(--ink-70)}
.nv.solid .nv-links a:hover{color:var(--ink);background:var(--paper-3)}
.nv.solid .nv-act .lgin{color:var(--ink)}
.nv.solid .nv-act .lgin:hover{background:var(--paper-3)}
.nv.solid .b-glass{background:var(--ink);color:#fff;border-color:var(--ink)}
.nv.solid .b-glass:hover{background:#20252E}
.nv.solid .bg span{background:var(--ink)}

.bg{display:none;width:38px;height:38px;flex-direction:column;align-items:center;justify-content:center;gap:5px;border-radius:8px}
.bg span{display:block;width:17px;height:1.5px;background:#fff;border-radius:2px;transition:.45s var(--e)}
.bg.on span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.bg.on span:nth-child(2){opacity:0;transform:scaleX(.3)}
.bg.on span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.mm{
  position:fixed;inset:var(--nav) 0 0;z-index:890;background:var(--paper);
  padding:20px var(--pad) 40px;overflow-y:auto;
  opacity:0;transform:translateY(-6px);pointer-events:none;transition:.45s var(--e);
}
.mm.on{opacity:1;transform:none;pointer-events:auto}
.mm a.ml{
  display:flex;align-items:center;justify-content:space-between;
  font-family:var(--disp);font-weight:600;font-size:1.28rem;letter-spacing:-.032em;
  padding:16px 0;border-bottom:1px solid var(--hair);color:var(--ink);
}
.mm a.ml svg{color:var(--ink-25)}
.mm-b{display:grid;gap:9px;margin-top:26px}
.mm-b .b{width:100%}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background:var(--night)}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;z-index:1;will-change:transform}
.hero-fb{position:absolute;inset:0;z-index:0}
.hero-scrim{
  position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(180deg,rgba(6,22,46,.86) 0%,rgba(8,28,58,.32) 26%,rgba(8,28,58,.30) 48%,rgba(7,24,48,.88) 84%,rgba(25,58,112,.97) 100%),
    linear-gradient(96deg,rgba(8,28,58,.72) 0%,rgba(8,28,58,.16) 56%,transparent 82%);
}
.hero-in{position:relative;z-index:3;width:100%;padding-bottom:clamp(28px,4vw,44px);padding-top:calc(var(--nav) + 60px)}
.hero-in .w{display:flex;flex-direction:column;gap:clamp(30px,4vw,44px)}
.hero h1{color:#fff;max-width:20ch;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero-sub{margin-top:20px;font-size:clamp(.98rem,1.3vw,1.08rem);color:rgba(255,255,255,.78);max-width:52ch;line-height:1.58}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.hero-fine{margin-top:16px;font-size:.83rem;color:rgba(255,255,255,.5)}

.hero-bar{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  border-top:1px solid rgba(255,255,255,.16);padding-top:clamp(20px,2.5vw,28px);
}
.hb{display:flex;flex-direction:column;gap:5px}
.hb .n{font-family:var(--disp);font-weight:600;font-size:clamp(1.3rem,2.4vw,1.95rem);letter-spacing:-.042em;color:#fff;line-height:1}
.hb .n .u{font-size:.5em;font-weight:520;letter-spacing:-.01em;color:rgba(255,255,255,.62);margin-left:2px}
.hb .l{font-size:.79rem;color:rgba(255,255,255,.5);letter-spacing:.005em;line-height:1.4}
.scrl{position:absolute;right:var(--pad);bottom:clamp(28px,4vw,44px);z-index:4;display:flex;align-items:center;gap:9px;color:rgba(255,255,255,.42);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-family:var(--disp);font-weight:600}
.scrl i{display:block;width:1px;height:34px;background:linear-gradient(180deg,rgba(255,255,255,.5),transparent);animation:sd 2.4s var(--e) infinite}
@keyframes sd{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- section head ---------- */
.sh{max-width:660px}
.sh h2{max-width:15ch}
.sh.c{max-width:820px;margin-inline:auto;text-align:center}
.sh.c h2{max-width:20ch;margin-inline:auto}
.sh p{margin-top:16px;max-width:50ch;font-size:1.02rem}
.sh.c p{margin-inline:auto}

/* ---------- how (sticky scroll) ---------- */
.how{border-top:1px solid var(--hair)}
.how-grid{display:grid;grid-template-columns:1fr .92fr;gap:clamp(40px,5vw,72px);margin-top:clamp(30px,3.4vw,48px);align-items:start}
.how-steps{display:flex;flex-direction:column}
.hstep{padding-block:clamp(20px,3.4vh,38px);min-height:31vh;display:flex;flex-direction:column;justify-content:center;border-top:1px solid var(--hair);opacity:.32;transition:opacity .8s var(--e)}
.hstep:first-child{border-top:none;padding-top:0}
.hstep.on{opacity:1}
.hstep .k{
  font-family:var(--disp);font-weight:600;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--blue);margin-bottom:14px;display:flex;align-items:center;gap:10px;
}
.hstep .k i{display:block;width:0;height:1px;background:var(--blue);transition:width .8s var(--e)}
.hstep.on .k i{width:34px}
.hstep h3{font-size:clamp(1.25rem,2.1vw,1.65rem);font-weight:620;letter-spacing:-.035em;margin-bottom:10px}
.hstep p{max-width:38ch}
.how-vis{position:sticky;top:calc(50vh - 292px);display:flex;justify-content:center}

/* phone */
.phone{
  width:322px;height:584px;border-radius:46px;background:#0B0E13;padding:9px;flex:none;
  box-shadow:0 0 0 1px rgba(10,12,16,.1),0 34px 70px -26px rgba(10,12,16,.45),0 4px 14px -6px rgba(10,12,16,.2);
  position:relative;
}
.phone::after{content:'';position:absolute;top:20px;left:50%;transform:translateX(-50%);width:76px;height:5px;border-radius:5px;background:rgba(255,255,255,.16)}
.scr{width:100%;height:100%;border-radius:34px;background:var(--paper);overflow:hidden;position:relative}
.pane{position:absolute;inset:0;padding:38px 18px 18px;opacity:0;transform:translateY(10px) scale(.985);transition:opacity .65s var(--e),transform .65s var(--e);pointer-events:none}
.pane.on{opacity:1;transform:none;pointer-events:auto}
.pane-t{font-family:var(--disp);font-weight:640;font-size:1.02rem;letter-spacing:-.03em;margin-bottom:3px}
.pane-s{font-size:.735rem;color:var(--ink-45);margin-bottom:16px}
.card{border:1px solid var(--hair);border-radius:14px;padding:13px 14px;background:var(--paper)}
.card+.card{margin-top:8px}
.card .ck{font-size:.63rem;text-transform:uppercase;letter-spacing:.11em;color:var(--ink-45);font-weight:600}
.card .cv{font-family:var(--disp);font-weight:640;font-size:1.18rem;letter-spacing:-.035em;margin-top:3px}
.card .cv .u{font-size:.56em;font-weight:520;color:var(--ink-45);margin-left:1px}
.card.big{background:var(--night-2);border-color:transparent;padding:16px}
.card.big .ck{color:rgba(255,255,255,.55)}
.card.big .cv{color:#fff;font-size:1.72rem}
.card.big .cs{font-size:.7rem;color:rgba(255,255,255,.5);margin-top:4px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.scan{
  border:1.5px dashed var(--hair);border-radius:16px;height:196px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;color:var(--ink-45);font-size:.76rem;
  background:var(--paper-2);position:relative;overflow:hidden;
}
.scan .bill{width:104px;height:132px;border-radius:7px;background:#fff;border:1px solid var(--hair);padding:9px;box-shadow:0 8px 20px -10px rgba(10,12,16,.28)}
.scan .bill i{display:block;height:3px;border-radius:2px;background:var(--paper-3);margin-bottom:5px}
.scan .bill i:nth-child(1){width:60%;background:var(--blue);opacity:.75}
.scan .bill i:nth-child(4){width:44%}
.scan .bill i:nth-child(7){width:72%;background:var(--ink-25)}
.scan .lz{position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--blue),transparent);animation:lz 2.6s var(--e) infinite;opacity:.9}
@keyframes lz{0%{top:14%}50%{top:86%}100%{top:14%}}
.roofmap{border-radius:16px;overflow:hidden;height:196px;position:relative;background:#28303B}
.pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 6px rgba(242,201,76,.26),0 0 0 13px rgba(242,201,76,.12)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.chip{font-size:.68rem;font-weight:550;padding:5px 10px;border-radius:100px;background:var(--paper-3);color:var(--ink-70)}
.chip.b{background:rgba(14,108,189,.1);color:var(--blue)}
.cmp{margin-top:14px;display:grid;gap:9px}
.cmp .cr{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:9px}
.cmp .cl{font-size:.66rem;color:var(--ink-45);font-weight:600;text-transform:uppercase;letter-spacing:.07em}
.cmp .tr{height:9px;border-radius:6px;background:var(--paper-3);overflow:hidden}
.cmp .tr i{display:block;height:100%;border-radius:6px;background:var(--ink-25);width:100%}
.cmp .cr.now .tr i{background:#C6CCD6}
.cmp .cr.aft .tr i{background:var(--blue);width:24.5%}
.cmp .cn{font-family:var(--disp);font-weight:640;font-size:.8rem;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.cmp .cr.aft .cn{color:var(--blue)}
.pbtn{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:7px;height:42px;border-radius:100px;background:var(--blue);color:#fff;font-family:var(--disp);font-weight:600;font-size:.83rem;letter-spacing:-.012em}
.pane{display:flex;flex-direction:column}
.pane-body{display:flex;flex-direction:column;flex:1}
.roofmap{height:228px}
.scan{height:224px}
.outp{margin-top:9px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 13px;border-radius:12px;background:var(--paper-3)}
.outp .k{font-size:.66rem;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-45);font-weight:600}
.outp .v{font-family:var(--disp);font-weight:640;font-size:1.02rem;letter-spacing:-.03em}

/* ---------- dark band ---------- */
.band{background:var(--night);color:#fff;position:relative;overflow:hidden}
.band h2,.band h3{color:#fff}
.band p{color:rgba(255,255,255,.62)}
.band-media{position:absolute;inset:0;z-index:0;opacity:.55}
.band-media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.band-fb{position:absolute;inset:0;background:radial-gradient(78% 110% at 82% 4%,rgba(20,130,220,.95),transparent 60%),radial-gradient(66% 86% at 6% 104%,rgba(242,201,76,.30),transparent 62%),linear-gradient(120deg,#193A70,#16457C 62%,#193A70)}
.band .w{position:relative;z-index:2}
.band-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(25,58,112,.97) 0%,rgba(25,58,112,.82) 40%,rgba(25,58,112,.42) 100%),linear-gradient(180deg,rgba(25,58,112,.68),transparent 32%,rgba(25,58,112,.74))}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,20px);margin-top:clamp(44px,5vw,68px)}
.th{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.11);border-radius:20px;
    padding:clamp(26px,2.6vw,32px) clamp(22px,2.2vw,28px);display:flex;flex-direction:column;
    transition:background .5s var(--e),border-color .5s var(--e),transform .5s var(--e)}
.th:hover{background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.22);transform:translateY(-3px)}
.th .tag{font-family:var(--disp);font-weight:600;font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;
         color:var(--gold);margin-bottom:14px;display:block}
.th h3{font-size:1.16rem;margin-bottom:12px;letter-spacing:-.02em}
.th p{font-size:.925rem;line-height:1.62;color:rgba(255,255,255,.7);flex:1}
.th .lnk{display:inline-flex;align-items:center;gap:7px;margin-top:24px;padding-top:18px;
         border-top:1px solid var(--hair-dk);font-family:var(--disp);font-weight:600;font-size:.85rem;
         letter-spacing:-.015em;color:#fff;transition:gap .45s var(--e)}
.th .lnk:hover{gap:12px}
.th .lnk svg{color:var(--gold)}

/* ---------- proof ---------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px);margin-top:clamp(40px,5vw,64px)}
.q{border:1px solid var(--hair);border-radius:20px;padding:clamp(24px,2.4vw,32px);display:flex;flex-direction:column;transition:border-color .5s var(--e),transform .5s var(--e)}
.q:hover{border-color:var(--ink-25);transform:translateY(-2px)}
.q blockquote{font-family:var(--disp);font-weight:540;font-size:1.02rem;letter-spacing:-.024em;line-height:1.45;color:var(--ink);flex:1}
.q .who{display:flex;align-items:center;gap:11px;margin-top:26px;padding-top:20px;border-top:1px solid var(--hair)}
.av{width:36px;height:36px;border-radius:50%;flex:none;background:var(--paper-3);color:var(--ink-70);display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:640;font-size:.74rem;letter-spacing:.01em;overflow:hidden;position:relative}
.av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.who .nm{font-family:var(--disp);font-weight:600;font-size:.875rem;letter-spacing:-.018em}
.who .rl{font-size:.775rem;color:var(--ink-45);margin-top:1px}

/* ---------- faq + cta ---------- */
.fin{border-top:1px solid var(--hair);background:var(--paper-2)}
.fq{max-width:760px;margin:clamp(38px,4vw,56px) auto 0}
.fi{border-bottom:1px solid var(--hair)}
.fi:first-child{border-top:1px solid var(--hair)}
.fq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:21px 2px;text-align:left;
  font-family:var(--disp);font-weight:580;font-size:1rem;letter-spacing:-.026em;transition:color .35s}
.fq-q:hover{color:var(--blue)}
.fic{position:relative;width:15px;height:15px;flex:none}
.fic::before,.fic::after{content:'';position:absolute;top:50%;left:50%;background:var(--ink-45);border-radius:2px;transform:translate(-50%,-50%);transition:.5s var(--e)}
.fic::before{width:13px;height:1.4px}
.fic::after{width:1.4px;height:13px}
.fi.on .fic::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.fi.on .fic::before{background:var(--blue)}
.fq-a{max-height:0;overflow:hidden;transition:max-height .55s var(--e)}
.fq-a p{padding:0 2px 22px;font-size:.93rem;line-height:1.68;max-width:64ch}
.fq-a a{color:var(--blue);font-weight:550;text-decoration:underline;text-underline-offset:3px}

.cta{background:var(--night);color:#fff;text-align:center;position:relative;overflow:hidden}
.cta::before{content:'';position:absolute;inset:0;z-index:2;background:radial-gradient(62% 82% at 50% 118%,rgba(14,108,189,.72),rgba(14,108,189,.2) 46%,transparent 76%);pointer-events:none}
.cta{padding-bottom:clamp(88px,10vw,140px)}
.cta-media{position:absolute;inset:0;z-index:0;overflow:hidden}
.cta-media img{width:100%;height:100%;object-fit:cover;opacity:.34}
.cta-media::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(25,58,112,.95),rgba(25,58,112,.74) 42%,rgba(25,58,112,.97))}
.cta .w{position:relative;z-index:2}
.cta h2{color:#fff;max-width:18ch;margin-inline:auto;text-wrap:balance}
.cta p{color:rgba(255,255,255,.62);margin:18px auto 0;max-width:42ch}
.cta .b-row{display:flex;gap:10px;justify-content:center;margin-top:32px;flex-wrap:wrap}
.cta .fine{margin-top:22px;font-size:.79rem;color:rgba(255,255,255,.38)}

/* ---------- footer ---------- */
footer{background:var(--night);color:#fff;padding-top:clamp(52px,6vw,76px)}
.fg{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:38px 28px;padding-bottom:46px}
.fb img{height:28px;margin-bottom:18px}
.fb p{font-size:.86rem;color:rgba(255,255,255,.5);max-width:28ch;line-height:1.6}
.fs{display:flex;gap:8px;margin-top:20px}
.fs a{width:34px;height:34px;border-radius:9px;border:1px solid var(--hair-dk);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.65);transition:.4s var(--e)}
.fs a:hover{background:#fff;border-color:#fff;color:var(--night);transform:translateY(-2px)}
.fc h4{font-family:var(--disp);font-weight:600;font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.36);margin-bottom:16px}
.fc ul{list-style:none;display:grid;gap:10px}
.fc a{font-size:.855rem;color:rgba(255,255,255,.66);transition:color .3s}
.fc li{font-size:.855rem;color:rgba(255,255,255,.66)}
.fc a:hover{color:#fff}
.fbot{border-top:1px solid var(--hair-dk);padding:22px 0 30px;display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;align-items:center}
.fbot p,.fbot a{font-size:.76rem;color:rgba(255,255,255,.36)}
.fbot a:hover{color:rgba(255,255,255,.75)}
.fl{display:flex;gap:20px;flex-wrap:wrap}

/* ---------- reveal ---------- */
.r{opacity:0;transform:translateY(18px);transition:opacity .95s var(--e),transform .95s var(--e)}
.r.in{opacity:1;transform:none}
.rs{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s var(--e)}
.rs.in{clip-path:inset(0 0 0 0)}
@media(prefers-reduced-motion:reduce){
  .r,.rs{opacity:1;transform:none;clip-path:none;transition:none}
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important}
  .hero-media img{transform:none!important}
}

/* ---------- responsive ---------- */
@media(max-width:1080px){.nv-links a{padding:7px 8px;font-size:.8rem}}
@media(max-width:920px){
  .nv-links,.nv-act .lgin,.nv-act .b{display:none}
  .bg{display:flex}
  .nv-in{justify-content:space-between}
  .how-grid{grid-template-columns:1fr;gap:20px}
  .how-vis{position:sticky;top:var(--nav);order:-1;z-index:5;padding:12px 0 0;background:var(--paper)}
  .how-vis::after{content:'';position:absolute;left:0;right:0;top:100%;height:26px;
                  background:linear-gradient(180deg,var(--paper),rgba(255,255,255,0));pointer-events:none}
  .chips{gap:5px}
  .chip{font-size:.62rem;padding:4px 8px}
  .outp{padding:9px 11px}
  .outp .k{font-size:.6rem;letter-spacing:.06em}
  .outp .v{font-size:.88rem}
  .card .cv{font-size:1.02rem}
  .cmp .cl{font-size:.6rem}
  .cmp .cn{font-size:.74rem}
  .cmp .cr{grid-template-columns:42px 1fr auto;gap:7px}
  .hstep{padding-block:16px;min-height:25vh;justify-content:flex-start}
  .phone{width:238px;height:432px;border-radius:36px;padding:7px}
  .phone::after{top:15px;width:62px;height:4px}
  .scr{border-radius:29px}
  .pane{padding:30px 14px 14px}
  .scan,.roofmap{height:150px}
  .scan .bill{width:82px;height:104px}
  .pane-t{font-size:.94rem}
  .card.big .cv{font-size:1.42rem}
  .pbtn{height:38px;font-size:.78rem}
  .three{grid-template-columns:1fr}
  .quotes{grid-template-columns:1fr}
  .fg{grid-template-columns:1fr 1fr;gap:32px 24px}
  .fb{grid-column:1/-1}
}
@media(max-width:600px){
  body{font-size:15.5px}
  .hero-bar{grid-template-columns:1fr;gap:0}
  .hb{flex-direction:row;align-items:baseline;justify-content:space-between;gap:14px;padding-block:13px;border-bottom:1px solid rgba(255,255,255,.1)}
  .hb:last-child{border-bottom:none}
  .hb .l{text-align:right;max-width:16ch}
  .scrl{display:none}
  .hero-cta .b{flex:1;min-width:150px}
  .fg{grid-template-columns:1fr}
  .fbot{flex-direction:column;align-items:flex-start}
}

/* ============================================================
   SUB-PAGE COMPONENTS
   ============================================================ */

/* --- sub-page hero (shorter than home) --- */
.phero{position:relative;background:var(--night);color:#fff;overflow:hidden;
  padding:calc(var(--nav) + clamp(64px,9vw,116px)) 0 clamp(56px,7vw,92px)}
.phero-media{position:absolute;inset:0;z-index:0}
.phero-media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;opacity:.5}
.phero-fb{position:absolute;inset:0;background:
  radial-gradient(72% 100% at 80% 0%,rgba(20,130,220,.9),transparent 62%),
  radial-gradient(60% 80% at 4% 100%,rgba(242,201,76,.26),transparent 62%),
  linear-gradient(125deg,#193A70,#16457C 60%,#193A70)}
.phero-scrim{position:absolute;inset:0;z-index:1;background:
  linear-gradient(92deg,rgba(25,58,112,.95) 0%,rgba(25,58,112,.78) 46%,rgba(25,58,112,.42) 100%),
  linear-gradient(180deg,rgba(25,58,112,.72),transparent 34%,rgba(25,58,112,.66))}
.phero .w{position:relative;z-index:2}
.phero h1{color:#fff;max-width:19ch;text-wrap:balance}
.phero h1 em{font-style:normal;color:var(--gold)}
.phero .psub{margin-top:20px;font-size:clamp(.99rem,1.3vw,1.1rem);color:rgba(255,255,255,.8);max-width:54ch;line-height:1.58}
.phero .pcta{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.pkicker{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:100px;
  border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.08);
  font-family:var(--disp);font-weight:600;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.88);margin-bottom:22px}
.pkicker i{width:6px;height:6px;border-radius:50%;background:var(--gold);display:block}

/* --- before / after --- */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,24px);margin-top:clamp(40px,5vw,60px)}
.ba-col{border-radius:22px;padding:clamp(26px,2.6vw,34px);border:1px solid var(--hair);background:var(--paper)}
.ba-col.after{background:var(--night);border-color:transparent;color:#fff}
.ba-h{display:flex;align-items:center;gap:10px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--hair)}
.ba-col.after .ba-h{border-bottom-color:rgba(255,255,255,.16)}
.ba-h span{font-family:var(--disp);font-weight:700;font-size:1.02rem;letter-spacing:-.02em}
.ba-col.after .ba-h span{color:#fff}
.ba-tag{font-family:var(--disp);font-weight:600;font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;
  padding:4px 9px;border-radius:100px;background:var(--paper-3);color:var(--ink-45)}
.ba-col.after .ba-tag{background:rgba(242,201,76,.16);color:var(--gold)}
.ba ul{list-style:none;display:grid;gap:14px}
.ba li{display:flex;gap:11px;align-items:flex-start;font-size:.93rem;line-height:1.55;color:var(--ink-70)}
.ba-col.after li{color:rgba(255,255,255,.76)}
.ba li svg{flex:none;margin-top:3px}
.ba-col li svg{color:var(--ink-25)}
.ba-col.after li svg{color:var(--blue-lt)}

/* --- numbered steps (vertical, sub-pages) --- */
.vsteps{display:grid;gap:clamp(14px,1.6vw,18px);margin-top:clamp(40px,5vw,60px)}
.vstep{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,2.2vw,30px);align-items:start;
  border:1px solid var(--hair);border-radius:20px;padding:clamp(24px,2.4vw,30px) clamp(22px,2.4vw,32px);
  background:var(--paper);transition:border-color .5s var(--e),transform .5s var(--e)}
.vstep:hover{border-color:var(--ink-25);transform:translateY(-2px)}
.vstep .vn{width:40px;height:40px;border-radius:12px;background:var(--blue);color:#fff;flex:none;
  display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:700;font-size:.95rem}
.vstep h3{margin-bottom:8px}
.vstep p{font-size:.945rem;max-width:62ch}
.vstep .vmeta{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.vstep .vmeta span{font-size:.72rem;font-weight:600;padding:5px 11px;border-radius:100px;background:var(--paper-3);color:var(--ink-70)}

/* --- feature grid --- */
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,20px);margin-top:clamp(40px,5vw,60px)}
.feat.two{grid-template-columns:repeat(2,1fr)}
.fcard{border:1px solid var(--hair);border-radius:20px;padding:clamp(24px,2.4vw,30px);background:var(--paper);
  transition:border-color .5s var(--e),transform .5s var(--e)}
.fcard:hover{border-color:rgba(14,108,189,.4);transform:translateY(-3px)}
.fcard .fi{width:38px;height:38px;border-radius:11px;background:rgba(14,108,189,.1);color:var(--blue);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.fcard h3{font-size:1.05rem;margin-bottom:9px}
.fcard p{font-size:.9rem;line-height:1.58}

/* --- coming soon --- */
.soon{background:var(--paper-2);border:1px solid var(--hair);border-radius:24px;
  padding:clamp(28px,3vw,42px);margin-top:clamp(36px,4vw,52px)}
.soon-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.soon-h h3{font-size:1.22rem}
.soon-badge{font-family:var(--disp);font-weight:700;font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;
  padding:5px 11px;border-radius:100px;background:rgba(242,201,76,.2);color:#8A6A08}
.soon>p{max-width:56ch}
.soon-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:24px}
.scard{background:var(--paper);border:1px solid var(--hair);border-radius:15px;padding:18px 17px}
.scard .si{width:26px;height:26px;color:var(--ink-45);margin-bottom:12px}
.scard b{display:block;font-family:var(--disp);font-weight:700;font-size:.9rem;letter-spacing:-.018em;margin-bottom:4px}
.scard span{font-size:.81rem;color:var(--ink-45);line-height:1.45}

/* --- audience tabs --- */
.tabs{display:inline-flex;padding:4px;border-radius:100px;background:var(--paper-3);gap:3px;margin-bottom:8px}
.tabs button{font-family:var(--disp);font-weight:600;font-size:.88rem;letter-spacing:-.012em;
  padding:10px 20px;border-radius:100px;color:var(--ink-45);transition:.4s var(--e);white-space:nowrap}
.tabs button[aria-selected="true"]{background:var(--paper);color:var(--ink);box-shadow:0 1px 3px rgba(10,23,41,.1)}
.tabpanel[hidden]{display:none}

/* --- calculator --- */
.calc{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(22px,3vw,40px);
  margin-top:clamp(28px,3vw,40px);align-items:start}
.calc-in{border:1px solid var(--hair);border-radius:22px;padding:clamp(22px,2.4vw,28px);background:var(--paper)}
.fld{margin-bottom:24px}
.fld:last-child{margin-bottom:0}
.fld-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.fld-h label{font-size:.83rem;color:var(--ink-45);font-weight:600}
.fld-h output{font-family:var(--disp);font-weight:700;font-size:1.02rem;letter-spacing:-.025em;color:var(--ink);font-variant-numeric:tabular-nums}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:4px;
  background:var(--paper-3);outline:none;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;
  background:var(--blue);border:3px solid #fff;box-shadow:0 1px 5px rgba(10,23,41,.28);cursor:grab}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--blue);
  border:3px solid #fff;box-shadow:0 1px 5px rgba(10,23,41,.28);cursor:grab;border-color:#fff}
input[type=range]:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.fld-scale{display:flex;justify-content:space-between;margin-top:8px;font-size:.72rem;color:var(--ink-35)}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{flex:1;min-width:56px;padding:9px 6px;border-radius:10px;border:1px solid var(--hair);
  font-family:var(--disp);font-weight:600;font-size:.83rem;color:var(--ink-70);transition:.35s var(--e)}
.seg button[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}

.calc-out{display:grid;gap:14px;min-width:0}
.kpi{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.tile{border:1px solid var(--hair);border-radius:18px;padding:20px 22px;background:var(--paper)}
.tile.lead{background:var(--night);border-color:transparent;grid-column:1/-1}
.tile .tk{font-size:.73rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-45);font-weight:600}
.tile.lead .tk{color:rgba(255,255,255,.62)}
.tile .tv{font-family:var(--disp);font-weight:700;font-size:1.62rem;letter-spacing:-.032em;margin-top:6px;
  color:var(--ink);font-variant-numeric:tabular-nums}
.tile.lead .tv{color:#fff;font-size:2.3rem}
.tile .ts{font-size:.79rem;color:var(--ink-45);margin-top:4px}
.tile.lead .ts{color:rgba(255,255,255,.6)}
.chartbox{border:1px solid var(--hair);border-radius:18px;padding:20px 22px 16px;background:var(--paper)}
.chart-t{font-family:var(--disp);font-weight:700;font-size:.94rem;letter-spacing:-.02em;margin-bottom:2px}
.chart-s{font-size:.78rem;color:var(--ink-45);margin-bottom:16px}
.chart-wrap{position:relative}
.tip{position:absolute;pointer-events:none;opacity:0;transition:opacity .18s;z-index:5;
  background:var(--ink);color:#fff;border-radius:10px;padding:9px 12px;font-size:.76rem;line-height:1.45;
  white-space:nowrap;box-shadow:0 6px 20px -6px rgba(10,23,41,.45);transform:translate(-50%,-100%)}
.tip b{font-family:var(--disp);font-weight:700;font-variant-numeric:tabular-nums}
.disc{margin-top:20px;padding:16px 18px;border-radius:14px;background:var(--paper-3);
  font-size:.8rem;line-height:1.6;color:var(--ink-45)}
.disc b{color:var(--ink-70)}
details.tbl{margin-top:12px}
details.tbl summary{cursor:pointer;font-size:.82rem;color:var(--blue);font-weight:600;padding:6px 0}
details.tbl table{width:100%;min-width:420px;border-collapse:collapse;margin-top:10px;font-size:.8rem;font-variant-numeric:tabular-nums}
details.tbl .scroll{max-height:280px;overflow:auto;-webkit-overflow-scrolling:touch}
details.tbl th,details.tbl td{text-align:right;padding:7px 8px;border-bottom:1px solid var(--hair)}
details.tbl th:first-child,details.tbl td:first-child{text-align:left}
details.tbl th{color:var(--ink-45);font-weight:600;font-size:.74rem;text-transform:uppercase;letter-spacing:.06em}

@media(max-width:920px){
  .ba{grid-template-columns:1fr}
  .feat,.feat.two{grid-template-columns:1fr}
  .soon-grid{grid-template-columns:1fr 1fr}
  .calc{grid-template-columns:1fr}
  .vstep{grid-template-columns:1fr;gap:14px}
}
@media(max-width:560px){
  .soon-grid{grid-template-columns:1fr}
  .kpi{grid-template-columns:1fr}
  .tabs{width:100%}
  .tabs button{flex:1;padding:10px 12px;font-size:.82rem}
  .phero .pcta .b{width:100%}
}

/* ============================================================
   V2 SUB-PAGE ELEMENTS — fewer words, more objects
   ============================================================ */

/* --- inline stat row --- */
.statrow{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair);
  border:1px solid var(--hair);border-radius:20px;overflow:hidden;margin-top:clamp(34px,4vw,48px)}
.statrow.on-dark{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.14)}
.stat-c{background:var(--paper);padding:clamp(22px,2.4vw,30px)}
.statrow.on-dark .stat-c{background:var(--night)}
.stat-c .sv{font-family:var(--disp);font-weight:700;font-size:clamp(1.6rem,3vw,2.15rem);letter-spacing:-.034em;
  line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.statrow.on-dark .stat-c .sv{color:#fff}
.stat-c .sv .u{font-size:.48em;font-weight:600;color:var(--ink-45);margin-left:2px}
.statrow.on-dark .stat-c .sv .u{color:rgba(255,255,255,.6)}
.stat-c .sl{margin-top:10px;font-size:.85rem;color:var(--ink-45);line-height:1.45}
.statrow.on-dark .stat-c .sl{color:rgba(255,255,255,.58)}

/* --- installer brief mockup --- */
.brief{background:var(--paper);border:1px solid var(--hair);border-radius:22px;overflow:hidden;
  box-shadow:0 2px 4px rgba(10,23,41,.03),0 24px 56px -24px rgba(10,23,41,.22);max-width:420px;width:100%}
.brief-top{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 20px;background:var(--night);color:#fff}
.brief-top b{font-family:var(--disp);font-weight:700;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase}
.brief-top span{font-size:.78rem;color:rgba(255,255,255,.66)}
.brief-body{padding:20px}
.brief-hero{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.brief-hero b{font-family:var(--disp);font-weight:700;font-size:1.5rem;letter-spacing:-.032em}
.brief-hero span{font-size:.85rem;color:var(--ink-45)}
.brief-rows{display:grid;gap:1px;background:var(--hair);border:1px solid var(--hair);
  border-radius:13px;overflow:hidden;margin-top:16px}
.brow{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--paper);padding:11px 14px}
.brow .k{font-size:.79rem;color:var(--ink-45)}
.brow .v{font-family:var(--disp);font-weight:600;font-size:.83rem;letter-spacing:-.014em;text-align:right}
.brow .v.ok{color:#15794A}
.brief-act{display:flex;gap:8px;margin-top:16px}
.brief-act .ba1{flex:1;height:40px;border-radius:100px;background:var(--blue);color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:600;font-size:.85rem}
.brief-act .ba2{width:96px;height:40px;border-radius:100px;border:1px solid var(--hair);color:var(--ink-45);
  display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:600;font-size:.85rem}
.brief-note{margin-top:12px;font-size:.75rem;color:var(--ink-35);text-align:center}
.split-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);align-items:center;
  margin-top:clamp(40px,5vw,60px)}
.split-2 .s2-vis{display:flex;justify-content:center}

/* --- money timeline (replaces the chart) --- */
.tline{margin-top:14px;min-width:0;padding:26px 24px 24px;border:1px solid var(--hair);border-radius:18px;background:var(--paper)}
.tline-t{font-family:var(--disp);font-weight:700;font-size:.94rem;letter-spacing:-.02em}
.tline-s{font-size:.78rem;color:var(--ink-45);margin-top:2px;margin-bottom:24px}
.track{position:relative;height:8px;border-radius:8px;background:var(--paper-3);margin-bottom:20px}
.track .fill{position:absolute;inset:0 auto 0 0;border-radius:8px;background:var(--blue);transition:width .5s var(--e)}
.track .mk{position:absolute;top:50%;transform:translate(-50%,-50%);width:17px;height:17px;border-radius:50%;
  background:#fff;border:3.5px solid var(--blue);box-shadow:0 1px 5px rgba(10,23,41,.24);transition:left .5s var(--e)}
.track .mk.start{left:0;border-color:var(--blue)}
.track .mk.end{left:100%;border-color:var(--ink-25)}
.tmarks{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tmarks>div:nth-child(1){text-align:left}
.tmarks>div:nth-child(2){text-align:center}
.tmarks>div:nth-child(3){text-align:right}
.tmarks .tm{font-size:.71rem;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-45);font-weight:600}
.tmarks .tb{font-family:var(--disp);font-weight:700;font-size:1.06rem;letter-spacing:-.028em;margin-top:5px;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.tmarks .tb.hl{color:var(--blue)}
.tmarks .tsm{font-size:.75rem;color:var(--ink-45);margin-top:2px}


@media(max-width:920px){
  .statrow{grid-template-columns:1fr}
  .split-2{grid-template-columns:1fr;gap:32px}
  .brief{max-width:none}
}
@media(max-width:560px){
  .track .lb b{font-size:.76rem}
  .track .lb span{font-size:.66rem}
  .tfoot{flex-direction:column;gap:12px}
  .tfoot div:last-child{text-align:left}
}

/* ============================================================
   LIGHT & FRESH THEME  — overrides
   ============================================================ */
:root{
  /* Apolaki colour ratio, per Josa: blue carries the site.
     50%% #0E6CBD · 12.5%% #FDFDFD · 12.5%% #F2C94C · 12.5%% #193A70 · 12.5%% #00051C */
  --paper-w:#FDFDFD;
  --ink-black:#00051C;

  /* sampled from the Apolaki pitch deck and social posts */
  --cream:#FCF2D3;        /* soft tint only, used sparingly now */
  --cream-2:#FDF7E4;      /* lighter cream for large fields */
  --sky-1:#F1F6FA;        /* pale blue tint */
  --sky-2:#E8F1F9;
  --sky-3:#E3EEF8;
  --hi:#FFDE58;           /* bright highlight yellow */

  --serif:var(--disp);
  --sun-50:#FFFDF6; --sun-100:#FFF7E2; --sun-200:#FFEFC4; --sun-300:#FFE39A;
  --cream:#FFFCF5;
}
body{background:var(--sun-50)}

/* breathing room — fixes text sitting under the previous section */
.sec{padding-block:clamp(88px,10vw,148px)}
.sec-tight{padding-block:clamp(66px,8vw,108px)}
.sh{margin-bottom:clamp(34px,4vw,52px)}
.sh p{margin-top:18px}
.ba,.feat,.vsteps,.statrow,.soon,.fq,.calc,.split-2,.jsteps{margin-top:0}
.soon{margin-top:clamp(44px,5vw,64px)}
section+section{border-top:0}

/* light hero */
.phero{background:linear-gradient(168deg,var(--cream) 0%,var(--sun-100) 42%,#FFFFFF 100%);color:var(--ink);
  padding:calc(var(--nav) + clamp(72px,10vw,124px)) 0 clamp(64px,8vw,104px);overflow:hidden}
.phero::after{content:'';position:absolute;top:-32%;right:-12%;width:min(760px,88vw);aspect-ratio:1;
  border-radius:50%;background:radial-gradient(circle,rgba(255,208,84,.5),rgba(255,229,160,.18) 46%,transparent 70%);
  pointer-events:none;z-index:0}
.phero-media,.phero-scrim{display:none}
.phero h1{color:var(--ink);max-width:17ch}
.phero h1 em{font-style:normal;background:linear-gradient(96deg,#E8A21B,#F2C94C);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.phero .psub{color:var(--ink-70);max-width:50ch}
.phero .b-glass{background:#fff;border-color:var(--hair);color:var(--ink);backdrop-filter:none}
.phero .b-glass:hover{background:var(--paper-3);border-color:var(--ink-25)}
.phero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,64px);align-items:center;
  position:relative;z-index:2}
.phero-shot{border-radius:26px;overflow:hidden;aspect-ratio:4/3;position:relative;
  background:linear-gradient(150deg,var(--sun-200),#CFE6FA);
  box-shadow:0 2px 6px rgba(10,23,41,.05),0 30px 70px -28px rgba(10,23,41,.3)}
.phero-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pkicker{display:none}

/* nav must read on a light hero. Scoped: pages with a DARK hero (.hero) must
   keep the white lockup and light links, so these rules must not apply there. */
body:has(.phero) .nv .nv-lg,
body:has(.chero) .nv .nv-lg{display:none}
body:has(.phero) .nv .nv-lg.dark,
body:has(.chero) .nv .nv-lg.dark{display:block}
body:has(.phero) .nv .nv-links a,
body:has(.chero) .nv .nv-links a{color:var(--ink-70)}
body:has(.phero) .nv .nv-links a:hover,
body:has(.chero) .nv .nv-links a:hover{color:var(--ink);background:var(--paper-3)}
body:has(.phero) .nv .nv-act .lgin,
body:has(.chero) .nv .nv-act .lgin{color:var(--ink)}
body:has(.phero) .nv .nv-act .lgin:hover,
body:has(.chero) .nv .nv-act .lgin:hover{background:var(--paper-3)}
body:has(.phero) .nv .b-glass,
body:has(.chero) .nv .b-glass{background:var(--ink);color:#fff;border-color:var(--ink)}
body:has(.phero) .nv .b-glass:hover,
body:has(.chero) .nv .b-glass:hover{background:#22304a}
body:has(.phero) .nv .bg span,
body:has(.chero) .nv .bg span{background:var(--ink)}
/* no :has support: fall back to the light treatment, which is the common case */
@supports not selector(body:has(.phero)){
  .nv .nv-lg{display:none} .nv .nv-lg.dark{display:block}
  .nv .nv-links a{color:var(--ink-70)} .nv .nv-act .lgin{color:var(--ink)}
  .nv .b-glass{background:var(--ink);color:#fff;border-color:var(--ink)}
  .nv .bg span{background:var(--ink)}
}
.nv-links a.active{color:var(--blue)}

/* alternate light section tint */
.tint{background:linear-gradient(180deg,#fff,var(--sun-100))}
.tint-b{background:var(--cream)}

/* ---- before / after, photo led, no checklists ---- */
.bafoto{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,26px)}
.bacard{border-radius:24px;overflow:hidden;background:#fff;border:1px solid var(--hair);
  display:flex;flex-direction:column;transition:transform .5s var(--e),box-shadow .5s var(--e)}
.bacard:hover{transform:translateY(-3px);box-shadow:0 24px 56px -26px rgba(10,23,41,.28)}
.bacard .ph{position:relative;aspect-ratio:16/10;background:linear-gradient(150deg,#E9EEF5,#D6DEE9);overflow:hidden}
.bacard.good .ph{background:linear-gradient(150deg,var(--sun-200),#BFDFF7)}
.bacard .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bacard.bad .ph img{filter:grayscale(.85) contrast(.92) brightness(1.04)}
.bacard .ph .badge{position:absolute;left:16px;top:16px;z-index:2;padding:7px 14px;border-radius:100px;
  font-family:var(--disp);font-weight:700;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  background:rgba(255,255,255,.94);color:var(--ink-45);backdrop-filter:blur(8px)}
.bacard.good .ph .badge{background:var(--ink);color:#fff}
.bacard .bd{padding:clamp(22px,2.4vw,30px)}
.bacard h3{font-size:1.16rem;margin-bottom:14px}
.bacard .lines{display:grid;gap:0}
.bacard .lines p{font-size:.92rem;line-height:1.5;padding:11px 0;border-top:1px solid var(--hair);margin:0}
.bacard .lines p:first-child{border-top:0;padding-top:0}
.bacard.good .lines p{color:var(--ink-70)}
.bacard.bad .lines p{color:var(--ink-45)}

/* ---- numbered join steps with big IDs ---- */
.jsteps{display:grid;gap:clamp(12px,1.6vw,18px);counter-reset:j}
.jstep{position:relative;display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,2.6vw,34px);
  align-items:center;background:#fff;border:1px solid var(--hair);border-radius:22px;
  padding:clamp(24px,2.6vw,34px) clamp(24px,2.6vw,36px);overflow:hidden;
  transition:border-color .5s var(--e),transform .5s var(--e)}
.jstep:hover{border-color:rgba(14,108,189,.36);transform:translateY(-2px)}
.jstep .jid{font-family:var(--disp);font-weight:800;font-size:clamp(2.6rem,5vw,3.9rem);line-height:.9;
  letter-spacing:-.05em;background:linear-gradient(160deg,var(--sun-300),#E8A21B);
  -webkit-background-clip:text;background-clip:text;color:transparent;min-width:1.9em}
.jstep h3{margin-bottom:7px}
.jstep p{font-size:.94rem;max-width:60ch}

/* ---- waitlist ---- */
.wait{display:flex;gap:9px;margin-top:20px;flex-wrap:wrap}
.wait input{flex:1;min-width:210px;height:46px;padding:0 18px;border-radius:100px;border:1px solid var(--hair);
  background:#fff;font-family:var(--body);font-size:.92rem;color:var(--ink);outline:none;transition:border-color .3s}
.wait input:focus{border-color:var(--blue)}
.wait .b{height:46px}
.wait-ok{margin-top:12px;font-size:.85rem;color:#15794A;font-weight:600;display:none}
.wait-ok.on{display:block}

/* ---- call-booking band ---- */
.callband{background:linear-gradient(150deg,var(--sun-100),#fff 60%,var(--sun-200));
  border:1px solid var(--sun-200);border-radius:28px;padding:clamp(30px,3.4vw,46px);
  display:grid;grid-template-columns:1fr auto;gap:clamp(20px,3vw,40px);align-items:center}
.callband h3{font-size:clamp(1.3rem,2.4vw,1.75rem);letter-spacing:-.028em;margin-bottom:8px}
.callband p{max-width:52ch;font-size:.96rem}
.callband .cb-act{display:flex;gap:9px;flex-wrap:wrap}

/* dark bits soften on the light theme */
.cta{background:linear-gradient(155deg,#193A70,#16457C 58%,#193A70)}
.ba-col.after,.tile.lead,.card.big{background:var(--night)}

@media(max-width:920px){
  .phero-in{grid-template-columns:1fr;gap:34px}
  .phero-shot{order:-1;aspect-ratio:16/10}
  .bafoto{grid-template-columns:1fr}
  .callband{grid-template-columns:1fr}
  .jstep{grid-template-columns:auto 1fr;gap:18px}
  .jstep .jid{font-size:2.4rem;min-width:1.6em}
}

/* ===== spacing rebalance ===== */
.sec{padding-block:clamp(68px,7.5vw,108px)}
.sec-tight{padding-block:clamp(52px,6vw,80px)}
.sh{margin-bottom:clamp(28px,3vw,40px)}
.phero{padding:calc(var(--nav) + clamp(56px,7vw,92px)) 0 clamp(52px,6vw,80px)}

/* ===== journey timeline (About) ===== */
.jrny{position:relative;margin-top:clamp(30px,3.4vw,44px)}
.jrny::before{content:'';position:absolute;left:19px;top:8px;bottom:8px;width:0;
  border-left:2px dashed var(--blue-lt);opacity:.5}
.jrnyx{position:relative;padding-left:60px;padding-bottom:clamp(26px,3vw,38px)}
.jrnyx:last-child{padding-bottom:0}
.jrnyx .dot{position:absolute;left:8px;top:4px;width:24px;height:24px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 0 5px var(--sun-100)}
.jrnyx.now .dot{box-shadow:0 0 0 5px var(--sun-200),0 0 0 7px var(--gold)}
.jrnyx .lbl{font-family:var(--disp);font-weight:700;font-size:.74rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-45)}
.jrnyx .dte{font-family:var(--disp);font-weight:800;font-size:clamp(1.25rem,2.2vw,1.6rem);
  letter-spacing:-.03em;color:var(--blue);margin:2px 0 7px}
.jrnyx.now .dte{color:#D89A0C}
.jrnyx p{font-size:.94rem;max-width:56ch}
.tlg{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:start}

/* ===== blog ===== */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px)}
.post{display:flex;flex-direction:column;border:1px solid var(--hair);border-radius:20px;overflow:hidden;
  background:#fff;transition:transform .5s var(--e),box-shadow .5s var(--e),border-color .5s var(--e)}
.post:hover{transform:translateY(-3px);box-shadow:0 22px 50px -24px rgba(10,23,41,.26);border-color:transparent}
.post .thumb{aspect-ratio:16/10;position:relative;overflow:hidden;
  background:linear-gradient(150deg,var(--sun-200),#CFE6FA)}
.post .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.post .tag{position:absolute;left:13px;top:13px;z-index:2;padding:5px 11px;border-radius:100px;
  background:rgba(255,255,255,.94);font-family:var(--disp);font-weight:700;font-size:.63rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-70)}
.post .pb{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.post h3{font-size:1.04rem;margin-bottom:8px;line-height:1.3}
.post p{font-size:.88rem;flex:1}
.post .rd{margin-top:16px;font-family:var(--disp);font-weight:600;font-size:.83rem;color:var(--blue)}
.post.np:hover{transform:none;box-shadow:none;border-color:var(--hair)}
.post .rd-soon{color:var(--ink-45);display:inline-flex;align-items:center;gap:7px}
.post .rd-soon:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold);flex:none}
.postrow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,30px);margin-bottom:clamp(18px,2.4vw,30px)}
.post.wide{flex-direction:row}
.post.wide .thumb{aspect-ratio:auto;width:44%;flex:none}

/* ===== faq groups ===== */
.fgroup{margin-bottom:clamp(30px,3.4vw,46px)}
.fgroup:last-child{margin-bottom:0}
.fgroup h3{font-size:1.16rem;margin-bottom:14px;padding-bottom:12px;border-bottom:2px solid var(--sun-300)}

/* ===== contact ===== */
.ccards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,20px)}
.ccard{background:#fff;border:1px solid var(--hair);border-radius:20px;padding:clamp(24px,2.6vw,30px);
  transition:transform .5s var(--e),border-color .5s var(--e)}
.ccard:hover{transform:translateY(-3px);border-color:rgba(14,108,189,.4)}
.ccard .ci{width:40px;height:40px;border-radius:12px;background:linear-gradient(150deg,var(--sun-200),var(--sun-300));
  color:#8A6A08;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.ccard h3{font-size:1.02rem;margin-bottom:6px}
.ccard p{font-size:.88rem;margin-bottom:12px}
.ccard a{font-family:var(--disp);font-weight:600;font-size:.9rem;color:var(--blue);word-break:break-word}
.cform{display:grid;gap:12px;max-width:560px}
.cform .rowx{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cform label{font-size:.82rem;color:var(--ink-45);font-weight:600;display:block;margin-bottom:6px}
.cform input,.cform select,.cform textarea{width:100%;padding:12px 15px;border-radius:12px;
  border:1px solid var(--hair);background:#fff;font-family:var(--body);font-size:.92rem;color:var(--ink);outline:none}
.cform textarea{min-height:120px;resize:vertical}
.cform input:focus,.cform select:focus,.cform textarea:focus{border-color:var(--blue)}
.cform .b{justify-self:start;margin-top:4px}
.cform-ok{display:none;padding:16px 18px;border-radius:14px;background:rgba(21,121,74,.08);
  color:#15794A;font-weight:600;font-size:.9rem}
.cform-ok.on{display:block}

@media(max-width:920px){
  .posts{grid-template-columns:1fr 1fr}
  .postrow{grid-template-columns:1fr}
  .post.wide{flex-direction:column}
  .post.wide .thumb{width:100%;aspect-ratio:16/10}
  .ccards{grid-template-columns:1fr}
  .tlg{grid-template-columns:1fr}
}
@media(max-width:600px){
  .posts{grid-template-columns:1fr}
  .cform .rowx{grid-template-columns:1fr}
}

/* ============================================================
   PER-PAGE COLOUR THEMES
   ============================================================ */
.th-white{
  --pgbg:#FFFFFF;
  --hero-g:linear-gradient(168deg,#FFFFFF 0%,#F3F8FD 44%,#FFFFFF 100%);
  --hero-glow:rgba(110,175,240,.34);
  --tint-g:linear-gradient(180deg,#FFFFFF,#EFF6FD);
  --tintb:#F8FBFE;
  --band:#EAF2FA;
}
.th-sun{
  --pgbg:#FFFDF6;
  --hero-g:linear-gradient(168deg,#FFFCF5 0%,#FFF3D6 42%,#FFFFFF 100%);
  --hero-glow:rgba(255,204,74,.55);
  --tint-g:linear-gradient(180deg,#FFFFFF,#FFF6DE);
  --tintb:#FFFCF3;
  --band:#FFF1CE;
}
.th-sky{
  --pgbg:#F9FCFF;
  --hero-g:linear-gradient(168deg,#F7FBFF 0%,#DFEEFB 44%,#FFFFFF 100%);
  --hero-glow:rgba(72,158,232,.44);
  --tint-g:linear-gradient(180deg,#FFFFFF,#E7F2FC);
  --tintb:#F5FAFE;
  --band:#DCEBF9;
}
body{background:#fff}
.pg{background:var(--pgbg,#fff)}
.th-white,.th-sun,.th-sky{background:var(--pgbg)}
.phero{background:var(--hero-g,linear-gradient(168deg,#fff,#F3F8FD 44%,#fff))}
.phero::after{background:radial-gradient(circle,var(--hero-glow,rgba(110,175,240,.34)),transparent 70%)}
.tint{background:var(--tint-g,linear-gradient(180deg,#fff,#EFF6FD))}
.tint-b{background:var(--tintb,#F8FBFE)}
.callband{background:linear-gradient(150deg,var(--band,#EAF2FA),#fff 62%,var(--band,#EAF2FA));
  border-color:color-mix(in srgb,var(--band,#EAF2FA) 70%,#fff)}
.soon{background:var(--tintb,#F8FBFE)}
.jrnyx .dot{box-shadow:0 0 0 5px var(--band,#EAF2FA)}
.jrnyx.now .dot{box-shadow:0 0 0 5px var(--band,#EAF2FA),0 0 0 7px var(--gold)}
.fgroup h3{border-bottom-color:var(--gold)}
.ccard .ci{background:linear-gradient(150deg,var(--band,#EAF2FA),color-mix(in srgb,var(--band,#EAF2FA) 55%,var(--gold)))}

/* legal pages */
.legal{max-width:760px}
.legal h2{font-size:1.18rem;margin:34px 0 10px}
.legal h2:first-child{margin-top:0}
.legal p{font-size:.96rem;line-height:1.72;color:var(--ink-70);margin-bottom:12px}

/* ===== catalyst hero: three frames on landing ===== */
.chero{position:relative;padding:calc(var(--nav) + clamp(34px,3.6vw,54px)) 0 clamp(44px,4.4vw,64px);
  background:linear-gradient(172deg,#FFFFFF 0%,#F1F7FD 40%,#FFFFFF 100%);overflow:hidden}
.chero:before{content:"";position:absolute;top:-14%;right:-6%;width:52vw;height:52vw;border-radius:50%;
  background:radial-gradient(circle,rgba(110,175,240,.30),rgba(110,175,240,0) 68%);pointer-events:none}
.chero:after{content:"";position:absolute;top:6%;left:-10%;width:38vw;height:38vw;border-radius:50%;
  background:radial-gradient(circle,rgba(242,201,76,.30),rgba(242,201,76,0) 68%);pointer-events:none}
.chero .w{position:relative;z-index:1}
.chero-top{max-width:min(100%,72ch);margin-bottom:clamp(26px,2.6vw,38px)}
.chero-top h1{font-size:clamp(1.86rem,3.1vw,2.72rem);line-height:1.1;letter-spacing:-.024em;margin-bottom:13px}
.chero-top h1 em{font-style:normal;color:var(--blue)}
.chero-top p{font-size:clamp(1rem,1.15vw,1.12rem);line-height:1.6;color:var(--ink-70);max-width:56ch}

.cframes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.5vw,22px)}
.cf.r{opacity:0;transform:translateY(30px) scale(.982)}
.cf.r.in{opacity:1;transform:none}
.cf{position:relative;display:flex;flex-direction:column;border:1px solid var(--hair);border-radius:22px;
  overflow:hidden;background:#fff;text-decoration:none;color:inherit;
  transition:transform .55s var(--e),box-shadow .55s var(--e),border-color .55s var(--e)}
.cf.r.in:hover,.cf:hover{transform:translateY(-6px);box-shadow:0 30px 64px -30px rgba(25,58,112,.34);border-color:transparent}
.cf-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:linear-gradient(150deg,#DCEBF9,#F6E7B4)}
.cf-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--e)}
.cf:hover .cf-media img{transform:scale(1.055)}
.cf-media:after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(25,58,112,.62) 0%,rgba(25,58,112,.06) 52%,transparent 100%)}
.cf-tag{position:absolute;left:16px;bottom:14px;z-index:2;color:#fff;font-family:var(--disp);font-weight:700;
  font-size:.66rem;letter-spacing:.15em;text-transform:uppercase}
.cf-n{position:absolute;right:14px;top:14px;z-index:2;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.9);color:var(--night);
  font-family:var(--disp);font-weight:700;font-size:.74rem}
.cf-body{padding:clamp(20px,2vw,26px) clamp(20px,2vw,26px) clamp(22px,2.2vw,28px);
  display:flex;flex-direction:column;flex:1}
.cf-body h2{font-size:clamp(1.06rem,1.35vw,1.28rem);line-height:1.24;margin-bottom:9px}
.cf-body p{font-size:.9rem;line-height:1.6;color:var(--ink-70);flex:1}
.cf-go{margin-top:18px;display:inline-flex;align-items:center;gap:8px;font-family:var(--disp);
  font-weight:600;font-size:.86rem;color:var(--blue)}
.cf-go svg{transition:transform .45s var(--e)}
.cf:hover .cf-go svg{transform:translateX(4px)}

.cbar{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,26px);
  margin-top:clamp(34px,3.6vw,52px);padding-top:clamp(26px,2.8vw,36px);border-top:1px solid var(--hair)}
.cbar .n{font-size:clamp(1.3rem,2vw,1.72rem);font-weight:700;color:var(--night);letter-spacing:-.02em}
.cbar .n .u{font-size:.56em;font-weight:600;color:var(--ink-45);margin-left:5px;letter-spacing:0}
.cbar .l{font-size:.83rem;line-height:1.5;color:var(--ink-70);margin-top:5px;max-width:34ch}

@media(max-width:900px){
  .cframes{grid-template-columns:1fr;gap:16px}
  .cf-media{aspect-ratio:16/9}
  .cbar{grid-template-columns:1fr;gap:18px}
  .chero{padding-top:calc(var(--nav) + 40px)}
}

/* three-up frames used as a section rather than a hero */
.three-up{position:relative;padding:clamp(34px,3.6vw,54px) 0 clamp(58px,6.2vw,90px);
  background:linear-gradient(180deg,#FFFFFF 0%,#F3F8FD 100%);overflow:hidden}
/* dark band runs from the hero down to the cards' waistline, so the cards sit
   ON the seam instead of floating below it. Height is set by JS; 57% is the
   no-JS fallback. */
.three-up:before{content:"";position:absolute;left:0;right:0;top:-1px;height:var(--dband,57%);
  background:linear-gradient(180deg,#193A70 0%,#102F58 78%,#193A70 100%)}
.three-up:after{content:"";position:absolute;left:50%;top:-18%;width:70vw;height:46vw;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(ellipse at 50% 40%,rgba(242,201,76,.20),rgba(242,201,76,0) 62%)}
.three-up .w{position:relative;z-index:2}
.three-up .sh{margin-bottom:clamp(26px,2.8vw,40px)}
.three-up .sh h2{color:#fff}
.three-up .sh p{color:rgba(255,255,255,.74)}
.three-up .cf{box-shadow:0 34px 70px -34px rgba(25,58,112,.62)}
.three-up .cf:hover{box-shadow:0 44px 84px -32px rgba(25,58,112,.7)}
/* each card's photo drifts at its own rate while you scroll */
.cf-media img{will-change:transform}
.cf-media.px img{transform:translate3d(0,var(--py,0),0) scale(1.1)}
.cf:hover .cf-media.px img{transform:translate3d(0,var(--py,0),0) scale(1.14)}


/* ============ SECTION BREATHERS ============
   Three ways to give the eye a rest between dense sections:
   .strip   full-bleed photo, no words
   .qband   one big quote over a darkened photo
   .bigtype one oversized line of type, no photo                         */

.strip{position:relative;height:clamp(190px,23vw,340px);overflow:hidden;background:var(--night)}
.strip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:translate3d(0,var(--py,0),0) scale(1.16);will-change:transform}
.strip:after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(25,58,112,.30),rgba(25,58,112,0) 55%)}
.strip .cap{position:absolute;left:0;right:0;bottom:clamp(16px,2vw,26px);z-index:2}
.strip .cap span{display:inline-block;font-family:var(--disp);font-weight:600;font-size:.76rem;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.86);
  background:rgba(25,58,112,.42);backdrop-filter:blur(6px);padding:7px 14px;border-radius:100px}

.qband{position:relative;padding:clamp(64px,8vw,120px) 0;overflow:hidden;background:var(--night)}
.qband img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.34;
  transform:translate3d(0,var(--py,0),0) scale(1.14);will-change:transform}
.qband:after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(25,58,112,.78),rgba(25,58,112,.9))}
.qband .w{position:relative;z-index:2}
.qband .qm{display:block;font-family:var(--disp);font-weight:700;font-size:clamp(2.6rem,5vw,4.4rem);
  line-height:.7;color:var(--gold);margin-bottom:10px}
.qband blockquote{font-family:var(--disp);font-weight:600;letter-spacing:-.028em;color:#fff;
  font-size:clamp(1.4rem,3.2vw,2.5rem);line-height:1.2;max-width:20ch;margin:0}
.qband blockquote em{font-style:normal;color:var(--gold)}
.qband cite{display:block;margin-top:clamp(18px,2vw,26px);font-style:normal;font-size:.88rem;
  color:rgba(255,255,255,.62)}
.qband.wide blockquote{max-width:26ch}

.bigtype{padding:clamp(58px,7vw,104px) 0;background:linear-gradient(168deg,#FFFCF3,#FFF3D6 58%,#FFFFFF)}
.bigtype p{font-family:var(--disp);font-weight:600;letter-spacing:-.03em;color:var(--night);
  font-size:clamp(1.5rem,3.6vw,2.9rem);line-height:1.18;max-width:22ch}
.bigtype p em{font-style:normal;color:var(--blue)}
.bigtype .sub{font-family:var(--body);font-weight:400;font-size:clamp(.96rem,1.1vw,1.06rem);
  line-height:1.62;color:var(--ink-70);max-width:52ch;margin-top:16px;letter-spacing:0}
.bigtype.sky{background:linear-gradient(168deg,#F7FBFF,#DFEEFB 58%,#FFFFFF)}
.bigtype.sky p em{color:var(--blue)}

@media(max-width:760px){
  .qband blockquote,.qband.wide blockquote{max-width:none}
  .bigtype p{max-width:none}
}

/* ==========================================================================
   ONE PAGE OPENER FOR EVERY SUB-PAGE  —  light, warm, and identical in
   structure so index and sub-pages read as the same website.
   ========================================================================== */
.phero{padding:calc(var(--nav) + clamp(38px,4.6vw,66px)) 0 0;overflow:hidden;position:relative}
.phero-in,.phero-shot,.phero-media,.phero-scrim{display:none!important}

/* the sun: our signature mark, rises slowly behind the headline */
.sunmark{position:absolute;top:-14%;right:-6%;width:min(620px,64vw);aspect-ratio:1;pointer-events:none;
  background:
    radial-gradient(circle at 50% 50%,var(--sunglow,rgba(242,201,76,.42)) 0%,transparent 58%),
    conic-gradient(from 0deg,transparent 0 6deg,var(--sunray,rgba(242,201,76,.16)) 6deg 8deg,transparent 8deg 30deg);
  border-radius:50%;animation:sunspin 190s linear infinite;opacity:.9}
@keyframes sunspin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.sunmark{animation:none}}
.th-sky .sunmark{--sunglow:rgba(96,170,240,.40);--sunray:rgba(96,170,240,.15)}
.th-white .sunmark{--sunglow:rgba(120,180,244,.34);--sunray:rgba(120,180,244,.13)}

.phero .pkick{display:flex;align-items:center;gap:14px;margin-bottom:clamp(14px,1.8vw,22px)}
.phero .pkick span{font-family:var(--disp);font-weight:600;font-size:.67rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-45);white-space:nowrap}
.phero .pkick i{flex:1;height:1px;background:var(--hair)}
.phero h1{color:var(--ink);max-width:19ch;font-size:clamp(2rem,4.3vw,3.5rem);line-height:1.03;
  letter-spacing:-.035em}
.phero .psub{margin-top:16px;font-size:clamp(1rem,1.2vw,1.1rem);color:var(--ink-70);max-width:54ch;line-height:1.6}
.phero .pcta{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(22px,2.6vw,32px)}

/* wide photo band, bleeding past the text column */
.pband{margin-top:clamp(30px,3.6vw,50px);padding-inline:clamp(12px,2vw,26px)}
.pband-in{position:relative;max-width:1560px;margin:0 auto;border-radius:clamp(16px,1.8vw,26px);
  overflow:hidden;aspect-ratio:24/9;background:linear-gradient(140deg,var(--sun-200,#FFE9AE),#CFE6FA)}
.pband-in img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:translate3d(0,var(--py,0),0) scale(1.1);will-change:transform}
@media(max-width:760px){.pband-in{aspect-ratio:16/10}}

/* hairline stat rail, no tiles */
.prail{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--hair);
  margin-top:clamp(30px,3.4vw,46px)}
.prail > div{border-left:1px solid var(--hair);padding:clamp(18px,2vw,26px) clamp(14px,1.8vw,26px) clamp(26px,3vw,40px)}
.prail > div:first-child{border-left:0;padding-left:0}
.prail .pn{font-family:var(--disp);font-weight:700;color:var(--night);letter-spacing:-.032em;line-height:1;
  font-size:clamp(1.45rem,2.7vw,2.3rem)}
.prail .pn .u{font-size:.42em;font-weight:600;color:var(--ink-45);margin-left:5px;letter-spacing:0}
.prail .pl{margin-top:8px;font-size:.82rem;line-height:1.5;color:var(--ink-70);max-width:28ch}
@media(max-width:760px){
  .phero h1,.phero .psub{max-width:none}
  .prail{grid-template-columns:1fr}
  .prail > div{border-left:0;border-top:1px solid var(--hair);padding-left:0;padding-bottom:20px}
  .prail > div:first-child{border-top:0}
}

/* ---------- fact ticker: the same band on every page ---------- */
.tick{background:var(--night);color:#fff;overflow:hidden;padding:clamp(13px,1.5vw,18px) 0;
  border-block:1px solid rgba(255,255,255,.1)}
.tick-tape{display:flex;width:max-content;animation:tickrun 46s linear infinite}
.tick:hover .tick-tape{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.tick-tape{animation:none}}
@keyframes tickrun{to{transform:translateX(-50%)}}
.tick-run{display:flex;align-items:center;flex:none}
.tick-run span{font-family:var(--disp);font-weight:600;font-size:clamp(.82rem,1vw,.95rem);
  letter-spacing:-.012em;white-space:nowrap;padding:0 clamp(16px,2vw,26px);color:rgba(255,255,255,.9)}
.tick-run i{width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none;display:block}

/* a little grain so gradients read as crafted rather than default CSS */
.phero:before,.stmt:before,.qband:before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E")}
.phero .w,.phero .pband,.stmt .w,.qband .w{position:relative;z-index:2}

/* stat rows adopt the opener's rail language so a page cannot contain two
   different treatments of the same idea */
.statrow{grid-template-columns:repeat(3,1fr);gap:0;background:none;border:0;
  border-top:1px solid var(--hair);border-radius:0;overflow:visible}
.statrow .stat-c{background:none!important;border-left:1px solid var(--hair);
  padding:clamp(18px,2vw,26px) clamp(14px,1.8vw,26px) clamp(22px,2.4vw,32px)}
.statrow .stat-c:first-child{border-left:0;padding-left:0}
.statrow.on-dark{border-top-color:rgba(255,255,255,.18)}
.statrow.on-dark .stat-c{border-left-color:rgba(255,255,255,.18)}
@media(max-width:760px){
  .statrow .stat-c{border-left:0;border-top:1px solid var(--hair);padding-left:0}
  .statrow .stat-c:first-child{border-top:0}
}

/* legal pages keep the opener's rhythm without the photo band */
.phero .ph-in{padding-bottom:clamp(30px,3.6vw,50px)}
.phero .ph-in h1{max-width:20ch}
.phero .ph-in .lead{margin-top:14px;font-size:clamp(1rem,1.2vw,1.1rem);color:var(--ink-70);max-width:54ch;line-height:1.6}

/* photo dividers: brand blue wash, no floating label */
.strip.blued:after{background:linear-gradient(150deg,rgba(14,108,189,.72),rgba(25,58,112,.82))}
.strip.blued img{filter:saturate(.35) contrast(1.06)}
.strip.blued .cap{display:none}

/* the bill bar sits on the dark hero */
.hero .billbar{margin-top:clamp(42px,5vh,58px)}
.hero .billnote{margin-top:16px;font-size:.82rem;color:rgba(255,255,255,.5)}

/* ==========================================================================
   FIVE OPENER COMPOSITIONS, ONE BRAND
   Shared: kicker rule, type scale, palette, rail. Different: arrangement.
   ========================================================================== */

/* -- split: installers. Headline left, tall blue-washed portrait right -- */
.v-split .psplit{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(30px,5vw,72px);
  align-items:center;padding-bottom:clamp(34px,4vw,56px)}
.v-split .psplit-i{position:relative;aspect-ratio:4/5;overflow:hidden;
  border-radius:clamp(14px,1.6vw,22px);background:var(--night)}
.v-split .psplit-i img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.4) contrast(1.05)}
.v-split .psplit-i:after{content:"";position:absolute;inset:0;
  background:linear-gradient(160deg,rgba(14,108,189,.62),rgba(25,58,112,.80))}
.v-split .psplit-i:before{content:"";position:absolute;z-index:2;left:0;bottom:0;width:38%;height:4px;
  background:var(--gold)}
.v-split h1{max-width:15ch}

/* -- numeric: financing. No photo. One figure does the work. -- */
.v-numeric .pnum{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(30px,5vw,74px);
  align-items:center;padding-bottom:clamp(36px,4.2vw,60px)}
.v-numeric .pfig{border-left:3px solid var(--gold);padding-left:clamp(20px,2.4vw,34px)}
.v-numeric .pfig-n{font-family:var(--disp);font-weight:700;line-height:.86;letter-spacing:-.05em;
  color:var(--night);font-size:clamp(3.6rem,9vw,7.4rem)}
.v-numeric .pfig-n .u{font-size:.3em;letter-spacing:-.02em;color:var(--ink-45);margin-left:.05em}
.v-numeric .pfig-l{margin-top:14px;font-family:var(--disp);font-weight:500;font-size:clamp(.98rem,1.2vw,1.1rem);
  line-height:1.55;color:var(--ink-70);max-width:34ch}
.v-numeric h1{max-width:14ch}

/* -- immersive: about. Photo behind the words. -- */
.v-immersive{position:relative;background:var(--night);isolation:isolate;
  padding-top:calc(var(--nav) + clamp(64px,9vw,120px));padding-bottom:clamp(40px,5vw,70px)}
.v-immersive .pimm-bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.v-immersive .pimm-bg img{width:100%;height:100%;object-fit:cover;opacity:.5;
  transform:translate3d(0,var(--py,0),0) scale(1.08)}
.v-immersive:after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(25,58,112,.72),rgba(25,58,112,.90))}
.v-immersive h1,.v-immersive .pkick span{color:#fff}
.v-immersive h1{max-width:16ch}
.v-immersive h1 em{color:var(--gold)}
.v-immersive .psub{color:rgba(255,255,255,.80)}
.v-immersive .pkick i{background:rgba(255,255,255,.24)}
.v-immersive .prail{border-top-color:rgba(255,255,255,.2)}
.v-immersive .prail > div{border-left-color:rgba(255,255,255,.2)}
.v-immersive .prail .pn{color:#fff}
.v-immersive .prail .pn .u,.v-immersive .prail .pl{color:rgba(255,255,255,.66)}
.v-immersive .b-glass{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.28);color:#fff}

/* -- compact: blog, faq, contact. Get out of the way. -- */
.v-compact{padding-bottom:clamp(14px,2vw,26px)}
.v-compact h1{font-size:clamp(1.9rem,3.6vw,2.9rem);max-width:20ch}
.v-compact .psub{max-width:58ch}
.v-compact .prail{margin-top:clamp(24px,2.8vw,38px)}

/* serif is the second voice: pull quotes, figure captions, editorial asides */
.qband blockquote{font-family:var(--disp);font-weight:600;letter-spacing:-.026em;line-height:1.2}


@media(max-width:860px){
  .v-split .psplit,.v-numeric .pnum{grid-template-columns:1fr;gap:26px}
  .v-split .psplit-i{aspect-ratio:16/10}
  .v-numeric .pfig{border-left:0;border-top:3px solid var(--gold);padding:20px 0 0}
  .v-split h1,.v-numeric h1,.v-immersive h1{max-width:none}
}

/* ---------- the bill bar: one ruled line, not a boxed form ---------- */
.billbar{display:flex;align-items:stretch;max-width:780px;
  border-bottom:2px solid rgba(255,255,255,.32);transition:border-color .4s var(--e)}
.billbar:focus-within{border-bottom-color:var(--gold)}
.billbar .bf{position:relative;display:flex;align-items:center;flex:0 0 auto}
.billbar .bf.grow{flex:1 1 auto;min-width:0}
.billbar .bf + .bf:before{content:"";position:absolute;left:0;top:24%;bottom:24%;width:1px;
  background:rgba(255,255,255,.22)}
.billbar label{position:absolute;left:0;top:-20px;font-family:var(--disp);font-weight:600;font-size:.62rem;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5);white-space:nowrap}
.billbar .bf.grow label{left:20px}
.billbar .peso{font-family:var(--disp);font-weight:600;color:rgba(255,255,255,.6);
  font-size:clamp(1.3rem,2.1vw,1.75rem);padding-right:6px;line-height:1}
.billbar input,.billbar select{background:none;border:0;outline:0;color:#fff;font-family:var(--disp);
  font-weight:600;letter-spacing:-.02em;padding:15px 0;min-width:0}
.billbar input#bAmt{font-size:clamp(1.3rem,2.1vw,1.75rem);width:6ch;flex:none}
.billbar input#bAddr{font-size:clamp(.95rem,1.1vw,1.05rem);font-weight:500;letter-spacing:0;
  padding-left:20px;width:100%}
.billbar input::placeholder{color:rgba(255,255,255,.32)}
.billbar select{font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.68);padding-left:18px;padding-right:22px;width:auto;cursor:pointer;
  -webkit-appearance:none;appearance:none}
.billbar select option{color:var(--ink);background:#fff}
.billbar .bf.util:after{content:"";position:absolute;right:6px;top:50%;width:6px;height:6px;margin-top:-5px;
  border-right:1.6px solid rgba(255,255,255,.5);border-bottom:1.6px solid rgba(255,255,255,.5);
  transform:rotate(45deg);pointer-events:none}
.billbar .bgo{flex:none;display:inline-flex;align-items:center;gap:9px;background:var(--gold);
  color:var(--night);border:0;cursor:pointer;font-family:var(--disp);font-weight:700;font-size:.9rem;
  letter-spacing:-.01em;padding:0 clamp(16px,1.8vw,24px);margin-left:16px;border-radius:0;
  transition:background .35s var(--e)}
.billbar .bgo:hover{background:#FFD966}
.billbar .bgo svg{transition:transform .35s var(--e)}
.billbar .bgo:hover svg{transform:translateX(3px)}
@media(max-width:820px){
  .billbar{flex-wrap:wrap;border-bottom:0;max-width:none}
  .billbar .bf{border-bottom:2px solid rgba(255,255,255,.3);width:100%;margin-top:26px}
  .billbar .bf + .bf:before{display:none}
  .billbar .bf.grow label{left:0}
  .billbar input#bAddr,.billbar select{padding-left:0}
  .billbar .bgo{margin:20px 0 0;width:100%;justify-content:center;padding:15px}
}

/* the immersive opener is dark, so the nav has to read light again */
body:has(.v-immersive) .nv .nv-lg{display:block}
body:has(.v-immersive) .nv .nv-lg.dark{display:none}
body:has(.v-immersive) .nv .nv-links a{color:rgba(255,255,255,.72)}
body:has(.v-immersive) .nv .nv-links a:hover{color:#fff;background:rgba(255,255,255,.1)}
body:has(.v-immersive) .nv .nv-links a.active{color:var(--gold)}
body:has(.v-immersive) .nv .nv-act .lgin{color:rgba(255,255,255,.86)}
body:has(.v-immersive) .nv .nv-act .lgin:hover{background:rgba(255,255,255,.1)}
body:has(.v-immersive) .nv .b-glass{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3);color:#fff}
body:has(.v-immersive) .nv .b-glass:hover{background:rgba(255,255,255,.22)}
body:has(.v-immersive) .nv .bg span{background:#fff}
body:has(.v-immersive) .nv.solid .nv-lg{display:none}
body:has(.v-immersive) .nv.solid .nv-lg.dark{display:block}
body:has(.v-immersive) .nv.solid .nv-links a{color:var(--ink-70)}
body:has(.v-immersive) .nv.solid .nv-act .lgin{color:var(--ink)}
body:has(.v-immersive) .nv.solid .b-glass{background:var(--ink);border-color:var(--ink);color:#fff}
body:has(.v-immersive) .nv.solid .bg span{background:var(--ink)}

/* ==========================================================================
   BRAND DEVICES, taken from the social posts and the deck
   1. the wave         organic curve between sections, gold or blue
   2. the pill         gold rounded label, replaces bare uppercase kickers
   3. the stamp        rough circular badge, for series and section marks
   4. cream surfaces   the warm ground the posts are built on
   ========================================================================== */

/* -- 1 · WAVE ------------------------------------------------------------ */
.wave{position:relative;line-height:0;height:clamp(54px,7vw,116px);overflow:hidden;margin-top:-1px}
.wave svg{display:block;width:100%;height:100%}
.wave path{transition:none}
/* the double wave: a gold sliver riding over the main colour, as on the covers */
.wave.duo{height:clamp(56px,8vw,130px)}

/* -- 2 · PILL ------------------------------------------------------------ */
.pill{display:inline-flex;align-items:center;gap:8px;background:var(--gold);color:var(--night);
  font-family:var(--disp);font-weight:700;font-size:.74rem;letter-spacing:.02em;
  padding:7px 16px;border-radius:100px;white-space:nowrap}
.pill.ghost{background:rgba(241,200,75,.22);color:var(--night)}
.pill.blue{background:var(--blue);color:#fff}
.on-dark .pill.ghost,.v-immersive .pill.ghost{background:rgba(255,255,255,.16);color:#fff}

/* -- 3 · STAMP ----------------------------------------------------------- */
.stamp{width:clamp(88px,9vw,124px);aspect-ratio:1;flex:none;position:relative;
  display:grid;place-items:center;color:var(--gold);transform:rotate(-9deg)}
.stamp svg{position:absolute;inset:0;width:100%;height:100%}
.stamp b{position:relative;font-family:var(--disp);font-weight:700;color:var(--blue);
  font-size:clamp(.6rem,.72vw,.72rem);letter-spacing:.06em;text-align:center;line-height:1.15}

/* -- 4 · CREAM SURFACES -------------------------------------------------- */
.sec.cream,.cream{background:var(--cream)}
.sec.cream-2{background:var(--cream-2)}
.sec.skytint{background:var(--sky-2)}

/* headline treatment from the posts: blue heads, navy body, bold key phrases */
.cream h2,.cream-2 h2,.cream h3{color:var(--blue)}
.cream p,.cream-2 p{color:var(--night)}
.cream strong,.cream-2 strong{color:var(--blue);font-weight:700}


/* ---------- openers rebuilt on the post palette: cream ground, blue heads ---------- */
.phero{background:var(--cream);padding-bottom:0}
.phero.th-sun{background:linear-gradient(168deg,var(--cream) 0%,#FEF8E6 62%,var(--cream) 100%)}
.phero.th-sky{background:linear-gradient(168deg,var(--sky-2) 0%,var(--sky-1) 60%,#FFFFFF 100%)}
.phero.th-white{background:linear-gradient(168deg,#FFFFFF 0%,var(--sky-1) 58%,#FFFFFF 100%)}
.phero h1{color:var(--blue)}
.phero h1 em{font-style:normal;color:var(--night);-webkit-text-fill-color:currentColor;background:none}
.phero .psub{color:var(--night);opacity:.86}
.phero .pkick{margin-bottom:clamp(16px,2vw,24px)}
.phero .prail{border-top-color:rgba(24,58,111,.16)}
.phero .prail > div{border-left-color:rgba(24,58,111,.16)}
.phero .prail .pn{color:var(--blue)}
.phero .prail .pl{color:var(--night);opacity:.78}
.sunmark{--sunglow:rgba(241,200,75,.5);--sunray:rgba(241,200,75,.2)}
.th-sky .sunmark{--sunglow:rgba(14,107,189,.22);--sunray:rgba(14,107,189,.12)}

/* the split portrait uses the brand blue wash from the posts */
.v-split .psplit-i:after{background:linear-gradient(155deg,rgba(14,107,189,.72),rgba(24,58,111,.86))}
.v-split .psplit-i:before{background:var(--gold);height:6px;width:44%}

/* numeric figure in brand blue with the gold rule */
.v-numeric .pfig{border-left-color:var(--gold)}
.v-numeric .pfig-n{color:var(--blue)}
.v-numeric .pfig-l{color:var(--night);opacity:.8}

/* the immersive opener is the blue photo post: blue gradient, white head, gold word */
.v-immersive{background:var(--blue)}
.v-immersive:after{background:linear-gradient(165deg,rgba(14,107,189,.86),rgba(24,58,111,.94))}
.v-immersive h1{color:#fff}
.v-immersive h1 em{color:var(--gold)}
.v-immersive .pill{background:var(--gold);color:var(--night)}

/* index hero: same blue photo treatment, not near-black */
.hero .hero-scrim{background:linear-gradient(178deg,rgba(24,58,111,.62) 0%,rgba(14,107,189,.34) 34%,rgba(24,58,111,.88) 78%,var(--night) 100%)}
.hero h1 em{color:var(--gold)}

/* strip / quote bands ride the brand blue too */
.strip.blued:after{background:linear-gradient(150deg,rgba(14,107,189,.74),rgba(24,58,111,.86))}
.qband:after{background:linear-gradient(180deg,rgba(14,107,189,.74),rgba(24,58,111,.93))}
.stmt{background:var(--gold);color:var(--night)}
.bigtype{background:linear-gradient(168deg,var(--cream),#FEF8E6 58%,#FFFFFF)}
.bigtype.sky{background:linear-gradient(168deg,var(--sky-2),var(--sky-1) 58%,#FFFFFF)}
.bigtype p{color:var(--blue)}
.bigtype p em{color:var(--night)}
.tint,.tint-b{background:var(--sky-1)}


/* the pill owns its own type; kill the old kicker styling underneath it */
.phero .pkick span.pill{color:var(--night);font-size:.76rem;letter-spacing:.01em;
  text-transform:none;font-weight:700}
.phero .pkick i{display:none}
/* nav CTA in brand blue, not near-black */
.nv .b-glass,body:has(.phero) .nv .b-glass{background:var(--blue);border-color:var(--blue);color:#fff}
.nv .b-glass:hover,body:has(.phero) .nv .b-glass:hover{background:#0B5EA6;border-color:#0B5EA6}
.b-blue{background:var(--blue)}
.b-blue:hover{background:#0B5EA6}


/* feedback round 1: the pill kickers and the opener stat rails are gone */
.phero .pkick{display:none}
.phero .prail{display:none}
.hero-bar{display:none}
/* G4: navy is one swatch of eight, not the ground. lighter everywhere. */
.hero .hero-scrim{background:linear-gradient(179deg,rgba(24,58,111,.42) 0%,rgba(14,107,189,.22) 38%,rgba(14,107,189,.62) 74%,rgba(24,58,111,.80) 100%)}


/* footer: light ground, the real logo, navy type. Less navy overall (G4). */
footer{background:var(--cream);color:var(--night);border-top:1px solid rgba(24,58,111,.12)}
footer .fb p{color:rgba(24,58,111,.76)}
footer .fc h4{color:rgba(24,58,111,.5)}
footer .fc a{color:rgba(24,58,111,.78)}
footer .fc a:hover{color:var(--blue)}
footer .fc li{color:rgba(24,58,111,.78)}
footer .fs a{color:var(--blue);background:rgba(14,107,189,.09);border-color:transparent}
footer .fs a:hover{background:var(--blue);color:#fff}
footer .fbot{border-top-color:rgba(24,58,111,.14)}
footer .fbot p,footer .fl a{color:rgba(24,58,111,.6)}
footer .fl a:hover{color:var(--blue)}
footer img{filter:none}

/* ---------- I1: the bill bar takes the brand's rounded shape, no utility picker ---------- */
.billbar{border-bottom:0;background:rgba(255,255,255,.10);border:1.5px solid rgba(255,255,255,.30);
  border-radius:100px;padding:6px 6px 6px 26px;backdrop-filter:blur(8px);align-items:center}
.billbar:focus-within{border-color:var(--gold);background:rgba(255,255,255,.15)}
.billbar .bf{border:0}
.billbar .bf + .bf:before{left:0;top:26%;bottom:26%}
.billbar label{top:auto;position:static;margin-right:0;display:none}
.billbar input,.billbar select{padding:13px 0}
.billbar input#bAddr{padding-left:24px}
.billbar .bgo{border-radius:100px;padding:14px clamp(20px,2.2vw,30px);margin-left:14px}
@media(max-width:820px){
  .billbar{border-radius:24px;padding:18px 20px;flex-wrap:wrap}
  .billbar .bf{width:100%;border-bottom:1px solid rgba(255,255,255,.22);margin-top:0;padding-bottom:6px}
  .billbar .bf:first-child{padding-bottom:6px}
  .billbar input#bAddr{padding-left:0}
  .billbar .bgo{margin:16px 0 0;width:100%;justify-content:center}
}

/* ---------- I4: the three doors, built on the pattern Josa pointed at:
   illustration, short title, one line, a solid button ---------- */
.cframes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,26px)}
.cf{display:flex;flex-direction:column;border:1px solid rgba(24,58,111,.10);border-radius:22px;
  overflow:hidden;background:#fff;text-decoration:none;color:inherit;box-shadow:none;
  transition:transform .5s var(--e),box-shadow .5s var(--e),border-color .5s var(--e)}
.cf:hover{transform:translateY(-5px);border-color:rgba(14,107,189,.3);
  box-shadow:0 24px 50px -28px rgba(24,58,111,.34)}
.cf-art{background:var(--cream);padding:clamp(18px,2vw,26px);display:grid;place-items:center}
.cf-art svg{width:100%;max-width:210px;height:auto;display:block;
  transition:transform .6s var(--e)}
.cf:hover .cf-art svg{transform:translateY(-4px) scale(1.03)}
.cf:nth-child(2) .cf-art{background:var(--sky-2)}
.cf:nth-child(3) .cf-art{background:#FFF6DC}
.cf-body{padding:clamp(20px,2.1vw,28px);display:flex;flex-direction:column;flex:1}
.cf-body h3{font-size:clamp(1.06rem,1.35vw,1.24rem);color:var(--blue);margin-bottom:9px;letter-spacing:-.02em}
.cf-body p{font-size:.9rem;line-height:1.6;color:var(--night);opacity:.82;flex:1}
.cf-btn{margin-top:18px;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;
  background:var(--blue);color:#fff;font-family:var(--disp);font-weight:700;font-size:.85rem;
  padding:11px 20px;border-radius:100px;transition:background .35s var(--e)}
.cf:hover .cf-btn{background:#0B5EA6}
.cf:nth-child(3) .cf-btn{background:var(--gold);color:var(--night)}
.cf:nth-child(3):hover .cf-btn{background:#FFD966}
@media(max-width:900px){.cframes{grid-template-columns:1fr}}


/* G4 + G6: the navy band under the hero comes out. Cream ground, no colour jump. */
.three-up:before,.three-up:after{display:none!important}
.three-up{background:linear-gradient(180deg,var(--cream) 0%,#FEF8E6 52%,#FFFFFF 100%);
  padding:clamp(52px,6vw,88px) 0 clamp(56px,6.4vw,94px)}
.three-up .sh h2{color:var(--blue)}
.three-up .sh p{color:var(--night);opacity:.8}
.three-up .cf{box-shadow:0 18px 44px -30px rgba(24,58,111,.3)}
.three-up .cf:hover{box-shadow:0 28px 56px -28px rgba(24,58,111,.4)}

/* A2: 'i noticed a single sunray here. remove' */
.sunmark{display:none}

/* A7: step numbers in brand blue, with an icon plate for visual interest */
.vstep .vn,.vsteps .vn,.jsteps .jn{color:var(--blue)!important}
.feat .fcard:before,.vstep:before{color:var(--blue)}
/* A11 + N11: Coming soon uses the deep blue so it pops and reads as anticipation */
.soon.dark{background:linear-gradient(150deg,var(--night),#12305C);border:0;color:#fff;
  border-radius:24px;padding:clamp(28px,3.2vw,44px)}
.soon.dark h3{color:#fff}
.soon.dark > p{color:rgba(255,255,255,.76);max-width:52ch}
.soon.dark .soon-grid > *{background:rgba(255,255,255,.06)!important;border:0!important;
  border-radius:16px!important;padding:18px!important}
.soon.dark .soon-grid h4,.soon.dark .soon-grid strong{color:#fff}
.soon.dark .soon-grid p{color:rgba(255,255,255,.68)}
.soon.dark .soon-grid svg{color:var(--gold)}
.soon.dark .wait input{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.24);color:#fff}
.soon.dark .wait input::placeholder{color:rgba(255,255,255,.45)}
.soon.dark .wait .b-blue{background:var(--gold);color:var(--night)}
.soon.dark .wait .b-blue:hover{background:#FFD966}
.soon.dark .wait-ok{color:var(--gold)}
.soon-badge{display:none}

/* G5: the other separators, so no two pages use the same device */
.cut{position:relative;line-height:0;overflow:hidden;height:clamp(46px,5.4vw,88px);margin-top:-1px}
.cut svg{display:block;width:100%;height:100%}
.cut.arc{height:clamp(52px,6.4vw,104px)}
.cut.rule{height:auto;padding:0;display:flex;justify-content:center}
.cut.rule span{display:block;height:5px;width:min(88%,1400px);border-radius:100px}

/* N9: join steps get a numeral, an icon plate and blue numerals */
.jstep{display:grid;grid-template-columns:auto auto 1fr;gap:clamp(14px,1.6vw,22px);align-items:start}
.jstep .jid{color:var(--blue);font-weight:700}
.jstep .jic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  background:rgba(14,107,189,.09);color:var(--blue);flex:none}
@media(max-width:640px){.jstep{grid-template-columns:auto 1fr}.jstep .jic{display:none}}

/* F8: lender-type cards carry a photo */
.fcard.photo{border:1px solid rgba(24,58,111,.1);border-radius:20px;padding:0;overflow:hidden;
  background:#fff;border-top:1px solid rgba(24,58,111,.1)}
.fcard.photo:before{display:none}
.fcard.photo .fc-img{aspect-ratio:16/7;overflow:hidden;background:var(--sky-2)}
.fcard.photo .fc-img img{width:100%;height:100%;object-fit:cover}
.fcard.photo .fi{margin:clamp(18px,2vw,24px) clamp(18px,2vw,24px) 12px}
.fcard.photo h3{padding-inline:clamp(18px,2vw,24px)}
.fcard.photo p{padding:0 clamp(18px,2vw,24px) clamp(20px,2.2vw,26px);max-width:none}

/* B1 + Q1: 'you dont need a headline for blogs' / 'straigt to the FAQs'.
   The h1 stays for search engines and screen readers, sized right down. */
.v-bare{padding:calc(var(--nav) + clamp(26px,3vw,40px)) 0 clamp(16px,2vw,26px);background:var(--cream)}
.v-bare h1.vh-lite{font-size:clamp(1.35rem,2vw,1.8rem);color:var(--blue);max-width:26ch;
  letter-spacing:-.025em;line-height:1.14}
.v-bare .psub{margin-top:10px;font-size:clamp(.95rem,1.1vw,1.04rem);max-width:60ch}

/* C5: the photo card beside the contact form becomes two plain links */
.plinks{display:grid;gap:10px;margin-top:16px}
.plinks a{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 20px;border-radius:16px;background:var(--sky-2);color:var(--blue);
  font-family:var(--disp);font-weight:600;font-size:.95rem;transition:background .35s var(--e)}
.plinks a:hover{background:var(--sky-3)}
.plinks svg{transition:transform .35s var(--e);flex:none}
.plinks a:hover svg{transform:translateX(4px)}
/* C4: 'closer on top' */
.v-compact + .sec,.v-compact + .sec-tight{padding-top:clamp(20px,2.4vw,34px)}

/* ==========================================================================
   COLOUR RATIO PASS
   Blue is the site's dominant surface, not an accent. White is the rest.
   Gold, navy and near-black each appear in small, deliberate doses.
   "i want more white than more yellow" — cream drops to a rare soft tint.
   ========================================================================== */
body{background:var(--paper-w)}

/* light sections become true white, not cream */
.sec.tint,.sec.tint-b,.tint,.tint-b,.sec.cream,.cream,.sec.cream-2,.cream-2{background:var(--paper-w)}
.three-up{background:linear-gradient(180deg,var(--paper-w) 0%,#F4F9FE 100%)}
.phero,.phero.th-sun,.phero.th-sky,.phero.th-white{background:var(--paper-w)}
.v-bare{background:var(--paper-w)}
.bigtype{background:var(--paper-w)}
.bigtype.sky{background:var(--paper-w)}

/* THE BLUE BAND: the workhorse surface. Half the page area lives here. */
.sec.brand{background:var(--blue);color:#fff}
.sec.brand h2,.sec.brand h3,.sec.brand .sv,.sec.brand .pn{color:#fff}
.sec.brand p,.sec.brand .sl,.sec.brand .pl{color:rgba(255,255,255,.80)}
.sec.brand .sh p{color:rgba(255,255,255,.80)}
.sec.brand em{color:var(--gold);font-style:normal}
.sec.brand .fcard{border-top-color:rgba(255,255,255,.24)}
.sec.brand .fcard h3{color:#fff}
.sec.brand .fcard p{color:rgba(255,255,255,.74)}
.sec.brand .fcard:before{color:rgba(255,255,255,.5)}
.sec.brand .fcard .fi{color:var(--gold)}
.sec.brand .b-blue{background:var(--gold);color:var(--night)}
.sec.brand .b-blue:hover{background:#FFD966}
.sec.brand .b-glass{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.34);color:#fff}
.sec.brand .statrow,.sec.brand .prail{border-top-color:rgba(255,255,255,.26)}
.sec.brand .stat-c,.sec.brand .prail > div{border-left-color:rgba(255,255,255,.26)}
.sec.brand .fq,.sec.brand .fi{border-color:rgba(255,255,255,.22)}
.sec.brand .fq-q{color:#fff}
.sec.brand .fq-a p{color:rgba(255,255,255,.78)}
.sec.brand .lnk,.sec.brand a{color:var(--gold)}

/* near-black earns its 12.5% at the very bottom of the page */
footer{background:var(--ink-black);color:#fff;border-top:0}
footer .fb p{color:rgba(255,255,255,.62)}
footer .fc h4{color:rgba(255,255,255,.42)}
footer .fc a,footer .fc li{color:rgba(255,255,255,.72)}
footer .fc a:hover{color:var(--gold)}
footer .fs a{color:#fff;background:rgba(255,255,255,.1)}
footer .fs a:hover{background:var(--gold);color:var(--ink-black)}
footer .fbot{border-top-color:rgba(255,255,255,.14)}
footer .fbot p,footer .fl a{color:rgba(255,255,255,.5)}
footer .fl a:hover{color:var(--gold)}

/* "make 9 bigger, add more space in 'in 10' so it doesnt look squeezed" */
.v-numeric .pfig-n{font-size:clamp(4.4rem,11vw,9rem)}
.v-numeric .pfig-n .u.wide{font-size:.26em;margin-left:.16em;letter-spacing:.02em;
  display:inline-block;padding-left:.06em}
/* the closing call band */
.ctaband{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(26px,4vw,60px);align-items:center}
.ctaband h2{font-size:clamp(1.5rem,2.8vw,2.3rem);letter-spacing:-.03em;margin-bottom:12px}
.ctaband p{max-width:52ch;line-height:1.62}
.ctaband-act{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.ctaband-act .b{width:100%;justify-content:center}
@media(max-width:820px){.ctaband{grid-template-columns:1fr}}

/* "coming soon in large text and center" */
.soon.center{text-align:center}
.soon.center .soon-h{justify-content:center;margin-bottom:14px}
.soon.center .soon-h.big h3{font-size:clamp(2rem,5vw,3.6rem);letter-spacing:-.035em;line-height:1.02}
.soon.center > p{margin-inline:auto;text-align:center}
.soon.center .soon-grid{text-align:left;margin-inline:auto;max-width:820px}
.soon.center .wait{justify-content:center;margin-inline:auto;max-width:520px}

/* the trusted-installer logo wall, placeholders until Josa sends the marks */
.logowall{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(10px,1.2vw,18px);
  margin-top:clamp(24px,3vw,40px)}
.lw{aspect-ratio:5/3;border:1px dashed rgba(14,108,189,.3);border-radius:14px;
  display:grid;place-items:center;background:rgba(14,108,189,.04)}
.lw span{font-family:var(--disp);font-weight:600;font-size:.68rem;letter-spacing:.06em;
  color:rgba(14,108,189,.55);text-align:center;padding:0 8px}
.lw-note{text-align:center;margin-top:18px;font-size:.85rem;color:var(--ink-70)}
@media(max-width:900px){.logowall{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.logowall{grid-template-columns:repeat(2,1fr)}}

/* gold earns its 12.5% on the closing call of every page */
.sec.goldband{background:var(--gold);color:var(--night)}
.sec.goldband h2,.sec.goldband h3{color:var(--night)}
.sec.goldband p{color:rgba(25,58,112,.82)}
.sec.goldband em{font-style:normal;color:var(--blue)}
.sec.goldband .b-blue{background:var(--night);color:#fff;border-color:var(--night)}
.sec.goldband .b-blue:hover{background:var(--ink-black)}
.sec.goldband .b-glass{background:rgba(25,58,112,.1);border-color:rgba(25,58,112,.3);color:var(--night)}
.sec.goldband .b-glass:hover{background:rgba(25,58,112,.18)}
.sec.goldband .cta-in,.sec.goldband .ctaband{color:var(--night)}


/* ==========================================================================
   CORRECTION: 50% blue means the ELEMENTS, not the page.
   Pages are white. Blue carries the components that sit on them.
   ========================================================================== */
body,.sec,.sec-tight,.tint,.tint-b,.cream,.cream-2{background:var(--paper-w)}
.sec.brand{background:var(--paper-w);color:var(--ink)}
.sec.brand h2,.sec.brand h3{color:var(--blue)}
.sec.brand p,.sec.brand .sh p{color:var(--ink-70)}
.sec.brand em{color:var(--night)}
.sec.brand .b-blue{background:var(--blue);color:#fff}
.sec.brand .b-glass{background:#fff;border-color:var(--hair);color:var(--ink)}
.sec.brand .fcard{border-top-color:var(--rule)}
.sec.brand .fcard h3{color:var(--ink)}
.sec.brand .fcard p{color:var(--ink-70)}
.sec.brand .fcard:before{color:var(--blue)}
.sec.brand .fcard .fi{color:var(--blue)}
.sec.brand .lnk,.sec.brand a{color:var(--blue)}
.sec.brand .statrow,.sec.brand .prail{border-top-color:var(--rule)}
.sec.brand .stat-c,.sec.brand .prail > div{border-left-color:var(--rule)}
.sec.brand .fq-q{color:var(--ink)}
.sec.brand .fq-a p{color:var(--ink-70)}
.sec.goldband{background:var(--paper-w);color:var(--ink)}
.sec.goldband h2,.sec.goldband h3{color:var(--blue)}
.sec.goldband p{color:var(--ink-70)}
.sec.goldband .b-blue{background:var(--blue);color:#fff;border-color:var(--blue)}
.sec.goldband .b-glass{background:#fff;border-color:var(--hair);color:var(--ink)}

/* blue is now doing the work at element level */
h2,h3{color:var(--blue)}
.sh h2{color:var(--blue)}
.stat-c .sv,.prail .pn,.vstep .vn,.jstep .jid,.fcard:before{color:var(--blue)}
.b-blue{background:var(--blue);color:#fff}
.fcard .fi,.feat .fi{color:var(--blue)}
.fq-q{color:var(--ink)}
.lnk{color:var(--blue)}

/* ---------- GALLERY: white ground, photo, blue card body ---------- */
.gallery{display:grid;gap:clamp(16px,1.8vw,26px);margin-top:clamp(28px,3.2vw,44px)}
.gallery.g3{grid-template-columns:repeat(3,1fr)}
.gallery.g2{grid-template-columns:repeat(2,1fr)}
.gallery.g4{grid-template-columns:repeat(4,1fr)}
.gcard{margin:0;border-radius:20px;overflow:hidden;background:var(--blue);color:#fff;
  display:flex;flex-direction:column;
  transition:transform .5s var(--e),box-shadow .5s var(--e)}
.gcard:hover{transform:translateY(-5px);box-shadow:0 26px 54px -28px rgba(14,108,189,.5)}
.gc-img{aspect-ratio:4/3;overflow:hidden;background:var(--sky-2)}
.gc-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--e)}
.gcard:hover .gc-img img{transform:scale(1.05)}
.gc-b{padding:clamp(18px,2vw,26px);flex:1;display:flex;flex-direction:column}
.gc-b h3{color:#fff;font-size:clamp(1rem,1.25vw,1.16rem);margin-bottom:8px;letter-spacing:-.02em}
.gc-b p{color:rgba(255,255,255,.82);font-size:.88rem;line-height:1.58;margin:0}
@media(max-width:960px){.gallery.g3,.gallery.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.gallery.g3,.gallery.g2,.gallery.g4{grid-template-columns:1fr}}

/* "use photos not icons" — the three doors carry photographs now */
.cf-photo{aspect-ratio:4/3;overflow:hidden;background:var(--sky-2)}
.cf-photo img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--e)}
.cf:hover .cf-photo img{transform:scale(1.05)}
.cf-art{display:none}
/* "i cant read. make the text bigger" */
.hero-sub.bigger{font-size:calc(clamp(1rem,1.28vw,1.16rem) * 1.02)}

.three-up .cf{background:var(--blue);border-color:transparent}
.three-up .cf .cf-body h3{color:#fff}
.three-up .cf .cf-body p{color:rgba(255,255,255,.82)}
.three-up .cf-btn{background:var(--gold);color:var(--night)}
.three-up .cf:hover .cf-btn{background:#FFD966}
.three-up{background:var(--paper-w)}

/* "remove the line so it transitions to a soft gradient to white" */
.fadeout{height:clamp(56px,7vw,120px);margin-top:-1px}
/* "1 line only. why is the word ask on the bottom" */
h2.oneline{white-space:nowrap;max-width:none;font-size:clamp(1.5rem,3.2vw,2.5rem)}
@media(max-width:520px){h2.oneline{white-space:normal}}

/* the disclaimer sits in the white space beside the payback timeline and
   finishes level with it, rather than running the full width underneath */
.tline-wrap{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(20px,2.6vw,40px);align-items:stretch}
.disc-card{background:var(--sky-1);border:1px solid var(--rule);border-radius:16px;
  padding:clamp(16px,1.8vw,22px);display:flex;align-items:center;margin:0}
.disc-card p{font-size:.78rem;line-height:1.55;color:var(--ink-70);margin:0}
.disc-card strong{color:var(--night)}
@media(max-width:900px){.tline-wrap{grid-template-columns:1fr}}


/* ---- BALANCE: disclaimer under the sliders, timeline full width beside it ---- */
.disc-card{background:var(--sky-1);border:1px solid var(--rule);border-radius:16px;
  padding:clamp(15px,1.7vw,20px);margin-top:16px}
.disc-card p{font-size:.75rem;line-height:1.5;color:var(--ink-70);margin:0}
.disc-card strong{color:var(--night)}
.tline-wrap{display:block}

/* ---- ABOUT: 'remove the circle. make the photo bigger' ---- */
.phero::after,.v-immersive::before{display:none!important}
.v-immersive{min-height:clamp(560px,80svh,860px);display:flex;align-items:center;
  padding-top:calc(var(--nav) + clamp(40px,5vw,70px));padding-bottom:clamp(44px,5.5vw,80px)}
.v-immersive .pimm-bg img{opacity:.62}
.v-immersive:after{background:linear-gradient(100deg,rgba(24,58,111,.90) 0%,rgba(14,108,189,.62) 48%,rgba(24,58,111,.30) 100%)}

/* ---- 'sections that are too white': a slim photo band as the separator ---- */
.slimband{position:relative;height:clamp(120px,15vw,220px);overflow:hidden;background:var(--sky-2)}
.slimband img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:translate3d(0,var(--py,0),0) scale(1.12)}
.slimband:after{content:"";position:absolute;inset:0;
  background:linear-gradient(96deg,rgba(14,108,189,.55),rgba(24,58,111,.30) 60%,rgba(24,58,111,.55))}
.rulesep{height:1px;background:var(--rule);max-width:1400px;margin:clamp(30px,4vw,56px) auto}

/* ---- FOOTER: photo behind it, like the other pages, with the real logo ---- */
footer{position:relative;background:var(--ink-black);overflow:hidden}
footer .fbg{position:absolute;inset:0;z-index:0}
footer .fbg img{width:100%;height:100%;object-fit:cover;opacity:.22}
footer:before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(0,5,28,.86),rgba(0,5,28,.95))}
footer .w{position:relative;z-index:2}
footer .fb img{height:auto;width:min(260px,64%);max-width:none}

/* ==== dark sections stay dark — the paper-white resets above must never reach these ==== */
.sec.cta,.cta{background:linear-gradient(155deg,#193A70,#16457C 58%,#193A70);color:#fff}
.sec.cta h2,.cta h2{color:#fff}
.sec.cta p,.cta p{color:rgba(255,255,255,.88)}
/* About hero: darker navy wash so the copy always reads, lead in full white */
.phero.v-immersive,.phero.v-immersive.th-sky,.phero.v-immersive.th-sun,.phero.v-immersive.th-white{background:var(--night)}
.v-immersive .pimm-bg img{opacity:.5}
.v-immersive:after{background:linear-gradient(100deg,rgba(13,32,66,.95) 0%,rgba(20,52,96,.84) 52%,rgba(24,58,111,.66) 100%)}
.v-immersive .psub{color:#fff}
/* Coming-soon dark panels: body copy in white, not half-tone */
.soon.dark > p{color:rgba(255,255,255,.94)}
.soon.dark .soon-grid p,.soon.dark .soon-grid span{color:rgba(255,255,255,.88)}
.soon.dark .soon-grid b{color:#fff}
/* financing tab note sits on one line on desktop */
#tabNote{white-space:nowrap}
@media(max-width:860px){#tabNote{white-space:normal}}

/* ==== Vision & Mission (About) ==== */
.vm{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px);max-width:980px;margin:0 auto}
.vm-c{position:relative;background:var(--paper);border:1px solid var(--hair);border-radius:20px;
  padding:clamp(26px,3vw,40px);text-align:center}
.vm-i{width:52px;height:52px;border-radius:14px;background:var(--cream);color:var(--gold);
  display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.vm-tag{display:inline-block;font-family:var(--disp);font-weight:700;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--blue);
  padding:7px 18px;border-radius:100px;margin-bottom:14px}
.vm-c p{font-family:var(--disp);font-weight:600;font-size:clamp(1.02rem,1.35vw,1.22rem);
  letter-spacing:-.015em;line-height:1.5;color:var(--night);max-width:34ch;margin:0 auto}
@media(max-width:760px){.vm{grid-template-columns:1fr}}

/* blog: oversized bare-hero headline */
.v-bare.vh-big{padding-bottom:clamp(26px,3vw,44px)}
.v-bare.vh-big h1.vh-lite{font-size:clamp(2rem,3.6vw,3.2rem);max-width:20ch;letter-spacing:-.03em;line-height:1.12}
/* contact: cards row sits close under the form */
#form + .sec-tight{padding-top:0}