/* ==========================================================================
   Kristen I. Speer, LPC, LLC - kristenspeerlpc.com

   v18 (2026-09-15) - the sticky bar carries the two nav links from 860px
   (.ks-sticky__nav), the help section's CTA row is a pair of pills
   (.ks-btn--ghost is new), and the homepage's EMDR and menopause feature
   bands are gone along with their .ks-emdr* / .ks-mp* rules.
   styles.css - page styles. Design direction: "warm editorial calm" (BRAND.md).
   Mobile-first: base = 375px, then min-width 720px, then min-width 1080px.
   ONE stylesheet for all three pages: this file, then the EMDR page's ke-
   block, then the insurance page's ki- block, all under the ks- page shell.
   (Since then every page loads its own prefix stylesheet after this one:
   sp- specialties, km- menopause, ke- EMDR, ki- insurance, kd- depression,
   ka- anxiety, kr- relationships. None of them redefines a ks- rule.)

   v17 (2026-09-14) - SPEC-SPECIALTY-PAGES-2026-09-14.md, shared shell
   contracts 1-3 and 5, on all eight pages:

   - .ks-sticky__link: the sticky bar's name is now a link home. Same column,
     same type; the link carries a 44px floor (the bar already measured 44px
     of content from its button, so its height is unchanged: 53px / 61px),
     a quiet hover that steps the name to --pine, and the global focus ring.
   - GET STARTED: the .ks-start__card box is gone, with .ks-start__lead and
     .ks-start__actions. .ks-start__book is one centred column with no box,
     border or divider: the booking pill is the centrepiece (64px tall on a
     phone, 68px from 720, 1.1875-1.25rem type, a CSS-drawn calendar glyph so
     no page needs extra markup), "or call" and the note centred under it.
     A soft cream glow sits behind the pill instead of a card. Section padding
     retuned for the shorter content (see the section's comment).
   - .ks-footer__nav: seven links. A tight stack of 44px targets on a phone,
     three columns under a full-width brand row from 720, two columns in the
     brand column from 1080 (footer tracks retuned to make the room).
   - .ks-list__more: "Read more about ..." under each homepage help row.
   - Review fix pass (2026-09-14, same version): text-wrap: pretty on
     .ks-sec__lede, .ks-prose, .ks-list__body; footer nav flows by column (3
     rows from 720, 4 from 1080), 34px rows above the phone, quiet cream
     aria-current; .ks-footer__invite-actions hidden (the invite line stays);
     .ks-wordmark__link carries a 44px floor.
   - .ks-vh: visually hidden text helper.

   v16 (2026-09-13) - NO RULE CHANGED. The batch that added the SimplePractice
   appointment-request button, the footer email line, the hero trust-row note
   and the four-row help list needed nothing from this file, and the three
   things that could have needed something were measured instead of guessed
   (headless Chrome, .tmp/qa/):

   - Widget button: it carries .ks-btn .ks-btn--primary .ks-start__cta, which
     already wrap and stretch. .spwidget-button is on it only because it is in
     Kristen's supplied embed code; her script binds by the data-spwidget
     attributes and never reads the class, so no .spwidget-button rule exists
     here and none is wanted. None of her embed's own <style> block is used.
   - Overlay stacking: verified, no rule needed. Her script appends
     .spwidget--overlay (z-index 999999998) and .spwidget--scroller (999999999)
     to <body>; .ks-sticky sits at z-index 100 and .ks-header at 6, so both
     fall under it. document.elementFromPoint at the sticky bar's own
     coordinates returns .spwidget--scroller while the overlay is open, so
     nothing of ours is clickable behind it.
   - Sticky bar against her scroll lock: verified, no rule needed. Opening the
     overlay sets body.spwidget--scroll-locked{position:fixed;top:-<scrollY>};
     closing it removes the class and restores the scroll. Measured at 1440:
     scrollY 5365 before, 5365 after, .ks-sticky still .ks-is-on and visible.
     The bar's transition never runs during the lock because its class is only
     toggled by the hero IntersectionObserver, which does not fire.
   - Footer email line: kristenspeerlpc@gmail.com measures 197px on one line
     at 390px AND at 320px (one client rect, inside the viewport), so the
     permitted overflow-wrap: anywhere on .ks-footer__line was not added.
   - Help grid at four rows: the 720px+ rule already stretches
     .ks-help__figure to the list's height (flex: 1 1 auto with a 320px
     floor). Measured with the list cut from seven rows to four, the aside and
     the list end on the same pixel - 557/557 at 1440, 584/584 at 1080 - and
     the figure lands at 359px / 386px, above its floor. No aspect-ratio or
     max-height needed, and the grid order is untouched.
   ========================================================================== */

/* --------------------------------------------------------------------------
   TOKENS - the BRAND.md palette, defined once. Nothing else defines a token.
   -------------------------------------------------------------------------- */
:root {
  --ink: #1F3B36;
  --pine: #2E5B52;
  --pine-deep: #24473F;
  --sage: #9DB8A8;
  --cream: #FAF6EF;
  --sand: #F1E9DC;
  --clay: #C4744D;
  --clay-text: #9E5230;   /* 4.71:1 on --sand, 5.26:1 on --cream - safe on both grounds. */
  --body: #3E4A46;

  --ks-font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --ks-font-ui: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --ks-shell: 1120px;
  --ks-gutter: 20px;

  --ks-radius: 16px;
  --ks-radius-sm: 14px;
  --ks-radius-pill: 999px;

  --ks-line: rgba(157, 184, 168, .55);
  --ks-shadow: 0 1px 2px rgba(31, 59, 54, .05), 0 18px 44px -26px rgba(31, 59, 54, .40);

  /* 440ms, not 560: at the old duration a section entered on a fast scroll was
     still visibly half-faded by the time it reached the middle of the screen.
     Short enough to have resolved by then, long enough to still read as a
     rise rather than a pop. The band overrides it deliberately (see MOTION). */
  --ks-dur: 440ms;
  --ks-ease: cubic-bezier(.22, .61, .36, 1);

  /* Height of the compact sticky bar. Measured, not guessed: 44px button +
     2x4px padding + the 1px hairline. Anchor landings and the FAQ's sticky
     figure both offset from this one number, so the bar can never cover the
     thing a click just scrolled to. */
  --ks-stickyh: 53px;
}

/* --------------------------------------------------------------------------
   BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* An anchor landing has to clear the compact sticky bar, which is showing
     by the time any in-page scroll finishes - every anchor on this page
     points below the hero. Exactly the bar's height, no decorative extra:
     on a 667px phone the one anchor that matters is already fighting for
     rows, and the target that needs air asks for it with scroll-margin. */
  scroll-padding-top: var(--ks-stickyh);
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--body);
  font-family: var(--ks-font-ui);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Paper grain - decorative, never interactive, never animated. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

h1, h2, h3 {
  font-family: var(--ks-font-display);
  font-optical-sizing: auto;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -.01em;
  text-wrap: balance;
}

p { margin: 0; }

a { color: var(--pine); }

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

/* Sections that app.js focuses programmatically after a CTA scroll must not
   draw a ring around the whole section for mouse users. */
[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }

.ks-shell {
  width: 100%;
  max-width: var(--ks-shell);
  margin: 0 auto;
  padding-left: var(--ks-gutter);
  padding-right: var(--ks-gutter);
}

.ks-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--cream);
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--ks-radius-sm) 0;
}

.ks-skip:focus { /* :focus, not :focus-visible - some AT focus paths withhold the latter */
  left: 0;
  outline-offset: -4px;
  outline-color: var(--cream);
}

/* Visually hidden, still read aloud: extra words for a link whose visible
   text only makes sense beside its heading ("Read the full page" plus
   " on depression"). The standard clip pattern; never put focusable content
   in here, because a focused element with no visible box is a trap. */
.ks-vh {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* --------------------------------------------------------------------------
   SHARED BITS

   BODY TYPE SCALE - three sizes, one job each. There were four, and the
   fourth (.9688rem / 15.5px) had no role: it was simply between the other
   two. Every body-copy rule below now picks one of these three.

     17px  1.0625rem  reading prose - paragraphs a visitor actually reads
                      through: .ks-prose, .ks-sec__lede, .ks-qa__a
                      (1.125rem at 1080px for the section ledes only)
     16px  1rem       supporting body - copy that explains a control or a
                      card: .ks-list__body, .ks-endorse blockquote
     15px  .9375rem   compact / reference - dense rows and chrome, read
                      second by design: .ks-facts__def,
                      .ks-help__also, .ks-footer__line, .ks-hours,
                      .ks-start__call, .ks-start__note
   -------------------------------------------------------------------------- */
.ks-link {
  color: var(--pine);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* The colour step from --pine to --pine-deep is 1.36:1 - real, but not on its
   own a state change anyone registers. The rule under the word thickens with
   it, which is the cue that actually reads at a glance. Keyboard focus gets
   the same treatment as the pointer, on top of the global focus ring. */
.ks-link:hover,
.ks-link:focus-visible {
  color: var(--pine-deep);
  text-decoration-thickness: 2px;
}

.ks-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: var(--ks-radius-pill);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  /* A two-word label breaking to "Get / started" in a pill reads as a bug.
     Every button label on this page is short enough to hold one line at
     320px, so none of them may wrap. */
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.ks-btn--primary {
  background: var(--pine);
  border-color: var(--pine);
  color: #fff;
  box-shadow: 0 10px 24px -16px rgba(31, 59, 54, .75);
}

/* Hover on every pill variant is the same three-part move: the ground steps
   down one stop, the shadow grows and darkens so the pill reads as lifted off
   its surface, and a 1px rise finishes it (that part lives in the motion gate,
   so reduced-motion users still get the other two). The ground shift alone was
   4% of luminance - measurably there, practically invisible.
   :focus-visible is given the same ground and shadow, so a keyboard walk
   through the page shows exactly what a pointer shows, plus the focus ring. */
.ks-btn--primary:hover,
.ks-btn--primary:focus-visible {
  background: var(--pine-deep);
  border-color: var(--pine-deep);
  box-shadow: 0 16px 30px -14px rgba(31, 59, 54, .62);
}

/* Second pill in a pair, on a light ground: outline rather than fill, so the
   two buttons in the help section read as a lead and an alternative instead
   of competing. Pine on sand is 5.9:1 for the label and 3.4:1 for the border,
   both over the floor. */
.ks-btn--ghost {
  background: transparent;
  border-color: var(--pine);
  color: var(--pine);
}

.ks-btn--ghost:hover,
.ks-btn--ghost:focus-visible {
  background: color-mix(in srgb, var(--pine) 8%, transparent);
  border-color: var(--pine-deep);
  color: var(--pine-deep);
}

/* Pine on ink is a 1.4:1 surface - invisible. The closing invitation sits on
   the footer's ink, so its button inverts: cream ground, ink label (11.2:1),
   and the pill itself clears the 3:1 floor against the ground by the same
   margin. */
.ks-btn--light {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--ink);
  box-shadow: 0 10px 26px -18px rgba(0, 0, 0, .85);
}

/* Same move as the primary pill, with one honest limit: on the footer's ink a
   drop shadow has almost no ground left to darken, so here the cream-to-sand
   step and the 1px rise carry the state and the shadow only deepens the seam
   under the pill. */
.ks-btn--light:hover,
.ks-btn--light:focus-visible {
  background: var(--sand);
  border-color: var(--sand);
  box-shadow: 0 16px 32px -14px rgba(0, 0, 0, .95);
}

.ks-btn--sm {
  min-height: 44px;
  padding: 10px 18px;
  font-size: .9375rem;
}

.ks-eyebrow {
  margin: 0 0 12px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--clay-text);          /* passes on cream AND sand since the #9E5230 retune */
}

.ks-sec__head { margin: 0 0 32px; }

/* The FAQ's heading centres over its centred accordion. */
.ks-sec__head--center {
  margin-left: auto;
  margin-right: auto;
  max-width: 46rem;
  text-align: center;
}

.ks-sec__head--center .ks-sec__lede { margin-left: auto; margin-right: auto; }

.ks-sec__title {
  margin: 0;
  font-size: clamp(1.75rem, 6.6vw, 2.25rem);
  line-height: 1.15;
}

.ks-sec__lede {
  margin: 16px 0 0;
  max-width: 58ch;
  font-size: 1.0625rem;
  line-height: 1.68;
  text-wrap: pretty;
}

.ks-prose {
  margin: 0 0 18px;
  max-width: 62ch;
  font-size: 1.0625rem;
  line-height: 1.72;
  text-wrap: pretty;
}

/* One phrase per paragraph, already present in her approved copy, set at the
   UI face's heavy weight. 700 is not loaded - it would be synthesised. */
.ks-prose__key {
  font-weight: 600;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   HEADER - sits ON the hero photograph (BRAND.md PINNED REFERENCE rule 1).

   Absolutely positioned out of flow, transparent ground, cream type. It never
   changes state on scroll: .ks-sticky (a separate fixed element) takes over
   once the hero is past, which is what keeps the handover free of layout
   shift. Every label here is measured against the hero scrim, not the raw
   photograph - see the HERO block for those numbers.
   -------------------------------------------------------------------------- */
.ks-header {
  position: absolute;
  z-index: 6;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
}

.ks-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 16px;
  padding-bottom: 16px;
}

/* On the photograph the wordmark inverts. The footer's copy of the same
   component keeps its own --light modifier, so these two never collide. */
.ks-header .ks-wordmark__name { color: var(--cream); }
.ks-header .ks-wordmark__sub { color: rgba(250, 246, 239, .82); }

.ks-wordmark {
  margin: 0;
}

/* The wordmark is the home link on all three pages (shared shell). It carries
   the stack, so the <p> stays a plain block and nothing about the two lines
   changes. Underline is deliberately absent: this is chrome, not prose. */
.ks-wordmark__link {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 44px;         /* tap target; the header row is already 44px tall
                               from its buttons, so the row height is unchanged */
  color: inherit;
  text-decoration: none;
}

.ks-wordmark__name {
  font-family: var(--ks-font-display);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--ink);
}

/* At 375px the header row offers the wordmark ~200px. At .625rem/.18em this
   line measures 208px and wraps to two lines, which drags the whole header
   crooked. Below 720px it holds one line: the tracking relaxes and the size
   rides the viewport, so 320px still fits beside the CTA. */
.ks-wordmark__sub {
  font-size: clamp(.5625rem, 2.35vw, .625rem);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--body);
}

.ks-header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ---- top-level links in the nav ----------------------------------------
   TWO links since 2026-09-13: Specialties (the hub the five areas live on)
   and Insurance & Rates. Menopause and EMDR came out of the nav because they
   are children of the hub now; they keep their pages and their footer links.

   Two is not a return to the old 720px gate. When the row last held two links
   the second was the short word "EMDR" and it measured 614px of a 641px
   content box at 720; "Specialties" is about 45px wider than that, which puts
   the row past the box. So the rule below stays display:none until 860 (see
   the 860px query near the end of this file for the full measurement).

   Below 860 both nav pages are still reached from the footer nav, and so are
   the menopause and EMDR pages beneath the hub, so nothing lives only up
   here. Display:none also keeps them out of the tab order at those widths,
   which is the honest behaviour: there is nothing to see. */
.ks-header__nav {
  display: none;
  align-items: center;
  gap: 24px;
}

.ks-header__navlink {
  font-size: .9375rem;
  font-weight: 600;
  color: var(--cream);
  text-decoration: none;
  padding: 10px 0;
}

/* No colour step available here - the label is already cream on a photograph -
   so the state is an underline appearing under the word. */
.ks-header__navlink:hover,
.ks-header__navlink:focus-visible {
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
}

/* The page you are already on, on /emdr/ and /insurance/. */
.ks-header__navlink[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
}

/* The sand call-strip that used to hang under the header is gone: it cut the
   full-bleed photograph in half at exactly the width where the photograph is
   the whole point. The number lives in the nav at every width instead - as a
   44px icon target below 720px (aria-label carries the digits), as icon plus
   digits above it. */
.ks-header__tel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 44px;
  min-height: 44px;
  border-radius: var(--ks-radius-pill);
  font-weight: 600;
  color: var(--cream);
  text-decoration: none;
}

/* Below 720px this link is an icon with no text, so an underline has nothing
   to land on: a soft cream ground behind the target reads at both widths. */
.ks-header__tel:hover,
.ks-header__tel:focus-visible {
  background: rgba(250, 246, 239, .18);
  color: #fff;
}

.ks-header__tel-icon { flex: 0 0 auto; }

.ks-header__tel-num { display: none; }

.ks-header a:focus-visible { outline-color: var(--cream); }

/* --------------------------------------------------------------------------
   STICKY BAR

   The page runs ~6,000px; past the hero there was no way back to the phone or
   the flow without scrolling to one end of it. This bar is a separate fixed
   element rather than the real header made sticky, for one reason: a sticky
   header still owns its box in normal flow, so compacting it while stuck drags
   every pixel below it upward. Fixed and out of flow, this can appear, change
   height, and leave without moving the page at all.

   Hidden state is visibility:hidden - it takes the two links out of the tab
   order and the accessibility tree, which display:none would also do but
   without a state to transition from.
   -------------------------------------------------------------------------- */
.ks-sticky {
  position: fixed;
  z-index: 100;          /* over the page, under .ks-skip (1000) */
  top: 0;
  left: 0;
  right: 0;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-100%);
  border-bottom: 1px solid var(--ks-line);
  background: var(--cream);
  box-shadow: 0 1px 2px rgba(31, 59, 54, .04), 0 14px 30px -24px rgba(31, 59, 54, .55);
}

.ks-sticky.ks-is-on {
  visibility: visible;
  opacity: 1;
  transform: none;
}

.ks-sticky__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 4px;
  padding-bottom: 4px;
}

.ks-sticky__brand {
  margin: 0;
  min-width: 0;
}

/* The name is the way home, as the header wordmark is (contract 1, v17). The
   link takes over the column the <p> used to draw, so the two lines sit
   exactly where they did. min-height 44px is a target floor that costs the
   bar nothing: the Get started pill beside it already sets the content row
   at 44px, so the bar stays 53px below 720 and 61px above. Chrome, not
   prose, so no underline; the hover is a colour step on the name only, and
   keyboard focus gets the site's 2px ring (global :focus-visible) with a
   rounder corner so it reads as a target around two lines of type. */
.ks-sticky__link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  min-width: 0;
  min-height: 44px;
  color: inherit;
  text-decoration: none;
  border-radius: 6px;
  -webkit-tap-highlight-color: transparent;
}

.ks-sticky__link:hover .ks-sticky__name,
.ks-sticky__link:focus-visible .ks-sticky__name { color: var(--pine); }

.ks-sticky__name {
  font-family: var(--ks-font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.01em;
  white-space: nowrap;
  color: var(--ink);
}

.ks-sticky__sub {
  display: none;         /* no room beside the phone and the CTA on a phone */
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--body);
}

.ks-sticky__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

/* The sticky bar's own copy of the header nav (Jacob, 2026-09-15: past the
   hero there was no link to another page up here at all). Same 860px gate as
   .ks-header__nav and the same two links, in ink rather than cream because
   this bar sits on the cream ground, not on the photograph. */
.ks-sticky__nav {
  display: none;
  align-items: center;
  gap: 22px;
}

.ks-sticky__navlink {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}

.ks-sticky__navlink:hover,
.ks-sticky__navlink:focus-visible {
  color: var(--pine-deep);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
}

/* The page you are already on. */
.ks-sticky__navlink[aria-current="page"] {
  color: var(--pine);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}

/* Below 720px the digits do not fit beside the wordmark and the CTA, so the
   link becomes a 44px icon target and aria-label carries the number. */
.ks-sticky__tel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 44px;
  min-height: 44px;
  border-radius: var(--ks-radius-pill);
  font-weight: 600;
  color: var(--pine);
  text-decoration: none;
}

/* Below 720px this link is an icon with no text, so an underline or a colour
   step has nothing to land on. A soft sage ground behind the target reads at
   both widths - a circle around the icon on a phone, a pill behind the digits
   above 720 - and is the one hover on the page that has to work without type. */
.ks-sticky__tel:hover,
.ks-sticky__tel:focus-visible {
  background: rgba(157, 184, 168, .30);
  color: var(--pine-deep);
}

.ks-sticky__tel-icon { flex: 0 0 auto; }

.ks-sticky__tel-num { display: none; }

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
/* The photograph is now the hero, edge to edge and top to bottom, with the
   nav and every line of type set on it. The old composition - a half-height
   photo fading up into cream behind a left-aligned column - is what left the
   viewport's right side empty; nothing here paints cream any more. */
.ks-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  /* svh, not vh: on iOS vh is the *expanded* viewport, so a 100vh hero hides
     its own trust row behind the browser chrome on arrival. The vh line is
     the fallback for engines without svh. */
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--ink);
}

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

/* <picture> is an inline wrapper with no height of its own, so the image's
   height:100% would resolve against nothing. Give it the media box. */
.ks-hero__media picture {
  position: absolute;
  inset: 0;
  display: block;
}

.ks-hero__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 46%;
}

/* The contrast layer. The Ozark frame is a pale, high-key photograph - a band
   of bright mist runs straight across the middle - so cream type needs real
   darkening, not a tint.

   The radial is the load-bearing one, and it is a radial rather than a fourth
   linear stop for a measured reason. With the two linear layers alone, the
   worst (brightest) pixel under the h1 sampled rgb(123,129,111) - 3.74:1
   against cream, a fail, and the subhead was 3.36:1. Darkening the linear
   mid-stops enough to fix that flattened the ridgelines across the entire
   width. This ellipse instead darkens only the column the type actually sits
   in and fades to nothing before the frame edges, so the valley keeps its
   light where nothing is written on it.

   MEASURED after this change, by compositing these exact layers over the
   shipped image pixels and taking the BRIGHTEST pixel inside each text box
   (the worst case, not an average) - see the sampled figures in the hero
   trust block below. Every hero text pair clears 4.5:1. */
.ks-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(62% 60% at 50% 44%,
      rgba(20, 38, 34, .42) 0%,
      rgba(20, 38, 34, .22) 58%,
      rgba(20, 38, 34, 0) 100%),
    linear-gradient(180deg,
      rgba(20, 38, 34, .72) 0%,
      rgba(20, 38, 34, .48) 26%,
      rgba(20, 38, 34, .46) 52%,
      rgba(20, 38, 34, .68) 82%,
      rgba(20, 38, 34, .86) 100%),
    linear-gradient(90deg,
      rgba(20, 38, 34, .28) 0%,
      rgba(20, 38, 34, .10) 45%,
      rgba(20, 38, 34, .22) 100%);
}

/* NOT a .ks-shell: the trust row's ground has to reach both viewport edges on
   a phone, so the shell moves inward one level (onto the content stack and
   onto the row's own <ul>) and this stays full width. Negative margins would
   have done it in one less element and risked horizontal overflow at 320px;
   this cannot. */
.ks-hero__inner {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  /* Clears the nav sitting on the photograph above it. */
  padding-top: 84px;
  text-align: center;
}

/* auto margins take the vertical middle, which pushes the trust row to the
   hero's lower edge without a fixed height anywhere - a longer wrap on a
   narrow screen grows the hero instead of colliding with the row. */
/* `margin: auto`, not `auto 0`: this element is also a .ks-shell, and the
   shell's horizontal centering IS its left/right auto margins - zeroing them
   pinned the whole hero stack to the left edge. The vertical autos are what
   take the middle. */
.ks-hero__content-wrap {
  margin: auto;
  padding-bottom: 30px;
}

.ks-hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* The reference's small pill label, sitting on the image above the headline. */
.ks-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 20px;
  padding: 8px 15px;
  border: 1px solid rgba(250, 246, 239, .38);
  border-radius: var(--ks-radius-pill);
  background: rgba(20, 38, 34, .34);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--cream);
}

.ks-badge__dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--clay);
}

.ks-hero__title {
  margin: 0 0 16px;
  max-width: 14ch;
  font-size: clamp(2.5rem, 12.6vw, 3.25rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -.022em;
  color: var(--cream);
  /* The photograph is busiest exactly where the headline sits. A soft drop
     keeps the serif's thin strokes off the ridgeline without reading as a
     glow - it is the same darkening the scrim does, tight to the letterform. */
  text-shadow: 0 2px 22px rgba(15, 30, 27, .55);
}

.ks-mark {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.ks-mark__line {
  position: absolute;
  left: -2%;
  bottom: -.16em;
  width: 104%;
  height: .26em;
  color: var(--clay);
  overflow: visible;
}

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

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

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

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

/* Standalone tap-to-call / portal links carry a full 44px target. The footer's
   closing-invite number is in this list too: it measured 99x17 before the
   refit, which is a tap target on paper only. */
.ks-hero__call .ks-link,
.ks-footer__line .ks-link,
.ks-footer__invite-call .ks-link,
.ks-start__call .ks-link,
.ks-list__more .ks-link,
.ks-footer__nav .ks-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Links inside running prose stay inline (WCAG 2.5.8 inline exception) but
   get a 44px-tall invisible hit area so a thumb still lands on them. */
.ks-qa__a .ks-link { position: relative; }

.ks-qa__a .ks-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

.ks-hero__fine {
  margin: 14px 0 0;
  font-size: .875rem;
  color: rgba(250, 246, 239, .86);
}

/* ---- hero trust row ----------------------------------------------------
   The credential row along the hero's lower edge - the reference's stat row,
   carrying her real credentials instead of invented numbers, with hairline
   rules between the columns.

   MEASURED CONTRAST FOR THE WHOLE HERO (method: the three scrim layers were
   composited over the shipped image pixels in a canvas at the real rendered
   size, then the BRIGHTEST pixel inside each text element's box was taken -
   the worst case, not an average - and the ratio computed against it. Text
   set at an alpha was first flattened onto that same pixel.)

     nav wordmark      --cream ............ 7.61:1
     nav sub           .82 cream .......... 5.68:1
     nav phone         --cream ............ 7.24:1
     badge label       --cream ............ 8.23:1  (on its .34 ink pill)
     h1                --cream ............ 5.96:1  (text-shadow not counted)
     subhead           .93 cream .......... 5.45:1  <- worst pair on the hero
     "or call" text    .93 cream .......... 5.78:1
     fine print        .86 cream .......... 5.87:1
     trust lead        --cream ........... 10.93:1
     trust note        .78 cream .......... 7.87:1

   Below 720px the trust row leaves the photograph entirely and sits on flat
   --ink, where lead and note measure 11.22:1 and 6.62:1 - so the phone case
   does not depend on the photograph at all.
   ------------------------------------------------------------------------ */
/* Phones: the row leaves the photograph and sits on flat ink, so contrast
   does not depend on which pixels the ridgeline happens to put under the
   type. At 720px and up the ground goes transparent and the row sits on the
   image, as the reference does. */
.ks-hero__trustwrap {
  background: var(--ink);
  border-top: 1px solid rgba(250, 246, 239, .18);
}

/* Same trap as .ks-hero__content-wrap: this <ul> is a .ks-shell, so its
   left/right margins must stay auto or the row stops being centred. Only the
   list's default top/bottom margin is being reset here. Padding is likewise
   set per-axis, because the shell owns the left/right gutter. */
.ks-hero__trust {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 0 auto;
  padding-top: 0;
  padding-bottom: 0;
  list-style: none;
  text-align: left;
}

.ks-hero__trust-item {
  padding: 13px 14px;
  border-top: 1px solid rgba(250, 246, 239, .14);
}

.ks-hero__trust-item:nth-child(-n+2) { border-top: 0; }

.ks-hero__trust-item:nth-child(odd) {
  padding-left: 0;
  border-right: 1px solid rgba(250, 246, 239, .14);
}

.ks-hero__trust-item:nth-child(even) { padding-right: 0; }

.ks-hero__trust-lead {
  display: block;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--cream);
}

.ks-hero__trust-note {
  display: block;
  margin-top: 3px;
  font-size: .75rem;
  line-height: 1.35;
  color: rgba(250, 246, 239, .78);
}

/* --------------------------------------------------------------------------
   HER VOICE - the quote that used to float in the hero's empty right half.
   A quiet centred band on cream: the page's opening note, and the breath
   between the photograph and the specialty list.
   -------------------------------------------------------------------------- */
.ks-voice {
  padding: 52px 0 54px;
  background: var(--cream);
}

.ks-voice__figure {
  margin: 0 auto;
  max-width: 46rem;
  text-align: center;
}

.ks-voice__figure blockquote { margin: 0; }

.ks-voice__figure blockquote p {
  margin: 0;
  font-family: var(--ks-font-display);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: clamp(1.1875rem, 4.4vw, 1.5rem);
  line-height: 1.5;
  letter-spacing: -.01em;
  color: var(--ink);
  text-wrap: pretty;
}

.ks-voice__figure figcaption {
  margin-top: 18px;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--body);
}

/* --------------------------------------------------------------------------
   HOW I CAN HELP  (ground: --sand - no clay text in here)
   -------------------------------------------------------------------------- */
.ks-help {
  padding: 60px 0 64px;
  background: var(--sand);
}

/* The EMDR and perimenopause/menopause feature bands that lived here were
   removed 2026-09-15 (Jacob): the homepage now hands both off through the
   help rows and the "See all five specialties" button, and the deep pages
   live on /specialties/. Their .ks-emdr* and .ks-mp* rules went with them. */

/* ---- ONE list treatment -------------------------------------------------
   BRAND.md PINNED REFERENCE rule 3. What shipped before was three bordered
   cream cards and three bare ruled entries in the same grid, plus a sage
   quarter-arc on the cards only, plus a media query that promoted card 4 back
   into a box between 720 and 1079px to stop the seam reading as a paint bug.
   All of it is gone. Six rows, one rule above each, same type, same spacing -
   the tier distinction the copy already makes is left to the copy.

   .ks-cards / .ks-card / .ks-card--quiet / .ks-card__title / .ks-card__body
   are retired; nothing in index.html references them any more.
   ------------------------------------------------------------------------ */
.ks-help__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

.ks-help__figure {
  margin: 0;
}

.ks-help__figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--ks-radius);
  border: 1px solid var(--ks-line);
}

.ks-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--ks-line);
}

.ks-list__row {
  padding: 20px 0;
  border-top: 1px solid var(--ks-line);
}

.ks-list__title {
  margin: 0 0 8px;
  font-size: 1.1875rem;
  line-height: 1.25;
}

.ks-list__body {
  margin: 0;
  max-width: 60ch;
  font-size: 1rem;          /* supporting tier - see BODY TYPE SCALE */
  line-height: 1.66;
  color: var(--body);
  text-wrap: pretty;
}

/* The way from a homepage help row to that area's full page (v17). The link
   is a 44px inline-flex target (see the standalone-link list near HERO), so
   it brings its own air: the words sit about 14px inside the box top and
   bottom. The -8px bottom margin takes back part of that so the gap from
   the link to the next hairline matches the gap from the body copy to the
   link (measured at 1440: ~24px each), instead of the row ending loose. */
.ks-list__more {
  margin: 2px 0 -8px;
  font-size: .9375rem;
}

.ks-help__also {
  margin: 24px 0 0;
  max-width: 68ch;
  font-size: .9375rem;
  line-height: 1.66;
  color: var(--body);
}

/* Two pills: the lead (Specialties) and the alternative (Get started). They
   stack full-width-ish on a phone and sit side by side once there is room. */
.ks-help__cta {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  margin: 34px 0 0;
}

@media (min-width: 560px) {
  .ks-help__cta {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
  }
}

/* --------------------------------------------------------------------------
   ABOUT  (ground: --cream)
   -------------------------------------------------------------------------- */
.ks-about {
  padding: 60px 0 64px;
  background: var(--cream);
}

.ks-about__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
}

.ks-portrait {
  position: relative;
  margin: 0;
  width: 100%;
  max-width: 320px;
}

/* Organic shape sitting behind the arch-masked portrait.

   Every edge of the old radius summed to exactly 100% (62+38, 56+44, ...),
   which leaves the shape with no straight edge anywhere: its widest point on
   any side is a single tangent, so a 22px offset showed as a hairline crescent
   that tapered to nothing - the shape was there and no one could read it. The
   radii below leave the left edge a 20% straight run and the bottom edge 16%,
   so the offset now shows as a band of sage (measured at 1080px: 24 x 55px on
   the left, 24 x 49px underneath) instead of a sliver. */
.ks-portrait__shape {
  position: absolute;
  z-index: 0;
  left: -24px;
  bottom: -24px;
  width: 88%;
  height: 78%;
  border-radius: 54% 40% 46% 38% / 46% 44% 48% 34%;
  background: rgba(157, 184, 168, .45);
}

/* The portrait starts at the 20px gutter on a phone, so a 24px offset would
   put the left band off the edge of the screen where no one sees it. */
@media (max-width: 719px) {
  .ks-portrait__shape { left: -14px; }
}

.ks-portrait__img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  border-radius: 190px 190px 20px 20px;
  border: 1px solid var(--ks-line);
  background: var(--sand);
}

.ks-portrait__credit {
  margin: 16px 0 0;
  max-width: 34ch;
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--body);
}

/* ---- the About rail's fact list ----------------------------------------
   Reference data, deliberately quiet: no card, no fill, just hairlines and a
   two-line row. It exists to give the left column something to carry for the
   length of her bio, so it is sized to be read second, not first - the term
   is smaller than the value, and neither competes with the prose beside it.
   ------------------------------------------------------------------------ */
.ks-facts {
  margin: 26px 0 0;
  padding: 0;
  border-top: 1px solid var(--ks-line);
}

.ks-facts__row {
  padding: 13px 0;
  border-bottom: 1px solid var(--ks-line);
}

.ks-facts__row:last-child { border-bottom: 0; }

.ks-facts__term {
  margin: 0 0 3px;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--body);
}

.ks-facts__def {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--ink);
}

.ks-sec__head--left { margin-bottom: 24px; }

.ks-pull {
  margin: 26px 0;
  padding: 20px 22px;
  border-radius: var(--ks-radius);
  background: var(--sand);
}

.ks-pull blockquote { margin: 0; }

.ks-pull p {
  font-family: var(--ks-font-display);
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--ink);
}

/* De-carded in the refit. With the specialty boxes gone, this was the last
   bordered panel outside the booking card, and a box around a quote reads as
   a testimonial card - exactly the thing this page must never look like. A
   sage rule on the leading edge demotes it further than the border did. */
.ks-endorse {
  margin: 26px 0 0;
  padding: 4px 0 4px 20px;
  border: 0;
  border-left: 2px solid var(--sage);
  border-radius: 0;
  background: transparent;
}

.ks-endorse__label {
  margin: 0 0 12px;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--clay-text);
}

.ks-endorse blockquote { margin: 0; }

.ks-endorse blockquote p {
  font-size: 1rem;          /* supporting tier - see BODY TYPE SCALE */
  line-height: 1.66;
  color: var(--body);
}

.ks-endorse figcaption {
  margin-top: 12px;
  font-size: .875rem;
  font-weight: 600;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   THE BAND  (ground: --ink - the only dark surface besides the footer)

   Full-bleed by construction: the section is a plain block child of <main>,
   which has no max-width, so the ink runs to both viewport edges; only the
   .ks-shell inside holds the reading column. Nothing else on the page after
   the hero changes register like this, and nothing else is allowed to.

   Measured contrast, on --ink (#1F3B36) and at the wash's brightest point
   (rgb(38,73,67)) - the two extremes of this ground:
     --cream #FAF6EF quote text ......... 11.22:1  /  9.21:1
     rgba(250,246,239,.74) attribution ... 6.91:1  /  5.88:1
     --clay #C4744D underline (graphic) .. 3.43:1  /  2.81:1
   The underline is decoration, not content, and it sits low-left where the
   wash has only reached alpha .11 - measured 3.24:1 there, clear of the 3:1
   floor for non-text. Both text ratios clear 4.5:1 everywhere in the band.
   -------------------------------------------------------------------------- */
.ks-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Sized to its content. It used to spend 124px top and bottom on a band
     holding one quote, which is what made it read as a wall of empty green. */
  padding: 64px 0 68px;
  background: var(--ink);
}

/* The valley photograph, darkened, carrying the band (PINNED REFERENCE rule 2:
   a dark section holds a photo and real content, never flat colour). The image
   is a decorative <img> rather than a background so it can be lazy-loaded and
   sized without a second network rule. */
.ks-band__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.ks-band__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 58%;
}

/* Two jobs in one layer. (1) It holds the photograph far enough down that
   cream type clears 4.5:1 anywhere in the band. (2) The top stop is solid ink,
   so the boundary with the cream section above resolves as ink meeting cream
   and the photograph emerges below the seam instead of colliding with it -
   the smoothed transition the refit asked for. The hero's radial wash idiom
   rides on top and is finally visible, because it now sits over a photograph
   rather than over flat ink of nearly its own value. Never animated. */
.ks-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 90% at 50% 46%, rgba(46, 91, 82, .42) 0%, rgba(46, 91, 82, 0) 68%),
    radial-gradient(70% 60% at 78% 22%, rgba(196, 116, 77, .16) 0%, rgba(196, 116, 77, 0) 60%),
    linear-gradient(180deg,
      var(--ink) 0%,
      rgba(31, 59, 54, .90) 16%,
      rgba(31, 59, 54, .82) 50%,
      rgba(31, 59, 54, .90) 84%,
      var(--ink) 100%);
  pointer-events: none;
}

.ks-band__figure { margin: 0; }

/* The reference's small pill label above the headline, in her palette. */
.ks-band__label {
  display: inline-block;
  margin: 0 0 24px;
  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);
}

.ks-band__quote { margin: 0; }

.ks-band__quote p {
  margin: 0;
  /* The measure has to live on the element that carries the display size:
     1ch on the 16px figure is 8.6px, which collapsed this to a 254px column
     of 22 lines. Here 26ch is 896px - about 37 characters, five long lines. */
  max-width: 26ch;
  font-family: var(--ks-font-display);
  font-optical-sizing: auto;
  font-weight: 400;
  /* Largest type on the page after the hero h1, at every width. Held to
     2rem-2.5rem on phones: three sentences at hero scale would be a wall. */
  font-size: clamp(2rem, 8.2vw, 2.5rem);
  line-height: 1.26;
  letter-spacing: -.02em;
  color: var(--cream);
  text-wrap: pretty;
}

.ks-band__cite {
  margin: 26px 0 0;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(250, 246, 239, .74);
}

/* The hero's hand-drawn underline, brought back at display scale so it reads
   as the site's motif rather than a one-off. Same stroke, same .26em height -
   only the drop changes: unlike "deserve" in the hero this phrase has a line
   of text beneath it, and .06em keeps the mark inside that line's half-leading
   (measured at 375px: 2.2px of clearance on the tightest wrap). */
.ks-mark--band .ks-mark__line { bottom: -.06em; }

/* --------------------------------------------------------------------------
   GET STARTED  (ground: --sand)

   v17 (2026-09-14): the card is gone. Jacob's read of it was "looks
   unfinished": a cream box holding a paragraph, a pill and a line of small
   print, sitting under a centred head that had already said what the box
   then said again. What replaces it is one decision, stated once. The head
   (eyebrow, h2, lede) is unchanged; under it .ks-start__book is a single
   centred column with no box, no border and no divider:

     1. the booking pill, the largest control on the site (64px tall below
        720, 68px from 720; every other pill is 52px or 44px), with a small
        calendar glyph drawn in CSS so the eight pages need no extra markup;
     2. "or call 479.777.2776", the other way in, one step quieter;
     3. the note, in the compact tier at a short measure, saying what the
        button opens and that Kristen confirms every request.

   What keeps it from reading as a button left on an empty ground: the
   section wash is re-centred on the pill rather than the head
   (.ks-start__book::after), and a soft cream glow sits directly behind it
   (.ks-start__book::before), so the eye is pulled to the one thing to do.
   Both are decorative, never animated.

   Padding: it is its own rule now (no longer grouped with .ks-help,
   .ks-about and .ks-faq): 64/72 on a phone, 88/96 from 720, 104/112 from
   1080. A few px more under the note than over the eyebrow, because the
   note is small type and a centred column ending on it needs the extra to
   look settled rather than cut off.

   Nothing in here collects, transmits or stores anything. The pill is
   Kristen's own SimplePractice widget (her script binds by the
   data-spwidget attributes and never reads this class or the label), and
   the other link is her phone number.
   -------------------------------------------------------------------------- */
.ks-start {
  position: relative;
  isolation: isolate;
  padding: 64px 0 72px;
  background: var(--sand);
  overflow: hidden;
}


.ks-start__inner {
  max-width: 680px;
}

/* The head sits a little further from the pill than the site's usual head
   rhythm: that 32/40px was tuned for a head followed by a box that brought
   its own padding. */
.ks-start .ks-sec__head { margin-bottom: 36px; }

.ks-start__book {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* The section's soft organic wash, now anchored to the pill instead of the
   section box. It used to be .ks-start::before at top -18%, which centred it
   on the head; the head is a different height on every page, so the only
   way to keep it round the button on all eight is to hang it off the block
   the button is in. The section's overflow:hidden still clips it. Both
   pseudo-elements paint inside the section's isolated stacking context:
   the wash lowest, the glow over it, the text over both. Decorative, never
   animated. The --ks-cta-mid offset is the pill's half-height. */
.ks-start__book::after,
.ks-start__book::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  top: var(--ks-cta-mid, 32px);
  pointer-events: none;
}

.ks-start__book::after {
  z-index: -2;
  width: min(760px, 180%);
  aspect-ratio: 1 / 1;
  background: radial-gradient(circle closest-side,
              color-mix(in srgb, var(--pine) 10%, transparent) 0%,
              color-mix(in srgb, var(--pine) 4%, transparent) 55%,
              transparent 100%);
}

/* The glow: a cream ellipse fading to nothing, directly behind the pill, so
   the button lifts off the sand without a single hard edge. */
.ks-start__book::before {
  z-index: -1;
  width: min(640px, 124%);
  height: 150px;
  background: radial-gradient(closest-side,
              rgba(250, 246, 239, .95) 0%,
              rgba(250, 246, 239, .6) 50%,
              rgba(250, 246, 239, 0) 100%);
}

/* The centrepiece. Full width up to 400px on a phone (a thumb-wide target
   that still reads as a pill, not a banner), content width with a generous
   floor from 720. The label is short enough to hold one line at 320px
   (measured 2026-09-14: 280 x 64 in the 280px content box, icon included),
   so it keeps .ks-btn's nowrap. */
.ks-start__cta {
  gap: 12px;
  width: 100%;
  max-width: 400px;
  min-height: 64px;
  padding: 16px 28px;
  font-size: 1.1875rem;
  letter-spacing: .005em;
  box-shadow: 0 1px 2px rgba(31, 59, 54, .10), 0 20px 36px -18px rgba(31, 59, 54, .70);
}

/* Same lift as every pill (ground to --pine-deep, 1px rise in the motion
   gate), with the shadow scaled to the larger control. */
.ks-start__cta:hover,
.ks-start__cta:focus-visible {
  box-shadow: 0 1px 2px rgba(31, 59, 54, .12), 0 26px 44px -18px rgba(31, 59, 54, .66);
}

/* The keyboard ring clears the pill's own shadow by a hair more than the
   global 2px, so it never reads as part of the button's edge. */
.ks-start__cta:focus-visible { outline-offset: 4px; }

/* Calendar glyph: says "you pick a day" before the words do. A mask filled
   with currentColor, so it follows the label's white exactly and needs no
   markup on any page; generated content with empty text, so it adds nothing
   to the accessible name ("Book an appointment"). */
.ks-start__cta::before {
  content: "";
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2.6'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3Cpath d='M8 14h.01M12 14h.01M16 14h.01M8 17.2h.01M12 17.2h.01' stroke-width='2.4'/%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 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2.6'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3Cpath d='M8 14h.01M12 14h.01M16 14h.01M8 17.2h.01M12 17.2h.01' stroke-width='2.4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ks-start__call {
  margin: 10px 0 0;
  font-size: 1rem;
  color: var(--body);
}

/* The reassurance line. After the button, not before it: it answers the
   question a person asks once they have decided to click. Compact tier, a
   short centred measure so it sets as two or three even lines under the
   pill rather than one long rule of small type. */
.ks-start__note {
  margin: 12px auto 0;
  max-width: 44ch;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--body);
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   WHAT TO EXPECT / FAQ  (ground: --cream)
   -------------------------------------------------------------------------- */
.ks-faq {
  padding: 60px 0 68px;
  background: var(--cream);
}

/* ---- centred accordion --------------------------------------------------
   BRAND.md PINNED REFERENCE rule 4. The sticky interior photograph is gone -
   it was a 380px column that scrolled against five stacked answers and
   stopped tracking anything in particular. interior.webp now supports the
   specialty list instead, where it has a list to sit beside.

   Native <details>/<summary>: keyboard-operable, correctly announced, and it
   still works with scripting off. No JS was added for this.
   ------------------------------------------------------------------------ */
.ks-faq__list {
  max-width: 46rem;
  margin: 0 auto;
  border-bottom: 1px solid var(--ks-line);
}

.ks-qa {
  border-top: 1px solid var(--ks-line);
}

.ks-qa__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  /* 20px + 20px + a 1.3 leading on 18px type = 55px, comfortably past the
     44px floor before the question even wraps. */
  padding: 20px 0;
  margin: 0;
  font-family: var(--ks-font-display);
  font-optical-sizing: auto;
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ink);
  cursor: pointer;
  list-style: none;         /* Firefox */
  -webkit-tap-highlight-color: transparent;
}

.ks-qa__q::-webkit-details-marker { display: none; }   /* Safari */

/* The question stays an <h3> inside the <summary>. Before the refit these
   five questions were headings, and a screen-reader user navigating this page
   by heading could jump between them; a bare <summary> would have quietly
   taken that away. The summary owns the type, so the heading inherits it and
   contributes nothing but outline position. */
.ks-qa__qh {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
}

/* The reference's plus indicator, drawn from two pseudo-element bars so it can
   rotate to a minus on open without a second glyph or an icon font. */
.ks-qa__mark {
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

.ks-qa__mark::before,
.ks-qa__mark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  border-radius: 2px;
  background: var(--clay-text);
  transform: translateY(-50%);
}

.ks-qa__mark::after { transform: translateY(-50%) rotate(90deg); }

/* Open = the upright bar lies down, so the plus becomes a minus. */
.ks-qa[open] .ks-qa__mark::after { transform: translateY(-50%) rotate(0deg); }

.ks-qa__panel {
  padding: 0 0 22px;
}

.ks-qa__list {
  margin: 10px 0 14px;
  padding-left: 1.25em;
  max-width: 62ch;
  font-size: 1.0625rem;     /* reading tier, matches .ks-qa__a */
  line-height: 1.65;
  color: var(--body);
}
.ks-qa__list li { margin: 4px 0; }
.ks-qa__list strong { color: var(--ink); font-weight: 600; }

.ks-qa__a {
  margin: 0;
  max-width: 62ch;
  font-size: 1.0625rem;     /* reading tier - the same 17px as .ks-prose */
  line-height: 1.72;
  color: var(--body);
}

/* Two paragraphs in one FAQ answer ran together with no gap (the homepage
   insurance answer). Fix ported from the 2026-09-17 review copy. */
.ks-qa__a + .ks-qa__a { margin-top: 14px; }

/* .ks-faq__close retired: that sentence now opens the footer as the page's
   closing invitation, where it has a button and a phone number beside it. */

/* --------------------------------------------------------------------------
   FOOTER  (ground: --ink - light text only)
   -------------------------------------------------------------------------- */
.ks-footer {
  padding: 48px 0 40px;
  background: var(--ink);
  color: rgba(250, 246, 239, .84);
}

/* ---- closing invitation -------------------------------------------------
   The page used to end FAQ -> licence -> 988 with no way to act on any of it
   after the booking card, ~1,300px earlier. Her own sentence, then the two
   things a person can do about it. It opens the footer rather than sitting on
   the cream above it, because the register change is the point: the reading
   is over, this is the door.
   ------------------------------------------------------------------------ */
/* Tightened in the refit: the line, the button and the number are one block
   now. It used to open with 22px of grid gap under a 48px section padding and
   then push the actions to the far right of a 40px-gap two-column grid, which
   read as a dead zone above the line and a gulf between the line and the
   button it belongs to. */
.ks-footer__invite {
  padding-bottom: 28px;
  margin-bottom: 32px;
  border-bottom: 1px solid rgba(250, 246, 239, .16);
}

.ks-footer__invite-line {
  margin: 0;
  max-width: 30ch;
  font-family: var(--ks-font-display);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: clamp(1.5rem, 5.8vw, 1.875rem);
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--cream);          /* 11.22:1 on --ink */
  text-wrap: pretty;
}

/* HIDDEN 2026-09-14 (review fix): its Get started only scrolled back up to the
   booking section that sits directly above the footer, and the number beside
   it repeats the Contact block a few lines below. The markup stays on every
   page; the invite line now stands on its own as a closing sentence. */
.ks-footer__invite-actions { display: none; }

.ks-footer__invite-call {
  margin: 0;
  font-size: .9375rem;
  color: rgba(250, 246, 239, .84);
}

.ks-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}

.ks-wordmark--light .ks-wordmark__name { color: var(--cream); }
.ks-wordmark--light .ks-wordmark__sub { color: rgba(250, 246, 239, .74); }

.ks-footer__title {
  margin: 0 0 12px;
  font-family: var(--ks-font-ui);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(250, 246, 239, .74);
}

.ks-footer__line {
  margin: 0 0 8px;
  font-size: .9375rem;
  line-height: 1.6;
}

.ks-footer__label {
  font-weight: 600;
  color: var(--cream);
}

.ks-footer__line--quiet {
  margin-top: 12px;
  font-size: .875rem;
  color: rgba(250, 246, 239, .74);
}

/* All seven pages (v17): Specialties, the five specialty pages, Insurance &
   rates. The only place every page is linked from at every width.

   Below 720: one stack, but a tight one. Each link is already a 44px target
   (the standalone-link list near HERO) with ~22px of type in it, so the old
   10px gap on top of that turned seven links into a 370px ladder. With no
   gap the targets touch and the words still sit ~22px apart.
   From 720: three columns under a full-width brand row (720 query).
   From 1080: two columns inside the brand column (1080 query).
   From 720 the grid flows by column (three rows, then four from 1080), so the
   links read down each column in DOM order and the tab order matches. */
.ks-footer__nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  gap: 0 32px;
  margin-top: 8px;
  font-size: .9375rem;
}

.ks-link--light { color: #CFE0D4; }

/* The footer link for the page you are on (review fix 2026-09-14): full cream
   (11.22:1 on --ink) and no underline, so it reads as "here" rather than as
   one more link to follow. */
.ks-footer__nav [aria-current="page"] {
  color: var(--cream);
  text-decoration: none;
}

/* :focus-visible is not optional here. The generic .ks-link:focus-visible
   above takes the label to --pine-deep, which on the footer's ink measures
   1.18:1 - a keyboard user would lose the link they are standing on. Same
   specificity, later in the file, so this wins. */
.ks-link--light:hover,
.ks-link--light:focus-visible { color: var(--cream); }

.ks-footer a:focus-visible { outline-color: var(--cream); }

.ks-hours {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .9375rem;
}

.ks-hours li {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  max-width: 15rem;
  padding: 5px 0;
  border-bottom: 1px solid rgba(250, 246, 239, .14);
}

.ks-hours li:last-child { border-bottom: 0; }

.ks-footer__fine {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid rgba(250, 246, 239, .16);
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: .8125rem;
  line-height: 1.6;
  color: rgba(250, 246, 239, .78);
}

.ks-footer__crisis { color: var(--cream); }

/* Build credit. Quiet by size and position, not by fading the type into the
   ink: rgba(250,246,239,.66) flattens to #B0B6AF on --ink = 5.9:1, and the
   link inside keeps the footer's --light colour. */
.ks-footer__by {
  margin-top: 2px;
  font-size: .75rem;
  color: rgba(250, 246, 239, .66);
}

/* --------------------------------------------------------------------------
   MOTION - every animated or transitioned state lives inside this query.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  /* REVEALS - rebuilt. What shipped was a 440ms rise from 16px, a 45ms
     per-element stagger, and one authored exception that resolved the band
     out of a 7px blur over 720ms. Scrolling the page at any normal speed
     caught sections visibly half-faded and mid-rise, which is what the
     screenshots of the old build show. It is now opacity only, 180ms, no
     translate, no blur, no stagger: at a normal scroll it is not something
     you notice, which is the whole brief. Still fully motion-gated. */
  [data-ks-reveal] {
    opacity: 0;
    transition: opacity 180ms linear;
  }

  [data-ks-reveal].ks-in {
    opacity: 1;
  }

  .ks-btn,
  .ks-link,
  .ks-header__tel,
  .ks-header__navlink,
  .ks-sticky__tel,
  .ks-sticky__name,
  .ks-qa__q {
    transition: background-color 200ms var(--ks-ease),
                border-color 200ms var(--ks-ease),
                color 200ms var(--ks-ease),
                box-shadow 200ms var(--ks-ease),
                text-decoration-thickness 200ms var(--ks-ease),
                transform 200ms var(--ks-ease);
  }

  /* The plus turning into a minus. A hover transition, not a scroll reveal,
     so it stays - the rule above is about what moves when you scroll. */
  .ks-qa__mark::after {
    transition: transform 200ms var(--ks-ease);
  }

  /* The rise that completes the pill hover. 1px, not the card's 2: a pill has
     no ground of its own to leave behind, and 2px on a 52px control starts to
     look like it is being pressed upward. */
  .ks-btn--primary:hover,
  .ks-btn--primary:focus-visible,
  .ks-btn--light:hover,
  .ks-btn--light:focus-visible {
    transform: translateY(-1px);
  }

  /* The sticky bar's arrival and departure. Not scroll-linked: one class
     toggle at one boundary, and the visibility delay on the way out lets the
     slide finish before the bar leaves the accessibility tree. */
  .ks-sticky {
    transition: opacity 200ms var(--ks-ease),
                transform 280ms var(--ks-ease),
                visibility 0s linear 280ms;
  }

  .ks-sticky.ks-is-on {
    transition: opacity 200ms var(--ks-ease),
                transform 280ms var(--ks-ease),
                visibility 0s linear 0s;
  }

}

/* ks-breathe retired with .ks-hero::before: the breathing wash existed to give
   a mostly-cream hero something to do. The hero is a photograph now, and a
   slow scale on top of it would be the aggressive parallax BRAND.md rules
   out. */

/* ==========================================================================
   PHONE HERO - art direction, not scaling (max-width, deliberately)

   The photograph is full-bleed at every width now, so this block no longer
   has to hunt for a band of ridgeline between the copy and the fold. What is
   left is vertical budget: at 375x667 the stack is nav + badge + h1 + subhead
   + CTA + fine print + a four-cell trust row, and the CTA has to stay above
   the fold (SPEC.md). Every value below is spacing or type size - none of
   them is a tap target.
   ========================================================================== */
@media (max-width: 719px) {
  /* Measured at 375px: the nav row wanted 338.5px inside a 335px content box
     and pushed the "Get started" pill 1.1px past the right gutter, which is a
     horizontal scrollbar on the whole document. The 14px recovered here is
     spacing only - the pill keeps its 44px height and the phone link its 44px
     square. */
  .ks-header__inner { gap: 12px; }

  .ks-header__actions { gap: 6px; }

  .ks-header .ks-btn--sm { padding: 10px 15px; }

  .ks-hero__inner { padding-top: 72px; }

  .ks-hero__content-wrap { padding-bottom: 22px; }

  .ks-badge { margin-bottom: 14px; }
  .ks-hero__title { margin-bottom: 12px; }
  .ks-hero__subhead { margin-bottom: 20px; font-size: 1rem; }
  .ks-hero__fine { margin-top: 12px; }

  /* The 4:5 crop is taller than the viewport is wide, so anchoring the frame
     a little above centre keeps the ridge - not the sky - behind the copy. */
  .ks-hero__img { object-position: 50% 42%; }

  .ks-voice { padding: 44px 0 46px; }

  /* A "Get started" click lands on this heading below 720px (see
     data-ks-scroll-into). html's scroll-padding clears the sticky bar; these
     6px are the breath between the bar's hairline and the first letter.
     Generalised from #ks-get-started to .ks-start so the interior pages'
     consult sections (/emdr/, /insurance/) get the same landing. */
  .ks-start .ks-sec__title { scroll-margin-top: 6px; }
}

/* ==========================================================================
   320-359px - the narrowest band still in scope (WCAG 1.4.10)
   The header row runs over its 280px content box here, and the copy wraps to
   more lines. Both are paid for locally rather than by shrinking the whole
   phone band.
   ========================================================================== */
/* ==========================================================================
   369px and below - the nav row runs out of room

   MEASURED: at 360px the row wants wordmark 168 + gap 12 + phone 44 + gap 6 +
   CTA 113 = 343 inside a 320px content box; at 320px it wants 328 inside 280.
   Of the three items, the phone link is the only one that is duplicated
   above the fold - the hero's "or call 479.777.2776" sits in the same first
   screen, and the sticky bar carries a 44px phone target for the whole rest
   of the page. So the phone gives way here and the wordmark and the CTA both
   stay whole. At 375px and up all three fit and nothing is hidden.
   ========================================================================== */
@media (max-width: 369px) {
  .ks-header__tel { display: none; }
}

@media (max-width: 359px) {
  .ks-header__inner { gap: 10px; }

  .ks-wordmark__sub { letter-spacing: .08em; }

  .ks-header .ks-btn--sm {
    padding: 10px 14px;
    font-size: .875rem;
  }

  /* Four cells of credential in a 280px content box: one column, so the
     longest lead ("Licensed Professional Counselor since 2010") is not
     wrapping to five lines in a 130px cell. */
  .ks-hero__trust { grid-template-columns: 1fr; }

  .ks-hero__trust-item {
    padding-left: 0;
    padding-right: 0;
    border-right: 0;
  }

  .ks-hero__trust-item:nth-child(2) { border-top: 1px solid rgba(250, 246, 239, .14); }
}

/* ==========================================================================
   560px and up: phone digits, header and sticky bar together
   The header showed only an icon from 720 to 859 while the sticky bar (the
   same control) showed the number. One gate for both, ported from the
   2026-09-17 review copy and re-measured on this build. The later 720/860
   rules that also set these are now redundant but harmless.
   ========================================================================== */
@media (min-width: 560px) {
  .ks-header__tel {
    width: auto;
    padding: 0 10px;
  }

  .ks-header__tel-num { display: inline; }

  .ks-sticky__tel {
    width: auto;
    padding: 0 4px;
  }

  .ks-sticky__tel-num { display: inline; }
}

/* ==========================================================================
   720px and up
   ========================================================================== */
@media (min-width: 720px) {
  /* 44px button + 2x8px padding + the hairline. */
  :root { --ks-gutter: 32px; --ks-stickyh: 61px; }

  /* The top-level nav used to arrive here at 720. It does not any more. A
     third link (Menopause) pushed it out on 2026-08-30, and dropping back to
     two links on 2026-09-13 did not bring it back: the wider word
     "Specialties" replaced the short "EMDR", so the two-link row is now about
     45px past the 641px content box it used to fit inside. The rule lives in
     its own 860px query below. The phone stays an icon-only 44px target until
     1080 either way. */

  .ks-header__actions { gap: 16px; }

  .ks-sticky__inner {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .ks-sticky__sub { display: block; }

  .ks-sticky__name { font-size: 1.125rem; }

  /* Room for the digits, so the icon stops standing in for them. */
  .ks-sticky__tel {
    width: auto;
    padding: 0 4px;
  }

  .ks-sticky__tel-num { display: inline; }

  .ks-sticky__actions { gap: 16px; }

  .ks-wordmark__sub {
    font-size: .625rem;
    letter-spacing: .18em;
  }

  .ks-header__inner {
    padding-top: 22px;
    padding-bottom: 22px;
  }

  .ks-hero__inner { padding-top: 96px; }

  .ks-hero__content-wrap { padding-bottom: 40px; }

  .ks-hero__title { font-size: clamp(3.25rem, 7.4vw, 4rem); }

  .ks-hero__subhead { font-size: 1.1875rem; max-width: 38ch; }

  /* The row is wide enough for all four credentials in one line here, so it
     comes off the ink strip and sits on the photograph, divided by hairlines
     - the reference's stat row. */
  .ks-hero__trustwrap {
    background: transparent;
    border-top-color: rgba(250, 246, 239, .26);
  }

  .ks-hero__trust { grid-template-columns: repeat(4, 1fr); }

  .ks-hero__trust-item {
    padding: 20px 22px;
    border-top: 0;
    text-align: center;
  }

  .ks-hero__trust-item:nth-child(odd) { padding-left: 22px; }
  .ks-hero__trust-item:nth-child(even) { padding-right: 22px; }

  .ks-hero__trust-item + .ks-hero__trust-item {
    border-left: 1px solid rgba(250, 246, 239, .22);
  }

  .ks-hero__trust-item:nth-child(odd),
  .ks-hero__trust-item:nth-child(even) { border-right: 0; }

  .ks-hero__trust-item:first-child { padding-left: 0; }
  .ks-hero__trust-item:last-child { padding-right: 0; }

  .ks-voice { padding: 72px 0 76px; }

  .ks-help,
  .ks-about,
  .ks-faq { padding: 84px 0 88px; }

  /* GET STARTED (v17): its own padding, see the section comment. */
  .ks-start { padding: 88px 0 96px; }

  .ks-start .ks-sec__head { margin-bottom: 44px; }

  /* Content width from here, with a floor wide enough that the pill still
     reads as the section's one big thing rather than a normal button. */
  .ks-start__book { --ks-cta-mid: 34px; }

  .ks-start__cta {
    width: auto;
    max-width: none;
    min-width: 380px;
    min-height: 68px;
    padding: 18px 52px;
    font-size: 1.25rem;
  }

  .ks-start__call { margin-top: 12px; }

  .ks-sec__head { margin-bottom: 40px; }

  .ks-sec__title { font-size: clamp(2.25rem, 4.6vw, 2.75rem); }

  .ks-band { padding: 88px 0 92px; }

  .ks-band__quote p { font-size: clamp(2.5rem, 5.2vw, 3.25rem); }

  .ks-band__cite { margin-top: 32px; }

  .ks-about__grid {
    grid-template-columns: minmax(240px, 300px) 1fr;
    gap: 44px;
    align-items: start;
  }

  .ks-portrait { max-width: 300px; }

  /* One image beside the one list (PINNED REFERENCE rule 3).

     align-items: stretch, not start, and the figure takes the slack: a fixed
     aspect ratio left the aside 153px shorter than the six rows beside it
     (measured at 1080px: 630 against 783), which is the same abandoned-column
     problem the About rail was fixed for. The photograph now grows to whatever
     height the list happens to be, so the two columns end level no matter how
     the copy wraps - object-fit: cover absorbs the ratio change. */
  .ks-help__grid {
    grid-template-columns: minmax(240px, 300px) 1fr;
    gap: 44px;
    align-items: stretch;
  }

  .ks-help__aside {
    display: flex;
    flex-direction: column;
  }

  .ks-help__figure {
    flex: 1 1 auto;
    min-height: 320px;      /* a floor, so a short list cannot squash it */
  }

  .ks-help__figure img {
    height: 100%;
    aspect-ratio: auto;
  }

  /* Tightened: the line and the two controls that act on it stay a single
     left-aligned block instead of being thrown to opposite ends of a
     two-column grid. */
  .ks-footer__invite {
    padding-bottom: 32px;
    margin-bottom: 40px;
  }

  .ks-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  /* Seven page links do not fit two-up in half of a 656px box ("Perimenopause
     & menopause" alone is ~210px). So between 720 and 1079 the brand block
     takes the whole first row and its nav runs three columns; Contact and
     Hours share the row beneath, which also fills the cell the third block
     used to leave empty. */
  .ks-footer__brand { grid-column: 1 / -1; }

  /* Column flow, three rows (review fix 2026-09-14): the links read DOWN the
     columns (Specialties, menopause, EMDR / depression, anxiety,
     relationships / insurance), so related pages stay together and the tab
     order, which is the DOM order, runs the same way the eye does. Above the
     phone widths the pointer is the likely input, so the rows drop to 34px. */
  .ks-footer__nav {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: max-content;
    grid-template-rows: repeat(3, auto);
    column-gap: 40px;
  }

  .ks-footer__nav .ks-link { min-height: 34px; }

  .ks-footer__fine {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 28px;
  }
}

/* The 720-1079px block that used to live here promoted specialty card 4 back
   into a box, because a cream card and a ruled entry sitting side by side in
   the same row read as a card that had failed to paint. With one list
   treatment for all six areas there is no seam left to patch, so the whole
   query is gone. */

/* ==========================================================================
   1080px and up
   ========================================================================== */
/* The top-level nav (Specialties, Insurance & Rates). It lives at 860 rather
   than 720, and the 2026-09-13 drop from three links to two did not change
   that.

   MEASURED 2026-08-30, real Chrome, with the phone in its icon-only state
   (which is what it is below 1080), when the nav held three links:
     wordmark ................ 208px
     actions (3 links + icon + Get started) 488px
     minimum gap between them  24px
     required ............... 720px
     content box at 720px ... 656px   -> 64px SHORT, hence the move
     content box at 860px ... 796px   -> fits, 76px of slack
   At 1080 the phone digits return (actions 602px, required 834px) against a
   1016px content box, so the widest case has room too.

   WHY 860 SURVIVES TWO LINKS (2026-09-13): the recorded two-link row measured
   614px of a 641px content box at 720, and that second link was the short
   word "EMDR". "Specialties" is about 45px wider, so the same row now wants
   roughly 659px of that 641px box. It does not fit at 720. Nothing here was
   re-measured in Chrome for the new word; if the gate is ever moved down,
   measure it first.

   Below 860 every page is still reachable from the footer nav, which now
   carries all four, so withholding two of them here costs nothing. */
@media (min-width: 860px) {
  .ks-header__nav { display: flex; }

  .ks-sticky__nav { display: flex; }

  /* The digits arrive with the nav rather than a breakpoint later. Between
     860 and 1079 the row used to show a bare phone glyph between a text link
     and a button with 163-263px of slack beside it (measured 2026-09-13,
     design review). The digits cost 105px (44 -> 149); at 860 that leaves
     58px, at 960 158px. */
  .ks-header__tel {
    width: auto;
    padding: 0 10px;
  }

  .ks-header__tel-num { display: inline; }
}

@media (min-width: 1080px) {
  :root { --ks-gutter: 40px; }

  .ks-hero__img { object-position: 50% 38%; }

  .ks-hero__inner { padding-top: 108px; }

  .ks-hero__content-wrap { padding-bottom: 52px; }

  /* The measure the centred stack reads at. Not a column in a two-column
     hero any more - the photograph is the full width and this is the reading
     width sitting on top of it. */
  .ks-hero__content { max-width: 40rem; margin: 0 auto; }

  .ks-hero__title {
    font-size: 4.25rem;
    margin-bottom: 20px;
    max-width: none;
  }

  .ks-hero__trust-item { padding: 24px 26px; }

  .ks-hero__trust-lead { font-size: .875rem; }

  .ks-voice { padding: 96px 0 100px; }

  .ks-help,
  .ks-about,
  .ks-faq { padding: 104px 0 108px; }

  .ks-start { padding: 104px 0 112px; }

  /* (The header phone digits now arrive at 860 with the nav; see above.) */

  .ks-sec__lede { font-size: 1.125rem; }

  .ks-help__grid {
    grid-template-columns: 380px 1fr;
    gap: 72px;
  }

  /* The figure's height is handed to it by the stretch rule at 720px - there
     is no ratio to author here. Not sticky either: a column that tracks the
     scroll is the FAQ pattern this refit removed. */

  /* Content-sized, not viewport-sized: 92px each way carries one quote and a
     label without the band reading as a wall. It was 124/128. */
  .ks-band { padding: 92px 0 96px; }

  /* Was clamp(3.5rem, 4.4vw, 3.75rem). Stepped down because the quote now
     shares the band with a photograph and a label rather than standing alone
     in the middle of flat green - at 3.75rem the three sentences filled the
     frame edge to edge and the photograph had nowhere to show. */
  .ks-band__quote p { font-size: clamp(2.75rem, 3.4vw, 3.125rem); }

  .ks-band__cite { margin-top: 34px; }

  .ks-about__grid {
    grid-template-columns: 350px 1fr;
    gap: 72px;
  }

  .ks-portrait { max-width: 350px; }

  .ks-footer { padding: 64px 0 48px; }

  /* Back to three tracks, brand first. The brand track was 1.2fr; the
     two-column nav inside it needs ~360px (widest link in each column plus
     the gap), which 1.2fr only gave at 1440. Hours holds a 240px floor (its
     list's 15rem) so the day and time never close up. */
  .ks-footer__grid {
    grid-template-columns: minmax(0, 1.34fr) minmax(0, 1fr) minmax(240px, .8fr);
    gap: 48px;
  }

  .ks-footer__brand { grid-column: auto; }

  .ks-footer__nav {
    grid-template-rows: repeat(4, auto);
    column-gap: 28px;
  }
}

/* The backdrop-filter fallback that used to live here belonged to the hero's
   frosted quote card. The card is gone (its quote opens the page as .ks-voice
   now), and nothing left on the page uses backdrop-filter. */

/* ==========================================================================
   Fallback for engines without color-mix() support
   The one remaining color-mix() on the page is the Get Started section's
   decorative wash. Without the function the whole gradient is invalid, so the
   wash simply does not paint: the section keeps its sand ground and nothing
   that carries meaning is lost.
   ========================================================================== */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .ks-start__book::after { background: none; }
}

