/* Supervisor.my prototype: three versions (data-v a|b|c), five palettes (data-p 1-5), four type pairings (data-f 1-4) */
:root{--ease:cubic-bezier(.2,.7,.1,1);--wrap:1320px;--pad:clamp(20px,4vw,56px);--r:18px;--rs:12px}
/* palettes: 1 and 2 are Supervisor's own brand (magenta #95288F, gold #DEB14E, navy #030F27) */
[data-p="1"]{--em:#95288F;--bg:#FFFFFF;--bg2:#F6F2F7;--card:#FFFFFF;--ink:#14122B;--ink2:#34304D;--mute:#625E78;--line:rgba(20,18,43,.12);--acc:#95288F;--acc2:#DEB14E;--acc-ink:#FFFFFF;--deep:#030F27;--deep-ink:#FFFFFF;--deep-mute:#B4BCD0;--deep-acc:#DEB14E}
[data-p="2"]{--em:#DEB14E;--bg:#030F27;--bg2:#091936;--card:#0E2144;--ink:#F3F4F8;--ink2:#D3D8E5;--mute:#A3ACC2;--line:rgba(243,244,248,.14);--acc:#DEB14E;--acc2:#E08FDA;--acc-ink:#030F27;--deep:#01081A;--deep-ink:#F3F4F8;--deep-mute:#A3ACC2;--deep-acc:#DEB14E}
[data-p="3"]{--em:#4DB1F5;--bg:#061A33;--bg2:#0A2340;--card:#0F2C4D;--ink:#EEF4FB;--ink2:#CEDBEA;--mute:#9DB1C7;--line:rgba(120,190,245,.2);--acc:#4DB1F5;--acc2:#DEB14E;--acc-ink:#04122A;--deep:#03122A;--deep-ink:#EEF4FB;--deep-mute:#9DB1C7;--deep-acc:#DEB14E}
[data-p="4"]{--em:#6E1F6A;--bg:#F6F1E8;--bg2:#EDE5D7;--card:#FBF8F2;--ink:#21152A;--ink2:#3B2E42;--mute:#655A68;--line:rgba(33,21,42,.15);--acc:#6E1F6A;--acc2:#A9771F;--acc-ink:#FFFFFF;--deep:#21152A;--deep-ink:#F6F1E8;--deep-mute:#BDB2BC;--deep-acc:#DEB14E}
[data-p="5"]{--em:#8A6114;--bg:#F2F2EF;--bg2:#E6E6E1;--card:#FFFFFF;--ink:#1E2329;--ink2:#3A4048;--mute:#5C6168;--line:rgba(30,35,41,.14);--acc:#1E2329;--acc2:#A9771F;--acc-ink:#FFFFFF;--deep:#1E2329;--deep-ink:#F2F2EF;--deep-mute:#B8BCC2;--deep-acc:#DEB14E}
/* type pairings: 1 is Supervisor's own (Rubik, with Mulish standing in for Muli). --ds scales display sizes per face */
[data-f="1"]{--fd:"Rubik",system-ui,sans-serif;--fb:"Mulish",system-ui,sans-serif;--dw:600;--dls:-.025em;--dem:normal;--ds:.86}
[data-f="2"]{--fd:"Instrument Serif",Georgia,serif;--fb:"Inter",system-ui,sans-serif;--dw:400;--dls:-.015em;--dem:italic;--ds:1.08}
[data-f="3"]{--fd:"Space Grotesk",system-ui,sans-serif;--fb:"Inter",system-ui,sans-serif;--dw:500;--dls:-.04em;--dem:normal;--ds:.9}
[data-f="4"]{--fd:"Plus Jakarta Sans",system-ui,sans-serif;--fb:"Plus Jakarta Sans",system-ui,sans-serif;--dw:700;--dls:-.035em;--dem:normal;--ds:.84}
[data-v="b"]{--r:4px;--rs:3px}
[data-v="c"]{--r:0px;--rs:0px}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--fb);-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .4s,color .4s}
[data-v="b"] body{background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px;background-attachment:fixed}
[data-v="b"] .sec--alt,[data-v="b"] .band{background:color-mix(in srgb,var(--bg2) 90%,transparent)}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--fd);font-weight:var(--dw);letter-spacing:var(--dls);line-height:1.04;margin:0}
h1 em,h2 em,h3 em{font-style:var(--dem);color:var(--em)}
h2{font-size:calc(clamp(34px,4.6vw,66px)*var(--ds))}
h3{font-size:calc(24px*var(--ds))}
p{margin:0}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:fixed;left:12px;top:-60px;z-index:200;padding:10px 16px;background:var(--acc);color:var(--acc-ink);border-radius:8px}.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--acc2);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:600 12px/1.3 var(--fb);letter-spacing:.16em;text-transform:uppercase;color:var(--em)}
[data-v="b"] .eyebrow,[data-v="b"] small,[data-v="b"] .role small{font-family:"IBM Plex Mono",monospace;letter-spacing:.06em}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor;flex:none}
.lead{font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:var(--ink2);max-width:640px;margin-top:22px}
.mute{color:var(--mute)}
.sec{padding:clamp(76px,10vw,140px) 0}
.sec--tight{padding:clamp(52px,6vw,90px) 0}
.sec--alt{background:var(--bg2)}
.sec--deep{background:var(--deep);color:var(--deep-ink)}
.sec--deep .lead,.sec--deep .ticks{color:var(--deep-mute)}.sec--deep h2 em,.sec--deep .eyebrow{color:var(--deep-acc)}
.sh{max-width:880px;margin-bottom:clamp(36px,5vw,64px)}.sh .eyebrow{margin-bottom:18px}
.sh--r{max-width:none;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,6vw,90px);align-items:center}
.split--r{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.split .eyebrow{margin-bottom:18px}
.pt{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 24px;border-radius:calc(var(--rs) + 2px);background:var(--acc);color:var(--acc-ink);font:600 16px/1.1 var(--fb);border:1px solid var(--acc);cursor:pointer;transition:transform .25s var(--ease),background .25s}
.btn svg{width:15px;height:15px;transition:transform .25s var(--ease)}.btn:hover svg{transform:translateX(4px)}.btn:hover{transform:translateY(-1px)}
.btn--ghost{background:transparent;color:inherit;border-color:currentColor}
.btn--sm{padding:11px 17px;font-size:14.5px}
.tl{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--em);border-bottom:1px solid currentColor;padding-bottom:3px}.tl svg{width:14px;height:14px}
.ticks{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px;color:var(--ink2)}.ticks li{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:start}.ticks svg{width:17px;height:17px;margin-top:5px;color:var(--acc2)}
/* version switch */
.js .vx{display:none}
[data-v="a"] .vx-a,[data-v="b"] .vx-b,[data-v="c"] .vx-c{display:block}
/* reveal */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}.ln>span{display:block}
.js .lines .ln>span{transform:translateY(106%);transition:transform 1s var(--ease)}
.js .lines.in .ln>span{transform:none}.lines .ln:nth-child(2)>span{transition-delay:.1s}.lines .ln:nth-child(3)>span{transition-delay:.2s}
/* header */
.hdr{position:fixed;inset:0 0 auto;z-index:60;transition:transform .35s var(--ease),background .3s,box-shadow .3s;color:var(--ink)}
.hdr.hide{transform:translateY(-100%)}
.hdr__in{max-width:var(--wrap);margin:0 auto;padding:16px var(--pad);display:flex;align-items:center;justify-content:space-between;gap:22px}
.hdr.solid{background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line)}
.logo img{height:26px;width:auto}.logo .lw{display:none}
[data-dark="1"] .logo .lc{display:none}[data-dark="1"] .logo .lw{display:block}
.nav{display:flex;gap:clamp(16px,2vw,30px);font-weight:600;font-size:15px}.nav a{padding:6px 0;border-bottom:2px solid transparent}.nav a:hover,.nav a.on{border-color:var(--acc2)}
.hdr__act{display:flex;align-items:center;gap:14px}.hdr__tel{font-weight:600;font-size:14.5px;white-space:nowrap}
.burger{display:none;width:42px;height:42px;background:none;border:0;color:inherit;cursor:pointer;position:relative}.burger span{position:absolute;left:9px;right:9px;height:2px;background:currentColor;transition:transform .3s}.burger span:first-child{top:16px}.burger span:last-child{top:24px}
.nav-open .burger span:first-child{transform:translateY(4px) rotate(45deg)}.nav-open .burger span:last-child{transform:translateY(-4px) rotate(-45deg)}
/* version A over-image header */
[data-v="a"] .home .hdr:not(.solid){color:#fff}[data-v="a"] .home .hdr:not(.solid) .lc{display:none}[data-v="a"] .home .hdr:not(.solid) .lw{display:block}[data-v="a"] .home .hdr:not(.solid) .btn{background:#DEB14E;border-color:#DEB14E;color:#14122B}
/* hero A */
.ha{position:relative;min-height:min(100svh,920px);color:#fff;display:block;overflow:hidden;background:var(--deep)}
.ha__bg{position:absolute;inset:0}.ha__bg img{width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.ha__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(95deg,rgba(3,15,39,.92) 8%,rgba(3,15,39,.62) 46%,rgba(3,15,39,.18) 80%)}
.ha__in{position:relative;padding-top:clamp(130px,17vh,190px);padding-bottom:48px;min-height:min(100svh,920px);display:flex;flex-direction:column;justify-content:flex-end}
.ha .eyebrow{color:#DEB14E;margin-bottom:20px}
.ha h1{font-size:calc(clamp(44px,7.2vw,104px)*var(--ds));color:#fff}.ha h1 em{color:#DEB14E}
.ha .lead{color:#E6E8F0}
.doors{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:38px;max-width:860px}
.door{display:grid;grid-template-columns:1fr 20px;gap:2px 14px;padding:20px 22px;border-radius:var(--r);background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(14px);transition:background .25s,transform .25s var(--ease);color:#fff}
.door:hover{background:rgba(255,255,255,.2);transform:translateY(-2px)}.door small{font-size:13px;color:#DEB14E;font-weight:600}.door b{font:var(--dw) calc(22px*var(--ds))/1.15 var(--fd);grid-column:1}.door svg{grid-column:2;grid-row:1/3;align-self:center;width:18px;height:18px}
/* hero B */
.hb{padding:clamp(120px,15vh,160px) 0 56px;min-height:min(100svh,900px)}
.hb__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,70px);align-items:center}
.hb .eyebrow{margin-bottom:20px}.hb h1{font-size:calc(clamp(48px,6.2vw,96px)*var(--ds))}.hb__btns{margin-top:28px}
.hb__r{position:relative;min-height:500px;display:flex;align-items:center;justify-content:center}
.draw{position:absolute;inset:0;width:100%;height:100%;color:var(--acc)}
.draw path,.draw circle{fill:none;stroke:currentColor;stroke-width:1.5;opacity:.55}
.js .draw .dl>*{stroke-dasharray:1400;stroke-dashoffset:1400;transition:stroke-dashoffset 2.6s var(--ease)}.js .draw.in .dl>*{stroke-dashoffset:0}
.draw .dm path{opacity:.8}.draw text{font:12px "IBM Plex Mono",monospace;fill:var(--mute);text-anchor:middle;paint-order:stroke;stroke:var(--bg);stroke-width:6px}
.calc--mini{position:relative;width:min(420px,100%);padding:28px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 30px 70px rgba(0,0,0,.28);display:grid;gap:18px}
.calc__t{font-size:calc(26px*var(--ds));letter-spacing:-.02em}
.sl{display:grid;gap:8px;font-size:15px;color:var(--ink2)}.sl>span{display:flex;justify-content:space-between;gap:12px}.sl b{color:var(--ink);white-space:nowrap}
input[type=range]{width:100%;accent-color:var(--acc);height:26px;margin:0;cursor:pointer}
.calc__res{display:grid;gap:12px;border-top:1px solid var(--line);padding-top:16px}.calc__res>span{display:flex;justify-content:space-between;color:var(--mute);font-size:15px}.calc__res b{color:var(--ink)}
.calc__big small{display:block;font-size:14px;color:var(--mute)}.calc__big strong{display:block;font:var(--dw) calc(46px*var(--ds))/1.05 var(--fd);letter-spacing:-.03em;color:var(--em);margin-top:4px}
.calc .btn{justify-content:center}
/* hero C */
.hc{padding:clamp(120px,15vh,160px) 0 0}
.hc__top{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,3fr);gap:40px;align-items:end;margin-bottom:clamp(30px,4vw,54px)}
.hc h1{font-size:calc(clamp(48px,6.4vw,104px)*var(--ds))}.hc .lead{margin-top:0;font-size:18px}.hc__links{display:flex;gap:22px;flex-wrap:wrap;margin-top:18px}
.ba{position:relative;aspect-ratio:16/8;overflow:hidden;background:var(--deep);touch-action:pan-y}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.ba__a{clip-path:inset(0 calc(100% - var(--x)) 0 0)}
.ba__h{position:absolute;top:0;bottom:0;left:var(--x);width:2px;background:#fff;transform:translateX(-1px);pointer-events:none}.ba__h::after{content:"";position:absolute;top:50%;left:50%;width:50px;height:50px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.ba__h::before{content:"\2194";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;color:#21152A;font-size:22px}
.ba__t{position:absolute;bottom:18px;padding:6px 12px;background:rgba(0,0,0,.6);color:#fff;font-size:13px;font-weight:600;pointer-events:none}.ba__t--l{left:18px}.ba__t--r{right:18px}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
/* stats + logos */
.band{padding:clamp(40px,5vw,64px) 0;border-block:1px solid var(--line);background:var(--bg2)}
[data-v="c"] .band{background:transparent}
.band--p{border-top:0}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.stats b{display:block;font:var(--dw) calc(clamp(34px,4vw,58px)*var(--ds))/1.05 var(--fd);letter-spacing:-.03em;color:var(--em)}
.stats span{font-size:15px;color:var(--mute);display:block;margin-top:6px}
.mq{overflow:hidden;margin-top:clamp(30px,4vw,48px);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq__t{display:flex;width:max-content;animation:mq 34s linear infinite}.mq__dup{display:contents}
.clog{flex:none;width:176px;height:84px;margin-right:14px;display:grid;place-items:center;background:#fff;border-radius:var(--rs);padding:12px 20px;border:1px solid rgba(20,18,43,.08)}.clog img{max-height:58px;max-width:100%;width:auto;object-fit:contain}
@keyframes mq{to{transform:translateX(-50%)}}
.qa .mq__t{animation:none}
@media (prefers-reduced-motion:reduce){.mq__t{animation:none}}
/* statement */
.mani__p{font:var(--dw) calc(clamp(28px,4.2vw,60px)*var(--ds))/1.18 var(--fd);letter-spacing:var(--dls);max-width:1120px}
.mani__p span{color:color-mix(in srgb,var(--ink) 42%,var(--bg));transition:color .3s}.mani__p span.lit{color:var(--ink)}
/* shell to finished wipe */
.wipe{height:320vh;position:relative;background:var(--deep);--w:0%}
.wipe__s{position:sticky;top:0;height:100svh;overflow:hidden}
.wipe__a,.wipe__b{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wipe__b{clip-path:inset(0 calc(100% - var(--w)) 0 0)}
.wipe__line{position:absolute;top:0;bottom:0;left:var(--w);width:2px;background:#DEB14E;box-shadow:0 0 24px rgba(222,177,78,.8)}
.wipe__ui{position:absolute;left:var(--pad);bottom:clamp(26px,6vh,60px);width:min(440px,calc(100% - 2*var(--pad)));min-height:230px;padding:24px 26px;background:rgba(3,15,39,.88);color:#fff;border-radius:var(--r);backdrop-filter:blur(10px)}
.wipe__dots{display:flex;gap:6px;margin-bottom:14px}.wipe__dots i{flex:1;height:3px;background:rgba(255,255,255,.25)}.wipe__dots i.on{background:#DEB14E}
.wipe__cap{position:absolute;left:26px;right:26px;top:42px;opacity:0;transform:translateY(10px);transition:opacity .4s,transform .4s}.wipe__cap.on{opacity:1;transform:none}
.wipe__cap small{color:#DEB14E;font-size:13px}.wipe__h{color:#fff;font-size:calc(30px*var(--ds));margin:4px 0 8px}.wipe__cap p{font-size:15.5px;color:#D9DDE8}
.qa .wipe{height:100svh}.qa .wipe__s{position:relative}
/* chapters (C) */
.chs{display:grid;gap:clamp(40px,6vw,80px)}
.ch{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,60px);align-items:center}
.ch:nth-child(even) img{order:2}.ch img{width:100%;aspect-ratio:3/2;object-fit:cover}.ch small{color:var(--em);font-weight:600}.ch h3{font-size:calc(clamp(30px,3.4vw,46px)*var(--ds));margin:8px 0 12px}
/* hub */
.hub{width:100%;height:auto}.hub__l{fill:none;stroke:var(--acc);stroke-width:1.6;stroke-dasharray:6 7;animation:dash 1.5s linear infinite;opacity:.75}
@keyframes dash{to{stroke-dashoffset:-26}}
.hub__n rect{fill:var(--card);stroke:var(--line)}.hub__n text,.hub__y text{font:600 19px var(--fb);fill:var(--ink)}
.hub__c circle{fill:var(--acc)}.hub__c text{font:700 21px var(--fd);fill:var(--acc-ink)}.hub__c text.s{font:500 13.5px var(--fb)}
.hub__y rect{fill:var(--acc2)}.hub__y text{font:700 24px var(--fd);fill:#14122B}
.qa .hub__l{animation:none}
.hubm{display:none;justify-items:center;gap:0}.hubm ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.hubm li{padding:9px 13px;background:var(--card);border:1px solid var(--line);border-radius:var(--rs);font-size:14.5px;font-weight:600}
.hubm__a{width:2px;height:30px;background:var(--acc)}.hubm__c{padding:14px 22px;background:var(--acc);color:var(--acc-ink);border-radius:var(--rs);text-align:center;font-size:14px}.hubm__c b{display:block;font:700 20px var(--fd)}.hubm__y{padding:10px 26px;background:var(--acc2);color:#14122B;font-weight:800;border-radius:var(--rs)}
/* roles */
.roles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.role{padding:26px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);display:grid;gap:8px;align-content:start;transition:transform .3s var(--ease),border-color .3s}.role:hover{transform:translateY(-4px);border-color:var(--acc)}
.role small{color:var(--em);font-weight:600}.role__t{font-weight:700;color:var(--ink);font-size:16px}.role p:last-child{color:var(--mute);font-size:15.5px}.role h3{font-size:calc(30px*var(--ds))}
[data-v="c"] .roles{gap:0;border-top:1px solid var(--line)}[data-v="c"] .role{background:none;border:0;border-right:1px solid var(--line);padding:26px 22px}[data-v="c"] .role:last-child{border-right:0}
/* tracker */
.trk{background:#0B1A36;color:#EDEFF6;border:1px solid rgba(255,255,255,.14);border-radius:var(--r);overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.3)}
.trk__bar{display:flex;justify-content:space-between;padding:13px 18px;border-bottom:1px solid rgba(255,255,255,.14);font-size:14px}.trk__bar span{color:#B8C0D4}
.trk__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:12px}
.trk__c{padding:16px;background:rgba(255,255,255,.07);border-radius:var(--rs)}.trk__c--w{grid-column:1/-1}
.trk__h{font:600 14px var(--fb);color:#C7CEE0;margin-bottom:10px}
.trk ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}.trk li{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) 42px;gap:10px;align-items:center;font-size:14px}
.trk li i{display:block;height:6px;border-radius:3px;background:rgba(255,255,255,.14);position:relative;overflow:hidden}.trk li i::after{content:"";position:absolute;inset:0;width:var(--v);background:#DEB14E;transform-origin:left;transform:scaleX(0);transition:transform 1.4s var(--ease) .2s}.trk.in li i::after{transform:none}
.trk li b{text-align:right}.trk__n{font:600 25px/1.1 var(--fd);color:#DEB14E}.trk small{color:#B8C0D4;font-size:13.5px;display:block;margin-top:4px}
.trk__ph{display:grid;grid-template-columns:150px 1fr;gap:14px;align-items:center}.trk__ph img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--rs)}.trk__ph .trk__h{margin-bottom:0;color:#fff}
/* speciality */
.spec{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.spec__c{position:relative;display:block;overflow:hidden;border-radius:var(--r);color:#fff;aspect-ratio:4/5;background:#030F27}
.spec__c img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}.spec__c:hover img{transform:scale(1.05)}
.spec__c::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(3,15,39,.9))}
.spec__c div{position:absolute;z-index:1;left:24px;right:24px;bottom:22px}.spec__c h3{color:#fff;font-size:calc(34px*var(--ds))}.spec__c p{font-size:15.5px;color:#E2E5EE;margin-top:6px}
/* quotes */
.qs__rail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;scrollbar-width:none}.qs__rail::-webkit-scrollbar{display:none}
.q{flex:0 0 min(420px,86%);scroll-snap-align:start;margin:0;padding:26px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);display:flex;flex-direction:column;gap:16px}
.q img{height:44px;width:auto;max-width:150px;object-fit:contain;align-self:flex-start;background:#fff;padding:4px 8px;border-radius:6px}
.q blockquote{margin:0;font:var(--dw) calc(23px*var(--ds))/1.28 var(--fd);letter-spacing:-.012em;flex:1}.q figcaption b{display:block}.q figcaption span{color:var(--mute);font-size:14.5px}
.qs__nav{display:flex;gap:8px;margin-top:16px}.qs__nav button{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;display:grid;place-items:center}.qs__nav svg{width:16px;height:16px}.qs__nav button:first-child svg{transform:rotate(180deg)}
/* final + footer */
.final{position:relative;padding:clamp(100px,14vw,190px) 0;color:#fff;background:#030F27;overflow:hidden}
.final__bg{position:absolute;inset:0}.final__bg img{width:100%;height:100%;object-fit:cover}.final__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,15,39,.88),rgba(3,15,39,.45))}
.final__in{position:relative}.final h2{color:#fff;font-size:calc(clamp(40px,6vw,88px)*var(--ds));max-width:900px}.final h2 em{color:#DEB14E}.final p{max-width:600px;margin-top:18px;font-size:19px;color:#E6E8F0}
.final__btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}.final .btn{background:#DEB14E;border-color:#DEB14E;color:#14122B}.final .btn--ghost{background:transparent;color:#fff;border-color:#fff}
.ftr{background:var(--deep);color:var(--deep-ink);padding:64px 0 96px}
.ftr__top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}.ftr__brand img{height:26px;width:auto;margin-bottom:16px}.ftr__brand p{color:var(--deep-mute);font-size:15px;max-width:360px}
.ftr h3{font:600 14px var(--fb);letter-spacing:.04em;color:var(--deep-acc);margin-bottom:12px}.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:15px}.ftr li a:hover{text-decoration:underline}
.ftr__logos{display:grid;grid-template-columns:3fr 1fr;gap:32px;margin-top:44px;padding-top:30px;border-top:1px solid rgba(255,255,255,.14)}.ftr__row{display:flex;flex-wrap:wrap;gap:10px}
.chipl{height:54px;padding:8px 14px;display:grid;place-items:center;background:#fff;border-radius:8px}.chipl--d{background:#14213D}.chipl img{max-height:36px;width:auto;max-width:112px}
.ftr__bot{margin-top:32px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);display:flex;justify-content:space-between;gap:30px;font-size:13.5px;color:var(--deep-mute)}.ftr__bot p:first-child{max-width:820px}
.mcta{display:none}
/* inner pages */
.ph{padding:clamp(130px,16vh,190px) 0 clamp(36px,5vw,60px)}.ph .eyebrow{margin-bottom:18px}.ph h1{font-size:calc(clamp(44px,6.6vw,96px)*var(--ds));max-width:1100px}
.sts{display:grid;gap:clamp(36px,5vw,64px)}.st{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,60px);align-items:center}.st:nth-child(even) .st__i{order:2}
.st__i img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r)}.st small{color:var(--em);font-weight:600}.st__h{font-size:calc(clamp(30px,3.4vw,46px)*var(--ds));margin:6px 0 12px}
.plan{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}.plan li{display:grid;grid-template-columns:20px 1fr;gap:14px;padding:16px 0;border-bottom:1px solid var(--line);font-size:18px}.plan svg{width:18px;height:18px;margin-top:6px;color:var(--acc2)}
.sympick{max-width:980px}.sympick h2{margin-bottom:24px}.sym{display:flex;flex-wrap:wrap;gap:10px}.sym button{padding:13px 18px;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;font:600 16px var(--fb);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
[data-v="b"] .sym button,[data-v="c"] .sym button{border-radius:var(--rs)}.sym button:hover{border-color:var(--acc)}.sym button.on{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}.sym__out{margin-top:20px;font-size:18px;color:var(--ink2);min-height:56px}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.steps li{padding:24px;background:var(--card);border:1px solid var(--line);border-radius:var(--r)}.steps small{color:var(--em);font-weight:600}.steps h3{font-size:calc(27px*var(--ds));margin:6px 0 8px}.steps p{color:var(--mute);font-size:15.5px}
.bq{margin:0;font:var(--dw) calc(clamp(24px,3vw,38px)*var(--ds))/1.25 var(--fd);letter-spacing:-.015em}.bq cite{display:block;font:600 15px var(--fb);letter-spacing:0;color:var(--mute);margin-top:14px;font-style:normal}
.note{margin-top:18px;color:var(--mute);font-size:14.5px;max-width:760px}
.calc--full{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:16px}.calc__in{padding:28px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);display:grid;gap:18px;align-content:start}
.calc__tbl{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow-x:auto}.calc__tbl table{width:100%;border-collapse:collapse;font-size:15.5px;min-width:560px}
.calc__tbl th,.calc__tbl td{padding:14px 18px;text-align:right;border-bottom:1px solid var(--line);vertical-align:top;font-weight:600}.calc__tbl th:first-child{text-align:left;width:52%}.calc__tbl thead th{font-size:14px;color:var(--mute)}.calc__tbl tbody tr:last-child>*{border-bottom:0}.calc__tbl small{display:block;font-weight:400;color:var(--mute);font-size:13.5px;margin-top:3px}.calc__tbl .sub>*{background:var(--bg2)}
.pjs{display:grid;gap:12px}.pj{display:grid;grid-template-columns:150px minmax(0,1fr) 170px;gap:26px;align-items:center;padding:22px 24px;background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.pj__l{height:92px;display:grid;place-items:center;background:#fff;border-radius:var(--rs);padding:10px}.pj__l img{max-height:72px;width:auto;object-fit:contain}.pj__h{font-size:calc(25px*var(--ds))}.pj .mute{font-size:15px;margin-top:3px}.pj blockquote{margin:10px 0 0;color:var(--ink2)}
.pj__s{text-align:right}.pj__s b{font:var(--dw) calc(36px*var(--ds))/1 var(--fd);letter-spacing:-.02em;color:var(--em)}.pj__s span{display:block;font-size:14px;color:var(--mute)}.pj__s i{display:block;height:5px;margin-top:10px;background:linear-gradient(90deg,var(--acc2) var(--v),var(--line) var(--v))}
.imgc img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
.team{display:grid;grid-template-columns:repeat(2,minmax(0,330px));gap:16px}.team figure{margin:0}.team img{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:50% 20%;border-radius:var(--r)}.team figcaption{margin-top:10px;font-weight:700}
.ct{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(24px,4vw,50px);align-items:start}.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.chip{padding:12px 18px;border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:calc(var(--rs) + 2px);font:600 15.5px var(--fb);cursor:pointer}.chip.on{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.tabp{display:none}.tabp.on{display:block}
.form{display:grid;gap:18px}.form__g{display:grid;grid-template-columns:1fr 1fr;gap:14px}.form label{display:grid;gap:6px;font-size:14.5px;font-weight:600;color:var(--ink2)}
.form input:not([type=checkbox]),.form select{width:100%;padding:13px 14px;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:var(--rs);font:400 16px var(--fb)}
.form fieldset{border:0;padding:0;margin:0}.form legend{font-weight:700;margin-bottom:10px;padding:0}.form__cb{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px}.form .cb{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:15.5px}.cb input{margin-top:5px;accent-color:var(--acc)}
.form .btn{justify-self:start}.form__msg{display:none;color:var(--em);font-weight:600}.form__msg.show{display:block}
.cta{padding:26px;background:var(--bg2);border-radius:var(--r);display:grid;gap:14px}.cta h2{font-size:calc(30px*var(--ds))}.cta b{display:block;font-size:13.5px;color:var(--mute);font-weight:600}.cta a{color:var(--em);font-weight:600}
/* version C: hairlines instead of cards */
[data-v="c"] .steps li,[data-v="c"] .pj,[data-v="c"] .q{background:none}
[data-v="c"] .pj{border-width:0 0 1px;padding-inline:0}
@media (max-width:1100px){
 .nav{display:none}.burger{display:block}.hdr__tel{display:none}
 .nav-open .nav{display:flex;flex-direction:column;position:fixed;inset:70px 0 auto;padding:20px var(--pad) 28px;background:var(--bg);box-shadow:0 20px 40px rgba(0,0,0,.2);font-size:19px;gap:6px}
 .roles,.steps{grid-template-columns:1fr 1fr}.split,.split--r,.hb__in,.hc__top,.calc--full,.ct{grid-template-columns:minmax(0,1fr)}
 .ftr__top{grid-template-columns:1fr 1fr 1fr}.ftr__brand{grid-column:1/-1}
}
@media (max-width:700px){
 body{font-size:16px}
 .ha h1{font-size:calc(40px*var(--ds))}.calc__tbl table{min-width:0;font-size:14px}.calc__tbl th,.calc__tbl td{padding:12px 10px}.calc__tbl th:first-child{width:46%}
 .stats{grid-template-columns:1fr 1fr}.doors,.spec,.ch,.st,.team,.form__g,.form__cb,.roles,.steps,.ftr__logos{grid-template-columns:minmax(0,1fr)}
 .ch:nth-child(even) img,.st:nth-child(even) .st__i{order:0}.spec__c{aspect-ratio:16/11}
 [data-v="c"] .role{border-right:0;border-bottom:1px solid var(--line)}
 .ftr__top{grid-template-columns:1fr 1fr}.ftr__bot{flex-direction:column}
 .hb__r{min-height:0}.draw{display:none}.ba{aspect-ratio:4/3.4}
 .pj{grid-template-columns:minmax(0,1fr);gap:14px}.pj__l{width:150px}.pj__s{text-align:left}
 .wipe__ui{min-height:250px}.trk li{grid-template-columns:minmax(0,1fr) 42px}.trk li i{grid-column:1/-1;grid-row:2}
 .hub{display:none}.hubm{display:grid}
 .mcta{display:grid;grid-template-columns:1fr 1fr;position:fixed;inset:auto 0 0;z-index:70;background:var(--acc);color:var(--acc-ink);font-weight:700;text-align:center}.mcta a{padding:15px 8px}.mcta a:first-child{border-right:1px solid rgba(255,255,255,.3)}
 .dp-tab{top:auto;bottom:70px;transform:none}
}

.dp-tab{position:fixed;right:0;top:50%;z-index:90;transform:translateY(-50%);writing-mode:vertical-rl;display:flex;align-items:center;gap:10px;padding:18px 12px;border:0;border-radius:12px 0 0 12px;background:#DEB14E;color:#0A0D12;font:700 13px/1 "Inter",system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;box-shadow:-8px 0 30px rgba(0,0,0,.25);transition:right .45s var(--ease)}
.dp-tab svg{width:18px;height:18px;transform:rotate(90deg)}
.dp-open .dp-tab{right:380px}
.dp{position:fixed;top:0;right:0;bottom:0;width:380px;z-index:89;background:#0B0F16;color:#EDE9E1;transform:translateX(100%);transition:transform .45s var(--ease);overflow-y:auto;font-family:"Inter",system-ui,sans-serif;visibility:hidden;transition:transform .45s var(--ease),visibility 0s .45s}
.dp-open .dp{transform:none;visibility:visible;transition:transform .45s var(--ease);box-shadow:-30px 0 60px rgba(0,0,0,.35)}
.dp__in{padding:28px 26px 40px;display:grid;gap:12px}
.dp__head small{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#DEB14E}
.dp__head b{display:block;font-size:22px;font-weight:600;margin-top:6px}
.dp__note{font-size:13.5px;line-height:1.55;color:#A7ADB8}
.dp h5{margin:16px 0 4px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#7E8696;font-weight:600}
.dp-vers{display:grid;gap:8px}
.dp-ver{all:unset;box-sizing:border-box;display:grid;grid-template-columns:38px 1fr;gap:12px;align-items:center;padding:12px;border:1px solid rgba(255,255,255,.1);border-radius:12px;cursor:pointer;transition:border-color .2s,background .2s}
.dp-ver em{width:38px;height:38px;border-radius:9px;display:grid;place-items:center;font:700 15px/1 "Inter",sans-serif;font-style:normal;background:rgba(255,255,255,.07)}
.dp-ver b{display:block;font-size:15px;font-weight:600}
.dp-ver span{display:block;font-size:12.5px;color:#9097A5;margin-top:2px}
.dp-ver:hover{border-color:rgba(222,177,78,.5)}
.dp-ver.on{border-color:#DEB14E;background:rgba(222,177,78,.08)}
.dp-ver.on em{background:#DEB14E;color:#0A0D12}
.dp-pals{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dp-pal{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;padding:10px;border:1px solid rgba(255,255,255,.1);border-radius:10px;cursor:pointer;font-size:13px}
.dp-pal i{display:flex;border-radius:6px;overflow:hidden;flex:none}
.dp-pal i s{display:block;width:12px;height:26px}
.dp-pal.on{border-color:#DEB14E;background:rgba(222,177,78,.08)}
.dp-typs{display:grid;gap:8px}
.dp-typ{all:unset;box-sizing:border-box;display:flex;justify-content:space-between;align-items:baseline;padding:12px 14px;border:1px solid rgba(255,255,255,.1);border-radius:10px;cursor:pointer}
.dp-typ b{font-size:21px;font-weight:400}
.dp-typ span{font-size:12px;color:#9097A5}
.dp-typ.on{border-color:#DEB14E;background:rgba(222,177,78,.08)}
.dp-save{margin-top:14px;padding:18px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);display:grid;gap:10px}
.dp-save b{font-size:15px}
.dp-save p{font-size:13px;color:#9097A5;line-height:1.5}
.dp-save input,.dp-save textarea{all:unset;box-sizing:border-box;width:100%;padding:12px 14px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);font-size:14px;color:#EDE9E1}
.dp-save textarea{min-height:70px}
.dp-save button{all:unset;box-sizing:border-box;text-align:center;padding:14px;border-radius:10px;background:#DEB14E;color:#0A0D12;font-weight:700;font-size:14px;cursor:pointer}
.dp-msg{font-size:13px;color:#9097A5}.dp-msg.ok{color:#7ee2b0}.dp-msg.err{color:#ff9b8f}
.dp-hp{position:absolute;left:-9999px}
.toast{position:fixed;left:50%;bottom:28px;z-index:95;transform:translate(-50%,30px);opacity:0;padding:12px 20px;border-radius:999px;background:#0B0F16;color:#EDE9E1;font:600 14px/1 "Inter",sans-serif;transition:opacity .3s,transform .4s var(--ease);pointer-events:none;box-shadow:0 20px 40px rgba(0,0,0,.3)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.dp__in{padding:28px 26px 40px;display:grid;gap:12px}
.dp__head small{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#DEB14E}
.dp__head b{display:block;font-size:22px;font-weight:600;margin-top:6px}
.dp__note{font-size:13.5px;line-height:1.55;color:#A7ADB8}
@media (max-width:700px){.dp{width:100%}.dp-open .dp-tab{right:calc(100% - 46px)}}