/* AISO — site styles. Colour tokens are at the top (:root). */
/* ============ tokens ============ */
:root{
  --bg:#000;--fg:#f6f6f6;--ink:#0b0b0b;--paper:#f6f6f6;--red:#ff2b2b;
  --muted:#8a8a8a;--line:rgba(246,246,246,.16);--line-ink:rgba(11,11,11,.14);
  --display:"Lexend","Helvetica Neue",Arial,sans-serif;--mono:"Geist Mono",ui-monospace,Menlo,monospace;
  --gut:clamp(20px,4.45vw,64px);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#000;--fg:#f6f6f6}}
:root[data-theme="dark"]{--bg:#000;--fg:#f6f6f6}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--fg);font-family:var(--display);-webkit-font-smoothing:antialiased;overflow-x:hidden}
html.i-load,html.i-load body{overflow:hidden}
::selection{background:var(--red);color:#000}
a{color:inherit}
img,svg,canvas{display:block}
.mono{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.red{color:var(--red)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--red);outline-offset:4px}

/* ============ fixed layers ============ */
#flow{position:fixed;inset:0;z-index:0;pointer-events:none;transition:opacity .6s ease}
#disc{position:fixed;inset:0;z-index:2;background:var(--paper);color:var(--ink);pointer-events:none;clip-path:circle(0px at 50% 50%);will-change:clip-path}
#disc .star{position:absolute;left:0;top:0;width:100px;height:100px;transform-origin:50% 50%}
#disc .story{position:absolute;inset:0;display:grid;align-content:center;padding:0 var(--gut);opacity:0}
.story .k{margin-bottom:clamp(20px,3vh,36px);color:#6b6b6b}
.story p{margin:0;max-width:24ch;font-size:clamp(30px,4.6vw,78px);font-weight:300;line-height:1.08;letter-spacing:-.035em}
.story p .w{opacity:.14;transition:opacity .35s ease}
.story p .w.on{opacity:1}
.story p .r{color:var(--red)}
.story .sig-mini{position:absolute;right:var(--gut);bottom:clamp(24px,6vh,60px);color:#6b6b6b}

/* ============ nav ============ */
.nav{position:fixed;left:0;right:0;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:clamp(20px,3.2vw,40px) var(--gut) 0;pointer-events:none;transition:color .4s ease}
.nav>*{pointer-events:auto}
.nav-logo{display:block;width:clamp(76px,6.3vw,90px)}
.nav-logo svg{width:100%;height:auto}
.nav-logo .lf{fill:currentColor;transition:fill .4s}
.nav ul{display:flex;gap:clamp(22px,3.1vw,44px);list-style:none;margin:0;padding:0}
.nav a{text-decoration:none;position:relative}
.nav ul a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1.5px;background:var(--red);transform:scaleX(0);transform-origin:right;transition:transform .45s cubic-bezier(.7,0,.2,1)}
.nav ul a:hover::after{transform:scaleX(1);transform-origin:left}
.nav.light{color:var(--ink)}
.nav .menu{display:none}
html.i-load .nav ul,html.i-load .nav .menu{opacity:0}
html.i-logo .nav-logo{opacity:0}
.nav ul,.nav .menu{transition:opacity .8s ease .2s}
.where{position:fixed;left:var(--gut);bottom:clamp(18px,3vh,32px);z-index:20;color:var(--muted);display:flex;gap:10px;align-items:center;mix-blend-mode:normal;transition:color .4s,opacity .6s}
.where b{color:var(--red);font-weight:500}
.where.light{color:#6b6b6b}
html.i-load .where{opacity:0}

/* ============ hero / intro ============ */
#intro{position:relative;z-index:4;height:430vh}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.hero-k{position:absolute;color:var(--muted);line-height:1.8}
.hero-k.l{left:var(--gut);top:clamp(110px,15vh,140px)}
.hero-k.r{right:var(--gut);top:clamp(110px,15vh,140px);text-align:right}
.hero-h{position:absolute;left:var(--gut);bottom:clamp(110px,16vh,150px);margin:0;font-weight:200;font-size:clamp(54px,6.7vw,124px);line-height:1;letter-spacing:-.045em}
.hero-h .ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.hero-h .ln>span{display:block}
.hero-h em{font-style:normal;color:var(--red);font-weight:300}
.hero-sub{position:absolute;left:var(--gut);bottom:clamp(70px,10.5vh,100px);color:var(--muted)}
.hero-sig{position:absolute;right:var(--gut);bottom:clamp(64px,10vh,96px);width:clamp(170px,19vw,290px);color:var(--red)}
.hero-cue{position:absolute;right:var(--gut);bottom:clamp(18px,3vh,32px);color:var(--muted);display:flex;gap:12px;align-items:center}
.hero-cue i{width:1.5px;height:26px;background:var(--red);transform-origin:top;animation:drip 2.2s cubic-bezier(.6,0,.4,1) infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
html.i-load .hero-h .ln>span{transform:translateY(110%)}
html.i-load .hero-k,html.i-load .hero-sub,html.i-load .hero-cue{opacity:0}
.hero-fade{transition:opacity 1s ease}

/* ============ signature (glitch stamp) ============ */
.sig{position:relative;display:block}
.sig.hero-sig{position:absolute}
.sig svg{width:100%;height:auto;display:block}
.sig .sl{position:absolute;inset:0}
.sig .sl svg{position:absolute;inset:0}
.sig.pre{opacity:0}

/* ============ sections ============ */
section{position:relative}
.wrap{padding:0 var(--gut)}
.kick{display:flex;gap:14px;align-items:center;color:var(--muted)}
.kick::before{content:"";width:28px;height:1.5px;background:var(--red)}
.h2{margin:0;font-weight:300;font-size:clamp(40px,5.6vw,96px);line-height:1;letter-spacing:-.045em}
.h2 em{font-style:normal;color:var(--red)}
[data-split] .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
[data-split] .w>span{display:inline-block}


/* process — concept 03: the idea becomes a product on screen */
#process{z-index:4;height:640vh}
.pstage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
#v3L{position:fixed;inset:0;z-index:3;pointer-events:none;display:none}
.v3f{position:absolute;left:0;top:0;transform-origin:50% 50%;will-change:transform}
.v3f .box{position:absolute;inset:0;border-radius:var(--rad,16px);background:var(--bgc,#060606);border:1px solid var(--bd,rgba(246,246,246,.5));overflow:hidden}
.v3f svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.v3f .ol{fill:none;stroke:rgba(246,246,246,.72);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1;vector-effect:non-scaling-stroke}
.v3f .fl{fill:#f6f6f6;transform-box:fill-box;transform-origin:0 50%}
.v3f .fl.g{fill:#6d6d6d}.v3f .fl.r{fill:var(--red)}
.v3f .tab rect{fill:transparent}.v3f .tab text{fill:#7a7a7a;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;font-weight:500}
.v3f .tab.on rect{fill:#f6f6f6}.v3f .tab.on text{fill:#0b0b0b}
.v3f .tab.done text{fill:#cfcfcf}
.v3f .live text{fill:#f6f6f6;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;font-weight:500}
.v3f .chk{fill:none;stroke:var(--red);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.v3f .curve{fill:none;stroke:var(--red);stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:1;vector-effect:non-scaling-stroke}
.v3f .code text{font-family:var(--mono);font-size:var(--cfs,11px);fill:#9a9a9a;letter-spacing:.02em}
.v3f .code text.k{fill:#f6f6f6}.v3f .code text.r{fill:var(--red)}
#v3S{position:absolute;inset:0;width:100%;height:100%}
.v3-n{position:absolute;right:var(--gut);top:clamp(100px,13.5vh,132px);color:var(--red);opacity:0;text-align:right}
.v3-n b{display:block;color:var(--fg);font-family:var(--display,Lexend);font-weight:200;font-size:clamp(34px,3.4vw,52px);letter-spacing:-.04em;line-height:1;margin-top:6px;font-variant-numeric:tabular-nums}
.v3-star{position:absolute;left:0;top:0;width:60px;height:60px;margin:-30px 0 0 -30px;will-change:transform}
.v3-star svg{width:100%;height:100%}
.v3-h{position:absolute;left:0;right:0;top:clamp(92px,12vh,124px);text-align:center}
.v3-ttl{position:relative;height:clamp(56px,6.4vw,92px);overflow:hidden}
.v3-ttl span{position:absolute;left:0;right:0;top:0;font-weight:200;font-size:clamp(52px,6vw,88px);line-height:1;letter-spacing:-.055em;will-change:transform}
.v3-ttl span i{font-style:normal;color:var(--red)}
.v3-d{position:relative;height:28px;margin-top:10px;overflow:hidden}
.v3-d p{position:absolute;left:0;right:0;top:0;margin:0;color:#bdbdbd;font-weight:300;font-size:clamp(15px,1.15vw,18px);line-height:1.5;will-change:transform}
.v3-k{position:absolute;left:var(--gut);top:clamp(96px,13vh,128px)}
@media (max-width:820px){
  .v3-h{top:96px;left:var(--gut);right:var(--gut);text-align:left}
  .v3-ttl span{right:auto}.v3-d{height:68px}.v3-d p{right:auto}
  .v3-k{display:none}
  .v3-n{right:auto;left:var(--gut);top:auto;bottom:4vh;text-align:left}
  .v3-n b{font-size:30px}
}

/* review — exploded view, then the pen-written sign-off */
#sign{position:absolute;inset:0;z-index:6;background:var(--red);color:var(--ink);opacity:0;pointer-events:none}
#sign .big{position:absolute;left:6vw;top:15vh;width:88vw;color:var(--ink)}
#sign .big svg{width:100%;height:auto;display:block;overflow:visible}
#sign .pen mask path{stroke-dasharray:1;stroke-dashoffset:1}
#sign .cap{position:absolute;left:var(--gut);bottom:clamp(40px,8vh,72px);margin:0;font-weight:300;font-size:clamp(40px,4.6vw,72px);line-height:1;letter-spacing:-.045em;opacity:0;will-change:transform,opacity}
#sign>.mono{position:absolute;right:var(--gut);bottom:clamp(46px,8.6vh,80px);opacity:0}
@media (max-width:820px){#sign .big{top:26vh;left:5vw;width:90vw}}
#review{z-index:4;background:transparent}
.rstage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}

/* review — 06 v2: the product from the Scale wall is carried in, taken apart layer by layer, closed, and becomes the red sign-off */
#review{height:740vh}
.r6-hd{position:absolute;left:var(--gut);top:clamp(92px,12vh,124px);z-index:3}
.r6-hd h2{margin:14px 0 0;font-weight:200;font-size:clamp(40px,4.4vw,72px);line-height:1;letter-spacing:-.05em}
.r6-hd h2 em{font-style:normal;color:var(--red)}
.r6-sc{position:absolute;inset:0;z-index:1;perspective:1800px;perspective-origin:50% 40%}
.r6-st{position:absolute;left:0;top:0;transform-style:preserve-3d;will-change:transform}
.r6-ly{position:absolute;inset:0;border-radius:16px;transform-style:preserve-3d;will-change:transform,opacity}
.r6-ly svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.r6-ly.base{background:#060606;border:1px solid rgba(255,43,43,.95)}
.r6-ly.on{box-shadow:0 0 0 1.5px var(--red),0 0 40px rgba(255,43,43,.25)}
.r6-ly .scan{position:absolute;left:0;right:0;height:1.5px;background:var(--red);box-shadow:0 0 12px rgba(255,43,43,.8);opacity:0}
.r6-ls{position:absolute;right:var(--gut);top:50%;transform:translateY(-50%);display:grid;gap:clamp(14px,2.4vh,26px);width:min(330px,26vw);z-index:3}
.r6-ls div{display:grid;grid-template-columns:34px 1fr 20px;align-items:baseline;color:#555;transition:color .4s}
.r6-ls div b{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.14em;color:inherit}
.r6-ls div span{font-weight:300;font-size:clamp(17px,1.5vw,23px);letter-spacing:-.02em}
.r6-ls div small{display:block;margin-top:4px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#4a4a4a}
.r6-ls div i{font-style:normal;color:var(--red);opacity:0;transition:opacity .3s}
.r6-ls div.on{color:var(--fg)}.r6-ls div.on b{color:var(--red)}.r6-ls div.on small{color:#9a9a9a}
.r6-ls div.done{color:#9a9a9a}.r6-ls div.done i{opacity:1}
@media (max-width:820px){.r6-ls{left:var(--gut);right:var(--gut);top:auto;bottom:5vh;transform:none;width:auto;gap:8px}.r6-ls div span{font-size:15px}.r6-ls div small{display:none}}

/* services */
#services{z-index:5;background:var(--paper);color:var(--ink);padding:clamp(110px,16vh,180px) 0 clamp(100px,14vh,160px)}
.svc-head{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:clamp(50px,8vh,90px)}
.svc-head p{margin:0;max-width:40ch;justify-self:end;color:#4a4a4a;font-weight:300;font-size:clamp(16px,1.25vw,19px);line-height:1.55}
.svc{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-ink)}
.svc li{position:relative;border-bottom:1px solid var(--line-ink);overflow:hidden}
#services .kick{color:#6b6b6b}
.svc a{position:relative;z-index:1;display:grid;grid-template-columns:80px 1.1fr 1fr 60px;gap:24px;align-items:center;padding:clamp(24px,3.6vh,38px) var(--gut);text-decoration:none;transition:color .5s cubic-bezier(.7,0,.2,1)}
.svc li::before{content:"";position:absolute;inset:0;background:var(--red);transform:scaleY(0);transform-origin:bottom;transition:transform .55s cubic-bezier(.7,0,.2,1)}
.svc li:hover::before{transform:scaleY(1)}
.svc li:hover a{color:var(--ink)}
.svc .n{color:var(--muted);transition:color .5s}
.svc li:hover .n{color:var(--ink)}
.svc .t{font-weight:300;font-size:clamp(30px,3.6vw,62px);letter-spacing:-.04em;line-height:1;transition:transform .55s cubic-bezier(.7,0,.2,1)}
.svc li:hover .t{transform:translateX(18px)}
.svc .d{color:#4a4a4a;font-weight:300;font-size:clamp(15px,1.15vw,18px);line-height:1.5;max-width:38ch;transition:color .5s}
.svc li:hover .d{color:var(--ink)}
.svc .ar{justify-self:end;width:44px;height:44px;border-radius:50%;border:1.5px solid currentColor;display:grid;place-items:center;transition:transform .55s cubic-bezier(.7,0,.2,1)}
.svc li:hover .ar{transform:rotate(-45deg)}
.svc .ar svg{width:16px;height:16px}

/* work — stacked cards */
#work{z-index:5;background:var(--bg);padding:clamp(80px,12vh,140px) 0 clamp(60px,10vh,120px)}
.work-head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:clamp(40px,7vh,80px)}
.work-head p{margin:0;max-width:34ch;color:#bdbdbd;font-weight:300;font-size:clamp(15px,1.15vw,18px);line-height:1.55}
.cards{position:relative}
.card{position:sticky;top:calc(12vh + var(--i) * 22px);height:min(74vh,720px);margin:0 var(--gut) 6vh}
.card-in{position:relative;height:100%;display:grid;grid-template-columns:1.25fr 1fr;border-radius:clamp(14px,1.6vw,26px);overflow:hidden;background:#0d0d0d;border:1px solid var(--line);transform-origin:50% 0;transform:translateZ(0)}
.card-in::after{content:"";position:absolute;inset:0;background:#000;opacity:var(--dim,0);pointer-events:none}
.card canvas{width:100%;height:100%}
.card .meta{display:flex;flex-direction:column;justify-content:space-between;padding:clamp(24px,3vw,48px);border-left:1px solid var(--line)}
.card .meta h3{margin:14px 0 0;font-weight:300;font-size:clamp(30px,3.2vw,56px);letter-spacing:-.04em;line-height:1}
.card .meta p{margin:16px 0 0;color:#bdbdbd;font-weight:300;font-size:clamp(15px,1.1vw,18px);line-height:1.55;max-width:34ch}
.card .meta .row{display:flex;justify-content:space-between;color:var(--muted)}
.card .pill{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border:1.5px solid var(--line);border-radius:999px;color:var(--fg);text-decoration:none;align-self:flex-start;transition:background .3s,color .3s,border-color .3s}
.card .pill:hover{background:var(--fg);color:var(--ink);border-color:var(--fg)}
.card.cta .card-in{background:var(--red);border-color:var(--red);color:var(--ink)}
.card.cta .meta{border-color:rgba(0,0,0,.2)}
.card.cta .meta p,.card.cta .meta .row{color:var(--ink)}
.card.cta .pill{border-color:var(--ink);color:var(--ink)}
.card.cta .pill:hover{background:var(--ink);color:var(--red)}

/* faq — light */
#faq{z-index:6;background:var(--red);color:var(--ink);padding:clamp(110px,16vh,180px) 0}
#faq .kick{color:rgba(11,11,11,.7)}
#faq .kick::before{background:var(--ink)}
#faq .h2 em{color:var(--paper)}
.faq-grid{display:grid;grid-template-columns:1fr 1.35fr;gap:clamp(30px,6vw,110px)}
.qa{border-top:1px solid rgba(11,11,11,.28)}
.qa:last-child{border-bottom:1px solid rgba(11,11,11,.28)}
.qa button{all:unset;box-sizing:border-box;width:100%;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:30px;padding:clamp(22px,3.2vh,32px) 0;font-weight:400;font-size:clamp(20px,1.7vw,28px);letter-spacing:-.02em}
.qa .pm{position:relative;width:20px;height:20px;flex:none}
.qa .pm::before,.qa .pm::after{content:"";position:absolute;left:0;top:9px;width:20px;height:2px;background:currentColor;transition:transform .5s cubic-bezier(.7,0,.2,1),background .3s}
.qa .pm::after{transform:rotate(90deg)}
.qa.open .pm::after{transform:rotate(0)}
.qa.open .pm::before,.qa.open .pm::after{background:var(--paper)}
.qa .ans{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s cubic-bezier(.7,0,.2,1)}
.qa.open .ans{grid-template-rows:1fr}
.qa .ans>div{overflow:hidden}
.qa .ans p{margin:0 0 clamp(22px,3vh,32px);max-width:56ch;color:rgba(11,11,11,.82);font-weight:300;font-size:clamp(16px,1.2vw,19px);line-height:1.6}


/* contact — the red door: half the screen is red; click it and it opens into the project form */
#contact{position:relative;z-index:3;background:var(--bg);height:100vh;height:100svh;overflow:hidden}
.c5-l{position:absolute;left:var(--gut);top:50%;transform:translateY(-50%);width:42%}
#contact .h2{margin-top:28px;font-size:clamp(50px,6.2vw,110px);font-weight:200}
.c5-l p{margin:26px 0 0;max-width:30ch;color:#bdbdbd;font-weight:300;font-size:clamp(16px,1.2vw,19px);line-height:1.55}
.c5-d{position:absolute;top:0;bottom:0;right:0;width:46%;background:var(--red);color:var(--ink);text-decoration:none;overflow:hidden;will-change:width}
.c5-d .ar{position:absolute;left:clamp(26px,4vw,64px);top:clamp(80px,14vh,140px);width:clamp(120px,16vw,260px);will-change:transform}
.c5-d .ar svg{width:100%;height:auto;overflow:visible}
.c5-d .ar path{fill:none;stroke:#0b0b0b;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.c5-d .tx{position:absolute;left:clamp(26px,4vw,64px);bottom:clamp(40px,8vh,80px);font-weight:200;font-size:clamp(46px,5.4vw,96px);line-height:.95;letter-spacing:-.055em;white-space:nowrap}
.c5-d .mono{position:absolute;right:clamp(20px,3vw,40px);bottom:clamp(46px,9vh,90px)}
@media (max-width:820px){.c5-l{top:16vh;transform:none;width:auto;right:var(--gut)}.c5-d{top:auto;left:0;width:auto;height:44%}.c5-d .ar{top:28px;width:96px}.c5-d .tx{font-size:44px;bottom:32px}}

/* the project form: the door opens to fill the screen */
.cf{position:fixed;inset:0;z-index:90;background:var(--red);color:var(--ink);clip-path:inset(0 0 0 100%);visibility:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.cf.open{visibility:visible}
.cf-in{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,6vw,110px);min-height:100%;padding:clamp(90px,13vh,130px) var(--gut) clamp(40px,8vh,80px)}
.cf-x{position:fixed;right:var(--gut);top:clamp(22px,4vh,34px);z-index:2;display:flex;align-items:center;gap:10px;padding:10px 14px;border:1.5px solid var(--ink);border-radius:999px;background:var(--red);color:var(--ink);font:inherit;cursor:pointer}
@media (hover:hover){.cf-x:hover{background:var(--ink);color:var(--red)}}
.cf h2{margin:18px 0 0;font-weight:200;font-size:clamp(46px,5.6vw,96px);line-height:.98;letter-spacing:-.055em}
.cf .lead{margin:24px 0 0;max-width:32ch;font-weight:300;font-size:clamp(16px,1.25vw,19px);line-height:1.55;color:rgba(11,11,11,.8)}
.cf .kick{color:rgba(11,11,11,.7)}.cf .kick::before{background:var(--ink)}
.cf form{display:grid;gap:clamp(22px,3.4vh,34px);align-content:start}
.cf .row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,36px)}
.cf label,.cf fieldset{display:block;margin:0;padding:0;border:0;min-width:0}
.cf legend.lb{width:100%;padding:0}
.cf .lb{display:flex;justify-content:space-between;font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(11,11,11,.72)}
.cf .lb em{font-style:normal;color:var(--ink)}
.cf input[type=text],.cf input[type=email],.cf textarea{width:100%;margin-top:8px;padding:8px 0 10px;border:0;border-bottom:1.5px solid var(--ink);border-radius:0;background:transparent;color:var(--ink);font:300 clamp(20px,1.8vw,28px)/1.25 Lexend,sans-serif;letter-spacing:-.02em;outline:none;transition:border-color .3s}
.cf textarea{min-height:120px;resize:vertical}
.cf input::placeholder,.cf textarea::placeholder{color:rgba(11,11,11,.4)}
.cf input:focus,.cf textarea:focus{border-bottom-color:#f6f6f6}
.cf .chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.cf .chips label{position:relative}
.cf .chips input{position:absolute;opacity:0;pointer-events:none}
.cf .chips span{display:inline-block;padding:11px 16px;border:1.5px solid var(--ink);border-radius:999px;font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:background .25s,color .25s}
.cf .chips input:checked+span{background:var(--ink);color:var(--red)}
.cf .chips input:focus-visible+span{outline:2px solid #f6f6f6;outline-offset:2px}
.cf .err{display:none;margin-top:8px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#f6f6f6}
.cf .bad .err{display:block}
.cf .bad input,.cf .bad textarea{border-bottom-color:#f6f6f6}
.cf .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf .send{display:flex;justify-content:space-between;align-items:center;gap:16px;width:100%;padding:22px 28px;border:0;border-radius:999px;background:var(--ink);color:var(--fg);font-family:var(--mono);font-weight:600;font-size:13px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:background .3s,color .3s}
@media (hover:hover){.cf .send:hover{background:#f6f6f6;color:var(--ink)}}
.cf .send[disabled]{opacity:.6;cursor:wait}
.cf .note{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(11,11,11,.7);min-height:1.4em}
.cf .done{display:none;align-content:center;gap:20px}
.cf.sent form{display:none}.cf.sent .done{display:grid}
.cf .done h3{margin:0;font-weight:200;font-size:clamp(56px,7vw,120px);line-height:.95;letter-spacing:-.06em}
.cf .done p{margin:0;max-width:34ch;font-weight:300;font-size:clamp(17px,1.3vw,20px);line-height:1.5}
.cf .done .sg{width:min(360px,70%);color:var(--ink)}
.cf .done .sg svg{width:100%;height:auto;display:block}
@media (max-width:820px){.cf-in{grid-template-columns:1fr;padding-top:90px}.cf .row{grid-template-columns:1fr}}

/* footer */
footer{position:relative;z-index:6;background:var(--bg);padding:clamp(70px,10vh,110px) 0 clamp(26px,4vh,40px);border-top:1px solid var(--line)}
.foot-top{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.foot-top nav{display:flex;gap:clamp(22px,3vw,44px)}
.foot-top nav a{text-decoration:none}
.foot-top nav a:hover{color:var(--red)}
.foot-sig{width:clamp(220px,26vw,400px);color:var(--red)}
.wordmark{position:relative;margin-top:clamp(40px,7vh,80px);width:100%}
.wordmark svg{width:100%;height:auto;display:block;overflow:visible}
.wm .lt{fill:var(--fg);transition:fill .35s}
.wm .lt.on{fill:var(--red)}
.wm .lt.on .st{fill:var(--fg)}
.wm .st{transition:fill .35s}
.wm-hits{position:absolute;inset:0}
.wm-hit{position:absolute;display:block;cursor:pointer;-webkit-tap-highlight-color:transparent}
.wm-hit .tag{position:absolute;left:50%;bottom:calc(100% + 6px);transform:translate(-50%,8px);padding:7px 12px;border-radius:999px;background:var(--red);color:var(--ink);white-space:nowrap;opacity:0;transition:opacity .3s,transform .4s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.wm-hit.on .tag{opacity:1;transform:translate(-50%,0)}
.foot-bot{display:flex;justify-content:space-between;gap:20px;margin-top:clamp(24px,4vh,40px);color:var(--muted);flex-wrap:wrap}

/* cursor */
.cur{position:fixed;left:0;top:0;z-index:100;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--red);pointer-events:none;transition:width .35s cubic-bezier(.7,0,.2,1),height .35s cubic-bezier(.7,0,.2,1),margin .35s cubic-bezier(.7,0,.2,1),opacity .3s}
.cur.big{width:46px;height:46px;margin:-23px 0 0 -23px;background:transparent;border:1.5px solid var(--red)}
@media (pointer:coarse){.cur{display:none}}

/* loader */
#loader{position:fixed;inset:0;z-index:100;display:none}
html.i-load #loader{display:block}
#cur{position:absolute;inset:0;background:#000;will-change:transform}
#cur::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--red);opacity:var(--edge,0)}
#word{position:absolute;left:0;right:0;top:50%;text-align:center;font-weight:700;letter-spacing:-.055em;white-space:nowrap;line-height:.8}
.hud{position:absolute;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#8a8a8a;white-space:nowrap}
.hud b{color:var(--red);font-weight:500}
#h1{left:var(--gut);top:34px}#h2{right:var(--gut);top:34px;font-variant-numeric:tabular-nums}#h3{left:var(--gut);bottom:34px}#h4{right:var(--gut);bottom:34px}
#ldot{position:absolute;left:0;top:0;border-radius:50%;background:var(--red);opacity:0}
#llogo{position:absolute;left:0;top:0;overflow:visible}
#llogo .lt,#llogo #lst,#llogo #lring{transform-box:fill-box;transform-origin:50% 50%}

/* ============ small screens ============ */
@media (max-width:820px){
  .nav ul{display:none}
  .nav .menu{display:block}
  .hero-k.r{display:none}
  .hero-h{bottom:150px;font-size:clamp(46px,13.5vw,64px)}
  .hero-sub{bottom:104px;font-size:10px;max-width:62vw;line-height:1.6}
  .hero-sig{width:120px;bottom:30px;right:auto;left:var(--gut)}
  .hero-cue span{display:none}
  .story p{font-size:clamp(28px,7.4vw,44px);max-width:none}
  .svc-head{grid-template-columns:1fr}
  .svc-head p{justify-self:start}
  .svc a{grid-template-columns:44px 1fr 44px;row-gap:10px}
  .svc .d{grid-column:2/3}
  .svc .ar{grid-row:1;grid-column:3}
  .work-head{flex-direction:column;align-items:flex-start}
  .card{height:auto;min-height:72vh}
  .card-in{grid-template-columns:1fr;grid-template-rows:42vh auto}
  .card .meta{border-left:0;border-top:1px solid var(--line);gap:26px}
  .faq-grid{grid-template-columns:1fr}
  .where{display:none}
}
@media (prefers-reduced-motion:reduce){.hero-cue i{animation:none}}
@media (max-width:820px){
  .ct{grid-template-columns:1fr;gap:64px}
  .corb{width:min(80vw,380px)}
  .wm-hit .tag{font-size:9px;padding:5px 9px}
}

#loader{display:block!important;background:transparent!important;pointer-events:none}
#LD{position:absolute;inset:0;overflow:hidden}
#LD>*{position:absolute}
#LD .bg{inset:0;background:#000}
#LD svg.lg{display:block;width:100%;height:auto;overflow:visible}
#LD .lg .w{fill:#f6f6f6}#LD .lg .st{fill:#ff2b2b}
#LD .mask{overflow:hidden}

#LD .dot{left:0;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--red)}
#LD svg.rip{inset:0;width:100%;height:100%;overflow:visible}
#LD svg.rip circle{fill:none;stroke:var(--red);stroke-width:1.2}