/* Backstage — shared styles. Layout: full-width chapters on deep navy, each opened by a short drawn line; rounded surfaces, no hard rules. */
:root{
  /* Backstage palette (from the brand template) */
  --bg:#28264D; --surface:#302E59; --raised:#3B3970; --line:#48468C;
  --ink:#F7F8FA; --muted:#B4C1CC; --faint:#96A9B3; --accent:#6695F2; --on-accent:#1C1A3A;
  --brand:#D22D67; --sky:#47BDFF; --ice:#9BDAF2; --pink:#F2A7D8; --red:#F25260;
  --display:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --gut:clamp(16px,4.5vw,65px); --r-lg:32.4px; --r-md:21.6px;
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}
html{scroll-behavior:smooth}
html,body{background:var(--bg);color:var(--ink)}
body{font-family:var(--body);font-size:15.3px;line-height:1.55;margin:0;overflow-x:clip}
a{color:inherit;text-decoration:none}
img{max-width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:2.7px;border-radius:7.2px}
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.035em;line-height:1.02;margin:0;text-wrap:balance}
p{margin:0}
.wrap{padding-inline:var(--gut);max-width:1296px;margin-inline:auto;box-sizing:border-box}
.eyebrow{font-size:11px;font-weight:600;letter-spacing:2.7px;text-transform:uppercase;color:var(--ice);display:flex;align-items:center;gap:12.6px}
.eyebrow::before{display:none}
.muted{color:var(--muted)}
.ph{color:var(--faint);font-style:italic}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:43.2px;padding:0 23.4px;border-radius:899.1px;font-weight:500;font-size:14.4px;border:0;cursor:pointer;font-family:inherit;transition:transform .35s var(--ease),background .3s;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn.pri{background:var(--accent);color:var(--on-accent)}
.btn.sec{background:var(--raised);color:var(--ink)}
.btn.light{background:var(--ink);color:var(--on-accent)}
.arrow{display:inline-flex;align-items:center;gap:7.2px;color:var(--accent);font-weight:500;min-height:40px}
.arrow span{transition:transform .3s var(--ease)}.arrow:hover span{transform:translateX(3.6px)}

/* nav */
.nav{position:fixed;left:0;right:0;top:0;z-index:40;padding-top:env(safe-area-inset-top,0px);transition:transform .45s var(--ease),background .4s}
.nav.solid{background:rgba(40,38,77,.88);backdrop-filter:blur(12.6px);-webkit-backdrop-filter:blur(12.6px)}
.nav.hide{transform:translateY(-110%)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:68.4px}
.mark{display:inline-flex;align-items:center;min-height:44px}.mark img{display:block;height:auto;width:clamp(120px,11vw,155px)}
.foot .mark img{width:130px}
.nav nav{display:flex;align-items:center;gap:clamp(12.6px,2.7vw,34.2px);font-size:13.5px}
.nav nav a.lk{color:var(--muted);transition:color .2s;position:relative;padding-block:7.2px}
.nav nav a.lk:hover,.nav nav a.lk[aria-current="page"]{color:var(--ink)}
.nav nav a.lk[aria-current="page"]::after{content:"";position:absolute;left:50%;bottom:-2px;width:5.4px;height:5.4px;margin-left:-2.7px;border-radius:50%;background:var(--brand)}
.menu-btn{display:none;border:0;background:var(--raised);color:var(--ink);width:43.2px;height:43.2px;border-radius:50%;cursor:pointer;align-items:center;justify-content:center}
.mnav{position:fixed;inset:0;z-index:39;background:var(--bg);display:flex;flex-direction:column;justify-content:center;gap:7.2px;padding:86.4px var(--gut) 36px;box-sizing:border-box;clip-path:circle(0% at calc(100% - 36px) 36px);transition:clip-path .7s var(--ease);visibility:hidden}
.mnav.open{clip-path:circle(150% at calc(100% - 36px) 36px);visibility:visible}
.mnav a{font-family:var(--display);font-weight:700;font-size:clamp(36px,9.9vw,57.6px);letter-spacing:-.03em;line-height:1.15}
.mnav small{margin-top:25.2px;color:var(--muted);font-size:12.6px}
@media (max-width:760px){.nav nav a.lk,.nav nav .btn{display:none}.menu-btn{display:inline-flex}}

/* page hero */
.phero{padding-top:calc(135px + env(safe-area-inset-top,0px));padding-bottom:clamp(50.4px,9vh,99px);position:relative}
.phero .wrap{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(21.6px,4.5vw,72px);align-items:end}
.phero h1{font-size:clamp(39.6px,5.94vw,93.6px);line-height:.96;letter-spacing:-.04em}
.phero .intro{display:flex;flex-direction:column;gap:19.8px}
.phero .intro p{font-size:clamp(15.3px,1.35vw,18.9px);color:var(--muted);max-width:48ch}
.phero svg.art{width:100%;height:auto;max-height:306px}
@media (max-width:900px){.phero .wrap{grid-template-columns:minmax(0,1fr)}.phero svg.art{max-height:198px}}

/* drawn line art */
.draw path,.draw line,.draw rect,.draw polyline{fill:none;stroke:var(--ice);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.8s var(--ease)}
.draw .g{stroke:var(--line);stroke-width:1}
.draw.in path,.draw.in line,.draw.in rect,.draw.in polyline{stroke-dashoffset:0}

/* chapters */
section.ch{padding-block:clamp(72px,13vh,135px)}
section.ch.tight{padding-top:0}
.ch-head{display:flex;flex-direction:column;gap:19.8px;max-width:738px}
.ch-head h2{font-size:clamp(36px,5.4vw,79.2px)}
.ch-head p{color:var(--muted);font-size:clamp(15.3px,1.35vw,18px);max-width:52ch}
.ch-top{display:flex;justify-content:space-between;align-items:flex-end;gap:21.6px;flex-wrap:wrap}
.rv{transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.pre{opacity:0;transform:translateY(36px)}
.rv.pre .eyebrow::before{--draw:0}

/* 3D build (home) */
.track{height:640vh;position:relative}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.stage canvas{display:block;width:100%;height:100%}
.cap{position:absolute;left:var(--gut);bottom:calc(clamp(21.6px,7vh,64.8px) + env(safe-area-inset-bottom,0px));max-width:min(558px,calc(100% - 2*var(--gut)));display:flex;flex-direction:column;gap:14.4px;pointer-events:none}
.cap h1{font-size:clamp(34.2px,5.4vw,82.8px);line-height:.98;letter-spacing:-.035em}
.cap p{color:var(--muted);font-size:clamp(13.5px,1.22vw,17.1px);max-width:44ch}
.cap .ctas{display:flex;gap:10.8px;flex-wrap:wrap;pointer-events:auto}
.cap .swap{transition:opacity .35s ease,transform .35s ease}
.cap.out .swap{opacity:0;transform:translateY(10.8px)}
.rail{position:absolute;right:clamp(10.8px,3vw,36px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:3.6px}
.rail button{all:unset;cursor:pointer;display:flex;align-items:center;gap:10.8px;justify-content:flex-end;min-height:32.4px;padding:0 5.4px;border-radius:899.1px;color:var(--muted);font-size:11.7px}
.rail button span{opacity:0;transition:opacity .25s}
.rail button:hover span,.rail button.on span,.rail button:focus-visible span{opacity:1}
.rail i{width:8.1px;height:8.1px;border-radius:50%;background:var(--line);transition:background .3s,transform .3s}
.rail button.on{color:var(--ink)}.rail button.on i{background:var(--accent);transform:scale(1.5)}
.rail button:focus-visible{outline:2px solid var(--accent)}
.swatch{position:absolute;right:clamp(10.8px,3vw,36px);bottom:calc(clamp(21.6px,7vh,64.8px) + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:9px;padding:9px 12.6px;border-radius:899.1px;background:var(--surface);transition:opacity .5s,transform .5s}
.swatch.off{opacity:0;transform:translateY(9px);pointer-events:none}
.swatch small{font-size:11px;color:var(--muted);letter-spacing:1.5px}
.swatch button{all:unset;cursor:pointer;width:25.2px;height:25.2px;border-radius:50%}
.swatch button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--surface),0 0 0 3.6px var(--ink)}
.swatch button:focus-visible{outline:2px solid var(--accent);outline-offset:2.7px}
.scrollcue{position:absolute;left:50%;bottom:16.2px;width:2px;height:43.2px;border-radius:2px;background:linear-gradient(var(--accent),transparent);transform-origin:top;animation:cue 2s ease-in-out infinite;transition:opacity .4s}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:760px){
  .rail{top:calc(72px + env(safe-area-inset-top,0px));transform:none;flex-direction:row;right:auto;left:var(--gut)}
  .rail button{min-width:23.4px;min-height:40px;justify-content:center;padding:0}.rail button span{display:none}
  .swatch{bottom:auto;top:calc(115.2px + env(safe-area-inset-top,0px));left:var(--gut);right:auto}
  .scrollcue{display:none}
}

/* service cards */
.svc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16.2px;margin-top:57.6px}
.svc article{min-width:0;background:var(--surface);border-radius:var(--r-lg);padding:30.6px 27px 27px;display:flex;flex-direction:column;gap:16.2px;transition:background .4s,transform .5s var(--ease)}
.svc article:hover{background:var(--raised);transform:translateY(-5.4px)}
.svc svg{width:100%;height:135px}
.svc h3{font-size:24.3px}
.svc p{color:var(--muted)}
.svc .arrow{margin-top:auto}
@media (max-width:980px){.svc{grid-template-columns:minmax(0,1fr)}}
.dots{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8.1px;font-size:14.4px}
.dots li{display:flex;gap:10.8px;align-items:baseline}.dots li::before{content:"";flex:none;width:5.4px;height:5.4px;border-radius:50%;background:var(--accent);transform:translateY(-2px)}

/* reasons */
.why{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(28.8px,5.4vw,86.4px);align-items:start}
.why .ch-head{position:sticky;top:108px}
.reasons{display:flex;flex-direction:column;gap:12.6px}
.reason{background:var(--surface);border-radius:var(--r-md);padding:25.2px 27px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:7.2px 19.8px}
.reason b{grid-row:span 2;font-family:var(--display);font-weight:800;font-size:36px;line-height:1;color:var(--accent);min-width:57.6px;font-variant-numeric:tabular-nums}
.reason h3{font-size:21.6px}
.reason p{color:var(--muted)}
.reason.quiet b{font-size:19.8px;color:var(--muted);padding-top:5.4px}
@media (max-width:900px){.why{grid-template-columns:minmax(0,1fr)}.why .ch-head{position:static}}

/* work cards */
.work-h{height:300vh;position:relative}
.work-h .pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:36px}
.strip{display:flex;gap:19.8px;padding-inline:var(--gut);will-change:transform}
.strip .card{flex:none;width:min(504px,78vw)}
.grid-work{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:19.8px}
.grid-work .card:nth-child(3n+1){grid-column:span 2;aspect-ratio:16/8}
@media (max-width:760px){.grid-work{grid-template-columns:minmax(0,1fr)}.grid-work .card:nth-child(3n+1){grid-column:auto;aspect-ratio:4/3.1}}
.card{aspect-ratio:4/3.1;max-width:100%;border-radius:var(--r-lg);background:var(--surface);position:relative;overflow:hidden;display:block;transition:transform .6s var(--ease),opacity .4s}
.card.dim{opacity:.22}
.card .lines{position:absolute;inset:0;width:100%;height:100%}
.card .lines path{fill:none;stroke:var(--ice);stroke-width:1.4;stroke-linejoin:round;opacity:.9}
.card .photo{position:absolute;inset:0;background:var(--raised);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:12.6px;clip-path:inset(0 100% 0 0 round var(--r-lg));transition:clip-path 1s var(--ease)}
.card:hover .photo,.card:focus-visible .photo{clip-path:inset(0 0 0 0 round var(--r-lg))}
.card .tag{position:absolute;left:21.6px;top:21.6px;padding:7.2px 12.6px;border-radius:899.1px;background:var(--bg);font-size:11.7px;z-index:2}
.card .meta{position:absolute;left:21.6px;right:21.6px;bottom:21.6px;display:flex;justify-content:space-between;align-items:flex-end;gap:10.8px;z-index:2}
.card .meta strong{display:block;font-family:var(--display);font-size:clamp(19.8px,1.98vw,27px);font-weight:700;letter-spacing:-.02em}
.card .meta span{font-size:12.6px;color:var(--muted)}
.card .go{flex:none;width:46.8px;height:46.8px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;transition:transform .4s var(--ease)}
.card:hover .go{transform:rotate(-45deg)}
.filters{display:flex;gap:7.2px;flex-wrap:wrap}
.filters button{border:0;cursor:pointer;font-family:inherit;min-height:40px;padding:0 18px;border-radius:899.1px;background:var(--raised);color:var(--ink);font-size:13.5px;transition:background .3s,color .3s}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--on-accent)}
.work-foot{display:flex;align-items:center;gap:14.4px;flex-wrap:wrap;font-size:11px;letter-spacing:2px;color:var(--muted)}
.prog{width:198px;max-width:40vw;height:5.4px;border-radius:899.1px;background:var(--raised);overflow:hidden}.prog b{display:block;height:100%;width:0;background:var(--ink);border-radius:899.1px}

/* capabilities */
.caps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(216px,100%),1fr));gap:12.6px;margin-top:50.4px}
.cap-i{background:var(--surface);border-radius:var(--r-md);padding:23.4px;display:flex;flex-direction:column;gap:9px;min-width:0}
.cap-i h3{font-size:18px;letter-spacing:-.01em}
.cap-i p{color:var(--muted);font-size:13.5px}
.flow{margin-top:39.6px;display:flex;align-items:center;gap:16.2px;flex-wrap:wrap;font-family:var(--display);font-size:clamp(18px,2.16vw,28.8px);font-weight:700}
.flow i{width:clamp(36px,8vw,108px);height:2px;border-radius:2px;background:var(--accent)}

/* service detail blocks */
.svc-block{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(25.2px,5.4vw,86.4px);align-items:center;scroll-margin-top:81px}
.svc-block+.svc-block{margin-top:clamp(72px,12vh,126px)}
.svc-block:nth-child(even) .art-box{order:-1}
.svc-block .txt{display:flex;flex-direction:column;gap:19.8px}
.svc-block h2{font-size:clamp(32.4px,4.14vw,57.6px)}
.svc-block .txt>p{color:var(--muted);font-size:17.1px;max-width:48ch}
.art-box{background:var(--surface);border-radius:36px;aspect-ratio:5/4;max-width:100%;display:flex;align-items:center;justify-content:center;padding:clamp(18px,3.6vw,43.2px);box-sizing:border-box}
.art-box svg{width:100%;height:100%}
.btns{display:flex;gap:10.8px;flex-wrap:wrap}
@media (max-width:900px){.svc-block{grid-template-columns:minmax(0,1fr)}.svc-block:nth-child(even) .art-box{order:0}}

/* workshop */
.shop{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(25.2px,4.5vw,64.8px);align-items:center;scroll-margin-top:81px}
.film{aspect-ratio:4/3;max-width:100%;border-radius:36px;background:var(--raised);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12.6px;color:var(--muted);font-size:12.6px;text-align:center;padding:21.6px;box-sizing:border-box}
.film .play{width:61.2px;height:61.2px;border-radius:50%;background:var(--ink);display:flex;align-items:center;justify-content:center}
.film .loc{position:absolute;left:21.6px;bottom:21.6px;padding:9px 14.4px;border-radius:899.1px;background:var(--bg);color:var(--ink)}
.facts{display:flex;flex-direction:column;gap:9px;margin-top:25.2px}
.facts div{background:var(--surface);border-radius:18px;padding:14.4px 18px}
@media (max-width:900px){.shop{grid-template-columns:minmax(0,1fr)}}

/* about */
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(25.2px,4.5vw,72px)}
.two p{color:var(--muted);font-size:17.1px;max-width:54ch}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12.6px;margin-top:50.4px}
.step{background:var(--surface);border-radius:var(--r-md);padding:23.4px;display:flex;flex-direction:column;gap:9px;min-width:0}
.step h3{font-size:23.4px}.step p{color:var(--muted);font-size:13.5px}
.step small{color:var(--accent);font-size:11px;letter-spacing:2px}
.details{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(216px,100%),1fr));gap:12.6px;margin-top:36px}
.details div{background:var(--surface);border-radius:var(--r-md);padding:19.8px 21.6px;display:flex;flex-direction:column;gap:5.4px}
.details small{font-size:11px;letter-spacing:2px;color:var(--muted);text-transform:uppercase}
@media (max-width:900px){.two{grid-template-columns:minmax(0,1fr)}.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.steps{grid-template-columns:minmax(0,1fr)}}

/* project page */
.pmeta{display:flex;flex-wrap:wrap;gap:9px;margin-top:30.6px}
.pmeta div{background:var(--surface);border-radius:18px;padding:12.6px 18px;display:flex;flex-direction:column;gap:2px;min-width:0}
.pmeta small{font-size:11px;letter-spacing:2px;color:var(--muted);text-transform:uppercase}
.pmedia{position:relative;border-radius:36px;overflow:hidden;background:var(--surface);aspect-ratio:16/8;max-width:100%}
.pmedia svg{position:absolute;inset:0;width:100%;height:100%}
.pmedia .photo{position:absolute;inset:0;background:var(--raised);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:13.5px;clip-path:inset(0 100% 0 0);transition:clip-path 1.6s var(--ease) .9s}
.pmedia.in .photo{clip-path:inset(0 0 0 0)}
.story{display:flex;flex-direction:column;gap:clamp(43.2px,8vh,79.2px)}
.story-row{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(18px,4.5vw,72px)}
.story-row h2{font-size:clamp(25.2px,2.7vw,36px)}
.story-row p{font-size:17.1px;color:var(--muted);max-width:60ch}
@media (max-width:760px){.story-row{grid-template-columns:minmax(0,1fr)}}
.quote{background:var(--surface);border-radius:var(--r-lg);padding:clamp(25.2px,4.5vw,50.4px);display:flex;flex-direction:column;gap:16.2px}
.quote blockquote{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(21.6px,2.7vw,36px);line-height:1.15;letter-spacing:-.02em}
.gal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12.6px}
.gal div{aspect-ratio:1;border-radius:var(--r-md);background:var(--surface);display:flex;align-items:center;justify-content:center;color:var(--faint);font-size:11.7px;max-width:100%}
.gal div:first-child{grid-column:span 2;aspect-ratio:auto}
@media (max-width:640px){.gal{grid-template-columns:minmax(0,1fr)}.gal div:first-child{grid-column:auto;aspect-ratio:1}}
.next{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;background:var(--surface);border-radius:var(--r-lg);padding:clamp(21.6px,3.6vw,39.6px);transition:background .4s}
.next:hover{background:var(--raised)}
.next strong{font-family:var(--display);font-size:clamp(25.2px,3.6vw,46.8px);letter-spacing:-.03em}

/* contact */
.contact{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28.8px,5.4vw,86.4px);align-items:start}
form{display:flex;flex-direction:column;gap:27px}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:25.2px}
.fld{display:flex;flex-direction:column;gap:5.4px;font-size:11.7px;color:var(--muted);position:relative}
.fld input,.fld textarea{background:transparent;border:0;color:var(--ink);font:inherit;font-size:18px;padding:9px 0;outline:none;resize:none}
.fld::after{content:"";height:2px;border-radius:2px;background:var(--line)}
.fld::before{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;border-radius:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.fld:focus-within::before{transform:scaleX(1)}
.fld input::placeholder,.fld textarea::placeholder{color:var(--faint)}
fieldset{border:0;margin:0;padding:0;display:flex;flex-direction:column}
legend{font-size:11.7px;color:var(--muted);padding:0;margin-bottom:10.8px}
.chips{display:flex;gap:9px;flex-wrap:wrap}
.chips label{cursor:pointer;position:relative}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips span{display:inline-flex;align-items:center;min-height:40px;padding:0 16.2px;border-radius:899.1px;background:var(--raised);font-size:13.5px;transition:background .3s,color .3s}
.chips input:checked+span{background:var(--ink);color:var(--on-accent)}
.chips input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2.7px}
.note{font-size:11.7px;color:var(--muted)}
.direct{display:flex;flex-direction:column;gap:9px;margin-top:9px}
.direct div{background:var(--surface);border-radius:18px;padding:14.4px 18px;display:flex;flex-direction:column;gap:2px}
.direct small{font-size:11px;letter-spacing:2px;color:var(--muted);text-transform:uppercase}
.thanks{background:var(--surface);border-radius:var(--r-lg);padding:36px;display:flex;flex-direction:column;gap:12.6px}
.thanks svg path{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:dr 1s .1s var(--ease) forwards}
@keyframes dr{to{stroke-dashoffset:0}}
@media (max-width:900px){.contact{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){.row2{grid-template-columns:minmax(0,1fr)}}

/* closing CTA + footer */
.closer{background:var(--surface);border-radius:43.2px;padding:clamp(36px,6.3vw,86.4px);display:grid;grid-template-columns:minmax(0,1.3fr) auto;gap:28.8px;align-items:end;position:relative;overflow:hidden}
.closer h2{font-size:clamp(36px,5.4vw,79.2px)}
.closer p{color:var(--muted);font-size:17.1px;margin-top:16.2px;max-width:46ch}
.closer svg{position:absolute;left:0;right:0;top:50%;width:100%;height:3.6px;pointer-events:none;opacity:.35}
@media (max-width:760px){.closer{grid-template-columns:minmax(0,1fr)}}
footer{padding-block:25.2px calc(25.2px + env(safe-area-inset-bottom,0px))}
.foot{display:flex;flex-wrap:wrap;gap:16.2px 28.8px;align-items:center;justify-content:space-between;font-size:12.6px;color:var(--muted);padding-inline:5.4px}
.foot nav{display:flex;gap:21.6px;flex-wrap:wrap}.foot nav a{min-height:40px;display:inline-flex;align-items:center}.foot nav a:hover{color:var(--ink)}

/* cursor node */
.node{position:fixed;left:0;top:0;width:12.6px;height:12.6px;margin:-6.3px 0 0 -6.3px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 7.2px rgba(210,45,103,.18);pointer-events:none;z-index:50;opacity:0;transition:opacity .3s,width .3s,height .3s,margin .3s}
@media (hover:none){.node{display:none}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv,.rv.pre{opacity:1;transform:none;transition:none}
  .cap .swap,.card .photo,.svc article,.mnav,.pmedia .photo{transition:none}
  .draw path,.draw line,.draw rect,.draw polyline{transition:none;stroke-dashoffset:0}
  .scrollcue{animation:none}
  .node{display:none}
}

/* ---------- photography layer ---------- */
.bgsec{position:relative;overflow:hidden;isolation:isolate}
.bgsec>.bg{position:absolute;left:0;right:0;top:-12%;height:124%;width:100%;object-fit:cover;z-index:-2;will-change:transform}
.bgsec>.bg.kb{animation:kb 26s ease-in-out infinite alternate}
@keyframes kb{from{scale:1}to{scale:1.09}}
.bgsec::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(40,38,77,.35) 0%,rgba(40,38,77,.6) 55%,rgba(40,38,77,.96) 100%)}
.bgsec.left::after{background:linear-gradient(90deg,rgba(40,38,77,.94) 0%,rgba(40,38,77,.72) 42%,rgba(40,38,77,.15) 100%),linear-gradient(0deg,rgba(40,38,77,.9) 0%,rgba(40,38,77,0) 30%)}
.bgsec.deep::after{background:rgba(32,30,64,.78)}
@media (max-width:760px){.bgsec.left::after{background:linear-gradient(180deg,rgba(40,38,77,.35) 0%,rgba(40,38,77,.75) 50%,rgba(40,38,77,.97) 100%)}}

/* hero */
.hero{min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;padding-bottom:calc(clamp(36px,9vh,86.4px) + env(safe-area-inset-bottom,0px));box-sizing:border-box}
.hero .wrap{width:100%;display:flex;flex-direction:column;gap:19.8px}
.hero h1{font-size:clamp(41.4px,7.38vw,118.8px);line-height:.94;letter-spacing:-.045em;max-width:11ch}
.hero p.lede{font-size:clamp(15.3px,1.44vw,18.9px);color:#E3E7F2;max-width:46ch}
.hero .ctas{display:flex;gap:10.8px;flex-wrap:wrap}
.hero svg.over{position:absolute;right:-2vw;top:8vh;width:min(62vw,810px);height:auto;z-index:-1;opacity:.9;pointer-events:none}
.hero .proof{display:flex;gap:9px;flex-wrap:wrap;margin-top:9px}
.hero .proof span{padding:9px 14.4px;border-radius:899.1px;background:rgba(40,38,77,.55);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);font-size:12.6px;color:#E3E7F2}
.hero .proof b{color:var(--ink);font-weight:800;margin-right:5.4px}
.phero.bgsec{padding-top:calc(171px + env(safe-area-inset-top,0px));min-height:78vh;display:flex;align-items:flex-end;box-sizing:border-box}
.phero.bgsec .wrap{width:100%}
.phero.bgsec .intro p{color:#E3E7F2}

/* stacked service panels */
.stack{position:relative}
.panel{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:flex-end;border-radius:39.6px 39.6px 0 0;box-shadow:0 -27px 54px rgba(20,18,44,.45);padding-bottom:calc(clamp(36px,9vh,86.4px) + env(safe-area-inset-bottom,0px));box-sizing:border-box}
.panel+.panel{margin-top:0}
.panel .wrap{width:100%;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(21.6px,4.5vw,72px);align-items:end}
.panel h2{font-size:clamp(37.8px,5.76vw,90px);line-height:.95}
.panel .txt{display:flex;flex-direction:column;gap:16.2px}
.panel .txt p{color:#E3E7F2;font-size:clamp(15.3px,1.35vw,18px);max-width:44ch}
.panel .num{font-family:var(--display);font-weight:800;font-size:12.6px;letter-spacing:2.7px;color:var(--ice)}
.glass{background:rgba(40,38,77,.55);backdrop-filter:blur(14.4px);-webkit-backdrop-filter:blur(14.4px);border-radius:var(--r-md);padding:23.4px 25.2px}
@media (max-width:860px){.panel .wrap{grid-template-columns:minmax(0,1fr)}.panel .glass{display:none}}

/* why over photo */
.bgsec .reason{background:rgba(40,38,77,.6);backdrop-filter:blur(12.6px);-webkit-backdrop-filter:blur(12.6px)}

/* photo cards */
.card img.pic{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card .photo{padding:0;background:none}
.card::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(40,38,77,.25) 0%,rgba(40,38,77,0) 35%,rgba(40,38,77,.88) 100%)}
.card .lines{z-index:0}
@media (hover:none){.card .photo{clip-path:inset(0 0 0 0 round var(--r-lg))}}
.chip{display:inline-flex;align-items:center;padding:5.4px 10.8px;border-radius:899.1px;background:rgba(242,167,216,.16);color:var(--pink);font-size:11px;font-weight:600;letter-spacing:.5px}

/* photo art boxes */
.art-box.ph-box{padding:0;overflow:hidden;position:relative}
.art-box.ph-box img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease)}
.art-box.ph-box:hover img{transform:scale(1.05)}
.art-box.ph-box svg.draw{position:absolute;inset:8%;width:84%;height:84%}
.art-box.ph-box svg.draw path{stroke:#fff;stroke-width:1.4;opacity:.85}

/* project hero */
.pmeta.glassy div{background:rgba(40,38,77,.55);backdrop-filter:blur(10.8px);-webkit-backdrop-filter:blur(10.8px)}
.pmedia img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pmedia .photo{padding:0}
.concept-note{border-radius:var(--r-md);background:rgba(242,167,216,.1);color:var(--pink);padding:14.4px 18px;font-size:12.6px}

/* start page */
.startbg{min-height:100vh}
.startbg .contact{padding-top:calc(135px + env(safe-area-inset-top,0px));padding-bottom:72px}
.startbg form{background:rgba(40,38,77,.62);backdrop-filter:blur(16.2px);-webkit-backdrop-filter:blur(16.2px);border-radius:var(--r-lg);padding:clamp(21.6px,3.6vw,39.6px)}
.startbg .direct div{background:rgba(40,38,77,.55);backdrop-filter:blur(10.8px);-webkit-backdrop-filter:blur(10.8px)}
.closer.bgsec{background:none}
.closer.bgsec p{color:#E3E7F2}
@media (prefers-reduced-motion:reduce){.bgsec>.bg.kb{animation:none}}

.dwell{height:55vh;pointer-events:none}

/* ---------- v4 refinements ---------- */
/* cards: photo visible at rest, the drawn line sits on top and lifts away on hover */
.card .photo{clip-path:none!important;transition:none}
.card img.pic{transition:transform 1.4s var(--ease),filter .8s var(--ease);filter:saturate(.85) brightness(.8)}
.card:hover img.pic,.card:focus-visible img.pic{transform:scale(1.06);filter:none}
.card .lines{z-index:1;transition:opacity .7s var(--ease),transform 1s var(--ease)}
.card .lines path{stroke:#fff;stroke-width:1.2;opacity:.75}
.card:hover .lines,.card:focus-visible .lines{opacity:0;transform:scale(1.04)}
.card::after{z-index:1}
.card .tag,.card .meta{z-index:3}
.card .tag{display:flex;gap:7.2px;align-items:center;background:rgba(40,38,77,.7);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
/* gallery for three images */
.gal{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);grid-auto-rows:clamp(162px,22vw,270px)}
.gal div{aspect-ratio:auto!important;border-radius:var(--r-md);overflow:hidden}
.gal div:first-child{grid-column:auto;grid-row:span 2}
@media (max-width:640px){.gal{grid-template-columns:minmax(0,1fr);grid-auto-rows:216px}.gal div:first-child{grid-row:auto}}
.pmedia svg.draw path{opacity:.55}
/* capabilities: 4 + 3 */
.caps{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.caps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.caps{grid-template-columns:minmax(0,1fr)}}
/* rhythm */
section.ch{padding-block:clamp(86.4px,14vh,151.2px)}
.ch-head{gap:18px}
.phero.bgsec{padding-bottom:clamp(57.6px,10vh,108px)}
.story{gap:clamp(50.4px,9vh,93.6px)}
.svc-block+.svc-block{margin-top:clamp(86.4px,14vh,144px)}
.steps,.caps,.svc,.details{margin-top:clamp(36px,6vh,57.6px)}

/* word reveal */
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.split .w>span{display:inline-block;transform:translateY(0);transition:transform 1s var(--ease);transition-delay:calc(var(--i) * 45ms)}
.split.hold .w>span{transform:translateY(108%)}
/* page transition */
.pt{position:fixed;inset:0;z-index:100;background:var(--bg);display:flex;align-items:center;justify-content:center;pointer-events:none;transform:translateY(0);transition:transform .75s var(--ease)}
.pt.gone{transform:translateY(-101%)}
.pt.enter{transform:translateY(101%);transition:none}
.pt img{width:126px;opacity:.9}
.btn{will-change:transform}
@media (prefers-reduced-motion:reduce){.split .w>span{transition:none;transform:none!important}.pt{display:none}}

[hidden]{display:none!important}
.hero .proof{gap:9px 27px;margin-top:12.6px}
.hero .proof span{padding:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;font-size:13.5px}
.hero .proof b{font-size:19.8px;color:var(--ice);margin-right:7.2px;vertical-align:-2px}
.hero svg.over{opacity:.55}

/* ---------- v5: typography ---------- */
:root{--display:'Bricolage Grotesque','Plus Jakarta Sans',system-ui,sans-serif;--serif:'Instrument Serif',Georgia,'Times New Roman',serif}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.035em;font-optical-sizing:auto}
.hero h1,.phero h1,.panel h2{font-weight:700;letter-spacing:-.045em}
h1 em,h2 em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--ice)}
.cap h1{font-family:var(--display)}
.reason b,.hero .proof b,.panel .num{font-family:var(--display)}
.btn{font-weight:600;letter-spacing:.01em}

/* skip link, honeypot */
.skip{position:fixed;left:14.4px;top:-54px;z-index:200;background:var(--ink);color:var(--on-accent);padding:10.8px 16.2px;border-radius:899.1px;font-weight:600;transition:top .2s}
.skip:focus{top:calc(10.8px + env(safe-area-inset-top,0px))}
.hp{position:absolute!important;left:-8999.1px;width:1px;height:1px;overflow:hidden}

/* marquee */
.marquee{overflow:hidden;padding-block:clamp(23.4px,5vh,43.2px);background:var(--bg)}
.mq-track{display:flex;align-items:center;gap:clamp(21.6px,2.7vw,43.2px);width:max-content;animation:mq 38s linear infinite}
.mq-track span{font-family:var(--display);font-weight:700;font-size:clamp(36px,5.85vw,93.6px);letter-spacing:-.04em;line-height:1;color:transparent;-webkit-text-stroke:1.4px rgba(155,218,242,.55);white-space:nowrap}
.mq-track span:nth-child(4n+1){color:var(--ink);-webkit-text-stroke:0}
.mq-track i{flex:none;width:12.6px;height:12.6px;border-radius:50%;background:var(--brand)}
@keyframes mq{to{transform:translateX(-50%)}}

/* scroll progress line (the line motif) */
.progress{position:fixed;left:0;top:0;height:2px;width:100%;z-index:60;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--ice),var(--accent));pointer-events:none}

/* image reveal */
.art-box.ph-box,.gi,.pmedia{clip-path:inset(0 0 0 0 round var(--r-lg));transition:clip-path 1.3s var(--ease)}
.rv.pre.art-box.ph-box,.gal.pre .gi,.pmedia.pre{clip-path:inset(14% 10% 14% 10% round var(--r-lg))}
.gi img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.4s var(--ease)}
.gi:hover img{transform:scale(1.05)}
.gal .gi{border-radius:var(--r-md);overflow:hidden}

/* intro (first visit) */
.pt .draw-line{position:absolute;left:0;right:0;top:50%;height:2px;background:var(--ice);transform-origin:left;transform:scaleX(0);transition:transform 1s var(--ease)}
.pt.intro .draw-line{transform:scaleX(1)}
.pt.intro img{animation:ptlogo 1.1s var(--ease) both}
@keyframes ptlogo{from{opacity:0;transform:translateY(12.6px)}to{opacity:.95;transform:none}}

/* lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
@media (prefers-reduced-motion:reduce){.mq-track{animation:none}.art-box.ph-box,.gi,.pmedia{clip-path:none!important}}
.hero .proof{align-items:baseline}

/* ---------- v6 ---------- */
/* accent words: same typeface, upright, colour only */
h1 em,h2 em{font-family:inherit;font-style:normal;font-weight:inherit;letter-spacing:inherit;color:var(--ice)}
/* why cards: scroll-linked 3D settle, drawn icons, cursor light */
.reasons{perspective:1260px;gap:16.2px}
.reason.r3d{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:21.6px;align-items:start;padding:30.6px 30.6px 30.6px 27px;border-radius:25.2px;overflow:hidden;
 background:linear-gradient(135deg,rgba(59,57,112,.72),rgba(40,38,77,.62));backdrop-filter:blur(14.4px);-webkit-backdrop-filter:blur(14.4px);
 box-shadow:0 27px 54px -27px rgba(10,8,30,.7),inset 0 1px 0 rgba(255,255,255,.07);transform-origin:50% 100%;will-change:transform,opacity;transition:box-shadow .5s var(--ease)}
.reason.r3d h3{font-size:clamp(19.8px,1.8vw,25.2px);margin-bottom:7.2px}
.reason.r3d p{color:#D4DAEA}
.reason.r3d .ico{width:50.4px;height:50.4px;flex:none;padding:10.8px;border-radius:16.2px;background:rgba(155,218,242,.1);overflow:visible}
.reason.r3d .ico path,.reason.r3d .ico circle,.reason.r3d .ico rect{fill:none;stroke:var(--ice);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--ease) .15s}
.reason.r3d .ico.in path,.reason.r3d .ico.in circle,.reason.r3d .ico.in rect{stroke-dashoffset:0}
.reason.r3d .glow{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(378px circle at var(--mx,50%) var(--my,50%),rgba(155,218,242,.16),transparent 60%)}
.reason.r3d:hover .glow{opacity:1}
.reason.r3d:hover{box-shadow:0 36px 72px -27px rgba(10,8,30,.8),inset 0 1px 0 rgba(255,255,255,.12)}
.reason.r3d::before{content:"";position:absolute;left:27px;right:27px;top:0;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--ice),transparent);transform-origin:left;transform:scaleX(var(--line,0));opacity:.7}
@media (prefers-reduced-motion:reduce){.reason.r3d{transform:none!important;opacity:1!important}.reason.r3d .ico path,.reason.r3d .ico circle,.reason.r3d .ico rect{stroke-dashoffset:0}}

/* ---------- v7: why-us deck ---------- */
.whyx{position:relative;height:440vh}
.wx-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;align-items:center;isolation:isolate}
.wx-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3;opacity:0;will-change:opacity,transform}
.wx-bg[data-i="0"]{opacity:1}
.wx-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(40,38,77,.95) 0%,rgba(40,38,77,.78) 45%,rgba(40,38,77,.45) 100%)}
.wx-grid{width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28.8px,5.4vw,99px);align-items:center}
.wx-grid .ch-head h2{font-size:clamp(36px,5.04vw,75.6px)}
.wx-prog{display:flex;align-items:center;gap:14.4px;margin-top:16.2px;font-family:var(--display);font-weight:700;letter-spacing:2px;font-size:11.7px;color:var(--ice)}
.wx-bar{width:144px;height:3.6px;border-radius:3.6px;background:rgba(255,255,255,.14);overflow:hidden}
.wx-bar b{display:block;height:100%;width:25%;border-radius:3.6px;background:var(--ice);transition:width .3s var(--ease)}
.deck{position:relative;height:var(--deckh,306px)}
.dcard{position:absolute;left:0;right:0;top:0;padding:clamp(25.2px,2.7vw,39.6px);border-radius:28.8px;box-sizing:border-box;
 background:linear-gradient(150deg,rgba(72,70,140,.92),rgba(40,38,77,.94));backdrop-filter:blur(16.2px);-webkit-backdrop-filter:blur(16.2px);
 box-shadow:0 45px 81px -36px rgba(8,6,28,.9),inset 0 1px 0 rgba(255,255,255,.09);transform-origin:50% 100%;will-change:transform,opacity,filter}
.dc-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:clamp(19.8px,3vh,32.4px)}
.dcard .ico{width:57.6px;height:57.6px;padding:12.6px;border-radius:18px;background:rgba(155,218,242,.12);overflow:visible;box-sizing:border-box}
.dcard .ico path,.dcard .ico circle,.dcard .ico rect{fill:none;stroke:var(--ice);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:var(--draw,1)}
.dc-n{font-family:var(--display);font-weight:700;font-size:11.7px;letter-spacing:2px;color:rgba(255,255,255,.55)}
.dcard h3{font-size:clamp(25.2px,2.52vw,37.8px);line-height:1.05;margin-bottom:12.6px}
.dcard p{color:#D7DDEC;font-size:clamp(14.4px,1.12vw,17.1px);max-width:46ch}
@media (max-width:900px){.wx-grid{grid-template-columns:minmax(0,1fr);gap:25.2px;align-content:center}.wx-grid .ch-head p{display:none}.wx-shade{background:linear-gradient(180deg,rgba(40,38,77,.9),rgba(40,38,77,.8))}}
@media (prefers-reduced-motion:reduce){.whyx{height:auto}.wx-stage{position:relative;height:auto;padding-block:108px}.deck{height:auto;display:flex;flex-direction:column;gap:14.4px}.dcard{position:relative;transform:none!important;opacity:1!important;filter:none!important}.dcard .ico path,.dcard .ico circle,.dcard .ico rect{stroke-dashoffset:0}}

.whyx .wx-stage{overflow:hidden}.dcard{transform-origin:50% 50%}
@media (max-width:900px){.deck{margin-top:7.2px}}

/* v8 hero fit for approved headline */
.hero{padding-top:calc(75.6px + 36px)}
.hero h1{font-size:clamp(37.8px,5.76vw,93.6px);line-height:.96;max-width:15ch}
@media (max-width:760px){.hero h1{font-size:clamp(34.2px,9.45vw,45px)}}
@media (max-height:760px) and (min-width:761px){.hero h1{font-size:clamp(37.8px,4.86vw,75.6px)}}

/* cookie consent (only when analytics is on) */
.consent{position:fixed;left:14.4px;right:14.4px;bottom:14.4px;z-index:90;max-width:504px;margin-inline:auto;background:rgba(48,46,89,.94);backdrop-filter:blur(12.6px);-webkit-backdrop-filter:blur(12.6px);border-radius:21.6px;padding:18px 19.8px;display:flex;flex-wrap:wrap;gap:12.6px 16.2px;align-items:center;box-shadow:0 18px 54px rgba(0,0,0,.35);font-size:12.6px;color:var(--muted)}
.consent p{flex:1 1 234px}.consent a{color:var(--ice);text-decoration:underline}
.consent .btn{min-height:40px;padding:0 16.2px;font-size:12.6px}
/* legal page */
.legal{max-width:684px}.legal h2{font-size:clamp(21.6px,2.34vw,28.8px);margin:39.6px 0 10.8px}.legal p,.legal li{color:var(--muted)}.legal p+p{margin-top:10.8px}.legal ul{padding-left:18px}

/* v10 compact footer */
footer.ftr{padding-block:32.4px calc(19.8px + env(safe-area-inset-bottom,0px));background:#211F42}
.ft-row{display:flex;align-items:center;justify-content:space-between;gap:14.4px 28.8px;flex-wrap:wrap}
.ft-row .mark img{width:155px;display:block}
.ft-nav{display:flex;gap:5.4px 25.2px;flex-wrap:wrap;font-size:13.5px;color:var(--muted)}
.ft-nav a{min-height:40px;display:inline-flex;align-items:center}.ft-nav a:hover{color:var(--ink)}
.ft-bot{display:flex;align-items:center;justify-content:space-between;gap:9px 25.2px;flex-wrap:wrap;margin-top:19.8px;font-size:11.7px;color:var(--faint)}
.ft-legal{display:flex;gap:18px;margin-right:auto}
.ft-legal a:hover,.ft-cookie:hover{color:var(--ink)}
.ft-cookie{background:none;border:0;color:inherit;font:inherit;cursor:pointer;padding:0}
.ft-group{display:inline-flex;align-items:center;gap:7.2px}.ft-group img{height:18px;width:auto;display:block}
@media (max-width:640px){
 footer.ftr{padding-block:25.2px calc(16.2px + env(safe-area-inset-bottom,0px))}
 .ft-row{flex-direction:column;align-items:flex-start;gap:12.6px}
 .ft-nav{gap:0 19.8px;font-size:13.5px}.ft-nav a{min-height:32.4px}
 .ft-bot{margin-top:12.6px;display:grid;grid-template-columns:1fr auto;gap:7.2px 14.4px}
 .ft-bot>span:first-child{grid-column:1/-1}
 .ft-legal{margin:0}
}

/* v11 hero mobile: dedicated portrait crop, no stretch */
.hero>.bgm{display:none}
@media (max-width:760px){
 .hero>.bg{display:none}
 .hero>.bgm{display:block;position:absolute;top:0;left:0;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:60% 30%;z-index:-2;-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
 .hero{background:var(--bg)}
}
@media (max-width:760px){.bgsec>.bg{top:-5%;height:110%}.bgsec>.bg.kb{animation:none}}

.hint-touch{display:none}
@media (hover:none){.hint-hover{display:none}.hint-touch{display:inline}}

/* v12 shorter pinned sequences */
.track{height:380vh}
.whyx{height:300vh}
.work-h{height:210vh}
.dwell{height:28vh}
@media (max-width:760px){
 .track{height:320vh}
 .whyx{height:260vh}
 .work-h{height:auto}
 .work-h .pin{position:relative;height:auto;padding-block:64.8px 36px;gap:23.4px}
 .strip{overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:5.4px}
 .strip::-webkit-scrollbar{display:none}
 .strip .card{scroll-snap-align:start;width:84vw}
 .work-foot .prog{display:none}
}
/* static 3D fallback */
.b3s-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16.2px;margin-top:36px}
.b3s-i{margin:0;background:var(--surface);border-radius:var(--r-md);overflow:hidden;display:flex;flex-direction:column}
.b3s-i img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
.b3s-i figcaption{padding:16.2px 18px 19.8px;display:flex;flex-direction:column;gap:7.2px}
.b3s-i small{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--ice)}
.b3s-i h3{font-size:18.9px;line-height:1.15}
.b3s-i p{font-size:13.5px;color:var(--muted)}
@media (max-width:1100px){.b3s-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.b3s-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gut)*-1);padding-inline:var(--gut);scrollbar-width:none}.b3s-grid::-webkit-scrollbar{display:none}.b3s-i{flex:none;width:80vw;scroll-snap-align:center}}
.b3s{background:var(--surface);border-radius:39.6px;margin-inline:clamp(7.2px,1.26vw,18px)}
.b3s-i{background:var(--bg)}
.chip{white-space:nowrap}

/* v13 Forward link */
.ft-group{display:inline-flex;align-items:center;gap:9px;line-height:1}
.ft-group>span{display:block;line-height:16.2px}
.fwd-link{position:relative;display:inline-flex;align-items:center;height:18px;padding:6px;margin:-6px;border-radius:8px;transition:opacity .25s}
.fwd-link img{height:18px;width:auto;display:block}
.fwd-link:hover img,.fwd-link:focus-visible img{opacity:.85}
.fwd-link::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%,4px);white-space:nowrap;background:var(--raised);color:var(--ink);font-size:12px;line-height:1;padding:8px 12px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.fwd-link:hover::after,.fwd-link:focus-visible::after{opacity:1;transform:translate(-50%,0)}
.fwd-link::after{left:auto;right:0;transform:translateY(4px)}
.fwd-link:hover::after,.fwd-link:focus-visible::after{transform:translateY(0)}


/* v14 footer contact */
.ft-contact{display:flex;flex-wrap:wrap;align-items:center;gap:5.4px 10.8px;margin-top:12.6px;font-size:12.6px;color:var(--muted)}
.ft-contact a{min-height:28.8px;display:inline-flex;align-items:center}.ft-contact a:hover{color:var(--ink)}
.ft-contact>span[aria-hidden]{color:var(--faint)}
.direct a,.details a{color:var(--ink)}.direct a:hover,.details a:hover{color:var(--ice)}
@media (max-width:640px){.ft-contact>span[aria-hidden]:nth-of-type(2){display:none}.ft-loc{flex-basis:100%}}

/* v15 two-row footer */
.ft-bot{margin-top:16.2px}
.ft-legal{align-items:center;gap:7.2px 21.6px;flex-wrap:wrap}
.ft-loc{color:var(--muted)}
@media (max-width:640px){.ft-bot{grid-template-columns:1fr auto}.ft-legal{flex-direction:column;align-items:flex-start;gap:5.4px}}
@media (max-width:640px){
 .ft-bot{display:grid;grid-template-columns:1fr auto;gap:9px 14.4px;font-size:11.7px}
 .ft-bot>span:first-child{grid-column:1/-1;order:2}
 .ft-legal{display:contents}
 .ft-loc{grid-column:1/-1;order:1;white-space:nowrap}
 .ft-legal>a{order:3;align-self:center}
 .ft-cookie{order:3}
 .ft-group{order:3;justify-self:end}
}
/* v16 one style for the bottom row */
.ft-bot,.ft-bot span,.ft-bot a,.ft-bot button,.ft-loc,.ft-group>span{font-size:11.7px!important;line-height:16.2px;color:var(--faint)!important;font-weight:400;letter-spacing:0}
.ft-bot a:hover,.ft-bot button:hover{color:var(--ink)!important}

/* v17 final QA */
.cap h2{font-size:clamp(34.2px,5.4vw,82.8px);line-height:.98;letter-spacing:-.035em;font-family:var(--display)}
.hero .proof b{margin-right:3.6px}
.wx-count{display:none}
.jump{display:flex;flex-wrap:wrap;gap:9px;margin-top:5.4px}
.jump a{min-height:40px;display:inline-flex;align-items:center;padding:0 16.2px;border-radius:899.1px;background:rgba(48,46,89,.7);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);font-size:12.6px;color:var(--ink);transition:background .25s}
.jump a:hover{background:var(--raised)}
.ft-bot a,.ft-bot button{display:inline-flex;align-items:center;min-height:28.8px}
.direct a{display:inline-flex;align-items:center;min-height:28.8px}
.details{grid-template-columns:repeat(3,minmax(0,1fr))!important}
@media (max-width:640px){.details{grid-template-columns:minmax(0,1fr)!important}}

/* keep form fields at 16px on phones (prevents iOS zoom on focus) */
@media (max-width:760px){input,textarea,select{font-size:16px!important}}