/* Fast Forward Associates -- public site.
   Redesign, 8 Sep 2026: "Chaptered" direction, ported from a Claude
   Design canvas exploration (Direction 7 of several explored). Full
   dark-theme rebuild: Space Grotesk (display/body) + IBM Plex Mono
   (labels/meta) replacing Instrument Serif + IBM Plex Sans; radius:0
   everywhere, no shadows; one accent (lime) used sparingly, always with
   dark text on it, never white. The page is restructured into six
   numbered chapters (Approach/Work/Process/Proof/References/Get in
   touch), each with a progress meter, instead of the old flat section
   stack. See the design handoff README for the full spec this was built
   against. The console (owner.html) keeps its own separate palette,
   untouched by this pass. */

:root {
  --cream: #0D1112;      /* ground: page background */
  --cream2: #141A1B;     /* raised surface: cards, inputs, bubbles */
  --white: #141A1B;      /* alias -- same surface tone as --cream2 */
  --ink: #F2F4F1;         /* primary text */
  --ink2: #C3CBC7;        /* secondary prose */
  --ink3: #9AA5A0;        /* card/body muted text */
  --ink4: #7E8A86;        /* mono meta, labels, nav, placeholders */
  --line: #232B2C;        /* hairline -- every rule, every border */
  --terra: #B9F27C;       /* accent: lime -- always paired with --ground text */
  --terra2: #F2F4F1;      /* hover state for lime surfaces (not a darker lime) */
  --ground: #0D1112;      /* the text colour required ON TOP of lime */
  --accent2: #7CD6F2;     /* teal -- headline gradient + wave field only */
  --ok: #5FD39A;
  --okbg: rgba(95, 211, 154, .10);
  --hold: #B9F27C;
  --holdbg: rgba(185, 242, 124, .10);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--terra); text-decoration: none; }
a:hover { color: var(--ink); }

.mono { font-family: 'IBM Plex Mono', monospace; }

.wrap { max-width: 1240px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }

/* header -- sticky, same mechanism as before, dark ground */
.site-header {
  position: sticky; top: 0; z-index: 30;
  background: rgba(13, 17, 18, .9); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { padding-top: 14px; padding-bottom: 14px; display: flex; align-items: center; gap: 24px; }
.site-header .brand { font-weight: 700; letter-spacing: -.02em; font-size: 16px; text-decoration: none; color: var(--ink); }
.site-header nav { display: flex; gap: 20px; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink4); }
.site-header nav a { text-decoration: none; color: var(--ink4); }
.site-header nav a:hover { color: var(--ink); }

.btn {
  cursor: pointer; font: inherit; font-weight: 500; border-radius: 0;
  border: none; background: var(--terra); color: var(--ground);
  padding: 11px 18px; font-size: 13.5px;
}
.btn:hover { background: var(--terra2); }
.btn.ghost { background: transparent; border: 1px solid var(--line); color: var(--ink2); }
.btn.ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn:disabled { opacity: .5; cursor: default; }

.mark-btn {
  cursor: pointer; background: transparent; border: 1px solid var(--line); border-radius: 0;
  width: 36px; height: 36px; display: grid; place-items: center; padding: 0; flex: none;
}
.mark-btn:hover { border-color: var(--terra); }
.mark-circle {
  width: 17px; height: 17px; border: 1px solid var(--ink4); border-radius: 50%;
  display: grid; place-items: center; font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: 11px; padding-left: 1px; color: var(--ink4);
}

/* hero -- full-bleed animated wave canvas, gradient headline that
   tracks the cursor. See the inline script at the bottom of index.html
   for the canvas draw loop; this only styles the static chrome. */
.hero {
  position: relative; min-height: min(86vh, 760px);
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden; background: var(--cream); cursor: crosshair;
}
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(13, 17, 18, .10) 0%, rgba(13, 17, 18, .34) 58%, rgba(13, 17, 18, .86) 100%);
}
.hero-content { position: relative; padding: 64px 32px 40px; max-width: 1240px; margin: 0 auto; width: 100%; pointer-events: none; }
.hero-kicker { display: flex; align-items: center; gap: 10px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink4); }
.hero-kicker .dot { width: 7px; height: 7px; background: var(--terra); flex: none; }
.hero h1 {
  margin: 26px 0 0; font-weight: 700; font-size: clamp(48px, 8vw, 124px);
  line-height: .9; letter-spacing: -.05em; max-width: 20ch;
  background-image: linear-gradient(100deg, var(--ink) 0%, var(--ink) 28%, var(--terra) 41%, var(--accent2) 52%, var(--ink) 65%, var(--ink) 100%);
  background-size: 300% 100%; -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: ffaSweep 9s linear infinite;
}
@keyframes ffaSweep { 0% { background-position: 120% 50%; } 100% { background-position: -20% 50%; } }
@media (prefers-reduced-motion: reduce) {
  .hero h1 { animation: none !important; background: none !important; color: var(--ink) !important; -webkit-text-fill-color: var(--ink) !important; }
}
.hero-foot { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 38px; margin-top: 32px; align-items: end; }
.hero .lede { margin: 0; font-size: 19px; line-height: 1.5; color: var(--ink2); max-width: 46ch; text-wrap: pretty; }
.hero-cta-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; pointer-events: auto; }
.hero-cta-row .btn { font-size: 16px; padding: 17px 28px; }

/* trusted-with-the-work logo strip */
.logo-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 22px 32px; }
.logo-strip .wrap { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.logo-strip .label { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink4); flex: none; }
.logo-strip .logos { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.logo-strip .logos img { width: 40px; height: 40px; object-fit: cover; filter: grayscale(1) brightness(1.15) opacity(.75); }
.logo-strip .logos img:hover { filter: none; }

/* chapter band -- shared header for every chapter: numeral chip + "of 06"
   + H2 + lede on the left, a progress meter on the right */
.chapter-band { border-top: 1px solid var(--line); padding: 26px 0 22px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 44px; align-items: end; }
.chapter-band .idx-row { display: flex; align-items: baseline; gap: 12px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink4); }
.chapter-band .idx-row .chip { color: var(--ground); background: var(--terra); padding: 3px 7px; }
.chapter-band h2 { margin: 16px 0 0; font-weight: 700; font-size: clamp(28px, 3.8vw, 50px); line-height: 1.02; letter-spacing: -.04em; max-width: 26ch; }
.chapter-band p { margin: 14px 0 0; font-size: 16.5px; line-height: 1.55; color: var(--ink3); max-width: 52ch; text-wrap: pretty; }
.chapter-meter .row { display: flex; align-items: baseline; justify-content: space-between; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink4); }
.chapter-meter .row .pct { color: var(--terra); }
.chapter-meter .track { height: 2px; background: var(--line); margin: 10px 0 8px; }
.chapter-meter .track .fill { height: 2px; background: var(--terra); }
.chapter-meter .caps { display: flex; align-items: baseline; justify-content: space-between; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; color: var(--ink4); }

/* card grids -- shared collapsed-hairline trick for chapters 01/03/04/05
   (approach, process, proof, references): container has no gap; each
   cell gets its own 1px border with a -1px margin so shared edges
   collapse to one hairline and an incomplete final row stays empty
   instead of filling with a solid slab. */
.chapter-grid { display: grid; gap: 0; background: var(--cream); margin-bottom: 44px; }
.chapter-cell { background: var(--cream); border: 1px solid var(--line); margin: -1px 0 0 -1px; padding: 28px 26px; display: flex; flex-direction: column; gap: 14px; }
.chapter-cell .k { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--terra); }
.chapter-cell h3 { margin: 0; font-weight: 500; font-size: 24px; line-height: 1.14; letter-spacing: -.03em; }
.chapter-cell p { margin: 0; font-size: 15px; color: var(--ink3); text-wrap: pretty; }

/* chapter 03 (Process): phase cards with mono chips */
.phase-cell { background: var(--cream); border: 1px solid var(--line); margin: -1px 0 0 -1px; padding: 26px 24px; display: flex; flex-direction: column; gap: 12px; }
.phase-cell .tag { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink4); }
.phase-cell h3 { margin: 0; font-weight: 700; font-size: 22px; letter-spacing: -.035em; }
.phase-cell p { margin: 0; font-size: 14.5px; color: var(--ink3); text-wrap: pretty; }
.phase-cell .chips { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.phase-cell .chips span { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--line); color: var(--ink2); padding: 5px 8px; }

/* chapter 04 (Proof): the three stat figures, in lime */
.stat-cell { background: var(--cream); border: 1px solid var(--line); margin: -1px 0 0 -1px; padding: 28px 26px; }
.stat-cell .idx { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .16em; color: var(--ink4); }
.stat-cell .n { font-weight: 700; font-size: clamp(38px, 4.8vw, 64px); line-height: 1; letter-spacing: -.045em; margin-top: 12px; color: var(--terra); }
.stat-cell .t { font-family: 'IBM Plex Mono', monospace; font-size: 11px; line-height: 1.7; color: var(--ink3); margin-top: 14px; }

/* chapter 02 (Work): a plain row list, not a card grid -- org/role/
   period/mode, one hairline-topped row per real engagement */
.work-rows { margin-bottom: 44px; }
.work-row {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto auto; gap: 20px; align-items: center;
  padding: 16px 0; border-top: 1px solid var(--line);
}
.work-row .org { font-weight: 500; font-size: 18px; letter-spacing: -.02em; }
.work-row .role { font-size: 14.5px; color: var(--ink3); }
.work-row .periode { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: var(--terra); }
.work-row .mode { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink4); }

/* chapter 05 (References): same collapsed-hairline grid, quote cards */
.ref-cell { margin: -1px 0 0 -1px; background: var(--cream); border: 1px solid var(--line); padding: 26px; display: flex; flex-direction: column; gap: 18px; }
.ref-cell blockquote { margin: 0; font-size: 17.5px; line-height: 1.4; text-wrap: pretty; }
.ref-cell figcaption { margin-top: auto; display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.ref-cell figcaption img { width: 38px; height: 38px; object-fit: cover; flex: none; filter: grayscale(1) contrast(1.05); }
/* fallback for a testimonial with no photo on file -- an honest initials
   square, sized to match the real photos it sits beside */
.ref-cell figcaption .avatar { width: 38px; height: 38px; flex: none; background: var(--line); color: var(--ink3); display: flex; align-items: center; justify-content: center; font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 500; }
.ref-cell figcaption .who { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; line-height: 1.55; letter-spacing: .04em; text-transform: uppercase; }
.ref-cell figcaption .who b { display: block; font-weight: 500; color: var(--ink); }
.ref-cell figcaption .who span { color: var(--ink3); }

/* chapter 06 closing: a solid lime band, dark text throughout -- already
   inside .wrap, so no max-width/padding of its own */
.conversion { margin-bottom: 64px; }
.conversion-inner {
  background: var(--terra); color: var(--ground);
  padding: clamp(34px, 5vw, 56px); display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 34px; align-items: center;
}
.conversion-inner h2 { margin: 0; font-weight: 700; font-size: clamp(28px, 3.8vw, 48px); line-height: 1; letter-spacing: -.045em; text-wrap: balance; }
.conversion-inner p { font-size: 16px; line-height: 1.5; color: #1B3312; margin: 0 0 22px; max-width: 44ch; text-wrap: pretty; }
.conversion-inner .btn { background: var(--ground); color: var(--ink); font-size: 15.5px; padding: 17px 28px; }
.conversion-inner .btn:hover { background: var(--line); }

/* footer */
.site-footer { border-top: 1px solid var(--line); }
.site-footer .wrap { padding: 30px 32px; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; font-size: 13.5px; color: var(--ink4); }
.site-footer a { font-family: 'IBM Plex Mono', monospace; font-size: 12px; text-decoration: none; color: var(--ink4); }
.site-footer a:hover { color: var(--terra); }

/* concierge panel -- slides in from the right */
.panel-backdrop {
  position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, .5);
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.panel-backdrop.open { opacity: 1; pointer-events: auto; }

.panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 60;
  width: min(560px, 96vw);
  background: #0F1415; border-left: 1px solid var(--line);
  display: flex; flex-direction: column; overflow: hidden;
  transform: translateX(100%); transition: transform .3s ease;
}
.panel.open { transform: translateX(0); }

.panel-head { background: var(--terra); color: var(--ground); padding: 20px 24px; display: flex; align-items: flex-start; gap: 16px; flex: none; }
.panel-head .title { font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.panel-head .sub { font-size: 13.5px; opacity: .82; margin-top: 2px; }
.panel-head .spacer { flex: 1; }
.panel-close { cursor: pointer; background: transparent; border: none; color: var(--ground); font-size: 22px; line-height: 1; padding: 0 2px; opacity: .85; }
.panel-close:hover { opacity: 1; }

.panel-body { flex: 1; overflow: auto; padding: 24px; position: relative; }

.field label { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink4); margin-bottom: 6px; }
.field input, .field textarea {
  width: 100%; font: inherit; border: 1px solid var(--line); border-radius: 0;
  background: var(--cream2); color: var(--ink); font-size: 15px; padding: 10px 12px;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink4); }
textarea#request { min-height: 96px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.btn.primary { background: var(--terra); color: var(--ground); }
.btn.primary:hover { background: var(--terra2); }

.id-line { display: flex; align-items: center; gap: 10px; font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: var(--ink2); margin: 4px 0 18px; }
.id-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.id-dot.i0 { background: var(--ink4); }
.id-dot.i1, .id-dot.i2, .id-dot.i3 { background: var(--ok); }

.error { color: #FF9B7C; font-size: 14px; margin-top: 14px; }
.hint { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: var(--ink4); margin: 8px 0 0; }

/* concierge demo transcript -- message bubbles, a pending/done "step"
   row, a document card, and a sticky bottom composer that swaps
   content per turn. Same mechanism as the other two sites, dark tokens. */
.demo-thread { display: flex; flex-direction: column; gap: 14px; padding-bottom: 4px; }

.demo-msg { display: flex; }
.demo-msg.user { justify-content: flex-end; }
.demo-msg.assistant { justify-content: flex-start; }
.demo-bubble { max-width: 86%; padding: 10px 14px; border-radius: 0; font-size: 14.5px; line-height: 1.5; text-wrap: pretty; white-space: pre-wrap; }
.demo-msg.user .demo-bubble { background: var(--terra); color: var(--ground); }
.demo-msg.assistant .demo-bubble { background: var(--cream2); border: 1px solid var(--line); color: var(--ink); }

.demo-typing { display: flex; gap: 4px; align-items: center; padding: 13px 14px; background: var(--cream2); border: 1px solid var(--line); }
.demo-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--ink4); animation: demoTyping 1s infinite ease-in-out; }
.demo-typing span:nth-child(2) { animation-delay: .15s; }
.demo-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes demoTyping { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }

.demo-step { display: flex; align-items: center; gap: 9px; font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: var(--ink4); padding: 2px 4px; }
.demo-step .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--terra); flex: none; }
.demo-step.pending .dot { animation: demoPulse 1.1s ease-in-out infinite; }
.demo-step.done .dot { background: var(--ok); animation: none; }
@keyframes demoPulse { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

.demo-doc-card { display: flex; align-items: center; gap: 12px; max-width: 86%; background: var(--cream2); border: 1px solid var(--line); border-radius: 0; padding: 11px 14px; text-decoration: none; color: var(--ink); transition: border-color .15s ease; }
.demo-doc-card:hover { border-color: var(--terra); }
.demo-doc-card .icon { width: 32px; height: 32px; background: var(--terra); color: var(--ground); display: flex; align-items: center; justify-content: center; flex: none; }
.demo-doc-card .meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.demo-doc-card .name { font-size: 13.5px; font-weight: 600; }
.demo-doc-card .type { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; color: var(--ink4); }

.demo-composer { display: flex; flex-direction: column; gap: 10px; position: sticky; bottom: 0; background: #0F1415; padding-top: 14px; margin-top: 6px; }
.demo-composer:empty { padding-top: 0; margin-top: 0; }
.demo-composer-row { display: flex; gap: 8px; align-items: flex-end; }
.demo-composer-row textarea, .demo-composer-row input { flex: 1; }
.demo-composer-row .btn { flex: none; min-width: 100px; }
.demo-composer-row .demo-choice { flex: 1; }

.demo-composer textarea, .demo-composer input { font: inherit; border: 1px solid var(--line); border-radius: 0; background: var(--cream2); color: var(--ink); font-size: 14.5px; padding: 11px 16px; resize: none; min-height: 44px; max-height: 120px; }
.demo-composer textarea::placeholder, .demo-composer input::placeholder { color: var(--ink4); }

.demo-composer-options { display: flex; flex-wrap: wrap; gap: 8px; }
.demo-option { flex: 0 0 auto; font: inherit; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 10px 15px; border: 1px solid var(--line); border-radius: 0; background: var(--cream2); color: var(--ink); cursor: pointer; transition: border-color .15s ease, color .15s ease; }
.demo-option:hover { border-color: var(--terra); color: var(--terra); }

/* progress indicator + skip link for the qualifying questions */
.demo-progress { display: flex; flex-direction: column; gap: 6px; margin-bottom: 2px; }
.demo-progress .label { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink4); }
.demo-progress .bar { height: 2px; background: var(--line); }
.demo-progress .bar .fill { height: 100%; background: var(--terra); transition: width .2s ease; }

.demo-skip { align-self: center; cursor: pointer; font: inherit; font-size: 12.5px; color: var(--ink4); background: transparent; border: none; padding: 2px 4px; text-decoration: underline; text-underline-offset: 3px; }
.demo-skip:hover { color: var(--ink); }

/* the doc card opens this in-panel preview instead of doing nothing */
.demo-doc-preview { position: absolute; inset: 0; z-index: 5; background: #0F1415; display: flex; flex-direction: column; }
.demo-doc-preview-head { background: var(--terra); color: var(--ground); padding: 20px 24px; flex: none; display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 700; }
.demo-doc-preview-body { flex: 1; overflow: auto; padding: 28px 24px; }
.demo-doc-preview-body h3 { margin: 0 0 4px; font-weight: 700; font-size: 24px; letter-spacing: -.02em; }
.demo-doc-preview-body .role { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink4); margin-bottom: 24px; }
.demo-doc-preview-body .line { border-top: 1px solid var(--line); padding: 14px 0; }
.demo-doc-preview-body .line .k { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink4); margin-bottom: 4px; }
.demo-doc-preview-body .line .v { font-size: 14.5px; color: var(--ink2); text-wrap: pretty; }

/* result view inside the panel */
.result-topbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: var(--ink4); padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.result-topbar .spacer { flex: 1; }

.rblock { margin-bottom: 28px; }
.rblock-head { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink4); padding-bottom: 8px; border-bottom: 1px solid var(--ink); margin-bottom: 14px; display: flex; align-items: baseline; gap: 10px; }
.rblock-head .spacer { flex: 1; }
.rblock-head .tag { letter-spacing: 0; text-transform: none; }

.intro { font-weight: 700; font-size: 24px; line-height: 1.25; letter-spacing: -.02em; margin: 0 0 16px; text-wrap: pretty; }
.bio { font-size: 15.5px; color: var(--ink2); margin: 0 0 8px; text-wrap: pretty; }

.cluster-list { display: grid; gap: 10px; }
.cluster-item { background: var(--cream2); border: 1px solid var(--line); padding: 14px 16px; }
.cluster-item .label { font-size: 15px; font-weight: 600; margin-bottom: 3px; }
.cluster-item .pitch { font-size: 14px; color: var(--ink2); text-wrap: pretty; }

.rcase-list { display: grid; gap: 16px; }
.rcase { background: var(--cream2); border: 1px solid var(--line); padding: 17px 18px; }
.rcase .head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.rcase .client { font-weight: 700; font-size: 19px; letter-spacing: -.01em; }
.rcase .meta { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; color: var(--ink4); }
.rcase p { margin: 0 0 9px; font-size: 14.5px; text-wrap: pretty; }
.rcase .approche { font-size: 14px; color: var(--ink2); }
.rcase .resultat { border-top: 1px solid var(--line); padding-top: 10px; font-size: 14.5px; font-weight: 500; text-wrap: pretty; margin: 0; }

.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border: 1px solid var(--line); border-top: none; }
.metric-tile { background: var(--cream2); padding: 15px 16px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.metric-tile .n { font-weight: 700; font-size: 26px; line-height: 1; letter-spacing: -.02em; }
.metric-tile .t { font-size: 13px; color: var(--ink2); margin-top: 6px; text-wrap: pretty; }

.rtesti-list { display: grid; gap: 18px; }
.rtesti blockquote { margin: 0; font-size: 17px; line-height: 1.35; letter-spacing: -.01em; font-weight: 500; text-wrap: pretty; }
.rtesti figcaption { display: flex; align-items: center; gap: 9px; margin-top: 7px; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; color: var(--ink4); }

.eng-panel { border: 1px solid var(--line); border-top: none; background: var(--cream2); padding: 18px; display: grid; gap: 14px; margin-bottom: 26px; }
.eng-row { border-top: 1px solid var(--line); padding-top: 13px; }
.eng-row:first-child { border-top: none; padding-top: 0; }
.eng-row .k { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink4); margin-bottom: 5px; }
.eng-row .v { font-weight: 700; font-size: 21px; letter-spacing: -.01em; }
.eng-row .note { font-size: 13.5px; color: var(--ink2); margin-top: 5px; }

.eng-locked { border: 1px solid var(--line); border-top: none; background: var(--cream2); padding: 20px 18px; margin-bottom: 26px; position: relative; overflow: hidden; }
.eng-locked .hatch { position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, transparent 0 7px, var(--holdbg) 7px 8px); pointer-events: none; }
.eng-locked .content { position: relative; }
.eng-locked .title { font-weight: 700; font-size: 18px; line-height: 1.3; margin-bottom: 7px; }
.eng-locked .body { font-size: 14px; color: var(--ink2); margin-bottom: 14px; text-wrap: pretty; }
.eng-locked .form { display: grid; gap: 8px; }
.eng-locked input { border: 1px solid var(--line); border-radius: 0; padding: 10px 12px; background: var(--cream); color: var(--ink); font-size: 14.5px; font: inherit; }
.eng-locked button { cursor: pointer; background: var(--terra); border: none; color: var(--ground); border-radius: 0; padding: 11px; font-size: 14.5px; font-weight: 500; }
.eng-locked button:hover { background: var(--terra2); }

.why-box { border: 1px solid var(--ink); background: var(--cream2); overflow: hidden; }
.why-toggle { cursor: pointer; width: 100%; text-align: left; background: transparent; border: none; padding: 14px 16px; display: flex; align-items: center; gap: 12px; font: inherit; color: var(--ink); }
.why-toggle .label { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--ink); }
.why-toggle .spacer { flex: 1; }
.why-toggle .state { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--ink4); }
.why-body { border-top: 1px solid var(--ink); }
.why-idline { padding: 11px 16px; border-bottom: 1px solid var(--line); display: flex; gap: 10px; align-items: center; font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; }
.why-row { padding: 10px 16px; border-bottom: 1px solid var(--line); }
.why-row .top { display: flex; gap: 9px; align-items: baseline; }
.why-row .label { font-size: 13.5px; font-weight: 500; flex: 1; }
.why-verdict { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; border-radius: 0; padding: 2px 6px; flex: none; }
.why-verdict.ok { color: var(--ok); background: var(--okbg); }
.why-verdict.no { color: var(--hold); background: var(--holdbg); }
.why-explain { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; color: var(--ink4); margin-top: 3px; line-height: 1.5; }
.why-foot { padding: 11px 16px; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; color: var(--ink4); line-height: 1.6; }

.source-tag { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; color: var(--ink4); margin-top: 24px; }

@media (max-width: 760px) {
  .site-header nav { display: none; }
  .field-row { grid-template-columns: 1fr; }
  .chapter-band { grid-template-columns: 1fr; gap: 20px; }
  .work-row { grid-template-columns: 1fr; gap: 4px; align-items: start; }
}