/* ============================================================
   Fresh & Crispy v2 - "the audit is the interface"
   Dark committed palette, phosphor accent, mono annotation layer.
   Tokens are OKLCH. Motion follows CRISP design-eng doctrine:
   ease-out entries, UI motion under 300ms, no transition:all,
   nothing enters from scale(0), every control has :active.

   This is the source file. Pages link assets/css/v2.min.css, a
   generated minified copy, so edits here need a regeneration
   pass before they ship. There is no build step for this site
   (see AGENTS.md), so run this manually after every edit:
     npx lightningcss --minify assets/css/v2.css -o assets/css/v2.min.css
   (lightningcss is used, not clean-css, because clean-css does
   not understand the @starting-style rule below and corrupts it.)
   ============================================================ */

@font-face{
  font-family:"Futura Cond ExtraBold";
  src:url("../../fonts/FuturaStd-CondensedExtraBd.otf") format("opentype");
  font-weight:800;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Futura Cond ExtraBold";
  src:url("../../fonts/FuturaStd-CondExtraBoldObl.otf") format("opentype");
  font-weight:800;
  font-style:italic;
  font-display:swap;
}

:root{
  /* palette matched to app.getcrisp.design:
     near-black neutral base (#080808 / #111 / #161616 / #1e1e1e),
     warm cream text ramp (#ede8db / #9a9188 / #666058),
     acid chartreuse accent (#c8ff3c) */
  --bg:        oklch(12% 0.004 90);
  --bg-2:      oklch(18% 0.004 90);
  --bg-3:      oklch(20% 0.004 90);
  --line:      oklch(24% 0.004 90);
  --line-soft: oklch(21% 0.004 90);
  --ink:       oklch(93% 0.017 95);
  --ink-soft:  oklch(76% 0.014 90);
  --muted:     oklch(66% 0.012 85);
  --dim:       oklch(58% 0.012 85); /* raised from 48% to clear WCAG AA 4.5:1 against --bg */
  --accent:    oklch(93% 0.23 125);   /* acid #c8ff3c: scores, wins, actions */
  --accent-hover: oklch(96% 0.2 125);
  --accent-deep: oklch(70% 0.17 127);
  --accent-ink: oklch(13% 0.01 110); /* label colour on accent fills */
  --accent-wash: oklch(93% 0.23 125 / 0.13);
  --accent-tint: oklch(93% 0.23 125 / 0.06);
  --accent-line: oklch(13% 0.01 110 / 0.18);
  --accent-paper: oklch(38% 0.1 125);
  --warn:      oklch(72% 0.14 55);    /* #e88c3c */
  --low:       oklch(66% 0.17 25);    /* #e85c5c */
  --low-wash:  oklch(66% 0.17 25 / 0.14);

  /* warm daylight sections create contrast without leaving the brand family */
  --paper:      oklch(94% 0.018 94);
  --paper-2:    oklch(97% 0.012 94);
  --paper-ink:  oklch(18% 0.009 90);
  --paper-soft: oklch(38% 0.014 88);
  --paper-muted:oklch(51% 0.012 88);
  --paper-line: oklch(18% 0.009 90 / 0.14);
  --overlay:    oklch(9% 0.006 90 / 0.9);

  /* surfaces derived for glass, terminal, and hairlines */
  --bg-glass:   oklch(12% 0.004 90 / 0.86);
  --bg-glass-2: oklch(15% 0.004 90 / 0.92);
  --bg-term:    oklch(13% 0.004 90);  /* #0a0a0a on the reference page */
  --bg-gate:    oklch(10.5% 0.004 90);
  --hairline:   oklch(93% 0.23 125 / 0.03);  /* accent-tinted grid, as on reference */
  --hover-wash: oklch(100% 0 0 / 0.02);
  --shadow-term: 0 30px 60px -30px oklch(0% 0 0 / 0.6);
  /* legacy before-and-after mockup tones */
  --mock-rust:   oklch(30% 0.03 30);
  --mock-rust-2: oklch(25% 0.02 30);
  --mock-rust-3: oklch(28% 0.025 30);

  /* type: Futura Cond ExtraBold for headings, Inter for body, mono for annotations */
  --font-display: "Futura Cond ExtraBold", "Arial Narrow", "Helvetica Neue Condensed", sans-serif;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* radius scale */
  --radius-lg: 16px;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 4px;
  --radius-none: 0;
  --radius-round: 50%;

  /* motion tokens (CRISP canonical) */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 500ms;
  --duration-structural: 800ms;

  --maxw: 1200px;
}

*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{
  margin:0;
  font-family:var(--font);
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{ background:var(--accent); color:var(--accent-ink) }

/* faint blueprint grid over the whole document */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(to right, var(--hairline) 1px, transparent 1px),
    linear-gradient(to bottom, var(--hairline) 1px, transparent 1px);
  background-size:72px 72px;
}
main, header.nav, footer{ position:relative; z-index:1 }

h1,h2,h3{ margin:0; font-weight:700 }
p{ margin:0 }
a{ color:inherit; text-decoration:none }
img,svg{ display:block }
button{ font:inherit }
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}
a:active{ opacity:0.76 }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px }
@media(max-width:640px){ .wrap{ padding:0 20px } }

/* headings: Futura Cond ExtraBold; mono stays on annotations */
.h-display{
  font-family:var(--font-display);
  font-size:clamp(2.6rem, 7.2vw, 5.4rem);
  line-height:0.98;
  letter-spacing:0.01em;
  font-weight:800;
  text-transform:uppercase;
  text-wrap:balance;
}
.h-display em{ font-style:italic; color:var(--accent) }
.h-section{
  font-family:var(--font-display);
  font-size:clamp(1.85rem, 4.2vw, 3.1rem);
  line-height:1.02;
  letter-spacing:0.01em;
  font-weight:800;
  text-transform:uppercase;
  text-wrap:balance;
}
.h-section em{ font-style:italic; color:var(--accent) }
.lead{ font-size:1.14rem; color:var(--ink-soft); margin-top:18px; max-width:56ch }

/* mono annotation layer */
.note{
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--dim);
}
.note b{ color:var(--muted); font-weight:600 }

/* section divider rule with embedded index label (structural, not an eyebrow) */
.rule{
  display:flex; align-items:center; gap:16px;
  font-family:var(--mono); font-size:0.74rem; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--dim);
  margin-bottom:clamp(36px, 6vw, 64px);
}
.rule::before, .rule::after{ content:""; height:1px; background:var(--line-soft) }
.rule::before{ width:34px; flex:0 0 auto }
.rule::after{ flex:1 }
.rule .ix{ color:var(--accent) }

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font); font-size:0.95rem; font-weight:650;
  letter-spacing:-0.005em; cursor:pointer; white-space:nowrap;
  padding:15px 26px; border-radius:var(--radius-sm); border:1px solid transparent;
  transition:transform var(--duration-fast) var(--ease-out),
             background-color var(--duration-fast) var(--ease-out),
             border-color var(--duration-fast) var(--ease-out),
             color var(--duration-fast) var(--ease-out);
}
.btn:active{ transform:scale(0.97) }
.btn svg{ width:16px; height:16px }
.btn-primary{ background:var(--accent); color:var(--accent-ink) }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line) }
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{ background:var(--accent-hover) }
  .btn-ghost:hover{ border-color:var(--muted) }
}

.microcopy{
  margin-top:14px; font-family:var(--mono); font-size:0.78rem;
  letter-spacing:0.04em; color:var(--muted);
}

/* text links */
.tlink{
  color:var(--accent); font-weight:600;
  border-bottom:1px solid transparent;
  transition:border-color var(--duration-fast) var(--ease-out);
}
.tlink:active{ opacity:0.7 }
@media (hover:hover) and (pointer:fine){
  .tlink:hover{ border-color:var(--accent) }
}

/* ---------------- nav ---------------- */
header.nav{
  position:sticky; top:0; z-index:60;
  background:var(--bg-glass);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);
  backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color var(--duration-fast) var(--ease-out);
}
header.nav.scrolled{ border-color:var(--line-soft) }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:66px }
.brand{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-weight:700; font-size:1rem; letter-spacing:-0.02em;
}
.brand img{ height:26px; width:auto; display:block }
.brand .tag{ font-size:0.7rem; font-weight:400; color:var(--dim); letter-spacing:0.08em }
@media(max-width:560px){ .brand .tag{ display:none } }
.nav-cta{ display:flex; align-items:center; gap:20px }
.nav-link{
  font-family:var(--mono); font-size:0.8rem; letter-spacing:0.05em;
  color:var(--muted);
  transition:color var(--duration-fast) var(--ease-out);
}
.nav-link .ix{ color:var(--accent-deep); margin-right:5px }
.nav-link:active{ color:var(--ink) }
@media (hover:hover) and (pointer:fine){
  .nav-link:hover{ color:var(--ink) }
  .nav-link:hover .ix{ color:var(--accent) }
}
.nav-link[aria-current="page"]{ color:var(--ink) }
.nav-link[aria-current="page"] .ix{ color:var(--accent) }
@media(max-width:820px){ .nav-link{ display:none } }
.nav .btn{ padding:10px 18px; font-size:0.82rem }

/* ---------------- mobile nav toggle + menu ---------------- */
.nav-toggle{
  display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px;
  width:38px; height:38px; padding:0; margin:0;
  border:1px solid var(--line); border-radius:var(--radius-sm);
  background:transparent; cursor:pointer; flex:0 0 auto;
}
.nav-toggle span{
  display:block; width:16px; height:1.5px; background:var(--ink);
  transition:transform var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out);
}
.nav-toggle:active{ transform:scale(0.97) }
.nav.is-open .nav-toggle span:nth-child(1){ transform:translateY(6.5px) rotate(45deg) }
.nav.is-open .nav-toggle span:nth-child(2){ opacity:0 }
.nav.is-open .nav-toggle span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg) }
@media(max-width:820px){ .nav-toggle{ display:inline-flex } }

.mobile-menu{
  display:none; flex-direction:column;
  position:absolute; top:100%; left:0; right:0;
  background:var(--bg-glass-2);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-soft);
}
.nav.is-open .mobile-menu{ display:flex }
.mobile-link{
  padding:17px 28px; font-family:var(--mono); font-size:0.86rem; letter-spacing:0.04em;
  color:var(--ink-soft); border-top:1px solid var(--line-soft);
  transition:color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
}
.mobile-link:active{ background:var(--hover-wash) }
.mobile-link[aria-current="page"]{ color:var(--accent) }
.mobile-menu .btn{ margin:18px 28px; justify-content:center }

/* ---------------- HUD: the page audits itself ---------------- */
.hud{
  position:fixed; right:22px; bottom:22px; z-index:55;
  width:216px; padding:14px 16px 15px;
  background:var(--bg-glass-2);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  font-family:var(--mono);
  opacity:1; transform:translateY(0);
  transition:opacity var(--duration-base) var(--ease-out),
             transform var(--duration-base) var(--ease-out);
  @starting-style{ opacity:0; transform:translateY(10px) }
}
.hud-head{
  display:flex; align-items:center; justify-content:space-between;
  font-size:0.62rem; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--dim); margin-bottom:10px;
}
.hud-head .live{ display:inline-flex; align-items:center; gap:6px; color:var(--accent) }
.hud-head .live i{
  width:6px; height:6px; border-radius:var(--radius-round); background:var(--accent);
  animation:pulse 2s var(--ease-in-out) infinite;
}
@keyframes pulse{ 50%{ opacity:0.25 } }
.hud-row{
  display:grid; grid-template-columns:14px 1fr 34px; align-items:center;
  gap:10px; padding:3px 0; font-size:0.72rem;
}
.hud-row .k{ color:var(--dim); font-weight:700; transition:color var(--duration-base) var(--ease-out) }
.hud-row .bar{ height:4px; border-radius:var(--radius-xs); background:var(--bg-3); overflow:hidden }
.hud-row .bar i{
  display:block; height:100%; background:var(--accent); border-radius:var(--radius-xs);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--duration-slow) var(--ease-out);
}
.hud-row .v{ text-align:right; color:var(--dim); font-size:0.68rem }
.hud-row.scored .k{ color:var(--accent) }
.hud-row.scored .bar i{ transform:scaleX(var(--fill, 1)) }
.hud-row.scored .v{ color:var(--ink-soft) }
.hud-grade{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-top:10px; padding-top:10px; border-top:1px solid var(--line-soft);
}
.hud-grade .lab{ font-size:0.62rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--dim) }
.hud-grade .g{ font-size:1.3rem; font-weight:700; color:var(--dim); transition:color var(--duration-base) var(--ease-out) }
.hud-grade .g.on{ color:var(--accent) }
@media(max-width:900px){
  .hud{
    right:0; left:0; bottom:0; width:auto;
    display:flex; align-items:center; gap:14px;
    padding:10px 16px; border-radius:var(--radius-none); border-left:0; border-right:0; border-bottom:0;
  }
  .hud-head{ margin:0 }
  .hud-head .t{ display:none }
  .hud-rows{ display:flex; flex:1; gap:12px }
  .hud-row{ display:flex; gap:5px; padding:0 }
  .hud-row .bar, .hud-row .v{ display:none }
  .hud-grade{ margin:0; padding:0; border:0; gap:8px }
  body{ padding-bottom:44px }
}

/* ---------------- hero ---------------- */
.hero{ padding:clamp(58px, 7vw, 92px) 0 clamp(68px, 8vw, 104px); overflow:hidden }
.hero-grid{
  display:grid; grid-template-columns:1fr; justify-items:center;
  gap:clamp(42px, 6vw, 72px);
}
.hero-copy{
  position:relative; z-index:2; display:flex; flex-direction:column;
  align-items:center; text-align:center; max-width:1100px; margin-inline:auto;
}
.hero-kicker{
  display:flex; align-items:center; gap:10px; margin-bottom:24px;
  font-family:var(--mono); font-size:0.72rem; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--muted);
}
.hero-kicker span{ width:8px; height:8px; border-radius:var(--radius-round); background:var(--accent) }
.hero h1{ max-width:48ch; font-size:clamp(2.8rem, 5.8vw, 5rem) }
.hero .sub{ font-size:1.14rem; color:var(--ink-soft); margin-top:24px; max-width:48ch }
.hero .sub b{ color:var(--ink); font-weight:600 }
.hero .audit{ width:100%; max-width:620px }
.hero .audit-meta{ justify-content:center }

/* subpage hero variants */
.hero-sub{ padding-bottom:40px }
.hero-flush{ padding-bottom:0 }
.hero .h-article{ font-size:clamp(2.2rem, 5.4vw, 3.5rem); max-width:24ch }
.hero .byline{ justify-content:center; text-align:center }
.hero-cta{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:16px 20px; margin-top:28px }

/* Selected projects: responsive previews with visitor-controlled navigation. */
.site-showcase{min-width:0;width:100%;max-width:1080px;text-align:left;padding:16px;background:#121310;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-term);container-type:inline-size}
.showcase-head,.carousel-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;font-family:var(--mono);font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.showcase-head{padding:4px 4px 18px}.showcase-head>span:first-child{color:var(--ink)}
.carousel-stage{position:relative;height:calc(57cqw + 96px);overflow:hidden;border-radius:12px;background:#171813}
.site-slide{position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px);transition:opacity 240ms ease,transform 240ms ease,visibility 240ms}
.site-slide.is-active{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.project-preview{height:57cqw;overflow:hidden;background:#201913}
.concept-preview img{display:block;width:100%;height:auto;max-width:none}
.site-slide figcaption{height:96px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 24px;background:#191b16;color:var(--ink)}
.site-slide figcaption div{display:grid;gap:5px}.site-slide figcaption div>span{font-family:var(--mono);font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.site-slide figcaption b{font-size:1.35rem;font-weight:500}.site-slide figcaption a{font-size:.8rem;color:var(--ink);display:flex;gap:14px;align-items:center;border-bottom:1px solid var(--accent);padding:8px 0}.site-slide figcaption p{font-size:.8rem;color:var(--muted);margin:0}
.carousel-foot{padding:16px 0 0}.carousel-dots{display:flex;gap:8px}.carousel-dot{min-height:44px;padding:10px 16px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--muted);font:inherit;letter-spacing:0;cursor:pointer;transition:background-color 180ms,color 180ms}.carousel-dot span{font-size:.6rem;margin-right:9px;opacity:.65}.carousel-dot.is-active{background:#292e1e;border-color:#48532c;color:var(--accent)}.carousel-arrows{display:flex;gap:8px}.carousel-arrows button{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--ink);font-size:20px;cursor:pointer}.carousel-dot:active,.carousel-arrows button:active{transform:scale(.96)}
.site-showcase button:focus-visible,.site-showcase a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.vera-nav{height:5.5cqw;background:#faf9f6;display:flex;align-items:center;gap:1.4cqw;padding:0 3cqw;color:#666;font-family:Arial,sans-serif;font-size:.85cqw}.vera-nav img{width:12cqw;height:auto;max-height:4cqw;object-fit:contain}.vera-nav-right{margin-left:auto;color:#442818}.vera-scene{height:51.5cqw;position:relative;overflow:hidden;background:radial-gradient(ellipse at 80% 50%,#78462970,transparent 65%),#15120f;color:#fff;font-family:Arial,sans-serif}
.vera-copy{position:relative;z-index:2;width:64%;padding:6cqw 0 0 4cqw}.vera-eyebrow{display:inline-block;padding:.7cqw 1cqw;border:1px solid #ffffff30;border-radius:40px;background:#ffffff09;font-size:.9cqw;color:#e5d7ca}.vera-copy h2{font:500 7.5cqw/1.05 Arial,sans-serif;letter-spacing:-.45cqw;margin:2cqw 0;color:#fff;text-transform:none}.vera-copy p{font:400 2cqw/1.4 Arial,sans-serif;max-width:40cqw;color:#eee2d9;margin:0 0 2.4cqw}.vera-preview-cta{display:inline-block;padding:1.3cqw 2cqw;background:#b65330;border-radius:40px;font-size:1.15cqw;font-weight:600}.vera-copy small{display:block;font-size:.8cqw;color:#c7b7a9;margin-top:2.6cqw}
.vera-records{position:absolute;right:-5cqw;top:8cqw;width:49cqw;height:33cqw;perspective:800px}.vera-records img{position:absolute;width:25cqw;height:25cqw;object-fit:cover;border-radius:1.5cqw;box-shadow:0 2cqw 4cqw #0008;transform:rotate(-9deg) rotateY(-20deg)}.vera-records img:nth-child(1){left:0;top:5cqw;filter:brightness(.55);transform:rotate(-14deg) rotateY(-25deg)}.vera-records img:nth-child(2){left:12cqw;top:2cqw;filter:brightness(.75);transform:rotate(7deg) rotateY(-15deg)}.vera-records img:nth-child(3){left:25cqw;top:8cqw;transform:rotate(14deg) rotateY(-20deg)}
.vera-bottom{position:absolute;bottom:0;left:4cqw;right:4cqw;display:flex;justify-content:space-between;border-top:1px solid #ffffff24;padding:1.8cqw 0;font-size:.8cqw;letter-spacing:.1cqw;color:#beac9e}
@media(hover:hover){.carousel-dot:hover,.carousel-arrows button:hover{background:#303529;color:var(--ink)}.site-slide figcaption a:hover{color:var(--accent)}}
@media(prefers-reduced-motion:reduce){.site-slide{transition:none;transform:none}}
@media(max-width:600px){.site-showcase{padding:8px;border-radius:14px}.showcase-head{font-size:.52rem;letter-spacing:.035em;padding:7px 3px 13px;gap:8px}.carousel-stage{height:calc(57cqw + 92px)}.site-slide figcaption{height:92px;padding:13px;gap:10px}.site-slide figcaption div>span{font-size:.48rem;letter-spacing:.025em}.site-slide figcaption b{font-size:1.05rem}.site-slide figcaption a,.site-slide figcaption p{font-size:.65rem}.site-slide figcaption p{max-width:100px;text-align:right}.carousel-foot{gap:5px;padding-top:9px}.carousel-dots{gap:2px;flex:1}.carousel-dot{padding:8px;font-size:.6rem}.carousel-dot span{display:none}.carousel-arrows{gap:4px}.carousel-arrows button{width:44px;height:44px}}
@media(max-width:1050px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-copy{ max-width:720px }
  .hero h1{ max-width:15ch; font-size:clamp(3rem, 9vw, 5.4rem) }
  .site-showcase{ max-width:1080px }
}

/* audit widget */
.audit{ margin-top:38px; max-width:660px }
.audit-form{
  display:flex; gap:8px; padding:8px;
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius);
  transition:border-color var(--duration-fast) var(--ease-out);
}
.audit-form:focus-within{ border-color:var(--accent-deep) }
.audit-form input{
  flex:1; min-width:0; border:0; outline:0; background:transparent;
  font-family:var(--mono); font-size:0.98rem; padding:10px 12px; color:var(--ink);
}
.audit-form input::placeholder{ color:var(--dim) }
.audit-form .btn{ flex:0 0 auto }
.field-err{ color:var(--low); font-family:var(--mono); font-size:0.8rem; margin-top:10px; min-height:1.2em }
.audit-meta{
  display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:14px;
  font-family:var(--mono); font-size:0.74rem; letter-spacing:0.03em; color:var(--muted);
}
.audit-meta span{ display:inline-flex; align-items:center; gap:7px }
.audit-meta svg{ width:13px; height:13px; color:var(--accent) }
.altbook{ margin-top:16px; font-size:0.95rem; color:var(--ink-soft) }
@media(max-width:560px){
  .audit-form{ display:grid }
  .audit-form .btn{ width:100% }
  .site-slide figcaption b{ display:block }
}

/* marquee of annotation text */
.ticker{ border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); overflow:hidden }
.ticker-track{
  display:flex; gap:0; width:max-content;
  animation:tick 42s linear infinite;
}
.ticker span{
  font-family:var(--mono); font-size:0.74rem; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--dim); padding:13px 0;
  white-space:nowrap;
}
.ticker span::after{ content:"·"; color:var(--accent-deep); margin:0 26px }
@keyframes tick{ to{ transform:translateX(-50%) } }

/* ---------------- sections ---------------- */
section{ padding:clamp(64px, 9vw, 120px) 0 }

/* provocation: word-by-word reveal */
.provoke{ background:var(--accent); color:var(--accent-ink) }
.promise-grid{
  display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(300px, 0.8fr);
  gap:clamp(42px, 8vw, 112px); align-items:center;
}
.provoke .big{
  font-family:var(--font-display);
  font-size:clamp(1.7rem, 4vw, 2.9rem);
  line-height:1.08; letter-spacing:0.01em; font-weight:800;
  text-transform:uppercase; max-width:29ch;
}
.provoke .big .w{
  display:inline-block;
  opacity:0.12;
  transition:opacity var(--duration-slow) var(--ease-out);
}
.provoke .big .w.on{ opacity:1 }
.provoke .big .w.em{ font-style:italic; color:var(--accent-ink) }
.promise-points{ display:grid }
.promise-points span{
  display:grid; grid-template-columns:34px 1fr; gap:12px; padding:15px 0;
  border-bottom:1px solid var(--accent-line); font-size:0.94rem; font-weight:600;
}
.promise-points span:first-child{ border-top:1px solid var(--accent-line) }
.promise-points b{ font-family:var(--mono); font-size:0.72rem; color:var(--paper-soft) }
@media(max-width:760px){ .promise-grid{ grid-template-columns:1fr } }

/* light sections give the long page a daylight rhythm */
.light-section{ background:var(--paper); color:var(--paper-ink) }
.light-section .h-section{ color:var(--paper-ink) }
.light-section .h-section em{ color:var(--accent-paper) }
.light-section .lead{ color:var(--paper-soft) }
.light-section .rule{ color:var(--paper-muted) }
.light-section .rule::before,
.light-section .rule::after{ background:var(--paper-line) }
.light-section .rule .ix{ color:var(--accent-paper) }
.light-section .microcopy{ color:var(--paper-muted) }
.light-section .tlink{ color:var(--accent-paper) }
@media (hover:hover) and (pointer:fine){
  .light-section .tlink:hover{ border-color:var(--accent-paper) }
}

/* CRISP dimensions: report rows */
.dims{ border-top:1px solid var(--line-soft) }
.dim-row{
  display:grid; grid-template-columns:64px 1fr 2fr auto; gap:24px; align-items:center;
  padding:26px 8px; border-bottom:1px solid var(--line-soft);
  transition:background-color var(--duration-fast) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .dim-row:hover{ background:var(--hover-wash) }
}
.dim-row .k{
  font-family:var(--mono); font-size:clamp(1.8rem, 3vw, 2.4rem);
  font-weight:700; color:var(--accent); line-height:1;
}
.dim-row h3{
  font-family:var(--font-display); font-size:1.15rem; letter-spacing:0.04em;
  text-transform:uppercase; font-weight:800;
}
.dim-row h3 span{ display:block; margin-top:5px; font-family:var(--mono); font-size:0.68rem; letter-spacing:0.1em; color:var(--dim); font-weight:400; text-transform:uppercase }
.dim-row p{ color:var(--ink-soft); font-size:0.98rem; max-width:44ch }
.dim-row .ix{ font-family:var(--mono); font-size:0.72rem; color:var(--dim) }
.light-section .dims{ border-color:var(--paper-line) }
.light-section .dim-row{ border-color:var(--paper-line) }
.light-section .dim-row .k{ color:var(--accent-paper) }
.light-section .dim-row h3 span,
.light-section .dim-row .ix{ color:var(--paper-muted) }
.light-section .dim-row p{ color:var(--paper-soft) }
@media(max-width:820px){
  .dim-row{ grid-template-columns:48px 1fr; gap:8px 18px; padding:22px 4px }
  .dim-row .k{ grid-row:span 2 }
  .dim-row .ix{ display:none }
}

/* ---------------- terminal report ---------------- */
.out-grid{
  display:grid; grid-template-columns:0.94fr 1.06fr;
  gap:clamp(36px, 5vw, 64px); align-items:center;
}
@media(max-width:900px){ .out-grid{ grid-template-columns:1fr } }
.stats{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px }
.stat-chip{
  border:1px solid var(--line-soft); border-radius:var(--radius-sm);
  padding:14px 18px; min-width:120px;
}
.stat-chip b{
  display:block; font-family:var(--mono); font-size:1.6rem; font-weight:700;
  letter-spacing:-0.03em; color:var(--ink);
}
.stat-chip b em{ font-style:normal; color:var(--accent) }
.stat-chip b span{ font-size:inherit; letter-spacing:inherit; text-transform:none; color:inherit }
.stat-chip > span{
  font-family:var(--mono); font-size:0.64rem; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--dim);
}

.term{
  background:var(--bg-term);
  border:1px solid var(--line-soft); border-radius:var(--radius);
  overflow:hidden; font-family:var(--mono); color:var(--ink-soft);
  box-shadow:var(--shadow-term);
}
.term-bar{
  display:flex; align-items:center; gap:9px; padding:12px 16px;
  border-bottom:1px solid var(--line-soft); color:var(--dim); font-size:0.78rem;
}
.term-bar .dots{ display:flex; gap:6px; margin-right:4px }
.term-bar .dots i{ width:9px; height:9px; border-radius:var(--radius-round); background:var(--bg-3); display:block }
.term-body{ padding:18px 18px 20px; font-size:0.86rem; line-height:1.75 }
.term-body .ln{ white-space:pre-wrap }
.term-body .lo{ color:var(--dim) }
.term-sep{ color:var(--dim); margin:12px 0 6px; font-size:0.74rem; letter-spacing:0.02em }
.crisp-row{ display:grid; grid-template-columns:18px 112px 1fr 48px; align-items:center; gap:12px; padding:3px 0 }
.crisp-row .k{ color:var(--accent); font-weight:700 }
.crisp-row .lab{ color:var(--ink-soft) }
.tbar{ height:5px; border-radius:var(--radius-xs); background:var(--bg-3); overflow:hidden }
.tbar i{
  display:block; height:100%; border-radius:var(--radius-xs); background:var(--accent);
  transform:scaleX(var(--w, 0)); transform-origin:left;
  transition:transform var(--duration-slow) var(--ease-out);
}
.tbar.warn i{ background:var(--warn) }
.tbar.low i{ background:var(--low) }
.crisp-row .sc{ text-align:right; color:var(--dim); font-size:0.78rem }
.grade-line{ display:flex; align-items:baseline; gap:12px; margin-top:4px }
.grade-line b{ font-size:1.7rem; letter-spacing:0.02em }
.grade-line span{ color:var(--dim) }
.fix-line{ display:grid; grid-template-columns:26px 1fr; gap:10px; padding:4px 0; align-items:start }
.fix-line .n{ color:var(--accent) }
.term-gate{
  border-top:1px solid var(--line-soft); background:var(--bg-gate);
  padding:16px 18px; display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between;
}
.term-gate p{ font-family:var(--font); color:var(--muted); font-size:0.88rem; flex:1 1 220px }
.cursor{
  display:inline-block; width:8px; height:14px; background:var(--accent);
  vertical-align:-2px; animation:blink 1s steps(2) infinite;
}
@keyframes blink{ 50%{ opacity:0 } }

/* ---------------- fix cards ---------------- */
.fix-cards{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin-top:48px }
@media(max-width:820px){ .fix-cards{ grid-template-columns:1fr } }
.fcard{
  background:var(--bg-2); border:1px solid var(--line-soft); border-radius:var(--radius);
  padding:26px 24px; position:relative; overflow:hidden;
  transition:transform var(--duration-fast) var(--ease-out),
             border-color var(--duration-fast) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .fcard:hover{ transform:translateY(-3px); border-color:var(--line) }
}
.fcard .fx{ font-family:var(--mono); font-size:0.66rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent) }
.fcard h3{ font-family:var(--font-display); font-size:1.4rem; letter-spacing:0.02em; font-weight:800; text-transform:uppercase; margin:14px 0 10px }
.fcard p{ color:var(--muted); font-size:0.95rem }
.fcard .n{
  position:absolute; right:18px; top:14px;
  font-family:var(--mono); font-size:0.72rem; color:var(--dim);
}
.light-section .fcard{
  background:var(--paper-2); border-color:var(--paper-line);
  box-shadow:0 16px 40px -34px var(--paper-ink);
}
.light-section .fcard .fx{ color:var(--accent-paper) }
.light-section .fcard h3{ color:var(--paper-ink) }
.light-section .fcard p,
.light-section .fcard .n{ color:var(--paper-muted) }
.light-section .quote{ color:var(--paper-ink); border-color:var(--accent-paper) }

/* About: illustrated team portraits */
.team-grid{
  grid-template-columns:repeat(3, minmax(0, 1fr));
  margin-top:44px;
}
.team-card{ padding-top:0 }
.team-card .team-portrait{
  display:block;
  width:calc(100% + 48px);
  height:auto;
  aspect-ratio:1;
  object-fit:cover;
  margin:0 -24px 24px;
  border-bottom:1px solid var(--paper-line);
}
.team-card .n{ top:auto; bottom:18px }
@media(max-width:1050px){ .team-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)) } }
@media(max-width:620px){ .team-grid{ grid-template-columns:1fr } }

/* comparison table */
.cmp-wrap{ margin-top:44px; border:1px solid var(--line-soft); border-radius:var(--radius); overflow:hidden }
table.cmp{ width:100%; border-collapse:collapse; font-size:0.94rem }
table.cmp th, table.cmp td{ padding:15px 18px; text-align:left; border-bottom:1px solid var(--line-soft); vertical-align:top }
table.cmp thead th{
  background:var(--bg-2); font-family:var(--mono); font-weight:700;
  font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted);
}
table.cmp thead th.us{ color:var(--accent) }
table.cmp td{ color:var(--ink-soft) }
table.cmp td.us{ background:var(--accent-tint); color:var(--ink); font-weight:600 }
table.cmp td:first-child{ font-weight:600; color:var(--muted) }
table.cmp tr:last-child td{ border-bottom:0 }
@media(max-width:640px){ table.cmp{ font-size:0.8rem } table.cmp th, table.cmp td{ padding:11px 10px } }
.quote{
  margin-top:36px; font-family:var(--font); font-size:1.25rem; font-weight:600; line-height:1.5;
  letter-spacing:-0.02em; color:var(--ink); max-width:46ch;
  border-left:2px solid var(--accent); padding-left:22px;
}

/* ---------------- proof ---------------- */
.case{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px, 4vw, 48px); align-items:center; margin-top:48px }
@media(max-width:820px){ .case{ grid-template-columns:1fr } }
.ba{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
.shot{ border:1px solid var(--line-soft); border-radius:var(--radius); overflow:hidden; background:var(--bg-2) }
.shot .bar-top{ display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1px solid var(--line-soft) }
.pill{ font-family:var(--mono); font-size:0.62rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; padding:4px 9px; border-radius:var(--radius-xs) }
.pill.before{ background:var(--low-wash); color:var(--low) }
.pill.after{ background:var(--accent-wash); color:var(--accent) }
.g-badge{ font-family:var(--mono); font-weight:700; font-size:0.95rem }
.g-badge.c{ color:var(--low) } .g-badge.a{ color:var(--accent) }
.mock{ padding:16px; height:168px; display:flex; flex-direction:column; gap:9px }
.mock .m-nav{ display:flex; gap:8px; align-items:center }
.mock .m-logo{ width:32px; height:10px; border-radius:var(--radius-xs); background:var(--bg-3) }
.mock.clean .m-logo{ background:var(--accent) }
.mock .m-links{ display:flex; gap:6px; margin-left:auto }
.mock .m-links span{ width:22px; height:6px; border-radius:var(--radius-xs); background:var(--bg-3) }
.mock .m-hero{ height:44px; border-radius:var(--radius-xs); background:var(--bg-3) }
.mock.messy .m-hero{ background:repeating-linear-gradient(45deg, var(--mock-rust), var(--mock-rust) 7px, var(--mock-rust-2) 7px, var(--mock-rust-2) 14px); height:34px }
.mock.clean .m-hero{ background:linear-gradient(120deg, var(--accent-deep), var(--accent)); height:48px }
.mock .m-line{ height:7px; border-radius:var(--radius-xs); background:var(--bg-3) } .mock .m-line.short{ width:45% }
.mock.messy .m-line{ background:var(--mock-rust-3) }
.mock .m-rows{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:7px }
.mock .m-rows i{ height:28px; border-radius:var(--radius-xs); background:var(--bg-3); display:block }
.mock.clean .m-rows i{ background:var(--accent-wash) }
.case .body h3{ font-family:var(--font-display); font-size:1.7rem; letter-spacing:0.01em; font-weight:800; text-transform:uppercase; margin:16px 0 14px }
.case .body p{ color:var(--ink-soft) }
.case .body .tlink{ display:inline-flex; align-items:center; gap:7px; margin-top:18px }

/* ---------------- landing page service ---------------- */
.landing-hero .hero-copy{ max-width:940px }
.landing-hero .h-display{ max-width:36ch }
.landing-hero-meta{
  display:flex; flex-wrap:wrap; gap:10px 28px; margin:34px 0 0; padding:20px 0 0;
  border-top:1px solid var(--line-soft); list-style:none;
  font-family:var(--mono); font-size:0.72rem; letter-spacing:0.05em; color:var(--muted)
}
.landing-hero-meta li{ display:flex; align-items:center; gap:9px }
.landing-hero-meta li::before{ content:""; width:6px; height:6px; border-radius:var(--radius-round); background:var(--accent) }

.landing-intro{ display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(280px, 0.8fr); gap:clamp(32px, 7vw, 96px); align-items:end }
.landing-intro .lead{ margin:0 0 8px }
.landing-principle-list{ margin-top:clamp(48px, 7vw, 84px); border-top:1px solid var(--paper-line) }
.landing-principle-list article{
  display:grid; grid-template-columns:70px minmax(210px, 0.72fr) minmax(280px, 1.28fr);
  gap:clamp(20px, 4vw, 54px); align-items:start; padding:28px 0; border-bottom:1px solid var(--paper-line)
}
.landing-principle-list span{ font-family:var(--mono); font-size:0.72rem; color:var(--accent-paper) }
.landing-principle-list h3{ color:var(--paper-ink); font-size:1.15rem; margin:0 }
.landing-principle-list p{ color:var(--paper-muted); margin:0; max-width:56ch }

.landing-concepts{ overflow:hidden }
.landing-concepts-head{ display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(280px, 0.8fr); gap:clamp(32px, 7vw, 96px); align-items:end }
.landing-concepts-head .note{ margin-bottom:18px }
.landing-concepts-note{ color:var(--muted); margin:0 0 8px; max-width:48ch }
.landing-concept-grid{ display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); gap:18px; margin-top:clamp(42px, 6vw, 72px) }
.landing-concept{
  grid-column:span 4; margin:0; min-width:0; overflow:hidden;
  border:1px solid var(--line-soft); border-radius:var(--radius-lg); background:var(--bg-2);
  transition:transform var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out)
}
.landing-concept:nth-child(1){ grid-column:span 7 }
.landing-concept:nth-child(2){ grid-column:span 5 }
.landing-concept-link{ display:block; aspect-ratio:4 / 5; overflow:hidden; background:var(--bg-3) }
.landing-concept:nth-child(n+3) .landing-concept-link{ aspect-ratio:3 / 4 }
.landing-concept-link img{ display:block; width:100%; height:100%; object-fit:cover; object-position:top; transition:transform var(--duration-slow) var(--ease-out) }
.landing-concept figcaption{ padding:20px 20px 22px; border-top:1px solid var(--line-soft) }
.landing-concept figcaption span{ display:block; font-family:var(--mono); font-size:0.64rem; letter-spacing:0.08em; color:var(--accent); margin-bottom:10px }
.landing-concept figcaption strong{ display:block; font-family:var(--font-display); font-size:1.28rem; color:var(--ink); margin-bottom:7px }
.landing-concept figcaption p{ margin:0; color:var(--muted); font-size:0.9rem }
.landing-concept:focus-within{ border-color:var(--accent-deep) }
.landing-concept-link:active img{ transform:scale(0.985) }
@media (hover:hover) and (pointer:fine){
  .landing-concept:hover{ transform:translateY(-3px); border-color:var(--line) }
  .landing-concept:hover img{ transform:scale(1.015) }
}

.landing-scope-grid{ display:grid; grid-template-columns:minmax(260px, 0.78fr) minmax(0, 1.22fr); gap:clamp(42px, 8vw, 112px); align-items:start }
.landing-scope-grid .note, .landing-faq-grid .note{ color:var(--paper-muted); margin-bottom:18px }
.landing-scope-grid .lead{ margin-bottom:22px }
.landing-deliverables{ list-style:none; margin:0; padding:0; border-top:1px solid var(--paper-line) }
.landing-deliverables li{
  display:grid; grid-template-columns:46px 1fr; gap:14px; padding:17px 0;
  border-bottom:1px solid var(--paper-line); color:var(--paper-ink); font-weight:650
}
.landing-deliverables span{ font-family:var(--mono); font-size:0.68rem; color:var(--accent-paper); padding-top:3px }

.landing-process{ list-style:none; margin:50px 0 36px; padding:0; border-top:1px solid var(--line-soft) }
.landing-process li{
  display:grid; grid-template-columns:82px minmax(180px, 0.55fr) minmax(280px, 1fr);
  gap:clamp(20px, 4vw, 56px); padding:28px 0; border-bottom:1px solid var(--line-soft)
}
.landing-process > li > span{ font-family:var(--mono); color:var(--accent); font-size:0.74rem; padding-top:5px }
.landing-process li div{ display:contents }
.landing-process h3{ font-size:1.22rem; margin:0; color:var(--ink) }
.landing-process p{ margin:0; color:var(--muted); max-width:58ch }
.landing-process-section > .wrap > .lead{ max-width:760px }

.landing-faq-grid{ display:grid; grid-template-columns:minmax(260px, 0.72fr) minmax(0, 1.28fr); gap:clamp(42px, 8vw, 112px); align-items:start }
.landing-faq .faq-item:first-child{ padding-top:0 }
.landing-final-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:18px 24px; margin-top:28px }

@media(max-width:900px){
  .landing-intro, .landing-concepts-head, .landing-scope-grid, .landing-faq-grid{ grid-template-columns:1fr; gap:28px }
  .landing-intro .lead, .landing-concepts-note{ margin:0 }
  .landing-concept:nth-child(n){ grid-column:span 6 }
  .landing-concept:last-child{ grid-column:3 / span 8 }
}
@media(max-width:680px){
  .landing-principle-list article, .landing-process li{ grid-template-columns:42px 1fr; gap:10px 16px }
  .landing-principle-list article p, .landing-process p{ grid-column:2 }
  .landing-process li div{ display:contents }
  .landing-concept:nth-child(n){ grid-column:1 / -1 }
  .landing-concept-link, .landing-concept:nth-child(n+3) .landing-concept-link{ aspect-ratio:4 / 5 }
}
@media(max-width:420px){
  .landing-hero-meta{ display:grid; gap:10px }
  .landing-final-actions .btn{ width:100% }
}

/* ---------------- work and case studies ---------------- */
.work-index{ padding-top:clamp(72px, 9vw, 118px) }
.work-feature{
  display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(280px, 0.75fr);
  border:1px solid var(--paper-line); border-radius:var(--radius-lg); overflow:hidden;
  background:var(--paper-2); box-shadow:0 24px 70px -56px var(--paper-ink);
  transition:transform var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.work-feature-media{ min-height:420px; overflow:hidden; background:var(--bg-term) }
.work-feature-media img{ width:100%; height:100%; object-fit:cover; object-position:center; transition:transform var(--duration-slow) var(--ease-out) }
.work-feature-body{ display:flex; flex-direction:column; justify-content:center; padding:clamp(30px, 5vw, 58px) }
.work-feature-body .note{ color:var(--paper-muted) }
.work-feature-body .h-section{ margin:18px 0; color:var(--paper-ink) }
.work-feature-body .h-section em{ color:var(--accent-paper) }
.work-feature-body p:not(.note){ color:var(--paper-soft); max-width:44ch }
.work-feature-body .tlink{ margin-top:26px; align-self:flex-start; color:var(--accent-paper) }
@media (hover:hover) and (pointer:fine){
  .work-feature:hover{ transform:translateY(-3px); border-color:oklch(38% 0.014 88 / 0.35) }
  .work-feature:hover img{ transform:scale(1.015) }
}
@media(max-width:900px){
  .work-feature{ grid-template-columns:1fr }
  .work-feature-media{ min-height:auto; aspect-ratio:16 / 9 }
}

/* Work index: show the complete screenshot independently of the copy height. */
.work-feature-stacked{grid-template-columns:minmax(0,1fr)}
.work-feature-stacked .work-feature-media{display:block;min-height:0;aspect-ratio:auto;line-height:0}
.work-feature-stacked .work-feature-media img{display:block;width:100%;height:auto;object-fit:contain;transform:none;transition:none}
.work-feature-stacked .work-feature-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);align-items:start;gap:clamp(24px,4vw,64px);padding:clamp(24px,4vw,48px)}
.work-feature-stacked .h-section{font-size:clamp(2.4rem,5vw,4.5rem);margin:12px 0 0}
.work-feature-stacked .work-feature-summary h3{font-family:var(--font);font-size:clamp(1.15rem,2vw,1.5rem);font-weight:600;line-height:1.3;letter-spacing:-.025em;text-transform:none;color:var(--paper-ink);margin:0 0 12px}
.work-feature-stacked .work-feature-summary p{max-width:48ch;margin:0;font-size:1rem;line-height:1.65}
.work-feature-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px;--ink:var(--paper-ink);--line:var(--paper-line);--muted:var(--paper-muted)}
.work-feature-stacked a:focus-visible{outline:3px solid var(--accent-paper);outline-offset:-4px}
.work-feature-stacked .work-feature-actions a:focus-visible{outline-offset:4px}
@media(hover:hover) and (pointer:fine){.work-feature-stacked:hover{transform:none;border-color:var(--paper-line)}.work-feature-stacked:hover img{transform:none}}
@media(max-width:650px){.work-feature-stacked .work-feature-body{grid-template-columns:minmax(0,1fr);gap:24px}.work-feature-stacked .work-feature-title .note{font-size:.6rem}.work-feature-actions .btn{width:100%}}
.work-cards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(32px,4vw,48px) clamp(16px,2vw,24px);margin-top:clamp(24px,4vw,40px)}
.work-card{grid-column:span 2;display:flex;flex-direction:column;gap:18px;color:var(--paper-ink);text-decoration:none}
.work-card:nth-child(-n+2){grid-column:span 3}
.work-card:nth-child(3n):last-child{grid-column:span 6}
.work-card-media{display:block;overflow:hidden;border-radius:var(--radius-lg);background:var(--paper-2);box-shadow:0 1px 0 var(--paper-line),0 18px 40px -24px oklch(18% 0.009 90 / 0.35);aspect-ratio:16 / 10}
.work-card:nth-child(3n):last-child .work-card-media{aspect-ratio:21 / 9}
.work-card-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform var(--duration-slow) var(--ease-out)}
.work-card-body{display:flex;flex-direction:column;gap:8px;padding:0 4px}
.work-card-title{margin:0;font-family:var(--font);font-size:clamp(1.35rem,2vw,1.75rem);font-weight:600;line-height:1.15;letter-spacing:-.03em;text-transform:none;color:var(--paper-ink)}
.work-card-desc{max-width:46ch;font-size:.98rem;line-height:1.55;color:var(--paper-soft)}
.work-card-tags{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 0;padding:0;list-style:none}
.work-card-tags li{padding:6px 12px;border:1px solid var(--paper-line);border-radius:999px;background:var(--paper-2);font-size:.78rem;font-weight:500;line-height:1;color:var(--paper-soft)}
.work-card:focus-visible{outline:none}
.work-card-media{position:relative}
.work-card-cursor{display:none}
@media(hover:hover) and (pointer:fine){
  .work-card-media[data-cursor]{cursor:none}
  .work-card-cursor{position:absolute;left:0;top:0;z-index:1;display:grid;place-items:center;width:132px;height:132px;padding:0 22px;border-radius:50%;background:oklch(56% 0.004 90 / 0.78);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;font-size:1rem;font-weight:500;line-height:1.25;text-align:center;pointer-events:none;opacity:0;transform:translate(calc(var(--cx, 50%) - 50%), calc(var(--cy, 50%) - 50%)) scale(.4);transition:opacity 200ms var(--ease-out), transform 200ms var(--ease-out)}
  .work-card:hover .work-card-cursor{opacity:1;transform:translate(calc(var(--cx, 50%) - 50%), calc(var(--cy, 50%) - 50%)) scale(1)}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:reduce){.work-card-cursor{transition:opacity 150ms linear}}
.work-card:focus-visible .work-card-media{outline:3px solid var(--accent-paper);outline-offset:4px}
@media(hover:hover) and (pointer:fine){.work-card:hover .work-card-media img{transform:scale(1.03)}.work-card:hover .work-card-title{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}}
@media(prefers-reduced-motion:reduce){.work-card-media img{transition:none}}
@media(max-width:860px){.work-card,.work-card:nth-child(-n+2){grid-column:span 3}.work-card:nth-child(3n):last-child,.work-card:last-child:nth-child(odd){grid-column:span 6}}
@media(max-width:560px){.work-cards{grid-template-columns:minmax(0,1fr)}.work-card,.work-card:nth-child(-n+2),.work-card:nth-child(3n):last-child,.work-card:last-child:nth-child(odd){grid-column:auto}.work-card-media,.work-card:nth-child(3n):last-child .work-card-media{aspect-ratio:16 / 10}}

.work-hero .hero-copy{ max-width:960px }
.work-meta{
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr));
  border:1px solid var(--paper-line); border-radius:var(--radius); overflow:hidden; margin-bottom:34px;
}
.work-meta div{ padding:20px 22px; border-right:1px solid var(--paper-line) }
.work-meta div:last-child{ border-right:0 }
.work-meta span{ display:block; font-family:var(--mono); font-size:0.66rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--paper-muted); margin-bottom:8px }
.work-meta b{ display:block; color:var(--paper-ink); font-size:0.93rem }
.work-screen{ margin:0; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--paper-line); background:var(--paper-2) }
.work-screen img{ width:100%; height:auto }
.work-screen figcaption{ padding:14px 18px; font-family:var(--mono); font-size:0.7rem; line-height:1.5; color:var(--paper-muted); border-top:1px solid var(--paper-line) }
.work-gallery{ display:grid; grid-template-columns:minmax(0, 1fr); gap:16px }
.work-gallery-main{ margin:0; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--paper-line); background:var(--paper-2); display:flex; flex-direction:column }
.work-gallery-main img{ width:100%; height:auto; display:block }
.work-gallery-main figcaption{ padding:14px 18px; font-family:var(--mono); font-size:0.7rem; line-height:1.5; color:var(--paper-muted); border-top:1px solid var(--paper-line); margin-top:auto }
.work-gallery-side{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px }
.work-gallery-side figure{ margin:0; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--paper-line); background:var(--paper-2) }
.work-gallery-side img{ width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:1 / 1 }
@media(max-width:520px){
  .work-gallery-side{ gap:8px }
}
.case-study-grid{ display:grid; grid-template-columns:minmax(260px, 0.82fr) minmax(0, 1.18fr); gap:clamp(36px, 7vw, 100px); align-items:start }
.case-study-grid .prose{ margin-top:0 }
.case-study-grid .prose p:last-child{ margin-bottom:0 }
.work-decisions .dim-row{ grid-template-columns:74px minmax(190px, 0.8fr) minmax(260px, 1.4fr) auto }
.work-decisions .dim-row .k{ font-size:1rem }
.evidence-panel{ display:grid; grid-template-columns:minmax(260px, 0.9fr) minmax(0, 1.1fr); gap:clamp(36px, 7vw, 100px); align-items:start; padding:clamp(28px, 5vw, 50px); background:var(--paper-2); border:1px solid var(--paper-line); border-radius:var(--radius-lg) }
.evidence-panel .note{ color:var(--paper-muted); margin-bottom:14px }
.evidence-panel .h-section{ color:var(--paper-ink) }
.evidence-panel .h-section em{ color:var(--accent-paper) }
.evidence-panel .prose{ margin-top:0 }
.evidence-panel .prose p:last-child{ margin-bottom:0 }
@media(max-width:860px){
  .work-meta{ grid-template-columns:repeat(2, minmax(0, 1fr)) }
  .work-meta div:nth-child(2){ border-right:0 }
  .work-meta div:nth-child(-n+2){ border-bottom:1px solid var(--paper-line) }
  .case-study-grid, .evidence-panel{ grid-template-columns:1fr; gap:28px }
  .work-decisions .dim-row{ grid-template-columns:48px 1fr }
}
@media(max-width:520px){
  .work-meta{ grid-template-columns:1fr }
  .work-meta div{ border-right:0; border-bottom:1px solid var(--paper-line) }
  .work-meta div:nth-child(2){ border-bottom:1px solid var(--paper-line) }
  .work-meta div:last-child{ border-bottom:0 }
}

/* lineage */
.line-row{ display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; margin-top:44px }
@media(max-width:820px){ .line-row{ grid-template-columns:repeat(2, 1fr) } }
@media(max-width:460px){ .line-row{ grid-template-columns:1fr } }
.lnode{ background:var(--bg-2); border:1px solid var(--line-soft); border-radius:var(--radius); padding:20px 18px }
.lnode .yr{ font-family:var(--mono); font-size:0.72rem; color:var(--accent); font-weight:600 }
.lnode b{ display:block; margin:8px 0 5px; font-size:0.98rem }
.lnode span{ color:var(--muted); font-size:0.86rem }
.lnode.now{ border-color:var(--accent-deep) }

/* ---------------- final ---------------- */
.final{ background:var(--paper); color:var(--paper-ink) }
.final > .wrap > .rule{ color:var(--paper-muted) }
.final > .wrap > .rule::before,
.final > .wrap > .rule::after{ background:var(--paper-line) }
.final > .wrap > .rule .ix{ color:var(--accent-paper) }
.final .card{
  border:1px solid var(--line-soft); border-radius:var(--radius-lg); background:var(--bg-2);
  max-width:780px; margin:0 auto; padding:clamp(36px, 6vw, 56px) clamp(22px, 5vw, 48px);
  text-align:center;
}
.final .card .h-section{ color:var(--ink) }
.final .card .h-section em{ color:var(--accent) }
.final .audit{ margin:28px auto 0; text-align:left }
.final .lead{ margin-left:auto; margin-right:auto }

/* ---------------- footer ---------------- */
footer{ border-top:1px solid var(--line-soft); padding:56px 0 110px; color:var(--muted); font-size:0.9rem }
.foot-eof{
  font-family:var(--font-display); font-size:clamp(1.9rem, 4.6vw, 3.2rem); font-weight:800;
  letter-spacing:0.01em; text-transform:uppercase;
  letter-spacing:-0.03em; color:var(--ink); margin-bottom:36px;
}
.foot-eof em{ font-style:italic; color:var(--accent) }
.foot-inner{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:18px }
.foot-legal{ max-width:640px; color:var(--dim); font-size:0.8rem; margin-top:24px; line-height:1.6 }
footer a{ color:var(--ink-soft) }
footer a:active{ color:var(--ink) }
@media (hover:hover) and (pointer:fine){ footer a:hover{ color:var(--ink) } }
.foot-marks{
  display:flex; gap:22px; margin-top:30px;
  font-family:var(--mono); font-size:0.68rem; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--dim);
}

/* ---------------- insights: article typography ---------------- */
.byline{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  font-family:var(--mono); font-size:0.76rem; letter-spacing:0.04em;
  color:var(--dim); margin-top:22px;
}
.byline b{ color:var(--muted); font-weight:600 }
.tldr{
  margin-top:44px; padding:24px 26px; border:1px solid var(--line-soft);
  border-radius:var(--radius); background:var(--bg-2);
}
.light-section .tldr{ background:var(--paper-2); border-color:var(--paper-line) }
.tldr .note{ margin-bottom:10px }
.tldr p{ margin:0; color:var(--ink-soft); font-size:1.02rem; line-height:1.6 }
.light-section .tldr p{ color:var(--paper-soft) }

.prose{ max-width:70ch; margin-top:16px }
.prose p{ margin:0 0 22px; color:var(--ink-soft); font-size:1.05rem; line-height:1.72 }
.prose h2{
  font-family:var(--font-display); text-transform:uppercase; font-weight:800;
  font-size:clamp(1.4rem, 2.6vw, 1.9rem); letter-spacing:0.01em;
  margin:52px 0 18px; color:var(--ink);
}
.prose h3{
  font-family:var(--font); font-weight:700; font-size:1.18rem;
  margin:34px 0 12px; color:var(--ink);
}
.prose ul, .prose ol{ margin:0 0 22px; padding-left:22px; color:var(--ink-soft); line-height:1.7 }
.prose li{ margin-bottom:8px }
.prose a{ color:var(--accent); font-weight:600; border-bottom:1px solid transparent }
@media (hover:hover) and (pointer:fine){ .prose a:hover{ border-color:var(--accent) } }
.prose figure{ margin:34px 0; padding:22px; border:1px solid var(--line-soft); border-radius:var(--radius) }
.prose figcaption{ margin-top:14px; font-family:var(--mono); font-size:0.74rem; color:var(--dim); letter-spacing:0.04em }
.prose table{ width:100%; border-collapse:collapse; margin:0 0 22px; font-size:0.95rem }
.prose th, .prose td{ text-align:left; padding:10px 14px; border-bottom:1px solid var(--line-soft) }
.prose th{ font-family:var(--mono); font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--dim) }
.light-section .prose p,
.light-section .prose ul,
.light-section .prose ol{ color:var(--paper-soft) }
.light-section .prose h2, .light-section .prose h3{ color:var(--paper-ink) }
.light-section .prose figure{ border-color:var(--paper-line) }

.faq-item{ padding:22px 0; border-bottom:1px solid var(--line-soft) }
.light-section .faq-item{ border-color:var(--paper-line) }
.faq-item h3{ font-size:1.05rem; margin:0 0 10px; color:var(--ink) }
.light-section .faq-item h3{ color:var(--paper-ink) }
.faq-item p{ margin:0; color:var(--ink-soft); line-height:1.65 }
.light-section .faq-item p{ color:var(--paper-soft) }

.article-media{ padding:32px 0 0 }
.article-feature{
  margin:0; overflow:hidden; border:1px solid var(--line-soft);
  border-radius:var(--radius-lg); background:var(--bg-2)
}
.article-feature img{ display:block; width:100%; height:auto; aspect-ratio:40 / 21; object-fit:cover }

.insights-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:2px; background:var(--line-soft); border:1px solid var(--line-soft); margin-top:44px }
.light-section .insights-grid{ background:var(--paper-line); border-color:var(--paper-line) }
@media(max-width:720px){ .insights-grid{ grid-template-columns:1fr } }
.insight-card{ background:var(--bg); padding:34px; display:flex; flex-direction:column; gap:14px }
.light-section .insight-card{ background:var(--paper) }
.insight-image{
  display:block; width:100%; height:auto; aspect-ratio:40 / 21; object-fit:cover;
  border:1px solid var(--line-soft); border-radius:var(--radius); margin-bottom:4px
}
.insight-card h2, .insight-card h3{ font-size:1.28rem; line-height:1.28 }
.insight-card h2 a, .insight-card h3 a{ color:var(--ink) }
.light-section .insight-card h2 a, .light-section .insight-card h3 a{ color:var(--paper-ink) }
.insight-card p{ color:var(--ink-soft); line-height:1.6; margin:0 }
.light-section .insight-card p{ color:var(--paper-soft) }

/* ---------------- reveals ---------------- */
.reveal{
  opacity:0; transform:translateY(16px);
  transition:opacity var(--duration-slow) var(--ease-out),
             transform var(--duration-slow) var(--ease-out);
}
.reveal.in{ opacity:1; transform:translateY(0) }
.reveal.d1{ transition-delay:60ms }
.reveal.d2{ transition-delay:120ms }
.reveal.d3{ transition-delay:180ms }
.reveal.d4{ transition-delay:240ms }

/* ---------------- reduced motion ----------------
   fewer and gentler, not zero: keep opacity, drop transforms */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  .reveal{ transform:none; transition:opacity var(--duration-fast) var(--ease-out) }
  .ticker-track{ animation:none }
  .hud-head .live i{ animation:none }
  .cursor{ animation:none }
  .hud-row .bar i, .tbar i{ transition:none }
  .btn:active{ transform:none; opacity:0.8 }
  .fcard, .fcard:hover{ transform:none }
  .provoke .big .w{ transition:opacity var(--duration-fast) var(--ease-out) }
  .site-slide{ transform:none; transition:none }
}

/* ---------------- tools: hub card grid ---------------- */
.stat-chip.is-up b em{ color:var(--accent) }
.stat-chip.is-down b em{ color:var(--low) }
.tool-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-top:44px }
@media(max-width:900px){ .tool-grid{ grid-template-columns:1fr 1fr } }
@media(max-width:640px){ .tool-grid{ grid-template-columns:1fr } }
.tool-card{
  display:block; padding:26px; border:1px solid var(--line-soft); border-radius:var(--radius);
  background:var(--bg-2); transition:border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.tool-card:hover{ border-color:var(--line); transform:translateY(-3px) }
.tool-card .fx{ font-family:var(--mono); font-size:0.66rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent) }
.tool-card h3{ font-family:var(--font-display); font-size:1.3rem; letter-spacing:0.02em; font-weight:800; text-transform:uppercase; margin:14px 0 10px; color:var(--ink) }
.tool-card p{ color:var(--muted); font-size:0.95rem; margin:0 }
@media(prefers-reduced-motion: reduce){ .tool-card, .tool-card:hover{ transform:none } }

/* ---------------- tools: form embedded in hero ---------------- */
.hero-tool{ margin-top:38px; width:100%; text-align:left }

/* ---------------- tools: FAQ accordion (details/summary) ----------------
   Additive to the existing static .faq-item used elsewhere on the site.
   A <div class="faq-item"> is unaffected; a <details class="faq-item">
   gets a clickable summary with a toggle marker. */
.faq-item summary{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-size:1.05rem; color:var(--ink); cursor:pointer; list-style:none; margin:0;
}
.faq-item summary::-webkit-details-marker{ display:none }
.faq-item summary::after{
  content:"+"; flex:0 0 auto; font-family:var(--mono); font-size:1.1rem; color:var(--dim);
  transition:transform var(--duration-fast) var(--ease-out);
}
.faq-item[open] summary::after{ content:"\2212" }
.faq-item[open] summary{ margin-bottom:10px }
.faq-item summary:focus-visible{ outline:2px solid var(--accent-deep); outline-offset:4px; border-radius:var(--radius-xs) }
.light-section .faq-item summary{ color:var(--paper-ink) }

/* ---------------- tools: related resources ---------------- */
.related-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-top:44px }
@media(max-width:820px){ .related-grid{ grid-template-columns:1fr } }
.related-col{ padding:26px; border:1px solid var(--line-soft); border-radius:var(--radius) }
.related-col h3{
  font-family:var(--mono); font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--accent); margin:0 0 16px;
}
.related-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px }
.related-col a{ color:var(--ink-soft); font-size:0.95rem; text-decoration:none; border-bottom:1px solid transparent }
.related-col a:hover{ color:var(--ink); border-color:var(--line) }
.light-section .related-col{ border-color:var(--paper-line) }
.light-section .related-col h3{ color:var(--accent-paper) }
.light-section .related-col a{ color:var(--paper-soft) }
.light-section .related-col a:hover{ color:var(--paper-ink) }

/* ---------------- website design service ---------------- */
.design-section, .page-website-design .design-section{ scroll-margin-top:112px }
.design-hero .hero-copy{ max-width:1100px }
.design-hero .h-display{ max-width:48ch }
.design-hero .sub{ max-width:58ch }
.design-signals{
  display:flex; justify-content:center; flex-wrap:wrap; gap:10px 26px;
  margin:34px 0 0; padding:20px 0 0; border-top:1px solid var(--line-soft);
  list-style:none; font-family:var(--mono); font-size:0.72rem; letter-spacing:0.04em;
  color:var(--muted)
}
.design-signals li{ display:flex; align-items:center; gap:9px }
.design-signals li::before{ content:""; width:6px; height:6px; border-radius:var(--radius-round); background:var(--accent) }

.design-jump{ position:relative; z-index:2; border-block:1px solid var(--line-soft); background:var(--bg) }
.design-jump .wrap{ display:flex; align-items:center; gap:8px 26px; min-height:54px; overflow-x:auto; scrollbar-width:none }
.design-jump .wrap::-webkit-scrollbar{ display:none }
.design-jump span,
.design-jump a{ flex:0 0 auto; font-family:var(--mono); font-size:0.7rem; letter-spacing:0.07em; text-transform:uppercase }
.design-jump span{ color:var(--dim); margin-right:auto }
.design-jump a{ color:var(--muted); transition:color var(--duration-fast) var(--ease-out) }
.design-jump a:active{ color:var(--ink) }
@media (hover:hover) and (pointer:fine){ .design-jump a:hover{ color:var(--accent) } }

.design-heading-split{ display:grid; grid-template-columns:minmax(0, 1.12fr) minmax(280px, 0.88fr); gap:clamp(34px, 8vw, 110px); align-items:end }
.design-heading-split .lead{ margin:0 0 4px }
.design-outcome-list{ margin-top:clamp(46px, 7vw, 78px); border-top:1px solid var(--paper-line) }
.design-outcome-list article{
  display:grid; grid-template-columns:70px minmax(200px, 0.72fr) minmax(280px, 1.28fr);
  gap:clamp(20px, 4vw, 54px); align-items:start; padding:27px 0; border-bottom:1px solid var(--paper-line)
}
.design-outcome-list span{ font-family:var(--mono); font-size:0.72rem; color:var(--accent-paper) }
.design-outcome-list h3{ font-size:1.12rem; color:var(--paper-ink) }
.design-outcome-list p{ color:var(--paper-muted); max-width:58ch }

.design-scope-grid{ display:grid; grid-template-columns:minmax(280px, 0.78fr) minmax(420px, 1.22fr); gap:clamp(42px, 9vw, 118px); align-items:start }
.design-scope-intro{ position:sticky; top:112px }
.design-scope-intro .tlink{ display:inline-flex; margin-top:24px }
.design-scope-list{ margin:0; border-top:1px solid var(--line-soft) }
.design-scope-list > div{ display:grid; grid-template-columns:minmax(150px, 0.72fr) minmax(220px, 1.28fr); gap:30px; padding:25px 0; border-bottom:1px solid var(--line-soft) }
.design-scope-list dt{ color:var(--ink); font-weight:700 }
.design-scope-list dd{ margin:0; color:var(--muted) }
.design-route-note{ max-width:76ch; margin:54px 0 0; padding-top:24px; border-top:1px solid var(--line-soft); color:var(--ink-soft) }

.design-process{ display:grid; grid-template-columns:repeat(4, 1fr); gap:0; list-style:none; margin:clamp(46px, 7vw, 76px) 0 0; padding:0; border-top:1px solid var(--paper-line); border-bottom:1px solid var(--paper-line) }
.design-process li{ display:grid; grid-template-rows:auto 1fr; gap:34px; padding:24px; border-right:1px solid var(--paper-line) }
.design-process li:first-child{ padding-left:0 }
.design-process li:last-child{ border-right:0; padding-right:0 }
.design-process > li > span{ font-family:var(--mono); font-size:0.72rem; color:var(--accent-paper) }
.design-process h3{ font-family:var(--font-display); font-size:1.38rem; font-weight:800; letter-spacing:0.02em; text-transform:uppercase; color:var(--paper-ink); margin-bottom:12px }
.design-process p{ color:var(--paper-muted); font-size:0.94rem }
.design-process small{ display:block; margin-top:20px; font-family:var(--mono); font-size:0.68rem; line-height:1.55; color:var(--paper-soft) }
.design-process-link{ margin-top:28px; color:var(--paper-soft) }

.design-case .work-screen{ overflow:hidden; border:1px solid var(--line-soft); border-radius:var(--radius-lg); background:var(--bg-2) }
.design-case .work-screen img{ width:100%; height:auto }
.design-proof-notes{ margin:24px 0 0; border-top:1px solid var(--line-soft) }
.design-proof-notes div{ display:grid; grid-template-columns:140px 1fr; gap:18px; padding:13px 0; border-bottom:1px solid var(--line-soft) }
.design-proof-notes dt{ font-family:var(--mono); font-size:0.68rem; color:var(--dim); text-transform:uppercase; letter-spacing:0.05em }
.design-proof-notes dd{ margin:0; color:var(--ink-soft); font-size:0.9rem }

.design-commercial-grid{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(320px, 0.8fr); gap:clamp(44px, 9vw, 120px); align-items:start }
.design-mini-title{ margin-top:36px; font-family:var(--mono); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--paper-muted) }
.design-factor-list{ list-style:none; margin:18px 0 24px; padding:0; border-top:1px solid var(--paper-line) }
.design-factor-list li{ display:grid; grid-template-columns:18px 1fr; gap:10px; padding:13px 0; border-bottom:1px solid var(--paper-line); color:var(--paper-soft) }
.design-factor-list li::before{ content:"+"; font-family:var(--mono); color:var(--accent-paper) }
.design-fit-panel{ padding:clamp(26px, 4vw, 40px); border:1px solid var(--paper-line); border-radius:var(--radius-lg); background:var(--paper-2) }
.design-fit-panel .note{ color:var(--paper-muted) }
.design-fit-panel h3{ margin:20px 0 12px; color:var(--paper-ink); font-size:1.08rem }
.design-fit-panel ul{ margin:0; padding-left:20px; color:var(--paper-soft) }
.design-fit-panel li{ margin-bottom:9px }
.design-fit-panel p:not(.note){ color:var(--paper-soft) }

.design-faq-grid{ display:grid; grid-template-columns:minmax(280px, 0.76fr) minmax(420px, 1.24fr); gap:clamp(42px, 9vw, 118px); align-items:start }
.design-faq{ margin-top:0 }
.design-faq .faq-item:first-child{ padding-top:0 }
.design-faq .faq-item h3{ margin-top:0 }
.design-final-actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:28px }

@media(max-width:900px){
  .design-heading-split,
  .design-scope-grid,
  .design-commercial-grid,
  .design-faq-grid{ grid-template-columns:1fr }
  .design-heading-split .lead{ margin-top:0 }
  .design-scope-intro{ position:static }
  .design-process{ grid-template-columns:1fr 1fr }
  .design-process li{ border-bottom:1px solid var(--paper-line) }
  .design-process li:nth-child(2){ border-right:0; padding-right:0 }
  .design-process li:nth-child(3){ padding-left:0; border-bottom:0 }
  .design-process li:nth-child(4){ border-bottom:0 }
}
@media(max-width:660px){
  .design-jump span{ display:none }
  .design-jump .wrap{ gap:20px }
  .design-outcome-list article{ grid-template-columns:40px 1fr; gap:8px 14px }
  .design-outcome-list article p{ grid-column:2 }
  .design-scope-list > div{ grid-template-columns:1fr; gap:8px }
  .design-process{ grid-template-columns:1fr }
  .design-process li,
  .design-process li:first-child,
  .design-process li:nth-child(2),
  .design-process li:nth-child(3),
  .design-process li:last-child{ grid-template-columns:38px 1fr; grid-template-rows:auto; gap:14px; padding:22px 0; border-right:0; border-bottom:1px solid var(--paper-line) }
  .design-process li:last-child{ border-bottom:0 }
  .design-proof-notes div{ grid-template-columns:1fr; gap:4px }
  .design-final-actions .btn{ width:100% }
}

/* ---------------- shared service, industry and funnel components ----------------
   Used by the deeper service pages, /crisp-method/, /industries/ and /go/.
   All concept imagery carries a visible label (brand rule: never imply a client result). */
.hero-visual{ width:100%; max-width:1100px; margin:44px auto 0 }
.visual-frame{ margin:0; border:1px solid var(--line-soft); border-radius:var(--radius-lg); overflow:hidden; background:var(--bg-2) }
.visual-frame img{ display:block; width:100%; height:auto }
.visual-frame figcaption{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 18px; padding:12px 16px; border-top:1px solid var(--line-soft); font-family:var(--mono); font-size:0.66rem; letter-spacing:0.07em; text-transform:uppercase; color:var(--dim) }
.visual-frame figcaption b{ color:var(--accent); font-weight:600 }
.light-section .visual-frame{ border-color:var(--paper-line) }

.proof-strip{ border-block:1px solid var(--line-soft); background:var(--bg) }
.proof-strip .wrap{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:0 }
.proof-strip div{ padding:22px 18px; border-right:1px solid var(--line-soft) }
.proof-strip div:first-child{ padding-left:0 }
.proof-strip div:last-child{ border-right:0 }
.proof-strip b{ display:block; font-family:var(--font-display); font-weight:800; font-size:1.5rem; text-transform:uppercase; color:var(--ink); line-height:1.1 }
.proof-strip span{ display:block; margin-top:6px; font-family:var(--mono); font-size:0.66rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted) }

.reframe{ background:var(--accent); color:var(--accent-ink) }
.reframe .rule{ color:var(--accent-ink) }
.reframe .rule::before, .reframe .rule::after{ background:var(--accent-line) }
.reframe .rule .ix{ color:var(--accent-ink) }
.reframe-grid{ display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(280px, 0.85fr); gap:clamp(36px, 7vw, 96px); align-items:start }
.reframe-statement{ font-family:var(--font-display); font-weight:800; font-size:clamp(1.9rem, 4.2vw, 3rem); line-height:1.04; text-transform:uppercase; letter-spacing:0.01em; margin:0; max-width:22ch; text-wrap:balance }
.reframe-statement em{ font-style:italic }
.reframe-points{ list-style:none; margin:0; padding:0; border-top:1px solid var(--accent-line) }
.reframe-points li{ display:grid; grid-template-columns:34px 1fr; gap:12px; padding:15px 0; border-bottom:1px solid var(--accent-line); font-size:0.96rem; font-weight:600 }
.reframe-points li span{ font-family:var(--mono); font-size:0.72rem; color:var(--paper-soft); padding-top:2px }
.reframe-body{ margin-top:22px; font-size:1rem; max-width:52ch; color:var(--accent-ink) }

.fit-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:clamp(36px, 6vw, 60px) }
.fit-col{ padding:clamp(24px, 4vw, 36px); border:1px solid var(--paper-line); border-radius:var(--radius-lg); background:var(--paper-2) }
.fit-col h3{ font-family:var(--mono); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; margin:0 0 16px; color:var(--paper-muted) }
.fit-col.yes h3{ color:var(--accent-paper) }
.fit-col ul{ list-style:none; margin:0; padding:0 }
.fit-col li{ position:relative; padding:11px 0 11px 32px; border-top:1px solid var(--paper-line); color:var(--paper-soft) }
.fit-col li::before{ position:absolute; left:0; top:11px; font-family:var(--mono); font-weight:700 }
.fit-col.yes li::before{ content:"+"; color:var(--accent-paper) }
.fit-col.no li::before{ content:"-"; color:var(--paper-muted) }
.fit-note{ margin-top:22px; color:var(--paper-soft); max-width:70ch }

.cmp-scroll{ overflow-x:auto }
.cmp-scroll table.cmp{ min-width:640px }
.cmp-caption{ margin-top:16px; font-family:var(--mono); font-size:0.66rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--dim) }

.ba-slider{ --pos:50%; position:relative; margin:0; border:1px solid var(--line-soft); border-radius:var(--radius-lg); overflow:hidden; background:var(--bg-2) }
.ba-stage{ position:relative; aspect-ratio:1168 / 880; max-width:100% }
.ba-stage img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; display:block }
.ba-stage .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:var(--accent); pointer-events:none }
.ba-line::after{ content:""; position:absolute; top:50%; left:50%; width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:var(--radius-round); background:var(--accent); box-shadow:0 0 0 4px var(--accent-wash) }
.ba-tag{ position:absolute; top:14px; padding:5px 9px; border-radius:var(--radius-xs); font-family:var(--mono); font-size:0.62rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; pointer-events:none }
.ba-tag.before{ left:14px; background:var(--low-wash); color:var(--low); backdrop-filter:blur(4px) }
.ba-tag.after{ right:14px; background:var(--accent); color:var(--accent-ink) }
.ba-range{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize }
.ba-range:focus-visible + .ba-line{ outline:2px solid var(--ink); outline-offset:2px }
.ba-slider figcaption{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 18px; padding:12px 16px; border-top:1px solid var(--line-soft); font-family:var(--mono); font-size:0.66rem; letter-spacing:0.07em; text-transform:uppercase; color:var(--dim) }
.ba-slider figcaption b{ color:var(--accent); font-weight:600 }
.ba-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:clamp(36px, 6vw, 60px) }

.method-diagram{ margin-top:clamp(36px, 6vw, 60px); border:1px solid var(--line-soft); border-radius:var(--radius-lg); background:var(--bg-2); padding:clamp(18px, 3vw, 32px); overflow-x:auto }
.method-diagram svg{ display:block; width:100%; min-width:620px; height:auto }

.lp-nav{ padding:22px 0; border-bottom:1px solid var(--line-soft) }
.lp-nav .wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px }
.lp-nav img{ height:26px; width:auto }
.lp-nav span{ font-family:var(--mono); font-size:0.66rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted) }
.lp-footer{ padding:36px 0 60px; border-top:1px solid var(--line-soft); color:var(--dim); font-size:0.82rem }
.lp-footer a{ color:var(--ink-soft) }

.hs-form-shell{ margin-top:28px; padding:clamp(22px, 4vw, 32px); border:1px solid var(--line-soft); border-radius:var(--radius-lg); background:var(--bg-2); text-align:left }
.hs-form-shell .note{ margin-bottom:12px }
.legal-draft{ margin-top:24px; padding:14px 18px; border:1px solid var(--warn); border-radius:var(--radius); color:var(--warn); font-family:var(--mono); font-size:0.72rem; letter-spacing:0.05em; text-transform:uppercase }

/* Cookie consent banner (assets/js/consent.js). Not a modal: the page stays
   usable, and Accept and Reject carry equal visual weight, as PECR guidance expects. */
.consent{
  position:fixed; z-index:60; left:16px; right:16px;
  bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  max-width:560px; margin-left:auto;
  border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--bg-glass-2);
  backdrop-filter:blur(10px); box-shadow:var(--shadow-term);
  animation:consent-in var(--duration-slow) var(--ease-out);
}
.consent[hidden]{ display:none }
.consent-inner{ padding:20px 22px }
.consent-title{ margin:0 0 8px; font-family:var(--mono); font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent) }
.consent-text{ margin:0; font-size:0.92rem; line-height:1.55; color:var(--ink-soft) }
.consent-text a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px }
.consent-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px }
.consent-actions .btn{ flex:1 1 180px; justify-content:center }
@keyframes consent-in{ from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion: reduce){ .consent{ animation:none } }
.foot-consent{ background:none; border:0; padding:0; font:inherit; color:var(--ink-soft); cursor:pointer; text-decoration:underline; text-underline-offset:3px }
.foot-consent:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
@media (hover:hover) and (pointer:fine){ .foot-consent:hover{ color:var(--ink) } }
@media print{ .consent{ display:none } }

/* Theme-aware variants. Several design-* components were first built for one
   background only (scope list and table on dark, process and outcomes on cream).
   The deeper pages alternate sections, so each component gets its other theme here. */
.light-section .design-scope-list{ border-color:var(--paper-line) }
.light-section .design-scope-list > div{ border-color:var(--paper-line) }
.light-section .design-scope-list dt{ color:var(--paper-ink) }
.light-section .design-scope-list dd{ color:var(--paper-muted) }
.light-section .design-route-note{ border-color:var(--paper-line); color:var(--paper-soft) }
.light-section .design-proof-notes, .light-section .design-proof-notes div{ border-color:var(--paper-line) }
.light-section .design-proof-notes dt{ color:var(--paper-muted) }
.light-section .design-proof-notes dd{ color:var(--paper-soft) }
.light-section .case .body p{ color:var(--paper-soft) }
.light-section .case .body h3{ color:var(--paper-ink) }
.light-section .cmp-wrap{ border-color:var(--paper-line) }
.light-section table.cmp th, .light-section table.cmp td{ border-color:var(--paper-line) }
.light-section table.cmp thead th{ background:var(--paper-2); color:var(--paper-muted) }
.light-section table.cmp thead th.us{ color:var(--accent-paper) }
.light-section table.cmp td{ color:var(--paper-soft) }
.light-section table.cmp td:first-child{ color:var(--paper-ink) }
.light-section table.cmp td.us{ background:var(--accent-wash); color:var(--paper-ink) }
.light-section .cmp-caption{ color:var(--paper-muted) }
.light-section .prose p, .light-section .prose ul, .light-section .prose ol{ color:var(--paper-soft) }
.light-section .prose h2, .light-section .prose h3{ color:var(--paper-ink) }
.light-section .prose a{ color:var(--accent-paper) }
.light-section .ba-slider{ border-color:var(--paper-line) }

section:not(.light-section):not(.final):not(.reframe) .design-outcome-list,
section:not(.light-section):not(.final):not(.reframe) .design-outcome-list article{ border-color:var(--line-soft) }
section:not(.light-section):not(.final):not(.reframe) .design-outcome-list span{ color:var(--accent) }
section:not(.light-section):not(.final):not(.reframe) .design-outcome-list h3{ color:var(--ink) }
section:not(.light-section):not(.final):not(.reframe) .design-outcome-list p{ color:var(--muted) }
section:not(.light-section):not(.final):not(.reframe) .design-process,
section:not(.light-section):not(.final):not(.reframe) .design-process li{ border-color:var(--line-soft) }
section:not(.light-section):not(.final):not(.reframe) .design-process > li > span{ color:var(--accent) }
section:not(.light-section):not(.final):not(.reframe) .design-process h3{ color:var(--ink) }
section:not(.light-section):not(.final):not(.reframe) .design-process p{ color:var(--muted) }
section:not(.light-section):not(.final):not(.reframe) .design-process small{ color:var(--ink-soft) }
section:not(.light-section):not(.final):not(.reframe) .design-process-link{ color:var(--ink-soft) }
section:not(.light-section):not(.final):not(.reframe) .design-mini-title{ color:var(--muted) }
section:not(.light-section):not(.final):not(.reframe) .design-factor-list,
section:not(.light-section):not(.final):not(.reframe) .design-factor-list li{ border-color:var(--line-soft); color:var(--ink-soft) }
section:not(.light-section):not(.final):not(.reframe) .design-factor-list li::before{ color:var(--accent) }
section:not(.light-section):not(.final):not(.reframe) .fit-note{ color:var(--ink-soft) }
section:not(.light-section):not(.final):not(.reframe) .fit-col{ border-color:var(--line-soft) }
.fit-col .tlink{ color:var(--accent-paper) }

@media(max-width:900px){
  .reframe-grid{ grid-template-columns:1fr }
  .proof-strip .wrap{ grid-template-columns:1fr 1fr }
  .proof-strip div:nth-child(2){ border-right:0 }
  .proof-strip div:nth-child(3){ padding-left:0 }
  .proof-strip div:nth-child(-n+2){ border-bottom:1px solid var(--line-soft) }
  .ba-grid{ grid-template-columns:1fr }
}
@media(max-width:660px){
  .fit-grid{ grid-template-columns:1fr }
  .proof-strip .wrap{ grid-template-columns:1fr }
  .proof-strip div, .proof-strip div:nth-child(n){ padding:16px 0; border-right:0; border-bottom:1px solid var(--line-soft) }
  .proof-strip div:last-child{ border-bottom:0 }
}

/* Print: drop nav chrome, the floating live-score widget, and the decorative
   blueprint grid; switch to dark-on-white so report-style pages (audit,
   pricing) are readable on paper. */
@media print{
  body{ background:#fff; color:#111 }
  body::before{ display:none }
  header.nav, .mobile-menu, .hud, .nav-toggle{ display:none }
  main, footer{ position:static }
  a{ color:#111; text-decoration:underline }
  .btn{ display:none }
}