/* ============================================================
   SECURIQUE — Design system · Direction "Field Manual"
   Warm manila paper · hairline spec-sheet rules · one safety-orange signal
   Type: Archivo (grotesque display / labels) + Spectral (serif text)
   Self-hosted fonts (strict CSP: font-src 'self')
   ============================================================ */

/* ---------- Fonts (self-hosted) ---------- */
/* Archivo — variable weight axis, single file (weight range, not per-file) */
@font-face{
  font-family:"Archivo";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("../fonts/archivo-var.woff2") format("woff2");
}
/* Spectral — static per-weight instances */
@font-face{font-family:"Spectral";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/spectral-400.woff2") format("woff2")}
@font-face{font-family:"Spectral";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/spectral-500.woff2") format("woff2")}
@font-face{font-family:"Spectral";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/spectral-600.woff2") format("woff2")}
@font-face{font-family:"Spectral";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/spectral-400-italic.woff2") format("woff2")}

/* ---------- Tokens ---------- */
:root{
  --paper:      oklch(0.955 0.011 84);        /* warm manila body */
  --surface:    oklch(0.978 0.008 84);        /* raised panels */
  --surface-2:  oklch(0.935 0.014 84);        /* alt section band */
  --ink:        oklch(0.245 0.018 62);        /* warm near-black */
  --ink-soft:   oklch(0.44 0.02 62);          /* secondary text (~6.8:1 on paper) */
  --accent:     oklch(0.585 0.185 40);        /* safety-signal vermilion */
  --accent-hi:  oklch(0.52 0.18 40);          /* hover / active */
  --hairline:   oklch(0.245 0.018 62 / 0.16); /* spec-sheet rules */
  --hairline-2: oklch(0.245 0.018 62 / 0.34); /* interactive borders, marks */
  --good:       oklch(0.5 0.13 150);          /* verified / success */

  --maxw: 1180px;
  --maxw-narrow: 760px;
  --pad: clamp(20px, 4vw, 56px);
  --gap-hero: clamp(2rem, 4.5vw, 5rem);
  --sec-y: clamp(3.5rem, 7vw, 6.5rem);
  --r: 3px;

  --f-display: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-text: "Spectral", Georgia, "Times New Roman", serif;

  --z-nav: 100;
  --z-panel: 200;
}

/* ---------- Reset / base ---------- */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:84px; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-text);
  font-size:17px;
  line-height:1.55;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  text-wrap:pretty;
}
img{ max-width:100%; display:block; }
::selection{ background:var(--accent); color:#fff; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--ink); color:var(--paper);
  font-family:var(--f-display); font-weight:600; font-size:.9rem;
  padding:.7em 1.1em; border-radius:0 0 var(--r) 0;
}
.skip-link:focus{ left:0; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

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

/* ---------- Shared label + registration square ---------- */
.label{
  font-family:var(--f-display); font-weight:600; font-size:.72rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);
  margin:0; display:inline-flex; align-items:center; gap:.6em;
}
.sq{ width:.5em; height:.5em; background:var(--accent); flex:0 0 auto; display:inline-block; transform:translateY(-.02em); }

/* ---------- Top ruler (drafting scale) ---------- */
.ruler{
  height:22px; border-bottom:1px solid var(--hairline);
  background-image:
    repeating-linear-gradient(90deg, var(--hairline-2) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, var(--hairline)   0 1px, transparent 1px 12px);
  background-size:100% 13px, 100% 7px;
  background-position:bottom left, bottom left;
  background-repeat:repeat-x, repeat-x;
}

/* ---------- Masthead / nav ---------- */
.masthead{
  position:sticky; top:0; z-index:var(--z-nav);
  border-bottom:1px solid var(--hairline);
  background:color-mix(in oklch, var(--paper) 90%, transparent);
  backdrop-filter:saturate(1.1) blur(6px);
}
.nav{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding-block:15px; }
.brand{ display:inline-flex; align-items:center; gap:.62em; text-decoration:none; }
.brand .logo-sq{ width:11px; height:11px; background:var(--accent); flex:0 0 auto; }
.wordmark{ font-family:var(--f-display); font-weight:800; font-size:1.12rem; letter-spacing:.02em; color:var(--ink); }
.nav-links{ display:flex; align-items:center; gap:2rem; }
.nav-links a{
  font-family:var(--f-display); font-weight:600; font-size:.92rem; color:var(--ink-soft);
  text-decoration:none; padding-block:.2em; border-bottom:1.5px solid transparent;
  transition:color .18s ease, border-color .18s ease;
}
.nav-links a:hover,
.nav-links a[aria-current="true"]{ color:var(--ink); border-bottom-color:var(--accent); }
.nav-actions{ display:flex; align-items:center; gap:1rem; }
.nav-toggle{
  display:none; width:44px; height:44px; padding:0; background:transparent;
  border:1px solid var(--hairline-2); border-radius:var(--r); cursor:pointer;
  align-items:center; justify-content:center; gap:4px; flex-direction:column;
}
.nav-toggle span{ width:18px; height:1.5px; background:var(--ink); transition:transform .22s ease, opacity .22s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }
.nav-panel{ display:none; }

/* ---------- Buttons ---------- */
.btn{
  font-family:var(--f-display); font-weight:600; font-size:.95rem; line-height:1;
  display:inline-flex; align-items:center; gap:.55em; padding:.9em 1.3em;
  border:1px solid transparent; border-radius:var(--r); text-decoration:none;
  cursor:pointer; white-space:nowrap;
  transition:background .18s ease, color .18s ease, border-color .18s ease, transform .09s ease-out;
}
.btn:active{ transform:translateY(1px) scale(.99); }
.btn-accent{ background:var(--accent); color:#fff; border-color:var(--accent); }
.btn-accent:hover{ background:var(--accent-hi); border-color:var(--accent-hi); }
.btn-ink{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.btn-ink:hover{ background:#000; }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--hairline-2); }
.btn-ghost:hover{ border-color:var(--ink); background:var(--surface); }
.btn .arrow{ transition:transform .18s ease; }
.btn:hover .arrow{ transform:translateX(2px); }
.btn-lg{ padding:1.05em 1.6em; font-size:1rem; }

/* ---------- Section rhythm ---------- */
.frame{ position:relative; padding-block:var(--sec-y); }
.frame::before,.frame::after{ content:""; position:absolute; width:16px; height:16px; pointer-events:none; }
.frame::before{ top:8px; left:6px; border-top:1px solid var(--hairline-2); border-left:1px solid var(--hairline-2); }
.frame::after{ bottom:8px; right:6px; border-bottom:1px solid var(--hairline-2); border-right:1px solid var(--hairline-2); }
.section{ padding-block:var(--sec-y); }
.section--band{ background:var(--surface-2); border-block:1px solid var(--hairline); }
.rule{ border:0; border-top:1px solid var(--hairline); margin:0; }

.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; margin-bottom:2.6rem; }
.sec-head .label{ margin-bottom:.9rem; }
h2{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(1.7rem, 1.15rem + 2.1vw, 2.5rem);
  line-height:1.06; letter-spacing:-.012em; color:var(--ink);
  margin:0; max-width:16ch; text-wrap:balance;
}
h3{ font-family:var(--f-display); font-weight:700; margin:0; color:var(--ink); }
.intro{ font-family:var(--f-text); font-weight:500; font-size:1.08rem; line-height:1.55; color:var(--ink-soft); margin:0; max-width:42ch; }
.sec-ref{ font-family:var(--f-display); font-weight:600; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); white-space:nowrap; }

/* ---------- Hero ---------- */
.hero{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:var(--gap-hero); align-items:start; }
.hero-copy .label{ margin-bottom:1.4rem; }
h1{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(2.05rem, 1.15rem + 3.9vw, 3.85rem);
  line-height:1.04; letter-spacing:-.015em; color:var(--ink);
  margin:0 0 1.4rem; text-wrap:balance; max-width:16ch;
}
.sub{ font-family:var(--f-text); font-weight:500; font-size:clamp(1.05rem, .98rem + .5vw, 1.28rem); line-height:1.55; color:var(--ink-soft); margin:0 0 2rem; max-width:46ch; }
.cta{ display:flex; flex-wrap:wrap; gap:.85rem; }

.figure{ position:relative; }
.spec{ position:relative; background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r); }
.spec-head{ display:flex; align-items:center; justify-content:space-between; padding:1.05rem 1.2rem; border-bottom:1px solid var(--hairline); padding-right:5.5rem; }
.creds{ list-style:none; margin:0; padding:0; }
.creds li{ display:flex; align-items:baseline; gap:.7em; padding:.82rem 1.2rem; border-bottom:1px solid var(--hairline); }
.tick{ font-family:var(--f-display); color:var(--good); font-weight:700; font-size:.9rem; flex:0 0 auto; }
.cred{ font-family:var(--f-display); font-weight:700; font-size:1.02rem; color:var(--ink); letter-spacing:.005em; }
.cred em{ font-family:var(--f-text); font-style:italic; font-weight:500; font-size:.94rem; color:var(--ink-soft); margin-left:.15em; }
.rule-dbl{ height:3px; border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); margin:0; }
.spec-foot{ padding:1.1rem 1.2rem 1.2rem; }
.stat{ font-family:var(--f-display); font-weight:700; font-size:1.06rem; color:var(--ink); margin:0 0 .5rem; display:flex; align-items:center; gap:.6em; }
.stat-sub{ font-family:var(--f-text); font-weight:500; font-size:.95rem; line-height:1.5; color:var(--ink-soft); margin:0; }
.stamp{
  position:absolute; top:-14px; right:-12px; display:grid; place-items:center; gap:.05em;
  padding:.4rem .55rem; border:2px solid var(--accent); border-radius:4px;
  box-shadow:inset 0 0 0 1px var(--surface), inset 0 0 0 3px color-mix(in oklch, var(--accent) 22%, transparent);
  background:var(--surface); transform:rotate(-5deg); line-height:1; text-align:center;
}
.stamp-n{ font-family:var(--f-display); font-weight:800; font-size:1.35rem; color:var(--accent); letter-spacing:-.01em; }
.stamp-l{ font-family:var(--f-display); font-weight:700; font-size:.58rem; letter-spacing:.18em; color:var(--accent); }
.fig-cap{ font-family:var(--f-display); font-weight:600; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); text-align:right; margin:.75rem .2rem 0 0; }

/* ---------- Principles / ruled rows ---------- */
.rows{ list-style:none; margin:0; padding:0; border-top:1px solid var(--hairline); }
.row{ display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.6fr); gap:clamp(1.5rem,4vw,4rem); padding:1.7rem .25rem; border-bottom:1px solid var(--hairline); transition:background .2s ease; }
.row:hover{ background:var(--surface); }
.row-t{ font-family:var(--f-display); font-weight:700; font-size:1.18rem; color:var(--ink); letter-spacing:-.005em; display:flex; align-items:baseline; gap:.65em; line-height:1.25; }
.row-t .sq{ transform:translateY(-.04em); width:.42em; height:.42em; }
.row-d{ font-family:var(--f-text); font-weight:400; font-size:1.05rem; line-height:1.58; color:var(--ink-soft); padding-left:clamp(1.5rem,4vw,4rem); border-left:1px solid var(--hairline); }

/* ---------- Services inventory (spec grid) ---------- */
.inventory{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); border-top:1px solid var(--hairline); border-left:1px solid var(--hairline); }
.inv-item{ border-right:1px solid var(--hairline); border-bottom:1px solid var(--hairline); padding:1.6rem clamp(1.1rem,2.4vw,1.9rem); transition:background .2s ease; }
.inv-item:hover{ background:var(--surface); }
.inv-idx{ font-family:var(--f-display); font-weight:600; font-size:.7rem; letter-spacing:.1em; color:var(--accent); }
.inv-t{ font-family:var(--f-display); font-weight:700; font-size:1.1rem; color:var(--ink); margin:.5rem 0 .55rem; letter-spacing:-.005em; }
.inv-d{ font-family:var(--f-text); font-weight:400; font-size:1rem; line-height:1.55; color:var(--ink-soft); margin:0; }
.inv-item--wide{ grid-column:1 / -1; }
.inventory--ai{ grid-template-columns:repeat(3, minmax(0,1fr)); }

/* ---------- SOP (anatomy of the work, spec grid + traceable schematics) ---------- */
.sop{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); border-top:1px solid var(--hairline); border-left:1px solid var(--hairline); }
.sop-item{ border-right:1px solid var(--hairline); border-bottom:1px solid var(--hairline); padding:1.5rem clamp(1rem,2vw,1.6rem) 1.7rem; transition:background .18s ease; }
.sop-item:hover{ background:var(--surface); }
.sop-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1.1rem; }
.sop-n{ font-family:var(--f-display); font-weight:800; font-size:.72rem; letter-spacing:.12em; color:var(--accent); font-variant-numeric:tabular-nums; padding-top:.2rem; }
.sop-svg{ width:44px; height:44px; color:var(--ink-soft); flex:0 0 auto; }
.sop-svg .sop-acc{ stroke:var(--accent); }
.sop-t{ font-family:var(--f-display); font-weight:700; font-size:1.1rem; color:var(--ink); margin:0 0 .45rem; letter-spacing:-.005em; }
.sop-a{ font-family:var(--f-display); font-weight:600; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 .7rem; display:flex; align-items:center; gap:.55em; }
.sop-a .sq{ width:.55em; height:.55em; }
.sop-d{ font-family:var(--f-text); font-weight:400; font-size:.98rem; line-height:1.55; color:var(--ink-soft); margin:0; }
.sop-d a{ color:var(--ink); font-weight:600; text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:1.5px; text-underline-offset:2px; }
.sop-d a:hover{ color:var(--accent-hi); }
/* Schematics render complete by default (the ink is dry); the line-trace replays
   only when the figure is handled — hover or tap — and finishes inside 200ms. */
.sop-svg path{ stroke-dasharray:100 100; stroke-dashoffset:0; }
@keyframes sop-trace{ from{ stroke-dashoffset:100; } to{ stroke-dashoffset:0; } }
.sop-item:hover .sop-svg path,
.sop-item.trace .sop-svg path{ animation:sop-trace .18s linear both; }

/* ---------- Process (numbered sequence) ---------- */
.steps{ list-style:none; margin:0; padding:0; }
.step{ display:grid; grid-template-columns:auto minmax(0,.8fr) minmax(0,1.7fr); gap:clamp(1.25rem,3vw,3rem); align-items:baseline; padding:1.9rem .25rem; border-top:1px solid var(--hairline); }
.steps .step:last-child{ border-bottom:1px solid var(--hairline); }
.step-n{ font-family:var(--f-display); font-weight:800; font-size:1.05rem; color:var(--accent); letter-spacing:.02em; font-variant-numeric:tabular-nums; }
.step-t{ font-family:var(--f-display); font-weight:700; font-size:1.28rem; color:var(--ink); letter-spacing:-.01em; }
.step-d{ font-family:var(--f-text); font-weight:400; font-size:1.05rem; line-height:1.58; color:var(--ink-soft); }

/* ---------- Pricing (tier panels) ---------- */
.price-anchor{ font-family:var(--f-text); font-weight:500; font-size:1.08rem; line-height:1.6; color:var(--ink-soft); max-width:52ch; margin:0; }
.price-anchor strong{ font-family:var(--f-display); font-weight:700; color:var(--ink); }
.tiers{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:0; border:1px solid var(--hairline); border-radius:var(--r); overflow:hidden; margin-top:2.4rem; }
.tier{ padding:1.9rem clamp(1.2rem,2vw,1.7rem); border-right:1px solid var(--hairline); display:flex; flex-direction:column; }
.tier:last-child{ border-right:0; }
.tier--featured{ background:var(--surface); position:relative; }
.tier--featured::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--accent); }
.price-flag{ font-family:var(--f-display); font-weight:700; font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:1rem; display:inline-flex; align-items:center; gap:.5em; }
.tier-name{ font-family:var(--f-display); font-weight:800; font-size:1.3rem; line-height:1.12; color:var(--ink); text-wrap:balance; }
.tier-for{ font-family:var(--f-text); font-weight:400; font-style:italic; font-size:.96rem; line-height:1.5; color:var(--ink-soft); margin:.7rem 0 0; }
.tier-outcome{ font-family:var(--f-text); font-weight:500; font-size:1rem; line-height:1.5; color:var(--ink); margin:.9rem 0 1.3rem; padding-bottom:1.3rem; border-bottom:1px solid var(--hairline); }
.tier-list{ list-style:none; margin:0 0 1.4rem; padding:0; display:grid; gap:.7rem; flex:1; }
.tier-list li{ display:flex; gap:.6em; align-items:baseline; font-family:var(--f-text); font-size:.96rem; line-height:1.45; color:var(--ink); }
.tier-list .tick{ font-size:.8rem; }
.tier-meta{ font-family:var(--f-display); font-weight:600; font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 1.3rem; padding-top:1rem; border-top:1px solid var(--hairline); }
.tier-cta{ margin-top:auto; }
.pricing-note{ font-family:var(--f-text); font-size:1rem; color:var(--ink-soft); margin:1.6rem 0 0; }
.pricing-note a{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:1.5px; text-underline-offset:2px; font-weight:600; }
.pricing-note a:hover{ color:var(--accent-hi); }
.tiers--quad{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.tiers--quad .tier:nth-child(-n+2){ border-bottom:1px solid var(--hairline); }
.tiers--quad .tier:nth-child(even){ border-right:0; }

/* ---------- Industries / sectors ---------- */
.sectors{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); border-top:1px solid var(--hairline); border-left:1px solid var(--hairline); }
.sector{ border-right:1px solid var(--hairline); border-bottom:1px solid var(--hairline); padding:1.4rem 1.3rem; }
.sector-t{ font-family:var(--f-display); font-weight:700; font-size:1.02rem; color:var(--ink); margin:.5rem 0 .3rem; display:flex; align-items:baseline; gap:.5em; }
.sector-d{ font-family:var(--f-text); font-weight:400; font-size:.95rem; color:var(--ink-soft); margin:0; }

/* ---------- Proof / outcomes ---------- */
.outcomes{ list-style:none; margin:0; padding:0; border-top:1px solid var(--hairline); max-width:var(--maxw-narrow); }
.outcome{ display:grid; grid-template-columns:auto 1fr; gap:1.1rem; padding:1.5rem .25rem; border-bottom:1px solid var(--hairline); }
.outcome .sq{ width:.55em; height:.55em; transform:translateY(.35em); }
.outcome p{ font-family:var(--f-text); font-weight:400; font-size:1.1rem; line-height:1.55; color:var(--ink); margin:0; }
.outcome p strong{ font-family:var(--f-display); font-weight:700; color:var(--ink); }

/* ---------- Finding record (redaction panel — the one drama device) ---------- */
.proof-grid{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:var(--gap-hero); align-items:start; }
.proof-grid .outcomes{ max-width:none; }
.finding-fig{ margin:0; }
.finding{ background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r); }
.finding-rows{ margin:0; padding:0; }
/* align-items:start, not baseline — WebKit misplaces baseline-aligned grid
   items when the value text wraps, letting it overflow the row. */
.frow{ display:grid; grid-template-columns:minmax(7em,auto) 1fr; gap:1rem; align-items:start; padding:.85rem 1.2rem; border-bottom:1px solid var(--hairline); }
.frow dt{ padding-top:.2em; }
.frow dt{ font-family:var(--f-display); font-weight:600; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); }
.frow dd{ margin:0; font-family:var(--f-text); font-weight:500; font-size:.98rem; line-height:1.45; color:var(--ink); }
.frow-good{ display:flex; align-items:baseline; gap:.55em; }
/* Redaction bars: the text itself is inked over, one bar per wrapped line
   (box-decoration-break), so bars follow the text at any viewport width.
   Ink lifts when the document is handled (hover) or the toggle is pressed.
   Text stays in the DOM for assistive tech; the ink is purely visual. */
.redact{
  background:var(--ink); color:transparent; border-radius:1px;
  padding:.06em .18em;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
  transition:background-color .18s ease-out, color .18s ease-out;
}
.finding-rows:hover .redact,
.finding.revealed .redact{ background:transparent; color:inherit; }
.finding-toggle{ margin:1.1rem 1.2rem .35rem; font-size:.85rem; padding:.7em 1.05em; }
.finding-note{ font-family:var(--f-text); font-size:.85rem; line-height:1.5; color:var(--ink-soft); margin:.35rem 0 0; padding:0 1.2rem 1.1rem; display:flex; gap:.55em; align-items:baseline; }
.finding-note .sq{ width:.45em; height:.45em; flex:0 0 auto; }

/* ---------- Founder ---------- */
.founder-grid{ display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.55fr); gap:var(--gap-hero); align-items:start; }
.lead{ font-family:var(--f-text); font-weight:500; font-size:1.22rem; line-height:1.5; color:var(--ink); margin:0 0 1.2rem; }
.founder-copy p{ font-family:var(--f-text); font-size:1.06rem; line-height:1.62; color:var(--ink-soft); margin:0 0 1.2rem; max-width:52ch; }
.caps{ border:1px solid var(--hairline); border-radius:var(--r); background:var(--surface); }
.caps-head{ padding:1rem 1.2rem; border-bottom:1px solid var(--hairline); }
.caps-grid{ display:grid; grid-template-columns:1fr 1fr; }
.cap{ font-family:var(--f-display); font-weight:600; font-size:.92rem; color:var(--ink); padding:.8rem 1.2rem; border-bottom:1px solid var(--hairline); border-right:1px solid var(--hairline); display:flex; align-items:baseline; gap:.55em; }
.cap:nth-child(2n){ border-right:0; }
.cap .sq{ width:.4em; height:.4em; }

/* Founder portrait plate (personnel dossier) */
.portrait{ margin:0; }
.portrait-img{ display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; border:1px solid var(--hairline); border-radius:var(--r) var(--r) 0 0; background:var(--surface-2); }
.portrait-cap{ border:1px solid var(--hairline); border-top:0; border-radius:0 0 var(--r) var(--r); background:var(--surface); padding:1rem 1.15rem; }
.portrait-name{ font-family:var(--f-display); font-weight:800; font-size:1.08rem; color:var(--ink); letter-spacing:-.005em; }
.portrait-role{ font-family:var(--f-display); font-weight:600; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); margin-top:.25rem; }
.portrait-creds{ font-family:var(--f-display); font-weight:700; font-size:.74rem; letter-spacing:.05em; color:var(--accent-hi); margin-top:.7rem; padding-top:.7rem; border-top:1px solid var(--hairline); display:flex; align-items:center; gap:.5em; }
.founder-copy .caps{ margin-top:1.7rem; }
.founder-copy > .btn{ margin-top:1.7rem; }
.founder-about{ margin:clamp(2.5rem,5vw,4rem) 0; }
.founder-about .lead{ color:var(--ink); }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:var(--gap-hero); align-items:start; }
.contact-info p{ font-family:var(--f-text); font-size:1.08rem; line-height:1.6; color:var(--ink-soft); margin:1.1rem 0 0; max-width:44ch; }
.contact-form{ background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r); padding:clamp(1.4rem,3vw,2.1rem); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-group{ margin-bottom:1.1rem; display:flex; flex-direction:column; }
.form-group label{ font-family:var(--f-display); font-weight:600; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:.45rem; }
.contact-form input,.contact-form select,.contact-form textarea{
  font-family:var(--f-text); font-size:1rem; color:var(--ink);
  background:var(--paper); border:1px solid var(--hairline-2); border-radius:var(--r);
  padding:.7em .8em; width:100%; transition:border-color .18s ease, box-shadow .18s ease;
}
.contact-form input::placeholder,.contact-form textarea::placeholder{ color:var(--ink-soft); opacity:.75; }
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in oklch, var(--accent) 20%, transparent); }
.contact-form textarea{ min-height:120px; resize:vertical; }
.h-captcha{ margin-bottom:1.1rem; }
.form-submit{
  font-family:var(--f-display); font-weight:600; font-size:1rem; width:100%;
  background:var(--accent); color:#fff; border:1px solid var(--accent); border-radius:var(--r);
  padding:.95em 1.2em; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  transition:background .18s ease;
}
.form-submit:hover{ background:var(--accent-hi); }
.form-submit:disabled{ opacity:.7; cursor:default; }
.form-note{ font-family:var(--f-text); font-size:.9rem; color:var(--ink-soft); margin:.9rem 0 0; display:flex; gap:.5em; align-items:baseline; }
.form-status{ font-family:var(--f-display); font-weight:600; font-size:.9rem; margin-top:1rem; min-height:1.2em; }
.form-status.error{ color:var(--accent-hi); }
.form-status.ok{ color:var(--good); }
.form-done{ text-align:center; padding:2.5rem 1rem; }
.form-done .tick{ font-size:2.4rem; display:block; margin-bottom:.6rem; }
.form-done h3{ font-size:1.35rem; margin:0 0 .4rem; }
.form-done p{ font-family:var(--f-text); color:var(--ink-soft); margin:0; }

/* ---------- Footer ---------- */
footer{ border-top:1px solid var(--hairline); background:var(--surface); }
.foot{ display:flex; flex-wrap:wrap; align-items:center; gap:1.5rem 2.5rem; padding-block:2.4rem; }
.foot-brand{ display:flex; align-items:center; gap:.62em; }
.foot-brand .logo-sq{ width:11px; height:11px; background:var(--accent); }
.colophon{ font-family:var(--f-display); font-weight:600; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 0 .4rem; }
.foot-links{ display:flex; flex-wrap:wrap; gap:1.25rem; margin-left:auto; }
.foot-links a{ font-family:var(--f-display); font-weight:600; font-size:.85rem; color:var(--ink-soft); text-decoration:none; transition:color .18s ease; }
.foot-links a:hover{ color:var(--ink); }
.foot-legal{ border-top:1px solid var(--hairline); padding-block:1.1rem; display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; align-items:center; }
.foot-legal span,.foot-legal a{ font-family:var(--f-display); font-weight:500; font-size:.74rem; letter-spacing:.03em; color:var(--ink-soft); text-decoration:none; }
.foot-legal a:hover{ color:var(--ink); }
.foot-legal-links{ margin-left:auto; display:flex; gap:1.25rem; flex-wrap:wrap; }

/* ---------- Secondary pages (about + legal prose) ---------- */
.page-hero{ padding-block:clamp(3rem,6vw,5rem) var(--sec-y); border-bottom:1px solid var(--hairline); }
.page-hero h1{ margin-bottom:1rem; max-width:20ch; }
.page-hero .sub{ margin-bottom:0; }
.prose{ max-width:var(--maxw-narrow); }
.prose h2{ font-size:clamp(1.4rem,1.1rem+1.2vw,1.85rem); margin:2.6rem 0 1rem; max-width:none; }
.prose h3{ font-family:var(--f-display); font-weight:700; font-size:1.15rem; margin:1.8rem 0 .6rem; }
.prose p,.prose li{ font-family:var(--f-text); font-size:1.06rem; line-height:1.7; color:var(--ink); }
.prose p{ margin:0 0 1.1rem; }
.prose ul,.prose ol{ margin:0 0 1.3rem; padding-left:1.3rem; }
.prose li{ margin-bottom:.5rem; }
.prose a{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:1.5px; text-underline-offset:2px; }
.prose a:hover{ color:var(--accent-hi); }
.prose strong{ font-weight:600; }
.prose .updated{ font-family:var(--f-display); font-weight:600; font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); }

/* ---------- Handled-response micro-interactions (doctrine: the ink is dry;
   motion only as a consequence of a user act, <200ms, hard stop, no bounce) ---------- */
@keyframes stamp-settle{ from{ transform:scale(1.04) rotate(-.4deg); } to{ transform:scale(1) rotate(0deg); } }
.btn-accent:hover,
.form-submit:hover{ animation:stamp-settle .12s ease-out both; }
@keyframes stamp-strike{ from{ transform:rotate(-2deg) scale(1.12); } to{ transform:rotate(-5deg) scale(1); } }
.spec:hover .stamp{ animation:stamp-strike .14s ease-out both; }
.row-t .sq{ transition:transform .15s ease-out; }
.row:hover .row-t .sq{ transform:translateY(-.04em) scale(1.3); }

/* ---------- Motion (single reliable load entrance on hero; NOT scroll-gated) ---------- */
.js .reveal{ opacity:0; transform:translateY(14px); animation:rise .85s cubic-bezier(.2,.75,.25,1) both; }
.js .reveal.d2{ animation-delay:.06s; }
.js .reveal.d3{ animation-delay:.12s; }
.js .reveal.d4{ animation-delay:.18s; }
.js .reveal.d5{ animation-delay:.12s; }
@keyframes rise{ to{ opacity:1; transform:none; } }
/* Same single-load budget, intensified: the corner registration marks converge
   as the page settles, then the inspection stamp strikes last. */
.js .frame::before{ animation:mark-nw .5s ease-out .55s backwards; }
.js .frame::after{ animation:mark-se .5s ease-out .55s backwards; }
@keyframes mark-nw{ from{ opacity:0; transform:translate(-8px,-8px); } }
@keyframes mark-se{ from{ opacity:0; transform:translate(8px,8px); } }
.js .hero .stamp{ animation:stamp-land .18s ease-out .78s both; }
@keyframes stamp-land{ from{ opacity:0; transform:rotate(-2deg) scale(1.35); } to{ opacity:1; transform:rotate(-5deg) scale(1); } }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .js .reveal{ opacity:1 !important; transform:none !important; }
  *{ transition:none !important; animation:none !important; }
}

/* Windows High Contrast / forced colors: keep focus + control edges visible */
@media (forced-colors: active){
  :focus-visible{ outline:2px solid CanvasText; }
  .btn,
  .contact-form input,
  .contact-form select,
  .contact-form textarea{ border:1px solid ButtonText; }
}

/* ---------- Responsive ---------- */
@media (max-width: 940px){
  .hero{ grid-template-columns:1fr; gap:2.75rem; }
  .sop{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .founder-grid,.contact-grid,.proof-grid{ grid-template-columns:1fr; gap:2.5rem; }
  .portrait{ max-width:360px; }
  h1{ max-width:none; }
  .nav-links,.nav-actions .btn{ display:none; }
  .nav-toggle{ display:inline-flex; }
  .nav-panel[data-open="true"]{
    display:block; position:fixed; inset:64px 0 auto 0; z-index:var(--z-panel);
    background:var(--paper); border-bottom:1px solid var(--hairline-2);
    box-shadow:0 20px 40px -20px rgba(0,0,0,.25);
  }
  .nav-panel .container{ display:flex; flex-direction:column; gap:.25rem; padding-block:1rem 1.4rem; }
  .nav-panel a:not(.btn){ font-family:var(--f-display); font-weight:600; font-size:1.05rem; color:var(--ink); text-decoration:none; padding:.75rem .2rem; border-bottom:1px solid var(--hairline); }
  .nav-panel .btn{ margin-top:.8rem; justify-content:center; }
}
@media (max-width: 760px){
  .inventory,.sectors{ grid-template-columns:1fr; }
  .inv-item,.sector{ border-right:0; }
  .tiers{ grid-template-columns:1fr; }
  .tier{ border-right:0; border-bottom:1px solid var(--hairline); }
  .tier:last-child{ border-bottom:0; }
  .caps-grid{ grid-template-columns:1fr; }
  .cap{ border-right:0; }
  .step{ grid-template-columns:auto 1fr; gap:.4rem 1rem; }
  .step-d{ grid-column:2; }
}
@media (max-width: 620px){
  .sec-head{ flex-direction:column; align-items:flex-start; gap:1rem; }
  .sop{ grid-template-columns:1fr; }
  .sop-item{ border-right:0; }
  .row{ grid-template-columns:1fr; gap:.7rem; padding:1.4rem .1rem; }
  .row-d{ border-left:0; padding-left:calc(.42em + .65em); }
  .foot-links{ margin-left:0; }
  .foot-legal-links{ margin-left:0; }
  .stamp{ top:-12px; right:-6px; transform:rotate(-5deg) scale(.9); }
  .js .hero .stamp{ animation:none; } /* small screens keep the pre-struck stamp (scale .9 base) */
}
@media (max-width: 480px){
  .form-row{ grid-template-columns:1fr; gap:0; }
  .frow{ grid-template-columns:1fr; gap:.3rem; }
}
@media (max-width: 400px){
  body{ font-size:16px; }
  .cta .btn{ flex:1 1 auto; justify-content:center; }
}