:root{
  --black:#030304; --white:#F4F5FA; --cobalt:#1B48EC; --cobalt-hi:#5C7DFF; --dim:#6E7286; --line:rgba(255,255,255,.1);
  --sans:Manrope,"Helvetica Neue",Arial,sans-serif; --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
html{background:var(--black);scroll-padding-top:env(safe-area-inset-top,0px)}
html.loading{overflow:hidden}
body{margin:0;background:var(--black);color:var(--white);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:2px solid var(--cobalt-hi);outline-offset:4px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono{font-family:var(--mono)}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;justify-content:space-between;align-items:center;
  padding:calc(18px + env(safe-area-inset-top,0px)) 3.2vw 18px;opacity:0;transition:opacity .6s}
.nav.on{opacity:1}
.mark{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;font-stretch:115%;font-size:17px;letter-spacing:-.01em}
.mark .sq{width:12px;height:12px;background:var(--cobalt);box-shadow:0 0 14px var(--cobalt)}
.mark small{font:500 11px var(--mono);color:var(--dim);letter-spacing:0;font-stretch:100%}
.talk{font:700 13px var(--mono);text-decoration:none;text-transform:uppercase;letter-spacing:.06em;background:var(--white);color:var(--black);padding:.85em 1.2em;transition:background .2s,color .2s}
.talk:hover{background:var(--cobalt);color:var(--white)}

/* ruler */
.ruler{mix-blend-mode:difference;position:fixed;right:max(18px,1.8vw);top:50%;height:38vh;transform:translateY(-50%);width:1px;background:var(--line);z-index:40;opacity:0;transition:opacity .6s}
.ruler.on{opacity:1}
.ruler .fill{position:absolute;left:0;top:0;width:1px;background:var(--cobalt-hi);box-shadow:0 0 8px var(--cobalt)}
.ruler .lb{position:absolute;right:12px;font:500 10px/1 var(--mono);color:var(--white);opacity:.35;transform:translateY(-50%);white-space:nowrap}
.ruler .lb.act{opacity:1;color:var(--cobalt-hi)}
.ruler .pct{position:absolute;right:12px;bottom:-26px;font:500 10px var(--mono);color:var(--dim)}

/* journey */
.journey{position:relative;height:1000vh}
.stage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--black)}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.gridfloor{position:absolute;left:-50%;right:-50%;bottom:-10%;height:70%;z-index:0;pointer-events:none;transform-origin:50% 100%;
  background-image:linear-gradient(rgba(92,125,255,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(92,125,255,.22) 1px,transparent 1px);
  background-size:80px 80px;transform:perspective(600px) rotateX(72deg);
  -webkit-mask-image:linear-gradient(to top,#000 0%,transparent 75%);mask-image:linear-gradient(to top,#000 0%,transparent 75%)}
.marq{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);z-index:0;pointer-events:none;opacity:0;display:flex;flex-direction:column;gap:2vh}
.marq div{white-space:nowrap;font-weight:900;font-stretch:125%;font-size:15vh;line-height:1;letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1.5px rgba(92,125,255,.5);will-change:transform}
#gl{z-index:1}
.scene3d{position:absolute;inset:0;z-index:2;perspective:var(--P,1100px);perspective-origin:50% 50%}
.world{position:absolute;inset:0;transform-style:preserve-3d}
.tile{position:absolute;left:50%;top:50%;width:var(--W);height:var(--H);will-change:transform,opacity;visibility:hidden}
.tile .face{position:absolute;inset:0;border-radius:4px;overflow:hidden;background:#111;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 40px 90px -30px rgba(0,0,0,.9)}
.tile img{display:block;width:100%;height:100%;object-fit:cover}
.tile .sheen{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;background:linear-gradient(112deg,transparent 38%,rgba(255,255,255,.14) 48%,transparent 58%);background-size:260% 100%;background-position:var(--sx,50%) 0}
.tile .cap{position:absolute;left:0;top:calc(100% + var(--H) * .05);font:500 calc(var(--W) * .036)/1 var(--mono);color:var(--cobalt-hi);opacity:var(--cap,0);white-space:nowrap}
.tile .cap b{color:var(--white);font-weight:500}

.overlay{position:absolute;inset:0;z-index:3;pointer-events:none}
.sub{position:absolute;left:0;right:0;text-align:center;padding:0 6vw;opacity:0;transition:opacity .8s}
.sub.on{opacity:1}
.sub .cmd{font:500 clamp(12px,1.05vw,15px)/1.4 var(--mono);color:var(--cobalt-hi)}
.sub .cmd i{display:inline-block;width:.6em;height:1.05em;background:var(--cobalt-hi);vertical-align:-.18em;margin-left:.15em;animation:blink 1s steps(1) infinite}
.sub p{margin:.7rem auto 0;max-width:46ch;font-size:clamp(15px,1.15vw,18px);line-height:1.5;color:#B9BCCB}
.ctas{margin-top:1.6rem;display:flex;gap:10px;justify-content:center;pointer-events:auto}
.btn{font:700 13px var(--mono);text-transform:uppercase;letter-spacing:.06em;padding:1.05em 1.5em;border:1px solid var(--white);background:transparent;color:var(--white);cursor:pointer;text-decoration:none;transition:background .2s,color .2s,border-color .2s}
.btn.pri{background:var(--cobalt);border-color:var(--cobalt);box-shadow:0 0 30px rgba(27,72,236,.55)}
.btn:hover{background:var(--white);color:var(--black);border-color:var(--white)}
@keyframes blink{50%{opacity:0}}

.beat{position:absolute;left:6vw;top:50%;transform:translateY(-50%)}
.beat div{font-weight:900;font-stretch:125%;font-size:clamp(2.4rem,7.4vw,8.6rem);line-height:.9;letter-spacing:-.035em;text-transform:uppercase;opacity:0;clip-path:inset(0 100% 0 0)}
.beat div span{color:var(--cobalt-hi)}
.beat .kick{font:500 13px var(--mono);letter-spacing:0;text-transform:none;color:var(--dim);margin-bottom:1.2rem;clip-path:none}
.fanhead{position:absolute;left:0;right:0;top:14vh;text-align:center;opacity:0}
.fanhead h2{margin:0;font-weight:900;font-stretch:125%;font-size:clamp(1.8rem,4.4vw,4.8rem);line-height:.92;letter-spacing:-.03em;text-transform:uppercase}
.fanhead p{margin:.8rem 0 0;font:500 13px var(--mono);color:var(--dim)}
.wall-label{position:absolute;left:5vw;bottom:9vh;opacity:0;padding:22px 26px;background:rgba(3,3,4,.82);border:1px solid var(--line);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.wall-label .k{font:500 12px var(--mono);color:var(--cobalt-hi)}
.wall-label b{display:block;margin-top:.5rem;font-weight:900;font-stretch:125%;font-size:clamp(1.6rem,3.2vw,3.2rem);line-height:.95;letter-spacing:-.03em;text-transform:uppercase}
.wall-label .k2{display:block;margin-top:.7rem;font:500 12px var(--mono);color:var(--dim)}
.warp{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--black);padding:.9em 1.2em;border:1px solid var(--cobalt-hi);font:700 clamp(12px,1.1vw,15px) var(--mono);color:var(--white);opacity:0;letter-spacing:.08em;white-space:nowrap}
.cut{position:absolute;inset:0;z-index:5;background:var(--cobalt);opacity:0;pointer-events:none}
.whiteout{position:absolute;inset:0;z-index:5;background:#fff;opacity:0;pointer-events:none}

.hud{position:absolute;z-index:4;bottom:calc(18px + env(safe-area-inset-bottom,0px));font:500 11px/1.6 var(--mono);color:var(--dim);opacity:0;transition:opacity .6s;pointer-events:none}
.hud.on{opacity:1}
.hud b{color:var(--white);font-weight:500}
#hudL{left:3.2vw} #hudR{right:calc(3.2vw + 24px);text-align:right}
.xh{position:fixed;left:0;top:0;z-index:70;pointer-events:none;width:0;height:0;opacity:0;transition:opacity .3s}
.xh::before,.xh::after{content:"";position:absolute;background:var(--white)}
.xh::before{left:-12px;top:0;width:24px;height:1px}
.xh::after{left:0;top:-12px;width:1px;height:24px}
.xh i{position:absolute;left:-22px;top:-22px;width:44px;height:44px;border:1px solid rgba(92,125,255,.7);transition:transform .25s}
.xh.big i{transform:scale(1.5);border-color:var(--white)}


/* loader */
.boot{position:fixed;inset:0;z-index:80;background:var(--black);display:flex;flex-direction:column;justify-content:flex-end;padding:0 3.2vw calc(7vh + env(safe-area-inset-bottom,0px))}
.boot pre{margin:0;font:500 clamp(11px,1vw,14px)/1.75 var(--mono);color:#9EA2B5;white-space:pre-wrap}
.boot pre .ok{color:#5BE39A}.boot pre .c{color:var(--cobalt-hi)}.boot pre .w{color:var(--white)}
.boot .bar{margin-top:18px;height:3px;background:var(--line);position:relative;overflow:hidden}
.boot .bar i{position:absolute;inset:0;right:auto;width:0;background:var(--cobalt);box-shadow:0 0 12px var(--cobalt)}
.boot .row{display:flex;justify-content:space-between;margin-top:10px;font:500 12px var(--mono);color:var(--dim)}
.boot.off{animation:bootoff .55s steps(5) forwards}
@keyframes bootoff{0%{clip-path:inset(0)}20%{clip-path:inset(10% 0 60% 0);transform:translateX(-14px)}40%{clip-path:inset(50% 0 20% 0);transform:translateX(18px)}60%{clip-path:inset(30% 0 45% 0);transform:translateX(-6px)}80%{clip-path:inset(80% 0 5% 0)}100%{clip-path:inset(50% 0 50% 0);visibility:hidden}}

/* no-webgl fallback headline */
.fallback{position:absolute;inset:0;display:none;align-items:center;justify-content:center;text-align:center;z-index:2}
.nogl .fallback{display:flex}
.fallback h1{margin:0;font-weight:900;font-stretch:125%;font-size:clamp(2.4rem,8vw,9rem);line-height:.9;letter-spacing:-.035em}

/* studio (cobalt) */
.studio{position:relative;background:var(--cobalt);color:var(--white);padding:18vh 6vw 10vh;overflow:hidden}
.studio .k{font:500 13px var(--mono);color:rgba(255,255,255,.7);margin-bottom:3rem}
.statement{margin:0;font-weight:900;font-stretch:112%;font-size:clamp(2rem,5.2vw,6rem);line-height:.95;letter-spacing:-.035em;text-transform:uppercase;max-width:15em}
.statement .w{display:inline-block;color:rgba(255,255,255,.22);transition:color .2s}
.statement .w.on{color:#fff}
.meta{display:grid;grid-template-columns:repeat(3,1fr);margin-top:14vh;border-top:1px solid rgba(255,255,255,.35)}
.meta div{padding:1.4rem 1.4rem 0 0;font:500 clamp(13px,1.05vw,15px)/1.5 var(--mono)}
.meta div+div{padding-left:1.4rem;border-left:1px solid rgba(255,255,255,.35)}
.meta span{display:block;color:rgba(255,255,255,.6);margin-bottom:.4rem}
.note{margin-top:14vh;display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;font:500 12px var(--mono);color:rgba(255,255,255,.75);border-top:1px solid rgba(255,255,255,.35);padding-top:1.4rem}

@media (max-width:720px){
  .journey{height:860vh}
  .mark small{display:none}
  .mark{font-size:15px}
  .talk{white-space:nowrap;padding:.75em 1em;font-size:12px}
  .btn{white-space:nowrap;padding:1em 1.1em;font-size:12px}
  .ruler{display:none}
  .beat{left:6vw;right:6vw;top:auto;bottom:16vh;transform:none}
  .beat div{font-size:12vw}
  .fanhead{top:13vh;padding:0 6vw}
  .wall-label{left:5vw;right:5vw;bottom:8vh}
  #hudR{display:none}
  .meta{grid-template-columns:1fr}
  .meta div+div{padding-left:0;border-left:0;border-top:1px solid rgba(255,255,255,.35);margin-top:1.4rem}
  .marq div{font-size:9vh}
}
@media (prefers-reduced-motion:reduce){ .sub .cmd i{animation:none} .boot.off{animation:none;display:none} }

/* ================= PHASE 2 ================= */
.kk{font:500 13px var(--mono);opacity:.75}

/* ---------- 04 Featured projects ---------- */
.projects{position:relative}
.pstage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--pbg,#1B48EC);color:var(--pink,#fff)}
.pintro{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:center;padding:0 6vw;pointer-events:none}
.pintro h2{margin:1.6rem 0 0;font-weight:900;font-stretch:125%;font-size:clamp(2.2rem,6.2vw,7.4rem);line-height:.88;letter-spacing:-.04em;text-transform:uppercase}
.pintro h2 span{display:block}
.pintro h2 span+span{color:transparent;-webkit-text-stroke:2px #fff}
.pname{position:absolute;left:0;top:50%;z-index:0;white-space:nowrap;pointer-events:none;font-weight:900;font-stretch:125%;font-size:23vw;line-height:.8;letter-spacing:-.05em;text-transform:uppercase;color:var(--pghost,rgba(255,255,255,.08));will-change:transform}
.pscene{position:absolute;inset:0;z-index:1;perspective:1500px;perspective-origin:var(--cx,60%) 50%}
.pgroup{position:absolute;inset:0;transform-style:preserve-3d;display:none}
.pgroup.on{display:block}
.pel{position:absolute;left:var(--cx,60%);top:var(--cy,50%);will-change:transform,opacity;backface-visibility:hidden}
.pdesk,.pback{width:var(--dw);aspect-ratio:1.6;border-radius:6px;overflow:hidden;box-shadow:0 70px 120px -40px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.12)}
.pback{filter:brightness(.92)}
.pel img{display:block;width:100%;height:100%;object-fit:cover}
.pphone{width:calc(var(--dw) * .25);aspect-ratio:390/844;border-radius:calc(var(--dw) * .036);border:calc(var(--dw) * .01) solid #0b0b0d;background:#0b0b0d;overflow:hidden;
  box-shadow:0 50px 90px -30px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.18)}
.pphone img{border-radius:calc(var(--dw) * .026)}
.pinfo{position:absolute;left:5vw;bottom:10vh;z-index:3;max-width:min(34vw,520px)}
.pinfo .ptitle{margin:.7rem 0 .6rem;font-weight:900;font-stretch:125%;font-size:clamp(2.2rem,4.8vw,5.4rem);line-height:.88;letter-spacing:-.045em;text-transform:uppercase}
.pinfo .cat{font:600 12px var(--mono);letter-spacing:.05em;text-transform:uppercase}
.pinfo p{margin:1rem 0 1.2rem;font-size:clamp(15px,1.1vw,17px);line-height:1.5;opacity:.85;max-width:38ch}
.pinfo .tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:1.4rem}
.pinfo .tags span{font:500 11px var(--mono);border:1px solid currentColor;padding:.45em .75em;opacity:.85}
.pbtn{display:inline-block;font:700 13px var(--mono);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;padding:1.05em 1.5em;background:var(--pink);color:var(--pbg);transition:transform .2s}
.pbtn:hover{transform:translateY(-2px)}
.pbars{position:absolute;right:calc(3.2vw + 24px);bottom:10vh;z-index:3;display:flex;gap:6px;align-items:center;font:500 12px var(--mono)}
.pbars i{display:block;width:44px;height:3px;background:color-mix(in srgb,currentColor 25%,transparent);position:relative;overflow:hidden}
.pbars i b{position:absolute;inset:0;right:auto;width:0;background:currentColor}
.pbars span{margin-right:10px}
.pdis{position:absolute;inset:0;width:100%;height:100%;z-index:6;pointer-events:none}

/* ---------- 05 Build sequence ---------- */
.build{position:relative;height:760vh}
.bstage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--black);
  background-image:linear-gradient(rgba(92,125,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(92,125,255,.07) 1px,transparent 1px);background-size:64px 64px}
.bleft{position:absolute;left:5vw;top:50%;transform:translateY(-50%);width:32vw;z-index:3}
.bleft h2{margin:1.4rem 0 0;font-weight:900;font-stretch:125%;font-size:clamp(2rem,4.3vw,5.2rem);line-height:.9;letter-spacing:-.04em;text-transform:uppercase}
.bleft .ln{display:block;color:rgba(255,255,255,.14);transition:color .35s}
.bleft .ln.on{color:#fff}
.bleft .ln.on.cur{color:var(--cobalt-hi)}
.steps{margin-top:2.4rem;border-top:1px solid var(--line)}
.steps div{display:flex;gap:14px;align-items:center;padding:.85rem 0;border-bottom:1px solid var(--line);font:500 13px var(--mono);color:var(--dim);transition:color .3s}
.steps div b{font-weight:500;width:2ch}
.steps div i{margin-left:auto;font-style:normal;font-size:11px}
.steps div.run{color:#fff}.steps div.run i{color:var(--cobalt-hi)}
.steps div.done{color:#C9CCDA}.steps div.done i{color:#5BE39A}
.bfinal{margin-top:1.6rem;font-weight:900;font-stretch:125%;font-size:clamp(1rem,1.6vw,1.6rem);letter-spacing:-.02em;text-transform:uppercase;opacity:0}
.bwork{position:absolute;right:4vw;top:50%;width:56vw;height:min(74vh,640px);transform:translateY(-50%);z-index:2}
.bigbody{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:700 clamp(3rem,8vw,9rem)/1 var(--mono);color:#fff;z-index:5;pointer-events:none}
.bigbody span{color:var(--cobalt-hi)}
.bigbody i{display:inline-block;width:.5em;height:.95em;background:var(--cobalt-hi);margin-left:.1em;animation:blink 1s steps(1) infinite}
.frame{position:absolute;background:#F6F4EF;border-radius:8px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 50px 100px -40px rgba(0,0,0,.9);transition:box-shadow .5s}
.frame.live{box-shadow:0 0 0 2px #5BE39A,0 0 80px rgba(91,227,154,.35)}
.fbar{height:30px;background:#16171F;display:flex;align-items:center;gap:12px;padding:0 12px;font:500 11px var(--mono);color:#9A9DAD}
.fbar .dots{display:flex;gap:6px}.fbar .dots i{width:9px;height:9px;border-radius:50%;background:#3A3B47}
.fbar .furl{flex:1;text-align:center;background:#23242E;border-radius:6px;padding:4px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fbar .flive{color:#5BE39A;opacity:0;font-weight:700}
.fmob .fbar{height:16px}
.fbody{position:absolute;top:30px;left:0;right:0;bottom:0;container-type:inline-size;overflow:hidden}
.fmob{border-radius:16px;border:5px solid #0b0b0d}
.fmob .fbody{top:0}
.editor,.terminal{position:absolute;background:rgba(10,11,19,.97);border:1px solid rgba(255,255,255,.12);border-radius:8px;overflow:hidden;z-index:4;box-shadow:0 40px 90px -30px rgba(0,0,0,.9)}
.ehead{display:flex;gap:2px;background:#11121C;border-bottom:1px solid rgba(255,255,255,.08);font:500 11px var(--mono);color:var(--dim)}
.ehead span{padding:8px 14px}.ehead span:first-child{color:#fff;background:rgba(10,11,19,.97);box-shadow:inset 0 -2px 0 var(--cobalt-hi)}
.editor pre,.terminal pre{margin:0;padding:14px 16px;font:500 clamp(10px,.85vw,13px)/1.7 var(--mono);color:#C9CCDA;white-space:pre;overflow:hidden;height:calc(100% - 33px)}
.tg{color:#8B9BFF}.at{color:#F5B66B}.st{color:#6EE7A8}.cm{color:#5D6275}.ex{color:#E879F9}
.caret{display:inline-block;width:.55em;height:1.1em;background:var(--cobalt-hi);vertical-align:-.2em;animation:blink 1s steps(1) infinite}
.terminal pre{color:#9EA2B5}.terminal .ok{color:#5BE39A}.terminal .w{color:#fff}
.scores{position:absolute;display:flex;gap:4%;align-items:center;z-index:3}
.score{display:flex;align-items:center;gap:10px;font:500 11px/1.3 var(--mono);color:var(--dim)}
.score svg{width:clamp(38px,3.6vw,56px);height:auto;transform:rotate(-90deg)}
.score circle{fill:none;stroke-width:5}
.score .bgc{stroke:rgba(255,255,255,.1)}.score .fgc{stroke:#5BE39A;stroke-linecap:round}
.score b{display:block;font:700 clamp(15px,1.4vw,20px) var(--mono);color:#fff}

/* mini website inside the frames (responds to its own frame via container queries) */
.site{height:100%;background:#F6F4EF;color:#141414;font-family:var(--sans);overflow:hidden}
.site .blk{position:relative;opacity:var(--w,0);transform:translateY(calc((1 - var(--w,0)) * 10px));transition:box-shadow .25s}
.site .blk > *{opacity:var(--d,0)}
.site .blk::after{content:attr(data-l);position:absolute;inset:3px;border:2px dashed rgba(27,72,236,.9);background:rgba(27,72,236,.09);border-radius:4px;color:#1B48EC;
  font:600 max(8px,1.25cqw)/1 var(--mono);padding:.5em;opacity:calc(1 - var(--d,0));pointer-events:none}
.site .b0{--w:var(--w0);--d:var(--d0)}.site .b1{--w:var(--w1);--d:var(--d1)}.site .b2{--w:var(--w2);--d:var(--d2)}.site .b3{--w:var(--w3);--d:var(--d3)}
.site[data-hl="0"] .b0,.site[data-hl="1"] .b1,.site[data-hl="2"] .b2,.site[data-hl="3"] .b3{box-shadow:inset 0 0 0 2px #1B48EC,0 0 0 4px rgba(27,72,236,.25)}
.s-nav{display:flex;align-items:center;justify-content:space-between;padding:2.2cqw 4cqw;min-height:7cqw}
.s-logo{font-weight:900;font-stretch:125%;font-size:2.3cqw;letter-spacing:-.02em}
.s-links{display:flex;gap:2.4cqw}.s-links i{display:block;width:6cqw;height:.8cqw;background:#141414;opacity:.45;border-radius:2px}
.s-btn{display:inline-block;background:#1B48EC;color:#fff;font:700 1.45cqw/1 var(--mono);padding:1.3cqw 2.3cqw;border-radius:99px;white-space:nowrap}
.s-btn.sm{background:#141414;font-size:1.2cqw;padding:1cqw 1.8cqw}
.s-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:3cqw;padding:2.5cqw 4cqw 3cqw;align-items:center}
.s-hero h4{margin:0 0 1.6cqw;font-weight:900;font-stretch:118%;font-size:5.2cqw;line-height:.94;letter-spacing:-.035em}
.s-hero p{margin:0 0 2.4cqw;font-size:1.6cqw;line-height:1.45;color:#5A5A5A}
.s-img{position:relative;min-height:25cqw;border-radius:2cqw;overflow:hidden;background:linear-gradient(140deg,#1B48EC,#7A5CFF 55%,#FF8A5B)}
.s-img i{position:absolute;border-radius:50%;background:rgba(255,255,255,.85)}
.s-img i:first-child{width:12cqw;height:12cqw;right:14%;top:16%;background:#FFD84D}
.s-img i:last-child{width:22cqw;height:22cqw;left:-12%;bottom:-30%;background:rgba(255,255,255,.18)}
.s-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:2cqw;padding:1cqw 4cqw 3cqw}
.s-card{background:#fff;border-radius:1.6cqw;padding:2.2cqw;min-height:13cqw;box-shadow:0 1cqw 3cqw -1cqw rgba(0,0,0,.12)}
.s-card i{display:block;width:4cqw;height:4cqw;border-radius:1cqw;background:#1B48EC;margin-bottom:1.6cqw}
.s-card:nth-child(2) i{background:#FF8A5B}.s-card:nth-child(3) i{background:#141414}
.s-card b{font-size:1.8cqw;font-weight:800}
.s-card p{height:.8cqw;background:#E3E1DA;margin:1.2cqw 0 0;width:80%;border-radius:2px}
.s-foot{display:flex;justify-content:space-between;margin:0 4cqw;padding:2cqw 0;border-top:1px solid #DDD9CF;font:500 1.2cqw var(--mono);color:#777}
@container (max-width:520px){
  .s-nav{padding:3cqw 5cqw}.s-logo{font-size:4.6cqw}.s-links{display:none}.s-btn.sm{font-size:2.6cqw;padding:2cqw 3cqw}
  .s-hero{grid-template-columns:1fr;padding:3cqw 5cqw}.s-hero h4{font-size:8.4cqw}.s-hero p{font-size:3cqw}.s-btn{font-size:2.8cqw;padding:2.6cqw 4cqw}
  .s-img{min-height:30cqw}
  .s-cards{grid-template-columns:1fr 1fr;padding:2cqw 5cqw}.s-card{padding:3cqw}.s-card b{font-size:3.2cqw}.s-card i{width:6cqw;height:6cqw}
  .s-foot{font-size:2.4cqw;margin:0 5cqw}
}
@container (max-width:260px){
  .s-nav{padding:5cqw 6cqw}.s-logo{font-size:8cqw}.s-btn.sm{font-size:4.6cqw;padding:3cqw 5cqw}
  .s-hero{padding:4cqw 6cqw;gap:5cqw}.s-hero h4{font-size:13cqw}.s-hero p{font-size:5cqw}.s-btn{font-size:5cqw;padding:4cqw 6cqw}
  .s-img{min-height:48cqw}.s-cards{grid-template-columns:1fr;padding:3cqw 6cqw}.s-card{padding:5cqw}.s-card b{font-size:6cqw}.s-card i{width:10cqw;height:10cqw}
  .s-foot{display:none}
}

/* ---------- 08 Before / after ---------- */
.revamp{position:relative;height:340vh}
.rstage{position:sticky;top:0;height:100vh;overflow:hidden;background:#0A0B12;display:grid;grid-template-columns:30vw 1fr;align-items:center;gap:3vw;padding:0 calc(3.2vw + 28px) 0 5vw}
.rhead h2{margin:1.4rem 0 1.6rem;font-weight:900;font-stretch:125%;font-size:clamp(2rem,3.9vw,4.6rem);line-height:.9;letter-spacing:-.04em;text-transform:uppercase}
.rhead h2 span{color:transparent;-webkit-text-stroke:1.5px #fff}
.rtabs{display:flex;gap:6px;flex-wrap:wrap}
.rtabs button{font:500 12px var(--mono);background:none;color:var(--dim);border:1px solid var(--line);padding:.7em 1em;cursor:pointer}
.rtabs button.on{color:#fff;border-color:var(--cobalt-hi);box-shadow:inset 0 0 0 1px var(--cobalt-hi)}
.rnotes{margin-top:2rem;display:grid;gap:1rem;font:500 12px/1.6 var(--mono);color:var(--dim)}
.rnotes b{display:block;color:#fff;font-weight:500}
.rnotes .a b{color:#5BE39A}
.rhint{margin-top:1.6rem;font:500 12px var(--mono);color:var(--cobalt-hi)}
.rframe{position:relative;width:100%;aspect-ratio:1.6;border-radius:8px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 60px 120px -40px rgba(0,0,0,.9);touch-action:pan-y;cursor:ew-resize;user-select:none}
.rframe img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;pointer-events:none}
.rbefore{clip-path:inset(0 calc(100% - var(--pos,100%)) 0 0)}
.rpx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.rline{position:absolute;top:0;bottom:0;left:var(--pos,100%);width:2px;margin-left:-1px;background:var(--cobalt-hi);box-shadow:0 0 18px var(--cobalt),0 0 4px #fff}
.rhandle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;background:var(--cobalt);border:2px solid #fff;color:#fff;
  font:700 14px var(--mono);display:flex;align-items:center;justify-content:center;box-shadow:0 0 30px rgba(27,72,236,.8);cursor:ew-resize;padding:0}
.rtag{position:absolute;top:44px;font:700 11px var(--mono);letter-spacing:.1em;padding:.5em .8em;background:rgba(0,0,0,.75);color:#fff;transition:opacity .2s}
.rtag.l{left:12px}.rtag.r{right:12px;background:var(--cobalt)}

/* ---------- Next / footer ---------- */
.next{background:var(--black);padding:16vh 6vw 6vh;border-top:1px solid var(--line)}
.next h2{margin:1.6rem 0 0;font-weight:900;font-stretch:125%;font-size:clamp(1.8rem,4.2vw,4.8rem);line-height:.92;letter-spacing:-.04em;text-transform:uppercase;max-width:18em}
.next h2 span{color:rgba(255,255,255,.22)}
.foot{margin-top:14vh;display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;font:500 12px var(--mono);color:var(--dim);border-top:1px solid var(--line);padding-top:1.4rem}

@media (max-width:720px){
  .pinfo{left:6vw;right:6vw;bottom:8vh;max-width:none}
  .pinfo p{display:none}
  .pinfo .ptitle{font-size:11vw}
  .pbars{right:6vw;bottom:auto;top:calc(76px + env(safe-area-inset-top,0px))}
  .pbars i{width:24px}
  .pname{font-size:30vw}
  .build{height:700vh}
  .bleft{left:6vw;right:6vw;width:auto;top:calc(80px + env(safe-area-inset-top,0px));transform:none}
  .bleft h2{font-size:9vw;margin-top:.8rem}
  .steps,.bfinal{display:none}
  .bwork{left:5vw;right:5vw;width:auto;top:auto;bottom:6vh;height:52vh;transform:none}
  .rstage{grid-template-columns:1fr;align-content:center;gap:5vh;padding:0 5vw}
  .rhead h2{font-size:9vw;margin:.8rem 0 1rem}
  .rnotes,.rhint{display:none}
  .scores{flex-wrap:wrap;row-gap:8px}.score{width:46%}.score svg{width:34px}
}

/* ================= PHASE 3 ================= */
.mark{gap:0}
.mark .lg{position:relative;display:block;height:34px;width:calc(34px * 299 / 96)}
.mark .lg img{position:absolute;inset:0;height:100%;width:auto;transition:opacity .35s}
.mark .lg .o,.mark .lg .m{opacity:0}
.nav[data-v="o"] .lg .w,.nav[data-v="m"] .lg .w{opacity:0}
.nav[data-v="o"] .lg .o{opacity:1}
.nav[data-v="m"] .lg .m{opacity:1}
.nav[data-v="o"] .talk{background:#030304;color:#fff}
.ruler .lb{opacity:0;transition:opacity .3s}
.ruler .lb.act{opacity:1}
.sec{position:relative;padding:18vh 6vw 16vh}
.h2b{margin:1.4rem 0 0;font-weight:900;font-stretch:125%;font-size:clamp(2.1rem,5vw,5.8rem);line-height:.9;letter-spacing:-.04em;text-transform:uppercase}
.h2b .o{color:transparent;-webkit-text-stroke:1.5px var(--stroke,#fff)}
.lede{max-width:56ch;margin:1.6rem 0 0;font-size:clamp(15px,1.2vw,18px);line-height:1.55;color:#B9BCCB}

/* ---------- 06 What we build ---------- */
.services{position:relative;height:460vh}
.sstage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--black);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:4vw;align-items:center;padding:0 calc(3.2vw + 30px) 0 5vw}
.slist{list-style:none;margin:2.2rem 0 0;padding:0;border-top:1px solid var(--line)}
.slist li{border-bottom:1px solid var(--line)}
.slist button{all:unset;box-sizing:border-box;width:100%;display:grid;grid-template-columns:3.2ch 1fr auto;align-items:baseline;gap:14px;padding:clamp(10px,1.6vh,18px) 0;cursor:pointer;color:rgba(255,255,255,.3);transition:color .25s}
.slist button:focus-visible{outline:2px solid var(--cobalt-hi);outline-offset:2px}
.slist .n{font:500 12px var(--mono)}
.slist .t{font-weight:900;font-stretch:118%;font-size:clamp(1.25rem,2.3vw,2.6rem);line-height:1;letter-spacing:-.03em;text-transform:uppercase}
.slist .a{font:500 18px var(--mono);transition:transform .3s}
.slist li.on button{color:#fff}
.slist li.on .n,.slist li.on .a{color:var(--cobalt-hi)}
.slist li.on .a{transform:rotate(45deg)}
.sview{position:relative}
.sframe{position:relative;aspect-ratio:1.6;border-radius:6px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 60px 120px -40px rgba(27,72,236,.45)}
.sframe img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.sframe img.on{opacity:1}
.sframe canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.scap{display:flex;justify-content:space-between;gap:2rem;margin-top:18px;font:500 12px/1.6 var(--mono);color:var(--dim)}
.scap b{color:var(--cobalt-hi);font-weight:500;white-space:nowrap}
.scap span{max-width:48ch;color:#C9CCDA}

/* ---------- 07 Technology ---------- */
.tech{background:var(--black)}
.tgrid{--mx:-999px;--my:-999px;position:relative;margin-top:7vh;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.tgrid::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(420px circle at var(--mx) var(--my),rgba(27,72,236,.28),transparent 60%);z-index:0}
.tcell{position:relative;z-index:1;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(18px,2.4vw,34px);min-height:clamp(150px,19vh,220px);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.tcell .ix{font:500 11px var(--mono);color:var(--dim)}
.tcell .nm{display:block;font-weight:900;font-stretch:118%;font-size:clamp(1.4rem,2.6vw,3rem);letter-spacing:-.03em;line-height:1;transition:transform .35s cubic-bezier(.2,.7,.2,1),color .25s;will-change:transform}
.tcell .use{font:500 12px var(--mono);color:var(--dim);transition:color .25s}
.tcell:hover .nm{color:var(--cobalt-hi)}
.tcell:hover .use{color:#fff}
.tfoot{display:flex;justify-content:space-between;align-items:flex-end;gap:3rem;flex-wrap:wrap;margin-top:5vh}
.tfoot p{margin:0;max-width:52ch;font-size:clamp(16px,1.4vw,21px);line-height:1.45}

/* ---------- 09 Numbers ---------- */
.numbers{background:var(--cobalt);color:#fff}
.ngrid{margin-top:9vh;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.4)}
.ncell{padding:2rem 1.4rem 0 0}
.ncell+.ncell{padding-left:1.4rem;border-left:1px solid rgba(255,255,255,.4)}
.nval{display:flex;font-weight:900;font-stretch:125%;font-size:clamp(3rem,8.4vw,10rem);line-height:1;letter-spacing:-.05em;height:1em;overflow:hidden}
.reel{display:block;height:1em;overflow:hidden}
.reel span{display:block;transition:transform 1.8s cubic-bezier(.2,.8,.15,1)}
.reel span i{display:block;height:1em;font-style:normal}
.nlab{margin-top:1rem;font:500 13px var(--mono);color:rgba(255,255,255,.8)}

/* ---------- 10 Clients ---------- */
.clients{background:#F4F5FA;color:#030304;--stroke:#030304}
.clients .lede{color:#4A4E60}
.cgrid{margin-top:8vh;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(3,3,4,.12);border-left:1px solid rgba(3,3,4,.12)}
.cl{display:flex;align-items:center;justify-content:center;gap:10px;min-height:clamp(110px,15vh,170px);border-right:1px solid rgba(3,3,4,.12);border-bottom:1px solid rgba(3,3,4,.12);color:#9A9DAA;filter:grayscale(1);transition:color .3s,filter .3s,background .3s;padding:0 12px;text-align:center}
.cl:hover{color:var(--c);filter:none;background:#fff}
.cl svg{width:26px;height:26px;flex:none;fill:currentColor}
.cl b{font-size:clamp(15px,1.5vw,22px);letter-spacing:-.01em;white-space:nowrap}

/* ---------- 11 Testimonials ---------- */
.voices{position:relative;background:var(--black);overflow:hidden;min-height:100vh;display:flex;flex-direction:column;justify-content:center}
.vbg{position:absolute;right:-6vw;top:50%;width:min(62vw,1000px);aspect-ratio:1.6;transform:translateY(-50%) rotate(-4deg);opacity:.22;filter:blur(2px) saturate(.8);pointer-events:none;border-radius:6px;overflow:hidden}
.vbg img{width:100%;height:100%;object-fit:cover;display:block}
.vtrack{position:relative;z-index:1;margin-top:6vh;touch-action:pan-y}
.vslide{display:none}
.vslide.on{display:block;animation:vin .7s cubic-bezier(.2,.7,.2,1)}
@keyframes vin{from{opacity:0;transform:translateX(40px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.vslide q{display:block;max-width:18em;font-weight:800;font-stretch:110%;font-size:clamp(1.8rem,4.2vw,4.8rem);line-height:1;letter-spacing:-.035em;quotes:"“" "”"}
.vslide .who{margin-top:2.4rem;font:500 13px var(--mono);color:var(--dim)}
.vslide .who b{display:block;color:#fff;font-weight:700;margin-bottom:.3rem}
.vnav{position:relative;z-index:1;display:flex;align-items:center;gap:10px;margin-top:5vh;font:500 12px var(--mono);color:var(--dim)}
.vnav button{width:52px;height:52px;border:1px solid var(--line);background:none;color:#fff;font:500 18px var(--mono);cursor:pointer;transition:background .2s,border-color .2s}
.vnav button:hover{background:var(--cobalt);border-color:var(--cobalt)}
.vnav span{margin-left:12px}

/* ---------- 12 Who is Brainiac ---------- */
.about{background:var(--black)}
.agrid{display:grid;grid-template-columns:1.1fr .9fr;gap:6vw;align-items:center}
.aicon{position:relative;aspect-ratio:325/383;width:min(100%,380px);justify-self:center}
.aicon img{position:absolute;left:0;width:100%;will-change:transform;filter:drop-shadow(0 0 40px rgba(27,72,236,.55))}
.aicon .t{top:0;width:calc(325 / 325 * 100%)}
.aicon .b{bottom:0}
.aicon .lbl{position:absolute;left:0;right:0;bottom:-48px;text-align:center;font:500 12px var(--mono);color:var(--dim)}
.princ{margin-top:3rem;display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--line)}
.princ div{padding:1.3rem 1.3rem 1.3rem 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.45;color:#B9BCCB}
.princ div:nth-child(even){padding-left:1.3rem;border-left:1px solid var(--line)}
.princ b{display:block;margin-bottom:.35rem;color:#fff;font:700 12px var(--mono);text-transform:uppercase;letter-spacing:.05em}
.aphoto{margin-top:14vh;height:clamp(240px,48vh,520px);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font:500 13px var(--mono);color:var(--dim);
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 12px,transparent 12px 24px);clip-path:inset(0 var(--slit,50%) 0 var(--slit,50%))}

/* ---------- 13 Process ---------- */
.process{position:relative;height:460vh}
.prstage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--black);display:flex;flex-direction:column;justify-content:center}
.prhead{padding:0 6vw}
.prline{position:relative;margin:7vh 6vw 4vh;height:1px;background:var(--line)}
.prline i{position:absolute;left:0;top:0;height:1px;width:0;background:var(--cobalt-hi);box-shadow:0 0 10px var(--cobalt)}
.prline img{position:absolute;top:50%;width:22px;height:auto;transform:translate(-50%,-50%);filter:drop-shadow(0 0 10px rgba(27,72,236,.9))}
.prtrack{display:flex;gap:2vw;padding:0 6vw;will-change:transform}
.prcard{flex:none;width:clamp(280px,34vw,520px);border:1px solid var(--line);padding:clamp(22px,2.6vw,38px);min-height:clamp(260px,40vh,400px);display:flex;flex-direction:column;background:rgba(255,255,255,.015);transition:border-color .3s,background .3s}
.prcard.on{border-color:var(--cobalt-hi);background:rgba(27,72,236,.08)}
.prcard .num{font-weight:900;font-stretch:125%;font-size:clamp(3rem,6vw,6.4rem);line-height:.9;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.5)}
.prcard.on .num{color:var(--cobalt-hi);-webkit-text-stroke:0}
.prcard h3{margin:auto 0 .6rem;font-weight:900;font-stretch:118%;font-size:clamp(1.6rem,2.8vw,3rem);letter-spacing:-.03em;text-transform:uppercase;line-height:1}
.prcard p{margin:0;font-size:16px;color:#C9CCDA}
.prcard .ds{margin-top:1.2rem;font:500 12px var(--mono);color:var(--dim)}

/* ---------- 14 FAQ ---------- */
.faq{background:var(--black)}
.fgrid{display:grid;grid-template-columns:.8fr 1.2fr;gap:6vw;align-items:start}
.fgrid .side{position:sticky;top:18vh}
.fgrid .side a{display:inline-block;margin-top:2rem}
.qa{border-top:1px solid var(--line)}
.qi{border-bottom:1px solid var(--line)}
.qi button{all:unset;box-sizing:border-box;width:100%;display:flex;justify-content:space-between;align-items:center;gap:2rem;padding:1.5rem 0;cursor:pointer;font-weight:800;font-stretch:110%;font-size:clamp(1.05rem,1.6vw,1.6rem);letter-spacing:-.02em}
.qi button:focus-visible{outline:2px solid var(--cobalt-hi)}
.qi button i{flex:none;width:34px;height:34px;border:1px solid var(--line);position:relative;transition:transform .35s,background .3s,border-color .3s}
.qi button i::before,.qi button i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:#fff;transform:translate(-50%,-50%)}
.qi button i::after{transform:translate(-50%,-50%) rotate(90deg)}
.qi.open button i{transform:rotate(45deg);background:var(--cobalt);border-color:var(--cobalt)}
.qi .ans{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.7,.2,1)}
.qi.open .ans{grid-template-rows:1fr}
.qi .ans > div{overflow:hidden}
.qi .ans p{margin:0 0 1.6rem;max-width:60ch;font-size:16px;line-height:1.6;color:#B9BCCB}

/* ---------- 15 Final ---------- */
.final{position:relative;min-height:100vh;background:var(--black);overflow:hidden;display:flex;flex-direction:column}
.final canvas{position:absolute;inset:0;width:100%;height:100%}
.fwrap{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;justify-content:center;padding:18vh 6vw 8vh;pointer-events:none}
.fwrap a,.fwrap button{pointer-events:auto}
.fhead{margin:1.4rem 0 0;font-weight:900;font-stretch:125%;font-size:clamp(2.8rem,8vw,10rem);line-height:.86;letter-spacing:-.05em;text-transform:uppercase;max-width:6.2em}
.ftype{margin-top:2.4rem;font:500 clamp(16px,1.8vw,26px) var(--mono);color:var(--cobalt-hi);min-height:1.4em}
.ftype i{display:inline-block;width:.6em;height:1.1em;background:var(--cobalt-hi);vertical-align:-.18em;margin-left:.1em;animation:blink 1s steps(1) infinite}
.fsub{margin:1.2rem 0 0;max-width:44ch;font-size:clamp(15px,1.2vw,18px);line-height:1.5;color:#B9BCCB}
.fctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:2.4rem}
.fmail{display:inline-block;margin-top:1.6rem;font:500 14px var(--mono);color:#fff}
.fnote{margin-top:1.2rem;font:500 12px var(--mono);color:var(--dim)}
.footer{position:relative;z-index:1;border-top:1px solid var(--line);padding:5vh 6vw calc(4vh + env(safe-area-inset-bottom,0px));display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:3vw;font:500 12px/1.9 var(--mono);color:var(--dim)}
.footer img{height:34px;width:auto;display:block;margin-bottom:1rem}
.footer b{display:block;color:#fff;font-weight:500;margin-bottom:.4rem}
.footer a{text-decoration:none;display:block}
.footer a:hover{color:#fff}

@media (max-width:900px){
  .sstage{grid-template-columns:1fr;align-content:center;gap:3vh;padding:0 5vw}
  .sview{order:-1}
  .slist{margin-top:1rem}.slist button{padding:8px 0}.slist .t{font-size:1.1rem}
  .scap span{display:none}
  .tgrid{grid-template-columns:1fr 1fr}
  .tcell .nm{font-size:clamp(1.05rem,4.6vw,1.6rem)}
  .ngrid{grid-template-columns:1fr 1fr}
  .ncell:nth-child(3){padding-left:0;border-left:0}
  .ncell{padding-bottom:1.6rem}
  .cgrid{grid-template-columns:repeat(2,1fr)}
  .agrid,.fgrid{grid-template-columns:1fr}
  .fgrid .side{position:static}
  .aicon{width:60%;margin-top:4vh}
  .princ{grid-template-columns:1fr}.princ div:nth-child(even){padding-left:0;border-left:0}
  .vbg{width:110vw;right:-30vw;opacity:.15}
  .footer{grid-template-columns:1fr 1fr}
  .mark .lg{height:28px;width:calc(28px * 299 / 96)}
}

/* ================= TYPOGRAPHY REFINEMENT: professional web-studio tone ================= */
:root{--sans:Manrope,"Helvetica Neue",Arial,sans-serif;--muted-h:#7E8296}
body{font-family:var(--sans)}
.beat div,.fanhead h2,.wall-label b,.statement,.pintro h2,.pinfo .ptitle,.bleft h2,.bfinal,.rhead h2,.h2b,.slist .t,.prcard h3,.fhead,.nval,.vslide q,.tcell .nm,.prcard .num,.marq div,.pname,.mark,.fallback h1{font-stretch:100%;text-transform:none}
.h2b{font-weight:700;font-size:clamp(1.9rem,3.5vw,3.8rem);line-height:1.06;letter-spacing:-.028em}
.h2b .o,.pintro h2 span+span,.rhead h2 span{color:var(--muted-h);-webkit-text-stroke:0}
.clients{--muted-h:#6B6F80}
.numbers .h2b,.numbers{--muted-h:rgba(255,255,255,.7)}
.beat div{font-weight:700;font-size:clamp(2rem,4.6vw,5rem);line-height:1.04;letter-spacing:-.03em}
.fanhead h2{font-weight:700;font-size:clamp(1.6rem,3vw,3.2rem);line-height:1.06;letter-spacing:-.025em}
.wall-label b{font-weight:700;font-size:clamp(1.4rem,2.2vw,2.3rem);letter-spacing:-.02em}
.statement{font-weight:600;font-size:clamp(1.7rem,3.4vw,3.9rem);line-height:1.14;letter-spacing:-.022em;max-width:22em}
.pintro h2{font-weight:700;font-size:clamp(2rem,4.6vw,5rem);line-height:1.06;letter-spacing:-.03em}
.pintro h2 span+span{color:rgba(255,255,255,.6)}
.pinfo .ptitle{font-weight:700;font-size:clamp(1.9rem,3.4vw,3.8rem);line-height:1.02;letter-spacing:-.03em}
.pname{font-weight:800;font-size:13vw;letter-spacing:-.04em}
.bleft h2{font-weight:700;font-size:clamp(1.8rem,3.3vw,3.7rem);line-height:1.06;letter-spacing:-.028em}
.bfinal{font-weight:700;font-size:clamp(1rem,1.3vw,1.3rem);letter-spacing:-.01em}
.rhead h2{font-weight:700;font-size:clamp(1.8rem,3vw,3.4rem);line-height:1.06;letter-spacing:-.028em}
.slist .t{font-weight:600;font-size:clamp(1.05rem,1.7vw,1.9rem);letter-spacing:-.015em}
.tcell .nm{font-weight:700;font-size:clamp(1.2rem,2vw,2.2rem);letter-spacing:-.02em}
.nval{font-weight:700;font-size:clamp(2.6rem,5.6vw,6.4rem);letter-spacing:-.04em}
.vslide q{font-weight:600;font-size:clamp(1.5rem,2.9vw,3.3rem);line-height:1.16;letter-spacing:-.022em;max-width:22em}
.prcard .num{font-weight:700;font-size:clamp(2.2rem,3.6vw,4rem);-webkit-text-stroke:0;color:rgba(255,255,255,.22)}
.prcard h3{font-weight:700;font-size:clamp(1.35rem,2vw,2.2rem);letter-spacing:-.02em}
.fhead{font-weight:700;font-size:clamp(2.5rem,5.8vw,6.4rem);line-height:1.02;letter-spacing:-.035em;max-width:10em}
.marq div{font-weight:700;font-size:9vh;letter-spacing:-.02em;-webkit-text-stroke:1px rgba(92,125,255,.3)}
.fallback h1{font-weight:800;letter-spacing:-.03em}
.btn,.pbtn{font:600 15px/1 var(--sans);text-transform:none;letter-spacing:0;border-radius:999px;padding:1em 1.5em}
.talk{font:600 14px/1 var(--sans);text-transform:none;letter-spacing:0;border-radius:999px;padding:.85em 1.25em}
.rtabs button{border-radius:999px}
.qi button{font-weight:600;font-size:clamp(1rem,1.4vw,1.35rem);letter-spacing:-.01em}
.princ b,.steps div,.score{text-transform:none}
.cl b{font-size:clamp(16px,1.6vw,24px)}
.cl.clnext{color:var(--cobalt);filter:none;text-decoration:none;font:600 15px var(--sans)}
.cl.clnext:hover{background:var(--cobalt);color:#fff}
.pdesk{border-radius:10px}
@media (max-width:720px){ .pinfo .ptitle{font-size:8.6vw} .beat div{font-size:10vw} .pname{font-size:22vw} }


/* ================= McKINSEY-STYLE COLOUR HIERARCHY =================
   1 deep navy surfaces · 2 brand electric blue bands & gradients · 3 white / light-grey content sections · 4 cyan for small interactive accents */
:root{--black:#051C2C;--navy:#051C2C;--navy-2:#0B2A3F;--cobalt:#1B48EC;--cobalt-hi:#00A9F4;--cyan:#00A9F4;--dim:#8FA0AE;--line:rgba(255,255,255,.12);--paper-gray:#F0F0F0}
html,body{background:var(--navy)}
.boot{background:var(--navy)}
.studio,.cut{background:linear-gradient(115deg,#051C2C 0%,#0B2C8C 50%,#1B48EC 100%)}
.numbers{background:#1B48EC}
.sub p,.lede,.fsub,.princ div,.qi .ans p{color:#B7C3CE}
.prcard.on{border-color:var(--cyan);background:rgba(27,72,236,.12)}
.lt{background:#FFFFFF;color:var(--navy);--line:rgba(5,28,44,.14);--dim:#5B6B79;--muted-h:#6A7A88;--cobalt-hi:#1B48EC;--stroke:#051C2C}
.rstage.lt{background:var(--paper-gray)}
.lt .lede,.lt .rnotes,.lt .princ div,.lt .qi .ans p,.lt .scap span{color:#3E5060}
.lt .kk{color:#3E5060;opacity:1}
.lt .btn{border-color:var(--navy);color:var(--navy)}.lt .btn:hover{background:var(--navy);color:#fff}
.lt .btn.pri{color:#fff;border-color:var(--cobalt)}
.lt .slist button{color:rgba(5,28,44,.32)}.lt .slist li.on button{color:var(--navy)}
.lt .rnotes b{color:var(--navy)}.lt .rnotes .a b{color:#0E8A5F}
.lt .rtabs button{color:#5B6B79;border-color:rgba(5,28,44,.2)}.lt .rtabs button.on{color:var(--navy);border-color:var(--cobalt);box-shadow:inset 0 0 0 1px var(--cobalt)}
.lt .rhint{color:var(--cobalt)}
.lt .princ b{color:var(--navy)}
.lt .aphoto{background:repeating-linear-gradient(135deg,rgba(5,28,44,.045) 0 12px,transparent 12px 24px)}
.lt .aicon img{filter:drop-shadow(0 20px 40px rgba(27,72,236,.35))}
.lt .qi button i{border-color:rgba(5,28,44,.25)}.lt .qi button i::before,.lt .qi button i::after{background:var(--navy)}
.lt .qi.open button i::before,.lt .qi.open button i::after{background:#fff}
.lt .sframe{box-shadow:0 0 0 1px rgba(5,28,44,.1),0 40px 90px -40px rgba(5,28,44,.45)}
.lt .rframe{box-shadow:0 0 0 1px rgba(5,28,44,.1),0 50px 100px -40px rgba(5,28,44,.5)}
.lt .scap b{color:var(--cobalt)}
.clients{background:#FFFFFF}
.cl{border-color:rgba(5,28,44,.12)}
.footer{background:var(--paper-gray);color:#3E5060;border-top:0}
.footer b{color:var(--navy)}.footer a:hover{color:var(--cobalt)}

/* projects: clean colour wipe instead of pixels */
.pwipe{position:absolute;inset:0;z-index:6;pointer-events:none;transform:translateY(100%);will-change:transform}
.pdis{display:none}
/* services: calm crossfade */
.sframe img{transition:opacity .6s ease,transform .9s cubic-bezier(.2,.7,.2,1);transform:scale(1.03)}
.sframe img.on{transform:none}
.sframe canvas{display:none}

/* ================= enquiry form ================= */
.fwrap{pointer-events:auto;padding:16vh 6vw 10vh}
.fgrid2{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:5vw;align-items:start}
.fhead{font-size:clamp(2.3rem,4.6vw,5rem)}
.fdirect{display:flex;flex-wrap:wrap;gap:12px 32px;margin-top:2.2rem}
.fdirect a{text-decoration:none;font-weight:600;font-size:17px;color:#fff}
.fdirect a:hover{color:var(--cyan)}
.fdirect span{display:block;font:500 11px var(--mono);color:var(--dim);margin-bottom:4px}
.ficon-slot{height:clamp(160px,26vh,260px);margin-top:5vh}
.qform{background:var(--navy-2);border:1px solid var(--line);border-radius:8px;padding:clamp(22px,2.6vw,38px);display:grid;gap:16px}
.qhead{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;padding-bottom:6px;border-bottom:1px solid var(--line);margin-bottom:4px}
.qhead b{font-size:19px;font-weight:700}.qhead span{font:500 11px var(--mono);color:var(--dim)}
.qrow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.qf{display:flex;flex-direction:column;gap:7px;min-width:0;margin:0;border:0;padding:0}
.qf label,.qf legend{font-size:13px;font-weight:600;color:#C9D3DC;padding:0}
.qf input,.qf select,.qf textarea{font:500 15px/1.4 var(--sans);color:#fff;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.18);border-radius:6px;padding:12px 14px;width:100%;transition:border-color .2s,background .2s;-webkit-appearance:none;appearance:none}
.qf select{background-image:linear-gradient(45deg,transparent 50%,#8FA0AE 50%),linear-gradient(135deg,#8FA0AE 50%,transparent 50%);background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px}
.qf select option{color:#051C2C}
.qf textarea{resize:vertical;min-height:110px}
.qf input::placeholder,.qf textarea::placeholder{color:#6F8292}
.qf input:focus,.qf select:focus,.qf textarea:focus{outline:none;border-color:var(--cyan);background:rgba(0,169,244,.06)}
.qf [aria-invalid="true"]{border-color:#FF7A7A}
.qerr{min-height:0;font-size:12px;color:#FF9A9A}
.qerr:empty{display:none}
.qchips{flex-direction:row;flex-wrap:wrap;gap:8px}
.qchips legend{margin-bottom:9px;width:100%}
.qchips label{position:relative;cursor:pointer}
.qchips input{position:absolute;opacity:0;width:1px;height:1px}
.qchips span{display:inline-block;font:500 14px var(--sans);color:#C9D3DC;border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:.6em 1em;transition:background .2s,border-color .2s,color .2s}
.qchips input:checked + span{background:var(--cobalt);border-color:var(--cobalt);color:#fff}
.qchips input:focus-visible + span{outline:2px solid var(--cyan);outline-offset:2px}
.qchips.bad span{border-color:#FF7A7A}
.qchips .qerr{width:100%}
.qhp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.qsubmit{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:4px}
.qto{font:500 11px var(--mono);color:var(--dim)}
.qstatus:empty{display:none}
.qstatus{border-radius:6px;padding:14px 16px;font-size:14px;line-height:1.5;background:rgba(0,169,244,.1);border:1px solid rgba(0,169,244,.35);color:#E6F6FE}
.qstatus.err{background:rgba(255,122,122,.1);border-color:rgba(255,122,122,.4);color:#FFE3E3}
.qstatus a,.qstatus button{color:var(--cyan);background:none;border:0;padding:0;font:inherit;text-decoration:underline;cursor:pointer}
@media (max-width:900px){
  .fgrid2{grid-template-columns:1fr}
  .qrow{grid-template-columns:1fr}
  .ficon-slot{display:none}
}


/* ================= DESIGN SYSTEM PASS ================= */
:root{--r-sm:8px;--r-md:12px;--ease:cubic-bezier(.2,.7,.2,1)}
/* one voice: no HUD, no crosshair */
.hud,.xh{display:none!important}
/* clean section labels (no code prefixes) */
.kk,.studio .k,.wall-label .k,.beat .kick{font:600 13px/1.2 var(--sans);letter-spacing:.01em;opacity:1;color:#B7C3CE;display:flex;align-items:center;gap:10px;text-transform:none}
.kk::before,.studio .k::before,.wall-label .k::before,.beat .kick::before{content:"";width:22px;height:2px;background:var(--cobalt-hi);flex:none}
.lt .kk{color:#3E5060}
.studio .k{color:rgba(255,255,255,.85);margin-bottom:2.4rem}
.meta div,.meta span,.nlab,.tcell .use,.footer,.fdirect span,.rnotes,.qhead span,.qto,.wall-label .k2,.pinfo .cat,.princ b{font-family:var(--sans)!important;letter-spacing:0}
.meta span,.nlab,.fdirect span,.qhead span,.qto,.wall-label .k2{font-size:13px;font-weight:600;text-transform:none}
.tcell .ix{display:none}
.tcell .use{font-size:14px;font-weight:500}
.pinfo .cat{font-size:13px;font-weight:600;text-transform:none;letter-spacing:.01em;opacity:.85}
.pinfo .tags span{font:500 12px var(--sans);border-radius:999px;padding:.45em .9em}
.princ b{font-size:14px;font-weight:700;text-transform:none;letter-spacing:0}
.scap b{display:none}
.scap span{font:500 15px/1.55 var(--sans)!important;max-width:52ch}
.rnotes{font-size:14px}
/* two-tone only where it earns it */
.clients .h2b .o,.about .h2b .o,.process .h2b .o,.rhead h2 span,.pintro h2 span+span{color:inherit}
/* radius tokens */
.tile .face{border-radius:10px}
.sframe,.rframe,.frame,.qform,.prcard,.vbg,.aphoto,.pdesk,.pback{border-radius:var(--r-md)}
.qf input,.qf select,.qf textarea{border-radius:var(--r-sm)}

/* hero: soft brand glow on navy */
.stage{background:radial-gradient(55% 45% at 50% 42%,rgba(27,72,236,.24),transparent 70%),var(--navy)}
@media (pointer:fine){.stage,.stage *{cursor:auto}.stage a,.stage button{cursor:pointer}}

/* boot: short + skippable */
.bskip{position:absolute;right:3.2vw;top:calc(22px + env(safe-area-inset-top,0px));background:none;border:1px solid rgba(255,255,255,.25);color:#fff;font:600 13px var(--sans);border-radius:999px;padding:.6em 1.1em;cursor:pointer}
.bskip:hover{background:#fff;color:var(--navy)}

/* navigation */
.nav{transition:background .35s,box-shadow .35s,opacity .6s;gap:2rem}
.nav.solid{background:rgba(5,28,44,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(255,255,255,.06)}
.nav.solid[data-v="o"]{background:rgba(255,255,255,.88);box-shadow:0 1px 0 rgba(5,28,44,.08)}
.nav.solid[data-v="m"]{background:rgba(5,28,44,.35)}
.nav[data-v="o"]{color:var(--navy)}
.nlinks{display:flex;gap:clamp(18px,2.2vw,34px);margin-left:auto}
.nlinks a,.nact .wa{font:500 15px var(--sans);text-decoration:none;opacity:.86;transition:opacity .2s}
.nlinks a:hover,.nact .wa:hover{opacity:1}
.nlinks a.on{opacity:1;box-shadow:0 2px 0 var(--cyan)}
.nact{display:flex;align-items:center;gap:18px}
.burger{display:none;width:44px;height:44px;border-radius:999px;border:1px solid currentColor;background:none;color:inherit;cursor:pointer;position:relative}
.burger i{position:absolute;left:13px;right:13px;height:1.5px;background:currentColor;transition:transform .3s}
.burger i:first-child{top:17px}.burger i:last-child{top:25px}
.mmenu{position:fixed;inset:0;z-index:90;background:var(--navy);color:#fff;display:flex;flex-direction:column;padding:calc(90px + env(safe-area-inset-top,0px)) 7vw calc(30px + env(safe-area-inset-bottom,0px));overflow:auto}
.mmenu[hidden]{display:none}
.mmenu .mclose{position:absolute;right:5vw;top:calc(18px + env(safe-area-inset-top,0px));width:44px;height:44px;border-radius:999px;border:1px solid rgba(255,255,255,.3);background:none;color:#fff;font-size:22px;cursor:pointer}
.mmenu nav a{display:block;font-weight:700;font-size:clamp(2rem,9vw,3.2rem);letter-spacing:-.03em;line-height:1.25;text-decoration:none;padding:.2em 0;border-bottom:1px solid rgba(255,255,255,.08)}
.mmenu .mfoot{margin-top:auto;padding-top:2rem;display:grid;gap:.5rem;font-size:15px;color:#B7C3CE}
.mmenu .mfoot a{color:#fff;text-decoration:none;font-weight:600}
.mmenu .micon{position:absolute;right:-8vw;bottom:10vh;width:46vw;max-width:260px;opacity:.12;pointer-events:none}
@media (max-width:980px){.nlinks,.nact .wa{display:none}.burger{display:inline-block}.nact .talk{display:none}}

/* mobile sticky action bar */
.mbar{display:none}
@media (max-width:720px){
  .mbar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;gap:10px;padding:10px 4vw calc(10px + env(safe-area-inset-bottom,0px));background:rgba(5,28,44,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transform:translateY(110%);transition:transform .35s var(--ease)}
  .mbar.on{transform:none}
  .mbar a{flex:1;text-align:center;justify-content:center}
}

/* fewer pinned scenes: services, revamp and process now scroll naturally */
.services{height:auto}
.sstage{position:relative;height:auto;padding:16vh calc(3.2vw + 30px) 16vh 5vw}
.revamp{height:auto}
.rstage{position:relative;height:auto;padding:16vh calc(3.2vw + 30px) 16vh 5vw}
.process{height:auto}
.prstage{position:relative;height:auto;padding:16vh 0 14vh}
.prtrack{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;padding:0 6vw;transform:none!important}
.prcard{width:auto;min-height:clamp(260px,34vh,340px);transition:border-color .5s,background .5s,transform .5s var(--ease)}
.prcard.on{transform:translateY(-6px)}
@media (max-width:900px){.prtrack{grid-template-columns:1fr}.prcard{min-height:0}.prcard h3{margin-top:1.4rem}.sstage,.rstage{padding:12vh 5vw}}

/* services icons */
.slist .ic{width:22px;height:22px;flex:none;color:inherit;opacity:.8}
.slist button{grid-template-columns:28px 1fr auto}
.slist li.on .ic{color:var(--cobalt);opacity:1}

/* unified project frames: same browser chrome on every project */
.pdesk,.pback{display:flex;flex-direction:column;background:#0B1B2B}
.pbar{flex:none;height:30px;display:flex;align-items:center;gap:7px;padding:0 12px;background:#101C2A;border-bottom:1px solid rgba(255,255,255,.06)}
.pbar i{width:9px;height:9px;border-radius:50%;background:#2B3A4A}
.pbar span{margin-left:10px;font:500 11px var(--sans);color:#8FA0AE}
.pdesk img,.pback img{flex:1;min-height:0;height:auto}

/* studio: icon-shaped window onto the work (brand motif) */
.studio-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:5vw;align-items:center}
.svis{position:relative;aspect-ratio:325/383;width:min(100%,420px);justify-self:end;clip-path:url(#bcIcon);-webkit-clip-path:url(#bcIcon);background:#0B2A3F}
.svis-track{position:absolute;left:0;right:0;top:0;display:flex;flex-direction:column;animation:svis 36s linear infinite}
.svis-track img{display:block;width:100%;aspect-ratio:1.5;object-fit:cover}
@keyframes svis{to{transform:translateY(-50%)}}
@media (prefers-reduced-motion:reduce){.svis-track{animation:none}}
@media (max-width:900px){.studio-grid{grid-template-columns:1fr}.svis{justify-self:start;width:62vw;margin-top:2rem}}

/* about photo slot */
.aphoto{font:600 14px var(--sans)}

/* mobile projects: swipe-free stacked cards instead of the pinned scene */
.pmobile{display:none}
@media (max-width:720px){
  .projects{height:auto!important}
  .pstage{display:none}
  .pmobile{display:block;background:var(--navy);padding:12vh 5vw 8vh}
  .pmobile h2{margin:1.2rem 0 2rem;font-weight:700;font-size:8.6vw;line-height:1.08;letter-spacing:-.03em}
  .pcard{margin-bottom:2.4rem}
  .pcard .pimg{border-radius:var(--r-md);overflow:hidden;aspect-ratio:1.5;border-top:4px solid var(--c)}
  .pcard img{width:100%;height:100%;object-fit:cover;display:block}
  .pcard h3{margin:1rem 0 .3rem;font-weight:700;font-size:1.5rem;letter-spacing:-.02em}
  .pcard .pc{font-size:13px;font-weight:600;color:#B7C3CE}
  .pcard p{font-size:15px;line-height:1.5;color:#B7C3CE;margin:.6rem 0 1rem}
  .journey{height:640vh}
  .build{height:560vh}
}

/* richer footer */
.footer{grid-template-columns:1.3fr repeat(4,1fr);padding:7vh 6vw 3vh;font:500 14px/1.9 var(--sans)}
.footer b{font:700 13px var(--sans);margin-bottom:.6rem}
.footer .social{display:flex;gap:10px;margin-top:1rem}
.footer .social a{width:36px;height:36px;border-radius:999px;border:1px solid rgba(5,28,44,.2);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.fbottom{grid-column:1/-1;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;border-top:1px solid rgba(5,28,44,.12);margin-top:3vh;padding-top:1.4rem;font-size:13px}
.fbottom nav{display:flex;gap:1.4rem}.fbottom a{display:inline}
@media (max-width:900px){.footer{grid-template-columns:1fr 1fr}.footer>div:first-child{grid-column:1/-1}}
.qconsent{margin:0;font-size:12px;color:var(--dim)}
.qconsent a{color:#C9D3DC}


/* ================= ROUND 6 ================= */
/* studio: white intro built around a team photo */
.studio,.cut{background:#FFFFFF}
.studio{color:var(--navy);padding:18vh 6vw 16vh}
.studio .k{color:#3E5060}
.st-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:5vw;align-items:end}
.studio .statement{font-size:clamp(1.8rem,3.3vw,3.7rem);max-width:none}
.studio .statement .w{color:rgba(5,28,44,.16)}
.studio .statement .w.on{color:var(--navy)}
.st-side p{margin:0 0 1.6rem;font-size:clamp(15px,1.15vw,18px);line-height:1.6;color:#3E5060;max-width:42ch}
.st-photo{position:relative;margin:10vh 0 0;padding:0 0 0 0}
.st-block{position:absolute;right:-6vw;top:-5vh;width:38%;height:62%;background:var(--cobalt)}
.st-img{position:relative;aspect-ratio:2.2;border-radius:var(--r-md);overflow:hidden;background:
  radial-gradient(80% 120% at 30% 20%,#E9EEF5,transparent 60%),repeating-linear-gradient(135deg,#EEF1F5 0 14px,#E6EAF0 14px 28px);display:flex;align-items:center;justify-content:center;transform-origin:50% 60%}
.st-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.st-ph{text-align:center;font-size:14px;color:#6A7A88}
.st-ph b{display:block;font-size:18px;color:var(--navy);margin-bottom:6px}
.st-facts{position:absolute;left:2.4vw;bottom:-6vh;display:grid;grid-template-columns:repeat(3,auto);gap:0;background:#fff;border-radius:var(--r-md);box-shadow:0 30px 60px -30px rgba(5,28,44,.35),0 0 0 1px rgba(5,28,44,.06)}
.st-facts div{padding:22px 30px;font-size:16px;font-weight:600;color:var(--navy)}
.st-facts div+div{border-left:1px solid rgba(5,28,44,.1)}
.st-facts span{display:block;font-size:12px;font-weight:600;color:#6A7A88;margin-bottom:4px}
@media (max-width:900px){
  .st-grid{grid-template-columns:1fr;gap:2rem}
  .st-block{display:none}
  .st-img{aspect-ratio:1.4}
  .st-facts{position:relative;left:auto;bottom:auto;grid-template-columns:1fr;margin-top:-28px;margin-left:5vw;margin-right:5vw}
  .st-facts div+div{border-left:0;border-top:1px solid rgba(5,28,44,.1)}
}

/* build sequence: proper device line-up */
.frame{overflow:visible;background:transparent;box-shadow:none}
.frame .fbody{background:#fff}
.fdesk .fbar,.ftab .fbar{background:#ECEFF3;color:#5B6B79;border-bottom:1px solid #DDE2E8;border-radius:12px 12px 0 0;height:30px}
.fdesk .fbar .dots i:nth-child(1),.ftab .fbar .dots i:nth-child(1){background:#FF5F57}
.fdesk .fbar .dots i:nth-child(2),.ftab .fbar .dots i:nth-child(2){background:#FEBC2E}
.fdesk .fbar .dots i:nth-child(3),.ftab .fbar .dots i:nth-child(3){background:#28C840}
.fbar .furl{background:#fff;color:#3E5060;border:1px solid #DDE2E8}
.fdesk .fbody{border-radius:0 0 12px 12px;box-shadow:0 50px 100px -40px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.12)}
.fdesk .fbar{box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.ftab{border:7px solid #0B0D12;border-radius:20px;background:#0B0D12;box-shadow:0 40px 80px -30px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.14)}
.ftab .fbar{border-radius:12px 12px 0 0;height:22px}.ftab .fbar .dots{display:none}
.ftab .fbody{top:22px;border-radius:0 0 12px 12px}
.fmob{border:6px solid #0B0D12;border-radius:26px;background:#0B0D12;box-shadow:0 40px 80px -30px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.14)}
.fmob .fbody{border-radius:20px;top:0}
.fmob::before{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);width:32%;height:9px;border-radius:99px;background:#0B0D12;z-index:3}
.frame::after{content:attr(data-label);position:absolute;left:-20%;right:-20%;top:calc(100% + 16px);text-align:center;font:600 12px var(--sans);color:#8FA0AE;opacity:var(--lab,0);white-space:nowrap}
.frame.live .fbody{box-shadow:0 0 0 2px #5BE39A,0 0 60px rgba(91,227,154,.3)}
.frame.live{box-shadow:none}
/* mini site upgrade */
.site{background:#fff}
.s-nav{border-bottom:1px solid #EEF1F4}
.s-logo::before{content:"";display:inline-block;width:.8em;height:.8em;border-radius:.2em;background:#1B48EC;margin-right:.35em;vertical-align:-.05em}
.s-btn{font-family:var(--sans)}
.s-img{background:linear-gradient(135deg,#051C2C 0%,#1B48EC 60%,#00A9F4 100%)}
.s-img i:first-child{background:rgba(255,255,255,.92);width:40%;height:auto;aspect-ratio:1.6;border-radius:1.4cqw;right:10%;top:18%;box-shadow:0 2cqw 4cqw -1cqw rgba(0,0,0,.35)}
.s-img i:last-child{background:rgba(0,169,244,.35);width:30cqw;height:30cqw;left:-10%;bottom:-40%}
.s-card i{border-radius:50%}
.score b{font-family:var(--sans)}
.score{font-family:var(--sans);font-size:12px}

/* numbers: tighter */
.nlab{font-size:14px!important;color:rgba(255,255,255,.85)}

/* clients: 18-cell grid */
.cgrid{grid-template-columns:repeat(6,1fr)}
.cl{min-height:clamp(96px,13vh,150px)}
.cl.ph span{font:500 12px var(--sans);color:#A3ADB7;border:1px dashed #CBD2D9;border-radius:8px;padding:.65em 1em}
@media (max-width:900px){.cgrid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.cgrid{grid-template-columns:repeat(2,1fr)}}

/* reviews */
.voices{display:block;min-height:0}
.rv-head{display:flex;justify-content:space-between;align-items:flex-end;gap:3rem;flex-wrap:wrap}
.rv-score{display:flex;align-items:center;gap:18px;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:var(--r-md);padding:18px 24px}
.rv-num{font-size:3.2rem;font-weight:700;letter-spacing:-.03em;line-height:1}
.rv-score .stars{color:#FBBC04;font-size:20px;letter-spacing:2px}
.rv-score span{font-size:14px;color:#B7C3CE}
.rv-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:6vw;margin:7vh -6vw 0;padding:4px 6vw 10px;scrollbar-width:none;outline:none}
.rv-track::-webkit-scrollbar{display:none}
.rv-card{flex:none;width:min(380px,82vw);scroll-snap-align:start;background:#fff;color:var(--navy);border-radius:var(--r-md);padding:24px;display:flex;flex-direction:column;gap:14px}
.rv-top{display:flex;align-items:center;gap:12px}
.rv-av{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;flex:none}
.rv-top b{display:block;font-size:15px}.rv-top small{font-size:13px;color:#6A7A88}
.rv-card .stars{color:#FBBC04;font-size:16px;letter-spacing:1px}
.rv-card p{margin:0;font-size:15px;line-height:1.6;color:#2B3D4C;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.rv-src{margin-top:auto;font-size:12px;font-weight:600;color:#6A7A88}
.rv-foot{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:3vh}
.rv-nav{display:flex;gap:10px}
.rv-nav button{width:50px;height:50px;border-radius:999px;border:1px solid var(--line);background:none;color:#fff;font-size:18px;cursor:pointer}
.rv-nav button:hover{background:var(--cobalt);border-color:var(--cobalt)}
.rv-cta{display:flex;gap:10px;flex-wrap:wrap}


/* ================= team video ================= */
.avid-wrap{position:relative;justify-self:center;width:min(100%,360px)}
.avid-block{position:absolute;right:-28px;top:-28px;width:70%;height:55%;background:var(--cobalt);border-radius:var(--r-md)}
.avid{position:relative;margin:0;aspect-ratio:9/16;border-radius:var(--r-md);overflow:hidden;background:#0B2A3F;box-shadow:0 40px 80px -30px rgba(5,28,44,.5)}
.avid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.avid-play{white-space:nowrap;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.95);color:var(--navy);border:0;border-radius:999px;padding:12px 18px 12px 12px;font:600 14px var(--sans);cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.25);transition:transform .25s var(--ease)}
.avid-play:hover{transform:translate(-50%,-50%) scale(1.05)}
.pi{width:30px;height:30px;border-radius:50%;background:var(--cobalt);position:relative;flex:none}
.pi::after{content:"";position:absolute;left:12px;top:9px;border-left:9px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent}
.avid figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 18px 16px;background:linear-gradient(transparent,rgba(5,28,44,.85));color:#fff;font-size:13px}
.avid figcaption b{display:block;font-size:17px}
@media (max-width:900px){.avid-wrap{margin-top:5vh;width:min(78vw,340px)}.avid-block{right:-16px;top:-16px}}

.vbub{position:fixed;left:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:55;transition:opacity .35s,transform .35s var(--ease)}
.vbub.off{opacity:0;transform:translateY(16px) scale(.9);pointer-events:none}
.vbub-open{display:block;position:relative;width:92px;height:92px;border-radius:50%;padding:0;border:3px solid #fff;overflow:visible;cursor:pointer;background:#0B2A3F;box-shadow:0 0 0 3px var(--cobalt),0 16px 40px rgba(5,28,44,.45)}
.vbub-open video{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.vbub-tag{position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);white-space:nowrap;background:#fff;color:var(--navy);font:600 13px var(--sans);padding:8px 12px;border-radius:999px;box-shadow:0 8px 24px rgba(5,28,44,.25)}
.vbub-x{position:absolute;right:-6px;top:-6px;width:26px;height:26px;border-radius:50%;border:0;background:var(--navy);color:#fff;font-size:15px;line-height:1;cursor:pointer;box-shadow:0 0 0 2px #fff}
@media (max-width:720px){.vbub{bottom:calc(84px + env(safe-area-inset-bottom,0px));left:14px}.vbub-open{width:74px;height:74px}.vbub-tag{display:none}}

.vmodal{position:fixed;inset:0;z-index:95;background:rgba(5,28,44,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:4vh 4vw}
.vmodal[hidden]{display:none}
.vbox{position:relative;width:min(420px,100%);max-height:92vh;display:flex;flex-direction:column;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 40px 120px rgba(0,0,0,.5)}
.vbox video{width:100%;aspect-ratio:9/16;max-height:calc(92vh - 76px);background:#000;display:block;object-fit:contain}
.vfoot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;color:var(--navy)}
.vfoot b{display:block;font-size:15px}.vfoot span{font-size:13px;color:#5B6B79}
.vclose{position:absolute;right:10px;top:10px;z-index:2;width:40px;height:40px;border-radius:50%;border:0;background:rgba(5,28,44,.7);color:#fff;font-size:22px;cursor:pointer}

.aphoto{display:none!important}
.rv-stars{position:relative;display:block;width:max-content;font-size:22px!important;margin-bottom:4px;color:rgba(251,188,4,.25)!important}
.rv-stars .fill{position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap;color:#FBBC04}
.rv-topics{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:4vh;font-size:13px;color:#B7C3CE}
.rv-topics b{font-weight:600;color:#fff;border:1px solid var(--line);border-radius:999px;padding:.45em .9em}
.rv-track{margin-top:3vh}


/* ================= PRODUCTION ADDITIONS ================= */
.nav .mark{flex:none}
.pwr{display:flex;flex-direction:column;justify-content:center;margin-left:14px;padding-left:14px;border-left:1px solid currentColor;border-color:color-mix(in srgb,currentColor 30%,transparent);font:500 10px/1.25 var(--sans);letter-spacing:.02em;opacity:.78;white-space:nowrap;margin-right:auto}
.pwr b{font-weight:700;font-size:11px}
@media (max-width:420px){.pwr{margin-left:10px;padding-left:10px;font-size:9px}.pwr b{font-size:10px}}
.mpwr{font-size:13px;color:#8FA0AE}
.fpwr{display:block;margin:-.4rem 0 .8rem;font-size:12px;color:#5B6B79}.fpwr b{color:var(--navy)}
.footer address{font-style:normal}
.footer address span{display:block;max-width:30ch;line-height:1.6}
.fbh{font-weight:800;font-size:clamp(2.4rem,7vw,7rem);line-height:.95;letter-spacing:-.03em;text-align:center;padding:0 6vw}
/* services: static descriptions under each item */
.slist .sd{margin:0;max-height:0;overflow:hidden;opacity:0;font-size:15px;line-height:1.55;color:#3E5060;padding-left:42px;transition:max-height .4s var(--ease),opacity .3s,padding .3s}
.slist li.on .sd{max-height:6em;opacity:1;padding-bottom:14px}
.scap{display:none}
/* tech headings */
.tcell .nm{margin:0}
/* clients list */
ul.cgrid{list-style:none;margin:8vh 0 0;padding:0;grid-template-columns:repeat(5,1fr)}
.cl b{font-family:var(--sans);font-weight:700;letter-spacing:-.01em;font-size:clamp(15px,1.35vw,21px)}
.cl b.sf{font-family:Georgia,"Times New Roman",serif;font-weight:600;letter-spacing:0}
.cl.clnext{grid-column:1/-1;min-height:84px;background:var(--cobalt)}
.cl.clnext a{color:#fff;text-decoration:none;font:600 16px var(--sans)}
.cl.clnext:hover{background:var(--navy)}
@media (max-width:900px){ul.cgrid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){ul.cgrid{grid-template-columns:repeat(2,1fr)}}
/* faq headings */
.qh{margin:0;font:inherit}
/* reviews */
.rv-sub{margin:.8rem 0 0;font-size:16px;color:#B7C3CE}
.rillus{margin:.6rem 0 0;font-size:12px;color:#6A7A88}
/* team photo */
.st-img{background:#E6EAF0}
.st-img img{object-position:50% 40%}
/* skip link */
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:#fff;color:var(--navy);padding:10px 16px;border-radius:999px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}