/* =============================================================================
   Corbo Counseling - css/styles.css
   -----------------------------------------------------------------------------
   Built to DESIGN.md. Everything here hangs off the tokens in §1 (colour) and
   §3 (typography) of that document; token names are kept exactly as specified.

   Contents
     00. Web fonts (self-hosted)
     01. Tokens
     02. Reset and base
     03. Layout primitives
     04. Buttons and links
     05. Header and navigation
     06. Hero scenery (layered CSS gradients - no photograph)
     07. Hero copy and trust chips
     08. Video-call card
     09. Handwritten note
     10. How it works (process card + tagline)
     11. Shared section furniture
     12. About
     13. Men's Therapy
     14. Couples Therapy
     15. Services
     16. Fees
     17. FAQs
     18. Contact and form
     19. Footer
     20. Motion, reveal, reduced motion
     21. Responsive
   ============================================================================= */


/* ======================= 00. WEB FONTS (SELF-HOSTED) =======================
   The three families are served from this origin (/assets/fonts/) instead of
   from Google Fonts. That removes the render-blocking third party stylesheet
   and the two preconnects, so the first paint waits only on our own CSS, and
   nothing about the page is disclosed to fonts.googleapis.com.

   Google's css2 endpoint answers one variable file per family for the weights
   this site asks for, so each family is declared once with a weight range
   rather than once per weight. Asking for Playfair 400 and 500 returns the same
   file, and the same is true of Inter 400/500/600 and Caveat 500/600; a face
   per weight would make the browser download that file two or three times.

     Playfair Display  100 to 900 upright + a 400 italic (guide cover only)
     Inter             400 to 600
     Caveat            500 to 600

   Files are the latin subsets. The unicode-range below is Google's own latin
   range and covers every character the site uses. font-display: swap paints
   the metric-similar fallback in the stack straight away and swaps when the
   file lands, so there is never a blank flash of invisible text. */
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/assets/fonts/playfair-display-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url("/assets/fonts/playfair-display-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("/assets/fonts/caveat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ============================== 01. TOKENS ============================== */
:root {
  /* Text */
  --navy-ink:        #16283C;
  --navy-ink-deep:   #0F1D2E;
  --navy-body:       #33415B;
  --navy-muted:      #66707C;

  /* Gold - the single accent family.
     --gold-700 is the only addition to DESIGN.md's list: small letterspaced
     text in --gold-600 measures exactly 4.50:1 on --paper-warm, which fails
     WCAG AA by rounding. #7E5C28 is the same bronze a hair deeper, so every
     gold label clears 4.5:1 on every cream surface without changing the look. */
  --gold-800:        #6F5223;

  /* The ink the offset hairline halo is drawn in. Gold by default, which reads
     against a dark pill; any gold-ground pill flips it to --navy-ink-deep,
     because gold-on-gold measures 2.81:1 and disappears. See .btn-gold. */
  --halo-ink:        #D9C08A;
  --gold-700:        #7E5C28;
  --gold-600:        #8C6A31;
  --gold-500:        #A8874A;
  --gold-400:        #BFA062;
  --gold-300:        #D9C08A;
  --gold-100:        #EFE3CC;

  /* Surfaces */
  --paper:           #FDFBF8;
  --paper-warm:      #F8F3E9;
  --card-white:      rgba(255, 255, 255, .94);
  --hairline:        #E7DFD2;
  /* A warm gold hairline for rules that divide content rather than frame
     it. Decorative only, so it is not held to a text contrast ratio. */
  --rule-gold:       rgba(168, 135, 74, .34);

  /* Overlay tints - repeated rgba() values lifted out of one-off
     declarations elsewhere in the file. Named for the opaque colour they
     tint (itself an existing token) plus the alpha percentage. A one-off
     rgba used once in one decorative rule was left alone. */
  --tint-ink-deep-55: rgba(15, 29, 46, .55);
  --tint-ink-deep-28: rgba(15, 29, 46, .28);
  --tint-paper-66:    rgba(253, 251, 248, .66);
  --tint-paper-78:    rgba(253, 251, 248, .78);
  --tint-glow-0:      rgba(254, 245, 221, 0);
  --tint-ink-55:      rgba(22, 40, 60, .55);
  --tint-ink-35:      rgba(22, 40, 60, .35);

  /* Sky / mist / water - the hero landscape */
  --sky-mist:        #AEBCC4;
  --sky-glow:        #FEF5DD;
  --sky-peach:       #FAE4C7;
  --mist-deep:       #5E6E7B;
  --water:           #A9B3B6;
  --ridge:           #808C92;
  --slate:           #7F8D98;

  /* UI / control colours */
  --btn-navy:        #28354A;
  --btn-navy-deep:   #202B3D;
  --rec-red:         #DC483E;
  --amber:           #F5BE4F;
  --green:           #59C25E;
  --on-dark:         #FFFFFF;
  --vc-frame:        #F8F5EE;

  /* Type stacks */
  --font-serif:  "Playfair Display", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-sans:   Inter, "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --font-script: Caveat, "Bradley Hand", "Segoe Script", cursive;

  /* The one gold gradient. Its stops are deep enough that the paper label on
     top clears WCAG AA (4.5:1) everywhere the glyphs sit, not only at the
     bottom edge: 4.82 / 5.90 / 6.99 against --paper. The earlier stops
     (#C0A469 / #A8874A / #8C6A31) measured 2.32 / 3.26 / 4.82, so the label
     failed across the whole upper two thirds of every button on the site. */
  --grad-gold: linear-gradient(180deg, var(--gold-600) 0%, var(--gold-700) 55%, var(--gold-800) 100%);

  /* Shape - two radii only: a pill and the card family (28 / 16 / 8) */
  --radius-pill:   999px;
  --radius-card:   28px;
  --radius-media:  16px;
  --radius-inset:  8px;

  /* Shadows - soft, wide, navy-tinted. Never black, never hard.
     --shadow-cta (a soft gold drop shadow) is retired: it stood in for the
     signature offset gold hairline halo on the two gold button families,
     which is exactly the defect DESIGN.md non-negotiable 3 names. Every
     raised button now wears the halo (see .btn) instead. */
  --shadow-card:  0 24px 60px -24px rgba(15, 29, 46, .35);
  --shadow-media: 0 30px 60px -20px rgba(15, 29, 46, .45);

  /* Motion - slow and soft, no bounce */
  --ease:     cubic-bezier(.22, .61, .36, 1);
  --dur:      240ms;
  --dur-fast: 180ms;

  /* Frame */
  --container: 1600px;                 /* 1440px of content + the two gutters */
  --gutter:    clamp(24px, 5vw, 80px);
  --header-h:  92px;

  /* Hero type scale.
     DESIGN.md gives clamp(2.5rem, 5.2vw, 4.6rem) for the headline, but at that
     size Playfair Display needs ~12.06em per line, which cannot fit the
     specified left column (≈46%) at any viewport below ~1700px - the headline
     would break across three lines instead of the two the mockup and the
     DESIGN.md "Do" list both require. These values are the largest that keep
     the intended breaks ("…simple -" / "and real change…" and, for the
     subhead, "…and start to" / "experience…") at every width. Measured in
     Chromium with the real Google fonts. */
  --fs-hero:     clamp(2.3rem, 3.5vw, 3.8rem);
  --fs-sub:      clamp(1.05rem, 1.33vw, 1.55rem);
  --fs-script:   clamp(1.3rem, 1.6vw, 1.65rem);
  --fs-chip:     clamp(.9rem, .96vw, 1rem);
  --gap-chip:    clamp(20px, 3vw, 50px);
  --script-w:    clamp(118px, 9.6vw, 152px);

  /* Header type scale (see §21 for why these track the viewport) */
  --fs-brand:    clamp(1.05rem, 1.2vw, 1.35rem);
  --fs-nav:      clamp(.84rem, .95vw, .95rem);
  --nav-gap:     clamp(14px, 1.9vw, 38px);

  /* ============================ SPACING SCALE ============================
     One geometric-ish scale derived from the magic numbers already used for
     margin/padding/gap across the file (4, 8, 12, 14, 16, 22, 24, 26, 28,
     34, 40, 72), so replacing them with these tokens does not move anything.
     26 and 34 don't land on a rung of their own; they're two rungs added
     together (22+4 and 22+12) rather than a new named step. */
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs:  12px;
  --space-sm:  14px;
  --space-md:  16px;
  --space-lg:  22px;
  --space-xl:  24px;
  --space-2xl: 28px;
  --space-3xl: 40px;
  --space-4xl: 72px;

  /* The rung the scale stopped short of. Sections have always been padded with
     more than --space-4xl: .section's own clamp resolves to 108px at 1440px,
     and that is the value every band on the site inherits. */
  --space-5xl: 108px;

  /* Section rhythm - how much air a band is allowed to take. .section's
     padding-block used to be the page's only beat, so seven sections in a row
     landed on the same 108/108 and none of them read as more or less important
     than the others. These are clamps rather than fixed rungs because the
     padding still has to track the viewport, exactly as .section already did;
     --space-section is that existing value, now named. */
  --space-section:       clamp(64px, 7.5vw, 116px);
  --space-section-tight: clamp(48px, 5vw, 80px);
  --space-section-loose: clamp(88px, 10vw, 152px);

  /* ============================== TYPE SCALE ==============================
     A compact scale for the body/label sizes that were one-off rem values.
     --fs-hero, --fs-sub, --fs-script, --fs-chip, --fs-brand and --fs-nav
     (above) are untouched - they are measured against the approved
     above-the-fold. The ten near-identical small sizes this ticket calls out
     (.95/.92/.9/.88/.875/.84/.82/.78/.75/.74rem) collapse into the three
     smallest rungs here, each moving by at most 1px:
       --fs-xs  (15px)   was .95rem (15.2px, -0.2px) and .92rem (14.72px, +0.28px)
       --fs-2xs (14px)   was .9rem (14.4px, -0.4px), .88rem (14.08px, -0.08px),
                         .875rem (14px, exact) and .84rem (13.44px, +0.56px)
       --fs-3xs (12.5px) was .82rem (13.12px, -0.62px), .78rem (12.48px, +0.02px),
                         .75rem (12px, +0.5px) and .74rem (11.84px, +0.66px)
     --fs-sm/--fs-md/--fs-lg/--fs-xl/--fs-2xl reuse the file's next most
     common flat sizes (1rem, 1.02rem, 1.3rem, 1.35rem, 1.75rem) exactly, no
     value change. --fs-3xl is a new top rung, not yet consumed. */
  --fs-3xs: .78125rem;
  --fs-2xs: .875rem;
  --fs-xs:  .9375rem;
  --fs-sm:  1rem;
  --fs-md:  1.02rem;
  --fs-lg:  1.3rem;
  --fs-xl:  1.35rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2rem;
  --lh-tight: 1.25;
  --lh-body:  1.62;

  /* The two display sizes that were untokenised clamps, plus the two text
     settings the file was writing out by hand. --fs-title governs
     .section-title and --fs-page-title the interior page h1; neither is
     consumed yet, exactly as --fs-3xl above is not: .section-title keeps its
     own clamp until the ticket that swaps it, and that swap moves the small
     end of the range from 1.85rem to 1.9rem. --lh-heading is the 1.12
     .section-title and the lead-magnet title already set by hand; the smaller
     card headings keep the tighter 1.25.

     --fs-body aliases --fs-md rather than repeating its 1.02rem literal. One
     home for the body size, so the two can never drift, and the scale rung
     keeps its scale meaning while this token keeps its role meaning. */
  --fs-title:      clamp(1.9rem, 2.95vw, 2.65rem);
  --fs-page-title: clamp(2.1rem, 3.4vw, 3.05rem);
  --fs-body:       var(--fs-md);
  --lh-heading:    1.12;

  /* =============================== MEASURE ===============================
     How wide a column of text is allowed to run, in characters rather than in
     pixels, because the eye is what the limit is for.

     --measure is 62ch and not the 68ch the redesign table asked for. 68ch
     resolves to 700px at the 16.32px body size, which is about 86 characters
     on a line, and the brief's own rule is that no paragraph runs past 80. 62ch
     resolves to 638px at that size and 626px at the 1rem list size, which is
     the measure the home page already runs at: the brief measures home's widest
     paragraph at 632px / 79 characters and treats that as the standard /about/
     had to reach. So this is the house style given a name rather than a new
     number, and it is the widest value that keeps /about/ inside the ceiling.

     The other two rungs needed no adjustment: 58ch is about 73 characters and
     46ch about 58. */
  --measure:        57ch;
  /* ch is the advance of "0", which is wider than the mean advance of real
     text, and the ratio moves with face, weight and size. 57ch holds about
     80 characters at body size in Inter, but the same token holds 86 in the
     small footer text and 82 in the Playfair standfirst. --measure-tight is
     the rung for anything not set at body size. */
  --measure-tight:  52ch;
  --measure-narrow: 58ch;
  --measure-lede:   46ch;

  /* /about/'s M3 statement. Nothing else in the type scale reaches display
     size, and the statement is meant to read as a graphic pause rather than
     a heading, so it gets its own clamp rather than reusing --fs-title. */
  --fs-statement: clamp(1.9rem, 3.2vw, 2.9rem);

  /* ========================== COMPONENT METRICS ==========================
     The measurements every card, grid and icon was writing out by hand: the
     standard grid gutter, the wider two-column gutter (72px, hardcoded in
     three separate places), the card padding, and the two sizes the check and
     cross marks are drawn at.

     The card padding is the interesting one. It appeared four times as
     calc(var(--space-lg) + var(--space-xs)), and that pattern is what proved
     the spacing scale was missing a rung rather than the calc being clever:
     34px is the value, so it gets a name instead of an addition.

     --gap-grid is the same 40px as --space-3xl. The two are kept separate
     because one is the gutter between things and the other is a length in its
     own right; merging them would tie every grid on the site to the spacing
     scale's third rung. */
  --gap-grid:    40px;
  --gap-grid-lg: 72px;
  --card-pad:    34px;
  --icon-sz:     20px;
  --icon-well:   40px;

  /* ========================== PHOTO TREATMENT =============================
     Consumed by .section-band (SQ-16 and after): the ten batch-2 photographs
     run 27-56% darker than the site and carry olive foliage, so the agreed
     treatment is a low-opacity photo behind a warm scrim. */
  --scrim-warm:    rgba(250, 228, 199, .45);
  --scrim-strong:  rgba(107, 78, 34, .55);
  --photo-opacity: .35;
  --photo-blend:   multiply;
}


/* =========================== 02. RESET AND BASE =========================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Taps get a faint gold flash rather than the grey box iOS paints by default.
     Set on html so it inherits everywhere, including inside the modal. */
  -webkit-tap-highlight-color: rgba(168, 135, 74, .18);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--navy-body);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-feature-settings: "lnum" 1;
  color: var(--navy-ink);
  letter-spacing: -0.005em;
}

p { margin: 0; }

ul, ol, dl, dd { margin: 0; padding: 0; }

ul, ol { list-style: none; }

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

img { display: block; }

/* <picture> is only there to offer a WebP source next to the JPEG fallback.
   display: contents keeps it out of the box tree, so the <img> inside is still
   the flex item, the absolutely positioned layer or the 52px brand mark that
   the rules further down expect. */
picture { display: contents; }

a { color: inherit; }

button { font: inherit; color: inherit; }

em { font-style: italic; }

strong { font-weight: 600; color: var(--navy-ink); }

.site-footer strong,
.cta-band strong { color: var(--paper); }

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

/* Accessible helpers */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: 8px;
  z-index: 100;
  transform: translateY(-160%);
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: var(--btn-navy);
  color: var(--on-dark);
  font-size: var(--fs-2xs);
  font-weight: 500;
  text-decoration: none;
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus { transform: translateY(0); }

/* The client's "[CONFIRM: …]" markers, made easy to spot and easy to delete */
.confirm {
  color: var(--gold-700);
  font-size: .92em;
  font-weight: 500;
  letter-spacing: .005em;
}

[id] { scroll-margin-top: calc(var(--header-h) + 24px); }


/* ========================= 03. LAYOUT PRIMITIVES ========================= */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: 1040px; }

.section { padding-block: clamp(64px, 7.5vw, 116px); }

.section--paper { background: var(--paper); }
.section--warm  { background: var(--paper-warm); }

/* Two sections that share a background and sit next to each other show no seam
   at all. On /about/ the credentials section and the faith section are both
   --paper, so 108px of bottom padding met 108px of top padding across an
   invisible join and a whole 1440x900 screen went by as flat cream. --rule-gold
   is the token for a rule that divides content rather than framing it, so the
   hairline reads as a seam and not as the top edge of a card.
   Switching the section to --warm instead only moves the problem: the section
   after it is already warm. */
.section--divided { border-top: 1px solid var(--rule-gold); }

.section-head { max-width: 760px; }

.section-head--centre {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
}

/* Heading-to-following-element spacing. .section-head always ends in an H2
   (.section-title), sometimes with a .section-lede under it, and h1-h4 are
   reset to margin: 0 above. With no gap declared, the block that follows a
   .section-head (a prose column, a list, an FAQ, a sub-head) sits flush
   against the H2, so any H3 opening that block reads as a continuation of
   the H2's sentence rather than a subordinate heading, and on some pages the
   H2's descenders touch the text below. --space-xl is the same wrapper-to-
   content gap .section-aside already uses once its columns collapse to one
   at 760px, so this keeps that rhythm rather than inventing a new one. */
.section-head + * { margin-top: var(--space-xl); }

.section-label {
  margin: 0 0 18px;
  font-family: var(--font-sans);
  font-size: var(--fs-3xs);
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-700);
}

.section-title {
  font-size: clamp(1.85rem, 3.05vw, 2.65rem);
  line-height: 1.12;
  letter-spacing: -0.012em;
  color: var(--navy-ink-deep);
  text-wrap: balance;
}

/* Every paragraph in <main> stops at --measure. One rule rather than one per
   component, so a block of copy added later cannot arrive uncapped. The
   composition rules below narrow the ones that are column copy or an intro,
   and they win here because .section-lede and friends are classes while this
   is two type selectors. 62ch is about 79 characters in Inter at the body
   size, which is the point: a 150-character line was the loudest "this was not
   designed" signal on /about/. */
main p { max-width: var(--measure); }

.section-lede {
  margin-top: 20px;
  font-size: clamp(1.02rem, 1.2vw, 1.16rem);
  line-height: 1.62;
  color: var(--navy-body);
  /* A lede is an invitation to read on rather than the copy itself, so it runs
     narrower than the body it introduces. */
  max-width: var(--measure-lede);
}

.section-foot {
  margin-top: var(--space-3xl);
  font-size: var(--fs-md);
  color: var(--navy-body);
}

.sub-head {
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 1.5vw, 1.4rem);
  line-height: 1.25;
  color: var(--navy-ink);
  margin-bottom: 18px;
}

.sub-head--spaced { margin-top: var(--space-4xl); margin-bottom: var(--space-2xl); }

.prose-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 76px);
  align-items: start;
}

/* Copy inside a grid column is column copy, not a full page of prose, so it
   takes the narrower measure. */
.prose-grid p { max-width: var(--measure-narrow); }

.prose-grid p + p { margin-top: 18px; }

.card-grid {
  display: grid;
  gap: var(--space-xl);
  margin: 0;
}
.card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.card {
  padding: calc(var(--space-lg) + var(--space-xs));
  border-radius: var(--radius-card);
  background: var(--card-white);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}

.card-title {
  font-size: 1.24rem;
  line-height: 1.25;
  color: var(--navy-ink);
  margin-bottom: var(--space-xs);
}

.card-text { font-size: var(--fs-sm); line-height: 1.62; color: var(--navy-body); }

.check-list { display: grid; gap: var(--space-md); align-content: start; }

.check-list li {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--navy-body);
}

.check-icon { flex: 0 0 auto; color: var(--gold-700); margin-top: var(--space-3xs); }

/* Three composition primitives for the interior-page rhythm work (US-3,
   /about/): a sticky-intro two-column aside and a single reading column.
   Not applied anywhere on this page's shared furniture; consumed by
   /about/'s own section-12 rules. (The third primitive, a top-level photo
   band, is .section-band just below; /about/ does not use it.) */
.section-aside {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: var(--gap-grid-lg);
}

.section-prose { max-width: var(--measure); }

/* Section band. Full-bleed photo strip (SQ-16). Consumes the photo
   treatment tokens (section 01): the img runs at --photo-opacity and a
   ::after scrim in --scrim-warm sits over it blended with --photo-blend,
   muting the olive-green cast the batch-2 masters carry so the frame lands
   toward the palette instead of the sourced photograph's own tone. No
   .container inside it; the image itself is the full-bleed content.
   border-block (the .consult-line hairline pair) rather than a background
   change: the section's own background-color still reads as --paper, so the
   adjacent-ground check needs the explicit rule on both edges. */
.section-band {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--paper);
  border-block: 1px solid var(--rule-gold);
}

.section-band-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1672 / 941;
  object-fit: cover;
  opacity: var(--photo-opacity);
}

.section-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--scrim-warm);
  mix-blend-mode: var(--photo-blend);
  pointer-events: none;
}



/* Small-text measure. These classes set below body size, so a pixel cap that
   looks modest holds far more characters: .footer-crisis measured 88
   characters at 554px and .form-crisis 90 at 548px. --measure is expressed in
   ch, which resolves against each element's own font size, so the same token
   holds roughly the same character count whatever the size. Capping them here
   rather than per component keeps the 80-character ceiling true site wide
   instead of true only inside <main>. */
.footer-crisis,
.footer-privacy,
.footer-copy,
.tagline,
.form-crisis,
.field-hint,
.optin-note,
.section-foot,
.who-row-meta,
.split-band-standfirst,
main li > span { max-width: var(--measure-tight); }

/* ======================== 04. BUTTONS AND LINKS ======================== */
/* One base shape, one edge device, one motion. Variants below differ only in
   ground (background + label colour) - see the one-branded-system pass that
   retired the separate .btn-primary shape and the --shadow-cta drop shadow
   the gold variants used to wear in place of the signature halo. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 52px;
  padding: 0 clamp(20px, 2vw, 30px);
  border: 0;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--halo-ink);
  transition: background-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              filter var(--dur) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.btn:hover { filter: brightness(.94); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* 1. Gold CTA pill - the sanctioned gradient, primary action only.

   The halo's ring uses the OPPOSITE brand ink to the pill it hugs. The base
   .btn draws it in --gold-300, which is right on a navy pill (6.98:1 against
   it) and useless on a gold one: --gold-300 against the gradient's top stop
   measures 2.81:1, so the device simply vanished and the primary CTA read as a
   plain gold lozenge next to a ringed navy one. That is why the two buttons
   kept looking like different families even after they were unified: same
   declaration, same geometry, one of them invisible.

   --navy-ink-deep measures 3.42:1 against the pill and 16.46:1 against the
   paper ground (the gold ring managed 1.71:1 on that outer edge), so the
   hairline now reads on both of its boundaries. Geometry, shape, type and
   motion stay identical to every other button; only the ink flips. */
.btn-gold {
  background-image: var(--grad-gold);
  background-color: var(--gold-500);
  color: var(--on-dark);
  --halo-ink: var(--navy-ink-deep);
}

/* There is no second button ground. Every button on the site is the gold pill:
   the header and menu CTAs used to be navy, which meant the same action, "book
   a consultation", wore two different colours depending on where you met it.
   --btn-navy survives only for the skip link. */

.btn-arrow {
  flex: 0 0 auto;
  transition: transform var(--dur-fast) var(--ease);
}
.btn:hover .btn-arrow { transform: translateX(3px); }

.btn-hero {
  min-height: 62px;
  padding-inline: clamp(var(--space-xl), 2.4vw, calc(var(--space-lg) + var(--space-xs)));
  font-size: 1.05rem;
}

.btn-submit { width: 100%; min-height: 56px; font-size: var(--fs-sm); }

.text-link {
  color: var(--navy-ink);
  font-weight: 500;
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(22, 40, 60, .6);
  text-underline-offset: 6px;
  transition: text-decoration-color var(--dur) var(--ease);
}
.text-link:hover { text-decoration-color: var(--navy-ink); }

.text-link--on-navy {
  color: var(--paper);
  text-decoration-color: rgba(253, 251, 248, .55);
}
.text-link--on-navy:hover { text-decoration-color: var(--paper); }


/* ======================= 05. HEADER AND NAVIGATION ======================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--paper);
  /* The shadow lifts past 20px of scroll; the slide is js/main.js hiding or
     revealing the whole header by scroll direction (section 3, is-hidden).
     No base `transform` here on purpose: `.site-nav` is a child of this
     element and is `position: fixed`, and ANY non-none transform on an
     ancestor turns it into that fixed descendant's containing block, which
     detaches the panel from the viewport and onto the header's own box
     instead. transform: none (the default) keeps `.site-nav` viewport-
     relative; is-hidden below is the only state that ever sets one, and
     js/main.js guarantees is-hidden is never applied while the panel is
     open, so the two states never overlap. */
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.site-header.scrolled { box-shadow: 0 18px 34px -26px rgba(15, 29, 46, .55); }

/* translateY(-100%) is relative to the header's own rendered height, so this
   needs no fixed px value and keeps working if the header's height changes.
   Sticky keeps its flow space either way, which is exactly why the mobile nav
   panel's `inset: var(--header-h) ...` below stays flush under it whether the
   header is shown or hidden. */
.site-header.is-hidden { transform: translateY(-100%); }

/* js/main.js adds .nav-scroll-lock to html and body while the mobile nav is
   open, so the page behind the panel cannot scroll. The scroll offset itself
   is restored as an inline `top` by the script, which unlocking then reads
   back with scrollTo, so the reading position never jumps. */
html.nav-scroll-lock { overflow: hidden; }

body.nav-scroll-lock {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}

/* `position: sticky` sticks against the nearest scrolling ancestor; once body
   itself is pinned with a negative `top` above, that ancestor never scrolls
   from the header's point of view, so it stops sticking and renders at its
   static in-flow position inside body's shifted box - off-screen by exactly
   body's `top` offset (SQ-29). Switching the header to `position: fixed;
   top: 0` for the duration of the lock keeps it, and the toggle inside it,
   pinned to the true viewport regardless of body's offset. `position: fixed`
   on this element does not make it a containing block for its own
   `position: fixed` descendants (only transform/filter/perspective/contain
   do that), so `.site-nav` above stays viewport-relative exactly as before -
   this does not reintroduce the containing-block problem SQ-28 documented. */
body.nav-scroll-lock .site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--header-h);
}

/* Logo lockup: monogram, vertical gold hairline, wordmark */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  /* The lockup is the item that gives way when the header runs out of room:
     without this the wordmark's nowrap width pushes the Menu toggle past the
     right gutter (and off a 360px screen) instead of truncating. */
  flex: 0 1 auto;
  min-width: 0;
}

.brand-mark { width: 52px; height: 52px; flex: 0 0 auto; }

.brand-rule {
  width: 1.5px;
  height: 40px;
  background: var(--gold-400);
  flex: 0 0 auto;
}

.brand-word {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-brand);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--navy-ink);
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--nav-gap);
  flex: 1 1 auto;
  justify-content: center;
}

.nav-list {
  display: flex;
  align-items: baseline;
  gap: var(--nav-gap);
}

.nav-link {
  position: relative;
  display: inline-block;
  /* 11px of block padding makes the link a 44px tall target, the size a thumb
     needs, without moving the text: the underline is pulled up by the same 5px
     so it still sits 8px under the baseline. */
  padding: 11px 0;
  font-size: var(--fs-nav);
  font-weight: 500;
  letter-spacing: .005em;
  color: var(--navy-body);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3px;
  height: 2px;
  background: var(--gold-400);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.nav-link:hover { color: var(--navy-ink); }
.nav-link:hover::after { opacity: 1; }

.nav-link.is-active {
  color: var(--navy-ink);
  font-weight: 600;
}
.nav-link.is-active::after { opacity: 1; }

.header-cta { flex: 0 0 auto; }

.nav-cta { display: none; }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 12px;
  /* The icon alone is 26x16, so the button carries the padding and a floor that
     keep it at least 44x44 wherever it is the only way into the navigation. */
  min-width: 44px;
  min-height: 44px;
  padding: 10px 4px;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: .9rem;
  font-weight: 500;
  color: var(--navy-ink);
}

.nav-toggle-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 26px;
  height: 16px;
}

.nav-toggle-bar {
  display: block;
  height: 1.5px;
  width: 100%;
  background: var(--navy-ink);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7.25px) rotate(-45deg); }


/* ============= 06. HERO SCENERY - LAYERED CSS GRADIENTS ============= */
.hero-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--water);
  /* Bottom-to-top: water shimmer, sun reflection on the water, then the
     DESIGN.md gradient recipe for the sky / horizon / water plane. */
  background-image:
    repeating-linear-gradient(180deg,
      rgba(255, 255, 255, .07) 0 1px,
      rgba(255, 255, 255, 0) 1px 12px),
    radial-gradient(ellipse 24% 9% at 50% 63%, rgba(255, 250, 235, .60), rgba(255, 250, 235, 0) 70%),
    linear-gradient(180deg,
      var(--sky-mist) 0%,
      #C8C6BC 38%,
      var(--sky-glow) 52%,
      var(--water) 78%,
      #8B979E 100%);
  background-repeat: no-repeat;
  background-size: 100% 42%, 100% 100%, 100% 100%;
  background-position: left bottom, center center, center center;
}

/* Soft sky: sun glow on the horizon, cloud edges, peach light.
   The horizon glow sits in the empty gap between the two columns, never
   behind the text. */
.hero-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    /* Left-to-right paper haze, so the copy column always sits on calm, light
       ground. Full-bleed, so it has no visible edge. */
    linear-gradient(98deg,
      rgba(253, 251, 248, .62) 0%,
      rgba(253, 251, 248, .44) 24%,
      rgba(253, 251, 248, .20) 44%,
      rgba(253, 251, 248, 0) 62%),
    radial-gradient(120px 120px at 50% 57%,
      rgba(255, 255, 250, .90), rgba(255, 255, 250, .40) 42%, rgba(255, 255, 250, 0) 72%),
    radial-gradient(ellipse 62% 13% at 50% 55%,
      rgba(254, 245, 221, .90), rgba(254, 245, 221, 0) 72%),
    radial-gradient(ellipse 44% 7% at 16% 19%,
      rgba(255, 255, 255, .52), rgba(255, 255, 255, 0) 70%),
    radial-gradient(ellipse 34% 6% at 80% 14%,
      rgba(255, 255, 255, .44), rgba(255, 255, 255, 0) 70%),
    radial-gradient(ellipse 28% 5% at 63% 32%,
      rgba(255, 255, 255, .40), rgba(255, 255, 255, 0) 72%),
    radial-gradient(ellipse 46% 8% at 30% 44%,
      rgba(250, 228, 199, .48), rgba(250, 228, 199, 0) 74%),
    radial-gradient(ellipse 38% 7% at 74% 47%,
      rgba(250, 228, 199, .44), rgba(250, 228, 199, 0) 74%);
}

/* Distant ridge line, drawn with a clipped gradient rather than an image. */
.hero-band::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  top: 45%;
  height: 22%;
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(180deg,
    rgba(128, 140, 146, .78) 0%,
    rgba(150, 160, 163, .48) 46%,
    rgba(169, 179, 182, 0) 100%);
  -webkit-clip-path: polygon(0% 64%, 6% 52%, 12% 60%, 19% 42%, 25% 55%, 31% 44%, 38% 58%, 44% 38%, 50% 52%, 57% 40%, 63% 54%, 70% 45%, 77% 58%, 84% 47%, 91% 57%, 96% 50%, 100% 58%, 100% 100%, 0% 100%);
  clip-path: polygon(0% 64%, 6% 52%, 12% 60%, 19% 42%, 25% 55%, 31% 44%, 38% 58%, 44% 38%, 50% 52%, 57% 40%, 63% 54%, 70% 45%, 77% 58%, 84% 47%, 91% 57%, 96% 50%, 100% 58%, 100% 100%, 0% 100%);
  opacity: .55;
}

/* HERO PHOTO SLOT - unused until a real photograph is dropped in.
   Uncomment the <div class="hero-photo"> in index.html and set an image here. */
.hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: transparent;
  background-image: none; /* e.g. url("../assets/hero.jpg") */
  background-size: cover;
  background-position: center 62%;
}

/* HERO VIDEO SLOT (Concept 6) - the background video layer that sits behind
   the sky: above .hero-band's own flat gradient, below the ::before glow and
   haze layer, below the ::after ridge, and below all of the content. That is
   what z-index: -1 does inside the band's own stacking context (isolation:
   isolate on .hero-band), so the video reads as weather rather than as a
   picture dropped on top of the page.

   The sources are attached by js/main.js, never by the markup, so with the
   clip absent, on a phone, or with reduced motion set, this element only ever
   paints its poster: a 1600 x 900 still of the same CSS sky (object-fit: cover
   crops it to the band). Nothing here can delay the LCP text. */
.hero-video {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 62%;
  pointer-events: none;
  background-color: transparent;
}

/* Nothing decorative ever runs for a reader who asked for less motion. */
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
}

.hero { position: relative; z-index: 1; padding-block: clamp(48px, 5vw, 68px) clamp(140px, 14.5vw, 200px); }

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  column-gap: 5%;
  align-items: center;
}

.hero-copy {
  position: relative;
  z-index: 1;
  max-width: 740px;
}

/* DESIGN.md: text never lands on busy landscape - if it would, put a
   translucent light surface behind it first. This is that surface, kept as a
   heavily blurred panel so it reads as mist rather than as a card. */
.hero-copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -9% -8% -7% -8%;
  pointer-events: none;
  border-radius: 80px;
  background: rgba(253, 251, 248, .78);
  filter: blur(44px);
}


/* ==================== 07. HERO COPY AND TRUST CHIPS ==================== */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--navy-ink);
}

.hero-headline {
  /* 0, not 22px: that gap separated the headline from the hero eyebrow, which
     is gone. Left at 22px the margin collapses through .hero-copy (no padding,
     no border, not a BFC) and drops the whole copy column instead. */
  margin-top: 0;
  font-size: var(--fs-hero);
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--navy-ink-deep);
}

.hero-subhead {
  margin-top: 26px;
  /* The design's two intended lines were set when the subhead began at
     "Schedule a free consultation". RUN1B put "Ray Corbo, LMFT." in front of it,
     and the sentence no longer fits two lines of this column at any size: it
     wraps to three lines of this measure. The last of them is short ("move
     forward."), which is a runt rather than the mid-paragraph orphan line the
     forced break used to create, and shrinking the type or widening the measure
     to fit two lines would move the hero off the DESIGN.md scale. */
  max-width: 33.6em;
  font-size: var(--fs-sub);
  line-height: 1.55;
  color: var(--navy-body);
}

.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 34px;
  margin-top: 42px;
}

.trust-chips {
  /* A flex row rather than three max-content grid columns: with max-content the
     row could only ever be as wide as its longest sub line, so a long one pushed
     the trio out of the hero copy column and under the video card. Wrapping keeps
     it inside the column whatever the copy does, and the short sub lines in
     index.html keep it on one line at every width above 1250px. */
  display: flex;
  flex-wrap: wrap;
  gap: 30px var(--gap-chip);
  align-items: flex-start;
  margin-top: 48px;
}

.chip {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.chip-icon { flex: 0 0 auto; color: var(--navy-ink); margin-top: 2px; }

.chip-text { display: block; }

.chip-title {
  display: block;
  font-size: var(--fs-chip);
  font-weight: 600;
  line-height: 1.35;
  color: var(--navy-ink);
  white-space: nowrap;
}

.chip-sub {
  display: block;
  font-size: var(--fs-chip);
  line-height: 1.4;
  color: var(--navy-muted);
  white-space: nowrap;
}


/* ======================== 08. VIDEO-CALL CARD ======================== */
.hero-media {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 24px;
}

.vc-card {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  max-width: 515px;
  aspect-ratio: 4 / 3;
  margin: 0;
  padding: 0;
  border: 4px solid var(--vc-frame);
  border-radius: var(--radius-media);
  background: var(--vc-frame);
  box-shadow: var(--shadow-media);
  overflow: hidden;
}

.vc-main {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  overflow: hidden;
  background-image: linear-gradient(168deg,
    var(--paper-warm) 0%,
    var(--sky-peach) 58%,
    #E4D5BC 100%);
}

.vc-wall {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(ellipse 58% 56% at 74% 16%,
    rgba(255, 247, 232, .90), rgba(255, 247, 232, 0) 72%);
}

.vc-dots {
  position: absolute;
  top: 22px;
  left: 22px;
  display: flex;
  gap: var(--space-xs);
}

.vc-dot {
  width: 13px;
  height: 13px;
  border-radius: var(--radius-pill);
}
.vc-dot--red   { background: var(--rec-red); }
.vc-dot--amber { background: var(--amber); }
.vc-dot--green { background: var(--green); }

.vc-pip {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 23%;
  aspect-ratio: 118 / 106;
  border: 3px solid var(--vc-frame);
  border-radius: var(--radius-inset);
  background-image: linear-gradient(180deg, #F2F0EB, #E3DFD7);
  box-shadow: 0 8px 20px var(--tint-ink-deep-28);
  overflow: hidden;
}

.vc-pip-figure {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 58%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.vc-pip-figure::before {
  content: "";
  width: 42%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--tint-ink-55);
  margin-bottom: -4%;
}
.vc-pip-figure::after {
  content: "";
  width: 100%;
  aspect-ratio: 2.2 / 1;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: rgba(22, 40, 60, .5);
}

.vc-controls {
  position: absolute;
  left: 50%;
  bottom: 36px;
  transform: translateX(-50%);
  display: flex;
  gap: var(--space-sm);
}

.vc-btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-pill);
  background-color: var(--btn-navy);
  color: var(--on-dark);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 -7px 12px -7px var(--btn-navy-deep);
}
.vc-btn--end { background-color: var(--rec-red); }


/* ====================== 09. HANDWRITTEN NOTE ====================== */
.script-note {
  position: relative;
  flex: 0 0 var(--script-w);
  width: var(--script-w);
  align-self: flex-start;
  margin-top: clamp(30px, 4vw, 58px);
  font-family: var(--font-script);
  font-weight: 500;
  font-size: var(--fs-script);
  line-height: 1.15;
  /* Gold, not navy-ink: DESIGN.md non-negotiable 2. --gold-700 is the ramp's
     existing WCAG-safe choice for text over a light surface (see the ramp
     comment above); measured here against the hero sky photo's lightest
     sampled pixels behind the note it clears 5.9-6.0:1 at 1440 and 390,
     comfortably above the 4.5:1 floor. */
  color: var(--gold-700);
  transform: rotate(-7deg);
  transform-origin: left top;
}

.script-line { display: block; }

.script-underline {
  position: absolute;
  left: 2%;
  bottom: -10px;
  width: 96%;
  height: auto;
  transform: rotate(4deg);
  transform-origin: left center;
}


/* ================ 10. HOW IT WORKS (PROCESS CARD) ================ */
.process {
  position: relative;
  z-index: 2;
  margin-top: clamp(-150px, -8vw, -104px);
  padding-bottom: clamp(30px, 3.2vw, 46px);
}

.process-card {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  max-width: 1140px;
  margin-inline: auto;
  padding: 34px 44px;
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow-card);
}

.step {
  position: relative;
  display: flex;
  gap: 22px;
  align-items: flex-start;
}

.step-badge {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-pill);
  background: var(--gold-100);
  font-family: var(--font-serif);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--navy-ink);
}

.step-body { min-width: 0; }

.step-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 30px;
}

.step-icon { flex: 0 0 auto; color: var(--navy-ink); }

.step-title {
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--navy-ink);
}

.step-desc {
  margin-top: 8px;
  max-width: 240px;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--navy-muted);
}

.step-sep {
  position: absolute;
  right: -20px;
  top: 22px;
  transform: translate(50%, 0);
  color: var(--navy-muted);
  opacity: .5;
}

.tagline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 44px;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-align: center;
  color: var(--navy-ink);
}

.gold-rule {
  width: 44px;
  height: 1.5px;
  background: var(--gold-400);
  flex: 0 0 auto;
}


/* ==================== 11. SHARED SECTION FURNITURE ==================== */
.site-footer .confirm { color: var(--gold-300); }

/* ---------------------------------------------------------------------------
   Interior-page kit (SQ-13). Nine shapes extracted out of .about-* / the
   .page-about scope, where they were built and proved out for /about/
   (US-3). Unscoped here so every interior page can lead with a different
   one; nothing below is About-specific. About's own tuning on top of these
   shapes (its mobile height budget, the credentials and "not a fit" content
   wrappers) stays under .page-about in section 12, referencing these class
   names directly.
   --------------------------------------------------------------------------- */

/* Page masthead. h1 left (max 7 of 12 cols), opening lede sentence right,
   baseline-anchored to the h1's foot. */
.page-masthead {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: end;
  gap: clamp(28px, 4vw, 56px);
}

.page-masthead h1 { font-size: var(--fs-page-title); }

.page-masthead .page-hero-lede {
  margin-top: 0;
  font-size: var(--fs-body);
  line-height: 1.6;
  max-width: var(--measure-lede);
}

.page-masthead-caption {
  margin: var(--space-2xl) 0 0;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--rule-gold);
}

@media (max-width: 760px) {
  .page-masthead { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .page-masthead .page-hero-lede { max-width: none; }
}

/* Split band. Hard vertical split: left column full-bleed paper, right
   column full-bleed navy. Full-bleed comes from styling the section itself
   (no .container), the same way .cta-band and .page-hero already carry
   their own background with the content inset by padding rather than by a
   shared wrapper. */
.split-band {
  display: grid;
  grid-template-columns: 5fr 7fr;
}

.split-band-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  padding: var(--space-section) var(--gutter);
}

.split-band-story {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--navy-ink-deep);
  padding: var(--space-section) var(--gutter);
}

.split-band-img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 420px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 0;
}

.split-band-standfirst {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  line-height: 1.4;
  color: var(--gold-300);
  max-width: var(--measure-narrow);
}

.split-band-story p {
  max-width: var(--measure-narrow);
  font-size: var(--fs-body);
  line-height: 1.75;
  /* The same "cream on navy" mix already used by .cta-band's body copy,
     measured there to clear 4.5:1 on --navy-ink-deep. */
  color: rgba(253, 251, 248, .82);
}

.split-band-story p:not(.split-band-standfirst) + p,
.split-band-standfirst + p { margin-top: 20px; }

@media (max-width: 760px) {
  .split-band { grid-template-columns: minmax(0, 1fr); }
  .split-band-photo { padding: var(--space-section-tight) 0 var(--space-xl); }
  .split-band-img { max-width: 600px; }
  .split-band-story { padding: var(--space-xl) var(--gutter) var(--space-section-tight); }
}

/* Statement. Centred display sentence, ~22ch, one short gold rule above, no
   box. Deliberately not .pull-quote: that class still carries a side-tab
   border, a card fill, a radius and a quote glyph for the two /resources/
   articles that use it. --fs-statement has to sit on .statement itself:
   `ch` resolves against the font-size of the element that declares it, and
   without this the 22ch measure was being read against the inherited body
   size (~16px) rather than the ~46px display size the quote actually
   renders at, landing the column at 227px instead of ~500px. */
.statement-wrap { margin-inline: auto; }

.statement {
  margin: 0 auto;
  max-width: 22ch;
  font-size: var(--fs-statement);
  text-align: center;
}

.statement-rule {
  display: block;
  width: 64px;
  height: 2px;
  margin: 0 auto var(--space-xl);
  background: var(--gold-400);
}

.statement p {
  max-width: none;
  font-family: var(--font-serif);
  font-size: var(--fs-statement);
  line-height: 1.25;
  color: var(--navy-ink-deep);
}

.statement cite {
  display: block;
  margin-top: var(--space-md);
  font-size: var(--fs-2xs);
  font-style: normal;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-700);
}

/* Aside. The 4fr/8fr .section-aside spine (section 03): sticky heading
   left, content right, in three density weights. */
.aside-intro {
  position: sticky;
  top: calc(var(--header-h) + var(--space-xl));
}

@media (max-width: 760px) {
  .aside-intro { position: static; top: auto; }
}

.aside--airy { padding-block: var(--space-section-loose); }

.aside-entries { display: grid; }

.entry {
  padding-block: var(--space-3xl);
  border-top: 1px solid var(--hairline);
}
.entry:first-child { border-top: 0; padding-top: 0; }

.entry h3 {
  margin-top: var(--space-sm);
  font-size: 1.3rem;
  line-height: 1.25;
}

.entry p {
  margin-top: var(--space-md);
  max-width: var(--measure-narrow);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--navy-body);
}
.entry p + p { margin-top: var(--space-sm); }

.aside--dense { padding-block: var(--space-section-tight); }

.aside--compact { padding-block: var(--space-section-tight); }

/* Consult line. One-line low-pressure CTA between two hairlines. Not a
   button, not a card. */
.consult-line {
  background: var(--paper-warm);
  padding-block: var(--space-2xl);
  border-block: 1px solid var(--rule-gold);
}

.consult-line-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg) var(--space-2xl);
}

.consult-line-text {
  margin: 0;
  max-width: var(--measure-lede);
  font-size: var(--fs-body);
  color: var(--navy-ink);
}

.consult-line-link { display: inline-flex; align-items: center; gap: var(--space-2xs); white-space: nowrap; }
.consult-line-link .btn-arrow { flex: 0 0 auto; transition: transform var(--dur-fast) var(--ease); }
.consult-line-link:hover .btn-arrow { transform: translateX(3px); }

@media (max-width: 760px) {
  .consult-line-row { gap: var(--space-md) var(--space-2xl); }
}

/* Steps. Numbered vertical sequence with a hairline connector, reusing
   .step-badge (the .process-card numeral motif). Named .steps-item rather
   than .step to avoid colliding with the unrelated home-page .step (section
   10's process card: a different shape with its own .step-title and
   .step-body). */
.steps { display: grid; gap: var(--space-3xl); }

.steps-item { position: relative; display: flex; gap: var(--space-lg); align-items: flex-start; }

.steps-item + .steps-item::before {
  content: "";
  position: absolute;
  left: 32px;
  top: calc(-1 * var(--space-3xl));
  width: 1px;
  height: var(--space-3xl);
  background: var(--hairline);
}

.steps-item-title { margin-bottom: 8px; font-size: 1.3rem; line-height: 1.25; }

.steps-item-body p {
  max-width: var(--measure-narrow);
  font-size: var(--fs-body);
  line-height: 1.62;
  color: var(--navy-body);
}
.steps-item-body p + p { margin-top: 14px; }

@media (max-width: 760px) {
  .steps-item { gap: var(--space-md); }
}

/* Ruled list. Hairline-separated editorial entries, bold lead-in inline,
   plus the disclosure variant. */
.ruled-list { display: grid; }

.ruled-list-item {
  padding-block: var(--space-xl);
  max-width: var(--measure-narrow);
  font-size: var(--fs-sm);
  line-height: 1.58;
  color: var(--navy-body);
}
.ruled-list-item strong { color: var(--navy-ink-deep); }

/* SQ-24 (contract §D): both disclosure summaries below (this one and
   .fact-row-details's) reuse the FAQ's .faq-marker tan disc unmodified, so a
   closed <details> reads as a clickable action instead of one more line of
   body text. The flex row + min-height replace the old block/plain-text
   summary; .fact-row-details-label is the shared text wrapper for both. */
.ruled-list-details summary,
.fact-row-details summary {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  min-height: 44px;
  list-style: none;
  cursor: pointer;
}
.ruled-list-details summary::-webkit-details-marker,
.fact-row-details summary::-webkit-details-marker { display: none; }

.fact-row-details-label { flex: 1 1 auto; min-width: 0; }

.ruled-list-details summary {
  padding-block: var(--space-xl);
  border-top: 1px solid var(--hairline);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--navy-ink);
}
.ruled-list-details:not([open]) > .ruled-list { display: grid; }
.ruled-list-details .ruled-list-item { border-top: 1px solid var(--hairline); }

.ruled-list-details[open] .faq-marker,
.fact-row-details[open] .faq-marker { transform: rotate(135deg); }

@media (max-width: 760px) {
  .ruled-list-details summary { display: flex; }
  .ruled-list-details:not([open]) > .ruled-list { display: none; }
}

/* Fact row. Four-up ruled facts at --fs-2xs. */
.fact-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: var(--space-3xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--hairline);
}

.fact-row li {
  display: flex;
  gap: var(--space-xs);
  align-items: flex-start;
  padding-inline: var(--space-lg);
  font-size: var(--fs-2xs);
  line-height: 1.55;
  color: var(--navy-body);
}
.fact-row li:first-child { padding-left: 0; }
.fact-row li:not(:first-child) { border-left: 1px solid var(--hairline); }
.fact-row .check-icon {
  width: var(--icon-sz);
  height: var(--icon-sz);
  color: var(--gold-500);
}

/* SQ-24 (contract §B): the 2x2 table below (14-17 characters per line, one
   item at 9 lines / max 16 chars) collapses to one full-width column instead,
   the full 344px measure at ~45 characters the same item reads at on
   desktop. The vertical dividers drop with it; only the horizontal rule
   between rows stays. */
@media (max-width: 760px) {
  .fact-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .fact-row li,
  .fact-row li:not(:first-child) {
    padding-inline: 0;
    padding-block: var(--space-md);
    border-left: 0;
    border-top: 1px solid var(--hairline);
  }
  .fact-row li:first-child { padding-top: 0; border-top: 0; }
}

/* fact-row-details: open by default on desktop (its heading says "in full"
   and the page has to mean it), closed by default on mobile behind a
   summary. Two overrides are needed together, not one: the child's own
   display (for the classic <details> model, where the UA hides
   non-summary children directly with `display: none`) and the
   ::details-content wrapper Chromium's newer <details> model introduces
   (which collapses that wrapper via content-visibility instead, so a
   closed <details> stayed 0px tall with a fully-sized, display:block
   child inside it - the child's own display was never the thing hiding
   it). Author-origin CSS still beats user-agent-origin CSS regardless of
   specificity, so both overrides are reliable rather than a hack.
   The summary's own display: none / flex is set with .ruled-list-details
   above; font styling for its text lives here, matching that sibling. */
.fact-row-details summary {
  padding-block: var(--space-xl);
  border-top: 1px solid var(--hairline);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--navy-ink);
}
.fact-row-details:not([open]) > .facts--compact { display: block; }

/* Mobile: the base rule above hides the summary unconditionally, which
   left the credentials disclosure with no visible trigger at all on
   mobile (the .ruled-list-details sibling below already had this
   override; .fact-row-details did not, so its content was neither open
   nor reachable behind a click). */
@media (max-width: 760px) {
  .fact-row-details summary { display: flex; }
  .fact-row-details:not([open]) > .facts--compact { display: none; }
}

/* Desktop-only: hide both disclosure summaries and force their content
   open - both the child's display and, where it exists, the
   ::details-content wrapper around it - since neither is meant to
   require a click above 760px. Placed after the two blocks above so it
   wins the cascade on the shared summary/details selectors without
   relying on extra specificity. */
@media (min-width: 761px) {
  .fact-row-details summary,
  .ruled-list-details summary { display: none; }
  .fact-row-details::details-content,
  .ruled-list-details::details-content { content-visibility: visible; block-size: auto; }
}

/* Margin note. Heading in the left margin, body at ~52ch. Second use of
   .section-prose: the grid is still one reading column, just with the
   label set beside the body instead of above it, so the overall width
   needs to be wider than .section-prose's own 62ch cap. The compound
   selector below (two classes) outranks the plain .section-prose rule
   regardless of source order, and the body copy itself keeps the narrower
   52ch this shape asks for. */
.margin-note {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0 var(--gap-grid);
  max-width: 980px;
  margin-inline: auto;
}

.margin-note-heading {
  grid-column: 1 / span 3;
  position: sticky;
  top: calc(var(--header-h) + var(--space-xl));
}

.margin-note-body { grid-column: 5 / span 6; }

.margin-note-body p {
  max-width: 52ch;
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--navy-body);
}
.margin-note-body p + p { margin-top: 20px; }

@media (max-width: 760px) {
  .margin-note { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .margin-note-heading { grid-column: 1; position: static; top: auto; }
  .margin-note-body { grid-column: 1; }
  .margin-note-body p { max-width: 46ch; }
}


/* =============================== 12. ABOUT =============================== */
/* .about-grid, .about-portrait and .about-copy below are no longer used by
   /about/ itself (US-3 replaced its bio section with the .about-split band
   further down). They stay, unchanged, because index.html's "About Ray"
   teaser section still consumes all three; removing or restyling them here
   would move the home page. .facts / .fact / .facts--compact are used only
   by /about/, so the US-3 rules further down extend them directly rather
   than through a .page-about scope. */
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: clamp(32px, 5vw, 76px);
  align-items: start;
}

.about-portrait {
  position: relative;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 5 / 6;
  border-radius: var(--radius-media);
  border: 4px solid var(--vc-frame);
  background-image: linear-gradient(168deg, var(--paper-warm) 0%, var(--sky-peach) 62%, #E4D5BC 100%);
  box-shadow: var(--shadow-media);
  overflow: hidden;
}

.about-copy p { max-width: var(--measure-narrow); }
.about-copy p + p { margin-top: 18px; }
.about-copy .section-lede { margin-bottom: var(--space-xl); }

.facts {
  display: grid;
  gap: 18px;
  margin-top: var(--space-3xl);
  padding-top: calc(var(--space-lg) + var(--space-xs));
  border-top: 1px solid var(--hairline);
}

.fact {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: var(--space-md);
  align-items: baseline;
}

.fact dt {
  font-size: var(--fs-3xs);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-700);
}

.fact dd { font-size: var(--fs-sm); line-height: 1.55; color: var(--navy-body); }

/* The demoted end of the credentials section: licence numbers, degrees and
   honours, in two columns at the smallest text size, so the five headline facts
   above them stay the thing a reader takes away. It keeps the .facts hairline
   so the strip above and the detail below read as two blocks rather than one
   long column, and it is the same .fact row underneath, only smaller. */
.facts--compact {
  display: block;
  columns: 2;
  column-gap: var(--gap-grid-lg);
  margin-top: var(--space-3xl);
  padding-top: var(--card-pad);
}

.facts--compact .fact { break-inside: avoid; margin-bottom: var(--space-md); }

.facts--compact .fact dd { font-size: var(--fs-2xs); line-height: 1.55; }

/* ---------------------------------------------------------------------------
   US-3: the ten-movement /about/ rebuild (contract revision 4). SQ-13
   extracted the nine reusable shapes this rebuild introduced into the
   interior-page kit in section 11 above (renamed .about-* to their neutral
   kit names, unscoped). What remains here is genuinely About-specific: the
   breadcrumb tweak on the masthead, the credentials and "not a fit" content
   wrappers, and this page's own mobile height budget layered on top of the
   shared kit shapes. The two long-standing exceptions are still noted where
   they happen: the .cred-strip / .facts--compact wrapping above (page-only
   classes already, left unscoped) and the single .pull-quote edit at the
   very end of this block.
   --------------------------------------------------------------------------- */


/* .section-aside (section 03) collapses to one column at the same 760px
   breakpoint every other kit shape breaks at. Unscoped, like .page-masthead,
   .split-band and .margin-note: it is kit furniture, and leaving it behind a
   .page-about scope made every page that used the spine re-declare the same
   rule under its own page class, which is the dialect problem the kit exists
   to prevent. */
@media (max-width: 760px) {
  .section-aside { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
}

/* Credentials (M5) and "not a fit" (M9) both wrap their .ruled-list /
   .facts--compact content in a page-specific container so the mobile height
   budget below can target them without reaching into the shared kit. */
.page-about .about-credentials { display: grid; gap: var(--space-2xl); }

.page-about .facts--compact .fact dd { max-width: var(--measure-narrow); }

.page-about .facts--compact .fact + .fact {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--hairline);
}

.page-about .about-not-fit { display: grid; }

/* Ray's 2026-09 right-fit revision (M9): two lead-in paragraphs now sit above
   the referral list. .about-not-fit is a bare grid with no paragraph stack of
   its own, so each paragraph carries its own colour and measure here rather
   than inheriting a rhythm from a wrapper it does not have. */
.page-about .about-not-fit-copy {
  max-width: var(--measure-narrow);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--navy-body);
}

.page-about .about-not-fit-copy + .about-not-fit-copy { margin-top: var(--space-md); }

.page-about .about-not-fit > .ruled-list:first-child .ruled-list-item:first-child { padding-top: 0; }

.page-about .about-not-fit .section-foot { max-width: var(--measure); }

/* SQ-24 (contract §C): the split band's photo column stretches to match the
   five-paragraph story column's height, then centres its fixed-ratio image
   inside that box, leaving ~280px of bare paper above and below the portrait
   on desktop. Sticking the photo instead keeps it in view for as long as the
   navy column scrolls past it, so nothing in the band reads as empty. Mobile
   already stacks the two columns (see .split-band's own 760px rule), so this
   is desktop-only and the .page-about .split-band-photo padding override
   below stays untouched. */
@media (min-width: 761px) {
  /* 104px matches the sticky offset .who-intro already uses under the same
     sticky, 92px-tall .site-header. */
  .page-about .split-band-photo { position: sticky; top: 104px; align-self: start; }
}

/* .section-label's own color is --gold-700, sized for --paper/--paper-warm
   backgrounds; on this section's navy half it needs the same lighter
   --gold-300 the standfirst directly below it already uses on this exact
   background. */
.page-about .split-band-story .section-label { margin-bottom: var(--space-sm); color: var(--gold-300); }

/* SQ-32: the story column's first paragraph reads as one voice with the
   three sans-serif paragraphs beneath it, so it drops the shared
   .split-band-standfirst serif treatment here. Scoped to .page-about so the
   other pages that reuse .split-band-standfirst (its base rule, above) keep
   their serif standfirst untouched. Two classes outrank that single-class
   base rule regardless of source order. */
.page-about .split-band-standfirst { font-family: var(--font-sans); }

/* Mobile height budget (contract §6: under 8 screens, ceiling 7,600px at
   390px, down from 10,929px). Copy stays verbatim per §4, so the lever here
   is rhythm, not word count: every section's vertical padding drops to one
   shared, tighter value regardless of its desktop weight (airy / dense /
   compact only need to differ for the desktop reading rhythm), inter-entry
   gaps tighten to match, and body line-height comes down to 1.5 - the WCAG
   1.4.8 floor, not below it. This is deliberately a page-scoped layer on top
   of the shared kit's own defaults, not baked into the kit itself, since a
   future page may want a different budget. */
@media (max-width: 760px) {
  .page-about section.section,
  .page-about .aside--airy,
  .page-about .aside--dense,
  .page-about .aside--compact { padding-block: clamp(28px, 7vw, 40px); }

  /* A mobile-only step down in heading size. --fs-title itself stays
     untouched (it is shared by every other page's .section-title), and
     already floors at 1.9rem below its own vw component; this is a second,
     page-scoped override so /about/'s eight headings do not each cost a
     full desktop-sized two-line heading's worth of height on a phone. */
  .page-about .section-title,
  .page-about .page-masthead h1 { font-size: 1.55rem; line-height: 1.2; }
  .page-about .section-lede { line-height: 1.5; }

  .page-about .page-masthead-caption { margin-top: var(--space-lg); padding-top: var(--space-md); }

  .page-about .section-aside { gap: var(--space-md); }

  .page-about .split-band-photo { padding: var(--space-lg) var(--gutter); }
  .page-about .cred-strip { gap: var(--space-md) var(--space-lg); }
  .page-about .facts--compact { padding-top: var(--space-lg); }
  .page-about .split-band-story { padding: var(--space-md) var(--gutter) var(--space-lg); }
  .page-about .split-band-story p { line-height: 1.5; }
  .page-about .split-band-standfirst { line-height: 1.35; }
  .page-about .split-band-story p + p { margin-top: 14px; }

  .page-about .entry { padding-block: var(--space-lg); }
  /* .entry:first-child (section 11) is only two selectors deep once
     unscoped, tying this rule's specificity instead of losing to it the way
     .page-about .about-entry:first-child (three deep) once did. Restated
     here, scoped, so the first entry still loses its padding-top on mobile. */
  .page-about .entry:first-child { padding-top: 0; }
  .page-about .entry p { line-height: 1.5; }
  .page-about .entry p + p { margin-top: var(--space-2xs); }

  .page-about .about-credentials { gap: var(--space-lg); }
  .page-about .about-not-fit-copy { line-height: 1.5; }

  .page-about .margin-note-body p { line-height: 1.5; }
  .page-about .margin-note-body p + p { margin-top: var(--space-sm); }

  .page-about .steps { gap: var(--space-md); }
  /* SQ-24 (contract §B): the 94px indent (a 74px badge plus its gap) left
     each step's body copy a 272px / 35-38 character column running 6-8 lines.
     Stacking the badge above the body instead, only on this page, frees the
     body to the same full card width the fact-row fix above uses. */
  .page-about .steps-item { flex-direction: column; gap: var(--space-2xs); }
  .page-about .steps-item-body { width: 100%; }
  .page-about .steps-item-title { margin-bottom: var(--space-2xs); font-size: 1.15rem; }
  .page-about .steps-item-body p { line-height: 1.5; }
  .page-about .steps-item-body p + p { margin-top: var(--space-2xs); }
  /* SQ-24 (contract §B): the lede's last line and the first step's badge
     rendered back to back with 0px between them (confirmed by measurement);
     .steps had no margin-top of its own to clear the preceding .section-head. */
  .page-about .steps { margin-top: var(--space-lg); }
  .page-about .fact-row { gap: 0; margin-top: var(--space-lg); padding-top: var(--space-md); }
  .page-about .fact-row li { padding-block: var(--space-sm); }
  .page-about .fact-row li:first-child { padding-top: 0; }

  .page-about .about-not-fit { gap: var(--space-md); }
  .page-about .ruled-list-item { padding-block: var(--space-md); line-height: 1.5; }
  .page-about .ruled-list-details summary { padding-block: var(--space-md); }
  .page-about .about-not-fit .section-foot { margin-top: var(--space-lg); }
}

/* Prohibition 6 / acceptance 13: the file may carry exactly one gold-style
   side-tab border declaration below (the unrelated red .lead-error state is
   the other one that remains). This is the .pull-quote one - removed here
   rather than only avoided on this page, because the count is graded
   file-wide. .pull-quote keeps its radius, shadow, paper-warm fill and quote
   glyph for the two /resources/ articles that use it; only the gold side-tab
   border comes off, file-wide. */
.topic-list { display: grid; gap: var(--space-3xs); }

.topic {
  padding: calc(var(--space-lg) + var(--space-3xs)) 0;
  border-top: 1px solid var(--hairline);
}
.topic:first-child { border-top: 0; padding-top: 0; }

.topic-title {
  font-size: 1.12rem;
  line-height: 1.3;
  color: var(--navy-ink);
  margin-bottom: var(--space-2xs);
}

.topic-text {
  font-size: var(--fs-sm);
  line-height: 1.62;
  color: var(--navy-body);
  max-width: var(--measure);
}

.split-note { margin-top: var(--space-lg); }


/* =========================== 13. MEN'S THERAPY =========================== */
/* SQ-25: shared between /mens-therapy/, /couples-therapy/ and
   /premarital-counseling/ (the only three pages that use .prose-grid), so it
   lives here once rather than three times under each page's own scope.

   Dead right column (report B14): .prose-grid's own align-items: start
   (section 03) sizes each column to its own content, so the four-item
   .check-list (short) sat in a row next to several paragraphs of prose
   (long) and simply ended a thousand-odd pixels early, leaving the rest of
   the rail blank paper for the remainder of the section. Switching the row
   back to grid's default stretch, then pinning the check-list inside that
   taller box, gives the rail real work the same way .aside-intro already
   does two sections up: it stays in view for as long as the reader is in
   the longer column, rather than ending and leaving the rest of the row
   empty. */
.page-mens-therapy .prose-grid,
.page-couples-therapy .prose-grid,
.page-premarital-counseling .prose-grid { align-items: stretch; }

@media (min-width: 761px) {
  .page-mens-therapy .prose-grid > .check-list,
  .page-couples-therapy .prose-grid > .check-list,
  .page-premarital-counseling .prose-grid > .check-list,
  .page-mens-therapy .prose-grid > .prose-details,
  .page-couples-therapy .prose-grid > .prose-details,
  .page-premarital-counseling .prose-grid > .prose-details {
    position: sticky;
    top: calc(var(--header-h) + var(--space-xl));
  }
}

/* Mobile-cap disclosure (acceptance §6, DESIGN.md rule 6's "using <details>
   where content genuinely cannot be cut"). Same open-on-desktop /
   closed-behind-a-summary-on-mobile mechanic as .ruled-list-details
   (section 11), generalised to a block of prose rather than a list: "How
   sessions work" was the tallest section on all three pages and the
   biggest remaining lever once the rest of each page's rhythm had already
   tightened, the same reason /mens-therapy/'s mobile budget below reaches
   for .sub-head--spaced and .prose-grid p rather than cutting copy. */
.prose-details summary {
  padding-block: var(--space-lg);
  border-top: 1px solid var(--hairline);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--navy-ink);
  cursor: pointer;
}
.prose-details:not([open]) > .prose-details-body { display: block; }

@media (max-width: 760px) {
  .prose-details summary { display: block; }
  .prose-details:not([open]) > .prose-details-body { display: none; }
}

@media (min-width: 761px) {
  .prose-details summary { display: none; }
  .prose-details::details-content { content-visibility: visible; block-size: auto; }
}

/* SQ-14: /mens-therapy/ leads with the interior-page kit's .ruled-list, set
   large and numbered, rather than the .topic-list / .panel-grid shapes above
   (.topic-list stays unscoped for /couples-therapy/, which still uses it).
   The numeral is the .who-row-index editorial mark (small, gold, out of the
   reading path), not the .step-badge pill, so this reads as an ordered
   sequence rather than a repeat of /premarital-counseling/'s .steps shape. */
.page-mens-therapy .ruled-list--numbered .ruled-list-item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: baseline;
  max-width: none;
  padding-block: var(--space-2xl);
}

.page-mens-therapy .ruled-list-index {
  font-family: var(--font-sans);
  font-size: var(--fs-3xs);
  font-weight: 500;
  letter-spacing: .18em;
  color: var(--gold-700);
  font-variant-numeric: tabular-nums;
}

.page-mens-therapy .ruled-list--numbered h3 {
  margin: 0 0 var(--space-2xs);
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 2vw, 1.85rem);
  line-height: 1.22;
  color: var(--navy-ink-deep);
}

.page-mens-therapy .ruled-list--numbered p {
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--navy-body);
  max-width: var(--measure-narrow);
}

@media (max-width: 760px) {
  .page-mens-therapy .ruled-list--numbered .ruled-list-item {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: var(--space-md);
    padding-block: var(--space-xl);
  }

  /* .section-aside (section 03) only collapses to one column under
     .page-about today (section 12); SQ-13 left that responsive rule
     page-scoped rather than folding it into the unscoped kit shape, so
     every new consumer repeats it. Same one-line fix, page-scoped here. */

  /* Mobile height budget (acceptance §6: page height at 390px must sit
     materially below its own pre-ticket baseline). Same lever /about/ uses
     (contract §6 there): copy stays verbatim, so the section rhythm
     tightens instead. This page picked up a seventh section (the photo
     band) and a larger lead shape, so it needs this budget where /about/
     needed one for its own reasons. */
  .page-mens-therapy section.section,
  .page-mens-therapy .aside--dense,
  .page-mens-therapy .section-band { padding-block: clamp(28px, 7vw, 40px); }

  .page-mens-therapy .section-title { font-size: 1.55rem; line-height: 1.2; }
  .page-mens-therapy .section-lede { line-height: 1.5; }

  .page-mens-therapy .entry { padding-block: var(--space-lg); }
  .page-mens-therapy .entry:first-child { padding-top: 0; }
  .page-mens-therapy .entry p { line-height: 1.5; }
  .page-mens-therapy .entry p + p { margin-top: var(--space-2xs); }

  .page-mens-therapy .ruled-list--numbered p { line-height: 1.5; }

  /* "How sessions work" (M4, unchanged content) is the tallest section on
     the page and the biggest lever left in the budget: four sub-heads at
     the desktop-spaced --space-4xl gap, and a paragraph rhythm sized for a
     wide column rather than a 390px one. */
  .page-mens-therapy .sub-head--spaced { margin-top: var(--space-2xl); margin-bottom: var(--space-lg); }
  .page-mens-therapy .prose-grid p { line-height: 1.5; }
  .page-mens-therapy .prose-grid p + p { margin-top: var(--space-2xs); }

  /* Same tightened optin footprint /resources/ already uses at this width
     (section "RESOURCES", below), reused rather than a new pair of values. */
  .page-mens-therapy .optin { margin-top: var(--space-xl); padding: var(--space-lg); }

  .page-mens-therapy .faq-summary { padding: 12px var(--space-lg); }
  .page-mens-therapy .faq-answer { padding: 0 var(--space-lg) var(--space-sm); }
  .page-mens-therapy .faq-answer p { line-height: 1.5; }
}



/* =========================== 14. COUPLES THERAPY =========================== */
/* SQ-15: /couples-therapy/ leads with the interior-page kit's .split-band
   (paper vs. navy, no image; the page's one photo is the .section-band
   further down). The old panel-grid section splits into three: the split-
   band itself, an .aside for the pattern list and the "male therapist"
   quote, and a plain section for the unchanged .topic-list (still unscoped
   for this page - see section 13's note). Three sections instead of one
   adds boundaries the mobile height budget (acceptance §6) has to pay for
   with copy held verbatim, the same lever /mens-therapy/ uses for the same
   reason. */

/* Heading scale (report B6). .topic-title is unscoped but only this page
   ever consumes it, and at 1.12rem (17.92px) it sat barely above the
   16.32px body copy right beside it. --fs-lg is the size its sibling h3s
   already use on this page (.entry h3), so this collapses one more of the
   page's eight distinct heading sizes into an existing one instead of
   adding a ninth. */
.page-couples-therapy .topic-title { font-size: var(--fs-lg); }

/* The split-band's two headings ("If you recognize this..." at .sub-head's
   21.6px and "The conversation underneath..." at .split-band-standfirst's
   20.8px) are meant to read as peers either side of the same hard split,
   not as two different levels. .split-band-standfirst is shared with
   /about/, so the 0.8px step is closed here by matching the left heading
   down to the token the right one already uses, rather than editing the
   shared class. */
.page-couples-therapy #foryou-heading { font-size: var(--fs-lg); }

@media (max-width: 760px) {
  .page-couples-therapy section.section,
  .page-couples-therapy .aside--dense { padding-block: clamp(28px, 7vw, 40px); }

  .page-couples-therapy .entry { padding-block: var(--space-lg); }
  .page-couples-therapy .entry:first-child { padding-top: 0; }
  .page-couples-therapy .entry p { line-height: 1.5; }
  .page-couples-therapy .entry p + p { margin-top: var(--space-2xs); }

  .page-couples-therapy .topic { padding-block: var(--space-lg); }
  .page-couples-therapy .topic-text { line-height: 1.5; }

  .page-couples-therapy .sub-head--spaced { margin-top: var(--space-2xl); margin-bottom: var(--space-lg); }
  .page-couples-therapy .prose-grid p { line-height: 1.5; }
  .page-couples-therapy .prose-grid p + p { margin-top: var(--space-2xs); }

  .page-couples-therapy .optin { margin-top: var(--space-xl); padding: var(--space-lg); }

  .page-couples-therapy .faq-summary { padding: 12px var(--space-lg); }
  .page-couples-therapy .faq-answer { padding: 0 var(--space-lg) var(--space-sm); }
  .page-couples-therapy .faq-answer p { line-height: 1.5; }
}


/* ====================== 14b. PREMARITAL COUNSELING ====================== */
/* SQ-25: /premarital-counseling/ never got a mobile height budget of its
   own (acceptance §6) when the other two /*-therapy/ pages did, which is
   the biggest reason it ran furthest over the 8-screen cap (11.38 screens).
   Same lever, same values, copy held verbatim. */
@media (max-width: 760px) {
  .page-premarital-counseling section.section,
  .page-premarital-counseling .section-band { padding-block: clamp(28px, 7vw, 40px); }

  .page-premarital-counseling .steps { gap: var(--space-lg); }
  .page-premarital-counseling .steps-item-title { margin-bottom: var(--space-2xs); }
  .page-premarital-counseling .steps-item-body p { line-height: 1.5; }
  .page-premarital-counseling .steps-item-body p + p { margin-top: var(--space-2xs); }

  .page-premarital-counseling .ruled-list-item { padding-block: var(--space-md); line-height: 1.5; }

  .page-premarital-counseling .sub-head--spaced { margin-top: var(--space-2xl); margin-bottom: var(--space-lg); }
  .page-premarital-counseling .prose-grid p { line-height: 1.5; }
  .page-premarital-counseling .prose-grid p + p { margin-top: var(--space-2xs); }

  .page-premarital-counseling .optin { margin-top: var(--space-xl); padding: var(--space-lg); }

  .page-premarital-counseling .faq-summary { padding: 12px var(--space-lg); }
  .page-premarital-counseling .faq-answer { padding: 0 var(--space-lg) var(--space-sm); }
  .page-premarital-counseling .faq-answer p { line-height: 1.5; }

  .page-premarital-counseling .consult-line { padding-block: var(--space-xl); }
  .page-premarital-counseling .section-foot { margin-top: var(--space-lg); }
}


/* =========================== RESOURCES =========================== */
/* SQ-20: /resources/ leads with the interior-page kit's .aside--airy
   register rather than the .aside--dense weight /mens-therapy/ and
   /couples-therapy/ use: this is reading material, so the spine gets the
   loose rhythm. The old card-grid ("Two things worth knowing about
   patterns") comes off; the two articles become .entry items in the
   aside-entries column, and the page's one photo is the .section-band
   below it. Mobile height budget (acceptance §6) tightens the airy spine
   the same way the other two pages tighten their dense one, the same
   lever, copy held verbatim. */
@media (max-width: 760px) {
  .page-resources section.section,
  .page-resources .aside--airy,
  .page-resources .section-band { padding-block: clamp(28px, 7vw, 40px); }

  .page-resources .entry { padding-block: var(--space-lg); }
  .page-resources .entry:first-child { padding-top: 0; }
  .page-resources .entry p { line-height: 1.5; }
  .page-resources .entry p + p { margin-top: var(--space-2xs); }

  .page-resources .section-lede { line-height: 1.5; }
  .page-resources .prose p { line-height: 1.5; }
  .page-resources .prose > * + * { margin-top: var(--space-sm); }
  .page-resources .section-foot { margin-top: var(--space-xl); }

  /* The opt-in partial (synced, never hand-edited) still carries its own
     fixed 56px margin-top and clamp() padding, sized for a page that isn't
     paying a mobile height budget elsewhere. Scoped here rather than in the
     unscoped .optin rule, which /mens-therapy/ and /premarital-counseling/
     also render. */
  .page-resources .optin { margin-top: var(--space-xl); padding: var(--space-lg); }
  .page-resources .optin-line { line-height: 1.5; }
}


/* ============================= 15. SERVICES ============================= */

/* Kept for 404.html and /resources/, which still use the card shape. This
   page (SQ-17) no longer does: "Services in detail" is a register instead of
   a grid, below. */
.card--service { display: flex; flex-direction: column; }

.card--service .card-text { flex: 1 1 auto; }

.card-meta {
  margin-top: var(--space-lg);
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--navy-muted);
}

/* Service register. An index wants scannable tabular clarity, not cards: one
   hairline-separated row per service, the name in a narrow left column and
   the description at --measure-narrow in the wider right column. */
.service-register { display: grid; }

.service-register-row {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--gap-grid);
  padding-block: var(--space-xl);
  border-top: 1px solid var(--hairline);
}
.service-register-row:first-child { border-top: 0; padding-top: 0; }

.service-register-label {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--navy-ink-deep);
}

.service-register-text {
  margin: 0;
  max-width: var(--measure-narrow);
  font-size: var(--fs-sm);
  line-height: 1.58;
  color: var(--navy-body);
}

.service-register-meta {
  margin-top: var(--space-sm);
  max-width: var(--measure-narrow);
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--navy-muted);
}

.service-register-cta { display: inline-block; margin-top: var(--space-sm); }

@media (max-width: 760px) {
  .service-register-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
}


/* Ray's 2026-09 services revision: the format register ("What you can expect")
   now closes on the crisis line, and a short adolescent note follows the list
   inside the same section. Both are page-only, so they are scoped rather than
   added to the shared kit. The crisis line takes the small muted treatment
   .form-crisis and .footer-crisis already use, so a crisis sentence reads the
   same wherever it appears. */
.page-services .expect-crisis {
  margin-top: var(--space-lg);
  max-width: var(--measure-tight);
  font-size: var(--fs-2xs);
  line-height: 1.55;
  color: var(--navy-muted);
}

.page-services .expect-aside {
  margin-top: var(--space-2xl);
  max-width: var(--measure);
}

.page-services .expect-aside p {
  font-size: var(--fs-sm);
  line-height: 1.58;
  color: var(--navy-body);
}


/* =============================== 16. FEES =============================== */
/* Rebuilt on the .statement + register pattern (SQ-18): the page leads with
   the display statement, then a quiet consult-line, then this register
   inside the shared .aside--compact spine. No card: the old .note-card /
   .note-card--callout / .fees-layout treatment is gone along with it, and
   the register's own supplementary detail now runs as the shared
   .ruled-list kit component (section 11) rather than a second card grid.
   .fee-table keeps its column typography but drops the card fill, radius
   and shadow; a hairline above the header row opens it the same way
   .fact-row opens with one. */
.fee-table {
  width: 100%;
  padding: 0;
  border-collapse: collapse;
  border-top: 1px solid var(--hairline);
}

.fee-table thead th:last-child,
.fee-table tbody td:last-child { text-align: right; }

.fee-table thead th {
  padding: calc(var(--space-lg) + var(--space-3xs)) 0 var(--space-sm);
  font-family: var(--font-sans);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-700);
  text-align: left;
}

.fee-table tbody th,
.fee-table tbody td {
  padding: 20px 0;
  border-top: 1px solid var(--hairline);
  text-align: left;
  font-weight: 400;
}

.fee-table tbody th {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--navy-ink);
}

.fee-table tbody td {
  font-size: var(--fs-sm);
  color: var(--navy-body);
  white-space: nowrap;
}

.fee-table tbody td:last-child {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--navy-ink);
}

.fee-table + .ruled-list { margin-top: var(--space-2xl); }

/* Ray's 2026-09 fees revision: the insurance entry stopped being one
   paragraph. It is now three, a lead-in and a five-question list, so the
   register carries .ruled-list--prose and the questions get their own quiet
   marker: a 1.5px --gold-400 dash, the same weight as .gold-rule, sitting
   where the reset has already removed every bullet. */
.ruled-list--prose p { max-width: var(--measure-narrow); }
.ruled-list--prose p + p { margin-top: var(--space-sm); }

.ask-list { margin-top: var(--space-sm); }

.ask-list li {
  position: relative;
  padding-left: 20px;
  max-width: var(--measure-narrow);
}

.ask-list li + li { margin-top: var(--space-xs); }

.ask-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 10px;
  height: 1.5px;
  background: var(--gold-400);
}

/* The closing sentence after the questions needs the same paragraph rhythm
   the entry uses above the list; p + p does not reach across a sibling ul. */
.ruled-list--prose .ask-list + p { margin-top: var(--space-sm); }


/* =============================== 17. FAQs =============================== */
.faq-list {
  margin-top: var(--space-2xs);
  border-radius: var(--radius-card);
  background: var(--card-white);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.faq + .faq { border-top: 1px solid var(--hairline); }

.faq-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
  padding: var(--space-xl) calc(var(--space-lg) + var(--space-xs));
  cursor: pointer;
  list-style: none;
}
.faq-summary::-webkit-details-marker { display: none; }

.faq-q {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  line-height: 1.35;
  color: var(--navy-ink);
}

.faq-marker {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-pill);
  background: var(--gold-100);
  color: var(--navy-ink);
  transition: transform var(--dur) var(--ease);
}
.faq[open] .faq-marker { transform: rotate(135deg); }

.faq-answer {
  padding: 0 calc(var(--space-lg) + var(--space-xs)) calc(var(--space-lg) + var(--space-3xs));
  max-width: 68ch;
}
.faq-answer p { font-size: var(--fs-sm); line-height: 1.7; color: var(--navy-body); }

/* /faqs/ (SQ-19). The shared .section-band above is used as-is; only the
   img's crop is page-scoped here, per contract. The source photograph shows
   a bed through the doorway in its upper portion (PHOTO_MANIFEST batch 2
   note). DeepSeek Flash vision confirmed the bottom 35% of the 941px source
   (330px) is bed-free: floorboards, baseboard and the doorway threshold
   only. A shorter aspect-ratio than the shared 1672/941 default is required
   for object-position to have anything to crop; without it object-fit:cover
   renders the full frame, bed included. */
.page-faqs .section-band-img {
  aspect-ratio: 1672 / 330;
  object-position: center bottom;
}

@media (max-width: 760px) {
  /* Mobile height budget (acceptance §6: page height at 390px must sit
     materially below its own pre-ticket baseline of 4103px). Same lever
     /mens-therapy/ and /couples-therapy/ use: copy stays verbatim, so the
     section rhythm tightens instead. This page picked up two new sections
     (the margin-note intro and the photo band). */
  .page-faqs section.section,
  .page-faqs .section-band { padding-block: clamp(28px, 7vw, 40px); }

  .page-faqs .margin-note-body p { line-height: 1.5; }

  /* The FAQ accordion itself (13 questions across 4 groups) is the tallest
     block on the page and the biggest lever left in the budget. Page-scoped,
     so /mens-therapy/, /couples-therapy/, /services/ and /fees/ keep the
     accordion's current mobile rhythm untouched. */
  .page-faqs .faq-group + .faq-group { margin-top: 24px; }
  .page-faqs .faq-group-title { margin-bottom: 8px; }
  .page-faqs .faq-summary { padding: 12px var(--space-lg); }
  .page-faqs .faq-answer { padding: 0 var(--space-lg) var(--space-sm); }
  .page-faqs .faq-answer p { line-height: 1.5; }
  .page-faqs .faq-answer li { font-size: var(--fs-2xs); line-height: 1.55; }
}


/* /faqs/ opening and accordion (round 3). Everything below is scoped to
   .page-faqs, because /, /fees/, /mens-therapy/, /couples-therapy/ and
   /premarital-counseling/ render the same .faq component and none of them was
   part of this finding. */

/* The opening. Beneath the header the hero was spending 425px of a 900px
   screen (72px of padding above the breadcrumb, 66px below the lede) and the
   first question did not arrive until y618, so the page announced itself for
   most of the first screen before it answered anything. DESIGN.md opening rule
   14 settles what to do with the vacancy: shorten the staging, never fill it
   with imagery or cards. So the hero drops to 40px/28px, and the section that
   carries the questions opens on 28px instead of 64px. That is where most of
   the 73px gap before the panel went (the panel's own 8px margin stays). The
   h1, the lede and its two-line break are untouched, the lede keeps 22px above
   it, and the panel still keeps 28px of paper above itself. */
.page-faqs .page-hero {
  padding-block: var(--space-3xl) var(--space-2xl);
}

.page-faqs .section--tight-top {
  padding-block-start: var(--space-2xl);
}

/* The question is the most useful line on this screen, so it outranks the
   introduction in the type: 1.3rem rather than 1.1rem, on the 500 cut the page
   already loads (Playfair Display is subset at 400-500, so this is a real
   weight rather than a synthesised one), in the deeper ink the section
   headings use. It stays a list row, one rung above the answer text and one
   rung below the group title, rather than a display headline. */
.page-faqs .faq-q {
  font-size: var(--fs-lg);
  font-weight: 500;
  line-height: 1.3;
  color: var(--navy-ink-deep);
}

/* Open used to be this plus rotated 135deg, and at 45deg a plus is an X, which
   opposite a question inside a rounded panel reads as "dismiss this panel".
   The stem now collapses instead, so closed is a plus and open is a minus. The
   rotation rule it replaces is shared with the other four pages that use the
   accordion, so this is a page-scoped override rather than an edit. */
.page-faqs .faq[open] .faq-marker { transform: none; }

.page-faqs .faq-marker-stem {
  transform-origin: center;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.page-faqs .faq[open] .faq-marker-stem { transform: scaleY(0); opacity: 0; }

/* Elevation. --shadow-card (0 24px 60px -24px) under a white panel on cream
   paper was heavier than this paper and ink composition needs, and DESIGN.md's
   signature is the offset gold hairline halo rather than a shadow, so the
   panel takes the halo. The thin gold dividers between questions stay. */
.page-faqs .faq-list {
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--gold-300);
}

/* The confidentiality answer is three reading units now rather than one, so
   its paragraphs and its exceptions list need the rhythm the single paragraph
   did not have. The mark is the same gold dot .prose ul already uses. */
.page-faqs .faq-answer p + p { margin-top: var(--space-md); }

.page-faqs .faq-answer ul {
  display: grid;
  gap: var(--space-3xs);
  margin-top: var(--space-2xs);
  padding-left: 0;
}

/* The list and the paragraph after it are separate reading units, so the last
   exception must not read as part of the closing sentence. */
.page-faqs .faq-answer ul + p { margin-top: var(--space-md); }

.page-faqs .faq-answer li {
  display: flex;
  gap: var(--space-xs);
  align-items: flex-start;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--navy-body);
}

.page-faqs .faq-answer li::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin-top: .62em;
  border-radius: 50%;
  background: var(--gold-500);
}

@media (prefers-reduced-motion: reduce) {
  .page-faqs .faq-marker-stem { transition: none; }
}


/* ========================= 18. CONTACT AND FORM ========================= */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: clamp(36px, 5vw, 76px);
  align-items: start;
}

.contact-copy .sub-head { margin-top: 44px; }

.contact-details {
  display: grid;
  gap: 20px;
}

.contact-detail {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: var(--space-md);
  align-items: baseline;
}

.contact-detail dt {
  font-size: var(--fs-3xs);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-700);
}

.contact-detail dd { font-size: var(--fs-sm); line-height: 1.55; color: var(--navy-body); }

.contact-form-col {
  display: grid;
  gap: 20px;
  align-content: start;
}

.contact-form-wrap {
  padding: calc(var(--space-lg) + var(--space-xs)) 44px 30px;
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, .97);
  box-shadow: var(--shadow-card);
}

.form-title {
  font-size: var(--fs-lg);
  line-height: 1.25;
  color: var(--navy-ink);
  margin-bottom: calc(var(--space-lg) + var(--space-3xs));
}

.field { margin-bottom: 20px; }

.field label,
.field legend {
  display: block;
  margin-bottom: var(--space-2xs);
  font-size: var(--fs-3xs);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--navy-ink);
}

.field--fieldset { border: 0; padding: 0; margin-inline: 0; }
.field--fieldset legend { padding: 0; }

.req { color: var(--gold-700); }
.optional { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--navy-muted); }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field textarea {
  width: 100%;
  padding: var(--space-sm) 20px;
  /* --hairline measures 1.32:1 on white, well under the 3:1 WCAG 1.4.11 asks
     of a control boundary. --gold-500 is 3.11:1 and stays in the accent
     family, so the field still reads as a quiet cream form. */
  border: 1px solid var(--gold-500);
  border-radius: var(--radius-pill);
  background: #FFF;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--navy-ink);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.field textarea {
  border-radius: var(--radius-media);
  line-height: 1.6;
  resize: vertical;
  min-height: 118px;
}

.field input::placeholder,
.field textarea::placeholder { color: #98A0AA; }

/* Focus is the signature halo, not a removed outline. The old rule dropped the
   outline and replaced it with --gold-400 (2.41:1) plus a 22% wash, which left
   a keyboard user with no indicator that meets 3:1 on the site's one
   conversion. The ring below is the identity's offset hairline, at full
   strength, and it is what a non-mouse visitor follows through the form. */
.field input:focus-visible,
.field textarea:focus-visible {
  border-color: var(--gold-700);
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--gold-700);
  outline: none;
}

/* Pointer focus keeps the quieter treatment so a click does not flash a ring. */
.field input:focus:not(:focus-visible),
.field textarea:focus:not(:focus-visible) {
  border-color: var(--gold-600);
  box-shadow: 0 0 0 3px rgba(126, 92, 40, .18);
  outline: none;
}

.choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.choice {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  border-radius: var(--radius-pill);
  background: var(--paper-warm);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--navy-ink);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}
.choice:hover { background: #F1EADC; }

/* A required choice has to look chosen. The 18px native control changes with
   accent-color, but the 200px pill around it did not move at all, so the
   answer a visitor had just given was invisible on the one field the form
   insists on. The chosen pill now carries the accent, at AA on its fill. */
.choice:has(input:checked) {
  background: var(--gold-100);
  box-shadow: inset 0 0 0 2px var(--gold-700);
  color: var(--navy-ink);
}

.choice:has(input:focus-visible) {
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--gold-700);
}

.choice input,
.check input {
  accent-color: var(--gold-600);
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin: 0;
  cursor: pointer;
}

.field--check { margin-top: var(--space-3xs); }

.check {
  display: flex;
  gap: var(--space-xs);
  align-items: flex-start;
  cursor: pointer;
}
.check input { margin-top: 3px; }
.check span {
  font-size: var(--fs-xs);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
  text-transform: none;
  color: var(--navy-body);
}

.field-hint {
  margin-top: 10px;
  font-size: var(--fs-2xs);
  line-height: 1.55;
  color: var(--navy-muted);
}

.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.form-foot {
  margin-top: 18px;
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--navy-muted);
  text-align: center;
}
.form-foot a { color: var(--gold-700); font-weight: 500; text-underline-offset: 4px; }

.form-crisis {
  margin-top: 20px;
  font-size: var(--fs-2xs);
  line-height: 1.55;
  color: var(--navy-muted);
}


/* =============================== 19. FOOTER =============================== */
.site-footer {
  background: var(--navy-ink-deep);
  color: rgba(253, 251, 248, .8);
  padding-block: clamp(48px, 5vw, var(--space-4xl)) var(--space-3xl);
  border-top: 1px solid rgba(253, 251, 248, .14);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .7fr) minmax(0, 1.5fr);
  gap: clamp(var(--space-2xl), 4vw, 64px);
  align-items: start;
}

.brand--footer { gap: 14px; }
.brand--footer .brand-word { color: var(--paper); font-size: clamp(.95rem, 1.05vw, 1.12rem); }
.brand--footer .brand-mark { width: 44px; height: 44px; }
.brand--footer .brand-rule { height: 32px; }

.footer-email { font-size: var(--fs-xs); color: var(--paper); }
.footer-email a { color: var(--paper); text-underline-offset: 4px; }

.footer-credit { color: var(--tint-paper-66); }

.footer-tagline {
  margin-top: var(--space-lg);
  font-size: var(--fs-3xs);
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-300);
}

.footer-nav ul { display: grid; gap: 10px; }

.footer-nav a {
  display: inline-block;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--tint-paper-78);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.footer-nav a:hover { color: var(--paper); text-decoration: underline; text-underline-offset: 4px; }

.footer-legal { display: grid; gap: var(--space-md); }

.footer-licence { font-size: var(--fs-xs); color: var(--paper); }

.footer-crisis {
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--paper);
}

.footer-privacy {
  font-size: var(--fs-2xs);
  line-height: 1.6;
  color: var(--tint-paper-66);
  max-width: var(--measure);
}

.footer-copy { font-size: var(--fs-2xs); color: var(--tint-paper-66); }


/* ============ 20. MOTION, REVEAL, REDUCED MOTION ============ */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

.hero-copy { animation: riseIn 760ms var(--ease) 60ms both; }
.hero-media { animation: riseIn 760ms var(--ease) 180ms both; }

/* Reveal-on-scroll. Applied only when JavaScript is running, so the page is
   never left invisible (see .no-js on <html>). */
html:not(.no-js) [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 640ms var(--ease), transform 640ms var(--ease);
}
html:not(.no-js) [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* .section-band-img keeps its own treated end state. The generic reveal
   above resolves any [data-reveal] element to opacity: 1, which is correct
   for everything else but would discard the --photo-opacity scrim the band
   requires (DESIGN.md non-negotiable 6). Reveal-on-scroll animates the band
   INTO that treated state rather than to full strength, so the five pages
   that carry data-reveal on the band render identically to the three that
   do not. */
html:not(.no-js) .section-band-img[data-reveal].is-visible { opacity: var(--photo-opacity); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .hero-copy,
  .hero-media { animation: none; }

  html:not(.no-js) [data-reveal],
  html:not(.no-js) [data-reveal].is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  html:not(.no-js) .section-band-img[data-reveal],
  html:not(.no-js) .section-band-img[data-reveal].is-visible { opacity: var(--photo-opacity); }

  /* The shadow keeps animating exactly as it always has; only the show/hide
     slide (transform) drops its transition, so is-hidden/is-shown snap
     instead of sliding. */
  .site-header { transition: box-shadow var(--dur) var(--ease); }

  .btn,
  .btn-arrow,
  .nav-link::after,
  .faq-marker,
  .skip-link,
  .card,
  .vc-btn { transition: none; }

  .btn:hover { transform: none; }
  .btn:hover .btn-arrow { transform: none; }
}


/* ============================ 21. RESPONSIVE ============================ */

/* Header: collapse the horizontal nav before the row starts to crowd the
   logo and the CTA. */
@media (max-width: 1240px) {
  .header-cta { display: none; }
  .nav-toggle { display: inline-flex; }

  .site-nav {
    position: fixed;
    /* Full height down to the bottom of the viewport, not just as tall as its
       content: a contained navigation surface with no strip of the page
       showing beneath it. It scrolls internally (overflow-y) when the list is
       taller than a short viewport or enlarged text allows. */
    inset: var(--header-h) 0 0 0;
    z-index: 55;
    display: none;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    overflow-y: auto;
    padding: 20px var(--gutter) calc(34px + env(safe-area-inset-bottom));
    background: var(--paper);
    box-shadow: 0 26px 50px -30px rgba(15, 29, 46, .55);
    border-top: 1px solid var(--hairline);
  }

  .site-nav.is-open { display: flex; }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav-list li + li { border-top: 1px solid var(--hairline); }

  .nav-link {
    display: block;
    padding: 16px 0;
    font-size: 1.02rem;
  }

  .nav-link::after { bottom: 8px; left: 0; right: auto; width: 28px; opacity: 0; }

  /* Keeps the halo. It used to be stripped here, which left the one CTA inside
     the open menu as a plain rectangle while every other button wears the ring. */
  .nav-cta {
    display: inline-flex;
    margin-top: 24px;
  }
}

/* Hero: one column. The copy keeps the full content width, so the type scale
   steps back up (see --fs-hero / --fs-sub). */
@media (max-width: 1249px) {
  :root {
    --fs-hero:   clamp(1.75rem, 6.6vw, 3.6rem);
    --fs-sub:    clamp(1.05rem, 2.5vw, 1.4rem);
    --fs-script: clamp(1.3rem, 3vw, 1.7rem);
    --fs-chip:   clamp(.88rem, 1.7vw, 1rem);
    --gap-chip:  clamp(18px, 3vw, 44px);
    --script-w:  clamp(120px, 22vw, 170px);
  }

  .hero { padding-bottom: clamp(150px, 22vw, 210px); }

  .hero-grid { grid-template-columns: minmax(0, 1fr); row-gap: clamp(40px, 6vw, 64px); }

  .hero-copy::before { inset: -6% -8% -6% -10%; }

  .hero-media { justify-content: flex-start; }

  .vc-card { max-width: 560px; }
}

/* No forced break in the subhead: the two <span class="sub-part"> halves used to
   be set on their own lines above 1250px, which the design wanted, but the "Ray
   Corbo, LMFT." credit added to the first half made it wrap on its own, so the
   break produced a three-word orphan line ("and start to") instead of two even
   lines. Left to wrap, the subhead reads as two balanced lines again. */

/* Tablet and below */
@media (max-width: 900px) {
  :root { --header-h: 74px; }

  .brand-mark { width: 44px; height: 44px; }
  .brand { gap: 12px; }
  .brand-rule { height: 32px; }

  .card-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prose-grid,
  .about-grid,
  .contact-grid { grid-template-columns: minmax(0, 1fr); }

  /* Two columns of credential detail stop working once each column is under
     about 370px: the 130px label column leaves the value 30 characters a line. */
  .facts--compact { columns: 1; }

  .about-portrait { max-width: 340px; }

  .step-sep { display: none; }

  .process { margin-top: -110px; }

  .process-card { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 30px 34px; }

  .step-desc { max-width: 46ch; }

  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer-legal { grid-column: 1 / -1; }
}

/* Narrow: the fee table becomes a stacked list so nothing breaks mid-word */
@media (max-width: 760px) {
  .fee-table thead { display: none; }

  .fee-table,
  .fee-table tbody { display: block; }

  .fee-table tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px var(--space-md);
    padding: 20px;
    border-top: 1px solid var(--hairline);
  }
  .fee-table tbody tr:first-child { border-top: 0; }

  .fee-table tbody th,
  .fee-table tbody td { display: block; padding: 0; border: 0; }

  .fee-table tbody th { flex: 1 1 100%; }

  .fee-table tbody td {
    font-size: var(--fs-xs);
    color: var(--navy-muted);
    white-space: normal;
  }

  .fee-table tbody td:last-child {
    font-size: 1.18rem;
    color: var(--navy-ink);
    text-align: left;
  }
}

/* Phone */
@media (max-width: 640px) {
  :root {
    --fs-chip: clamp(.84rem, 3.1vw, .95rem);
    --gap-chip: 18px;
  }

  .contact-form-wrap { padding: var(--space-2xl) var(--space-xl) var(--space-xl); }
  .card { padding: calc(var(--space-lg) + var(--space-3xs)) var(--space-xl); }

  .faq-summary { padding: 20px var(--space-xl); }
  .faq-answer { padding: 0 var(--space-xl) var(--space-lg); }


  .hero-actions { gap: 22px; }
  .btn-hero { width: 100%; }

  /* Two per row, never one - the three chips read as a single trust unit */
  /* Two chips per row on a phone, which is the floor DESIGN.md sets for them:
     they read as one trust unit, so three single-chip rows would lose that.
     The row is a grid here rather than the flex row used above 640px, which is
     why this also restores the display. */
  .trust-chips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 18px;
  }
  .chip-title,
  .chip-sub { white-space: normal; }

  .hero-media { flex-direction: column; align-items: flex-start; gap: 18px; }

  .script-note {
    align-self: flex-end;
    margin-top: 4px;
    margin-right: 6%;
    transform-origin: right top;
  }

  /* One card per row on a phone: at two up the copy wraps to four or five
     lines and the cards stop reading as cards. */
  .card-grid--2,
  .card-grid--3 { grid-template-columns: minmax(0, 1fr); }

  .facts { grid-template-columns: minmax(0, 1fr); }
  .fact,
  .contact-detail { grid-template-columns: minmax(0, 1fr); gap: 6px; }

  .tagline { gap: 12px; font-size: .72rem; letter-spacing: .16em; }
  .gold-rule { width: 30px; }

  .footer-grid { grid-template-columns: minmax(0, 1fr); }

  .step { gap: 16px; }
  .step-badge { width: 54px; height: 54px; font-size: 1.4rem; }
}

/* 480px: the header is the tightest row on the site. Below about 435px the
   lockup and the Menu toggle no longer fit inside the 24px gutters at their
   full size, which pushed the toggle off the right edge of a 360px screen. Two
   changes buy back about 100px: the wordmark steps down, and the toggle drops
   to its icon. The label stays in the DOM as the button's accessible name
   (`.nav-toggle-text`), so nothing is lost to a screen reader;
   `.nav-toggle { min-width: 44px }` keeps the icon-only target thumb sized. */
@media (max-width: 480px) {
  :root { --fs-brand: .86rem; }

  .brand { gap: 8px; }
  .brand-mark { width: 40px; height: 40px; }
  .brand-word { letter-spacing: .07em; }

  .nav-toggle { padding-block: 12px; }

  .nav-toggle-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* 360px floor: keep the gutters at 24px and let nothing overflow */
@media (max-width: 420px) {
  .choice-row .choice { flex: 1 1 100%; }
  .tagline { flex-direction: column; }
  .gold-rule { display: none; }
}


/* ==================== 22. LEAD MAGNET - PILL + MODAL ====================
   The free men's self-check, offered in a modal. Two entry points, both real
   links to guide/index.html so they work without JavaScript, and both of which
   open the modal when it is available (js/main.js 7):

     1. the "Free self-check" pill, fixed bottom-left on desktop and hidden
        outright at 640px and below (`.lead-pill-bar` / `.lead-pill`), because
        the mobile call and booking bar already owns the bottom of the screen;
     2. the "Why Do I Keep Shutting Down?" card in the "Who I help"
        section (`.lead-card`).

   The modal itself is a native <dialog>, so Escape, the focus trap and the
   top-layer stacking come from the platform. `padding: 0` matters: with no
   padding of its own, a click on the dialog element can only be a click on the
   backdrop, which is how click-outside-to-close is detected.
   ====================================================================== */

/* ----------------------------- The fixed pill ----------------------------- */
.lead-pill-bar {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 30;
}

.lead-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 var(--space-lg) 0 18px;
  border-radius: var(--radius-pill);
  background-color: var(--btn-navy);
  color: var(--on-dark);
  font-family: var(--font-sans);
  font-size: var(--fs-2xs);
  font-weight: 500;
  text-decoration: none;
  /* the same gold-hairline halo as the header CTA, so the pill reads as one
     of the family rather than a bolt-on */
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--gold-300),
              0 14px 28px -12px var(--tint-ink-deep-55);
  transition: background-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}

.lead-pill:hover {
  background-color: var(--btn-navy-deep);
  transform: translateY(-1px);
}

.lead-pill-icon { flex: 0 0 auto; color: var(--gold-300); }

/* --------------------------- The home offer card --------------------------- */
.lead-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--space-lg) + var(--space-3xs)) var(--space-3xl);
  margin-top: 44px;
  padding: 32px 38px;
  border-radius: var(--radius-card);
  background: var(--card-white);
  box-shadow: var(--shadow-card);
}

.lead-card-copy { max-width: 58ch; }

.lead-card-label {
  margin: 0 0 10px;
  font-family: var(--font-sans);
  font-size: var(--fs-3xs);
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-700);
}

.lead-card-title {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  line-height: 1.2;
  color: var(--navy-ink);
}

.lead-card-text {
  margin-top: var(--space-xs);
  font-size: var(--fs-sm);
  line-height: 1.62;
  color: var(--navy-body);
}

.lead-card-btn { flex: 0 0 auto; }

/* -------------------------------- The modal -------------------------------- */
.lead-modal {
  width: min(94vw, 780px);
  max-width: 780px;
  /* vh is the fallback for browsers without dvh; dvh is the one that matters on
     iOS, where 92vh while the toolbars are showing is taller than the screen. */
  max-height: 92vh;
  max-height: 92dvh;
  padding: 0;
  border: 0;
  border-radius: var(--radius-card);
  background: var(--paper);
  color: var(--navy-body);
  box-shadow: var(--shadow-media);
  overflow: auto;
  overscroll-behavior: contain;
}

.lead-modal::backdrop {
  background: rgba(15, 29, 46, .58);
  backdrop-filter: blur(3px);
}

.lead-modal-inner {
  position: relative;
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: clamp(var(--space-xl), 3vw, 36px);
  padding: 38px var(--space-3xl) var(--space-2xl);
}

/* `[hidden]` has to win over the component rules below, which set display. */
.lead-modal [hidden] { display: none !important; }

.lead-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  background: var(--card-white);
  color: var(--navy-ink);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.lead-close:hover { background: var(--paper-warm); color: var(--navy-ink-deep); }

/* The cover preview - CSS only, no image request */
.lead-preview {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.lead-preview-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  width: 100%;
  max-width: 168px;
  aspect-ratio: 8.5 / 11;
  padding: 18px var(--space-md);
  border: 1px solid var(--hairline);
  border-radius: 5px;
  background: var(--paper-warm);
  box-shadow: 0 18px 36px -20px rgba(15, 29, 46, .45);
  transform: rotate(-1.6deg);
}

.lead-preview-ring {
  position: relative;
  display: block;
  width: 24px;
  height: 24px;
  border: 1px solid var(--gold-400);
  border-radius: 50%;
}

.lead-preview-ring::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1.6px solid var(--navy-ink);
  /* one gap only, on the right: an open "C", the way the mark is drawn. Clearing
     the bottom border as well turns the arc into a crescent that reads as a
     mouth at this size. */
  border-right-color: transparent;
  border-radius: 50%;
}

.lead-preview-eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: .42rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--navy-ink);
}

.lead-preview-rule {
  display: block;
  width: 64%;
  height: 1.5px;
  margin-block: var(--space-3xs);
  background: var(--gold-400);
}

.lead-preview-title {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--fs-3xs);
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--navy-ink-deep);
}

.lead-preview-sub {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: .54rem;
  line-height: 1.3;
  color: var(--gold-700);
}

.lead-preview-line {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: var(--hairline);
}

.lead-preview-line--short { width: 62%; }

.lead-preview-band {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: auto;
  padding-top: 9px;
  border-top: 1.5px solid var(--gold-400);
}

.lead-preview-band-line {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: var(--paper);
}

.lead-preview-band-line--short { width: 54%; }

/* Modal copy + form */
.lead-eyebrow { margin-bottom: 10px; font-size: var(--fs-3xs); }

.lead-title {
  font-size: clamp(1.6rem, 2.6vw, 2.05rem);
  line-height: 1.12;
  letter-spacing: -0.012em;
  color: var(--navy-ink-deep);
  text-wrap: balance;
}

.lead-desc {
  margin-top: var(--space-xs);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--navy-body);
}

.lead-form { margin-top: var(--space-xl); }

.lead-submit { margin-top: 6px; }

.lead-submit.is-busy { opacity: .72; cursor: progress; }

.lead-error {
  margin-top: var(--space-md);
  padding: var(--space-sm) 18px;
  border-left: 3px solid var(--rec-red);
  border-radius: var(--radius-inset);
  background: rgba(220, 72, 62, .08);
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--navy-ink);
}
.lead-error a { color: var(--navy-ink); font-weight: 500; text-underline-offset: 4px; }

.lead-privacy {
  margin-top: var(--space-sm);
  font-size: var(--fs-3xs);
  line-height: 1.55;
  color: var(--navy-muted);
}

.lead-dismiss {
  margin-top: var(--space-md);
  padding: 2px 0;
  border: 0;
  background: none;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--navy-muted);
  text-decoration: underline;
  text-decoration-color: var(--hairline);
  text-underline-offset: 5px;
  cursor: pointer;
}
.lead-dismiss:hover { color: var(--navy-ink); text-decoration-color: var(--gold-400); }

/* "No thanks" is deliberately light on the page, but on a touch screen it is
   still a control a thumb has to hit, so it gets the same 44px floor there. */
@media (pointer: coarse) {
  .lead-dismiss { min-height: 44px; }
}

.lead-thanks { margin-top: var(--space-xl); }

.lead-thanks-title {
  font-size: var(--fs-lg);
  line-height: 1.2;
  color: var(--navy-ink);
}

.lead-thanks-text {
  margin-top: var(--space-xs);
  font-size: var(--fs-sm);
  line-height: 1.62;
  color: var(--navy-body);
}

.lead-download {
  width: 100%;
  min-height: 56px;
  margin-top: 20px;
  font-size: var(--fs-sm);
}

/* Open animation - skipped entirely when reduced motion is asked for */
.lead-modal[open] { animation: lead-modal-in 260ms var(--ease); }
.lead-modal[open]::backdrop { animation: lead-backdrop-in 260ms var(--ease); }

@keyframes lead-modal-in {
  from { opacity: 0; transform: translateY(16px) scale(.985); }
}

@keyframes lead-backdrop-in {
  from { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .lead-modal[open],
  .lead-modal[open]::backdrop { animation: none; }

  .lead-pill:hover { transform: none; }
}

/* ------------------------------ Narrow screens ------------------------------ */
@media (max-width: 900px) {
  /* The preview moves out of its own row and into a narrow rail beside the
     eyebrow and title - on a phone the stacked version alone ran about 130px
     past the bottom of the viewport, which pushed "No thanks" out of sight.
     `.lead-copy` is set to display: contents so its children can be placed in
     the same grid; nothing about it is focusable or announced. */
  .lead-modal-inner {
    grid-template-columns: 92px minmax(0, 1fr);
    column-gap: 20px;
    row-gap: var(--space-xs);
    padding: 30px calc(var(--space-lg) + var(--space-3xs)) var(--space-lg);
  }

  .lead-copy { display: contents; }

  .lead-preview { grid-column: 1; grid-row: 1 / span 2; justify-content: flex-start; }
  .lead-preview-card { max-width: 92px; padding: 11px 10px; gap: 5px; }
  .lead-preview-ring { width: 20px; height: 20px; }
  .lead-preview-ring::after { inset: 3.5px; border-width: 1.3px; }
  .lead-preview-eyebrow { font-size: .36rem; letter-spacing: .14em; }
  .lead-preview-title { font-size: .56rem; }
  .lead-preview-sub { font-size: .44rem; }
  .lead-preview-band { padding-top: 6px; gap: 3px; }

  .lead-eyebrow { grid-column: 2; grid-row: 1; align-self: end; margin: 0; }
  .lead-title { grid-column: 2; grid-row: 2; align-self: start; }

  .lead-desc,
  .lead-form,
  .lead-thanks,
  .lead-dismiss { grid-column: 1 / -1; }

  /* Tighter than desktop: the same content has less height to work with */
  .lead-desc { margin-top: 6px; }
  .lead-form { margin-top: var(--space-md); }
  .field { margin-bottom: var(--space-md); }
  .lead-privacy { margin-top: var(--space-xs); }
  .lead-dismiss { margin-top: var(--space-xs); justify-self: start; }

  .lead-card { padding: var(--space-2xl) calc(var(--space-lg) + var(--space-3xs)); }
  .lead-card-btn { width: 100%; }
}

@media (max-width: 640px) {
  /* On a phone the pill is hidden outright. It used to become a bottom bar,
     but that competed with the call and booking bar below it and took a strip
     of every screen. The offer is not lost: the modal still fires on the pages
     that carry it, and /mens-therapy/, /couples-therapy/,
     /premarital-counseling/ and /resources/ all keep their inline opt-in. */
  .lead-pill-bar { display: none; }

  .lead-modal { width: 94vw; max-height: 90vh; max-height: 90dvh; border-radius: var(--radius-media); }

  /* The last 16px of the dialog clear the home indicator on a notched phone. */
  .lead-modal-inner {
    grid-template-columns: 78px minmax(0, 1fr);
    column-gap: var(--space-md);
    padding: calc(var(--space-lg) + var(--space-3xs)) 20px calc(var(--space-md) + env(safe-area-inset-bottom));
  }
  .lead-preview-card { max-width: 78px; padding: 6px var(--space-2xs) 9px; gap: var(--space-3xs); }
  .lead-preview-ring { width: 18px; height: 18px; }
  .lead-preview-ring::after { inset: 3px; border-width: 1.2px; }

  /* The three decorative text bars are the first luxury to go: they are worth
     about 25px of preview height, and the gold band below already reads as
     "cover" without them. This is what buys the modal its last 12px. */
  .lead-preview-line { display: none; }
  .lead-preview-band { margin-top: 10px; }

  /* shorter inputs: two of them, so it adds up */
  .lead-form input[type="text"],
  .lead-form input[type="email"] { padding-block: var(--space-xs); }

  .lead-submit { min-height: 50px; }
  .lead-download { min-height: 50px; }
}



/* ================= 23. MULTI-PAGE FURNITURE =================
   Everything the ten-page architecture adds on top of the one-page build:
   the inner-page hero, the inline opt-in, the mobile call and
   booking bar, articles, and the small panels the service pages are made of.
   The palette, radii, shadows and motion tokens above are unchanged.
   ============================================================ */

/* ---------------------------- Page hero ----------------------------
   Every page except the home page opens with the same calm band: an eyebrow,
   the serif h1, and a lede. The warmth comes from one soft radial glow over
   the paper, never from a photograph, so the type always sits on a flat
   surface and keeps its contrast. */
.page-hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(46px, 5vw, 74px) clamp(var(--space-3xl), 4.6vw, 66px);
  background-color: var(--paper);
  background-image:
    radial-gradient(120% 100% at 84% 4%, rgba(254, 245, 221, .85) 0%, var(--tint-glow-0) 62%),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-warm) 100%);
  border-bottom: 1px solid var(--hairline);
}

.page-hero-inner { max-width: 900px; }

.page-hero h1 {
  font-size: clamp(2.05rem, 3.5vw, 3.05rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--navy-ink-deep);
  text-wrap: balance;
}

.page-hero .section-label { margin-bottom: var(--space-md); }

.page-hero-lede {
  margin-top: var(--space-lg);
  font-size: clamp(1.04rem, 1.2vw, 1.2rem);
  line-height: 1.6;
  color: var(--navy-body);
  /* The hero subhead is the same kind of line as a section lede, so it takes
     the same measure. */
  max-width: var(--measure-lede);
}

.page-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 32px;
  margin-top: calc(var(--space-lg) + var(--space-xs));
}

.hero-note {
  margin-top: 26px;
  font-family: var(--font-script);
  font-size: var(--fs-script);
  line-height: 1.15;
  /* DESIGN.md non-negotiable 2: the handwritten voice is gold, at about -7deg.
     This was navy at -2deg, which read as a font accident rather than as the
     one hand-written note the page is allowed. */
  color: var(--gold-700);
  transform: rotate(-7deg);
  transform-origin: left center;
  display: inline-block;
}

/* --------------------------- Link cards --------------------------- */
.card-link { text-decoration: none; transition: color var(--dur) var(--ease); }
.card-link:hover { text-decoration: underline; text-underline-offset: 4px; }

.card-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-top: 18px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--navy-ink);
  text-decoration: none;
}

.card-cta .card-cta-arrow { transition: transform var(--dur-fast) var(--ease); }
.card--link:hover .card-cta .card-cta-arrow { transform: translateX(3px); }
.card--link { display: flex; flex-direction: column; }
.card--link .card-text { flex: 1 1 auto; }

/* -------------------- Credentials strip (home) --------------------
   A quiet row of the facts that answer "is this person qualified?". Dividers
   come from hairline rules, never from gold dashes. */
.cred-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: calc(var(--space-lg) + var(--space-3xs)) calc(var(--space-lg) + var(--space-xs));
  margin-top: 52px;
  padding-top: calc(var(--space-lg) + var(--space-xs));
  border-top: 1px solid var(--hairline);
}

.cred { display: grid; gap: 7px; align-content: start; }

.cred-label {
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-700);
}

.cred-value {
  font-family: var(--font-serif);
  font-size: 1.12rem;
  line-height: 1.25;
  color: var(--navy-ink);
}

.cred-note {
  font-size: var(--fs-2xs);
  line-height: 1.5;
  color: var(--navy-muted);
}

/* --------------------------- CTA band --------------------------- */
.cta-band {
  padding-block: clamp(48px, 5.5vw, 76px);
  background: var(--navy-ink-deep);
  color: rgba(253, 251, 248, .82);
}

.cta-band-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xl) 48px;
}

.cta-band-copy { max-width: 58ch; }

.cta-band-title {
  font-size: clamp(1.55rem, 2.4vw, 2.1rem);
  line-height: 1.15;
  color: var(--paper);
}

.cta-band-text { margin-top: var(--space-sm); font-size: var(--fs-md); line-height: 1.62; }

.cta-band-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px var(--space-2xl); }

/* ------------------- Panels (who it is for, notes) ------------------- */
.panel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(var(--space-xl), 3vw, var(--space-3xl));
  align-items: start;
}

.panel {
  padding: calc(var(--space-lg) + var(--space-xs));
  border-radius: var(--radius-card);
  background: var(--card-white);
  box-shadow: var(--shadow-card);
}

.panel-title {
  font-size: 1.24rem;
  line-height: 1.25;
  color: var(--navy-ink);
  margin-bottom: var(--space-sm);
}

.panel p { max-width: var(--measure-narrow); }

.panel p + p { margin-top: var(--space-md); }

.panel-list { display: grid; gap: var(--space-sm); }

.panel-list li {
  display: flex;
  gap: var(--space-xs);
  align-items: flex-start;
  font-size: var(--fs-sm);
  line-height: 1.58;
  color: var(--navy-body);
}

.panel-list .check-icon { margin-top: var(--space-3xs); }

/* --------------------------- Inline opt-in --------------------------- */
.optin {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(var(--space-2xl), 4vw, 56px);
  align-items: center;
  margin-top: 56px;
  padding: clamp(var(--space-2xl), 3.4vw, 44px);
  border-radius: var(--radius-card);
  background: var(--paper-warm);
  box-shadow: var(--shadow-card);
}

.optin-label {
  margin: 0 0 var(--space-xs);
  font-family: var(--font-sans);
  font-size: var(--fs-3xs);
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-700);
}

.optin-title {
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  line-height: 1.18;
  color: var(--navy-ink);
}

.optin-line {
  margin-top: var(--space-sm);
  font-size: var(--fs-sm);
  line-height: 1.62;
  color: var(--navy-body);
}

.optin-note {
  margin-top: var(--space-sm);
  font-size: var(--fs-2xs);
  line-height: 1.55;
  color: var(--navy-muted);
}

.optin-form-col { min-width: 0; }

.optin-form .btn-submit { width: 100%; }

.optin-error {
  margin-top: var(--space-md);
  padding: var(--space-sm) 18px;
  border-radius: var(--radius-inset);
  background: var(--card-white);
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--navy-ink);
}

.optin-thanks {
  padding: 30px 32px;
  border-radius: var(--radius-card);
  background: var(--card-white);
  box-shadow: var(--shadow-card);
}

.optin-thanks-title {
  font-size: var(--fs-lg);
  color: var(--navy-ink);
}

.optin-thanks-text { margin: var(--space-xs) 0 var(--space-lg); font-size: var(--fs-sm); line-height: 1.6; }

/* The portrait in the hero video-call frame and in the About frame. The frame
   keeps its 4:3 and 5:6 shapes; the photograph is cropped to fill them, biased
   upward so faces stay in frame whatever the viewport does. */
.vc-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 16%;
}

.about-portrait--photo {
  object-fit: cover;
  object-position: 50% 14%;
}

/* ------------------- Hours and details lists ------------------- */
.hours {
  display: grid;
  gap: var(--space-xs);
  margin-top: 6px;
}

.hours-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs) var(--space-md);
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--hairline);
}
.hours-row:last-child { border-bottom: 0; padding-bottom: 0; }

.hours-day { font-size: var(--fs-sm); font-weight: 500; color: var(--navy-ink); }
.hours-time { font-size: .98rem; color: var(--navy-body); }

/* --------------------------- Articles --------------------------- */
.article-meta {
  margin-top: calc(var(--space-lg) + var(--space-3xs));
  font-size: var(--fs-2xs);
  letter-spacing: .02em;
  color: var(--navy-muted);
}

/* Long-form article and section copy. It was 74ch, which is 762px and about 94
   characters at this size: the widest line the brief measured on /about/ short
   of the honesty panel. --measure brings it inside the ceiling. */
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 20px; }

.prose h2 {
  font-size: clamp(1.4rem, 2vw, 1.75rem);
  line-height: 1.2;
  color: var(--navy-ink-deep);
  margin-top: 52px;
}

.prose h3 {
  font-size: 1.18rem;
  line-height: 1.3;
  color: var(--navy-ink);
  margin-top: 38px;
}

.prose p { font-size: 1.04rem; line-height: 1.72; color: var(--navy-body); }
.prose ul, .prose ol { display: grid; gap: var(--space-xs); padding-left: var(--space-lg); }
.prose ul { list-style: none; padding-left: 0; }
.prose ul li { display: flex; gap: var(--space-xs); align-items: flex-start; }
.prose ul li::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin-top: .62em;
  border-radius: 50%;
  background: var(--gold-500);
}
.prose ol { list-style: decimal; }
.prose ol li { padding-left: var(--space-3xs); }
.prose li { font-size: 1.04rem; line-height: 1.68; color: var(--navy-body); }
.prose a { color: var(--navy-ink); text-decoration: underline; text-underline-offset: 4px; }
.prose a:hover { color: var(--navy-ink-deep); }

/* A quote has to read as a graphic device, not as one more paragraph in a
   slightly different cream. On a --paper section the old flat --paper-warm fill
   was nearly the background colour, so the block had nothing to hold the eye:
   it now carries the shadow, radius and weight of a .panel, and a Playfair
   quote mark set large behind the first line. The gold accent border this
   rule used to carry on its left edge is gone (US-3 prohibition 6: a
   side-tab accent border is the single most recognisable AI-UI tell, and
   /about/'s M3 statement needed this rule not to add a second one).
   The mark is 64px because the type scale stops at 2rem and nothing in it
   reaches display size; the -64px overhang below is the same kind of one-off. */
.pull-quote {
  position: relative;
  isolation: isolate;      /* keeps the z-index -1 quote mark above this fill */
  margin: 44px 0;
  padding: 30px calc(var(--space-lg) + var(--space-xs));
  border-radius: var(--radius-card);
  background: var(--paper-warm);
  box-shadow: var(--shadow-card);
}

/* Behind the copy, not over it: inside the isolated stacking context above, a
   z-index of -1 paints over the card fill and under the text.
   The size is 150px rather than the 64px the redesign asked for, because a
   Playfair quote glyph draws its ink in the top fifth of the em box: at 64px
   the mark comes out about 20px tall and reads as a smudge above the corner
   instead of as a graphic device. 150px draws it at roughly the height of a
   line of the quote, which is what "large" has to mean here. */
.pull-quote::before {
  content: "\201C";
  position: absolute;
  z-index: -1;
  top: -30px;
  left: var(--space-3xs);
  font-family: var(--font-serif);
  font-size: 150px;
  line-height: 1;
  color: var(--gold-300);
}

.pull-quote p {
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 1.9vw, 1.5rem);
  line-height: 1.35;
  color: var(--navy-ink);
}

.pull-quote cite {
  display: block;
  margin-top: var(--space-sm);
  font-family: var(--font-sans);
  font-size: var(--fs-2xs);
  font-style: normal;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--navy-muted);
}

/* Out of the text column and into the gutter. From 1280px only: that is where
   --gutter (5vw) is itself 64px wide, so above it the pull lands on empty
   space. Below it the quote would reach into the neighbouring column, and the
   narrower the viewport the further off the left edge of the page it would go. */
@media (min-width: 1280px) {
  .pull-quote { margin-left: -64px; }
}

.author-box {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  align-items: center;
  margin-top: 56px;
  padding: var(--space-2xl) 32px;
  border-radius: var(--radius-card);
  background: var(--card-white);
  box-shadow: var(--shadow-card);
}

.author-photo {
  width: 84px;
  height: 84px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 3px solid var(--vc-frame);
  object-fit: cover;
  object-position: 50% 22%;
}

.author-body { flex: 1 1 260px; }
.author-name { font-family: var(--font-serif); font-size: 1.15rem; color: var(--navy-ink); }
.author-line { margin-top: 6px; font-size: .96rem; line-height: 1.6; color: var(--navy-body); }

.article-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl); }

/* A clearly labelled outbound link (the directory listings). */
.link-out {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-weight: 500;
  color: var(--navy-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.link-out-icon { flex: 0 0 auto; color: var(--gold-600); }

/* --------------------- FAQ groups (native details) --------------------- */
.faq-group + .faq-group { margin-top: 52px; }

.faq-group-title {
  font-size: clamp(1.25rem, 1.7vw, 1.5rem);
  color: var(--navy-ink-deep);
  margin-bottom: 20px;
}

/* ------------------------ Form states ------------------------ */
.form-status {
  margin-top: 20px;
  padding: var(--space-md) 20px;
  border-radius: var(--radius-inset);
  background: var(--card-white);
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--navy-ink);
}

.form-success {
  padding: calc(var(--space-lg) + var(--space-xs));
  border-radius: var(--radius-card);
  background: var(--card-white);
  box-shadow: var(--shadow-card);
}

.form-success-title { font-size: var(--fs-xl); color: var(--navy-ink); }
.form-success p { margin-top: var(--space-sm); font-size: var(--fs-sm); line-height: 1.65; color: var(--navy-body); }
.form-success .btn { margin-top: var(--space-xl); }

/* ------------------- Mobile call and booking bar -------------------
   Phones only. Two thumb-sized targets pinned to the bottom of the viewport,
   on every page except the two the buttons lead to. `body:has(.mobile-bar)`
   buys the page the room it needs, so the bar never sits on the last line of
   the footer. Browsers without :has() simply get the bar without the extra
   padding, which costs a little overlap and breaks nothing. */
.mobile-bar { display: none; }

@media (max-width: 640px) {
  .mobile-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    gap: 10px;
    padding: 10px var(--space-md) calc(10px + env(safe-area-inset-bottom));
    background: var(--paper);
    border-top: 1px solid var(--hairline);
    box-shadow: 0 -14px 30px -20px rgba(15, 29, 46, .5);
  }

  .mobile-bar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    flex: 1 1 0;
    min-height: 50px;
    padding: 0 var(--space-sm);
    border-radius: var(--radius-pill);
    background: var(--paper-warm);
    color: var(--navy-ink);
    font-size: .94rem;
    font-weight: 500;
    text-decoration: none;
  }

  /* Ground only: shape (--radius-pill above), the halo and the hover motion
     come from the shared .btn class this element also carries. */
  /* Gold ground, so it flips the halo ink for the same reason .btn-gold does. */
  .mobile-bar-btn--gold {
    background-image: var(--grad-gold);
    background-color: var(--gold-500);
    color: var(--on-dark);
    --halo-ink: var(--navy-ink-deep);
  }

  .mobile-bar-icon { flex: 0 0 auto; }

  /* The bar overlaps the bottom of the page, so the footer gets that room back.
     The lead-magnet pill is hidden at this width (see the lead-magnet section),
     so this is the only fixed thing down here. */
  body:has(.mobile-bar) .site-footer { padding-bottom: 104px; }
}

/* js/main.js adds this while the mobile nav is open: the panel already
   carries its own single consultation link, so the bar's two actions step
   aside for the duration rather than compete with it. Restored on close. */
.mobile-bar.is-hidden { display: none; }

/* ---------------------------- Responsive ---------------------------- */
@media (max-width: 1100px) {
  .cred-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .optin,
  .panel-grid,
  .article-links { grid-template-columns: minmax(0, 1fr); }

  .optin { align-items: start; }
  .prose h2 { margin-top: 42px; }
}

@media (max-width: 640px) {
  .cred-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) 20px; }
  .panel, .optin-thanks, .pull-quote { padding: calc(var(--space-lg) + var(--space-3xs)) var(--space-xl); }
  .cta-band-actions { width: 100%; }
  .cta-band-actions .btn { width: 100%; }
  .author-box { padding: var(--space-xl); }
}

/* -------------------- Nine-item nav and active page --------------------
   The bar carries one more item than the one-page build did ("Resources"), so
   above the collapse point the label size and the item gap tighten slightly to
   keep the row clear of the logo and the CTA. js/main.js marks the current
   page with aria-current="page"; the same underline is styled here so the
   state survives with JavaScript switched off. */
.nav-link[aria-current="page"] {
  color: var(--navy-ink);
  font-weight: 600;
}
.nav-link[aria-current="page"]::after { opacity: 1; }

@media (min-width: 1241px) {
  :root {
    --fs-nav:   clamp(.8rem, .86vw, .92rem);
    --nav-gap:  clamp(12px, 1.2vw, 30px);
    --fs-brand: clamp(.98rem, 1.06vw, 1.35rem);
  }
}

.about-copy .about-more { margin-top: 30px; }

.article-links { margin-top: calc(var(--space-lg) + var(--space-xs)); }

/* The hero headline breaks after "simple," at every width, the way the design
   intends. With the em dash gone the two halves are short enough to share a
   line, so the break is set rather than left to the measure. */
.hero-headline .hl-part:last-child { display: block; }

/* A heading followed straight by body copy, in the About column. */
.about-copy .section-title + p { margin-top: 20px; }

/* Visual QA fixes (final pass) */
/* The dialog heading is focused only so a screen reader starts at it; it is
   not a control, so the gold ring around the words reads as a stray box. */
.lead-title:focus-visible { outline: none; }
/* Bold lead-ins in flex list items must not shrink to one word per line. */
.prose ul li > strong { flex: 0 0 auto; }

/* On a phone that same fixed-width lead-in starves the sentence beside it.
   "A transactional email service" is about 245px of a 342px measure at 390px,
   which leaves the rest of the item roughly 70px, or a word or two a line.
   At the phone breakpoint these items go back to ordinary inline flow instead:
   the text follows the lead-in, wraps on the full measure, and hangs under it
   on the same 18px indent the bullet and gap give it above the breakpoint.
   Only list items that carry a lead-in change; every other prose list keeps
   the flex row it has at every width. */
@media (max-width: 640px) {
  .prose ul li:has(> strong) { display: block; position: relative; padding-left: 18px; }
  .prose ul li:has(> strong)::before { position: absolute; left: 0; top: .62em; margin-top: 0; }
}


/* ============================================================================
   24. LEAD MODAL REFINEMENT (2026-09-17)
   The approved above-the-fold composition (hero, header, process strip) is
   unchanged. This section only rebuilds the lead-capture modal per Lawrence's
   review and retires the floating pill (its markup is gone; the rules above
   are inert). Sits last so it wins the cascade over section 22.
   ========================================================================== */
:root {
  /* --brass (byte-identical to --gold-700), --brass-soft (declared, never
     used) and the three local radii have been folded into the canonical
     system and removed - see usages below, now on --gold-700 and
     --radius-media/--radius-inset. --brass-deep and --brass-press went the
     same way when the one-branded-system pass retired .btn-primary (the
     modal's submit/download buttons now use .btn-gold, the shared variant
     that already does this exact job elsewhere on the site). --text,
     --muted and --line stay: none of them is byte-identical to any
     canonical token (--text #2B3A52 vs --navy-body #33415B, --line #D8CFC0
     vs --hairline #E7DFD2), so reusing the canonical name here would be a
     real colour change, which this ticket does not allow. */
  --text:         #2B3A52;
  --muted:        #55627A;
  --line:         #D8CFC0;
}

.lead-modal {
  width: min(94vw, 880px);
  max-width: 880px;
  border-radius: var(--radius-media);
  background: #FBF7F0;
  color: var(--text);
  box-shadow: 0 20px 60px -20px var(--tint-ink-35);
}
.lead-modal::backdrop { background: rgba(16,24,36,.55); backdrop-filter: blur(6px); }
.lead-modal-inner {
  grid-template-columns: 36fr 64fr;
  gap: 48px;
  padding: 36px var(--space-3xl) var(--space-2xl);
  align-items: start;
}
.lead-close {
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--navy-ink);
}
.lead-close:hover { background: #EFE6D8; color: var(--navy-ink); }
.lead-close:focus-visible { outline: 2px solid var(--gold-700); outline-offset: 2px; }
.lead-preview { display: block; padding-top: var(--space-3xs); }
.lead-cover {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 24px 48px -24px var(--tint-ink-35);
  transform: rotate(-1.5deg);
}
.lead-eyebrow {
  margin: 0 0 var(--space-2xs);
  font-family: var(--font-sans);
  font-size: var(--fs-3xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.lead-title {
  max-width: 18ch;
  font-size: var(--fs-2xl);
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--navy-ink);
}
.lead-desc { max-width: 44ch; margin-top: 10px; font-size: var(--fs-sm); line-height: 1.5; color: var(--text); }
.lead-form { margin-top: 18px; }
.lead-form .field { margin: 0; }
.lead-form .field + .field { margin-top: var(--space-xs); }
.lead-form label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
}
.lead-form .req { color: var(--muted); font-weight: 400; }
.lead-form input[type="text"],
.lead-form input[type="email"] {
  width: 100%;
  min-height: 44px;
  padding: 0 var(--space-xs);
  font-size: var(--fs-sm);
  border: 1px solid #C9BFAE;
  border-radius: var(--radius-inset);
  background: var(--paper);
  color: var(--navy-ink);
  box-shadow: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.lead-form input[type="text"]:hover,
.lead-form input[type="email"]:hover { border-color: #B3A78F; }
.lead-form input[type="text"]:focus-visible,
.lead-form input[type="email"]:focus-visible { outline: none; border-color: var(--gold-700); box-shadow: 0 0 0 2px rgba(126,92,40,.35); }
.lead-form .field--check { margin-top: var(--space-sm); }
.lead-form .check { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; align-items: start; }
.lead-form .check input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--gold-700); }
.lead-form .check span { font-size: .8125rem; line-height: 1.4; color: var(--muted); }
.lead-submit { width: 240px; min-height: 52px; margin-top: 20px; }
.lead-error { margin-top: var(--space-xs); }
.lead-privacy { max-width: 52ch; margin-top: var(--space-xs); font-size: var(--fs-3xs); line-height: 1.4; color: var(--muted); }
.lead-dismiss {
  margin: var(--space-xs) 0 0;
  padding: var(--space-3xs) 0 var(--space-2xs);
  font-size: var(--fs-2xs);
  font-weight: 400;
  color: var(--muted);
  text-decoration: none;
}
.lead-dismiss:hover, .lead-dismiss:focus-visible { color: var(--navy-ink); text-decoration: underline; text-underline-offset: 4px; }
.lead-download { width: 240px; }
@media (max-width: 900px) {
  .lead-modal-inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); padding: var(--space-xl); }
  .lead-preview { display: none; }
  .lead-copy { display: block; }
  .lead-eyebrow, .lead-title, .lead-desc, .lead-form { grid-column: auto; grid-row: auto; }
  .lead-submit, .lead-download { width: 100%; }
}
@media (max-width: 640px) {
  .lead-modal { width: min(96vw, 880px); max-height: 94dvh; }
  .lead-modal-inner { padding: 20px; padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
}


/* ============================================================================
   25. APPROVED ABOVE-THE-FOLD (2026-09-17)
   The approved reference is ray-corbo-lmft-therapy-for-men-couples-nj-ny-06.png
   and it is photographic: a soft misty lake-sunrise behind the content, a
   warm-white video-call card holding Ray's session photo, and a monogram plus
   wordmark lockup in the header. The base rules above already carry DESIGN.md's
   type scale and its 22/26/42/48 hero rhythm, so this block only tunes what the
   reference shows differently. It replaces the earlier "supplied assets" block,
   which flattened the card into a dark-chrome raster and capped the headline.
   ========================================================================== */

/* Header ---------------------------------------------------------------
   The lockup carries the brand in the reference, so it stays an image and
   simply gains presence. The nine-item nav breakpoint had tightened the label
   size and the item gaps enough to make the whole bar read compressed. */
.brand-lockup { display: block; height: 68px; width: auto; }
.brand { gap: 0; padding-left: 10px; }
.brand--footer .brand-lockup { height: 64px; }
@media (max-width: 900px) { .brand-lockup { height: 46px; } }
@media (max-width: 480px) { .brand-lockup { height: 40px; } }

@media (min-width: 1241px) {
  :root {
    --fs-nav:   clamp(.86rem, .92vw, .98rem);
    --nav-gap:  clamp(16px, 1.5vw, 36px);
    --fs-brand: clamp(.98rem, 1.06vw, 1.35rem);
  }
}
/* The active marker is a short brass tick centred under the word, not a rule
   spanning the whole link box. */
.nav-link.is-active::after,
.nav-link[aria-current="page"]::after {
  left: 50%;
  right: auto;
  width: 72%;
  transform: translateX(-50%);
}

/* Hero sky -------------------------------------------------------------
   The photograph stays. The shipped raster reads harder and more saturated
   than the reference's mist, so it is desaturated and lifted, and the paper
   wash reaches further right so the headline, paragraph and all three trust
   chips sit on clean cream rather than on scenery. */
.hero-photo {
  background-image: url("../assets/hero-sky-1672.webp");
  background-position: center 62%;
  filter: saturate(.55) brightness(1.08);
}
@media (max-width: 900px) {
  .hero-photo { background-image: url("../assets/hero-sky-960.webp"); }
}
.hero-band::before {
  background-image: linear-gradient(98deg,
    rgba(253, 251, 248, .96) 0%,
    rgba(253, 251, 248, .90) 26%,
    rgba(253, 251, 248, .62) 46%,
    rgba(253, 251, 248, .22) 64%,
    rgba(253, 251, 248, 0) 78%);
}
/* The photograph supplies the ridge, so the CSS ridge would double it. */
.hero-band::after { content: none; }
.hero-band { background: #D7DEE2; }

/* Video-call card -----------------------------------------------------
   Ray's session photo, cropped out of the supplied asset's heavy slate window
   chrome into assets/ray-call.*, presented in the approved warm-white frame.
   CSS supplies the thin bezel and the three small dots. */
.vc-card--image {
  max-width: 560px;
  aspect-ratio: auto;
  padding: 30px 9px 9px;
  border: 1px solid var(--hairline);
  border-radius: 20px;
  background: var(--vc-frame);
  box-shadow: var(--shadow-media);
  overflow: hidden;
}
.vc-card--image picture { display: block; }
.vc-image { display: block; width: 100%; height: auto; border-radius: 11px; }
.vc-card--image .vc-dots { top: 11px; left: 15px; gap: 7px; }
.vc-card--image .vc-dot { width: 9px; height: 9px; }

.chip-icon { width: 25px; height: 25px; object-fit: contain; }
.step-icon { width: 26px; height: 26px; object-fit: contain; }

/* Media column -------------------------------------------------------
   The reference gives the card more presence than an even split allows, and
   sets it slightly right of and above the column centre. */
@media (min-width: 1250px) {
  .hero-grid { grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr); column-gap: 3.4%; }
  .hero-media { gap: 14px; }
  .vc-card--image { max-width: 560px; transform: translate(16px, -12px); }
}

/* Process panel ------------------------------------------------------
   It should read as the start of the next section rather than an overlay
   swallowing the hero: warm white instead of stark, a softer shadow, and
   pulled roughly 26px less far up. */
.process { margin-top: clamp(-124px, -6.4vw, -78px); }
.process-card {
  background: rgba(253, 251, 248, .95);
  box-shadow: 0 24px 60px -30px rgba(15, 29, 46, .28);
}
.step-sep { opacity: .34; }


/* ============================================================================
   26. BELOW-THE-FOLD INTERACTION (2026-09-17)
   The lower page already followed DESIGN.md's palette, type scale and radii.
   What it lacked was interaction, and two of those gaps were real defects:

     1. .card declared `transition: box-shadow, transform` (§ card, above) but
        no :hover rule existed anywhere to fire it, so the cards were inert.
     2. The "Read about ..." call to action is a <span>, styled to look exactly
        like a link, while only the <h3> anchor was clickable. The affordance
        the card advertised did not exist.

   Both are fixed by stretching the heading anchor over the whole card, which
   also gives the lift something honest to signal.
   ========================================================================== */

/* One card, one target -------------------------------------------------- */
.card--link { position: relative; }
.card--link .card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-card);
}

/* With the whole surface clickable, the keyboard ring belongs on the card
   rather than around the heading text alone. */
.card--link:focus-within {
  outline: 2px solid var(--gold-400);
  outline-offset: 3px;
}
.card--link .card-link:focus-visible { outline: none; }

/* The lift the transition was already waiting for ----------------------
   Hover-gated so a tap on a touch screen does not leave a card stuck in its
   hovered state. The existing rules already underline the title and slide the
   arrow; this adds the surface response. */
@media (hover: hover) and (pointer: fine) {
  .card--link:hover {
    transform: translateY(-3px);
    box-shadow: 0 30px 66px -28px rgba(15, 29, 46, .42);
  }
}
/* Pressed state reads as the card settling back toward the page. */
.card--link:active { transform: translateY(-1px); }

@media (prefers-reduced-motion: reduce) {
  .card--link { transition: box-shadow var(--dur) var(--ease); }
  .card--link:hover,
  .card--link:active { transform: none; }
}

/* ==========================================================================
   Who I help, editorial two column
   ==========================================================================
   Replaces a three card grid. The cards were the problem: three equal white
   rectangles on a near white ground, each carrying a heading, a paragraph, a
   meta line and a call to action, which flattened the section into a pricing
   table directly under an art directed hero.

   The structure here is 38/62. The left column argues, the right column is the
   three services as full width rows separated by gold hairlines rather than by
   containers. Proximity and the rules do the grouping, so nothing needs a box.

   The section sits on cream, and its only dark surface is the consultation
   band, so the page reads cream, then dark, then the white lead card, rather
   than one rounded white panel after another. */

/* Only the top is tightened. The process panel above ends on its own generous
   padding, and the two together left a gap wide enough to read as a mistake. */
.section--tight-top { padding-block-start: clamp(52px, 4.45vw, 64px); }

.who-grid {
  display: grid;
  grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
  gap: clamp(36px, 5.6vw, 84px);
  align-items: start;
}

/* -------------------- Left column: the argument -------------------- */

.who-intro { position: sticky; top: 104px; }

.who-title {
  margin: 0;
  font-size: clamp(2rem, 4.1vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -0.021em;
  color: var(--navy-ink-deep);
  text-wrap: balance;
}

.who-lede {
  margin-top: var(--space-lg);
  font-size: clamp(1rem, 1.05vw, 1.08rem);
  line-height: 1.66;
  color: var(--navy-body);
  max-width: 38ch;
}

/* One plate, cropped tall out of the hero landscape. The gradient is a fade to
   the cream the section sits on, so the image ends without an edge. */
.who-plate {
  margin: clamp(var(--space-2xl), 3vw, var(--space-3xl)) 0 0;
  position: relative;
  border-radius: var(--radius-media);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: 0 18px 40px -28px var(--tint-ink-55);
}

.who-plate img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
}

.who-plate::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(248, 243, 233, 0) 52%, rgba(248, 243, 233, .82) 100%);
}

/* -------------------- Right column: the service rows -------------------- */

.who-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule-gold);
}

.who-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  column-gap: clamp(18px, 2.4vw, calc(var(--space-lg) + var(--space-xs)));
  padding: clamp(calc(var(--space-lg) + var(--space-3xs)), 3vw, 38px) clamp(var(--space-sm), 1.6vw, var(--space-xl));
  border-bottom: 1px solid var(--rule-gold);
  transition: background-color var(--dur) var(--ease);
}

/* The index is an editorial mark, not a rank. Three services are alternatives,
   not steps, so it stays small, gold and out of the reading path. */
.who-row-index {
  font-family: var(--font-sans);
  font-size: var(--fs-3xs);
  font-weight: 500;
  letter-spacing: .18em;
  line-height: 1.9;
  color: var(--gold-700);
  font-variant-numeric: tabular-nums;
}

.who-row-title {
  margin: 0;
  font-size: clamp(1.3rem, 1.85vw, 1.72rem);
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--navy-ink-deep);
}

/* One link treatment for the whole section: no underline at rest, gold on
   hover, and the underline reserved for the moment the pointer is on the row. */
.who-row-link {
  text-decoration: none;
  color: inherit;
  transition: color var(--dur-fast) var(--ease);
}

.who-row-text {
  margin: var(--space-xs) 0 0;
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--navy-body);
  max-width: 54ch;
}

.who-row-meta {
  margin: var(--space-sm) 0 0;
  font-family: var(--font-sans);
  font-size: .86rem;
  letter-spacing: .04em;
  color: var(--navy-muted);
}

.who-row-go {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-top: 2px;
  border-radius: var(--radius-pill);
  color: var(--gold-700);
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.who-row-arrow { display: block; }

/* The whole row is the target. The anchor keeps the accessible name and the
   keyboard stop; the pseudo element only widens where a pointer may land. */
.who-row-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.who-row:focus-within {
  outline: 2px solid var(--gold-400);
  outline-offset: -2px;
  border-radius: 6px;
}

.who-row-link:focus-visible { outline: none; }

@media (hover: hover) and (pointer: fine) {
  .who-row:hover { background-color: rgba(255, 255, 255, .58); }
  .who-row:hover .who-row-link { color: var(--gold-700); }
  .who-row:hover .who-row-go { background-color: var(--gold-100); transform: translateX(4px); }
}

/* -------------------- The consultation band -------------------- */

.consult-band {
  margin-top: clamp(var(--space-3xl), 4.4vw, 68px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 3vw, var(--space-3xl));
  padding: clamp(var(--space-2xl), 3.2vw, 42px) clamp(calc(var(--space-lg) + var(--space-3xs)), 3.6vw, 52px);
  border-radius: var(--radius-card);
  background: var(--btn-navy-deep);
  color: var(--on-dark);
}

.consult-band-copy { max-width: 46ch; }

.consult-band-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.28rem, 1.8vw, 1.6rem);
  line-height: 1.25;
  color: var(--on-dark);
}

.consult-band-text {
  margin: var(--space-2xs) 0 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: rgba(255, 255, 255, .78);
}

.consult-band-btn { flex: 0 0 auto; }

/* -------------------- Narrow -------------------- */

@media (max-width: 900px) {
  .who-grid { grid-template-columns: 1fr; gap: clamp(30px, 6vw, 44px); }
  .who-intro { position: static; }
  .who-lede { max-width: 60ch; }
  .who-plate { aspect-ratio: 16 / 9; }
}

@media (max-width: 560px) {
  .who-row {
    grid-template-columns: auto minmax(0, 1fr);
    padding-inline: var(--space-3xs);
    row-gap: var(--space-sm);
  }
  .who-row-go { grid-column: 2; justify-self: start; margin-top: var(--space-3xs); }
  .consult-band { padding-inline: var(--space-xl); }
  .consult-band-btn { width: 100%; justify-content: center; }
}


/* ============================================================================
   27. HOME MOBILE HEIGHT BUDGET (SQ-24)
   / measured 8434px at 390 (9.99 screens), over DESIGN.md rule 6's 8-screen
   cap. Copy stays verbatim; the levers are the same two the page already
   uses elsewhere - trimmed rhythm and a mobile-only heading step-down -
   applied here for the first time, plus the two composition fixes the
   ticket calls out by name. Every selector below is either .page-home-
   scoped or, where noted, a class .hero/.process/.step/.who-* already use
   only on this page (confirmed against every other page's markup), so
   nothing here reaches into shared kit furniture.
   ========================================================================== */

/* --------------------- A. Hero band's empty sky below the call frame ---------------------
   .hero's bottom padding is sized to give the floating .process-card
   headroom to overlap into on wide screens. At 390 the hero column has
   already stacked to one (media below copy, see the 1249px query above),
   so the same 140px floor left ~68px of plain sky gradient below the call
   card and its handwritten note, on top of the card's own overlap. This
   only tightens the floor; the overlap amount, the sky gradient and the
   card itself are untouched. */
@media (max-width: 640px) {
  .hero { padding-bottom: clamp(88px, 11vw, 140px); }
}

/* --------------------- B. Step icon beside a wrapped title ---------------------
   The process card's three steps go to one column at 900px and down, and
   the badge (54px + 16px gap at 640px and below) leaves .step-body a 204px,
   26-character-per-line column: narrow enough that a two-word title like
   "Begin therapy" wraps, and since .step-head centred the icon and title,
   the icon then floats beside the wrapped second line rather than the
   first. Stacking the badge above the body instead of beside it removes
   the indent altogether, so .step-desc gets the card's full width and
   .step-title gets enough room to keep to one line. */
@media (max-width: 900px) {
  .step { flex-direction: column; gap: var(--space-sm); }
  .step-body { width: 100%; }
  .step-head { align-items: flex-start; }
}

/* --------------------- Section rhythm and heading step-down --------------------- */
@media (max-width: 760px) {
  .page-home .section { padding-block: clamp(28px, 7vw, 40px); }
  .page-home .section-title,
  .page-home .who-title { font-size: 1.55rem; line-height: 1.2; }
  .page-home .section-lede { line-height: 1.5; }

  /* Who I help: the three .who-row entries repeat a narrow-index / wide-body
     grid, each padded for a desktop reading rhythm the phone does not need. */
  .who-row { padding-block: var(--space-md); }
  .who-plate { margin-top: var(--space-lg); aspect-ratio: 2 / 1; }
  .consult-band { margin-top: var(--space-2xl); padding: var(--space-xl); }
  .lead-card { margin-top: var(--space-2xl); padding: var(--space-xl); }
}