/* ══════════════════════════════════════════════════════════
   SIGNAL DS v3 — paper, ink, one ember
   ══════════════════════════════════════════════════════════ */
:root{
  --paper:#F4F1EB; --paper-2:#EDE8E0; --card:#FFFCF8; --ink:#0E0D0C; --ink-2:#171614; --ink-3:#22201D;
  --ash:#4E4945; --ash-2:#847C74; --line:rgba(14,13,12,.09); --line-2:rgba(14,13,12,.16);
  --ember:#F14E1C; --ember-deep:#BF3A11; --ember-soft:rgba(241,78,28,.09); --ember-lift:#FF8055;
  --bone:#F4F1EB; --bone-2:#ADA69D;
  --gutter:clamp(20px,4.6vw,72px); --maxw:1340px;
  --r-card:24px; --r-lg:32px; --r-pill:999px;
  --fs-display:clamp(46px,9vw,124px);
  --fs-h2:clamp(34px,5.6vw,76px);
  --fs-h3:clamp(20px,2vw,25px);
  --fs-lead:clamp(17px,1.35vw,20px);
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-back:cubic-bezier(.34,1.56,.64,1);
  --shadow:0 40px 80px -40px rgba(14,13,12,.3);
  --shadow-sm:0 18px 36px -24px rgba(14,13,12,.35);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);
  font-family:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  font-feature-settings:"ss01","cv01"}
img,svg,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--ember);color:#fff}
:focus-visible{outline:2px solid var(--ember);outline-offset:4px;border-radius:6px}
.skip{position:absolute;left:-9999px;top:12px;z-index:9999;background:var(--ink);color:var(--bone);
  padding:12px 20px;border-radius:var(--r-pill);font-size:14px}
.skip:focus{left:var(--gutter)}

/* ── page texture: grain + drifting bloom ── */
.grain{position:fixed;inset:-50%;z-index:1;pointer-events:none;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
  animation:grainshift 6s steps(6) infinite}
@keyframes grainshift{
  0%{transform:translate(0,0)}20%{transform:translate(-4%,2%)}40%{transform:translate(3%,-3%)}
  60%{transform:translate(-2%,-2%)}80%{transform:translate(2%,3%)}100%{transform:translate(0,0)}}
body>*{position:relative;z-index:2}
.grain{z-index:9998}

/* ── custom cursor: quiet by default, never covers what you are reading ── */
.cursor,.cursor-dot{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;
  border-radius:var(--r-pill);will-change:transform;opacity:0;transition:opacity .3s}
.cursor{width:30px;height:30px;margin:-15px 0 0 -15px;border:1.5px solid var(--ember);
  background:transparent;display:grid;place-items:center;
  transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),
    background .3s,border-color .3s,opacity .3s}
.cursor .lbl{font-family:"JetBrains Mono",monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;opacity:0;white-space:nowrap;transition:opacity .2s}
/* plain links and buttons: the ring only thins and tints — text stays readable through it */
.cursor.hover{width:44px;height:44px;margin:-22px 0 0 -22px;border-color:var(--ember);
  background:rgba(241,78,28,.10)}
/* only elements that declare a label get the solid disc, and only large ones do */
.cursor.hot{width:74px;height:74px;margin:-37px 0 0 -37px;background:var(--ember);border-color:transparent}
.cursor.hot .lbl{opacity:1}
/* quiet zones (nav, dock, footer, wordmark) skip the ring entirely so it never sits over
   dense text, but the dot still gives a small ember pulse — it isn't completely inert now */
.cursor-dot{width:5px;height:5px;margin:-2.5px 0 0 -2.5px;background:var(--ink);
  transition:opacity .25s,background .2s,width .2s,height .2s,margin .2s}
.cursor-dot.pulse{background:var(--ember);width:9px;height:9px;margin:-4.5px 0 0 -4.5px}
html.hide-dot .cursor-dot{opacity:0}
html.has-cursor .cursor,html.has-cursor .cursor-dot{opacity:1}
html.has-cursor.hide-dot .cursor-dot{opacity:0}
html.has-cursor.on-ink .cursor{border-color:var(--ember-lift)}
html.has-cursor.on-ink .cursor-dot{background:var(--bone)}

/* ── scroll progress ── */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:9997;background:transparent}
.progress i{display:block;height:100%;width:0;background:var(--ember);transform-origin:left}

/* ── type ── */
.mono{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ash-2);line-height:1.7}
.serif{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.015em}
h1,h2,h3,h4{font-weight:600;letter-spacing:-.035em;line-height:.98;text-wrap:balance}
h1{font-size:var(--fs-display)}
h2{font-size:var(--fs-h2);line-height:1}
h3{font-size:var(--fs-h3);letter-spacing:-.02em;line-height:1.18}
p{max-width:64ch;text-wrap:pretty}
.lead{font-size:var(--fs-lead);line-height:1.62;color:var(--ash)}
.ember{color:var(--ember-deep)}
.sec-ink .ember{color:var(--ember-lift)}

/* ── layout: generous ── */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
section{padding-block:clamp(64px,9.5vw,136px);position:relative}
.sec-ink{background:var(--ink);color:var(--bone);overflow:hidden}
.sec-ink::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(244,241,235,.09) 1px,transparent 1px);background-size:26px 26px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 20%,transparent 75%)}
.sec-ink>*{position:relative}
.sec-ink .lead,.sec-ink p{color:var(--bone-2)}
.sec-ink .mono{color:var(--ash-2)}

/* section headers: index + rule, asymmetric */
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:40px;
  margin-bottom:clamp(40px,5vw,76px)}
.sec-head .idx{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.sec-head .idx::after{content:"";height:1px;width:clamp(40px,10vw,160px);background:var(--line-2)}
.sec-ink .sec-head .idx::after{background:rgba(244,241,235,.2)}
.grid{display:grid;gap:clamp(16px,1.6vw,22px)}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* ── nav ── */
.nav{position:fixed;top:0;left:0;right:0;z-index:90;transition:transform .5s var(--ease),background .4s,border-color .4s;
  border-bottom:1px solid transparent}
.nav.stuck{background:rgba(244,241,235,.72);backdrop-filter:blur(16px) saturate(140%);border-bottom-color:var(--line)}
.nav.hide{transform:translateY(-110%)}
/* the full nav slides away scrolling down (above), but this small centered
   pill takes its place instead of leaving nothing — most visitors never
   hover the logo, so this is also the one guaranteed chance to show its
   wink off to everyone, not just mouse users (see .wordmark.wink) */
.nav-mini{position:fixed;top:14px;left:50%;z-index:91;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-pill);
  box-shadow:var(--shadow-sm);padding:8px 20px 8px 14px;
  opacity:0;pointer-events:none;
  transform:translate(-50%,-18px) scale(.92);
  transition:opacity .4s var(--ease),transform .45s var(--ease)}
.nav-mini.show{opacity:1;pointer-events:auto;transform:translate(-50%,0) scale(1)}
.nav-mini .wordmark{font-size:20px}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-block:18px;width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter);position:relative}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}
.navlinks{display:flex;align-items:center;gap:2px}
.navlinks a{padding:10px 14px;font-size:14.5px;color:var(--ash);position:relative;overflow:hidden;
  border-radius:var(--r-pill)}
.navlinks a::after{content:"";position:absolute;left:14px;right:14px;bottom:7px;height:1px;background:var(--ink);
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.navlinks a:hover{color:var(--ink)}
.navlinks a:hover::after{transform:scaleX(1);transform-origin:left}
.navlinks a[aria-current="page"]{color:var(--ink)}
.navlinks a[aria-current="page"]::after{transform:scaleX(1);background:var(--ember)}
.navtoggle{display:none;border:1px solid var(--line-2);background:none;border-radius:var(--r-pill);
  padding:11px 18px;font:inherit;font-size:14px;cursor:pointer}

/* ── floating dock (desktop) ── */
.dock{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(140%);z-index:95;
  display:flex;align-items:center;gap:4px;padding:7px;border-radius:var(--r-pill);
  background:rgba(24,22,20,.92);border:1px solid rgba(244,241,235,.16);backdrop-filter:blur(18px);
  box-shadow:0 20px 50px -20px rgba(14,13,12,.6),0 0 0 1px rgba(14,13,12,.35),inset 0 1px 0 rgba(244,241,235,.08);
  transition:transform .7s var(--ease);opacity:1}
.dock.up{transform:translateX(-50%) translateY(0)}
.dock a{padding:11px 18px;border-radius:var(--r-pill);font-size:14px;color:var(--bone-2);
  transition:color .25s,background .25s}
.dock a:hover{color:var(--bone);background:rgba(244,241,235,.1)}
.dock a.cta{background:var(--ember);color:#fff}
.dock a.cta:hover{background:var(--ember-lift)}
@media (max-width:860px){.dock{display:none}}

/* ── buttons: magnetic, arrow sweep ── */
.btn{display:inline-flex;align-items:center;gap:12px;padding:18px 30px;border-radius:var(--r-pill);
  font-size:15.5px;font-weight:500;border:1px solid transparent;cursor:pointer;font-family:inherit;
  position:relative;overflow:hidden;isolation:isolate;
  transition:color .35s var(--ease),border-color .35s var(--ease),transform .4s var(--ease-back)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  transform:translateY(101%);transition:transform .5s var(--ease)}
.btn:hover::before{transform:translateY(0)}
.btn .arw{display:inline-block;transition:transform .45s var(--ease)}
.btn:hover .arw{transform:translateX(5px)}
.btn-primary{background:var(--ember);color:#fff}
.btn-primary::before{background:var(--ink)}
.btn-ink{background:var(--ink);color:var(--bone)}
.btn-ink::before{background:var(--ember)}
.btn-ghost{border-color:var(--line-2);color:var(--ink)}
.btn-ghost::before{background:var(--ink)}
.btn-ghost:hover{color:var(--paper);border-color:var(--ink)}
.sec-ink .btn-ghost{border-color:rgba(244,241,235,.25);color:var(--bone)}
.sec-ink .btn-ghost::before{background:var(--bone)}
.sec-ink .btn-ghost:hover{color:var(--ink)}
.btn-sm{padding:12px 20px;font-size:14px}

/* ── badges, chips ── */
.badge{align-self:flex-start;display:inline-flex;align-items:center;gap:11px;padding:9px 18px 9px 11px;
  border-radius:var(--r-pill);background:var(--card);border:1px solid var(--line);font-size:13.5px;
  box-shadow:var(--shadow-sm)}
.sec-ink .badge{background:rgba(244,241,235,.05);border-color:rgba(244,241,235,.12);color:var(--bone);box-shadow:none}
.badge .uw{width:22px;height:22px;border-radius:50%;flex:0 0 auto;object-fit:contain}
.badge .div{width:1px;height:14px;background:var(--line-2)}
.email-chip{display:inline-flex;align-items:center;gap:7px}
.copy-btn{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex:0 0 auto;
  border-radius:50%;border:1px solid currentColor;opacity:.5;background:none;color:inherit;padding:0;
  cursor:pointer;transition:opacity .25s,color .25s}
.copy-btn:hover{opacity:1}
.copy-btn svg{width:11px;height:11px;pointer-events:none}
.copy-btn .ic-check{display:none}
.copy-btn.copied{opacity:1;color:var(--ember)}
.copy-btn.copied .ic-copy{display:none}
.copy-btn.copied .ic-check{display:block}
.chip{display:inline-block;padding:9px 16px;border-radius:var(--r-pill);border:1px solid var(--line-2);
  font-size:13.5px;color:var(--ash);transition:transform .35s var(--ease-back),border-color .3s,color .3s}
.chip:hover{transform:translateY(-3px) rotate(-1.2deg);border-color:var(--ember);color:var(--ember-deep)}
.sec-ink .chip{border-color:rgba(244,241,235,.18);color:var(--bone-2)}
.sec-ink .chip:hover{border-color:var(--ember);color:var(--ember-lift)}
.eyebrow{align-self:flex-start;display:inline-flex;align-items:center;gap:9px;padding:7px 15px;
  border-radius:var(--r-pill);background:var(--ember-soft);color:var(--ember-deep);
  font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ember);animation:pulse 2.4s infinite}

/* ── cards ── */
.card{border-radius:var(--r-card);background:var(--card);border:1px solid var(--line);
  padding:clamp(24px,2.4vw,34px);position:relative;overflow:hidden;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(241,78,28,.10),transparent 62%);
  transition:opacity .4s}
.card:hover::after{opacity:1}
.card-hover:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:rgba(241,78,28,.4)}
.sec-ink .card{background:var(--ink-2);border-color:rgba(244,241,235,.09)}
.card-ember{background:linear-gradient(152deg,var(--ember) 0%,var(--ember-deep) 100%);border-color:transparent;color:#fff}
.card-ember p,.card-ember .mono{color:#FFE0D2}
.card-ember::after{background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.18),transparent 60%)}

/* pricing bands: name+sub on the left, price+timeline stacked and
   right-aligned in the same style, a soft brand-color glow behind the
   number instead of a flat white row */
.price-row{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.price-row::before{content:"";position:absolute;top:50%;right:-70px;width:240px;height:240px;
  border-radius:50%;transform:translateY(-50%);pointer-events:none;
  background:radial-gradient(circle,rgba(241,78,28,.10) 0%,rgba(241,78,28,0) 70%)}

/* ── hero ── */
.hero{padding-block:clamp(112px,14vh,172px) clamp(44px,6vw,88px);position:relative;overflow:clip}
.bloom{position:absolute;border-radius:50%;pointer-events:none;filter:blur(10px)}
.bloom-a{top:-380px;right:-220px;width:900px;height:900px;
  background:radial-gradient(circle at 40% 40%,rgba(241,78,28,.22),rgba(241,78,28,0) 62%);
  animation:drift 22s ease-in-out infinite alternate}
.bloom-b{bottom:-420px;left:-260px;width:760px;height:760px;
  background:radial-gradient(circle at 50% 50%,rgba(241,78,28,.10),rgba(241,78,28,0) 65%);
  animation:drift 28s ease-in-out infinite alternate-reverse}
@keyframes drift{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(-60px,50px,0) scale(1.12)}}
.hero-in{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(32px,4vw,64px);align-items:start}
@media (min-width:1081px){.hero-in{align-items:center}}
.hero-copy{display:flex;flex-direction:column;gap:clamp(22px,2.4vw,32px)}
.hero h1{margin-top:4px}
.hero h1 .serif{display:block;color:var(--ember-deep)}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.hero-aside{display:flex;flex-direction:column;gap:18px;padding-top:clamp(0px,4vw,60px);min-width:0}

/* line-mask reveal */
.lines{display:block}
.line{display:block;overflow:hidden}
/* Instrument Serif italic's descenders (the tails on j/y/g/p) sit lower than
   the reveal mask's tight box expects and were getting clipped — this is
   always the last line in a headline (see build.py), so extra bottom room
   here never pushes into a line that comes after it */
.line-serif{padding-bottom:.14em;margin-bottom:-.14em}
.line>span{display:block;transform:translateY(105%);transition:transform 1.05s var(--ease)}
.in .line>span,.line.in>span{transform:translateY(0)}
.line:nth-child(2)>span{transition-delay:.09s}
.line:nth-child(3)>span{transition-delay:.18s}

/* ── marquee ── */
.marquee{overflow:hidden;position:relative;padding-block:22px;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:48px;width:max-content;animation:slide 34s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.logowall-item{display:inline-flex;align-items:center;gap:10px;height:30px;flex:0 0 auto;
  color:var(--ash);opacity:.62;transition:opacity .3s}
.logowall-item img,.logowall-item svg{height:100%;width:auto;display:block}
.logowall-item .lw-name{font-family:"JetBrains Mono",monospace;font-size:13px;letter-spacing:.03em;
  white-space:nowrap;color:inherit}
.marquee:hover .logowall-item{opacity:1}
.logowall-item:hover{opacity:1}
@keyframes slide{to{transform:translateX(-50%)}}

/* ── scroll-on cue: points from the featured grid down to the full list ── */
.more-cue{display:flex;flex-direction:column;align-items:center;gap:12px;
  margin:clamp(40px,5vw,64px) auto 0;width:fit-content;text-decoration:none;color:var(--ash-2);transition:color .3s}
.more-cue:hover{color:var(--ember-deep)}
.more-cue-arrow{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:50%;border:1px solid var(--line-2);animation:cue-bob 1.8s ease-in-out infinite;transition:border-color .3s}
.more-cue:hover .more-cue-arrow{border-color:var(--ember)}
@keyframes cue-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* ── work rows + elastic cursor preview ── */
.rows{border-top:1px solid var(--line)}
.sec-ink .rows{border-color:rgba(244,241,235,.12)}
.row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:clamp(16px,3vw,40px);
  padding:clamp(24px,3vw,40px) 0;border-bottom:1px solid var(--line);position:relative;isolation:isolate;
  transition:padding-inline .55s var(--ease),color .35s}
.sec-ink .row{border-color:rgba(244,241,235,.12)}
.row::before{content:"";position:absolute;inset:0 -24px;z-index:-1;border-radius:18px;
  background:rgba(241,78,28,.08);
  transform:scaleY(0);transform-origin:bottom;transition:transform .55s var(--ease)}
.sec-ink .row::before{background:rgba(241,78,28,.14)}
.row:hover::before{transform:scaleY(1);transform-origin:top}
.row:hover{padding-inline:24px;color:var(--ember-deep)}
.sec-ink .row:hover{color:var(--ember-lift)}
.row:hover .mono,.row:hover .row-name{color:inherit}
.row .row-num{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--ash-2);transition:color .35s}
.row .row-name{font-size:clamp(24px,3.2vw,40px);font-weight:600;letter-spacing:-.03em;transition:color .35s}
.row .row-arrow{transition:transform .5s var(--ease-back);opacity:.4}
.row:hover .row-arrow{transform:translate(8px,-8px) rotate(0deg);opacity:1}
#peek{position:fixed;top:0;left:0;z-index:70;width:330px;height:220px;border-radius:18px;overflow:hidden;
  pointer-events:none;opacity:0;transform:scale(.86);transform-origin:center;
  transition:opacity .35s var(--ease),transform .45s var(--ease-back);will-change:transform;
  box-shadow:0 30px 60px -20px rgba(14,13,12,.5)}
#peek.on{opacity:1}
#peek .shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;
  opacity:0;transition:opacity .3s}
#peek.has-shot .shot{opacity:1}
#peek .name{position:absolute;inset:0;display:grid;place-items:center;font-size:26px;font-weight:600;
  letter-spacing:-.03em;color:rgba(244,241,235,.9);text-align:center;padding:0 18px}
#peek.has-shot .name{opacity:0}
#peek .inner{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;
  padding:14px 16px 16px;background:linear-gradient(180deg,rgba(14,13,12,.35) 0%,rgba(14,13,12,0) 35%,
  rgba(14,13,12,.45) 100%)}
#peek .bar{display:flex;gap:6px}
#peek .bar i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.28)}
#peek .host{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.12em;color:#fff;
  background:rgba(14,13,12,.45);padding:6px 10px;border-radius:var(--r-pill);backdrop-filter:blur(6px)}

/* ── case card ── */
.case{display:flex;flex-direction:column;overflow:hidden;padding:0;border-radius:var(--r-card)}
.case .thumb{height:230px;display:flex;align-items:flex-end;padding:20px;position:relative;overflow:hidden}
.case .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;
  transition:transform .9s var(--ease)}
.case:hover .thumb img{transform:scale(1.06)}
.case .thumb.has-shot::after{background:linear-gradient(180deg,rgba(14,13,12,0) 45%,rgba(14,13,12,.72) 100%);
  z-index:1}
.case .thumb>.mono{position:relative;z-index:2}
.case .thumb.has-shot>.mono{color:#F4F1EB!important;text-shadow:0 1px 8px rgba(14,13,12,.6)}
.case .thumb .ghost{position:absolute;left:20px;top:18px;font-size:34px;font-weight:600;letter-spacing:-.03em;
  color:rgba(244,241,235,.14);pointer-events:none}
.case .thumb::after{content:"";position:absolute;inset:0;background:inherit;transform:scale(1);
  transition:transform .8s var(--ease)}
.case:hover .thumb::after{transform:scale(1.07)}
.case .thumb>*{position:relative;z-index:1}
.case .body{padding:clamp(20px,2vw,28px);display:flex;flex-direction:column;gap:10px}
.case .go{display:inline-flex;align-items:center;gap:8px;font-family:"JetBrains Mono",monospace;font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ember-deep)}
.case:hover .go .arw{transform:translateX(5px)}
.case .go .arw{transition:transform .4s var(--ease)}

/* ── case study detail page ── */
.cs-back{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;
  font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ash);transition:color .25s}
.cs-back:hover{color:var(--ember-deep)}
.cs-shot{border-radius:var(--r-card);overflow:hidden;position:relative;aspect-ratio:3/2;
  display:flex;align-items:center;justify-content:center}
.cs-shot img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.cs-shot .ghost{font-size:42px;font-weight:600;letter-spacing:-.03em;color:rgba(244,241,235,.16)}
/* full-width band, same ink/bone tokens as .band, so the NDA notice reads
   with the same gravity as the site's other important full-width calls */
.cs-nda{width:100%;display:flex;align-items:center;gap:28px;flex-wrap:wrap;
  padding:clamp(32px,3.6vw,48px);border-radius:var(--r-lg);background:var(--ink);color:var(--bone)}
.cs-nda-icon{flex:0 0 auto;width:52px;height:52px;color:var(--ember)}
.cs-nda-icon svg{width:100%;height:100%}
.cs-nda-copy{flex:1 1 320px}
.cs-nda-copy h2{font-size:clamp(22px,2.4vw,26px);color:var(--bone)}
.cs-nda-copy p{color:rgba(244,241,235,.7);margin-top:8px;max-width:560px}
.cs-nda>.btn{flex:0 0 auto}
@media (max-width:640px){
  .cs-nda{flex-direction:column;align-items:flex-start;text-align:left}
  .cs-nda>.btn{width:100%;justify-content:center}
}

/* ── answer block ── */
.answer{position:relative;padding:6px 0 6px 26px;font-size:var(--fs-lead);line-height:1.62;color:var(--ink);
  max-width:64ch}
.answer::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:2px;
  background:linear-gradient(180deg,var(--ember),rgba(241,78,28,.15))}
.sec-ink .answer{color:var(--bone)}

/* ── stats ── */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:clamp(18px,2vw,26px)}
.stat{padding-top:20px;border-top:1px solid var(--line)}
.card .stat,.hero-aside .stat{border-top:none;padding-top:0}
.sec-ink .stat{border-color:rgba(244,241,235,.14)}
.stat .n{font-size:clamp(36px,4.6vw,60px);font-weight:600;letter-spacing:-.04em;line-height:1;
  font-variant-numeric:tabular-nums}
.stat .l{margin-top:10px;font-size:14px;color:var(--ash);max-width:22ch}
.sec-ink .stat .l{color:var(--bone-2)}

/* ── quotes ── */
.quote{border-radius:var(--r-card);background:var(--card);border:1px solid var(--line);
  padding:clamp(22px,2.2vw,30px);position:relative;overflow:hidden;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.quote:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.sec-ink .quote{background:var(--ink-2);border-color:rgba(244,241,235,.09)}
.quote q{quotes:none;display:block;font-family:"Instrument Serif",Georgia,serif;font-style:italic;
  font-size:clamp(19px,1.8vw,23px);line-height:1.34;text-indent:-.35em}
.quote .att{margin-top:16px;font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ash-2)}

/* ── faq ── */
.faq{display:flex;flex-direction:column}
.faq details{border-top:1px solid var(--line);overflow:hidden}
.faq details:last-child{border-bottom:1px solid var(--line)}
.sec-ink .faq details{border-color:rgba(244,241,235,.12)}
.faq summary{list-style:none;cursor:pointer;padding:26px 0;font-size:clamp(18px,1.8vw,22px);font-weight:600;
  letter-spacing:-.02em;display:flex;align-items:center;justify-content:space-between;gap:20px;
  transition:color .3s,padding-inline .45s var(--ease)}
.faq summary:hover{color:var(--ember-deep);padding-inline:10px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{position:relative;width:16px;height:16px;flex:0 0 auto}
.faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;background:currentColor;
  transition:transform .4s var(--ease)}
.faq summary .pm::before{left:0;top:7.5px;width:16px;height:1.5px}
.faq summary .pm::after{left:7.5px;top:0;width:1.5px;height:16px}
.faq details[open] summary .pm::after{transform:scaleY(0)}
.faq details[open] summary{color:var(--ember-deep)}
.faq .a{padding:0 0 26px;font-size:16px;line-height:1.65;color:var(--ash);max-width:72ch}
.sec-ink .faq .a{color:var(--bone-2)}

/* ── steps ── */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,1.6vw,22px)}
.step{border-radius:var(--r-card);border:1px solid var(--line);background:var(--card);
  padding:clamp(22px,2.2vw,30px);position:relative;overflow:hidden;
  transition:transform .5s var(--ease),border-color .4s}
.step:hover{transform:translateY(-5px);border-color:rgba(241,78,28,.4)}
.sec-ink .step{background:var(--ink-2);border-color:rgba(244,241,235,.09)}
.step .k{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.14em;color:var(--ember)}
.step h3{margin:14px 0 10px}
.step p{font-size:14.5px;line-height:1.58;color:var(--ash)}
.sec-ink .step p{color:var(--bone-2)}

/* ── cta band ── */
.band{margin-inline:var(--gutter);border-radius:var(--r-lg);background:var(--ink);color:var(--bone);
  padding:clamp(32px,5vw,64px);display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(30px,4vw,56px);align-items:start;position:relative;overflow:hidden}
.band::before{content:"";position:absolute;width:640px;height:640px;right:-180px;top:-260px;border-radius:50%;
  background:radial-gradient(circle,rgba(241,78,28,.30),transparent 62%);animation:drift 20s ease-in-out infinite alternate}
.band>*{position:relative}
.band p{color:var(--bone-2)}
.band-pitch{display:flex;flex-direction:column;gap:16px;max-width:480px}
.band-pitch h2{font-size:clamp(27px,3.3vw,40px)}
.band-checks{list-style:none;display:flex;flex-direction:column;gap:9px;margin-top:2px}
.band-checks li{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--bone-2)}
.band-checks .ck{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;
  border-radius:50%;background:rgba(241,78,28,.18);color:var(--ember-lift);font-size:10px;flex:0 0 auto}
.band-who{display:flex;align-items:center;gap:12px;margin-top:2px}
.band-who img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:0 0 auto;object-position:top center}
.band-who strong{display:block;font-size:14px;font-weight:600}
.band-who span{display:block;font-size:12.5px;color:var(--bone-2);margin-top:2px}
.band-form{background:rgba(244,241,235,.045);border:1px solid rgba(244,241,235,.13);border-radius:var(--r-card);
  padding:clamp(22px,2.4vw,28px);display:flex;flex-direction:column;gap:14px}
.bf-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.band-form label{display:flex;flex-direction:column;gap:8px;font-family:"Archivo",sans-serif;
  font-size:15px;font-weight:600;letter-spacing:normal;text-transform:none;color:var(--bone)}
.bf-req{font-style:normal;color:var(--ember-lift);margin-left:2px}
.band-form input,.band-form textarea{font-family:"Archivo",sans-serif;font-size:15px;font-weight:400;
  color:var(--bone);background:rgba(244,241,235,.07);border:1px solid rgba(244,241,235,.22);border-radius:12px;
  padding:12px 14px;resize:vertical;transition:border-color .3s,background .3s}
.band-form input::placeholder,.band-form textarea::placeholder{color:rgba(244,241,235,.52)}
.band-form input:focus,.band-form textarea:focus{outline:none;border-color:var(--ember);background:rgba(244,241,235,.11)}
.bf-budget{display:flex;flex-direction:column;gap:10px}
.bf-label{font-family:"Archivo",sans-serif;font-size:15px;font-weight:600;color:var(--bone)}
.bf-chips{display:flex;flex-wrap:wrap;gap:8px}
.bf-chips [data-chip]{padding:9px 15px;border-radius:var(--r-pill);border:1px solid rgba(244,241,235,.28);
  background:transparent;color:var(--bone);font-size:13.5px;font-weight:500;cursor:pointer;font-family:inherit;
  transition:border-color .3s,color .3s,background .3s}
.bf-chips [data-chip]:hover{border-color:rgba(244,241,235,.5);color:var(--bone)}
.bf-chips [data-chip][aria-pressed="true"]{background:var(--ember);border-color:var(--ember);color:#fff}
.band-form .btn{justify-content:center;width:100%;margin-top:2px}
.bf-note{text-align:center;color:rgba(244,241,235,.4);transition:all .2s}
/* success/error are a real banner, not a quiet caption swap — bold, boxed,
   and it pops in so a busy visitor doesn't miss whether the send worked */
.bf-note.is-ok,.bf-note.is-err{display:flex;align-items:center;justify-content:center;gap:8px;
  font-family:"Archivo",sans-serif;font-size:14.5px;font-weight:700;letter-spacing:normal;
  text-transform:none;padding:13px 16px;border-radius:12px;animation:bf-pop .3s var(--ease)}
.bf-note.is-ok::before,.bf-note.is-err::before{font-size:15px;line-height:1}
.bf-note.is-ok{color:#fff;background:rgba(241,128,85,.16);border:1px solid var(--ember-lift)}
.bf-note.is-ok::before{content:"\2713"}
.bf-note.is-err{color:#fff;background:rgba(255,139,122,.14);border:1px solid #FF8B7A}
.bf-note.is-err::before{content:"\26A0"}
@keyframes bf-pop{0%{opacity:0;transform:scale(.92) translateY(4px)}100%{opacity:1;transform:scale(1) translateY(0)}}
.bf-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;pointer-events:none}
.band-form .btn[disabled]{opacity:.6;cursor:default;pointer-events:none}
@media (max-width:1080px){.band{grid-template-columns:1fr}.band-pitch{max-width:none}}

/* ── footer ── */
.foot{border-top:1px solid var(--line);padding-block:clamp(48px,6vw,80px) 36px;margin-top:clamp(56px,8vw,110px)}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}
.foot h3{font-size:11px;font-family:"JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ash-2);font-weight:400;margin-bottom:18px}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:12px;font-size:15px;color:var(--ash)}
.foot ul a{position:relative;display:inline-block;transition:color .3s,transform .4s var(--ease)}
.foot ul a:hover{color:var(--ink);transform:translateX(5px)}
.foot-base{margin-top:44px;padding-top:24px;border-top:1px solid var(--line);display:flex;
  justify-content:space-between;gap:16px;flex-wrap:wrap}
/* ── reveal ── */
[data-reveal]{opacity:0;transform:translateY(22px);
  transition:opacity .85s var(--ease),transform .85s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal][data-delay="1"]{transition-delay:.08s}
[data-reveal][data-delay="2"]{transition-delay:.16s}
[data-reveal][data-delay="3"]{transition-delay:.24s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  [data-reveal]{opacity:1;transform:none}
  .line>span{transform:none}
  .grain{display:none}
  html{scroll-behavior:auto}
}

/* ── hero visual: one abstract, page-specific composition, no text/data ──
   aspect-ratio (not a fixed height) is what actually guarantees "never
   narrower than 9:16" — a fixed height:100vh here previously fought the
   column's own width and produced an accidental, much-narrower strip. */
.hero-visual{position:relative;width:100%;max-width:640px;aspect-ratio:9/16;
  border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(155deg,var(--paper-2) 0%,var(--card) 100%)}
.hv-svg{position:absolute;inset:0;width:100%;height:100%}
.hv-floor{fill:var(--ink);opacity:.1;filter:blur(9px)}
/* each shape in the hero graphic lands on its own, staggered, the first
   time the panel scrolls into view — every piece is its own wrapping <g>
   so this transform never lands on an element that already carries its
   own static rotate/translate (that combination breaks SVG matrix
   interpolation silently).
   Three weight tiers stand in for physical mass: heavy pieces (the big
   compound shapes — cards, canvases, the floor shadow) drop further and
   settle slowly with almost no springback, like something with real
   inertia landing. Light pieces (the small accent dots, sparkles) are
   thrown in fast and overshoot hard before settling, like something
   with almost no mass bouncing to a stop. Medium sits between the two.
   All three comfortably clear ~400ms on the transform, the part that
   actually reads as motion. */
.hv-piece{opacity:0;transform-box:fill-box;transform-origin:center}
.hero-visual.in .hv-piece{opacity:1;transform:none}
.hv-piece.hv-w-heavy{transform:scale(.4) translateY(46px) rotate(-3deg);
  transition:opacity .8s var(--ease),transform 1.3s cubic-bezier(.16,1,.3,1)}
.hv-piece.hv-w-medium{transform:scale(.32) translateY(32px) rotate(8deg);
  transition:opacity .68s var(--ease),transform 1s cubic-bezier(.34,1.56,.64,1)}
.hv-piece.hv-w-light{transform:scale(.16) translateY(22px) rotate(20deg);
  transition:opacity .58s var(--ease),transform .8s cubic-bezier(.34,2.2,.64,1)}
.hv-piece:nth-child(1){transition-delay:.03s}
.hv-piece:nth-child(2){transition-delay:.18s}
.hv-piece:nth-child(3){transition-delay:.32s}
.hv-piece:nth-child(4){transition-delay:.47s}
.hv-piece:nth-child(5){transition-delay:.62s}
.hv-piece:nth-child(6){transition-delay:.76s}
.hv-piece:nth-child(7){transition-delay:.91s}
.hv-piece:nth-child(8){transition-delay:1.05s}
.hv-piece:nth-child(9){transition-delay:1.2s}
.sec-ink .hero-visual{background:linear-gradient(155deg,var(--ink-2) 0%,var(--ink) 100%)}
.sec-ink .hv-floor{fill:#000;opacity:.35}

/* ── responsive ── */
@media (max-width:1080px){
  .hero-in{grid-template-columns:minmax(0,1fr)}
  .hero-aside{flex-direction:row;flex-wrap:wrap;padding-top:0}
  .hero-aside>*{flex:1 1 280px}
  .hero-aside>.hero-visual{flex:none;width:100%}
  .g-4,.steps,.stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-grid{grid-template-columns:1fr 1fr}
  #peek{display:none}
}
@media (max-width:760px){
  body{font-size:16px}
  .mono{font-size:12px;letter-spacing:.1em}
  .case .go,.quote .att,.step .k{font-size:12px}
  .navlinks{display:none}
  .navlinks.open{display:flex;position:absolute;top:66px;left:var(--gutter);right:var(--gutter);
    flex-direction:column;align-items:stretch;background:var(--card);padding:12px;border-radius:22px;
    box-shadow:var(--shadow);border:1px solid var(--line)}
  .navtoggle{display:inline-block}
  .g-2,.g-3,.g-4,.steps,.stats{grid-template-columns:1fr}
  .sec-head{grid-template-columns:1fr}
  .bf-row{grid-template-columns:1fr}
  .hero-aside{flex-direction:column;flex-wrap:nowrap}
  .row{grid-template-columns:auto minmax(0,1fr) auto;gap:14px}
  .row .row-tag{display:none}
  .cursor,.cursor-dot{display:none}
  .nav-in{gap:14px}
  .nav .wordmark{font-size:22px}
  /* shorter than the 9:16 desktop panel so it doesn't eat the whole screen
     when stacked full-width on phones — but still portrait, not landscape:
     the artwork is composed on a tall 400x600 canvas and preserveAspectRatio
     "slice" crops whatever the container doesn't match, so flipping to a
     wide/short ratio (the old 16:9 here) sliced off most of every shape */
  .hero-visual{aspect-ratio:5/7;max-width:none}
  /* footer: one full-width column instead of two cramped ones — about
     blurb first (already first in the markup), then each link list */
  .foot-grid{grid-template-columns:1fr;gap:36px}
}

/* ── the mark: A + face + NOWAR ── */
.wordmark{gap:0;font-family:"JetBrains Mono",monospace;font-size:18px;font-weight:500;letter-spacing:.06em;
  display:inline-flex;align-items:center}
@media (min-width:761px){.nav .wordmark{font-size:28px}}
.wordmark .memo{width:1.72em;height:1.72em;margin:0 .04em;border-radius:50%;flex:0 0 auto;
  transition:transform .55s var(--ease-back)}
.wordmark:hover .memo,.wordmark.wink .memo{transform:rotate(-9deg) scale(1.12) translateY(-1px)}
.wordmark:hover .eye-l,.wordmark.wink .eye-l{opacity:0}
.wordmark:hover .eye-wink,.wordmark.wink .eye-wink{opacity:1}
.wordmark:hover .mouth-grin,.wordmark.wink .mouth-grin{opacity:0}
.wordmark:hover .mouth-whoa,.wordmark.wink .mouth-whoa{opacity:1}
.wordmark:hover .brow-l,.wordmark.wink .brow-l{transform:translateY(-2px) rotate(-6deg)}
.memo .eye-l,.memo .eye-wink,.memo .mouth-grin,.memo .mouth-whoa{transition:opacity .22s}
.memo .brow-l{transition:transform .35s var(--ease-back);transform-origin:37px 40px}
.wordmark .reg{font-size:.62em;transform:translateY(-.55em);color:var(--ember);letter-spacing:0}
.sec-ink .wordmark,.foot .wordmark{color:inherit}
.wordmark .blink{width:6px;height:6px;border-radius:50%;background:var(--ember);margin-left:7px;
  animation:pulse 2.4s infinite;flex:0 0 auto}
.foot .wordmark{font-size:20px}