/* Satoshi — Fontshare, ITF Free License, self-hosted so the site has no
   third-party font dependency. Used for everything functional. */
@font-face{
  font-family:"Satoshi"; font-weight:500; font-style:normal; font-display:swap;
  src:url("/assets/fonts/satoshi-500.woff2") format("woff2");
}
@font-face{
  font-family:"Satoshi"; font-weight:700; font-style:normal; font-display:swap;
  src:url("/assets/fonts/satoshi-700.woff2") format("woff2");
}
@font-face{
  font-family:"Satoshi"; font-weight:900; font-style:normal; font-display:swap;
  src:url("/assets/fonts/satoshi-900.woff2") format("woff2");
}


/* ============================================================
   TOKENS - neutral paper, ink-led. Green is an accent only.
   ============================================================ */
:root{
  --paper:#F0F1ED;        /* neutral paper */
  --bar:#E6E8E0;          /* ledger stripe (canvas only) */
  --card:#FAFAF9;         /* fresh sheet */
  --ink:#191A15;          /* near-black ink */
  --ink-soft:#5C6055;     /* secondary text */
  --ink-faint:#6B6F64;
  --rule:#D3D6CB;         /* ledger rule */
  --rule-soft:#E3E5DD;
  --green:#34842F;        /* accent. used sparingly */
  --green-deep:#1E5B22;
  --green-wash:#EAF2E6;
  --red:#B3412B;          /* red pen. used twice, no more */
  --shadow:14 24 9;

  --f-serif:"Instrument Serif",Georgia,"Times New Roman",serif;   /* statements */
  --f-ui:"Satoshi","Helvetica Neue",Arial,sans-serif;              /* functional */
  --f-body:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --wrap:1180px;
  --pad:clamp(1.15rem,4vw,2.75rem);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#121310; --bar:#181A14; --card:#1A1C16;
    --ink:#EDEEE7; --ink-soft:#A6A99D; --ink-faint:#84887C;
    --rule:#2E3129; --rule-soft:#24261F;
    --green:#7CC95C; --green-deep:#A6DEA8; --green-wash:#1A2413;
    --red:#E2795F; --shadow:0 0 0;
  }
}
:root[data-theme="dark"]{
  --paper:#121310; --bar:#181A14; --card:#1A1C16;
  --ink:#EDEEE7; --ink-soft:#A6A99D; --ink-faint:#84887C;
  --rule:#2E3129; --rule-soft:#24261F;
  --green:#7CC95C; --green-deep:#A6DEA8; --green-wash:#1A2413;
  --red:#E2795F; --shadow:0 0 0;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:clamp(1rem,.45vw + .93rem,1.09rem);
  line-height:1.62;
}

h1,h2,h3,h4{
  font-family:var(--f-ui);
  font-weight:900;
  letter-spacing:-.028em;
  line-height:1.02;
  text-wrap:balance;
  margin:0;
}
p{margin:0}
a{color:inherit}
img{max-width:100%}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad)}

/* mono utility label — the file-tab / ledger-column voice */
.lbl{
  font-family:var(--f-mono); font-size:.685rem; font-weight:500;
  letter-spacing:.17em; text-transform:uppercase; color:var(--ink-faint);
}

:where(a,button,input,textarea,select,summary):focus-visible{
  outline:2.5px solid var(--green); outline-offset:3px; border-radius:2px;
}
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--paper); padding:.7rem 1.1rem;
  font-family:var(--f-mono); font-size:.8rem;
}
.skip:focus{left:.5rem; top:.5rem}

/* ============================================================ MARK */
.mark{width:30px; height:30px; flex:none; display:block}
.mark .tab{fill:var(--green)}
.mark .step{fill:var(--ink)}

/* ============================================================ HEADER */
.hdr{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(11px) saturate(1.3);
  border-bottom:1px solid var(--rule-soft);
  transition:padding .28s ease, border-color .28s ease;
}
.hdr-in{
  display:flex; align-items:center; gap:1.5rem;
  padding-block:1.05rem; transition:padding .28s ease;
}
.hdr.tight .hdr-in{padding-block:.6rem}
.hdr.tight{border-color:var(--rule)}

.brand{display:flex; align-items:center; gap:.62rem; text-decoration:none; margin-right:auto}
.brand-txt{display:flex; flex-direction:column; line-height:1}
.brand-name{
  font-family:var(--f-ui); font-weight:900; font-size:1.075rem;
  letter-spacing:-.02em; text-transform:uppercase;
}
.brand-sub{
  font-family:var(--f-mono); font-size:.575rem; letter-spacing:.26em;
  color:var(--ink-faint); text-transform:uppercase; margin-top:.22em;
}

.nav{display:flex; gap:.15rem; align-items:center}
.nav a{
  font-size:.888rem; font-weight:500; text-decoration:none; color:var(--ink-soft);
  padding:.44rem .7rem; border-radius:3px; position:relative; white-space:nowrap;
  transition:color .18s ease;
}
.nav a::after{
  content:""; position:absolute; left:.7rem; right:.7rem; bottom:.24rem;
  height:1.5px; background:var(--ink); transform:scaleX(0);
  transform-origin:left; transition:transform .26s cubic-bezier(.2,.7,.3,1);
}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{transform:scaleX(1)}

.btn{
  display:inline-flex; align-items:center; gap:.5rem; justify-content:center;
  font-family:var(--f-mono); font-size:.775rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; text-decoration:none;
  padding:.82rem 1.3rem; border:1.5px solid var(--ink); border-radius:2px;
  background:var(--ink); color:var(--paper); cursor:pointer;
  transition:transform .16s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover{transform:translateY(-2px); box-shadow:4px 5px 0 rgb(var(--shadow) / .16)}
.btn:active{transform:translateY(0); box-shadow:none}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--rule)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-green{background:var(--green); border-color:var(--green); color:#fff}
:root[data-theme="dark"] .btn-green,
:where(:root:not([data-theme="light"])) .btn-green{color:#0E1409}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .btn-green{color:#fff}}

.hdr-tel{
  font-family:var(--f-mono); font-size:.8rem; text-decoration:none;
  color:var(--ink-soft); font-weight:500; white-space:nowrap;
}
.hdr-tel:hover{color:var(--ink)}

.burger{display:none; background:none; border:1px solid var(--rule); border-radius:2px; padding:.5rem .6rem; cursor:pointer}
.burger span{display:block; width:19px; height:1.8px; background:var(--ink); margin:3.6px 0; transition:transform .22s ease, opacity .22s ease}
.hdr.open .burger span:nth-child(1){transform:translateY(5.4px) rotate(45deg)}
.hdr.open .burger span:nth-child(2){opacity:0}
.hdr.open .burger span:nth-child(3){transform:translateY(-5.4px) rotate(-45deg)}

@media (max-width:980px){
  .burger{display:block; order:3}
  .hdr-tel{display:none}
  .nav{
    order:4; width:100%; flex-direction:column; align-items:stretch; gap:0;
    max-height:0; overflow:hidden; transition:max-height .34s cubic-bezier(.3,.8,.3,1);
  }
  .hdr.open .nav{max-height:26rem}
  .nav a{padding:.82rem .2rem; border-bottom:1px solid var(--rule-soft); font-size:1rem}
  .nav a::after{display:none}
  .nav .btn{margin:.9rem .2rem .4rem}
  .hdr-in{flex-wrap:wrap}
}

/* ============================================================ SECTION SHELL
   Each block is a manila folder: a real tab, then the sheet. */
.sec{padding-block:clamp(3.5rem,7vw,6.5rem)}
.sec-head{margin-bottom:clamp(1.9rem,3.5vw,3rem)}
.sec-head .lbl{display:flex; align-items:center; gap:.7rem}
.sec-head .lbl::after{
  content:""; height:1px; flex:1; background:var(--rule);
  transform:scaleX(0); transform-origin:left;
  transition:transform .9s cubic-bezier(.2,.7,.3,1) .1s;
}
.sec-head.in .lbl::after{transform:scaleX(1)}
.sec-h{font-size:clamp(1.85rem,4.4vw,3.05rem); margin-top:.85rem}
.sec-sub{margin-top:1rem; max-width:63ch; color:var(--ink-soft); font-size:1.055em}

/* folder tab */
.folder{position:relative; background:var(--card); border:1px solid var(--rule); border-radius:0 5px 5px 5px}
.folder::before{
  content:attr(data-tab);
  position:absolute; left:-1px; top:-1.72rem;
  font-family:var(--f-mono); font-size:.66rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase;
  padding:.42rem .95rem .34rem; color:var(--ink-soft);
  background:var(--card); border:1px solid var(--rule); border-bottom:none;
  border-radius:5px 9px 0 0;
  transition:transform .26s cubic-bezier(.2,.7,.3,1), color .26s ease;
}
.folder:hover::before{transform:translateY(-4px); color:var(--ink)}

/* ============================================================ HERO */
.hero{position:relative; padding-block:clamp(2.6rem,6vw,4.6rem) clamp(3rem,6vw,5rem); overflow:hidden}
.hero-in{display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(2rem,4.5vw,4rem); align-items:center}
@media (max-width:900px){.hero-in{grid-template-columns:1fr; gap:2.4rem}}

.hero-eyebrow{display:flex; align-items:center; gap:.65rem; flex-wrap:wrap; margin-bottom:1.5rem}
.pin{
  display:inline-flex; align-items:center; gap:.42rem;
  font-family:var(--f-mono); font-size:.665rem; font-weight:600; letter-spacing:.15em;
  text-transform:uppercase; color:var(--ink-soft);
  background:transparent; border:1px solid var(--rule);
  padding:.36rem .68rem; border-radius:2px;
}
.pin b{width:5px; height:5px; border-radius:50%; background:var(--green); flex:none}

h1.hero-h{font-size:clamp(2.45rem,7.1vw,4.55rem); letter-spacing:-.038em}
/* word-by-word tab-slide reveal */
/* Italic glyphs paint beyond their advance width, and this wrapper clips
   with overflow:hidden to drive the slide-up reveal - which shaved the last
   letter of an italic word. Widen the clip box sideways only; the vertical
   clip still has to bite or the reveal breaks. */
/* The reveal masks each word by clipping its wrapper. That clip also cuts
   italic overhang sideways and descenders (the g in "bring") downward, so it
   is applied ONLY while the animation is actually pending: no JS, reduced
   motion, or animation finished all render unclipped. */
.hero-h .w{
  display:inline-block; vertical-align:bottom;
  padding-inline:.12em; margin-inline:-.12em;
}
.js-anim .hero-h:not(.revealed) .w{overflow:hidden}
.hero-h .w>i{display:inline-block; font-style:inherit}
.js-anim .hero-h .w>i{transform:translateY(104%); animation:tabUp .82s cubic-bezier(.16,.84,.3,1) forwards}
@keyframes tabUp{to{transform:translateY(0)}}
.hero-h em{font-style:normal; color:var(--green); position:relative; white-space:nowrap}
.hero-h em::after{
  content:""; position:absolute; left:0; right:0; bottom:.07em; height:.11em;
  background:color-mix(in srgb,var(--green) 32%,transparent);
}

.hero-p{margin-top:1.5rem; max-width:52ch; font-size:1.1em; color:var(--ink-soft)}
.hero-p strong{color:var(--ink); font-weight:600}
.hero-cta{display:flex; gap:.8rem; margin-top:2.05rem; flex-wrap:wrap}

/* canvas: chaos → order */
.canvas-hold{
  position:relative; aspect-ratio:1/.86; width:100%;
  border:1px solid var(--rule); border-radius:4px; background:var(--card);
  box-shadow:8px 10px 0 rgb(var(--shadow) / .05); overflow:hidden;
}

/* ============================================================ BEFORE / AFTER
   Real photographs of a real rescue. The visitor drags the seam.
   --pos is the seam position, 0-100%. */
.ba{position:absolute; inset:0; --pos:50%; touch-action:none; cursor:ew-resize}
.ba-layer{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.ba-after{clip-path:inset(0 0 0 var(--pos))}
.ba-line{
  position:absolute; top:0; bottom:0; left:var(--pos); width:2px; margin-left:-1px;
  background:#fff; box-shadow:0 0 0 1px rgb(0 0 0 / .28); pointer-events:none;
}
.ba-grip{
  position:absolute; top:50%; left:var(--pos);
  width:40px; height:40px; margin:-20px 0 0 -20px; border-radius:50%;
  background:#fff; box-shadow:0 2px 10px rgb(0 0 0 / .3);
  display:grid; place-items:center; pointer-events:none;
}
.ba-grip::before{
  content:""; width:13px; height:9px;
  background:var(--ink);
  clip-path:polygon(0 50%,38% 0,38% 100%, 62% 0,62% 100%,100% 50%);
}
.ba-tag{
  position:absolute; top:.7rem; z-index:3;
  font-family:var(--f-mono); font-size:.6rem; font-weight:600; letter-spacing:.15em;
  text-transform:uppercase; padding:.32rem .6rem; border-radius:2px;
  background:rgb(0 0 0 / .62); color:#fff; pointer-events:none;
  transition:opacity .25s ease;
}
.ba-tag.l{left:.7rem}
.ba-tag.r{right:.7rem}
.ba-range{
  position:absolute; inset:0; width:100%; height:100%; margin:0;
  opacity:0; cursor:ew-resize; -webkit-appearance:none; appearance:none; background:none;
}
.ba-range:focus-visible{opacity:1; outline:3px solid var(--green); outline-offset:-3px}
.ba-hint{
  position:absolute; left:50%; bottom:2.6rem; transform:translateX(-50%);
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.13em; text-transform:uppercase;
  color:#fff; background:rgb(0 0 0 / .55); padding:.3rem .65rem; border-radius:2px;
  pointer-events:none; transition:opacity .4s ease;
}
.ba.touched .ba-hint{opacity:0}
@media (prefers-reduced-motion:reduce){.ba{--pos:50%}}
.canvas-hold canvas,
.canvas-hold video,
.canvas-hold>img{display:block; width:100%; height:100%; object-fit:cover}
.canvas-cap{
  position:absolute; left:0; bottom:0; right:0;
  display:flex; justify-content:space-between; gap:1rem; align-items:baseline;
  padding:.6rem .85rem; border-top:1px solid var(--rule-soft);
  background:color-mix(in srgb,var(--card) 90%,transparent);
  font-family:var(--f-mono); font-size:.625rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-faint);
}
.canvas-cap b{color:var(--ink); font-weight:600}

/* ============================================================ REVEAL
   Base state is fully visible. JS only hides below-fold blocks. */
.js-anim .rv{opacity:0; transform:translateY(19px); transition:opacity .72s ease, transform .72s cubic-bezier(.2,.7,.3,1)}
.js-anim .rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .js-anim .rv{opacity:1 !important; transform:none !important; transition:none}
  .js-anim .hero-h .w>i{transform:none; animation:none}
}

/* ============================================================ GAPS (ledger rows) */
.gaps{background:var(--card); border-block:1px solid var(--rule)}
.gap-quote{
  font-family:var(--f-serif); font-weight:400; font-size:clamp(1.5rem,3.5vw,2.35rem);
  letter-spacing:-.028em; line-height:1.14; max-width:34ch;
}
.gap-quote span{color:var(--ink-soft)}
.gap-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(1.8rem,4vw,3.6rem); align-items:start}
@media (max-width:860px){.gap-grid{grid-template-columns:1fr; gap:2rem}}

.ledger{border-top:1px solid var(--rule)}
.ledger li{
  display:grid; grid-template-columns:6.4rem 1fr; gap:1rem; align-items:baseline;
  padding:.92rem .2rem; border-bottom:1px solid var(--rule-soft);
  list-style:none;
}
.ledger{margin:0; padding:0}
/* The left column carries a real category, not a decorative index.
   Rows with nothing meaningful to put there drop the column instead. */
.ledger .k{
  font-family:var(--f-mono); font-size:.645rem; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase; color:var(--ink-faint);
}
.ledger li:hover .k{color:var(--green)}
.ledger li.bare{grid-template-columns:1fr}
.ledger .t{font-size:1.005em}
@media (max-width:520px){
  .ledger li{grid-template-columns:1fr; gap:.28rem}
}
.gap-foot{
  margin-top:1.55rem; font-family:var(--f-mono); font-size:.775rem;
  color:var(--ink-soft); letter-spacing:.02em;
}
.gap-foot s{color:var(--red); text-decoration-thickness:1.5px}

/* ============================================================ SERVICES */
.svc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.6rem,2.6vw,2.1rem)}
@media (max-width:940px){.svc-grid{grid-template-columns:1fr; gap:2.6rem}}
.svc{padding:1.6rem 1.5rem 1.5rem; display:flex; flex-direction:column; gap:1.05rem}
.svc h3{font-size:1.32rem; font-weight:800}
.svc h3 b{display:block; font-size:.62rem; font-family:var(--f-mono); font-weight:500;
  letter-spacing:.17em; color:var(--ink-faint); text-transform:uppercase; margin-bottom:.42rem}
.svc ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column}
.svc li{
  font-size:.945rem; padding:.44rem 0; border-bottom:1px dashed var(--rule-soft);
  display:flex; gap:.6rem; align-items:baseline; color:var(--ink-soft);
}
.svc li::before{content:""; width:4px; height:4px; margin-top:.52em; flex:none; background:var(--ink-faint); border-radius:50%}
.svc li:last-child{border-bottom:none}
.svc-rule{height:2px; background:var(--rule-soft); position:relative; overflow:hidden}
.svc-rule::after{
  content:""; position:absolute; inset:0; background:var(--ink);
  transform:scaleX(0); transform-origin:left; transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.svc:hover .svc-rule::after{transform:scaleX(1)}

/* ============================================================ WORK
   A contact sheet. Built to hold January's own design output —
   varied crops, mono slugs, no stock imagery anywhere. */
.work-grid{
  display:grid; grid-template-columns:repeat(12,1fr);
  gap:clamp(.7rem,1.4vw,1.05rem);
}
.wk{
  position:relative; overflow:hidden; border-radius:3px;
  border:1px solid var(--rule); background:var(--card);
  display:flex; flex-direction:column; justify-content:flex-end;
  min-height:0; text-decoration:none; color:inherit;
  transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, border-color .3s ease;
}
.wk:hover{transform:translateY(-4px); box-shadow:6px 8px 0 rgb(var(--shadow) / .09); border-color:var(--ink)}
/* the contact-sheet rhythm: 4 wide, 4 tall-ish, 4 wide */
.wk:nth-child(1){grid-column:span 7; aspect-ratio:16/10}
.wk:nth-child(2){grid-column:span 5; aspect-ratio:4/5}
.wk:nth-child(3){grid-column:span 4; aspect-ratio:1/1}
.wk:nth-child(4){grid-column:span 4; aspect-ratio:1/1}
.wk:nth-child(5){grid-column:span 4; aspect-ratio:1/1}
.wk:nth-child(6){grid-column:span 12; aspect-ratio:24/7}
@media (max-width:820px){
  .wk:nth-child(n){grid-column:span 6; aspect-ratio:4/3}
  .wk:nth-child(6){grid-column:span 12; aspect-ratio:16/7}
}
@media (max-width:520px){.wk:nth-child(n){grid-column:span 12; aspect-ratio:4/3}}

/* the slot state — honest about being empty, and shows the crop */
.wk-slot{
  position:absolute; inset:0; display:grid; place-items:center;
  background:
    repeating-linear-gradient(45deg,
      var(--rule-soft) 0 8px, transparent 8px 17px);
  opacity:.5;
}
.wk-slot::after{
  content:""; position:absolute; inset:11px; border:1px dashed var(--rule);
  border-radius:2px;
}
.wk-meta{
  position:relative; z-index:2; padding:.85rem .95rem;
  display:flex; justify-content:space-between; align-items:baseline; gap:.8rem;
  background:linear-gradient(to top, color-mix(in srgb,var(--card) 96%,transparent), transparent);
}
.wk-meta .t{
  font-family:var(--f-ui); font-weight:800; font-size:.94rem; letter-spacing:-.015em;
}
.wk-meta .k{
  font-family:var(--f-mono); font-size:.6rem; font-weight:500; letter-spacing:.15em;
  text-transform:uppercase; color:var(--ink-faint); flex:none;
}
.wk-num{
  position:absolute; top:.7rem; left:.8rem; z-index:2;
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.13em;
  color:var(--ink-faint); font-variant-numeric:tabular-nums;
}
.work-note{
  margin-top:1.5rem; display:flex; gap:.7rem; align-items:flex-start;
  border-left:2.5px solid var(--rule); padding:.15rem 0 .15rem 1rem;
}
.work-note p{font-family:var(--f-mono); font-size:.735rem; line-height:1.75; color:var(--ink-soft)}

/* ============================================================ STUDIO WALL
   A committed-dark, full-bleed band: four columns of design work
   drifting at different speeds. Every colour painted explicitly so
   the band holds on either host theme. */
.studio{
  --w-bg:#171A12;
  --w-panel:#20241A;
  --w-ink:#F1F2EC;
  --w-soft:#8C9184;
  --w-line:#333827;
  --w-glow:#5FBF3F;
  position:relative; background:var(--w-bg); color:var(--w-ink);
  padding-block:clamp(3.4rem,6.5vw,5.6rem) 0; overflow:hidden;
  border-block:1px solid var(--w-bg);
}
/* ambient glow, sits behind everything */
.studio::before{
  content:""; position:absolute; left:50%; top:-14%; width:min(96vw,1200px); aspect-ratio:2/1;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center,
    color-mix(in srgb,var(--w-glow) 17%,transparent) 0%, transparent 66%);
  pointer-events:none; filter:blur(12px);
}
.studio .wrap{position:relative; z-index:2}
.studio .lbl{color:var(--w-soft)}
.studio .sec-head .lbl::after{background:var(--w-line)}
.studio h2{color:var(--w-ink)}
.studio-sub{color:var(--w-soft); max-width:60ch; margin-top:1rem}
.studio-sub b{color:var(--w-ink); font-weight:600}

/* the wall */
.wall{
  position:relative; z-index:1; margin-top:clamp(2.2rem,4vw,3.2rem);
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(.55rem,1.1vw,.9rem); padding-inline:clamp(.55rem,1.1vw,.9rem);
  height:clamp(26rem,44vw,34rem); overflow:hidden;
  mask-image:linear-gradient(to bottom,transparent 0,#000 11%,#000 82%,transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 11%,#000 82%,transparent 100%);
}
@media (max-width:760px){
  .wall{grid-template-columns:repeat(2,1fr); height:clamp(22rem,80vw,28rem)}
}
.wall-col{display:flex; flex-direction:column; gap:clamp(.55rem,1.1vw,.9rem); will-change:transform}
.wall-col.up{animation:wallUp var(--dur,42s) linear infinite}
.wall-col.dn{animation:wallDn var(--dur,50s) linear infinite}
@keyframes wallUp{from{transform:translateY(0)} to{transform:translateY(-50%)}}
@keyframes wallDn{from{transform:translateY(-50%)} to{transform:translateY(0)}}
.wall:hover .wall-col{animation-play-state:paused}

.tile{
  position:relative; flex:none; width:100%; border-radius:4px; overflow:hidden;
  background:var(--w-panel); border:1px solid var(--w-line);
  transition:border-color .3s ease, transform .3s cubic-bezier(.2,.7,.3,1);
}
.tile img,.tile video{display:block; width:100%; height:100%; object-fit:cover}
/* reserved panel — quiet, not pretending to be artwork */
.tile-empty{
  background:linear-gradient(150deg,
    color-mix(in srgb,var(--w-glow) 5%,var(--w-panel)) 0%, var(--w-panel) 55%);
}
.tile-empty::after{
  content:""; position:absolute; inset:9px;
  border:1px solid var(--w-line); border-radius:2px;
}
.wall-reserved .tile figcaption{opacity:.5}
.wall-reserved .tile:hover figcaption{opacity:1}
.tile:hover{border-color:color-mix(in srgb,var(--w-glow) 60%,transparent); transform:scale(1.014)}
.tile figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:.5rem .6rem;
  display:flex; justify-content:space-between; gap:.6rem; align-items:baseline;
  font-family:var(--f-mono); font-size:.575rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--w-ink);
  background:linear-gradient(to top,color-mix(in srgb,var(--w-bg) 88%,transparent),transparent);
  opacity:0; transition:opacity .28s ease;
}
.tile:hover figcaption{opacity:1}
.tile figcaption i{font-style:normal; color:var(--w-glow); flex:none}

.wall-foot{
  position:relative; z-index:2; padding-block:1.5rem clamp(2.4rem,4.5vw,3.4rem);
  display:flex; gap:1.2rem; flex-wrap:wrap; align-items:center; justify-content:space-between;
}
.wall-foot p{
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.09em;
  color:var(--w-soft); line-height:1.7; max-width:56ch;
}
.btn-glow{
  background:var(--w-glow); border-color:var(--w-glow); color:#08120A;
}
.btn-glow:hover{box-shadow:0 0 0 4px color-mix(in srgb,var(--w-glow) 22%,transparent)}
.btn-wire{background:transparent; color:var(--w-ink); border-color:var(--w-line)}
.btn-wire:hover{border-color:var(--w-ink)}

@media (prefers-reduced-motion:reduce){
  .wall-col{animation:none !important}
  .wall{height:auto; mask-image:none; -webkit-mask-image:none}
  .studio::before{display:none}
}

/* ============================================================ PROCESS */
.proc{position:relative}
.proc-track{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.4rem,3vw,2.4rem); position:relative}
@media (max-width:860px){.proc-track{grid-template-columns:1fr; gap:2.5rem}}
.proc-line{position:absolute; inset:0; pointer-events:none; overflow:visible}
.proc-line path{fill:none; stroke:var(--ink-faint); stroke-width:1.4; stroke-dasharray:1 1; opacity:.4}
.step{background:var(--card); border:1px solid var(--rule); border-radius:0 5px 5px 5px; padding:1.5rem 1.4rem; position:relative}
.step::before{
  content:attr(data-n); position:absolute; left:-1px; top:-1.7rem;
  font-family:var(--f-mono); font-size:.66rem; font-weight:600; letter-spacing:.16em;
  padding:.4rem .9rem .32rem; background:var(--ink); color:var(--paper);
  border-radius:5px 9px 0 0;
}
:root[data-theme="dark"] .step::before{color:var(--paper)}
.step h3{font-size:1.22rem; margin-bottom:.6rem}
.step p{color:var(--ink-soft); font-size:.955em}

/* ============================================================ INDUSTRIES marquee */
.serve{background:var(--ink); color:var(--paper); border-block:1px solid var(--ink); overflow:hidden}
.serve .lbl{color:color-mix(in srgb,var(--paper) 52%,transparent)}
.serve .sec-head .lbl::after{background:color-mix(in srgb,var(--paper) 22%,transparent)}
.serve h2{color:var(--paper)}
.serve-sub{color:color-mix(in srgb,var(--paper) 66%,transparent); max-width:58ch; margin-top:1rem}
.mq{margin-top:clamp(2rem,4vw,3rem); display:flex; gap:0; overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.mq-row{display:flex; gap:0; flex:none; animation:mq 34s linear infinite}
.mq:hover .mq-row{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){.mq-row{animation:none}.mq{overflow-x:auto; mask-image:none}}
.tag{
  flex:none; font-family:var(--f-mono); font-size:.83rem; font-weight:500;
  letter-spacing:.07em; text-transform:uppercase; padding:.6rem 1.5rem;
  border-left:1px solid color-mix(in srgb,var(--paper) 17%,transparent);
  color:color-mix(in srgb,var(--paper) 88%,transparent); white-space:nowrap;
}
.tag em{font-style:normal; color:color-mix(in srgb,var(--paper) 55%,transparent)}

/* ============================================================ FOUNDER */
.fdr-grid{display:grid; grid-template-columns:.78fr 1.22fr; gap:clamp(2rem,4.5vw,4rem); align-items:start}
@media (max-width:900px){.fdr-grid{grid-template-columns:1fr; gap:2.2rem}}
.card-id{
  background:var(--card); border:1px solid var(--rule); border-radius:3px; padding:1.5rem;
  box-shadow:7px 8px 0 rgb(var(--shadow) / .05);
}
.card-id .who{font-family:var(--f-ui); font-weight:900; font-size:1.42rem; letter-spacing:-.025em; margin-top:1rem}
.card-id .role{font-family:var(--f-mono); font-size:.665rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); margin-top:.42rem}
.card-id dl{margin:1.35rem 0 0; padding-top:1.1rem; border-top:1px solid var(--rule-soft); display:grid; gap:.62rem}
.card-id dl div{display:flex; justify-content:space-between; gap:1rem; align-items:baseline}
.card-id dt{font-family:var(--f-mono); font-size:.645rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint)}
.card-id dd{margin:0; font-size:.885rem; font-weight:500; text-align:right; font-family:var(--f-mono)}
.mono-mark{width:44px; height:44px}

blockquote.pull{
  margin:0 0 1.7rem; padding:0 0 0 1.25rem; border-left:2.5px solid var(--green);
  font-family:var(--f-serif); font-weight:400; font-size:clamp(1.22rem,2.6vw,1.62rem);
  letter-spacing:-.022em; line-height:1.24;
}
blockquote.pull cite{
  display:block; margin-top:.75rem; font-family:var(--f-mono); font-size:.68rem;
  font-weight:500; letter-spacing:.14em; text-transform:uppercase; font-style:normal; color:var(--ink-faint);
}
.prose p+p{margin-top:1.05rem}
.prose{color:var(--ink-soft); max-width:64ch}
.prose strong{color:var(--ink); font-weight:600}

/* ============================================================ FAQ */
.faq{max-width:78ch}
.qa{border-bottom:1px solid var(--rule-soft)}
.qa summary{
  cursor:pointer; list-style:none; padding:1.05rem .2rem;
  display:flex; gap:1rem; align-items:baseline;
  font-family:var(--f-ui); font-weight:700; font-size:1.055rem; letter-spacing:-.015em;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary .qt{flex:1}
.qa summary .qi{flex:none; width:15px; height:15px; position:relative; margin-top:.3em}
.qa summary .qi::before,.qa summary .qi::after{content:""; position:absolute; background:var(--ink); transition:transform .26s cubic-bezier(.2,.7,.3,1)}
.qa summary .qi::before{left:0; right:0; top:6.5px; height:1.8px}
.qa summary .qi::after{top:0; bottom:0; left:6.5px; width:1.8px}
.qa[open] summary .qi::after{transform:scaleY(0)}
.qa summary:hover{color:var(--ink-soft)}
.qa .ans{padding:0 .2rem 1.15rem 0; color:var(--ink-soft); font-size:.98em; max-width:66ch}
@media (max-width:620px){.qa .ans{padding-left:.2rem}}

/* ============================================================ CONTACT */
.ct{background:var(--card); border-block:1px solid var(--rule)}
.ct-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,4.5vw,4rem); align-items:start}
@media (max-width:900px){.ct-grid{grid-template-columns:1fr; gap:2.4rem}}
form.f{display:grid; gap:1rem}
.f-row{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
@media (max-width:560px){.f-row{grid-template-columns:1fr}}
.fld{display:flex; flex-direction:column; gap:.4rem}
.fld label{font-family:var(--f-mono); font-size:.655rem; font-weight:500; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-faint)}
.fld input,.fld textarea,.fld select{
  font-family:var(--f-body); font-size:.985rem; color:var(--ink);
  background:var(--paper); border:1px solid var(--rule); border-radius:2px;
  padding:.72rem .8rem; width:100%; transition:border-color .18s ease, background .18s ease;
}
.fld textarea{resize:vertical; min-height:6.5rem}
.fld input:focus,.fld textarea:focus,.fld select:focus{border-color:var(--green); background:var(--card)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.f-note{font-family:var(--f-mono); font-size:.66rem; letter-spacing:.05em; color:var(--ink-faint); line-height:1.6}
.f-msg{
  font-family:var(--f-mono); font-size:.775rem; padding:.8rem .95rem; border-radius:2px;
  border:1px solid var(--green); background:var(--green-wash); color:var(--green-deep);
}
.f-msg[hidden]{display:none}

.ct-list{display:grid; gap:0; border-top:1px solid var(--rule)}
.ct-list a,.ct-list div{
  display:grid; grid-template-columns:5.6rem 1fr; gap:1rem; align-items:baseline;
  padding:1rem .2rem; border-bottom:1px solid var(--rule-soft); text-decoration:none;
}
.ct-list dt,.ct-list .k{font-family:var(--f-mono); font-size:.645rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint)}
.ct-list .v{font-size:1.02rem; font-weight:500}
.ct-list a:hover .v{color:var(--ink)}

/* ============================================================ FOOTER */
.ft{padding-block:clamp(2.4rem,4.5vw,3.4rem) 1.8rem; border-top:1px solid var(--rule)}
.ft-top{display:flex; gap:2rem; flex-wrap:wrap; justify-content:space-between; align-items:flex-start}
.ft-nav{display:flex; gap:1.35rem; flex-wrap:wrap}
.ft-nav a{font-size:.878rem; text-decoration:none; color:var(--ink-soft)}
.ft-nav a:hover{color:var(--ink)}
.ft-soc{display:flex; gap:.55rem}
.ft-soc a{
  width:33px; height:33px; display:grid; place-items:center;
  border:1px solid var(--rule); border-radius:2px; color:var(--ink-soft);
  transition:border-color .18s ease, color .18s ease, transform .18s ease;
}
.ft-soc a:hover{border-color:var(--ink); color:var(--ink); transform:translateY(-2px)}
.ft-soc svg{width:15px; height:15px; fill:currentColor}
.ft-bot{
  margin-top:1.9rem; padding-top:1.15rem; border-top:1px solid var(--rule-soft);
  display:flex; gap:1rem; flex-wrap:wrap; justify-content:space-between;
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-faint);
}


/* error state for the contact form message */
.f-msg-bad{
  border-color:var(--red);
  background:color-mix(in srgb,var(--red) 9%,transparent);
  color:var(--red);
}

/* ============================================================ PAIRED TYPE
   Instrument Serif is a single-weight, high-contrast face: it needs more
   size and less negative tracking than the heavy grotesque it replaced,
   or it reads thin and cramped. */
.hero-h,
.sec-h{
  font-family:var(--f-serif);
  font-weight:400;
  letter-spacing:-.012em;
}
h1.hero-h{font-size:clamp(2.9rem,8.2vw,5.3rem); line-height:1.04}
.sec-h{font-size:clamp(2.1rem,5vw,3.5rem); line-height:1.03}

/* the serif has no bold, so emphasis comes from the italic */
.hero-h em,
.gap-quote span{font-style:italic}

/* Sub-heads stay on the sans so hierarchy still has weight to work with */
.svc h3,
.step h3{font-family:var(--f-ui); font-weight:800; letter-spacing:-.018em}

/* Pull quote: serif at a size where the contrast reads */
blockquote.pull{font-size:clamp(1.45rem,3.1vw,2rem); line-height:1.2}
.gap-quote{font-size:clamp(1.8rem,4.2vw,2.8rem); line-height:1.1}