/* ==========================================================================
   Product Decision Practice — V1
   Design system: ink on paper, hairline rules, one accent, mono labels.
   No external dependencies. No glassmorphism, gradients, glow or animation.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
/* Single source of truth. Responsive overrides live in their own media
   queries further down (section spacing and the type scale on small screens). */
:root {
  /* Spacing scale */
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;
  --space-7: 112px;
  --space-8: 156px;
  --section-space: clamp(56px, 4.8vw, 72px);

  /* Layout */
  --wrap: 1280px;
  --wrap-form: 640px;
  --radius: 0;

  /* Palette */
  --ink: #102133;
  --ink-soft: #303d48;
  --paper: #f3f0e9;
  --paper-light: #fbfaf6;
  --accent: #8b5e3c;
  --copper-light: #c8a27f;
  --hair: #d4cec3;
  --muted: #5f676e;
  --navy-deep: #0d2137;
  --sand: #ece3d3;   /* statement band fill: a step deeper than --paper */

  /* Type families */
  --font-ui: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif: var(--font-ui);
  --font-sans: var(--font-ui);
  --font-mono: var(--font-ui);

  /* Type scale */
  --type-caption: 0.8125rem;  /* 13px */
  --type-small: 0.9375rem;    /* 15px */
  --type-body: 1.125rem;      /* 18px */
  --type-control: 1rem;       /* 16px */
  --type-nav: 0.875rem;       /* 14px */
  --type-lead: clamp(1.3rem, 1.8vw, 1.625rem);
  --type-h3: clamp(1.35rem, 2vw, 1.75rem);
  --type-h2: clamp(1.85rem, 3vw, 2.75rem);
  --type-h1: clamp(2.024rem, 3.404vw, 3.22rem);

  /* Typographic steps */
  --step--1: var(--type-small);
  --step-0: var(--type-body);
  --step-1: var(--type-lead);
  --step-2: clamp(1.65rem, 2.7vw, 2.4rem);
  --step-3: var(--type-h2);
  --step-4: clamp(2.65rem, 4.8vw, 4.5rem);
  --step-5: var(--type-h1);
}

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 var(--space-3); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button { font: inherit; }
hr { border: 0; border-top: 1px solid var(--hair); margin: var(--space-5) 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* --- Layout primitives -------------------------------------------------- */
.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--space-4);
}
.wrap--form { max-width: var(--wrap-form); }
.form-frame { padding: 0; }

.section {
  padding: var(--section-space) 0;
  border-top: 1px solid var(--hair);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 16px;
  z-index: 100;
}
.skip-link:focus { left: 0; }

/* --- Header / nav ------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--hair);
}
/* Keep section headings clear of the persistent navigation. */
main[id],
main [id] { scroll-margin-top: 112px; }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 68px;
}
.brand {
  color: var(--ink);
  font-size: 1.1rem;
  font-weight: 680;
  letter-spacing: 0.055em;
  text-transform: none;
  line-height: 1.2;
  white-space: nowrap;
}
.brand:hover { text-decoration: none; }
.brand-sub {
  display: block;
  margin-top: 6px;
  font-size: var(--type-caption);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.4;
  white-space: nowrap;
}
.site-nav ul {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.site-nav a {
  display: inline-block;
  padding: 13px 0;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.site-nav a:hover { text-decoration: none; color: var(--accent); }
.site-nav a[aria-current="page"] {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 5px;
}
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  min-height: 44px;
  padding: 12px 16px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
}

/* --- Section header component ------------------------------------------ */
.sec-head {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
/* Section body shares the heading's left edge. .sec-head is a 72px number
   column plus a 28px gap further down this file, so the heading starts at
   100px; everything after it in the section starts on the same line. If the
   .sec-head columns change, change this with them. */
.section { --sec-indent: 100px; }
.section > .sec-head ~ * { padding-left: var(--sec-indent); }
@media (max-width: 768px) {
  /* .sec-head collapses to one column here, so the offset goes with it. */
  .section { --sec-indent: 0px; }
}
.sec-num {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--muted);
  padding-top: 6px;
}
.sec-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--space-2);
}

/* --- Typography ------------------------------------------------------- */
h1, h2, h3, h4 { margin: 0 0 var(--space-3); line-height: 1.15; }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); letter-spacing: -0.01em; }
h4 { font-size: var(--step-0); }

.editorial { max-width: 62ch; }
.home-method-intro,
.method-overview-intro { margin-bottom: 32px; }
.home-section-followup { margin-top: 24px; }

.lede { font-size: var(--step-1); line-height: 1.5; color: var(--ink-soft); max-width: 60ch; }
.direct-email { font-size: var(--type-small); margin-top: 16px; }
.muted { color: var(--muted); }
.small { font-size: var(--step--1); }
.caps-head {
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.2;
}
.mono {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- Hero ------------------------------------------------------------- */
.hero { padding: var(--space-8) 0 var(--space-7); }
.hero .eyebrow {
  text-transform: uppercase;
}
.hero .lede { font-weight: 400; margin-bottom: var(--space-5); }
.hero .descriptor {
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding-top: var(--space-4);
  border-top: 1px solid var(--hair);
  max-width: 46ch;
}

/* --- Buttons ---------------------------------------------------------- */
.cta-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.btn {
  display: inline-block;
  padding: 13px 22px;
  border-radius: var(--radius);
  border: 1px solid var(--ink);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover { background: var(--accent); border-color: var(--accent); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); border-color: var(--accent); color: var(--paper); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

.text-link {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* --- Blocks ----------------------------------------------------------- */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.decision-experience-list { margin-top: 16px; }
.grid-2 > *, .grid-3 > * { min-width: 0; }

.bullets li {
  position: relative;
  padding-left: var(--space-4);
  margin-bottom: 10px;
  max-width: 60ch;
}
.bullets li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--muted);
}

.statement-block {
  border-left: 2px solid var(--accent);
  padding: var(--space-2) 0 var(--space-2) var(--space-4);
  margin: var(--space-5) 0;
}
.statement-block p { margin: 0; font-size: var(--step-1); font-weight: 600; line-height: 1.35; }
.statement-block .note { margin-top: 10px; font-size: var(--step--1); font-weight: 400; color: var(--muted); }

/* The note under each section carries real content, so it reads at 16px in the
   softer ink rather than at the 15px small-text step in --muted, which measured
   4.36:1 on the paper — under the 4.5:1 that size asks for. The element spans the
   full content width so the rule above it reads as a section divider (it used to
   stop at 72ch and looked like a box under the left column), while the text itself
   keeps a readable measure through padding rather than max-width. */
.note-block {
  border-top: 1px solid var(--hair);
  padding-top: var(--space-3);
  padding-right: max(0px, calc(100% - 58ch));
  margin-top: var(--space-4);
  font-size: 1rem;
  color: var(--ink-soft);
}

/* Selected-work case study: one concise decision path and a real site view. */
.case-path {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: var(--space-5) 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--hair);
}
.case-path li {
  position: relative;
  min-width: 0;
  padding: var(--space-4) var(--space-5) var(--space-4) 0;
}
.case-path li:not(:last-child)::after {
  content: "\2192";
  position: absolute;
  top: 50%;
  right: var(--space-3);
  color: var(--accent);
  font-size: var(--step-1);
  line-height: 1;
  transform: translateY(-50%);
}
.case-path-num,
.case-path strong,
.case-path span:last-child,
.case-preview figcaption {
  display: block;
}
.case-path-num,
.case-preview figcaption {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.case-path strong {
  margin: 8px 0 6px;
  font-size: var(--step-1);
  line-height: 1.2;
}
.case-path span:last-child {
  max-width: 28ch;
  color: var(--muted);
  font-size: var(--step--1);
  line-height: 1.45;
}
.case-preview {
  margin: 0 0 var(--space-5);
}
.case-preview a {
  display: block;
  overflow: hidden;
  border: 1px solid var(--hair);
  background: #fff;
}
.case-preview a:hover {
  border-color: var(--accent);
}
.case-preview img {
  width: 100%;
  aspect-ratio: 36 / 19;
  object-fit: cover;
  object-position: top center;
}
.case-preview figcaption {
  margin-top: 10px;
}

/* Method steps */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--hair); }
.steps li {
  border-bottom: 1px solid var(--hair);
  border-right: 1px solid var(--hair);
  padding: var(--space-4) var(--space-4) var(--space-5);
}
.steps li:nth-child(4n) { border-right: 0; }
.step-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: var(--space-3);
}
.step-name {
  display: block;
  font-size: var(--step-0);
  font-weight: 600;
  margin-bottom: 6px;
  letter-spacing: -0.005em;
}
.steps li p { margin: 0; font-size: var(--step--1); color: var(--muted); max-width: 34ch; }

/* Numbered outline list */
.outline { border-top: 1px solid var(--hair); }
.outline > li {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--space-4);
  border-bottom: 1px solid var(--hair);
  padding: var(--space-4) 0;
}
.outline .outline-num {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--muted);
  padding-top: 5px;
}
.outline h3 { margin-bottom: 6px; }
.outline p { margin: 0; max-width: 68ch; }

/* Problem list */
.problem-list { border-top: 1px solid var(--hair); }
.problem-list li {
  border-bottom: 1px solid var(--hair);
  padding: var(--space-4) 0;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: var(--space-5);
  align-items: baseline;
}
.problem-list .p-head {
  font-size: var(--step-1);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.25;
  margin: 0;
}
.problem-list .p-map { margin: 0; color: var(--muted); font-size: var(--step--1); }

/* Standards */
.standards { border-top: 1px solid var(--hair); }
.standards li {
  border-bottom: 1px solid var(--hair);
  padding: var(--space-4) 0;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-5);
  align-items: baseline;
}
.standards .s-name {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}
.standards .s-desc { margin: 0; font-size: var(--step--1); color: var(--muted); }

/* Disclosure */
.disclosure { border-top: 1px solid var(--hair); }
.disclosure details { border-bottom: 1px solid var(--hair); }
.disclosure summary {
  cursor: pointer;
  padding: var(--space-3) 0;
  font-weight: 600;
  font-size: var(--step-0);
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  list-style: none;
}
.disclosure summary::-webkit-details-marker { display: none; }
.disclosure summary::after {
  content: "+";
  font-family: var(--font-mono);
  color: var(--muted);
  font-weight: 400;
}
.disclosure details[open] summary::after { content: "–"; }
.disclosure .details-body { padding: 0 0 var(--space-4); max-width: 72ch; color: var(--ink-soft); }
.disclosure .details-body p:last-child { margin-bottom: 0; }

/* Placeholders — must stay visibly unfinished */
.ph {
  font-family: var(--font-mono);
  font-size: 0.86em;
  letter-spacing: 0.02em;
  color: #7a4b00;
  background: #fbf3e3;
  border: 1px dashed #d9b478;
  border-radius: var(--radius);
  padding: 1px 5px;
  overflow-wrap: break-word;
}

/* --- V2: statement band (full-width ink moment) ------------------------ */
.band-ink {
  background: var(--sand);
  color: var(--ink);
  padding: var(--space-6) 0;
}
.band-ink .band-statement {
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  max-width: 44ch;
  margin: 0;
}
.band-ink .band-note {
  margin: var(--space-3) 0 0;
  /* Body size, not caption size: the band is a statement block, and at
     --step--1 the caveat read weaker than ordinary body copy below it. */
  font-size: var(--step-0);
  color: var(--ink);
  max-width: 68ch;
}

/* --- V2: proof panel (diagnostic artifact specimen) -------------------- */
.proof-panel {
  margin: var(--space-5) 0 0;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: #fff;
}
.proof-panel-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 24px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--hair);
  background: var(--paper);
}
.proof-panel-head .pp-doc,
.proof-panel-head .pp-mark {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.proof-panel-head .pp-doc { color: var(--muted); }
.proof-panel-head .pp-mark { color: #7a4b00; }
.proof-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--space-4);
  padding: 14px 20px;
  border-bottom: 1px solid var(--hair);
}
.proof-row:last-of-type { border-bottom: 0; }
.proof-row .pr-label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  padding-top: 2px;
}
.proof-row .pr-text {
  margin: 0;
  font-size: var(--step--1);
  color: var(--ink-soft);
  max-width: 70ch;
}
.proof-panel-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 24px;
  padding: 12px 20px;
  border-top: 1px solid var(--hair);
  background: var(--paper);
  font-size: var(--step--1);
  color: var(--muted);
}
.final-id { border-left: 2px solid var(--hair); padding-left: var(--space-4); }
.final-id .mono { margin-bottom: var(--space-2); }

/* --- V2: identity card (About) ------------------------------------------ */
.id-card {
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: #fff;
  align-self: start;
}
.id-photo {
  display: grid;
  place-items: center;
  min-height: 190px;
  border-bottom: 1px solid var(--hair);
  background: var(--paper);
}
.id-photo .ph { font-family: var(--font-mono); }
.id-card dl { margin: 0; padding: var(--space-2) var(--space-4) var(--space-3); }
.id-row {
  display: grid;
  grid-template-columns: 118px 1fr;
  gap: var(--space-3);
  padding: 9px 0;
  border-bottom: 1px solid var(--hair);
}
.id-row:last-child { border-bottom: 0; }
.id-row dt {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 2px;
}
.id-row dd { margin: 0; font-size: var(--step--1); color: var(--ink-soft); }


/* --- V2 METHOD: 04->05 conceptual hinge --------------------------------- */
.method-hinge { padding-top: var(--space-6); }
.method-hinge-label {
  margin: 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--hair);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

/* --- V2 REVIEW OPT: artifact scan hierarchy ----------------------------- */
.proof-row.secondary .pr-label { color: var(--muted); }
.proof-row.secondary .pr-text { color: var(--muted); }
.proof-row.boundary { background: var(--paper); }
.proof-row.boundary .pr-label { color: var(--ink); }
.proof-row.boundary .pr-text { color: var(--ink); }
.proof-row.conclusion { border-top: 2px solid var(--ink); }

/* --- V2: verdict rows (bounded conclusion) ------------------------------ */
.verdict-list { border-top: 1px solid var(--hair); }
.verdict {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: var(--space-3);
  padding: 7px 0;
  border-bottom: 1px solid var(--hair);
}
.verdict:last-child { border-bottom: 0; }
.verdict span {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 2px;
}
.verdict p { margin: 0; font-size: var(--step--1); color: var(--ink-soft); }

/* --- V2: stage io rows (Input / Key judgment / Output) ----------------- */
.stage-io { border-top: 1px solid var(--hair); margin: 0 0 var(--space-4); }
.method-stage-details { margin-top: 0; }
.method-stage-details:not([open]) > :not(summary),
.proof-example:not([open]) > :not(summary),
.about-hero-details:not([open]) > :not(summary),
.home-section-details:not([open]) > :not(summary) {
  display: none;
}
.method-stage-details > summary,
.proof-example > summary,
.about-hero-details > summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 650;
  text-underline-offset: 0.2em;
}
.proof-example > summary { padding: 14px 0; border-top: 1px solid var(--hair); }
.proof-example .proof-panel { margin-top: 8px; }
.io-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: var(--space-4);
  padding: 10px 0;
  border-bottom: 1px solid var(--hair);
}
.io-row span {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  padding-top: 2px;
}
.io-row p { margin: 0; font-size: var(--step--1); color: var(--ink-soft); max-width: 70ch; }

/* --- V2: method overview — desktop diagram / mobile stepper ------------- */
.method-desktop { display: block; }
.method-mobile { display: none; border-top: 1px solid var(--hair); }
.method-mobile li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--space-3);
  padding: 12px 0;
  border-bottom: 1px solid var(--hair);
}
.method-mobile .mm-num {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--accent);
  padding-top: 3px;
}
.method-mobile .mm-name { font-weight: 600; }
.method-mobile .mm-out { margin: 8px 0 0; font-size: var(--step--1); color: var(--muted); }

/* --- Forms ------------------------------------------------------------ */
.form { margin-top: var(--space-5); }
.field { margin-bottom: var(--space-4); }
.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 6px;
}
.field .hint { font-size: var(--step--1); color: var(--muted); margin: 0 0 6px; text-transform: none; letter-spacing: 0; font-family: var(--font-sans); }
.field input, .field textarea {
  width: 100%;
  font: inherit;
  font-size: var(--step-0);
  color: var(--ink);
  background: #fff;
  border: 1px solid #cfcfc9;
  border-radius: var(--radius);
  padding: 11px 12px;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 1px; }
.field .error { display: none; margin: 6px 0 0; font-size: var(--step--1); color: #9b1c1c; }
.field[data-invalid="true"] input, .field[data-invalid="true"] textarea { border-color: #9b1c1c; }
.field[data-invalid="true"] .error { display: block; }
.optional { color: var(--muted); font-weight: 400; }
.form-note {
  border-top: 1px solid var(--hair);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  font-size: var(--step--1);
  color: var(--muted);
  max-width: 68ch;
}

/* Contact: the copy sits left and the form sits right, so the form begins beside
   the copy instead of sitting alone with half the page blank next to it. */
.hero.hero--contact {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  column-gap: clamp(40px, 5vw, 88px);
  align-items: start;
}
.hero.hero--contact .lede { margin-top: 22px; }
/* The form column is narrower than a full-width section, so its type and spacing
   step down to stay in proportion with the copy beside it. */
.hero.hero--contact .caps-head {
  font-size: var(--type-h3);
  margin-bottom: 20px;
}
.hero.hero--contact .form { margin-top: 0; padding: clamp(20px, 2.6vw, 32px); }
.hero.hero--contact .field { margin-bottom: 16px; }
.hero.hero--contact .field label { font-size: var(--type-caption); margin-bottom: 4px; }
.hero.hero--contact .field input,
.hero.hero--contact .field textarea { font-size: var(--type-control); padding: 10px 0; }
.hero.hero--contact .field textarea { min-height: 84px; }
.hero.hero--contact .form-note { margin-top: 14px; padding-top: 10px; font-size: var(--type-small); }
/* The form card is light, so its button keeps the on-light treatment instead of
   the hero's on-dark one. */
.hero.hero--contact .form .btn { border-color: var(--ink); padding: 11px 18px; margin-top: 18px; }
.hero.hero--contact .form .btn--primary { background: var(--ink); color: var(--paper); }
.hero.hero--contact .form .btn--primary:hover { background: var(--accent); border-color: var(--accent); color: var(--paper); }
@media (max-width: 992px) {
  .hero.hero--contact { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-6); }
}
.form-status {
  margin-top: var(--space-4);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  font-size: var(--step--1);
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.form-status[data-visible="true"] {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
  white-space: normal;
}

/* --- Diagrams --------------------------------------------------------- */
.figure { margin: var(--space-5) 0 0; }
.figure svg { width: 100%; height: auto; }
.figure figcaption {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.dg-box { fill: none; stroke: var(--ink); stroke-width: 1; }
.dg-line { stroke: var(--muted); stroke-width: 1; fill: none; }
.dg-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; fill: var(--ink); }
.dg-sub { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em; fill: var(--muted); }

/* --- Footer ----------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--hair);
  margin-top: var(--space-8);
  padding: var(--space-6) 0 var(--space-5);
  font-size: var(--step--1);
  color: var(--muted);
}
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-5); }
.footer-grid h3 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 400;
  margin: 0 0 var(--space-3);
}
.footer-grid li { margin-bottom: 7px; }
.footer-grid a { color: var(--muted); }
.footer-grid a:hover { color: var(--accent); }
.footer-statement { max-width: 40ch; margin: 0 0 var(--space-3); }
.footer-bottom {
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid var(--hair);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  justify-content: space-between;
}

/* --- Responsive ------------------------------------------------------- */
@media (max-width: 992px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .steps li:nth-child(3n) { border-right: 1px solid var(--hair); }
  .steps li:nth-child(2n) { border-right: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero { padding: var(--space-7) 0 var(--space-6); }
}




/* ==========================================================================
   Executive editorial redesign
   Direction: formal independent consultancy, quietly premium, evidence-led.
   The underlying content and page semantics remain unchanged.
   Tokens live in the single :root block at the top of this file.
   ========================================================================== */

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  line-height: 1.7;
  letter-spacing: -0.006em;
}

p { margin-bottom: 1.15rem; }
a { color: var(--ink); }
a:hover { color: var(--accent); }

.wrap { padding-left: clamp(24px, 4vw, 64px); padding-right: clamp(24px, 4vw, 64px); }
.section { padding: var(--section-space) clamp(24px, 4vw, 64px); }
.section--tight { padding: 76px 0; }

/* Masthead */
.site-header {
  /* Opaque on purpose: content scrolling under the sticky header used to show
     faintly through the 4% transparency (and through the blur fallback). */
  background: var(--paper);
  border-bottom-color: rgba(16, 33, 51, 0.18);
}
.header-inner { min-height: 88px; }
.site-nav ul { gap: clamp(20px, 2.8vw, 42px); }
.site-nav a {
  padding: 31px 0 27px;
  font-weight: 650;
  letter-spacing: 0.15em;
}
.site-nav a[aria-current="page"] {
  text-decoration: none;
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* Editorial typography */
h1, h2, h3, h4 {
  letter-spacing: -0.035em;
}
.caps-head { text-transform: none; letter-spacing: -0.03em; }
.lede { color: var(--ink-soft); }
.mono, .sec-kicker, .sec-num, .eyebrow, .text-link {
  font-family: var(--font-sans);
  font-weight: 650;
  letter-spacing: 0.14em;
}

/* Hero: full-width executive cover */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
  column-gap: clamp(32px, 4vw, 72px);
  align-items: end;
  padding-top: clamp(100px, 12vw, 172px);
  padding-bottom: clamp(88px, 10vw, 140px);
  background: var(--navy-deep);
  color: var(--paper-light);
  box-shadow: 0 0 0 100vmax var(--navy-deep);
  clip-path: inset(0 -100vmax);
}
/* A decorative hairline used to sit at the hero's bottom right (320px x 1px at
   24% opacity). It floated without connecting to anything and read as a leftover
   rather than a deliberate mark, so it is gone. */
.hero::after { content: none; }
.hero .eyebrow {
  grid-column: 1 / -1;
  margin-bottom: 18px;
  color: var(--copper-light);
  letter-spacing: 0.17em;
}
.hero h1 {
  grid-column: 1;
  margin: 0;
  color: var(--paper-light);
}
.hero .lede {
  grid-column: 2;
  align-self: start;
  margin: 10px 0 0;
  color: rgba(251, 250, 246, 0.77);
  line-height: 1.5;
}
.hero .cta-row { grid-column: 1; margin-top: 52px; }
.hero .descriptor {
  grid-column: 2;
  align-self: end;
  color: rgba(251, 250, 246, 0.55);
  border-top-color: rgba(251, 250, 246, 0.22);
  line-height: 1.7;
}
.hero .btn { border-color: rgba(251, 250, 246, 0.7); }
.hero .btn--primary { background: var(--paper-light); color: var(--navy-deep); }
.hero .btn--primary:hover { background: var(--copper-light); border-color: var(--copper-light); color: var(--navy-deep); }
.hero .btn--ghost { color: var(--paper-light); }
.hero .btn--ghost:hover { background: var(--paper-light); border-color: var(--copper-light); color: var(--navy-deep); }
/* Hero: notes and editorial blocks need their own space after the headline,
   the lede or the actions — they previously butted against the block above. */
.hero .lede + .mono,
.hero .cta-row + .mono { margin-top: 18px; }
/* On the dark band --muted only reaches 2.83:1, so the aside uses the light
   ink rather than the grey, one step larger. */
.hero .mono {
  color: rgba(251, 250, 246, 0.82);
  font-size: var(--type-caption);
  letter-spacing: 0.06em;
}
/* The supporting line under the headline on Method and the Review page reads at
   the same size and weight as the equivalent paragraphs on the About hero — body
   size, normal weight, not a caption or a label. It uses the same token as those
   paragraphs, so it follows them at every width (they step down to 17px on the
   narrowest screens). .hero-lead exists only on those two pages, and this rule sits
   after .hero .mono so it wins on order at equal specificity; the <=992px group
   that resets .mono to the caption size has lower specificity and cannot take it
   back. */
.hero-lead .mono { font-size: var(--type-body); font-weight: 400; }
/* The Contact hero's opening line is the same kind of text, so it takes the same
   size instead of the larger lede step. Selector outranks the lede rules at every
   breakpoint, and the rule deliberately lives outside the min-width:993px block so
   it cannot silently revert below it. */
.hero.hero--contact .lede { font-size: var(--type-lead); }
.hero .lede + .editorial,
.hero .cta-row + .editorial { margin-top: 26px; }
/* The About hero keeps its headline and closing paragraphs in one left-hand block.
   As separate children they shared a grid row with the (taller) right-hand lede, so
   the row was sized by the lede and left ~109px of empty band under the headline. */
.hero .hero-copy { grid-column: 1; }
.hero-copy .editorial { margin-top: 26px; }

/* Section rhythm and hierarchy */
.sec-head {
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 28px;
  margin-bottom: 54px;
}
/* The base stylesheet nudges the number down 6px to optically centre it against the
   kicker in the mono face it used before the redesign. The redesign switched the
   face, so the nudge only pushed every section number 6px below its kicker; the
   mobile breakpoint already zeroes it. */
.sec-num { color: var(--accent); padding-top: 0; }
.sec-kicker { margin-bottom: 12px; color: var(--accent); }
.sec-head h2 { max-width: 20ch; }
.grid-2 { gap: clamp(44px, 8vw, 110px); }
.grid-3 { gap: clamp(28px, 4vw, 58px); }
.editorial { max-width: 58ch; }

/* The independent-project block: a narrow left column holds the title, its
   subtitle and the status, and everything else is one continuous column of prose on
   a 60-65 character measure in reading order — the eye never has to change sides.
   It previously ran two two-column grid rows under a two-column intro, which put the
   right-hand text on three different left edges. */
.work-head {
  display: grid;
  grid-template-columns: minmax(200px, 0.4fr) minmax(0, 1fr);
  column-gap: clamp(32px, 5vw, 88px);
  align-items: start;
}
.work-head h3 { margin: 0 0 12px; }
.work-meta .mono { margin-bottom: 6px; }
/* 54ch, not 62ch: ch is the width of the "0" glyph (about 10.4px here) while an
   average character is nearer 9.4px, so 62ch rendered ~84 characters per line — far
   past a reading measure. 54ch is about 564px, or 60-64 characters. */
.work-copy { max-width: 564px; margin-left: auto; }
/* About 03 and 04: the prose sits in one column that ends on the same right edge as
   the columns in 01 and 02 (1302px), so the page has one right margin instead of
   four. The measure stays 54ch (~60 characters), so the column is right-aligned
   rather than stretched to an unreadable width; the rule under each section still
   spans the full content width. */
/* padding-left: 0 — as a direct child of .section these blocks inherit the 100px
   figure indent, which would push their text 100px right of the column they are
   supposed to share with 02. The extra .section qualifies it: the indent rule is
   .section > .sec-head ~ * and outranks a single class, so it has to tie and then
   win on source order. */
.section > .about-copy { max-width: 564px; margin-left: auto; padding-left: 0; }
/* About 01's two-column block sits on the page's column lines: its right column is the
   same 54ch column that 02, 03 and 04 use, so it starts at 739px and ends at 1302px
   like theirs. Left as 1fr 1fr it started at 825px, 86px right of every other
   right-hand column on the page. 54ch rather than a pixel value so the two agree to
   the pixel, and inside min-width: 993px so the id's specificity cannot cancel the
   responsive rule that collapses .grid-2 to one column below that. */
/* The 03 heading is long enough that its last line ran past the left column's edge
   (838px) into the right-hand column, which starts at 739px — the columns were aligned
   but this heading ignored them. Capped at 14ch, about 462px, so no line can reach the
   right column; it wraps to four lines where it used to take three. */
#confidentiality .caps-head { max-width: 14ch; }

/* 03 and 04: the heading block takes the left column and the prose the right, so both
   columns carry content. Left as a full-width heading above a single right-hand column,
   these two sections read as a heading floating over an empty half. Inside the column
   the number, kicker and heading stack — the site's number-beside-heading grid would
   leave the heading 291px wide, five or six lines. */
@media (min-width: 993px) {
  #confidentiality,
  #talk {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 564px;
    column-gap: clamp(44px, 8vw, 110px);
    /* start, not baseline: the left column's first baseline resolves through the
       heading, which pushed the prose 65px down. Tops aligned is what these two needed. */
    align-items: start;
  }
  #confidentiality > .sec-head,
  #talk > .sec-head {
    grid-column: 1;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin-bottom: 0;
  }
  /* The number stays on the page's figure line at 138px like every other section; the
     kicker and heading move in to the body line at 238px, which leaves the heading
     291px of column. At the section-heading size that is six lines, so these two
     headings take a smaller step and fit in three. */
  #confidentiality > .sec-head > div,
  #talk > .sec-head > div { padding-left: 0; }
  #confidentiality > .about-copy,
  #talk > .about-copy { grid-column: 2; max-width: none; margin-left: 0; }
  #confidentiality > .note-block,
  #talk > .note-block { grid-column: 1 / -1; }
  #talk > .cta-row--end,
  #talk > .cta-email { grid-column: 2; width: 100%; max-width: none; margin-left: 0; }

  #background > .grid-2 { grid-template-columns: minmax(0, 1fr) 564px; }
  /* 02's block uses the same two column lines as 01, gap included, so the left column
     is 391px in both rather than 283px in one and 391px in the other. */
  .work-head { grid-template-columns: minmax(0, 1fr) 564px; column-gap: clamp(44px, 8vw, 110px); }
}
/* 564px is the 54ch column measured at the body size; the note's text is one step
   smaller, where 54ch would resolve to ~502px, so the note's column is aligned in
   pixels to keep it on the same line as the prose above it. */
.about-copy ~ .note-block { padding-left: max(0px, calc(100% - 564px)); padding-right: 0; }
/* The email line under a call to action, on the same footing as the section notes. */
.cta-email { margin-top: 18px; font-size: 1rem; color: var(--ink-soft); }
/* The email line takes the same 564px column, in pixels: at 16px, 54ch resolves to
   about 502px and put the line 62px right of the column. */
.section > .cta-email { max-width: 564px; margin-left: auto; padding-left: 0; }
/* The two buttons are wider than the 54ch prose column, so the row is not capped —
   it keeps its own width and lines its right end up with the column instead. */
/* Section 04's call to action belongs to the prose column, not to the page margin.
   Right-aligning the row lined its right end up with the column but left its left end
   134px away from the prose above it, with the email line stranded between the two.
   The row now takes the column and wraps, so each button starts on the prose's left
   edge. */
/* .section > qualifies the selector: the figure indent is .section > .sec-head ~ * and
   outranks a single class, so padding-left: 0 has to tie on specificity and win on
   source order — without it the row's box was right but its buttons sat 100px inside. */
.section > .cta-row--end {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 564px;
  max-width: 100%;
  margin-left: auto;
  padding-left: 0;
}
/* Balance the line endings instead of leaving a two-word last line. Chrome caps
   balancing at six lines, so the longer paragraphs fall back to normal wrapping. */
.work-copy p { text-wrap: balance; }
/* Group labels inside the reading column: body size and weight so they read as
   headings rather than as another tracked-out label. */
.work-copy h4 {
  font-size: var(--type-lead);
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 34px 0 8px;
}
.work-copy > h4:first-child { margin-top: 0; }
@media (max-width: 992px) {
  .work-head { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-4); }
}
/* A paragraph that closes a two-column block needs air above it. */
.grid-2 + .editorial,
.grid-3 + .editorial { margin-top: 26px; }
.bullets { border-top: 1px solid var(--hair); }
.bullets li {
  margin: 0;
  padding: 14px 0 14px 28px;
  border-bottom: 1px solid var(--hair);
}
.bullets li::before { top: 14px; color: var(--accent); }
.note-block { margin-top: 40px; padding-top: 20px; }
.statement-block { border-left-color: var(--accent); padding-left: 28px; margin: 54px 0; }
.statement-block p { font-family: var(--font-serif); font-size: var(--step-2); font-weight: 500; }

/* Trust statement */
.band-ink {
  padding: 88px 0;
  /* Sand rather than the accent: the accent is tuned for small areas (numbers,
     kickers, links). At full width it read as a second mid-tone block competing
     with the hero. The statement keeps its weight from scale instead, and the
     ink/sand pair measures 12.8:1 against 5.3:1 before. */
  background: var(--sand);
  color: var(--ink);
}
.band-ink .band-statement {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3.7rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.035em;
  max-width: 25ch;
}
.band-ink .band-note { color: var(--ink); margin-top: 28px; }
/* A full-bleed block — the hero band, the sand statement band — already
   separates itself with a colour change, so the next section's divider is
   redundant there. And because that divider is only as wide as .wrap while the
   block runs edge to edge, it read as a stray half-width line along the block's
   lower edge. */
.hero + .section,
.band-ink + .section { border-top: 0; }

/* Evidence artifact */
.proof-panel {
  margin-top: 54px;
  border-color: var(--ink);
  background: var(--paper-light);
  box-shadow: 18px 18px 0 rgba(16, 33, 51, 0.08);
}
.proof-panel-head,
.proof-panel-foot { background: var(--ink); color: var(--paper-light); border-color: var(--ink); }
.proof-panel-head .pp-doc { color: rgba(255,255,255,.68); }
.proof-panel-head .pp-mark { color: var(--copper-light); }
.proof-panel-foot { color: rgba(255,255,255,.64); }
.proof-panel-foot a { color: var(--paper-light); }
.proof-row { grid-template-columns: 190px 1fr; padding: 22px 26px; }
.proof-row .pr-label { font-family: var(--font-sans); font-weight: 650; color: var(--accent); }
.proof-row .pr-text { font-size: var(--type-small); line-height: 1.65; }
.proof-row.boundary { background: #ebe5db; }
.proof-row.conclusion { border-top-color: var(--accent); }

/* Method and structured lists */
.steps { border-color: var(--ink); }
.steps li { min-height: 190px; padding: 30px 28px 36px; border-color: var(--hair); background: rgba(251,250,246,.45); }
.step-num, .outline .outline-num, .method-mobile .mm-num { color: var(--accent); }
.step-name { font-family: var(--font-serif); font-size: var(--type-h3); font-weight: 600; }
.outline { border-top-color: var(--ink); }
.outline > li { padding: 34px 0; }
.outline h3 { font-size: var(--type-h3); }
.problem-list, .standards { border-top-color: var(--ink); }
.problem-list li, .standards li { padding: 30px 0; }
.problem-list .p-head { font-family: var(--font-serif); text-transform: none; letter-spacing: -0.02em; }
.method-hinge-label {
  display: inline-block;
  padding: 12px 18px;
  border: 1px solid var(--accent);
  color: var(--accent);
  background: rgba(139,94,60,.05);
}
/* Home page rhythm: preserve content-specific layouts while sharing section gaps,
   divider weight and row spacing across its structured content. */
body.home .section > .sec-head { margin-bottom: 40px; }
body.home .bullets,
body.home .outline,
body.home .steps,
body.home .problem-list,
body.home .standards { border-top-color: var(--ink); }
body.home .bullets li,
body.home .outline > li,
body.home .steps li,
body.home .problem-list li,
body.home .standards li {
  padding-top: clamp(20px, 2vw, 28px);
  padding-bottom: clamp(20px, 2vw, 28px);
  border-bottom-color: var(--hair);
}
body.home .proof-panel,
body.home .statement-block,
body.home .section .note-block { margin-top: 32px; }
.io-row { padding: 14px 0; }
.io-row span { color: var(--accent); font-weight: 650; }

/* Identity and forms */
.id-card { background: var(--paper-light); border-color: var(--ink); box-shadow: 14px 14px 0 rgba(16,33,51,.07); }
.id-photo { min-height: 240px; background: #e9e4da; }
.ph { color: #714c2d; background: #eee4d6; border-color: #b99a78; }
.form {
  margin-top: 48px;
  padding: clamp(28px, 5vw, 56px);
  background: var(--paper-light);
  border-top: 3px solid var(--ink);
  box-shadow: 0 18px 50px rgba(16,33,51,.08);
}
.field { margin-bottom: 28px; }
.field label { color: var(--ink); font-weight: 650; }
.field input, .field textarea {
  padding: 15px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #9f9a90;
}
.field input:focus, .field textarea:focus { border-color: var(--accent); outline: 0; box-shadow: 0 1px 0 var(--accent); }

/* Controls */
.btn {
  padding: 15px 24px;
  font-weight: 700;
  letter-spacing: 0.14em;
}
.btn--primary { background: var(--ink); }
.btn--primary:hover { background: var(--accent); }
.btn--ghost:hover { background: var(--ink); }
.text-link { color: var(--accent); }

/* Footer */
.site-footer {
  margin-top: 0;
  padding-top: 84px;
  background: var(--navy-deep);
  color: rgba(251,250,246,.70);
  border-top: 0;
}
.site-footer .wrap {
  max-width: var(--wrap);
}
.footer-grid { grid-template-columns: 1.55fr .8fr 1fr 1fr; }
.footer-grid h3 { color: var(--paper-light); font-weight: 650; }
.footer-grid a { color: rgba(251,250,246,.76); }
.footer-grid a:hover { color: var(--copper-light); }
.footer-bottom { border-top-color: rgba(251,250,246,.16); }

@media (max-width: 992px) {
  .hero { grid-template-columns: 1fr; }
  .hero h1, .hero .lede, .hero .cta-row, .hero .descriptor { grid-column: 1; }
  .hero .lede { max-width: 34ch; margin-top: 30px; }
  .hero .descriptor { margin-top: 42px; }
}



/* ==========================================================================
   Unified responsive typography
   One family throughout; scale changes express hierarchy, not font switching.
   Tokens live in the single :root block at the top of this file.
   ========================================================================== */

html { font-size: 100%; }
body {
  font-family: var(--font-ui);
  font-size: var(--type-body);
  line-height: 1.65;
}

h1, h2, h3, h4,
.brand,
.statement-block p,
.band-ink .band-statement,
.step-name,
.problem-list .p-head {
  font-family: var(--font-ui);
}

h1 { font-size: var(--type-h1); font-weight: 620; line-height: 1.04; }
h2 { font-size: var(--type-h2); font-weight: 620; line-height: 1.1; }
h3 { font-size: var(--type-h3); font-weight: 620; line-height: 1.22; }
h4 { font-size: var(--type-lead); font-weight: 620; }

.lede { font-size: var(--type-lead); }
.small,
.steps li p,
.outline p,
.problem-list .p-map,
.standards .s-desc,
.proof-row .pr-text,
.id-row dd,
.form-note,
.form-status,
.field .hint,
.verdict p,
.io-row p,
.method-mobile .mm-out,
.site-footer { font-size: var(--type-small); }

.site-nav a { font-size: var(--type-nav); letter-spacing: 0.12em; }

.mono,
.hero .eyebrow,
.hero .descriptor,
.sec-num,
.sec-kicker,
.text-link,
.step-num,
.case-path-num,
.case-preview figcaption,
.outline .outline-num,
.standards .s-name,
.proof-panel-head .pp-doc,
.proof-panel-head .pp-mark,
.proof-row .pr-label,
.id-row dt,
.verdict span,
.io-row span,
.method-mobile .mm-num,
.field label,
.figure figcaption,
.table th,
.dg-label,
.dg-sub,
.footer-grid h3,
.btn,
.nav-toggle {
font-family: var(--font-ui);
font-size: var(--type-caption);
line-height: 1.4;
}
/* The section labels (the number and the kicker) sit at the 13px floor and in
 --accent, which on --paper only clears AA by 0.09 (4.59:1). One step up helps
 them read without touching the colour. */
.sec-num,
.sec-kicker { font-size: 0.875rem; }

.hero .lede { font-size: var(--type-lead); }
.dg-label { font-size: 0.875rem; }
.dg-sub { font-size: 0.8125rem; fill: var(--ink-soft); }
.band-ink .band-statement { font-size: clamp(2rem, 4vw, 3.6rem); }
.statement-block p { font-size: clamp(1.45rem, 2.3vw, 2rem); }
.step-name,
.problem-list .p-head { font-size: var(--type-h3); }
.field input, .field textarea { font-family: var(--font-ui); font-size: var(--type-control); }



/* ==========================================================================
   Brand lockup: never wrap
   The sub-tagline is a desktop-only element; below 1180px it is removed
   instead of wrapping. Brand name stays on one line at every width.
   Nav collapses earlier (992px) so the middle band always fits.
   ========================================================================== */

@media (max-width: 1299px) {
  .nav-toggle { display: block; }
  .site-nav {
    display: none;
    width: 100%;
    max-height: 60vh;
    max-height: 60dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-top: 1px solid var(--hair);
    padding: var(--space-2) 0 var(--space-3);
  }
  .site-nav[data-open="true"] { display: block; }
  .header-inner { flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; }
  .site-nav ul { flex-direction: column; align-items: flex-start; gap: 0; }
  .site-nav li { width: 100%; border-bottom: 1px solid var(--hair); }
  .site-nav li:last-child { border-bottom: 0; }
  .site-nav a { display: block; padding: 14px 0; }
  .site-nav a[aria-current="page"] { box-shadow: none; border-bottom: 0; }
  .brand-sub { display: block; }
}

@media (max-width: 767px) {
  .brand-sub { letter-spacing: 0.1em; }
}

/* Nav items never wrap either */
.site-nav a { white-space: nowrap; }

/* Fixed two-line brand lockup: the tagline always breaks after "&" */
.sub-br { display: inline; }

/* ==========================================================================
   HOME hero: three-layer structure (slogan / headline / supporting copy)
   Columns 62/38; slogan spans both; lede wraps by column width.
   ========================================================================== */
@media (min-width: 993px) {
  .hero { grid-template-columns: minmax(0, 1.63fr) minmax(260px, 1fr); }
  .hero .lede { max-width: none; }
  .hero .descriptor { align-self: start; margin-top: 44px; }
}

/* HOME hero: prevent single-word orphan in the new shorter headline */
.hero h1 { max-width: none; text-wrap: balance; }

/* Section headings: balance the line breaks so no single word is left alone */
.caps-head { text-wrap: balance; }

/* HOME hero visual correction: 56-60px test range, tighter top pad,
   tighter headline-to-CTA distance (desktop two-column band) */
@media (min-width: 993px) {
  /* The hero band is as tall as its content on every page. It used to be pinned
     to one height (min-height: 661px) with the columns bottom-aligned, which
     left a large empty navy area below the text and dropped the headline below
     the right-hand column; the 55px offsets here compensated for that. Both are
     gone: the columns start on the same line and the band ends with the content.
     Padding-top also went from 32px to 88px, which is what the eyebrow needed to
     stop sitting tight under the header. */
  .hero {
    padding-top: 88px;
    padding-bottom: 72px;
    align-items: start;
    /* One band height across the four content pages — the tallest of them across
       993-1728 is Method (569-635px), so 635 makes Home, Method, Review and About
       the same height at every desktop width. The contact page is excluded below:
       it is a single email route rather than a cover, and keeps its own height. */
    min-height: 635px;
  }
  .hero.hero--contact { min-height: 0; }
  /* Headline + its mono aside form one left-hand block, so the aside sits
     directly under the headline instead of being pushed down by the (longer)
     right-hand paragraph. */
  .hero > .hero-lead { grid-column: 1; align-self: start; }
  .hero > .hero-lead .mono { margin-top: 18px; }
  body:not(.home) .hero > .mono + h1 { margin-top: 12px; }
  body.home .hero .cta-row { align-self: start; margin-top: 24px; }
}

/* Number-less outline lists (ordinary content, not process steps):
   reclaim the empty number column on desktop and mobile */
.outline-plain > li {
  grid-template-columns: 1fr;
}

/* Sentence-case variant of mono (full sentences should not shout) */
.caps-off { text-transform: none; letter-spacing: 0.02em; }
/* Keep a compound on one line: stops a heading breaking inside a hyphenated word
   (a nowrap span rather than a non-breaking hyphen — inline styles are blocked by
   the CSP, and U+2011 has patchier font coverage). */
.nb { white-space: nowrap; }

/* Review optional self-assessment checklist (inside Request a Review) */
.checklist-title { font-size: var(--type-h3); font-weight: 620; letter-spacing: -0.01em; margin: var(--space-5) 0 var(--space-2); }
.checklist-desc { color: var(--muted); max-width: 60ch; margin: 0 0 var(--space-4); }
.check-group { border: 0; border-radius: 0; padding: var(--space-4) 0 0; margin: 0 0 var(--space-4); border-top: 1px solid var(--hair); }
.check-group:first-of-type { border-top: 0; padding-top: 0; }
.check-group legend {
  padding: 0;
  font-family: var(--font-ui);
  font-size: var(--type-caption);
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: var(--space-2);
}
.check-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  padding: 9px 0;
  cursor: pointer;
}
.check-row input[type="checkbox"] { width: 16px; height: 16px; margin: 3px 0 0; accent-color: var(--navy-deep); }
.check-row span { font-size: var(--type-body); line-height: 1.5; color: var(--ink-soft); }
.form-group-label {
  font-family: var(--font-ui);
  font-size: var(--type-caption);
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  margin: var(--space-5) 0 var(--space-2);
  border-top: 1px solid var(--hair);
  padding-top: var(--space-4);
}

/* Review application area: wider column, de-carded (Contact keeps its card) */
.wrap--form.wrap--wide { max-width: 720px; }
.form--flat {
  margin-top: var(--space-4);
  padding: 0;
  background: transparent;
  border-top: 0;
  box-shadow: none;
}

/* Honeypot: real users never see it; bots that fill it are dropped */
.hp-field { position: absolute; left: -9999px; }

@media (max-width: 768px) {
  :root { --space-7: 64px; --space-8: 72px; --space-6: 48px; --section-space: 48px; }

  .sec-head, .outline > li { grid-template-columns: 1fr; gap: 6px; }
  .sec-num, .outline .outline-num { padding-top: 0; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .case-path { grid-template-columns: 1fr; }
  .case-path li { padding: var(--space-3) 0; }
  .case-path li:not(:last-child) { border-bottom: 1px solid var(--hair); }
  .case-path li:not(:last-child)::after { content: "\2193"; right: 2px; }
  .case-preview img { aspect-ratio: 4 / 3; }
  .steps { grid-template-columns: 1fr; }
  .steps li { border-right: 0; }
  .problem-list li, .standards li { grid-template-columns: 1fr; gap: 6px; }
  .method-desktop { display: none; }
  .method-mobile { display: block; }
  .io-row { grid-template-columns: 1fr; gap: 2px; }
  .verdict { grid-template-columns: 1fr; gap: 2px; }
  .id-row { grid-template-columns: 1fr; gap: 2px; }
  .proof-row { grid-template-columns: 1fr; gap: 4px; padding: 12px 16px; }
  .proof-panel-head, .proof-panel-foot { padding-left: 16px; padding-right: 16px; }
  .final-id { border-left: 0; padding-left: 0; border-top: 1px solid var(--hair); padding-top: var(--space-3); }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-grid li { margin-bottom: 0; }
  .footer-grid a { display: inline-block; padding: 12px 0; }
  .footer-grid .ph { display: block; padding: 6px 0; }
  .btn { width: 100%; text-align: center; }
  .cta-row { flex-direction: column; }
  .footer-bottom { flex-direction: column; }
  :root { --space-7: 72px; --space-8: 94px; }
  .site-header { backdrop-filter: none; }
  .header-inner { min-height: 70px; }
  .nav-toggle { border-color: rgba(16,33,51,.3); font-weight: 650; }
  .site-nav a[aria-current="page"] { color: var(--accent); }
  .hero { padding-top: 86px; padding-bottom: 96px; }
  .hero::after { left: 24px; right: auto; bottom: 24px; }
  .hero .eyebrow { margin-bottom: 30px; }
  .sec-head { grid-template-columns: 1fr; gap: 10px; margin-bottom: 38px; }
  .band-ink { padding: 68px 0; }
  .proof-panel { box-shadow: 8px 8px 0 rgba(16,33,51,.08); }
  .proof-row { grid-template-columns: 1fr; padding: 18px; }
  .steps li { min-height: 0; }
  .form:not(.form--flat) { padding: 28px 20px; }
  .footer-grid { grid-template-columns: 1fr; }
  :root {
    --type-caption: 0.8125rem; /* 13px: never shrink labels below this */
    --type-small: 0.9375rem;
    --type-body: 1.0625rem;    /* 17px */
    --type-lead: clamp(1.2rem, 5.2vw, 1.4rem);
    --type-h3: clamp(1.3rem, 6vw, 1.6rem);
    --type-h2: clamp(1.7rem, 7.5vw, 2.5rem);
    --type-h1: clamp(1.955rem, 8.28vw, 2.875rem);
  }

  body { line-height: 1.62; }
  .brand { font-size: 1rem; letter-spacing: 0.035em; }
  .site-nav a { font-size: var(--type-nav); }
  .hero .lede { line-height: 1.55; }
  .hero::after { width: 96px; }
  .btn { font-size: 0.8125rem; }
  .text-link { display: inline-block; padding: 13px 0; }
  .nav-toggle { margin-left: auto; }
  .hero h1 { line-height: 1.08; }
  .hero .lede { line-height: 1.45; margin-top: 18px; }
  /* The 04→05 hinge label was the only label below the 13px caption floor. */
  .method-hinge-label { font-size: var(--type-caption); }
  body.home .hero .cta-row { margin-top: 28px; }
}

@media (max-width: 560px) {
  .brand-sub { display: none; }
  /* Vertical padding grows the tap target to ~34px on phones (inline element,
     so layout height is unaffected) without changing the header. */
  .brand { font-size: 0.95rem; white-space: nowrap; padding: 8px 0; }
  .header-inner { gap: var(--space-2); min-height: 60px; }
  .nav-toggle { padding: 10px 12px; }
}

@media (max-width: 360px) {
  .brand { font-size: 0.9rem; }
  .nav-toggle { padding: 8px 10px; }
}

/* <=480: footer-bottom keeps padding-top 0 — historical behavior of the
   retired .wrap { padding: 0 18px } shorthand (footer-bottom carries .wrap;
   its own padding-top var(--space-3) was zeroed by that shorthand at <=480).
   Preserved intentionally to avoid a visual regression. */
@media (max-width: 480px) {
  .footer-bottom { padding-top: 0; }
}

/* Mobile section index for long pages: jump directly without hiding content. */
.mobile-page-index { display: none; }
.home-section-details > summary { list-style: none; }
.home-section-details > summary::-webkit-details-marker { display: none; }
.section > .home-section-details > .home-section-content { padding-left: var(--sec-indent); }
@media (max-width: 768px) {
  body.home,
  body.page-method,
  body.page-review,
  body.page-about { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }

  .mobile-page-index {
    display: block;
    position: fixed;
    z-index: 45;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    left: 12px;
    max-width: 520px;
    margin: 0 auto;
  }
  .mobile-page-index details {
    position: relative;
    border: 1px solid var(--hair);
    background: var(--paper-light);
    box-shadow: 0 4px 18px rgba(16, 33, 51, 0.12);
  }
  .mobile-page-index summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    padding: 0 18px;
    color: var(--ink);
    font-size: var(--type-control);
    font-weight: 650;
    cursor: pointer;
    list-style: none;
  }
  .mobile-page-index summary::-webkit-details-marker { display: none; }
  .mobile-page-index summary::after {
    content: "+";
    color: var(--accent);
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
  }
  .mobile-page-index details[open] summary::after { content: "−"; }
  .mobile-page-index__panel {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    left: 0;
    display: grid;
    gap: 0;
    max-height: min(58vh, 480px);
    max-height: min(58dvh, 480px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px 18px;
    border: 1px solid var(--hair);
    background: var(--paper-light);
    box-shadow: 0 4px 18px rgba(16, 33, 51, 0.12);
  }
  .mobile-page-index__panel a {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid var(--hair);
    color: var(--ink);
    font-size: var(--type-small);
    line-height: 1.35;
  }
  .mobile-page-index__panel a:last-child { border-bottom: 0; }
  .mobile-page-index__panel a:focus-visible,
  .mobile-page-index summary:focus-visible { outline-offset: -2px; }
  main[id],
  main [id] { scroll-margin-top: 112px; }

  .home-section-details > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 56px;
    cursor: pointer;
  }
  .home-section-details > summary::after {
    content: "+";
    flex: 0 0 30px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--hair);
    border-radius: 50%;
    color: var(--ink);
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
  }
  .home-section-details[open] > summary::after { content: "−"; }
  .home-section-details > summary:focus-visible { outline-offset: 2px; }
  .home-section-details .sec-head { margin-bottom: 0; }
  .home-section-details[open] > summary .sec-head { margin-bottom: 20px; }
  .section > .home-section-details > .home-section-content { padding-left: 0; }
}


/* About: keep sections 01–04 on the same 5:7 columns as the hero.
   Number, kicker and heading share one left column; all explanatory content,
   notes and actions share the right column. The right column begins beside the
   heading, just as the hero copy begins beside its headline. */
@media (min-width: 993px) {
  #background,
  #selected-work,
  #confidentiality,
  #talk {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(32px, 4vw, 72px);
    row-gap: 0;
    align-items: start;
  }

  #background > *,
  #selected-work > *,
  #confidentiality > *,
  #talk > * { padding-left: 0; }

  #background > .sec-head,
  #selected-work > .sec-head,
  #confidentiality > .sec-head,
  #talk > .sec-head,
  #background > .sec-head > div,
  #selected-work > .sec-head > div,
  #confidentiality > .sec-head > div,
  #talk > .sec-head > div { display: contents; }

  #background > .sec-head,
  #selected-work > .sec-head,
  #confidentiality > .sec-head,
  #talk > .sec-head { margin-bottom: 0; }

  #background > .sec-head .sec-num,
  #selected-work > .sec-head .sec-num,
  #confidentiality > .sec-head .sec-num,
  #talk > .sec-head .sec-num {
    grid-column: 1;
    grid-row: 1;
  }

  #background > .sec-head .sec-kicker,
  #selected-work > .sec-head .sec-kicker,
  #confidentiality > .sec-head .sec-kicker,
  #talk > .sec-head .sec-kicker {
    grid-column: 1;
    grid-row: 2;
  }

  #background > .sec-head .caps-head,
  #selected-work > .sec-head .caps-head,
  #confidentiality > .sec-head .caps-head,
  #talk > .sec-head .caps-head {
    grid-column: 1;
    grid-row: 3;
    max-width: none;
  }

  #background > .grid-2 {
    grid-column: 2;
    grid-row: 3;
    display: block;
    margin: 0;
  }
  #background > .grid-2 > .editorial + .editorial { margin-top: 24px; }

  #selected-work > .work-head { display: contents; }
  #selected-work > .work-head > .work-meta {
    grid-column: 2;
    grid-row: 3;
    position: static;
    margin-bottom: 24px;
  }
  #selected-work > .work-head > .work-copy {
    grid-column: 2;
    grid-row: 4;
    max-width: 58ch;
    margin-left: 0;
  }
  #selected-work > .cta-row { grid-column: 2; grid-row: 5; }

  #confidentiality > .about-copy,
  #talk > .about-copy {
    grid-column: 2;
    grid-row: 3;
    max-width: 58ch;
    margin: 0;
  }
  #confidentiality > .note-block {
    grid-column: 2;
    grid-row: 4;
    margin-top: 24px;
    padding-right: 0;
  }

  #talk > .cta-row--end {
    grid-column: 2;
    grid-row: 4;
    width: 100%;
    max-width: 58ch;
    margin: 28px 0 0;
    justify-content: flex-start;
  }
  #talk > .cta-row--end .btn { width: auto; }
  #talk > .cta-email {
    grid-column: 2;
    grid-row: 5;
    max-width: 58ch;
    margin: 18px 0 0;
  }
  #talk > .note-block {
    grid-column: 2;
    grid-row: 6;
    margin-top: 24px;
    padding-right: 0;
  }
}

/* CTA controls share one visual language across every page. The ghost class
   remains in the markup for hierarchy, but button bars use the same filled
   treatment; dark hero bands invert the palette to preserve contrast. */
.btn.btn--primary,
.btn.btn--ghost {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper-light);
  text-decoration: none;
}

.btn.btn--primary:hover,
.btn.btn--ghost:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper-light);
  text-decoration: none;
}

.hero .btn.btn--primary,
.hero .btn.btn--ghost {
  background: var(--paper-light);
  border-color: var(--paper-light);
  color: var(--navy-deep);
}

.hero .btn.btn--primary:hover,
.hero .btn.btn--ghost:hover {
  background: var(--copper-light);
  border-color: var(--copper-light);
  color: var(--navy-deep);
}

/* The contact form sits on a light card inside its dark hero. */
.hero.hero--contact .form .btn.btn--primary,
.hero.hero--contact .form .btn.btn--ghost {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper-light);
}

.hero.hero--contact .form .btn.btn--primary:hover,
.hero.hero--contact .form .btn.btn--ghost:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper-light);
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 1;
  cursor: not-allowed;
}

.btn[disabled]:hover,
.btn[aria-disabled="true"]:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper-light);
}

.hero .btn[disabled]:hover,
.hero .btn[aria-disabled="true"]:hover {
  background: var(--paper-light);
  border-color: var(--paper-light);
  color: var(--navy-deep);
}

/* At tablet widths the hero itself becomes a single column, so About sections
   follow it instead of keeping a compressed two-column layout. */
@media (min-width: 769px) and (max-width: 992px) {
  #background > .grid-2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    margin: 0;
  }
  #selected-work > .work-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 24px;
  }
  #selected-work > .work-head .work-copy { max-width: 58ch; margin-left: 0; }
  #confidentiality > .about-copy,
  #talk > .about-copy {
    max-width: 58ch;
    margin-left: 100px;
  }
  #confidentiality > .note-block,
  #talk > .note-block {
    max-width: 58ch;
    margin-left: 100px;
    padding-left: 0;
    padding-right: 0;
  }
  #talk > .cta-row--end {
    width: auto;
    max-width: calc(100% - 100px);
    margin-left: 100px;
    padding-left: 0;
  }
  #talk > .cta-row--end .btn { width: auto; }
  #talk > .cta-email {
    max-width: 58ch;
    margin-left: 100px;
  }
}

@media (max-width: 768px) {
  #confidentiality > .about-copy,
  #talk > .about-copy,
  #confidentiality > .note-block,
  #talk > .note-block,
  #talk > .cta-row--end,
  #talk > .cta-email {
    width: auto;
    max-width: none;
    margin-left: 0;
    padding-left: 0;
    padding-right: 0;
  }
}

/* A few editorial conclusions share one restrained highlight style. */
.key-conclusion {
  display: inline-block;
  max-width: 64ch;
  padding: 12px 16px;
  background: var(--sand);
  color: var(--ink);
  font-size: var(--type-small);
  font-weight: 500;
  line-height: 1.6;
}

/* Method: readable problem/result rows, with limits kept beside the result. */
body.page-method .io-row p {
  font-size: var(--type-body);
  line-height: 1.65;
  max-width: 64ch;
}
body.page-method .io-row:last-child p {
  color: var(--ink);
  font-weight: 500;
}
body.page-method .stage-io { margin-bottom: 0; }
body.page-method .method-stage-content > .note-block {
  border-top: 0;
  margin-top: 12px;
  padding-top: 0;
  padding-right: 0;
  padding-left: 174px;
  max-width: 82ch;
  font-size: var(--type-small);
  line-height: 1.6;
}
@media (max-width: 768px) {
  body.page-method .method-stage-content > .note-block { padding-left: 0; }
}

/* Mobile reading flow: keep summaries visible and let long supporting detail
   stay optional without removing it from the document. */
@media (min-width: 769px) {
  .method-stage-details > summary,
  .proof-example > summary,
  .about-hero-details > summary { display: none; }
}

@media (max-width: 768px) {
  body.page-review .section,
  body.page-method .section { padding-top: var(--section-space); padding-bottom: var(--section-space); }

  body.page-review .sec-head,
  body.page-method .sec-head { margin-bottom: 22px; }

  body.page-review .outline > li { padding: 20px 0; }
  body.page-review .outline h3 { margin-bottom: 4px; }
  body.page-review .note-block { margin-top: 22px; }
  body.page-review .review-hero-cta { margin: 24px 0 0; }

  .proof-example { margin-top: 22px; }
  .proof-example > summary,
  .method-stage-details > summary,
  .about-hero-details > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 48px;
    list-style: none;
    cursor: pointer;
    color: var(--accent);
    font-weight: 650;
    line-height: 1.45;
    text-underline-offset: 0.2em;
  }
  .proof-example > summary::-webkit-details-marker,
  .method-stage-details > summary::-webkit-details-marker,
  .about-hero-details > summary::-webkit-details-marker { display: none; }
  .proof-example > summary::after,
  .method-stage-details > summary::after,
  .about-hero-details > summary::after {
    content: "+";
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border: 1px solid var(--hair);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--ink);
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
  }
  .proof-example[open] > summary::after,
  .method-stage-details[open] > summary::after,
  .about-hero-details[open] > summary::after { content: "−"; }
  .proof-example > summary:focus-visible,
  .method-stage-details > summary:focus-visible,
  .about-hero-details > summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
  }
  .proof-example > summary {
    padding: 14px 0;
    border-top: 1px solid var(--hair);
  }
  .proof-example .proof-panel { margin-top: 6px; }

  .method-stage-details { margin-top: 16px; }
  .method-stage-details > summary {
    padding: 12px 0;
    border-top: 1px solid var(--hair);
    border-bottom: 1px solid var(--hair);
  }
  .about-hero-details { margin-top: 20px; }
  .about-hero-details > summary {
    padding: 12px 0;
    border-top: 1px solid rgba(251, 250, 246, 0.25);
    color: var(--copper-light);
  }
  .about-hero-details > summary::after {
    border-color: rgba(251, 250, 246, 0.25);
    color: var(--paper-light);
  }
  .about-hero-details > summary:focus-visible { outline-color: var(--copper-light); }
  body.page-method .method-overview-intro { margin-bottom: 20px; }
  body.page-method .method-hinge { padding-top: 28px; }
}

@media (max-width: 768px) {
  body.home .section > .sec-head { margin-bottom: 24px; }
  body.home .bullets li,
  body.home .outline > li,
  body.home .steps li,
  body.home .problem-list li,
  body.home .standards li { padding-top: 20px; padding-bottom: 20px; }
  body.home .outline h3 { margin-bottom: 4px; }
  body.home .proof-panel,
  body.home .statement-block,
  body.home .section .note-block { margin-top: 24px; }
}