/* ==========================================================================
   SENKA ADVISORY — design system v3
   Direction: an independent research practice. Editorial, print-influenced,
   quiet confidence — closer to a well-set annual report or a journal than
   a SaaS landing page. Left-aligned by default; centering is rare.

   TOKEN LAYER — every value a component uses is declared once, here.
   Sections below: 1) fonts  2) color  3) type scale  4) spacing/grid
   5) radii + borders + motion  6) base reset  7) components (alphabetical)
   ========================================================================== */

/* --- 1. fonts -------------------------------------------------------------
   Display  — Newsreader   (transitional serif, variable, warm, editorial)
   Body/UI  — Geist        (neutral grotesk, quiet, one family/two weights)
   Labels   — JetBrains Mono (uppercase, tracked — the "research firm" tell)
   All three self-hosted, latin-subset, woff2 only, font-display: swap.
   -------------------------------------------------------------------------*/
@font-face{
  font-family:'Newsreader';font-style:normal;font-display:swap;font-weight:300 700;
  src:url('../fonts/newsreader-var.woff2') format('woff2');
}
@font-face{
  font-family:'Geist';font-style:normal;font-display:swap;font-weight:400 600;
  src:url('../fonts/geist-var.woff2') format('woff2');
}
@font-face{
  font-family:'JetBrains Mono';font-style:normal;font-display:swap;font-weight:500;
  src:url('../fonts/jetbrains-mono-500.woff2') format('woff2');
}

:root{
  /* --- 2. color ---------------------------------------------------------
     Ground: warm ivory (kept from the brand). Ink: warm near-black, never
     pure #000. One accent only — oxblood — chosen because the brand's
     pitch is evidence and restraint, not energy: oxblood reads as a
     leather ledger or a university seal, not a startup CTA. It appears on
     3–5 elements site-wide (primary button, active nav underline, the
     eyebrow dot, link underlines, one rule per page) and nowhere else. */
  --ink:#211a14;
  --ink-soft:#4a3f34;
  --muted:#6b5f4f;
  --bg:#f5f0e6;
  --bg-2:#fbf8f2;
  --panel:#ece3d1;
  --line:#ddd0b3;
  --line-strong:#b7a681;
  --accent:#5c1a1a;
  --accent-strong:#411010;
  --success:#2f5d3a;
  --danger:#8a2c1d;
  --focus-ring:#1c5fae;

  /* --- 3. type scale — fluid via clamp(), modular ~1.2 ratio at desktop -- */
  --step-mono:.72rem;
  --step-small:.9rem;
  --step-body:1.0625rem;
  --step-lead:clamp(1.15rem,.98rem + .7vw,1.4rem);
  --step-md:clamp(1.5rem,1.2rem + 1.2vw,2.05rem);
  --step-lg:clamp(2.05rem,1.5rem + 2.2vw,3.35rem);
  --step-xl:clamp(2.6rem,1.7rem + 3.6vw,4.6rem);
  --step-mega:clamp(3.1rem,1.7rem + 6vw,6.4rem);
  --font-display:'Newsreader',Georgia,'Times New Roman',serif;
  --font-body:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --measure:68ch;

  /* --- 4. spacing / grid -------------------------------------------------
     Vertical rhythm 96–160px between sections on desktop, compresses on
     mobile. 12-column grid, used unevenly (never an even 3/3/3/3 split). */
  --gap:clamp(20px,3vw,32px);
  --pad:clamp(20px,4vw,56px);
  --shell:1380px;
  --section:clamp(64px,11vw,160px);
  --nav-h:72px;
  --margin-col:56px;

  /* --- 5. radii, borders, motion ------------------------------------------
     Hairlines, not shadows, separate content. Radii stay small — this is
     a printed page, not a rounded app surface. */
  --radius:3px;
  --hairline:1px solid var(--line);
  --ease:cubic-bezier(.2,.7,.3,1);
  --dur-fast:150ms;
  --dur:220ms;
  color-scheme:light;
}

/* --- 6. base reset --------------------------------------------------------*/
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg)}
body{
  margin:0;background:var(--bg);color:var(--ink-soft);font-family:var(--font-body);
  font-size:var(--step-body);line-height:1.6;font-weight:420;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;font-feature-settings:'kern' 1,'liga' 1;
  overflow-x:hidden;min-width:0;overscroll-behavior-y:none;
}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--ink);margin:0;font-weight:560}
p,ul,ol,figure,blockquote,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
img,svg,canvas{display:block;max-width:100%}
img{height:auto}
::selection{background:var(--accent);color:var(--bg-2)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px;border-radius:2px}
hr{border:0;border-top:var(--hairline);margin:0}
.tnum{font-variant-numeric:tabular-nums}

/* --- 7. components (alphabetical) ------------------------------------------ */

/* band / section rhythm --------------------------------------------------- */
.band{position:relative;padding-block:var(--section)}
.band--tight{padding-block:clamp(48px,7vw,96px)}
.band--rule{border-top:var(--hairline)}
/* Section numeral, in the margin. .shell is a plain block (not a grid), so
   this generated box is safe as a lone child — no auto-placement surprises. */
.band[data-kicker]::before{
  content:attr(data-kicker);display:block;margin-bottom:24px;margin-left:max(var(--pad),env(safe-area-inset-left));
  font-family:var(--font-mono);font-size:.68rem;font-weight:500;letter-spacing:.1em;color:var(--muted);
}
@media(min-width:1200px){
  .band[data-kicker]::before{
    position:absolute;top:var(--section);left:0;margin:0;
    width:calc(max(var(--pad),env(safe-area-inset-left)) + var(--margin-col));
    text-align:right;padding-right:22px;
  }
}
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-left:max(var(--pad),env(safe-area-inset-left));padding-right:max(var(--pad),env(safe-area-inset-right))}
.measure{max-width:var(--measure)}
.measure-tight{max-width:52ch}
.grid-12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:clamp(32px,6vw,64px)}
/* Defensive default: a direct child spans the full 12 columns unless it
   opts into a narrower span with .col-*. Without this, a single missing or
   overridden inline grid-column turns every child into a 1-column sliver. */
.grid-12>*{grid-column:1/-1}
.grid-12>.col-6{grid-column:span 6}
.grid-12>.col-7{grid-column:span 7}
.grid-12>.col-5{grid-column:span 5}
.grid-12>.col-4{grid-column:span 4}

/* numbered section — the margin numeral. On wide viewports the numeral
   sits in its own narrow gutter column at the left of the shell; below
   1080px there is no margin to spare, so it collapses inline above the
   heading, still set in tracked mono. */
.numbered{display:grid;grid-template-columns:1fr;row-gap:20px}
.numbered__num{font-family:var(--font-mono);font-size:var(--step-mono);font-weight:500;letter-spacing:.08em;color:var(--muted)}
.numbered__body{min-width:0}
@media(min-width:1080px){
  .numbered{grid-template-columns:var(--margin-col) 1fr;column-gap:var(--gap)}
  .numbered__num{padding-top:.2em}
}

/* band head (title + intro line), asymmetric 12-col, left aligned -------- */
.band-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:20px;align-items:end;margin-bottom:clamp(40px,6vw,72px)}
.band-head h2{grid-column:1/9}
.band-head>p{grid-column:1/9}
@media(min-width:900px){.band-head>p{grid-column:9/13}}

/* buttons ------------------------------------------------------------------*/
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:12px 20px;border:1px solid var(--ink);border-radius:var(--radius);font-family:var(--font-mono);font-size:.78rem;font-weight:500;letter-spacing:.06em;line-height:1.2;text-transform:uppercase;cursor:pointer;transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease),transform var(--dur-fast) var(--ease)}
.btn--sm{min-height:44px;padding:10px 16px;font-size:.72rem}
.btn--primary{background:var(--ink);color:var(--bg-2);border-color:var(--ink)}
@media(hover:hover) and (pointer:fine){.btn--primary:hover{background:var(--accent);border-color:var(--accent)}}
.btn--primary:active{transform:scale(.97)}
.btn--outline{background:transparent;color:var(--ink);border-color:var(--line-strong)}
@media(hover:hover) and (pointer:fine){.btn--outline:hover{border-color:var(--ink);background:var(--panel)}}
.btn--outline:active{transform:scale(.97)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.link-under{display:inline-flex;align-items:center;gap:8px;color:var(--ink);font-family:var(--font-mono);font-size:.76rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase;border-bottom:1px solid var(--accent);padding-bottom:5px;transition:color var(--dur) ease,border-color var(--dur) ease,transform var(--dur) var(--ease)}
@media(hover:hover) and (pointer:fine){.link-under:hover{color:var(--accent-strong);transform:translateX(2px)}}

/* case study cards + empty state (/work) ----------------------------------*/
.case-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:var(--gap)}
.case-card{grid-column:span 12;padding:clamp(26px,3.5vw,36px);border:var(--hairline);background:var(--bg-2);transition:border-color var(--dur) ease,transform var(--dur) var(--ease)}
@media(min-width:800px){.case-card{grid-column:span 6}}
@media(hover:hover) and (pointer:fine){.case-card:hover{border-color:var(--accent);transform:translateY(-3px)}}
.case-card__cat{font-family:var(--font-mono);font-size:var(--step-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-strong)}
.case-card h3{margin-top:14px;font-size:var(--step-md);line-height:1.2}
.case-card p{margin-top:12px;color:var(--muted)}
.case-card__meta{margin-top:18px;padding-top:14px;border-top:var(--hairline);display:flex;flex-wrap:wrap;gap:8px 18px;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.04em;color:var(--muted)}
.work-empty{padding:clamp(40px,7vw,72px) clamp(24px,5vw,56px);border:1px dashed var(--line-strong);text-align:left}
.work-empty p{max-width:60ch}
.work-empty p+p{margin-top:16px}

/* contact form ---------------------------------------------------------- */
.form-shell{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:48px}
.contact-aside{grid-column:1/13}
.contact-aside>p{max-width:48ch}
.contact-aside dl{display:grid;gap:0;border-top:var(--hairline);margin-top:18px}
.contact-aside dt{padding-top:18px;font-family:var(--font-mono);color:var(--muted);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase}
.contact-aside dd{margin:5px 0 18px;color:var(--ink);font-size:.98rem}
.contact-aside dd a{border-bottom:1px solid var(--accent);padding-bottom:2px}
.form-col{grid-column:1/13}
@media(min-width:900px){.contact-aside{grid-column:1/5}.form-col{grid-column:5/13}}
form[data-contact-form]{padding:clamp(24px,3.5vw,36px);border:var(--hairline);background:var(--bg-2)}
.field{display:grid;gap:7px;margin-bottom:20px}
.field label{color:var(--ink);font-size:.8rem;font-weight:520}
.field .hint{font-size:.72rem;color:var(--muted)}
.field input,.field select,.field textarea{width:100%;min-height:48px;padding:12px 14px;background:var(--bg-2);border:1px solid var(--line-strong);border-radius:var(--radius);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.5;appearance:none;-webkit-appearance:none;transition:border-color var(--dur) ease,box-shadow var(--dur) ease}
.field textarea{min-height:150px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--muted);opacity:1}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--focus-ring);box-shadow:0 0 0 3px rgba(28,95,174,.14)}
.field .error{display:none;color:var(--danger);font-size:.76rem}
.field[data-invalid='true'] .error{display:block}
.field[data-invalid='true'] input,.field[data-invalid='true'] select,.field[data-invalid='true'] textarea{border-color:var(--danger)}
.trap{position:absolute!important;left:-99999px;width:1px;height:1px;overflow:hidden}
.form-status{display:none;margin-top:18px;padding:12px 14px;border-left:2px solid var(--line-strong);font-size:.86rem}
.form-status[data-state='pending']{display:block;color:var(--ink-soft)}
.form-status[data-state='ok']{display:block;border-color:var(--success);color:var(--success)}
.form-status[data-state='error']{display:block;border-color:var(--danger);color:var(--danger)}
.form-meta{margin-top:16px;color:var(--muted);font-size:.74rem;line-height:1.55}
.form-meta a{color:var(--ink)!important;border-bottom:1px solid var(--accent)!important}

/* eyebrow / mono labels ---------------------------------------------------*/
.eyebrow{display:flex;align-items:center;gap:9px;margin-bottom:clamp(18px,3vw,32px);font-family:var(--font-mono);font-size:var(--step-mono);font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.eyebrow__dot{width:6px;height:6px;background:var(--accent);border-radius:50%}
.mono-label{font-family:var(--font-mono);font-size:var(--step-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* firm facts / founder card ------------------------------------------------*/
.firm-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 32px;border-top:var(--hairline);padding-top:20px}
.firm-facts dt{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.firm-facts dd{margin-top:4px;color:var(--ink);font-size:.95rem}
.founder-card{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:24px;align-items:start}
.founder-card__photo{display:block;grid-column:1/13;aspect-ratio:4/5;background:var(--panel);border:var(--hairline);overflow:hidden;position:relative}
.founder-card__photo::after{content:"FOUNDER / SENKA";position:absolute;left:14px;bottom:12px;padding:6px 8px;background:rgba(33,26,20,.72);color:var(--bg-2);font-family:var(--font-mono);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;backdrop-filter:blur(6px)}
.founder-card__photo img{width:100%;height:100%;object-fit:cover;object-position:center 42%;filter:saturate(.9) contrast(1.02)}
.founder-card__body{grid-column:1/13}
@media(min-width:800px){.founder-card__photo{grid-column:1/5}.founder-card__body{grid-column:5/13}}
.founder-card__name{font-size:var(--step-md);line-height:1.1}
.founder-card__role{margin-top:8px;color:var(--muted);font-size:.92rem}
.founder-card__body>p.t-body{margin-top:18px}
.founder-card__links{margin-top:20px;display:flex;flex-wrap:wrap;gap:10px 22px}
.founder-card__links a{font-family:var(--font-mono);font-size:.78rem;color:var(--ink);border-bottom:1px solid var(--accent);padding-bottom:3px}

/* fit columns (good fit / not a fit) --------------------------------------*/
.fit-grid{display:grid;grid-template-columns:1fr;gap:32px}
@media(min-width:800px){.fit-grid{grid-template-columns:1fr 1fr;gap:var(--gap)}}
.fit-col{border-top:2px solid var(--line-strong);padding-top:16px}
.fit-col--yes{border-top-color:var(--success)}
.fit-col--no{border-top-color:var(--accent)}
.fit-col h3{font-size:var(--step-md)}
.fit-col ul{margin-top:16px;display:grid;gap:10px}
.fit-col li{position:relative;padding-left:20px;font-size:.96rem;color:var(--ink-soft);line-height:1.5}
.fit-col li::before{content:"";position:absolute;left:0;top:.7em;width:9px;height:1px;background:var(--muted)}

/* footer -------------------------------------------------------------------*/
.footer{border-top:var(--hairline);padding-top:clamp(56px,7vw,88px);padding-bottom:max(28px,env(safe-area-inset-bottom));background:var(--ink)}
.footer__grid{display:grid;grid-template-columns:1fr;gap:36px}
@media(min-width:700px){.footer__grid{grid-template-columns:minmax(240px,2fr) repeat(3,minmax(120px,1fr))}}
.footer .brand{color:var(--bg-2)}
.footer h2{margin-bottom:14px;color:#c9bfae;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;font-weight:500}
.footer li{padding:5px 0}
.footer a{color:#e4dbc8;font-size:.9rem;transition:color var(--dur) ease}
@media(hover:hover){.footer a:hover{color:#f2a58f}}
.footer__brandcopy{max-width:34ch;margin-top:14px;color:#c9bfae;font-size:.85rem}
.footer__facts{margin-top:18px;display:grid;gap:4px;font-family:var(--font-mono);font-size:.68rem;color:#a99c85;letter-spacing:.03em}
.footer__base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:56px;padding-top:20px;border-top:1px solid rgba(251,248,242,.16);color:#a99c85;font-family:var(--font-mono);font-size:.68rem}

/* footnote / caveat aside ---------------------------------------------------*/
.footnote{margin-top:14px;padding-left:16px;border-left:2px solid var(--line-strong);font-size:.86rem;color:var(--muted);max-width:var(--measure)}
.footnote strong{color:var(--ink-soft)}

/* founder-led notice / plain notice strip ----------------------------------*/
.notice{padding:20px 22px;border:var(--hairline);background:var(--panel);font-size:.94rem;color:var(--ink-soft);max-width:var(--measure)}

/* hero -----------------------------------------------------------------*/
.hero{border-bottom:var(--hairline)}
.hero__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:56px;align-items:center;padding-top:clamp(56px,8vw,104px);padding-bottom:clamp(56px,8vw,112px)}
.hero__copy{grid-column:1/13}
@media(min-width:1000px){.hero__copy{grid-column:1/8}}
.hero__copy .t-lead{margin-top:clamp(20px,3vw,30px)}
.hero__actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero__meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:48px;padding-top:16px;border-top:var(--hairline);font-family:var(--font-mono);color:var(--muted);font-size:.66rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.hero__meta span{position:relative}
.hero__meta span:not(:last-child)::after{content:"";position:absolute;right:-13px;top:50%;width:3px;height:3px;background:var(--accent);border-radius:50%}
.evidence-card{position:relative;grid-column:1/13;overflow:hidden;border:var(--hairline);border-radius:var(--radius);background:var(--bg-2)}
/* Cursor-reactive glow — the one interactive surface on the page. Pointer-fine
   only; the JS side (pointerGlow in site.js) sets --mx/--my on pointermove. */
@media(hover:hover) and (pointer:fine){
  .evidence-card::before{
    content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
    background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(92,26,26,.08),transparent 62%);
    transition:opacity .4s ease;
  }
  .evidence-card:hover::before{opacity:1}
}
@media(min-width:1000px){.evidence-card{grid-column:9/13}}
.evidence-card__head{padding:18px 20px;border-bottom:var(--hairline)}
.evidence-card__head p:first-child{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.evidence-card__head p:last-child{margin-top:6px;font-family:var(--font-display);font-size:1.1rem}
.evidence-card__body{padding:22px 20px;display:grid;gap:18px}
.evidence-stat{display:flex;align-items:baseline;gap:6px}
.evidence-stat b{font-family:var(--font-display);font-size:var(--step-md);color:var(--ink)}
.evidence-stat span{font-size:.85rem;color:var(--muted)}
.evidence-card__foot{display:grid;grid-template-columns:repeat(3,1fr);border-top:var(--hairline)}
.evidence-card__foot>div{padding:14px 16px;min-width:0}
.evidence-card__foot>div+div{border-left:var(--hairline)}
.evidence-card__foot span{display:block;font-family:var(--font-mono);color:var(--muted);font-size:.6rem;letter-spacing:.07em;text-transform:uppercase;margin-bottom:5px}
.evidence-card__foot strong{display:block;color:var(--ink);font-size:.78rem;line-height:1.35;font-weight:520}

/* nav ------------------------------------------------------------------*/
.nav{position:sticky;top:0;z-index:60;height:calc(var(--nav-h) + env(safe-area-inset-top));padding-top:env(safe-area-inset-top);display:flex;align-items:center;background:rgba(245,240,230,.9);border-bottom:var(--hairline);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--nav-h);width:100%}
.brand{display:inline-flex;align-items:center;gap:10px;min-width:0;color:var(--ink)}
.brand__mark{width:22px;height:22px;flex:0 0 auto}
.brand__mark rect:first-child{fill:var(--accent)}
.brand__word{font-family:var(--font-mono);font-size:.76rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.nav__links{display:none;align-items:center;gap:30px;margin-left:auto}
.nav__link{position:relative;padding:13px 0;color:var(--muted);font-family:var(--font-mono);font-size:.72rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase;transition:color var(--dur) ease;min-height:44px;display:inline-flex;align-items:center}
.nav__link::after{content:"";position:absolute;left:0;right:100%;bottom:9px;height:1px;background:var(--accent);transition:right var(--dur) var(--ease)}
.nav__link:hover,.nav__link[aria-current='page']{color:var(--ink)}
.nav__link:hover::after,.nav__link[aria-current='page']::after{right:0}
.nav__actions{display:flex;align-items:center;gap:10px}
.nav__toggle{display:inline-flex;width:46px;height:46px;padding:0;background:transparent;border:1px solid var(--line-strong);border-radius:var(--radius);color:var(--ink);align-items:center;justify-content:center;cursor:pointer}
.nav__toggle>span:first-child{position:relative;width:18px;height:1px;background:currentColor}
.nav__toggle>span:first-child::before,.nav__toggle>span:first-child::after{content:"";position:absolute;left:0;width:18px;height:1px;background:currentColor;transition:transform .22s var(--ease),top .22s var(--ease)}
.nav__toggle>span:first-child::before{top:-6px}
.nav__toggle>span:first-child::after{top:6px}
.nav__toggle[aria-expanded='true']>span:first-child{background:transparent}
.nav__toggle[aria-expanded='true']>span:first-child::before{top:0;transform:rotate(45deg)}
.nav__toggle[aria-expanded='true']>span:first-child::after{top:0;transform:rotate(-45deg)}
.nav__drawer{position:fixed;z-index:59;top:calc(var(--nav-h) + env(safe-area-inset-top));left:0;right:0;background:var(--bg-2);border-bottom:var(--hairline);opacity:0;transform:translateY(-6px);visibility:hidden;transition:opacity var(--dur) ease,transform var(--dur) var(--ease),visibility var(--dur)}
.nav__drawer[data-open='true']{opacity:1;transform:none;visibility:visible}
.nav__drawer .shell{display:grid;padding-top:14px;padding-bottom:22px}
.nav__drawer a{padding:15px 0;border-bottom:var(--hairline);font-family:var(--font-mono);font-size:.85rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);min-height:44px;display:flex;align-items:center}
.nav__drawer .btn{margin-top:14px;border-bottom:0}
@media(min-width:900px){.nav__links{display:flex}.nav__toggle{display:none}}

/* page hero (interior pages) ----------------------------------------------*/
.page-hero{padding-top:clamp(56px,8vw,100px);padding-bottom:clamp(48px,6vw,88px);border-bottom:var(--hairline);background:var(--bg-2)}
.page-hero .shell{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:24px}
.page-hero .eyebrow{grid-column:1/13}
.page-hero h1{grid-column:1/9}
.page-hero .t-lead{grid-column:1/9}
@media(min-width:900px){.page-hero .t-lead{grid-column:9/13;align-self:end}}

/* pricing / cost block -------------------------------------------------- */
.cost-block{display:grid;gap:20px}
.cost-block__row{display:grid;grid-template-columns:1fr;gap:6px;padding:16px 0;border-bottom:var(--hairline)}
.cost-block__row dt{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.cost-block__row dd{color:var(--ink-soft);font-size:.98rem;max-width:var(--measure)}

/* rows: capabilities / process / engagement models, numbered in margin --- */
.row-list{border-top:var(--hairline)}
.row-list>.numbered{counter-increment:row;padding:clamp(32px,4vw,52px) 0;border-bottom:var(--hairline)}
.row-list{counter-reset:row}
.row-list .numbered__num::before{content:"0" counter(row)}
.row__name{font-size:var(--step-md);line-height:1.15}
.row__body{max-width:var(--measure)}
.row__body .t-body{margin-top:14px}
.row__tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.tag{display:inline-flex;align-items:center;min-height:30px;padding:5px 10px;border:1px solid var(--line-strong);color:var(--muted);background:var(--bg-2);font-family:var(--font-mono);font-size:.64rem;letter-spacing:.05em;text-transform:uppercase}

/* split media --------------------------------------------------------------*/
.split{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:32px;align-items:center}
.split__copy{grid-column:1/13}
.split__media{grid-column:1/13;position:relative;overflow:hidden;border:var(--hairline);min-height:340px;background:var(--panel)}
@media(min-width:900px){
  .split__copy{grid-column:1/7}
  .split__media{grid-column:8/13;min-height:420px}
  .split--reverse .split__copy{grid-column:7/13;order:2}
  .split--reverse .split__media{grid-column:1/6;order:1}
}
.split__media::after{content:"SENKA / FIELD NOTE";position:absolute;z-index:2;left:16px;bottom:14px;color:rgba(251,248,242,.85);font-family:var(--font-mono);font-size:.6rem;font-weight:500;letter-spacing:.08em}
.split__media img{width:100%;height:100%;min-height:340px;object-fit:cover}

/* copy-to-clipboard email button --------------------------------------------*/
.copyable{display:inline-flex;align-items:center;gap:2px}
.copy-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-left:-4px;background:transparent;border:0;border-radius:var(--radius);color:var(--muted);cursor:pointer;transition:color var(--dur) ease,background var(--dur) ease}
.copy-btn svg{width:16px;height:16px}
@media(hover:hover) and (pointer:fine){.copy-btn:hover{color:var(--ink);background:var(--panel)}}
.copy-btn[data-copied='true']{color:var(--success)}

/* channel icon row (marketing/content section) ------------------------------*/
.channel-row{display:flex;flex-wrap:wrap;gap:14px 28px;margin-top:26px}
.channel-row li{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft)}
.channel-icon{width:22px;height:22px;flex:0 0 auto;color:var(--accent)}

/* stat row / definition-list fact block ------------------------------------*/
.stat-row{display:grid;grid-template-columns:1fr;gap:0;border-top:var(--hairline)}
@media(min-width:700px){.stat-row{grid-template-columns:repeat(2,1fr)}}
.stat-row>div{padding:18px 0;border-bottom:var(--hairline)}
@media(min-width:700px){.stat-row>div:nth-child(odd){padding-right:24px}.stat-row>div:nth-child(even){padding-left:24px;border-left:var(--hairline)}}
.stat-row dt{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.stat-row dd{margin-top:6px;color:var(--ink);font-size:.98rem;line-height:1.5}
.stat-row dd.tnum{font-family:var(--font-display);font-size:var(--step-md)}

/* testing / voltage band -----------------------------------------------*/
.testing{border-top:var(--hairline);border-bottom:var(--hairline);background:var(--panel)}
.testing__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:28px;align-items:start}
.testing h2{grid-column:1/13}
.testing__copy{grid-column:1/13}
@media(min-width:900px){.testing h2{grid-column:1/8}.testing__copy{grid-column:9/13}}

/* type ---------------------------------------------------------------------*/
.t-display-mega{font-family:var(--font-display);color:var(--ink);font-size:var(--step-mega);font-weight:560;line-height:.98;letter-spacing:-.01em;text-wrap:balance}
.t-display-xl{font-family:var(--font-display);color:var(--ink);font-size:var(--step-xl);font-weight:540;line-height:1.04;letter-spacing:-.008em;text-wrap:balance}
.t-display-lg{font-family:var(--font-display);color:var(--ink);font-size:var(--step-lg);font-weight:540;line-height:1.08;letter-spacing:-.006em;text-wrap:balance}
.t-display-md{font-family:var(--font-display);color:var(--ink);font-size:var(--step-md);font-weight:540;line-height:1.18}
.t-title{font-family:var(--font-display);font-size:1.15rem;font-weight:560;color:var(--ink)}
.t-lead{font-size:var(--step-lead);line-height:1.5;color:var(--ink-soft);max-width:var(--measure)}
.t-body{font-size:var(--step-body);line-height:1.68;color:var(--ink-soft);max-width:var(--measure)}
.t-small{font-size:.88rem;line-height:1.55;color:var(--muted)}
.type-muted{color:var(--muted);font-weight:420}

/* tagline reveal — one large-type statement, separate from the hero. Words
   sit muted until the section enters view, then light up in reading order. */
.tagline-reveal{padding-block:clamp(64px,9vw,120px)}
.tagline-reveal__text{font-family:var(--font-display);font-size:var(--step-xl);font-weight:540;line-height:1.16;letter-spacing:-.006em;max-width:900px;text-wrap:balance}
@media(prefers-reduced-motion:no-preference){
  .js .tagline-reveal__text .tw{color:var(--line-strong);transition:color 520ms var(--ease);transition-delay:var(--w-delay,0ms)}
  .js .tagline-reveal__text.is-visible .tw{color:var(--ink)}
}

/* work strip on homepage ----------------------------------------------- */
.work-strip{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;padding:24px 0;border-top:var(--hairline);border-bottom:var(--hairline)}
.work-strip p{color:var(--muted);font-size:.92rem;max-width:52ch}

/* interactive engagement flow ------------------------------------------------*/
.process-list{border-top:var(--hairline)}
.process-step{width:100%;display:grid;grid-template-columns:56px minmax(0,1fr) 34px;gap:16px;align-items:start;padding:30px 0;border:0;border-bottom:var(--hairline);background:transparent;color:inherit;text-align:left;cursor:pointer;transition:background var(--dur) var(--ease),padding var(--dur) var(--ease)}
.process-step__num{padding-top:.4em;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;color:var(--muted)}
.process-step__copy{display:grid;gap:8px;max-width:900px}
.process-step__title{font-family:var(--font-display);font-size:var(--step-md);line-height:1.15;color:var(--ink)}
.process-step__summary{font-size:.92rem;line-height:1.55;color:var(--muted)}
.process-step__detail{max-height:0;opacity:0;overflow:hidden;color:var(--ink-soft);font-size:.88rem;line-height:1.6;transition:max-height var(--dur) var(--ease),opacity var(--dur) var(--ease),margin var(--dur) var(--ease)}
.process-step__icon{font-size:1rem;color:var(--muted);transition:transform var(--dur) var(--ease),color var(--dur) var(--ease)}
.process-step.is-active{padding-left:16px;padding-right:16px;background:var(--bg-2)}
.process-step.is-active .process-step__detail{max-height:120px;opacity:1;margin-top:4px}
.process-step.is-active .process-step__icon{transform:rotate(45deg);color:var(--accent)}
@media(hover:hover) and (pointer:fine){.process-step:hover{background:rgba(251,248,242,.6);padding-left:12px;padding-right:12px}.process-step:hover .process-step__title{color:var(--accent-strong)}}
@media(max-width:680px){.process-step{grid-template-columns:38px minmax(0,1fr) 24px;padding:24px 0}.process-step.is-active{padding-left:10px;padding-right:10px}}

/* editorial photography ----------------------------------------------------*/
.visual-band{padding-top:0}
.editorial-photo{position:relative;overflow:hidden;border:var(--hairline);background:var(--panel)}
.editorial-photo img{width:100%;height:clamp(340px,52vw,720px);object-fit:cover;object-position:center 48%;filter:saturate(.82) contrast(1.02)}
.editorial-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 62%,rgba(33,26,20,.48));pointer-events:none}
.editorial-photo figcaption{position:absolute;z-index:2;left:18px;right:18px;bottom:16px;display:flex;justify-content:space-between;gap:18px;color:#fbf8f2;font-family:var(--font-mono);font-size:.64rem;letter-spacing:.06em;text-transform:uppercase}
@media(max-width:680px){.editorial-photo figcaption{display:grid;gap:4px}.editorial-photo img{height:420px}}

/* quiet image polish -------------------------------------------------------*/
.split__media{transition:border-color var(--dur) ease,transform var(--dur) var(--ease)}
@media(hover:hover) and (pointer:fine){.split__media:hover{border-color:var(--line-strong);transform:translateY(-2px)}.split__media img{transition:transform 500ms var(--ease),filter 500ms var(--ease)}.split__media:hover img{transform:scale(1.018);filter:saturate(.9)}}

/* --- reveal motion — restrained: opacity + 4–8px transform, 150–250ms --- */
@media(prefers-reduced-motion:no-preference){
  .js [data-reveal]{opacity:0;transform:translateY(8px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);transition-delay:var(--reveal-delay,0ms)}
  .js [data-reveal].is-visible{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}

/* consent banner -------------------------------------------------------- */
.consent{position:fixed;left:max(18px,env(safe-area-inset-left));bottom:max(18px,env(safe-area-inset-bottom));z-index:100;width:min(480px,calc(100% - 36px));padding:20px;background:var(--ink);border-radius:var(--radius);box-shadow:0 20px 60px rgba(33,26,20,.3);opacity:0;transform:translateY(12px);visibility:hidden;transition:var(--dur) var(--ease)}
.consent[data-open='true']{opacity:1;transform:none;visibility:visible}
.consent h2{color:var(--bg-2);font-size:1rem;margin-bottom:6px}
.consent p{font-size:.8rem;line-height:1.55;color:#d9cfba}
.consent p a{color:var(--bg-2);border-bottom:1px solid var(--accent)}
.consent__actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.consent .btn--outline{color:var(--bg-2);border-color:#7a6a52}

/* legal / prose ----------------------------------------------------------*/
.prose{max-width:var(--measure)}
.prose>*+*{margin-top:20px}
.prose>.t-small{color:var(--muted)}
.prose h2{margin-top:56px;padding-top:24px;border-top:var(--hairline);font-size:var(--step-md);line-height:1.2}
.prose h3{margin-top:32px;font-size:1.1rem}
.prose p,.prose li{font-size:.97rem;line-height:1.72;color:var(--ink-soft)}
.prose ul{margin-top:10px}
.prose li{position:relative;padding-left:20px;padding-block:5px}
.prose li::before{content:"";position:absolute;left:0;top:1em;width:8px;height:1px;background:var(--muted)}
.prose a{color:var(--ink);border-bottom:1px solid var(--accent)}
.prose strong{color:var(--ink)}
.toc{margin:32px 0 44px;padding:24px;border:var(--hairline);background:var(--bg-2)}
.toc ul{margin-top:12px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 26px}
.toc a{color:var(--muted);font-size:.82rem}
.toc a:hover{color:var(--ink)}

/* 404 ------------------------------------------------------------------*/
.notfound{min-height:calc(100svh - var(--nav-h));display:grid;align-content:center;padding-block:64px}
.notfound__code{font-family:var(--font-display);font-size:clamp(6rem,22vw,15rem);font-weight:560;line-height:.85;letter-spacing:-.02em;color:var(--panel);-webkit-text-stroke:1px var(--line-strong)}
.notfound__links{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

/* skip link / visually hidden --------------------------------------------*/
.skip-link{position:fixed;left:18px;top:-100px;z-index:999;background:var(--ink);color:var(--bg-2);padding:12px 16px;font-weight:600;border-radius:var(--radius);transition:top .2s ease}
.skip-link:focus{top:18px}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --- responsive tune-ups tested at 360 / 768 / 1280 / 1600 -------------- */
@media(max-width:899px){
  :root{--nav-h:64px}
  .nav__actions>.btn{display:none}
}
@media(max-width:680px){
  .hero__grid{padding-top:48px;padding-bottom:56px}
  .hero__actions{align-items:stretch}
  .hero__actions .btn{width:100%}
  .founder-card__photo{aspect-ratio:16/10}
  .footer__base{display:grid;gap:8px}
}
@media(min-width:1600px){
  :root{--shell:1520px}
}
@supports(padding:max(0px)){body{padding-bottom:env(safe-area-inset-bottom)}}
@supports not (backdrop-filter:blur(1px)){.nav{background:var(--bg-2)}}
@media print{
  .nav,.nav__drawer,.consent,.hero__meta,.evidence-card{display:none!important}
  body{background:#fff;color:#222}
  .footer{background:#fff}
  .footer a,.footer h2,.footer__brandcopy,.footer__base,.footer__facts{color:#222}
}