/* TYPETHE11 Studio · web mockup
   One stylesheet for every page. Tokens first, then layout, then components. */
:root{
  --paper:#E6E6E3; --paper-2:#F2F1EE; --ink:#0D0D0D; --ink-2:#1A1A19; --mute:#77766F; --line:rgba(13,13,13,.14);
  --lime:#C8F031; --red:#E4322B;
  --sans:"Inter Tight","Helvetica Neue",Helvetica,Arial,sans-serif;
  --serif:"Instrument Serif",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --out:cubic-bezier(.16,1,.3,1); --inout:cubic-bezier(.65,0,.35,1);
  --pad:clamp(20px,4vw,64px); --max:1440px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.45;overflow-x:clip;-webkit-font-smoothing:antialiased}
body.dark{background:var(--ink);color:var(--paper)}
img,video,iframe{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--lime);color:var(--ink)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.mono{font-family:var(--mono);font-size:13px;letter-spacing:.04em;text-transform:uppercase}
.serif{font-family:var(--serif);font-weight:400;letter-spacing:-.01em}
.mute{color:var(--mute)}

/* ---------- grain + fog (code, no images) ---------- */
.grain{position:fixed;inset:-50%;width:200%;height:200%;pointer-events:none;z-index:90;opacity:.07;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}60%{transform:translate(-4%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* ---------- nav ---------- */
.nav{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:80;display:flex;align-items:center;gap:6px;padding:6px;border-radius:999px;
  background:rgba(230,230,227,.62);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border:1px solid rgba(255,255,255,.5);box-shadow:0 10px 30px rgba(0,0,0,.08);transition:transform .6s var(--out),background .4s}
body.dark .nav{background:rgba(26,26,25,.6);border-color:rgba(255,255,255,.08)}
.nav.hide{transform:translate(-50%,-120%)}
.nav .brand{display:flex;align-items:center;gap:10px;padding:8px 14px 8px 12px;font-weight:700;font-size:15px;letter-spacing:-.01em}
.nav .brand svg{width:26px;height:23px}
.nav a.l{padding:9px 15px;border-radius:999px;font-size:15px;font-weight:500;transition:background .3s}
.nav a.l:hover{background:rgba(13,13,13,.07)}
body.dark .nav a.l:hover{background:rgba(255,255,255,.08)}
.nav a.l.on{background:var(--ink);color:var(--paper)}
body.dark .nav a.l.on{background:var(--paper);color:var(--ink)}
.nav .cart{display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:var(--lime);color:var(--ink);font-weight:600;font-size:15px}
.nav .cart b{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:11px;background:var(--ink);color:var(--lime);font-size:12px}
.burger{display:none}
@media (max-width:760px){
  .nav{left:12px;right:12px;transform:none;justify-content:space-between}
  .nav.hide{transform:translateY(-130%)}
  .nav a.l{display:none}
  .burger{display:block;padding:9px 14px;font-weight:600}
  .nav.open{flex-wrap:wrap;border-radius:26px}
  .nav.open a.l{display:block;width:100%}
}

/* ---------- reveal on scroll ---------- */
.rv{opacity:0;transform:translateY(40px);transition:opacity 1.1s var(--out),transform 1.1s var(--out)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}.rv.d4{transition-delay:.32s}
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.18em .14em .12em .06em;margin:-.18em -.14em -.12em -.06em}
.split .w>span{display:inline-block;transform:translateY(140%);transition:transform 1.2s var(--out)}
.split.in .w>span{transform:none}

/* ---------- hero ---------- */
.hero{position:relative;height:100svh;min-height:640px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--pad) 40px;background:var(--ink);color:var(--paper)}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:screen;opacity:.55;pointer-events:none}
.hero .glow{position:absolute;width:60vmax;height:60vmax;left:50%;top:40%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(200,240,49,.16),transparent 60%);pointer-events:none}
.hero .mark{position:absolute;left:50%;top:44%;width:min(48vw,593px);aspect-ratio:571/500;transform:translate(-50%,-50%);color:var(--paper)}
.hero .mark svg{width:100%;height:100%}
.hero .mark path{transform-box:fill-box;transform-origin:center bottom}
.hero .mark path:first-child{animation:strokeA 1.6s var(--out) .2s both}
.hero .mark path:last-child{animation:strokeB 1.6s var(--out) .45s both}
@keyframes strokeA{0%{transform:translateY(40%) scaleY(.2);opacity:0}100%{transform:none;opacity:1}}
@keyframes strokeB{0%{transform:translateY(-40%) scaleY(.2);opacity:0}100%{transform:none;opacity:1}}
.hero h1{position:relative;font-weight:800;font-size:clamp(64px,14.6vw,236px);line-height:.8;letter-spacing:-.065em;white-space:nowrap}
.hero h1 .w>span{transition-duration:1.4s}
.hero .row{position:relative;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-top:28px;border-top:1px solid rgba(255,255,255,.18);padding-top:18px}
.hero .row p{max-width:420px;font-size:19px;line-height:1.35}
.badge{display:inline-flex;align-items:center;gap:10px;padding:8px 14px;border-radius:999px;border:1px solid currentColor;font-size:14px;font-weight:500}
.badge i{width:9px;height:9px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 0 rgba(200,240,49,.7);animation:ping 2s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(200,240,49,.6)}80%,100%{box-shadow:0 0 0 12px rgba(200,240,49,0)}}
.scrollhint{position:absolute;right:var(--pad);top:50%;writing-mode:vertical-rl;font-family:var(--mono);font-size:12px;letter-spacing:.12em;opacity:.6}

/* ---------- marquee ---------- */
.marquee{overflow:hidden;border-block:1px solid var(--line);padding:22px 0;white-space:nowrap}
.marquee .t{display:inline-flex;gap:48px;animation:mq 28s linear infinite;font-weight:700;font-size:clamp(28px,4vw,56px);letter-spacing:-.03em}
.marquee .t span:nth-child(even){font-family:var(--serif);font-style:italic;font-weight:400}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- intro statement (word highlight on scroll) ---------- */
.statement{padding-block:22vh}
.statement p{font-weight:700;font-size:clamp(34px,5.4vw,84px);line-height:1.02;letter-spacing:-.045em;max-width:1200px}
.statement p .hw{color:rgba(13,13,13,.16);transition:color .25s}
body.dark .statement p .hw{color:rgba(230,230,227,.16)}
.statement p .hw.on{color:inherit}
.statement p em{font-family:var(--serif);font-weight:400;font-style:italic}

/* ---------- sticky scroll scene: poster zoom ---------- */
.scene{position:relative;height:260vh}
.scene .stick{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center}
.scene .frame{position:relative;width:min(70vw,560px);aspect-ratio:4/5;border-radius:18px;overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,.35);will-change:transform}
.scene .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s}
.scene .frame img.on{opacity:1}
.scene .cap{position:absolute;left:var(--pad);bottom:40px;max-width:380px}
.scene .cap h3{font-size:clamp(28px,3vw,44px);letter-spacing:-.03em;line-height:1;margin:8px 0 10px}
.scene .count{position:absolute;right:var(--pad);bottom:40px;font-weight:800;font-size:clamp(60px,9vw,140px);letter-spacing:-.06em;line-height:.8}
.scene .bigword{position:absolute;inset:0;display:grid;place-items:center;font-weight:800;font-size:clamp(90px,22vw,360px);letter-spacing:-.07em;color:transparent;-webkit-text-stroke:1px rgba(13,13,13,.18);pointer-events:none;white-space:nowrap}
body.dark .scene .bigword{-webkit-text-stroke-color:rgba(230,230,227,.14)}

/* ---------- horizontal scroll gallery ---------- */
.hscroll{position:relative}
.hscroll .stick{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.hscroll .head{display:flex;justify-content:space-between;align-items:flex-end;padding:0 var(--pad);margin-bottom:28px}
.hscroll h2{font-size:clamp(40px,6vw,96px);letter-spacing:-.055em;line-height:.9;font-weight:800}
.hscroll .track{display:flex;gap:24px;padding:0 var(--pad);will-change:transform}
.card{flex:0 0 auto;width:min(72vw,380px)}
.card .ph{position:relative;aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:var(--ink-2)}
.card .ph img,.card .ph iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;transition:transform 1.2s var(--out)}
.card:hover .ph img{transform:scale(1.05)}
.card .meta{display:flex;justify-content:space-between;margin-top:12px;font-size:15px}
.card .meta b{font-weight:600}
.tag{display:inline-block;padding:4px 10px;border-radius:999px;border:1px solid var(--line);font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase}

/* ---------- services ---------- */
.services{padding-block:18vh}
.services .top{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:40px;gap:24px}
.services h2{font-size:clamp(40px,6vw,96px);letter-spacing:-.055em;line-height:.9;font-weight:800}
.svc{position:relative;display:grid;grid-template-columns:80px 1fr auto;align-items:center;gap:20px;padding:26px 0;border-top:1px solid var(--line);cursor:default}
.svc:last-child{border-bottom:1px solid var(--line)}
.svc h3{font-size:clamp(30px,4.4vw,68px);letter-spacing:-.045em;line-height:1;font-weight:700;transition:transform .6s var(--out)}
.svc:hover h3{transform:translateX(18px)}
.svc .peek{position:fixed;left:0;top:0;width:240px;aspect-ratio:4/5;border-radius:12px;overflow:hidden;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.8) rotate(-4deg);transition:opacity .35s,transform .5s var(--out);z-index:40}
.svc .peek img,.svc .peek iframe{width:100%;height:100%;object-fit:cover;border:0}
.svc:hover .peek{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-4deg)}
@media (hover:none){.svc .peek{display:none}}

/* ---------- numbers ---------- */
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:12vh 0;border-top:1px solid var(--line)}
.nums div b{display:block;font-weight:800;font-size:clamp(48px,7vw,110px);letter-spacing:-.06em;line-height:.9}
@media (max-width:760px){.nums{grid-template-columns:repeat(2,1fr)}}

/* ---------- motion strip (live HTML animations) ---------- */
.reels{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;padding-bottom:16vh}
.reel{position:relative;aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:#111}
.reel iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none}
.reel span{position:absolute;left:10px;bottom:10px}
@media (max-width:1000px){.reels{grid-template-columns:repeat(2,1fr)}}

/* ---------- CTA + footer ---------- */
.cta{position:relative;overflow:hidden;background:var(--lime);color:var(--ink);padding:18vh var(--pad) 12vh}
.cta h2{font-weight:800;font-size:clamp(60px,13vw,220px);line-height:.82;letter-spacing:-.07em}
.cta h2 em{font-family:var(--serif);font-weight:400;letter-spacing:-.03em}
.cta .btn{margin-top:40px}
.btn{display:inline-flex;align-items:center;gap:12px;padding:18px 26px;border-radius:999px;background:var(--ink);color:var(--paper);font-weight:600;font-size:17px;transition:transform .5s var(--out),gap .5s var(--out)}
.btn:hover{gap:20px}
.btn.ghost{background:transparent;color:inherit;border:1px solid currentColor}
.btn.lime{background:var(--lime);color:var(--ink)}
footer{background:var(--ink);color:var(--paper);padding:80px var(--pad) 30px}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:24px;margin-bottom:80px}
footer .cols a{display:block;opacity:.75;padding:3px 0}
footer .cols a:hover{opacity:1}
footer .huge{font-weight:800;font-size:clamp(60px,17.2vw,290px);line-height:.78;letter-spacing:-.07em;white-space:nowrap;overflow:hidden}
footer .base{display:flex;justify-content:space-between;margin-top:24px;opacity:.55;font-size:14px}
@media (max-width:760px){footer .cols{grid-template-columns:1fr 1fr}}

/* ---------- page header (inner pages) ---------- */
.phead{padding-block:180px 60px}
.phead h1{font-weight:800;font-size:clamp(64px,13vw,210px);line-height:.82;letter-spacing:-.07em}
.phead h1 em{font-family:var(--serif);font-weight:400;font-style:italic;letter-spacing:-.03em}
.phead .sub{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-top:36px;border-top:1px solid var(--line);padding-top:18px}
.phead .sub p{max-width:520px;font-size:19px}

/* ---------- work grid ---------- */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px}
.filters button{padding:10px 18px;border-radius:999px;border:1px solid var(--line);font-size:15px;font-weight:500;transition:background .3s,color .3s}
.filters button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:28px 24px;padding-bottom:16vh}
.grid .card{width:auto;grid-column:span 4;transition:opacity .5s,transform .6s var(--out)}
.grid .card.wide{grid-column:span 8}
.grid .card.wide .ph{aspect-ratio:16/10}
.grid .card.hide{display:none}
.grid .card .ph{cursor:zoom-in}
@media (max-width:900px){.grid .card,.grid .card.wide{grid-column:span 6}}
@media (max-width:560px){.grid .card,.grid .card.wide{grid-column:span 12}}
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(13,13,13,.92);display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .4s}
.lightbox.on{opacity:1;pointer-events:auto}
.lightbox .in{width:min(86vw,62vh);aspect-ratio:4/5;border-radius:12px;overflow:hidden;transform:scale(.94);transition:transform .6s var(--out)}
.lightbox.on .in{transform:none}
.lightbox img,.lightbox iframe{width:100%;height:100%;object-fit:cover;border:0}
.lightbox .x{position:absolute;top:22px;right:22px;color:var(--paper);padding:12px 18px;border:1px solid rgba(255,255,255,.3);border-radius:999px}
.lightbox .cap{position:absolute;left:24px;bottom:22px;color:var(--paper)}

/* ---------- shop ---------- */
.shopgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 24px;padding-bottom:12vh}
@media (max-width:900px){.shopgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.shopgrid{grid-template-columns:1fr}}
.prod .ph{position:relative;aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:#d3d2cd}
.prod .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--out)}
.prod:hover .ph img{transform:scale(1.04)}
.prod .print{position:absolute;color:var(--ink);mix-blend-mode:multiply;opacity:.88}
.prod .print.light{color:#efeee9;mix-blend-mode:normal;opacity:.9}
.prod .print svg{width:100%;height:100%}
.prod .row{display:flex;justify-content:space-between;align-items:baseline;margin-top:14px}
.prod h3{font-size:20px;font-weight:600;letter-spacing:-.01em}
.prod .price{font-family:var(--mono);font-size:15px}
.prod .opts{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}
.prod .opts button{min-width:40px;padding:7px 10px;border-radius:8px;border:1px solid var(--line);font-size:13px;font-weight:500}
.prod .opts button.on{background:var(--ink);color:var(--paper)}
.prod .add{margin-top:14px;width:100%;justify-content:center}
.prod .flag{position:absolute;left:12px;top:12px;z-index:2;background:var(--lime);color:var(--ink);padding:6px 10px;border-radius:999px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.digital{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding-bottom:16vh}
.dig{position:relative;border-radius:18px;overflow:hidden;background:var(--ink);color:var(--paper);min-height:380px;padding:36px;display:flex;flex-direction:column;justify-content:flex-end}
.dig img,.dig video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.dig > *:not(img):not(video){position:relative}
.dig h3{font-size:clamp(30px,3.4vw,52px);letter-spacing:-.04em;line-height:.95;margin:10px 0 16px}
@media (max-width:760px){.digital{grid-template-columns:1fr}}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,100vw);z-index:95;background:var(--paper-2);color:var(--ink);transform:translateX(100%);transition:transform .7s var(--out);display:flex;flex-direction:column;box-shadow:-30px 0 80px rgba(0,0,0,.2)}
.drawer.on{transform:none}
.drawer .hd{display:flex;justify-content:space-between;align-items:center;padding:24px;border-bottom:1px solid var(--line)}
.drawer .items{flex:1;overflow:auto;padding:10px 24px}
.drawer .it{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.drawer .it img{width:64px;height:80px;object-fit:cover;border-radius:8px}
.drawer .ft{padding:24px;border-top:1px solid var(--line)}
.drawer .ft .btn{width:100%;justify-content:center;margin-top:14px}
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,calc(100% + 60px));visibility:hidden;z-index:96;background:var(--ink);color:var(--paper);padding:14px 20px;border-radius:999px;font-weight:500;transition:transform .6s var(--out),visibility 0s .6s}
.toast.on{transform:translate(-50%,0);visibility:visible;transition:transform .6s var(--out),visibility 0s}

/* ---------- about ---------- */
.manifesto{padding-block:10vh 20vh}
.split2{display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-items:start;padding-block:10vh}
.split2 .sticky{position:sticky;top:120px}
.steps .st{padding:34px 0;border-top:1px solid var(--line)}
.steps .st b{font-family:var(--mono);font-size:13px}
.steps .st h3{font-size:clamp(28px,3vw,44px);letter-spacing:-.035em;margin:10px 0}
.portrait{aspect-ratio:4/5;border-radius:18px;overflow:hidden;background:var(--ink);display:grid;place-items:center;color:var(--paper)}
.portrait svg{width:52%}
.tools{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
@media (max-width:860px){.split2{grid-template-columns:1fr}.split2 .sticky{position:static}}

/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:1.1fr 1fr;gap:6vw;padding-bottom:14vh}
@media (max-width:860px){.contact{grid-template-columns:1fr}}
.field{position:relative;border-bottom:1px solid var(--line);margin-bottom:8px}
.field input,.field textarea,.field select{width:100%;background:none;border:0;outline:0;font:inherit;font-size:clamp(22px,2.4vw,34px);letter-spacing:-.02em;padding:34px 0 14px;color:inherit;resize:none}
.field label{position:absolute;left:0;top:34px;font-size:clamp(22px,2.4vw,34px);letter-spacing:-.02em;color:var(--mute);pointer-events:none;transition:transform .5s var(--out),font-size .5s var(--out),top .5s var(--out)}
.field input:focus+label,.field input:not(:placeholder-shown)+label,.field textarea:focus+label,.field textarea:not(:placeholder-shown)+label{top:8px;font-size:13px;font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase}
.field::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--out)}
.field:focus-within::after{transform:scaleX(1)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 10px}
.chips button{padding:11px 18px;border-radius:999px;border:1px solid var(--line);font-size:15px;transition:all .3s}
.chips button.on{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.faq details{border-top:1px solid var(--line);padding:20px 0}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;font-size:21px;font-weight:600;letter-spacing:-.015em}
.faq summary::after{content:"+";font-weight:400;transition:transform .4s var(--out)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin-top:12px;color:var(--mute);max-width:520px}
.clock{font-weight:800;font-size:clamp(48px,6vw,96px);letter-spacing:-.06em;line-height:.9}

/* ---------- page transition ---------- */
.curtain{position:fixed;inset:0;z-index:120;background:var(--ink);display:grid;place-items:center;pointer-events:none;transform:translateY(0);transition:transform .9s var(--inout)}
.curtain svg{width:80px;color:var(--lime)}
.curtain.up{transform:translateY(-100%)}
.curtain.down{transform:translateY(0);transition-duration:.6s}
.curtain.prep{transform:translateY(100%);transition:none}

/* ---------- cursor ---------- */
.cur{position:fixed;left:0;top:0;width:12px;height:12px;border-radius:50%;background:var(--lime);mix-blend-mode:difference;pointer-events:none;z-index:110;transform:translate(-50%,-50%);transition:width .35s var(--out),height .35s var(--out)}
.cur.big{width:64px;height:64px}
@media (hover:none){.cur{display:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  .rv{opacity:1;transform:none}
}

/* ---------- fixes after review ---------- */
html{overflow-x:clip}
.cur{opacity:0;transition:opacity .3s,width .35s var(--out),height .35s var(--out)}
.cur.live{opacity:1}
.hero .mark{top:38%;width:min(34vw,456px)}
.hero .row{flex-wrap:wrap}
.badge{white-space:nowrap}
footer a{overflow-wrap:anywhere}
@media (max-width:760px){
  .hero .mark{top:34%;width:min(52vw,296px)}
  .scene .count{top:96px;bottom:auto;font-size:56px}
  .scene .cap{right:var(--pad);bottom:28px}
  .svc{grid-template-columns:34px 1fr;gap:12px}
  .svc>span:not(.mono){grid-column:2;font-size:14px}
  .hscroll .head{flex-wrap:wrap;gap:16px}
}