/* The Dossier — Home page.
   Static implementation of "The Dossier — Home.dc.html".
   Design system: Rowan Tonkin / positioning engine. One accent, used only
   where the method speaks. No runtime, no shadows, no gradients, square corners. */

/* ---- tokens ------------------------------------------------------------ */
:root {
  /* base */
  --paper:    #FCFBF9;   /* page background, always */
  --ink:      #131210;   /* headings, section rules, inverted panels */
  --body:     #3A362F;   /* running text */
  --muted:    #6C685F;   /* captions, mono annotations */
  --faint:    #A8A399;   /* sources, colophon */
  --hairline: #DDD9D0;   /* grid lines, never text */
  --link:     #4A473F;   /* nav links */

  /* the one accent — never decoration */
  --vermilion:#DE3A16;   /* the call, kills, verifier raise, live marks, primary action */

  /* dark panel (one per page, reserved for the work itself) */
  --panel:        #131210;
  --panel-deep:   #0E0D0B;  /* matrix background */
  --panel-row:    #1A1815;  /* winning row */
  --panel-hairline:#211F1A;
  --panel-rule:   #3A362F;
  --panel-text:   #FCFBF9;
  --panel-body:   #B8B4AB;
  --panel-muted:  #8C8578;
  --panel-killed: #6C6A62;

  /* type — three voices, no others */
  --font-display: 'Archivo', sans-serif;         /* the argument */
  --font-voice:   'Instrument Serif', serif;      /* the contrarian voice, italic only */
  --font-mono:    'JetBrains Mono', monospace;    /* the instrument */

  /* layout */
  --page-max: 1440px;
  --pad-x: 64px;
}

/* ---- reset ------------------------------------------------------------- */
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); }
body {
  color: var(--ink);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, p { margin: 0; }
a { color: inherit; }

/* the bound document */
.page {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  border-left: 1px solid var(--ink);
  border-right: 1px solid var(--ink);
}

/* section scaffolding */
.rule-bottom { border-bottom: 2px solid var(--ink); }
.anchor { scroll-margin-top: 76px; }

/* the numbered margin column that opens a section */
.colnum {
  border-right: 1px solid var(--hairline);
  padding: 60px 0 0 28px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--vermilion);
}

/* the contrarian voice — serif italic, never a heading */
.voice { font-family: var(--font-voice); font-style: italic; }

/* ---- nav --------------------------------------------------------------- */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px var(--pad-x);
  border-bottom: 2px solid var(--ink);
  position: sticky;
  top: 0;
  background: var(--paper);
  z-index: 10;
}
.nav-brand { display: flex; align-items: baseline; gap: 12px; }
.wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.4px;
}
.nav-brand .role {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--vermilion);
  letter-spacing: 1px;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--link);
}
.nav-links a { text-decoration: none; }
.nav-links a:not(.btn):hover { text-decoration: underline; }

/* ---- buttons ----------------------------------------------------------- */
.btn { text-decoration: none; display: inline-block; }
.btn-ink {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  padding: 10px 16px;
}
.btn-accent {
  background: var(--vermilion);
  color: var(--paper);
  font-weight: 700;
  font-size: 16px;
  padding: 14px 26px;
}
.btn-outline {
  border: 2px solid var(--ink);
  color: var(--ink);
  font-weight: 600;
  font-size: 16px;
  padding: 12px 24px;
}
.btn-outline-light {
  border: 2px solid var(--paper);
  color: var(--paper);
  font-weight: 600;
  font-size: 15px;
  padding: 12px 24px;
}
.btn-ink:hover, .btn-accent:hover { filter: brightness(0.92); }
.btn-outline:hover { background: var(--ink); color: var(--paper); }
.btn-outline-light:hover { background: var(--paper); color: var(--ink); }

/* ---- hero -------------------------------------------------------------- */
.hero-meta {
  padding: 16px var(--pad-x);
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 1.5px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.hero-meta .live { color: var(--vermilion); }
.hero-body { padding: 80px var(--pad-x) 64px; }
.hero-body h1 {
  font-weight: 900;
  font-size: 88px;
  line-height: 0.95;
  letter-spacing: -2.4px;
  margin: 0 0 30px;
  max-width: 15ch;
}
.hero-body h1 .accent { color: var(--vermilion); }
.hero-lede {
  max-width: 60ch;
  font-size: 21px;
  line-height: 1.5;
  color: var(--body);
  margin: 0 0 40px;
  font-weight: 400;
}
.cta-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* ---- receipts strip ---------------------------------------------------- */
.receipts {
  display: flex;
  align-items: center;
  border-bottom: 2px solid var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
}
.receipts .label {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 1px;
  padding: 22px 28px;
  border-right: 1px solid var(--hairline);
}
.receipts .brand {
  flex: 1;
  text-align: center;
  font-size: 19px;
  padding: 22px 0;
  border-right: 1px solid var(--hairline);
}
.receipts .brand:last-child { border-right: 0; }

/* ---- shared section text ---------------------------------------------- */
.section-body { padding: 60px 56px; }
.section-body.mid { border-right: 1px solid var(--hairline); }
.h2 {
  font-weight: 800;
  font-size: 50px;
  line-height: 1.0;
  letter-spacing: -1.2px;
}
.h2 .voice-accent {
  font-family: var(--font-voice);
  font-weight: 400;
  font-style: italic;
  color: var(--vermilion);
  letter-spacing: 0;
}
.prose {
  max-width: 60ch;
  font-size: 18px;
  line-height: 1.6;
  color: var(--body);
  font-weight: 400;
}

/* ---- problem (01) ------------------------------------------------------ */
.grid-3 { display: grid; grid-template-columns: 96px 1fr 280px; }
.grid-2 { display: grid; grid-template-columns: 96px 1fr; }
.problem .h2 { margin: 0 0 26px; max-width: 18ch; }
.problem .prose { margin: 0 0 18px; }
.problem .pull {
  max-width: 56ch;
  font-size: 22px;
  line-height: 1.4;
  color: var(--ink);
  margin: 0;
}
.stat-col {
  padding: 60px 28px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  line-height: 1.7;
}
.stat {
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 14px;
  margin-bottom: 14px;
}
.stat:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.stat .num { color: var(--vermilion); font-size: 20px; }
.stat .src { color: var(--faint); }

/* ---- method (02) ------------------------------------------------------- */
.method .h2 { margin: 0 0 32px; }
.method .prose { max-width: 66ch; margin: 0; }
.steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: 2px solid var(--ink);
  margin-bottom: 32px;
}
.step {
  padding: 20px 18px;
  border-right: 1px solid var(--ink);
}
.step:last-child { border-right: 0; }
.step .n { font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.step .name { font-weight: 700; font-size: 15px; }
.step.kill { background: var(--ink); color: var(--paper); }
.step.kill .n { color: var(--vermilion); }

/* ---- show the work (03) — the one dark panel -------------------------- */
.work {
  border-bottom: 2px solid var(--ink);
  background: var(--panel);
  color: var(--panel-text);
}
.work-inner { padding: 64px var(--pad-x) 48px; }
.work .eyebrow { font-family: var(--font-mono); font-size: 12px; color: var(--vermilion); margin-bottom: 18px; }
.work h2 {
  font-weight: 800;
  font-size: 58px;
  line-height: 0.98;
  letter-spacing: -1.6px;
  margin: 0 0 14px;
  max-width: 20ch;
}
.work .pull {
  max-width: 60ch;
  font-size: 20px;
  line-height: 1.5;
  color: var(--panel-body);
  margin: 0 0 38px;
}

/* the signature artifact — the scored matrix */
.matrix-wrap { overflow-x: auto; margin-bottom: 24px; }
.matrix {
  font-family: var(--font-mono);
  font-size: 12px;
  border: 1px solid var(--panel-rule);
  background: var(--panel-deep);
  min-width: 720px;
}
.matrix .row, .matrix .head {
  display: grid;
  grid-template-columns: 1.6fr repeat(6, 1fr) 0.9fr;
  gap: 8px;
}
.matrix .row {
  padding: 14px 18px;
  align-items: center;
  border-bottom: 1px solid var(--panel-hairline);
}
.matrix .row:last-child { border-bottom: 0; }
.matrix .row span:not(:first-child),
.matrix .head span:not(:first-child) { text-align: center; }
.matrix .row span:last-child,
.matrix .head span:last-child { text-align: right; }
.matrix .head {
  color: var(--panel-muted);
  padding: 13px 18px;
  border-bottom: 1px solid var(--panel-rule);
  font-size: 10.5px;
  letter-spacing: 0.5px;
}
/* 9-column variant (adds a RISK column) */
.matrix.cols9 { min-width: 820px; }
.matrix.cols9 .row, .matrix.cols9 .head { grid-template-columns: 1.6fr repeat(6, 1fr) 0.9fr 0.9fr; }
.matrix.cols9 .row span:nth-last-child(2),
.matrix.cols9 .head span:nth-last-child(2) { text-align: right; }
.matrix .win { color: var(--panel-text); background: var(--panel-row); }
.matrix .win .route { color: var(--vermilion); }
.matrix .win .score { color: var(--vermilion); font-weight: 700; }
.matrix .mid-row { color: var(--panel-body); }
.matrix .mid-row .score { color: var(--panel-text); }
.matrix .killed {
  color: var(--panel-killed);
  text-decoration: line-through;
  text-decoration-color: var(--vermilion);
}
.raise, .hi { color: var(--vermilion); }

.legend {
  display: flex;
  gap: 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--panel-muted);
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.legend .raise, .legend .strike { color: var(--vermilion); }

.kill-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 34px;
}
.kill-card { border: 1px solid var(--panel-rule); padding: 22px 24px; }
.kill-card .title {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--panel-muted);
  text-decoration: line-through;
  text-decoration-color: var(--vermilion);
  margin-bottom: 10px;
}
.kill-card .reason { font-size: 15px; color: var(--panel-body); line-height: 1.5; font-weight: 400; }

/* ---- credibility (04) -------------------------------------------------- */
.credibility .h2 { margin: 0 0 40px; max-width: 18ch; }
.timeline { border-top: 1px solid var(--ink); }
.entry {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 28px;
  padding: 28px 0;
  border-bottom: 1px solid var(--hairline);
}
.entry:last-of-type { border-bottom: 1px solid var(--ink); }
.entry .date { font-family: var(--font-mono); font-size: 12px; color: var(--vermilion); }
.entry .role {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  margin-bottom: 12px;
  letter-spacing: -0.5px;
}
.entry p { font-size: 17px; line-height: 1.55; color: var(--body); font-weight: 400; max-width: 72ch; }
.entry .honest {
  font-size: 18px;
  line-height: 1.45;
  color: var(--ink);
  max-width: 72ch;
  margin-top: 10px;
}
.press {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 26px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  flex-wrap: wrap;
}
.press .sep { color: var(--vermilion); }
.closing {
  font-family: var(--font-voice);
  font-size: 34px;
  color: var(--ink);
  margin: 32px 0 0;
  max-width: 32ch;
  line-height: 1.18;
}

/* ---- offer (05) -------------------------------------------------------- */
.offer { padding: 68px var(--pad-x); border-bottom: 2px solid var(--ink); }
.offer .eyebrow { font-family: var(--font-mono); font-size: 12px; color: var(--vermilion); margin-bottom: 22px; }
.offer-card { border: 2px solid var(--ink); }
.offer-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 34px 44px;
  border-bottom: 1px solid var(--hairline);
  background: var(--ink);
  color: var(--paper);
  flex-wrap: wrap;
  gap: 16px;
}
.offer-head h2 { font-weight: 900; font-size: 58px; margin: 0; letter-spacing: -1.8px; }
.offer-price { text-align: right; }
.offer-price .amount { font-weight: 800; font-size: 48px; color: var(--vermilion); line-height: 1; }
.offer-price .terms { font-family: var(--font-mono); font-size: 12px; color: var(--panel-muted); margin-top: 4px; }
.offer-body { padding: 40px 44px; }
.offer-body .prose { max-width: 68ch; margin: 0 0 18px; }
.offer-body .prose.gap { margin-bottom: 30px; }
.offer-note { font-family: var(--font-mono); font-size: 13px; color: var(--muted); margin: 0 0 28px; }
.offer-cta { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; }
.offer-cta .aside { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.guarantee {
  border-top: 1px solid var(--hairline);
  padding-top: 24px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
  max-width: 76ch;
}

/* ---- footer ------------------------------------------------------------ */
.footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 44px var(--pad-x);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  flex-wrap: wrap;
  gap: 24px;
}
.footer .fword {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  color: var(--ink);
  margin-bottom: 8px;
  letter-spacing: -0.4px;
}
.footer .right { text-align: right; line-height: 1.9; }
.footer .right .top { color: var(--ink); }
.footer .right .colophon { color: var(--faint); max-width: 44ch; }

/* ---- responsive -------------------------------------------------------- */
@media (max-width: 1040px) {
  :root { --pad-x: 40px; }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .colnum { border-right: 0; border-bottom: 1px solid var(--hairline); padding: 24px 0 0 40px; }
  .section-body.mid { border-right: 0; }
  .stat-col { border-top: 1px solid var(--hairline); }
  .hero-body h1 { font-size: 60px; letter-spacing: -1.6px; }
  .work h2 { font-size: 42px; letter-spacing: -1.2px; }
  .h2 { font-size: 38px; letter-spacing: -0.8px; }
  .offer-head h2 { font-size: 42px; }
}
@media (max-width: 680px) {
  :root { --pad-x: 22px; }
  .nav { flex-wrap: wrap; gap: 16px; }
  .nav-links { gap: 18px; flex-wrap: wrap; }
  .hero-body { padding: 48px var(--pad-x) 40px; }
  .hero-body h1 { font-size: 44px; letter-spacing: -1px; }
  .section-body { padding: 40px 22px; }
  .steps { grid-template-columns: 1fr 1fr; }
  .kill-grid { grid-template-columns: 1fr; }
  .entry { grid-template-columns: 1fr; gap: 10px; }
}

/* ======================================================================== */
/* SUB-PAGE PRIMITIVES                                                       */
/* ======================================================================== */
:root { --wash: #F4F2ED; }

.page-hero { padding: 72px var(--pad-x) 56px; }
.page-hero.split { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; }
.page-hero h1 { font-weight: 900; line-height: 0.95; margin: 0 0 24px; }
.lede { max-width: 60ch; font-size: 20px; line-height: 1.5; color: var(--body); margin: 0; font-weight: 400; }

/* heading size + tracking utilities */
.t44 { font-size: 44px; letter-spacing: -1px; }
.t46 { font-size: 46px; letter-spacing: -1.2px; }
.t50 { font-size: 50px; letter-spacing: -1.2px; }
.t52 { font-size: 52px; letter-spacing: -1.4px; line-height: 1.0; }
.t58 { font-size: 58px; letter-spacing: -1.6px; line-height: 0.98; }
.t72 { font-size: 72px; letter-spacing: -2px; }
.t74 { font-size: 74px; letter-spacing: -2.2px; }
.t76 { font-size: 76px; letter-spacing: -2.2px; }
.t80 { font-size: 80px; letter-spacing: -2.4px; }
.t84 { font-size: 84px; letter-spacing: -2.4px; }

.frame { border: 2px solid var(--ink); }
.card-hair { border: 1px solid var(--hairline); }
.col-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.col-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.col-5 { display: grid; grid-template-columns: repeat(5, 1fr); }
.mono-note { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-top: 18px; line-height: 1.6; }
.btn-accent.lg { font-size: 17px; padding: 16px 30px; }

/* generic pull quotes (serif italic) */
.pull-lg { font-family: var(--font-voice); font-style: italic; font-size: 22px; line-height: 1.4; color: var(--ink); margin: 0; max-width: 56ch; }
.pull-md { font-family: var(--font-voice); font-style: italic; font-size: 20px; line-height: 1.45; color: var(--ink); margin: 0; max-width: 56ch; }

/* generic dark panel (one per page, reserved for the work) */
.panel { border-bottom: 2px solid var(--ink); background: var(--panel); color: var(--panel-text); }
.panel-inner { padding: 60px var(--pad-x); }
.panel .eyebrow { font-family: var(--font-mono); font-size: 12px; color: var(--vermilion); margin-bottom: 18px; }
.panel h2 { font-family: var(--font-display); font-weight: 800; margin: 0; }
.panel .lede { color: var(--panel-body); }
.panel .pull-lg, .panel .pull-md { color: var(--panel-text); }

/* ---- Method ---- */
.p-method .stage { display: grid; grid-template-columns: 200px 1fr; border-bottom: 1px solid var(--hairline); }
.p-method .frame > .stage:last-child { border-bottom: 0; }
.p-method .stage .key { padding: 26px 24px; border-right: 1px solid var(--hairline); }
.p-method .stage .key .n { font-family: var(--font-mono); font-size: 12px; color: var(--vermilion); margin-bottom: 8px; }
.p-method .stage .key .name { font-weight: 700; font-size: 19px; }
.p-method .stage .desc { padding: 26px 32px; font-size: 16px; line-height: 1.6; color: var(--body); font-weight: 400; }
.p-method .stage.dark { background: var(--ink); color: var(--panel-text); }
.p-method .stage.dark .key { border-right: 1px solid var(--panel-rule); }
.p-method .stage.dark .desc { color: var(--panel-body); }
.p-method .layer { padding: 26px 28px; }
.p-method .layer .lab { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; color: var(--muted); margin-bottom: 14px; }
.p-method .layer p { font-size: 16px; line-height: 1.6; color: var(--body); margin: 0; font-weight: 400; }
.p-method .layer.accent { border: 2px solid var(--vermilion); }
.p-method .layer.accent .lab { color: var(--vermilion); }
.p-method .alt { padding: 26px; border-right: 1px solid var(--hairline); }
.p-method .col-3 > .alt:last-child { border-right: 0; }
.p-method .alt .lab { font-family: var(--font-mono); font-size: 11px; color: var(--vermilion); margin-bottom: 12px; }
.p-method .alt .title { font-weight: 700; font-size: 22px; margin-bottom: 10px; }
.p-method .alt p { font-size: 15px; line-height: 1.55; color: var(--body); margin: 0; font-weight: 400; }

/* ---- Work ---- */
.p-work .legend.tight { margin-bottom: 0; }
.p-work .bet { padding: 24px 26px; }
.p-work .bet .title { font-family: var(--font-mono); font-size: 14px; color: var(--muted); text-decoration: line-through; text-decoration-color: var(--vermilion); margin-bottom: 10px; }
.p-work .bet p { font-size: 15px; color: var(--body); line-height: 1.55; margin: 0; font-weight: 400; }
.p-work .pp-head, .p-work .pp-row { display: grid; grid-template-columns: 1.3fr 1.3fr 0.6fr 1.4fr; gap: 12px; }
.p-work .pp-head { color: var(--muted); padding: 13px 20px; border-bottom: 1px solid var(--ink); font-size: 10.5px; letter-spacing: 0.5px; font-family: var(--font-mono); }
.p-work .pp-row { padding: 15px 20px; border-bottom: 1px solid var(--hairline); color: var(--ink); align-items: start; font-family: var(--font-mono); font-size: 12px; }
.p-work .frame > .pp-row:last-child { border-bottom: 0; }
.p-work .pp-row .kill { color: var(--vermilion); }
.p-work .wp { display: grid; grid-template-columns: 1fr 300px; }
.p-work .wp .body { padding: 30px 34px; border-right: 1px solid var(--hairline); }
.p-work .wp .body .lab { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; color: var(--muted); margin-bottom: 16px; }
.p-work .wp .body p { font-size: 16px; line-height: 1.65; color: var(--body); margin: 0 0 14px; font-weight: 400; }
.p-work .wp .body p:last-child { margin-bottom: 0; }
.p-work .wp .body b { color: var(--ink); font-weight: 700; }
.p-work .wp .meta { padding: 30px 26px; font-family: var(--font-mono); font-size: 11px; color: var(--muted); line-height: 1.9; }
.p-work .wp .meta .faint { color: var(--faint); margin-top: 14px; }
.p-work .deliver { display: flex; align-items: center; justify-content: space-between; padding: 34px 40px; gap: 32px; flex-wrap: wrap; }
.p-work .deliver .title { font-weight: 800; font-size: 28px; letter-spacing: -0.6px; margin-bottom: 10px; }
.p-work .deliver p { font-size: 16px; line-height: 1.6; color: var(--body); margin: 0; font-weight: 400; max-width: 64ch; }

/* ---- Offer ---- */
.p-offer .price .amount { font-family: var(--font-display); font-weight: 800; font-size: 64px; color: var(--vermilion); line-height: 1; letter-spacing: -1.5px; }
.p-offer .price .sub { font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin-top: 8px; }
.p-offer .qrow { display: grid; grid-template-columns: 60px 1fr; border-bottom: 1px solid var(--hairline); }
.p-offer .frame > .qrow:last-child { border-bottom: 0; }
.p-offer .qrow .n { padding: 20px 0 0 22px; font-family: var(--font-mono); font-size: 12px; color: var(--vermilion); }
.p-offer .qrow .t { padding: 20px 26px; font-size: 16px; line-height: 1.55; color: var(--body); font-weight: 400; }
.p-offer .qrow .t b { font-weight: 700; color: var(--ink); }
.p-offer .bundle { border: 1px solid var(--panel-rule); padding: 26px; }
.p-offer .bundle .lab { font-family: var(--font-mono); font-size: 11px; color: var(--vermilion); margin-bottom: 14px; }
.p-offer .bundle .list { font-size: 15px; line-height: 1.9; color: var(--panel-body); font-weight: 400; }
.p-offer .g { padding: 26px 28px; }
.p-offer .g .lab { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; margin-bottom: 12px; }
.p-offer .g p { font-size: 16px; line-height: 1.6; color: var(--body); margin: 0; font-weight: 400; }
.p-offer .g.solid { border: 2px solid var(--ink); }
.p-offer .g.solid .lab { color: var(--ink); }
.p-offer .g.hair { border: 1px solid var(--hairline); }
.p-offer .g.hair .lab { color: var(--vermilion); }
.p-offer .lrow { display: grid; grid-template-columns: 1.2fr 2fr 0.8fr; border-bottom: 1px solid var(--hairline); align-items: center; }
.p-offer .frame > .lrow:last-child { border-bottom: 0; }
.p-offer .lrow .name { padding: 22px 26px; font-weight: 700; font-size: 18px; }
.p-offer .lrow .desc { padding: 22px 26px; font-size: 15px; color: var(--body); font-weight: 400; border-left: 1px solid var(--hairline); }
.p-offer .lrow .price2 { padding: 22px 26px; font-family: var(--font-mono); font-size: 14px; text-align: right; border-left: 1px solid var(--hairline); }
.p-offer .lrow.hl { background: var(--wash); }
.p-offer .lrow.hl .name, .p-offer .lrow.hl .price2 { color: var(--vermilion); }
.p-offer .notfor { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; padding: 34px 40px; }
.p-offer .notfor .lab { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; color: var(--vermilion); margin-bottom: 12px; }
.p-offer .notfor p { font-size: 16px; line-height: 1.6; color: var(--body); margin: 0; font-weight: 400; max-width: 62ch; }

/* ---- About ---- */
.p-about .about-head { display: grid; grid-template-columns: 1fr 420px; }
.p-about .about-head .intro { padding: 72px 56px 56px 64px; }
.p-about .about-head .intro h1 { font-weight: 900; line-height: 0.95; margin: 0 0 26px; max-width: 14ch; }
.p-about .about-head .intro .lede { margin: 0 0 20px; max-width: 54ch; }
.p-about .portrait-cell { border-left: 1px solid var(--hairline); padding: 40px; display: flex; flex-direction: column; gap: 12px; }
.p-about .portrait { width: 100%; height: 380px; border: 1px solid var(--hairline); background: var(--wash); display: flex; align-items: center; justify-content: center; text-align: center; font-family: var(--font-mono); font-size: 11px; color: var(--faint); padding: 20px; }
.p-about .portrait-cell .cap { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.p-about .entry .role { font-size: 28px; letter-spacing: -0.6px; }
.p-about .honest { font-size: 19px; max-width: 66ch; }
.p-about .col-5 { border: 1px solid var(--panel-rule); }
.p-about .principle { padding: 22px 20px; border-right: 1px solid var(--panel-rule); }
.p-about .col-5 > .principle:last-child { border-right: 0; }
.p-about .principle .n { font-family: var(--font-mono); font-size: 11px; color: var(--vermilion); margin-bottom: 10px; }
.p-about .principle .title { font-weight: 700; font-size: 15px; margin-bottom: 8px; }
.p-about .principle .d { font-size: 13px; color: var(--panel-muted); line-height: 1.5; font-weight: 400; }
.p-about .closer { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; padding: 60px var(--pad-x); border-bottom: 2px solid var(--ink); }
.p-about .closer p { font-family: var(--font-voice); font-size: 32px; color: var(--ink); margin: 0; max-width: 34ch; line-height: 1.2; }

/* ---- FAQ ---- */
.p-faq .faqwrap { border-bottom: 2px solid var(--ink); }
.p-faq .faq { display: grid; grid-template-columns: 96px 1fr; border-bottom: 1px solid var(--hairline); }
.p-faq .faqwrap > .faq:last-child { border-bottom: 0; }
.p-faq .faq .colnum { padding: 44px 0 0 28px; }
.p-faq .faq .q { padding: 44px 56px; }
.p-faq .faq .q .ask { font-weight: 800; font-size: 28px; letter-spacing: -0.6px; margin-bottom: 14px; }
.p-faq .faq .q p { max-width: 70ch; font-size: 17px; line-height: 1.65; color: var(--body); margin: 0; font-weight: 400; }
.p-faq .faq .q p.status { font-family: var(--font-mono); font-size: 13px; color: var(--muted); line-height: 1.6; margin-top: 12px; }
.p-faq .cta { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; padding: 52px var(--pad-x); border-bottom: 2px solid var(--ink); }
.p-faq .cta p { font-family: var(--font-voice); font-size: 26px; color: var(--ink); margin: 0; max-width: 40ch; line-height: 1.25; }

/* ---- Intake ---- */
.p-intake .trow { display: grid; grid-template-columns: 140px 1fr; border-bottom: 1px solid var(--hairline); }
.p-intake .frame > .trow:last-child { border-bottom: 0; }
.p-intake .trow .time { padding: 22px 0 0 24px; font-family: var(--font-mono); font-size: 12px; color: var(--vermilion); }
.p-intake .trow .t { padding: 22px 28px; font-size: 16px; line-height: 1.6; color: var(--body); font-weight: 400; }
.p-intake .trow .t b { font-weight: 700; color: var(--ink); }
.p-intake .ba { padding: 28px 30px; }
.p-intake .ba .lab { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; color: var(--muted); margin-bottom: 16px; }
.p-intake .ba .title { font-weight: 700; font-size: 22px; margin-bottom: 12px; }
.p-intake .ba p { font-size: 16px; line-height: 1.65; color: var(--body); margin: 0; font-weight: 400; }
.p-intake .booking { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; padding: 64px; }
.p-intake .booking .note { font-family: var(--font-mono); font-size: 13px; color: var(--panel-muted); margin: 0; }

/* ---- Style guide (explainer) ---- */
.p-guide .swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.p-guide .sw .chip { height: 72px; border: 1px solid var(--hairline); }
.p-guide .sw .m { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-top: 8px; line-height: 1.6; }
.p-guide .spec { border-top: 1px solid var(--hairline); padding: 22px 0; display: grid; grid-template-columns: 200px 1fr; gap: 24px; }
.p-guide .spec .k { font-family: var(--font-mono); font-size: 12px; color: var(--vermilion); }
.p-guide .spec .v { font-size: 16px; line-height: 1.6; color: var(--body); }

/* ---- responsive for sub-pages ---- */
@media (max-width: 1040px) {
  .page-hero, .page-hero.split { display: block; padding: 56px var(--pad-x) 44px; }
  .t84, .t80, .t76, .t74 { font-size: 52px; letter-spacing: -1.2px; }
  .t72 { font-size: 48px; letter-spacing: -1px; }
  .t58, .t52, .t50 { font-size: 38px; letter-spacing: -0.8px; }
  .p-method .stage, .p-offer .qrow, .p-intake .trow { grid-template-columns: 1fr; }
  .p-method .stage .key, .p-offer .qrow .n, .p-intake .trow .time { border-right: 0; }
  .p-work .wp, .p-about .about-head { grid-template-columns: 1fr; }
  .p-work .wp .body { border-right: 0; border-bottom: 1px solid var(--hairline); }
  .p-about .about-head .intro { padding: 56px 40px; }
  .p-about .portrait-cell { border-left: 0; border-top: 1px solid var(--hairline); }
  .col-3 { grid-template-columns: 1fr; }
  .col-5 { grid-template-columns: 1fr 1fr; }
  .p-offer .lrow { grid-template-columns: 1fr; }
  .p-offer .lrow .desc, .p-offer .lrow .price2 { border-left: 0; text-align: left; }
  .p-work .pp-head { display: none; }
  .p-work .pp-row { grid-template-columns: 1fr; gap: 4px; }
  .p-faq .faq { grid-template-columns: 1fr; }
  .p-faq .faq .colnum { padding: 24px 0 0 40px; border-right: 0; border-bottom: 1px solid var(--hairline); }
  .p-guide .spec { grid-template-columns: 1fr; gap: 6px; }
  .p-guide .swatches { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .col-5, .p-guide .swatches { grid-template-columns: 1fr; }
  .panel-inner, .p-intake .booking { padding: 40px 22px; }
  .p-about .closer, .p-faq .cta, .p-work .deliver, .p-offer .notfor { padding: 32px 22px; }
  .page-hero, .page-hero.split { padding: 40px 22px; }
}