:root{
  --bg:#0a0b0d; --panel:#121417; --panel-2:#0e1013; --line:#23272e;
  --text:#e9eaec; --muted:#8b9099; --accent:#5eead4; --accent-dim:#2f4f4a;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  line-height:1.55; -webkit-font-smoothing:antialiased; min-height:100vh;
  display:flex; flex-direction:column;
}
.mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
.display{font-family:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.wrap{width:100%;max-width:1020px;margin:0 auto;padding:0 24px}
@media(min-width:1280px){.wrap{max-width:1280px;padding:0 40px}}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent-dim);color:var(--text)}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .card,.btn{transition:none}
  .card:hover{transform:none}
}

/* header */
header{padding:26px 0;border-bottom:1px solid transparent}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:12px}
.mark{width:26px;height:26px;flex:none}
.mark path{fill:none;stroke:var(--accent);stroke-linecap:round;stroke-linejoin:round}
.mark .eye{fill:var(--bg);stroke:none}

/* the ouroboros draws itself */
@keyframes rdraw{to{stroke-dashoffset:0}}
@keyframes rfade{to{opacity:1}}
.draw{stroke-dasharray:260;stroke-dashoffset:260}
.fade{opacity:0}
.mark .draw{animation:rdraw .9s ease-out .15s forwards}
.mark .fade{animation:rfade .3s ease-out .95s forwards}
.hero-mark .draw{animation:rdraw 1.5s ease-out forwards}
.hero-mark .fade{animation:rfade .5s ease-out forwards}
.hero-mark g:nth-of-type(1) .draw{animation-delay:.4s}
.hero-mark g:nth-of-type(1) .fade{animation-delay:1.7s}
.hero-mark g:nth-of-type(2) .draw{animation-delay:1.3s}
.hero-mark g:nth-of-type(2) .fade{animation-delay:2.6s}
.hero-mark g:nth-of-type(3) .draw{animation-delay:2.2s}
.hero-mark g:nth-of-type(3) .fade{animation-delay:3.5s}
@media(prefers-reduced-motion:reduce){
  .draw{animation:none !important;stroke-dashoffset:0}
  .fade{animation:none !important;opacity:1}
}
.brand .name{font-weight:700;letter-spacing:.14em;font-size:15px}
.links{display:flex;gap:22px;font-size:13px;color:var(--muted)}
.links a:hover,.links a.here{color:var(--accent)}
.links a{padding:6px 0}
@media(max-width:520px){
  .wrap{padding:0 18px}
  .links{gap:14px;font-size:12px}
  .brand .name{font-size:14px;letter-spacing:.12em}
}

/* hero */
.hero{padding:84px 0 48px;position:relative;overflow:hidden}
.eyebrow{color:var(--accent);font-size:12px;letter-spacing:.22em;text-transform:uppercase}
h1{font-size:clamp(2.2rem,6vw,3.8rem);line-height:1.04;font-weight:700;margin-top:18px;letter-spacing:-.02em;text-wrap:balance;max-width:18ch}
.lede{color:var(--muted);font-size:clamp(1rem,2.5vw,1.2rem);margin-top:22px;max-width:54ch}
/* hero layout (owner 2026-09-23: mark was "awkwardly placed and sized"): two columns,
   copy left, mark right — the mark is vertically centred on the copy block and sized to
   its column instead of hanging off the top-right corner at 12% */
.hero--split{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:56px;align-items:center}
.hero--split .hero-copy{grid-column:1;grid-row:1;min-width:0}
.hero--split .hero-mark{grid-column:2;grid-row:1;width:clamp(220px,27vw,380px);height:auto;aspect-ratio:1/1;opacity:.34;pointer-events:none;justify-self:end;align-self:center}
.hero--split .facts{max-width:470px}  /* 2+2 chips beside the mark; a lone fourth chip read as an orphan (Delacroix 09-23) */
@media(max-width:960px){.hero--split{display:block}.hero--split .hero-mark{display:none}.hero--split .facts{max-width:none}}  /* 760–960 band: 5-line h1 beside a 220px mark was the weak view; copy takes the width */
@media(max-width:640px){.hero{padding:52px 0 28px}}
.hero-mark path{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.hero-mark g:nth-of-type(2) path{stroke-width:2.5}
.hero-mark g:nth-of-type(3) path{stroke-width:5}
.facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.facts span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:6px 12px}

/* sections */
section{padding:36px 0}
.sect-head{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.sect-head b{color:var(--accent);font-weight:400;margin-right:10px}

/* portfolio */
.grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:640px){.grid{grid-template-columns:1fr 1fr}}
@media(min-width:1280px){.grid{grid-template-columns:repeat(3,1fr);gap:18px}}
.card{
  display:flex;flex-direction:column;border:1px solid var(--line);background:var(--panel);
  border-radius:14px;padding:24px;transition:border-color .15s ease,transform .15s ease;
}
.card:hover{border-color:var(--accent-dim);transform:translateY(-2px)}
.card .top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.card .tleft{display:flex;align-items:center;gap:12px;min-width:0}
.card .vlogo{width:40px;height:40px;border-radius:9px;flex:none;border:1px solid var(--line)}
.card .vname{font-size:1.35rem;font-weight:700;letter-spacing:-.01em}
.pill{font-size:10px;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--line);border-radius:999px;padding:4px 9px;color:var(--muted);white-space:nowrap}
.pill.live{color:var(--accent);border-color:var(--accent-dim)}
.card .sub{margin-top:2px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.card p{color:var(--muted);font-size:.95rem;margin-top:10px;flex:1}
.card .go{margin-top:16px;color:var(--accent);font-size:.8rem;letter-spacing:.04em}
.card.soon{opacity:.75}
.card.soon:hover{transform:none;border-color:var(--line)}

/* principles */
.plist{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:760px){.plist{grid-template-columns:1fr 1fr}}
.prin{border:1px solid var(--line);background:var(--panel-2);border-radius:14px;padding:22px}
.prin .num{color:var(--accent);font-size:12px;letter-spacing:.14em}
.prin h3{margin-top:10px;font-size:1.05rem;font-weight:700;letter-spacing:-.01em}
.prin p{color:var(--muted);font-size:.92rem;margin-top:8px}

/* about strip / prose */
.strip{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:26px;display:flex;flex-wrap:wrap;align-items:center;gap:16px;justify-content:space-between}
.strip p{color:var(--muted);max-width:56ch}
.btn{display:inline-block;border:1px solid var(--accent-dim);color:var(--accent);border-radius:10px;padding:10px 18px;font-size:.85rem;letter-spacing:.04em;transition:border-color .15s ease}
.btn:hover{border-color:var(--accent)}
.prose{max-width:64ch}
.prose h2{font-size:1.3rem;font-weight:700;letter-spacing:-.01em;margin:34px 0 10px}
.prose p{color:var(--muted);margin-top:12px}
.prose p strong{color:var(--text)}
.prose ul{margin:12px 0 0 18px;color:var(--muted)}
.prose li{margin-top:8px}
.prose a{color:var(--accent)}

/* pitch form */
.pitch-form{display:flex;flex-direction:column;gap:18px;max-width:640px}
.pitch-form label{font-size:13px;font-weight:700;letter-spacing:.04em;display:block;margin-bottom:7px}
.pitch-form label span{color:var(--muted);font-weight:400}
.pitch-form input[type=text],.pitch-form input[type=email],.pitch-form textarea{
  width:100%;background:var(--panel);border:1px solid var(--line);border-radius:10px;
  color:var(--text);padding:13px 14px;font:inherit;font-size:1rem;
}
.pitch-form input:focus,.pitch-form textarea:focus{outline:2px solid var(--accent-dim);border-color:var(--accent-dim)}
.pitch-form textarea{min-height:150px;resize:vertical}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.agree{display:flex;gap:10px;align-items:flex-start;font-size:.95rem;color:var(--muted);font-weight:400 !important}
.agree input{margin-top:4px;accent-color:var(--accent)}
.submitbtn{background:var(--accent);color:var(--bg);border:0;font:inherit;font-weight:700;font-size:1rem;padding:14px 26px;border-radius:10px;cursor:pointer;letter-spacing:.02em}
.submitbtn:hover{filter:brightness(1.08)}
.submitbtn:disabled{opacity:.6;cursor:default}
#status{min-height:24px;font-size:.95rem}
#status.err{color:#e08a84}
#status.ok{color:var(--accent);font-weight:700}

/* footer */
footer{margin-top:auto;border-top:1px solid var(--line);padding:28px 0}
.foot{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;justify-content:space-between;color:var(--muted);font-size:12px}
.foot .fl{display:flex;flex-wrap:wrap;gap:16px}
footer a:hover{color:var(--accent)}

/* desktop breathing room */
@media(min-width:1280px){
  h1{font-size:4.3rem;max-width:20ch}
  .lede{font-size:1.25rem;max-width:58ch}
  .hero{padding:96px 0 52px}
  .plist{grid-template-columns:repeat(4,1fr)}
  .prin{padding:24px 20px}
}

/* subtle badass: quiet teal glow on interactive surfaces */
.card:hover{box-shadow:0 12px 44px rgba(94,234,212,.07)}
.prin{transition:border-color .15s ease}
.prin:hover{border-color:var(--accent-dim)}
.btn:hover{box-shadow:0 0 24px rgba(94,234,212,.18)}
.hero-mark{filter:drop-shadow(0 0 28px rgba(94,234,212,.10))}
@media(prefers-reduced-motion:reduce){.prin{transition:none}}

/* ── mobile nav drawer ─────────────────────────────────────────────
   Six links in a row ran off the right edge on a phone (About, Pitch
   and Hire us were unreachable). Below 760px the links become a
   slide-in drawer instead. */
.menu-btn{display:none;background:none;border:1px solid var(--line);border-radius:10px;
  width:40px;height:40px;color:var(--text);cursor:pointer;align-items:center;justify-content:center;flex:none}
.menu-btn:hover{border-color:var(--accent-dim);color:var(--accent)}
.menu-btn svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;stroke-linecap:round;fill:none}
.menu-btn:focus-visible,.drawer a:focus-visible,.drawer-close:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.scrim{position:fixed;inset:0;background:rgba(0,0,0,.6);opacity:0;visibility:hidden;
  transition:opacity .25s ease,visibility .25s ease;z-index:40}
.scrim.open{opacity:1;visibility:visible}

.drawer{position:fixed;top:0;right:0;height:100dvh;width:min(78vw,300px);
  background:var(--panel);border-left:1px solid var(--line);z-index:50;
  transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;padding:18px;gap:4px;overscroll-behavior:contain}
.drawer.open{transform:translateX(0)}
.drawer-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.drawer-title{font-size:11px;letter-spacing:.18em;color:var(--muted)}
.drawer-close{background:none;border:none;color:var(--muted);cursor:pointer;font-size:24px;
  line-height:1;padding:4px 8px;border-radius:8px}
.drawer-close:hover{color:var(--accent)}
.drawer a{display:block;padding:14px 8px;font-size:16px;color:var(--text);
  border-bottom:1px solid var(--line)}
.drawer a:last-of-type{border-bottom:none}
.drawer a:hover,.drawer a.here{color:var(--accent)}

@media(max-width:760px){
  .links{display:none}
  .menu-btn{display:flex}
}
@media(prefers-reduced-motion:reduce){
  .drawer,.scrim{transition:none}
}
body.drawer-open{overflow:hidden}

/* ══════════════════════════════════════════════════════════════════
   CRAFT PASS 2026-09-23 — motion system, type rhythm, ladder showpiece.
   Every animation lives behind html.motion, which is only set when the
   visitor has NOT asked for reduced motion. No animation changes layout:
   opacity and transform only, so nothing shifts while the page loads.
   ══════════════════════════════════════════════════════════════════ */

/* ── the mark: serpent ouroboros (replaces the triangular form) ──── */
.mark .body,.hero-mark .body{fill:none;stroke:var(--accent);stroke-linecap:round;stroke-linejoin:round}
.mark .fillbody,.hero-mark .fillbody{fill:var(--accent);stroke:var(--accent);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.mark .eye,.hero-mark .eye{fill:var(--bg);stroke:none}
.mark .scale,.hero-mark .scale{fill:none;stroke:var(--bg);stroke-linecap:butt;opacity:.55}
.brand:hover .mark .fillbody{filter:drop-shadow(0 0 6px rgba(94,234,212,.45))}
.mark .fillbody,.hero-mark .fillbody{transition:filter .3s ease}

/* the snake draws itself, tail first, then the head takes the bite */
.mark .seg{stroke-dasharray:46;stroke-dashoffset:46;animation:rdraw .34s ease-out forwards}
.mark .seg:nth-of-type(1){animation-delay:.04s}
.mark .seg:nth-of-type(2){animation-delay:.16s}
.mark .seg:nth-of-type(3){animation-delay:.28s}
.mark .seg:nth-of-type(4){animation-delay:.40s}
.mark .seg:nth-of-type(5){animation-delay:.52s}
.mark .fade{opacity:0;animation:rfade .34s ease-out .84s forwards}
.hero-mark .seg{stroke-dasharray:46;stroke-dashoffset:46;animation:rdraw 1.1s ease-out forwards}
.hero-mark .fade{opacity:0;animation:rfade .5s ease-out forwards}
.hero-mark g:nth-of-type(1) .seg{animation-delay:.25s}
.hero-mark g:nth-of-type(1) .fade{animation-delay:1.5s}
.hero-mark g:nth-of-type(2) .seg{animation-delay:1.0s}
.hero-mark g:nth-of-type(2) .fade{animation-delay:2.2s}
.hero-mark g:nth-of-type(3) .seg{animation-delay:1.75s}
.hero-mark g:nth-of-type(3) .fade{animation-delay:2.9s}
.hero-mark .body{stroke-width:1.6}
.hero-mark g:nth-of-type(2) .body{stroke-width:2.6}
.hero-mark g:nth-of-type(3) .body{stroke-width:4.6}
.hero-mark .scale{display:none}
@media(prefers-reduced-motion:reduce){
  .mark .seg,.hero-mark .seg{animation:none !important;stroke-dashoffset:0}
  .mark .fade,.hero-mark .fade{animation:none !important;opacity:1}
}

/* ── type scale + vertical rhythm ────────────────────────────────── */
:root{--ease:cubic-bezier(.2,.7,.2,1);--rhythm:clamp(44px,6.4vw,78px)}
body{line-height:1.6}
section{padding:var(--rhythm) 0}
.sect-head{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.sect-head::after{content:"";flex:1 1 auto;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
h2.sect-head b{letter-spacing:.14em}
.prose h2{font-size:clamp(1.28rem,2.4vw,1.55rem);margin:40px 0 4px}
.prose p{margin-top:14px;max-width:66ch}
.card p,.prin p,.rung p{line-height:1.62}
.strip p{line-height:1.62}
h1{margin-bottom:0}
.lede{text-wrap:pretty}

/* ── reveal system (JS adds .is-in / .r-item) ────────────────────── */
html.motion [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .62s var(--ease),transform .62s var(--ease)}
html.motion [data-reveal].is-in{opacity:1;transform:none}
html.motion [data-reveal][data-stagger]{opacity:1;transform:none;transition:none}
html.motion [data-stagger] .r-item{opacity:0;transform:translateY(20px)}
html.motion [data-stagger].is-in .r-item{opacity:1;transform:none;transition:opacity .58s var(--ease) var(--d,0ms),transform .58s var(--ease) var(--d,0ms)}

/* ── hero entrance. The h1 moves but never fades: it is the largest
   paint on the page and fading it would delay LCP. ──────────────── */
@keyframes rise{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:none}}
@keyframes h1rise{from{transform:translateY(10px)}to{transform:none}}
html.motion .hero .eyebrow{animation:rise .5s var(--ease) .04s both}
html.motion .hero h1{animation:h1rise .62s var(--ease) both}
html.motion .hero .lede{animation:rise .58s var(--ease) .16s both}
html.motion .hero .facts span{animation:rise .5s var(--ease) both}
html.motion .hero .facts span:nth-child(1){animation-delay:.28s}
html.motion .hero .facts span:nth-child(2){animation-delay:.34s}
html.motion .hero .facts span:nth-child(3){animation-delay:.40s}
html.motion .hero .facts span:nth-child(4){animation-delay:.46s}
.facts span{transition:border-color .25s ease,color .25s ease}
.facts span:hover{border-color:var(--accent-dim);color:var(--text)}

/* ── depth + edge-light on raised surfaces ───────────────────────── */
.card,.prin,.rung,.strip{position:relative}
.card{transition:border-color .28s ease,transform .32s var(--ease),box-shadow .32s ease}
.card:hover,.card:focus-visible{border-color:var(--accent-dim);transform:translateY(-4px);box-shadow:0 18px 50px rgba(0,0,0,.45),0 2px 0 0 rgba(94,234,212,.12) inset}
.card.soon:hover{transform:none}
@media(hover:hover) and (pointer:fine){
  html.motion .card::after,html.motion .prin::after,html.motion .rung::after{
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    background:radial-gradient(280px circle at var(--mx,50%) var(--my,0%),rgba(94,234,212,.13),transparent 62%);
    opacity:0;transition:opacity .32s ease}
  html.motion .card:hover::after,html.motion .prin:hover::after,html.motion .rung:hover::after{opacity:1}
}
.prin{transition:border-color .25s ease,transform .3s var(--ease)}
.prin:hover{transform:translateY(-2px)}
.card .vlogo{transition:transform .32s var(--ease)}
.card:hover .vlogo{transform:scale(1.06)}
.card .go{transition:transform .28s var(--ease)}
.card:hover .go{transform:translateX(3px)}
.btn{transition:border-color .2s ease,transform .25s var(--ease),box-shadow .25s ease}
.btn:hover{transform:translateY(-1px)}

/* ── the ladder: a climb, not a list ─────────────────────────────── */
.rungs{list-style:none;display:grid;gap:12px;position:relative}
.rung{border:1px solid var(--line);background:var(--panel-2);border-radius:14px;padding:20px;display:grid;gap:6px;
  transition:border-color .28s ease,transform .3s var(--ease),background .3s ease}
.rung::before{content:"";position:absolute;left:-1px;top:16px;bottom:16px;width:2px;border-radius:2px;
  background:var(--accent);opacity:var(--lit,.3);transform:scaleY(.42);transform-origin:top;
  transition:transform .45s var(--ease),opacity .3s ease}
.rung:hover{border-color:var(--accent-dim);transform:translateX(3px)}
.rung:hover::before{transform:scaleY(1);opacity:1}
.rung .rnum{color:var(--accent);font-size:12px;letter-spacing:.14em;opacity:var(--lit,.55);transition:opacity .3s ease}
.rung:hover .rnum{opacity:1}
.rung h3{font-size:1.06rem;font-weight:700;letter-spacing:-.01em}
.rung p{color:var(--muted);font-size:.93rem;margin-top:6px}
.rung p a{color:var(--text);border-bottom:1px solid var(--accent-dim);transition:border-color .2s ease}
.rung p a:hover{border-bottom-color:var(--accent)}
/* the climb: each rung burns a little brighter than the one below it */
.rungs .rung:nth-child(1){--lit:.34}
.rungs .rung:nth-child(2){--lit:.47}
.rungs .rung:nth-child(3){--lit:.60}
.rungs .rung:nth-child(4){--lit:.73}
.rungs .rung:nth-child(5){--lit:.86}
.rungs .rung:nth-child(6){--lit:1}
@media(min-width:760px){
  .rung{grid-template-columns:104px 1fr;column-gap:20px;padding:22px 26px}
  .rung .rnum{padding-top:3px}
  .rung p{max-width:72ch}
}
/* the landing at the top of the ladder carries more weight than a rung */
.strip.landing{background:linear-gradient(180deg,var(--panel),var(--panel-2));border-color:var(--accent-dim);
  border-left:2px solid var(--accent);padding:30px 28px;margin-top:22px}
.strip.landing p{max-width:62ch}
.strip.landing p strong{font-size:1.06rem;letter-spacing:-.01em}
@media(prefers-reduced-motion:reduce){.rung,.rung::before,.card,.prin,.btn{transition:none}.rung:hover,.card:hover,.prin:hover{transform:none}}

/* ── header: sticky, quiet, aware of scroll ──────────────────────── */
header{position:sticky;top:0;z-index:30;background:rgba(10,11,13,.78);
  -webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);
  transition:padding .25s ease,border-color .25s ease,background .25s ease}
header.is-stuck{padding:15px 0;border-bottom-color:var(--line);background:rgba(10,11,13,.92)}
html{scroll-padding-top:92px}
section[id]{scroll-margin-top:28px}
.links a{position:relative}
.links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease)}
.links a:hover::after,.links a.here::after{transform:scaleX(1)}
.drawer a.here{border-left:2px solid var(--accent);padding-left:10px}
@media(prefers-reduced-motion:reduce){header,.links a::after{transition:none}}

/* ── focus: one ring, everywhere ─────────────────────────────────── */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,
.card:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:10px}
section:focus{outline:none}
.pitch-form input:focus-visible,.pitch-form textarea:focus-visible{outline-offset:1px}

/* ── the hire trio: three columns is a desktop idea ──────────────── */
.plist.trio{grid-template-columns:1fr}
@media(min-width:720px){.plist.trio{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1280px){.plist.trio{grid-template-columns:repeat(3,1fr)}}