/* ==========================================================================
   Kristen I. Speer, LPC, LLC - kristenspeerlpc.com
   specialties.css - the /specialties/ hub page's own block. Loaded AFTER /styles.css.

   CONTRACT: every selector in this file is an sp- class or a descendant of
   one. Nothing here defines a design token, redefines a ks- rule, or styles
   an element the shared shell owns. The page's head, nav, sticky bar, footer,
   section heads (.ks-sec__*), prose (.ks-prose), FAQ accordion (.ks-faq /
   .ks-qa), consult block (.ks-start) and the visually-hidden helper (.ks-vh)
   are the shared components from /styles.css, used as-is.

   Mobile-first: base = 375px, then min-width 720px, then min-width 1080px -
   the same two breakpoints as the shell, and no others.

   v2 (2026-09-14, SPEC-SPECIALTY-PAGES-2026-09-14.md): the "Five places to
   start" jump list became #sp-pages, five clickable boxes that open the five
   full pages; the five full-width area sections became three summary rows
   (menopause + EMDR, depression + anxiety, relationships alone), each summary
   ending in one bold "Read the full page" link; #sp-also moved above the ink
   approach band. The .sp-index, .sp-area and .sp-area__* rules are gone.

   MOTION: one addition, and it is gated. The five page boxes lift 2px and
   their arrow slides 3px on hover and on keyboard focus, inside
   @media (prefers-reduced-motion: no-preference) and (hover: hover). A
   reduced-motion user still gets the shadow, border and colour change, which
   carry the state on their own. The boxes carry no shadow at rest (review
   fix 2026-09-14); it arrives with the hover or focus state only. Everything else animated on the page is the
   shared [data-ks-reveal] fade and the shared control hovers in /styles.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO

   The interior-page variant of the homepage hero: the same photograph-with-
   the-nav-on-it composition, sized to its content instead of to the viewport.

   THE PHOTOGRAPH IS THIS PAGE'S OWN. /emdr/ opens on path.webp (misty trail),
   /menopause/ on interior.webp (armchair and blanket), the homepage on
   hero.webp (the valley). This hub opens on still.webp, a lake at first light,
   so a visitor moving between the four pages never sees the same frame twice.

   That swap is why every scrim number below differs from menopause.css.
   still.webp is the highest-key frame on the site: the top-left quarter is a
   near-white dawn sky and the lower-left water carries the sun's reflection.
   Both sit under the copy column at phone width, where cover scales by HEIGHT
   and the band therefore shows the frame's full vertical extent, sky
   included, so the phone case is the one that governs.

   CONTRAST MEASURED 2026-09-13 (headless Chrome via .tmp/qa/run.mjs --expr,
   the real painted pixels, same method as menopause.css and emdr.css): the
   photo drawn to a canvas at the element's exact painted geometry (object-fit
   cover + object-position resolved), then for EVERY pixel inside each text
   element's own box both scrim layers composited over it in paint order -
   radial first, linear under it, as the background list paints - and the
   BRIGHTEST composited result taken as that element's worst case. Text colour
   is read from getComputedStyle and its own alpha blended over that surface.
   Text-shadow is NOT counted, so every figure below is pessimistic. This is
   one step stricter than the menopause.css pass, which composited the scrim
   over the brightest RAW pixel; compositing per pixel catches the case where
   a slightly darker pixel sits where the scrim is thinner.

     375px  hero box 375x628, linear .80 / .52 / .76
       .93 cream "or call" ..................... 11.70:1
       #CFE0D4 .ks-link--light phone number .... 10.55:1
       --cream wordmark name .................... 7.26:1
       .93 cream subhead ........................ 7.25:1
       .90 cream hero label pill ................ 5.61:1
       .86 cream fact row 3 ..................... 5.62:1
       --cream h1 ............................... 5.40:1
       .82 cream wordmark sub ................... 5.33:1
       .86 cream fact row 1 ..................... 4.66:1  <- page worst case
       (re-measured from painted pixels by the compliance review, 2026-09-13;
        the canvas pass read 4.84. At 390px the same pair measures 4.61:1.)

     720px  hero box 720x547, linear .80 / .56 / .76
       worst pair (.82 cream wordmark sub) ...... 5.31:1
       --cream h1 ............................... 7.35:1
       .86 cream fact row 1 ..................... 5.74:1

     1440px hero box 1440x605, linear .80 / .56 / .76
       worst pair (.86 cream fact row 1) ........ 5.41:1
       --cream header nav links ........ 12.06 / 12.31:1
       --cream header phone .................... 13.01:1

   RE-MEASURED 2026-09-14 after the v2 subhead ("Each has its own full page,
   with a short summary of each below.") added a line at 390 and the hero box
   grew from 605 to 632px there. Same per-pixel method (hide the text, capture
   the painted background, composite the text colour over every pixel):
     375px  fact row 1 4.64 / row 2 4.99 / row 3 5.36; subhead 6.84;
            "or call" 10.78; label pill 5.40
     390px  fact row 1 4.62 / row 2 4.95 / row 3 5.36; subhead 6.87;
            "or call" 10.71; label pill 5.33     <- page worst case, 4.62:1
     720px  fact row 1 5.36; subhead 6.14; "or call" 6.38; label 5.95
     1440px fact row 1 5.19; subhead 9.34; "or call" 10.99; label 10.17
   No scrim change was needed.

   Every pair clears 4.5:1. The tight case is the fact row at phone width: it
   sits lowest in the band, over the lit water, and the h1 and wordmark sub
   are next. A first pass at .88 / .70 / .84 measured a worst pair of 6.64:1,
   which is far more headroom than the gate asks for and turned the lake into
   a slab - the thing BRAND.md's "dark sections carry content" rule is written
   against. These stops are the lightest that hold every pair over 4.5:1.
   The copy column is held to 46rem centred, so it never leaves the radial's
   strong zone.
   -------------------------------------------------------------------------- */
.sp-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ink);
}

.sp-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.sp-hero__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 4:3 original in a band roughly 16:9 or wider. Centred: this frame has no
     single subject to protect - the treeline runs the full width and the
     water below it is a reflection of the same thing - so a vertical centre
     keeps the horizon near the band's middle at wide widths, which is where
     the copy's own centre line sits.

     The same geometry note the other two interior pages carry applies here,
     because the source is the same 1200x900 shape: below 720px the hero box
     measured 375x628, cover scales by HEIGHT (628/900 = .698) to 838x628, so
     the crop is entirely HORIZONTAL and the Y offset is 0 for any value
     written here. The phone band shows the photograph's full height regardless, sky
     included, which is why the phone fix lives in the scrim below, where it
     can act. Above 720 the box is short enough that cover scales by width and
     this value bites. */
  object-position: 50% 50%;
}

.sp-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(78% 66% at 50% 52%,
      rgba(20, 38, 34, .42) 0%,
      rgba(20, 38, 34, .10) 70%,
      rgba(20, 38, 34, 0) 100%),
    /* Tuned DOWN from a first pass at .88 / .70 / .84, which measured a worst
       pair of 6.64:1 and turned the lake into a slab. These stops are the
       lightest that keep every pair on the measured table above 4.5:1 with
       real headroom, which is the trade BRAND.md asks for: the photograph has
       to still read as a photograph. */
    linear-gradient(180deg,
      rgba(20, 38, 34, .80) 0%,
      rgba(20, 38, 34, .52) 45%,
      rgba(20, 38, 34, .76) 100%);
}

/* 80px of top padding clears the nav sitting on the photograph: the header row
   measures 16 + 44 + 16 = 76px at this width, and 80 is that plus the breath. */
.sp-hero__inner {
  position: relative;
  z-index: 2;
  padding-top: 80px;
  padding-bottom: 52px;
  text-align: center;
}

.sp-hero__content {
  max-width: 46rem;
  margin: 0 auto;
}

/* The pill label, in the band's idiom rather than the hero badge's - there is
   no availability dot to carry here, only the subject of the page. */
.sp-hero__label {
  display: inline-block;
  margin: 0 0 18px;
  padding: 7px 14px;
  border: 1px solid rgba(250, 246, 239, .30);
  border-radius: var(--ks-radius-pill);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(250, 246, 239, .90);
}

/* Smaller than the homepage h1 by design: that one is the site's title card,
   this one is a page heading on an article. Same ramp as the other two
   interior pages, so the three read as siblings. */
.sp-hero__title {
  margin: 0 0 14px;
  font-size: clamp(2.125rem, 9.4vw, 2.75rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--cream);
  /* The same tight darkening the scrim does, held close to the letterform, so
     the serif's thin strokes never sit on a lit patch of water. */
  text-shadow: 0 2px 22px rgba(15, 30, 27, .55);
}

.sp-hero__subhead {
  margin: 0 auto 26px;
  max-width: 44ch;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: rgba(250, 246, 239, .93);
  text-shadow: 0 1px 14px rgba(15, 30, 27, .5);
}

.sp-hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 18px;
}

.sp-hero__cta .ks-btn { flex: 0 0 auto; }

.sp-hero__call {
  font-size: 1rem;
  color: rgba(250, 246, 239, .93);
}

/* A standalone tap-to-call link carries a full 44px target, as it does in the
   homepage hero and the footer invite. */
.sp-hero__call .ks-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* The hairline fact row, in the homepage hero's grammar (.ks-hero__trust) and
   identical to the one the other two interior pages carry: the three things a
   person checks before reading any further, on rules instead of in a sentence.
   The consult carries no format wording (see PENDING.md #4). Stacked with
   rules between at phone width, one row with rules between at 720 and up. */
.sp-hero__facts {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 18px auto 0;
  padding: 0;
  list-style: none;
}

.sp-hero__fact {
  width: 100%;
  max-width: 22rem;
  padding: 9px 0;
  font-size: .8125rem;
  line-height: 1.4;
  color: rgba(250, 246, 239, .86);
}

.sp-hero__fact + .sp-hero__fact {
  border-top: 1px solid rgba(250, 246, 239, .22);
}

/* --pine on a dark photograph is invisible; the focus ring inverts here, the
   same way it does inside the header and the footer. */
.sp-hero a:focus-visible { outline-color: var(--cream); }

/* --------------------------------------------------------------------------
   SECTION GROUNDS

   ink (hero) -> cream (the five pages) -> sand (row 1: menopause + EMDR) ->
   cream (row 2: depression + anxiety) -> sand (row 3: relationships) ->
   cream (also) -> ink (approach) -> cream (FAQ) -> sand (consult) -> ink
   (footer). No two neighbours share a ground. The last three are the shared
   .ks-faq and .ks-start and the footer, which bring their own padding and
   ground.

   The grounds are on modifier classes rather than on :nth-child, because the
   pairing is Jacob's and a future insertion must not silently invert the
   alternation.
   -------------------------------------------------------------------------- */
.sp-also { padding: 48px 0 52px; background: var(--cream); }

/* The reading column for #sp-also. Matches .km-body on the menopause page and
   .ks-start__inner's 680px. */
.sp-body {
  max-width: 680px;
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   THE FIVE PAGES - #sp-pages

   A deliberate, Jacob-requested exception to BRAND.md PINNED REFERENCE rule 3
   ("no boxes"), 2026-09-14: the hub has to make it unmistakable that every
   specialty has a full page. The boxes are built out of the site's own
   vocabulary so they read as part of the calm editorial page rather than as
   a dropped-in card grid: the --sand ground the consult card and the
   summaries use, the shared --ks-line hairline as the border, --ks-radius,
   the Fraunces h3 at the .ks-list__title size, the supporting-tier sans for
   the description, and a pine cue in the weight of .ks-link.

   REVISED 2026-09-14 (review fix pass): the photograph now runs full-bleed
   across the top of every box, its top corners rounded to the box radius
   (less the 1px border, so the curves stay concentric), and EVERY box image
   is the same 3:2 crop at every width (object-fit: cover). The inset print,
   the fixed 200px image band and the resting shadow are gone; the shadow
   only arrives with hover or keyboard focus. The one exception is the fifth
   box at 720-1079, where it spans both columns as a wide row: its 3:2
   photograph sits on the LEFT edge instead of the top, because a 3:2 image
   across 656px would stand ~437px tall.

   STRETCHED LINK. The <a> is inside the h3; its ::after is positioned against
   .sp-page (position: relative) and covers the whole box, border included
   (inset -1px). So there is one tab stop per box, one accessible name (the
   area's name), and a click anywhere on the box follows it. The keyboard
   focus ring is drawn on that ::after, which puts it around the BOX, and the
   link's own ring is switched off so the title does not get a second one.
   The box never clips (no overflow: hidden), so the 3px ring offset shows.

   Layout: one column on a phone (photo on top of each box); two columns at
   720 with the fifth box spanning both as a wide row, so nothing is
   orphaned; at 1080 a six-column grid where the first three boxes span two
   and the last two span three.
   -------------------------------------------------------------------------- */
.sp-pages {
  padding: 48px 0 56px;
  background: var(--cream);
}

.sp-pages__head { max-width: 46rem; }

.sp-pages__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sp-page {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  border: 1px solid var(--ks-line);
  border-radius: var(--ks-radius);
  background: var(--sand);
}

/* Full-bleed across the top of the box. The box does not clip (its focus
   ring is drawn outside it), so the image rounds its own top corners. */
.sp-page__img {
  display: block;
  width: 100%;
  height: auto;
  /* 16:9 on a phone (director, 2026-09-14): at 3:2 each stacked box ran
     ~370px and the five added ~1,050px before the first summary. */
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: calc(var(--ks-radius) - 1px) calc(var(--ks-radius) - 1px) 0 0;
}

.sp-page__body {
  display: flex;
  flex-direction: column;
  padding: 16px 18px 18px;
}

.sp-page__title {
  margin: 0 0 4px;
  font-size: 1.1875rem;      /* the .ks-list__title size */
  line-height: 1.25;
}

.sp-page__link {
  color: var(--ink);
  text-decoration: none;
}

.sp-page__link::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 1;
  border-radius: var(--ks-radius);
}

.sp-page__link:focus-visible { outline: none; }

.sp-page__link:focus-visible::after {
  outline: 2px solid var(--pine);
  outline-offset: 3px;
}

/* --body on --sand is 7.67:1. */
.sp-page__desc {
  margin: 0 0 10px;
  font-size: .9375rem;       /* compact tier */
  line-height: 1.5;
  color: var(--body);
  text-wrap: pretty;
}

/* Pinned to the foot of the box (margin-top: auto in a flex column), so the
   cues in one row sit on one line however the titles wrap. --pine on --sand
   is 6.37:1. */
.sp-page__cue {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--pine);
}

.sp-page__arrow {
  flex: 0 0 auto;
  width: 18px;
  height: auto;
}

/* Hover only where hover exists, so a tap on a phone does not leave a box
   stuck in its lifted state. Keyboard focus gets the same look everywhere. */
@media (hover: hover) {
  .sp-page:hover {
    border-color: rgba(46, 91, 82, .42);
    box-shadow: 0 1px 2px rgba(31, 59, 54, .06), 0 26px 50px -24px rgba(31, 59, 54, .48);
  }

  .sp-page:hover .sp-page__link { color: var(--pine-deep); }

  .sp-page:hover .sp-page__cue {
    color: var(--pine-deep);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
  }
}

.sp-page:has(.sp-page__link:focus-visible) {
  border-color: rgba(46, 91, 82, .42);
  box-shadow: 0 1px 2px rgba(31, 59, 54, .06), 0 26px 50px -24px rgba(31, 59, 54, .48);
}

.sp-page:has(.sp-page__link:focus-visible) .sp-page__cue {
  color: var(--pine-deep);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   THE SUMMARIES - three rows

   Row 1 (sand) menopause LEFT, EMDR RIGHT; row 2 (cream) depression LEFT,
   anxiety RIGHT; row 3 (sand) relationships alone, wide and short.

   WHY TWO COLUMNS ONLY FROM 1080 (measured 2026-09-14, headless Chrome,
   characters counted per rendered line): forcing the two-up rules at 720
   gives each column a 272px text box, 32-35 characters per full line of 17px
   .ks-prose, and the h2s break to three and four lines ("One of the
   approaches, not the whole practice." took four). That is well under the
   45ch floor. At 1080 each column is 444px, 50-56 characters per line, every
   h2 two lines except EMDR's three; at 1440 it is 464px, 52-61 characters,
   every h2 two lines. So below 1080 the pair stacks in the 680px reading
   column with a hairline between.
   -------------------------------------------------------------------------- */
.sp-row { padding: 44px 0 48px; }

.sp-row--sand { background: var(--sand); }
.sp-row--cream { background: var(--cream); }

.sp-sum {
  display: flex;
  flex-direction: column;
  max-width: 680px;
  margin: 0 auto;
  /* Anchor landings (#sp-emdr etc.) clear the sticky bar through the shell's
     scroll-padding-top; this is only the breath above the eyebrow. */
  scroll-margin-top: 20px;
}

.sp-sum + .sp-sum {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid var(--ks-line);
}

.sp-sum__head { margin-bottom: 24px; }

/* The medical boundary in the menopause summary, demoted the same way the
   menopause page demotes its own rail: a sage rule on the leading edge, no
   box. */
.sp-sum__rail {
  margin: 8px 0 0;
  padding: 4px 0 4px 20px;
  max-width: 60ch;
  border-left: 2px solid var(--sage);
  font-size: 1rem;           /* supporting tier */
  line-height: 1.66;
  color: var(--body);
}

/* Her own words, quoted verbatim inside a summary. Display face and the
   supporting tier, so it reads as a quoted aside rather than as another
   paragraph of the page's own voice. Same treatment as .km-step__quote. */
.sp-sum__quote {
  margin: 8px 0 0;
  max-width: 58ch;
  font-family: var(--ks-font-display);
  font-optical-sizing: auto;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
}

/* The link out follows its own summary at a fixed 30px (about 40px from the
   last line of type to the words, counting the 44px target's own air).
   REVISED 2026-09-14 (review fix): it used to be pinned to the foot of its
   column (margin-top: auto) so both links in a pair shared a line, but in
   row 1 that opened a ~130px hole above the EMDR link beside the longer
   menopause summary. Level links are not worth a gap that size. */
.sp-sum__more {
  margin-top: 0;
  padding-top: 30px;
}

/* A paragraph already brings 18px under it; keep the gap to the link 30px
   whichever element comes before it. */
.sp-sum .ks-prose + .sp-sum__more,
.sp-sum__main + .sp-sum__more { padding-top: 12px; }

/* "Read the full page": the summary's one action, so it is set a step above
   an inline text link (18px against 17px prose, 600 weight) with a drawn
   arrow. The arrow is a masked ::after in currentColor, so it takes the hover
   colour with the words and adds nothing to the accessible name. The hidden
   " on depression" (etc.) completes the name out of context. --pine on
   --sand 6.37:1, on --cream 7.13:1. */
.sp-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--pine);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

.sp-more::after {
  content: "";
  flex: 0 0 auto;
  width: 22px;
  height: 13px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 13'%3E%3Cpath d='M1 6.5h19M14.5 1.5l5.5 5-5.5 5' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 13'%3E%3Cpath d='M1 6.5h19M14.5 1.5l5.5 5-5.5 5' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.sp-more:hover,
.sp-more:focus-visible {
  color: var(--pine-deep);
  text-decoration-thickness: 2px;
}

/* Orphan control on the reading copy. Browsers without text-wrap ignore it.
   The summary ledes are one or two lines, so they balance instead: pretty
   still left the anxiety lede ending "instead / of it." at 1440. */
.sp-sum .ks-sec__lede { text-wrap: balance; }

.sp-sum .ks-prose,
.sp-sum__rail,
.sp-sum__quote,
.sp-pages .ks-sec__lede,
.sp-also__close { text-wrap: pretty; }

/* --------------------------------------------------------------------------
   ALSO - the rest of her published lists

   One treatment, no boxes. Hairline under every entry and a rule over the
   list, which is the same grammar as .ks-list with the body text removed.
   The rule sits on the ITEM rather than on the container so that at two
   columns an empty trailing cell simply carries no rule.
   -------------------------------------------------------------------------- */
.sp-also__list {
  display: grid;
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ks-line);
}

.sp-also__item {
  padding: 10px 0;
  border-bottom: 1px solid var(--ks-line);
  font-size: 1rem;          /* supporting tier */
  line-height: 1.4;
  color: var(--body);
}

/* The honest closing line. Compact tier: a hand-off, read second by design.
   Matches .km-note. */
.sp-also__close {
  margin: 28px 0 0;
  max-width: 62ch;
  font-size: .9375rem;
  line-height: 1.66;
  color: var(--body);
}

/* --------------------------------------------------------------------------
   HOW SHE WORKS  (ground: --ink - light text only)

   BRAND.md PINNED REFERENCE rule 2: a dark section holds a photograph, a
   label and real content. The type sits in its own column beside the image,
   never on it, so contrast here is the flat --ink case at every width and does
   not depend on which pixels the photograph happens to put underneath:

     --cream h2 and quote ................ 11.22:1
     rgba(250,246,239,.90) paragraphs ..... 9.42:1
     rgba(250,246,239,.90) label .......... 9.42:1
     rgba(250,246,239,.72) cite ........... 6.65:1

   Same grid rules as .km-tele, including the stretch-only-at-1080 fix.
   hero.webp here, since the hero band took still.webp: the valley is the
   homepage's frame and this is the one band on the site where repeating it
   is useful, because the section is about her practice as a whole.
   -------------------------------------------------------------------------- */
.sp-approach {
  padding: 56px 0 60px;
  background: var(--ink);
}

.sp-approach__grid {
  display: grid;
  grid-template-columns: minmax(0, 680px);   /* same measure as the list section above */
  justify-content: center;
}

.sp-approach__media { margin: 0; }

.sp-approach__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--ks-radius);
  border: 1px solid rgba(250, 246, 239, .18);
}

.sp-approach__label {
  display: inline-block;
  margin: 0 0 18px;
  padding: 7px 14px;
  border: 1px solid rgba(250, 246, 239, .30);
  border-radius: var(--ks-radius-pill);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(250, 246, 239, .90);
}

/* Not .ks-sec__title: that class inherits the h2 base colour (--ink), which is
   this band's own ground. Same size ramp, cream ink. */
.sp-approach__title {
  margin: 0 0 18px;
  font-size: clamp(1.75rem, 6.6vw, 2.25rem);
  line-height: 1.15;
  color: var(--cream);
}

.sp-approach__p {
  margin: 0 0 18px;
  max-width: 60ch;
  font-size: 1.0625rem;     /* reading tier - the same 17px as .ks-prose */
  line-height: 1.72;
  color: rgba(250, 246, 239, .90);
}

.sp-approach__p:last-child { margin-bottom: 0; }

/* Her modality passage. The band's one held beat, so it takes the display
   face and a rule on the leading edge rather than quotation-mark decoration.
   The quotation marks in the markup are real characters, because this is a
   verbatim quotation and the marks are part of the sentence's meaning here. */
.sp-approach__quote {
  margin: 0 0 22px;
  padding: 2px 0 2px 20px;
  border-left: 2px solid rgba(157, 184, 168, .55);
}

.sp-approach__quote-p {
  margin: 0 0 12px;
  max-width: 54ch;
  font-family: var(--ks-font-display);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.62;
  color: var(--cream);
  text-wrap: pretty;
}

.sp-approach__cite {
  display: block;
  font-style: normal;
  font-size: .8125rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(250, 246, 239, .72);
}

.sp-approach a:focus-visible { outline-color: var(--cream); }

/* ==========================================================================
   MOTION - the page boxes' lift and the arrows' slide. Gated twice: no
   movement for a reduced-motion user, and no hover lift on a touch screen.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .sp-page {
    transition: transform 220ms var(--ks-ease),
                box-shadow 220ms var(--ks-ease),
                border-color 220ms var(--ks-ease);
  }

  .sp-page__link,
  .sp-page__cue,
  .sp-page__arrow,
  .sp-more,
  .sp-more::after {
    transition: color 200ms var(--ks-ease),
                transform 220ms var(--ks-ease),
                text-decoration-thickness 200ms var(--ks-ease);
  }

  .sp-page:has(.sp-page__link:focus-visible) { transform: translateY(-2px); }
  .sp-page:has(.sp-page__link:focus-visible) .sp-page__arrow { transform: translateX(3px); }
  .sp-more:focus-visible::after { transform: translateX(3px); }
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .sp-page:hover { transform: translateY(-2px); }
  .sp-page:hover .sp-page__arrow { transform: translateX(3px); }
  .sp-more:hover::after { transform: translateX(3px); }
}

/* ==========================================================================
   720px and up
   ========================================================================== */
@media (min-width: 720px) {
  /* The nav row grows to 22 + 44 + 22 = 88px here. */
  .sp-hero__inner {
    padding-top: 104px;
    padding-bottom: 72px;
  }

  /* The wide band crops the dawn sky out at the top but brings the lit water
     up under the fact row and the phone number, so the mid-stop goes UP here
     rather than down - the opposite of what the shorter band would suggest
     and the same direction the menopause page had to move for its sunlit
     wall. Re-measured after the change, not assumed. */
  .sp-hero__scrim {
    background:
      radial-gradient(78% 66% at 50% 52%,
        rgba(20, 38, 34, .42) 0%,
        rgba(20, 38, 34, .10) 70%,
        rgba(20, 38, 34, 0) 100%),
      linear-gradient(180deg,
        rgba(20, 38, 34, .80) 0%,
        rgba(20, 38, 34, .56) 45%,
        rgba(20, 38, 34, .76) 100%);
  }

  .sp-hero__title { font-size: clamp(2.75rem, 5.6vw, 3.5rem); }

  .sp-hero__subhead { font-size: 1.1875rem; }

  /* One row, rules between, as the homepage's credential row runs. */
  .sp-hero__facts {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .sp-hero__fact {
    width: auto;
    max-width: none;
    padding: 2px 18px;
  }

  .sp-hero__fact + .sp-hero__fact {
    border-top: 0;
    border-left: 1px solid rgba(250, 246, 239, .22);
  }

  /* The shell's rhythm at this width is 84/88, which the page boxes, the
     "also" and the approach band keep. The summary rows take a shorter step
     (68/72) because they are the run of three; the alternating grounds still
     give each row its own room. */
  .sp-pages,
  .sp-also,
  .sp-approach { padding: 84px 0 88px; }

  .sp-row { padding: 68px 0 72px; }

  /* THE FIVE PAGES at two columns: the photograph on top at 3:2, the words
     under it. The body fills the rest of the box (grid row 1fr) so the two
     cues in a row share a line. */
  .sp-pages__grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .sp-page__body { padding: 18px 20px 20px; }

  .sp-page__title {
    margin-bottom: 6px;
    font-size: 1.3125rem;
  }

  /* The fifth box would be an orphan in a two-column grid, so it spans both
     and runs as a wide row: photograph full-bleed on the left edge (still
     3:2, left corners rounded), words right. */
  .sp-page:last-child {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: none;
    gap: 24px;
  }

  .sp-page:last-child .sp-page__img {
    align-self: start;
    border-radius: calc(var(--ks-radius) - 1px) 0 0 calc(var(--ks-radius) - 1px);
  }

  /* A short body beside a taller photograph: centre the words on it rather
     than pinning the cue to the floor with a hole above it. */
  .sp-page:last-child .sp-page__body {
    justify-content: center;
    padding: 14px 20px 14px 0;
  }

  .sp-page:last-child .sp-page__cue { margin-top: 6px; }

  /* TWO columns, and it stays two at 1080 as well. Three was tried and
     measured: the list lives inside the 680px reading column, so three
     columns are ~200px each and five of the eleven labels wrap to two lines.
     Two columns are ~320px and every label sits on one line. */
  .sp-also__list {
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
  }

  /* Eleven items in two columns leave one orphan in the left column with a
     half-width rule under it. The last item spans both columns so the block
     closes on one full-width rule. */
  .sp-also__item:last-child { grid-column: 1 / -1; }

  /* The approach band stays STACKED at this width. The two-column version was
     measured (design review, 2026-09-13): a 320x240 photograph centred in a
     copy column 722px tall left 482px of bare ink around it, and the copy
     squeezed to 292px broke the h2 onto three lines with a one-word middle
     line. Stacked, the h2 holds one line and the quote five. The two-column
     grid arrives at 1080, where the columns end level. */
}

/* ==========================================================================
   1080px and up
   ========================================================================== */
@media (min-width: 1080px) {
  .sp-hero__inner {
    padding-top: 116px;
    padding-bottom: 84px;
  }

  .sp-hero__title { font-size: 3.75rem; }

  .sp-pages,
  .sp-also,
  .sp-approach { padding: 104px 0 108px; }

  .sp-row { padding: 84px 0 88px; }

  /* THE FIVE PAGES at six columns: three boxes spanning two, then two
     spanning three. Every photograph keeps the same 3:2 crop, so within a
     row the image band runs level and the wider second row simply shows the
     photographs larger. */
  .sp-pages__grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 24px;
  }

  .sp-page { grid-column: span 2; }

  /* "Perimenopause & menopause" measures 289px at 21px against a 289px text
     box at 1440 (275px at 1080), so it broke onto two lines. At 20px with
     18px side padding it measures ~276px against 293px / 279px: one line at
     both widths. */
  .sp-page__body { padding: 18px 18px 20px; }

  .sp-page__title { font-size: 1.25rem; }

  .sp-page:nth-child(n + 4) { grid-column: span 3; }

  /* One photo height across both rows (director, 2026-09-14): a fixed ratio
     made the two wide boxes' photos ~340px against ~220px in the row above. */
  .sp-page__img,
  .sp-page:last-child .sp-page__img {
    aspect-ratio: auto;
    height: 220px;
  }

  .sp-page:last-child {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    gap: 0;
  }

  .sp-page:last-child .sp-page__img {
    border-radius: calc(var(--ks-radius) - 1px) calc(var(--ks-radius) - 1px) 0 0;
  }

  .sp-page:last-child .sp-page__body {
    justify-content: flex-start;
    padding: 18px 18px 20px;
  }

  .sp-page:last-child .sp-page__cue { margin-top: auto; }

  /* THE SUMMARIES two-up. A hairline runs down between the columns, 56px of
     air either side of it. Measured: 444px text boxes at 1080 (50-56
     characters per line), 464px at 1440 (52-61). See THE SUMMARIES above. */
  .sp-row__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
  }

  .sp-sum {
    max-width: none;
    margin: 0;
    padding-right: 56px;
  }

  .sp-sum + .sp-sum {
    margin-top: 0;
    padding-top: 0;
    padding-right: 0;
    padding-left: 56px;
    border-top: 0;
    border-left: 1px solid var(--ks-line);
  }

  /* Row 3: relationships alone, as one wide short band. Head AND link in the
     left column, prose in the right, and the right column starts on the
     same line as the EMDR and anxiety columns above it (113px = 56 + the 1px
     hairline + 56), so the three rows share one vertical grid even though
     this one carries no rule. REVISED 2026-09-14 (review fix): the link used
     to close the prose column, leaving the head column empty for the height
     of the second paragraph; it now sits under the lede. In the DOM it still
     follows the prose (see the markup note). */
  .sp-row__grid--wide { grid-template-columns: minmax(0, 1fr); }

  .sp-sum--wide {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: 113px;
    align-items: start;
    padding-right: 0;
  }

  .sp-sum--wide .sp-sum__head {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0;
  }

  .sp-sum--wide .sp-sum__main {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .sp-sum--wide .sp-sum__main .ks-prose:last-child { margin-bottom: 0; }

  .sp-sum--wide .sp-sum__more {
    grid-column: 1;
    grid-row: 2;
    padding-top: 22px;
  }

  /* 2026-09-17: the landscape photo that used to sit left of this copy was
     removed (Jacob: its crop looked wrong at every width). The copy is one
     centred reading column at every width (base .sp-approach__grid). */
}

/* ==========================================================================
   PAGE HEIGHT, MEASURED 2026-09-14 (headless Chrome, .tmp/qa/run.mjs)

     v1 (five full-width areas):  390px ... 11,147   720px ... 9,732   1440px ... 9,570
     v2 (boxes + three rows):     390px ...  9,844   720px ... 8,749   1080px ... 7,434
                                  1440px ...  7,316

   Net 1,303px shorter at 390 and 2,254px at 1440, with the boxes added:
   the three-row .ks-list details moved out to the full pages and the
   summaries pair up from 1080.

     v2 review fix (photos on top of every box, 3:2):
                                  390px ... 10,900   720px ... 8,648   1080px ... 7,407
                                  1440px ...  7,341
   The phone grows 1,056px: each box is now ~370px tall (a 348x232 photo on
   top) where the thumbnail row was ~160px.
   ========================================================================== */