/* Alder homepage hero. Loaded from inside the hero section, after alder.css,
   so the .al-hero rules here win on cascade order; the finder pill itself
   (.al-finder, shared with the providers page) keeps its alder.css styling.
   Phone first; one breakpoint at 921px. */

.al-hero {
  position: relative; overflow: clip;
  /* Display size, shared with the art offset below. The phone cap keeps the
     widest rolling word (psychologist, 4.80em) on one line of the measure. */
  --al-h1: min(clamp(3rem, 18.5vw, 5rem), calc((100vw - 2 * var(--al-gutter)) / 4.9));
  /* Tan ground and ink text, the base homepage's hero (--op-dawn / --op-ink).
     The section keeps its al-dark class in the markup; every al-dark rule
     that matters is overridden below at equal specificity, later in order. */
  background: var(--al-dawn);
  padding: calc(var(--al-hdr-h) + 14px) 0 32px;
  color: var(--al-ink);
}
.al-hero :focus-visible { outline-color: var(--al-brand); }
.al-hero__grid { position: relative; }
.al-hero__eyebrow {
  font: italic 400 17px/1.3 var(--al-serif);
  color: var(--al-moss);
  margin-bottom: 22px;
}

/* Headline: three lines on a phone (Find a / word / who fits.), two from 921. */
.al-hero .al-hero__h {
  max-width: none;
  font: 800 var(--al-h1)/.96 var(--al-display);
  letter-spacing: -.035em;
  color: var(--al-ink);
  text-wrap: initial;
}
.al-hero__fit { position: relative; display: inline-block; white-space: nowrap; }
/* The accent word in the logo green (3.8:1 on tan; display size, so AA large).
   .al-hero .al-h1 em matches alder.css's .al-dark .al-h1 em and wins on order. */
.al-hero .al-h1 em, .al-hero__fit em {
  font-family: var(--al-serif); font-style: italic; font-weight: 500;
  letter-spacing: -.01em; color: var(--al-brand); padding-right: .04em;
}
.al-hero__fit svg {
  position: absolute; left: -3%; bottom: -.08em; width: 106%; height: .2em;
  color: var(--al-brand); overflow: visible;
}
.al-hero .orx-wf { --wf-ink: rgba(14, 42, 27, .62); --wf-lit: var(--al-brand); }
/* The one gesture: the wire draws itself (underline here, the Oregon map via
   orx-wire.js). Both strokes are complete without the animation. */
.al-hero__fit path { stroke-width: 3px; stroke-dasharray: 1; stroke-dashoffset: 0; animation: al-hero-draw 1.1s var(--al-ease) .5s both; }
@keyframes al-hero-draw { from { stroke-dashoffset: 1; } }

/* The rolling word: a one-line window over a stacked list, moved 1.3em per
   step by alder-hero.js. The sizer reserves the widest word so the line
   never reflows. Words are painted from data-w; the h1 text itself stays
   "Find a therapist who fits." for readers and indexing. */
.al-hero__rot { position: relative; display: inline-block; vertical-align: top; }
.al-hero__rot [data-w]::before { content: attr(data-w); }
.al-hero__sizer { display: inline-grid; visibility: hidden; }
.al-hero__sizer > span { grid-area: 1 / 1; white-space: nowrap; }
.al-hero__win { position: absolute; left: -.06em; right: -.12em; top: -.17em; height: 1.3em; overflow: clip; }
.al-hero__list { display: block; will-change: transform; }
.al-hero__list > span { display: block; height: 1.3em; padding: .17em 0 0 .06em; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .al-hero__list { transform: none !important; transition: none !important; }
  .al-hero__fit path { animation: none !important; }
}

.al-hero__lede {
  margin-top: 22px; max-width: 30em;
  font: italic 400 17px/1.5 var(--al-serif);
  /* The base lede grey (#5f7a6c) sits at 4.1:1 on tan; --al-muted is its
     nearest neighbour that clears 4.5:1 (4.76). */
  color: var(--al-muted);
}
/* Two cuts of the lede, same claims; the phone block swaps in the short one. */
.al-hero__lede-short { display: none; }
/* White bar on tan, as the base search bar. */
.al-hero__finder { margin-top: 24px; max-width: 640px; background: #fff; }
.al-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.al-hero__chips .al-chip, .al-hero__plans .al-chip { min-height: 44px; padding: 0 16px; font-size: 14px; flex: none; }
/* Chips on tan: the base's translucent white chip with an ink label. The
   markup keeps al-chip--dark; these win on order at equal specificity. */
.al-hero__chips .al-chip--dark, .al-hero__plans .al-chip--dark {
  background: rgba(255, 255, 255, .72); border-color: var(--al-line); color: var(--al-ink);
}
@media (hover: hover) {
  .al-hero__chips .al-chip--dark:hover, .al-hero__plans .al-chip--dark:hover { background: #fff; border-color: var(--al-brand); }
}

/* Quick-filter row: one row at every width (Eric, 10-15), scrolling sideways
   when it overflows (alder-hero.js adds the mouse drag). The max-width: none
   undoes alder.css's older hero rule for this class. */
.al-hero__plans {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; margin-top: 12px; max-width: none;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; cursor: grab;
}
.al-hero__plans::-webkit-scrollbar { display: none; }
.al-hero__plans > * { flex: none; }
.al-hero__plans.is-drag { cursor: grabbing; user-select: none; -webkit-user-select: none; }

/* Swipe cue (Eric, 10-15): the row fades out at an edge that has more
   chips past it, and a round arrow sits on that fade (.al-rownav, run by
   alder-hero.js: shown only while the row overflows, aria-disabled at the
   ends, one frame a press). No fade and no arrow at an end. The outer quarter
   of each fade is fully clear, so no sliver of chip shows past the arrow.
   The wrapper takes the row's vertical margins so the arrows can center
   on the chips. The fade widths are registered so they ease in; browsers
   without @property or :has just switch or skip the fade, and the arrows
   still work. */
@property --al-hf-l { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --al-hf-r { syntax: "<length>"; inherits: false; initial-value: 0px; }
.al-hero__row { position: relative; margin-top: 12px; }
.al-hero__row > .al-hero__plans {
  margin-block: 0;
  --al-hf-l: 0px; --al-hf-r: 0px;
  -webkit-mask-image: linear-gradient(to right, transparent calc(var(--al-hf-l) / 4), #000 var(--al-hf-l), #000 calc(100% - var(--al-hf-r)), transparent calc(100% - var(--al-hf-r) / 4));
  mask-image: linear-gradient(to right, transparent calc(var(--al-hf-l) / 4), #000 var(--al-hf-l), #000 calc(100% - var(--al-hf-r)), transparent calc(100% - var(--al-hf-r) / 4));
  transition: --al-hf-l .25s ease, --al-hf-r .25s ease;
}
.al-hero__row:has(.al-hero__nav.is-on [data-dir="-1"][aria-disabled="false"]) > .al-hero__plans { --al-hf-l: 96px; }
.al-hero__row:has(.al-hero__nav.is-on [data-dir="1"][aria-disabled="false"]) > .al-hero__plans { --al-hf-r: 96px; }
.al-hero__nav {
  position: absolute; inset: 0; z-index: 1;
  justify-content: space-between; align-items: center; pointer-events: none;
}
/* A 34px circle in the 44px hit box (background clipped to the padding);
   the raise shadow would trace the 44px box, so it goes. */
.al-hero__nav .al-round {
  padding: 5px; background-clip: content-box; box-shadow: none; pointer-events: auto;
}
.al-hero__nav .al-round svg { width: 18px; height: 18px; }
/* alder.css's hover sets the background shorthand, which resets the clip. */
.al-hero__nav .al-round:not([aria-disabled="true"]):hover { background-clip: content-box; }
.al-hero__nav .al-round[aria-disabled="true"] { visibility: hidden; }
.al-hero__nav [data-dir="1"] { margin-left: auto; }
@media (prefers-reduced-motion: reduce) {
  .al-hero__row > .al-hero__plans { transition: none; }
}

/* Oregon as a relief model on a bench plate (partials/_hero-art.tpl.php):
   solids painted back to front, four greens by facing, the pin is the one
   lit part. Sits under the row on a phone, right-aligned, well away from
   the headline. (display, position and transform undo alder.css's older
   hero-art rules.) */
.al-hero__art {
  display: block; position: static; transform: none;
  width: min(72%, 320px); margin: 26px 0 0 auto; pointer-events: none;
}
.al-hero__fig { display: block; width: 100%; height: auto; overflow: visible; }
.al-hero__fig .f, .al-hero__fig .ln, .al-hero__fig .rv, .al-hero__fig .cr,
.al-hero__fig .tk, .al-hero__fig .tm, .al-hero__fig .rl, .al-hero__fig .lk,
.al-hero__fig .pn, .al-hero__fig .al-hero__ring {
  stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke;
}
/* On tan every wire is ink at low alpha (the dark ground used page-white). */
.al-hero__fig .f   { stroke: rgba(14, 42, 27, .30); stroke-width: 1px; }
.al-hero__fig .ln  { stroke: rgba(14, 42, 27, .18); stroke-width: 1px; fill: none; }
.al-hero__fig .rl  { stroke: rgba(14, 42, 27, .24); stroke-width: 1px; }
.al-hero__fig .tk  { stroke: rgba(14, 42, 27, .36); stroke-width: 1px; }
.al-hero__fig .tm  { stroke: rgba(14, 42, 27, .20); stroke-width: 1px; }
.al-hero__fig .rv  { stroke: var(--al-moss); stroke-width: 1.6px; fill: none; }
.al-hero__fig .lk  { fill: var(--al-moss); stroke: rgba(14, 42, 27, .3); stroke-width: 1px; }
.al-hero__fig .cr  { stroke: rgba(14, 42, 27, .5); stroke-width: 1px; fill: none; }
.al-hero__fig .sh  { fill: rgba(14, 42, 27, .14); stroke: none; }
.al-hero__fig .scr { fill: var(--al-deep); stroke: rgba(14, 42, 27, .3); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.al-hero__fig .scd { fill: rgba(250, 250, 248, .5); }
/* base plate, the light bench tones the step spreads use: top, west, south */
.al-hero__fig .c-b1 { fill: #FFFCF6; }
.al-hero__fig .c-b2 { fill: #EBE1D0; }
.al-hero__fig .c-b3 { fill: #D5C6AB; }
/* the plateau: four greens by facing (sage top, brand south, moss west) */
.al-hero__fig .c-top { fill: var(--al-sage); }
.al-hero__fig .c-s   { fill: var(--al-brand); }
.al-hero__fig .c-w   { fill: #1F7537; }
.al-hero__fig .c-sl  { fill: #6CC888; }
.al-hero__fig .c-lit { fill: #FAFAF8; }
/* the pin is the one dark part now: a deep-green pin on the light plate */
.al-hero__fig .pn  { fill: var(--al-pill); stroke: rgba(250, 250, 248, .6); stroke-width: 1px; }
.al-hero__fig .ph  { fill: var(--al-sage); }
.al-hero__fig .al-hero__pinsh { fill: rgba(14, 42, 27, .22); }
.al-hero__fig .al-hero__ring  { fill: none; stroke: var(--al-ink); stroke-width: 1.2px; opacity: .45; transform-box: fill-box; transform-origin: center; }

/* The pin drop. The figure is complete as drawn; the script adds .is-armed
   (motion allowed, pin held above the state) and .is-playing (it falls,
   settles, and the lit edge comes up around Salem). ~900ms, once. */
.al-hero__art.is-armed .al-hero__pin   { opacity: 0; transform: translateY(-140px); }
.al-hero__art.is-armed .al-hero__pinsh,
.al-hero__art.is-armed .al-hero__ring,
.al-hero__art.is-armed .al-hero__land .c-lit { opacity: 0; }
.al-hero__art.is-playing .al-hero__pin   { animation: al-hero-pin .9s cubic-bezier(.4, 0, .15, 1) .45s both; }
.al-hero__art.is-playing .al-hero__pinsh { animation: al-hero-in .25s linear 1.05s both; }
.al-hero__art.is-playing .al-hero__ring  { animation: al-hero-ring 1.1s cubic-bezier(0, 0, .2, 1) 1.1s both; }
.al-hero__art.is-playing .al-hero__land .c-lit { animation: al-hero-in .5s var(--al-ease) 1.15s both; }
@keyframes al-hero-pin {
  0%   { opacity: 0; transform: translateY(-140px); animation-timing-function: cubic-bezier(.5, 0, .9, .5); }
  12%  { opacity: 1; }
  68%  { transform: translateY(0); animation-timing-function: cubic-bezier(.2, 0, .3, 1); }
  84%  { transform: translateY(-5px); animation-timing-function: cubic-bezier(.5, 0, .7, 1); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes al-hero-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes al-hero-ring {
  0%   { opacity: 0; transform: scale(.3); }
  25%  { opacity: .9; }
  100% { opacity: .45; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .al-hero__art .al-hero__pin, .al-hero__art .al-hero__pinsh, .al-hero__art .al-hero__ring,
  .al-hero__art .al-hero__land .c-lit { animation: none !important; opacity: 1; transform: none; }
  .al-hero__art .al-hero__ring { opacity: .45; }
}

/* Phone: a compact, app-like hero. Headline 44 to 48px on three lines, a
   shorter lede, and both chip groups as one-row carousels that scroll
   sideways (native touch; mouse drag via alder-hero.js) and bleed past the
   right edge to signal more. Proximity snap, not mandatory: the filter row
   is only ~50px wider than the viewport, and a mandatory snap could never
   rest on its last chip. touch-action keeps BOTH axes native, so a thumb
   that lands on the row still scrolls the page. Nothing here touches 921+. */
@media (max-width: 920px) {
  /* Fluid display size. Under 600 the rolling word owns a line (three
     lines), sized so the widest word runs about two thirds of the column;
     from 600 the first <br> goes and "Find a <word>" shares a line (two
     lines) at about 95% of the column. Both bands meet the 921+ size. */
  .al-hero { --al-h1: clamp(44px, (100vw - 2 * var(--al-gutter)) / 7.4, 64px); padding: calc(var(--al-hdr-h) + 10px) 0 26px; }
  .al-hero__eyebrow { font-size: 16px; margin-bottom: 16px; }
  .al-hero__lede { margin-top: 14px; max-width: 26em; font-size: 16px; line-height: 1.45; }
  .al-hero__lede-full { display: none; }
  .al-hero__lede-short { display: inline; }
  .al-hero__finder { margin-top: 18px; }
  .al-hero__chips, .al-hero__plans {
    flex-wrap: nowrap; gap: 8px;
    margin-inline: calc(-1 * var(--al-gutter)); padding-inline: var(--al-gutter);
    padding-block: 3px; margin-bottom: -3px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; scroll-padding-inline-start: var(--al-gutter);
    scrollbar-width: none; touch-action: pan-x pan-y; cursor: grab;
  }
  .al-hero__chips::-webkit-scrollbar, .al-hero__plans::-webkit-scrollbar { display: none; }
  .al-hero__chips > *, .al-hero__plans > * { flex: none; scroll-snap-align: start; }
  .al-hero__chips.is-drag, .al-hero__plans.is-drag { scroll-snap-type: none; cursor: grabbing; user-select: none; -webkit-user-select: none; }
  /* The last chip snaps by its end, so the row's true end is a rest point:
     before, proximity snap pulled a row that reached its end back to the
     last chip start, about 30px short, and the next arrow stayed up for a
     press that barely moved. */
  .al-hero__plans { scroll-padding-inline-end: var(--al-gutter); }
  .al-hero__plans > :last-child { scroll-snap-align: end; }
  .al-hero__chips .al-chip, .al-hero__plans .al-chip { white-space: nowrap; -webkit-user-drag: none; }
  .al-hero__chips { margin-top: 12px; }
  .al-hero__plans { margin-top: 5px; }
  /* The wrapper carries the row's margins; the arrows line up with the
     bled row, a few px in from the screen edge. */
  .al-hero__row { margin-top: 5px; margin-bottom: -3px; }
  .al-hero__nav { inset-inline: calc(-1 * var(--al-gutter)); padding-inline: 4px; }
  /* "By insurance" leads its row as a word, not a line of its own. */
  .al-hero__plans-label { flex-basis: auto; margin: 0 4px 0 0; line-height: 44px; }
  /* The relief is off on phones (DOM kept for 921+); the pin never drops
     because a hidden figure never intersects. */
  .al-hero__art { display: none; }
}
@media (min-width: 600px) and (max-width: 920px) {
  /* "Find a " + the widest word measures 8.66em; /9.1 keeps it on one line at ~95%. */
  .al-hero { --al-h1: clamp(60px, (100vw - 2 * var(--al-gutter)) / 9.1, 88px); }
  .al-hero__br { display: none; }
  .al-hero__lede { font-size: 17px; max-width: 30em; }
}

@media (min-width: 921px) {
  .al-hero {
    --al-h1: clamp(3rem, 7.5vw, 7rem);
    --al-art-w: min(520px, 38vw);
    padding: calc(var(--al-hdr-h) + 36px) 0 56px;
  }
  .al-hero__eyebrow { font-size: 19px; margin-bottom: 26px; }
  .al-hero__br { display: none; }
  /* Lede, finder and chips stop 56px short of the map at every width from 921. */
  .al-hero__lead { max-width: min(720px, 100% - var(--al-art-w) - 48px); }
  .al-hero__lede { margin-top: 26px; font-size: 20px; max-width: 28em; }
  .al-hero__finder { margin-top: 26px; height: 64px; padding-left: 22px; max-width: 640px; }
  .al-hero__finder .al-finder__go { width: 50px; height: 50px; }
  .al-hero__chips { margin-top: 12px; }
  .al-hero__plans { margin-top: 14px; }
  .al-hero__row { margin-top: 14px; }
  .al-hero__chips .al-chip, .al-hero__plans .al-chip { padding: 0 14px; font-size: 13px; }
  .al-hero__plans-label { flex-basis: auto; margin: 0 6px 0 0; font-size: 17px; }
  /* The map sits in the open right two thirds that the short second line
     ("who fits.") leaves free, its base on the chip row's baseline (the SVG
     carries ~7% clear space under the slab, hence the negative bottom). */
  .al-hero__art {
    position: absolute; right: 0; bottom: -10px; top: auto; margin: 0; transform: none;
    width: var(--al-art-w);
  }
}

/* 921 to 1279: the art takes the right third, so the display size climbs
   from 84px to meet the 96px that 7.5vw gives at 1280 (unchanged from 1280). After the 921+ block so it wins on order. */
@media (min-width: 921px) and (max-width: 1279px) {
  .al-hero { --al-h1: clamp(84px, 3vw + 57.6px, 96px); }
  .al-hero__lede-full { display: none; }
  .al-hero__lede-short { display: inline; }
}