/* Huffman Digital. Black stage, white ink, one serif italic voice. Shared by every page. */
:root{
  --ink:#000;
  --ink-2:#101010;
  --ink-3:#161616;
  --metal-a:#0c0c0c;
  --metal-b:#151515;
  --metal-c:#1b1b1b;
  --paper:#f4f4f2;
  --mute:rgba(244,244,242,.58);
  --dim:rgba(244,244,242,.34);
  --faint:rgba(244,244,242,.14);
  --line:rgba(244,244,242,.2);
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --serif:"Instrument Serif","Times New Roman",Georgia,serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.8,.15,1);
  --ease-io:cubic-bezier(.7,0,.25,1);
  --pad:clamp(18px,4vw,56px);
  --maxw:1320px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--ink)}
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--display);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
img{max-width:100%;display:block}
:focus-visible{outline:1px solid var(--paper);outline-offset:4px}
em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:0}
::selection{background:var(--paper);color:var(--ink)}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.label{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.label.line{display:flex;align-items:center;gap:14px}
.label.line::before{content:"";width:28px;height:1px;background:var(--paper)}
.label b{color:var(--paper);font-weight:500}

/* ---------- logo ---------- */
.hd{display:block;fill:currentColor}
.brand{display:flex;align-items:center;gap:12px}
.brand .hd{width:46px;height:auto}
.brand .word{font-family:var(--display);font-weight:700;font-stretch:125%;font-size:14px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;line-height:1}
.brand.hide{opacity:0}

/* ---------- header ---------- */
.site-head{position:fixed;inset:0 0 auto;z-index:30;padding:calc(env(safe-area-inset-top,0px) + 20px) var(--pad) 18px;display:flex;align-items:center;justify-content:space-between;gap:20px;transition:background .5s,backdrop-filter .5s,padding .5s var(--ease)}
.site-head.solid{background:rgba(0,0,0,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding-top:calc(env(safe-area-inset-top,0px) + 14px);padding-bottom:14px}
.nav{display:flex;gap:34px;font-family:var(--display);font-weight:600;font-stretch:112%;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase}
.nav a{position:relative;padding-block:6px;color:var(--mute);transition:color .3s}
.nav a:hover,.nav a[aria-current="page"]{color:var(--paper)}
.nav a::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:var(--paper);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.head-r{display:flex;align-items:center;gap:18px}
.pill{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:600;font-stretch:112%;font-size:12px;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--paper);padding:12px 18px;border-radius:999px;transition:background .35s,color .35s;white-space:nowrap}
.pill:hover{background:var(--paper);color:var(--ink)}
.pill.solid{background:var(--paper);color:var(--ink)}
.pill.solid:hover{background:transparent;color:var(--paper)}
.burger{width:40px;height:40px;display:none;place-items:center}
.burger span{position:relative;display:block;width:22px;height:1px;background:var(--paper);transition:transform .4s var(--ease)}
.burger span::after{content:"";position:absolute;left:0;top:7px;width:22px;height:1px;background:var(--paper);transition:transform .4s var(--ease),top .4s var(--ease)}
.menu-open .burger span{transform:translateY(3px) rotate(45deg)}
.menu-open .burger span::after{top:0;transform:rotate(-90deg)}

.menu{position:fixed;inset:0;z-index:25;background:var(--ink);display:flex;flex-direction:column;justify-content:flex-end;padding:110px var(--pad) calc(env(safe-area-inset-bottom,0px) + 36px);clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .8s var(--ease-io),visibility 0s .8s}
.menu-open .menu{clip-path:inset(0);visibility:visible;transition:clip-path .8s var(--ease-io)}
.menu ol{list-style:none;margin:0;padding:0;counter-reset:m}
.menu li{counter-increment:m;border-top:1px solid var(--faint)}
.menu li:last-child{border-bottom:1px solid var(--faint)}
.menu a{display:flex;align-items:baseline;gap:16px;padding:10px 0;font-weight:250;font-stretch:112%;font-size:clamp(32px,9vw,64px);line-height:1.1;letter-spacing:-.02em}
.menu a::before{content:counter(m,decimal-leading-zero);font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--mute)}
.menu .m-foot{margin-top:28px;display:flex;flex-wrap:wrap;gap:16px 40px}

/* ---------- loader ---------- */
.loader{position:fixed;inset:0;z-index:100;background:var(--ink);overflow:hidden}
.loader .ld-word{position:absolute;left:50%;top:44%;display:flex;gap:.02em;white-space:nowrap;font-weight:600;font-stretch:125%;font-size:clamp(30px,8.4vw,128px);letter-spacing:-.03em;line-height:1;transform:translate(-50%,-50%);transform-origin:0 0}
.loader .ld-word span{display:inline-block;transform:translateY(-120vh)}
.loader .ld-word .sp{width:.3em}
.loader .ld-num{position:absolute;left:var(--pad);bottom:calc(env(safe-area-inset-bottom,0px) + 22px);font-weight:200;font-stretch:125%;font-size:clamp(64px,16vw,220px);line-height:.82;font-variant-numeric:tabular-nums;letter-spacing:-.04em}
.loader .ld-meta{position:absolute;right:var(--pad);bottom:calc(env(safe-area-inset-bottom,0px) + 30px);text-align:right;display:grid;gap:10px}
.loader .ld-bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--faint)}
.loader .ld-bar i{display:block;height:100%;background:var(--paper);transform:scaleX(0);transform-origin:left}
html.no-loader .loader{display:none}

/* ---------- page curtain ---------- */
.curtain{position:fixed;inset:0;z-index:90;background:var(--paper);pointer-events:none;transform:scaleY(0);transform-origin:top}
.curtain .hd{position:absolute;left:50%;top:50%;width:64px;transform:translate(-50%,-50%);fill:var(--ink);opacity:0}

/* ---------- cursor ---------- */
.cursor{position:fixed;left:0;top:0;z-index:95;width:34px;height:34px;margin:-17px 0 0 -17px;border:1px solid var(--paper);border-radius:50%;pointer-events:none;mix-blend-mode:difference;transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),background .35s,opacity .3s;display:none;opacity:0}
.cursor.big{width:72px;height:72px;margin:-36px 0 0 -36px;background:var(--paper)}
@media (pointer:fine){.cursor{display:block}}

/* ---------- reveals ---------- */
.wd{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.wd>span{display:inline-block;transform:translateY(105%);transition:transform 1.1s var(--ease);transition-delay:calc(var(--i,0) * 45ms + var(--base,0ms))}
.in .wd>span,.wd.in>span{transform:none}
.rv{opacity:0;transform:translateY(22px);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:var(--d,0ms)}
.rv.in,.in .rv{opacity:1;transform:none}
html.no-js .rv{opacity:1;transform:none}
html.no-js .wd>span{transform:none}

/* ---------- landing (index) ---------- */
.landing{position:fixed;inset:0;overflow:hidden;touch-action:none}
#field{position:absolute;inset:0;width:100%;height:100%;display:block}
.landing-ui{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 var(--pad) calc(env(safe-area-inset-bottom,0px) + clamp(26px,6vh,60px));display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px;pointer-events:none}
.landing-ui>*{pointer-events:auto}
.landing-ui::before{content:"";position:absolute;inset:-40vh 0 0;z-index:-1;pointer-events:none;background:linear-gradient(to top,rgba(0,0,0,.94) 0,rgba(0,0,0,.82) 45%,rgba(0,0,0,0) 100%)}
.landing h1{margin:16px 0 0;font-weight:250;font-stretch:112%;font-size:clamp(34px,5.6vw,88px);line-height:1;letter-spacing:-.025em;max-width:14ch;text-wrap:balance}
.landing .sub{margin:18px 0 0;max-width:42ch;color:var(--mute)}
.play-hint{position:absolute;z-index:2;right:var(--pad);top:50%;transform:translateY(-50%);writing-mode:vertical-rl;font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim);pointer-events:none}
.enter{display:flex;align-items:center;gap:18px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;text-align:right}
.enter small{display:block;color:var(--mute);letter-spacing:.14em;margin-top:4px}
.ring{position:relative;width:84px;height:84px;border-radius:50%;border:1px solid var(--paper);display:grid;place-items:center;overflow:hidden;flex:none}
.ring::before{content:"";position:absolute;inset:0;background:var(--paper);border-radius:50%;transform:scale(0);transition:transform .6s var(--ease)}
.enter:hover .ring::before{transform:scale(1)}
.ring svg{position:relative;width:18px;height:18px;stroke:var(--paper);fill:none;stroke-width:1.4;transition:stroke .4s;animation:bob 2.2s ease-in-out infinite}
.enter:hover .ring svg{stroke:var(--ink)}
@keyframes bob{50%{transform:translateY(4px)}}

/* ---------- home (scroll to discover) ---------- */
#morph{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block;transition:opacity .8s var(--ease)}
.reel{position:fixed;inset:0;z-index:0;opacity:0;transition:opacity 1.2s var(--ease);pointer-events:none}
.reel video,.reel img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05) brightness(.4)}
.reel.on{opacity:1}
.story{position:relative;z-index:2}
.chap{min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;padding:120px var(--pad) clamp(120px,19vh,200px)}
.chap-in{width:min(48vw,640px);display:flex;flex-direction:column;gap:22px}
.chap h1,.chap h2{margin:0;font-weight:250;font-stretch:112%;font-size:clamp(34px,4.8vw,76px);line-height:1.02;letter-spacing:-.025em;text-wrap:balance}
.chap p{margin:0;color:var(--mute);max-width:52ch;font-size:clamp(15px,1.1vw,17px)}
.chap.first{align-items:flex-end}
.discover{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.discover i{width:1px;height:42px;background:var(--faint);position:relative;overflow:hidden}
.discover i::after{content:"";position:absolute;left:0;top:-100%;width:1px;height:100%;background:var(--paper);animation:drip 1.8s var(--ease) infinite}
@keyframes drip{to{top:100%}}
.link{align-self:flex-start;display:inline-flex;gap:12px;align-items:center;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding-block:6px;border-bottom:1px solid var(--paper)}
.link span{transition:transform .4s var(--ease)}
.link:hover span{transform:translateX(5px)}
.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.rows li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--line);transition:padding .4s var(--ease)}
.rows li:hover{padding-left:10px}
.rows .k{font-size:clamp(15px,1.15vw,18px)}
.rows .v{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);text-align:right}
.rows.num li{grid-template-columns:40px minmax(0,1fr)}
.rows.num .n{font-family:var(--mono);font-size:11px;color:var(--mute);font-variant-numeric:tabular-nums}
.rows small{display:block;color:var(--mute);font-size:13.5px;margin-top:2px}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.trio>div{background:var(--ink);padding:18px 16px;display:grid;gap:8px;align-content:start;min-width:0}
.trio h3{margin:0;font-weight:500;font-stretch:112%;font-size:15px}
.trio p{font-size:13.5px}
.story-chrome{position:fixed;left:0;right:0;bottom:0;z-index:20;padding:0 var(--pad) calc(env(safe-area-inset-bottom,0px) + 24px);display:flex;justify-content:space-between;align-items:center;gap:20px;pointer-events:none;transition:opacity .5s}
.story-chrome.off{opacity:0}
.counter{display:flex;align-items:center;gap:16px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;font-variant-numeric:tabular-nums}
.track{width:120px;height:1px;background:var(--faint)}
.track i{display:block;height:100%;background:var(--paper);transform-origin:left;transform:scaleX(0);transition:transform .8s var(--ease)}
.chap-index{position:fixed;right:var(--pad);top:50%;transform:translateY(-50%);z-index:20;list-style:none;margin:0;padding:0;display:grid;gap:11px;text-align:right;transition:opacity .5s}
.chap-index.off{opacity:0;pointer-events:none}
.chap-index a{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);display:flex;gap:10px;align-items:center;justify-content:flex-end;transition:color .3s}
.chap-index a::after{content:"";width:8px;height:1px;background:currentColor;transition:width .5s var(--ease)}
.chap-index a.on{color:var(--paper)}
.chap-index a.on::after{width:28px}
.chap-index a:hover{color:var(--paper)}

/* ---------- inner pages ---------- */
.pattern{position:absolute;inset:0;z-index:0;pointer-events:none;background-image:var(--hd-pattern);background-size:120px 120px;opacity:.07;-webkit-mask-image:radial-gradient(120% 90% at 70% 10%,#000 0,transparent 70%);mask-image:radial-gradient(120% 90% at 70% 10%,#000 0,transparent 70%);animation:slide 60s linear infinite}
@keyframes slide{to{background-position:240px 120px}}
.page-hero{position:relative;padding:clamp(150px,24vh,240px) 0 clamp(60px,10vh,110px);overflow:hidden}
.page-hero .wrap{position:relative;z-index:1;display:grid;gap:26px}
.page-hero h1{margin:0;font-weight:250;font-stretch:112%;font-size:clamp(44px,8.4vw,148px);line-height:.95;letter-spacing:-.035em;max-width:13ch;text-wrap:balance}
.page-hero p{margin:0;max-width:54ch;color:var(--mute);font-size:clamp(16px,1.3vw,19px)}
.section{position:relative;padding-block:clamp(70px,12vh,140px);border-top:1px solid var(--faint)}
.section h2{margin:0;font-weight:250;font-stretch:112%;font-size:clamp(32px,4.4vw,68px);line-height:1.02;letter-spacing:-.025em;text-wrap:balance}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,6vw,96px);align-items:start}
.split>*{min-width:0}
.sticky{position:sticky;top:120px;display:grid;gap:18px}
.lead{color:var(--mute);max-width:52ch;margin:0}

.pillar{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,6vw,96px);padding-block:clamp(50px,9vh,100px);border-top:1px solid var(--faint)}
.pillar>*{min-width:0}
.pillar .big{font-weight:250;font-stretch:112%;font-size:clamp(40px,6vw,96px);line-height:.95;letter-spacing:-.03em;margin:10px 0 0}
.pillar p{margin:0 0 20px;color:var(--mute);max-width:56ch}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.tags span{border:1px solid var(--line);border-radius:999px;padding:7px 13px;font-size:13.5px}
.example{margin-top:22px;padding:18px 20px;border:1px solid var(--line);display:grid;gap:6px}
.example b{font-weight:500}

/* pricing */
.price-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:40px}
.tier{background:var(--ink);padding:28px 24px 26px;display:flex;flex-direction:column;gap:14px;min-width:0;transition:background .4s}
.tier:hover{background:var(--ink-3)}
.tier h3{margin:0;font-weight:500;font-stretch:112%;font-size:22px}
.tier .from{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--paper);min-height:1.4em}
.tier .from.q{color:var(--mute)}
.tier p{margin:0;color:var(--mute);font-size:15px}
.tier ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px;font-size:14.5px}
.tier li{display:flex;gap:10px}
.tier li::before{content:"";flex:none;width:10px;height:1px;background:var(--paper);margin-top:.8em}
.tier .pill{margin-top:auto;align-self:flex-start}
.fine{margin-top:18px;color:var(--dim);font-size:13.5px;max-width:70ch}

/* work */
.case{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,5vw,80px);padding-block:clamp(50px,9vh,100px);border-top:1px solid var(--faint);align-items:start}
.case>*{min-width:0}
.case h3{margin:10px 0 12px;font-weight:300;font-stretch:112%;font-size:clamp(28px,3.2vw,48px);line-height:1.02;letter-spacing:-.02em}
.case p{margin:0 0 18px;color:var(--mute)}
.case dl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:0;font-size:14px}
.case dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);padding-top:3px}
.case dd{margin:0}
.ba{position:relative;aspect-ratio:16/10;max-width:100%;overflow:hidden;border:1px solid var(--line);background:var(--ink-2);user-select:none;-webkit-user-select:none;touch-action:pan-y;cursor:ew-resize}
.ba .layer{position:absolute;inset:0}
.ba .layer img,.ba .layer svg{width:100%;height:100%;object-fit:cover;object-position:top}
.ba .after{clip-path:inset(0 0 0 var(--x,50%))}
.ba .before img,.ba .before svg{filter:grayscale(1)}
.ba .handle{position:absolute;top:0;bottom:0;left:var(--x,50%);width:1px;background:var(--paper);transform:translateX(-.5px)}
.ba .knob{position:absolute;top:50%;left:var(--x,50%);width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:var(--paper);color:var(--ink);display:grid;place-items:center;font-family:var(--mono);font-size:12px;box-shadow:0 0 0 6px rgba(0,0,0,.35)}
.ba .tag{position:absolute;top:14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;padding:6px 10px;background:rgba(0,0,0,.7);border:1px solid var(--line)}
.ba .tag.l{left:14px}.ba .tag.r{right:14px}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba-note{margin-top:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.more-work{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.more-work li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;padding:20px 0;border-bottom:1px solid var(--line);font-size:clamp(18px,1.8vw,26px);font-weight:300;font-stretch:112%}
.more-work .v{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);align-self:center}

/* team */
.people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,40px);margin-top:40px}
.person{display:grid;gap:16px;min-width:0}
.portrait{position:relative;aspect-ratio:4/5;max-width:100%;overflow:hidden;border:1px solid var(--line);background:var(--ink-2)}
.portrait img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:transform 1.2s var(--ease),filter .8s}
.person:hover .portrait img{transform:scale(1.04);filter:grayscale(.2)}
.portrait .ph{position:absolute;inset:0;display:grid;place-items:center;background-image:var(--hd-pattern);background-size:90px 90px;opacity:1}
.portrait .ph::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.88)}
.portrait .ph span{position:relative;font-weight:200;font-stretch:125%;font-size:clamp(60px,9vw,120px);letter-spacing:-.04em}
.person h3{margin:0;font-weight:400;font-stretch:112%;font-size:clamp(24px,2.2vw,32px)}
.person p{margin:0;color:var(--mute)}
.values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px);margin-top:40px}
.values>div{border-top:1px solid var(--paper);padding-top:18px;display:grid;gap:8px;min-width:0}
.values h3{margin:0;font-weight:500;font-stretch:112%;font-size:18px}
.values p{margin:0;color:var(--mute);font-size:15px}

/* contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,6vw,96px);align-items:start}
.contact-grid>*{min-width:0}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 24px}
.form .full{grid-column:1/-1}
.field{display:grid;gap:8px;min-width:0}
.field label,.chips legend{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.field input,.field select,.field textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);color:var(--paper);font:inherit;font-size:17px;padding:10px 0;border-radius:0;transition:border-color .3s;resize:vertical}
.field textarea{min-height:96px}
.field select option{background:var(--ink-3)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--paper)}
.chips{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.chips legend{margin-bottom:10px;padding:0}
.chips label{cursor:pointer}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips span{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:9px 15px;font-size:14px;transition:all .3s}
.chips input:checked+span{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.chips input:focus-visible+span{outline:1px solid var(--paper);outline-offset:3px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.submit{justify-self:start;display:inline-flex;align-items:center;gap:12px;background:var(--paper);color:var(--ink);border-radius:999px;padding:16px 26px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;transition:opacity .3s,transform .3s var(--ease)}
.submit:hover{transform:translateY(-2px)}
.submit[disabled]{opacity:.5;pointer-events:none}
.status{font-size:15px;color:var(--mute);min-height:1.5em}
.status.ok{color:var(--paper)}
.side-card{border:1px solid var(--line);padding:26px 24px;display:grid;gap:18px}
.side-card h3{margin:0;font-weight:400;font-stretch:112%;font-size:24px}
.side-card p{margin:0;color:var(--mute);font-size:15px}
.copyline{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:15px;user-select:all}
.copy{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--line);border-radius:999px;padding:6px 10px;user-select:none}
.booking{display:none;margin-top:26px;border:1px solid var(--line)}
.booking.on{display:block}
.booking iframe{display:block;width:100%;height:640px;border:0;background:#fff}
.booking .bk-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}

/* footer */
.foot{position:relative;border-top:1px solid var(--faint);padding:clamp(70px,12vh,130px) 0 calc(env(safe-area-inset-bottom,0px) + 30px);overflow:hidden}
.foot .wrap{position:relative;z-index:1;display:grid;gap:clamp(40px,7vh,80px)}
.foot .big{margin:0;font-weight:250;font-stretch:112%;font-size:clamp(40px,7.4vw,124px);line-height:.95;letter-spacing:-.035em;max-width:12ch}
.foot .cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;font-size:14.5px}
.foot .cols>div{display:grid;gap:8px;align-content:start;min-width:0;overflow-wrap:anywhere}
.foot .cols a{color:var(--mute);transition:color .3s}
.foot .cols a:hover{color:var(--paper)}
.foot .base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;color:var(--dim);font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase}

@media (max-width:900px){
  .nav,.head-r .pill{display:none}
  .burger{display:grid}
  .chap-in{width:100%}
  .chap{padding-bottom:120px}
  .chap-index{display:none}
  .trio,.price-grid,.values{grid-template-columns:minmax(0,1fr)}
  .split,.pillar,.case,.contact-grid{grid-template-columns:minmax(0,1fr)}
  .sticky{position:static}
  .people{grid-template-columns:minmax(0,1fr)}
  .foot .cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form{grid-template-columns:minmax(0,1fr)}
  .play-hint{display:none}
  .ring{width:66px;height:66px}
  .track{width:64px}
  .story-chrome .discover span{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
}

/* arrival + misc */
html.arrive .curtain{transform:scaleY(1)}

.foot{background:var(--ink);z-index:2}
.portrait img{position:absolute;inset:0}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.studio{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:end}
.studio>*{min-width:0}
@media (max-width:900px){.studio{grid-template-columns:minmax(0,1fr)}}


/* ===== v3: matte black, metal pattern, animated logo ===== */

/* metallic diagonal wordmark */
.metal{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.metal.fixed{position:fixed}
.metal .m-in{position:absolute;left:50%;top:50%;width:170vmax;transform:translate(-50%,-50%) rotate(-35deg);display:grid;gap:.16em;font-family:var(--display);font-weight:800;font-stretch:125%;font-size:clamp(34px,4.6vw,72px);line-height:1;letter-spacing:.01em;text-transform:uppercase;white-space:nowrap}
.metal .m-row{display:flex;gap:.55em;background:linear-gradient(105deg,var(--metal-a) 0%,var(--metal-b) 14%,#0f0f0f 26%,var(--metal-c) 40%,var(--metal-a) 52%,var(--metal-b) 70%,#0e0e0e 84%,var(--metal-c) 100%);background-size:1100px 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
.metal .m-row:nth-child(even){transform:translateX(-2.4em)}
.metal::after{content:"";position:absolute;inset:-20%;background:radial-gradient(closest-side,rgba(255,255,255,.16),rgba(255,255,255,0));width:70vmax;height:70vmax;mix-blend-mode:overlay;animation:sheen 16s ease-in-out infinite alternate}
@keyframes sheen{from{transform:translate(-10vw,-10vh)}to{transform:translate(70vw,50vh)}}
@media (min-width:901px){.metal .m-in{animation:metal-drift 120s linear infinite}}
@keyframes metal-drift{to{transform:translate(-50%,-50%) rotate(-35deg) translateX(-9%)}}

/* self-drawing logo */
.lg{position:relative;aspect-ratio:600/446;color:var(--paper)}
.lg svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.lg-o path{fill:none;stroke:currentColor;stroke-width:3;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.8s cubic-bezier(.6,0,.2,1)}
.lg-f{position:absolute;inset:0;clip-path:inset(100% 0 0 0);transition:clip-path 1.5s cubic-bezier(.7,0,.25,1) .9s}
.lg-f path{fill:currentColor}
.in .lg .lg-o path,.lg.in .lg-o path{stroke-dashoffset:0}
.in .lg .lg-f,.lg.in .lg-f{clip-path:inset(0 0 0 0)}
.lg.ghost{color:#171717}
.lg.ghost .lg-o path{stroke:rgba(244,244,242,.42);stroke-width:2.5}
.curtain .lg-o path{stroke-width:7}

/* curtain is now black with the logo filling in */
.curtain{background:var(--ink)}
.curtain .lg{position:absolute;left:50%;top:50%;width:clamp(90px,12vw,150px);transform:translate(-50%,-50%)}
.curtain .lg .lg-o path{transition-duration:.55s}
.curtain .lg .lg-f{transition-duration:.45s;transition-delay:.3s}
.curtain.in .lg-o path{stroke-dashoffset:0}
.curtain.in .lg-f{clip-path:inset(0 0 0 0)}
.curtain.held .lg-o path,.curtain.held .lg-f{transition:none}

/* loader */
.loader{background:var(--ink)}
.ld-center{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:clamp(18px,3.4vh,34px)}
.ld-logo{width:clamp(120px,17vw,220px);height:auto;overflow:visible}
.ld-logo .o{fill:none;stroke:var(--paper);stroke-width:3;stroke-dasharray:1;stroke-dashoffset:1}
.ld-logo .f{fill:var(--paper)}
.loader .ld-word{position:static;transform:none;font-weight:700;font-stretch:125%;font-size:clamp(24px,4vw,56px);letter-spacing:.06em;text-transform:uppercase}
.loader .ld-word{overflow:hidden;padding-block:.08em}
.loader .ld-word span{transform:translateY(-115%)}

/* landing: dots over metal, content in one solid panel */
.landing{background:var(--ink)}
#field{z-index:1}
.landing-panel{position:absolute;z-index:2;left:var(--pad);right:var(--pad);bottom:calc(env(safe-area-inset-bottom,0px) + var(--pad));display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(24px,4vw,72px);align-items:end;padding:clamp(24px,3.4vw,52px);background:rgba(0,0,0,.72);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--line)}
.landing-panel>*{min-width:0}
.landing-panel::before,.landing-panel::after{content:"";position:absolute;width:14px;height:14px;border:solid var(--paper)}
.landing-panel::before{left:-1px;top:-1px;border-width:1px 0 0 1px}
.landing-panel::after{right:-1px;bottom:-1px;border-width:0 1px 1px 0}
.landing-panel h1{margin:18px 0 0;font-weight:300;font-stretch:112%;font-size:clamp(32px,4.2vw,70px);line-height:.98;letter-spacing:-.03em;text-wrap:balance}
.lp-side{display:grid;gap:26px;justify-items:start}
.lp-side p{margin:0;color:var(--mute);font-size:clamp(15px,1.15vw,17px);max-width:42ch}
.lp-top{position:absolute;left:clamp(24px,3.4vw,52px);right:clamp(24px,3.4vw,52px);top:-34px;display:flex;justify-content:space-between;gap:16px}
.enter{font-family:var(--display);font-weight:600;font-stretch:112%;font-size:12.5px;letter-spacing:.12em;text-align:left;flex-direction:row-reverse}
.enter small{font-family:var(--mono);font-weight:400}

/* inner page hero decoration */
.page-hero{background:var(--ink)}
.hero-logo{position:absolute;z-index:1;right:var(--pad);top:50%;width:min(34vw,460px);transform:translateY(-38%);pointer-events:none;opacity:.9}
.foot-logo{position:absolute;z-index:0;right:-4vw;bottom:-6vw;width:min(52vw,760px);pointer-events:none}
@media (max-width:900px){
  .landing-panel{grid-template-columns:minmax(0,1fr);gap:20px}
  .landing-panel h1{font-size:clamp(32px,9vw,46px)}
  .lp-top{display:none}
  .hero-logo{display:none}
  .foot-logo{width:80vw;right:-10vw;bottom:-14vw}
}


/* ===== v4: Home deck, CTA ===== */
.pill.big{padding:16px 24px;font-size:13px}
.lp-actions{display:flex;flex-wrap:wrap;gap:12px}
body.is-home{position:fixed;inset:0;overflow:hidden;overscroll-behavior:none}
.deck{position:fixed;inset:0;z-index:2}
.deck .chap{position:absolute;inset:0;min-height:0;padding:0;display:block;visibility:hidden;pointer-events:none}
.deck .chap.in,.deck .chap.out{visibility:visible}
.deck .chap.in{pointer-events:auto}
.deck .chap-in{position:absolute;left:var(--pad);bottom:clamp(110px,15vh,150px);width:min(46vw,640px);max-height:calc(100% - 240px);overflow-y:auto;scrollbar-width:none;overscroll-behavior:contain;touch-action:pan-y}
.deck .chap-in::-webkit-scrollbar{display:none}
.out .wd>span{transform:translateY(-105%);transition-duration:.5s;transition-delay:calc(var(--i,0) * 15ms)}
.out .rv{opacity:0;transform:translateY(-10px);transition-duration:.35s;transition-delay:0s}
.story-chrome{pointer-events:auto}
.story-chrome .counter .discover{margin-left:8px;color:var(--mute)}
.story-chrome .discover i{height:26px}
@media (max-width:900px){
  .deck .chap-in{right:var(--pad);width:auto;bottom:92px;max-height:calc(52% - 40px)}
  .deck .chap[data-dim] .chap-in{max-height:calc(100% - 180px)}
  .story-chrome .pill{padding:11px 14px}
}

.counter{white-space:nowrap}
@media (max-width:900px){.story-chrome .counter .discover{display:none}.landing-panel{padding:20px}.landing-panel h1{margin-top:12px}}

/* stacked wordmark, header and loader */
.brand .word{display:grid;gap:3px;font-size:13px;letter-spacing:.2em;line-height:1}
.brand .word b{font-weight:700}
.brand .word b+b{font-weight:500;letter-spacing:.42em}
.loader .ld-word{display:grid;justify-items:start;gap:.12em;font-size:clamp(26px,4.2vw,58px);letter-spacing:.2em;line-height:1}
.loader .ld-word .ln{display:flex;overflow:hidden;padding-block:.06em}
.loader .ld-word .ln+.ln{font-weight:500;letter-spacing:.42em}
@media (max-width:900px){.brand .word{font-size:12px}}

/* transition counter + bright Home figures */
.curtain .c-num{position:absolute;left:var(--pad);bottom:calc(env(safe-area-inset-bottom,0px) + 22px);font-weight:200;font-stretch:125%;font-size:clamp(56px,12vw,160px);line-height:.82;font-variant-numeric:tabular-nums;letter-spacing:-.04em;color:var(--paper)}
.curtain .c-bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--faint)}
.curtain .c-bar i{display:block;height:100%;background:var(--paper);transform:scaleX(0);transform-origin:left}
@media (max-width:900px){.deck .rows small{display:none}.deck .rows li{padding:10px 0}}

/* transition: a quality statement and the count */
.c-quote{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:min(88vw,760px);display:grid;justify-items:center;gap:18px;text-align:center;opacity:0;transition:opacity .4s ease .25s}
.curtain.in .c-quote{opacity:1}
.curtain.held .c-quote{transition:none}
.c-quote p{margin:0;font-weight:300;font-stretch:112%;font-size:clamp(28px,4.4vw,64px);line-height:1.05;letter-spacing:-.02em;color:var(--paper);text-wrap:balance}

/* loading + transition: logo, a very small quote, a small boxy count */
.c-center{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:22px;width:min(88vw,520px)}
.curtain .c-center .lg{position:relative;left:auto;top:auto;transform:none;width:clamp(90px,10vw,130px)}
.curtain .c-quote{position:static;transform:none;width:auto;display:block;margin:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);text-align:center;opacity:0;transition:opacity .4s ease .35s}
.curtain.in .c-quote{opacity:1}
.curtain.held .c-quote{transition:none}
.curtain .c-num,.loader .ld-num{position:absolute;left:50%;right:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 26px);transform:translateX(-50%);font-family:var(--display);font-weight:700;font-stretch:125%;font-size:18px;line-height:1;letter-spacing:.06em;font-variant-numeric:tabular-nums;color:var(--paper)}
.curtain .c-bar,.loader .ld-bar,.loader .ld-meta{display:none}
.ld-quote{margin:4px 0 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);text-align:center;opacity:0}

/* loading screens: bigger quote and count, bar back, logo outline thin and gone once filled */
.curtain .c-quote{font-family:var(--display);font-weight:300;font-stretch:112%;font-size:clamp(20px,2.6vw,34px);letter-spacing:-.01em;text-transform:none;color:var(--paper);line-height:1.15;text-wrap:balance}
.ld-quote{font-family:var(--display);font-weight:300;font-stretch:112%;font-size:clamp(16px,1.8vw,24px);letter-spacing:-.01em;text-transform:none;color:var(--paper);margin-top:10px}
.curtain .c-num,.loader .ld-num{font-size:clamp(24px,2.4vw,32px);bottom:calc(env(safe-area-inset-bottom,0px) + 30px)}
.curtain .c-bar,.loader .ld-bar{display:block}
.curtain .lg-o path{stroke-width:3}
.curtain.in .lg-o path{opacity:0;transition:stroke-dashoffset .55s cubic-bezier(.6,0,.2,1),opacity .3s ease .75s}
.curtain.held .lg-o path{opacity:0}

.c-logo{width:clamp(90px,10vw,130px);height:auto;overflow:visible}
.c-logo .o{fill:none;stroke:var(--paper);stroke-width:3;stroke-dasharray:1;stroke-dashoffset:1}
.c-logo .f{fill:var(--paper)}

/* Home: chapter text sits in the same panel as the landing page */
.deck .chap-in{padding:clamp(22px,2.6vw,40px);background:rgba(0,0,0,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--line)}
.deck .chap-in::before,.deck .chap-in::after{content:"";position:absolute;width:14px;height:14px;border:solid var(--paper);pointer-events:none}
.deck .chap-in::before{left:-1px;top:-1px;border-width:1px 0 0 1px}
.deck .chap-in::after{right:-1px;bottom:-1px;border-width:0 1px 1px 0}
.deck .chap-in{bottom:clamp(96px,13vh,130px)}
@media (max-width:900px){.deck .chap-in{padding:18px;bottom:84px}}

/* Home text box: no outline, and it enters a different way on each chapter */
.deck .chap-in{border:0}
.deck .chap-in::before,.deck .chap-in::after{display:none}
.deck .chap .chap-in{opacity:0;clip-path:inset(0 0 0 0);transition:opacity .8s var(--ease),transform 1.1s var(--ease),clip-path 1.1s var(--ease)}
.deck .chap[data-in="rise"] .chap-in{transform:translateY(70px)}
.deck .chap[data-in="drop"] .chap-in{transform:translateY(-80px)}
.deck .chap[data-in="left"] .chap-in{transform:translateX(-110px)}
.deck .chap[data-in="wipe"] .chap-in{opacity:1;clip-path:inset(0 100% 0 0)}
.deck .chap.in .chap-in{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
.deck .chap.out .chap-in{opacity:0;transform:translateY(-24px);clip-path:inset(0 0 0 0);transition-duration:.45s}

/* menu: centered links near the top over a cycling picture of what we do */
.burger{display:grid}
.menu{justify-content:flex-start;align-items:center;padding:calc(env(safe-area-inset-top,0px) + 110px) var(--pad) calc(env(safe-area-inset-bottom,0px) + 30px)}
.menu-fx{position:absolute;inset:0;width:100%;height:100%;opacity:.42;pointer-events:none}
.menu ol{position:relative;z-index:1;display:grid;justify-items:center;gap:2px;text-align:center}
.menu li,.menu li:last-child{border:0}
.menu a{justify-content:center;padding:4px 0;font-weight:300;font-size:clamp(40px,7vw,88px);line-height:1.05}
.menu a::before{display:none}
.menu a[aria-current="page"]{font-family:var(--serif);font-style:italic}
.menu li{opacity:0;transform:translateY(40px);transition:opacity .6s var(--ease),transform .9s var(--ease)}
.menu-open .menu li{opacity:1;transform:none;transition-delay:calc(var(--i) * 70ms + 250ms)}
.m-cap{position:relative;z-index:1;margin-top:auto;opacity:0;transition:opacity .4s ease}
.m-cap.on{opacity:1}
.menu .m-foot{position:relative;z-index:1;margin-top:18px;display:grid;justify-items:center;gap:14px;text-align:center}
@media (max-width:900px){.menu{padding-top:calc(env(safe-area-inset-top,0px) + 96px)}.menu a{font-size:clamp(38px,11vw,56px)}}
.menu .m-foot a.pill{display:inline-flex;padding:14px 22px;font-family:var(--display);font-weight:600;font-stretch:112%;font-size:12.5px;line-height:1;letter-spacing:.12em;text-transform:uppercase}
.tier .from{font-family:var(--display);font-weight:300;font-stretch:112%;font-size:clamp(26px,2.4vw,36px);letter-spacing:-.01em;text-transform:none;line-height:1.1;min-height:0}
.tier .from.q{color:var(--paper)}

.price-notes{display:flex;flex-wrap:wrap;gap:12px 40px;margin-top:22px}
.price-notes>div{display:grid;gap:4px}
.price-notes b{font-weight:400;font-stretch:112%;font-size:clamp(20px,1.8vw,26px)}

.price-notes .price-foot{flex-basis:100%;margin:0;font-size:13.5px;color:var(--mute)}

/* menu v2: black, links centered, the HD logo drawing and filling behind them */
.menu{justify-content:center;align-items:center;padding:calc(env(safe-area-inset-top,0px) + 90px) var(--pad) calc(env(safe-area-inset-bottom,0px) + 120px);background:#000}
.menu-fx,.m-cap{display:none}
.menu-logo{position:absolute;left:50%;top:50%;width:min(86vw,880px);height:auto;transform:translate(-50%,-50%);overflow:visible;pointer-events:none}
.menu-logo .o{fill:none;stroke:rgba(244,244,242,.22);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1}
.menu-logo .f{fill:#141414}
.menu .m-foot{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 28px);margin:0}

/* header logo: a faint light travelling the outline */
.hero-logo .star{fill:none;stroke:#f4f4f2;stroke-linecap:round;stroke-dashoffset:var(--l)}
@keyframes star{from{stroke-dashoffset:var(--l)}to{stroke-dashoffset:calc(var(--l) - 1)}}

/* Services: long titles stay in their column; prices small under the Websites title */
.pillar .big{font-size:clamp(36px,4.6vw,76px);overflow-wrap:break-word;hyphens:manual;max-width:100%}
.pillar>div:first-child{display:grid;align-content:start;gap:0}
.pillar .price-notes{flex-direction:column;gap:10px;margin-top:26px}
.pillar .price-notes>div{display:flex;align-items:baseline;gap:10px}
.pillar .price-notes .label{font-size:10px}
.pillar .price-notes b{font-size:15px;font-weight:500}
.pillar .price-notes .price-foot{font-size:12.5px;max-width:34ch}

/* Work: ask after the websites, then the expandable automation section */
.work-cta .wrap{display:grid;gap:26px;justify-items:start}
.more-wrap{padding-block:clamp(40px,7vh,80px)}
.more-toggle{width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;text-align:left;padding:26px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.more-toggle .mt{font-weight:300;font-stretch:112%;font-size:clamp(22px,2.6vw,38px);letter-spacing:-.02em}
.more-toggle .plus{position:relative;width:22px;height:22px}
.more-toggle .plus::before,.more-toggle .plus::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--paper);transition:transform .5s var(--ease)}
.more-toggle .plus::after{transform:rotate(90deg)}
.more-wrap.open .more-toggle .plus::after{transform:rotate(0)}
.more-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .8s var(--ease)}
.more-wrap.open .more-panel{grid-template-rows:1fr}
.more-in{overflow:hidden;min-height:0}
.more-in .lead{margin:30px 0 26px}
.vids{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px);padding-bottom:10px}
.vid{display:grid;gap:10px;min-width:0}
.vid-frame{position:relative;aspect-ratio:16/10;max-width:100%;border:1px solid var(--line);background:var(--ink-2);overflow:hidden}
.vid-frame video{width:100%;height:100%;object-fit:cover;display:block}
.vid-ph{position:absolute;inset:0;display:grid;place-items:center;background-image:var(--hd-pattern);background-size:90px 90px}
.vid-ph::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.9)}
.vid-ph .label{position:relative}
.vid h3{margin:4px 0 0;font-weight:500;font-stretch:112%;font-size:17px}
.vid p{margin:0;color:var(--mute);font-size:14.5px}
@media (max-width:900px){.vids{grid-template-columns:minmax(0,1fr)}.more-toggle{grid-template-columns:1fr auto}.more-toggle .label{grid-column:1/-1}}

.lg .lg-star{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.pillar .price-notes{display:grid;justify-items:start}
.vid-ph::before{background:rgba(0,0,0,.94)}

.pillar .price-foot{display:grid;gap:6px;font-size:12.5px;color:var(--mute);max-width:34ch;margin-top:4px}
.pillar .price-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:3px}
.pillar .price-foot li{display:flex;gap:8px}
.pillar .price-foot li::before{content:"";width:8px;height:1px;background:var(--paper);margin-top:.75em;flex:none}
.pillar .price-foot p{margin:0;color:var(--paper)}
.pillar .price-notes > .price-foot{display:grid;gap:6px}

.pillar .price-notes b i{font-style:normal;color:var(--mute);font-weight:400;margin-left:4px}
.pillar .price-foot .pf-head{color:var(--mute)}

/* Team: story, founder, three headshots */
.story-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,6vw,96px);align-items:center}
.story-split>*{min-width:0}
.story-photo{margin:0;display:grid;gap:12px}
.story-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:grayscale(1) contrast(1.05);border:1px solid var(--line)}
.story-copy{display:grid;gap:18px}
.story-copy .lead{margin:0}
.founder{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,6vw,96px);align-items:start}
.founder>*{min-width:0}
.people.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.team-note{margin:36px 0 0;color:var(--mute);max-width:60ch}
@media (max-width:900px){.story-split,.founder,.people.three{grid-template-columns:minmax(0,1fr)}}

/* Team v2: color, bigger story, founder photo, small named headshots */
.story-split{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.story-photo img,.founder-photo img{filter:none;aspect-ratio:4/5;width:100%;object-fit:cover;border:1px solid var(--line);display:block}
.founder{grid-template-columns:minmax(0,6fr) minmax(0,6fr);align-items:center}
.founder-photo{margin:0}
.founder-copy{display:grid;gap:18px}
.founder-copy p{margin:0}
.founder-copy p:not(.lead){color:var(--mute);max-width:56ch}
.people.small{max-width:900px;gap:clamp(16px,2.4vw,32px)}
.people.small .person{gap:12px;align-content:start}
.people.small .portrait img,.people.small .person:hover .portrait img{filter:none}
.p-name{display:grid;gap:4px}
.p-name h3{order:0}
.people.small .person h3{font-size:clamp(18px,1.6vw,22px)}
@media (max-width:900px){.people.three.small{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.people.three.small{grid-template-columns:minmax(0,1fr);max-width:320px}}
@media (max-width:900px){.story-split,.founder{grid-template-columns:minmax(0,1fr)}}

/* Team v3: overlaid names, static photos, story pop out, founder socials */
.people.small .portrait img,.people.small .person:hover .portrait img{transform:none;filter:none;transition:none}
.portrait .p-name{position:absolute;left:0;right:0;bottom:0;padding:40px 14px 12px;background:linear-gradient(to top,rgba(0,0,0,.85),rgba(0,0,0,0));display:grid;gap:3px}
.portrait .p-name h3{margin:0;font-size:clamp(17px,1.5vw,21px)}
.portrait .p-name .label{color:rgba(255,255,255,.75)}
.story-photo{position:relative;z-index:2}
.sp-frame{position:relative;aspect-ratio:4/5;outline:none}
.sp-frame .sp-crop{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
/* full photo sits exactly on top of the crop, clipped to it, then opens up */
.sp-frame .sp-full{position:absolute;left:0;top:-10.43%;width:222.6%;height:133.6%;max-width:none;aspect-ratio:auto;object-fit:fill;border:0;
  clip-path:inset(7.81% 55.08% 17.32% 0);transform-origin:0 7.81%;transform:scale(1);
  transition:clip-path .9s var(--ease),transform .9s var(--ease),box-shadow .9s;pointer-events:none;z-index:3}
.story-photo:hover .sp-full,.story-photo:focus-visible .sp-full,.story-photo.open .sp-full{clip-path:inset(0);transform:scale(var(--sp-s,.82));box-shadow:0 30px 90px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.25)}
.story-photo{cursor:zoom-in}
@media (max-width:900px){.story-photo{--sp-s:.449}}
.founder-social{display:flex;gap:14px;margin-top:6px}
.founder-social a{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;color:var(--paper);transition:border-color .3s}
.founder-social a:hover{border-color:var(--paper)}
.founder-social svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6}
.founder-social svg .dot,.founder-social svg .fill{fill:currentColor;stroke:none}
.sp-frame .sp-crop{transition:opacity .9s var(--ease)}
.story-photo:hover .sp-crop,.story-photo:focus-visible .sp-crop,.story-photo.open .sp-crop{opacity:.12}

/* Team v4 */
.people.three.small{grid-template-columns:repeat(4,minmax(0,1fr));max-width:1100px}
.people.small .portrait img{filter:none;transition:filter .5s var(--ease)}
.people.small .person:hover .portrait img{filter:grayscale(1)}
.portrait.contractors .ph span{font-size:clamp(40px,5vw,70px)}
@media (max-width:900px){.people.three.small{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.people.three.small{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none}}
/* story reveal: photo opens over the text, text stays faintly visible through it */
.story-copy{transition:opacity .9s var(--ease)}
.story-split:has(.story-photo:hover) .story-copy,.story-split:has(.story-photo.open) .story-copy{opacity:.45}
.story-photo .sp-full img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:fill;border:0;transition:opacity .9s var(--ease)}
.story-photo:hover .sp-full img,.story-photo:focus-visible .sp-full img,.story-photo.open .sp-full img{opacity:.72}
.sp-note{position:absolute;z-index:4;right:0;bottom:0;transform:translate(0,0);font-family:'JetBrains Mono',monospace;font-size:calc(11px / var(--sp-s,.82));letter-spacing:.12em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.7);padding:8px 12px;opacity:0;transition:opacity .5s ease .5s;pointer-events:none;white-space:nowrap}
.story-photo:hover .sp-note,.story-photo:focus-visible .sp-note,.story-photo.open .sp-note{opacity:1}
.portrait.contractors .ph{place-items:start center;padding-top:28%}
@media (max-width:520px){.portrait .p-name{padding:28px 10px 9px}.portrait .p-name h3{font-size:15px}.portrait .p-name .label{font-size:8.5px;letter-spacing:.1em}.portrait.contractors .ph span{font-size:34px}}
.section:has(.story-split){overflow-x:clip}
.story-copy p:not(.lead){margin:0;color:var(--mute);max-width:56ch}
/* Team v5: story text sits on top of the opened photo */
.story-copy{position:relative;z-index:6}
.story-split:has(.story-photo:hover) .story-copy,.story-split:has(.story-photo.open) .story-copy{opacity:1}
.story-copy h2,.story-copy p{transition:text-shadow .6s}
.story-split:has(.story-photo:hover) .story-copy :is(h2,p,.label),.story-split:has(.story-photo.open) .story-copy :is(h2,p,.label){text-shadow:0 1px 2px rgba(0,0,0,.9),0 0 18px rgba(0,0,0,.85);color:#fff}
.story-photo:hover .sp-full img,.story-photo:focus-visible .sp-full img,.story-photo.open .sp-full img{opacity:.55}
.sp-note.sp-tr{top:0;bottom:auto}
.portrait.contractors .ph{place-items:center;padding:0 0 22%}
.ph-logo{position:relative;width:46%;fill:#fff}
.sp-note.sp-tr{top:8.5%}
.pillar-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.pillar>div{position:relative;z-index:2}
/* Team v6: full photo, right half shaded under the story text */
.story-photo:hover .sp-full img,.story-photo:focus-visible .sp-full img,.story-photo.open .sp-full img{opacity:1}
.sp-shade{position:absolute;inset:0;z-index:2;background:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 44%,rgba(0,0,0,.6) 56%,rgba(0,0,0,.6) 100%);pointer-events:none}
.sp-note.sp-tr{top:7%;bottom:auto;left:68%;right:auto;white-space:normal;max-width:24%}
.story-copy{margin-top:-28px}
@media (max-width:900px){.story-copy{margin-top:0}.sp-shade{display:none}.sp-note.sp-tr{max-width:30%}}
.people.small .portrait img{transition:filter 1.6s ease}
.people.small .person:hover .portrait img{filter:grayscale(1) brightness(.78)}
.sp-note.sp-tr{top:15%}
@media (max-width:900px){.sp-note{font-size:calc(8px / var(--sp-s,.82));padding:6px 10px}.sp-note.sp-tr{top:4%;max-width:34%}}

/* Services: hidden pattern revealed around the cursor */
.pillar-fx{display:none}
.pillar-bg{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .6s ease;
  -webkit-mask-image:radial-gradient(circle 240px at var(--mx,50%) var(--my,50%),#000 0%,rgba(0,0,0,.4) 45%,transparent 100%);
  mask-image:radial-gradient(circle 240px at var(--mx,50%) var(--my,50%),#000 0%,rgba(0,0,0,.4) 45%,transparent 100%)}
.pillar-bg.on{opacity:.13}
.pb-websites{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22260%22 height=%22220%22%3E%3Cg stroke=%22%23fff%22 fill=%22none%22 stroke-width=%221%22%3E%0A%3Cpath d=%22M20 160 C 60 60, 130 60, 160 120 S 230 190, 250 90%22/%3E%0A%3Cpath d=%22M60 60 L20 160 M130 60 L160 120%22 stroke-dasharray=%223 3%22/%3E%0A%3Crect x=%2216%22 y=%22156%22 width=%228%22 height=%228%22/%3E%3Crect x=%22156%22 y=%22116%22 width=%228%22 height=%228%22/%3E%3Crect x=%22246%22 y=%2286%22 width=%228%22 height=%228%22/%3E%0A%3Ccircle cx=%2260%22 cy=%2260%22 r=%223%22/%3E%3Ccircle cx=%22130%22 cy=%2260%22 r=%223%22/%3E%0A%3Crect x=%22150%22 y=%2214%22 width=%2290%22 height=%2256%22 rx=%224%22/%3E%3Cpath d=%22M150 28H240 M162 40H210 M162 50H226%22/%3E%0A%3Ccircle cx=%2256%22 cy=%22196%22 r=%2214%22/%3E%3Cpath d=%22M90 196 h40 M110 186 v20%22/%3E%3C/g%3E%3C/svg%3E")}
.pb-automation{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22240%22 height=%22160%22%3E%3Cg stroke=%22%23fff%22 fill=%22none%22 stroke-width=%221%22%3E%0A%3Crect x=%2214%22 y=%2220%22 width=%2256%22 height=%2232%22 rx=%224%22/%3E%3Crect x=%22128%22 y=%2220%22 width=%2256%22 height=%2232%22 rx=%224%22/%3E%0A%3Crect x=%2270%22 y=%22104%22 width=%2256%22 height=%2232%22 rx=%224%22/%3E%3Cpath d=%22M98 64 l12 12 -12 12 -12 -12z%22/%3E%0A%3Cpath d=%22M70 36H128 M156 52V78H110 M86 76H42V52 M98 88V104 M184 36H240 M126 120H200V0%22/%3E%0A%3Ccircle cx=%22128%22 cy=%2236%22 r=%222.5%22 fill=%22%23fff%22/%3E%3Ccircle cx=%2298%22 cy=%22104%22 r=%222.5%22 fill=%22%23fff%22/%3E%3Ccircle cx=%22200%22 cy=%22120%22 r=%222.5%22 fill=%22%23fff%22/%3E%3C/g%3E%3C/svg%3E")}
.pb-development{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22300%22 height=%22170%22%3E%3Cg fill=%22%23fff%22 font-family=%22monospace%22 font-size=%2212%22%3E%0A%3Ctext x=%228%22 y=%2220%22%3Econst site = build(%7B fast: true %7D);%3C/text%3E%0A%3Ctext x=%228%22 y=%2242%22%3E%26lt;section class=%22hero%22%26gt;%3C/text%3E%0A%3Ctext x=%2224%22 y=%2264%22%3Eif (lead.new) book(lead);%3C/text%3E%0A%3Ctext x=%2224%22 y=%2286%22%3Ereturn grow(business);%3C/text%3E%0A%3Ctext x=%228%22 y=%22108%22%3E%26lt;/section%26gt;%3C/text%3E%0A%3Ctext x=%228%22 y=%22130%22%3Efn(api) =%26gt; %7B sync(); %7D%3C/text%3E%0A%3Ctext x=%228%22 y=%22152%22%3E01001000 01000100%3C/text%3E%3C/g%3E%3C/svg%3E")}
.pillar>.pillar-bg{position:absolute;z-index:0}
.pillar-bg.on{opacity:.17}
/* Work: compact one line call to action right after the last case */
.wrap.work-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:0 clamp(50px,8vh,90px);border:0}
.wrap.work-cta h2{margin:0;font-weight:300;font-stretch:112%;font-size:clamp(22px,2.2vw,32px);letter-spacing:-.01em}
@media (max-width:640px){.wrap.work-cta{flex-direction:column;align-items:flex-start;gap:16px}}
.sp-note.sp-one{white-space:normal;max-width:30%;line-height:1.55;text-align:left}
.sp-note.sp-one i{display:block;font-style:normal;text-align:right;margin-top:4px}
@media (max-width:900px){.sp-note.sp-one{max-width:46%}}
/* Services pattern: denser and a touch stronger */
.pillar-bg.on{opacity:.22}
.pb-websites{background-size:175px 148px}
.pb-automation{background-size:160px 107px}
.pb-development{background-size:230px 130px}
/* Team v7: expansion lines up with the frame, text sits higher, note floats inside */
.story-split{align-items:start}
.story-copy{margin-top:0;padding-top:clamp(10px,4vw,56px)}
.sp-frame .sp-full{transform-origin:0 0}
.story-photo:hover .sp-full,.story-photo:focus-visible .sp-full,.story-photo.open .sp-full{transform:translateY(7.81%) scale(var(--sp-s,.749))}
.story-photo{--sp-s:.749}
.sp-note.sp-one{right:7%;bottom:9%;max-width:26%;padding:12px 16px;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(4px)}

/* Phone: no pop out, just show the whole dorm photo with the note under it */
@media (max-width:900px){
  .story-photo{cursor:default}
  .sp-frame{aspect-ratio:4/3}
  .sp-frame .sp-crop{display:none}
  .story-photo .sp-frame .sp-full,.story-photo:hover .sp-frame .sp-full,.story-photo.open .sp-frame .sp-full,.story-photo:focus-visible .sp-frame .sp-full{left:0;top:0;width:100%;height:100%;clip-path:none;transform:none;box-shadow:none;border:1px solid var(--line)}
  .story-photo .sp-full img{opacity:1!important}
  .sp-shade{display:none}
  .story-photo .sp-note.sp-one{position:static;display:block;opacity:1;max-width:none;margin-top:10px;background:none;border:0;padding:0;backdrop-filter:none;font-size:10px;line-height:1.6;color:var(--mute);white-space:normal}
  .sp-note.sp-one i{text-align:left;color:var(--paper)}
  .sp-frame{margin-bottom:0}
}
@media (max-width:900px){
  .story-photo .sp-frame{aspect-ratio:auto}
  .story-photo .sp-frame .sp-full,.story-photo:hover .sp-frame .sp-full,.story-photo.open .sp-frame .sp-full{position:static;height:auto;border:0}
  .story-photo .sp-full img{position:static;display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--line)}
}

/* Phone: tighter spacing between sections */
@media (max-width:700px){
  .section{padding-block:44px}
  .pillar,.case{padding-block:40px}
  .page-hero{padding:118px 0 36px}
  .wrap.work-cta{padding-block:0 40px}
}

/* Inner pages: scrolling snaps section to section */
html:has(body.is-page){scroll-snap-type:y mandatory}
body.is-page :is(.page-hero,.section,.pillar,.case,.foot){scroll-snap-align:start}
@media (prefers-reduced-motion:reduce){html:has(body.is-page){scroll-snap-type:none}}
@media (min-width:901px){
.story-photo{--sp-s:.79}
.story-photo:hover .sp-full,.story-photo:focus-visible .sp-full,.story-photo.open .sp-full{transform:translateY(5.71%) scale(var(--sp-s))}
}
@media (min-width:901px){
.story-photo:hover .sp-full,.story-photo:focus-visible .sp-full,.story-photo.open .sp-full{clip-path:inset(var(--sp-c,0%) 0 var(--sp-c,0%) 0);transform:translateY(var(--sp-t,7.81%)) scale(var(--sp-s,.79))}
.sp-note.sp-one{bottom:calc(var(--sp-c,0%) + 6%);right:5%}
}
/* Team hover: slow fade to dark black and white, quick return */
.people.small .portrait img{transition:filter .3s ease}
.people.small .person:hover .portrait img{filter:grayscale(1) brightness(.7);transition:filter 1.6s ease}

/* Founder photo: metallic glisten sweep on hover */
.founder-photo{position:relative;overflow:hidden;border:1px solid var(--line)}
.founder-photo img{border:0;transition:transform .9s var(--ease)}
.founder-photo::after{content:"";position:absolute;inset:-20%;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.08) 46%,rgba(255,255,255,.32) 50%,rgba(255,255,255,.08) 54%,rgba(255,255,255,0) 60%);
  transform:translateX(-70%);mix-blend-mode:screen}
.founder-photo:hover::after{animation:glisten 1.3s cubic-bezier(.3,.6,.3,1) forwards}
.founder-photo:hover img{transform:scale(1.015)}
@keyframes glisten{from{transform:translateX(-70%)}to{transform:translateX(70%)}}
@media (prefers-reduced-motion:reduce){.founder-photo:hover::after{animation:none}}
.founder-photo::after{background:linear-gradient(115deg,rgba(255,255,255,0) 36%,rgba(255,255,255,.1) 43%,rgba(255,255,255,.42) 50%,rgba(255,255,255,.1) 57%,rgba(255,255,255,0) 64%)}
.founder-photo:hover::after{animation-duration:1.5s}
@media (max-width:640px){.story-photo .sp-note.sp-one{display:none}}
/* Team page: gentler snapping */
html:has(body.is-team){scroll-snap-type:y proximity;scroll-behavior:smooth}
body.is-team :is(.page-hero,.section,.foot){scroll-snap-stop:normal}
/* Services pattern: bigger glow, slightly brighter */
.pillar>.pillar-bg{
  -webkit-mask-image:radial-gradient(circle 400px at var(--mx,50%) var(--my,50%),#000 0%,rgba(0,0,0,.55) 40%,transparent 100%);
  mask-image:radial-gradient(circle 400px at var(--mx,50%) var(--my,50%),#000 0%,rgba(0,0,0,.55) 40%,transparent 100%)}
.pillar-bg.on{opacity:.27}
/* Landing panel: size by the shorter side so it stays compact at any zoom or screen */
.landing-panel{padding:clamp(18px,min(3vw,4.2vh),48px);gap:clamp(18px,min(3.5vw,5vh),64px);max-width:1500px;margin-inline:auto}
.landing-panel h1{font-size:clamp(28px,min(3.8vw,6.6vh),64px)}
.lp-side{gap:clamp(14px,2.4vh,24px)}
.lp-side p{font-size:clamp(14px,min(1.1vw,1.9vh),17px)}
.enter .ring{width:clamp(48px,7vh,64px);height:clamp(48px,7vh,64px)}
@media (max-width:900px){
  .landing-panel{padding:18px;gap:14px}
  .landing-panel h1{font-size:clamp(26px,min(8vw,4.6vh),40px);margin-top:10px}
  .lp-side{gap:14px}
}
@media (max-width:900px) and (max-height:760px){.lp-side p{display:none}}
@media (min-width:901px){
  .landing-panel{padding:clamp(16px,min(2.4vw,3.2vh),40px) clamp(20px,min(3vw,4vh),48px);max-width:1360px}
  .landing-panel h1{font-size:clamp(26px,min(3.1vw,5.4vh),56px);margin-top:12px}
  .lp-side{gap:clamp(12px,1.8vh,20px)}
  .enter .ring{width:clamp(44px,5.6vh,58px);height:clamp(44px,5.6vh,58px)}
}
@media (max-width:600px){.lp-side p{display:none}}
.maint{display:block;margin-top:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.maint::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#e0b24a;margin-right:8px;vertical-align:1px}