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

   v3 (2026-09-13): the #ke-process section came off the page (Kristen's own
   call: remove "what an EMDR session looks like"), so every rule that only
   served it is gone with it - .ke-process, .ke-steps, .ke-step, .ke-step__num,
   .ke-step__title, .ke-step__body, .ke-step__quote. .ke-note STAYS: it also
   closes the #ke-helps list. Nothing else changed but the hero facts comment,
   now that the consult format is sourced.

   CONTRACT: every selector in this file is a ke- 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,
   FAQ accordion (.ks-faq / .ks-qa) and consult card (.ks-start) 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.

   MOTION: this file adds none. The only animated thing on the page is the
   shared [data-ks-reveal] opacity fade and the shared control hovers, both of
   which already live inside @media (prefers-reduced-motion: no-preference) in
   /styles.css. There is nothing here for a reduced-motion user to opt out of.
   ========================================================================== */

/* --------------------------------------------------------------------------
   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.
   That matters twice over - the explainer this page exists for starts within
   one screen, and the homepage keeps the full-bleed 100svh moment to itself.

   The scrim is doing real work, not tinting. path.webp is a high-key frame
   with a band of bright morning mist through its middle.

   CONTRAST RE-MEASURED 2026-08-29 (real Chrome, the real pixels): the photo
   was drawn to a canvas at the element's exact painted geometry (object-fit
   cover + object-position resolved), the BRIGHTEST pixel inside each text
   element's own box was taken as the worst case, and both scrim layers were
   composited over it at that pixel's position - linear first, radial on top,
   as the background list paints them. Text-shadow is NOT counted, so every
   figure below is pessimistic.

     375px  hero 375x565, linear mid-stop .50
       --cream nav wordmark .................... 6.94:1
       .82 cream wordmark sub .................. 5.11:1
       .90 cream hero label .................... 5.55:1
       --cream h1 .............................. 4.93:1
       .93 cream subhead ....................... 4.73:1   <- page worst case
       .93 cream "or call" ..................... 6.51:1
       #CFE0D4 .ks-link--light phone number .... 5.65:1
       .86 cream fact row (3 rows) ....... 5.27 / 5.27 / 6.00:1

     720px  hero 720x499, linear mid-stop .62
       worst pair (.82 cream wordmark sub) ..... 6.04:1

     1080px hero 1080x540, linear mid-stop .62
       worst pair (.82 cream wordmark sub) ..... 6.15:1

   Every pair clears 4.5:1, and the copy column is held to 46rem centred, so
   it never leaves the radial's strong zone.

   WHY THE PHONE MID-STOP IS LOWER: at 375px the hero box is 375x565 and cover
   scales the 1200x900 source by HEIGHT (.628), so the crop is entirely
   horizontal and the band shows the photograph's full vertical extent -
   canopy, mist and understory at once - which the old .62 mid flattened into
   a dark rectangle. Lightening the mid-stop to .50 is the only lever that
   acts at this width; object-position's Y component provably cannot (the
   vertical offset resolves to 0 there - see the note at .ke-hero__img).
   -------------------------------------------------------------------------- */
.ke-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ink);
}

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

.ke-hero__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 4:3 original in a band roughly 16:9 or wider: anchoring just below centre
     keeps the path and the ferns in frame instead of the empty canopy.

     MEASURED 2026-08-29 - the VERTICAL half of this pair does nothing below
     720px, and that is geometry, not taste. At 375px the hero box measures
     375x565; cover scales 1200x900 by height (565/900 = .628), giving a
     753x565 painted image, so the crop is entirely HORIZONTAL and the Y offset
     is (565 - 565) * y = 0 for any y. The phone band shows the photograph's
     full height whatever this value says. The phone fix therefore lives in the
     scrim below, where it can actually act. Above 720 the box is short enough
     that cover scales by width and 56% does its job. */
  object-position: 50% 56%;
}

.ke-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%),
    /* Phone mid-stop lightened .62 -> .50 so the raised frame's mist survives
       the scrim instead of being flattened back out. Re-measured below. */
    linear-gradient(180deg,
      rgba(20, 38, 34, .80) 0%,
      rgba(20, 38, 34, .50) 45%,
      rgba(20, 38, 34, .78) 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. */
.ke-hero__inner {
  position: relative;
  z-index: 2;
  padding-top: 80px;
  padding-bottom: 52px;
  text-align: center;
}

.ke-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. */
.ke-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. */
.ke-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 mist. */
  text-shadow: 0 2px 22px rgba(15, 30, 27, .55);
}

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

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

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

.ke-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. */
.ke-hero__call .ks-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* (.ke-hero__fine is gone: the single fine-print line it styled was replaced
   by the fact row below.) */

/* The hairline fact row, in the homepage hero's grammar (.ks-hero__trust):
   the three things a person checks before reading any further, on rules
   instead of in a sentence. Every entry was already in the fine print this
   replaces. The consult entry now carries its format (video, phone optional:
   RESEARCH.md In-person session 2026-09-13); the "usually Friday afternoons"
   tendency stays out of a hero. Stacked with rules between at phone width, one row
   with rules between at 720 and up. */
.ke-hero__facts {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 18px auto 0;
  padding: 0;
  list-style: none;
}

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

.ke-hero__fact + .ke-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. */
.ke-hero a:focus-visible { outline-color: var(--cream); }

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

   cream -> sand -> ink -> cream (FAQ) -> sand (consult) -> ink (footer).
   CHECKED after the v3 cut: #ke-process was the cream band between #ke-helps
   (sand) and #ke-tele (ink), and removing it leaves #ke-what cream against
   #ke-helps sand against #ke-tele ink. No two grounds meet, so #ke-helps
   keeps sand and nothing was swapped. The last two stops are the shared
   .ks-faq and .ks-start, which bring their own padding and ground; the three
   below match their rhythm so the alternation reads as one page.
   -------------------------------------------------------------------------- */
.ke-what { padding: 56px 0 60px; background: var(--cream); }

.ke-helps { padding: 56px 0 60px; background: var(--sand); }

/* The reading column. Everything left on this page is prose or a short list -
   there is no two-column section outside the telehealth band - so one measure
   governs the lot. Matches .ks-start__inner's 680px. */
.ke-body {
  max-width: 680px;
  margin: 0 auto;
}

/* PACING: .ke-what ran 1,341px of unbroken prose at 375px with nothing to
   rest on. One sentence is lifted out of the middle of it and set in the
   homepage's quiet-band idiom (.ks-voice): display face, centred, hairline
   rules above and below. It is not a quotation and carries no attribution -
   it is the same sentence that stood in the paragraph above it, promoted to
   the section's one held beat. No fact is added. */
.ke-pull {
  margin: 30px auto;
  padding: 26px 0;
  max-width: 34rem;
  border-top: 1px solid var(--ks-line);
  border-bottom: 1px solid var(--ks-line);
  text-align: center;
}

.ke-pull__p {
  margin: 0;
  font-family: var(--ks-font-display);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: clamp(1.125rem, 4.2vw, 1.4375rem);
  line-height: 1.5;
  letter-spacing: -.01em;
  color: var(--ink);
  text-wrap: pretty;
}

/* Her own words, demoted the same way the homepage demotes the colleague
   endorsement: a sage rule on the leading edge, no box. The page's only
   boxed surface stays the consult card, as on the homepage. */
.ke-approach {
  margin: 28px 0 0;
  padding: 4px 0 4px 20px;
  border-left: 2px solid var(--sage);
}

.ke-approach__p {
  margin: 0;
  max-width: 60ch;
  font-size: 1rem;          /* supporting tier - see BODY TYPE SCALE in styles.css */
  line-height: 1.66;
  color: var(--body);
}

/* The honest closing line under the specialty list. It used to close the
   steps as well; with #ke-process gone in v3 it has one job, and it keeps
   its own rule because that list is still there. Compact tier: it is a
   caveat, read second by design. */
.ke-note {
  margin: 28px 0 0;
  max-width: 62ch;
  font-size: .9375rem;
  line-height: 1.66;
  color: var(--body);
}

/* --------------------------------------------------------------------------
   TELEHEALTH BAND  (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 .......................... 11.22:1
     rgba(250,246,239,.90) paragraphs ..... 9.50:1
     rgba(250,246,239,.90) label .......... 9.50:1
     #CFE0D4 .ks-link--light .............. 8.30:1
   -------------------------------------------------------------------------- */
.ke-tele {
  padding: 56px 0 60px;
  background: var(--ink);
}

.ke-tele__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  align-items: center;
}

.ke-tele__media { margin: 0; }

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

.ke-tele__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. */
.ke-tele__title {
  margin: 0 0 18px;
  font-size: clamp(1.75rem, 6.6vw, 2.25rem);
  line-height: 1.15;
  color: var(--cream);
}

.ke-tele__p {
  margin: 0 0 16px;
  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);
}

.ke-tele__p:last-child { margin-bottom: 0; }

.ke-tele a:focus-visible { outline-color: var(--cream); }

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

  /* The wide band is short and the copy sits over one strong horizontal slice
     of the frame, so the original mid-scrim is right here: the phone's
     lightened .50 would leave the h1 on lit mist. */
  .ke-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, .62) 45%,
        rgba(20, 38, 34, .78) 100%);
  }

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

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

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

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

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

  .ke-what,
  .ke-helps,
  .ke-tele { padding: 84px 0 88px; }

  /* REVISED 2026-09-14 (review fix): the band stays stacked until 1080. The
     old image-left grid here set a 320px photograph against a narrow copy
     column that ran four heading lines and left dead space around the
     centred image. Stacked, the photograph goes wide and short (16/9) so it
     does not stand ~490px tall above the copy. The two-column layout and
     its stretch live in the 1080 rule below. */
  .ke-tele__grid { gap: 36px; }

  .ke-tele__img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

}

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

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

  .ke-what,
  .ke-helps,
  .ke-tele { padding: 104px 0 108px; }

  /* REVISED 2026-08-29: this was align-items: center with a fixed 4/3 ratio,
     which left a 380x285 photograph floating in the middle of a 588x540 text
     column - the abandoned-column problem the homepage's help grid was fixed
     for (styles.css .ks-help__grid, "align-items: stretch, not start").
     Same fix, same reasoning: stretch the figure and let object-fit: cover
     absorb the ratio change, so the two columns end level however the copy
     wraps. RE-MEASURED after the change: media 380x598, body 548x598. */
  .ke-tele__grid {
    grid-template-columns: 380px 1fr;
    gap: 72px;
    align-items: stretch;
  }

  .ke-tele__media { min-height: 320px; }   /* a floor, so short copy cannot squash it */

  .ke-tele__img {
    height: 100%;
    aspect-ratio: auto;
  }
}