/* =============================================================================
   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-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);

  /* 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 */
  --grad-gold: linear-gradient(180deg, #C0A469 0%, #A8874A 55%, #8C6A31 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-card:  0 24px 60px -24px rgba(15, 29, 46, .35);
  --shadow-media: 0 30px 60px -20px rgba(15, 29, 46, .45);
  --shadow-cta:   0 10px 26px rgba(140, 106, 49, .28);

  /* 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);
}


/* =========================== 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: 1.02rem;
  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: .9rem;
  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); }

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

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

.section-label {
  margin: 0 0 18px;
  font-family: var(--font-sans);
  font-size: .82rem;
  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;
}

.section-lede {
  margin-top: 20px;
  font-size: clamp(1.02rem, 1.2vw, 1.16rem);
  line-height: 1.62;
  color: var(--navy-body);
  max-width: 62ch;
}

.section-foot {
  margin-top: 40px;
  font-size: 1.02rem;
  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: 72px; margin-bottom: 28px; }

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

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

.card-grid {
  display: grid;
  gap: 24px;
  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: 34px;
  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: 12px;
}

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

.check-list { display: grid; gap: 16px; align-content: start; }

.check-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--navy-body);
}

.check-icon { flex: 0 0 auto; color: var(--gold-700); margin-top: 4px; }


/* ======================== 04. BUTTONS AND LINKS ======================== */
.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: .95rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              filter var(--dur) var(--ease),
              transform var(--dur-fast) var(--ease);
}

/* 1. Gold CTA pill */
.btn-gold {
  background-image: var(--grad-gold);
  background-color: var(--gold-500);
  color: var(--on-dark);
  box-shadow: var(--shadow-cta);
}
.btn-gold:hover { filter: brightness(.94); transform: translateY(-1px); }
.btn-gold:active { transform: translateY(0); }

/* 2. Navy pill, with the signature gold hairline halo (header only) */
.btn-navy {
  background-color: var(--btn-navy);
  color: var(--on-dark);
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--gold-300);
}
.btn-navy:hover { background-color: var(--btn-navy-deep); }

.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(24px, 2.4vw, 34px);
  font-size: 1.05rem;
}

.btn-submit { width: 100%; min-height: 56px; font-size: 1rem; }

.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);
  /* Only transform and box-shadow animate, both off the main thread. */
  transition:
    box-shadow var(--dur) var(--ease),
    transform 220ms cubic-bezier(.23, 1, .32, 1);
}

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

/* js/main.js adds .header-hidden while the reader scrolls down; it comes off
   again on the first upward movement. */
.site-header.header-hidden { transform: translateY(-100%); }

/* Reduced motion keeps the bar exactly where it is: hiding it is pure
   movement, and there is no comprehension cost to leaving it pinned. */
@media (prefers-reduced-motion: reduce) {
  .site-header { transition: box-shadow var(--dur) var(--ease); }
  .site-header.header-hidden { transform: none; }
}

.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);
}

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

.hero-headline {
  margin-top: 22px;
  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: 12px;
}

.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 rgba(15, 29, 46, .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: rgba(22, 40, 60, .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: 14px;
}

.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;
  color: var(--navy-ink);
  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); }


/* =============================== 12. ABOUT =============================== */
.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: 60ch; }
.about-copy p + p { margin-top: 18px; }
.about-copy .section-lede { margin-bottom: 24px; }

.facts {
  display: grid;
  gap: 18px;
  margin-top: 40px;
  padding-top: 34px;
  border-top: 1px solid var(--hairline);
}

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

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

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


/* ========================= 14. COUPLES THERAPY ========================= */
.topic-list { display: grid; gap: 4px; }

.topic {
  padding: 26px 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: 8px;
}

.topic-text {
  font-size: 1rem;
  line-height: 1.62;
  color: var(--navy-body);
  max-width: 62ch;
}

.split-note { margin-top: 22px; }


/* ============================= 15. SERVICES ============================= */
.service-grid { margin-top: 4px; }

.card--service { display: flex; flex-direction: column; }

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

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


/* =============================== 16. FEES =============================== */
.fees-main {
  display: grid;
  gap: 20px;
  align-content: start;
}

.fees-layout {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
}

.fee-table {
  width: 100%;
  padding: 0;
  border-collapse: collapse;
  background: var(--card-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

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

.fee-table thead th {
  padding: 26px 30px 14px;
  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 30px;
  border-top: 1px solid var(--hairline);
  text-align: left;
  font-weight: 400;
}

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

.fee-table tbody td {
  font-size: 1rem;
  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);
}

.fees-notes {
  display: grid;
  gap: 20px;
}

.note-card {
  padding: 30px 34px;
  border-radius: var(--radius-card);
  background: var(--card-white);
  box-shadow: var(--shadow-card);
}

.note-card--callout {
  background: var(--gold-100);
  box-shadow: var(--shadow-card);
}

.note-title {
  font-size: 1.16rem;
  line-height: 1.3;
  color: var(--navy-ink);
  margin-bottom: 12px;
}

.note-card p { font-size: 1rem; line-height: 1.62; }
.note-card p + p { margin-top: 14px; }

.note-fine { font-size: .94rem !important; color: var(--navy-muted); }

.note-card--callout .btn { margin-top: 22px; }


/* =============================== 17. FAQs =============================== */
.faq-list {
  margin-top: 8px;
  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: 24px;
  padding: 24px 34px;
  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 34px 26px;
  max-width: 68ch;
}
.faq-answer p { font-size: 1rem; line-height: 1.7; color: var(--navy-body); }


/* ========================= 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-lede {
  margin-top: 20px;
  max-width: 46ch;
  font-size: clamp(1.02rem, 1.2vw, 1.14rem);
  line-height: 1.62;
  color: var(--navy-body);
}

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

.next-steps { display: grid; gap: 16px; }

.next-step {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--navy-body);
  max-width: 46ch;
}

.next-num {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-top: 1px;
  border-radius: var(--radius-pill);
  background: var(--gold-100);
  font-family: var(--font-serif);
  font-size: .95rem;
  line-height: 1;
  color: var(--navy-ink);
}

.contact-details {
  display: grid;
  gap: 20px;
  margin-top: 44px;
  padding-top: 34px;
  border-top: 1px solid var(--hairline);
}

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

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

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

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

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

.form-title {
  font-size: 1.3rem;
  line-height: 1.25;
  color: var(--navy-ink);
  margin-bottom: 26px;
}

.field { margin-bottom: 20px; }

.field label,
.field legend {
  display: block;
  margin-bottom: 8px;
  font-size: .82rem;
  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: 14px 20px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  background: #FFF;
  font-family: var(--font-sans);
  font-size: 1rem;
  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; }

.field input:focus,
.field textarea:focus {
  border-color: var(--gold-400);
  box-shadow: 0 0 0 3px rgba(191, 160, 98, .22);
  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: .95rem;
  font-weight: 500;
  color: var(--navy-ink);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}
.choice:hover { background: #F1EADC; }

.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: 4px; }

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

.field-hint {
  margin-top: 10px;
  font-size: .88rem;
  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: .92rem;
  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: .9rem;
  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, 72px) 40px;
  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(28px, 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: .95rem; color: var(--paper); }
.footer-email a { color: var(--paper); text-underline-offset: 4px; }

.footer-credit { color: rgba(253, 251, 248, .66); }

.footer-tagline {
  margin-top: 22px;
  font-size: .78rem;
  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: .95rem;
  line-height: 1.5;
  color: rgba(253, 251, 248, .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: 16px; }

.footer-licence { font-size: .95rem; color: var(--paper); }

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

.footer-privacy {
  font-size: .88rem;
  line-height: 1.6;
  color: rgba(253, 251, 248, .66);
  max-width: 62ch;
}

.footer-copy { font-size: .88rem; color: rgba(253, 251, 248, .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;
}

@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;
  }

  .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;
    inset: var(--header-h) 0 auto 0;
    z-index: 55;
    display: none;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    /* vh first: iOS below 16.4 has no dvh, and a missing max-height would let
       the panel run under the bottom of the screen. dvh then corrects it while
       the browser chrome is showing. */
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    padding: 20px var(--gutter) 34px;
    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; }

  .nav-cta {
    display: inline-flex;
    margin-top: 24px;
    box-shadow: none;
  }
}

/* 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,
  .fees-layout,
  .contact-grid { grid-template-columns: minmax(0, 1fr); }

  .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 16px;
    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: .95rem;
    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: 28px 24px 24px; }
  .card,
  .note-card { padding: 26px 24px; }

  .faq-summary { padding: 20px 24px; }
  .faq-answer { padding: 0 24px 22px; }


  .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 22px 0 18px;
  border-radius: var(--radius-pill);
  background-color: var(--btn-navy);
  color: var(--on-dark);
  font-family: var(--font-sans);
  font-size: .9rem;
  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 rgba(15, 29, 46, .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: 26px 40px;
  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: .78rem;
  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: 12px;
  font-size: 1rem;
  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(24px, 3vw, 36px);
  padding: 38px 40px 28px;
}

/* `[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: 8px;
  width: 100%;
  max-width: 168px;
  aspect-ratio: 8.5 / 11;
  padding: 18px 16px;
  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: 4px;
  background: var(--gold-400);
}

.lead-preview-title {
  display: block;
  font-family: var(--font-serif);
  font-size: .82rem;
  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: .74rem; }

.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: 12px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--navy-body);
}

.lead-form { margin-top: 24px; }

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

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

.lead-error {
  margin-top: 16px;
  padding: 14px 18px;
  border-left: 3px solid var(--rec-red);
  border-radius: var(--radius-inset);
  background: rgba(220, 72, 62, .08);
  font-size: .92rem;
  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: 14px;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--navy-muted);
}

.lead-dismiss {
  margin-top: 16px;
  padding: 2px 0;
  border: 0;
  background: none;
  font-family: var(--font-sans);
  font-size: .92rem;
  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: 24px; }

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

.lead-thanks-text {
  margin-top: 12px;
  font-size: 1rem;
  line-height: 1.62;
  color: var(--navy-body);
}

.lead-download {
  width: 100%;
  min-height: 56px;
  margin-top: 20px;
  font-size: 1rem;
}

/* 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: 12px;
    padding: 30px 26px 22px;
  }

  .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: 16px; }
  .field { margin-bottom: 16px; }
  .lead-privacy { margin-top: 12px; }
  .lead-dismiss { margin-top: 12px; justify-self: start; }

  .lead-card { padding: 28px 26px; }
  .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: 16px;
    padding: 26px 20px calc(16px + env(safe-area-inset-bottom));
  }
  .lead-preview-card { max-width: 78px; padding: 6px 8px 9px; gap: 4px; }
  .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: 12px; }

  .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, breadcrumbs, 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(40px, 4.6vw, 66px);
  background-color: var(--paper);
  background-image:
    radial-gradient(120% 100% at 84% 4%, rgba(254, 245, 221, .85) 0%, rgba(254, 245, 221, 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: 16px; }

.page-hero-lede {
  margin-top: 22px;
  font-size: clamp(1.04rem, 1.2vw, 1.2rem);
  line-height: 1.6;
  color: var(--navy-body);
  max-width: 62ch;
}

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

.hero-note {
  margin-top: 26px;
  font-family: var(--font-script);
  font-size: var(--fs-script);
  line-height: 1.15;
  color: var(--navy-ink);
  transform: rotate(-2deg);
  transform-origin: left center;
  display: inline-block;
}

/* --------------------------- Breadcrumbs --------------------------- */
.breadcrumbs {
  margin-bottom: 26px;
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--navy-muted);
}

.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.breadcrumbs li { display: flex; align-items: center; gap: 8px; }

/* The separator hangs off the end of the item before it rather than the start
   of the next one, so on a phone the "/" never lands alone at the head of a
   wrapped line. */
.breadcrumbs li:not(:last-child)::after { content: "/"; color: var(--gold-600); }

.breadcrumbs a {
  text-decoration: none;
  color: var(--navy-body);
  transition: color var(--dur) var(--ease);
}
.breadcrumbs a:hover { color: var(--navy-ink); text-decoration: underline; text-underline-offset: 4px; }

.breadcrumbs [aria-current="page"] { color: var(--navy-ink); }

/* --------------------------- 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: 8px;
  margin-top: 18px;
  font-size: .95rem;
  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: 26px 34px;
  margin-top: 52px;
  padding-top: 34px;
  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: .84rem;
  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: 28px 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: 14px; font-size: 1.02rem; line-height: 1.62; }

.cta-band-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }

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

.panel {
  padding: 34px;
  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: 14px;
}

.panel p + p { margin-top: 16px; }

.panel-list { display: grid; gap: 14px; }

.panel-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 1rem;
  line-height: 1.58;
  color: var(--navy-body);
}

.panel-list .check-icon { margin-top: 4px; }

/* The honesty block: who this practice is not the right fit for. */
.honesty { margin-top: 26px; }
.honesty .panel-title { color: var(--navy-ink-deep); }

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

.optin-label {
  margin: 0 0 12px;
  font-family: var(--font-sans);
  font-size: .78rem;
  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: 14px;
  font-size: 1rem;
  line-height: 1.62;
  color: var(--navy-body);
}

.optin-note {
  margin-top: 14px;
  font-size: .88rem;
  line-height: 1.55;
  color: var(--navy-muted);
}

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

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

.optin-error {
  margin-top: 16px;
  padding: 14px 18px;
  border-radius: var(--radius-inset);
  background: var(--card-white);
  font-size: .92rem;
  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: 1.3rem;
  color: var(--navy-ink);
}

.optin-thanks-text { margin: 12px 0 22px; font-size: 1rem; line-height: 1.6; }

/* --------------------------- Service area --------------------------- */
.service-area-figure { margin: 0; }

.service-area-note {
  margin-top: 16px;
  font-size: .88rem;
  line-height: 1.55;
  color: var(--navy-muted);
}

.service-area-map { width: 100%; max-width: 420px; height: auto; }
.service-area-map .area-shape { fill: var(--gold-100); stroke: var(--navy-ink); stroke-width: 1.4; }
.service-area-map .area-shape--alt { fill: var(--paper); }
.service-area-map .area-dot { fill: var(--gold-600); }
.service-area-map .area-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  fill: var(--navy-ink);
}

/* 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: 12px;
  margin-top: 6px;
}

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

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

/* --------------------------- Articles --------------------------- */
.article-meta {
  margin-top: 26px;
  font-size: .88rem;
  letter-spacing: .02em;
  color: var(--navy-muted);
}

.prose { max-width: 74ch; }
.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: 12px; padding-left: 22px; }
.prose ul { list-style: none; padding-left: 0; }
.prose ul li { display: flex; gap: 12px; 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: 4px; }
.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); }

.pull-quote {
  margin: 44px 0;
  padding: 30px 34px;
  border-radius: var(--radius-card);
  background: var(--paper-warm);
}

.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: 14px;
  font-family: var(--font-sans);
  font-size: .84rem;
  font-style: normal;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--navy-muted);
}

.author-box {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: center;
  margin-top: 56px;
  padding: 28px 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: 24px; }

/* A clearly labelled outbound link (the directory listings). */
.link-out {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  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: 16px 20px;
  border-radius: var(--radius-inset);
  background: var(--card-white);
  font-size: .95rem;
  line-height: 1.6;
  color: var(--navy-ink);
}

.form-success {
  padding: 34px;
  border-radius: var(--radius-card);
  background: var(--card-white);
  box-shadow: var(--shadow-card);
}

.form-success-title { font-size: 1.35rem; color: var(--navy-ink); }
.form-success p { margin-top: 14px; font-size: 1rem; line-height: 1.65; color: var(--navy-body); }
.form-success .btn { margin-top: 24px; }

.booking-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: 26px; }

/* ------------------- 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 16px 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 14px;
    border-radius: var(--radius-pill);
    background: var(--paper-warm);
    color: var(--navy-ink);
    font-size: .94rem;
    font-weight: 500;
    text-decoration: none;
  }

  .mobile-bar-btn--gold {
    background-image: var(--grad-gold);
    color: var(--on-dark);
    box-shadow: var(--shadow-cta);
  }

  .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; }
}

/* ---------------------------- 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: 22px 20px; }
  .panel, .optin-thanks, .pull-quote { padding: 26px 24px; }
  .cta-band-actions { width: 100%; }
  .cta-band-actions .btn { width: 100%; }
  .author-box { padding: 24px; }
}

/* -------------------- 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: 34px; }

/* 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:        #7E5C28;   /* 5.6:1 with white text */
  --brass-deep:   #6B4E22;
  --brass-press:  #5B421C;
  --brass-soft:   #9A7A3E;
  --text:         #2B3A52;
  --muted:        #55627A;
  --line:         #D8CFC0;
  --r-card:       12px;
  --r-btn:        10px;
  --r-input:      6px;
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--brass);
  color: #fff;
  border: 1px solid var(--brass-deep);
  border-radius: var(--r-btn);
  box-shadow: none;
  font-size: 1rem;
  font-weight: 500;
}
.btn-primary:hover { background: var(--brass-deep); filter: none; transform: none; }
.btn-primary:active { background: var(--brass-press); }
.btn-primary:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.btn-primary .btn-arrow { width: 16px; height: 16px; }

.lead-modal {
  width: min(94vw, 880px);
  max-width: 880px;
  border-radius: var(--r-card);
  background: #FBF7F0;
  color: var(--text);
  box-shadow: 0 20px 60px -20px rgba(22,40,60,.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 40px 28px;
  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(--brass); outline-offset: 2px; }
.lead-preview { display: block; padding-top: 4px; }
.lead-cover {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 24px 48px -24px rgba(22,40,60,.35);
  transform: rotate(-1.5deg);
}
.lead-eyebrow {
  margin: 0 0 8px;
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.lead-title {
  max-width: 18ch;
  font-size: 1.75rem;
  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: 1rem; line-height: 1.5; color: var(--text); }
.lead-form { margin-top: 18px; }
.lead-form .field { margin: 0; }
.lead-form .field + .field { margin-top: 12px; }
.lead-form label {
  display: block;
  margin-bottom: 6px;
  font-size: .875rem;
  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 12px;
  font-size: 1rem;
  border: 1px solid #C9BFAE;
  border-radius: var(--r-input);
  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(--brass); box-shadow: 0 0 0 2px rgba(126,92,40,.35); }
.lead-form .field--check { margin-top: 14px; }
.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(--brass); }
.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: 12px; }
.lead-privacy { max-width: 52ch; margin-top: 12px; font-size: .75rem; line-height: 1.4; color: var(--muted); }
.lead-dismiss {
  margin: 12px 0 0;
  padding: 4px 0 8px;
  font-size: .875rem;
  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: 16px; padding: 24px; }
  .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; }

/* Handwritten note ---------------------------------------------------- */
.script-note--image {
  font-size: 0;
  line-height: 0;
  transform: none;
  width: clamp(142px, 14.6vw, 196px);
  flex-basis: clamp(142px, 14.6vw, 196px);
  opacity: .94;
}
.script-note--image img { display: block; width: 100%; height: auto; }

.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: 22px;
  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(28px, 3vw, 40px) 0 0;
  position: relative;
  border-radius: var(--radius-media);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: 0 18px 40px -28px rgba(22, 40, 60, .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, 34px);
  padding: clamp(26px, 3vw, 38px) clamp(14px, 1.6vw, 24px);
  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: .78rem;
  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: 12px 0 0;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--navy-body);
  max-width: 54ch;
}

.who-row-meta {
  margin: 14px 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(40px, 4.4vw, 68px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 40px);
  padding: clamp(28px, 3.2vw, 42px) clamp(26px, 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: 8px 0 0;
  font-size: 1rem;
  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: 4px;
    row-gap: 14px;
  }
  .who-row-go { grid-column: 2; justify-self: start; margin-top: 4px; }
  .consult-band { padding-inline: 24px; }
  .consult-band-btn { width: 100%; justify-content: center; }
}