/* Render deployment overrides for provider headshots.
   The supplied clinician portraits are square source images. Preserve that 1:1
   composition everywhere they appear and prevent legacy crop/zoom rules from
   cutting off the top of a clinician's head. */

.therapist-photo,
.v3-quick-photo,
.provider-modal-photo {
  aspect-ratio: 1 / 1 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.therapist-photo img,
.v3-quick-photo img,
.provider-modal-photo img,
[data-provider-modal-card] img,
article[data-provider-card] .therapist-photo img,
article[data-quick-provider] .v3-quick-photo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;
  transform: none !important;
}

.therapist-card:hover .therapist-photo img,
.v3-quick-card:hover .v3-quick-photo img {
  transform: none !important;
}

/* --------------------------------------------------------------------------
   Hero-to-quote transition

   The source hero video contains a small Gemini mark in its lower-right corner.
   Rather than placing an obvious patch over the video, the transition now uses
   an intentional inverse wave that rises on the right and covers that area.
   The same mist tone continues into the Lisa Olivera quote section so the wave
   reads as one composed section boundary rather than a watermark mask.
   -------------------------------------------------------------------------- */

:root {
  --haven-quote-mist: #eef0ed;
}

.v4-video-hero {
  position: relative !important;
  overflow: hidden !important;
}

/* Remove the old localized watermark patch; the new full-width wave does the job. */
.hero-watermark-cover {
  display: none !important;
}

/* Smooth inverse wave: low on the left, noticeably higher on the right. */
.v4-video-hero::after {
  content: "" !important;
  position: absolute !important;
  z-index: 4 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -1px !important;
  width: 100% !important;
  height: clamp(200px, 15vw, 275px) !important;
  border-radius: 0 !important;
  transform: none !important;
  pointer-events: none !important;
  background-color: transparent !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 240' preserveAspectRatio='none'%3E%3Cpath fill='%23f1efe9' d='M0 150 C180 108 380 92 560 108 C760 126 900 178 1100 186 C1300 194 1520 150 1680 104 C1790 72 1870 40 1920 16 L1920 240 L0 240 Z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center bottom !important;
  background-size: 100% 100% !important;
}

/* Turn the existing quote area into the center of the wave composition. */
.v6-quote-section,
.v3-quote-section.v6-quote-section {
  position: relative !important;
  z-index: 1 !important;
  overflow: hidden !important;
  margin-top: -2px !important;
  padding-top: clamp(4.7rem, 7vw, 7.4rem) !important;
  padding-bottom: clamp(7.8rem, 10vw, 10.5rem) !important;
  background: var(--haven-quote-mist) !important;
}

/* Clean return wave back into the cream/paper content below. */
.v6-quote-section::after,
.v3-quote-section.v6-quote-section::after {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -1px !important;
  width: 100% !important;
  height: clamp(85px, 8vw, 135px) !important;
  pointer-events: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 150' preserveAspectRatio='none'%3E%3Cpath fill='%23fffdf9' d='M0 60 C300 26 520 24 790 61 C1080 100 1315 126 1548 99 C1707 80 1818 58 1920 43 L1920 150 L0 150 Z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center bottom !important;
  background-size: 100% 100% !important;
}

.v6-quote-section > *,
.v3-quote-section.v6-quote-section > * {
  position: relative;
  z-index: 2;
}

/* Quote typography and layout inspired by the reference, while retaining Haven's voice. */
.v6-quote-section .v3-quote-inner,
.v3-quote-section.v6-quote-section .v3-quote-inner {
  grid-template-columns: 54px minmax(0, 1.2fr) minmax(285px, .48fr) !important;
  gap: clamp(1rem, 2.8vw, 3rem) !important;
  align-items: center !important;
}

.v6-quote-section .v3-quote-mark {
  align-self: start !important;
  margin-top: .1rem !important;
  color: #91aa9d !important;
  font-size: clamp(3.8rem, 5vw, 5.4rem) !important;
  line-height: .72 !important;
  opacity: .95 !important;
}

.v6-quote-section blockquote {
  margin: 0 !important;
  max-width: 880px !important;
}

.v6-quote-section blockquote p {
  margin: 0 0 1rem !important;
  color: #203a35 !important;
  font-family: var(--font-display) !important;
  font-size: clamp(1.9rem, 2.55vw, 3rem) !important;
  font-weight: 400 !important;
  line-height: 1.12 !important;
  letter-spacing: -.025em !important;
  text-wrap: balance !important;
}

.v6-quote-section blockquote cite {
  color: #61736c !important;
  font-size: .79rem !important;
  font-style: normal !important;
  font-weight: 500 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
}

/* Keep the doctoral-level message, but make it feel integrated rather than like a second hero. */
.v6-quote-section .v6-quote-facts {
  align-self: center !important;
  gap: .75rem !important;
  padding: clamp(1.25rem, 2vw, 1.7rem) !important;
  border: 1px solid rgba(73, 101, 91, .13) !important;
  border-radius: 1.35rem !important;
  background: rgba(255, 253, 249, .72) !important;
  box-shadow: 0 18px 42px rgba(32, 58, 53, .055) !important;
  backdrop-filter: blur(5px) !important;
}

.v6-quote-section .v3-quote-side {
  color: #95614f !important;
  font-size: .76rem !important;
  line-height: 1.6 !important;
}

.v6-quote-section .v6-quote-kicker {
  color: #61736c !important;
  font-size: .9rem !important;
  line-height: 1.7 !important;
}

/* Remove decorative stems from this band so the wave and quote stay visually clean. */
.v6-quote-section .v4-botanical,
.v6-quote-section .v4-lighthouse-watermark {
  display: none !important;
}

@media (max-width: 1100px) {
  .v4-video-hero::after {
    height: clamp(185px, 19vw, 245px) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 220' preserveAspectRatio='none'%3E%3Cpath fill='%23f1efe9' d='M0 138 C130 100 280 88 420 102 C560 116 660 158 790 164 C930 170 1040 132 1110 96 C1156 72 1186 46 1200 28 L1200 220 L0 220 Z'/%3E%3C/svg%3E") !important;
  }

  .v6-quote-section .v3-quote-inner,
  .v3-quote-section.v6-quote-section .v3-quote-inner {
    grid-template-columns: 44px minmax(0, 1fr) !important;
  }

  .v6-quote-section .v6-quote-facts {
    grid-column: 2 !important;
    max-width: 620px !important;
  }
}

@media (max-width: 760px) {
  .v4-video-hero::after {
    height: 172px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 760 170' preserveAspectRatio='none'%3E%3Cpath fill='%23f1efe9' d='M0 108 C90 82 190 74 280 84 C370 94 430 122 520 126 C610 130 680 104 715 78 C737 60 752 42 760 30 L760 170 L0 170 Z'/%3E%3C/svg%3E") !important;
  }

  .v6-quote-section,
  .v3-quote-section.v6-quote-section {
    padding-top: 3.9rem !important;
    padding-bottom: 7rem !important;
  }

  .v6-quote-section .v3-quote-inner,
  .v3-quote-section.v6-quote-section .v3-quote-inner {
    grid-template-columns: 1fr !important;
    gap: 1.2rem !important;
  }

  .v6-quote-section .v3-quote-mark {
    display: block !important;
    height: 2.5rem !important;
    font-size: 4rem !important;
  }

  .v6-quote-section .v6-quote-facts {
    grid-column: auto !important;
    max-width: none !important;
  }
}
/* Remove the obsolete translucent top-right watermark mask from the hero.
   The inverse wave now handles the Gemini-logo cover at the lower right. */
.v4-video-hero::before {
  content: none !important;
  display: none !important;
  background: none !important;
  opacity: 0 !important;
}
/* Quote-only wave section: remove the doctoral-level care card from this band
   and keep the Lisa Olivera quote balanced at full, half, tablet, and mobile widths. */

.v6-quote-section .v6-quote-facts,
.v3-quote-section.v6-quote-section .v6-quote-facts {
  display: none !important;
}

.v6-quote-section,
.v3-quote-section.v6-quote-section {
  padding-top: clamp(5rem, 7.5vw, 7.5rem) !important;
  padding-bottom: clamp(6.8rem, 9vw, 9.5rem) !important;
}

.v6-quote-section .v3-quote-inner,
.v3-quote-section.v6-quote-section .v3-quote-inner {
  position: relative !important;
  display: block !important;
  width: min(100%, 1180px) !important;
  margin-inline: auto !important;
  padding-inline: clamp(4rem, 8vw, 8.5rem) !important;
}

.v6-quote-section .v3-quote-mark,
.v3-quote-section.v6-quote-section .v3-quote-mark {
  position: absolute !important;
  top: .1rem !important;
  left: clamp(1rem, 3.8vw, 3.5rem) !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  color: #91aa9d !important;
  font-size: clamp(3.9rem, 5vw, 5.5rem) !important;
  line-height: .7 !important;
}

.v6-quote-section blockquote,
.v3-quote-section.v6-quote-section blockquote {
  width: 100% !important;
  max-width: 920px !important;
  margin: 0 auto !important;
}

.v6-quote-section blockquote p,
.v3-quote-section.v6-quote-section blockquote p {
  margin: 0 0 1.15rem !important;
  font-size: clamp(2rem, 3vw, 3.35rem) !important;
  line-height: 1.12 !important;
  letter-spacing: -.028em !important;
  text-wrap: balance !important;
}

.v6-quote-section blockquote cite,
.v3-quote-section.v6-quote-section blockquote cite {
  display: block !important;
  font-size: clamp(.76rem, .7rem + .12vw, .86rem) !important;
  line-height: 1.5 !important;
}

/* Half-screen desktop / narrower laptop: let the quote use more of the width
   while preserving comfortable gutters and natural line breaks. */
@media (max-width: 1100px) {
  .v6-quote-section,
  .v3-quote-section.v6-quote-section {
    padding-top: clamp(4.7rem, 7vw, 6.2rem) !important;
    padding-bottom: clamp(6.2rem, 9vw, 8rem) !important;
  }

  .v6-quote-section .v3-quote-inner,
  .v3-quote-section.v6-quote-section .v3-quote-inner {
    width: min(100%, 900px) !important;
    padding-inline: clamp(3.5rem, 7vw, 6rem) !important;
  }

  .v6-quote-section .v3-quote-mark,
  .v3-quote-section.v6-quote-section .v3-quote-mark {
    left: clamp(.9rem, 2.8vw, 2rem) !important;
  }

  .v6-quote-section blockquote p,
  .v3-quote-section.v6-quote-section blockquote p {
    font-size: clamp(1.9rem, 3.6vw, 2.85rem) !important;
  }
}

@media (max-width: 760px) {
  .v6-quote-section,
  .v3-quote-section.v6-quote-section {
    padding-top: 4.1rem !important;
    padding-bottom: 6.6rem !important;
  }

  .v6-quote-section .v3-quote-inner,
  .v3-quote-section.v6-quote-section .v3-quote-inner {
    width: 100% !important;
    padding-inline: clamp(1.35rem, 6vw, 2.4rem) !important;
  }

  .v6-quote-section .v3-quote-mark,
  .v3-quote-section.v6-quote-section .v3-quote-mark {
    position: static !important;
    display: block !important;
    margin: 0 0 .65rem !important;
    font-size: 3.7rem !important;
    line-height: .65 !important;
  }

  .v6-quote-section blockquote,
  .v3-quote-section.v6-quote-section blockquote {
    max-width: 640px !important;
    margin-inline: 0 !important;
  }

  .v6-quote-section blockquote p,
  .v3-quote-section.v6-quote-section blockquote p {
    font-size: clamp(1.65rem, 7vw, 2.35rem) !important;
    line-height: 1.14 !important;
    text-wrap: pretty !important;
  }
}

@media (max-width: 480px) {
  .v6-quote-section,
  .v3-quote-section.v6-quote-section {
    padding-top: 3.6rem !important;
    padding-bottom: 6rem !important;
  }

  .v6-quote-section .v3-quote-inner,
  .v3-quote-section.v6-quote-section .v3-quote-inner {
    padding-inline: 1.2rem !important;
  }

  .v6-quote-section blockquote p,
  .v3-quote-section.v6-quote-section blockquote p {
    font-size: clamp(1.55rem, 7.8vw, 2rem) !important;
    line-height: 1.16 !important;
  }
}

/* Global story image cleanup - START */
.v3-story-line {
  display: none !important;
}
/* Global story image cleanup - END */

/* Haven welcome statement centering - START */
/* HP-06: the shorter welcome statement no longer needs a hero-scale band. */
.v6-quote-section,
.v3-quote-section.v6-quote-section {
  display: grid !important;
  place-items: center !important;
  min-height: 0 !important;
  padding: clamp(3rem, 4.5vw, 4.5rem) 0 clamp(5.5rem, 7.5vw, 7.5rem) !important;
}

.v6-quote-section .v3-quote-inner,
.v3-quote-section.v6-quote-section .v3-quote-inner {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: min(calc(100% - clamp(2.5rem, 8vw, 8rem)), 1040px) !important;
  max-width: 1040px !important;
  min-height: 0 !important;
  margin: auto !important;
  padding: 0 !important;
  text-align: center !important;
}

.v6-quote-section .v3-quote-mark,
.v3-quote-section.v6-quote-section .v3-quote-mark {
  display: none !important;
}

.v6-quote-section blockquote,
.v3-quote-section.v6-quote-section blockquote {
  width: 100% !important;
  max-width: 980px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

.v6-quote-section blockquote p,
.v3-quote-section.v6-quote-section blockquote p {
  margin: 0 auto clamp(1.4rem, 2.2vw, 2rem) !important;
  max-width: 22ch !important;
  color: #203a35 !important;
  font-family: var(--font-display) !important;
  font-size: clamp(2.45rem, 4.2vw, 4.65rem) !important;
  font-weight: 400 !important;
  line-height: 1.08 !important;
  letter-spacing: -.035em !important;
  text-align: center !important;
  text-wrap: balance !important;
}

.v6-quote-section blockquote cite,
.v3-quote-section.v6-quote-section blockquote cite {
  display: block !important;
  margin: 0 auto !important;
  color: #61736c !important;
  font-family: var(--font-body) !important;
  font-size: clamp(.82rem, .75rem + .25vw, 1.02rem) !important;
  font-style: normal !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  letter-spacing: .035em !important;
  text-align: center !important;
}

@media (max-width: 760px) {
  .v6-quote-section,
  .v3-quote-section.v6-quote-section {
    min-height: 0 !important;
    padding: 3.2rem 0 5.6rem !important;
  }

  .v6-quote-section .v3-quote-inner,
  .v3-quote-section.v6-quote-section .v3-quote-inner {
    width: calc(100% - (var(--mobile-gutter) * 2)) !important;
    max-width: 38rem !important;
    margin: auto !important;
    padding: 0 !important;
  }

  .v6-quote-section blockquote,
  .v3-quote-section.v6-quote-section blockquote {
    max-width: 34rem !important;
    margin: auto !important;
  }

  .v6-quote-section blockquote p,
  .v3-quote-section.v6-quote-section blockquote p {
    max-width: 18ch !important;
    margin-inline: auto !important;
    margin-bottom: 1.45rem !important;
    font-size: clamp(2.05rem, 9.2vw, 3.15rem) !important;
    line-height: 1.1 !important;
    text-align: center !important;
  }

  .v6-quote-section blockquote cite,
  .v3-quote-section.v6-quote-section blockquote cite {
    max-width: 28ch !important;
    margin-inline: auto !important;
    font-size: .86rem !important;
    text-align: center !important;
  }
}
/* Haven welcome statement centering - END */

/* ==========================================================================
   Homepage header / hero integration

   At the top of the homepage the sticky header sits transparently over the
   coastal hero video, and the hero rises to occupy the strip the header bar
   used to hold — so the footage reads as full-bleed. Scrolling past the
   threshold hands the header back to its existing solid treatment via the
   same `is-scrolled` class the site already uses. Interior routes never get
   the transparent state.

   --hero-header-offset is the header's real rendered height (its min-height
   plus the 1px bottom border): 75px above 760px, 67px at or below it.
   -------------------------------------------------------------------------- */

:root { --hero-header-offset: 75px; }

/* The hero slides up behind the sticky header, and its copy gets that space back. */
body.is-home .v4-video-hero { margin-top: calc(var(--hero-header-offset) * -1); }
body.is-home .v4-video-hero .v3-hero-inner {
  padding-top: calc(clamp(5rem, 10vw, 8.5rem) + var(--hero-header-offset));
}

/* Smooth the handoff between the transparent and solid states. */
.site-header {
  transition: min-height 220ms ease, box-shadow 240ms ease, border-color 240ms ease,
              background 260ms ease, backdrop-filter 260ms ease;
}

/* Transparent while the page is at the top — the homepage over its video,
   and the two scene pages over their photograph. Their backdrop layers are
   fixed to the viewport, so they already reach behind the bar; all that was
   covering them was the header painting its own ground over the top. */
body.is-home .site-header:not(.is-scrolled),
body.has-scene .site-header:not(.is-scrolled) {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

/* A soft top-down scrim carries the logo and navigation over moving footage.
   It fades to nothing well before the header's lower edge, so it reads as
   atmosphere rather than a cream bar. */
body.is-home .site-header::before,
body.has-scene .site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease;
  background: linear-gradient(to bottom, rgba(250, 247, 240, .5), rgba(250, 247, 240, .2) 58%, rgba(250, 247, 240, 0));
}
body.is-home .site-header:not(.is-scrolled)::before,
body.has-scene .site-header:not(.is-scrolled)::before { opacity: 1; }
body.is-home .site-header .header-inner,
body.has-scene .site-header .header-inner { position: relative; z-index: 1; }

/* Restrained legibility support for the links sitting over the video. */
body.is-home .site-header:not(.is-scrolled) .primary-nav a,
body.has-scene .site-header:not(.is-scrolled) .primary-nav a,
body.is-home .site-header:not(.is-scrolled) .nav-portal-link,
body.has-scene .site-header:not(.is-scrolled) .nav-portal-link {
  text-shadow: 0 1px 2px rgba(250, 247, 240, .9);
}
body.is-home .site-header:not(.is-scrolled) .nav-portal-link,
body.has-scene .site-header:not(.is-scrolled) .nav-portal-link {
  border-color: rgba(23, 51, 47, .32);
  background: rgba(255, 253, 249, .5);
}

/* An open mobile menu needs a solid header behind it, even at the top. */
body.is-home .site-header:not(.is-scrolled):has([aria-expanded="true"]),
body.has-scene .site-header:not(.is-scrolled):has([aria-expanded="true"]) {
  background: rgba(250, 247, 240, .97);
  border-bottom-color: var(--line);
  backdrop-filter: blur(16px) saturate(130%);
}
body.is-home .site-header:not(.is-scrolled):has([aria-expanded="true"])::before,
body.has-scene .site-header:not(.is-scrolled):has([aria-expanded="true"])::before { opacity: 0; }

/* ==========================================================================
   Minimum type size. The breakpoint sweep found ~125 elements rendering
   between 8.5px and 11px — match pills, field labels, state-code badges, and
   several small paragraphs. Nothing on the site should fall below 12px, so
   the smallest steps are raised to that floor rather than each element being
   patched individually.
   ========================================================================== */
:root {
  --min-type: 12px;
}


/* FI-02 / TP-10: the resident's sliding-scale table and the payment note. */
.fee-resident { margin-top: clamp(2rem, 4vw, 3rem); }
.fee-resident h3 { margin: 0 0 .5rem; font-family: var(--font-display); font-size: var(--step-2); font-weight: 500; }
.fee-resident > p { max-width: 68ch; margin: 0 0 1.1rem; }
.fee-code { font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.fee-payment-note { margin-top: 1.2rem; font-weight: 600; }

/* ==========================================================================
   Homepage team row. The clinician cards move out of the matcher's right-hand
   column and become a single full-width line beneath the matcher copy. Every
   clinician is present at all times; selections reorder rather than filter, so
   the row doubles as a standing introduction to the team.
   ========================================================================== */
.v3-matcher-section .v3-matcher-layout {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.8rem, 3.5vw, 2.8rem);
}

/* Heading and form sit side by side so the row below gets the full width.
   Named areas rather than implicit rows: the form is much taller than the
   eyebrow it starts beside, and an implicit placement let it overflow its
   track and collide with the team row's header. */
@media (min-width: 981px) {
  .v3-matcher-section .v3-matcher-copy {
    /* It was sticky (top: 100px) to hold position beside a tall scrolling
       results column. Now that the team row sits below rather than beside it,
       sticky just pushes the copy 100px down into that row. */
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .8fr);
    grid-template-areas:
      "eyebrow form"
      "title   form"
      "lede    form";
    /* Every row must be `auto`. In an auto-height grid a `1fr` row has no
       leftover space to take, so it collapses toward min-content and the
       prose spills out of the container and over the section below. */
    grid-template-rows: auto auto auto;
    column-gap: clamp(2rem, 5vw, 4.5rem);
    row-gap: .6rem;
    align-items: start;
  }
  .v3-matcher-section .v3-matcher-copy > .eyebrow { grid-area: eyebrow; margin-bottom: .4rem; }
  .v3-matcher-section .v3-matcher-copy > h2 { grid-area: title; }
  .v3-matcher-section .v3-matcher-copy > p:not(.eyebrow):not(.v3-privacy-note) { grid-area: lede; margin: .6rem 0 0; }
  .v3-matcher-section .v3-matcher-copy > .v3-quick-form { grid-area: form; align-self: center; margin: 0; }
}

/* A carousel rather than seven compressed columns: four cards fully visible
   with a half-card peek as the scroll cue, everyone else one swipe away.
   Nobody sits behind a disclosure — the peek and the arrows are the
   affordance, and the greyed cards keep their reasons at the end of the row. */
.v3-quick-results.is-team-row {
  --team-gap: .8rem;
  display: flex;
  flex-wrap: nowrap;
  gap: var(--team-gap);
  align-items: stretch;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 2px;
  padding-bottom: .4rem;
  scrollbar-width: none;
}
.v3-quick-results.is-team-row::-webkit-scrollbar { display: none; }
.v3-quick-results.is-team-row .v3-quick-card {
  flex: 0 0 calc((100% - var(--team-gap) * 6) / 7);
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
}
@media (prefers-reduced-motion: reduce) {
  .v3-quick-results.is-team-row { scroll-behavior: auto !important; }
}

/* Arrow controls: 44px targets, disabled at the ends, hidden where touch
   swiping is the native gesture. */
.team-row-controls { display: inline-flex; align-items: center; gap: .55rem; }
.team-row-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid rgba(23, 51, 47, .22); border-radius: 50%;
  background: rgba(255, 253, 249, .92); color: #17332f; cursor: pointer;
  transition: opacity 160ms ease, transform 160ms ease;
}
.team-row-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.team-row-arrow:hover:not(:disabled) { transform: translateY(-1px); }
.team-row-arrow:disabled { opacity: .35; cursor: default; }
@media (max-width: 760px) { .team-row-arrow { display: none; } }

/* The refinements block spans the form grid, matching the full matcher. */
.v3-quick-form .matcher-refine { grid-column: 1 / -1; }
.v3-quick-form .matcher-refine-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; padding: 0 1rem 1rem; }
@media (max-width: 560px) { .v3-quick-form .matcher-refine-fields { grid-template-columns: 1fr; } }

/* The stretched pseudo-element makes the whole card the target while keeping
   one tab stop and no nested interactive elements. */
.v3-quick-open {
  margin-top: auto;
  padding: 0;
  border: 0;
  background: none;
  color: #8f5442;
  font-size: 0.75rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
/* The card photo paints at z-index 1, so the stretched target has to sit
   above it or the top half of the card stops being clickable. */
.v3-quick-open::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.v3-quick-card:focus-within { outline: 3px solid var(--haven-clay, #8f5442); outline-offset: 3px; }
.v3-quick-open:focus-visible { outline: none; }

.v3-quick-body { display: flex; flex-direction: column; flex: 1; gap: .1rem; padding: .8rem .85rem .95rem; }
.v3-quick-results.is-team-row .v3-quick-card h3 { font-size: 1.12rem; line-height: 1.15; }
.v3-quick-results.is-team-row .v3-quick-card p { margin: 0 0 .5rem; font-size: 0.82rem; line-height: 1.35; }
.v3-quick-results.is-team-row .v3-quick-photo { aspect-ratio: 1 / 1; }
.v3-quick-results.is-team-row .v3-quick-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

/* Ruled-out clinicians stay visible and readable, and move to the end. The
   pill carries the meaning so the state is never signalled by colour alone. */
.v3-quick-results.is-team-row .v3-quick-card.is-muted { order: 2; opacity: .62; filter: grayscale(.55); }
.v3-quick-results.is-team-row .v3-quick-card.is-muted:hover,
.v3-quick-results.is-team-row .v3-quick-card.is-muted:focus-within { opacity: 1; filter: grayscale(0); }
.v3-quick-results.is-team-row .v3-quick-card.is-strong { order: 0; }
.v3-quick-results.is-team-row .v3-quick-card.is-possible { order: 1; }

@media (max-width: 760px) {
  .v3-quick-results.is-team-row { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; }
  .v3-quick-results.is-team-row .v3-quick-card { flex: 0 0 min(52vw, 210px); scroll-snap-align: start; }
}

/* Screen-reader-only utility. Referenced by the team row's card control, whose
   visible label is abbreviated but which needs the clinician's name announced. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The directory card is a single target too, for the same reason. */
.therapist-card { position: relative; }
.therapist-card .therapist-content button[data-provider-open]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
}
.therapist-card:focus-within { outline: 3px solid var(--haven-clay, #8f5442); outline-offset: 3px; }
.therapist-card .therapist-content button[data-provider-open]:focus-visible { outline: none; }

/* AC-05: the route heading receives focus after navigation. It is a
   programmatic target, not a control, so it should not show a focus ring. */
#app h1[tabindex="-1"]:focus { outline: none; }
#app h1[tabindex="-1"]:focus-visible { outline: 3px solid var(--haven-clay, #8f5442); outline-offset: 4px; }

/* LG-16: policy review date, secondary to the page title but clearly visible. */
.policy-reviewed {
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}


/* ==========================================================================
   AC-08 — the matcher panel. It previously put light text (cream display
   italic, peach eyebrow) and dark text (heading, body, labels) on one
   mid-tone sage, and no background value satisfies both: lightening leaves
   the cream italic at 2.0:1 against a required 3.0, darkening drops the body
   copy below 4.5. The panel is now deep sage with a single light text set,
   which keeps the two-tone display heading the brand actually uses.
   Every value below was measured against #42574e.
   ========================================================================== */
.v3-matcher-section {
  background: linear-gradient(120deg, rgba(255,255,255,.06), transparent 42%), #42574e !important;
  color: #fffdf9 !important;
}
.v3-matcher-section .v3-matcher-copy h2 { color: #fffdf9 !important; }          /* 7.64 */
/* The italic has to stay visibly distinct from the white first line or the
   two-tone display heading flattens into one colour. Cream separates from
   white by only 1.07; sage separates by 1.90 and still clears the panel. */
.v3-matcher-section .v3-matcher-copy h2 em { color: #a8c0b3 !important; }        /* 4.01 on panel */
.v3-matcher-section .eyebrow-light { color: #efd7c7 !important; }                /* 5.62 */
.v3-matcher-section .v3-matcher-copy > p:not(.eyebrow) { color: #e6ece7 !important; }  /* 6.48 */
.v3-matcher-section .v5-field-label { color: #f2f6f2 !important; }               /* 7.11 */
.v3-matcher-section .v3-privacy-note { color: #c6d3cb !important; }              /* 5.02 */
.v3-matcher-section .matcher-clear-link { color: #dfe8e2 !important; }           /* 6.20 */
.v3-matcher-section .matcher-clear-link:hover { color: #ffffff !important; }
.v3-matcher-section .v3-quick-results-head { color: #e6ece7 !important; }        /* 6.48 */
.v3-matcher-section .v3-quick-results-head a { color: #f2f6f2 !important; }      /* 7.11 */

/* ==========================================================================
   AC-09 — comfortable 44x44 interaction targets. WCAG 2.2 AA requires 24x24
   (already met); this item asks for the 44px comfort target. Applied to
   standalone controls only. Links inside a sentence are deliberately excluded:
   padding them would break the line spacing of the prose they belong to.
   ========================================================================== */
.primary-nav a,
.nav-portal-link,
.text-link,
.matcher-clear-link,
.v3-quick-open,
.v3-quick-results-head a,
.footer-legal a,
.footer-portal a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.filter-chip,
.directory-filter-row button,
.journal-filter-row button {
  min-height: 44px;
}

/* The footer navigation lists are already 40px; lift them the last 4px so the
   whole footer meets one rule rather than two. */
.site-footer .footer-list a,
.site-footer .footer-contact-column address a {
  min-height: 44px;
}

/* min-height is inert on an inline box, so any anchor acting as a control has
   to become inline-flex before the 44px target applies. This is why the topic
   chips and contact links still measured 32px and 15px. */
.filter-chip,
.directory-filter-row button,
.journal-filter-row button,
.topic-chip-row .filter-chip,
.contact-card a[href^="tel:"],
.contact-card a[href^="mailto:"],
.contact-card .contact-form-link {
  display: inline-flex !important;
  align-items: center;
  min-height: 44px;
}

.therapist-content button[data-provider-open],
.v3-quick-card button[data-provider-open] {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* The age-group field labels its control with a plain span rather than the
   .v5-field-label class, so it kept the dark colour after the panel inverted
   and measured 1.81:1. */
.v3-matcher-section .v3-quick-form label > span { color: #f2f6f2 !important; }

/* NA2-15: the DBT campaign page brings its own header; the global site header
   previously stacked above it, so the route showed two headers. */
body.is-campaign .site-header { display: none !important; }

/* A stronger hover lift on the carousel cards, with a deeper shadow so the
   rise reads as emphasis rather than drift. Keyboard focus gets the same
   treatment, and the row's padding leaves headroom so the lift never clips
   against the scroll container. */
.v3-quick-results.is-team-row { padding-top: 12px; }
.v3-quick-results.is-team-row .v3-quick-card:hover,
.v3-quick-results.is-team-row .v3-quick-card:focus-within {
  transform: translateY(-12px);
  box-shadow: 0 30px 60px rgba(25, 50, 45, .18);
}
@media (prefers-reduced-motion: reduce) {
  .v3-quick-results.is-team-row .v3-quick-card:hover,
  .v3-quick-results.is-team-row .v3-quick-card:focus-within { transform: none; }
}

/* ==========================================================================
   Homepage restructure (owner-approved sequence, Aug 2026).
   ========================================================================== */

/* Why Haven: four cards, tinted so the section carries colour, one thought
   per card. */
.why-haven-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
@media (max-width: 1100px) { .why-haven-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 640px) { .why-haven-grid { grid-template-columns: minmax(0, 1fr) !important; } }
.why-card--mist { background: rgba(112, 135, 123, .10) !important; border-color: rgba(83, 107, 96, .22) !important; }
.why-card--mist .why-card-mark { border-color: rgba(83, 107, 96, .45); color: #536b60; background: #fffdf9; }
.why-card--sand { background: rgba(181, 102, 77, .08) !important; border-color: rgba(143, 84, 66, .2) !important; }
.why-card--sand .why-card-mark { border-color: rgba(143, 84, 66, .42); color: #8f5442; background: #fffdf9; }
.why-card h3 { font-size: 1.3rem !important; }

/* Services: one confident row of four image cards; the modal quick views
   keep working through data-service-open. */
.home-services-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 1100px) { .home-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .home-services-grid { grid-template-columns: minmax(0, 1fr); } }
.home-service-card {
  display: flex; flex-direction: column; padding: 0; text-align: left;
  border: 1px solid rgba(57, 84, 79, .14); border-radius: 1.4rem; overflow: hidden;
  background: var(--paper); box-shadow: 0 16px 40px rgba(25, 50, 45, .08);
  cursor: pointer; transition: transform 200ms ease, box-shadow 200ms ease;
}
.home-service-card:hover, .home-service-card:focus-visible { transform: translateY(-8px); box-shadow: 0 26px 54px rgba(25, 50, 45, .15); }
.home-service-card figure { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; }
.home-service-card figure img { width: 100%; height: 100%; object-fit: cover; }
.home-service-card.is-featured { border-color: rgba(143, 84, 66, .4); }
.home-service-body { display: flex; flex-direction: column; gap: .4rem; flex: 1; padding: 1.1rem 1.2rem 1.25rem; }
.home-service-body h3 { margin: 0; color: var(--haven-ink); font-family: var(--font-display); font-size: 1.32rem; font-weight: 500; line-height: 1.1; }
.home-service-body p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.55; }
.home-service-link { margin-top: auto; padding-top: .5rem; color: #8f5442; font-size: .8rem; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .home-service-card, .home-service-card:hover { transform: none; transition: none; } }

/* The single fees line inside What happens next. */
.steps-fees-note { margin: 1.6rem 0 0; text-align: center; color: #4a5a54; font-size: .92rem; }
.steps-fees-note a { color: #8f5442; font-weight: 700; }

/* The welcome statement, de-quoted, closing the page. */
.v6-welcome-copy p {
  margin: 0; color: var(--haven-ink); font-family: var(--font-display);
  font-weight: 400; font-size: clamp(2.4rem, 1.6rem + 2.6vw, 4.1rem);
  line-height: 1.12; text-wrap: balance;
}
.v6-welcome-sign {
  margin: 1.7rem 0 0; color: #5a6663; font-size: .8rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
}

/* Carousel drag affordance. */
.v3-quick-results.is-team-row { cursor: grab; }
.v3-quick-results.is-team-row.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
.v3-quick-results.is-team-row.is-dragging .v3-quick-card { pointer-events: none; }
.v3-quick-results.is-team-row img { -webkit-user-drag: none; }

/* FAQ affordance: the plus rotates into a close mark when open (AC2-15). */
.faq-question span[aria-hidden] { transition: transform 180ms ease; }
.faq-question[aria-expanded="true"] span[aria-hidden] { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .faq-question span[aria-hidden] { transition: none; } }

/* The footer's meaningless concentric circles stand down; the botanical
   corner sprig is the section's one ornament. */
.site-footer::before, .site-footer::after { display: none !important; }


/* VI2-18: consecutive paper sections stacked two full section paddings,
   leaving a dead viewport between the Why cards and the services heading. */
.why-haven.section { padding-bottom: clamp(2.2rem, 3.5vw, 3.2rem) !important; }
.home-services-section.section { padding-top: clamp(2.2rem, 3.5vw, 3.2rem) !important; }

/* ==========================================================================
   Stacked brand lockup header (owner request, Aug 17; layout matched to the
   practice's currently published site later the same day)

   The practice's actual stacked logo — emblem above the HAVEN / PSYCHOLOGY
   GROUP wordmark — sits large on the left; the landing-page links run
   larger and centered, wrapping onto a second row exactly like the
   published site's nav; the booking button holds the right edge.
   ========================================================================== */
.haven-logo-stacked {
  display: block;
  height: auto !important;
  max-height: none !important;
  object-fit: contain;
}

@media (min-width: 981px) {
  .site-header .header-inner {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    grid-template-areas: none;
    justify-content: stretch;
    align-items: center;
    column-gap: clamp(1rem, 2.4vw, 2.4rem);
    padding-top: .7rem;
    padding-bottom: .75rem;
    width: min(calc(100% - 2.6rem), 1500px);
  }
  .site-header .brand { justify-self: start; }
  .site-header .haven-logo-stacked { width: clamp(148px, 12.5vw, 184px) !important; transition: width 220ms ease; }
  .site-header.is-scrolled .haven-logo-stacked { width: 118px !important; }
  .site-header .primary-nav {
    /* Four links per row with an explicit break between them. Flex wrapping
       centers each row on its own, so the two rows sit balanced above and
       below one another rather than aligning to ragged column edges. */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    column-gap: clamp(1.2rem, 2.1vw, 2.2rem);
    /* !important because the shell sets `gap` as a shorthand with one, which
       was giving the rows 25px each — and they pay it twice: the row break is
       a zero-height flex item, so it takes a line of its own between them and
       there is a gutter above it and below it. Half the wanted separation is
       the figure to write here. Owner request: the two rows read as one block
       rather than two bands. */
    row-gap: .5rem !important;
    margin-inline: auto;
  }
  .nav-row-break { flex-basis: 100%; height: 0; margin: 0; }
  .site-header .primary-nav > a,
  .site-header .primary-nav .has-submenu > a { font-size: .97rem !important; }
  .site-header .header-cta { justify-self: end; display: inline-flex !important; }
}

/* The header's height tracks the logo (its tallest column), so the homepage
   hero offset derives from the same clamp: logo width × the lockup's
   358/409 aspect, plus the bar's vertical padding and border. */
@media (min-width: 981px) {
  :root { --hero-header-offset: calc(clamp(132px, 10.4vw, 158px) * 0.875 + 21px); }
}

/* --------------------------------------------------------------------------
   Therapy Services dropdown: opens on hover and keyboard focus, and the
   chevron button toggles it for touch and assistive tech. Each entry goes to
   the same standalone service page the services overview links to.
   -------------------------------------------------------------------------- */
.nav-item.has-submenu {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .05rem;
}
.submenu-toggle {
  display: inline-grid;
  place-items: center;
  width: 27px;
  height: 27px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.submenu-toggle:hover { background: rgba(112, 135, 123, .16); }
.submenu-toggle svg { transition: transform 180ms ease; }
.has-submenu.is-open .submenu-toggle svg,
.has-submenu:hover .submenu-toggle svg { transform: rotate(180deg); }

@media (min-width: 981px) {
  /* Invisible bridge under the trigger so the pointer can travel into the
     panel without the hover state collapsing. */
  .has-submenu::after {
    content: "";
    position: absolute;
    left: -8px;
    right: -8px;
    top: 100%;
    height: .9rem;
  }
  .nav-submenu {
    position: absolute;
    top: calc(100% + .75rem);
    left: 50%;
    transform: translate(-50%, 8px);
    min-width: 238px;
    padding: .5rem;
    background: rgba(255, 253, 249, .99);
    border: 1px solid rgba(23, 51, 47, .12);
    border-radius: .95rem;
    box-shadow: 0 24px 48px rgba(18, 42, 37, .16);
    opacity: 0;
    visibility: hidden;
    transition: opacity 170ms ease, transform 170ms ease, visibility 0s linear 170ms;
    z-index: 90;
  }
  .has-submenu:hover .nav-submenu,
  .has-submenu:focus-within .nav-submenu,
  .has-submenu.is-open .nav-submenu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition: opacity 170ms ease, transform 170ms ease, visibility 0s;
  }
  .nav-submenu a {
    display: block;
    padding: .62rem .8rem;
    border-radius: .6rem;
    font-size: .85rem !important;
    white-space: nowrap;
  }
  .nav-submenu a::after { display: none !important; }
  .nav-submenu a:hover { background: rgba(112, 135, 123, .13); }
}

@media (prefers-reduced-motion: reduce) {
  .nav-submenu, .submenu-toggle svg, .site-header .haven-logo-stacked { transition: none !important; }
}

/* Landing (campaign) header and footer pick up the same stacked lockup. */
.landing-header .haven-logo-stacked { width: 106px !important; }
.footer-logo-artwork.haven-logo-stacked { width: min(192px, 100%) !important; max-height: none !important; }

/* ==========================================================================
   Vertical rhythm tightening (owner request, Aug 17): the site carried too
   much negative space, especially at the top of interior landing pages.
   Section spacing steps down globally; heroes lose their deepest padding.
   ========================================================================== */
:root {
  --space-7: clamp(3.4rem, 2.3rem + 3.4vw, 5.6rem);
  --space-6: clamp(2.8rem, 2rem + 2.5vw, 4.3rem);
}
.page-hero { padding-block: clamp(2.8rem, 5.5vw, 4.4rem); }
.v3-page-hero { padding-block: clamp(2.8rem, 5.5vw, 4.4rem); }
.v3-page-hero figure { min-height: 380px; }
.v3-journal-hero { padding-block: clamp(2.4rem, 4.5vw, 3.6rem); }
.v3-journal-hero figure { min-height: 0 !important; height: clamp(300px, 32vw, 420px); }
.sticky-sidebar { top: 148px; }

/* --------------------------------------------------------------------------
   Fees page rail: the "Questions about cost?" card now rides the right side
   of the whole page below the hero, staying in view while the visitor
   scrolls the tables and policies. Former full-bleed bands became stacked
   blocks (tinted where they alternated) inside the main column.
   -------------------------------------------------------------------------- */
.fees-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(255px, 23vw, 302px);
  gap: clamp(1.8rem, 3.2vw, 3rem);
  align-items: start;
}
.fees-main { display: grid; gap: clamp(2.3rem, 4.2vw, 3.4rem); min-width: 0; }
.acc-card-tinted {
  padding: clamp(1.5rem, 3vw, 2.3rem);
  border-radius: 1.5rem;
  background: var(--mist);
}
.fees-shell { --fees-rail-top: clamp(96px, 10vw, 156px); }
/* The card is the page's standing answer to "what will this cost me", so it
   now runs beside the whole page rather than starting below the hero, and it
   is centred in the viewport instead of pinned under the header. The rail is
   a full-height sticky box and the card is centred inside it; the padding is
   the sticky header's own height, so the centring happens in the space the
   reader can actually see rather than behind the navigation. */
.fees-rail {
  position: sticky;
  /* Offset and height rather than a full viewport box with padding inside it.
     With padding, the card sat 170px down from the rail's own top, which put
     it below the fold before the page had been scrolled at all — and the card
     is meant to be there from the first paint. Offsetting the box instead
     means it clears the header when stuck and starts flush when it has not
     stuck yet. */
  top: var(--fees-rail-top);
  height: calc(100svh - var(--fees-rail-top));
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: .75rem;
}
/* A sticky element taller than the viewport does not scroll — it pins, and
   whatever hangs below the fold can never be reached. At 228px wide this card
   ran to 789px, so on a 1180x800 laptop the "Email a fee question" button and
   the notes under it were unreachable: 48px lost there, 87px at 1440x800.
   The wider column is most of the fix, since the paragraph wraps far less.
   This is the guarantee — on a viewport short enough that it still would not
   fit, the card scrolls within itself rather than hiding its own lower half. */
.fees-rail > .fees-rail-card {
  width: 100%;
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.fees-rail .sidebar-card { background: var(--paper); box-shadow: 0 18px 40px rgba(18, 42, 37, .08); }
.fees-main .why-haven-grid,
.fees-main .insurance-cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
@media (max-width: 1080px) {
  .fees-shell { grid-template-columns: minmax(0, 1fr); }
  .fees-rail {
    position: static;
    height: auto;
    display: block;
    padding-top: 0;
  }
  .fees-rail > .fees-rail-card { max-height: none; overflow: visible; }
}
@media (max-width: 700px) {
  .fees-main .why-haven-grid,
  .fees-main .insurance-cards { grid-template-columns: minmax(0, 1fr) !important; }
}

/* --------------------------------------------------------------------------
   Fees rail card in the dark "costs & coverage" treatment (owner request):
   the deep-green panel replaces the page's bottom CTA band, which is gone.
   -------------------------------------------------------------------------- */
.fees-rail-card,
.consult-card {
  position: relative;
  overflow: hidden;
  border: 0 !important;
  border-radius: 1.6rem !important;
  background: linear-gradient(180deg, #22352f 0%, #1a2a25 100%) !important;
  box-shadow: 0 26px 52px rgba(18, 42, 37, .26) !important;
}
.fees-rail-card { padding: 1.7rem 1.5rem 1.5rem !important; }
/* Owner request: the consultation card takes the Fees and FAQ rail card's
   format — the same gradient, corner radius, ring motif and type. Its padding
   is its own: the rail's figure is sized for a sidebar, and the same numbers
   in a column this wide read as a hairline margin around a lot of text. */
.consult-card { padding: clamp(1.6rem, 3vw, 2.4rem) !important; }
.consult-card h2 {
  margin: .35rem 0 .8rem;
  color: #f7f4ec;
  font-size: clamp(1.95rem, 1.4rem + 1.5vw, 2.5rem);
  line-height: 1.02;
}
/* The card's buttons are named differently from the rail's but do the same
   job, so they get the same pair of treatments: one filled in the page's
   cream, one outlined. */
.consult-card .button-light {
  background: #fffdf9 !important;
  border-color: #fffdf9 !important;
  color: #1d2f29 !important;
}
.consult-card .button-light:hover { background: #efe9dc !important; border-color: #efe9dc !important; }
.consult-card .button-ghost-light {
  background: transparent !important;
  border-color: rgba(255, 255, 255, .42) !important;
  color: #fffdf9 !important;
}
.consult-card .button-ghost-light:hover { border-color: #fffdf9 !important; background: transparent !important; }
.consult-card .emergency-note {
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .56);
}
.consult-card .emergency-note a { color: rgba(255, 255, 255, .8); }
.fees-rail-card::after,
.consult-card::after {
  content: "";
  position: absolute;
  width: 15rem;
  height: 15rem;
  right: -6rem;
  top: -7rem;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 50%;
  pointer-events: none;
}
.fees-rail-card .eyebrow-light,
.consult-card .eyebrow-light { color: rgba(255, 255, 255, .62); }
.fees-rail-card h2 {
  margin: .35rem 0 .8rem;
  color: #f7f4ec;
  font-size: 1.95rem;
  line-height: 1.02;
}
.fees-rail-card p,
.consult-card > p { color: rgba(255, 255, 255, .74); }
.fees-rail-card .sidebar-note { color: rgba(255, 255, 255, .56); }
.fees-rail-card .button-primary {
  background: #fffdf9 !important;
  border-color: #fffdf9 !important;
  color: #1d2f29 !important;
}
.fees-rail-card .button-primary:hover { background: #efe9dc !important; border-color: #efe9dc !important; }
.fees-rail-card .button-secondary {
  background: transparent !important;
  border-color: rgba(255, 255, 255, .42) !important;
  color: #fffdf9 !important;
}
.fees-rail-card .button-secondary:hover { border-color: #fffdf9 !important; }

/* Accordion headers: whole heading is the disclosure control. */
.acc-heading { margin: .3rem 0 0; }
.acc-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  line-height: inherit;
}
/* The toggle covers the card's whole header instead of the heading line
   alone. Before this the eyebrow and the card's own padding were dead space,
   so the only thing you could click was a thin band across the middle — a
   card that plainly looks pressable but mostly is not. Negative margins pull
   the button out over the padding and it puts the same padding back, so the
   target reaches the card's edges without moving anything. */
.acc-toggle {
  margin: calc(-1 * var(--acc-pad, 0px)) calc(-1 * var(--acc-pad-x, 0px));
  padding: var(--acc-pad, 0px) var(--acc-pad-x, 0px);
  width: calc(100% + 2 * var(--acc-pad-x, 0px));
  border-radius: inherit;
  /* Centred against the whole label, not the first line of it — the chevron
     belongs to the card, and pinned to the top it reads as decoration on the
     eyebrow rather than the control for the thing below it. */
  align-items: center;
}
.acc-toggle[aria-expanded="true"] { margin-bottom: 0; padding-bottom: 0; }
.acc-label { display: block; min-width: 0; }
.acc-label .eyebrow { margin: 0 0 .3rem; }
.acc-title { display: block; }
.acc-chevron { flex: 0 0 auto; color: var(--clay, #a2604a); transition: transform 200ms ease; }
.acc-toggle[aria-expanded="true"] .acc-chevron { transform: rotate(180deg); }
.acc-toggle:hover .acc-chevron { transform: translateY(2px); }
.acc-toggle[aria-expanded="true"]:hover .acc-chevron { transform: rotate(180deg) translateY(2px); }
.acc-panel { padding-top: 1.05rem; }
.acc-lede { max-width: 68ch; margin: 0 0 1.3rem; color: var(--muted); }
.acc-card {
  --acc-pad: clamp(.85rem, 1.5vw, 1.15rem);
  --acc-pad-x: var(--acc-pad);
  border: 1px solid var(--line);
  border-radius: 1.5rem;
  padding: var(--acc-pad) var(--acc-pad-x);
  background: var(--paper);
}
.acc-card-tinted { border: 1px solid var(--line); }
.fees-main { gap: clamp(1rem, 1.8vw, 1.4rem); }
.fees-main .prose h2:first-child { margin-top: .4rem; }
@media (prefers-reduced-motion: reduce) { .acc-chevron { transition: none; } }

/* --------------------------------------------------------------------------
   Services at-a-glance index (owner request): one compact row of cards, each
   a link to that service's standalone page. auto-fill keeps the grid stable
   as future services are added.
   -------------------------------------------------------------------------- */
.service-index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.1rem;
}
.service-index-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  background: var(--paper);
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(18, 42, 37, .06);
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.service-index-card:hover,
.service-index-card:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px rgba(18, 42, 37, .13);
}
.service-index-card figure {
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.service-index-card figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.service-index-body { display: flex; flex-direction: column; flex: 1; gap: .35rem; padding: .95rem 1rem 1.05rem; }
.service-index-body h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 500;
  line-height: 1.08;
}
.service-index-body p { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.5; }
.service-index-link { margin-top: auto; padding-top: .5rem; color: var(--clay-ink); font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.service-index-note { margin: 1.3rem 0 0; color: var(--muted); font-size: .82rem; }
@media (max-width: 760px) {
  .service-index-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
}
@media (max-width: 480px) {
  .service-index-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .service-index-card { transition: none; } }

/* Footer Psychology Today seal spacing; the badge image arrives via their
   script, so reserve a touch of room and keep it clear of the blurb. */
.footer-pt-verification { margin-top: 1.05rem; min-height: 38px; }

/* --------------------------------------------------------------------------
   Journal archive (owner request): filtered mode collapses the two-section
   layout into one flat list — section chrome hides and the foundation band
   loses its tint so both grids read as a single collection. "View more"
   paginates in both modes.
   -------------------------------------------------------------------------- */
.journal-more-wrap { margin-top: 1.7rem; text-align: center; }
body.is-journal-filtered .v4-library-intro { display: none !important; }
body.is-journal-filtered .v4-foundation-section .v3-journal-head { display: none !important; }
body.is-journal-filtered .v4-foundation-section { background: var(--paper) !important; }
body.is-journal-filtered .v4-foundation-section.section { padding-top: 0 !important; }
body.is-journal-filtered .journal-current-section.section { padding-bottom: 1rem !important; }
body.is-journal-filtered .blog-index-grid,
body.is-journal-filtered .v4-foundation-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1rem !important;
}

/* --------------------------------------------------------------------------
   Contact page (owner request): hero image fills its frame and the split
   hero tightens; the two columns below match heights; the consult card
   carries both actions and pins its emergency note to the bottom.
   -------------------------------------------------------------------------- */
.v3-page-hero-split figure { height: clamp(300px, 30vw, 400px); min-height: 0 !important; }
.v3-page-hero-split figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* The consultation card used to stretch to the height of the column beside
   it, with the safety note pushed to its floor — which at 1440 left 185px of
   empty dark green between the buttons and the note, a third of the card
   saying nothing. It takes the height of what is in it now (owner request).
   The column beside it is the taller of the two either way; the leftover is
   page rather than a hole in the artwork. */
.contact-grid { align-items: start !important; }
.consult-card { display: flex; flex-direction: column; box-sizing: border-box; }
.consult-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin: 1.15rem 0 1.35rem; }
.consult-card-actions .button { margin: 0 !important; }
/* The three contact cards were --paper on a --paper section, so the only
   thing drawing them was a hairline at 13% opacity: three links in a row
   rather than three cards. They take the lift the rest of the site's cards
   carry, and the icon disc steps down one shade so it reads against the card
   instead of dissolving into it (owner request). */
.contact-card {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-sm);
}
.contact-card .icon-disc { background: var(--mist-deep); color: var(--ink-soft); }
.contact-card h3 { font-size: .92rem; letter-spacing: .01em; }
.contact-card a { color: var(--text); }
.contact-card a:hover,
.contact-card a:focus-visible { color: var(--clay-dark); }

/* The matrix cells hold plan names with no room for a clause, so the column
   heading carries what "Optum" covers — the umbrella a visitor's Oscar, UHC
   or UMR card actually bills through. Quiet, and in sentence case, so it
   reads as a note rather than a second heading. */
.payment-matrix .matrix-sub {
  display: block;
  margin-top: .25rem;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.35;
  text-transform: none;
}

/* Team page carousel spacing (reuses the homepage team-row treatment). */
.team-directory-head { margin-top: .4rem; }
.team-directory-row { margin-top: .9rem; }

/* --------------------------------------------------------------------------
   Homepage closing CTA (owner request): the shoreline texture runs the full
   width of the section as a translucent hero-style background; the copy sits
   over the calm sand on the left, away from the driftwood detail.
   -------------------------------------------------------------------------- */
.home-final-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(4.6rem, 9vw, 7.5rem) clamp(3rem, 5.5vw, 4.4rem);
}
.home-final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('/assets/images/shoreline-texture.webp') center / cover no-repeat;
  opacity: .58;
  z-index: -2;
}
.home-final-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(247, 245, 239, .6) 0%, rgba(247, 245, 239, .34) 46%, rgba(247, 245, 239, .06) 100%);
  z-index: -1;
}
.home-final-copy { max-width: 580px; }
.home-final-copy .section-title { margin-bottom: 1rem; }
.home-final-copy .lede { max-width: 46ch; margin-bottom: 1.6rem; }
@media (max-width: 760px) {
  .home-final-cta::after {
    background: linear-gradient(180deg, rgba(247, 245, 239, .82), rgba(247, 245, 239, .55));
  }
}

/* --------------------------------------------------------------------------
   Header refinements (owner request): Home joins the nav, links step up in
   size, and Client Portal sits directly beneath the consultation button —
   identical anatomy, complementary shades of the brand green (dark fill
   above, light fill below).
   -------------------------------------------------------------------------- */
@media (min-width: 981px) {
  .site-header .primary-nav > a,
  .site-header .primary-nav .has-submenu > a { font-size: 1.18rem !important; }
  /* Hover/active underline hugs the words instead of floating below them. */
  .site-header .primary-nav a::after { inset: auto 0 -0.18rem; }
  /* Desktop reaches the portal through the stacked button instead. */
  .site-header .primary-nav .nav-portal-link { display: none !important; }
  .header-actions {
    justify-self: end;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
  }
  .header-actions .button {
    display: inline-flex;
    justify-content: center;
    white-space: nowrap;
  }
}
@media (max-width: 980px) {
  /* The drawer keeps its own portal link; the stacked pair is desktop-only. */
  .header-actions { display: none !important; }
}
.header-portal-button {
  background: #DCE5DF !important;
  border-color: #DCE5DF !important;
  color: #22352F !important;
}
.header-portal-button:hover,
.header-portal-button:focus-visible {
  background: #CBD9D0 !important;
  border-color: #CBD9D0 !important;
  color: #17332F !important;
}

/* --------------------------------------------------------------------------
   Why-Haven section carries the wave's light sage ground (owner request):
   the proof band is gone, the hero wave lands directly on this section, and
   the four cards sit on solid cream so they stand out against the sage.
   -------------------------------------------------------------------------- */
.why-haven.section {
  background: var(--haven-quote-mist, #eef0ed) !important;
  padding-top: clamp(1.5rem, 2.8vw, 2.4rem) !important;
}
.why-card--mist {
  background: linear-gradient(rgba(112, 135, 123, .09), rgba(112, 135, 123, .09)), #fffdf9 !important;
  border-color: rgba(83, 107, 96, .26) !important;
  box-shadow: 0 14px 32px rgba(25, 50, 45, .07);
}
.why-card--sand {
  background: linear-gradient(rgba(181, 102, 77, .07), rgba(181, 102, 77, .07)), #fffdf9 !important;
  border-color: rgba(143, 84, 66, .24) !important;
  box-shadow: 0 14px 32px rgba(25, 50, 45, .07);
}

/* --------------------------------------------------------------------------
   Hero tune-up (owner request): the headline rides closer to the header, the
   section stands a little shorter, the footage plays un-zoomed so sky,
   shore, and grass share the frame, and a lighter wash lets the video make
   more of a statement.
   -------------------------------------------------------------------------- */
body.is-home .v4-video-hero .v3-hero-inner {
  padding-top: calc(clamp(1.9rem, 3.4vw, 2.9rem) + var(--hero-header-offset)) !important;
}
@media (min-width: 981px) {
  .v3-hero.v4-video-hero { min-height: clamp(580px, 72svh, 760px); }
}
.v4-video-hero .v4-hero-video,
.v4-video-hero .v4-hero-poster {
  transform: none !important;
  object-position: center 50% !important;
}
.v4-video-hero .v3-hero-wash {
  background: linear-gradient(90deg, rgba(246, 244, 238, .7) 0%, rgba(246, 244, 238, .45) 33%, rgba(246, 244, 238, .1) 62%, rgba(246, 244, 238, 0) 100%) !important;
}

/* Keep heads in frame on the portrait photographs (owner request). Each of
   these is a tall picture in a 16:10 frame, so `cover` shows about half its
   height; centred, that half opens below the top of the faces. */
.home-service-card[data-service-open="individual"] figure img,
.service-index-card[href="/individual-therapy"] figure img { object-position: center 36%; }
.home-service-card[data-service-open="family"] figure img,
.service-index-card[href="/family-therapy"] figure img { object-position: center 38%; }
.service-index-card[href="/groups"] figure img { object-position: center 18%; }

/* --------------------------------------------------------------------------
   Matcher selects match the state combobox treatment (owner request): same
   height, radius, cream ground, shadow, and a divided chevron segment. The
   empty state reads muted like a placeholder.
   -------------------------------------------------------------------------- */
.v3-quick-form select,
.v3-full-matcher-form select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 52px;
  min-height: 52px;
  padding: 0 3.4rem 0 1rem;
  border: 1px solid rgba(23, 51, 47, .22);
  border-radius: 1rem;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e4a40' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 17px 17px,
    linear-gradient(rgba(23, 51, 47, .11), rgba(23, 51, 47, .11)) no-repeat right 46px center / 1px 62%,
    rgba(255, 253, 249, .96);
  box-shadow: 0 10px 26px rgba(23, 51, 47, .07);
  color: var(--haven-ink, #17332f);
  font: inherit;
  font-size: .91rem;
  font-weight: 500;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.v3-quick-form select:focus-visible,
.v3-full-matcher-form select:focus-visible {
  outline: 0;
  border-color: rgba(23, 51, 47, .58);
  box-shadow: 0 0 0 4px rgba(142, 166, 153, .18), 0 14px 30px rgba(23, 51, 47, .1);
}
/* Empty selection reads like the state box's placeholder. */
.v3-quick-form select:has(option[value=""]:checked),
.v3-full-matcher-form select:has(option[value=""]:checked) {
  color: #6b7a72;
  font-weight: 400;
}

/* The DBT card carries the same portrait garden-group photograph as the DBT
   Skills Groups card on /services, and in a 16:10 frame `cover` shows half its
   height. The topmost hair in the picture sits 17.5% down, so at 30% the
   window opened at 15% and the first head had two and a half percent of
   clearance — no headroom at all once it is drawn at 291px (owner request).
   Both cards now open at 9%. */
.home-service-card[data-service-open="dbt"] figure img { object-position: center 18%; }

/* --------------------------------------------------------------------------
   The shoreline CTA rises to the welcome section's wave (owner request):
   the old cream return-wave is retired, and the CTA section pulls up under
   the curve with a mask, so mist sits above the line and the image below it
   with no white band between.
   -------------------------------------------------------------------------- */
.v6-quote-section::after,
.v3-quote-section.v6-quote-section::after { display: none !important; }
.home-final-cta {
  position: relative;
  z-index: 2;
  /* One depth for the three things that have to agree: how far the section
     pulls up under the curve, how tall the wave band is, and how much room the
     copy needs to clear it. */
  --wave-depth: clamp(90px, 8vw, 140px);
  margin-top: calc(var(--wave-depth) * -1);
  padding-top: calc(clamp(2.4rem, 4.6vw, 3.8rem) + var(--wave-depth));
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 150' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 60 C300 26 520 24 790 61 C1080 100 1315 126 1548 99 C1707 80 1818 58 1920 43 L1920 150 L0 150 Z'/%3E%3C/svg%3E"),
    linear-gradient(#000 0 0);
  -webkit-mask-repeat: no-repeat, no-repeat;
  -webkit-mask-position: center top, center bottom;
  -webkit-mask-size: 100% var(--wave-depth), 100% calc(100% - var(--wave-depth) + 1px);
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 150' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 60 C300 26 520 24 790 61 C1080 100 1315 126 1548 99 C1707 80 1818 58 1920 43 L1920 150 L0 150 Z'/%3E%3C/svg%3E"),
    linear-gradient(#000 0 0);
  mask-repeat: no-repeat, no-repeat;
  mask-position: center top, center bottom;
  mask-size: 100% var(--wave-depth), 100% calc(100% - var(--wave-depth) + 1px);
}

/* --------------------------------------------------------------------------
   Welcome section opens with a wave to match its close (owner request): the
   same curve family carries the paper section above down into the mist, so
   the band is bracketed by parallel waves.
   -------------------------------------------------------------------------- */
.v6-quote-section,
.v3-quote-section.v6-quote-section {
  padding-top: calc(clamp(3.4rem, 5.5vw, 5.6rem) + clamp(70px, 6.5vw, 110px)) !important;
}
.v6-quote-section::before,
.v3-quote-section.v6-quote-section::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -1px;
  left: 0;
  right: 0;
  height: clamp(70px, 6.5vw, 110px);
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 150' preserveAspectRatio='none'%3E%3Cpath fill='%23eadfd4' d='M0 60 C300 26 520 24 790 61 C1080 100 1315 126 1548 99 C1707 80 1818 58 1920 43 L1920 0 L0 0 Z'/%3E%3C/svg%3E") center top / 100% 100% no-repeat;
}

/* --------------------------------------------------------------------------
   Steps section (owner request): tighter block, larger small text.
   -------------------------------------------------------------------------- */
.home-steps-section.section { padding-block: clamp(2.6rem, 4.5vw, 3.8rem) !important; }
.step-card { min-height: 0 !important; padding: clamp(1.3rem, 2.4vw, 1.9rem) !important; }
.step-card h3 { margin-top: 1.3rem !important; }
.step-card p { font-size: .95rem !important; }
.steps-fees-note { margin-top: 1.2rem !important; font-size: 1rem !important; }

/* --------------------------------------------------------------------------
   Welcome statement rides the vertical center of its wave-bracketed band.
   -------------------------------------------------------------------------- */
.v6-quote-section,
.v3-quote-section.v6-quote-section {
  padding-top: calc(clamp(2.4rem, 3.8vw, 3.8rem) + clamp(70px, 6.5vw, 110px)) !important;
  padding-bottom: clamp(10rem, 12.5vw, 13.4rem) !important;
}

/* --------------------------------------------------------------------------
   Matcher corner (owner request): the rounded top-right used to reveal the
   body's beige instead of the paper of the section above. The section ground
   becomes that paper; the green panel with its radius moves to an inner
   layer, so the corner void matches the preceding section exactly.
   -------------------------------------------------------------------------- */
.v3-matcher-section {
  position: relative;
  background: #fffdf9 !important;
  border-radius: 0 !important;
}
.v3-matcher-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 0 5rem 0 0;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, .06), transparent 42%),
    #42574e;
}
.v3-matcher-section > * { position: relative; z-index: 1; }
@media (max-width: 1180px) {
  .v3-matcher-section::before { border-radius: 0 2.5rem 0 0; }
}

/* --------------------------------------------------------------------------
   Why-Haven tightening (owner request): heading only, pulled up close to the
   wave, cards right beneath it. The Comprehensive DBT card quietly opens the
   program pop-up — identical to its siblings at rest, revealing its link
   nature only on hover or keyboard focus.
   -------------------------------------------------------------------------- */
.why-haven.section { padding-top: clamp(.9rem, 1.6vw, 1.5rem) !important; }
.why-haven .v3-section-heading { margin-bottom: clamp(1.2rem, 2.2vw, 1.8rem) !important; }
button.why-card-link {
  display: block;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
button.why-card-link:hover,
button.why-card-link:focus-visible {
  transform: translateY(-5px);
  box-shadow: 0 20px 42px rgba(25, 50, 45, .13);
}
.why-card-hint {
  display: block;
  margin-top: .7rem;
  color: #8f5442;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .03em;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 180ms ease, transform 180ms ease;
}
button.why-card-link:hover .why-card-hint,
button.why-card-link:focus-visible .why-card-hint { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  button.why-card-link, .why-card-hint { transition: none; }
  button.why-card-link:hover, button.why-card-link:focus-visible { transform: none; }
}

/* All four why-cards share one inner layout so the button card is
   indistinguishable from its article siblings at rest. */
.why-card {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
}
.why-card .why-card-mark { margin: 0 0 .85rem; }
.why-card h3 { margin: 0 0 .5rem !important; }
.why-card p { margin: 0; }
.why-card-hint { margin-top: auto; padding-top: .7rem; }

/* --------------------------------------------------------------------------
   Service pop-ups (owner request): a centered display title leads the page;
   the image floats left with its facts beside it, and once the text passes
   the image's end it runs the full width — one natural scroll, no inner
   scrolling column.
   -------------------------------------------------------------------------- */
.service-modal { scrollbar-width: thin; scrollbar-color: rgba(112, 135, 123, .55) transparent; }
.service-modal::-webkit-scrollbar { width: 8px; }
.service-modal::-webkit-scrollbar-thumb { border-radius: 99px; background: rgba(112, 135, 123, .45); }
.service-modal-head { max-width: 860px; margin: .4rem auto 1.5rem; text-align: center; }
.service-modal-name {
  margin: 0 auto;
  max-width: 20ch;
  color: var(--haven-ink, #17332f);
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4.2vw, 3.5rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.service-modal-tagline {
  margin: .6rem auto 0;
  max-width: 36ch;
  color: #4a5a52;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.9vw, 1.5rem);
  font-weight: 400;
  line-height: 1.28;
  text-wrap: balance;
}
.service-modal-article { max-width: 980px; margin: 0 auto; }
.service-modal-article::after { content: ""; display: block; clear: both; }
.service-modal-duo {
  display: grid;
  grid-template-columns: minmax(260px, 420px) minmax(0, 1fr);
  gap: clamp(1.2rem, 2.4vw, 1.9rem);
  align-items: stretch;
  margin-bottom: 1.25rem;
}
.service-modal-visual { position: relative; float: none; width: auto; height: auto; min-height: 280px; margin: 0; }
/* The facts column sets the row height; the image fills and crops to it, so
   both end on the same line and the summary starts fresh beneath. */
.service-modal-visual img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  border-radius: 1.2rem;
}
.service-modal-side { min-width: 0; }
.service-modal-summary { max-width: none; margin: 0 0 .4rem; color: var(--muted); line-height: 1.72; }
@media (max-width: 900px) {
  .service-modal-duo { grid-template-columns: minmax(0, 1fr); }
  .service-modal-visual { min-height: 0; }
  .service-modal-visual img { position: static; height: auto; aspect-ratio: 16 / 9; }
}
.service-modal-lede { margin: 0 0 1.1rem; }
.service-modal-bullets {
  display: block !important;
  overflow: hidden; /* own formatting context: the list narrows beside the float, so markers align with text */
  margin: 0 0 1.25rem !important;
  padding: 0 !important;
}
.service-modal-bullets li {
  position: relative;
  margin: 0 0 .5rem;
  padding: 0 0 0 1.35rem !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--haven-ink, #17332f);
  font-weight: 600;
  line-height: 1.5;
}
.service-modal-bullets li::before {
  content: "";
  position: absolute;
  left: .15rem;
  top: .58em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--haven-clay, #a2604a);
}
.service-modal-actions { clear: both; padding-top: 1.1rem; }


/* Matcher section small text steps up (owner request). */
.v3-matcher-section .v3-quick-form label > span,
.v3-matcher-section .v5-field-label { font-size: .84rem !important; }
.v3-matcher-section .home-refine summary { font-size: .87rem !important; }
.v3-matcher-section [data-home-clear] { font-size: .9rem !important; }
.v3-matcher-section .v3-quick-results-head > span { font-size: .98rem !important; }
.v3-matcher-section .team-row-controls a { font-size: .87rem !important; }

/* Home FAQ (owner request): one plain heading, tighter block. */
#faq-section.section { padding-block: clamp(2.4rem, 4vw, 3.4rem) !important; }
#faq-section .v3-section-heading { margin-bottom: clamp(1rem, 2vw, 1.6rem) !important; }

/* The shrinking header changes its own height; scroll anchoring would
   compensate by moving scrollY, feeding a flicker loop at the threshold. */
html { overflow-anchor: none; }

/* Crisis page reads across the full container (owner request), and the
   crisis pathway notes on DBT and FAQ pages stay quiet but visible. */
.crisis-article { max-width: none !important; }
.crisis-article h2 { max-width: 40ch; }
.dbt-crisis-note, .faq-crisis-note {
  margin: 1.4rem 0 0;
  color: var(--muted);
  font-size: .92rem;
}
.dbt-crisis-note a, .faq-crisis-note a { color: #8f5442; font-weight: 600; }

/* --------------------------------------------------------------------------
   Compact footer (owner request): the footer read nearly a full screen tall.
   Smaller lockup, tighter columns and bottom row — same content, ~half the
   height.
   -------------------------------------------------------------------------- */
.site-footer { padding-top: clamp(1.9rem, 3.2vw, 2.6rem) !important; }
.site-footer .footer-logo-artwork.haven-logo-stacked { width: min(116px, 100%) !important; }
.footer-logo-link { margin-bottom: .4rem !important; }
.footer-pt-verification { margin-top: .4rem !important; min-height: 34px; }
.footer-grid { padding-bottom: clamp(1.4rem, 2.6vw, 2rem) !important; row-gap: 1.2rem !important; }
.footer-heading { margin-bottom: .65rem !important; }
.site-footer .footer-list { gap: .05rem !important; }
.footer-contact-column address { gap: .4rem !important; margin-bottom: .6rem !important; }
.footer-portal { margin: 0 0 .6rem !important; }
.footer-contact-column .button { margin-top: .1rem; }
.footer-bottom { padding-block: .85rem 1.1rem !important; gap: .45rem 2rem !important; }
.crisis-note { margin: 0 !important; }

/* --------------------------------------------------------------------------
   Clinician profile dialog (owner request).

   The whole dialog used to be the scroll container, so the browser's own
   scrollbar ran down its outside edge, cutting across the rounded corner,
   and the portrait scrolled away with the text. Now only the right column
   scrolls: the shell holds its shape, the portrait sits still and centred
   beside it, and the scrollbar is a thin inset rail rather than a system
   gutter bolted to the frame.

   The portraits are square by necessity — every clinician's headshot framed
   their head differently and squaring them was the only way to make the set
   cohesive. That reads fine at card size and blankly at this one, so here
   the square is inset from the shell, rounded, and given a shadow, which
   makes it a portrait rather than a panel that happens to contain a face.
   -------------------------------------------------------------------------- */
@media (min-width: 981px) {
  .provider-modal {
    display: grid;
    /* minmax(0, 1fr), not auto: an auto row takes its content's height, so
       the columns inside never learn they are constrained and the copy
       overflows the shell instead of scrolling within it. */
    grid-template-rows: minmax(0, 1fr);
    overflow: hidden;
    max-height: min(88svh, 900px);
  }
  .provider-modal .provider-modal-content {
    min-height: 0;
    overflow: hidden;
    align-items: stretch;
    gap: clamp(.9rem, 1.8vw, 1.6rem);
    padding: clamp(.9rem, 1.6vw, 1.35rem);
    grid-template-columns: minmax(0, .74fr) minmax(0, 1fr);
  }
  /* Centred against whichever column is taller, and never stretched: a
     square portrait pulled to the height of a long biography stops being a
     square. */
  .provider-modal .provider-modal-photo {
    align-self: center;
    border-radius: 1.35rem !important;
    box-shadow: 0 20px 44px -26px rgba(18, 42, 37, .5);
  }
  .provider-modal .provider-modal-copy {
    align-self: stretch;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: clamp(1.4rem, 2.6vw, 2.2rem) clamp(1rem, 1.8vw, 1.5rem)
             clamp(1.4rem, 2.6vw, 2.2rem) 0;
    /* A rail that is always there, rather than an overlay bar that appears
       on scroll and vanishes. The column is the only thing that moves now,
       so it should look like it can. */
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    /* Chromium honours scrollbar-color and ignores the ::-webkit- rules below
       whenever scrollbar-width is set, so this pair is what actually paints
       here; the webkit block is for Safari, which has it the other way round.
       Both describe the same rail. */
    scrollbar-color: rgba(23, 51, 47, .38) rgba(23, 51, 47, .12);
  }
  .provider-modal .provider-modal-copy::-webkit-scrollbar { width: 10px; }
  .provider-modal .provider-modal-copy::-webkit-scrollbar-track {
    border: 4px solid transparent;
    border-radius: 999px;
    background: rgba(23, 51, 47, .08);
    background-clip: content-box;
  }
  .provider-modal .provider-modal-copy::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 999px;
    background: rgba(23, 51, 47, .24);
    background-clip: content-box;
  }
  .provider-modal .provider-modal-copy::-webkit-scrollbar-thumb:hover {
    background: rgba(23, 51, 47, .4);
    background-clip: content-box;
  }
  /* The close button floats over the scrolling column, so the first line
     needs to start clear of it rather than sliding underneath. */
  .provider-modal .provider-modal-copy > :first-child { margin-top: .35rem; }
  .provider-modal .provider-modal-copy h2 { max-width: 14ch; }
}

/* --------------------------------------------------------------------------
   Our Team (owner request): the office photograph is gone and no other
   picture replaces it — on a page about people, the clinicians are the
   imagery. The matcher moves up beside the introduction instead, so the
   first screen carries what the page is and how to sort it, and the row of
   clinicians begins immediately under both rather than below a form the
   reader has to scroll past to reach anyone.
   -------------------------------------------------------------------------- */
.team-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(1.6rem, 3.2vw, 3rem);
  align-items: start;
  margin-bottom: clamp(1.8rem, 3.4vw, 2.8rem);
}
/* The heading carried the page-hero's display face by virtue of sitting in
   one. Out of that wrapper it fell back to the body sans at heavy weight, so
   the typography comes with it rather than being inherited by accident. */
.team-intro h1 {
  margin: .2rem 0 .8rem;
  color: var(--haven-ink);
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 1.65rem + 1.6vw, 3.3rem);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: .98;
  max-width: 18ch;
  text-wrap: balance;
}
.team-intro .lede { max-width: 46ch; font-size: 1.02rem; line-height: 1.68; }
.team-intro .v6-hero-note { font-size: .88rem; line-height: 1.6; }
.team-intro .page-hero-actions { margin-top: 1.2rem; }
.team-intro .v6-hero-note { margin-top: 1.1rem; max-width: 52ch; }
/* Owner request: the introduction reads as a centred block rather than a
   column flushed left. Only where the two-column grid exists — stacked on a
   narrow screen the same copy becomes a full-width centred paragraph, which
   is harder to read than the left edge it replaces, so the breakpoint below
   keeps its own alignment.

   The measures stay: centring a paragraph is about where the block sits, not
   about letting the line length grow, so each keeps its max-width and is
   centred as a block. */
@media (min-width: 1101px) {
  .team-intro { text-align: center; }
  .team-intro h1,
  .team-intro .lede,
  .team-intro .team-intro-fit,
  .team-intro .team-intro-bridge,
  .team-intro .v6-hero-note { margin-inline: auto; }
  .team-intro .page-hero-actions { justify-content: center; }
  /* The eyebrow carries a rule to its left, which is a left edge marker. In
     the middle of the column it needs the matching one on the right or the
     label sits visibly off-centre against its own decoration. */
  .team-intro .eyebrow::after {
    content: "";
    width: 2rem;
    height: 1px;
    background: currentColor;
    opacity: .65;
  }
}
/* The form was sized to stand alone across the page; in a column beside the
   copy it needs its own fields to stop insisting on two abreast. */
.team-intro-matcher .team-matcher-form { margin: 0; }
.team-intro-matcher .v3-full-matcher-form { padding: clamp(1.1rem, 2.2vw, 1.7rem); }
@media (max-width: 1100px) {
  .team-intro-grid { grid-template-columns: minmax(0, 1fr); }
  .team-intro .lede { max-width: none; }
}
/* The clinician row is the page. It was inheriting the reading container at
   1220px while the same component on the homepage sits in the wide one at
   1400, so the identical cards came out 266px here against 306 there — the
   page devoted to the team showed them smaller than the page that only
   mentions them. On the wide measure, and a step larger again, since here
   there is nothing else competing for the width. */
@media (min-width: 981px) {
  /* Both rows on the same measure. Widening only the carousel gave the page
     two left edges — the introduction on the reading container and the cards
     ninety pixels outside it, which reads as a mistake rather than a
     deliberate bleed. */
  .team-page .container.team-intro-grid,
  .team-page .container.team-matcher { width: min(calc(100% - 3.4rem), 1460px); }
  .team-page .v3-quick-card { flex-basis: clamp(260px, 24% - 8px, 400px) !important; }
}

/* The row used to carry a header band above it holding a count and a pair of
   arrows. The count only said how many clinicians there are, which the row
   itself shows, and the band cost its own height plus the gap under it — a
   stripe of empty page between the matcher and the first face. The arrows sit
   on the row now, where what they scroll is under the cursor, and the count
   returns the moment a selection turns it into a number about the visitor
   rather than about us. */
.team-row-shell { position: relative; }
.team-row-shell .team-row-arrow {
  position: absolute;
  top: var(--team-arrow-top, 34%);
  z-index: 3;
  transform: translateY(-50%);
  transition: opacity 160ms ease, background 160ms ease, border-color 160ms ease;
}
.team-row-shell .team-row-arrow-prev { left: clamp(-.5rem, -.4vw, 0px); }
.team-row-shell .team-row-arrow-next { right: clamp(-.5rem, -.4vw, 0px); }
/* Nothing to scroll to is nothing to point at. */
.team-row-shell .team-row-arrow[disabled] { opacity: 0; pointer-events: none; }
.team-directory-head[hidden] { display: none; }
p.team-directory-head { margin: 0 0 .5rem; }
/* Centred on the portrait rather than the whole card, so the arrows never
   drift down over the name and role. */
@media (min-width: 981px) {
  .team-row-shell { --team-arrow-top: 36%; }
}
@media (max-width: 980px) {
  /* Touch scrolling is the primary control on a phone; the arrows are a
     desktop affordance and would only cover a face here. */
  .team-row-shell .team-row-arrow { display: none; }
}

/* --------------------------------------------------------------------------
   Clinician profile pages (/team/<id>): the modal's information at a
   durable, shareable URL.
   -------------------------------------------------------------------------- */
.team-profile {
  display: grid;
  grid-template-columns: minmax(260px, 400px) minmax(0, 1fr);
  gap: clamp(1.6rem, 3vw, 3rem);
  align-items: start;
}
.team-profile-photo {
  position: relative;
  overflow: hidden;
  border-radius: 1.4rem;
  background: var(--mist);
}
.team-profile-photo .therapist-initials {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #53685f;
  font-family: var(--font-display);
  font-size: 3rem;
}
.team-profile-photo img { position: relative; }
.team-profile-copy h1 {
  margin: .3rem 0 .4rem;
  color: var(--haven-ink, #17332f);
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  font-weight: 500;
  line-height: 1;
}
.team-profile-copy h2 { margin: 1.6rem 0 .5rem; color: var(--haven-ink, #17332f); font-family: var(--font-display); font-size: 1.45rem; font-weight: 500; }
.team-profile-copy p { color: var(--muted); }
.team-profile-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.4rem; }
.provider-profile-link-row { margin: .9rem 0 0; }
@media (max-width: 900px) {
  .team-profile { grid-template-columns: minmax(0, 1fr); }
  .team-profile-photo { max-width: 420px; }
}

/* Campaign page shows all four DBT components side by side (SV3-012). */
.steps-grid-campaign { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .steps-grid-campaign { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .steps-grid-campaign { grid-template-columns: 1fr; } }

/* Fees accordions: headers at accordion scale, not section-title scale
   (owner request). */
.acc-heading {
  max-width: none !important;
  font-size: clamp(1.4rem, 1.9vw, 1.85rem) !important;
  line-height: 1.12 !important;
}
.acc-card .eyebrow { margin-bottom: .15rem; }
.acc-panel { padding-top: .85rem; }

/* Footer contact rows carry line icons; the lavender meadow rides the base. */
.footer-contact-column address a { display: flex; align-items: flex-start; gap: .6rem; }
.footer-ic { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; color: rgba(255, 255, 255, .52); }
.footer-ic svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.footer-contact-column address a:hover .footer-ic { color: rgba(255, 255, 255, .85); }

/* --------------------------------------------------------------------------
   Fees page refinements (owner request): the rail narrows and sits further
   right so expanded sections get more room, and panel type steps down so
   fee information reads calmly rather than imposingly.
   -------------------------------------------------------------------------- */
/* Scoped to the widths that have room for two columns. Unconditional, this
   line silently undid the max-width:1080px collapse further up the file —
   it comes later, so it won at every size. On a phone that left the rail
   holding a fixed 228px while the 1fr track shrank to about 103px, and the
   fee blocks, which need 322px, overflowed their own track and ran under
   the rail: it covered the right half of every accordion heading, cutting
   "What sessions cost" and "Postdoctoral resident reduced rates" off
   mid-word on the page where someone is working out what care costs. */
@media (min-width: 1081px) {
  .fees-shell { grid-template-columns: minmax(0, 1fr) clamp(340px, 27vw, 428px); }
}
.fees-rail-card { padding: 1.4rem 1.25rem 1.25rem !important; }
.fees-rail-card h2 { font-size: 1.6rem; }
.fees-rail-card p { font-size: .78rem; line-height: 1.55; }
.fees-rail-card .button { font-size: .8rem; padding-inline: .9rem; }

.acc-lede { font-size: .92rem !important; line-height: 1.6 !important; margin-bottom: 1.05rem !important; }
.acc-panel .prose h2 { font-size: 1.18rem !important; margin: 1.5rem 0 .45rem !important; }
.acc-panel .prose h3 { font-size: 1rem !important; }
.acc-panel .prose p,
.acc-panel .prose li,
.acc-panel .fee-example li,
.acc-panel .insurance-questions li { font-size: .92rem !important; line-height: 1.65 !important; }
.acc-panel .fee-table { font-size: .88rem; }
.acc-panel .fee-caption { font-size: .78rem; }
.acc-panel .fee-payment-note,
.acc-panel .fee-followup,
.acc-panel .fee-meta,
.acc-panel .fee-example-caveat { font-size: .84rem !important; line-height: 1.6 !important; }
.acc-panel .why-card h3,
.acc-panel .insurance-card h3 { font-size: 1.05rem !important; }
.acc-panel .why-card p,
.acc-panel .insurance-card p { font-size: .88rem !important; line-height: 1.6 !important; }

/* --------------------------------------------------------------------------
   Journal cards: the decorative rings and sage disc date from the gradient-
   placeholder era; over real cover art they read as the image being washed
   out and pushed right (owner noticed). They stand down.
   -------------------------------------------------------------------------- */
.blog-image::before, .blog-image::after { display: none !important; }
.journal-photo img, .blog-image img { object-position: center center; }

/* Article hero carries the entry's cover image. */
.article-cover {
  max-width: 900px;
  margin: 2rem auto 0;
}
.article-cover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 1.3rem;
  box-shadow: 0 24px 52px rgba(18, 42, 37, .14);
}
@media (max-width: 760px) { .article-cover { margin-top: 1.4rem; } .article-cover img { border-radius: 1rem; } }

/* Fees rail card fills its column: larger type and a short facts list so it
   reads as a companion panel rather than a floating box. */
.fees-rail-card { padding: 1.6rem 1.4rem 1.5rem !important; }
.fees-rail-card h2 { font-size: 1.85rem; }
.fees-rail-card p { font-size: .86rem; line-height: 1.62; }
.fees-rail-card .button { font-size: .86rem; padding-block: .72rem; }
.fees-rail-facts {
  display: grid;
  gap: .6rem;
  margin: 1.2rem 0 1rem;
  padding: 1.1rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, .16);
  list-style: none;
}
.fees-rail-facts li {
  position: relative;
  padding-left: 1.1rem;
  color: rgba(255, 255, 255, .72);
  font-size: .82rem;
  line-height: 1.5;
}
.fees-rail-facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .52em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(200, 216, 206, .75);
}
.fees-rail-card .sidebar-note { font-size: .78rem !important; }

/* --------------------------------------------------------------------------
   Header spacing (owner request): the two nav rows sit closer together, and
   the stacked action buttons get breathing room between them.
   -------------------------------------------------------------------------- */
@media (min-width: 981px) {
  .site-header .primary-nav { row-gap: .1rem; align-content: center; }
}

/* Side by side rather than stacked, and larger: stacked, the pair stood 100px
   tall and the shorter label had a whole row to itself, where in a row they
   are one control height and the type can carry the weight these two links
   deserve.

   Only where the row can afford it. A row of buttons is far wider than a
   column of them, and that width comes out of the nav between them — at
   1180px it pushed the links to a fourth line, and at 1024px to a sixth,
   taking the header from 163px to 308px. Below 1360 they stack again. */
@media (min-width: 1360px) {
  .header-actions {
    flex-direction: row;
    align-items: center;
    gap: .6rem;
  }
  .header-actions .button {
    min-height: 46px;
    padding-inline: 1.2rem;
    font-size: .95rem !important;
  }
}

/* --------------------------------------------------------------------------
   Header height (owner request): every pixel here is taken from the top of
   every page on every scroll, so it is worth being strict about.

   Two things set it, and which one wins depends on whether the page has been
   scrolled. Unscrolled it is the logo, whose height follows its width through
   the lockup's 358/409 aspect: at 12.5vw it stood 158px tall on a 1440px
   screen. Scrolled, the logo shrinks and the nav becomes the tallest column
   instead, at 138px for two rows of links.

   The nav rows are 44px tall because that is the comfortable touch target,
   and on a phone they still are — the drawer keeps its own 52px rows. With a
   mouse the target that matters is WCAG 2.5.8's 24px, so 34px here is still
   half again the requirement and takes 20px off the scrolled header.
   -------------------------------------------------------------------------- */
@media (min-width: 981px) {
  .site-header .haven-logo-stacked { width: clamp(132px, 10.4vw, 158px) !important; }
  .site-header .primary-nav a,
  .site-header .primary-nav .has-submenu > a { min-height: 34px !important; }
  .site-header .header-inner { padding-top: .5rem; padding-bottom: .55rem; }
}

/* --------------------------------------------------------------------------
   Interior page heroes: headline and lede step down so pages open at a
   readable scale rather than filling the viewport with type.
   -------------------------------------------------------------------------- */
.v3-page-hero h1 { font-size: clamp(2.2rem, 1.65rem + 1.6vw, 3.3rem); max-width: 20ch; }
.v3-page-hero .lede { font-size: 1.02rem; line-height: 1.68; max-width: 60ch; }
.v3-page-hero .v6-hero-note { font-size: .88rem; line-height: 1.6; }
.page-hero .page-title { font-size: clamp(2.2rem, 1.65rem + 1.6vw, 3.3rem); }
.page-hero .lede { font-size: 1.02rem; line-height: 1.68; }

/* The team hero's credential line reads as supporting detail, not an alert. */
.v6-hero-note { color: var(--muted) !important; font-weight: 400 !important; max-width: 62ch; }

/* --------------------------------------------------------------------------
   Team page is now the complete matching system (owner request): the full
   criteria form sits above the clinician row it ranks, so nobody has to
   leave the page to find a therapist.
   -------------------------------------------------------------------------- */
.team-matcher { display: grid; gap: 1.3rem; }
.team-matcher-form {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.5rem;
  align-items: start;
  position: static !important;
}
.team-matcher-intro { grid-column: 1 / -1; }
.team-matcher-intro h3 {
  margin: .2rem 0 .35rem;
  color: var(--haven-ink, #17332f);
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 500;
  line-height: 1.1;
}
.team-matcher-intro p { margin: 0; color: var(--muted); font-size: .92rem; }
.team-matcher-form .matcher-refine,
.team-matcher-form .matcher-actions,
.team-matcher-form .v3-privacy-note { grid-column: 1 / -1; }
.team-matcher-form .matcher-refine-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* The two controls in the first row sat at different heights because their
   labels do: "Age group" is one line and "Where will you usually be during
   sessions?" is two at most widths, so the select began a line above the state
   box. They are separate grid containers, so nothing made their internals line
   up — the row only aligned their tops.

   Subgrid gives them shared tracks: label, control, help. Each field spans
   three rows of the form and adopts the form's row sizes, so the labels share
   a row and end at the same baseline whether the longer one wraps to two lines
   or, at the widths where the panel is wide enough, one. The empty third row
   under the select costs nothing.

   The form's row gap becomes the gap inside a field, so the space between
   bands is put back as margins on the elements that follow. */
@media (min-width: 821px) {
  .team-matcher-form { row-gap: .48rem; }
  .team-matcher-form > label,
  .team-matcher-form > .v5-field {
    grid-row: span 3;
    grid-template-rows: subgrid;
    align-self: stretch;
    /* A subgrid keeps its own gutters, and these two carried different ones
       — .38rem against .48rem — which put the controls 2px out even with the
       labels sharing a row. */
    row-gap: .48rem;
  }
  .team-matcher-intro { margin-bottom: .52rem; }
  .team-matcher-form > .matcher-refine,
  .team-matcher-form > .matcher-actions,
  .team-matcher-form > .v3-privacy-note { margin-top: .52rem; }
}
.team-matcher .team-directory-head { margin-top: .2rem; }
/* Owner request: Our Team sits on a tinted ground rather than the site's
   paper, a very light blue-green chosen to lead into the shoreline artwork
   that closes the page. The section itself goes transparent so the tint runs
   from the header to the footer as one field; the cards and the matcher panel
   keep their paper, which is what makes them read as cards on it. */
body.is-team { --team-ground: #e9f2f1; background: var(--team-ground); }
body.is-team #app .section.team-page { background: transparent; }
/* The row of clinicians is the last thing on the page, and the closing
   invitation is drawn on a shoreline texture whose diagonal edge is pulled up
   over whatever precedes it. A caption used to stand in that overlap; with it
   gone the cards sat on the texture — measured, the band began 23px above the
   card row rather than clearing it. Padded to land where the homepage lands
   ahead of the same section, about 45px of paper between the last element and
   the edge of the artwork. */
/* !important because the phone stylesheet loads after this one and sets
   padding-block on .section outright; without it the narrow width kept the
   old figure and the first card sat on the curve. */
.section.team-page { padding-bottom: clamp(5.2rem, 3.2rem + 7vw, 10rem) !important; }
@media (max-width: 820px) {
  .team-matcher-form { grid-template-columns: minmax(0, 1fr); }
  .team-matcher-form .matcher-refine-fields { grid-template-columns: minmax(0, 1fr); }
}

/* The desktop row break has no role inside the mobile drawer. */
@media (max-width: 980px) { .nav-row-break { display: none; } }

/* ==========================================================================
   Footer — four bands over a coastal environmental layer

   Band 1 (.footer-top) carries brand, navigation, and the "Begin here"
   panel, and is the ONLY band the artwork can touch: the scene is absolutely
   positioned inside it, so grass and horizon can never end up behind the
   contact details, the safety note, or the legal links. Bands 2-4 each paint
   their own solid ground for the same reason.

   To change the artwork, change --footer-scene-image below. Nothing else
   depends on which file it is.
   ========================================================================== */
.site-footer {
  --footer-scene-image: url("/assets/images/footer-coastline.webp");
  --footer-ground: #1e2e28;
  position: relative;
  isolation: isolate;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background: var(--footer-ground) !important;
}

/* ---- Band 1: brand, navigation, begin ------------------------------------ */
.footer-top {
  position: relative;
  overflow: hidden;
  padding-top: clamp(2.2rem, 3.6vw, 3.2rem);
  padding-bottom: clamp(.5rem, 1vw, .9rem);
  background: linear-gradient(180deg, #22352f 0%, #1e2e28 100%);
  /* Contains the scene's blend mode below, so it composites against this
     band's gradient rather than against whatever is behind the footer. */
  isolation: isolate;
}
.footer-scene {
  /* Spans the whole band rather than a strip along its foot. The drawing is
     2400x750 and was being cropped by `cover` into a band a fifth that tall,
     so almost all of it was thrown away to show one horizontal slice. Given
     the full height it sits at something closer to its own proportions and
     reads as the ground the footer stands on. The mask still keeps it out of
     the text at the top. */
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--footer-scene-image) center bottom / cover no-repeat;
  /* The artwork was here all along and rendering; it just could not be seen.
     It is a pale line drawing sitting on its own near-black ground, and it
     was being painted at 55% opacity over a footer of almost exactly that
     darkness. Compositing it that way pulled the pale ink down toward the
     background instead of lifting it off: the whole scene ended up spanning
     luminance 29-70 against a ground of 41, a separation of 29 out of 255.
     Nothing was wrong with the file, and no amount of opacity would have
     fixed it — more opacity brings the drawing's dark ground along with the
     lines.

     screen keeps only what is lighter than the ground, which is exactly the
     ink and none of the paper it was drawn on. */
  opacity: 1;
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.14) 42%, rgba(0,0,0,.6) 72%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.14) 42%, rgba(0,0,0,.6) 72%, #000 100%);
}
.footer-main {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  /* Five blocks across one row leaves little room for air between them, and
     the words matter more than the air. */
  gap: clamp(1rem, 1.9vw, 1.8rem);
  align-items: start;
}
/* The nav column carries the two longest link labels on the site
   ("Frequently Asked Questions", "Crisis & Emergency Resources") in two
   sub-columns, so a twelfth of the grid each was not enough and both wrapped
   to a second line. It takes a column back from the brand block, which needs
   less now that it holds three short contact lines rather than a paragraph.

   Three lists now, not two: the policy links used to be a row of their own
   below everything, which cost the footer its own height plus the gap above
   it to say six short things. Beside the other lists they cost nothing — the
   brand block is the tallest column either way.

   Five blocks across one row is more than the reading container was sized
   for, and the labels here are full page names rather than abbreviations, so
   the footer takes the wider measure and steps its link type down a little.
   Both are in service of the same thing: no label breaking across two lines
   at any desktop width. */
/* The wide measure sits the content close to the viewport edge, closer than
   anywhere else on the site. Nudged in — all three rows together, so their
   left edges stay on one line. */
.site-footer .footer-main.container,
.site-footer .footer-safety-inner.container,
.site-footer .footer-bottom.container { width: min(calc(100% - 4.6rem), 1480px); }
.site-footer .footer-list a { font-size: .87rem; }
.footer-brand-column { grid-column: span 3; }
.footer-nav-column {
  grid-column: span 6;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.7rem, 1.3vw, 1.2rem);
}
/* Equal halves split the column evenly regardless of what is in them, which
   left "Crisis & Emergency Resources" and "Frequently Asked Questions" a few
   pixels short and broke both onto a second line. Sized to their contents
   instead, each list takes the width its longest label actually needs. Only
   where there is room to give: below this the equal split is the safer
   behaviour. */
/* auto, not equal shares: "Crisis & Emergency Resources" needs half again
   the width of "Our Team", and splitting the row evenly gave the long column
   too little while the short one kept space it had no use for. auto hands
   each list its content width where there is room and shrinks them together
   where there is not, so the labels hold to one line as far down as the row
   can carry them. */
@media (min-width: 1101px) {
  .footer-nav-column { grid-template-columns: repeat(3, auto); }
}
@media (min-width: 901px) {
  .site-footer .footer-list a { min-height: 30px; padding-block: .18rem; }
  .site-footer .footer-heading { margin-bottom: .35rem !important; }
  /* The contact lines carried the same 44px target, and three of them set
     the height of the whole footer — the brand block is its tallest column. */
  .footer-brand-column address.footer-contact a { min-height: 26px; }
  .footer-brand-column address.footer-contact { gap: .2rem; margin-top: .55rem; }
}
.footer-begin { grid-column: span 3; }

.site-footer .footer-logo-artwork.haven-logo-stacked { width: min(108px, 100%) !important; height: auto; }
.footer-brand-column > p.footer-brand-line {
  margin: .4rem 0 .15rem !important;
  max-width: none !important;
  color: #F4F1E8 !important;
  font-family: var(--font-display) !important;
  font-size: 1.6rem !important;
  line-height: 1.05 !important;
}

/* Psychology Today: the badge arrives from a third-party script, so the box
   is reserved up front and a plain link stands in when it does not load.
   An empty labelled block is never left on the page. */
/* Contact details sit under the wordmark, where the tagline used to be. They
   had a band of their own across the full width of the footer; as three lines
   in a column they cost no height at all and put the practice's phone,
   address and email beside the mark they belong to. */
.footer-brand-column address.footer-contact {
  display: grid;
  gap: .34rem;
  margin-top: .9rem;
  font-style: normal;
}
.footer-brand-column address.footer-contact a > span:last-child { text-wrap: balance; }
.footer-brand-column address.footer-contact a {
  display: inline-flex;
  align-items: flex-start;
  gap: .55rem;
  /* Solid, not 80% white. Translucent glyphs let the ground through
     themselves, so the drawing behind them lowers their contrast as well as
     the background's — measured, these two lines came out at 3.3:1 over the
     brightest grass rather than the 4.1 the colour value suggested. */
  color: #f2f6f1 !important;
  font-size: .88rem;
  line-height: 1.45;
  transition: color 160ms ease;
}
.footer-brand-column address.footer-contact a:hover,
.footer-brand-column address.footer-contact a:focus-visible { color: #FFFDF9 !important; }
.footer-brand-column .footer-ic { margin-top: .16rem; }
/* Between 1101 and 1320 the row is tight enough that the street line breaks
   on its own, putting the address on three lines rather than the two the
   explicit break defines, and the longest labels start folding. A little
   less type holds both.

   Giving the consultation card a row of its own was the other candidate and
   it read better, but it cost 288px of footer height at 1280 — more than the
   whole rearrangement saved. Not worth it to avoid a two-line button. */
@media (min-width: 1101px) and (max-width: 1320px) {
  .footer-brand-column address.footer-contact a { font-size: .81rem; }
  .site-footer .footer-list a { font-size: .83rem; }
}
/* The separator between contact items belongs to the row layout these used
   to sit in. Stacked in a column it renders as a stray tick floating to the
   left of the second line. */
.footer-brand-column address.footer-contact a + a::before { content: none; }

/* Owner request: the mark, the slogan and the contact details are one batch
   of information, so they are centred in their column instead of stacked
   along its left edge, with the logo centred over the slogan it belongs to.

   The contact lines need the extra rule: they are grid items, and a grid item
   stretches to its track. Left as they were, three full-width rows would have
   put their icons back on the column's left edge under a centred logo. Each
   shrink-wraps to its own content instead and centres as a unit, so icon and
   text stay together. */
.footer-brand-column { text-align: center; }
.footer-brand-column .footer-brand-lockup { justify-content: center; }
.footer-brand-column address.footer-contact { justify-items: center; }


.footer-verification { margin-top: 0; }
/* The policy links are the things a visitor looks up rather than the things
   they browse, so they sit a shade quieter than the two lists beside them. */
.site-footer .footer-policy-list a { color: #a9b1ab !important; }
.site-footer .footer-policy-list a:hover,
.site-footer .footer-policy-list a:focus-visible { color: #FFFDF9 !important; }
.footer-pt-seal {
  margin: 0 !important;
  min-height: 62px;              /* reserved so a late badge cannot shift the page */
  display: flex;
  align-items: center;
}
.footer-pt-seal img, .footer-pt-seal iframe { max-width: 172px; height: auto; }
.footer-pt-fallback { display: none; }
.footer-verification.is-fallback .footer-pt-seal { display: none; }
.footer-verification.is-fallback .footer-pt-fallback {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 44px;
  color: rgba(240, 244, 238, .82) !important;
  font-size: .9rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-verification.is-empty { display: none; }

.site-footer .footer-heading {
  margin: 0 0 .8rem !important;
  color: #F4F1E8 !important;
  font-family: var(--font-sans) !important;
  font-size: .68rem !important;
  font-weight: 700 !important;
  letter-spacing: .15em;
  text-transform: uppercase;
}
/* Each row was 48px: a 44px touch target plus the gap. That is the right
   size under a thumb and it is not what these are used with — on a pointer
   the target that matters is WCAG 2.5.8's 24px, so 30px still clears it by a
   quarter and the three lists read as lists rather than as spaced-out
   buttons. The phone rules below keep the full 44. */
.site-footer .footer-list { display: grid; gap: .05rem; margin: 0; padding: 0; list-style: none; }
.site-footer .footer-list a {
  display: inline-block;
  padding: .12rem 0;
  color: rgba(240, 244, 238, .82) !important;
  font-size: .95rem !important;
  line-height: 1.35;
  transition: color 160ms ease;
}
.site-footer .footer-list a:hover,
.site-footer .footer-list a:focus-visible { color: #FFFDF9 !important; }

/* The begin panel: a quiet step up from the ground, not a glass card. */
.footer-begin {
  padding: clamp(1.1rem, 2vw, 1.5rem);
  border: 1px solid rgba(175, 196, 181, .28);
  border-radius: 1rem;
  background: rgba(255, 255, 255, .045);
}
.footer-begin-title {
  margin: 0 0 .45rem !important;
  color: #F4F1E8 !important;
  font-family: var(--font-display) !important;
  font-size: 1.4rem !important;
  font-weight: 500 !important;
  line-height: 1.12 !important;
}
.footer-begin-copy {
  margin: 0 0 1rem !important;
  max-width: 42ch;
  color: rgba(240, 244, 238, .76) !important;
  font-size: .9rem !important;
  line-height: 1.55 !important;
}
.footer-begin-cta {
  display: inline-flex !important;
  min-height: 46px;
  padding: .7rem 1.25rem !important;
  background: #F4F1E8 !important;
  border-color: #F4F1E8 !important;
  color: #1B2B26 !important;
  font-size: .92rem !important;
}
.footer-begin-cta:hover,
.footer-begin-cta:focus-visible { background: #FFFDF9 !important; border-color: #FFFDF9 !important; }
.footer-begin .footer-portal { margin: .8rem 0 0 !important; }
.footer-begin .footer-portal a {
  /* Inline, so the arrow stays with the last word. As a flex child it was
     being stretched across the card and the arrow ended up alone at the far
     right of a line the words had already left. */
  display: inline !important;
  color: #cad0ca !important;
  font-size: .88rem !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-begin .footer-portal a:hover,
.footer-begin .footer-portal a:focus-visible { color: #FFFDF9 !important; }

address.footer-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .1rem clamp(1.2rem, 3vw, 2.6rem);
  padding-block: .55rem;
  font-style: normal;
}
address.footer-contact a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding: .2rem 0;
  color: rgba(240, 244, 238, .82) !important;
  font-size: .92rem;
  line-height: 1.4;
  transition: color 160ms ease;
}
address.footer-contact a + a { position: relative; }
address.footer-contact a + a::before {
  content: "";
  position: absolute;
  left: clamp(-1.3rem, -1.5vw, -.6rem);
  top: 50%;
  height: 1.05em;
  width: 1px;
  background: rgba(255, 255, 255, .16);
  transform: translateY(-50%);
}
address.footer-contact a:hover,
address.footer-contact a:focus-visible { color: #FFFDF9 !important; }
.site-footer .footer-ic { flex: 0 0 auto; width: 15px; height: 15px; margin: 0; color: rgba(175, 196, 181, .85); }
.site-footer .footer-ic svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---- The safety note and the closing row ---------------------------------
   These were two darker bands stacked under the first, each with its own
   ground and its own border. Three grounds meant three sets of vertical
   padding and two hard edges for six lines of text; on one ground the same
   content sits closer together and the drawing runs behind all of it. What
   separated them by colour now separates them by a hairline. */
.footer-safety-inner,
.site-footer .footer-bottom {
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.footer-safety-inner {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding-block: .7rem;
  margin-top: clamp(1rem, 2.2vw, 1.8rem);
}
.footer-safety-ic { flex: 0 0 auto; width: 16px; height: 16px; margin-top: .18rem; color: rgba(217, 183, 159, .9); }
.footer-safety-ic svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.footer-safety-inner p {
  margin: 0;
  color: #b9c1bb;
  font-size: .86rem;
  line-height: 1.55;
}
.footer-safety-inner strong { color: #F4F1E8; font-weight: 600; }
.footer-safety-inner a {
  color: #F4F1E8 !important;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer-safety-inner a:hover, .footer-safety-inner a:focus-visible { color: #FFFDF9 !important; }

.site-footer .footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding-block: .7rem !important;
  gap: .5rem 2rem !important;
}
.site-footer .footer-bottom p {
  margin: 0;
  color: #9ca59f;
  font-size: .9rem;
}
/* The Psychology Today mark ends the footer opposite the copyright line,
   which is where a verification badge belongs — a credential, not a piece of
   the brand block. Capped in height so the third-party seal, when it loads,
   cannot stretch this bar. */
.site-footer .footer-bottom .footer-verification {
  display: flex;
  align-items: center;
  margin: 0;
}
.site-footer .footer-bottom .footer-pt-seal { margin: 0; }
.site-footer .footer-bottom .footer-pt-seal img,
.site-footer .footer-bottom .footer-pt-seal iframe { max-width: 150px; max-height: 38px; height: auto; }
.site-footer a:focus-visible { outline: 2px solid #C9D8CE; outline-offset: 3px; border-radius: 3px; }

/* ---- Responsive ---------------------------------------------------------- */
/* Three columns hold well below the desktop breakpoint; stacking the brand
   full-width too early was adding roughly 300px of footer for no gain. */
@media (max-width: 1100px) {
  .footer-main { gap: clamp(1.2rem, 2.4vw, 2rem); }
  .footer-brand-column { grid-column: span 3; }
  .footer-nav-column { grid-column: span 6; }
  .footer-begin { grid-column: span 3; }
}
@media (max-width: 900px) {
  .footer-brand-column { grid-column: span 12; }
  .footer-nav-column { grid-column: span 12; }
  .footer-begin { grid-column: span 12; }
  .footer-top { padding-bottom: clamp(2.2rem, 5vw, 3rem); }
}
@media (max-width: 760px) {
  .footer-main { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .footer-brand-column, .footer-nav-column, .footer-begin { grid-column: auto; }
  .footer-nav-column { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-top { padding-bottom: clamp(2rem, 7vw, 2.8rem); }
  /* The coastline artwork is a 3.2:1 panorama — dune grass at one edge, a
     lighthouse at the other, and open sky between. A phone shows a 390px
     slice of 2400px, which lands on empty sky and reads as a smudge rather
     than a drawing, so it does not run at all here (owner request). */
  .footer-scene { display: none; }

  /* Three link columns in a two-column grid leave Policies alone on the
     second row, hard against the left edge under two full-width rows above
     it. It takes the whole row and centres in it instead. */
  .footer-nav-column > div:nth-child(3) { grid-column: 1 / -1; text-align: center; }
  /* Six policy links stacked single-file were six rows of footer on their
     own. As a two-column list they are three, and the block still centres in
     the row because an inline-grid is an inline-level box. Column flow, not
     row flow: reading down the first column and then the second matches the
     order the links are written in, so the visual order and the tab order
     stay the same. Left-aligned inside the columns — centred text in two
     narrow columns gives the eye no edge to come back to. */
  .footer-nav-column > div:nth-child(3) .footer-list {
    display: inline-grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(3, auto);
    /* .site-footer .footer-list sets gap:.05rem !important for the stacked
       case, which collapses the gutter between these two columns to 2px. */
    row-gap: .05rem !important;
    column-gap: clamp(1.1rem, 6vw, 2.4rem) !important;
    text-align: left;
  }
  .footer-begin-cta { width: 100%; justify-content: center; }
  address.footer-contact { flex-direction: column; align-items: flex-start; gap: 0; padding-block: .35rem; }
  address.footer-contact a + a::before { display: none; }
  .site-footer .footer-bottom { flex-direction: column; align-items: flex-start; }
  .site-footer .footer-legal { justify-content: flex-start; }
  .site-footer .footer-legal a,
  .site-footer .footer-bottom p { font-size: 1rem !important; }
  .footer-safety-inner p { font-size: .92rem; }
}
/* Two link columns still fit at common phone widths; collapsing them at
   430px was stacking nine links and adding most of the mobile footer. */
@media (max-width: 360px) {
  .footer-nav-column { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
  /* "Privacy & Confidentiality" beside "Good Faith Estimate" needs more width
     than this has; the pair would wrap and cost back the rows it saved. */
  .footer-nav-column > div:nth-child(3) .footer-list { grid-auto-flow: row; grid-template-rows: none; }
}

/* ── Journal search ───────────────────────────────────────────────────────
   119 entries is more than a chip row can navigate, so the archive gets a
   text search that sits with the topic chips and shares their behaviour: a
   query collapses the page to one flat list of matches, exactly as choosing
   a topic already does. */
.journal-controls {
  display: grid;
  gap: 1.1rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(1.8rem, 3vw, 2.6rem);
}
.journal-controls .journal-filter-row {
  padding-bottom: 0;
  border-bottom: 0;
}
.journal-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: .6rem;
  max-width: 30rem;
  padding: .1rem .55rem .1rem .9rem;
  background: var(--paper, #fff);
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.journal-search:focus-within {
  border-color: rgba(43, 61, 54, .55);
  box-shadow: 0 0 0 3px rgba(43, 61, 54, .12);
}
.journal-search-icon {
  flex: none;
  color: var(--ink-soft);
  opacity: .75;
}
.journal-search-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: .68rem 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: .98rem;
}
.journal-search-input:focus { outline: none; }
.journal-search-input::placeholder { color: var(--ink-soft); opacity: .8; }
/* The type=search widget draws its own clear affordance in WebKit, which
   would sit beside ours. */
.journal-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.journal-search-clear {
  flex: none;
  padding: .42rem .85rem;
  border: 0;
  border-radius: 999px;
  background: rgba(43, 61, 54, .08);
  color: var(--ink);
  font: inherit;
  font-size: .84rem;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background .18s ease;
}
.journal-search-clear:hover { background: rgba(43, 61, 54, .16); }
.journal-result-count {
  margin: 0;
  color: var(--ink-soft);
  font-size: .92rem;
}
@media (max-width: 760px) {
  .journal-search { max-width: none; }
}

/* ── Article header: title beside the cover ───────────────────────────────
   Owner request (Aug 18): the stacked, centred header pushed the first
   paragraph of every entry a long way down the page. Title, standfirst and
   byline now sit on the left with the cover image alongside them, so the
   article body starts near the top of the first screen. Stacks back to one
   column below 900px, where side-by-side has no room to work. */
.article-hero-inner.article-hero-split {
  max-width: 1180px;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(2rem, 4vw, 3.4rem);
  align-items: center;
  text-align: left;
}
.article-hero-split .article-hero-text > :last-child { margin-bottom: 0; }
/* The centred layout set these to auto margins and a centred measure. */
.article-hero-split .article-title {
  margin-inline: 0;
  max-width: 18ch;
}
.article-hero-split .lede {
  margin-inline: 0;
  max-width: 44ch;
}
.article-hero-split .article-byline { justify-content: flex-start; }
.article-hero-split .article-cover {
  max-width: none;
  margin: 0;
}
/* A tighter band now that the content sits two-across rather than stacked. */
.article-hero:has(.article-hero-split) { padding-block: clamp(2.4rem, 5vw, 4.4rem); }

@media (max-width: 900px) {
  .article-hero-inner.article-hero-split {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
  }
  .article-hero-split .article-title { max-width: 100%; }
  .article-hero-split .lede { max-width: 60ch; }
}

/* ── Immersive pages: a full-bleed photographic ground ────────────────────
   Two pages — the FAQ and Fees & Insurance — sit over one fixed image
   instead of the usual banded sections. The machinery is shared; each page
   supplies its own photograph and its own scrim, because how much of the
   image can be allowed through depends entirely on how dense that page's
   reading is.

   A position:fixed layer rather than background-attachment:fixed, which iOS
   Safari does not honour — this holds still while the page scrolls on every
   browser.

   Two layers: the photograph, then a cream scrim that lifts contrast for
   dark text without washing the image out. Content that carries sustained
   reading sits on a translucent panel, so the image stays open around it
   without ever being the thing text is read against.

   To change either photograph, change --scene-image on that page's class.
   Nothing else depends on which file it is. */
body.has-scene {
  background: var(--paper);
}
body.has-scene::before,
body.has-scene::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}
body.has-scene::before {
  z-index: -2;
  background: var(--scene-image) var(--scene-position, center 32%) / cover no-repeat;
}
body.has-scene::after {
  z-index: -1;
  background: var(--scene-scrim);
}
/* The page's own bands would otherwise paint over the photograph. */
body.has-scene #app .page-hero,
body.has-scene #app .section,
body.has-scene #app .section-paper,
body.has-scene #app .section-sand,
body.has-scene #app .section-mist { background: transparent !important; }
body.has-scene #app .page-hero::before,
body.has-scene #app .page-hero::after { display: none; }

body.is-faq {
  --scene-image: url("/assets/images/hero.webp");
  --scene-scrim: linear-gradient(
    180deg,
    rgba(251, 248, 243, .22) 0%,
    rgba(251, 248, 243, .44) 40%,
    rgba(251, 248, 243, .66) 100%);
}

/* Vertical rhythm, for both scene pages.
   They inherited the site-wide band spacing, which is tuned for pages whose
   sections are visually distinct blocks. Here every band is transparent over
   one photograph, so the padding that normally separates two backgrounds
   separates nothing — it just pushes the content down.
   Measured at 1440px it left 156px between the lede and the first question
   (the hero's 70px bottom padding stacked on the section's 86px top) and
   241px before the closing card. Both are roughly halved; the photograph
   carries the breathing room that the whitespace used to.

   !important because mobile-overrides.css loads after this file and pins
   these bands for every page. These selectors are the more specific of the
   two, so marking them lets the FAQ opt out without disturbing the defaults
   every other page depends on. */
body.has-scene #app .page-hero {
  padding-block: clamp(2.4rem, 4.4vw, 3.6rem) clamp(1.1rem, 1.8vw, 1.6rem) !important;
}
body.has-scene #app .section,
body.has-scene #app .section-paper {
  padding-block: clamp(1.2rem, 2.2vw, 1.9rem) clamp(2.6rem, 4.5vw, 3.6rem) !important;
}
/* The lede sets up what follows directly, so it should not float away. */
body.has-scene #app .page-hero .lede { margin-bottom: 0; }
/* .faq-list centres itself at 920px while the eyebrow, heading, and lede are
   left-aligned in a wider container, so the panel started 150px to the right
   of the words introducing it and read as a separate, floating object. On one
   left edge the page is a single column and the photograph keeps the right
   side of the frame to itself. */
/* The FAQ is now the same accordion the Fees page uses: separate cards,
   one open at a time, rather than one long panel of hairline-divided rows.
   Same component, so the two pages behave identically and there is one
   implementation to maintain.

   The weights match Fees for the same reasons — a closed card is a heading
   and nothing else, so it sits nearly solid and the questions read cleanly;
   the open one steps back toward the photograph to mark it as the one you
   chose, stopping where its answer still measures above AA. */
/* The FAQ borrows the Fees page's rail wholesale — same component, same
   sticky behaviour — so a reader who has run out of listed questions has
   somewhere to take the one they actually came with. */
.faq-shell .fees-main { display: block; }
.faq-shell .faq-crisis-note { margin-top: 1.4rem; }

body.is-faq .faq-list {
  display: grid;
  gap: clamp(.7rem, 1.4vw, 1.05rem);
  /* .faq-list centres itself at 920px while the eyebrow, heading and lede are
     left-aligned in a wider container, so the cards started 150px right of
     the words introducing them. On one left edge the page is a single column
     and the photograph keeps the right of the frame to itself. */
  margin-inline: 0;
}
body.is-faq #app .acc-card { transition: background 180ms ease; }
body.is-faq #app .acc-card:has(.acc-toggle[aria-expanded="false"]) {
  background: rgba(255, 253, 249, .94);
}
body.is-faq #app .acc-card:has(.acc-toggle[aria-expanded="false"]):hover,
body.is-faq #app .acc-card:has(.acc-toggle:focus-visible) {
  background: rgba(255, 255, 252, .99);
}
body.is-faq #app .acc-card:has(.acc-toggle[aria-expanded="true"]) {
  background: rgba(255, 253, 249, .8);
}
@supports not selector(:has(*)) {
  body.is-faq #app .acc-card { background: rgba(255, 253, 249, .92); }
}
body.is-faq #app .acc-card {
  border: 1px solid rgba(23, 51, 47, .08);
  box-shadow: 0 18px 44px -30px rgba(18, 42, 37, .3);
}
/* A question is not a section heading. The card markup is shared with Fees,
   where each title introduces a whole block of policy and is sized for that;
   here there are fourteen of them and at that size a phone shows one and a
   half. Stepped down so the list can be scanned. */
body.is-faq .faq-list .acc-title {
  font-size: clamp(1.1rem, .98rem + .55vw, 1.5rem);
  line-height: 1.28;
}
body.is-faq .acc-panel p { max-width: 68ch; margin: 0; color: var(--muted); }
body.is-faq .acc-panel a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
body.is-faq .faq-crisis-note {
  margin-top: 1.4rem;
  padding: .7rem 1.1rem;
  border-radius: 999px;
  background: rgba(255, 253, 249, .82);
  display: inline-block;
}
/* The closing consultation card stays a solid card — it is the one element
   that should sit on top of the scene rather than within it. */
body.is-faq #app .cta-band { box-shadow: 0 24px 60px -34px rgba(18, 42, 37, .55); }

/* ── Fees & Insurance: the same ground, a heavier hand ────────────────────
   The FAQ is a short list of collapsed rows, so most of its page is open
   image. Fees is the densest page on the site — three rate tables, a
   worked reimbursement example, and several hundred words of policy — and
   this is the page where someone is trying to work out whether they can
   afford care. Legibility beats atmosphere here, so the same treatment is
   applied with more weight: a stronger scrim, and every block on its own
   panel rather than prose sitting straight on the photograph.

   A different photograph from the FAQ's, so the two pages are not the same
   page twice: the dune path, which is upright and reads as a way through. */
body.is-fees {
  /* The same coastline the FAQ stands on, at the owner's request, so the two
     immersive pages read as one place rather than two. The scrim and panel
     weights below still differ, because this page carries far more reading. */
  --scene-image: url("/assets/images/hero.webp");
  --scene-position: center 34%;
  --scene-position-sm: center 40%;
  --scene-scrim: linear-gradient(
    180deg,
    rgba(251, 248, 243, .40) 0%,
    rgba(251, 248, 243, .62) 34%,
    rgba(251, 248, 243, .80) 100%);
}
/* The page intro now opens the main column rather than sitting in a hero of
   its own, so it needs its own rhythm: the buttons were landing directly
   under the last line of the lede. */
.fees-intro { margin-bottom: clamp(1.4rem, 2.6vw, 2.2rem); }
.fees-intro .lede { margin-bottom: clamp(1.3rem, 2.2vw, 1.9rem); }
.fees-intro .page-hero-actions { margin-top: 0; }

/* Every block becomes a panel. The tinted ones already were; the rest were
   prose on the page's own background, which no longer exists. */
body.is-fees #app .acc-card,
body.is-fees #app .acc-card-tinted {
  /* Slimmer than they were. A collapsed card is one eyebrow and one line of
     heading, and it was carrying the padding of a card that had a whole
     section inside it. The type is unchanged; only the air around it. */
  --acc-pad: clamp(.85rem, 1.5vw, 1.15rem);
  --acc-pad-x: clamp(1.1rem, 2.2vw, 1.7rem);
  border: 1px solid rgba(23, 51, 47, .08);
  border-radius: 1.5rem;
  background: rgba(255, 253, 249, .82);
  box-shadow: 0 18px 44px -30px rgba(18, 42, 37, .3);
}
/* The tint that used to distinguish alternating blocks did its work against
   a plain background. Against a photograph the panel edge already separates
   them, and a second tone only muddies the picture behind it. */
body.is-fees #app .acc-card-tinted { background: rgba(252, 250, 245, .86); }

/* Collapsed, open, hovered — three weights, so the state of the list is
   legible at a glance rather than something you work out from the chevrons.
   A closed row is a heading and nothing else, so it sits nearly solid and
   the titles read cleanly. The open one steps back toward the photograph,
   which is what marks it as the one you chose; it stops at .78 because that
   is where the rate tables inside it still measure above AA, and the picture
   is not worth trading those numbers for. */
body.is-fees #app .acc-card,
body.is-fees #app .acc-card-tinted { transition: background 180ms ease; }
body.is-fees #app .acc-card:has(.acc-toggle[aria-expanded="false"]) {
  background: rgba(255, 253, 249, .94);
}
body.is-fees #app .acc-card:has(.acc-toggle[aria-expanded="false"]):hover,
body.is-fees #app .acc-card:has(.acc-toggle:focus-visible) {
  background: rgba(255, 255, 252, .99);
}
body.is-fees #app .acc-card:has(.acc-toggle[aria-expanded="true"]) {
  background: rgba(255, 253, 249, .78);
}
/* :has() is everywhere that matters now, but a browser without it should get
   the legible end of the range rather than the decorative one. */
@supports not selector(:has(*)) {
  body.is-fees #app .acc-card,
  body.is-fees #app .acc-card-tinted { background: rgba(255, 253, 249, .92); }
}
/* Rate tables carry the numbers someone is actually here for. */
body.is-fees #app .fee-table-wrap,
body.is-fees #app .fee-example {
  border-radius: 1rem;
  background: rgba(255, 254, 251, .78);
}
/* The rail card and the closing band stay solid — they sit on top of the
   scene rather than within it, the same exception the FAQ's CTA makes. */
body.is-fees #app .fees-rail-card,
body.is-fees #app .cta-band { box-shadow: 0 26px 60px -30px rgba(18, 42, 37, .5) !important; }

@media (max-width: 760px) {
  /* A phone shows one narrow column, so almost the whole viewport is
     reading. Both the scrim and the panels go heavier there. */
  body.is-fees {
    --scene-scrim: linear-gradient(
      180deg,
      rgba(251, 248, 243, .58) 0%,
      rgba(251, 248, 243, .78) 34%,
      rgba(251, 248, 243, .90) 100%);
  }
  body.is-fees #app .acc-card,
  body.is-fees #app .acc-card-tinted { background: rgba(255, 253, 249, .90); }
}
/* The state rules above are more specific than the phone block, so without
   these the open card would drop back to its desktop weight on the smallest
   screen — the one place the rate tables need the most help. Restated here
   rather than reordered, because the three-weight scale is the point and
   only its floor should move. */
@media (max-width: 760px) {
  body.is-fees #app .acc-card:has(.acc-toggle[aria-expanded="false"]) {
    background: rgba(255, 253, 249, .96);
  }
  body.is-fees #app .acc-card:has(.acc-toggle[aria-expanded="true"]) {
    background: rgba(255, 253, 249, .9);
  }
  body.is-faq #app .acc-card:has(.acc-toggle[aria-expanded="true"]) {
    background: rgba(255, 253, 249, .88);
  }
}

@media (max-width: 760px) {
  /* Portrait phones crop a wide photograph hard; favour the horizon, and
     lean the scrim heavier — a phone holds far less text per line, so the
     same picture sits directly behind far more of the reading. */
  body.has-scene::before { background-position: var(--scene-position-sm, center 38%); }
  body.is-faq {
    --scene-scrim: linear-gradient(
      180deg,
      rgba(251, 248, 243, .48) 0%,
      rgba(251, 248, 243, .72) 34%,
      rgba(251, 248, 243, .88) 100%);
  }
}
@media (prefers-contrast: more) {
  body.has-scene::after { background: rgba(251, 248, 243, .95); }
}
@media (prefers-reduced-motion: no-preference) {
  /* Nothing animates here; the fixed layer is the whole effect. */
  body.has-scene::before { will-change: auto; }
}


/* --------------------------------------------------------------------------
   Service pages: the "At a glance" band (owner request, applied to all five
   so they stay identical).

   What it was: four boxes each held to a 110px floor around one line of
   12.5px text, so the section was mostly empty box; a narrow dark panel
   floating beside them; and the full guide hidden behind a disclosure alone
   on a band of its own, 277px of page for a 60px control.

   What it is: the points are a list again, at a size meant to be read, in
   cards that stop where their text stops. The consultation panel takes the
   Fees and FAQ rail card's format, which is now the practice's house style
   for an aside that asks for the call. And the guide moves onto this band
   rather than paying for its own.
   -------------------------------------------------------------------------- */
.service-glance-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(288px, .34fr);
  /* 7rem at the wide end pushed the points into half the measure they had
     room for; the aside is a companion to this copy, not a separate column
     of the page. */
  gap: clamp(1.8rem, 3.4vw, 3.4rem);
  align-items: start;
}
.service-glance-copy .section-title { margin-bottom: 1.4rem; max-width: 18ch; }
.service-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.service-points li {
  position: relative;
  padding: 1rem 1.15rem 1rem 2.35rem;
  border: 1px solid var(--haven-line, var(--line));
  border-radius: 1rem;
  background: var(--cream);
  color: var(--text);
  font-size: .95rem;
  line-height: 1.5;
}
/* The marker was a bullet glyph in its own grid column, which set its own
   line height and left the text hanging beside it. Drawn instead, so it sits
   on the first line whatever the card does. */
.service-points li::before {
  content: "";
  position: absolute;
  left: 1.15rem;
  top: 1.5em;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--clay);
}
@media (max-width: 900px) {
  .service-glance-grid { grid-template-columns: minmax(0, 1fr); }
  .service-points { grid-template-columns: minmax(0, 1fr); }
}

/* The consultation aside, in the rail card's language. */
.service-consult-card {
  position: sticky;
  top: 100px;
  overflow: hidden;
  padding: 1.7rem 1.5rem 1.6rem;
  border-radius: 1.6rem;
  background: linear-gradient(180deg, #22352f 0%, #1a2a25 100%);
  box-shadow: 0 26px 52px rgba(18, 42, 37, .26);
  color: #fffdf9;
}
.service-consult-card::after {
  content: "";
  position: absolute;
  width: 15rem;
  height: 15rem;
  right: -6rem;
  top: -7rem;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 50%;
  pointer-events: none;
}
.service-consult-card .eyebrow-light { color: rgba(255, 255, 255, .62); }
.service-consult-card h2 {
  margin: .35rem 0 .7rem;
  color: #f7f4ec;
  font-family: var(--font-display);
  font-size: 1.95rem;
  font-weight: 400;
  line-height: 1.02;
}
.service-consult-card p {
  margin: 0 0 1.15rem;
  color: rgba(255, 255, 255, .74);
  font-size: .92rem;
  line-height: 1.55;
}
.service-consult-card .button-light {
  display: block;
  background: #fffdf9 !important;
  border-color: #fffdf9 !important;
  color: #1d2f29 !important;
  text-align: center;
}
.service-consult-card .button-light:hover { background: #efe9dc !important; border-color: #efe9dc !important; }
@media (max-width: 900px) {
  .service-consult-card { position: static; }
}

/* The guide now shares the band above it, so it needs the separation a band
   used to give it for free. */
.service-glance .v3-deep-dive {
  margin-top: clamp(2rem, 3.6vw, 3.2rem);
  border-radius: 1.3rem;
  background: var(--cream);
}
.service-glance .v3-deep-dive summary { padding: 1.15rem 1.4rem; }
.service-glance .v3-deep-dive[open] summary { padding-bottom: .9rem; }
.service-glance .v3-deep-dive .prose { padding: 0 1.4rem 1.8rem; }
.service-glance .v3-deep-dive-mark {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 1.3rem;
  line-height: 1;
  transition: transform 200ms ease;
}


/* Therapy Services index: larger cards (owner request). Five services across
   one row put each card at 228px on a 1440 screen — a thumbnail of a
   photograph and two lines of type. Three across gives each one 455px, so the
   picture is a picture and the description has a measure to sit on. The
   second row carries the remaining two at the same width rather than
   stretching them to fill, which would make two services look bigger than
   the other three. */
@media (min-width: 1101px) {
  .service-index-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; }
  .service-index-body { gap: .45rem; padding: 1.15rem 1.3rem 1.3rem; }
  .service-index-body h2 { font-size: 1.5rem; }
  .service-index-body p { font-size: .92rem; }
  .service-index-link { font-size: .82rem; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .service-index-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
}

/* The DBT skills group hero is a portrait photograph in a landscape frame, so
   cover crops it top and bottom. Centred, the crop took the top off two of
   the four faces; 20% keeps the whole group with headroom above them. */
.v3-page-hero figure img.hero-group-photo { object-position: center 20%; }

/* The four module cards are cream, and on any pale ground they read as a
   slightly lighter region of it rather than as objects on it. Deepening the
   sand twice did not fix that — cream on #ece1d3 is still only about a 7%
   step in luminance. The ground goes to the same forest the homepage matcher
   uses, which is the largest separation available without inventing a colour,
   and the four artworks become framed prints on a dark wall (owner request).
   Card interiors stay cream, so only the section's own heading needs to
   invert. */
.dbt-modules-section {
  background: linear-gradient(120deg, rgba(255, 255, 255, .05), transparent 45%), #42574e !important;
}
.dbt-modules-section .v3-section-heading h2,
.dbt-modules-section .v3-section-heading p { color: #fffdf9 !important; }   /* 7.64 on #42574e */
.dbt-modules-section .v3-section-heading .eyebrow { color: #cfe0d4 !important; }  /* 5.8 */
.dbt-modules-section .dbt-module-card {
  border-color: rgba(255, 253, 249, .16);
  box-shadow: 0 20px 44px rgba(10, 24, 20, .30);
}

/* The DBT artwork fills its frames like any other picture here. It was
   previously the tight crop, letterboxed against a flat #f0e4d8 band: the
   artwork's paper is vignetted, so no single flat colour sits beside it
   without reading as a frame (owner request). The uncropped file is 16:10
   already, and its own paper runs to the edge. */
.v3-page-hero figure img.hero-diagram { object-position: center 50%; }


/* --------------------------------------------------------------------------
   Homepage matcher: one screenful (owner request).

   It measured 1085px against a 900px viewport, so the row of clinicians —
   the part that answers the question the form asks — always began below the
   fold. Nothing here is removed; the section is sized against the viewport
   instead of against nothing, so on a short laptop it compresses rather than
   spilling.

   The card is the only piece with real height in it, and it is a square
   photograph, so its width is its height. Capping that width by svh is what
   makes the section track the screen: 30svh is 270px on a 900px viewport and
   230 on a 768px one, where the fixed 360px cap had it at 305 either way.
   -------------------------------------------------------------------------- */
@media (min-width: 981px) {
  .v3-matcher-section { padding-block: clamp(2.4rem, 4.4svh, 4rem) clamp(2.4rem, 4.4svh, 4rem) !important; }
  .v3-matcher-section .v3-matcher-layout { gap: clamp(1.2rem, 2.4svh, 1.9rem); }
  .v3-matcher-section .v3-quick-results.is-team-row .v3-quick-card {
    flex: 0 0 calc((100% - var(--team-gap) * 6) / 7);
  }
  /* The form is the other half of the band, and four of its five rows were
     sized for a comfortable touch target on a page where this one is driven
     by a mouse. Trimmed to what the controls need; the two selects keep a
     46px box, still well above the 24px pointer minimum. */
  .v3-matcher-section .v3-quick-form { row-gap: .55rem; }
  .v3-matcher-section .v3-quick-form select,
  .v3-matcher-section .v3-quick-form .v5-state-combobox input { min-height: 46px; }
  .v3-matcher-section .matcher-clear-link { min-height: 30px; }
  .v3-matcher-section .v3-quick-results-head > span:first-child { min-height: 0; }
  /* The band's height was set by this one link's 44px target, against a label
     and two 36px arrows. */
  .v3-matcher-section .v3-quick-results-head a { min-height: 32px; }
  /* The band above the row carried a 44px arrow pair, which set its height
     against a label and a link that need less. 36px keeps a comfortable mouse
     target — well clear of the 24px pointer minimum — and gives the row back
     the difference. */
  .v3-matcher-section .team-row-arrow { width: 36px; height: 36px; }
  .v3-matcher-section .v3-quick-results-head { margin-bottom: .1rem; }
  .v3-matcher-section .v3-quick-results.is-team-row { padding-bottom: .2rem; }
  .v3-matcher-section .v3-quick-body { padding: .6rem .8rem .7rem; }
  .v3-matcher-section .v3-quick-results.is-team-row .v3-quick-card p { margin: 0 0 .35rem; }
}
/* On a short screen the display heading is the last thing with slack in it.
   Only below 880px tall, so the type on a normal desktop is untouched. */
/* The header stays on screen at 121px, so the section is competing for
   100svh minus that. Below 1000px tall the display heading and the row's
   footnote give up what they can before the photographs do. */
@media (min-width: 981px) and (max-height: 1000px) {
  .v3-matcher-section .v3-matcher-copy h2 { font-size: clamp(2rem, 5.4svh, 2.9rem) !important; }
  .v3-matcher-section .v3-privacy-note { margin-top: .3rem; font-size: .72rem; line-height: 1.4; }
  .v3-matcher-section .v3-matcher-layout { gap: clamp(1rem, 2svh, 1.5rem); }
  .v3-matcher-section { padding-block: clamp(1.9rem, 3.5svh, 3.2rem) clamp(1.9rem, 3.5svh, 3.2rem) !important; }
  .v3-matcher-section .v3-quick-body { padding: .5rem .75rem .6rem; }
  .v3-matcher-section .v3-quick-results.is-team-row .v3-quick-card h3 { font-size: 1.05rem; }
  .v3-matcher-section .v3-quick-results.is-team-row .v3-quick-card p { font-size: .78rem; line-height: 1.28; }
  .v3-matcher-section .v3-quick-open { font-size: .72rem; }
  .v3-matcher-section .v3-quick-results.is-team-row .v3-quick-card {
    flex: 0 0 calc((100% - var(--team-gap) * 6) / 7);
    /* Seven across fixes the width, so the card can only give up height, and
       the photo is where the height is. */
    --team-photo-ratio: 1 / 1.14;
  }
}
@media (min-width: 981px) and (max-height: 880px) {
  .v3-matcher-section .v3-quick-results.is-team-row .v3-quick-card {
    flex: 0 0 calc((100% - var(--team-gap) * 6) / 7);
    --team-photo-ratio: 1 / 1.02;
  }
}


/* --------------------------------------------------------------------------
   /scheduling — the address on the practice's printed materials.

   Someone here has scanned a QR code off a flyer. They are not browsing, so
   the page is one screen: the button that books, what the fifteen minutes
   involve, and a way to reach a person if they would rather. The orientation
   band below it is for the visitor who wants to know who they are booking
   with before they do.
   -------------------------------------------------------------------------- */
.scheduling-page { background: var(--mist); }
.scheduling-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr);
  gap: clamp(1.8rem, 4vw, 3.6rem);
  align-items: start;
}
.scheduling-lead h1 {
  margin: .3rem 0 .9rem;
  color: var(--haven-ink, var(--ink));
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 1.7rem + 2vw, 3.5rem);
  font-weight: 400;
  letter-spacing: -.03em;
  line-height: 1;
  max-width: 15ch;
  text-wrap: balance;
}
.scheduling-lead .lede { max-width: 44ch; font-size: 1.05rem; line-height: 1.6; }
.scheduling-actions { margin: 1.5rem 0 1rem; }
/* The one thing the page exists for. Sized so it is unmistakable on a phone
   held at arm's length, which is how a scanned code is read. */
.scheduling-actions .button {
  padding: 1.05rem 2.2rem;
  font-size: 1.02rem;
}
.scheduling-alt { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.6; }
.scheduling-alt a { color: var(--clay-dark); text-underline-offset: 3px; }

.scheduling-facts {
  padding: clamp(1.4rem, 2.6vw, 2rem);
  border-radius: 1.6rem;
  background: var(--paper);
  box-shadow: 0 20px 46px rgba(18, 42, 37, .09);
}
.scheduling-facts h2 {
  margin: 0 0 .9rem;
  color: var(--haven-ink, var(--ink));
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1.1;
}
.scheduling-steps {
  display: grid;
  gap: .9rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.scheduling-steps li {
  display: grid;
  gap: .15rem;
  padding-left: 2.1rem;
  position: relative;
}
.scheduling-steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: .05rem;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--mist-deep);
  color: var(--ink-soft);
  font-size: .78rem;
  font-weight: 700;
}
.scheduling-steps strong { color: var(--ink); font-size: .96rem; }
.scheduling-steps span { color: var(--muted); font-size: .88rem; line-height: 1.5; }
.scheduling-note {
  margin: 1.1rem 0 0;
  padding-top: .9rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.5;
}
.scheduling-note a { color: var(--clay-dark); }

.scheduling-orient .section-title { margin: .3rem 0 .7rem; max-width: 18ch; }
.scheduling-orient .lede { max-width: 56ch; }
.scheduling-links { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }

@media (max-width: 900px) {
  .scheduling-shell { grid-template-columns: minmax(0, 1fr); }
  .scheduling-lead h1 { max-width: none; }
  .scheduling-actions .button { width: 100%; text-align: center; }
}


/* --------------------------------------------------------------------------
   Fees: the two questions the administrative team is actually asked.

   "Do you take insurance" is the most common call the practice gets, and the
   page used to answer it only by omission — it named the two plans Haven is
   in network with and left every other card-holder to infer. The second
   question, "what will it cost me", was answered further down among the rate
   tables. Both are now the first thing on the page, before the accordions,
   because a visitor who gets the answer here never has to phone for it.
   -------------------------------------------------------------------------- */

/* The practice's third-most-common phone call is "is there in-person
   availability". Only two clinicians work in the office and both keep a
   waitlist for it — a structural fact rather than a status that fluctuates,
   so it is stated here rather than tracked per clinician. */
.location-inperson-note {
  margin-top: 1rem;
  padding: .9rem 1.1rem;
  border-left: 3px solid var(--clay);
  background: var(--cream);
  color: var(--text);
  font-size: .92rem;
  line-height: 1.55;
}
.location-inperson-note strong { color: var(--ink); }


/* --------------------------------------------------------------------------
   Clinician profile: the licensure question, asked on the visitor's behalf.

   Prospective clients do not know to ask whether a clinician is licensed
   where they live — the practice's administrator says so — and a profile
   found by searching the clinician's name never passes through the matcher,
   which is the one place the site asks. So the profile asks it: one field,
   one plain answer, and a route onward when the answer is no.
   -------------------------------------------------------------------------- */
.state-check {
  margin: clamp(1.4rem, 2.6vw, 2rem) 0 0;
  padding: clamp(1.1rem, 2.2vw, 1.5rem) clamp(1.1rem, 2.2vw, 1.6rem);
  border: 1px solid var(--line);
  border-radius: 1.2rem;
  background: var(--cream);
}
.state-check h2 {
  margin: 0 0 .35rem;
  color: var(--haven-ink, var(--ink));
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.15;
}
.state-check-lede { margin: 0 0 .85rem; color: var(--muted); font-size: .88rem; line-height: 1.5; }
.state-check .v5-state-combobox { max-width: 22rem; }
.state-check-answer:empty { display: none; }
.state-check-answer {
  margin: .9rem 0 0;
  padding-left: .85rem;
  border-left: 3px solid var(--line-strong);
  font-size: .95rem;
  line-height: 1.55;
}
.state-check.is-yes .state-check-answer { border-left-color: var(--sage); }
.state-check.is-no .state-check-answer { border-left-color: var(--clay); }
.state-check-answer strong { color: var(--ink); }
.state-check-answer a { color: var(--clay-dark); text-underline-offset: 3px; }

/* PSYPACT explained where it applies, since the acronym means nothing to
   someone holding an insurance card in Ohio. */
.provider-psypact {
  margin: 1rem 0 0;
  padding: .85rem 1rem;
  border-radius: .9rem;
  background: var(--mist);
  color: var(--text);
  font-size: .9rem;
  line-height: 1.55;
}
.provider-psypact strong { color: var(--ink); }


/* --------------------------------------------------------------------------
   Three ways in.

   The practice has three real doors and the site used to show one. Booking a
   consultation is self-serve; calling reaches the administrator, who can
   confirm insurance and state and book an intake directly; and the secure
   message is the written channel the site had been missing — every page warns
   against putting clinical detail in ordinary email while offering a mailto
   beside the warning.

   Laid out as equals rather than as a ranked funnel, because they are not
   exclusive: the administrator can book a consultation too.
   -------------------------------------------------------------------------- */
.start-doors {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.9rem, 1.8vw, 1.4rem);
  margin: clamp(1.4rem, 2.6vw, 2rem) 0 .9rem;
}
.start-door {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: clamp(1.05rem, 2vw, 1.35rem);
  border: 1px solid var(--line);
  border-radius: 1.1rem;
  background: var(--paper);
  box-shadow: 0 14px 32px rgba(18, 42, 37, .06);
}
.start-door h3 {
  margin: 0;
  color: var(--haven-ink, var(--ink));
  font-family: var(--font-display);
  font-size: 1.16rem;
  font-weight: 500;
  line-height: 1.2;
}
.start-door p { margin: 0 0 .5rem; color: var(--muted); font-size: .88rem; line-height: 1.5; }
/* The button sits on the floor of each card so three cards of unequal copy
   still line their actions up. */
.start-door .button { margin-top: auto; width: 100%; text-align: center; }
.start-doors-note {
  margin: 0;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.55;
}
@media (max-width: 900px) {
  .start-doors { grid-template-columns: minmax(0, 1fr); }
}

/* The sentence that travels with the primary call to action. */
.consult-line {
  margin: .9rem 0 .8rem;
  max-width: 46ch;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.55;
}
.consult-line strong { color: var(--ink); }

/* A contact-form link set inline in a sentence rather than as a button. */
.button-link-inline {
  padding: 0;
  border: 0;
  background: none;
  color: var(--clay-dark);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.button-link-inline:hover { color: var(--ink); }
.scheduling-doors { margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }


/* --------------------------------------------------------------------------
   The phone, given the prominence it earns on each device.

   Calling is the only route that reaches an intake directly — the
   administrator can confirm insurance, state and scheduling and book it,
   without spending a consultation slot. But the right prominence differs by
   device: on a phone it is one tap, on a desktop it asks the visitor to pick
   up a different object. So the desktop carries a line and the phone carries
   a button.
   -------------------------------------------------------------------------- */
@media (min-width: 981px) {
  .site-header .header-actions { position: relative; }
  /* Out of flow, not merely above. In flow the line's nowrap width became the
     column's intrinsic width — it took 811px, squeezed the nav from 645 to
     368 and pushed it from two rows to four, adding 37px to a header that had
     just been trimmed. Absolute keeps the sentence and costs the layout
     nothing: the CTA column is tight left-to-right and roomy top-to-bottom.

     Above the buttons, in space the block reserves for it (owner request).

     Putting it above previously clipped it off the top of the window. Above
     only has room while the two buttons sit side by side; under 1366px the
     CTA label no longer fits beside the portal button, the pair stacks, the
     block grows from 46px to 96px, and its top edge lands at y=18 — less
     than the line's own height. The line then drew at a negative y and the
     window cut it in half, which is the strip that kept appearing above the
     header.

     The cure is to reserve the space rather than hang in it. The block pads
     its own top by the line's height, and the line sits at the top of that
     padding: out of flow, so it still contributes no width and cannot
     squeeze the nav, but occupying room that exists rather than room it
     hoped was there. It cannot overflow, because the space is its own. */
  .site-header .header-actions { padding-top: 1.65rem; }
  .site-header .header-call {
    position: absolute;
    right: 0;
    top: 0;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--muted);
    font-size: .95rem;
    line-height: 1.25;
    text-decoration: none;
    white-space: nowrap;
  }
  .site-header .header-call svg {
    width: 15px; height: 15px;
    fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .site-header .header-call strong { color: var(--ink); font-weight: 700; }
  .site-header .header-call:hover strong,
  .site-header .header-call:focus-visible strong { color: var(--clay-dark); }
  /* Cream lettering was fine while the line sat low in the hero, over the
     darker part of the sky. Moved up beside the buttons it crosses the pale
     top of the frame instead, and on the two scene pages it crossed cream
     scrim over pale sand — which is what made it vanish on Fees and FAQ, and
     measured about 1.9:1 on the homepage too.

     So it goes dark wherever the header is transparent, with the same light
     shadow the navigation already carries over these backdrops. Dark is also
     the safer of the two choices in principle: the homepage backdrop is a
     looping video, so a figure measured off one frame guarantees nothing,
     and every one of those frames sits under a cream wash. */
  body.is-home .site-header:not(.is-scrolled) .header-call,
  body.has-scene .site-header:not(.is-scrolled) .header-call {
    color: #3f544c;
    text-shadow: 0 1px 2px rgba(250, 247, 240, .9);
  }
  body.is-home .site-header:not(.is-scrolled) .header-call strong,
  body.has-scene .site-header:not(.is-scrolled) .header-call strong { color: var(--ink); }
}
.header-call { display: none; }

/* The sticky bar becomes two actions, the call first. */
.mobile-call-cta { display: none; }
/* Superseded by .mobile-cta-bar below: the two actions are flex items of
   one fixed container now, not two fixed boxes placed beside each other. */
body.hide-mobile-cta .mobile-call-cta { display: none !important; }

/* The doors need the full measure — three cards in the contact grid's narrow
   left column came out 130px wide, with the button text breaking across four
   lines. Their own band above the grid, and the section below it loses its
   top padding so the two read as one page rather than two. */
.contact-doors-section { padding-bottom: 0 !important; }
.contact-doors-section + .section { padding-top: clamp(1.8rem, 3.4vw, 2.8rem) !important; }
.contact-doors-section .section-title { margin: .3rem 0 0; max-width: 20ch; }


/* --------------------------------------------------------------------------
   DBT referral path.

   Referred clients are the practice's second most common enquiry and they
   arrive already decided — a psychiatrist or a treatment team has recommended
   DBT, so the page's job is not to explain the programme but to say whether
   there is room. The aside speaks to the referring clinician, who may well
   read this page and had nothing addressed to them anywhere on the site.
   -------------------------------------------------------------------------- */
.dbt-referral {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .5fr);
  gap: clamp(1.4rem, 3vw, 3rem);
  align-items: start;
}
.dbt-referral-copy .section-title { margin: .3rem 0 .8rem; max-width: 20ch; }
.dbt-referral-copy p { max-width: 56ch; font-size: 1rem; line-height: 1.62; }
.dbt-referral-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.3rem; }
.dbt-referral-aside {
  padding: clamp(1.2rem, 2.4vw, 1.7rem);
  border: 1px solid var(--line);
  border-radius: 1.2rem;
  background: var(--cream);
}
.dbt-referral-aside h3 {
  margin: 0 0 .5rem;
  color: var(--haven-ink, var(--ink));
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.15;
}
.dbt-referral-aside p { margin: 0 0 .6rem; color: var(--muted); font-size: .9rem; line-height: 1.55; }
.dbt-referral-contact { font-size: .95rem !important; line-height: 1.9 !important; }
.dbt-referral-contact a { color: var(--clay-dark); text-underline-offset: 3px; }
@media (max-width: 900px) {
  .dbt-referral { grid-template-columns: minmax(0, 1fr); }
}

/* The cost frame belongs where money is already the subject. */

/* --------------------------------------------------------------------------
   Therapy service pages: a tighter band rhythm (owner request).

   These are the longest pages on the site. Individual therapy carries three
   sections, DBT and groups carry seven, and every one of them paid the full
   --space-7 band top and bottom: 86px a side at 1440, 172px per seam, which
   summed to 1172px on /dbt — 19% of the page, a screen and a half of nothing.

   Two separate problems, so two rules. The first is simply that the band is
   generous for a page this long; it comes down to about 62px. The second is
   that a seam between two sections of the SAME colour has no edge to justify
   its size — /dbt runs paper into paper and mist into mist, and there the two
   paddings read as one undifferentiated gap. Those seams give up a further
   third. Where the colour does change the full band stays, because that seam
   is doing visible work.
   -------------------------------------------------------------------------- */
body.is-service .section {
  padding-block: clamp(2.5rem, 1.7rem + 2.4vw, 4rem);
}
body.is-service .section-paper + .section-paper,
body.is-service .section-mist + .section-mist,
body.is-service .section-sand + .section-sand {
  padding-top: clamp(1.6rem, 1.1rem + 1.5vw, 2.6rem);
}
/* The hero already sits tighter than the bands; it only needs to come down in
   proportion so the page does not open with its widest gap. */
body.is-service .v3-page-hero.section {
  padding-block: clamp(2.2rem, 1.5rem + 2vw, 3.4rem);
}
/* The accordion is a footnote to the card grid above it, not a peer of it,
   and it was carrying a full band's worth of margin on its own. The grid's
   row gap comes in proportionally. */
body.is-service .service-glance-grid { row-gap: clamp(1.5rem, 1.1rem + 1.2vw, 2.2rem); }
body.is-service .v3-deep-dive { margin-top: clamp(1.4rem, 1rem + 1.2vw, 2.2rem); }

/* --------------------------------------------------------------------------
   Licensure, said before the click (owner request).

   SimplePractice asks for the client's state on the booking widget's last
   screen, after a clinician, a service, a calendar slot and the whole
   prescreener — and that order cannot be changed. So the site carries the
   constraint instead: a line beside the routes in, and the full check on the
   two pages people reach without having browsed a clinician first.
   -------------------------------------------------------------------------- */
.licensure-note {
  margin: clamp(.9rem, 1.8vw, 1.3rem) 0 0;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.55;
}
.licensure-note strong { color: var(--ink); font-weight: 700; }
.licensure-note a { color: var(--clay-dark); text-decoration: underline; text-underline-offset: .18em; }
.licensure-note a:hover,
.licensure-note a:focus-visible { color: var(--ink); }

/* On the doors the line is a caption to the whole set, so it centres under
   them rather than hanging off the last column. */
.contact-licensure { text-align: center; max-width: 44rem; margin-inline: auto; }

/* The practice-level check is the page's own section rather than a footnote
   inside one, so it drops the card's top margin and centres its column. */
.state-check-practice {
  margin-top: 0;
  max-width: 40rem;
  margin-inline: auto;
}
.contact-state-section .state-check-practice .v5-state-combobox { max-width: 100%; }

/* The credentials roster inside the team drawer. Seven names stacked in one
   column ran the drawer well past a screen and made the reader scroll to
   finish a list whose whole job is to be taken in at once, so it runs two
   across and each entry carries a face. */
.team-modal-list {
  list-style: none;
  margin: clamp(1.1rem, 2.2vw, 1.6rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .35rem clamp(1.2rem, 3vw, 2.2rem);
}
@media (max-width: 620px) { .team-modal-list { grid-template-columns: minmax(0, 1fr); } }
.team-modal-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .8rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--line);
}
/* The last row of a two-column grid is two cells, not one. */
.team-modal-list li:nth-last-child(-n+2):nth-child(odd),
.team-modal-list li:last-child { border-bottom: 0; }
@media (max-width: 620px) {
  .team-modal-list li:nth-last-child(-n+2):nth-child(odd) { border-bottom: 1px solid var(--line); }
  .team-modal-list li:last-child { border-bottom: 0; }
}
.team-modal-face {
  position: relative;
  width: 54px;
  height: 54px;
  flex: none;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--mist-deep, #e2ebe5);
  color: var(--ink-soft, #536b60);
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: .04em;
}
.team-modal-face img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.team-modal-text { display: grid; gap: .05rem; min-width: 0; }
.team-modal-list strong { color: var(--ink); font-size: .95rem; line-height: 1.2; }
.team-modal-role { color: var(--ink-soft, var(--muted)); font-size: .82rem; line-height: 1.25; }
.team-modal-license {
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

/* --------------------------------------------------------------------------
   "What makes Haven different": the first proof after the hero.

   The section had the content but not the presentation. Three things were
   wrong. The tints were set at 8-10% alpha, which is not a colour so much as
   a rumour of one, so four cards read as one pale band. The four reveals all
   crossed the observer's threshold together and animated as a single slab —
   fixed in the reveal observer, which now offsets each arrival. And the hero
   above ends hard: cinematic video, then a flat ground, with nothing carrying
   between them.

   The thread is the hero's own beacon. Three rays sweep across the video at
   -23, -8 and 13 degrees; the same three angles are drawn here as static
   light, faint enough to register as atmosphere rather than as an image. Not
   animated — the hero already supplies the motion, and a second looping
   element would compete with it.
   -------------------------------------------------------------------------- */
.why-haven { position: relative; isolation: isolate; overflow: hidden; }
/* The section's ground is artwork now rather than CSS light: soft sculpted
   waves, supplied by the owner, filling the band edge to edge from its foot
   up to the wave that separates it from the hero. It covers rather than
   fades — a fade would leave flat colour along the top and put back the band
   this was meant to close — so the seam is handled at the other end instead,
   by giving the hero's wave the artwork's own top tone.

   Behind the content, above the section's background colour: the -1 sits
   inside the stacking context that `isolation` creates, so it cannot escape
   under the page. The colour underneath is set to the artwork's average, so
   a viewport wider than the file's 3:1 has nothing jarring to show. */
.why-haven { background: #f1efe9 !important; }

/* The flat band under the wave, properly this time (owner request).
 *
 * The wave is one SVG path in a 0 0 1920 240 viewBox, and its lowest point
 * sits at y=186 of 240. The remaining 54 units are flat fill — 49px at
 * 1440 — and that fill is the strip that kept reading as a band: it is
 * already visually inside the section below, but it was being painted in
 * flat colour while the artwork started underneath it.
 *
 * Tinting the fill to match was the earlier attempt and it could not work,
 * because the artwork has visible texture at that height and a flat colour
 * has none. So the artwork itself extends up through the wave's full height
 * and is masked by the wave's own path, which puts its top edge exactly on
 * the curve. Below the curve the two are one continuous layer; above it the
 * mask is transparent and the video shows. Underneath, in the strip, sits
 * the hero's flat fill in the same #f1efe9 the artwork is composited over,
 * so the tone matches on both sides of the section boundary.
 *
 * This needs overflow to be visible: the layer is 200-275px taller than its
 * own section. Nothing else in .why-haven is positioned outside it, and the
 * layer gains no width, so there is nothing to spill sideways. */
.why-haven { overflow: visible; }
.why-haven::before {
  --why-wave-h: clamp(200px, 15vw, 275px);
  --why-wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 240' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 150 C180 108 380 92 560 108 C760 126 900 178 1100 186 C1300 194 1520 150 1680 104 C1790 72 1870 40 1920 16 L1920 240 L0 240 Z'/%3E%3C/svg%3E");
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * var(--why-wave-h));
  bottom: 0;
  z-index: -1;
  pointer-events: none;
  background: url("/assets/images/why-haven-waves.webp") center / cover no-repeat;
  /* Quieter ground (owner request). The waves were competing with the cards
   * sitting on them; at this strength they read as a texture in the paper
   * rather than as a picture behind the text. */
  opacity: .5;
  -webkit-mask-image: var(--why-wave-mask), linear-gradient(#000, #000);
  mask-image: var(--why-wave-mask), linear-gradient(#000, #000);
  -webkit-mask-size: 100% var(--why-wave-h), 100% calc(100% - var(--why-wave-h) + 1px);
  mask-size: 100% var(--why-wave-h), 100% calc(100% - var(--why-wave-h) + 1px);
  -webkit-mask-position: center top, center bottom;
  mask-position: center top, center bottom;
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
}
/* mobile-overrides.css swaps the wave for a shorter one drawn on a different
 * path at this width, so the mask has to swap with it. Reusing the desktop
 * path here would put the mask's edge above the wave's along the left half,
 * and the artwork would show over the video instead of under the curve. */
@media (max-width: 760px) {
  .why-haven::before {
    --why-wave-h: 138px;
    --why-wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 760 150' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 128 C170 118 305 111 430 116 C548 120 636 100 694 64 C720 48 744 32 760 16 L760 150 L0 150 Z'/%3E%3C/svg%3E");
  }
}

/* The tints were 15-19% washes, which is why the waves ran straight through
   the copy — every card was mostly background. They keep their hue and stop
   being transparent: a near-solid panel in a paler version of the same
   colour, so the ground reads around the cards rather than through them
   (owner request). The borders come down in proportion, because an edge only
   has to separate the card from the paper now, not carry the card's colour
   on its own. */
.why-haven .why-card--mist {
  background: rgba(228, 235, 229, .93) !important;
  border-color: rgba(83, 107, 96, .26) !important;
}
.why-haven .why-card--sand {
  background: rgba(245, 232, 226, .93) !important;
  border-color: rgba(143, 84, 66, .24) !important;
}

/* Two of the four open a drawer. They carry a little more weight than the
   two that only state something, so the hint line is not the only signal
   that they can be pressed. */
.why-haven button.why-card-link {
  box-shadow: 0 12px 30px rgba(32, 52, 48, .10);
}
.why-haven button.why-card-link:hover,
.why-haven button.why-card-link:focus-visible {
  box-shadow: 0 18px 40px rgba(32, 52, 48, .16);
}

/* The hint was the affordance and it was invisible until hover, which meant
   it never appeared at all on a touch screen — there is no hover there to
   reveal it. With two of the four cards now opening a drawer, that line is
   the only thing distinguishing a card you can press from a card that just
   states something, so it rests visible and hover only strengthens it. */
.why-haven .why-card-hint { opacity: .78; transform: none; }
.why-haven button.why-card-link:hover .why-card-hint,
.why-haven button.why-card-link:focus-visible .why-card-hint { opacity: 1; }

/* The marks were 42px discs holding a 21px glyph — small enough on a card
   this size to read as chrome rather than as part of the idea. */
.why-haven .why-card-mark { width: 52px; height: 52px; }
.why-haven .why-card-mark svg { width: 27px; height: 27px; }

/* The wave at the foot of the hero is a paper-coloured blob rising into the
   video, and it was still cream (#fffdf8) after the section beneath it was
   given its own sage ground (#eef0ed). The two met at the hero's bottom edge
   with nothing to disguise the change, so a flat band sat between the wave
   and the textured ground below it — the right family of colour, visibly not
   the same colour, and without the light the section carries.

   The wave should read as the next section rising into the hero rather than
   as a shape of its own, so it takes that section's ground, and the same
   beacon angles are laid over it at half strength. Both live inside
   overflow:hidden parents and cannot share one layer, so the texture is
   repeated rather than continued; at these opacities the seam is not
   findable. The blob is rotated -0.7deg, which skews the rays by the same
   amount and is not perceptible. */
/* The wave is .v4-video-hero::after — an inline SVG path — not .v3-hero-curve,
   which is display:none at every width. A rule aimed at the curve paints
   nothing, so the tint belongs in the SVG's own fill above. */

/* --------------------------------------------------------------------------
   Homepage team row: seven across, no carousel (owner request).

   The row was built to show about 4.45 cards with a peek, and arrows to reach
   the rest. With seven clinicians on a 1397px container that only ever
   overflowed by 10px — the arrows moved the row a sliver and then sat
   disabled. So they are gone, and the flex basis divides by seven instead:
   everyone visible, no scrolling, and the affordance question disappears
   with the affordance.

   The width per card is then fixed by arithmetic at about 190px, so a bigger
   headshot cannot come from a wider card. It comes from a taller one: the
   photo was a square, and a 4:5 portrait is both larger and the better shape
   for a face. The body gives back what the photo takes — it was carrying a
   full band of padding under two short lines — so the card ends up slightly
   shorter than before with a headshot a quarter taller.
   -------------------------------------------------------------------------- */
@media (min-width: 981px) {
  .v3-matcher-section .v3-quick-results.is-team-row {
    --team-gap: .65rem;
    overflow-x: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
  }
  .v3-matcher-section .v3-quick-results.is-team-row .v3-quick-card {
    scroll-snap-align: none;
  }
  /* The base rule sets 1/1 with !important, so this has to answer in kind.
     The value is a variable because the short-viewport queries above trade
     photo height for fit, and they can only do that if they can reach it. */
  .v3-matcher-section .v3-quick-results.is-team-row .v3-quick-photo {
    aspect-ratio: var(--team-photo-ratio, 4 / 5) !important;
  }

  /* Under the headshot sat ~150px holding a name, a role and a link. */
  .v3-matcher-section .v3-quick-results.is-team-row .v3-quick-body {
    gap: .05rem;
    padding: .55rem .6rem .6rem;
  }
  .v3-matcher-section .v3-quick-results.is-team-row .v3-quick-card h3 { font-size: 1rem; line-height: 1.12; }
  .v3-matcher-section .v3-quick-results.is-team-row .v3-quick-card p { margin: 0 0 .3rem; font-size: .76rem; line-height: 1.28; }
  .v3-matcher-section .v3-quick-results.is-team-row .v3-quick-open { font-size: .78rem; }

  /* The copy above it loses its slack so the row rises toward the summary
     line on the left and the "Clear my answers" link on the right.

     Tightening the prose alone does nothing: the heading, lede and form sit
     in one grid and the form is the taller of the two columns, so the block
     is exactly as tall as the form. Both have to come in. */
  .v3-matcher-section .v3-matcher-layout { gap: clamp(1rem, 1.8vw, 1.5rem); }
  .v3-matcher-section .v3-matcher-copy { row-gap: .35rem; }
  .v3-matcher-section .v3-matcher-copy > .eyebrow { margin-bottom: .2rem; }
  .v3-matcher-section .v3-matcher-copy > p:not(.eyebrow):not(.v3-privacy-note) { margin: .35rem 0 0; }
  .v3-matcher-section .v3-quick-form { gap: .5rem; }
  .v3-matcher-section .v3-quick-form .v5-field { gap: .25rem; }
  .v3-matcher-section .v3-quick-form label > span { line-height: 1.25; }
}
@media (min-width: 981px) {
  /* Reclaiming the growth the taller photo cost. The card body was 137px for
     three short elements, 14px of which was bare margin between them; the
     "View profile" control keeps its 44px because that is the pointer
     minimum, not padding. */
  .v3-matcher-section .v3-quick-results.is-team-row .v3-quick-card h3 { margin-top: 0 !important; }
  .v3-matcher-section .v3-quick-results.is-team-row .v3-quick-open { margin-top: .25rem !important; }
  /* And the form gives up the rest between its rows. */
  .v3-matcher-section .v3-quick-form { gap: .38rem; }
  .v3-matcher-section .v3-quick-form .v5-field { gap: .15rem; }
  /* The section plus the tall header has to clear the viewport: 779 + 121
     was exactly 900, so the original was tuned to the pixel and the taller
     headshot spent the whole margin. The band gives it back with a little
     to spare rather than trading the headshot away again. */
  .v3-matcher-section.section { padding-block: clamp(1.2rem, 2.4svh, 2.2rem) !important; }
}

/* The drawer scrolls, and two things about that were wrong. The close control
   is absolutely positioned inside the scrolling box, so scrolling carried it
   off the top and left no visible way out but the Escape key or a click on
   the backdrop — neither of which announces itself. And the actions at the
   foot sat just past the fold, so the drawer opened showing half a button.
   The control sticks to the top of its own scroll box, and the roster and its
   surrounding prose give up enough to bring the buttons back into view. */
.service-modal .modal-close {
  position: sticky;
  top: 0;
  float: right;
  z-index: 2;
}
.team-modal .service-modal-lede { font-size: .95rem; line-height: 1.5; margin-bottom: 0; }
.team-modal .team-modal-list { margin-top: clamp(.8rem, 1.6vw, 1.1rem); }
.team-modal .team-modal-list li { padding: .45rem 0; }
.team-modal .service-modal-summary { margin: .9rem 0 0; font-size: .88rem; line-height: 1.5; }
.team-modal .service-modal-actions { margin-top: 1rem; }

/* --------------------------------------------------------------------------
   Homepage location band: less air (owner request).

   594px tall, of which 171px was the band's own padding and another 22px was
   margin hanging below the last button with nothing under it. The copy column
   is the taller of the two, so it is the column that decides the height, and
   its internal gaps came in with the padding.
   -------------------------------------------------------------------------- */
.v4-home-location.section { padding-block: clamp(2.2rem, 3.6vw, 3.2rem) !important; }
.v4-home-location .v3-location-copy > .eyebrow { margin-bottom: .6rem; }
.v4-home-location .v3-location-copy > h2 { margin-bottom: .5rem; }
.v4-home-location .v3-location-copy > p:not(.eyebrow) { margin-bottom: .75rem; }
.v4-home-location .v4-address { margin-block: .75rem; }
/* Nothing follows the buttons, so the space under them is not separating
   anything from anything. */
.v4-home-location .hero-actions { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Therapy services index: three up, the remainder centred (owner request).

   Five services in an auto-fill grid left two hanging at the left of the
   second row with a card-shaped hole beside them. Six tracks with each card
   spanning two gives the same three across, and lets a trailing pair start
   half a card in so it sits under the middle of the row above.

   The offset is conditional on the fourth card also being second-to-last,
   which is only true at exactly five. Add a sixth service and the rule stops
   applying on its own, leaving a clean three-by-two.
   -------------------------------------------------------------------------- */
@media (min-width: 861px) {
  .service-index-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .service-index-card { grid-column: span 2; }
  .service-index-card:nth-child(4):nth-last-child(2) { grid-column: 2 / span 2; }
}

/* --------------------------------------------------------------------------
   "Individual therapy or comprehensive DBT?": one screenful (owner request).

   875px against an 830px window, so the section could never be read whole.
   The content is a heading and two cards; the rest was structure — 171px of
   band padding, and a 113px gap between the heading and the cards that no
   longer had anything to separate once the heading tightened.
   -------------------------------------------------------------------------- */
.path-compare-section.section { padding-block: clamp(1.8rem, 3vw, 2.6rem) !important; }
.path-compare-section .v3-section-heading { margin-bottom: clamp(1.1rem, 2.2vw, 1.8rem); }
.path-compare-section .v3-section-heading > .eyebrow { margin-bottom: .5rem; }
.path-compare-section .v3-section-heading > h2 { margin-bottom: .5rem; }
.path-compare-section .path-card { padding: clamp(1.3rem, 2.4vw, 1.75rem); }
/* On a laptop with a taskbar the usable height is nearer 830 than 900, and
   the heading is the only element left with real height in it — two lines of
   display type at 119px. It comes down there rather than the cards, which
   carry the actual comparison. */
@media (min-width: 861px) and (max-height: 880px) {
  .path-compare-section .v3-section-heading > h2 { font-size: clamp(1.9rem, 4.6svh, 2.6rem) !important; }
  .path-compare-section .v3-section-heading > p { font-size: .95rem; line-height: 1.5; }
  .path-compare-section.section { padding-block: clamp(1.4rem, 2.4vw, 2rem) !important; }
}

/* --------------------------------------------------------------------------
   Location page map band: give the copy column its width back (owner request).

   The grid ran minmax(260px,.55fr) against minmax(0,1.45fr), so the map took
   roughly three-quarters of a 1400px container and the copy got 364px. Into
   that went a 65px display heading and a 36px address — four lines of title
   and four of address at 1440px, five and four at 1180px, for a band 911px
   tall that was mostly wrapped text beside a map with room to spare.

   The map is a locator, not the subject of the page: it only has to show
   which plaza the suite is in. So it gives width back and loses some height
   with it. The 15ch cap on .section-title is site-wide and would re-create
   the squeeze on its own once the column is wide enough, so it lifts here.
   Mobile is untouched — mobile-overrides.css stacks this grid at 980px with
   !important, below anything set here.
   -------------------------------------------------------------------------- */
.v4-location-map-grid {
  grid-template-columns: minmax(340px, 1fr) minmax(0, 1.05fr);
  gap: clamp(1.75rem, 3.4vw, 3.4rem);
  align-items: center;
}
.v4-location-map-copy .section-title { max-width: 22ch; }
.v4-full-map,
.v4-full-map iframe { min-height: 440px; }

/* --------------------------------------------------------------------------
   Location page: less air (owner request).

   Four sections across 3146px, of which 657px was section padding alone —
   a fifth of the scroll with nothing in it. This page carries less copy than
   any other landing page on the site, so the standard band rhythm stops
   reading as breathing room and starts reading as empty.

   The details grid was the other half. It ran a 100px gutter between two
   short columns, and set both column headings at --step-4 — 65px, the same
   size as the page's own H1. A subsection heading competing with the title
   is what pushed "Care from a private place that works for you." onto three
   lines. It steps down to --step-3, which is still the largest thing in the
   band without pretending to be the page title.

   The closing band carries 72px of padding on every side and a third --step-4
   heading. That is sized for pages you reach after a long scroll; here it is
   the fourth thing on a short page, so both come down.
   -------------------------------------------------------------------------- */
body.is-location .section { padding-block: clamp(2.4rem, 1.6rem + 2.3vw, 3.8rem); }
body.is-location .v3-page-hero { padding-block: clamp(2.1rem, 1.4rem + 1.9vw, 3.2rem); }
body.is-location .v3-page-hero-grid { gap: clamp(1.6rem, 1.1rem + 2.6vw, 3.4rem); }
body.is-location .v3-location-details { gap: clamp(1.5rem, 1rem + 2.4vw, 3.2rem); }
body.is-location .v3-location-details .section-title,
body.is-location .v4-location-map-copy .section-title {
  margin-bottom: .7rem;
  font-size: var(--step-3);
}
body.is-location .cta-band-inner { padding: clamp(1.6rem, 3.4vw, 2.8rem); }
body.is-location .cta-band h2 { font-size: var(--step-3); }

/* ==========================================================================
   Fees: paying for care (owner request).

   What was here: one white rounded rectangle holding two columns of prose,
   "Will insurance cover it?" beside "What will it cost me?". Everything a
   visitor came for was in it — including the two prices most of them opened
   the page to find — and all of it was set as running text at the same
   weight, so the prices were a clause in the third sentence of the second
   column. It read as an administrative notice rather than as an answer.

   It is now a guide with a shape: an intro, three payment pathways, then the
   clinician matrix the pathways point at, then the practical help, then two
   small utility notes. Five surfaces rather than one box, because a single
   panel is what made the hierarchy flat in the first place.

   Three pathways, not three identical cards. They sit in one band divided by
   hairlines, and the private-pay track is wider and tinted, because published
   prices are the reason most people are on this page. Its two rates are read
   out of feeSchedule, so the pathway and the rate table cannot disagree.

   No counts anywhere. "Four of seven clinicians" was true when written and
   false a week later; the matrix is the source of truth and it is right there
   under the pathway that points to it.
   ========================================================================== */
.pay-guide {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  margin: clamp(1.4rem, 2.6vw, 2rem) 0 clamp(1.6rem, 3vw, 2.4rem);
}
/* The matrix is the first table on this page that is open rather than inside
   a collapsed accordion, so it is the first one whose min-width has to be
   survivable. A grid item's automatic minimum size is its min-content, and
   min-content here is the table's 620-720px floor — so without this the
   matrix pushed .fees-main and every accordion beside it past the viewport
   on a phone. The scroll container inside handles the table itself. */
.pay-guide, .pay-guide > *, .pay-paths, .pay-path { min-width: 0; }
/* The intro stands on the page's own ground, the way .fees-intro above it
   does, so the section does not open with a second panel edge under the
   first. */
.pay-guide-intro { max-width: 64ch; }
.pay-guide-intro h2 {
  margin: 0 0 .5rem;
  color: var(--haven-deep, var(--ink));
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2.1rem);
  font-weight: 500;
  line-height: 1.12;
}
.pay-guide-intro p { margin: 0; color: var(--muted); font-size: .96rem; line-height: 1.6; }

/* --- the three pathways ------------------------------------------------- */
.pay-paths {
  display: grid;
  grid-template-columns: 1fr 1.12fr 1fr;
  overflow: hidden;
  border: 1px solid rgba(23, 51, 47, .09);
  border-radius: 1.4rem;
  background: rgba(255, 253, 249, .93);
  box-shadow: 0 18px 44px -30px rgba(18, 42, 37, .3);
}
.pay-path {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .55rem;
  padding: clamp(1.15rem, 2.2vw, 1.7rem) clamp(1rem, 1.9vw, 1.45rem);
}
.pay-path + .pay-path { border-left: 1px solid rgba(23, 51, 47, .09); }
.pay-path--feature { background: rgba(206, 222, 210, .55); }
.pay-path-mark { display: block; color: var(--clay-dark, var(--clay)); }
.pay-path-mark svg {
  width: 34px; height: 34px;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.pay-path h3 {
  margin: .1rem 0 0;
  color: var(--haven-deep, var(--ink));
  font-family: var(--font-display);
  font-size: 1.16rem;
  font-weight: 500;
  line-height: 1.2;
}
.pay-path p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.55; }

/* The one numeric treatment on the page that is allowed to be loud. */
.pay-prices {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem clamp(1.1rem, 2.4vw, 2rem);
  margin: .3rem 0 .1rem;
}
.pay-prices > div { display: grid; gap: .12rem; }
.pay-prices dt {
  color: var(--muted);
  font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}
.pay-prices dd {
  margin: 0;
  color: var(--haven-deep, var(--ink));
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.5rem + 1.2vw, 2.6rem);
  font-weight: 500; line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Laid out inline rather than as a flex row: as a flex row the label and the
   arrow are two items, so a label that wrapped to two lines left the arrow
   stranded against the far edge of the column. Inline, the arrow simply
   follows the last word. The links are not bottom-aligned either — the three
   pathways carry very different amounts of copy, and pushing every link to a
   shared baseline opened a hole under the shortest one. Ragged is the more
   editorial answer and it is what the tinted column is for. */
.pay-path-link {
  display: inline-block;
  min-height: 28px; padding: .35rem 0;
  border: 0; background: none;
  color: var(--clay-dark, var(--clay));
  font: inherit; font-size: .85rem; font-weight: 700; line-height: 1.4;
  text-align: left; text-decoration: none; cursor: pointer;
}
.pay-path-link:hover, .pay-path-link:focus-visible { text-decoration: underline; text-underline-offset: .2em; }
.pay-path-link span { display: inline-block; margin-left: .3rem; transition: transform 160ms ease; }
.pay-path-link:hover span { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .pay-path-link span { transition: none; } }

/* --- the matrix the pathways point at ----------------------------------- */
.pay-matrix {
  padding: clamp(1.15rem, 2.2vw, 1.7rem) clamp(1rem, 2vw, 1.6rem);
  border: 1px solid rgba(23, 51, 47, .09);
  border-radius: 1.4rem;
  background: rgba(255, 253, 249, .93);
  box-shadow: 0 18px 44px -30px rgba(18, 42, 37, .3);
  scroll-margin-top: clamp(96px, 12vw, 150px);
}
.pay-matrix:focus { outline: none; }
.pay-matrix h3 {
  margin: 0 0 .4rem;
  color: var(--haven-deep, var(--ink));
  font-family: var(--font-display);
  font-size: 1.24rem; font-weight: 500; line-height: 1.18;
}
.pay-matrix > p { margin: 0 0 .9rem; max-width: 76ch; color: var(--muted); font-size: .92rem; line-height: 1.55; }
.pay-matrix-note {
  margin: .85rem 0 0;
  padding-left: .8rem;
  border-left: 3px solid var(--clay);
  font-size: .88rem; line-height: 1.55;
}

/* --- practical help, and two utility notes ------------------------------ */
.pay-help { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(.8rem, 1.6vw, 1.15rem); }
.pay-help-block {
  display: flex; flex-direction: column; align-items: flex-start; gap: .5rem;
  padding: clamp(1.1rem, 2vw, 1.5rem) clamp(1rem, 1.9vw, 1.4rem);
  border: 1px solid rgba(23, 51, 47, .09);
  border-radius: 1.4rem;
  background: rgba(255, 253, 249, .93);
}
.pay-help-block h3 {
  margin: 0;
  color: var(--haven-deep, var(--ink));
  font-family: var(--font-display);
  font-size: 1.1rem; font-weight: 500; line-height: 1.2;
}
.pay-help-block p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.55; }
.pay-gfe { background: rgba(247, 237, 232, .88); border-color: rgba(143, 84, 66, .18); }

/* Numbered because this one genuinely is a sequence — the pathways above are
   alternatives and are deliberately not numbered. */
.pay-steps { counter-reset: paystep; display: grid; gap: .45rem; margin: .1rem 0 0; padding: 0; list-style: none; }
.pay-steps li {
  counter-increment: paystep;
  display: grid; grid-template-columns: 1.1rem 1fr; gap: .5rem; align-items: baseline;
  color: var(--ink); font-size: .9rem; line-height: 1.5;
}
.pay-steps li::before {
  content: counter(paystep);
  color: var(--clay-dark, var(--clay));
  font-size: .7rem; font-weight: 700; letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}

.pay-ask { margin: .1rem 0 0; font-size: .93rem; line-height: 1.6; }
.pay-ask strong { color: var(--haven-deep, var(--ink)); }
.pay-ask .contact-form-link {
  color: var(--clay-dark, var(--clay));
  font-weight: 700; text-decoration: none; cursor: pointer;
}
.pay-ask .contact-form-link:hover, .pay-ask .contact-form-link:focus-visible {
  text-decoration: underline; text-underline-offset: .2em;
}

/* A pathway link opens an accordion and scrolls to it, so the heading it
   lands on has to clear the sticky header. */
body.is-fees #app .acc-card { scroll-margin-top: clamp(96px, 12vw, 150px); }

/* Recomposed rather than stacked: the band's hairlines become horizontal
   dividers and the two help blocks fall into one column, in the reading
   order the pathways already have — insurance, prices, out of network. */
@media (max-width: 900px) {
  .pay-paths { grid-template-columns: minmax(0, 1fr); }
  .pay-path + .pay-path { border-left: 0; border-top: 1px solid rgba(23, 51, 47, .09); }
  .pay-help { grid-template-columns: minmax(0, 1fr); }
}

/* The clinician column holds names, not column labels, so it drops the header
   row's uppercase and letter-spacing — "DR. GABRIELA FIGUERAS" set in caps
   wrapped to three lines and made itself the tallest thing in the table. The
   table also gets a little more room before its wrap starts scrolling, now
   that it is open on the page instead of inside an accordion. */
.pay-matrix .payment-matrix th[scope="row"] {
  text-transform: none;
  letter-spacing: 0;
  font-size: .88rem;
  line-height: 1.3;
}
.pay-matrix .fee-table { min-width: 720px; }

/* --------------------------------------------------------------------------
   Clinician pop-up on a phone: full width, and a rounded portrait.

   The photo sat left with a 57px gutter down its right side, the biography
   was set to the same short measure, and the modal was taller than it needed
   to be. All three were one cause: the close button is floated right at this
   width, and .provider-modal-content is a grid. A grid container establishes
   its own formatting context, and the spec narrows such a box to avoid a
   float beside it — by exactly the float's width plus its margin. 46px plus
   .7rem is 57.2px, and 390 - 57.2 is the 332.8px the content was measuring.

   The button does not need to float to sit on the right: it is sticky, so it
   is in normal flow, and margin-left:auto puts a fixed-width block against
   the right edge without creating a float for anything to avoid. That is
   fixed in mobile-overrides.css, which is where the float is written.

   With the full width back, the portrait is inset by 1.1rem — the same
   1.1rem the biography below it is padded by, so their edges line up — and
   its corners are rounded to match the modal's own. Desktop already had the
   radius; it was inside a min-width:981px block and never reached a phone.
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  /* The portrait is square and the source images are square, so it should
     never crop. It did, because the cap that stops the photo eating the
     viewport was written as a max-height while aspect-ratio was asking for a
     square: on a phone showing browser chrome, 42svh is well under the full
     width, so the box resolved to about 1.22:1 against a 1.00:1 image and
     object-fit:cover took 18% out of it — 9% off the top of every head, 9%
     off the bottom.

     The same limit as a max *width* keeps the intent — the photo still never
     occupies more than its share of the visible height — while letting
     aspect-ratio decide the height, so the box stays square and the whole
     portrait shows. When the cap is the smaller value the square is narrower
     than the column, so it centres rather than sitting left. */
  .provider-modal .provider-modal-photo {
    width: min(calc(100% - 2.2rem), 48svh, 480px) !important;
    max-height: none !important;
    margin-inline: auto;
    border-radius: 1.25rem !important;
  }
  /* The button overlaps the portrait's top corner, so it has to sit above the
     image's own stacking position — and its right edge lines up with the
     portrait's rather than hanging 6px past it. */
  .provider-modal .modal-close { z-index: 6; margin-right: 1.1rem; }
}

/* mobile-overrides.css tightens the same cap below 760px; mirrored here so
   the width limit and the height limit it replaces stay in step. */
@media (max-width: 760px) {
  .provider-modal .provider-modal-photo {
    width: min(calc(100% - 2.2rem), 42svh, 390px) !important;
  }
}

/* Specialty chips read a step stronger than the practical ones beside them:
   what a clinician is sought out for is the thing a visitor is scanning for,
   and "Depression" and "Preteens to adults" were previously the same colour
   in the same row (owner request). */
.tag-specialty {
  background: rgba(143, 84, 66, .10);
  color: var(--clay-dark, var(--clay));
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   The sticky action bar becomes one bar (owner request, pages 46 and 2).

   It was two independently fixed boxes sitting next to each other and hoping
   to line up. They could not: the call was min-height 62px with no
   safe-area padding, and the booking link was 64px plus the safe-area inset
   that mobile-overrides.css adds with !important. Different heights, and only
   one of them reaching the bottom of the screen — which is what read as
   floating and disjointed.

   Now a single flex container is the fixed element and carries the ground,
   the top border, the shadow and the safe-area padding once. The two actions
   are flex items that stretch to a shared height by construction, so they
   cannot drift apart again whatever either one's own padding says.
   -------------------------------------------------------------------------- */
.mobile-cta-bar { display: none; }
@media (max-width: 980px) {
  body:not(.hide-mobile-cta) .mobile-cta-bar {
    position: fixed;
    inset: auto 0 0;
    z-index: 1200;
    display: flex;
    align-items: stretch;
    /* dvh tracks the browser chrome as it shows and hides, so the bar stays
       against the live bottom edge rather than a stale one. */
    max-height: 22dvh;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-top: 1px solid rgba(255, 255, 255, .15);
    background: var(--ink);
    box-shadow: 0 -12px 32px rgba(9, 27, 24, .16);
  }
  /* Both children lose the positioning, ground and shadow they used to carry
     on their own; the bar holds all of it now. Specificity and !important
     because mobile-overrides.css loads after this file and sets min-height
     and padding on .mobile-consult-cta. */
  body:not(.hide-mobile-cta) .mobile-cta-bar .mobile-call-cta,
  body:not(.hide-mobile-cta) .mobile-cta-bar .mobile-consult-cta {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    min-height: 60px !important;
    margin: 0 !important;
    padding: .8rem var(--mobile-gutter, 1.1rem) !important;
    display: flex;
    align-items: center;
    border-top: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--white);
    font-weight: 700;
    text-decoration: none;
  }
  body:not(.hide-mobile-cta) .mobile-cta-bar .mobile-call-cta {
    flex: 0 0 auto;
    gap: .45rem;
    justify-content: center;
    border-right: 1px solid rgba(255, 255, 255, .18) !important;
    font-size: .84rem;
  }
  body:not(.hide-mobile-cta) .mobile-cta-bar .mobile-consult-cta {
    flex: 1 1 auto;
    justify-content: space-between;
    gap: .6rem;
    font-size: .82rem;
  }
  .mobile-cta-ic { flex: 0 0 auto; }
}
body.hide-mobile-cta .mobile-cta-bar { display: none !important; }

/* --------------------------------------------------------------------------
   Therapy Services sits in the open menu like every other link (owner
   request, page 46).

   Every item in the mobile menu is a direct <a>, and .primary-nav a carries
   the separator. Therapy Services is not: it is a .nav-item wrapper holding
   the link, the submenu toggle and the desktop dropdown panel. The rule still
   matched the <a> inside it, but the wrapper is inline-flex, so the line only
   ran the width of the words and read as missing next to full-width rules
   above and below.

   The separator moves to the wrapper, which is the row, and the link inside
   gives its own up. The row also becomes a full-width flex line so the link
   fills it and the tap target matches its neighbours' rather than ending
   where the text does.
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .primary-nav .nav-item.has-submenu {
    display: flex;
    width: 100%;
    align-items: center;
    border-bottom: 1px solid var(--line);
  }
  .primary-nav .nav-item.has-submenu > a {
    flex: 1 1 auto;
    border-bottom: 0;
  }
  /* The panel is a desktop hover affordance; on a phone the link goes to the
     services landing page, so the chevron would promise a menu that never
     opens. */
  .primary-nav .nav-item.has-submenu .submenu-toggle,
  .primary-nav .nav-item.has-submenu .nav-submenu { display: none; }
  /* Last row in the menu, whichever element it is. */
  .primary-nav > *:last-child,
  .primary-nav > *:last-child > a { border-bottom: 0; }
}

/* --------------------------------------------------------------------------
   Fees accordions: heading size, and tables that stay inside the card
   (owner request, pages 14 and 15).

   The title is a span inside an h2.section-title, so it inherits the section
   heading's size — 41px on a phone, where mobile-overrides.css sets
   .section-title with !important. The FAQ gives its own span an explicit size
   and reads at 17.8px; Fees never did, so the same markup came out more than
   twice as large and a three-line title filled the card. It takes the FAQ's
   step-down, which is what the owner asked it to match.

   The tables were a separate fault with the same cause as the payment matrix:
   .fees-main is a grid, a grid item's automatic minimum size is its
   min-content, and min-content inside these cards is the fee table's 620px
   floor. Collapsed, the panels are hidden and nothing measures them — which
   is why the page passed every check. Open one and every block on the page
   went to 659px inside a 390px viewport, and since html carries
   overflow-x:clip the excess was cut off rather than scrollable: the resident
   title, its paragraph and the right-hand columns of the rate table were all
   simply gone.

   min-width:0 down the chain lets each card shrink to the column again and
   hands the overflow back to .fee-table-wrap, which is a scroll container and
   has always been the thing meant to carry it.
   -------------------------------------------------------------------------- */
body.is-fees #app .fees-main > *,
body.is-fees #app .acc-card,
body.is-fees #app .acc-panel { min-width: 0; }

body.is-fees #app .acc-card .acc-title {
  font-size: clamp(1.1rem, .98rem + .55vw, 1.5rem);
  line-height: 1.28;
}

/* --------------------------------------------------------------------------
   Doctoral-level training drawer: a "why this matters" row (owner request).

   The drawer went from a long paragraph straight into a directory of names,
   so the claim and the evidence sat next to each other with nothing between
   them saying what the claim is for. Three points bridge it.

   Deliberately not cards: cards would make three small boxes compete with the
   clinician list below, which is the thing the reader is heading for. Columns
   separated by space alone, a small line icon above each, and the label above
   the row set like an eyebrow so it reads as a heading without being one more
   heading in a drawer that already has several.
   -------------------------------------------------------------------------- */
.team-why { margin: clamp(1.1rem, 2.2vw, 1.6rem) 0 0; }
.team-why-label {
  margin: 0 0 clamp(.6rem, 1.2vw, .9rem);
  color: var(--clay-dark, var(--clay));
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.team-why-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 2rem);
}
.team-why-point { display: grid; gap: .3rem; align-content: start; }
.team-why-mark { display: block; color: var(--clay-dark, var(--clay)); }
.team-why-mark svg {
  width: 26px; height: 26px;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.team-why-point h3 {
  margin: .15rem 0 0;
  color: var(--haven-deep, var(--ink));
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
}
.team-why-point p {
  margin: 0;
  color: var(--muted);
  font-size: .85rem;
  line-height: 1.5;
}
/* Below this the three columns are too narrow to hold a sentence. */
@media (max-width: 620px) {
  .team-why-grid { grid-template-columns: minmax(0, 1fr); gap: .9rem; }
}

/* The line under each name is now where they are licensed rather than a
   licence number, so it drops the tabular figures that number needed. */
.team-modal-where {
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.3;
}

/* The owner's opening is two paragraphs of one thought, but only the first
   carries .service-modal-lede — so the second inherited the article's base
   size and came out larger and darker than the sentence it continues, at
   17.5px under a 15.2px lede. It takes the lede's treatment. */
.team-modal .service-modal-article > p:not([class]) {
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Service modal artwork: the frame takes the picture's shape (owner request,
   page 50, desktop and phone).

   The visual was a fixed frame with object-fit:cover, so every image was
   trimmed to fit rather than fitted to the frame. On a phone the frame was
   forced to 16/9 with !important; on desktop it stretched to the height of
   the text column beside it. Neither matches what the files actually are:

     dbt         390x358  (1.09)   39% cropped on a phone, 24% on desktop
     individual  390x487  (0.80)   55% on a phone
     family      390x487  (0.80)   55% on a phone
     couples     390x260  (1.50)   16% on a phone

   A photograph survives a crop. The DBT artwork does not — it is a diagram
   with four labelled quadrants, and trimming the top and bottom cut the
   labels off the two that explain what the skills are for.

   So the frame follows the file: natural ratio, no cover, no stretch.
   align-self:start stops the desktop grid pulling the image to the height of
   whatever copy sits beside it. Specificity is deliberate — mobile-overrides
   loads after this file and sets the 16/9 with !important.
   -------------------------------------------------------------------------- */
.modal-backdrop .service-modal-visual,
.modal-backdrop .v5-dbt-modal-visual {
  align-self: start;
  /* height:auto matters as much as the ratio. The figure carried a fixed
     280px while its picture wanted 386, so the image overflowed it — hidden
     before by overflow:hidden, which is what the crop actually was. Let the
     figure grow to its picture and the grid row grows with it; leave the
     height fixed and removing the clip just spills the image over the
     paragraph below. */
  height: auto !important;
  /* The 280px floor was the frame's real size on desktop, and the picture was
     stretched to it. It goes, so the frame is whatever the picture is. */
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}
.modal-backdrop .service-modal-visual img,
.modal-backdrop .v5-dbt-modal-visual img {
  /* Absolutely positioned on desktop, so it filled the frame rather than
     sizing it — which is why the frame could stay 280px while the picture
     wanted 386. Back into flow, and the frame follows it. */
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
}

/* --------------------------------------------------------------------------
   Service modal: described parts, and a recognition block (owner request,
   page 51).

   The DBT modal opened with what the programme contains and only reached the
   reader's situation in the last paragraph — answering "what makes this
   different" before "is this me". The order is inverted now, and the four
   components stop being a bullet list: bullets flatten four different kinds
   of support into four equal fragments, and one of them was
   "Clinician consultation team supporting adherence", which is a sentence
   written for clinicians.

   Two across rather than four down, each with its own line icon, so the
   programme reads as a shape rather than a checklist. The recognition block
   below it sits on a tint, because it is the paragraph a reader scanning for
   themselves is actually looking for.
   -------------------------------------------------------------------------- */
.service-parts { margin: clamp(1.2rem, 2.4vw, 1.8rem) 0 0; }
.service-parts-label,
.service-consider-label {
  margin: 0 0 clamp(.6rem, 1.2vw, .9rem);
  color: var(--clay-dark, var(--clay));
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.service-parts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.2vw, 1.6rem);
}
.service-part { display: grid; gap: .25rem; align-content: start; }
.service-part-mark { display: block; color: var(--clay-dark, var(--clay)); }
.service-part-mark svg {
  width: 24px; height: 24px;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.service-part h3 {
  margin: .1rem 0 0;
  color: var(--haven-deep, var(--ink));
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
}
.service-part p { margin: 0; color: var(--muted); font-size: .87rem; line-height: 1.55; }

.service-consider {
  margin: clamp(1.2rem, 2.4vw, 1.8rem) 0 0;
  padding: clamp(.9rem, 1.8vw, 1.25rem) clamp(1rem, 2vw, 1.35rem);
  border-radius: 1.1rem;
  background: rgba(206, 222, 210, .38);
}
.service-consider-label { margin-bottom: .4rem; }
.service-consider-copy { margin: 0; color: var(--ink); font-size: .93rem; line-height: 1.6; }

.service-clarifier {
  margin: clamp(.85rem, 1.8vw, 1.15rem) 0 0;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.6;
}

@media (max-width: 620px) {
  .service-parts-grid { grid-template-columns: minmax(0, 1fr); gap: .95rem; }
}

/* --------------------------------------------------------------------------
   The quote sits centred in its band (owner request, page 44).

   The band's padding was asymmetric — 59px over 93px on a phone, 148 over 180
   on desktop — so the quote sat about a third of that difference above centre
   at both widths. The waves above and below are drawn by the neighbouring
   sections and curve across roughly a hundred pixels each, so there is no
   single edge to measure against; the honest rule is equal space top and
   bottom, which is what "centred" means here.

   The two paddings are averaged rather than picked, so each band keeps very
   nearly the height it had: 152px of padding on a phone and 328px on desktop,
   split evenly instead of 39/61.
   -------------------------------------------------------------------------- */
.v6-quote-section,
.v3-quote-section.v6-quote-section {
  padding-block: clamp(4.75rem, 2.7rem + 8.4vw, 10.25rem) !important;
}

/* With "Before you arrive" gone, the details band holds one block. A
   two-column grid left it in the left half with 635px of nothing beside it,
   so the band becomes one column — and the measure is capped, because a lede
   running the full 1220px is not a line anyone wants to read. */
body.is-location .v3-location-details { grid-template-columns: minmax(0, 1fr); }
body.is-location .v3-location-details > div { max-width: 64ch; }

/* The therapy services hero drops its picture on a phone (owner request, page
   38). The photograph is atmosphere rather than information — it says nothing
   the heading does not — and stacked under the copy it put a screen's worth of
   scroll between the two buttons and the first service. The location and
   contact heroes share .v3-page-hero-split and keep theirs, which is why the
   figure carries its own class rather than the rule matching the pattern. */
@media (max-width: 980px) {
  .hero-figure-desktop { display: none; }
}

/* --------------------------------------------------------------------------
   "What level of structure would be most helpful right now?" (owner request).
   Two cards of identical weight read as a quiz with two right answers, so the
   difference the section is actually about — how much structure the care
   carries — was invisible. Individual therapy sits on warm cream with a
   notebook mark; comprehensive DBT sits on pale sage with the four-module mark,
   a firmer border, and a faint lattice behind it. The lattice is the only
   ornament, and it is there because the program is scheduled: therapy, group,
   and coaching on a weekly grid. Cards size to their own content rather than
   stretching to match, so the bridge below sits close under them.
   -------------------------------------------------------------------------- */
.path-compare-section .path-compare-grid { align-items: start; }
.path-compare-section .path-card {
  position: relative;
  gap: .55rem;
  overflow: hidden;
  background: linear-gradient(180deg, #fffdf9, #faf4ec);
  border-color: rgba(147, 77, 57, .17);
}
.path-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  margin-bottom: .1rem;
  border-radius: .8rem;
  background: rgba(147, 77, 57, .09);
  color: var(--clay-dark);
}
.path-icon svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.path-card h3 { font-size: clamp(1.35rem, 3.4vw, 1.62rem); }
.path-descriptor {
  margin: -.25rem 0 .15rem;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: .95rem;
  font-style: italic;
  line-height: 1.3;
}
.path-compare-section .path-card .text-link { margin-top: .35rem; }

/* The structured half of the pair. */
.path-compare-section .path-card-dbt {
  background: linear-gradient(180deg, #f8fbf9, #e9efea);
  border-color: rgba(83, 107, 96, .34);
}
.path-card-dbt::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(83, 107, 96, .5) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(0deg, rgba(83, 107, 96, .5) 0 1px, transparent 1px 22px);
  opacity: .09;
  -webkit-mask-image: radial-gradient(120% 90% at 100% 0%, #000 0%, rgba(0, 0, 0, .35) 42%, transparent 72%);
  mask-image: radial-gradient(120% 90% at 100% 0%, #000 0%, rgba(0, 0, 0, .35) 42%, transparent 72%);
  pointer-events: none;
}
.path-card-dbt > * { position: relative; }
.path-card-dbt .path-icon { background: rgba(83, 107, 96, .12); color: var(--sage-dark); }
.path-card-dbt li::before { color: var(--sage-dark); }

/* Neither card is the whole answer, so the bridge names what sits between
   them before it offers the consultation. */
.path-bridge {
  max-width: 44rem;
  margin: clamp(1.1rem, 2.4vw, 1.6rem) auto 0;
  text-align: center;
}
.path-bridge-note { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.6; }
.path-bridge-ask {
  margin: .85rem 0 0;
  color: var(--haven-ink);
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 2.4vw, 1.18rem);
  line-height: 1.35;
}
.path-bridge-button { margin-top: .8rem; }
@media (max-width: 820px) {
  .path-compare-section .path-card { gap: .5rem; }
  .path-bridge-note { font-size: .85rem; }
}

/* --------------------------------------------------------------------------
   Two sections that share a tint have no seam between them, so their stacked
   vertical padding does not read as "one section ended, another began" — it
   reads as a hole in the middle of one panel. On the DBT page that put more
   than a hundred pixels of empty mist between the phone-coaching note and the
   clinician list (owner request). At a boundary like this the pair splits a
   single section's worth of air instead of each spending a full one.
   -------------------------------------------------------------------------- */
.section-paper:has(+ .section-paper),
.section-mist:has(+ .section-mist) { padding-bottom: clamp(1.5rem, 3vw, 2.2rem) !important; }
.section-paper + .section-paper,
.section-mist + .section-mist { padding-top: clamp(1.5rem, 3vw, 2.2rem) !important; }

/* --------------------------------------------------------------------------
   Our Team intro (owner request). The left column had been doing four jobs
   at once — asserting doctoral training, explaining the matcher, listing
   modalities, and selling the consultation — and the modality list read as
   credential stuffing beside a panel that already sorts on those facts. Three
   jobs now, in order: the training is real, the fit is more than credentials,
   and the matcher narrows rather than decides. The two paragraphs after the
   lede step down a size so the opening claim still leads.
   -------------------------------------------------------------------------- */
.team-intro-fit,
.team-intro-bridge {
  max-width: 48ch;
  margin: .85rem 0 0;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.62;
}
@media (max-width: 900px) {
  .team-intro-fit,
  .team-intro-bridge { margin-inline: auto; }
}

/* --------------------------------------------------------------------------
   The closing CTA's wave was clipping its own heading on every phone (owner
   request). Below 980px a blanket `.section { padding-block: … !important }`
   in the mobile sheet was overriding this section's wave-aware padding-top,
   so the section still pulled itself 90px up under the curve but no longer
   reserved the room to sit below it — the copy started 57px in, inside a 90px
   wave band whose curve reaches 76px down. Both halves are restored here, at
   a depth scaled for a narrow screen: a wave that is 7% of a 1920 desktop is
   23% of a 390 phone, which is why the minimum was the thing hurting.
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .section.home-final-cta {
    --wave-depth: clamp(56px, 14vw, 90px);
    padding-top: calc(var(--wave-depth) + clamp(1.4rem, 3.6vw, 2.3rem)) !important;
  }
}

/* --------------------------------------------------------------------------
   Filtered Journal grid on a phone (owner request). The filtered layout was
   fixed at three columns with no breakpoint, so on a 390px screen each card
   was 109px wide and every title broke to one word per line. Two across, with
   the card's own type stepped down to suit the narrower measure.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  body.is-journal-filtered .blog-index-grid,
  body.is-journal-filtered .v4-foundation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .8rem !important;
  }
  body.is-journal-filtered .blog-card-content { padding: .85rem .9rem 1rem; }
  body.is-journal-filtered .blog-card h3 { margin-bottom: .4rem; font-size: 1.02rem; line-height: 1.18; }
  body.is-journal-filtered .blog-card-content > p:not(.blog-meta) { font-size: .78rem; line-height: 1.45; }
  body.is-journal-filtered .blog-meta { font-size: .66rem; line-height: 1.4; letter-spacing: .05em; }
  body.is-journal-filtered .journal-read-link { font-size: .7rem; }
  body.is-journal-filtered .journal-issue { font-size: .6rem; }
}

/* --------------------------------------------------------------------------
   Couples therapy page (owner request). Five sections that show the practice
   understands how relationship distress actually works, rather than listing
   its symptoms. The recurring-pattern cycle is the signature: five beats drawn
   as a loop, because the fifth returns to the first — that shape is the whole
   argument of the section, so it is a diagram and not a sentence.
   -------------------------------------------------------------------------- */
.couples-pattern-body { max-width: 46rem; margin: 0 auto; text-align: center; }
.couples-pattern-body > p { margin: 0; color: var(--muted); font-size: .96rem; line-height: 1.72; }
.couples-cycle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem .15rem;
  margin: 1.7rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.couples-cycle-step { display: inline-flex; align-items: center; gap: .55rem; }
.couples-cycle-step > span {
  display: inline-flex;
  align-items: center;
  padding: .5rem .95rem;
  border: 1px solid rgba(83, 107, 96, .28);
  border-radius: 999px;
  background: var(--paper);
  color: var(--haven-ink);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
}
.couples-cycle-step:not(:last-child)::after {
  content: "→";
  color: var(--haven-clay);
  font-size: .9rem;
}
/* The loop closes on the last beat, so it carries the return mark instead. */
.couples-cycle-step:last-child > span {
  border-style: dashed;
  background: transparent;
  color: var(--muted);
}
.couples-cycle-step:last-child > span::before {
  content: "↻";
  margin-right: .4rem;
  color: var(--haven-clay);
  font-weight: 400;
}
.couples-cycle-note { margin: 2rem 0 0; color: var(--muted); font-size: .84rem; line-height: 1.6; }

/* The steps sit on sand, where a sage tint at low alpha just reads grey. */
.couples-work-section .couples-step-mark { background: var(--paper); box-shadow: 0 6px 16px rgba(32, 52, 48, .06); }

/* These five sections each open with a centred heading and then get straight
   to the thing they are about; the site's standard heading gap leaves a hole
   between the two on a page this long. */
.couples-pattern-section .v3-section-heading,
.couples-reasons-section .v3-section-heading,
.couples-work-section .v3-section-heading,
.couples-fit-section .v3-section-heading,
.couples-questions-section .v3-section-heading { margin-bottom: clamp(1.4rem, 2.6vw, 2.1rem); }

/* An editorial list, not a grid of diagnosis-shaped cards. */
.couples-reasons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .1rem 2.6rem;
  max-width: 60rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.couples-reasons li {
  position: relative;
  padding: .78rem 0 .78rem 1.5rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: .94rem;
  line-height: 1.55;
}
.couples-reasons li::before {
  content: "";
  position: absolute;
  top: 1.32rem;
  left: 0;
  width: .5rem;
  height: 1px;
  background: var(--haven-clay);
}

.couples-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.1rem;
  margin-top: .4rem;
}
.couples-step { display: flex; flex-direction: column; gap: .45rem; }
.couples-step-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  margin-bottom: .15rem;
  border-radius: .75rem;
  background: rgba(83, 107, 96, .13);
  color: var(--sage-dark);
}
.couples-step-mark svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.couples-step h3 { margin: 0; color: var(--haven-ink); font-family: var(--font-display); font-size: 1.18rem; font-weight: 500; line-height: 1.12; }
.couples-step p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.58; }

.couples-approach {
  max-width: 52rem;
  margin: 1.9rem auto 0;
  padding: 1.3rem 1.5rem;
  border-left: 2px solid var(--haven-clay);
  background: rgba(255, 253, 249, .72);
}
.couples-approach h3 { margin: 0 0 .4rem; color: var(--haven-ink); font-family: var(--font-display); font-size: 1.24rem; font-weight: 500; line-height: 1.14; }
.couples-approach p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.66; }

/* Two columns of the same weight: the practice is as willing to say "not yet"
   as it is to say "yes", and a page that visually demotes the second column
   would be making a different claim than the words do. */
.couples-fit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; align-items: start; }
.couples-fit-card {
  padding: clamp(1.2rem, 2.3vw, 1.7rem);
  border: 1px solid rgba(83, 107, 96, .2);
  border-radius: 1.3rem;
  background: var(--paper);
}
.couples-fit-card-first { border-color: rgba(147, 77, 57, .24); background: linear-gradient(180deg, #fffdf9, #faf3ec); }
.couples-fit-label { margin: 0 0 .75rem; color: var(--sage-dark); font-size: .74rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.couples-fit-card-first .couples-fit-label { color: var(--clay-dark); }
.couples-fit-card ul { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.couples-fit-card li { position: relative; padding-left: 1.25rem; color: var(--muted); font-size: .92rem; line-height: 1.58; }
.couples-fit-card li::before { content: "•"; position: absolute; left: .25rem; color: var(--sage-dark); }
.couples-fit-card-first li::before { color: var(--haven-clay); }
.couples-fit-note { max-width: 46rem; margin: 1.2rem auto 0; color: var(--muted); font-size: .86rem; line-height: 1.62; text-align: center; }

.couples-qa-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2.6rem; }
.couples-qa h3 { margin: 0 0 .35rem; color: var(--haven-ink); font-family: var(--font-display); font-size: 1.14rem; font-weight: 500; line-height: 1.2; }
.couples-qa p { margin: 0; color: var(--muted); font-size: .89rem; line-height: 1.62; }

@media (max-width: 1000px) {
  .couples-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.3rem 1.1rem; }
}
@media (max-width: 820px) {
  .couples-reasons { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .couples-fit-grid { grid-template-columns: minmax(0, 1fr); }
  .couples-qa-grid { grid-template-columns: minmax(0, 1fr); gap: 1.3rem; }
}
@media (max-width: 700px) {
  /* A nine-line centred paragraph is harder to read than the left edge it
     replaces; the heading above it stays centred. */
  .couples-pattern-body { text-align: left; }
  .couples-cycle-note { text-align: center; }
}
@media (max-width: 620px) {
  /* Wrapped across three rows the cycle leaves an arrow pointing off the end
     of each one. Stacked, every arrow points at the next beat. */
  .couples-cycle { flex-direction: column; gap: .5rem; }
  .couples-cycle-step { flex-direction: column; gap: .5rem; }
  .couples-cycle-step:not(:last-child)::after { content: "↓"; }
}
@media (max-width: 560px) {
  .couples-steps { grid-template-columns: minmax(0, 1fr); gap: 1.15rem; }
  .couples-cycle-step > span { padding: .42rem .85rem; font-size: .8rem; }
  .couples-approach { padding: 1.1rem 1.15rem; }
}

/* --------------------------------------------------------------------------
   FAQ page, narrow screens (owner request). "Ask us anything." is a side rail
   beside the questions on a wide screen, which is why the closing CTA below it
   does not compete. Below 1080px the rail stops being a rail and stacks, and
   it lands directly on top of the closing band — two dark green cards in a
   row, both asking the reader to get in touch. The rail is the one that
   answers the page it is on, so the closing band steps aside here. Only on
   this page: everywhere else the rail is a different card or absent.
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  section:has(> .container.faq-shell) + section:has(> .container > .cta-band) { display: none; }
}