/* ============================================================
   Mihr Legal — Localhost prototype stylesheet
   Design language: minimalist, credible, modern legal.
   Single accent navy, generous whitespace, serif headlines.
   ============================================================ */

:root {
  --color-bg: #fafaf9;
  --color-surface: #ffffff;
  --color-surface-2: #f5f5f4;
  --color-text: #0a0a0a;
  --color-text-muted: #525252;
  --color-text-subtle: #737373;
  --color-border: #e7e5e4;
  --color-border-subtle: #f1f0ee;
  --color-accent: #0a2540;
  --color-accent-hover: #163a64;
  --color-accent-subtle: #eef2f7;
  --color-success: #15803d;
  --color-warning: #b45309;

  --font-display: "Instrument Serif", ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.06);

  --container-max: 1200px;
  --container-narrow: 760px;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv01", "cv11";
}

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--color-text);
}

h1 { font-size: clamp(2.75rem, 5.5vw, 4.75rem); }
h2 { font-size: clamp(2rem, 3.5vw, 3rem); }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.125rem; font-family: var(--font-body); font-weight: 600; letter-spacing: -0.005em; }

p { color: var(--color-text-muted); }

a { color: var(--color-accent); text-decoration: none; transition: color 0.15s ease; }
a:hover { color: var(--color-accent-hover); }

img, svg { display: block; max-width: 100%; }

/* ----- Layout ----- */
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 24px; }

section { padding: 112px 0; }
section.compact { padding: 72px 0; }
section.tight { padding: 48px 0; }

.eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: 500;
  margin-bottom: 16px;
  display: inline-block;
}

.section-header { margin-bottom: 72px; max-width: 720px; }
.section-header h2 { margin-bottom: 16px; }
.section-header p { font-size: 1.125rem; line-height: 1.5; }

/* ----- Header / nav ----- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 250, 249, 0.78);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--color-border-subtle);
}

/* Anchor-link scroll offset — sticky header (~62px) plus breathing room.
   Matches the 96px convention used elsewhere (.legal-section, .service-sidebar top). */
#services,
#how-it-works,
#work,
#month,
#faq,
#contact {
  scroll-margin-top: 96px;
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
}

.brand {
  font-family: var(--font-display);
  font-size: 1.55rem;
  color: var(--color-text);
  text-decoration: none;
  letter-spacing: -0.025em;
  line-height: 1;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.brand:hover { color: var(--color-text); }
.brand-diamond {
  width: 7px;
  height: 7px;
  color: var(--color-accent);
  flex-shrink: 0;
  display: block;
}
/* Legacy classes from earlier iterations — hidden so any stale markup degrades cleanly */
.brand-logo, .brand-name, .brand-m, .brand-mark { display: none; }

.nav-links {
  display: flex;
  gap: 32px;
  align-items: center;
  list-style: none;
}
.nav-links a {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  font-weight: 450;
}
.nav-links a:hover { color: var(--color-text); }

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ----- Buttons ----- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 13px 22px;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.95rem;
  text-decoration: none;
  transition: all 0.15s ease;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
}

.btn-primary {
  background: var(--color-text);
  color: var(--color-bg);
}
.btn-primary:hover {
  background: #2a2a2a;
  color: var(--color-bg);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-secondary {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn-secondary:hover {
  border-color: var(--color-text);
  color: var(--color-text);
}

.btn-ghost {
  background: transparent;
  color: var(--color-accent);
  padding: 8px 0;
}
.btn-ghost::after { content: "→"; margin-left: 4px; transition: transform 0.15s ease; }
.btn-ghost:hover::after { transform: translateX(3px); }

.btn-sm { padding: 9px 16px; font-size: 0.875rem; }
.btn-lg { padding: 16px 28px; font-size: 1rem; }

/* Brand M as a stamp on the primary CTA — sits after the text like a signature */
.btn-m {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: block;
  opacity: 1;
  transition: transform 0.2s ease;
}
.btn:hover .btn-m { transform: translateX(2px); }

/* ----- Hero ----- */
.hero {
  padding: 96px 0 64px;
  position: relative;
  overflow: hidden;
}
.hero > .container { position: relative; z-index: 1; }
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-bottom: 32px;
}
.hero-eyebrow .dot {
  width: 6px;
  height: 6px;
  background: var(--color-success);
  border-radius: 50%;
  display: inline-block;
}
.hero h1 { max-width: 16ch; margin-bottom: 28px; }
.hero p.lead {
  font-size: 1.25rem;
  color: var(--color-text-muted);
  max-width: 52ch;
  margin-bottom: 40px;
  line-height: 1.5;
}
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }

/* ----- Trust strip ----- */
.trust-strip {
  padding: 36px 0;
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--color-surface);
}
.trust-strip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.trust-item { font-size: 0.95rem; color: var(--color-text-muted); line-height: 1.4; }
.trust-item strong { color: var(--color-text); font-weight: 500; display: block; font-size: 1.05rem; margin-bottom: 2px; }

/* ----- Services grid ----- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--color-border-subtle);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.service-card {
  background: var(--color-surface);
  padding: 42px 36px;
  display: flex;
  flex-direction: column;
  border: 1px solid transparent;
  transition:
    background 200ms ease,
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 220ms ease,
    box-shadow 220ms ease;
  position: relative;
  min-height: 280px;
}
.service-card:hover {
  background: #fdfcfb;
  transform: translateY(-3px);
  border-color: rgba(10, 37, 64, 0.08);
  box-shadow: 0 10px 32px rgba(10, 37, 64, 0.06);
}
.service-card h3 {
  font-size: 1.55rem;
  margin-bottom: 10px;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.service-meta-inline {
  font-size: 0.875rem;
  color: var(--color-text-subtle);
  margin-bottom: 26px;
  font-feature-settings: "tnum";
  letter-spacing: 0;
}
.service-meta-inline strong {
  color: var(--color-text);
  font-weight: 500;
}
.service-meta-inline .dot-sep {
  margin: 0 9px;
  opacity: 0.5;
}
.service-card .service-desc {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  margin-bottom: 28px;
  line-height: 1.6;
  flex: 1;
}
.service-card .service-cta {
  font-size: 0.92rem;
  color: var(--color-accent);
  font-weight: 500;
  align-self: flex-start;
}
.service-card .service-cta::after {
  content: " →";
  display: inline-block;
  transition: transform 0.15s ease;
}
.service-card:hover .service-cta::after { transform: translateX(3px); }

/* Legacy classes — preserved so older markup still renders, but hidden in new minimal cards */
.service-card .service-icon,
.service-card .service-card-header,
.service-card .service-badges,
.service-card .service-for,
.service-card .meta { display: none; }

/* ----- How it works (steps) ----- */
.steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 36px;
  counter-reset: step;
}

/* 3-phase variant — wider columns, more breathing room */
.steps.steps-three {
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}

.steps-three .step h3 { font-size: 1.25rem; }
.steps-three .step p { font-size: 1rem; max-width: 32ch; }

/* ============================================================
   Vertical timeline variant — numbered circles connected by a line.
   Breaks the grid-on-grid rhythm in the middle of the page.
   ============================================================ */

.steps.steps-vertical {
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
  gap: 0;
  max-width: 720px;
  margin: 0 auto;
}

/* Per-step line segments — each step draws its own line piece.
   First step: line starts at its circle center, ends at step bottom.
   Middle steps: line spans full step height.
   Last step: line starts at step top, ends at its circle center.
   Circles overlay the line via z-index, hiding the line where they sit. */
.steps-vertical .step::before {
  content: '';
  position: absolute;
  left: 31px;
  top: 0;
  bottom: 0;
  width: 2.5px;
  background: rgba(90, 136, 179, 0.55);
  border-radius: 1.5px;
  z-index: 0;
}

.steps-vertical .step:first-child::before {
  top: 52px;
}

.steps-vertical .step:last-child::before {
  bottom: calc(100% - 52px);
}

.steps-vertical .step {
  display: grid;
  grid-template-columns: 64px 1fr;
  grid-template-areas:
    "meta heading"
    "meta body";
  column-gap: 32px;
  row-gap: 4px;
  padding: 28px 0;
  border-top: none;
  align-items: start;
  position: relative;
}

.steps-vertical .step .step-meta { grid-area: meta; }
.steps-vertical .step h3 { grid-area: heading; }
.steps-vertical .step p { grid-area: body; }

.steps-vertical .step .step-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 64px;
}

/* Hide the icons in vertical — numbered circle is enough */
.steps-vertical .step-icon { display: none; }

/* All circles use slate blue from the bird palette — color-consistent. */
.steps-vertical .step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-bg);
  border: 2px solid #5A88B3;
  color: #5A88B3;
  font-size: 0.95rem;
  font-weight: 700;
  font-family: var(--font-body);
  font-feature-settings: "tnum";
  letter-spacing: 0;
  position: relative;
  z-index: 1;
}

/* step-us = firm action — filled slate-blue circle (completed feel) */
.steps-vertical .step-us .step-number {
  background: #5A88B3;
  border-color: #5A88B3;
  color: #ffffff;
  box-shadow: 0 3px 12px rgba(90, 136, 179, 0.3);
}

/* Hide the time labels in vertical — they looked orphaned hanging
   below the circles. Timing info is already in the body text. */
.steps-vertical .step-time {
  display: none;
}

.steps-vertical .step h3 {
  font-size: 1.45rem;
  margin: 8px 0 8px;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.steps-vertical .step p {
  margin: 0;
  font-size: 1rem;
  color: var(--color-text-muted);
  max-width: 58ch;
  line-height: 1.6;
}

@media (max-width: 720px) {
  .steps-vertical .step {
    grid-template-columns: 48px 1fr;
    column-gap: 18px;
    row-gap: 4px;
    padding: 22px 0;
  }
  .steps-vertical .step:not(:last-child)::before {
    left: 23px;
    top: 64px;
  }
  .steps-vertical .step .step-meta {
    width: 48px;
  }
  .steps-vertical .step-number {
    width: 40px;
    height: 40px;
    font-size: 0.85rem;
  }
  .steps-vertical .step h3 {
    font-size: 1.2rem;
    margin: 4px 0 6px;
  }
}

/* ============================================================
   Your Lawyer — single-column statement (replaces 2-col grid)
   ============================================================ */

.your-lawyer-single {
  padding: 100px 0;
}

.your-lawyer-statement {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}

.your-lawyer-statement .eyebrow {
  display: inline-block;
  margin-bottom: 18px;
}

.your-lawyer-statement .your-lawyer-h2 {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  line-height: 1.08;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 0 auto 24px;
  max-width: 16ch;
  color: var(--color-text);
}

.your-lawyer-statement .founder-bio {
  font-size: 1.15rem;
  color: var(--color-text-muted);
  line-height: 1.65;
  margin: 0 auto;
  max-width: 52ch;
}

.your-lawyer-credentials-strip {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--color-border-subtle);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 14px;
  font-size: 0.82rem;
  color: var(--color-text-subtle);
  letter-spacing: 0.02em;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.your-lawyer-credentials-strip .dot-sep {
  color: var(--color-border);
}

.your-lawyer-credentials-strip .practice-areas {
  color: var(--color-text-muted);
}

@media (max-width: 720px) {
  .your-lawyer-single { padding: 72px 0; }
  .your-lawyer-credentials-strip {
    margin-top: 40px;
    padding-top: 24px;
    font-size: 0.78rem;
  }
}

/* ============================================================
   Your Lawyer — asymmetric mirror of hero. Bird (takeoff) on right.
   ============================================================ */

.your-lawyer-asymm-wrap {
  padding: 120px 0;
}

.your-lawyer-asymm {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 72px;
  align-items: center;
}

.your-lawyer-narrative {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 520px;
}

.your-lawyer-h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.08;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 18ch;
  color: var(--color-text);
}

.your-lawyer-narrative .founder-bio {
  color: var(--color-text-muted);
  font-size: 1.05rem;
  line-height: 1.65;
  margin: 0;
  max-width: 50ch;
}

.your-lawyer-inline-credentials {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 16px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--color-border-subtle);
}

.your-lawyer-inline-credentials div { margin: 0; }
.your-lawyer-inline-credentials dt {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-subtle);
  margin-bottom: 4px;
  font-weight: 500;
}
.your-lawyer-inline-credentials dd {
  font-size: 0.95rem;
  color: var(--color-text);
  font-weight: 500;
  margin: 0;
  line-height: 1.45;
}

.your-lawyer-bird-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

.lawyer-bird {
  width: 100%;
  max-width: 560px;
  height: auto;
  display: block;
  -webkit-mask-image: radial-gradient(ellipse 72% 78% at center, black 52%, transparent 88%);
  mask-image: radial-gradient(ellipse 72% 78% at center, black 52%, transparent 88%);
  mix-blend-mode: multiply;
}

@media (max-width: 880px) {
  .your-lawyer-asymm-wrap { padding: 80px 0; }
  .your-lawyer-asymm {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .your-lawyer-bird-wrap { order: -1; }
  .lawyer-bird { max-width: 340px; }
}

@media (max-width: 540px) {
  .lawyer-bird { max-width: 280px; }
}

/* ============================================================
   Comparison table — visual scannability with ✓/— indicators
   ============================================================ */
.comparison-row .comparison-col.mihr::before {
  content: "✓";
  display: inline-block;
  color: var(--color-accent);
  font-weight: 700;
  margin-right: 10px;
  font-size: 1.05em;
  vertical-align: -1px;
}
.comparison-row .comparison-col.traditional::before {
  content: "—";
  display: inline-block;
  color: var(--color-text-subtle);
  margin-right: 10px;
  opacity: 0.55;
  font-weight: 600;
  vertical-align: -1px;
}

/* Mobile: hide the ::before since cells stack and the data-label prefix already
   indicates which side is which */
@media (max-width: 720px) {
  .comparison-row .comparison-col.mihr::before,
  .comparison-row .comparison-col.traditional::before {
    display: none;
  }
}

.step {
  position: relative;
  padding-top: 22px;
  border-top: 2px solid var(--color-border);
  transition: border-top-color 0.2s ease;
}
.step.step-us { border-top-color: var(--color-accent); }
.step::before {
  /* Legacy counter — number is now inline in the meta row */
  display: none;
}
.step-meta {
  display: flex;
  gap: 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
  align-items: baseline;
}
.step-number {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--color-text-subtle);
  font-feature-settings: "tnum";
  line-height: 1;
  letter-spacing: 0;
}
.step-time {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
  font-weight: 500;
  line-height: 1;
}
/* Legacy pill classes — preserved so older markup degrades gracefully */
.step-tag, .step-tag-you, .step-tag-us, .step-tag-time { display: none; }
.step h3 {
  font-size: 1.1rem;
  margin-bottom: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: -0.005em;
}
.step p { font-size: 0.95rem; line-height: 1.55; color: var(--color-text-muted); }

/* ----- Why us features ----- */
.features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 56px 64px;
}
.feature h3 {
  font-size: 1.25rem;
  margin-bottom: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: -0.005em;
}
.feature p { color: var(--color-text-muted); font-size: 0.95rem; line-height: 1.6; }

/* ----- Trust section ----- */
.trust-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.trust-list { list-style: none; }
.trust-list li {
  padding: 18px 0;
  border-bottom: 1px solid var(--color-border-subtle);
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.trust-list li:last-child { border-bottom: none; }
.trust-list .check {
  color: var(--color-success);
  flex-shrink: 0;
  margin-top: 2px;
  font-weight: 600;
}
.trust-list .label { font-weight: 500; color: var(--color-text); display: block; margin-bottom: 2px; }
.trust-list .desc { color: var(--color-text-muted); font-size: 0.92rem; line-height: 1.5; }

.disclaimer-box {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 28px;
}
.disclaimer-box h4 { margin-bottom: 10px; font-size: 1rem; }
.disclaimer-box p {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.55;
  margin-bottom: 12px;
}
.disclaimer-box p:last-child { margin-bottom: 0; }

/* ----- Funnel diagram ----- */
.funnel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}
.funnel-step {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 18px 24px;
  border-radius: var(--radius-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.funnel-step .label { font-weight: 500; }
.funnel-step .note { color: var(--color-text-subtle); font-size: 0.875rem; }

/* ----- Big CTA section ----- */
.cta-section {
  background: var(--color-text);
  color: var(--color-bg);
  padding: 112px 0;
  text-align: center;
}
.cta-section .eyebrow { color: rgba(255, 255, 255, 0.7); }
.cta-section h2 { color: var(--color-bg); margin-bottom: 20px; max-width: 18ch; margin-left: auto; margin-right: auto; }
.cta-section p {
  color: rgba(255, 255, 255, 0.72);
  font-size: 1.125rem;
  margin-bottom: 36px;
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
}
.cta-section .btn-primary { background: var(--color-bg); color: var(--color-text); }
.cta-section .btn-primary:hover { background: #ebebeb; }
.cta-section .btn-secondary { color: var(--color-bg); border-color: rgba(255, 255, 255, 0.2); }
.cta-section .btn-secondary:hover { border-color: var(--color-bg); }

/* ----- Footer ----- */
.site-footer {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border-subtle);
  padding: 72px 0 32px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 64px;
}
.footer-brand { max-width: 340px; }
.footer-brand .brand { font-size: 1.7rem; margin-bottom: 16px; letter-spacing: -0.03em; }
.footer-brand p { font-size: 0.9rem; color: var(--color-text-muted); }
.footer-col h5 {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 18px;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 8px; }
.footer-col a {
  color: var(--color-text-muted);
  font-size: 0.92rem;
}
.footer-col a:hover { color: var(--color-text); }
.footer-bottom {
  padding-top: 32px;
  border-top: 1px solid var(--color-border-subtle);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.825rem;
  color: var(--color-text-subtle);
}
.footer-bottom a { color: var(--color-text-subtle); }
.footer-bottom a:hover { color: var(--color-text); }

/* ----- Forms ----- */
.form-wrap {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 48px;
  box-shadow: var(--shadow-sm);
}
.form-section-title {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border-subtle);
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 32px;
}
.form-grid .full { grid-column: span 2; }
.form-field { display: flex; flex-direction: column; }
.form-field label {
  font-size: 0.9rem;
  color: var(--color-text);
  margin-bottom: 8px;
  font-weight: 500;
}
.form-field label .req { color: var(--color-warning); margin-left: 2px; }
.form-field label .opt { color: var(--color-text-subtle); font-weight: 400; font-size: 0.825rem; margin-left: 6px; }
.form-field input,
.form-field select,
.form-field textarea {
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 0.975rem;
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 L6 6.5 L11 1.5' fill='none' stroke='%23525252' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
  padding-right: 42px;
  cursor: pointer;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(10, 37, 64, 0.08);
}
.form-field textarea { resize: vertical; min-height: 130px; line-height: 1.5; }
.form-field .help {
  font-size: 0.825rem;
  color: var(--color-text-subtle);
  margin-top: 6px;
  line-height: 1.45;
}

.file-drop {
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: 32px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.file-drop:hover { border-color: var(--color-accent); background: var(--color-accent-subtle); }
.file-drop .file-drop-label { color: var(--color-text); font-weight: 500; }
.file-drop .file-drop-help { font-size: 0.85rem; color: var(--color-text-subtle); margin-top: 4px; }

/* Intake — explanation of why no document upload at this stage */
.form-doc-note {
  background: var(--color-accent-subtle);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 20px 22px;
}
.form-doc-note p {
  font-size: 0.92rem;
  color: var(--color-text);
  line-height: 1.55;
  margin-bottom: 10px;
}
.form-doc-note p:last-child { margin-bottom: 0; color: var(--color-text-muted); font-size: 0.88rem; }
.form-doc-note strong { color: var(--color-accent); font-weight: 600; }

.form-actions {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.form-consent-block {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.form-consent {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.9rem;
  color: var(--color-text);
  line-height: 1.55;
  cursor: pointer;
}
.form-consent input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  accent-color: var(--color-accent);
  cursor: pointer;
}
.form-actions .btn {
  width: 100%;
  padding: 18px 28px;
  font-size: 1rem;
  justify-content: center;
  gap: 10px;
}

/* ============================================================
   Intake success state — calm, type-driven, non-lawyer-friendly
   ============================================================ */
.form-success {
  display: none;
  background: #f7fdf9;
  border: 1px solid #c7e9d4;
  border-radius: var(--radius-lg);
  padding: 56px 48px 40px;
  text-align: center;
}
.form-success.active { display: block; }

/* Success state — bird-takeoff video moment (matter submitted → in motion) */
.success-bird-takeoff {
  width: 260px;
  margin: 0 auto 24px;
  display: block;
}
.success-takeoff-video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
  -webkit-mask-image: radial-gradient(ellipse 78% 82% at center, black 55%, transparent 92%);
  mask-image: radial-gradient(ellipse 78% 82% at center, black 55%, transparent 92%);
}
@media (max-width: 640px) {
  .success-bird-takeoff { width: 200px; }
}

.form-success .success-h3 {
  color: #14532d;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  margin: 0 0 14px;
  font-size: 2.1rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.form-success .success-lead {
  color: #1f6f43;
  font-size: 1.0625rem;
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.55;
}
.form-success .success-lead strong { font-weight: 600; color: #14532d; }

.success-next-card {
  margin: 36px auto 0;
  max-width: 600px;
  background: #ffffff;
  border: 1px solid rgba(20, 83, 45, 0.12);
  border-radius: var(--radius-md);
  padding: 28px 32px;
  text-align: left;
  box-shadow: 0 1px 2px rgba(20, 83, 45, 0.04);
}

.success-next-eyebrow {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.7rem;
  font-weight: 600;
  color: #5A88B3;
  margin-bottom: 18px;
}

.success-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
}
.success-steps li {
  display: grid;
  grid-template-columns: 32px 1fr;
  column-gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(20, 83, 45, 0.08);
  counter-increment: step;
  align-items: start;
}
.success-steps li:first-child { padding-top: 4px; }
.success-steps li:last-child { border-bottom: none; padding-bottom: 4px; }
.success-steps li::before {
  content: counter(step);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: #5A88B3;
  font-size: 1.5rem;
  line-height: 1;
  padding-top: 3px;
}
/* Title + body are the 2nd and 3rd grid items in their parent <li>.
   The ::before pseudo (the step number) takes row 1 col 1, the title
   takes row 1 col 2. Without explicit placement the body would auto-flow
   to row 2 col 1 (the 32px number column) and wrap one word per line.
   Forcing grid-column: 2 keeps both items in the content column. */
.success-step-title {
  display: block;
  grid-column: 2;
  font-weight: 600;
  color: var(--color-text);
  font-size: 0.95rem;
  margin-bottom: 4px;
}
.success-step-body {
  display: block;
  grid-column: 2;
  color: var(--color-text-muted);
  font-size: 0.875rem;
  line-height: 1.6;
}

.success-reassurance {
  margin: 28px auto 0;
  max-width: 600px;
  padding: 14px 18px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.8125rem;
  color: #1f6f43;
  line-height: 1.55;
  text-align: left;
}
.success-reassurance-icon {
  flex-shrink: 0;
  color: #1f6f43;
  opacity: 0.65;
  display: flex;
  padding-top: 1px;
}
.success-reassurance-icon svg {
  width: 17px;
  height: 17px;
}

@media (max-width: 640px) {
  .form-success { padding: 40px 24px 28px; }
  .form-success .success-h3 { font-size: 1.7rem; }
  .success-next-card { padding: 22px 20px; }
  .success-reassurance { padding: 14px 4px; }
}

/* Intake hero — "Prefer to talk first?" option */
.hero-talk-option {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--color-border-subtle);
  font-size: 0.95rem;
  color: var(--color-text-muted);
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.hero-talk-option a {
  color: var(--color-accent);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.hero-talk-option a:hover { color: var(--color-accent-hover); }

/* ----- SEO map page styles ----- */
.seo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.seo-card {
  background: var(--color-surface);
  padding: 28px;
  display: flex;
  flex-direction: column;
}
.seo-card h4 {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 14px;
  color: var(--color-text);
}
.seo-card h4 .domain { color: var(--color-text-subtle); font-weight: 400; }
.seo-card dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 16px;
  font-size: 0.875rem;
  margin-bottom: 18px;
}
.seo-card dt {
  color: var(--color-text-subtle);
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  padding-top: 2px;
}
.seo-card dd { color: var(--color-text); line-height: 1.5; }
.seo-card .seo-priority {
  align-self: flex-start;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 14px;
  font-weight: 500;
}
.seo-card .seo-priority.p0 { background: #fef3c7; color: #92400e; }
.seo-card .seo-priority.p1 { background: var(--color-accent-subtle); color: var(--color-accent); }
.seo-card .seo-priority.p2 { background: var(--color-surface-2); color: var(--color-text-subtle); }

/* ----- Strategy / SEO map page hero ----- */
.internal-banner {
  background: var(--color-warning);
  color: white;
  padding: 8px 0;
  text-align: center;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

/* ----- Service detail page ----- */
.service-hero {
  padding: 80px 0 56px;
}
.service-hero .breadcrumb {
  font-size: 0.875rem;
  color: var(--color-text-subtle);
  margin-bottom: 24px;
}
.service-hero .breadcrumb a { color: var(--color-text-subtle); }
.service-hero h1 { font-size: clamp(2.25rem, 4vw, 3.5rem); margin-bottom: 20px; max-width: 22ch; }
.service-hero .price-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-accent-subtle);
  color: var(--color-accent);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 24px;
}
.service-hero p.lead { font-size: 1.15rem; max-width: 56ch; margin-bottom: 32px; }

.service-detail-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 64px;
  padding: 48px 0 96px;
}
.service-detail-main h2 { font-size: 1.75rem; margin: 40px 0 16px; }
.service-detail-main h2:first-child { margin-top: 0; }
.service-detail-main p { margin-bottom: 16px; line-height: 1.65; }
.service-detail-main ul { padding-left: 20px; margin-bottom: 16px; }
.service-detail-main li { margin-bottom: 6px; color: var(--color-text-muted); }

.service-sidebar {
  position: sticky;
  top: 100px;
  align-self: start;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 32px;
}

/* Reusable callout for service detail pages — used where one specific operational fact
   warrants visual emphasis (urgency, eligibility, a specific Ontario rule). One per page max. */
.service-callout {
  background: var(--color-accent-subtle);
  border-left: 3px solid var(--color-accent);
  padding: 18px 22px;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin: 0 0 36px;
  font-size: 0.95rem;
  color: var(--color-text);
  line-height: 1.55;
}
.service-callout strong {
  color: var(--color-accent);
  font-weight: 600;
  margin-right: 4px;
}
.service-sidebar h4 { margin-bottom: 16px; }
.service-sidebar dl {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
.service-sidebar dt {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-subtle);
  margin-bottom: 4px;
}
.service-sidebar dd { color: var(--color-text); font-size: 0.95rem; }

/* ----- Mobile ----- */
@media (max-width: 1024px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); gap: 40px 32px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .service-detail-grid { grid-template-columns: 1fr; }
  .service-sidebar { position: static; }
}

@media (max-width: 768px) {
  section { padding: 72px 0; }
  .hero { padding: 56px 0 48px; }
  .nav-links { display: none; }
  .menu-toggle { display: block; }
  .services-grid { grid-template-columns: 1fr; }
  .trust-strip-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .features, .trust-grid { grid-template-columns: 1fr; gap: 40px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .full { grid-column: 1; }
  .form-wrap { padding: 28px; }
  .form-actions .btn { padding: 16px 24px; font-size: 0.95rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .seo-grid { grid-template-columns: 1fr; }

  /* Hero asymmetric — fill the viewport on mobile, center content vertically.
     min-height: 100dvh uses the dynamic viewport so browser-chrome show/hide
     doesn't cause layout jumps. align-content: center on the single-col grid
     clusters bird + content as a unit in the middle of the available space. */
  .hero-asymm-wrap { min-height: 100vh; min-height: 100dvh; padding: 24px 0 32px; }
  .hero-asymm-wrap .container { flex: 1; }
  .hero-asymm { grid-template-columns: 1fr; gap: 32px; align-content: center; }
  .hero-asymm-content { gap: 16px; max-width: 100%; }
}

/* ============================================================
   ITERATION 2 — P0 polish
   Hero visual, compliance strip, service badges, founder, FAQ
   ============================================================ */

/* ----- Hero two-column layout ----- */
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 72px;
  align-items: center;
}
.hero h1 {
  letter-spacing: -0.025em;
  line-height: 1.04;
}

/* ----- Compliance strip under hero CTAs ----- */
.compliance-strip {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid var(--color-border-subtle);
  flex-wrap: wrap;
}
.compliance-strip-label {
  font-size: 0.72rem;
  color: var(--color-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}
.compliance-items {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.compliance-item {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  font-weight: 450;
}
.compliance-item-icon {
  width: 28px;
  height: 28px;
  background: var(--color-accent-subtle);
  color: var(--color-accent);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0;
  font-family: var(--font-body);
}

/* ----- Hero visual: redlined document mock-up ----- */
.hero-visual { position: relative; }

.doc-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(10, 37, 64, 0.08), 0 2px 8px rgba(0,0,0,0.04);
  overflow: hidden;
  position: relative;
  transform: rotate(-1.2deg);
  transition: transform 0.35s ease;
}
.doc-card:hover { transform: rotate(0deg); }
.doc-card::before {
  content: "";
  position: absolute;
  inset: -10px;
  background: var(--color-accent-subtle);
  border-radius: var(--radius-lg);
  z-index: -1;
  opacity: 0.55;
  transform: rotate(2.5deg);
}

.doc-header {
  padding: 13px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--color-surface-2);
}
.doc-title {
  color: var(--color-text);
  font-weight: 500;
  font-size: 0.85rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.doc-status {
  font-size: 0.68rem;
  background: #dcfce7;
  color: #14532d;
  padding: 4px 11px;
  border-radius: 999px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.doc-content { padding: 22px; }
.doc-line {
  color: var(--color-text-muted);
  margin-bottom: 14px;
  font-size: 0.82rem;
  line-height: 1.55;
}
.doc-line strong { color: var(--color-text); font-weight: 600; }
.doc-redline {
  text-decoration: line-through;
  text-decoration-color: #dc2626;
  text-decoration-thickness: 1.5px;
  color: var(--color-text-subtle);
}
.doc-line.approved {
  color: var(--color-success);
  font-size: 0.76rem;
  margin-top: -8px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.annotation {
  background: var(--color-accent-subtle);
  border-left: 3px solid var(--color-accent);
  padding: 12px 14px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 8px 0 16px;
}
.annotation-badge {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.78rem;
  flex-shrink: 0;
  margin-top: 1px;
}
.annotation-text strong {
  font-size: 0.82rem;
  color: var(--color-accent);
  display: block;
  margin-bottom: 3px;
  font-weight: 600;
}
.annotation-text p { font-size: 0.78rem; color: var(--color-text-muted); margin: 0; line-height: 1.45; }

.doc-footer {
  padding: 11px 22px;
  border-top: 1px solid var(--color-border-subtle);
  font-size: 0.72rem;
  color: var(--color-text-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--color-bg);
}
.doc-footer .reviewer { display: flex; align-items: center; gap: 9px; }
.doc-footer .reviewer-dot {
  width: 6px;
  height: 6px;
  background: var(--color-success);
  border-radius: 50%;
}
/* Mihr Legal seal — the brand M used narratively as the firm's stamp on the document */
.doc-footer .reviewer-mark {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: block;
}

/* Stack the doc footer on small phones so the "48 hours" badge doesn't
   internal-wrap when the reviewer line takes two lines on the left. */
@media (max-width: 640px) {
  .doc-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 10px 16px;
  }
}

/* ----- Service card: header with badges ----- */
.service-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 22px;
  gap: 12px;
}
.service-card .service-icon { margin-bottom: 0; }
.service-badges {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 4px 11px;
  border-radius: 999px;
  white-space: nowrap;
  font-family: var(--font-body);
}
.badge-price {
  background: var(--color-text);
  color: var(--color-bg);
  font-feature-settings: "tnum";
}
.badge-time {
  background: var(--color-accent-subtle);
  color: var(--color-accent);
}

/* ----- Founder section ----- */
.founder-section {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
}
.founder-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.3fr;
  gap: 64px;
  align-items: center;
}
.founder-photo {
  width: 100%;
  max-width: 380px;
  aspect-ratio: 4 / 5;
  background: linear-gradient(140deg, #f5f5f4 0%, #e7e5e4 100%);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.founder-photo svg {
  width: 55%;
  height: 55%;
  color: var(--color-text-subtle);
}
.founder-photo-tag {
  position: absolute;
  bottom: 16px;
  left: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.74rem;
  color: var(--color-text-subtle);
  letter-spacing: 0.01em;
}
.founder-content .eyebrow { color: var(--color-accent); }
.founder-content h2 { margin-bottom: 22px; max-width: 18ch; }
.founder-content .founder-bio {
  font-size: 1.08rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: 28px;
}
.founder-credentials {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px 32px;
  padding-top: 28px;
  border-top: 1px solid var(--color-border-subtle);
}
.founder-credential dt {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-subtle);
  margin-bottom: 5px;
  font-weight: 500;
}
.founder-credential dd { font-size: 0.95rem; color: var(--color-text); font-weight: 500; }

/* ----- Trust + FAQ split layout ----- */
.trust-faq-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 72px;
  align-items: start;
}
.trust-col-title {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border-subtle);
}

/* ----- FAQ accordion ----- */
.faq { display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid var(--color-border-subtle); }
.faq-item:first-child { border-top: 1px solid var(--color-border-subtle); }
.faq-question {
  width: 100%;
  background: none;
  border: none;
  padding: 20px 0;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text);
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  transition: color 0.15s ease;
  letter-spacing: -0.005em;
}
.faq-question:hover { color: var(--color-accent); }
.faq-question .faq-plus {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: var(--color-text-subtle);
  transition: transform 0.25s ease, color 0.15s ease;
  font-weight: 300;
}
.faq-item.open .faq-plus {
  transform: rotate(45deg);
  color: var(--color-accent);
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.faq-item.open .faq-answer { max-height: 500px; }
.faq-answer-inner {
  padding: 0 0 22px 0;
  font-size: 0.95rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}
.faq-answer-inner p { margin-bottom: 10px; }
.faq-answer-inner p:last-child { margin-bottom: 0; }

/* ----- Mobile: cascading overrides ----- */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .founder-grid { grid-template-columns: 1fr; gap: 40px; }
  .founder-content h2 { max-width: none; }
  .trust-faq-grid { grid-template-columns: 1fr; gap: 56px; }
}

@media (max-width: 768px) {
  .hero-grid { gap: 32px; }
  .doc-card { transform: rotate(0deg); }
  .doc-card::before { display: none; }
  .compliance-strip { gap: 14px; padding-top: 24px; margin-top: 32px; }
  .compliance-strip-label { display: none; }
  .compliance-items { gap: 14px; }
  .compliance-item { font-size: 0.78rem; }
  .compliance-item-icon { width: 24px; height: 24px; font-size: 0.62rem; }
  .founder-credentials { grid-template-columns: 1fr; gap: 16px; }
  .service-card-header { margin-bottom: 18px; }
  .service-badges { flex-direction: row; }
}

/* ============================================================
   ITERATION 3 — Honest-mode pass
   Comparison table + illustrative-example label
   ============================================================ */

/* ----- Illustrative-example label above hero document mock ----- */
.visual-label {
  position: absolute;
  top: -34px;
  right: 6px;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
  background: var(--color-surface);
  padding: 5px 13px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  font-weight: 500;
  z-index: 2;
}

/* ----- Comparison table ----- */
.comparison-table {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
}
.comparison-header,
.comparison-row {
  display: grid;
  grid-template-columns: 0.85fr 1.4fr 1.4fr;
}
.comparison-header { border-bottom: 1px solid var(--color-border); }
.comparison-row { border-bottom: 1px solid var(--color-border-subtle); }
.comparison-row:last-child { border-bottom: none; }
.comparison-aspect {
  padding: 22px 24px;
  font-size: 0.78rem;
  color: var(--color-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 500;
  border-right: 1px solid var(--color-border-subtle);
  background: var(--color-surface-2);
  display: flex;
  align-items: center;
}
.comparison-header .comparison-aspect {
  color: var(--color-text-subtle);
  font-weight: 600;
  letter-spacing: 0.08em;
}
.comparison-col {
  padding: 22px 28px;
  font-size: 0.95rem;
  color: var(--color-text-muted);
  line-height: 1.55;
  border-right: 1px solid var(--color-border-subtle);
}
.comparison-col:last-child { border-right: none; }
.comparison-col.traditional { background: var(--color-surface); }
.comparison-col.mihr {
  background: var(--color-accent-subtle);
  color: var(--color-text);
}
.comparison-header .comparison-col {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--color-text);
  padding: 18px 28px;
  background: var(--color-surface-2);
}
.comparison-header .comparison-col.mihr { color: var(--color-accent); background: var(--color-accent-subtle); }

.comparison-footer {
  margin-top: 32px;
  padding: 24px 28px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  font-size: 0.95rem;
  color: var(--color-text-muted);
  line-height: 1.65;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.comparison-footer-icon {
  flex-shrink: 0;
  padding-top: 3px;
}
.comparison-footer-icon svg { width: 20px; height: 20px; display: block; }
.comparison-footer-text { flex: 1; }
.comparison-footer-text strong { color: var(--color-text); font-weight: 600; margin-right: 4px; }

/* Mihr Legal column-header mark in the comparison table */
.comparison-header .comparison-col.mihr {
  display: flex;
  align-items: center;
  gap: 10px;
}
.comparison-mark {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: block;
}

/* ----- Mobile: comparison table stacks into cards ----- */
@media (max-width: 768px) {
  .comparison-header { display: none; }
  .comparison-row {
    grid-template-columns: 1fr;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: 12px;
    overflow: hidden;
  }
  .comparison-row:last-child { margin-bottom: 0; }
  .comparison-aspect {
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    padding: 12px 20px;
  }
  .comparison-col {
    border-right: none;
    border-bottom: 1px solid var(--color-border-subtle);
    padding: 16px 20px;
  }
  .comparison-col:last-child { border-bottom: none; }
  .comparison-col::before {
    content: attr(data-label);
    display: block;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-text-subtle);
    margin-bottom: 6px;
    font-weight: 500;
  }
  .visual-label { top: -28px; right: 0; }
}

/* ============================================================
   LEGAL PAGES — Privacy Policy, Terms of Use
   Sticky table-of-contents layout, numbered sections, designed
   to be readable boilerplate rather than wall-of-text legalese.
   ============================================================ */

.legal-hero {
  padding: 96px 0 32px;
}
.legal-hero .eyebrow {
  display: inline-block;
  margin-bottom: 16px;
}
.legal-hero h1 {
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  margin-bottom: 18px;
  letter-spacing: -0.025em;
}
.legal-hero .lead {
  font-size: 1.15rem;
  color: var(--color-text-muted);
  max-width: 60ch;
  margin-bottom: 28px;
  line-height: 1.55;
}
.legal-meta {
  font-size: 0.875rem;
  color: var(--color-text-subtle);
  letter-spacing: 0.02em;
}
.legal-meta strong { color: var(--color-text); font-weight: 500; }

.legal-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 72px;
  padding: 24px 0 112px;
  align-items: start;
  counter-reset: section;
}

.legal-toc {
  position: sticky;
  top: 96px;
  align-self: start;
}
.legal-toc h4 {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--color-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border-subtle);
}
.legal-toc ol {
  list-style: none;
  counter-reset: toc;
  padding: 0;
  margin: 0;
}
.legal-toc ol li {
  counter-increment: toc;
  font-size: 0.875rem;
  line-height: 1.5;
  margin-bottom: 10px;
  display: flex;
  gap: 10px;
}
.legal-toc ol li::before {
  content: counter(toc, decimal-leading-zero);
  color: var(--color-text-subtle);
  flex-shrink: 0;
  font-feature-settings: "tnum";
  font-size: 0.74rem;
  padding-top: 2px;
  font-family: var(--font-display);
}
.legal-toc a {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 0.15s ease;
  flex: 1;
}
.legal-toc a:hover { color: var(--color-accent); }

.legal-content {
  max-width: 720px;
}
.legal-section {
  padding: 36px 0;
  border-top: 1px solid var(--color-border-subtle);
  counter-increment: section;
  scroll-margin-top: 96px;
}
.legal-section:first-child {
  padding-top: 0;
  border-top: none;
}
.legal-section h2 {
  font-size: 1.5rem;
  margin-bottom: 16px;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.legal-section h2::before {
  content: counter(section, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--color-text-subtle);
  font-weight: 400;
  letter-spacing: 0;
  font-feature-settings: "tnum";
  line-height: 1;
}
.legal-section h3 {
  font-size: 1.05rem;
  margin: 24px 0 8px;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--color-text);
}
.legal-section p {
  margin-bottom: 14px;
  line-height: 1.65;
  color: var(--color-text-muted);
}
.legal-section ul, .legal-section ol {
  margin: 0 0 16px 22px;
}
.legal-section li {
  margin-bottom: 8px;
  line-height: 1.6;
  color: var(--color-text-muted);
}
.legal-section li strong { color: var(--color-text); }
.legal-section strong {
  color: var(--color-text);
  font-weight: 600;
}
.legal-section a {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.legal-callout {
  background: var(--color-accent-subtle);
  border-left: 3px solid var(--color-accent);
  padding: 18px 22px;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin: 0 0 18px;
  font-size: 0.95rem;
  color: var(--color-text);
  line-height: 1.55;
}
.legal-callout strong { color: var(--color-accent); }

/* About page — pull-quote for the mission statement */
.about-pullquote {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.25;
  color: var(--color-accent);
  letter-spacing: -0.015em;
  text-align: center;
  max-width: 24ch;
  margin: 24px auto;
  padding: 24px 0;
  position: relative;
}
.about-pullquote::before,
.about-pullquote::after {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  background: var(--color-accent);
  margin: 0 auto;
  opacity: 0.35;
}
.about-pullquote::before { margin-bottom: 28px; }
.about-pullquote::after { margin-top: 28px; }

/* About page — contact methods list */
.about-contact {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 48px;
  max-width: 720px;
  margin: 0 auto;
}
.about-contact-item dt {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-subtle);
  font-weight: 500;
  margin-bottom: 6px;
}
.about-contact-item dd {
  font-size: 1rem;
  color: var(--color-text);
  line-height: 1.5;
}
.about-contact-item dd a {
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px solid var(--color-accent-subtle);
  padding-bottom: 1px;
  transition: border-color 0.15s ease;
}
.about-contact-item dd a:hover {
  border-bottom-color: var(--color-accent);
}
@media (max-width: 768px) {
  .about-contact { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 1024px) {
  .legal-hero { padding: 64px 0 24px; }
  .legal-layout {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 24px 0 80px;
  }
  .legal-toc {
    position: static;
    padding: 20px 22px;
    background: var(--color-surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-subtle);
  }
  .legal-toc h4 { margin-bottom: 12px; padding-bottom: 10px; }
}

/* ============================================================
   Asymmetric hero — big bird left, content right, compliance bar bottom.
   Bird plays once on load, then settles on frame 0.
   ============================================================ */

.hero-asymm-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 110px 0 48px;
  position: relative;
  overflow: hidden;
}

.hero-asymm-wrap .container {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.hero-asymm {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: center;
  flex: 1;
}

.hero-asymm-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.bird-hero {
  width: 100%;
  max-width: 600px;
  height: auto;
  display: block;
  /* Tight feather: pulls the cream halo closer in so it blends with the page */
  -webkit-mask-image: radial-gradient(ellipse 70% 75% at center, black 50%, transparent 86%);
  mask-image: radial-gradient(ellipse 70% 75% at center, black 50%, transparent 86%);
  /* Multiply blend mode helps the slightly-different cream of the video meet
     the page cream more naturally — darkens both into a matching tone */
  mix-blend-mode: multiply;
}

.hero-asymm-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  max-width: 520px;
}

.hero-asymm-content .hero-eyebrow {
  align-self: flex-start;
}

.hero-h1 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  text-wrap: balance;
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--color-text);
  max-width: 24ch;
}

.hero-lead {
  font-size: 1.12rem;
  color: var(--color-text-muted);
  line-height: 1.55;
  margin: 0;
  max-width: 36ch;
}

.hero-ctas-stacked {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: 12px;
}

/* Slightly larger CTA in the hero to balance the big H1 */
.hero-asymm-content .btn-primary.btn-lg {
  padding: 17px 30px;
  font-size: 1.04rem;
}

/* ============================================================
   Services — featured sample-output block above the cards grid
   ============================================================ */

.services-featured {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  align-items: center;
  margin: 48px 0 72px;
  padding: 48px 0;
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
}

.services-featured-text {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 440px;
}

.services-featured-text h3 {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 3vw, 2.5rem);
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--color-text);
}

.services-featured-text p {
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
}

.services-featured-note {
  font-style: italic;
  font-size: 0.92rem;
  color: var(--color-text-subtle);
  margin-top: 4px;
}

.services-featured-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-width: 880px) {
  .services-featured {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 32px 0;
  }
  .services-featured-text { max-width: none; }
}

/* ============================================================
   Pull-quote section — editorial break between sections
   ============================================================ */

.pullquote-section {
  padding: 80px 0;
}

.hero-pullquote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.75rem, 3.6vw, 2.85rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--color-text);
  text-align: center;
  max-width: 28ch;
  margin: 0 auto;
  position: relative;
}

.hero-pullquote::before,
.hero-pullquote::after {
  content: "";
  display: block;
  width: 32px;
  height: 1px;
  background: var(--color-border);
  margin: 0 auto;
}

.hero-pullquote::before { margin-bottom: 28px; }
.hero-pullquote::after { margin-top: 28px; }

@media (max-width: 720px) {
  .pullquote-section { padding: 56px 0; }
}

/* ============================================================
   Your Lawyer — two-column with narrative + firm card
   ============================================================ */

.your-lawyer-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: center;
}

.your-lawyer-narrative {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.your-lawyer-narrative h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.08;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--color-text);
}

.your-lawyer-narrative .founder-bio {
  color: var(--color-text-muted);
  font-size: 1.05rem;
  line-height: 1.65;
  margin: 0;
  max-width: 50ch;
}

.firm-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: 0 1px 0 rgba(10, 37, 64, 0.02);
}

.firm-card-mark {
  width: 48px;
  height: 48px;
}
.firm-card-mark svg { width: 100%; height: 100%; display: block; }

.firm-card-name {
  font-family: var(--font-body);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--color-text);
  margin: 0;
}

.firm-card-details {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--color-border-subtle);
}

.firm-card-details div { margin: 0; }
.firm-card-details dt {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-subtle);
  margin-bottom: 4px;
  font-weight: 500;
}
.firm-card-details dd {
  font-size: 0.95rem;
  color: var(--color-text);
  font-weight: 500;
  margin: 0;
  line-height: 1.45;
}

@media (max-width: 880px) {
  .your-lawyer-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .firm-card { padding: 28px 24px; }
}

/* ============================================================
   How it works — step icons
   ============================================================ */

.step-icon {
  width: 22px;
  height: 22px;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.step-us .step-icon { color: var(--color-accent); }

.step-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ============================================================
   Reveal-on-scroll animations
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* When user prefers reduced motion, skip the choreography */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.hero-secondary-link {
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 0.98rem;
  font-weight: 500;
  transition: color 160ms;
}

.hero-secondary-link:hover {
  color: var(--color-text);
}

/* Horizontal compliance bar — third visual zone, breaks the stack */
.hero-compliance-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 56px;
  padding-top: 22px;
  border-top: 1px solid var(--color-border-subtle);
  font-size: 0.78rem;
  color: var(--color-text-subtle);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
}

.hero-compliance-bar .dot-sep {
  color: var(--color-border);
}

/* Mobile / tablet — hero fills the viewport with content centered as a unit */
/* (Mihr-era centered mobile hero deleted — the ≤960 hero is owned solely
   by the v33/v34/v36 blocks at the end of this file. Do not re-add
   equal-specificity mobile hero rules here; they resurrect by source order.) */

/* ============================================================
   SERVICE PAGE FUNNEL TEMPLATE
   Used by: termination-review.html, contract-review.html (eventually),
   employment-review.html, demand-letter.html. Each service customizes
   content but inherits this structural skeleton.
   ============================================================ */

/* ----- Funnel hero (extends .service-hero) ----- */
.service-hero-funnel {
  padding: 110px 0 56px;
  background: var(--color-bg);
}

.urgency-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(217, 70, 39, 0.08);
  color: #b8341a;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.urgency-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d94627;
  animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.service-hero-funnel h1 {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  line-height: 1.06;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  color: var(--color-text);
  max-width: 22ch;
}

.service-hero-funnel .lead {
  font-size: 1.18rem;
  color: var(--color-text-muted);
  line-height: 1.55;
  margin: 0 0 28px;
  max-width: 52ch;
}

/* Single-line meta row — plain text, no flex jankiness */
.service-hero-meta-line {
  font-size: 0.94rem;
  color: var(--color-text-muted);
  letter-spacing: -0.005em;
  margin: 0 0 32px;
  line-height: 1.5;
}

.service-hero-ctas {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

@media (max-width: 600px) {
  .service-hero-funnel {
    padding: 88px 0 40px;
  }
}

/* ----- Trust strip ----- */
.service-trust-strip {
  padding: 28px 0;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
}

.trust-strip-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 56px;
}

@media (min-width: 720px) {
  .trust-strip-row { flex-wrap: nowrap; }
}

.trust-strip-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--color-text);
  font-weight: 500;
}

.trust-strip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 22px;
  padding: 0 8px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  background: var(--color-bg);
}

@media (max-width: 600px) {
  .trust-strip-row { gap: 12px 24px; }
  .trust-strip-item { font-size: 0.85rem; }
}

/* ----- Service section header (consistent across funnel sections) ----- */
.service-section-header {
  margin-bottom: 36px;
  max-width: 56ch;
}

/* Section eyebrows in slate-blue brand accent — quiet recurring brand presence */
.service-section-header .eyebrow {
  margin-bottom: 10px;
  display: inline-block;
  color: #5A88B3;
  font-weight: 600;
  letter-spacing: 0.09em;
}

.service-section-header h2 {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 3.2vw, 2.5rem);
  line-height: 1.12;
  font-weight: 400;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
  color: var(--color-text);
  max-width: 22ch;
}

.service-section-header p {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
}

/* ----- Audience section — subtle slate tint for section rhythm ----- */
.service-audience {
  padding: 80px 0;
  background: linear-gradient(180deg, var(--color-bg) 0%, rgba(90, 136, 179, 0.04) 100%);
}

.audience-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.audience-list li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 18px;
  align-items: start;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--color-text);
}

.audience-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #5A88B3;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
}

/* ----- Visual section: severance gap ----- */
.service-visual-section {
  padding: 80px 0;
  background: var(--color-surface);
}

.severance-gap-viz {
  margin: 32px 0 16px;
  padding: 40px;
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-subtle);
}

.gap-bar {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  align-items: center;
  margin-bottom: 24px;
}

.gap-bar-label-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gap-bar-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: -0.005em;
}

.gap-bar-sublabel {
  font-size: 0.78rem;
  color: var(--color-text-subtle);
}

.gap-bar-visual {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
}

.gap-bar-track {
  height: 14px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  overflow: hidden;
}

.gap-bar-fill {
  height: 100%;
  border-radius: 8px;
  transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.gap-bar-fill-esa {
  background: linear-gradient(90deg, #9ca3af 0%, #6b7280 100%);
}

.gap-bar-fill-cl {
  background: linear-gradient(90deg, #6FA0CE 0%, #5A88B3 100%);
}

.gap-bar-value {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text);
  font-feature-settings: "tnum";
  min-width: 100px;
  text-align: right;
}

.gap-callout {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px dashed var(--color-border);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 16px;
}

.gap-callout-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #5A88B3;
  font-weight: 700;
}

.gap-callout-value {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--color-text);
  font-weight: 400;
  letter-spacing: -0.01em;
}

.gap-callout-note {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  font-style: italic;
}

.visual-disclaimer {
  font-size: 0.82rem;
  color: var(--color-text-subtle);
  font-style: italic;
  margin: 20px 0 0;
  line-height: 1.55;
}

@media (max-width: 720px) {
  .severance-gap-viz { padding: 28px 20px; }
  .gap-bar {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .gap-bar-visual { grid-template-columns: 1fr; gap: 8px; }
  .gap-bar-value { text-align: left; min-width: 0; }
}

/* ----- Deliverable grid ----- */
.service-deliverable {
  padding: 80px 0;
}

.deliverable-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 36px;
  margin-top: 24px;
}

.deliverable-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 22px;
  border-top: 1px solid var(--color-border-subtle);
}

.deliverable-num {
  font-size: 0.78rem;
  font-weight: 700;
  color: #5A88B3;
  letter-spacing: 0.06em;
  font-feature-settings: "tnum";
}

.deliverable-item h3 {
  font-size: 1.15rem;
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--color-text);
}

.deliverable-item p {
  font-size: 0.96rem;
  color: var(--color-text-muted);
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 720px) {
  .deliverable-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* ----- Urgency card ----- */
.service-urgency-section {
  padding: 32px 0 80px;
}

.urgency-card {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 24px;
  align-items: start;
  padding: 32px 36px;
  background: rgba(217, 70, 39, 0.04);
  border: 1px solid rgba(217, 70, 39, 0.18);
  border-radius: var(--radius-lg);
}

.urgency-card-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(217, 70, 39, 0.1);
  color: #b8341a;
}

.urgency-card-icon svg {
  width: 26px;
  height: 26px;
}

.urgency-card-content h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.2;
  margin: 0 0 10px;
  color: var(--color-text);
  letter-spacing: -0.01em;
}

.urgency-card-content p {
  font-size: 1.02rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 600px) {
  .urgency-card {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 24px 22px;
  }
}

/* ----- Scope (what this isn't) ----- */
.service-scope {
  padding: 0 0 80px;
}

.scope-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.scope-list li {
  position: relative;
  padding-left: 24px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.scope-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--color-text-subtle);
  font-weight: 700;
}

.scope-list strong {
  color: var(--color-text);
  font-weight: 600;
}

/* ----- Service FAQ section ----- */
.service-faq {
  padding: 80px 0;
  background: var(--color-surface);
}

.service-faq .faq {
  margin-top: 16px;
}

/* ----- Section diamond divider — quiet brand punctuation between sections ----- */
.section-diamond {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 0;
  opacity: 0.55;
}

.section-diamond svg {
  width: 10px;
  height: 10px;
}

/* ============================================================
   Intake page — no separate hero; the form is the page
   ============================================================ */

.intake-form-section {
  padding: 40px 0 48px;
}

.intake-header {
  margin-bottom: 16px;
  text-align: center;
}

.intake-header-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--color-text-subtle);
  margin-bottom: 8px;
  font-weight: 500;
}

.intake-header-eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4a8a5a;
}

.intake-header-h1 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--color-text);
}

@media (max-width: 720px) {
  .intake-form-section { padding: 28px 0 40px; }
}

/* Compact form variant — tighter spacing for above-the-fold fit */
.form-wrap-compact { padding: 28px 32px; }
.form-wrap-compact .form-grid { gap: 16px 20px; margin-bottom: 8px; }
.form-wrap-compact .form-grid:last-of-type { margin-bottom: 0; }
.form-wrap-compact .form-grid-tight { gap: 14px 20px; padding-top: 18px; margin-top: 18px; border-top: 1px solid var(--color-border-subtle); }
.form-wrap-compact .form-field { gap: 6px; }
.form-wrap-compact textarea { min-height: 100px; }
.form-wrap-compact .form-actions { padding-top: 18px; margin-top: 18px; border-top: 1px solid var(--color-border-subtle); }

@media (max-width: 720px) {
  .form-wrap-compact { padding: 22px 18px; }
}

/* ============================================================
   Multi-step intake form
   Progress pills, step containers, navigation, review screen
   ============================================================ */

.form-multistep .intake-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin: 0 auto 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-border-subtle);
}

.step-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  border-radius: 999px;
  color: var(--color-text-subtle);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
  font-family: inherit;
}

.step-pill:hover:not(.is-active) {
  color: var(--color-text);
  border-color: var(--color-text-subtle);
}

.step-pill.is-active {
  background: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-bg);
}

.step-pill.is-completed {
  border-color: #5A88B3;
  color: #5A88B3;
}

.step-pill-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.05);
  font-size: 0.7rem;
  font-weight: 700;
  font-feature-settings: "tnum";
}

.step-pill.is-active .step-pill-num {
  background: rgba(255, 255, 255, 0.18);
}

.step-pill.is-completed .step-pill-num {
  background: rgba(90, 136, 179, 0.12);
}

.step-pill.is-completed .step-pill-num::before {
  content: "✓";
  font-size: 0.78rem;
}

.step-pill.is-completed .step-pill-num > span,
.step-pill.is-completed .step-pill-num {
  font-size: 0;
}

.step-pill.is-completed .step-pill-num {
  font-size: 0.78rem;
}

.step-pill-divider {
  width: 16px;
  height: 1px;
  background: var(--color-border);
}

/* At small-phone widths the three pills + two dividers don't fit on one row,
   so step 3 wraps below. Tightening padding + number circle and dropping the
   dividers gets us back to one clean row. */
@media (max-width: 640px) {
  .form-multistep .intake-progress { gap: 4px; }
  .step-pill { padding: 5px 9px; font-size: 0.78rem; }
  .step-pill-num { width: 18px; height: 18px; font-size: 0.65rem; }
  .step-pill-divider { display: none; }
}

/* Scroll offset when JS advances steps and calls scrollIntoView on the form —
   keeps the progress pills and active-step heading clear of the sticky header. */
#intake-form {
  scroll-margin-top: 96px;
}

/* Step containers — only the .is-active step is shown */
.intake-step {
  display: none;
}

.intake-step.is-active {
  display: block;
  animation: stepFadeIn 240ms ease-out;
}

@keyframes stepFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Step nav (Back/Continue/Submit) */
.step-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border-subtle);
}

.step-nav-spacer { display: inline-block; }

.step-nav .btn {
  font-size: 0.95rem;
  padding: 10px 22px;
}

.step-nav .btn-lg {
  font-size: 1rem;
  padding: 12px 26px;
}

/* 2-col tight variant for the contact step */
.form-grid-tight-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
}

@media (max-width: 600px) {
  .form-grid-tight-2col { grid-template-columns: 1fr; }
}

/* Review block on step 3 */
.review-block {
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md, 8px);
  padding: 20px 24px;
  margin-bottom: 20px;
}

.review-section + .review-section {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--color-border-subtle);
}

.review-block h4 {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-subtle);
  margin: 0 0 12px;
  font-weight: 600;
}

.review-dl {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 8px 18px;
  margin: 0;
  font-size: 0.9rem;
}

.review-dl dt {
  color: var(--color-text-subtle);
  font-weight: 500;
}

.review-dl dd {
  color: var(--color-text);
  margin: 0;
  word-break: break-word;
  white-space: pre-wrap;
}

@media (max-width: 600px) {
  .review-dl {
    grid-template-columns: 1fr;
    gap: 2px 0;
  }
  .review-dl dt {
    margin-top: 8px;
    font-size: 0.78rem;
  }
  .review-dl dt:first-child { margin-top: 0; }
}

.intake-footnote {
  margin-top: 28px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-text-subtle);
}

.intake-footnote p { margin: 0 0 6px; }
.intake-footnote a {
  color: var(--color-text-muted);
  text-decoration: underline;
  text-decoration-color: var(--color-border);
  text-underline-offset: 3px;
}
.intake-footnote a:hover { color: var(--color-text); }

@media (max-width: 720px) {
  .intake-hero { padding: 64px 0 16px; }
}

/* ============================================================
   Service hero — asymmetric (content left, mockup card right)
   ============================================================ */

.service-hero-asymm {
  padding: 96px 0 80px;
}

/* Mobile/tablet: the audience strip + sticky header already eat ~100px from
   the top of the viewport, so the original 96px top padding pushed the hero
   content unreasonably far down the screen. Tightening here applies to all
   9 service pages since they share .service-hero-asymm.

   Same pattern applies to every service-page section + .cta-section: the
   80-112px desktop paddings compound to ~480-600px of empty vertical space
   per phone viewport. Tightening here keeps the rhythm without cramping. */
@media (max-width: 768px) {
  .service-hero-asymm { padding: 32px 0 56px; }
  .service-trust-strip { padding: 20px 0; }
  .service-audience { padding: 56px 0; }
  .service-visual-section { padding: 56px 0; }
  .service-deliverable { padding: 56px 0; }
  .service-urgency-section { padding: 24px 0 56px; }
  .service-scope { padding: 0 0 56px; }
  .service-faq { padding: 56px 0; }
  .cta-section { padding: 64px 0; }
}

.service-hero-asymm .breadcrumb {
  margin-bottom: 32px;
  font-size: 0.82rem;
  color: var(--color-text-subtle);
}

.service-hero-asymm .breadcrumb a {
  color: var(--color-text-muted);
}

.service-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
}

.service-hero-content {
  display: flex;
  flex-direction: column;
}

.service-hero-content h1 {
  max-width: none;
}

.service-hero-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.service-hero-visual .visual-label {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
  font-weight: 500;
  margin-bottom: 14px;
  align-self: flex-start;
}

@media (max-width: 880px) {
  .service-hero-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

/* ============================================================
   Severance mockup card — visual hero element for termination page
   Mirrors the doc-card pattern from the homepage hero
   ============================================================ */

.severance-card {
  width: 100%;
  max-width: 440px;
  background: var(--color-bg);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 36px rgba(10, 37, 64, 0.08), 0 2px 6px rgba(10, 37, 64, 0.04);
  overflow: hidden;
  transform: rotate(-0.6deg);
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.severance-card:hover { transform: rotate(0); }

.severance-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border-subtle);
}

.severance-card-title {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  letter-spacing: -0.005em;
}

.severance-card-status {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #5A88B3;
  padding: 3px 8px;
  background: rgba(90, 136, 179, 0.12);
  border-radius: 4px;
}

.severance-card-content {
  padding: 24px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.severance-card-line {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--color-text);
  margin: 0;
}

.severance-card-line.warning {
  color: #b8341a;
  font-size: 0.82rem;
  font-weight: 500;
}

.severance-card-line strong {
  font-weight: 600;
}

.severance-card-redline {
  background: linear-gradient(180deg, transparent 60%, rgba(217, 70, 39, 0.18) 60%, rgba(217, 70, 39, 0.18) 88%, transparent 88%);
  padding: 0 2px;
}

.severance-annotation {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(217, 70, 39, 0.04);
  border: 1px solid rgba(217, 70, 39, 0.18);
  border-radius: 8px;
}

.severance-annotation-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #d94627;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  flex-shrink: 0;
}

.severance-annotation-text strong {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 4px;
}

.severance-annotation-text p {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  margin: 0;
}

.severance-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border-subtle);
  font-size: 0.74rem;
  color: var(--color-text-subtle);
}

.severance-card-footer .reviewer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.severance-card-footer .reviewer-mark {
  width: 18px;
  height: 18px;
}

/* Same fix as .doc-footer — stack on small phones so the turnaround badge
   ("48 hours", "3 days", "Same day", etc.) doesn't wrap inside its span. */
@media (max-width: 640px) {
  .severance-card-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 10px 14px;
  }
}

/* ============================================================
   Severance gap — editorial big-number treatment (replaces bar chart)
   ============================================================ */

.severance-gap-editorial {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 32px;
  margin: 40px 0 16px;
  padding: 48px 40px;
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-subtle);
}

.gap-stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center;
}

.gap-stat-eyebrow {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-subtle);
  font-weight: 600;
}

.gap-stat-number-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
}

.gap-stat-number {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 7vw, 5.5rem);
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.03em;
}

.gap-stat-esa .gap-stat-number { color: #6b7280; }
.gap-stat-cl .gap-stat-number { color: #5A88B3; }

.gap-stat-unit {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  color: var(--color-text-muted);
  font-style: italic;
}

.gap-stat-label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: -0.005em;
}

.gap-stat-note {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  max-width: 28ch;
  margin: 4px auto 0;
}

.gap-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 0 8px;
}

.gap-divider-line {
  width: 1px;
  height: 40px;
  background: var(--color-border);
}

.gap-divider-text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--color-text-subtle);
}

.gap-summary {
  display: flex;
  align-items: center;
  gap: 24px;
  justify-content: center;
  margin: 28px auto 0;
  padding: 24px 36px;
  background: rgba(90, 136, 179, 0.07);
  border: 1px solid rgba(90, 136, 179, 0.22);
  border-radius: var(--radius-lg);
  max-width: 620px;
}

.gap-summary-arrow {
  font-size: 1.8rem;
  color: #5A88B3;
  font-weight: 300;
  line-height: 1;
}

.gap-summary-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}

.gap-summary-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #5A88B3;
  font-weight: 700;
}

.gap-summary-value {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--color-text);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.1;
}

@media (max-width: 720px) {
  .severance-gap-editorial {
    grid-template-columns: 1fr;
    padding: 36px 24px;
    gap: 24px;
  }
  .gap-divider { flex-direction: row; gap: 12px; }
  .gap-divider-line { width: 40px; height: 1px; }
  .gap-stat-note { max-width: none; }
  .gap-summary {
    flex-direction: column;
    text-align: center;
    gap: 8px;
    padding: 20px 24px;
  }
  .gap-summary-content { text-align: center; align-items: center; }
  .gap-summary-arrow { transform: rotate(0); }
}

/* ============================================================
   CSE Issuer page — premium, type-led, distinct from B2C funnels
   ============================================================ */

.nav-links a.is-active {
  color: var(--color-text);
  font-weight: 500;
  border-bottom: 1px solid #5A88B3;
  padding-bottom: 2px;
}

/* ----- Audience strip — top-of-page B2B audience switcher ----- */
/* Sits above the main nav. Lets CSE-listed issuers find their track
   without crowding the feature-oriented main nav for B2C visitors. */
.audience-strip {
  background: #f5f3ed;
  border-bottom: 1px solid var(--color-border-subtle);
  padding: 9px 0;
}
.audience-strip .container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.audience-strip-link {
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 0.825rem;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.15s ease;
  line-height: 1.4;
}
.audience-strip-link strong {
  color: var(--color-text);
  font-weight: 500;
}
.audience-strip-divider {
  color: var(--color-border);
  font-weight: 400;
}
.audience-strip-arrow {
  color: #5A88B3;
  font-weight: 500;
  display: inline-block;
  transition: transform 0.15s ease;
}
.audience-strip-link:hover {
  color: var(--color-text);
}
.audience-strip-link:hover .audience-strip-arrow {
  transform: translateX(3px);
}

@media (max-width: 640px) {
  .audience-strip { padding: 7px 0; }
  .audience-strip-link { font-size: 0.75rem; gap: 6px; text-align: center; }
  .audience-strip-divider { display: none; }
}


/* Body-level scope for the issuer page */
.issuer-page {
  background: #fafaf9;
}

.issuer-main {
  font-feature-settings: "ss01" on;
}

/* Section padding — generous, premium feel */
.issuer-section {
  padding: 96px 0;
}
.issuer-section + .issuer-section { padding-top: 0; }
.issuer-section-muted {
  background: #f5f3ed;
  padding: 96px 0;
}
.issuer-section + .issuer-section-muted,
.issuer-section-muted + .issuer-section {
  padding-top: 96px;
}

.issuer-section-header {
  margin-bottom: 56px;
}
.issuer-section-header h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 2.4rem;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 18px;
  color: var(--color-text);
}
.issuer-section-header p {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  margin: 0;
  max-width: 640px;
}

/* ----- Hero — centered, type-led, generous whitespace ----- */
.issuer-hero {
  padding: 120px 0 88px;
  text-align: center;
}
.issuer-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #5A88B3;
  margin-bottom: 28px;
}
.issuer-h1 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.4rem, 4.8vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin: 0 auto 28px;
  max-width: 760px;
}
.issuer-lead {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0 auto 40px;
  max-width: 640px;
}
.issuer-hero-cta {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.issuer-hero-secondary {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.issuer-hero-secondary:hover {
  color: var(--color-text);
  border-bottom-color: var(--color-text-muted);
}

/* ----- Credibility line — single quiet horizontal row ----- */
.issuer-credibility-line {
  padding: 32px 0 96px;
  border-bottom: 1px solid var(--color-border-subtle);
  text-align: center;
}
.issuer-credibility-line p {
  font-size: 0.825rem;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  margin: 0;
  font-weight: 450;
}

/* ----- Practice grid — 2-column refined list, not cards ----- */
.issuer-practice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px 64px;
}
.issuer-practice-item h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.005em;
  color: var(--color-text);
  margin: 0 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
}
.issuer-practice-item p {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  margin: 0;
}

@media (max-width: 768px) {
  .issuer-practice-grid { grid-template-columns: 1fr; gap: 36px; }
}

/* ----- Compliance cycle — type-only editorial element ----- */
.issuer-cycle {
  display: flex;
  flex-direction: column;
}
.issuer-cycle-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 40px;
  padding: 28px 0;
  border-bottom: 1px solid var(--color-border);
  align-items: start;
}
.issuer-cycle-row:first-child { padding-top: 0; }
.issuer-cycle-row:last-child { border-bottom: none; }
.issuer-cycle-period {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.75rem;
  color: #5A88B3;
  letter-spacing: -0.01em;
  line-height: 1;
  padding-top: 2px;
}
.issuer-cycle-row-always .issuer-cycle-period {
  font-size: 1rem;
  font-style: normal;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.issuer-cycle-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.issuer-cycle-items li {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--color-text);
}
.issuer-cycle-row-always .issuer-cycle-items li {
  color: var(--color-text-muted);
}

@media (max-width: 640px) {
  .issuer-cycle-row { grid-template-columns: 1fr; gap: 12px; padding: 22px 0; }
}

/* ----- Engagement — text-led blocks, not cards ----- */
.issuer-engagement {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  padding-top: 8px;
}
.issuer-engagement-block {
  display: flex;
  flex-direction: column;
}
.issuer-engagement-label {
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #5A88B3;
  margin-bottom: 14px;
}
.issuer-engagement-block h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.6rem;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin: 0 0 10px;
}
.issuer-engagement-tagline {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-text);
  margin: 0 0 18px;
}
.issuer-engagement-block p:last-of-type {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  margin: 0;
}
.issuer-engagement-hybrid {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  font-style: italic;
  margin: 56px auto 0;
  max-width: 540px;
  text-align: center;
  padding-top: 32px;
  border-top: 1px solid var(--color-border-subtle);
}

@media (max-width: 768px) {
  .issuer-engagement { grid-template-columns: 1fr; gap: 48px; }
}

/* ----- Vignettes — narrative scenario blocks ----- */
.issuer-vignettes {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.issuer-vignette {
  padding: 36px 0;
  border-bottom: 1px solid var(--color-border);
}
.issuer-vignette:first-child { padding-top: 0; }
.issuer-vignette:last-child { border-bottom: none; padding-bottom: 0; }
.issuer-vignette h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin: 0 0 14px;
}
.issuer-vignette p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text-muted);
  margin: 0;
  max-width: 720px;
}

/* ----- About the practice — pure prose, restrained ----- */
.issuer-pedigree {
  max-width: 680px;
}
.issuer-pedigree p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-text);
  margin: 0 0 22px;
}
.issuer-pedigree p:last-child {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  font-style: italic;
  margin-bottom: 0;
  padding-top: 8px;
}

/* ----- Final CTA — restrained, no big colored band ----- */
.issuer-final-cta {
  padding: 112px 0 128px;
  text-align: center;
  border-top: 1px solid var(--color-border-subtle);
}
.issuer-final-cta h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 2.4rem;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 18px;
  color: var(--color-text);
}
.issuer-final-cta p {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  margin: 0 auto 36px;
  max-width: 560px;
}
.issuer-final-cta-row {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

@media (max-width: 768px) {
  .issuer-section,
  .issuer-section-muted { padding: 72px 0; }
  .issuer-hero { padding: 72px 0 56px; }
  .issuer-credibility-line { padding: 24px 0 56px; }
  .issuer-section-header h2,
  .issuer-final-cta h2 { font-size: 1.85rem; }
  .issuer-final-cta { padding: 80px 0 96px; }
}

/* ----- Homepage CSE banner — kept, copy will be updated ----- */

/* Homepage CSE banner — surfaces the for-issuers track to B2B buyers */
.cse-banner-section {
  background: linear-gradient(135deg, #0a2540 0%, #1a3a5c 100%);
  color: #ffffff;
  padding: 56px 0;
  position: relative;
  overflow: hidden;
}
.cse-banner-section::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(90, 136, 179, 0.18) 0%, transparent 70%);
  pointer-events: none;
}
.cse-banner-grid {
  display: grid;
  grid-template-columns: 1.4fr auto;
  gap: 40px;
  align-items: center;
}
.cse-banner-eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #5A88B3;
  margin-bottom: 12px;
}
.cse-banner-h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.8rem;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  color: #ffffff;
  line-height: 1.2;
}
.cse-banner-text {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0;
  max-width: 540px;
}
.cse-banner-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  background: #ffffff;
  color: var(--color-accent);
  font-size: 0.95rem;
  font-weight: 500;
  border-radius: var(--radius-md);
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.15s ease;
}
.cse-banner-cta:hover {
  transform: translateY(-1px);
}

@media (max-width: 768px) {
  .cse-banner-section { padding: 40px 0; }
  .cse-banner-grid { grid-template-columns: 1fr; gap: 20px; }
  .cse-banner-h2 { font-size: 1.5rem; }
  .cse-banner-cta { align-self: start; }
}

/* ============================================================
   Mobile navigation — hamburger button + fullscreen overlay menu
   Hidden on desktop; activated at ≤768px via the @media block above.
   ============================================================ */

.menu-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 10px;
  margin: -10px -10px -10px 0;
  cursor: pointer;
  color: var(--color-text);
  position: relative;
}
.menu-toggle-icon {
  display: block;
  width: 22px;
  height: 14px;
  position: relative;
}
.menu-toggle-icon span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background-color: currentColor;
}
.menu-toggle-icon span:nth-child(1) { top: 0; }
.menu-toggle-icon span:nth-child(2) { top: calc(50% - 0.75px); }
.menu-toggle-icon span:nth-child(3) { bottom: 0; }

/* Mobile menu overlay — fullscreen, type-led, premium-restrained */
.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: var(--color-bg);
  padding: 80px 32px 32px;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.mobile-menu.is-open {
  display: flex;
  opacity: 1;
}

.mobile-menu-close {
  position: absolute;
  top: 22px;
  right: 22px;
  background: none;
  border: 0;
  padding: 10px;
  cursor: pointer;
  color: var(--color-text);
  line-height: 0;
}
.mobile-menu-close svg {
  width: 22px;
  height: 22px;
  display: block;
}

.mobile-menu-nav {
  display: flex;
  flex-direction: column;
  margin: 24px 0;
  flex: 1;
}
.mobile-menu-nav a {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.75rem;
  letter-spacing: -0.01em;
  color: var(--color-text);
  text-decoration: none;
  padding: 18px 0;
  border-bottom: 1px solid var(--color-border-subtle);
  transition: color 0.15s ease;
}
.mobile-menu-nav a:hover,
.mobile-menu-nav a:focus { color: #5A88B3; }
.mobile-menu-nav a:last-child { border-bottom: none; }

.mobile-menu-cta {
  margin-top: 16px;
  text-align: center;
  width: 100%;
  display: block;
}

/* Lock body scroll when menu is open */
body.menu-open {
  overflow: hidden;
}

/* ============================================================
   Intake form — draft persistence banner + error banner
   ============================================================ */

.intake-draft-banner {
  background: #f5f3ed;
  border-left: 3px solid #5A88B3;
  border-radius: 6px;
  padding: 16px 20px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.intake-draft-banner-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.intake-draft-banner-text strong {
  color: var(--color-text);
  font-weight: 500;
  font-size: 0.95rem;
}
.intake-draft-banner-meta {
  color: var(--color-text-muted);
  font-size: 0.825rem;
}
.intake-draft-banner-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.intake-draft-banner button {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 0.875rem;
  font-family: var(--font-body);
  color: var(--color-text);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.intake-draft-banner .intake-draft-restore {
  background: var(--color-text);
  color: #ffffff;
  border-color: var(--color-text);
}
.intake-draft-banner .intake-draft-restore:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.intake-draft-banner .intake-draft-discard:hover {
  background: #ffffff;
  border-color: var(--color-text-muted);
}

@media (max-width: 540px) {
  .intake-draft-banner { flex-direction: column; align-items: stretch; }
  .intake-draft-banner-actions { justify-content: flex-end; }
}

.intake-error-banner {
  background: #fef2f2;
  border-left: 3px solid #dc2626;
  border-radius: 6px;
  padding: 14px 18px;
  margin: 20px 0;
  color: #7f1d1d;
  font-size: 0.9rem;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.intake-error-banner strong {
  color: #7f1d1d;
  font-weight: 500;
}
.intake-error-banner a {
  color: #7f1d1d;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.intake-error-banner a:hover {
  color: #450a0a;
}

/* ============================================================
   v2 additions — ladder draft (appended; original Mihr CSS above)
   ============================================================ */
/* Statement block — centered thesis moments (the gap panel) */
.statement-block {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Bird video: hold square aspect while loading; poster covers the gap */
.bird-hero {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.service-role {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted, #6b6b63);
  margin-bottom: 6px;
}
.service-who {
  font-size: 13.5px;
  font-style: italic;
  color: var(--color-text-muted, #6b6b63);
  margin: 10px 0 0;
}
.service-points {
  list-style: none;
  margin: 14px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--color-border, #e7e4da);
}
.service-points li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 8px;
  font-size: 14.5px;
  line-height: 1.55;
}
.service-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent, #0a2540);
  opacity: 0.35;
}
.services-ladder-note {
  text-align: center;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 19px;
  color: var(--color-text-muted, #6b6b63);
  margin-top: 40px;
}
.desk-strip {
  margin-top: 18px;
}

/* ============================================================
   v3 — modern editorial pass
   Hairlines over boxes. Oversized serif. Unified kickers.
   ============================================================ */

:root {
  --v3-ink: #1c1b17;
  --v3-muted: #6f6b60;
  --v3-hair: #e6e2d6;
  --v3-navy: #0a2540;
}

/* Unified kicker — replaces mixed eyebrow/pill treatments */
.kicker {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--v3-navy);
  margin-bottom: 18px;
}

/* Section scale-up */
.v3-section { padding: 130px 0; }
.v3-section .section-header h2,
.v3-h2 {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: clamp(2.4rem, 4.6vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--v3-ink);
}

/* --- Tier rows: editorial index, no cards --- */
.tier-rows { border-top: 1px solid var(--v3-hair); }
.tier-row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px;
  padding: 56px 0;
  border-bottom: 1px solid var(--v3-hair);
}
.tier-row-head .kicker { margin-bottom: 10px; color: var(--v3-muted); }
.tier-title {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  line-height: 1.1;
  color: var(--v3-ink);
  margin: 0 0 10px;
}
.tier-meta {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--v3-muted);
}
.tier-desc {
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--v3-ink);
  margin: 0 0 22px;
}
.tier-matters {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  columns: 2;
  column-gap: 40px;
}
.tier-matters li {
  break-inside: avoid;
  padding: 9px 0;
  border-bottom: 1px solid var(--v3-hair);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--v3-ink);
}
.tier-for {
  font-size: 13.5px;
  font-style: italic;
  color: var(--v3-muted);
  margin: 0 0 14px;
}
.tier-link {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--v3-navy);
  text-decoration: none;
  border-bottom: 1px solid rgba(10, 37, 64, 0.35);
  padding-bottom: 2px;
}
.tier-link:hover { border-bottom-color: var(--v3-navy); }

/* --- Ledger artifact: borderless table --- */
.ledger-wrap {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 64px;
  align-items: start;
}
.ledger { border-top: 1px solid var(--v3-ink); }
.ledger-row {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--v3-hair);
}
.ledger-label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v3-muted);
  padding-top: 3px;
}
.ledger-body strong { font-weight: 600; color: var(--v3-ink); }
.ledger-body { font-size: 14.5px; line-height: 1.65; color: var(--v3-ink); }
.ledger-note { color: var(--v3-muted); }
.ledger-caption {
  margin-top: 14px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--v3-muted);
}

/* --- Contrast columns: no boxes --- */
.contrast-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px;
}
.contrast-col { border-top: 1px solid var(--v3-ink); padding-top: 22px; }
.contrast-col .num {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--v3-muted);
}
.contrast-col h3 {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: 1.55rem;
  line-height: 1.2;
  margin: 12px 0 12px;
  color: var(--v3-ink);
}
.contrast-col p { font-size: 14.5px; line-height: 1.7; color: var(--v3-muted); margin: 0; }

/* --- Dark note: the issuer moment --- */
.dark-note {
  background: #10151d;
  padding: 140px 0;
}
.dark-note .kicker { color: #8da2bd; }
.dark-note h2 {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  line-height: 1.12;
  color: #f4f1e9;
  max-width: 700px;
  margin: 0 0 26px;
}
.dark-note p {
  font-size: 15.5px;
  line-height: 1.8;
  color: #aab4c2;
  max-width: 560px;
  margin: 0 0 34px;
}
.dark-note a {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #f4f1e9;
  text-decoration: none;
  border-bottom: 1px solid rgba(244, 241, 233, 0.4);
  padding-bottom: 2px;
}
.dark-note a:hover { border-bottom-color: #f4f1e9; }

/* --- Method: three quiet columns --- */
.method-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px;
}
.method-col { border-top: 1px solid var(--v3-ink); padding-top: 22px; }
.method-col .num {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--v3-muted);
}
.method-col h3 {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: 1.55rem;
  line-height: 1.2;
  margin: 12px 0 12px;
  color: var(--v3-ink);
}
.method-col p { font-size: 14.5px; line-height: 1.7; color: var(--v3-muted); margin: 0; }

/* --- Principal --- */
.principal-name {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: clamp(2.4rem, 4.6vw, 3.6rem);
  line-height: 1.08;
  color: var(--v3-ink);
  margin: 0 0 22px;
}
.principal-bio {
  font-size: 17px;
  line-height: 1.8;
  color: var(--v3-ink);
  max-width: 640px;
}
.principal-creds {
  margin-top: 30px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--v3-muted);
}

/* Hero kicker: plain, unified (overrides the pill) */
.hero-asymm-content .hero-eyebrow {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--v3-navy);
}

@media (max-width: 860px) {
  .v3-section { padding: 88px 0; }
  .tier-row, .ledger-wrap { grid-template-columns: 1fr; gap: 24px; }
  .tier-matters { columns: 1; }
  .contrast-grid, .method-grid { grid-template-columns: 1fr; gap: 36px; }
  .dark-note { padding: 96px 0; }
  .ledger-row { grid-template-columns: 110px 1fr; gap: 16px; }
}

/* ==========================================================================
   v4 — funded-firm spine: trust band, tier artifacts, billing, takeoff,
   fact band, principal frame, motion. (Teardown v2, Aug 2026.)
   ========================================================================== */

/* --- Hero: staged load-in --------------------------------------------- */
.v4-hero-stage > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
body.is-loaded .v4-hero-stage > * { opacity: 1; transform: none; }
body.is-loaded .v4-hero-stage > *:nth-child(1) { transition-delay: 0.05s; }
body.is-loaded .v4-hero-stage > *:nth-child(2) { transition-delay: 0.16s; }
body.is-loaded .v4-hero-stage > *:nth-child(3) { transition-delay: 0.3s; }
body.is-loaded .v4-hero-stage > *:nth-child(4) { transition-delay: 0.44s; }
.v4-hero-visual {
  opacity: 0;
  transition: opacity 1.1s ease 0.25s;
}
body.is-loaded .v4-hero-visual { opacity: 1; }
.motion-off .v4-hero-stage > *, .motion-off .v4-hero-visual { opacity: 1; transform: none; transition: none; }

/* Hero: leave a sliver of the trust band above the fold as a scroll cue */
.hero-asymm-wrap { min-height: 92vh; min-height: 92dvh; }

/* --- 2 · Trust band ----------------------------------------------------- */
.trust-band {
  border-top: 1px solid var(--v3-hair);
  border-bottom: 1px solid var(--v3-hair);
  padding: 34px 0;
}
.trust-band .container {
  display: flex;
  align-items: baseline;
  gap: 28px;
  flex-wrap: wrap;
}
.trust-kicker {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--v3-muted);
  white-space: nowrap;
}
.trust-line {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  color: var(--v3-ink);
  margin: 0;
  line-height: 1.5;
  /* flex-wrap so the unbreakable span+separator run can never widen the
     layout viewport on phones (it clipped at 375px otherwise) */
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  row-gap: 4px;
}
.trust-line span { white-space: nowrap; }
.trust-line i {
  font-style: normal;
  color: var(--v3-hair);
  padding: 0 14px;
}

/* --- 3 · Gap ------------------------------------------------------------ */
.v4-gap { background: var(--color-surface); }

/* --- 4 · Tier artifacts -------------------------------------------------- */
.v4-tier {
  grid-template-columns: 4fr 5fr 3fr;
  align-items: start;
}
.tier-cred {
  margin: 18px 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--v3-navy);
  line-height: 1.6;
  color: var(--v3-muted);
  font-style: italic;
  font-family: 'Instrument Serif', serif;
  font-size: 15px;
  max-width: 40ch;
}
.v4-tier .tier-link { display: inline-block; margin-top: 18px; }
.tier-artifact {
  position: relative;
  margin: 6px 0 0;
  min-height: 190px;
}
.tier-artifact figcaption {
  position: absolute;
  bottom: -6px;
  left: 0;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v3-muted);
}
.paper {
  position: relative;
  width: 150px;
  padding: 20px 16px 24px;
  background: #fffdf8;
  border: 1px solid #e6dfcc;
  border-radius: 2px;
  box-shadow: 0 10px 28px rgba(28, 27, 23, 0.1), 0 2px 6px rgba(28, 27, 23, 0.06);
  display: flex;
  flex-direction: column;
  gap: 9px;
  transform: rotate(-2deg);
  transition: transform 0.45s ease, box-shadow 0.45s ease;
}
.v4-tier:hover .paper {
  transform: rotate(0deg) translateY(-4px);
  box-shadow: 0 16px 36px rgba(28, 27, 23, 0.14), 0 2px 6px rgba(28, 27, 23, 0.06);
}
.paper-line {
  display: block;
  height: 5px;
  border-radius: 1px;
  background: #dfd8c3;
}
.paper-line.w60 { width: 60%; }
.paper-line.w70 { width: 70%; }
.paper-line.w80 { width: 80%; }
.paper-line.w90 { width: 90%; }
.paper-line.bold { background: #6f6b60; height: 6px; }
.paper-line.marked { position: relative; }
.paper-line.marked::before {
  content: "";
  position: absolute;
  left: -10px;
  top: -2px;
  bottom: -2px;
  width: 2px;
  background: var(--v3-navy);
}
.paper-head {
  display: block;
  height: 8px;
  width: 45%;
  border-radius: 1px;
  background: var(--v3-navy);
  margin-bottom: 2px;
}
.paper-sig {
  display: block;
  width: 55%;
  height: 1px;
  background: #8d8672;
  margin-top: 14px;
}
.paper-seal {
  position: absolute;
  right: 14px;
  bottom: 16px;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--v3-navy);
  border-radius: 50%;
  opacity: 0.8;
}
.paper-brand {
  font-family: 'Instrument Serif', serif;
  font-size: 15px;
  color: var(--v3-navy);
  border-bottom: 1px solid #e6dfcc;
  padding-bottom: 8px;
  margin-bottom: 2px;
}
.paper-msa { transform: rotate(1.6deg); }
.paper-demand { transform: rotate(-2deg); z-index: 2; }
.paper-form {
  position: absolute;
  top: 14px;
  left: 44px;
  transform: rotate(3deg);
  z-index: 1;
  height: 150px;
}
.paper-grid {
  display: block;
  height: 100%;
  background:
    repeating-linear-gradient(#fffdf8 0 16px, #eee7d4 16px 17px),
    #fffdf8;
}
.v4-tier:hover .paper-msa { transform: rotate(0deg) translateY(-4px); }
.v4-tier:hover .paper-demand { transform: rotate(0deg) translateY(-4px); }
.v4-tier:hover .paper-form { transform: rotate(1.2deg); }

/* --- 5 · Ledger chips ----------------------------------------------------- */
.v4-ledger .ledger-row {
  grid-template-columns: 148px 1fr auto;
  align-items: baseline;
}
.ledger-chip {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--v3-navy);
  border: 1px solid rgba(10, 37, 64, 0.25);
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
  justify-self: end;
}

/* staggered reveal for ledger rows */
.v4-ledger .ledger-row { opacity: 0; transform: translateY(10px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible .v4-ledger .ledger-row { opacity: 1; transform: none; }
.reveal.is-visible .v4-ledger .ledger-row:nth-child(1) { transition-delay: 0.05s; }
.reveal.is-visible .v4-ledger .ledger-row:nth-child(2) { transition-delay: 0.18s; }
.reveal.is-visible .v4-ledger .ledger-row:nth-child(3) { transition-delay: 0.31s; }
.reveal.is-visible .v4-ledger .ledger-row:nth-child(4) { transition-delay: 0.44s; }
.motion-off .v4-ledger .ledger-row { opacity: 1; transform: none; transition: none; }

/* --- 6 · Billing ----------------------------------------------------------- */
.billing-wrap {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 64px;
  align-items: start;
}
.v4-method { margin-top: 8px; }

/* --- 7 · Takeoff breather ---------------------------------------------------
   A contained plate, not fake cinema: the source is a square illustration,
   so it sits framed on cream (same mask/blend treatment as the hero) and
   holds its composition at every viewport. */
.takeoff-band {
  position: relative;
  background: var(--color-bg);
  padding: 64px 0 80px;
}
.takeoff-video {
  display: block;
  width: min(560px, 74vw);
  aspect-ratio: 1 / 1;
  height: auto;
  margin: 0 auto;
  object-fit: cover;
  -webkit-mask-image: radial-gradient(ellipse 70% 75% at center, black 50%, transparent 86%);
  mask-image: radial-gradient(ellipse 70% 75% at center, black 50%, transparent 86%);
  mix-blend-mode: multiply;
}

/* --- 8 · Fact band ----------------------------------------------------------- */
.fact-band {
  background: var(--v3-navy);
  padding: 78px 0;
}
.fact-band-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.fact {
  padding: 6px 30px;
  border-left: 1px solid rgba(250, 247, 240, 0.3);
}
.fact:first-child { border-left: none; padding-left: 0; }
.fact span {
  font-family: 'Instrument Serif', serif;
  /* sized so each fact holds a single line at desktop widths */
  font-size: clamp(1.15rem, 1.55vw, 1.5rem);
  line-height: 1.3;
  color: #faf7f0;
  display: block;
  text-wrap: balance;
}

/* --- 9 · Principal ------------------------------------------------------------ */
.principal-wrap {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 72px;
  align-items: start;
}
.principal-frame { margin: 0; }
.principal-monogram {
  aspect-ratio: 4 / 5;
  border: 1px solid var(--v3-hair);
  background:
    linear-gradient(160deg, rgba(10, 37, 64, 0.035), rgba(10, 37, 64, 0) 55%),
    #fffdf8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 28px;
}
.principal-monogram-mark {
  font-family: 'Instrument Serif', serif;
  font-size: clamp(4rem, 8vw, 6.5rem);
  line-height: 1;
  color: var(--v3-navy);
}
.principal-monogram-rule { width: 44px; height: 1px; background: var(--v3-hair); }
.principal-monogram-name {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--v3-muted);
}
.principal-chips {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.principal-chip {
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--v3-ink);
  border: 1px solid var(--v3-hair);
  background: #fffdf8;
  border-radius: 2px;
  padding: 7px 12px;
}

/* --- 12 · Meeting ---------------------------------------------------------------- */
.cta-alt {
  font-size: 13.5px;
  color: rgba(250, 247, 240, 0.75);
}
.cta-alt a {
  color: #faf7f0;
  text-decoration: none;
  border-bottom: 1px solid rgba(250, 247, 240, 0.4);
}
.cta-alt a:hover { border-bottom-color: #faf7f0; }

/* --- v4 responsive ------------------------------------------------------------- */
@media (max-width: 1020px) {
  .v4-tier { grid-template-columns: 4fr 6fr; }
  .tier-artifact { display: none; }
}
@media (max-width: 860px) {
  .v4-tier { grid-template-columns: 1fr; }
  .trust-band .container { gap: 10px; flex-direction: column; }
  .trust-line i { padding: 0 8px; }
  .billing-wrap { grid-template-columns: 1fr; gap: 36px; }
  .principal-wrap { grid-template-columns: 1fr; gap: 40px; }
  .principal-frame { max-width: 300px; }
  .fact-band { padding: 52px 0; }
  .fact-band-grid { grid-template-columns: 1fr 1fr; gap: 22px 0; }
  .fact:nth-child(3) { border-left: none; padding-left: 0; }
  .v4-ledger .ledger-row { grid-template-columns: 96px 1fr auto; }
  .takeoff-band { padding: 40px 0 56px; }
  .takeoff-video { width: min(82vw, 420px); }
}
@media (prefers-reduced-motion: reduce) {
  .v4-hero-stage > *, .v4-hero-visual, .v4-ledger .ledger-row, .paper { opacity: 1 !important; transform: none !important; transition: none !important; }
}


/* ==========================================================================
   v5 — pass 1+2: self-hosted fonts, identity bar, scroll-aware nav,
   link motion, two-tone emphasis, takeoff fade, hero-xl experiment.
   ========================================================================== */

/* --- Self-hosted fonts (replaces Google CDN) --------------------------- */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/InstrumentSerif-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/InstrumentSerif-400.woff2') format('woff2');
}
/* One variable file serves every weight (the four per-weight files were
   byte-identical copies of this same variable font). New filename because
   font URLs are immutable-cached. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/Inter-var.woff2') format('woff2');
}

/* --- Identity bar: thin navy signature above the nav -------------------- */
body::before {
  content: "";
  display: block;
  height: 3px;
  background: var(--v3-navy);
}

/* --- Nav: transparent at rest, frosted once scrolled -------------------- */
.site-header {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid transparent;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.site-header.scrolled {
  background: rgba(250, 250, 249, 0.82);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom-color: var(--color-border-subtle);
}

/* --- Link micro-motion --------------------------------------------------- */
.tier-link,
.hero-secondary-link,
.dark-note a {
  display: inline-block;
  transition: transform 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.tier-link:hover,
.hero-secondary-link:hover,
.dark-note a:hover {
  transform: translateX(3px);
}

/* --- Two-tone emphasis (Harvey device) ----------------------------------- */
.tone-muted { color: var(--v3-muted); }

/* --- Takeoff band: fade up before playback (armed by JS) ----------------- */
.takeoff-band.will-fade { opacity: 0; transition: opacity 1.1s ease; }
.takeoff-band.will-fade.is-visible { opacity: 1; }

/* --- Hero, bold (Ali-approved Aug 12: "Bold is great") -------------------
   Display type at 5rem; the bird breaks the container and bleeds to the
   left viewport edge. */
.hero-h1 {
  font-size: clamp(2.6rem, 5.6vw, 5rem);
  /* fits "Your company's lawyer," / "boardroom to courtroom." as two lines */
  max-width: 24ch;
}
.hero-lead { max-width: 46ch; }
.hero-asymm {
  grid-template-columns: 1.15fr 1fr;
  gap: 40px;
}
.hero-asymm-visual {
  margin-left: calc(50% - 50vw);
  justify-content: flex-start;
}
.bird-hero {
  max-width: min(44vw, 860px);
}
/* (Bold-hero mobile re-collapse deleted — superseded by v33/v34/v36 at
   the end of the file, which own the ≤960 hero outright.) */

@media (prefers-reduced-motion: reduce) {
  .takeoff-band.will-fade { opacity: 1; transition: none; }
  .tier-link:hover, .hero-secondary-link:hover, .dark-note a:hover { transform: none; }
}

/* --- Keyboard focus ------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
.faq-question:focus-visible {
  outline: 2px solid var(--v3-navy);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- v9: closing sequence — footer as a considered final panel ----------- */
.site-footer { padding: 96px 0 44px; }
.footer-brand .brand { font-size: 1.55rem; }
.footer-brand p { max-width: 34ch; margin-top: 14px; line-height: 1.7; }
.footer-cta { margin-top: 24px; }
.footer-col h5 {
  color: var(--v3-navy);
  letter-spacing: 0.14em;
}
.footer-bottom { margin-top: 72px; padding-top: 26px; }

/* ==========================================================================
   v10 — Visual System 2, Phase B: paper grain + an object in every panel
   (gap scatter, ledger card, billing pair, bigger tier papers).
   ========================================================================== */

/* --- Site-wide paper grain (multiply, ~6%) ------------------------------- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
  opacity: 0.055;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Generic paper vocabulary additions ---------------------------------- */
.paper { width: 170px; }
.paper-line.w50 { width: 50%; }
.paper-cap {
  position: absolute;
  bottom: -24px;
  left: 2px;
  font-family: 'Inter', sans-serif;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--v3-muted);
  white-space: nowrap;
}
.paper-amt { display: flex; align-items: center; gap: 8px; }
.paper-amt i { display: block; height: 5px; border-radius: 1px; background: #dfd8c3; }
.paper-amt i.w50 { width: 50%; } .paper-amt i.w60 { width: 60%; } .paper-amt i.w80 { width: 80%; }
.paper-amt b {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #8d8672;
  white-space: nowrap;
}
.paper-fixed {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--v3-navy);
  border-top: 1px solid #e6dfcc;
  padding-top: 8px;
  margin-top: 4px;
}

/* --- Gap: the work comes to one desk ------------------------------------- */
.gap-scatter {
  position: relative;
  height: 300px;
  margin: 60px auto 8px;
  max-width: 560px;
}
.gap-scatter .paper { position: absolute; width: 150px; }
.gap-scatter .gs { transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1); opacity: 0.62; }
.gs1 { left: 3%; top: 16%; transform: rotate(-8deg); }
.gs2 { right: 3%; top: 4%; transform: rotate(7deg); }
.gs3 { right: 13%; bottom: 2%; transform: rotate(12deg); }
.gs-main {
  left: 50%; top: 10%;
  width: 172px;
  transform: translateX(-50%) rotate(-1deg);
  z-index: 2;
  box-shadow: 0 18px 40px rgba(28, 27, 23, 0.15), 0 2px 6px rgba(28, 27, 23, 0.06);
}
/* pre-settle state: more scattered until the panel reveals */
.gap-scatter.reveal:not(.is-visible) .gs1 { transform: rotate(-17deg) translate(-34px, -14px); }
.gap-scatter.reveal:not(.is-visible) .gs2 { transform: rotate(15deg) translate(34px, -20px); }
.gap-scatter.reveal:not(.is-visible) .gs3 { transform: rotate(23deg) translate(26px, 24px); }

/* --- Ledger: a paper artifact, not a table -------------------------------- */
.v4-ledger {
  background: #fffdf8;
  border: 1px solid #e6dfcc;
  border-top: 1px solid #e6dfcc;
  border-radius: 2px;
  box-shadow: 0 16px 36px rgba(28, 27, 23, 0.09), 0 2px 6px rgba(28, 27, 23, 0.05);
  padding: 0 26px 10px;
}
.ledger-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 16px 0 12px;
  border-bottom: 1px solid var(--v3-ink);
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v3-navy);
}
.ledger-head span:last-child { color: var(--v3-muted); letter-spacing: 0.08em; }

/* --- Billing: the invoice behind, the quote in front ---------------------- */
.billing-artifact {
  position: relative;
  display: flex;
  align-items: flex-start;
  margin: 38px 0 26px;
}
.billing-artifact .paper { width: 168px; }
.paper-hourly {
  transform: rotate(-3deg);
  opacity: 0.55;
  filter: grayscale(0.35);
}
.paper-quote {
  transform: rotate(1.5deg);
  margin-left: -30px;
  margin-top: 16px;
  z-index: 2;
  box-shadow: 0 16px 34px rgba(28, 27, 23, 0.15), 0 2px 6px rgba(28, 27, 23, 0.06);
}

/* --- Tier papers: more presence, visible on phones ------------------------ */
.tier-artifact { min-height: 224px; }
.paper-form { left: 54px; height: 166px; }

@media (max-width: 860px) {
  .tier-artifact {
    display: block;
    position: relative;
    min-height: 210px;
    width: 190px;
    margin: 24px auto 10px;
  }
  .gap-scatter { height: 250px; margin-top: 44px; }
  .gap-scatter .paper { width: 116px; padding: 14px 12px 18px; }
  .gap-scatter .gs-main { width: 134px; }
  .billing-artifact { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .gap-scatter .gs { transition: none; }
  .gap-scatter.reveal .gs1 { transform: rotate(-8deg); }
  .gap-scatter.reveal .gs2 { transform: rotate(7deg); }
  .gap-scatter.reveal .gs3 { transform: rotate(12deg); }
}

/* ==========================================================================
   v11 — Visual System 2, Phase C: motion layer + issuer plate.
   Motion rules: objects settle, hairlines draw, chips stamp. Nothing
   floats, spins, or bounces. Reduced motion always gets the settled state.
   ========================================================================== */

/* --- Scatter v2: five providers, staggered settle -------------------------- */
.gs4 { left: 9%; bottom: 7%; transform: rotate(-15deg); }
.gs5 { left: 27%; top: 0; transform: rotate(4deg); }
.gap-scatter.reveal:not(.is-visible) .gs4 { transform: rotate(-28deg) translate(-40px, 30px); }
.gap-scatter.reveal:not(.is-visible) .gs5 { transform: rotate(16deg) translate(-18px, -34px); }
.gap-scatter.reveal:not(.is-visible) .gs1 { transform: rotate(-22deg) translate(-52px, -22px); }
.gap-scatter.reveal:not(.is-visible) .gs2 { transform: rotate(19deg) translate(48px, -30px); }
.gap-scatter.reveal:not(.is-visible) .gs3 { transform: rotate(28deg) translate(40px, 34px); }
.gap-scatter .gs1 { transition-delay: 0.05s; }
.gap-scatter .gs2 { transition-delay: 0.12s; }
.gap-scatter .gs3 { transition-delay: 0.19s; }
.gap-scatter .gs4 { transition-delay: 0.26s; }
.gap-scatter .gs5 { transition-delay: 0.33s; }
.gap-scatter .gs-main {
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.4s,
              box-shadow 0.9s ease 0.4s;
}
.gap-scatter.reveal:not(.is-visible) .gs-main {
  transform: translateX(-50%) rotate(-1deg) scale(0.96);
  box-shadow: 0 6px 16px rgba(28, 27, 23, 0.08);
}

/* --- Hairlines draw in ------------------------------------------------------ */
.trust-band.rules-arm { border-top: none; border-bottom: none; position: relative; }
.trust-band.rules-arm::before,
.trust-band.rules-arm::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--v3-hair);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.trust-band.rules-arm::before { top: 0; transition-delay: 0.55s; }
.trust-band.rules-arm::after { bottom: 0; transition-delay: 0.75s; }
body.is-loaded .trust-band.rules-arm::before,
body.is-loaded .trust-band.rules-arm::after { transform: scaleX(1); }

.reveal .ledger-head { border-bottom: none; position: relative; padding-bottom: 13px; }
.reveal .ledger-head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--v3-ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.25s;
}
.reveal.is-visible .ledger-head::after { transform: scaleX(1); }

/* --- Chips stamp in ---------------------------------------------------------- */
.v4-ledger .ledger-chip {
  opacity: 0;
  transform: scale(0.82);
  transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.reveal.is-visible .v4-ledger .ledger-chip { opacity: 1; transform: scale(1); }
.reveal.is-visible .v4-ledger .ledger-row:nth-child(2) .ledger-chip { transition-delay: 0.5s; }
.reveal.is-visible .v4-ledger .ledger-row:nth-child(3) .ledger-chip { transition-delay: 0.64s; }
.reveal.is-visible .v4-ledger .ledger-row:nth-child(4) .ledger-chip { transition-delay: 0.78s; }
.reveal.is-visible .v4-ledger .ledger-row:nth-child(5) .ledger-chip { transition-delay: 0.92s; }

/* --- Issuer note: a print pinned to the dark wall ---------------------------- */
.dark-note-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: 72px;
  align-items: center;
}
.dark-plate { margin: 0; justify-self: end; }
.dark-plate img {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  background: #faf7f0;
  padding: 12px;
  border: 1px solid rgba(250, 247, 240, 0.16);
  transform: rotate(1.6deg);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* --- Phase C responsive + reduced motion -------------------------------------- */
@media (max-width: 860px) {
  .dark-note-grid { grid-template-columns: 1fr; gap: 44px; }
  .dark-plate { justify-self: center; }
  .dark-plate img { max-width: 230px; }
}
@media (max-width: 640px) {
  .gs4, .gs5 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .gap-scatter .gs, .gap-scatter .gs-main { transition: none; }
  .trust-band.rules-arm::before, .trust-band.rules-arm::after { transform: scaleX(1); transition: none; }
  .reveal .ledger-head::after { transform: scaleX(1); transition: none; }
  .v4-ledger .ledger-chip { opacity: 1; transform: none; transition: none; }
}

/* the settled desk paper is fully opaque (gs gave it the faded .62) */
.gap-scatter .gs-main { opacity: 1; }

/* ==========================================================================
   v13 — Round 1: the visible ladder, the shout, the ochre accent.
   Ochre is sampled from the bird's breast feathers; it appears ONLY at
   tier numerals, the shout underline, outcome chips, and paper seals.
   ========================================================================== */
:root { --v3-ochre: #b9863c; }

html { scroll-behavior: smooth; }
#tier-1, #tier-2, #tier-3 { scroll-margin-top: 120px; }

/* --- Routing chips: which door is yours ----------------------------------- */
.tier-route {
  margin-top: 42px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.route-chip {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  border: 1px solid var(--v3-hair);
  border-radius: 2px;
  padding: 16px 18px;
  background: #fffdf8;
  text-decoration: none;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.route-chip em {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 17px;
  color: var(--v3-ink);
}
.route-chip span {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--v3-ochre);
  white-space: nowrap;
}
.route-chip:hover {
  border-color: var(--v3-ochre);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(28, 27, 23, 0.07);
}

/* --- The ladder rail: the climb, drawn ------------------------------------- */
.v4-tier-rows { position: relative; padding-left: 56px; }
.v4-tier-rows::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: var(--v3-hair);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.25s;
}
.tier-route.is-visible ~ .v4-tier-rows::before { transform: scaleY(1); }
.v4-tier::before {
  content: "";
  position: absolute;
  left: -42.5px;
  top: 46px;
  width: 9px;
  height: 9px;
  background: var(--v3-navy);
  transform: rotate(45deg);
}
.tier-num {
  display: block;
  font-family: 'Instrument Serif', serif;
  font-size: clamp(2.6rem, 3.4vw, 3.4rem);
  line-height: 0.9;
  color: var(--v3-ochre);
  margin-bottom: 12px;
  font-variant-numeric: tabular-nums;
}
.services-ladder-note {
  margin-top: 36px;
  padding-left: 56px;
  text-align: left;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--v3-muted);
  max-width: 72ch;
}

/* --- The shout: fees at full volume ----------------------------------------- */
.shout-h2 {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: clamp(2.8rem, 6.2vw, 5.8rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--v3-ink);
  max-width: 18ch;
  margin: 16px 0 26px;
  text-wrap: balance;
}
.shout-u { box-shadow: inset 0 -0.09em 0 var(--v3-ochre); }
.shout-sub {
  max-width: 58ch;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--v3-muted);
}
.billing-wrap { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.billing-artifact { margin: 6px 0 0; }

/* --- Ochre joins the objects -------------------------------------------------- */
.ledger-chip { color: var(--v3-ochre); border-color: rgba(185, 134, 60, 0.45); }
.paper-seal { border-color: var(--v3-ochre); opacity: 0.9; }
.ledger-body strong, .tier-meta { font-variant-numeric: tabular-nums; }

/* --- Round 1 responsive + reduced motion --------------------------------------- */
@media (max-width: 860px) {
  .tier-route { grid-template-columns: 1fr; gap: 10px; }
  .v4-tier-rows { padding-left: 32px; }
  .v4-tier-rows::before { left: 7px; }
  .v4-tier::before { left: -29.5px; top: 38px; }
  .services-ladder-note { padding-left: 32px; }
  .shout-h2 { font-size: clamp(2.3rem, 9vw, 3.4rem); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .v4-tier-rows::before { transform: scaleY(1); transition: none; }
  .route-chip:hover { transform: none; }
}

/* ==========================================================================
   v14 — Round 2: wayfinding + finish. Nav tracks the section you're
   reading; FAQ gets numbered, animated affordance; the principal plate
   is signed.
   ========================================================================== */

/* --- Nav: current-section marker ------------------------------------------ */
.nav-links a { position: relative; }
.nav-links a.active { color: var(--v3-ink); }
.nav-links a.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: var(--v3-navy);
}

/* --- FAQ: numbered, animated, hoverable ------------------------------------- */
.faq { counter-reset: faq; }
.faq-question { transition: color 0.2s ease; }
.faq-question::before {
  counter-increment: faq;
  content: counter(faq, decimal-leading-zero);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--v3-muted);
  margin-right: 18px;
  font-variant-numeric: tabular-nums;
  flex: none;
}
.faq-question:hover { color: var(--v3-navy); }
.faq-plus { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.faq-item.open .faq-plus { transform: rotate(45deg); }

/* --- Principal: the signed plate ---------------------------------------------- */
.principal-monogram { position: relative; }
.principal-sig {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.1rem, 2.8vw, 2.9rem);
  line-height: 1.1;
  color: var(--v3-ink);
  transform: rotate(-2.5deg);
  text-align: center;
}
.principal-seal {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 26px;
  height: 26px;
}

@media (prefers-reduced-motion: reduce) {
  .faq-plus { transition: none; }
}

/* numbered questions read left-aligned, plus pinned right */
.faq-question { justify-content: flex-start; text-align: left; }
.faq-plus { margin-left: auto; }

/* ==========================================================================
   v16 — Track A + C: living footage (loop hero, silk takeoff, landing
   plate) + craft depth (paper micro-type, embossed seals, dark grain).
   ========================================================================== */

/* --- CTA landing plate: counsel arrives at the ask ------------------------- */
.cta-plate {
  margin: 0 auto 44px;
  width: min(280px, 58vw);
}
.cta-plate video {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  background: #faf7f0;
  padding: 10px;
  border: 1px solid rgba(250, 247, 240, 0.16);
  transform: rotate(-1.6deg);
  box-shadow: 0 26px 56px rgba(0, 0, 0, 0.5), 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* --- Paper micro-type: documents, not wireframes ---------------------------- */
.paper-text {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 6.5px;
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: #a89f86;
  white-space: nowrap;
  overflow: hidden;
}
.paper-text.caps {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 6px;
  color: #8d8672;
}

/* --- Seals: pressed, not drawn ----------------------------------------------- */
.paper-seal {
  border: none;
  background: radial-gradient(circle at 35% 30%, #d3a55c, #b9863c 55%, #9a6d2c);
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.5),
    inset 0 -1px 2px rgba(90, 60, 15, 0.35),
    0 1px 2px rgba(28, 27, 23, 0.2);
  opacity: 1;
}
.paper-seal::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(255, 253, 248, 0.55);
  border-radius: 50%;
}
.paper-seal::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  background: rgba(90, 60, 15, 0.5);
  transform: rotate(45deg);
}

/* --- Dark sections: filmic screen grain ---------------------------------------- */
.dark-note, .cta-section, .fact-band { position: relative; }
.dark-note::after, .cta-section::after, .fact-band::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.07;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (max-width: 640px) {
  .cta-plate { width: min(220px, 62vw); margin-bottom: 36px; }
}

/* ==========================================================================
   v17 — Track B + object theater. The takeoff becomes scroll-scrubbed
   (230vh band, sticky plate, scroll drives the flight); the papers act:
   stamps thunk, seals press, redlines strike, ledger rules write.
   ========================================================================== */

/* --- Scroll-scrubbed flight (scrub-on set by JS; static plate otherwise) --- */
body.scrub-on .takeoff-band {
  height: 230vh;
  padding: 0;
}
body.scrub-on .takeoff-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.takeoff-sticky { padding: 24px 0; }

/* --- The stamp thunks in ---------------------------------------------------- */
.paper-stamp {
  position: absolute;
  top: 30px;
  right: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--v3-navy);
  border: 1.5px solid var(--v3-navy);
  border-radius: 2px;
  padding: 3px 6px;
  mix-blend-mode: multiply;
  transform: rotate(-8deg) scale(1.7);
  opacity: 0;
}
.reveal.is-visible .paper-stamp {
  opacity: 0.85;
  transform: rotate(-8deg) scale(1);
  transition:
    transform 0.3s cubic-bezier(0.2, 1.4, 0.4, 1) 0.6s,
    opacity 0.15s ease 0.6s;
}

/* --- Seals press in ---------------------------------------------------------- */
.reveal .paper-seal { transform: scale(1.5); opacity: 0; }
.reveal.is-visible .paper-seal {
  transform: scale(1);
  opacity: 1;
  transition:
    transform 0.3s cubic-bezier(0.2, 1.5, 0.4, 1) 0.5s,
    opacity 0.15s ease 0.5s;
}

/* --- Redlines strike ---------------------------------------------------------- */
.paper-line.marked::after {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  top: 46%;
  height: 1.5px;
  background: var(--v3-navy);
  transform: scaleX(0);
  transform-origin: left;
}
.reveal.is-visible .paper-line.marked::after {
  transform: scaleX(1);
  transition: transform 0.5s ease 0.75s;
}

/* --- Ledger rules write themselves --------------------------------------------- */
.v4-ledger .ledger-row { border-bottom: none; position: relative; }
.v4-ledger .ledger-row::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--v3-hair);
  transform: scaleX(0);
  transform-origin: left;
}
.reveal.is-visible .v4-ledger .ledger-row::after {
  transform: scaleX(1);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-visible .v4-ledger .ledger-row:nth-child(2)::after { transition-delay: 0.2s; }
.reveal.is-visible .v4-ledger .ledger-row:nth-child(3)::after { transition-delay: 0.33s; }
.reveal.is-visible .v4-ledger .ledger-row:nth-child(4)::after { transition-delay: 0.46s; }
.reveal.is-visible .v4-ledger .ledger-row:nth-child(5)::after { transition-delay: 0.59s; }

@media (max-width: 860px) {
  body.scrub-on .takeoff-band { height: 200vh; }
}
@media (prefers-reduced-motion: reduce) {
  .paper-stamp { opacity: 0.85; transform: rotate(-8deg) scale(1); transition: none; }
  .reveal .paper-seal { transform: scale(1); opacity: 1; transition: none; }
  .paper-line.marked::after { transform: scaleX(1); transition: none; }
  .v4-ledger .ledger-row::after { transform: scaleX(1); transition: none; }
}

/* ==========================================================================
   v18 — the generated footage integrated: night plate on the issuer panel,
   second bird lands at the ask, flock behind the facts, navy wash under
   the dark sections, two ambient heroes.
   ========================================================================== */

/* --- Issuer plate now lives (video takes the matted-print styles) --------- */
.dark-plate video {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  background: #0d1526;
  padding: 12px;
  border: 1px solid rgba(250, 247, 240, 0.16);
  transform: rotate(1.6deg);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);
}
@media (max-width: 860px) {
  .dark-plate video { max-width: 230px; }
}

/* --- Fact band: the flock rises behind the facts --------------------------- */
.fact-band { overflow: hidden; }
.fact-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.38;
  pointer-events: none;
}
.fact-band .container { position: relative; z-index: 1; }
.fact-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(10, 37, 64, 0.55), rgba(10, 37, 64, 0.72));
  pointer-events: none;
}

/* (v18 navy-wash backgrounds deleted — navy-wash.jpg is excluded from
   dist and the v23 flat-ink rules own these sections. Do not re-add
   url() references to excluded assets.) */

/* ==========================================================================
   v19 — pull back to one bird, one hand. All on-page footage derives from
   the original clips; generated takes benched until they match. The only
   v18 survivors are abstract: the navy wash and the og card.
   ========================================================================== */
.fact-band::before { content: none; }

/* ==========================================================================
   v20 — the three-act bird (perch / flight / landing-with-company) and
   the issuer panel's disclosure-calendar artifact.
   ========================================================================== */

/* the un-pinned flight sits calmer in the flow */
.takeoff-video { width: min(480px, 68vw); }

/* --- Issuer artifact: the disclosure calendar ------------------------------ */
.dark-artifact { margin: 0; justify-self: end; }
.paper-calendar {
  width: 218px;
  transform: rotate(1.8deg);
  box-shadow: 0 26px 54px rgba(0, 0, 0, 0.5), 0 3px 8px rgba(0, 0, 0, 0.3);
}
.paper-calendar .paper-head { width: 58%; }
.cal-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid #eee7d4;
}
.cal-row:last-of-type { border-bottom: none; }
.cal-row b {
  font-family: 'Inter', sans-serif;
  font-size: 7.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6f6b60;
  white-space: nowrap;
}
.cal-row i { flex: 1; height: 4px; background: #dfd8c3; border-radius: 1px; }
.paper-calendar .paper-cap { color: rgba(250, 247, 240, 0.55); }

@media (max-width: 860px) {
  .dark-artifact { justify-self: center; }
}

/* ==========================================================================
   v21 — calibration pass: dynamic range restored (section headers step
   back so the hero and the shout lead), one numbering language, launch
   furniture (privacy / 404 / disclaimer).
   ========================================================================== */

/* Section headers step down from 58px — the shout (78px) and hero (71px)
   now clearly lead the page. */
.v3-section .section-header h2,
.v3-h2,
.principal-name {
  font-size: clamp(2rem, 3.2vw, 2.875rem);
}

/* Tier numerals become true display markers over their titles */
.tier-num { font-size: clamp(3rem, 4.4vw, 3.75rem); }

/* The ledger panel breathes tighter — varies the 130px run mid-page */
#month.v3-section { padding: 96px 0; }

/* One numbering language: method steps join the ochre serif */
.method-col .num {
  font-family: 'Instrument Serif', serif;
  font-size: 1.7rem;
  font-weight: 400;
  color: var(--v3-ochre);
  letter-spacing: 0;
}

/* CTA disclaimer — the relationship line, quiet but present */
.cta-disclaimer {
  margin: 26px auto 0;
  max-width: 52ch;
  font-size: 12.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.55);
}

/* Privacy page prose */
.legal-prose p { margin-bottom: 22px; font-size: 15.5px; line-height: 1.8; color: var(--v3-ink); max-width: 62ch; }
.legal-prose a { color: var(--v3-navy); }
.legal-prose .legal-meta { font-size: 12.5px; color: var(--v3-muted); margin-top: 34px; }

/* 404 bird plate */
.notfound-bird {
  display: block;
  width: min(300px, 60vw);
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin: 0 auto 8px;
  -webkit-mask-image: radial-gradient(ellipse 70% 75% at center, black 50%, transparent 86%);
  mask-image: radial-gradient(ellipse 70% 75% at center, black 50%, transparent 86%);
  mix-blend-mode: multiply;
}

/* ==========================================================================
   v22 — two acts + the summit. The flight interlude is retired (third
   strike: bird-only sections don't work here). In its place, the smallest
   bird on the page perches where the ladder's climb ends.
   ========================================================================== */
.rail-bird {
  position: absolute;
  top: -72px;
  left: -30px;
  width: 96px;
  height: 96px;
  object-fit: cover;
  -webkit-mask-image: radial-gradient(circle at 50% 48%, black 40%, transparent 70%);
  mask-image: radial-gradient(circle at 50% 48%, black 40%, transparent 70%);
  mix-blend-mode: multiply;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.9s ease 0.35s;
}
.tier-route.is-visible ~ .v4-tier-rows .rail-bird { opacity: 1; }

@media (max-width: 860px) {
  .rail-bird { width: 80px; height: 80px; top: -60px; left: -33px; }
}
@media (prefers-reduced-motion: reduce) {
  .rail-bird { opacity: 1; transition: none; }
}

/* ==========================================================================
   v23 — the ghost in the wash. The navy-wash crop carried branch and wing
   structure from its source frame; at section scale it loomed behind the
   content like a phantom bird (Ali caught it). Dark sections return to
   flat ink — the film grain overlay alone carries their texture.
   ========================================================================== */
.dark-note { background: #10151d; }
.cta-section { background: var(--color-text); }
.fact-band { background: var(--v3-navy); }

/* ==========================================================================
   v24 — the climb, drawn. The ladder-top junction is rebuilt: no more
   full-width 'wire', the rail terminates as a post under the bird's feet,
   the routing chips hold together, and a dotted ochre flight path — the
   client's journey — rises from tier 03 to the summit as you scroll.
   ========================================================================== */

/* no wire: the vertical structures own the ladder's top */
.v4-tier-rows { border-top: none; }

/* the rail becomes a post: tip ends under the bird's feet */
.v4-tier-rows::before { top: -8px; }

/* the journey: dotted ochre ink, revealed by scroll (JS clips upward) */
.climb-path {
  position: absolute;
  left: -56px;
  top: -8px;
  bottom: 8px;
  width: 120px;
  height: calc(100% + 0px);
  pointer-events: none;
  clip-path: inset(100% 0 0 0);
}
.climb-path path {
  stroke: var(--v3-ochre);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 0.1 8;
  opacity: 0.85;
}

/* routing chips hold together: compact, self-contained */
.tier-route {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.route-chip {
  flex: 0 1 auto;
  justify-content: flex-start;
  gap: 16px;
  padding: 13px 20px;
}

@media (max-width: 860px) {
  .tier-route { flex-direction: column; align-items: stretch; }
  .route-chip { justify-content: space-between; }
  .climb-path { left: -47px; width: 104px; }
}
@media (prefers-reduced-motion: reduce) {
  .climb-path { clip-path: none !important; }
}

/* ==========================================================================
   v25 — the routing chips leave the ladder's sky. Header left, questions
   stacked right; below, the climb owns its space: bird, path, rail only.
   ========================================================================== */
.work-head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 56px;
  align-items: end;
}
.work-head .section-header { margin-bottom: 0; }
.tier-route { flex-direction: column; gap: 10px; margin-top: 0; }
.route-chip { justify-content: space-between; }

/* rail + bird triggers follow the relocated header block */
.work-head.is-visible ~ .v4-tier-rows::before { transform: scaleY(1); }
.work-head.is-visible ~ .v4-tier-rows .rail-bird { opacity: 1; }

@media (max-width: 860px) {
  .work-head { grid-template-columns: 1fr; gap: 28px; align-items: start; }
}

/* ==========================================================================
   v26 — the flight gets a job. The silk takeoff returns at footnote scale,
   anchored to the sentence it illustrates: 'The work gets done.' Plays
   once on arrival; ends on the empty branch — the work has flown.
   ========================================================================== */
.step-flight {
  display: block;
  width: 180px;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  margin: 20px 0 0;
  -webkit-mask-image: radial-gradient(ellipse 70% 75% at center, black 48%, transparent 78%);
  mask-image: radial-gradient(ellipse 70% 75% at center, black 48%, transparent 78%);
  mix-blend-mode: multiply;
}
@media (max-width: 860px) {
  .step-flight { margin: 20px auto 0; }
}

/* ==========================================================================
   v27 — the paper flies, not the bird. The fees panel stays in one
   language: under 'The work gets done.', the finished paper is signed and
   a copy lifts away. (The bird plate was a guest in the papers' room —
   86% of its column wide and 24px past the panel's floor.)
   ========================================================================== */
.work-flight {
  position: relative;
  height: 138px;
  margin: 24px 0 0;
}
.work-flight .paper {
  position: absolute;
  width: 108px;
  padding: 13px 11px 15px;
  gap: 6px;
}
.wf-rest {
  left: 0;
  bottom: 0;
  transform: rotate(-2.5deg);
}
.wf-flown {
  left: 12px;
  bottom: 8px;
  transform: rotate(-1deg);
  box-shadow: 0 6px 16px rgba(28, 27, 23, 0.09);
  transition:
    transform 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.55s,
    opacity 1.3s ease 0.65s,
    box-shadow 1.6s ease 0.55s;
}
.reveal.is-visible .wf-flown {
  transform: translate(52px, -78px) rotate(13deg) scale(0.92);
  opacity: 0.42;
  box-shadow: 0 22px 34px rgba(28, 27, 23, 0.06);
}
.work-flight .paper-seal { right: 11px; bottom: 12px; width: 19px; height: 19px; }

@media (max-width: 860px) {
  .work-flight { margin-left: auto; margin-right: auto; width: 190px; }
}
@media (prefers-reduced-motion: reduce) {
  .wf-flown {
    transform: translate(52px, -78px) rotate(13deg) scale(0.92);
    opacity: 0.42;
    transition: none;
  }
}

/* ==========================================================================
   v29 — the whole tree, finally. Every bird moment on the site is a
   close-up of a branch; the footer pulls back and shows what the branch
   belongs to. The site ends under the tree.
   ========================================================================== */
.site-footer { position: relative; overflow: hidden; }
.footer-tree {
  position: absolute;
  right: -24px;
  bottom: 0;
  width: 340px;
  height: auto;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.92;
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 24%);
  mask-image: linear-gradient(to right, transparent 0, black 24%);
}
.site-footer .container { position: relative; z-index: 1; }

@media (max-width: 1100px) {
  .footer-tree { width: 270px; opacity: 0.7; }
}
@media (max-width: 860px) {
  .footer-tree {
    width: 210px;
    right: -44px;
    opacity: 0.4;
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 40%),
      linear-gradient(to bottom, transparent 0, black 22%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0, black 40%),
      linear-gradient(to bottom, transparent 0, black 22%);
    mask-composite: intersect;
  }
}

/* ==========================================================================
   v30 — the tree joins our paper. Source white-balanced so multiply
   dissolves its ground entirely: ink on OUR cream, no plate, no seam.
   Masks dropped (nothing left to hide); sits a touch smaller and calmer.
   ========================================================================== */
.footer-tree {
  width: 300px;
  right: -8px;
  opacity: 1;
  -webkit-mask-image: none;
  mask-image: none;
}
@media (max-width: 1100px) {
  .footer-tree { width: 240px; opacity: 1; }
}
@media (max-width: 860px) {
  .footer-tree {
    width: 190px;
    right: -30px;
    opacity: 0.55;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* ==========================================================================
   v31 — the responsive pass: every size gets a thought-out experience.
   Findings from instrumented walks at 375 / 768 / 1280x728 / 1900.
   ========================================================================== */

/* Decorated sections clip their gutter overhangs — no horizontal scroll,
   ever (a scatter paper was creating 29px of scroll on phones).
   `hidden` first: iOS 15 Safari doesn't know `clip` and would otherwise
   drop the guard entirely. */
.v4-gap, #work, #month { overflow-x: hidden; overflow-x: clip; }

/* Hero: the edge-bleed is calibrated per width. Full drama on big
   monitors; on laptops the pull is eased so ~3/4 of the bird shows
   (it was half-offscreen at 1280). */
@media (max-width: 1500px) and (min-width: 961px) {
  .hero-asymm-visual { margin-left: calc(50% - 50vw + 12vw); }
}

/* The trust-band scroll cue returns at common desktop heights.
   (Must sit BEFORE the short-screen block: equal specificity, and the
   media rule's min-height: 0 has to win on short screens.) */
.hero-asymm-wrap { min-height: 88vh; min-height: 88dvh; }
/* Short screens: the hero must never hide the ask. Below 800px of
   height, it sizes to content so Book-a-call sits inside the fold. */
@media (max-height: 800px) and (min-width: 961px) {
  .hero-asymm-wrap { min-height: 0; padding: 40px 0 44px; }
}

/* Phone ledger: label + chip were squeezing the entry text to 94px.
   The chip drops to its own line; the text gets the row. */
@media (max-width: 640px) {
  .v4-ledger { padding: 0 16px 10px; }
  .v4-ledger .ledger-row { grid-template-columns: 72px 1fr; }
  .v4-ledger .ledger-label { font-size: 10px; }
  .v4-ledger .ledger-chip { grid-column: 2; justify-self: start; margin-top: 6px; }
}

/* Phone/tablet footer: the tree was standing on the legal lines. It now
   gets its own ground — a reserved band below everything, closing the
   page alone. */
@media (max-width: 860px) {
  .site-footer.has-tree { padding-bottom: 208px; }
  .footer-tree { width: 168px; right: -14px; bottom: -4px; opacity: 0.92; }
}
/* Mid-width: a touch more air between the tree and the Firm links. */
@media (max-width: 1440px) and (min-width: 861px) {
  .footer-tree { width: 260px; }
}

/* ==========================================================================
   v32 — mobile hero on our paper + the menu resurrected.
   Two cascade corpses: the hamburger's display:block (768 media, line
   ~1366) was overruled by a later base display:none; and the overlay
   expected an .is-open class the JS never sets (it toggles [hidden]).
   The mobile menu has been invisible AND unopenable. Both fixed below,
   at the end of the cascade where this file's history can't reach them.
   ========================================================================== */
@media (max-width: 768px) {
  .menu-toggle { display: block; }
}
.mobile-menu:not([hidden]) {
  display: flex;
  opacity: 1;
}

/* ==========================================================================
   v33 — the one design, transferred. Mobile was still serving the
   pre-pivot centered hero (a Mihr-era fossil in the old media queries).
   Now: the same left-rail editorial composition as desktop — kicker,
   headline, lead, and Book-a-call flush left, bird up top facing into
   the page, the ask inside the first screen.
   ========================================================================== */
@media (max-width: 960px) {
  .hero-asymm-wrap {
    min-height: 0;
    padding: 12px 0 52px;
  }
  .hero-asymm {
    text-align: left;
    gap: 18px;
    align-content: start;
  }
  .hero-asymm-content {
    align-items: flex-start;
    margin: 0;
    gap: 14px;
  }
  .hero-asymm-content .hero-ctas-stacked { align-items: flex-start; }
  .hero-asymm-visual {
    justify-content: flex-start;
    margin-left: 0;
  }
  .bird-hero { max-width: 60vw; }
  .hero-h1 {
    font-size: clamp(2.15rem, 8.2vw, 3rem);
    max-width: 15ch;
  }
  .hero-lead {
    font-size: 1.02rem;
    max-width: 40ch;
  }
}

/* ==========================================================================
   v34 — mobile hero as its own composition: the cover, not the shrunken
   spread. Order of impact on a phone: the claim first, then the bird as
   a full-bleed cinematic band, one tight line, the ask. Four beats, one
   screen. (display:contents interleaves the bird into the content flow.)
   ========================================================================== */
@media (max-width: 960px) {
  .hero-asymm { display: flex; flex-direction: column; gap: 0; }
  .hero-asymm-content { display: contents; }

  .hero-asymm-content .hero-eyebrow { order: 1; margin-bottom: 14px; }
  .hero-asymm-content .hero-h1 { order: 2; margin-bottom: 22px; }
  .hero-asymm-visual { order: 3; }
  .hero-asymm-content .hero-lead { order: 4; margin-bottom: 20px; }
  .hero-asymm-content .hero-ctas { order: 5; }

  /* the bird band: edge to edge, cinematic crop, on our paper */
  .hero-asymm-visual {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-bottom: 24px;
  }
  .bird-hero {
    width: 100vw;
    max-width: none;
    height: 56vw;
    object-fit: cover;
    object-position: 50% 34%;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .hero-h1 { font-size: clamp(2.25rem, 9.4vw, 3.1rem); max-width: 13ch; }
  .hero-lead { font-size: 1.02rem; max-width: 38ch; }
  .lead-extra { display: none; }
}

/* ==========================================================================
   v35 — the white-to-cream morph killed. Mid-fade opacity isolates the
   element and disables multiply, so the band rendered raw paper before
   snapping to cream. On mobile the band skips the fade entirely — blend
   active from first paint. Poster is now an extracted frame of the
   balanced video, so still and footage are pixel-twins.
   ========================================================================== */
@media (max-width: 960px) {
  .v4-hero-visual,
  body.is-loaded .v4-hero-visual {
    opacity: 1;
    transition: none;
  }
}

/* ==========================================================================
   v36 — the cover, art-directed. Three complaints, three root causes:
   (1) crest cut: bird occupies source rows 14–86%; a 56vw band shows only
       56% of the source — no object-position can contain it. 64vw @ 25%
       shows rows 9–73%: full crest with headroom, branch exits the frame
       bottom naturally.
   (2) "text positioning off": the desktop grid's align-items:center leaks
       into the v34 flex column and horizontally centers every fit-content
       child (eyebrow, 13ch h1, CTA stack) while the lead runs flush left.
   (3) "arrow feels off": no reference site (Stripe/Vercel/Linear/Harvey/
       Crosby/Legora) ships a scroll arrow — and ours slid RIGHT on hover
       while pointing DOWN. Now a bare underlined link, 44px tap target.
   Spacing: one ladder — 32 under the header, 12 in the text nucleus,
   24 at every other seam, 16 before the quiet link. Serif cover scale
   48px at 375 (reference band is 44–52), lh 1.08, -0.015em.
   ========================================================================== */
@media (max-width: 960px) {
  .hero-asymm { align-items: flex-start; }

  .hero-asymm-wrap { padding: 32px 0 64px; }
  .hero-asymm-content .hero-eyebrow { margin-bottom: 12px; font-size: 12px; }
  .hero-asymm-content .hero-h1 { margin-bottom: 24px; }
  .hero-asymm-visual { margin-bottom: 24px; }
  .hero-asymm-content .hero-lead { margin-bottom: 24px; }
  .hero-asymm-content .hero-ctas-stacked { margin-top: 0; gap: 16px; }

  .bird-hero {
    height: 64vw;
    object-position: 50% 25%;
    aspect-ratio: auto;
  }

  .hero-h1 {
    font-size: clamp(2.5rem, 11.75vw, 3.25rem);
    line-height: 1.08;
    letter-spacing: -0.015em;
    max-width: 18ch;
  }
  .hero-lead {
    font-size: 1.0625rem;
    line-height: 1.5;
    max-width: 34ch;
  }

  .hero-asymm-content .btn-primary.btn-lg {
    display: inline-flex;
    align-items: center;
    width: max-content;
    min-height: 48px;
    padding: 0 28px;
  }
}

/* Secondary link, both breakpoints: underlined text, no glyph, no slide */
.hero-secondary-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: -10px 0;
  font-size: 0.9375rem;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  /* rgba fallback first — color-mix is Safari 16.2+/Chrome 111+ */
  text-decoration-color: rgba(92, 100, 112, 0.5);
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}
.hero-secondary-link:hover {
  transform: none;
  text-decoration-color: currentColor;
}

/* Hamburger: 44px tap target in both axes, zero visual change (icon 22x14
   stays put; padding grows the hit area, negative margins absorb it) */
.menu-toggle {
  padding: 15px 11px;
  margin: -15px -11px -15px 0;
}

/* ==========================================================================
   v37 — the launch batch. Executes launch-review-1 (docs/design/):
   the billing-wrap cascade fix, dark-ground focus rings, accessible
   ochre for small type, the visible-email + terms lines, the mid-page
   ask, the trust proof line, menu motion + scroll lock, and the
   forced-dark opt-out. Full evidence in launch-review-1-findings.json.
   ========================================================================== */

/* Android auto-dark inverts the cream and turns every multiply plate
   near-black; this page is paper, always. */
:root { color-scheme: only light; }

/* The fees beat finally collapses on phones — the v13 base grid
   (line ~5580) was beating the 860px collapse by cascade order. */
@media (max-width: 860px) {
  .billing-wrap { grid-template-columns: 1fr; }
}

/* Focus rings were navy-on-navy (1.18:1) on the two dark beats. */
.dark-note :is(a, button):focus-visible,
.cta-section :is(a, button):focus-visible {
  outline-color: #faf7f0;
}

/* Ochre small type (route chips 11px, ledger chips 10px) sat at 3.08:1.
   Darker ink from the same pigment family; numerals and seals keep the
   true ochre — they're large enough to pass. */
:root { --v3-ochre-text: #8a6226; }
.route-chip span { color: var(--v3-ochre-text); }
.ledger-chip { color: var(--v3-ochre-text); }

/* "or write to …" on light ground — the .cta-alt base is cream-on-dark
   and would vanish on the hero. */
.cta-alt-light { color: var(--v3-muted); font-size: 13px; }
.cta-alt-light a {
  color: var(--v3-ink);
  border-bottom-color: rgba(26, 31, 43, 0.35);
}
.cta-alt-light a:hover { border-bottom-color: var(--v3-ink); }

/* Early proof under the trust band — restates the fact band's claims
   at the moment of first doubt. */
.trust-proof {
  margin: 12px 0 0;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--v3-muted);
}

/* The mid-page ask after the method steps. */
.method-ask { margin: 36px 0 0; }

/* The menu now fades in (display toggling defeats transitions — use a
   keyframe) and body.menu-open finally has a script that applies it. */
.mobile-menu:not([hidden]) { animation: menuFade 0.2s ease; }
@keyframes menuFade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .mobile-menu:not([hidden]) { animation: none; }
}

/* ==========================================================================
   v39 — the polish pass, executed from launch-review-1's verified tail:
   motion corrections, one type system, FAQ accessibility, skip link,
   system-conformance (stamped chips, hugging buttons, one numbering
   voice), and the Toronto/former-CCO answers from Ali (Aug 17).
   ========================================================================== */

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

/* Skip link: first tab stop, invisible until focused. */
.skip-link {
  position: absolute;
  left: 16px;
  top: -48px;
  z-index: 1300;
  background: var(--v3-navy);
  color: #faf7f0;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 2px;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus-visible { top: 16px; }

/* Ledger reveal stagger, re-indexed: .ledger-head is child 1, so the
   rows are children 2–5 — the old (1)–(4) block left the last row with
   no delay and it popped in first. */
.reveal.is-visible .v4-ledger .ledger-row:nth-child(2) { transition-delay: 0.05s; }
.reveal.is-visible .v4-ledger .ledger-row:nth-child(3) { transition-delay: 0.18s; }
.reveal.is-visible .v4-ledger .ledger-row:nth-child(4) { transition-delay: 0.31s; }
.reveal.is-visible .v4-ledger .ledger-row:nth-child(5) { transition-delay: 0.44s; }

/* One section-head size: three beats never carried the v21 step-down. */
.v4-gap .section-header h2,
#faq .section-header h2,
.cta-section h2 {
  font-size: clamp(2rem, 3.2vw, 2.875rem);
}

/* One kicker spec (was three: .eyebrow 12.8/0.08/500, .kicker 11/0.2/600,
   .trust-kicker 10.5/0.18/600). */
.eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
}
.trust-kicker {
  font-size: 11px;
  letter-spacing: 0.2em;
}

/* Method steps: driven by the parent reveal, not nested reveals that
   compounded a 48px slide and a double fade. */
.billing-wrap.reveal .method-col {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.billing-wrap.reveal.is-visible .method-col { opacity: 1; transform: none; }
.billing-wrap.reveal.is-visible .method-col:nth-child(2) { transition-delay: 0.12s; }
.billing-wrap.reveal.is-visible .method-col:nth-child(3) { transition-delay: 0.24s; }

/* Rail bird sat 9px past the phone edge — flush now, mask intact. */
@media (max-width: 860px) {
  .rail-bird { left: -24px; }
}

/* CTA section joins the warm-cream text family of the other dark beats
   (it was the one cool pure-white outlier). */
.cta-section .eyebrow { color: rgba(250, 247, 240, 0.7); }
.cta-section p { color: rgba(250, 247, 240, 0.72); }
.cta-disclaimer { color: rgba(250, 247, 240, 0.55); }

/* FAQ: collapsed answers leave the accessibility tree (they were
   readable in browse mode while the button said collapsed). Visibility
   flips after the height transition on close, immediately on open. */
.faq-answer {
  visibility: hidden;
  transition: max-height 0.3s ease, visibility 0s 0.3s;
}
.faq-item.open .faq-answer {
  visibility: visible;
  transition: max-height 0.3s ease, visibility 0s 0s;
}

/* One numbering voice: FAQ counters join the tiers and method steps in
   ochre serif (quiet size — an index, not a display numeral). */
.faq-question::before {
  font-family: 'Instrument Serif', serif;
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--v3-ochre);
}

/* System conformance: outcome chips are inked stamps (2px), not pills. */
.ledger-chip { border-radius: 2px; }

/* System conformance: every button hugs its label — the menu CTA was
   the one full-width survivor. */
.mobile-menu-cta { width: max-content; align-self: flex-start; }

/* Footer headings are h3 now (h5 skipped levels); same visual voice. */
.footer-col h3 {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--v3-navy);
  letter-spacing: 0.14em;
  margin-bottom: 18px;
}

@media (prefers-reduced-motion: reduce) {
  .billing-wrap.reveal .method-col { opacity: 1; transform: none; transition: none; }
  .skip-link { transition: none; }
}

/* ==========================================================================
   v40 — the Redline executed (copy-review-1): trust band + gap merged
   into one qualification beat, ledger and fact band removed, fees +
   method merged under one id="month". The audience line and credentials
   line now live inside the gap header, reusing the trust-band classes.
   ========================================================================== */
.v4-gap .trust-line {
  margin: 30px 0 0;
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
}
.v4-gap .trust-line a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(185, 134, 60, 0.55);
}
.v4-gap .trust-line a:hover { text-decoration-color: var(--v3-ochre); }
.v4-gap .trust-proof { margin: 14px 0 0; }

/* ==========================================================================
   v42 — the routing chips demoted to their real job. The v25 sidebar
   (header left, boxed chips right) read as a countdown widget floating
   beside editorial type. Now: one quiet row of hairline links directly
   under "Three ways in" — the payoff of the sentence that announces
   them. Numbers gone from the chips (they were the countdown); the
   tiers keep the only numerals on screen.
   ========================================================================== */
.work-head { display: block; }
.tier-route {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0 44px;
  margin-top: 22px;
}
.route-chip {
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  padding: 10px 0;
  border-bottom: 1px solid var(--v3-hair);
  justify-content: flex-start;
  gap: 10px;
}
.route-chip span {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--v3-ochre-text);
}
.route-chip:hover {
  transform: none;
  box-shadow: none;
  border-bottom-color: var(--v3-ochre);
  background: none;
}
@media (max-width: 640px) {
  .tier-route { flex-direction: column; gap: 0; margin-top: 18px; }
  .route-chip { justify-content: space-between; }
}

/* ==========================================================================
   v43 — two of Ali's calls. (1) "Who it's for" was six voices deep after
   the v40 merge: the scatter figure is deleted (its six labeled papers
   restated the paragraph's one sentence) and the credentials line is
   calmed — the section is now kicker, claim, paragraph, audience line,
   one quiet proof line. (2) The footer tree gets reserved ground on
   desktop: the legal lines no longer run through the trunk.
   ========================================================================== */
.trust-proof {
  letter-spacing: 0.12em;
  max-width: none;
}
/* .section-header p (18px, higher specificity) was capturing the proof
   line — the reason it rendered as a second shouting header. */
.v4-gap .section-header .trust-proof {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--v3-muted);
  margin: 18px 0 0;
}

/* ==========================================================================
   v45 — "Who it's for" joins the left rail. With the scatter gone, the
   centered statement-block read as a lost quote card floating in a
   cream void — the one centered section on a left-rail site. Now it's
   a standard editorial beat: left-aligned on the grid, the two-sentence
   claim stacked as a deliberate two-line lockup, band padding sized to
   a text-only section.
   ========================================================================== */
.v4-gap { padding: 88px 0 96px; }
.v4-gap .section-header h2 .tone-muted { display: block; }
.v4-gap .trust-line { margin: 28px 0 0; }
@media (max-width: 640px) {
  .v4-gap { padding: 64px 0 72px; }
}

/* ==========================================================================
   v46 — the beat gets a second axis. Text-only in a single column read
   as a wall; now it's a spread: the claim owns the left, the answer +
   audience + proof own the right — the issuer panel's anatomy, in type.
   ========================================================================== */
.gap-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 32px 88px;
  align-items: start;
}
.gap-lead {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  max-width: 44ch;
}
/* re-keyed: the proof line no longer lives under .section-header */
.v4-gap .trust-proof {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--v3-muted);
  margin: 16px 0 0;
}
.v4-gap .trust-line { margin: 24px 0 0; }
@media (max-width: 860px) {
  .gap-grid { grid-template-columns: 1fr; gap: 22px; }
}

/* ==========================================================================
   v47 — the FAQ becomes Plain terms. Questions air doubts; positions
   state them. Four commitments as hairline rows — heading left, body
   right — no accordion, no plus signs, nothing to open.
   ========================================================================== */
.terms { border-bottom: 1px solid var(--v3-hair); }
.term {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 8px 48px;
  padding: 26px 0;
  border-top: 1px solid var(--v3-hair);
}
.term h3 {
  margin: 0;
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: 1.35rem;
  line-height: 1.25;
  color: var(--v3-navy);
}
.term p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--color-text-muted);
}
@media (max-width: 640px) {
  .term { grid-template-columns: 1fr; gap: 6px; padding: 22px 0; }
}

/* ==========================================================================
   v48 — pre-flight blockers. Two Mihr-era (0,1,1) descendant rules were
   capturing rebuilt elements: `.hero h1` (styles.css:253, 1400) stole the
   H1's width/leading — the v41 two-line lockup never rendered — and
   `.cta-section p` inflated the legal fine print to lead-paragraph size.
   Both reclaimed at matching specificity, end of cascade.
   ========================================================================== */
.hero .hero-h1 {
  max-width: 24ch;
  margin-bottom: 0;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
@media (max-width: 960px) {
  .hero .hero-h1 {
    max-width: 18ch;
    line-height: 1.08;
    letter-spacing: -0.015em;
    margin-bottom: 24px; /* restated: this rule outranks the v36 mobile gap */
  }
}
.cta-section .cta-disclaimer {
  font-size: 12.5px;
  color: rgba(250, 247, 240, 0.55);
  margin-bottom: 0;
  max-width: 52ch;
}

/* margin, not padding: the hairline border must STOP before the tree,
   not run through it with the text merely held back. Scoped to the
   homepage footer — privacy.html has no tree and needs no reservation. */
@media (min-width: 861px) {
  .has-tree .footer-bottom { margin-right: 300px; padding-right: 0; }
}
@media (min-width: 1441px) {
  .has-tree .footer-bottom { margin-right: 340px; }
}