/* ============================================================
   OCTANT FINANCIAL GROUP · octant.co.nz
   Design system modeled on getblue.com
   Near-black canvas, hairline column grid, single-weight
   grotesque type, mono labels, steel-blue accent.
   ============================================================ */

@font-face{font-family:'Grot';font-style:normal;font-weight:400;font-display:swap;
  src:url('../assets/fonts/inter-tight-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Grot';font-style:normal;font-weight:500;font-display:swap;
  src:url('../assets/fonts/inter-tight-latin-500-normal.woff2') format('woff2');}
/* Label face: same grotesque as body, letterspaced small caps (no typewriter mono) */
@font-face{font-family:'Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('../assets/fonts/inter-tight-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('../assets/fonts/inter-tight-latin-500-normal.woff2') format('woff2');}

:root{
  --bg:#0B0B0D;
  --bg2:#0F1013;
  --card:#131418;
  --card2:#17181D;
  --ink:#FFFFFF;
  --mut:#95A3AD;
  --dim:#78828B;
  --acc:#55758F;
  --acc2:#7FA0BC;
  --hair:rgba(255,255,255,.10);
  --hair2:rgba(255,255,255,.06);
  --m:12.18vw;           /* outer margin = first grid line */
  --colw:24.94vw;        /* column pitch */
  --nav-h:64px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
html.lenis,html.lenis body{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto !important;}
.lenis.lenis-stopped{overflow:hidden;}
html,body{background:var(--bg);}
html{overscroll-behavior:none;touch-action:manipulation;}
body{overscroll-behavior:none;}
img,video{-webkit-user-drag:none;user-drag:none;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none;}
body{
  font-family:'Grot',Arial,sans-serif;font-weight:400;color:var(--ink);
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{font-weight:400;}
::selection{background:var(--acc);color:#fff;}

/* ---------- background column grid ---------- */
.glines{position:fixed;inset:0;z-index:0;pointer-events:none;}
.glines i{position:absolute;top:0;bottom:0;width:1px;background:var(--hair2);}
.glines i:nth-child(1){left:var(--m);}
.glines i:nth-child(2){left:calc(var(--m) + var(--colw));}
.glines i:nth-child(3){left:calc(var(--m) + var(--colw)*2);}
.glines i:nth-child(4){left:calc(var(--m) + var(--colw)*3);}
.glines i:nth-child(2)::after,
.glines i:nth-child(3)::after{
  content:'+';position:absolute;top:calc(var(--nav-h) - 9px);left:-4.5px;
  font-family:'Mono';font-size:11px;color:rgba(255,255,255,.35);background:var(--bg);
  line-height:18px;
}

/* ---------- generic helpers ---------- */
.wrap{position:relative;z-index:1;margin:0 var(--m);}
.mono{font-family:'Mono';font-weight:400;text-transform:uppercase;letter-spacing:.08em;}
.chip{
  display:inline-block;font-family:'Mono';font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);border:1px solid var(--hair);
  padding:5px 10px 4px;border-radius:3px;background:rgba(255,255,255,.03);
}
.btn{
  display:inline-flex;align-items:center;gap:8px;background:var(--acc);color:#fff;
  border:0;border-radius:32px;padding:11px 22px;font-family:'Grot';font-size:15.5px;
  cursor:pointer;transition:background .25s,transform .25s;white-space:nowrap;
}
.btn:hover{background:var(--acc2);transform:translateY(-1px);}
.btn.ghost{background:transparent;border:1px solid var(--hair);color:var(--ink);}
.btn.ghost:hover{background:rgba(255,255,255,.06);}
.arrow-ic{width:14px;height:14px;flex:none;}

/* ---------- loader gate ---------- */
#gate{position:fixed;inset:0;z-index:200;background:var(--bg);display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:30px;}
#gate .mark{width:min(140px,30vw);opacity:0;}
#gate .words{width:min(300px,64vw);opacity:0;}
#gate .bar{width:min(220px,50vw);height:2px;background:rgba(255,255,255,.14);
  border-radius:99px;overflow:hidden;opacity:0;}
#gate .bar i{display:block;height:100%;width:0%;background:var(--ink);}
#gate .hint{font-family:'Mono';font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--mut);opacity:0;}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);
  padding-top:env(safe-area-inset-top,0px);
  height:calc(var(--nav-h) + env(safe-area-inset-top,0px));
  padding-left:max(var(--m),env(safe-area-inset-left,0px));
  padding-right:max(var(--m),env(safe-area-inset-right,0px));
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(18px,2.2vw,32px);
  border-bottom:1px solid var(--hair2);
  background:rgba(11,11,13,0);backdrop-filter:blur(0px);
  transition:background .4s,backdrop-filter .4s;
}
.nav.solid{background:rgba(11,11,13,.82);backdrop-filter:blur(14px);}
.nav-brand{display:flex;align-items:center;gap:12px;}
.nav-brand .mk{height:40px;width:auto;}
.nav-brand .wd{height:22px;width:auto;opacity:.95;}
.nav-center{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:34px;}
.nav-center a{font-size:15px;color:var(--ink);opacity:.85;transition:opacity .2s;}
.nav-center a:hover{opacity:1;}
.nav-right{display:flex;align-items:center;gap:18px;}
.menu-tg{display:flex;align-items:center;gap:7px;font-size:15px;color:var(--ink);
  background:none;border:0;cursor:pointer;font-family:'Grot';}
.menu-tg .pl{position:relative;width:12px;height:12px;}
.menu-tg .pl::before,.menu-tg .pl::after{content:'';position:absolute;background:var(--ink);
  transition:transform .35s ease;}
.menu-tg .pl::before{left:5px;top:0;width:2px;height:12px;}
.menu-tg .pl::after{left:0;top:5px;width:12px;height:2px;}
body.menu-open .menu-tg .pl::before{transform:rotate(45deg);}
body.menu-open .menu-tg .pl::after{transform:rotate(45deg);}

/* ---------- overlay menu ---------- */
#menu{
  position:fixed;inset:0;z-index:95;background:var(--bg);
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--nav-h) + 4vh) var(--m) 5vh;
  visibility:hidden;opacity:0;
}
#menu .mlink{
  display:flex;align-items:baseline;gap:18px;padding:1.45vh 0;
  border-bottom:1px solid var(--hair2);cursor:pointer;
}
#menu .mlink .no{font-family:'Mono';font-size:12px;color:var(--dim);width:26px;flex:none;}
#menu .mlink .lb{font-size:clamp(26px,3.6vh,40px);line-height:1.1;color:var(--ink);
  transition:transform .3s,color .3s;}
#menu .mlink:hover .lb{transform:translateX(10px);color:var(--acc2);}
#menu .msub{display:flex;gap:26px;padding:12px 0 0 44px;}
#menu .msub a{font-size:15px;color:var(--mut);}
#menu .msub a:hover{color:var(--ink);}
#menu .mfoot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;
  padding-top:4vh;color:var(--dim);font-size:13px;}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-start;z-index:1;}
.hero-bg{position:absolute;inset:0;z-index:0;}
.hero-bg video,.hero-bg canvas,.hero-bg img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42;}
.hero-bg::after{content:'';position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(11,11,13,.75) 0%,rgba(11,11,13,.25) 34%,rgba(11,11,13,.45) 70%,rgba(11,11,13,.92) 100%),
    radial-gradient(120% 80% at 50% 110%,rgba(11,11,13,.8),transparent 60%);}
.hero-inner{position:relative;z-index:2;margin:0 var(--m);padding-top:calc(var(--nav-h) + 3.2vh);}
.hero-h1{font-size:clamp(42px,7.7vw,116px);line-height:1.04;letter-spacing:-.015em;color:var(--ink);white-space:nowrap;}
.hero-h1 .l1,.hero-h1 .l2{display:block;overflow:hidden;}
.hero-h1 .l2{text-align:right;}
.hero-h1 .l1 span,.hero-h1 .l2 span{display:inline-block;}
.hero-sub{
  margin-left:66%;margin-top:2.6vh;max-width:300px;
  font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.85);
}
.ui-note{
  position:absolute;left:50%;bottom:5.5vh;transform:translateX(-50%);z-index:3;
  width:305px;background:rgba(15,16,19,.92);backdrop-filter:blur(10px);
  border:1px solid var(--hair2);border-radius:14px;padding:13px 15px 12px;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.ui-note .nh{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;}
.ui-note .nh b{font-family:'Mono';font-weight:500;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mut);}
.ui-note .nh time{font-family:'Mono';font-size:10.5px;color:var(--dim);}
.ui-note p{font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.92);}
.ui-note .nm{position:absolute;right:11px;bottom:9px;width:22px;height:22px;border-radius:50%;
  background:#1B1D22;display:flex;align-items:center;justify-content:center;}
.ui-note .nm img{width:11px;height:auto;opacity:.9;}

/* ---------- word-reveal statements ---------- */
.reveal-sec{position:relative;z-index:1;}
.reveal-pin{position:sticky;top:0;min-height:100vh;min-height:100svh;
  display:flex;align-items:center;justify-content:center;}
.reveal-txt{margin:0 var(--m);max-width:900px;text-align:center;
  font-size:clamp(28px,4.1vw,54px);line-height:1.18;letter-spacing:-.012em;}
.reveal-txt.small{font-size:clamp(22px,2.9vw,38px);max-width:980px;text-align:center;line-height:1.3;}
.reveal-txt .w{color:rgba(255,255,255,.13);transition:none;}

/* ---------- sticky card scenes ---------- */
.scene{position:relative;z-index:1;}
.scene-pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;
  justify-content:center;overflow:hidden;}
.scene-h{margin:0 var(--m);max-width:820px;text-align:center;
  font-size:clamp(28px,3.8vw,48px);line-height:1.16;letter-spacing:-.012em;}
.scene-h .w{color:rgba(255,255,255,.13);}
.fcard{
  position:absolute;width:288px;background:#101116;border:1px solid var(--hair2);
  border-radius:14px;padding:13px 15px;box-shadow:0 30px 70px rgba(0,0,0,.55);
  opacity:0;
}
.fcard .fh{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.fcard .fh .dot{width:20px;height:20px;border-radius:50%;background:#1B1D22;
  display:flex;align-items:center;justify-content:center;}
.fcard .fh .dot img{width:10px;}
.fcard .fh b{font-family:'Mono';font-weight:500;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mut);}
.fcard p{font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.9);}
.fpill{
  position:absolute;background:#232830;border-radius:99px;padding:8px 16px;
  font-size:12.5px;color:#fff;box-shadow:0 16px 40px rgba(0,0,0,.5);opacity:0;
}
.frow{display:flex;justify-content:space-between;align-items:baseline;
  padding:9px 0;border-bottom:1px solid var(--hair2);}
.frow:last-child{border-bottom:0;}
.frow .t{font-size:12.5px;color:rgba(255,255,255,.9);}
.frow .s{font-family:'Mono';font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);}
.frow .s.ok{color:var(--acc2);}
.fbig{font-size:30px;letter-spacing:-.02em;margin:2px 0 8px;}
.fbars{display:flex;align-items:flex-end;gap:5px;height:44px;margin-top:10px;}
.fbars i{flex:1;background:linear-gradient(180deg,var(--acc2),var(--acc));border-radius:2px 2px 0 0;opacity:.85;}

/* ---------- process / approach ---------- */
#approach{position:relative;z-index:2;background:var(--bg);}
.proc-head{margin:0 var(--m);padding:14vh 0 8vh;}
.proc-head h2{font-size:clamp(34px,4.4vw,56px);letter-spacing:-.015em;max-width:700px;line-height:1.1;}
.proc-lede{margin-top:3vh;max-width:640px;font-size:16px;line-height:1.65;color:var(--mut);}
.proc-cap{position:absolute;left:clamp(20px,3vw,44px);bottom:clamp(20px,3.6vh,36px);z-index:6;pointer-events:none;}
.proc-cap span{position:absolute;left:0;bottom:0;white-space:nowrap;font-size:12.5px;letter-spacing:.02em;color:rgba(255,255,255,.72);
  opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s ease;}
.proc-cap span.on{opacity:1;transform:none;transition-delay:.25s;}
.pstep .out{margin-top:20px;max-width:430px;padding-top:14px;border-top:1px solid var(--hair2);font-size:13.5px;line-height:1.55;color:var(--mut);}
.pstep .out b{display:block;font-weight:500;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-bottom:5px;}
.proc-grid{position:relative;display:grid;grid-template-columns:46% 1fr 90px;}
.proc-media{position:sticky;top:0;height:100vh;overflow:hidden;}
.proc-media .pimg{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transition:opacity .7s ease;}
.proc-media .pimg.on{opacity:1;}
.proc-media::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(11,11,13,.18),transparent 30%,transparent 70%,rgba(11,11,13,.45));}
/* ---- process step vignettes (centred over the imagery) ---- */
.pv{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transform:scale(.96) translateY(14px);
  transition:opacity .5s ease,transform .5s ease,visibility 0s .5s;pointer-events:none;}
.pv.on{opacity:1;visibility:visible;transform:none;transition:opacity .55s ease .1s,transform .55s ease .1s;}
.pv-card-base{background:rgba(14,15,18,.92);backdrop-filter:blur(12px);
  border:1px solid var(--hair2);border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.55);}

/* 1 · booking chat */
.pv-chat{width:min(300px,74%);background:rgba(14,15,18,.92);backdrop-filter:blur(12px);
  border:1px solid var(--hair2);border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.55);
  padding:16px 16px 14px;display:flex;flex-direction:column;gap:9px;}
.pvc-head{font-family:'Mono';font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);margin-bottom:2px;}
.bub{max-width:86%;padding:9px 13px;border-radius:14px;font-size:12.5px;line-height:1.45;
  opacity:0;transform:translateY(12px);}
.bub.me{align-self:flex-end;background:var(--acc);color:#fff;border-bottom-right-radius:4px;}
.bub.them{align-self:flex-start;background:#1E2026;color:rgba(255,255,255,.92);border-bottom-left-radius:4px;}
.pvc-cal{margin-top:4px;border:1px solid rgba(127,160,188,.35);background:rgba(90,124,152,.10);
  border-radius:10px;padding:8px 12px;font-size:11.5px;color:rgba(255,255,255,.9);
  display:flex;justify-content:space-between;gap:10px;opacity:0;transform:translateY(12px);}
.pvc-cal b{color:var(--acc2);font-weight:500;}
.pv.on .bub,.pv.on .pvc-cal{animation:pvIn .5s ease forwards;}
.pv.on .bub:nth-child(2){animation-delay:.25s;}
.pv.on .bub:nth-child(3){animation-delay:.85s;}
.pv.on .bub:nth-child(4){animation-delay:1.45s;}
.pv.on .pvc-cal{animation-delay:2.0s;}
@keyframes pvIn{to{opacity:1;transform:none;}}

/* 2 · providers with jumping tick */
.pv-provs{position:relative;width:min(280px,72%);background:rgba(14,15,18,.92);
  backdrop-filter:blur(12px);border:1px solid var(--hair2);border-radius:16px;
  box-shadow:0 30px 80px rgba(0,0,0,.55);padding:14px 18px;display:flex;flex-direction:column;}
.pvp-row{height:46px;display:flex;align-items:center;border-bottom:1px solid var(--hair2);}
.pvp-row:last-of-type{border-bottom:0;}
.pvp-row img{height:16px;width:auto;opacity:.75;filter:grayscale(1) brightness(2.2);}
.pvp-row:nth-child(1) img,.pvp-row:nth-child(3) img{height:20px;}
.pvp-row img.wide{height:10px;}
.pvp-tick{position:absolute;right:16px;top:20px;width:24px;height:24px;border-radius:50%;
  background:var(--acc);color:#fff;font-size:13px;display:flex;align-items:center;
  justify-content:center;box-shadow:0 6px 18px rgba(90,124,152,.5);}
.pv.on .pvp-tick{animation:tickJump 5.5s ease-in-out infinite;}
@keyframes tickJump{
  0%,20%{transform:translateY(0);}
  25%,45%{transform:translateY(46px);}
  50%,70%{transform:translateY(92px);}
  75%,95%{transform:translateY(138px);}
  100%{transform:translateY(0);}
}

/* 3 · plan cover twisting on scroll */
.pv-3{perspective:900px;}
.pv3-inner{width:min(230px,54%);border-radius:10px;overflow:hidden;
  box-shadow:0 40px 90px rgba(0,0,0,.6);will-change:transform;}
.pv3-inner img{width:100%;height:auto;display:block;}

/* 4 · page turned over, signature drawn */
.pv-4{perspective:900px;}
.pv4-page{position:relative;width:min(230px,54%);aspect-ratio:708/1000;border-radius:10px;
  background:linear-gradient(170deg,#FBFAF7,#EFEDE6);box-shadow:0 40px 90px rgba(0,0,0,.6);
  display:flex;align-items:center;justify-content:center;
  transform:rotateY(-88deg);transition:transform .8s cubic-bezier(.2,.7,.3,1);}
.pv.on .pv4-page{transform:rotateY(0deg);}
.pv4-lines{position:absolute;top:14%;left:14%;right:14%;display:flex;flex-direction:column;gap:12px;}
.pv4-lines i{height:4px;border-radius:2px;background:rgba(20,28,43,.10);}
.pv4-lines i:nth-child(2){width:78%;}
.pv4-lines i:nth-child(3){width:58%;}
.sig{width:74%;margin-top:18%;}
.sig path{stroke-dasharray:760;stroke-dashoffset:760;}
.pv.on .sig path{transition:stroke-dashoffset 1.6s ease .85s;stroke-dashoffset:0;}
.pv4-tick{position:absolute;right:12%;bottom:9%;width:30px;height:30px;border-radius:50%;
  background:var(--acc);color:#fff;font-size:15px;display:flex;align-items:center;
  justify-content:center;opacity:0;transform:scale(.4);}
.pv.on .pv4-tick{animation:tickPop .45s ease 2.45s forwards;}
@keyframes tickPop{to{opacity:1;transform:scale(1);}}

/* 5 · missed call + voicemail */
.pv-phone{width:min(290px,72%);background:rgba(14,15,18,.92);backdrop-filter:blur(12px);
  border:1px solid var(--hair2);border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.55);
  padding:16px;display:flex;flex-direction:column;gap:12px;}
.pvf-row{display:flex;align-items:center;gap:9px;font-size:12.5px;color:rgba(255,255,255,.9);
  opacity:0;transform:translateY(12px);}
.pvf-row .dot{width:8px;height:8px;border-radius:50%;background:var(--acc2);flex:none;}
.pvf-vm{background:#15171C;border:1px solid var(--hair2);border-radius:12px;padding:12px 14px;
  opacity:0;transform:translateY(12px);}
.pvf-vmh{display:flex;justify-content:space-between;font-family:'Mono';font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:9px;}
.pvf-wave{display:flex;align-items:center;gap:3px;height:20px;margin-bottom:10px;}
.pvf-wave i{flex:1;background:var(--acc2);border-radius:2px;opacity:.8;height:30%;}
.pvf-wave i:nth-child(2n){height:70%;}
.pvf-wave i:nth-child(3n){height:48%;}
.pvf-wave i:nth-child(5n){height:92%;}
.pv.on .pvf-wave i{animation:wavePulse 1.2s ease-in-out infinite alternate;}
.pv.on .pvf-wave i:nth-child(2n){animation-delay:.15s;}
.pv.on .pvf-wave i:nth-child(3n){animation-delay:.3s;}
@keyframes wavePulse{from{transform:scaleY(.7);}to{transform:scaleY(1.25);}}
.pvf-vm p{font-size:12px;line-height:1.5;color:rgba(255,255,255,.85);}
.pv.on .pvf-row{animation:pvIn .5s ease .15s forwards;}
.pv.on .pvf-vm{animation:pvIn .55s ease .6s forwards;}
.proc-steps{padding:0 0 0 clamp(28px,4vw,72px);}
.pstep{min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  padding:12vh clamp(16px,2vw,40px) 12vh 0;}
.pstep .chip{margin-bottom:26px;align-self:flex-start;}
.pstep h3{font-size:clamp(38px,4.8vw,68px);line-height:1.02;letter-spacing:-.018em;max-width:480px;}
.pstep p{margin-top:26px;max-width:430px;font-size:14.5px;line-height:1.65;color:var(--mut);}
.proc-rail{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;
  justify-content:space-evenly;align-items:flex-end;padding-right:6px;}
.proc-rail span{font-family:'Mono';font-size:11px;letter-spacing:.12em;color:var(--dim);
  display:flex;align-items:center;gap:8px;transition:color .3s;}
.proc-rail span::after{content:'';width:5px;height:5px;border-radius:50%;
  background:var(--dim);transition:background .3s;}
.proc-rail span.on{color:var(--ink);}
.proc-rail span.on::after{background:var(--acc2);}

/* ---------- difference / product switcher ---------- */
#difference{position:relative;z-index:2;background:var(--bg);padding:15vh 0 12vh;}
#difference .wrap>h2{font-size:clamp(34px,4.4vw,56px);letter-spacing:-.015em;margin-bottom:9vh;}
.diff-grid{display:grid;grid-template-columns:24% 1fr 22.5%;gap:0 clamp(18px,2.4vw,44px);align-items:start;}
.diff-rail h3{font-size:clamp(22px,2vw,28px);margin-bottom:26px;}
.d-radio{display:flex;align-items:center;gap:12px;padding:19px 0;
  border-bottom:1px solid var(--hair2);cursor:pointer;user-select:none;}
.d-radio .rc{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--dim);
  flex:none;position:relative;transition:border-color .3s;}
.d-radio .rc::after{content:'';position:absolute;inset:3.5px;border-radius:50%;
  background:var(--ink);transform:scale(0);transition:transform .3s;}
.d-radio.on .rc{border-color:var(--ink);}
.d-radio.on .rc::after{transform:scale(1);}
.d-radio .rl{font-size:15.5px;color:var(--mut);transition:color .3s;}
.d-radio.on .rl{color:var(--ink);}
.d-note{margin-top:22px;font-family:'Mono';font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);}
.diff-mid{position:relative;display:grid;grid-template-columns:1fr 240px;gap:0 clamp(16px,2vw,36px);}
.diff-rows{padding-top:64px;}
.drow{height:92px;display:flex;flex-direction:column;justify-content:center;
  border-top:1px solid var(--hair2);}
.drow .t{font-size:16.5px;color:var(--ink);}
.drow .s{font-size:12.5px;color:var(--dim);margin-top:4px;}
.oct-col{
  position:relative;margin-top:-26px;border-radius:18px;
  background:linear-gradient(180deg,#16181E 0%,#101116 100%);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 40px 90px rgba(0,0,0,.55),0 0 60px rgba(90,124,152,.12);
  padding:0 18px;z-index:2;
}
.oct-head{height:90px;padding-top:24px;text-align:center;}
.oct-head h4{font-size:24px;letter-spacing:-.01em;color:var(--acc2);}
.oct-head .chip{margin-top:8px;font-size:9.5px;padding:4px 8px 3px;color:var(--acc2);
  border-color:rgba(127,160,188,.35);background:rgba(90,124,152,.08);}
.ocell{height:92px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:7px;border-top:1px solid var(--hair2);text-align:center;}
.ocell .tick{width:22px;height:22px;flex:none;}
.ocell .v{font-size:12.5px;color:rgba(255,255,255,.85);line-height:1.35;max-width:200px;}
.ocell .zero{font-size:30px;letter-spacing:-.02em;color:var(--ink);}
.dir-col{padding-top:0;}
.dir-head{height:64px;display:flex;align-items:center;justify-content:center;
  font-size:15.5px;color:var(--mut);}
.dcell{height:92px;display:flex;align-items:center;justify-content:center;text-align:center;
  border-top:1px solid var(--hair2);font-size:13px;color:var(--dim);padding:0 8px;line-height:1.4;}
.dir-col .dcell:first-of-type{border-top:1px solid var(--hair2);}
.providers-strip{margin-top:12vh;border-top:1px solid var(--hair2);padding-top:5vh;}
.providers-strip .cap{font-family:'Mono';font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);text-align:center;margin-bottom:4.5vh;}
.prov-logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:5.5vh clamp(28px,4.4vw,64px);}
.prov-logos img{height:20px;width:auto;opacity:.5;filter:grayscale(1) brightness(2.2);
  transition:opacity .3s;}
.prov-logos img.tall{height:30px;}
.prov-logos img.wide{height:11px;}   /* Chubb wordmark is very wide; sized to match visual weight */
.prov-logos img:hover{opacity:.9;}

/* ---------- CTA ---------- */
#cta{position:relative;z-index:2;min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;overflow:hidden;padding:14vh 0;}
#cta .cta-bg{position:absolute;inset:0;background:
  radial-gradient(52% 44% at 50% 44%,rgba(85,117,143,.16) 0%,rgba(85,117,143,.05) 45%,rgba(11,11,13,0) 72%),var(--bg);}
#cta .reveal-txt{position:relative;z-index:2;}
.mcard{
  position:relative;z-index:2;width:min(340px,66vw);aspect-ratio:708/1000;
  margin:7vh auto 5.5vh;border-radius:8px;overflow:hidden;
  box-shadow:0 60px 120px rgba(0,0,0,.55),0 18px 44px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(255,255,255,.06);
  transform:rotate(-5deg) skewY(1deg);
}
.mcard .doc-page{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.mcard::after{content:'';position:absolute;inset:0;border-radius:8px;pointer-events:none;
  background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.09) 46%,transparent 60%);}
#cta .btn{position:relative;z-index:2;}
.nl-row{position:relative;z-index:2;margin-top:5vh;display:flex;width:min(430px,84vw);}
.nl-row input{
  flex:1;background:rgba(11,11,13,.55);border:1px solid var(--hair);border-right:0;
  border-radius:8px 0 0 8px;padding:12px 16px;font-family:'Grot';font-size:14px;color:var(--ink);
  outline:none;
}
.nl-row input::placeholder{color:var(--dim);}
.nl-row button{
  background:var(--acc);border:0;border-radius:0 8px 8px 0;padding:12px 18px;
  font-family:'Grot';font-size:13.5px;color:#fff;cursor:pointer;white-space:nowrap;
}
.nl-row button:hover{background:var(--acc2);}

/* ---------- footer ---------- */
.footer{position:relative;z-index:2;background:var(--bg);border-top:1px solid var(--hair2);}
.footer .f-top{margin:0 var(--m);display:grid;grid-template-columns:1fr 1fr;
  padding:9vh 0 7vh;gap:40px;}
.footer .f-brand img.fmk{width:76px;opacity:.92;}
.footer .f-brand .tag{margin-top:26px;font-size:clamp(22px,2.5vw,32px);letter-spacing:-.01em;
  color:var(--ink);max-width:320px;line-height:1.2;}
.footer .f-links a{display:flex;justify-content:space-between;align-items:center;
  padding:15px 2px;border-bottom:1px solid var(--hair2);font-size:15.5px;color:var(--ink);
  transition:padding .25s;}
.footer .f-links a:hover{padding-left:10px;color:var(--acc2);}
.footer .f-links a span{font-family:'Mono';font-size:10.5px;color:var(--dim);}
.footer .f-bot{margin:0 var(--m);display:flex;flex-wrap:wrap;gap:14px 30px;
  justify-content:space-between;align-items:center;padding:26px 0;
  border-top:1px solid var(--hair2);font-size:13px;color:var(--dim);}
.footer .f-bot .fl{display:flex;gap:22px;flex-wrap:wrap;}
.footer .f-bot a{color:var(--mut);}
.footer .f-bot a:hover{color:var(--ink);}
.footer .f-reg{margin:0 var(--m);padding:0 0 30px;font-size:11.5px;line-height:1.6;
  color:var(--dim);max-width:760px;}
.ph-mark{background:rgba(90,124,152,.16);border-radius:3px;padding:1px 6px;color:var(--acc2);
  font-family:'Mono';font-size:10.5px;}

/* ---------- subpage shell ---------- */
.page-hero{position:relative;z-index:1;padding:calc(var(--nav-h) + 11vh) 0 7vh;}
.page-hero .kick{font-family:'Mono';font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--acc2);margin-bottom:3.2vh;display:block;}
.page-hero h1{font-size:clamp(44px,7.2vw,104px);line-height:1;letter-spacing:-.018em;max-width:1000px;}
.page-hero .lede{margin-top:4vh;max-width:560px;font-size:16.5px;line-height:1.65;color:var(--mut);}
.sec{position:relative;z-index:1;padding:9vh 0;}
.sec-h{font-size:clamp(28px,3.4vw,44px);letter-spacing:-.014em;max-width:700px;margin-bottom:6vh;line-height:1.12;}
.rowlist{border-top:1px solid var(--hair2);}
.rowitem{display:grid;grid-template-columns:56px 1fr 1.2fr;gap:24px;align-items:baseline;
  padding:30px 0;border-bottom:1px solid var(--hair2);}
.rowitem .no{font-family:'Mono';font-size:11px;color:var(--dim);}
.rowitem h3{font-size:clamp(20px,2.2vw,28px);letter-spacing:-.01em;}
.rowitem p{font-size:14.5px;line-height:1.6;color:var(--mut);}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:start;}
.contact-split{grid-template-columns:1fr 1.4fr;}
.pcard{background:var(--card);border:1px solid var(--hair2);border-radius:18px;padding:30px;}
.pcard h3{font-size:22px;margin-bottom:10px;}
.pcard p{font-size:14px;line-height:1.6;color:var(--mut);}
.pcard .chip{margin-bottom:18px;}
.photo-panel{border-radius:18px;overflow:hidden;position:relative;}
.photo-panel img{width:100%;height:100%;object-fit:cover;}
.fadephoto{width:100%;height:auto;display:block;}
/* framed editorial portrait (About) */
.portrait{margin:0;position:relative;border-radius:16px;overflow:hidden;background:#0F1013;
  border:1px solid var(--hair);box-shadow:0 40px 90px rgba(0,0,0,.55);}
.portrait img{display:block;width:100%;height:auto;}
.portrait::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:16px;
  background:linear-gradient(180deg,rgba(11,11,13,.10) 0%,rgba(11,11,13,0) 32%,rgba(11,11,13,.28) 100%);}
.about-split{align-items:center;}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,32px);}
.pillar{border-top:1px solid var(--hair);padding-top:22px;}
.pillar .no{font-family:'Mono';font-size:11px;color:var(--dim);display:block;margin-bottom:14px;}
.pillar h3{font-size:clamp(20px,2vw,26px);margin-bottom:12px;}
.pillar p{font-size:14px;line-height:1.6;color:var(--mut);}

/* FAQ accordion */
.faq{border-top:1px solid var(--hair2);}
.faq-item{border-bottom:1px solid var(--hair2);}
.faq-q{display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:24px 2px;cursor:pointer;user-select:none;}
.faq-q h3{font-size:clamp(17px,1.8vw,22px);font-weight:400;}
.faq-q .pl{position:relative;width:14px;height:14px;flex:none;}
.faq-q .pl::before,.faq-q .pl::after{content:'';position:absolute;background:var(--mut);
  transition:transform .35s;}
.faq-q .pl::before{left:6px;top:0;width:2px;height:14px;}
.faq-q .pl::after{left:0;top:6px;width:14px;height:2px;}
.faq-item.open .faq-q .pl::before{transform:rotate(90deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .45s ease;}
.faq-a p{padding:0 40px 24px 2px;font-size:14.5px;line-height:1.7;color:var(--mut);max-width:720px;}
.faq-a a{color:var(--acc2);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
.faq-a a:hover{color:var(--ink);}

/* forms */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px 30px;}
.ffield{display:flex;flex-direction:column;gap:9px;}
.ffield.full{grid-column:1/-1;}
.ffield label{font-family:'Mono';font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mut);}
.ffield input,.ffield select,.ffield textarea{
  background:transparent;border:0;border-bottom:1px solid var(--hair);
  padding:10px 2px 12px;font-family:'Grot';font-size:16px;color:var(--ink);outline:none;
  border-radius:0;transition:border-color .3s;-webkit-appearance:none;appearance:none;
}
.ffield select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%2395A3AD' fill='none' stroke-width='1.5'/></svg>");
  background-repeat:no-repeat;background-position:right 4px center;}
.ffield select option{background:var(--card);color:var(--ink);}
.ffield input:focus,.ffield select:focus,.ffield textarea:focus{border-color:var(--acc2);}
.ffield textarea{min-height:110px;resize:vertical;}
.checkrow{display:flex;flex-wrap:wrap;gap:10px;}
.checkrow label{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--hair);
  border-radius:99px;padding:9px 16px;font-size:13.5px;color:var(--mut);cursor:pointer;
  transition:all .25s;}
.checkrow input{display:none;}
.checkrow label:has(input:checked){border-color:var(--acc2);color:var(--ink);
  background:rgba(90,124,152,.12);}

/* line breaking: headings balance their lines, body copy avoids stranded last words */
h1,h2,h3,h4,.lede,.proc-lede,.k .ln>span,.copy .ln>span,.faq-q h3,.pstep h3,.prose h2,.prose h3,.sec-h,.reveal-txt,.f-tag,.pillar h3,.oct-head h4{text-wrap:balance;}
p,li,.out,.dcell,.ocell .v,figcaption,blockquote{text-wrap:pretty;}

/* prose/legal pages */
.prose{max-width:720px;}
.prose h2{font-size:clamp(22px,2.4vw,30px);letter-spacing:-.01em;margin:5.5vh 0 2vh;}
.prose h3{font-size:clamp(16.5px,1.5vw,19px);letter-spacing:-.005em;font-weight:500;color:var(--ink);margin:3.6vh 0 1.4vh;}
.prose p,.prose li{font-size:14.5px;line-height:1.75;color:var(--mut);}
.prose p+p{margin-top:14px;}
.prose ul{margin:14px 0 14px 20px;}
.prose strong{color:var(--ink);font-weight:500;}
.prose a{color:var(--acc2);}

/* reveal-on-scroll util */
.rv{opacity:0;transform:translateY(28px);}
.rv.in{opacity:1;transform:none;transition:opacity .9s ease,transform .9s ease;}

/* ---------- mobile ---------- */
@media (max-width:1023px){
  :root{--m:6vw;}
  .glines i:nth-child(2),.glines i:nth-child(3){display:none;}
  .glines i:nth-child(4){left:94vw;}
  .nav-center{display:none;}
  .hero-sub{margin-left:34%;max-width:290px;}
  /* keep the desktop split on mobile: sticky imagery left, steps right */
  .proc-grid{grid-template-columns:45% 1fr;}
  .proc-media{position:sticky;top:0;height:100vh;height:100svh;}
  .proc-rail{display:none;}
  .proc-steps{padding:0 5vw;}
  .pstep{min-height:100vh;min-height:100svh;padding:10vh 0;}
  .proc-head{margin:0 var(--m);}
  .diff-grid{grid-template-columns:1fr;gap:40px;}
  .diff-mid{grid-template-columns:1fr minmax(140px,155px);gap:0 10px;}
  .dir-col{display:none;}
  .d-radio{display:inline-flex;border-bottom:0;padding:10px 18px;border:1px solid var(--hair);
    border-radius:99px;margin:0 8px 10px 0;}
  .diff-rail h3{margin-bottom:16px;}
  .drow{height:104px;}
  .ocell{height:104px;padding:0 6px;}
  .oct-col{margin-top:0;padding:0 8px;}
  .oct-head{height:76px;padding-top:15px;}
  .oct-head h4{font-size:20px;}
  .oct-head .chip{font-size:8.5px;letter-spacing:.08em;padding:3px 6px 2px;white-space:nowrap;}
  .diff-rows{padding-top:76px;}
  .split,.contact-split{grid-template-columns:1fr;}
  .pillars{grid-template-columns:1fr;gap:34px;}
  .form-grid{grid-template-columns:1fr;}
  .rowitem{grid-template-columns:40px 1fr;}
  .rowitem p{grid-column:2;}
  .footer .f-top{grid-template-columns:1fr;gap:50px;}
}
@media (max-width:640px){
  .hero-h1{font-size:clamp(38px,10.8vw,52px);white-space:normal;line-height:1.06;}
  .hero-sub{margin-left:0;margin-top:4vh;max-width:min(340px,86vw);}
  .hero-inner{padding-bottom:170px;}
  .ui-note{width:min(305px,88vw);bottom:4.5vh;}
  .reveal-txt{font-size:clamp(23px,6.2vw,32px);max-width:88vw;}
  .reveal-txt.small{font-size:clamp(18px,5vw,24px);max-width:88vw;}
  .scene{height:250vh !important;}
  .reveal-sec{height:190vh !important;}
  .scene-h{font-size:clamp(22px,5.8vw,30px);max-width:86vw;}
  .fcard{padding:11px 13px;}
  .fcard p{font-size:11.5px;}
  /* clear the statement: pin cards to the top and bottom bands of the scene */
  .scene .fcard{width:min(260px,76vw) !important;}
  .scene .fcard:first-of-type{left:6% !important;right:auto !important;top:8% !important;bottom:auto !important;}
  .scene .fpill{right:6% !important;left:auto !important;top:23% !important;bottom:auto !important;}
  .scene .fcard:last-of-type{right:6% !important;left:auto !important;top:auto !important;bottom:8% !important;}
  .fbig{font-size:26px;}
  .proc-head{padding:11vh 0 6vh;}
  .pstep h3{font-size:clamp(32px,9vw,44px);}
  .pstep p{font-size:14px;}
  #difference{padding:11vh 0 10vh;}
  #difference .wrap>h2{margin-bottom:6vh;}
  .d-note{margin-top:6px;margin-bottom:4px;}
  .drow{height:112px;}
  .ocell{height:112px;}
  .drow .t{font-size:14.5px;line-height:1.3;}
  .drow .s{font-size:11.5px;line-height:1.4;}
  .ocell .v{font-size:11px;}
  .ocell .zero{font-size:24px;}
  .ocell .tick{width:19px;height:19px;}
  .providers-strip{margin-top:9vh;}
  .prov-logos{gap:4vh clamp(22px,7vw,40px);}
  .prov-logos img{height:16px;}
  .prov-logos img.wide{height:9px;}
  .prov-logos img.tall{height:24px;}
  #cta{padding:11vh 0;min-height:0 !important;}
  .mcard{margin:6vh auto 4.5vh;width:min(280px,70vw);}
  .nl-row{margin-top:4vh;width:min(340px,88vw);}
  .nl-row input{min-width:0;padding:12px 12px;font-size:16px;}
  .nl-row button{padding:12px 12px;font-size:12.5px;flex:none;}
  .page-hero{padding:calc(var(--nav-h) + 8vh) 0 5vh;}
  .page-hero h1{font-size:clamp(38px,10.4vw,52px);}
  .page-hero .lede{font-size:15px;}
  .sec{padding:7vh 0;}
  .rowitem{padding:24px 0;gap:8px 16px;}
  .faq-a p{padding-right:8px;}
  .footer .f-brand .tag{font-size:22px;}
  .footer .f-bot{padding:22px 0;gap:10px 18px;}
  .btn{padding:11px 19px;font-size:14.5px;}
}
@media (max-width:420px){
  .nav-brand .wd{display:none;}
  .nav-right{gap:12px;}
}

/* condensed process vignettes on small screens */
@media (max-width:768px){
  .pv-chat,.pv-provs,.pv-phone{width:92%;padding:10px 10px 9px;border-radius:12px;}
  .pvc-head,.pvf-vmh{font-size:8px;letter-spacing:.1em;}
  .bub{font-size:9.5px;padding:6px 9px;border-radius:10px;max-width:92%;}
  .pvc-cal{font-size:8.5px;padding:6px 8px;border-radius:8px;flex-wrap:wrap;}
  .pvp-row{height:34px;}
  .pvp-row img{height:11px;}
  .pvp-row:nth-child(1) img,.pvp-row:nth-child(3) img{height:14px;}
  .pvp-row img.wide{height:7px;}
  .pvp-tick{width:18px;height:18px;font-size:10px;right:10px;top:16px;}
  @keyframes tickJump{
    0%,20%{transform:translateY(0);}
    25%,45%{transform:translateY(34px);}
    50%,70%{transform:translateY(68px);}
    75%,95%{transform:translateY(102px);}
    100%{transform:translateY(0);}
  }
  .pv3-inner{width:80%;}
  .pv4-page{width:80%;}
  .pv4-tick{width:20px;height:20px;font-size:11px;}
  .pvf-row{font-size:10px;gap:6px;}
  .pvf-vm{padding:8px 9px;border-radius:9px;}
  .pvf-vm p{font-size:9px;line-height:1.45;}
  .pvf-wave{height:14px;margin-bottom:7px;}
  .pstep .chip{margin-bottom:14px;font-size:9.5px;padding:4px 7px 3px;}
  .pstep h3{font-size:clamp(17px,4.9vw,24px);line-height:1.12;}
  .pstep p{font-size:12px;line-height:1.55;margin-top:14px;}
  .pstep .out{font-size:11.5px;margin-top:12px;padding-top:10px;}
  .pstep .out b{font-size:9.5px;}
  .proc-cap{left:12px;right:12px;bottom:12px;}
  .proc-cap span{position:absolute;left:0;right:0;bottom:0;max-width:none;white-space:normal;
    font-size:10.5px;line-height:1.35;letter-spacing:.01em;text-wrap:balance;}
  .proc-lede{font-size:14px;}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;}
  .rv{opacity:1;transform:none;}
  #gate{display:none;}
  .reveal-txt .w,.scene-h .w{color:var(--ink) !important;}
  .fcard,.fpill{opacity:1 !important;}
}

/* ============================================================
   CINEMATIC HERO · "Chalk Dust"
   Sticky stage behind, narrative beats in normal document flow on
   top (same architecture as the process section). Beats trigger
   eased scene changes; nothing is pinned or scrubbed.
   ============================================================ */
.glines{display:none;}

#film{position:relative;z-index:1;background:var(--bg);}
.cstage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--bg);}
.beats{position:relative;z-index:5;margin-top:-100vh;margin-top:-100svh;pointer-events:none;}
.beat{min-height:70vh;min-height:70svh;display:flex;align-items:center;}
.beat.b0{min-height:100vh;min-height:100svh;}
.beat.b5{min-height:92vh;min-height:92svh;}
.beat .wrap{width:100%;}
.beat .copy{pointer-events:auto;}
.beat.b5{align-items:flex-end;padding-bottom:11vh;}

/* stage layers */
.sc{position:absolute;inset:0;}
.sc.media{opacity:0;background-size:cover;background-position:center;will-change:transform,opacity;}
.sc.media video,.sc.media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
/* clips squarer than the viewport (e.g. 1:1 footage on a widescreen) show their
   full frame: fitted to height, centred, edges feathered into the black */
.sc.media.fit-h video{width:auto;height:100%;left:50%;right:auto;transform:translateX(-50%);max-width:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%);}
.sc.media .grade{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(11,11,13,.86) 0%,rgba(11,11,13,.30) 28%,rgba(11,11,13,.30) 66%,rgba(11,11,13,.92) 100%);}

/* fitted clips sit opposite their copy: left-copy scenes push footage right and vice versa */
.sc.media.fit-h.side-r video{left:66%;}
.sc.media.fit-h.side-l video{left:34%;}
/* on portrait-ish screens the strip is most of the width, so keep it centred */
@media (max-aspect-ratio:1/1){.sc.media.fit-h.side-r video,.sc.media.fit-h.side-l video{left:50%;}}
.sc.portrait{background:#000;}
.sc.portrait img{object-position:50% 18%;opacity:.9;}
.sc.portrait .grade{background:
  radial-gradient(60% 55% at 50% 40%,rgba(11,11,13,0) 30%,rgba(11,11,13,.55) 70%,rgba(11,11,13,1) 100%),
  linear-gradient(180deg,rgba(11,11,13,.55) 0%,rgba(11,11,13,0) 25%,rgba(11,11,13,0) 55%,rgba(11,11,13,.95) 100%);}
.veil{position:absolute;inset:0;pointer-events:none;z-index:6;
  background:radial-gradient(120% 90% at 50% 50%,rgba(11,11,13,0) 55%,rgba(11,11,13,.55) 100%);}
canvas.dust{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;}

/* logo block (beat 0 lives on the stage so the email row stays interactive) */
.f-logo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;z-index:4;pointer-events:none;}
.f-logo .mark-slot{width:min(210px,40vw);aspect-ratio:997/1150;position:relative;}
.f-logo .mark-slot img{width:100%;height:100%;object-fit:contain;display:block;}
.f-logo .wd{width:min(330px,64vw);}
.f-tag{font-size:15px;line-height:1.5;color:var(--mut);text-align:center;
  max-width:min(460px,86vw);margin-top:-2px;}
.f-start{display:flex;width:min(420px,84vw);margin-top:6px;pointer-events:auto;}
.f-start input{flex:1;min-width:0;background:rgba(15,16,19,.8);border:1px solid var(--hair);
  border-right:0;border-radius:32px 0 0 32px;padding:12px 20px;font-family:'Grot';
  font-size:14.5px;color:var(--ink);outline:none;}
.f-start input::placeholder{color:var(--dim);}
.f-start input:focus{border-color:var(--acc2);}
.f-start .btn{border-radius:0 32px 32px 0;flex:none;}
.f-scroll-hint{position:absolute;bottom:5vh;left:50%;font-family:'Mono';font-size:10.5px;
  letter-spacing:.3em;text-transform:uppercase;color:var(--dim);animation:hintPulse 2.4s infinite;}
@keyframes hintPulse{0%,100%{opacity:.35;transform:translate(-50%,0)}50%{opacity:.9;transform:translate(-50%,5px)}}

/* kinetic headline */
.k{font-weight:400;text-align:center;font-size:clamp(38px,5.9vw,88px);line-height:1.02;letter-spacing:-.018em;
  display:flex;flex-direction:column;gap:.06em;align-items:center;}
.k .ln{display:block;overflow:hidden;padding:.06em .1em;margin:-.06em -.1em;}
.k .ln>span{display:block;transform:translateY(112%);will-change:transform;}

/* scene copy */
.copy{max-width:640px;}
.copy h2{font-size:clamp(28px,3.9vw,56px);line-height:1.04;letter-spacing:-.018em;font-weight:400;}
.copy p{margin-top:22px;font-size:clamp(14.5px,1.15vw,17px);line-height:1.6;color:var(--mut);max-width:460px;}
.copy .btn{margin-top:32px;pointer-events:auto;}
.copy.right{margin-left:auto;text-align:left;}
.copy.center{margin:0 auto;text-align:center;max-width:840px;}
.copy.center p{margin-left:auto;margin-right:auto;}
.copy .ln{display:block;overflow:hidden;padding:.05em 0;margin:-.05em 0;}
.copy .ln>span{display:block;transform:translateY(112%);will-change:transform;}
.copy p,.copy .btn{opacity:0;transform:translateY(22px);will-change:transform,opacity;}
.copy.final h2{font-size:clamp(32px,4.8vw,68px);}

/* ---------- get-started modal ---------- */
#start-modal{position:fixed;inset:0;z-index:180;display:flex;align-items:center;
  justify-content:center;padding:20px;background:rgba(5,6,8,.72);
  backdrop-filter:blur(10px);visibility:hidden;opacity:0;
  transition:opacity .35s ease,visibility 0s .35s;}
#start-modal.open{visibility:visible;opacity:1;transition:opacity .35s ease;}
.sm-card{position:relative;width:min(440px,94vw);background:#121318;
  border:1px solid var(--hair);border-radius:18px;padding:34px 32px 28px;
  box-shadow:0 60px 140px rgba(0,0,0,.7);transform:translateY(22px) scale(.97);
  transition:transform .4s cubic-bezier(.2,.7,.3,1);
  max-height:calc(var(--vvh,100vh) - 40px);overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;}
.sm-card::-webkit-scrollbar{display:none;}
#start-modal.open .sm-card{transform:none;}
.sm-grip{display:none;}
/* phones: a bottom sheet that slides up, scrolls inside itself, respects the keyboard, and can be dragged down to dismiss */
@media (max-width:768px){
  #start-modal{align-items:flex-end;justify-content:stretch;padding:0 !important;transition:opacity .35s ease,visibility 0s .35s,top 0s,height 0s;}
  .sm-card{width:100%;max-width:none;border-radius:22px 22px 0 0;border-width:1px 0 0 0;
    padding:14px 20px calc(22px + env(safe-area-inset-bottom,0px));
    max-height:calc(var(--vvh,100vh) - max(28px,env(safe-area-inset-top,0px)));min-height:0;
    transform:translateY(100%);transition:transform .48s cubic-bezier(.22,.8,.2,1);
    box-shadow:0 -30px 80px rgba(0,0,0,.6);}
  #start-modal.open .sm-card{transform:none;}
  .sm-card.dragging{transition:none;}
  .sm-grip{display:block;width:40px;height:4px;border-radius:99px;background:rgba(255,255,255,.22);
    margin:0 auto 16px;touch-action:none;}
  .sm-grip::before{content:'';position:absolute;left:0;right:0;top:0;height:44px;}
  .sm-close{top:2px;right:6px;}
  .sm-card h3{font-size:22px;padding-right:44px;}
  .sm-sub{margin-bottom:18px;}
  .sm-card .ffield{margin-bottom:14px;}
  .sm-card .ffield textarea{min-height:58px;}
}
.sm-close{position:absolute;top:6px;right:10px;background:none;border:0;color:var(--dim);
  font-size:26px;line-height:1;cursor:pointer;font-family:'Grot';
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;}
.sm-close:hover{color:var(--ink);}
.sm-card h3{font-size:24px;letter-spacing:-.012em;margin-bottom:10px;}
.sm-sub{font-size:13.5px;line-height:1.55;color:var(--mut);margin-bottom:24px;}
.sm-card .ffield{margin-bottom:18px;}
.sm-card .ffield textarea{min-height:66px;}
.sm-card .checkrow label{padding:8px 15px;font-size:13px;}
.sm-card .btn{width:100%;justify-content:center;margin-top:6px;}
.sm-note{display:block;text-align:center;margin-top:12px;font-size:11.5px;color:var(--dim);}

/* static fallback (reduced motion / no JS / no GSAP) */
.film-static .cstage{position:relative;height:100svh;}
.film-static .beats{margin-top:0;}
.film-static canvas.dust{display:none;}
.film-static .ln>span{transform:none;}
.film-static .copy p,.film-static .copy .btn{opacity:1;transform:none;}
.film-static .sc-1{opacity:1;}
.film-static .f-scroll-hint{display:none;}

@media (max-width:768px){
  .beat{min-height:74svh;}
  .beat.b0{min-height:100svh;}
  .beat.b5{min-height:92svh;}
  .k{font-size:clamp(34px,10.4vw,56px);}
  .copy h2{font-size:clamp(28px,7.6vw,40px);}
  .copy.final h2{font-size:clamp(30px,8.6vw,44px);}
  .copy p{font-size:14px;}
  .copy.right{margin-left:0;}
  .sc.portrait img{object-position:50% 18%;}
  .f-logo .mark-slot{width:min(170px,38vw);}
  .beat.b5{padding-bottom:9vh;}
}

/* ---------- reviews · horizontal scroll ---------- */
#reviews{position:relative;z-index:2;background:var(--bg);padding:13vh 0 10vh;overflow:hidden;}
.rev-head{display:flex;justify-content:space-between;align-items:baseline;gap:24px;
  flex-wrap:wrap;margin-bottom:6.5vh;}
.rev-head h2{font-size:clamp(30px,4vw,50px);letter-spacing:-.015em;}
.rev-meta{display:flex;align-items:center;gap:12px;font-size:13.5px;color:var(--mut);}
.stars{color:var(--acc2);letter-spacing:.18em;font-size:14px;}
.rev-side{display:flex;align-items:center;gap:22px;}
.rev-nav{display:flex;gap:8px;}
.rev-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--hair);background:rgba(255,255,255,.03);
  color:var(--mut);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  transition:color .25s,border-color .25s,background .25s;}
.rev-btn svg{width:16px;height:16px;}
.rev-btn:hover{color:var(--ink);border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.06);}
.rev-btn:focus-visible{outline:2px solid var(--acc2);outline-offset:2px;}
.rev-track{display:flex;gap:clamp(16px,1.8vw,28px);padding:0 var(--m);will-change:transform;}
.rev-track.grab{cursor:grab;user-select:none;-webkit-user-select:none;}
.rev-track.grab.dragging{cursor:grabbing;}
@media (min-width:1024px){.rev-track{padding-right:0;width:max-content;}
  #reviews::before,#reviews::after{content:'';position:absolute;top:0;bottom:0;width:clamp(60px,9vw,160px);z-index:2;pointer-events:none;}
  #reviews::before{left:0;background:linear-gradient(90deg,var(--bg),rgba(11,11,13,0));}
  #reviews::after{right:0;background:linear-gradient(270deg,var(--bg),rgba(11,11,13,0));}}
.rev-card{
  flex:0 0 min(420px,78vw);background:var(--card);border:1px solid var(--hair2);
  border-radius:16px;padding:30px 30px 26px;display:flex;flex-direction:column;gap:18px;
}
.rev-card .stars{font-size:13px;}
.rev-card blockquote{font-size:15.5px;line-height:1.65;color:rgba(255,255,255,.88);border:0;margin:0;}
.rev-card figcaption{margin-top:auto;display:flex;flex-direction:column;gap:4px;}
.rev-card figcaption b{font-weight:500;font-size:14.5px;}
.rev-card figcaption span{font-size:11.5px;color:var(--dim);}
.rev-foot{margin-top:6vh;}
.rev-foot a{font-size:13.5px;color:var(--mut);transition:color .25s;}
.rev-foot a:hover{color:var(--acc2);}
@media (max-width:1023px){
  .rev-side{gap:14px;}
  .rev-nav{display:none;}
  .rev-track{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;padding-bottom:6px;}
  .rev-track::-webkit-scrollbar{display:none;}
  .rev-card{scroll-snap-align:center;}
}



/* ============================================================
   KIWISAVER GUIDE (hidden pages)
   ============================================================ */
.pillars.two{grid-template-columns:repeat(2,1fr);}
.pillars.four{grid-template-columns:repeat(2,1fr);}
.ks-head{margin-bottom:5vh;}
.ks-head .sec-h{margin-bottom:0;}
.ks-head.center{text-align:center;}
.ks-lede{max-width:720px;margin-top:2.4vh;font-size:15px;line-height:1.7;color:var(--mut);}
.ks-head.center .ks-lede{margin-left:auto;margin-right:auto;}
.ks-alloc{margin-top:18px;}
.ks-alloc .bar{display:flex;height:6px;border-radius:3px;overflow:hidden;background:rgba(255,255,255,.06);}
.ks-alloc .g{background:var(--acc2);display:block;}
.ks-alloc .i{background:rgba(255,255,255,.22);display:block;}
.ks-alloc .lab{display:flex;justify-content:space-between;margin-top:8px;font-size:11.5px;color:var(--dim);}
.ks-quote{margin:8vh auto 0;max-width:880px;text-align:center;font-size:clamp(20px,2.4vw,30px);line-height:1.4;letter-spacing:-.01em;color:var(--ink);}
.ks-chartlink{background:none;border:0;padding:0;font:inherit;color:var(--acc2);cursor:pointer;
  border-bottom:1px solid rgba(127,160,188,.5);}
.ks-chartlink:hover{color:var(--ink);border-color:var(--ink);}
.ks-provs{display:grid;grid-template-columns:repeat(2,minmax(0,300px));gap:22px;justify-content:center;}
.ks-prov{display:flex;flex-direction:column;align-items:center;gap:18px;padding:38px 24px 26px;border:1px solid var(--hair);
  border-radius:16px;background:var(--card);color:var(--mut);font-size:13px;transition:border-color .3s,transform .3s;}
.ks-prov img{height:26px;width:auto;filter:grayscale(1) brightness(2.2);opacity:.75;}
.ks-prov span{display:inline-flex;align-items:center;gap:6px;}
.ks-prov:hover{border-color:var(--acc2);transform:translateY(-3px);color:var(--ink);}
.ks-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,28px);border-top:1px solid var(--hair2);padding-top:5vh;}
.ks-stat .n{font-size:clamp(30px,3.6vw,52px);letter-spacing:-.02em;line-height:1;}
.ks-stat .l{margin-top:10px;font-size:13px;color:var(--dim);}
.ks-prov-hero .wrap{text-align:center;}
.ks-prov-hero h1{margin:0 auto;}
.ks-prov-hero .lede{margin-left:auto;margin-right:auto;}
.ks-prov-logo{display:block;height:34px;width:auto;margin:0 auto 4vh;filter:grayscale(1) brightness(2.2);opacity:.85;}
.ks-presby{margin-top:2.6vh;font-size:12px;color:var(--dim);letter-spacing:.06em;text-transform:uppercase;}
.ks-perf{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,28px);}
.ks-perfcard{border:1px solid var(--hair);border-radius:16px;background:var(--card);padding:28px 26px;text-align:center;}
.ks-perfcard .nm{font-size:13px;color:var(--mut);}
.ks-perfcard .big{font-size:clamp(40px,4.4vw,64px);letter-spacing:-.02em;line-height:1;margin:14px 0 6px;}
.ks-perfcard .u{font-size:12px;color:var(--dim);}
.ks-perfcard .rk{margin-top:16px;font-size:14px;color:var(--ink);}
.ks-perfcard .rk b{font-weight:500;color:var(--acc2);}
.ks-perfcard .vs{font-size:12px;color:var(--dim);margin-top:4px;}
.ks-feature{text-align:center;max-width:640px;margin:0 auto;}
.ks-feature .big{font-size:clamp(72px,10vw,140px);letter-spacing:-.03em;line-height:1;color:var(--acc2);}
.ks-feature p{margin-top:18px;font-size:16px;line-height:1.6;color:var(--mut);}
.ks-note{margin:3.5vh auto 0;max-width:760px;font-size:12.5px;line-height:1.65;color:var(--dim);text-align:center;}
.ks-note strong{color:var(--mut);font-weight:500;}
.ks-tablewrap{overflow-x:auto;border:1px solid var(--hair);border-radius:16px;background:var(--card);-webkit-overflow-scrolling:touch;}
.ks-table{width:100%;border-collapse:collapse;min-width:560px;font-size:13.5px;}
.ks-table th{text-align:left;font-weight:500;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);
  padding:16px 18px;border-bottom:1px solid var(--hair);}
.ks-table td{padding:14px 18px;border-bottom:1px solid var(--hair2);color:var(--mut);white-space:nowrap;}
.ks-table tr:last-child td{border-bottom:0;}
.ks-table td.fn{color:var(--ink);}
.ks-gbar{display:inline-block;vertical-align:middle;width:64px;height:5px;border-radius:3px;background:rgba(255,255,255,.08);margin-right:10px;overflow:hidden;}
.ks-gbar span{display:block;height:100%;background:var(--acc2);}
.ks-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;}
.ks-chips span{border:1px solid var(--hair);border-radius:99px;padding:9px 16px;font-size:13px;color:var(--mut);background:rgba(255,255,255,.02);}
.ks-disc{max-width:860px;margin:0 auto;font-size:12.5px;line-height:1.7;color:var(--dim);border-top:1px solid var(--hair2);padding-top:4vh;}
.ks-disc strong{color:var(--mut);font-weight:500;}
.ks-back{color:var(--acc2);font-size:14px;}
.ks-back:hover{color:var(--ink);}
/* chart lightbox */
#chart-modal{position:fixed;inset:0;z-index:180;display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(5,6,8,.78);backdrop-filter:blur(10px);visibility:hidden;opacity:0;transition:opacity .35s ease,visibility 0s .35s;}
#chart-modal.open{visibility:visible;opacity:1;transition:opacity .35s ease;}
.ks-chart-card{position:relative;width:min(1100px,96vw);max-height:92vh;overflow-y:auto;background:#121318;border:1px solid var(--hair);
  border-radius:18px;padding:34px 32px 28px;box-shadow:0 60px 140px rgba(0,0,0,.7);}
.ks-chart-scroll{overflow-x:auto;border-radius:10px;background:#fff;-webkit-overflow-scrolling:touch;}
.ks-chart-scroll img{display:block;min-width:900px;width:100%;height:auto;}
.ks-chart-hint{display:none;font-size:11.5px;color:var(--dim);margin-top:8px;}
.ks-chart-cap{font-size:12px;line-height:1.6;color:var(--dim);margin-top:12px;}
.ks-chart-card h3{font-size:22px;letter-spacing:-.012em;margin-top:30px;}
.ks-chart-sub{font-size:14px;color:var(--mut);margin-top:8px;}
.ks-pills{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px;}
.ks-pills div{border:1px solid var(--hair2);border-radius:12px;padding:16px 16px 14px;font-size:13px;line-height:1.55;color:var(--mut);}
.ks-pills strong{display:block;color:var(--ink);font-weight:500;margin-bottom:6px;}
@media (max-width:900px){
  .ks-pills{grid-template-columns:1fr 1fr;}
  .ks-perf{grid-template-columns:1fr;}
}
@media (max-width:768px){
  .pillars.two,.pillars.four{grid-template-columns:1fr;}
  .ks-stats{grid-template-columns:1fr 1fr;}
  .ks-provs{grid-template-columns:1fr;}
  .ks-pills{grid-template-columns:1fr;}
  .ks-chart-hint{display:block;}
  .ks-chart-card{padding:24px 18px 20px;}
}


/* ============================================================
   SAFE-AREA INSETS  (viewport-fit=cover means content can sit
   under the notch / Dynamic Island / home indicator)
   ============================================================ */
#menu{padding-top:calc(var(--nav-h) + 4vh + env(safe-area-inset-top,0px));padding-bottom:calc(5vh + env(safe-area-inset-bottom,0px));}
.footer{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 0px);}
#start-modal,#chart-modal{
  padding-top:max(20px,env(safe-area-inset-top,0px));
  padding-bottom:max(20px,env(safe-area-inset-bottom,0px));
  padding-left:max(20px,env(safe-area-inset-left,0px));
  padding-right:max(20px,env(safe-area-inset-right,0px));
}
.f-scroll-hint{bottom:calc(5vh + env(safe-area-inset-bottom,0px));}
.beat.b5{padding-bottom:calc(11vh + env(safe-area-inset-bottom,0px));}
.wrap,.proc-head,.rev-head{
  padding-left:env(safe-area-inset-left,0px);
  padding-right:env(safe-area-inset-right,0px);
}

/* ============================================================
   TAP TARGETS  (>=44px effective hit area, layout unchanged)
   ============================================================ */
.menu-tg{min-height:44px;display:inline-flex;align-items:center;}
.nav-center a{min-height:44px;display:inline-flex;align-items:center;}
.f-links a{min-height:44px;}
.f-bot .fl a,.f-bot span a{display:inline-block;padding:11px 0;}
.f-reg a{display:inline-block;padding:13px 0;}
.mfoot span{display:inline-block;padding:4px 0;}
.msub a{min-height:44px;display:inline-flex;align-items:center;}
.rev-foot a{display:inline-flex;align-items:center;min-height:44px;}
  .nav-brand{min-height:44px;min-width:44px;justify-content:center;}
  .btn{min-height:44px;}
  .pillar h3 a{display:inline-flex;align-items:center;min-height:44px;}
  .h1-bal br{display:none;}
  .h1-bal{text-wrap:balance;}

.rowlist a{display:inline-block;padding:4px 0;}