/* Foundworks Digital Co. website.
   Same design language as the Foundworks apps (IBM Plex, square edges, the F mark, one electric blue).
   Calm everywhere but the home page: there the liquid-metal F sits behind the hero and the close, and each concept
   plays a scroll-linked entrance as the page moves past it (see "home" at the end; reduced motion turns all of it off).
   Nothing is pinned anywhere, and elsewhere content is simply there when you scroll to it. */
:root{
  --bg:#050608; --bg-2:#08090C; --panel:#0C0E12; --panel-2:#11141A;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.16);
  --text:#F2F3F5; --paper:#F6F1EA; --muted:#8E939C; --dim:#5D626B;
  --blue:#4589FF; --blue-2:#78A9FF; --blue-ink:#0F62FE;
  --sans:"IBM Plex Sans",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --gut:clamp(20px,4.2vw,64px); --max:1440px; --nav:72px;
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{background:var(--bg);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;min-height:100dvh}
img,svg,video,canvas,iframe{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
::selection{background:var(--blue);color:#fff}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.skip{position:fixed;left:12px;top:-60px;z-index:200;background:var(--paper);color:var(--bg);padding:10px 14px;font-weight:500}
.skip:focus{top:12px}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- the metal F (home page only: behind the hero and the close) ---------- */
#metal{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:0;transition:opacity .6s ease}
#metal.on{opacity:1}
.metal-fallback{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(60% 50% at 70% 45%,rgba(69,137,255,.16),transparent 70%),radial-gradient(40% 40% at 20% 80%,rgba(246,241,234,.05),transparent 70%),var(--bg)}
main{position:relative;z-index:2}
.solid{background:var(--bg);position:relative}

/* ---------- type ---------- */
.k{font:500 11.5px/1 var(--mono);letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
.k b{color:var(--blue-2);font-weight:500}
.display{font-weight:300;font-size:clamp(46px,8.2vw,138px);line-height:.94;letter-spacing:-.045em;color:var(--paper)}
.h2{font-weight:300;font-size:clamp(36px,5.2vw,82px);line-height:.98;letter-spacing:-.035em;color:var(--paper)}
.lede{font-size:clamp(17px,1.35vw,20px);line-height:1.55;color:var(--muted);max-width:56ch;text-wrap:pretty}
.display,.h2{text-wrap:balance}
.ln{display:block}
.ln>span{display:block}
.ln.sub{font-size:max(22px,.4em);line-height:1.15;letter-spacing:-.02em;color:#B4B9C1;margin-top:.5em}

/* ---------- buttons and links ---------- */
.btn{display:inline-flex;align-items:center;gap:12px;height:54px;padding:0 24px;white-space:nowrap;
  background:var(--paper);color:var(--bg);font:500 15.5px/1 var(--sans);letter-spacing:.005em;
  transition:background .15s ease,color .15s ease,box-shadow .15s ease}
.btn:hover{background:var(--blue-ink);color:#fff}
.btn i{font-size:18px}
.btn.ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--line-2)}
.btn.ghost:hover{background:var(--paper);color:var(--bg);box-shadow:inset 0 0 0 1px var(--paper)}
.btn.sm{height:42px;padding:0 16px;font-size:14px;gap:9px}
.btn.off{opacity:.42;pointer-events:none}
.tlink{display:inline-block;font-weight:500;color:var(--text);padding:4px 0;text-decoration:underline;text-decoration-color:var(--line-2);text-decoration-thickness:1px;text-underline-offset:7px;transition:text-decoration-color .15s ease}
.tlink:hover{text-decoration-color:var(--blue)}

/* ---------- nav ---------- */
.nav{position:fixed;left:0;right:0;top:0;z-index:80;height:var(--nav);transition:background .3s ease,box-shadow .3s ease}
.nav .wrap{height:100%;display:flex;align-items:center;gap:28px}
.nav[data-stuck="true"]{background:rgba(5,6,8,.94);box-shadow:0 1px 0 var(--line)}
.brand{display:flex;align-items:center;gap:12px;font:600 13px/1 var(--mono);letter-spacing:.3em;color:var(--paper)}
.brand svg{width:17px;height:auto;fill:var(--paper)}
.brand small{font-weight:400;color:var(--dim);letter-spacing:.24em;padding-left:12px;border-left:1px solid var(--line-2)}
.nav-links{display:flex;gap:30px;margin-left:auto;font-size:14.5px}
.nav-links a{color:var(--muted);transition:color .2s;position:relative;padding:6px 0}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--text)}
.nav-links a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--blue)}
.nav-cta{margin-left:8px}
.nav-tog{display:none;margin-left:auto;width:44px;height:44px;align-items:center;justify-content:center}
.nav-tog span{display:block;width:22px;height:1.5px;background:var(--text);position:relative;transition:transform .3s var(--ease),background .2s}
.nav-tog span::before,.nav-tog span::after{content:"";position:absolute;left:0;width:22px;height:1.5px;background:var(--text);transition:transform .3s var(--ease)}
.nav-tog span::before{top:-7px}.nav-tog span::after{top:7px}
.nav-tog[aria-expanded="true"] span{background:transparent}
.nav-tog[aria-expanded="true"] span::before{transform:translateY(7px) rotate(45deg)}
.nav-tog[aria-expanded="true"] span::after{transform:translateY(-7px) rotate(-45deg)}

/* ---------- home hero (a normal section: one screen tall, scrolls away like any other) ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;padding:calc(var(--nav) + 40px) 0 clamp(40px,8vh,96px)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(5,6,8,.82) 0%,rgba(5,6,8,.55) 38%,rgba(5,6,8,0) 66%),linear-gradient(0deg,rgba(5,6,8,.7) 0%,rgba(5,6,8,0) 45%)}
.hero .wrap{position:relative}
.hero .k,.page-hero .k{display:flex;align-items:center;gap:14px}
.hero .k::before,.page-hero .k::before{content:"";width:28px;height:1px;background:var(--blue)}
.hero .k{margin-bottom:28px}
.hero .display{max-width:13.5ch}

/* ---------- page heroes ---------- */
.page-hero{position:relative;padding:calc(var(--nav) + clamp(72px,14vh,160px)) 0 clamp(48px,8vh,96px)}
.page-hero .k{margin-bottom:26px}
.page-hero .display{font-size:clamp(44px,6.6vw,108px);max-width:15ch}
.page-hero .lede{margin-top:30px}

/* ---------- sections ---------- */
.sec{position:relative;padding:clamp(96px,14vh,160px) 0}
.sec.tight{padding-top:0}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:end;margin-bottom:clamp(48px,8vh,88px)}
.sec-head .k{margin-bottom:22px}
.sec-head .lede{justify-self:end}

/* ---------- showcase (live concept) ---------- */
/* a normal section: no pinning, the page always scrolls */
.showcase{position:relative;background:var(--bg)}
.sc-pin{position:relative;display:grid;grid-template-columns:minmax(300px,.8fr) minmax(0,1.6fr);gap:clamp(30px,4vw,72px);align-items:center;padding:clamp(110px,16vh,170px) var(--gut) clamp(130px,18vh,190px)}
.sc-copy{position:relative;align-self:center}
.sc-copy .k{margin-bottom:20px}
.sc-copy .h2{font-size:clamp(34px,3.8vw,60px)}
.sc-text{margin-top:26px;color:var(--muted);font-size:clamp(16.5px,1.2vw,18px);line-height:1.6;max-width:42ch}
.sc-actions{margin-top:34px;display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.sc-stage{position:relative;height:min(74vh,720px);align-self:center}
.browser{position:absolute;left:0;top:0;width:88%;aspect-ratio:16/10.6;max-height:100%;background:#15171c;box-shadow:0 0 0 1px var(--line-2),0 60px 120px -30px rgba(0,0,0,.8),0 0 120px -40px rgba(69,137,255,.35);overflow:hidden}
.browser .bar{height:34px;display:flex;align-items:center;gap:7px;padding:0 13px;background:#1A1D23;border-bottom:1px solid var(--line)}
.browser .bar i{width:10px;height:10px;border-radius:50%;background:#3A3E46}
.browser .bar .url{margin:0 auto;font:400 11px/1 var(--mono);color:var(--muted);background:#0F1115;padding:6px 18px;letter-spacing:.06em}
.viewport{position:absolute;left:0;right:0;top:34px;bottom:0;overflow:hidden;background:#F2EFE8;overscroll-behavior:auto}
.viewport .strip{position:absolute;left:0;top:0;width:100%;will-change:transform;backface-visibility:hidden}
.viewport .strip .page{position:relative;z-index:1;display:block;width:100%;height:auto}
/* the hero film sits under the capture's see-through hole; its poster is the film's first frame */
.viewport .film{position:absolute;left:0;top:0;width:100%;aspect-ratio:16/10;overflow:hidden;background:#151b26 url(/media/cb/dusk-m-hero-1440.jpg) center/cover no-repeat}
.phone .viewport .film{aspect-ratio:390/844}
.viewport .film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .7s ease}
.viewport .film video.out{opacity:0}
.viewport .livepage{position:absolute;inset:0;overflow:hidden;background:#fff}
.viewport .livepage iframe{position:absolute;left:0;top:0;border:0;transform-origin:0 0;pointer-events:none}
/* the development line under a concept: version, last update, and recent change notes from Studio */
.sc-log{margin-top:22px}
.sc-live{display:flex;align-items:center;gap:10px;font:400 12px/1.4 var(--mono);letter-spacing:.08em;color:var(--dim);text-transform:uppercase}
.sc-live .dot{width:7px;height:7px;border-radius:50%;background:#42BE65;flex:none}
.sc-live .dot.busy{background:var(--blue);animation:fwpulse 1.2s ease-in-out infinite}
@keyframes fwpulse{50%{opacity:.35}}
.sc-notes{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px;font-size:14px;color:var(--muted)}
.sc-notes b{font:500 12px/1 var(--mono);color:var(--text);margin-right:4px}
.sc-notes span{color:var(--dim);font-size:12.5px}
.viewport .hdr{position:absolute;left:0;top:0;width:100%;height:auto;z-index:2;transition:opacity .35s ease}
.viewport .hdr.solid{opacity:0;box-shadow:0 2px 14px rgba(0,0,0,.08)}
.viewport.past .hdr.solid{opacity:1}
.viewport.past .hdr.top{opacity:0}
.phone{position:absolute;right:0;bottom:0;width:23%;min-width:150px;aspect-ratio:9/19.3;background:#0B0C0F;border-radius:0;padding:7px;box-shadow:0 0 0 1px var(--line-2),0 50px 100px -20px rgba(0,0,0,.85)}
.phone .viewport{inset:7px;top:7px}
.cap{position:absolute;left:0;bottom:-38px;font:400 11px/1.5 var(--mono);letter-spacing:.16em;color:var(--dim);text-transform:uppercase}
/* a clicked screen scrolls on its own; until then a small hint says how */
.viewport::after{content:"Click to scroll this site";position:absolute;left:50%;bottom:14px;z-index:3;transform:translateX(-50%);padding:7px 11px;background:rgba(12,14,18,.82);color:var(--paper);font:500 11px/1 var(--mono);letter-spacing:.08em;white-space:nowrap;opacity:0;transition:opacity .2s;pointer-events:none}
@media (hover:hover) and (pointer:fine){.viewport{cursor:pointer}.viewport:hover:not(.live)::after{opacity:1}.viewport.live{cursor:ns-resize;box-shadow:inset 0 0 0 2px var(--blue)}}

.page-hero+.showcase .sc-pin{padding-top:clamp(32px,6vh,72px)}

/* ---------- services ---------- */
.svc-sec{padding-top:clamp(24px,4vh,48px)}
.svc-list{border-top:1px solid var(--line)}
.svc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:16px clamp(24px,4vw,72px);align-items:baseline;padding:36px 0 40px;border-bottom:1px solid var(--line)}
.svc h3{font-weight:400;font-size:clamp(24px,2.3vw,34px);letter-spacing:-.02em;line-height:1.1;color:var(--paper)}
.svc>p{color:var(--muted);max-width:52ch}

/* ---------- contact ending ---------- */
.cta{position:relative;background:var(--bg);border-top:1px solid var(--line);padding:clamp(96px,15vh,170px) 0}
.cta .k{margin-bottom:26px}
.cta .display{font-size:clamp(40px,6vw,96px);max-width:16ch}
.cta .lede{margin-top:28px}
.cta-row{margin-top:40px;display:flex;gap:28px;align-items:center;flex-wrap:wrap}

/* ---------- generic content blocks ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(40px,6vw,120px)}
.split .k{margin-bottom:22px}
.prose p{color:var(--muted);font-size:clamp(17px,1.3vw,19px);max-width:60ch}
.prose p+p{margin-top:1.1em}
.people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.person{background:var(--bg);padding:clamp(28px,3vw,48px);display:flex;flex-direction:column}
.person h3{margin-top:0;font-weight:400;font-size:clamp(26px,2.4vw,36px);letter-spacing:-.02em;color:var(--paper)}
.person .role{margin-top:8px;font:500 11.5px/1.5 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--blue-2)}
.person p{margin-top:16px;color:var(--muted);max-width:44ch}
.case-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.case-facts div{padding:22px 20px 24px 0}
.case-facts div+div{padding-left:20px;border-left:1px solid var(--line)}
.case-facts dt{font:500 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.case-facts dd{margin:12px 0 0;color:var(--text);font-size:15.5px}
.note{font:400 12.5px/1.6 var(--mono);color:var(--dim);letter-spacing:.02em;max-width:72ch}

/* ---------- download ---------- */
.dl-sec,.contact-sec{padding-top:clamp(24px,4vh,48px)}
.dl-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(30px,5vw,90px);align-items:center;padding:clamp(28px,4vw,60px);box-shadow:inset 0 0 0 1px var(--line);background:var(--panel)}
.dl-card .icon{width:96px;height:96px}
.dl-card h2{margin-top:26px}
.dl-card .lede{margin-top:18px}
.dl-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.dl-meta{margin-top:16px;font:400 12px/1.6 var(--mono);color:var(--dim);letter-spacing:.03em}
.dl-steps{display:grid;gap:0;border-top:1px solid var(--line)}
.dl-steps div{display:grid;grid-template-columns:48px 1fr;gap:12px;padding:20px 0;border-bottom:1px solid var(--line);color:var(--muted)}
.dl-steps b{font:500 12px/1.7 var(--mono);color:var(--blue-2);letter-spacing:.1em}
.dl-steps strong{display:block;color:var(--text);font-weight:500;margin-bottom:2px}
.team-apps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.team-app{background:var(--bg);padding:26px 24px 28px;display:flex;flex-direction:column;gap:14px;min-height:220px}
.team-app img{width:52px;height:52px}
.team-app h3{font-weight:500;font-size:17px;color:var(--paper)}
.team-app p{font-size:14.5px;color:var(--muted);flex:1}
.team-app a{font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--blue-2);display:inline-flex;gap:8px;align-items:center}
.team-app a:hover{color:var(--paper)}
.team-foot{margin-top:34px;display:flex;gap:24px;align-items:center;flex-wrap:wrap}

/* ---------- contact ---------- */
.form{display:grid;gap:0;border-top:1px solid var(--line-2)}
.field{position:relative;border-bottom:1px solid var(--line-2)}
.field label{position:absolute;left:0;top:26px;font-size:17px;color:var(--muted);pointer-events:none;transition:transform .35s var(--ease),font-size .35s var(--ease),color .3s,top .35s var(--ease)}
.field input,.field textarea{width:100%;background:transparent;border:0;outline:0;color:var(--text);font:400 19px/1.5 var(--sans);padding:46px 0 16px;resize:vertical}
.field textarea{min-height:170px}
.field::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.field:focus-within::after{transform:scaleX(1)}
.field:focus-within label,.field.filled label{top:16px;font-size:12px;color:var(--blue-2);font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form-foot{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-top:30px}
.form-foot p{font-size:13.5px;color:var(--dim);max-width:44ch}
.form-foot p a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.enq-err{margin-top:20px;padding:14px 16px;color:#FFB3B8;box-shadow:inset 0 0 0 1px rgba(250,77,86,.45);font-size:15px}
.enq-err a{text-decoration:underline}
.enq-done{padding:50px 0;border-top:1px solid var(--line-2)}
.enq-done h2{font-weight:300;font-size:clamp(34px,4vw,56px);letter-spacing:-.03em;color:var(--paper)}
.enq-done p{margin-top:14px;color:var(--muted)}
.mail-big{display:inline-block;margin-top:18px;font-weight:300;font-size:clamp(22px,2.4vw,34px);letter-spacing:-.02em;color:var(--paper);background:linear-gradient(var(--blue),var(--blue)) 0 100%/100% 1px no-repeat;padding-bottom:4px;word-break:break-all}
.include{margin:20px 0 0;padding:0;list-style:none}
.muted-note{margin-top:22px;color:var(--muted);max-width:44ch}
.include-k{margin-top:56px}
.include li{position:relative;padding:14px 0 14px 26px;border-bottom:1px solid var(--line);color:var(--muted);font-size:15.5px}
.include li::before{content:"";position:absolute;left:0;top:24px;width:10px;height:1px;background:var(--blue)}

/* plan pages: start, quote, studio */
.opts{border:0;margin:0;padding:26px 0 18px;border-bottom:1px solid var(--line-2)}
.opts legend{padding:0;margin-bottom:14px;font:500 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.opts label{display:inline-block;margin:0 8px 10px 0;cursor:pointer}
.opts input{position:absolute;opacity:0;width:1px;height:1px}
.opts span{display:inline-block;padding:9px 14px;border:1px solid var(--line-2);color:var(--muted);font-size:14.5px;transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease)}
.opts label:hover span{color:var(--text);border-color:rgba(255,255,255,.3)}
.opts input:checked+span{color:var(--paper);border-color:var(--blue);background:rgba(69,137,255,.12)}
.opts input:focus-visible+span{outline:2px solid var(--blue);outline-offset:2px}
.steps-mini{counter-reset:s}
.steps-mini li{counter-increment:s;padding-left:38px}
.steps-mini li::before{content:counter(s,decimal-leading-zero);width:auto;height:auto;background:none;top:15px;font:500 11.5px/1.4 var(--mono);color:var(--blue-2);letter-spacing:.08em}
.price-big{font-weight:300;font-size:clamp(44px,5vw,72px);line-height:1;letter-spacing:-.04em;color:var(--paper)}
.price-big span{display:block;margin-top:14px;font:400 13px/1.5 var(--mono);letter-spacing:.06em;color:var(--muted)}
.avail{padding:0 0 28px;border-bottom:1px solid var(--line-2)}
.avail-h{margin-top:16px;font-weight:300;font-size:clamp(26px,2.6vw,36px);line-height:1.15;letter-spacing:-.025em;color:var(--paper)}
.avail-p{margin-top:12px;color:var(--muted);max-width:46ch}

/* ---------- legal docs ---------- */
.doc{padding:calc(var(--nav) + clamp(70px,12vh,140px)) 0 clamp(90px,14vh,160px)}
.doc .wrap{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.5fr);gap:clamp(30px,6vw,110px)}
.doc h1{font-weight:300;font-size:clamp(40px,5vw,72px);line-height:1;letter-spacing:-.035em;color:var(--paper)}
.doc .eff{margin-top:20px;font:400 12px/1.5 var(--mono);color:var(--dim);letter-spacing:.06em}
.doc .side{position:sticky;top:calc(var(--nav) + 40px);align-self:start}
.doc .body{color:var(--muted);font-size:16.5px;line-height:1.7;max-width:70ch}
.doc .body h2{margin:2.4em 0 .7em;font-weight:500;font-size:19px;color:var(--paper);letter-spacing:-.005em}
.doc .body h2:first-child{margin-top:0}
.doc .body p+p{margin-top:1em}
.doc .body ul{margin:.8em 0;padding-left:1.2em}
.doc .body li{margin:.45em 0}
.doc .body li::marker{color:var(--blue)}
.doc .body a{color:var(--text);text-decoration:underline;text-decoration-color:var(--blue);text-underline-offset:3px}
.doc .body strong{color:var(--text);font-weight:500}
.doc .body{min-width:0}
.doc .body a{overflow-wrap:anywhere}
.doc .body h3{margin:1.8em 0 .5em;font-weight:500;font-size:16.5px;color:var(--text)}
.doc .body h2,.doc .body h3{scroll-margin-top:calc(var(--nav) + 24px)}
.doc .body code{font:400 .86em var(--mono);color:var(--text);background:var(--panel-2);padding:.1em .35em}
.doc .body .tldr{border:1px solid var(--line-2);border-left:2px solid var(--blue);background:rgba(12,14,18,.72);padding:22px 24px;margin-bottom:2.2em}
.doc .body .tldr-k,.doc .body .toc-k{font:500 11.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--blue-2);margin-bottom:12px}
.doc .body .tldr ul{margin:0 0 .8em}
.doc .body .toc{margin-bottom:2.6em}
.doc .body .toc ol{margin:0;padding-left:1.6em;columns:2;column-gap:36px}
.doc .body .toc li{margin:.25em 0;break-inside:avoid}
.doc .body .toc li::marker{color:var(--dim);font-family:var(--mono);font-size:.85em}
.doc .body .toc a{text-decoration:none;color:var(--muted)}
.doc .body .toc a:hover{color:var(--text)}
.doc .body .tbl{overflow-x:auto;margin:1.2em 0;border:1px solid var(--line)}
.doc .body table{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.5}
.doc .body .tbl.wide table{min-width:560px}
.doc .body .cats{margin:1.2em 0;border-top:1px solid var(--line)}
.doc .body .cat{padding:18px 0;border-bottom:1px solid var(--line)}
.doc .body .cat h4{font-weight:500;font-size:15.5px;color:var(--text);margin-bottom:10px}
.doc .body .cat dl{display:grid;grid-template-columns:minmax(0,10.5em) minmax(0,1fr);gap:6px 18px;font-size:14.5px;line-height:1.55}
.doc .body .cat dt{font:500 10.5px/1.9 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.doc .body .cat dd{margin:0}
.doc .body .cat h4{scroll-margin-top:calc(var(--nav) + 24px)}
.doc .body p[id]{scroll-margin-top:calc(var(--nav) + 24px)}
.doc .body th,.doc .body td{text-align:left;vertical-align:top;padding:11px 14px;border-bottom:1px solid var(--line)}
.doc .body th{font:500 11px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text);background:var(--panel)}
.doc .body tr:last-child td{border-bottom:0}
@media (max-width:640px){.doc .body .toc ol{columns:1}.doc .body .tldr{padding:18px}.doc .body .cat dl{grid-template-columns:1fr;gap:2px}.doc .body .cat dd{margin-bottom:8px}}
@media print{
  #metal,.metal-fallback,.nav,footer,.cc,.skip{display:none!important}
  html,body{background:#fff!important;color:#000!important}
  .doc{padding:0!important}.doc .wrap{display:block!important}.doc .side{position:static!important}
  .doc h1,.doc .body,.doc .body h2,.doc .body h3,.doc .body strong,.doc .body a,.doc .body th,.doc .body code,.doc .body .toc a{color:#000!important;background:none!important}
  .doc .body .tldr,.doc .body .tbl{border-color:#999!important;background:none!important}
  .doc .body table{min-width:0}
}

/* ---------- footer ---------- */
.foot{position:relative;z-index:2;background:var(--bg);border-top:1px solid var(--line);padding:90px 0 36px;overflow:hidden}
.foot-top{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,.7fr));gap:40px}
.foot-top h4{font:500 11px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--dim);margin-bottom:20px}
.foot-top nav{display:grid;gap:12px;font-size:15px}
.foot-top nav a{color:var(--muted);transition:color .2s;width:max-content}
.foot-top nav a:hover{color:var(--text)}
.foot .mail{display:table;margin-top:22px;color:var(--paper);font-size:18px;background:linear-gradient(var(--blue),var(--blue)) 0 100%/100% 1px no-repeat;padding-bottom:3px}
.foot .mail+.mail{margin-top:10px}
.foot-top .social a{display:inline-flex;align-items:center;gap:10px;color:var(--text)}
.foot-top .social a svg{width:22px;height:22px;flex:none;color:var(--blue-2);transition:transform .5s var(--ease),color .3s}
.foot-top .social a:hover svg{transform:translateY(-2px);color:var(--paper)}
.built{display:flex;align-items:center;gap:28px 40px;flex-wrap:wrap;margin-top:64px;padding:26px 0;border-top:1px solid var(--line)}
.built-k{font:500 11px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--dim)}
.built ul{display:flex;flex-wrap:wrap;gap:22px 38px;list-style:none;margin:0;padding:0}
.built li{display:inline-flex;align-items:center;gap:10px;color:var(--muted);font-size:14.5px;letter-spacing:-.005em;transition:color .5s var(--ease)}
.built li svg{width:20px;height:20px;flex:none;transition:transform .6s var(--ease)}
.built li:hover{color:var(--paper)}
.built li:hover svg{transform:translateY(-2px)}
@media (max-width:640px){.built{margin-top:44px;gap:18px}.built ul{gap:16px 26px}}
.foot-bot{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-top:26px;border-top:1px solid var(--line);font:400 11.5px/1.7 var(--mono);color:var(--dim);letter-spacing:.04em}
.foot-bot .disc{max-width:90ch}

/* ---------- cookie banner ---------- */
.cc{position:fixed;left:16px;bottom:16px;z-index:120;width:min(440px,calc(100vw - 32px));background:#0C0E12;box-shadow:0 0 0 1px var(--line-2),0 30px 60px -20px rgba(0,0,0,.8);padding:20px}
.cc[hidden]{display:none}
.cc-t{font-size:14px;line-height:1.55;color:var(--muted)}
.cc-t a{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.cc-a{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.cc button{height:38px;padding:0 14px;font-size:13.5px;font-weight:500}
.cc .p{background:var(--paper);color:var(--bg)}
.cc .s{box-shadow:inset 0 0 0 1px var(--line-2);color:var(--text)}
.cc .l{color:var(--muted);text-decoration:underline;text-underline-offset:3px;padding:0 6px}
.cc-prefs{margin-top:16px;display:grid;gap:12px;border-top:1px solid var(--line);padding-top:14px}
.cc-prefs[hidden]{display:none}
.cc-prefs .o{display:flex;gap:12px;align-items:flex-start}
.cc-prefs input{margin-top:4px;accent-color:var(--blue)}
.cc-prefs label{font-size:14px;font-weight:500;color:var(--text)}
.cc-prefs p{font-size:13px;color:var(--dim)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .showcase{height:auto}
  .sc-pin{position:relative;grid-template-columns:1fr;height:auto;padding:110px var(--gut) 120px;gap:56px}
  .sc-stage{height:auto;aspect-ratio:16/12}
  .team-apps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-top{grid-template-columns:1fr 1fr}
  .foot-top>div:first-child{grid-column:1/-1}
}
@media (max-width:900px){
  :root{--nav:64px}
  .nav-links{position:fixed;inset:var(--nav) 0 auto 0;flex-direction:column;gap:0;padding:12px var(--gut) 26px;background:var(--bg);box-shadow:0 1px 0 var(--line);opacity:0;pointer-events:none;transition:opacity .2s;font-size:24px;font-weight:300}
  .nav-links a{padding:14px 0;border-bottom:1px solid var(--line);color:var(--text)}
  .nav-links[data-open="true"]{opacity:1;pointer-events:auto}
  .nav-cta{display:none}
  .nav-tog{display:flex}
  .brand small{display:none}
  .sec-head,.split,.dl-card,.doc .wrap{grid-template-columns:1fr}
  .sec-head .lede{justify-self:start}
  .doc .side{position:relative;top:0}
  .svc{grid-template-columns:minmax(0,1fr);row-gap:12px}
  .svc>p,.svc .prose{grid-column:1}
  .people{grid-template-columns:1fr}
  .case-facts{grid-template-columns:1fr 1fr}
  .case-facts div:nth-child(3){padding-left:0;border-left:0}
  .case-facts div:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:640px){
  /* phones: the headline sits low over the metal, so darken from the bottom up */
  .hero::before{background:linear-gradient(0deg,rgba(5,6,8,.92) 0%,rgba(5,6,8,.8) 50%,rgba(5,6,8,0) 80%)}
  .cc{padding:14px}.cc-t{font-size:12.5px}.cc-a{margin-top:10px}.cc button{height:34px;padding:0 12px;font-size:12.5px}
  body{font-size:16px}
  .hero{padding-bottom:40px}
  .phone{width:30%;min-width:96px}
  .team-apps{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr}
  .btn{height:52px}
  .cc{left:10px;bottom:10px;width:calc(100vw - 20px)}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition:none!important}
}
.mob-only{display:none}
@media (max-width:900px){.nav-links .mob-only{display:block}}

/* ---------- concepts page: plan tag and facts inside each showcase ---------- */
.sc-tier{margin-top:14px;font:500 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--blue-2)}
.sc-facts{display:grid;gap:0;margin:22px 0 4px;border-top:1px solid var(--line)}
.sc-facts div{display:grid;grid-template-columns:92px minmax(0,1fr);gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.sc-facts dt{font:500 10.5px/1.6 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.sc-facts dd{font-size:14px;line-height:1.5;color:var(--muted)}

/* ---------- pricing ---------- */
.price-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.plan{display:flex;flex-direction:column;padding:clamp(32px,4vw,52px) clamp(22px,2.6vw,40px) clamp(36px,4vw,52px);border-left:1px solid var(--line);position:relative}
.plan:first-child{border-left:0;padding-left:0}
.plan.flagship{background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0) 60%)}
.plan.flagship::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--blue)}
.plan-name{margin-top:18px;font-weight:400;font-size:clamp(24px,2.2vw,32px);letter-spacing:-.02em;line-height:1.1;color:var(--paper)}
.plan-price{display:flex;flex-direction:column;gap:10px;margin-top:28px}
.plan-price .amt{font-weight:300;font-size:clamp(56px,6vw,96px);line-height:.9;letter-spacing:-.045em;color:var(--paper)}
.plan-price .per{font:500 11px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.plan-for{margin-top:26px;font-size:16px;line-height:1.6;color:var(--muted);max-width:38ch}
.plan-list{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid var(--line)}
.plan-list li{position:relative;padding:12px 0 12px 22px;border-bottom:1px solid var(--line);font-size:14.5px;line-height:1.45;color:var(--text)}
.plan-list li::before{content:"";position:absolute;left:0;top:19px;width:9px;height:1px;background:var(--blue-2)}
.plan-note{margin:22px 0 28px;font-size:13.5px;color:var(--dim)}
.plan .btn{margin-top:auto;align-self:flex-start}
.faq-wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,96px);align-items:start}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;padding:22px 0;font-size:clamp(17px,1.4vw,20px);color:var(--paper)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--muted);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 22px;max-width:60ch;color:var(--muted);line-height:1.6}
@media (max-width:980px){
  .price-grid{grid-template-columns:minmax(0,1fr)}
  .plan,.plan:first-child{border-left:0;padding-left:0;padding-right:0;border-top:1px solid var(--line)}
  .plan:first-child{border-top:0}
  .faq-wrap{grid-template-columns:minmax(0,1fr)}
}

/* ---------- home ----------
   Four sections, each saying one thing: the promise (hero), the proof (concepts), what you get, and the close.
   The motion lives in site.js (homeMotion). Without it (reduced motion, no JS, GSAP missing) every section below is
   simply laid out and visible: the concepts stack (a swipeable row on phones), lines are drawn, nothing is hidden. */

/* hero: the lines rise out of a mask while the metal F casts up behind them. Plain CSS, so it runs before any script. */
.hero .ln{overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.hero .ln>span{animation:hm-rise 1.6s var(--ease) both}
.hero .ln:nth-child(1)>span{animation-delay:.25s}
.hero .ln:nth-child(2)>span{animation-delay:.37s}
.hero .ln:nth-child(3)>span{animation-delay:.62s}
.hm-in{animation:hm-fade 1.4s var(--ease) both}
.hero .k.hm-in{animation-delay:.1s}
.hm-ctas.hm-in{animation-delay:.95s}
.hm-cue .hm-in{animation-delay:1.5s}
@keyframes hm-rise{from{transform:translate3d(0,112%,0)}}
@keyframes hm-fade{from{opacity:0;transform:translate3d(0,18px,0)}}
.hm-ctas{display:flex;align-items:center;gap:30px;flex-wrap:wrap;margin-top:52px}
.hm-cue{position:absolute;right:var(--gut);bottom:clamp(40px,8vh,96px)}
.hm-cue .hm-in{display:flex;flex-direction:column;align-items:center;gap:16px;font:500 10.5px/1 var(--mono);letter-spacing:.32em;text-transform:uppercase;color:var(--dim)}
.hm-cue span{writing-mode:vertical-rl;transform:rotate(180deg)}
.hm-cue i{position:relative;display:block;width:1px;height:64px;overflow:hidden;background:var(--line-2)}
.hm-cue i::after{content:"";position:absolute;inset:0;background:var(--paper);transform:translate3d(0,-100%,0);animation:hm-cue 2.6s var(--ease) 2.4s infinite}
@keyframes hm-cue{0%{transform:translate3d(0,-100%,0)}65%,100%{transform:translate3d(0,100%,0)}}

/* concepts: the proof. Three concepts one after another, in normal flow on every screen: nothing is pinned, sticky or
   held, so the page always moves when you scroll. On wide screens they alternate sides and each plays a scroll-linked
   entrance as it passes (site.js scenesWork, which marks the section .hm-scenes); phones get a row you swipe through.
   Nothing here starts hidden in CSS. */
.hm-work{border-top:1px solid var(--line)}
.hm-work-in{position:relative;padding:clamp(96px,14vh,150px) 0 clamp(90px,13vh,140px);background:var(--bg)}
.hm-work-top{display:flex;align-items:baseline;justify-content:space-between;gap:24px}
.hm-count{display:none;align-items:center;gap:.8em;font:500 12px/1 var(--mono);letter-spacing:.18em;color:var(--dim)}
.hm-roll{display:block;height:1em;overflow:hidden;color:var(--paper)}
.hm-roll>span{display:block;transition:transform .9s var(--ease)}
.hm-roll b{display:block;height:1em;font-weight:500}
.hm-prog{display:none;position:relative;height:1px;margin-top:20px;background:var(--line)}
.hm-prog i{position:absolute;inset:0;background:var(--blue);transform:scaleX(0);transform-origin:0 50%;transition:transform 1s var(--ease)}
.hm-slides{list-style:none;margin:clamp(64px,10vh,120px) 0 0;padding:0;display:grid;gap:clamp(120px,20vh,240px)}
.hm-slide{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.4fr);gap:clamp(28px,4vw,80px);align-items:center}
.hm-copy{position:relative;z-index:2}
/* each concept's place in the set (01 / 03); site.js renumbers it if Studio's feed removes a duplicate */
.hm-idx{display:flex;align-items:center;gap:.8em;margin-bottom:30px;font:500 12px/1 var(--mono);letter-spacing:.18em;color:var(--dim)}
.hm-idx b{font-weight:500;color:var(--paper)}
.hm-idx i{display:block;width:clamp(48px,5vw,88px);height:1px;margin-left:.9em;background:var(--blue);transform-origin:0 50%}
.hm-tag{font:500 11px/1 var(--mono);letter-spacing:.26em;text-transform:uppercase;color:var(--blue-2)}
.hm-name{margin-top:22px;font-weight:300;font-size:clamp(46px,6.2vw,108px);line-height:.94;letter-spacing:-.045em;color:var(--paper);text-wrap:balance;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.hm-name>span{display:block}
.hm-name.long{font-size:clamp(36px,4.2vw,72px)}
.hm-meta{margin-top:26px;color:var(--muted);font-size:16px}
.hm-open{display:inline-flex;align-items:center;gap:10px;margin-top:20px;padding:6px 0;font:500 11.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--text)}
.hm-open i{font-size:15px;color:var(--blue-2);transition:transform .6s var(--ease)}
.hm-open:hover i{transform:translate3d(3px,-3px,0)}
.hm-slides .sc-stage{width:100%;height:auto;aspect-ratio:3/2;justify-self:end}
.viewport.still{cursor:default}
.viewport.still::after{content:none}
/* Home: the screens are pictures that drift as you pass; the wheel always moves the page, never the screen */
.hm-work .viewport{cursor:default}
.hm-work .viewport::after{content:none}
.viewport.still>.page{position:relative;z-index:1;display:block;width:100%;height:auto}
/* the hand-made phone captures run a few pixels shorter than the frame: fill it, anchored at the top */
.hm-slides .phone .viewport.still>.page{height:100%;object-fit:cover;object-position:50% 0}
.hm-slides .browser .bar .url{max-width:64%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.hm-work-foot{display:flex;align-items:baseline;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;margin-top:clamp(72px,11vh,120px);padding-top:20px;border-top:1px solid var(--line)}
.hm-work-foot p{font:400 11.5px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
@media (min-width:900px){
  /* every second concept swaps sides: screens on the left, the words on the right. Inside the screens the phone stays
     at the lower right, over the desktop's photo side, so it never covers a capture's left-aligned headline */
  .hm-slide:nth-child(even){grid-template-columns:minmax(0,1.4fr) minmax(0,.72fr)}
  .hm-slide:nth-child(even) .hm-copy{order:2}
  .hm-slide:nth-child(even) .sc-stage{justify-self:start}
  /* the header's hairline (the phones' progress bar) is a plain rule here, drawn in as the section arrives */
  .hm-prog{display:block;transform-origin:0 50%}
  .hm-prog i{display:none}
  /* short windows: the screens shrink so a whole concept fits on screen as it passes */
  .hm-slides .sc-stage{width:min(100%,calc((100vh - 220px) * 1.5));width:min(100%,calc((100svh - 220px) * 1.5))}
  .hm-scenes .browser,.hm-scenes .phone,.hm-scenes .hm-name>span{will-change:transform}
  /* a concept's link reached with the keyboard before its entrance has played is shown at once */
  .hm-scenes .hm-open:focus-visible{opacity:1!important;transform:none!important}
}
@media (max-width:899px){
  .js .hm-count{display:flex}
  .js .hm-prog{display:block}
  /* phones: a row you swipe through, one concept at a time, never pinned */
  .hm-work-in{padding:88px 0 80px}
  .hm-slides{display:flex;gap:14px;margin:30px calc(var(--gut) * -1) 0;padding:0 var(--gut) 4px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);scrollbar-width:none}
  .hm-slides::-webkit-scrollbar{display:none}
  .hm-slide{flex:0 0 min(86%,520px);display:flex;flex-direction:column-reverse;justify-content:flex-end;align-items:stretch;gap:24px;scroll-snap-align:start}
  .hm-slides .sc-stage{aspect-ratio:4/3}
  .hm-slides .phone{width:29%;min-width:0}
  .hm-slides .browser .bar{height:24px;gap:5px;padding:0 9px}
  .hm-slides .browser .bar i{width:7px;height:7px}
  .hm-slides .browser .bar .url{padding:4px 10px;font-size:9px}
  .hm-slides .browser .viewport{top:24px}
  .hm-name{margin-top:14px;font-size:clamp(36px,10vw,56px)}
  .hm-name.long{font-size:clamp(30px,8vw,44px)}
  .hm-meta{margin-top:14px;font-size:15px}
  .hm-open{margin-top:12px}
  .hm-idx{display:none}
  .hm-work-foot{margin-top:40px}
}

/* what you get: the four offers and the three steps, in one place */
.hm-get{border-top:1px solid var(--line)}
.hm-get-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);gap:clamp(40px,6vw,120px);align-items:start}
.hm-get-head .k{margin-bottom:24px}
.hm-get-head .h2{max-width:10ch}
.hm-get-head>p:not(.k){margin-top:28px;color:var(--muted);font-size:clamp(16.5px,1.25vw,18.5px);line-height:1.6;max-width:34ch}
.hm-offers{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.hm-offers a{position:relative;display:grid;grid-template-columns:52px minmax(0,1.2fr) minmax(0,1fr) 24px;gap:8px 24px;align-items:baseline;padding:28px 0 30px;border-bottom:1px solid var(--line)}
.hm-offers a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--blue);transform:scaleX(0);transform-origin:0 50%;transition:transform .9s var(--ease)}
.hm-offers a:hover::after,.hm-offers a:focus-visible::after{transform:scaleX(1)}
.hm-offers .n{font:500 11.5px/1 var(--mono);letter-spacing:.16em;color:var(--dim);transition:color .4s var(--ease)}
.hm-offers h3{font-weight:400;font-size:clamp(21px,1.9vw,28px);line-height:1.15;letter-spacing:-.02em;color:var(--paper)}
.hm-offers p{color:var(--muted);font-size:15.5px;line-height:1.55}
.hm-offers i{justify-self:end;font-size:18px;color:var(--dim);transition:transform .6s var(--ease),color .4s var(--ease)}
.hm-offers a:hover .n{color:var(--blue-2)}
.hm-offers a:hover i{transform:translate3d(4px,0,0);color:var(--paper)}
.hm-flow{margin-top:clamp(96px,14vh,160px)}
.hm-flow>.k{margin-bottom:40px}
.hm-steps{position:relative;padding-top:46px}
.hm-track{position:absolute;left:0;right:0;top:5px;height:1px;background:var(--line-2)}
.hm-track i{position:absolute;inset:0;background:var(--blue);transform-origin:0 50%}
.hm-steps ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,56px)}
.hm-steps li{position:relative}
.hm-node{position:absolute;top:-46px;left:0;width:11px;height:11px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line-2)}
.hm-node i{position:absolute;inset:0;background:var(--blue)}
.hm-steps .n{font:500 12px/1 var(--mono);letter-spacing:.2em;color:var(--dim)}
.hm-steps h4{margin:16px 0 10px;font-weight:400;font-size:clamp(22px,2vw,30px);line-height:1.15;letter-spacing:-.02em;color:var(--paper)}
.hm-steps p{max-width:34ch;color:var(--muted);font-size:16px}
@media (max-width:899px){
  .hm-get-grid{grid-template-columns:minmax(0,1fr)}
  .hm-offers a{grid-template-columns:36px minmax(0,1fr) 20px;row-gap:8px;padding:24px 0 26px}
  .hm-offers p{grid-column:2}
  .hm-offers i{grid-column:3;grid-row:1}
  .hm-steps{padding:0 0 0 34px}
  .hm-track{left:5px;right:auto;top:6px;bottom:6px;width:1px;height:auto}
  .hm-track i{transform-origin:50% 0}
  .hm-steps ol{grid-template-columns:minmax(0,1fr);gap:44px}
  .hm-node{top:3px;left:-34px}
  .hm-steps h4{margin-top:12px}
}

/* the close: big type over the metal, which comes back up as you arrive */
.hm-close{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:clamp(120px,18vh,200px) 0;border-top:1px solid var(--line)}
.hm-close::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(5,6,8,.86) 0%,rgba(5,6,8,.55) 40%,rgba(5,6,8,0) 68%)}
.hm-close .wrap{position:relative}
.hm-close .display{font-size:clamp(56px,10vw,172px);max-width:9ch}
.hm-close .ln{overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.hm-close .lede{margin-top:34px}
.hm-close-row{display:flex;align-items:center;gap:32px;flex-wrap:wrap;margin-top:46px}
.hm-mag{display:inline-block;margin:-22px;padding:22px}
.hm-mag .btn>span,.hm-mag .btn>i{display:inline-block}
.hm-mail{font:400 13px/1.4 var(--mono);letter-spacing:.04em;color:var(--muted);padding:4px 0;text-decoration:underline;text-decoration-color:var(--line-2);text-decoration-thickness:1px;text-underline-offset:6px;transition:color .2s ease,text-decoration-color .2s ease}
.hm-mail:hover{color:var(--paper);text-decoration-color:var(--blue)}
@media (max-width:900px){.hm-cue{display:none}}
@media (max-width:640px){
  .hm-ctas{margin-top:36px;gap:24px}
  .hm-close{align-items:flex-end;padding:120px 0 64px}
  .hm-close::before{background:linear-gradient(0deg,rgba(5,6,8,.94) 0%,rgba(5,6,8,.82) 48%,rgba(5,6,8,0) 80%)}
  .hm-close .display{font-size:clamp(52px,15vw,84px)}
  .hm-close-row{gap:24px}
}
@media (prefers-reduced-motion:reduce){
  .hero .ln>span,.hm-in,.hm-cue i::after{animation:none}
}
.still .hero .ln>span,.still .hm-in,.still .hm-cue i::after{animation:none!important}