/* ==========================================================================
   Little Luminaries — the homepage world (playful reset, September 2026)

   One fixed sky sits behind the whole homepage. As you scroll, /js/world.js
   blends it through six "times of day" taken from each section's data-sky:
   dusk (hero) → night → forest → moon → dawn → day. Stars fade, the moon
   sets, the sun rises, and the fireflies dim as morning comes.

   Loaded on the homepage and on inner pages that use the same world
   (templates/partials/world-assets.html, world-sky.html, world-hills.html).
   Without JS, every section falls back to its own solid background; with
   prefers-reduced-motion, colours still follow the scroll but nothing drifts.
   ========================================================================== */

/* ---------- The sky ---------- */
.world {
  --sky-1: #1d2350; --sky-2: #4a3f78; --sky-3: #c98579;
  --stars: .35; --moon-o: .4; --moon-y: 0px; --sun: 0; --drift: 0px;
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  display: none;
}
.js .world { display: block; }
.world-sky { position: absolute; inset: 0; background: linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 58%, var(--sky-3) 100%); }
.world-stars {
  position: absolute; inset: -10% 0 30%;
  opacity: var(--stars);
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 27% 42%, #fff 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 43% 12%, #fff8dc 50%, transparent 51%),
    radial-gradient(1px 1px at 58% 33%, #fff 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 71% 8%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 84% 27%, #fff8dc 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 93% 52%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 6% 61%, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 36% 70%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 64% 58%, #fff 50%, transparent 51%);
  background-size: 520px 420px;
  transform: translateY(calc(var(--drift) * -.03));
}
.world-stars::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(1.2px 1.2px at 20% 30%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 50% 80%, #fff 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 80% 50%, #fff8dc 50%, transparent 51%);
  background-size: 330px 290px;
}
.world-moon {
  position: absolute; top: calc(9vh + var(--moon-y)); right: 9vw;
  width: clamp(54px, 7vw, 96px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 36% 34%, #fffbea, #f3e6bf 55%, #d9c89a);
  box-shadow: 0 0 40px 10px hsla(48, 90%, 85%, .25), 0 0 120px 40px hsla(48, 90%, 80%, .12);
  opacity: var(--moon-o);
}
.world-moon::after { /* a soft crater or two */
  content: ""; position: absolute; width: 22%; height: 22%; left: 52%; top: 48%; border-radius: 50%;
  background: hsla(40, 30%, 70%, .35); box-shadow: -18px -14px 0 -4px hsla(40, 30%, 70%, .25);
}
.world-sun {
  position: absolute; left: 50%; bottom: 0;
  width: 150vmax; height: 150vmax; border-radius: 50%;
  transform: translate(-50%, calc(88% - var(--sun) * 30%));
  background: radial-gradient(circle at 50% 50%, hsla(46, 100%, 80%, .75) 0 8%, hsla(40, 100%, 75%, .35) 18%, hsla(35, 100%, 75%, 0) 40%);
  opacity: var(--sun);
}
.world-fireflies { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Sections float over the sky. Without JS they carry their own colour. */
.world-home > section, .world-home > .horizon { position: relative; z-index: 1; }
body.world-page { background: #0e2436; }
body.world-page .site-footer { z-index: 1; }
body.world-page .site-header { background: hsla(228, 42%, 14%, .78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
html:not(.js) [data-sky="dusk"] { background: linear-gradient(180deg, #1d2350, #4a3f78); }
html:not(.js) [data-sky="night"] { background: #0e2436; }
html:not(.js) [data-sky="forest"] { background: #0d2e2f; }
html:not(.js) [data-sky="moon"] { background: #1c3f5c; }
html:not(.js) [data-sky="dawn"] { background: #f6dcc0; }
html:not(.js) [data-sky="day"] { background: var(--paper); }
html:not(.js) .horizon { background: #0d2e2f; }
html:not(.js) .horizon--dawn { background: #1c3f5c; }

/* ---------- Shared chapter styles ---------- */
.w-chapter { padding-block: clamp(3.5rem, 8vw, 7rem); }
.w-night, .w-hero { color: hsl(45, 60%, 92%); }
.w-night h2, .w-night h3, .w-night h4, .w-hero h1 { color: var(--on-dark); }
.w-night .eyebrow, .w-hero .eyebrow { color: var(--gold); }
.w-night .lead, .w-hero .lead { color: hsl(45, 50%, 88%); }
.w-night a:not(.btn):not(.text-link) { color: var(--on-dark); }
.w-night a:not(.btn):not(.text-link):hover { color: var(--gold); }
.w-night .text-link, .w-hero .text-link { color: var(--on-dark); background: hsla(45, 100%, 70%, .1); }
.w-night .text-link:hover, .w-hero .text-link:hover { background: var(--gold); border-color: var(--gold); color: var(--midnight); }
.w-night :focus-visible, .w-hero :focus-visible { outline-color: var(--gold); }
.w-night h2, .w-hero h1 { text-shadow: 0 2px 30px hsla(220, 60%, 5%, .45); }
.w-day { color: var(--navy); }
.hand { color: var(--gold); }
.w-day .hand { color: var(--gold-ink); }
.w-small { font-size: .95rem; opacity: .85; }

/* ---------- 1. Hero (dusk) ---------- */
.w-hero { min-height: calc(100svh - var(--header-h)); display: grid; align-items: center; padding-block: clamp(2rem, 5vw, 4rem) clamp(4.5rem, 8vw, 6rem); }
.w-hero-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.w-hero-title { font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.6rem); line-height: 1.02; font-weight: 600; margin-bottom: .35em; }
.w-word { display: inline-block; }
.w-glow { color: var(--gold); text-shadow: 0 0 24px hsla(45, 100%, 60%, .55), 0 0 60px hsla(45, 100%, 60%, .25); }
.w-hero .lead { max-width: 52ch; }
.w-tags { list-style: none; margin: 1.6rem 0 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; font-size: 1rem; font-weight: 700; color: hsl(45, 60%, 90%); text-shadow: 0 1px 2px hsla(250, 45%, 14%, .7), 0 0 14px hsla(250, 45%, 14%, .55); }
.w-tags li { margin: 0; display: inline-flex; align-items: center; gap: .5rem; }
.w-tags li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px 2px hsla(45, 100%, 60%, .6); }
.w-hero-visual { position: relative; justify-self: center; width: min(100%, 440px); }
.w-arch {
  position: relative; border-radius: 999px 999px 32px 32px; overflow: hidden;
  border: 3px solid hsla(45, 90%, 75%, .55);
  box-shadow: 0 0 0 10px hsla(45, 90%, 75%, .07), 0 0 80px 10px hsla(45, 100%, 60%, .18);
}
.w-arch > figure { width: 100%; margin: 0; border-radius: 0; }
.w-arch > figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 0; }
/* The firefly trail stays in the frame's lower-left corner, below Dr. Taylor's face. */
.w-hero-trail { position: absolute; left: -40%; bottom: -14%; width: 70%; z-index: 2; }
.w-hero-trail picture { display: block; }
/* Two fireflies settle beside her face: one above it on the right, one level
   with it on the left. Sizes and spots are shares of the photo frame. */
.w-hero-sprites { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.w-hero-sprites .sprite { display: block; right: auto; bottom: auto; }
.w-hero-sprites .sprite--a { width: 22%; left: 80%; top: 12.8%; }
.w-hero-sprites .sprite--b { width: 17%; left: 4.5%; top: 37.4%; }
@media (prefers-reduced-motion: no-preference) {
  /* Each start point is its resting spot minus the end of its drift path, so
     the left one rises from the trail instead of crossing her face. */
  .w-hero-sprites .sprite--a { left: calc(91% - 262px); top: calc(20% - 40px); }
  .w-hero-sprites .sprite--b { left: calc(13% - 60px); top: calc(43% + 150px); offset-path: path('M0,0 C -24,-34 34,-60 20,-96 C 8,-126 46,-150 60,-150'); }
}
.w-scroll-cue {
  position: absolute; left: 50%; bottom: 1.25rem; transform: translateX(-50%);
  display: inline-flex; flex-direction: column; align-items: center; gap: .3rem;
  font: 600 1.3rem/1 var(--font-hand); color: hsl(45, 70%, 88%); text-decoration: none; opacity: .9;
}
.w-scroll-cue:hover { color: var(--gold); }
.w-cue-bug { width: 12px; height: 12px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 14px 5px hsla(45, 100%, 60%, .6); }

/* ---------- 2. What brings you here: the picker (site.js) ---------- */
.picker { display: grid; gap: 1.25rem; }
.picker-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.picker-tabs[hidden] { display: none; }
.picker-tab {
  position: relative; display: flex; align-items: center; gap: .85rem; min-height: 78px; margin: 0; padding: .7rem 1rem .7rem .7rem;
  border: 2px solid hsla(45, 80%, 85%, .18); border-radius: var(--radius-inner); background: hsla(215, 45%, 16%, .6);
  color: hsl(45, 70%, 92%); font: 600 1.08rem/1.22 var(--font-display); text-align: left; cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), background-color .25s, border-color .25s, box-shadow .25s, color .25s;
}
@media (hover: hover) { .picker-tab:hover { border-color: var(--tone); } }
.picker-tab[aria-selected="true"] { background: var(--card); color: var(--navy); border-color: var(--tone); box-shadow: 0 0 0 5px color-mix(in srgb, var(--tone) 40%, transparent), 0 14px 40px hsla(220, 60%, 4%, .4); }
.picker-tab:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.picker-icon { flex-shrink: 0; width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: color-mix(in srgb, var(--tone) 38%, var(--card)); box-shadow: inset 0 -3px 0 hsla(0, 0%, 0%, .06); }
.picker-icon svg, .picker-icon img { width: 42px; height: 42px; }
.picker-panel {
  position: relative; display: flex; flex-direction: column; padding: clamp(1.4rem, 3vw, 2.2rem); border-radius: var(--radius-card); background: var(--card); color: var(--navy);
  border-top: 10px solid var(--tone); box-shadow: 0 20px 60px hsla(220, 60%, 4%, .45);
}
.w-night .picker-panel h3 { color: var(--navy); font-size: clamp(1.4rem, 1.1rem + 1vw, 1.85rem); margin-bottom: .2rem; }
.picker-sub { margin: 1rem 0 .3rem; font: 700 1.45rem/1.1 var(--font-hand); color: var(--gold-ink); }
.picker-list { list-style: none; margin: 0 0 .25rem; padding: 0; display: grid; gap: .4rem; }
.picker-list li { position: relative; margin: 0; padding-left: 1.5rem; }
.picker-list li::before { content: ""; position: absolute; left: .1rem; top: .45em; width: .7rem; height: .7rem; border-radius: 50%; background: var(--tone); box-shadow: 0 0 0 2px hsla(200, 47%, 24%, .15); }
.picker-panel p { margin-bottom: 0; }
.picker-actions { display: flex; flex-wrap: wrap; gap: .6rem .75rem; margin-top: auto !important; padding-top: 1.4rem; }
.picker:not(.is-live) .picker-panels { display: grid; gap: 1rem; }
.picker.is-live .picker-panels { display: grid; }
.picker.is-live .picker-panel { grid-area: 1 / 1; }
.picker.is-live .picker-panel[hidden] { display: block; visibility: hidden; }
@media (min-width: 960px) {
  .picker.is-live { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 1.75rem; align-items: stretch; }
  .picker-tabs { grid-template-columns: 1fr; align-content: start; }
  .picker:not(.is-live) .picker-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .picker-tabs { gap: .6rem; }
  .picker-tab { flex-direction: column; justify-content: flex-start; text-align: center; gap: .5rem; min-height: 132px; padding: .9rem .6rem; font-size: 1rem; }
  .picker-icon { width: 52px; height: 52px; }
}
@media (prefers-reduced-motion: no-preference) {
@media (hover: hover) {   .picker-tab:hover { transform: translateY(-3px); } }
  .picker-tab[aria-selected="true"] { transform: scale(1.02); }
  .picker-tab[aria-selected="true"] .picker-icon svg, .picker-tab[aria-selected="true"] .picker-icon img { animation: picker-pop .6s cubic-bezier(.34, 1.56, .64, 1); }
  @keyframes picker-pop { 0% { transform: scale(.7) rotate(-12deg); } 60% { transform: scale(1.12) rotate(4deg); } 100% { transform: none; } }
  .picker-panel.is-fresh { animation: picker-in .45s var(--ease); }
  @keyframes picker-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
}

/* ---------- Horizons (in-flow hill and grass silhouettes) ---------- */
.horizon { height: clamp(90px, 14vw, 200px); margin-block: -4rem 0; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
.horizon .h-layer { position: absolute; inset: 0; width: 100%; height: 100%; will-change: transform; }

/* ---------- 4. Floortime (forest) ---------- */
.w-ft-intro { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.w-ft-visual { position: relative; }
.w-blob { border-radius: 58% 42% 52% 48% / 46% 56% 44% 54%; box-shadow: 0 0 0 3px hsla(45, 90%, 75%, .35), 0 0 70px hsla(45, 100%, 60%, .18); }
.w-circles { width: min(220px, 60%); margin: -3.2rem auto 0; position: relative; z-index: 2; background: hsla(180, 40%, 8%, .72); border-radius: 40px; padding: .2rem .6rem; border: 1px solid hsla(45, 80%, 80%, .2); }
.w-circles svg { width: 100%; height: auto; overflow: visible; }
.w-circles-path { fill: none; stroke: hsla(45, 80%, 85%, .35); stroke-width: 1.5; stroke-dasharray: 3 6; }
.w-circles-a, .w-circles-b { fill: hsl(200, 30%, 70%); }
.w-circles-b { fill: hsl(160, 25%, 62%); }
.w-circles-spark { fill: #fff2b8; filter: drop-shadow(0 0 6px #f5c242) drop-shadow(0 0 12px #f5c242); }
.w-circles-cap { margin: 1rem auto 0; max-width: 40ch; text-align: center; font-size: .98rem; }
.w-circles-cap .hand { display: block; font-size: 1.6rem; margin-bottom: .2rem; }
.w-cert { display: inline-flex; align-items: center; gap: .7rem; margin: .5rem 0 0; padding: .55rem 1.1rem .55rem .6rem; border-radius: var(--radius-pill); background: hsla(45, 100%, 70%, .14); border: 1px solid hsla(45, 100%, 70%, .5); }
.w-cert-badge { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; background: radial-gradient(circle at 40% 35%, #fff4c4, var(--gold) 60%, #d49a1c); box-shadow: 0 0 14px hsla(45, 100%, 60%, .6); position: relative; }
.w-cert-badge::after { content: ""; position: absolute; left: 10px; top: 7px; width: 7px; height: 12px; border: solid var(--midnight); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.w-cert--small { padding: .3rem .8rem .3rem .35rem; font-size: .92rem; font-weight: 800; margin: 0 0 .75rem; background: hsla(45, 100%, 60%, .18); }
.w-cert--small .w-cert-badge { width: 24px; height: 24px; }
.w-cert--small .w-cert-badge::after { left: 8px; top: 5px; width: 6px; height: 10px; }

.w-ft-helps-title { margin: clamp(3rem, 7vw, 5rem) 0 1.5rem; text-align: center; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); }
.w-lanterns { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.w-lantern {
  position: relative; margin: 0; padding: 2.4rem 1.5rem 1.5rem; border-radius: 120px 120px 28px 28px; text-align: center;
  background: linear-gradient(180deg, hsla(45, 100%, 70%, .12), hsla(180, 30%, 60%, .05));
  border: 1px solid hsla(45, 90%, 80%, .22);
}
.w-lantern h4 { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; margin-bottom: .5rem; }
.w-lantern p { margin: 0; font-size: 1rem; }
.w-lantern-glow { display: block; width: 44px; height: 44px; margin: 0 auto 1rem; border-radius: 50%; background: radial-gradient(circle, #fff4c4, var(--gold) 55%, transparent 72%); box-shadow: 0 0 30px 10px hsla(45, 100%, 60%, .35); transition: box-shadow 1.2s var(--ease), transform 1.2s var(--ease); }
.js .w-lantern:not(.is-in) .w-lantern-glow { box-shadow: 0 0 0 0 hsla(45, 100%, 60%, 0); transform: scale(.5); }

/* ---------- Glass cards and chips (night chapters) ---------- */
.w-card-glass {
  padding: 1.5rem 1.4rem; border-radius: var(--radius-card);
  background: hsla(215, 45%, 14%, .45); border: 1px solid hsla(45, 80%, 85%, .16);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.w-card-glass h3 { font-size: 1.4rem; margin-bottom: .45rem; }
.w-card-glass p:last-child { margin-bottom: 0; }

/* ---------- 6. Gestalt language: word by word, or chunks first ---------- */
.w-paths-grid { display: grid; gap: 1.25rem; margin-top: 1rem; }
.w-trail { padding: 1.5rem 1.4rem; border-radius: var(--radius-card); background: hsla(215, 45%, 14%, .45); border: 1px solid hsla(45, 80%, 85%, .14); }
.w-trail h3 { font-size: 1.45rem; }
.w-trail .hand { font-size: 1.1em; margin-left: .2rem; }
.w-bubbles { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.8rem; }
.w-bubbles li {
  position: relative; margin: 0; padding: .55rem 1rem; border-radius: 20px 20px 20px 6px;
  background: hsl(45, 70%, 92%); color: var(--navy); font-weight: 800;
  transition: transform .5s var(--ease), opacity .5s var(--ease);
  transition-delay: calc(var(--b, 0) * 260ms + 200ms);
}
.w-bubbles li:not(:last-child)::after { content: "→"; position: absolute; right: -1.35rem; top: 50%; transform: translateY(-50%); color: var(--gold); font-weight: 800; }
.w-bubbles li:nth-child(2) { --b: 1; } .w-bubbles li:nth-child(3) { --b: 2; } .w-bubbles li:nth-child(4) { --b: 3; }
.w-bubbles li:last-child { background: var(--gold); box-shadow: 0 0 22px hsla(45, 100%, 60%, .45); }
.js .w-trail:not(.is-in) .w-bubbles li { opacity: 0; transform: translateY(10px) scale(.9); }
/* ---------- 7. Dawn: team and video ---------- */
.w-team .section-head { margin-inline: auto; text-align: center; }
.w-team .eyebrow { transform-origin: center; }
.w-video { max-width: 780px; margin: 0 auto clamp(2.5rem, 6vw, 4rem); }
.w-video video, .w-video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius-card); background: var(--midnight); box-shadow: 0 20px 60px hsla(205, 50%, 20%, .3); }
.w-video-ph {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-card); display: grid; place-content: center; justify-items: center; gap: 1rem; text-align: center;
  color: var(--cream); padding: 1rem;
  background:
    radial-gradient(circle at 18% 26%, hsla(45, 100%, 70%, .9) 0 2px, transparent 10px),
    radial-gradient(circle at 80% 20%, hsla(45, 100%, 70%, .9) 0 2px, transparent 9px),
    radial-gradient(circle at 70% 76%, hsla(45, 100%, 70%, .9) 0 2.5px, transparent 12px),
    radial-gradient(circle at 28% 80%, hsla(45, 100%, 70%, .8) 0 1.5px, transparent 8px),
    radial-gradient(ellipse 80% 50% at 50% 115%, hsla(150, 30%, 30%, .9), transparent 70%),
    linear-gradient(180deg, #1d2350, #16384d);
  box-shadow: 0 0 0 6px hsla(45, 90%, 80%, .5), 0 24px 70px hsla(25, 60%, 30%, .3);
}
.w-video-ph p { margin: 0; font-size: 1.05rem; }
.w-video-ph .hand { font-size: 1.7rem; color: var(--gold); }
.w-video-play { width: 76px; height: 76px; border-radius: 50%; background: hsla(45, 100%, 70%, .95); box-shadow: 0 0 40px 10px hsla(45, 100%, 60%, .4); position: relative; }
.w-video-play::after { content: ""; position: absolute; left: 31px; top: 23px; border-style: solid; border-width: 15px 0 15px 24px; border-color: transparent transparent transparent var(--midnight); }
.w-team-grid { display: grid; gap: 1.75rem; max-width: 1040px; margin-inline: auto; }
.w-person { display: grid; gap: 1.25rem; align-items: start; padding: 1.25rem; border-radius: var(--radius-card); background: hsla(45, 100%, 98%, .82); box-shadow: 0 18px 50px hsla(25, 50%, 40%, .14); }
.w-portrait { margin: 0; border-radius: 999px 999px 24px 24px; overflow: hidden; box-shadow: 0 0 0 4px hsla(45, 95%, 60%, .6), 0 0 40px hsla(45, 100%, 60%, .3); align-self: start; }
.w-portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 18%; }
.w-person h3 { margin-bottom: .15rem; }
/* Specialties: an even two-column list with soft colored dots (no pills, so every line starts on the same edge). */
.w-specialties { list-style: none; margin: .35rem 0 1.1rem; padding: .8rem 1rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr)); gap: .5rem 1.25rem; border-radius: 18px; background: hsla(200, 60%, 92%, .6); border: 1px solid hsla(200, 47%, 24%, .1); }
.w-specialties li { --dot: hsl(205, 70%, 62%); margin: 0; display: flex; align-items: baseline; gap: .55rem; font-size: .95rem; font-weight: 700; line-height: 1.35; color: var(--navy); }
.w-specialties li::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot) 25%, transparent); transform: translateY(-1px); }
.w-specialties li:nth-child(3n+1) { --dot: hsl(42, 90%, 55%); }
.w-specialties li:nth-child(3n+2) { --dot: hsl(155, 45%, 48%); }
.w-person p:last-child { margin-bottom: 0; }
.w-team-more { text-align: center; margin: 1.5rem 0 0; }

/* ---------- 8. Day ---------- */
.w-day .pathway { background: hsla(0, 0%, 100%, .7); padding: .9rem .9rem 1.3rem; border-radius: var(--radius-card); box-shadow: 0 18px 50px hsla(25, 50%, 40%, .12); }
.w-day .pathway .ph { border-radius: var(--radius-inner); }
.w-day .pathway-body { padding-inline: .5rem; }
.pathway .w-svc-more { align-self: flex-start; margin-top: auto; color: var(--navy); }
@media (hover: hover) { .pathway:hover .w-svc-more { background: var(--navy); color: var(--cream); } }
.pathway:active { transform: scale(.98); }
.w-steps-wrap { margin-top: clamp(2.5rem, 6vw, 4rem); padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--radius-card); background: var(--cream); }
.w-steps-title { margin-bottom: .9rem; }
.w-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; counter-reset: none; }
.w-steps li { margin: 0; display: grid; grid-template-columns: 44px 1fr; gap: .8rem; align-items: center; font: 600 1.15rem/1.3 var(--font-display); }
.w-step-n { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--midnight); font: 600 1.2rem/1 var(--font-display); box-shadow: 0 0 18px hsla(45, 100%, 60%, .45); }
.w-steps-note { margin-top: 1.15rem; padding-top: 1rem; border-top: 1px dashed hsla(200, 47%, 24%, .25); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; }
.w-steps-note p { margin: 0; font-size: 1.05rem; }
.world-home .cta-band { background: transparent; }

/* ---------- Breakpoints ---------- */
@media (min-width: 700px) {
  .w-lanterns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .w-paths-grid { grid-template-columns: 1fr 1fr; }
  .w-person { grid-template-columns: minmax(150px, 38%) 1fr; }
  .w-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .w-steps li { align-self: start; }
}
@media (min-width: 960px) {
  .w-hero-grid { grid-template-columns: 1.25fr .75fr; }
  .w-hero-visual { justify-self: end; }
  .w-ft-intro { grid-template-columns: 1.05fr .95fr; }
  .w-person { grid-template-columns: minmax(220px, 30%) 1fr; gap: 1.75rem; padding: 1.6rem; }
  .w-ventures { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 959px) {
  .w-hero { min-height: 0; }
  .w-hero-visual { width: min(78%, 360px); margin-top: 1rem; }
  .w-hero-trail { left: -36%; width: 64%; }
  .w-hero-sprites { display: none; }
  .w-scroll-cue { display: none; }
}
@media (max-width: 599px) {
  .w-hero-title { font-size: clamp(2.3rem, 1.4rem + 5vw, 3rem); }
  .w-bubbles { gap: .5rem 1.6rem; }
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .w-word { opacity: 0; transform: translateY(.35em) rotate(-2deg); filter: blur(6px); animation: w-word-in .9s var(--ease) forwards; animation-delay: calc(var(--wi, 0) * 110ms + 150ms); }
  @keyframes w-word-in { to { opacity: 1; transform: none; filter: none; } }
  .w-glow { animation: w-glow-pulse 3.6s ease-in-out 1.6s infinite alternate; }
  .js .w-glow { animation: w-word-in .9s var(--ease) forwards, w-glow-pulse 3.6s ease-in-out 2.2s infinite alternate; animation-delay: calc(var(--wi, 0) * 110ms + 150ms), 2.2s; }
  @keyframes w-glow-pulse { from { text-shadow: 0 0 18px hsla(45, 100%, 60%, .4), 0 0 50px hsla(45, 100%, 60%, .15); } to { text-shadow: 0 0 28px hsla(45, 100%, 65%, .75), 0 0 80px hsla(45, 100%, 60%, .35); } }
  .w-cue-bug { animation: w-bob 2.2s ease-in-out infinite; }
  @keyframes w-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
  @keyframes w-pulse { 0%, 100% { box-shadow: 0 0 14px 4px hsla(45, 100%, 60%, .45); } 50% { box-shadow: 0 0 28px 12px hsla(45, 100%, 60%, .8); } }
  .w-circles-spark { transform-box: view-box; transform-origin: 110px 60px; animation: w-orbit 3.6s linear infinite; }
  @keyframes w-orbit { to { transform: rotate(360deg); } }
  .w-circles-a { animation: w-touch-a 3.6s linear infinite; }
  .w-circles-b { animation: w-touch-b 3.6s linear infinite; }
  @keyframes w-touch-a { 0%, 62%, 88%, 100% { fill: hsl(200, 30%, 70%); } 75% { fill: #ffe38a; } }
  @keyframes w-touch-b { 0%, 12%, 38%, 100% { fill: hsl(160, 25%, 62%); } 25% { fill: #ffe38a; } }
  .w-video-play { animation: w-pulse 3s ease-in-out infinite; }
}

.w-team .lead { margin-inline: auto; }
.w-person-quote { margin: 0; padding: .2rem 0 0 1rem; border-left: 3px solid var(--gold); }
.w-person-quote p { margin: 0; font: 600 1.55rem/1.15 var(--font-hand); color: var(--teal-dark); }
body.world-page .site-footer { box-shadow: 0 60vh 0 var(--midnight); }
@media (max-width: 699px) { .world-moon { display: none; } }
.w-neighbors { display: grid; gap: 1.25rem; max-width: 1040px; margin: clamp(2rem, 5vw, 3rem) auto 0; }
.w-neighbor { padding: 1.5rem 1.5rem 1rem; border-radius: var(--radius-card); background: hsla(45, 100%, 98%, .82); box-shadow: 0 14px 40px hsla(25, 50%, 40%, .12); }
.w-neighbor h3 { font-size: 1.45rem; }
.w-neighbor--listen { background: var(--navy); color: var(--cream); }
.w-neighbor--listen h3 { color: var(--cream); }
.w-neighbor--listen .eyebrow { color: var(--gold); }
.w-neighbor--listen .text-link { color: var(--cream); }
.w-neighbor--listen .text-link:hover { color: var(--gold); }
/* A still from the Inch Journey episode; tapping it opens the video. The play
   button sits in a corner so it never covers a face. */
.w-listen-thumb { position: relative; display: block; margin: 0 0 1.1rem; border-radius: 18px; overflow: hidden; box-shadow: 0 10px 26px hsla(230, 50%, 8%, .35); }
.w-listen-thumb img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; transition: transform .5s var(--ease, ease); }
.w-listen-thumb:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.w-listen-play { position: absolute; right: 14px; bottom: 14px; width: 58px; height: 58px; border-radius: 50%; background: hsla(45, 95%, 62%, .96); box-shadow: 0 0 0 7px hsla(45, 95%, 62%, .28), 0 6px 18px hsla(230, 50%, 8%, .4); transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.w-listen-play::after { content: ""; position: absolute; left: 23px; top: 18px; border-style: solid; border-width: 11px 0 11px 17px; border-color: transparent transparent transparent var(--navy); }
@media (hover: hover) { .w-listen-thumb:hover img { transform: scale(1.03); } .w-listen-thumb:hover .w-listen-play { transform: scale(1.08); } }
@media (min-width: 700px) { .w-neighbors { grid-template-columns: 1.3fr 1fr; } }

/* ==========================================================================
   Immersive pass: hero meadow scene, foreground grass, journey map, glow
   ========================================================================== */
.w-hero { position: relative; overflow: hidden; }
.w-hero-grid { position: relative; z-index: 2; }
.w-scene { position: absolute; left: -4%; right: -4%; bottom: -2px; height: clamp(120px, 20vw, 260px); z-index: 1; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
.w-scene-layer { position: absolute; inset: 0; width: 100%; height: 100%; will-change: transform; }
.w-scroll-cue { z-index: 3; }

/* A strip of grass along the bottom of the screen, as if walking through
   the meadow. It fades out as morning comes. */
.world-grass {
  position: absolute; left: -40px; right: -40px; bottom: -6px; height: clamp(40px, 6vw, 72px); opacity: var(--grass, .9);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60V44l6-26 4 27 7-38 5 40 8-22 4 23 9-44 4 45 7-26 6 28 9-19 4 21 10-40 4 38 6-16 5 18 9-32 5 33 7-22 6 25 8-15 4 18 10-41 4 40 8-19 5 20 8-31 5 32 7-18 6 19 9-37 3 36 7-20 5 22V60z' fill='%2305101a'/%3E%3C/svg%3E") bottom / 240px 100% repeat-x;
  transform-origin: bottom center;
}
@media (prefers-reduced-motion: no-preference) {
  .world-grass { animation: w-sway 7s ease-in-out infinite alternate; }
  @keyframes w-sway { from { transform: skewX(-2deg); } to { transform: skewX(2deg); } }
}

/* The journey map (wide screens only). */
.w-journey { display: none; }
@media (min-width: 1200px) {
  .w-journey {
    --ink: hsl(45, 70%, 90%);
    display: block; position: fixed; z-index: 30; right: 18px; top: 50%; transform: translateY(-50%);
    padding: .5rem 0;
  }
  body[data-sky="dawn"] .w-journey, body[data-sky="day"] .w-journey { --ink: var(--navy); }
  .w-journey ol { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 14px; }
  .w-journey ol::before { content: ""; position: absolute; right: 7px; top: 6px; bottom: 6px; border-right: 2px dotted var(--ink); opacity: .35; }
  .w-journey li { margin: 0; }
  .w-journey a { display: flex; align-items: center; justify-content: flex-end; gap: .6rem; min-height: 16px; text-decoration: none; color: var(--ink); }
  .w-journey a::after { content: ""; width: 12px; height: 12px; margin-right: 2px; border-radius: 50%; border: 2px solid var(--ink); opacity: .6; transition: background .3s, box-shadow .3s, opacity .3s, transform .3s; flex-shrink: 0; }
  .w-journey span { font: 600 1.25rem/1 var(--font-hand); white-space: nowrap; opacity: 0; transform: translateX(6px); transition: opacity .25s, transform .25s; padding: .15rem .5rem; border-radius: 8px; background: hsla(220, 40%, 10%, .55); color: hsl(45, 70%, 92%); }
  .w-journey a:hover span, .w-journey a:focus-visible span, .w-journey a.is-current span { opacity: 1; transform: none; }
  .w-journey a.is-current::after, .w-journey a:hover::after { background: var(--gold); border-color: var(--gold); opacity: 1; box-shadow: 0 0 12px 4px hsla(45, 100%, 60%, .55); transform: scale(1.15); }
  .w-journey-bug { position: absolute; right: 4px; top: 0; width: 18px; height: 15px; background: url('/assets/firefly-sprite.png') center / contain no-repeat; filter: drop-shadow(0 0 6px hsla(45, 100%, 60%, .9)); transform: translateY(var(--jy, 0px)); transition: transform .25s linear; pointer-events: none; }
}

/* Headings in the night chapters catch the light as they arrive. */
@media (prefers-reduced-motion: no-preference) {
  .w-night .is-in h2, .w-night h2.is-in { animation: w-h-glow 2.6s ease-out 1; }
  @keyframes w-h-glow {
    0% { text-shadow: 0 0 0 hsla(45, 100%, 65%, 0); }
    35% { text-shadow: 0 0 26px hsla(45, 100%, 65%, .8), 0 0 70px hsla(45, 100%, 60%, .4); }
    100% { text-shadow: 0 2px 30px hsla(220, 60%, 5%, .45); }
  }
  .w-lantern, .w-card-glass, .w-trail, .w-person { transition: transform .35s var(--ease), box-shadow .35s var(--ease), opacity .7s var(--ease); }
  .w-lantern:hover, .w-card-glass:hover, .w-trail:hover { transform: translateY(-4px); box-shadow: 0 0 50px hsla(45, 100%, 60%, .18); }
  .w-lantern:hover .w-lantern-glow { transform: scale(1.25); box-shadow: 0 0 44px 16px hsla(45, 100%, 60%, .5); }
  .w-person:hover { transform: translateY(-4px) rotate(-.3deg); }
}
.w-day + .w-day { padding-top: clamp(1rem, 3vw, 2.5rem); }

/* ---------- Creative pass: swoosh, catch hint, handwriting ---------- */
.w-swoosh { position: relative; }
.w-swoosh-line { position: absolute; left: -2%; bottom: -.16em; width: 104%; height: .32em; overflow: visible; pointer-events: none; }
.w-swoosh-line path { fill: none; stroke: var(--gold); stroke-width: 4; stroke-linecap: round; filter: drop-shadow(0 0 6px hsla(45, 100%, 60%, .8)); }
.w-catch-hint {
  display: none; align-items: center; gap: .65rem; width: fit-content; max-width: 100%; margin: 1.4rem 0 0; padding: .4rem 1.15rem .4rem .7rem;
  border-radius: var(--radius-pill); background: hsla(45, 100%, 70%, .14); border: 1.5px dashed hsla(45, 100%, 70%, .65);
  color: var(--gold); transform: rotate(-1.5deg); transform-origin: left;
}
.w-catch-hint .hand { font-size: 1.55rem; }
.w-catch-dot { width: 14px; height: 14px; flex-shrink: 0; border-radius: 50%; background: radial-gradient(circle, #fff6cf, var(--gold) 60%); box-shadow: 0 0 14px 5px hsla(45, 100%, 60%, .7); }

@media (prefers-reduced-motion: no-preference) {
  .js .w-catch-hint { display: flex; animation: w-word-in .9s var(--ease) 2.6s both; }
  .w-catch-dot { animation: w-pulse 1.8s ease-in-out infinite; }
  .js .w-swoosh-line path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: w-swoosh 1.1s var(--ease) 1.5s forwards; }
  @keyframes w-swoosh { to { stroke-dashoffset: 0; } }
  /* Handwritten notes write themselves in once their block arrives. */
  .js .world-page [data-reveal] .hand { clip-path: inset(-20% 100% -20% 0); transition: clip-path 1.2s cubic-bezier(.5, 0, .3, 1) .45s; }
  /* A clip on an inline span that wraps only reveals its first line, so a
     handwritten line that runs onto two lines writes in as one box. */
  :where(.js .world-page [data-reveal] span.hand) { display: inline-block; }
  .js .world-page [data-reveal].is-in .hand { clip-path: inset(-20% -5% -20% 0); }
}
@media (max-width: 699px) { .w-catch-hint .hand { font-size: 1.35rem; } }

/* ---------- Playful polish: neighbors and team cards line up ---------- */
.w-neighbor { display: flex; flex-direction: column; }
.w-neighbor > .text-link:last-child { margin-top: auto; align-self: flex-start; }
.w-person-body { display: flex; flex-direction: column; align-self: stretch; }
.w-person-body > .moment--card { margin-top: auto; }
.w-person-body > p:has(+ .moment--card) { margin-bottom: 1.8rem; }
.w-moments { padding-bottom: clamp(1rem, 3vw, 2rem); }

/* ---------- Whimsy: clouds with faces ---------- */
.world-clouds { position: absolute; inset: 0; opacity: calc(var(--sun) * .95); }
.w-cloud { position: absolute; left: 0; width: clamp(96px, 12vw, 180px); height: auto; filter: drop-shadow(0 8px 14px hsla(30, 45%, 55%, .22)); transform: translateX(var(--cx, 10vw)); }
.w-cloud--a { top: 9%; --cx: 8vw; }
.w-cloud--b { top: 27%; width: clamp(76px, 9vw, 130px); --cx: 62vw; }
.w-cloud--c { top: 5%; width: clamp(84px, 10vw, 150px); --cx: 82vw; }
.cloud-eyes { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .w-cloud { animation: w-cloud-drift var(--dur, 120s) linear infinite; animation-delay: var(--delay, 0s); }
  .w-cloud--a { --dur: 95s; --delay: -30s; }
  .w-cloud--b { --dur: 130s; --delay: -90s; }
  .w-cloud--c { --dur: 150s; --delay: -10s; }
  @keyframes w-cloud-drift { from { transform: translateX(-22vw); } to { transform: translateX(110vw); } }
  .cloud-eyes { animation: cloud-blink 4.5s infinite; }
  .w-cloud--b .cloud-eyes { animation: none; }
  @keyframes cloud-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
}
.ll-calm .w-catch-hint { display: none !important; }

/* ==========================================================================
   Calmer rework (late September 2026): a family's words first, the
   picker, our approach, Floortime, gestalt language, AAC, the therapists
   ========================================================================== */
.w-hero .actions { gap: .75rem; }

/* A family's words: a letter pinned to the night sky. */
.w-review { padding-top: clamp(3rem, 7vw, 5.5rem); }
.w-letter {
  position: relative; max-width: 880px; margin: 0 auto; padding: clamp(2rem, 4.5vw, 3.2rem) clamp(1.4rem, 4.5vw, 3.4rem) clamp(1.6rem, 3.5vw, 2.4rem);
  border-radius: var(--radius-panel); background: var(--card); color: var(--navy); text-align: center; transform: rotate(-.6deg);
  box-shadow: 0 0 0 8px hsla(45, 100%, 70%, .14), 0 0 90px hsla(45, 100%, 60%, .22), 0 30px 70px hsla(220, 60%, 4%, .45);
}
.w-letter::before, .w-letter::after { content: ""; position: absolute; top: -13px; width: 96px; height: 26px; background: hsla(45, 95%, 65%, .8); border-radius: 2px; }
.w-letter::before { left: 12%; transform: rotate(-5deg); }
.w-letter::after { right: 12%; transform: rotate(4deg); background: hsla(170, 45%, 60%, .75); }
.w-letter-bug { position: absolute; top: -18px; left: 50%; width: 30px; height: 30px; margin-left: -15px; border-radius: 50%; background: radial-gradient(circle, #fff4c4, var(--gold) 60%); box-shadow: 0 0 22px 8px hsla(45, 100%, 60%, .55); }
.w-night .w-letter .eyebrow { color: var(--gold-ink); margin-bottom: .25rem; }
.w-letter-stars { margin: 0 0 .8rem; font-size: 1.5rem; letter-spacing: .15em; color: #e0a526; }
.w-letter blockquote { margin: 0 0 1.25rem; }
.w-letter blockquote p { margin: 0; font: 500 clamp(1.2rem, 1rem + .9vw, 1.65rem)/1.5 var(--font-display); color: var(--navy); }
.w-letter mark { color: inherit; padding: 0 .1em; background: linear-gradient(transparent 55%, hsla(45, 100%, 62%, .65) 55%, hsla(45, 100%, 62%, .65) 92%, transparent 92%); }
.w-letter figcaption { font-size: 1.02rem; }
.w-letter-more { margin: 1.2rem 0 0; }
/* The letter holds a swipeable strip of reviews. Big gold arrows sit on
   the card's sides (below it on phones), with dots to show where you are. */
.w-reviews-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; border-radius: 18px; }
.w-reviews-track:focus-visible { outline: 3px solid var(--gold); outline-offset: 6px; }
.w-reviews-track.is-live { scrollbar-width: none; }
.w-reviews-track.is-live::-webkit-scrollbar { display: none; }
.w-review-slide { flex: 0 0 100%; min-width: 0; margin: 0; padding: 0 .25rem; scroll-snap-align: center; scroll-snap-stop: always; display: flex; flex-direction: column; justify-content: center; }
.w-reviews-nav { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 1.3rem; }
.w-reviews-nav[hidden] { display: none; }
.w-reviews-arrow {
  flex: none; display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--gold); color: var(--navy); box-shadow: 0 0 0 6px hsla(45, 100%, 60%, .22), 0 10px 22px hsla(220, 60%, 8%, .3);
  transition: transform .2s ease, box-shadow .2s ease;
}
@media (hover: hover) { .w-reviews-arrow:hover { transform: scale(1.08); box-shadow: 0 0 0 9px hsla(45, 100%, 60%, .3), 0 12px 26px hsla(220, 60%, 8%, .35); } }
.w-reviews-arrow:focus-visible { outline: 3px solid var(--navy); outline-offset: 4px; }
.w-reviews-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: .15rem; }
.w-reviews-dot { width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.w-reviews-dot::before { content: ""; width: 11px; height: 11px; border-radius: 50%; background: hsla(200, 47%, 24%, .25); transition: background .2s ease, transform .2s ease, box-shadow .2s ease; }
.w-reviews-dot:hover::before { background: hsla(200, 47%, 24%, .5); }
.w-reviews-dot[aria-current="true"]::before { background: var(--gold); transform: scale(1.35); box-shadow: 0 0 8px 2px hsla(45, 100%, 55%, .6); }
.w-reviews-dot:focus-visible { outline: 3px solid var(--navy); outline-offset: 1px; border-radius: 50%; }
@media (min-width: 760px) {
  .w-review { --arrow-out: 28px; }
  .w-reviews .w-reviews-arrow { position: absolute; top: 50%; margin-top: -28px; }
  .w-reviews .w-reviews-prev { left: calc(-1 * var(--arrow-out)); }
  .w-reviews .w-reviews-next { right: calc(-1 * var(--arrow-out)); }
}
@media (prefers-reduced-motion: no-preference) {
  .w-reviews-track { scroll-behavior: smooth; }
}

/* Our approach */
.w-approach-intro { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.w-approach-intro .section-head { margin-bottom: 0; }
.w-toy {
  display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: 1.1rem; align-items: center;
  padding: 1.4rem; border-radius: var(--radius-card); background: hsla(45, 100%, 70%, .12); border: 1.5px dashed hsla(45, 100%, 70%, .55);
}
.w-toy h3 { font-size: 1.45rem; margin-bottom: .35rem; }
.w-toy p { margin-bottom: .7rem; }
/* A little pile of toys: a teddy bear, a frog puppet and a balloon. */
.w-toy-pals { position: relative; width: 100%; aspect-ratio: 1; }
.w-toy-pals img { position: absolute; height: auto; filter: drop-shadow(0 8px 14px hsla(220, 60%, 4%, .35)); }
.w-toy-bear { width: 66%; left: 2%; bottom: 4%; }
.w-toy-frog { width: 46%; right: 0; bottom: 0; }
.w-toy-balloon { width: 34%; right: 8%; top: 0; }
.w-approach-grid, .w-aac-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.w-approach-grid > li, .w-aac-grid > li { margin: 0; }
.w-card-icon { display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: .8rem; border-radius: 20px; background: hsla(45, 80%, 95%, .1); border: 1px solid hsla(45, 80%, 85%, .2); }
.w-card-icon svg { width: 44px; height: 44px; overflow: visible; }
.w-card-icon img { width: 46px; height: 46px; }
.w-welcome { margin: clamp(1.75rem, 4vw, 2.5rem) auto 0; max-width: 880px; text-align: center; }
.w-welcome p { font: 500 clamp(1.15rem, 1rem + .6vw, 1.45rem)/1.5 var(--font-display); margin-bottom: 1.1rem; }
.w-welcome .hand { font-size: 1.35em; }

/* DIR/Floortime: who it is for */
.w-ft-for {
  margin: clamp(2.5rem, 6vw, 4rem) auto 0; max-width: 960px; padding: clamp(1.4rem, 3vw, 2rem) clamp(1.4rem, 3vw, 2.2rem);
  border-radius: var(--radius-card); background: linear-gradient(135deg, hsla(45, 100%, 70%, .16), hsla(170, 50%, 60%, .08)); border: 1px solid hsla(45, 100%, 70%, .45);
}
.w-ft-for h3 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); margin-bottom: 1rem; }
.w-ft-for ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.w-ft-for li { margin: 0; display: grid; grid-template-columns: 26px 1fr; gap: .8rem; align-items: start; font-size: 1.08rem; }
.w-ft-for-dot { width: 18px; height: 18px; margin-top: .25rem; border-radius: 50%; background: radial-gradient(circle, #fff4c4, var(--gold) 60%); box-shadow: 0 0 12px 3px hsla(45, 100%, 60%, .55); }

/* Gestalt language: how we use it */
.w-glp-use { margin-top: clamp(1.75rem, 4vw, 2.5rem); display: grid; gap: 1.25rem 2.5rem; align-items: start; padding: clamp(1.4rem, 3vw, 2.2rem); border-radius: var(--radius-card); background: hsla(215, 45%, 14%, .5); border: 1px solid hsla(45, 80%, 85%, .16); }
.w-glp-use h3 { font-size: 1.6rem; }
.w-glp-note { margin: 1rem 0 0; }
.w-glp-note .hand { font-size: 1.65rem; display: inline-block; transform: rotate(-2deg); }
.w-glp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; counter-reset: glp; }
.w-glp-list li { margin: 0; position: relative; padding: .95rem 1.1rem .95rem 3.6rem; border-radius: 20px; background: hsla(45, 100%, 70%, .1); counter-increment: glp; }
.w-glp-list li::before { content: counter(glp); position: absolute; left: .9rem; top: .9rem; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--midnight); font: 600 1.05rem/1 var(--font-display); box-shadow: 0 0 14px hsla(45, 100%, 60%, .45); }
.w-glp-list strong { display: block; font: 600 1.15rem/1.3 var(--font-display); color: var(--on-dark); margin-bottom: .15rem; }
.w-section-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin: clamp(1.75rem, 4vw, 2.5rem) 0 0; }

/* AAC */
.w-aac-intro { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; margin-bottom: clamp(1.75rem, 4vw, 2.5rem); }
.w-aac-intro .section-head { margin-bottom: 0; }
.w-aac-device { justify-self: center; width: min(100%, 330px); padding: 14px; border-radius: var(--radius-card); background: #1b2440; box-shadow: 0 0 0 3px hsla(45, 80%, 85%, .25), 0 24px 60px hsla(220, 60%, 4%, .5); }
.w-aac-screen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px; border-radius: 18px; background: var(--card); }
.w-aac-screen button { display: grid; place-items: center; min-height: 58px; margin: 0; padding: .3rem; border: 0; border-radius: 12px; font: 600 min(1rem, 18px)/1.1 var(--font-display); color: #1b2440; text-align: center; background: #a9cdf0; box-shadow: inset 0 -3px 0 hsla(0, 0%, 0%, .12); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .12s ease, box-shadow .2s ease; }
.w-aac-screen button:nth-child(1), .w-aac-screen button:nth-child(8) { background: #f7e08a; }
.w-aac-screen button:nth-child(2), .w-aac-screen button:nth-child(3), .w-aac-screen button:nth-child(5), .w-aac-screen button:nth-child(6), .w-aac-screen button:nth-child(9) { background: #b7e3bd; }
.w-aac-screen button:nth-child(7) { background: #f6b8c6; }
.w-aac-screen button:active, .w-aac-screen button.is-tapped { transform: scale(.94); box-shadow: 0 0 0 3px var(--gold), 0 0 18px hsla(45, 100%, 60%, .8); }
.w-aac-screen button:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
/* The message bar across the top, like a real device: words appear as they are tapped. */
.w-aac-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; padding: 6px 6px 6px 14px; min-height: 56px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 2px hsla(45, 90%, 60%, .55); }
.w-aac-out { flex: 1; min-width: 0; margin: 0; font: 600 1.15rem/1.25 var(--font-display); color: #1b2440; overflow-wrap: anywhere; }
.w-aac-text:not(:empty) + .w-aac-hint { display: none; }
.w-aac-hint { font: 400 .95rem/1.3 var(--font-body); color: hsl(215, 20%, 45%); }
.w-aac-key { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px; background: hsl(215, 30%, 92%); color: #1b2440; cursor: pointer; }
@media (hover: hover) { .w-aac-key:hover { background: hsl(45, 90%, 80%); } }
.w-aac-key:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
html:not(.js) .w-aac-bar { display: none; }
.w-aac-n { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: .8rem; border-radius: 50%; background: var(--gold); color: var(--midnight); font: 600 1.15rem/1 var(--font-display); box-shadow: 0 0 16px hsla(45, 100%, 60%, .45); }
.w-aac-foot { margin-top: clamp(1.5rem, 4vw, 2.25rem); display: grid; gap: 1.25rem; align-items: stretch; }
.w-aac-systems { padding: 1.4rem 1.5rem; border-radius: var(--radius-card); background: hsla(45, 100%, 70%, .1); border: 1px solid hsla(45, 100%, 70%, .4); }
.w-aac-systems p { margin-bottom: .8rem; }
/* AAC systems as an even grid of tiles, like the buttons on a communication board: 2 across, 3 across when there is room. */
.w-aac-keys { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
@container aackeys (min-width: 26rem) { .w-aac-keys { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.w-aac-keys li { margin: 0; display: grid; place-items: center; min-height: 3.6rem; padding: .85rem .6rem .55rem; border-radius: 12px; background: var(--card); color: var(--navy); font: 700 .95rem/1.2 var(--font-display); text-align: center; text-wrap: balance; box-shadow: inset 0 7px 0 var(--tone), 0 6px 16px hsla(220, 60%, 4%, .25); }
.w-aac-keys .w-aac-key--custom { background: color-mix(in srgb, var(--tone) 22%, var(--card)); }
.w-aac-keys--center { max-width: 560px; margin-inline: auto; }
.w-aac-systems, .w-svc-extra { container: aackeys / inline-size; }
.w-aac-quote { margin: 0; padding: 1.4rem 1.5rem; border-radius: var(--radius-card); background: var(--card); color: var(--navy); }
.w-aac-quote blockquote { margin: 0 0 .7rem; }
.w-aac-quote blockquote p { margin: 0; font: 500 1.15rem/1.5 var(--font-display); }
.w-aac-quote figcaption { font-size: .98rem; }
.w-aac-quote .w-letter-stars { margin: .35rem 0 0; font-size: 1.6rem; }

/* Meet the therapists */
.w-trained { font-size: .98rem; padding: .8rem 1rem; border-radius: 18px; background: var(--cream-soft, hsl(45, 70%, 93%)); }
.w-person-quote { margin: 0 0 1rem; }
.w-ventures { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.w-ventures li { margin: 0; display: flex; }
/* Each project is one tappable card: icon, name, one line, and a pill to visit. */
.w-venture { flex: 1; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr auto; column-gap: .8rem; row-gap: .2rem; padding: 1rem 1.05rem; border-radius: 20px; text-decoration: none; color: var(--navy); background: color-mix(in srgb, var(--tone) 18%, #fffdf7); border: 1.5px solid color-mix(in srgb, var(--tone) 55%, transparent); box-shadow: 0 6px 18px hsla(200, 47%, 24%, .08); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.w-venture-icon { grid-row: 1 / span 2; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: color-mix(in srgb, var(--tone) 40%, #fff); }
.w-venture-icon img { width: 28px; height: 28px; }
.w-venture-name { align-self: end; font: 600 1.12rem/1.2 var(--font-display); }
.w-venture-desc { grid-column: 2; font-size: .95rem; line-height: 1.45; }
.w-venture-go { grid-column: 2; justify-self: start; margin-top: .55rem; padding: .3rem .85rem; border-radius: var(--radius-pill); border: 1.5px solid var(--navy); font: 700 .88rem/1.2 var(--font-display); }
@media (hover: hover) { .w-venture:hover { transform: translateY(-3px); box-shadow: 0 12px 26px hsla(200, 47%, 24%, .14); } .w-venture:hover .w-venture-go { background: var(--navy); color: var(--cream); } }
.w-venture:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
/* Three across: stack the icon over the name so narrow cards keep a readable line length. */
@media (min-width: 960px) {
  .w-venture { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr auto; }
  .w-venture-icon { grid-row: auto; margin-bottom: .45rem; }
  .w-venture-name { align-self: start; }
  .w-venture-desc, .w-venture-go { grid-column: 1; }
}

@media (min-width: 700px) {
  .w-approach-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w-aac-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w-ft-for ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .w-aac-foot { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 960px) {
  .w-approach-intro { grid-template-columns: 1.1fr .9fr; }
  .w-approach-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .w-aac-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .w-glp-use { grid-template-columns: .85fr 1.15fr; }
  .w-aac-intro { grid-template-columns: 1.25fr .75fr; }
}
@media (max-width: 699px) {
  /* Compact cards on phones: the icon or number sits beside the heading. */
  .w-approach-grid .w-card-glass, .w-aac-grid .w-card-glass { display: grid; grid-template-columns: 48px 1fr; gap: .15rem .9rem; align-items: start; padding: 1.15rem 1.1rem; }
  .w-approach-grid .w-card-icon { grid-row: span 2; width: 48px; height: 48px; margin: 0; border-radius: 16px; }
  .w-approach-grid .w-card-icon svg, .w-approach-grid .w-card-icon img { width: 34px; height: 34px; }
  .w-aac-grid .w-aac-n { grid-row: span 2; margin: .1rem 0 0; }
  .w-approach-grid h3, .w-aac-grid h3 { font-size: 1.25rem; margin-bottom: .2rem; }
}
@media (max-width: 599px) {
  .w-toy { grid-template-columns: 1fr; text-align: center; }
  .w-toy-pals { width: 130px; margin: 0 auto; }
  .w-letter::before, .w-letter::after { width: 70px; }
}
@media (prefers-reduced-motion: no-preference) {
  .w-letter-bug { animation: w-bob 3s ease-in-out infinite; }
  .w-toy-frog { transform-origin: 50% 100%; animation: w-puppet 4.5s ease-in-out infinite; }
  .w-toy-balloon { animation: w-bob 3.6s ease-in-out infinite; }
  @keyframes w-puppet { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-5deg) translateY(-4px); } 30% { transform: rotate(3deg); } 40% { transform: rotate(0); } }
}

/* ==========================================================================
   Inner pages share the world (late September 2026). Taylor asked for the
   homepage's style everywhere, with short lines and the detail behind taps.
   ========================================================================== */
body.world-page .crumbs { position: relative; z-index: 2; background: transparent; color: hsl(45, 55%, 88%); }
body.world-page .crumbs a:hover { color: var(--gold); }
.js .w-js-only { display: inline; }
.w-js-only { display: none; }
.w-page-hero { min-height: min(84svh, 760px); }
.w-page-hero .w-hero-title { font-size: clamp(2.4rem, 1.5rem + 3.4vw, 4.3rem); }

/* Three arched portraits in the hero: the team. */
.w-trio { position: relative; width: min(100%, 460px); aspect-ratio: 1 / 1.02; }
.w-trio-arch { position: absolute; margin: 0; overflow: hidden; border-radius: 999px 999px 26px 26px; border: 3px solid hsla(45, 90%, 75%, .6); box-shadow: 0 0 0 8px hsla(45, 90%, 75%, .07), 0 0 60px hsla(45, 100%, 60%, .2), 0 24px 50px hsla(230, 50%, 8%, .45); background: #2b3160; }
.w-trio-arch img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.w-trio-arch--main { left: 26%; top: 0; width: 48%; height: 74%; z-index: 2; }
.w-trio-arch--left { left: 0; top: 30%; width: 34%; height: 52%; transform: rotate(-5deg); }
.w-trio-arch--right { right: 0; top: 36%; width: 34%; height: 52%; transform: rotate(5deg); }
.w-trio-fly { position: absolute; z-index: 3; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle, #fff6cf, var(--gold) 60%); box-shadow: 0 0 16px 6px hsla(45, 100%, 60%, .6); }
.w-trio-fly--a { left: 18%; top: 14%; }
.w-trio-fly--b { right: 14%; top: 22%; width: 9px; height: 9px; }
.w-trio-fly--c { left: 50%; bottom: 6%; width: 10px; height: 10px; }

/* Cards that flip over on tap. Without JS both sides simply show. */
.w-flips { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.w-flip { position: relative; margin: 0; }
.w-flip-inner { display: grid; gap: .5rem; }
.w-flip-face { border-radius: var(--radius-card); padding: 1.5rem 1.3rem; }
.w-flip-front { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: hsla(215, 45%, 14%, .5); border: 1.5px solid hsla(45, 80%, 85%, .18); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.w-flip-front h3 { margin: .9rem 0 0; font-size: 1.3rem; line-height: 1.2; }
.w-flip-icon { display: grid; place-items: center; width: 76px; height: 76px; border-radius: var(--radius-inner); background: color-mix(in srgb, var(--tone) 40%, var(--card)); box-shadow: 0 0 0 6px color-mix(in srgb, var(--tone) 25%, transparent); }
.w-flip-icon svg, .w-flip-icon img { width: 54px; height: 54px; }
.w-flip-hint { display: none; margin-top: .5rem; font-size: 1.3rem; color: var(--gold); }
.w-flip-back { display: grid; place-items: center; text-align: center; background: color-mix(in srgb, var(--tone) 55%, var(--card)); color: var(--navy); }
.w-flip-back p { margin: 0; font: 500 1.08rem/1.5 var(--font-display); }
.w-flip-btn { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; padding: 0; border: 0; border-radius: var(--radius-card); background: transparent; cursor: pointer; }
.w-flip-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.w-flips.is-live .w-flip { perspective: 1100px; }
/* Both faces share one grid cell, so a card is always as tall as its longer
   side (no text spills out on small phones or with large text). */
.w-flips.is-live .w-flip-inner { position: relative; display: grid; gap: 0; height: 100%; min-height: 240px; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.34, 1.3, .64, 1); }
.w-flips.is-live .w-flip-face { grid-area: 1 / 1; min-width: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.w-flips.is-live .w-flip-back { transform: rotateY(180deg); }
.w-flips.is-live .w-flip-hint { display: block; }
.w-flips.is-live .w-flip.is-flipped .w-flip-inner { transform: rotateY(180deg); }
@media (hover: hover) { .w-flips.is-live .w-flip:hover .w-flip-front { border-color: var(--tone); box-shadow: 0 0 40px color-mix(in srgb, var(--tone) 30%, transparent); } }

/* What child-led looks like: three little scenes. */
.w-childled { margin-top: clamp(3rem, 7vw, 5rem); }
.w-childled .section-head { margin-bottom: 1.5rem; }
.w-childled-kicker { margin: 0 0 .3rem; font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.5rem); }
.w-childled-stretch { max-width: 36rem; margin: .8rem auto 0; text-align: center; font-size: 1.15rem; color: hsl(45, 60%, 90%); }
.w-vignettes { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.w-vignette { margin: 0; display: grid; grid-template-columns: 84px 1fr; gap: 1rem; align-items: center; padding: 1.1rem 1.2rem; border-radius: var(--radius-card); background: var(--card); color: var(--navy); box-shadow: 0 16px 40px hsla(220, 60%, 4%, .35); transform: rotate(var(--r, 0deg)); }
.w-vignette:nth-child(1) { --r: -1.2deg; }
.w-vignette:nth-child(2) { --r: .8deg; }
.w-vignette:nth-child(3) { --r: -.6deg; }
.w-vignette-art { display: grid; place-items: center; width: 84px; height: 84px; border-radius: var(--radius-inner); background: color-mix(in srgb, var(--tone) 35%, var(--card)); }
.w-vignette-art svg, .w-vignette-art img { width: 64px; height: 64px; }
/* Farm animal toys lined up side by side. */
.w-vignette-art--row { display: flex; align-items: flex-end; justify-content: center; gap: 1px; padding-bottom: 14%; }
.w-vignette-art--row img { width: 30%; height: auto; }
.w-vignette p { margin: 0; font-size: 1.05rem; }
.w-vignette strong { font-family: var(--font-display); font-weight: 600; }
.w-bigline { margin: clamp(1.75rem, 4vw, 2.5rem) 0 0; text-align: center; }
.w-bigline .hand, .w-quote-line .hand { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.6rem); line-height: 1.15; color: var(--gold); text-shadow: 0 0 24px hsla(45, 100%, 60%, .35); }

/* The whole child: lights around your child (tabs, driven by [data-picker]). */
.w-orbit { display: grid; gap: 1.5rem; justify-items: center; }
.w-orbit-stage { position: relative; width: min(100%, 420px); aspect-ratio: 1; margin: 1.75rem 0 .75rem; }
.w-orbit-stage::before { content: ""; position: absolute; inset: 15%; border-radius: 50%; border: 2px dotted hsla(45, 80%, 85%, .35); }
.w-orbit-center { position: absolute; left: 50%; top: 50%; width: 34%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, hsla(45, 100%, 80%, .35), hsla(45, 100%, 60%, .08) 70%); }
.w-orbit-center .hand { position: relative; font-size: clamp(1.25rem, 1rem + .8vw, 1.6rem); white-space: nowrap; color: hsl(45, 90%, 88%); }
.w-orbit-glow { position: absolute; width: 22px; height: 22px; top: 18%; border-radius: 50%; background: radial-gradient(circle, #fff6cf, var(--gold) 60%); box-shadow: 0 0 26px 10px hsla(45, 100%, 60%, .55); }
.w-orbit-ring[hidden] { display: none; }
.w-orbit-tab {
  --ang: calc(var(--n) * 72deg - 90deg);
  position: absolute; left: 50%; top: 50%; width: 30%; margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: .3rem; color: hsl(45, 70%, 92%); font: 600 .98rem/1.15 var(--font-display); text-align: center;
  /* 116.667% of the tab (30% of the stage) = 35% of the stage: exactly the dotted ring's radius at any size. */
  transform: translate(-50%, -50%) rotate(var(--ang)) translate(116.667%) rotate(calc(-1 * var(--ang)));
}
.w-orbit-icon { display: grid; place-items: center; width: clamp(58px, 16vw, 74px); aspect-ratio: 1; border-radius: 50%; background: color-mix(in srgb, var(--tone) 35%, var(--card)); box-shadow: 0 0 0 4px hsla(45, 80%, 85%, .15); transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s; }
.w-orbit-icon svg, .w-orbit-icon img { width: 62%; height: 62%; }
@media (hover: hover) { .w-orbit-tab:hover .w-orbit-icon { transform: scale(1.08); } }
.w-orbit-tab[aria-selected="true"] .w-orbit-icon { transform: scale(1.1); box-shadow: 0 0 0 4px var(--tone), 0 0 24px 4px color-mix(in srgb, var(--tone) 55%, transparent); }
/* Each light sits on the ring with its label hanging just below it, on a
   small dark pill so the dotted ring never runs through the words. */
/* Sits clear of the selected light's ring and glow, and paints above them. */
.w-orbit-label { position: absolute; z-index: 1; top: calc(100% + 1.25rem); left: 50%; transform: translateX(-50%); width: max-content; max-width: min(9rem, 30cqw); text-wrap: balance; padding: .12rem .55rem; border-radius: 999px; background: hsla(188, 45%, 9%, .82); }
.w-orbit-tab[aria-selected="true"] .w-orbit-label { color: var(--gold); }
/* The top light's label goes above it, so it never sits on the "your child" glow in the middle. */
.w-orbit-tab:first-child .w-orbit-label { top: auto; bottom: calc(100% + 1.1rem); }
.w-orbit-tab:focus-visible { outline: none; }
.w-orbit-tab:focus-visible .w-orbit-icon { outline: 3px solid var(--gold); outline-offset: 4px; }
.w-orbit-panels { width: 100%; max-width: 560px; display: grid; gap: 1rem; }
.w-orbit-panel { padding: 1.4rem 1.5rem; border-radius: var(--radius-card); background: var(--card); color: var(--navy); border-top: 8px solid var(--tone); box-shadow: 0 20px 50px hsla(220, 60%, 4%, .4); }
.w-night .w-orbit-panel h3 { color: var(--navy); font-size: 1.4rem; margin-bottom: .3rem; }
.w-orbit-panel p { margin: 0; font-size: 1.08rem; }
.w-orbit-panel .w-orbit-comm { margin-top: .9rem; padding: .8rem 1rem; border-radius: 16px; background: color-mix(in srgb, var(--tone) 20%, #fffdf7); font-size: 1rem; line-height: 1.55; }
.w-orbit-comm-label { display: flex; align-items: center; gap: .4rem; margin-bottom: .25rem; font: 700 .82rem/1.2 var(--font-display); letter-spacing: .04em; text-transform: uppercase; color: var(--navy); }
.w-orbit-comm-label img { width: 20px; height: 20px; }
.w-orbit.is-live .w-orbit-panels { display: grid; }
.w-orbit.is-live .w-orbit-panel { grid-area: 1 / 1; }
.w-orbit.is-live .w-orbit-panel[hidden] { display: block; visibility: hidden; }
.w-orbit:not(.is-live) .w-orbit-stage { display: none; }
@media (min-width: 960px) {
  .w-orbit.is-live { grid-template-columns: 1fr 1fr; align-items: center; gap: 3rem; }
  .w-orbit.is-live .w-orbit-stage { justify-self: end; }
  .w-orbit.is-live .w-orbit-panels { justify-self: start; }
}
@media (prefers-reduced-motion: no-preference) {
  .w-orbit-panel.is-fresh { animation: picker-in .45s var(--ease); }
  .w-orbit-glow { animation: w-pulse 2.6s ease-in-out infinite; }
  .w-orbit-stage::before { animation: w-spin 60s linear infinite; }
  @keyframes w-spin { to { transform: rotate(360deg); } }
  .w-trio-fly { animation: w-bob 3.2s ease-in-out infinite; }
  .w-trio-fly--b { animation-delay: -1.1s; }
  .w-trio-fly--c { animation-delay: -2s; }
  .w-flips.is-live .w-flip:not(.is-flipped):hover .w-flip-icon img { animation: picker-pop .6s cubic-bezier(.34, 1.56, .64, 1); }
}
.w-quote-line { margin: clamp(2.5rem, 6vw, 4rem) auto 0; max-width: 820px; text-align: center; }
.w-neighbor-note { max-width: 760px; margin: clamp(2rem, 5vw, 3rem) auto 0; padding: 1.5rem 1.6rem; border-radius: var(--radius-card); color: hsl(45, 60%, 94%); background: hsla(215, 45%, 14%, .94); border: 1.5px dashed hsla(45, 100%, 70%, .55); box-shadow: 0 18px 44px hsla(220, 60%, 4%, .3); }
.w-neighbor-note h3 { margin-bottom: .4rem; color: #fff6dc; }
.w-neighbor-note p:not(.eyebrow) { margin-bottom: 1rem; }

/* Team cards on inner pages: the full bio opens on tap. */
.w-person-role { margin-bottom: .2rem; font-size: 1.35rem; }
.w-day .w-person-role { color: var(--gold-ink); }
.w-person--small { max-width: 820px; justify-self: center; width: 100%; }
.w-trained-label { margin: 0 0 .4rem; font-weight: 800; }
/* About: Dr. Taylor's training as two tidy rows instead of a pile of chips. */
.w-trained-list { margin: .2rem 0 1.1rem; padding: .3rem 1.1rem; border-radius: 18px; background: hsla(45, 80%, 92%, .7); border: 1px solid hsla(200, 47%, 24%, .1); }
.w-trained-list > div { display: grid; gap: .15rem; padding: .7rem 0; }
.w-trained-list > div + div { border-top: 1.5px dashed hsla(200, 47%, 24%, .18); }
.w-trained-list dt { display: flex; align-items: center; gap: .45rem; font-weight: 800; font-size: .95rem; color: var(--navy); }
.w-trained-list dt img { width: 22px; height: 22px; }
.w-trained-list dd { margin: 0 0 0 calc(22px + .45rem); font-size: .98rem; line-height: 1.55; }
.w-bio { margin-top: 1.1rem; }
.w-bio summary {
  display: inline-flex; align-items: center; gap: .5rem; max-width: 100%; min-height: 48px; padding: .6rem 1.2rem; border-radius: var(--radius-pill); cursor: pointer; list-style: none;
  border: 2px solid var(--navy); color: var(--navy); font: 600 1rem/1.2 var(--font-display); background: hsla(45, 100%, 70%, .25);
}
.w-bio summary::-webkit-details-marker { display: none; }
.w-bio summary::after { content: ""; width: 9px; height: 9px; border: solid currentColor; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) translate(-2px, -2px); transition: transform .25s; }
.w-bio[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.w-bio summary:hover { background: var(--navy); color: var(--cream); }
.w-bio-body { margin-top: 1rem; padding: 1.2rem 1.3rem; border-radius: var(--radius-inner); background: hsla(45, 100%, 70%, .14); }
.w-bio-body p:last-child { margin-bottom: 0; }

/* Come say hi */
.w-visit { display: grid; gap: 1.5rem 2.5rem; align-items: center; padding: clamp(1.5rem, 3.5vw, 2.5rem); border-radius: var(--radius-panel); background: hsla(45, 100%, 98%, .85); box-shadow: 0 18px 50px hsla(25, 50%, 40%, .14); }
.w-visit-pin { width: 72px; }
.w-visit-pin svg { width: 100%; height: auto; filter: drop-shadow(0 8px 12px hsla(40, 80%, 40%, .3)); }
.w-visit-copy h2 { margin-bottom: .4rem; }
.w-visit-address { font: 600 1.25rem/1.4 var(--font-display); margin-bottom: .6rem; }
.w-tags--day { color: var(--navy); margin: 0 0 1.25rem; text-shadow: none; }
.w-visit-photo { max-width: 420px; justify-self: center; }
@media (min-width: 700px) {
  .w-flips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w-vignettes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .w-vignette { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 1.5rem 1.3rem; }
  .w-vignette-art { width: 110px; height: 110px; }
  .w-vignette-art svg, .w-vignette-art img { width: 82px; height: 82px; }
  .w-vignette-art--row img { width: 30%; height: auto; }
}
@media (min-width: 960px) {
  .w-flips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .w-flips.is-live .w-flip-inner { min-height: 280px; }
  .w-visit { grid-template-columns: auto 1fr minmax(260px, 38%); }
}
@media (max-width: 959px) {
  .w-trio { width: min(100%, 380px); margin-inline: auto; }
}
/* Phones: flip cards lie on their side (icon left, title right) so four of them stay short. */
@media (max-width: 699px) {
  .w-flips.is-live .w-flip-inner { min-height: 160px; }
  .w-flip-front { display: grid; grid-template-columns: auto 1fr; align-content: center; column-gap: 1.1rem; text-align: left; }
  .w-flip-front h3 { margin: 0; align-self: end; }
  .w-flip-hint { margin-top: .2rem; grid-column: 2; align-self: start; }
  .w-flip-icon { grid-row: span 2; width: 68px; height: 68px; }
  .w-flip-icon svg, .w-flip-icon img { width: 48px; height: 48px; }
  .w-flip-back { padding: 1.2rem 1.3rem; }
  .w-flip-back p { font-size: 1.02rem; }
}
@media (prefers-reduced-motion: reduce) {
  .w-flips.is-live .w-flip-inner { transition: none; }
}

/* ==========================================================================
   Rates & insurance: the essentials on one pinned card, each way to pay
   one tap away, and the fine print one more tap after that.
   ========================================================================== */
.w-glance {
  position: relative; padding: clamp(1.6rem, 3.5vw, 2.2rem) clamp(1.3rem, 3vw, 1.9rem) 1.3rem; border-radius: var(--radius-card); background: var(--card); color: var(--navy); transform: rotate(1.2deg);
  box-shadow: 0 0 0 8px hsla(45, 100%, 70%, .14), 0 0 80px hsla(45, 100%, 60%, .2), 0 28px 60px hsla(230, 50%, 8%, .45);
}
.w-glance::before { content: ""; position: absolute; top: -12px; left: 14%; width: 84px; height: 24px; border-radius: 2px; background: hsla(170, 45%, 60%, .75); transform: rotate(-5deg); }
.w-glance-title { margin: 0 0 .6rem; font-size: 2rem; line-height: 1; color: var(--gold-ink); }
.w-glance-list { list-style: none; margin: 0; padding: 0; display: grid; }
.w-glance-list li { margin: 0; border-top: 1.5px dashed hsla(200, 47%, 24%, .18); }
.w-glance-list li:first-child { border-top: 0; }
.w-glance-list a, .w-glance-list span {
  position: relative; display: flex; align-items: center; gap: .75rem; min-height: 48px; padding: .45rem .5rem .45rem 0;
  font: 600 1.12rem/1.25 var(--font-display); color: var(--navy); text-decoration: none;
}
.w-glance-list a::before, .w-glance-list span::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px 3px hsla(45, 100%, 55%, .55); }
.w-glance-list a::after { content: ""; flex: none; width: 9px; height: 9px; margin-left: auto; border: solid currentColor; border-width: 2.5px 2.5px 0 0; transform: rotate(45deg); opacity: .55; transition: transform .25s var(--ease), opacity .25s; }
.w-glance-list a:hover { color: #9a5f10; }
.w-glance-list a:hover::after { opacity: 1; transform: translateX(3px) rotate(45deg); }
.w-glance-list a:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 10px; }
.w-glance-note { margin: .7rem 0 0; font: 600 1.3rem/1.1 var(--font-hand); color: var(--gold-ink); }

.w-pay-hint { display: block; margin-top: .15rem; font: 700 1.2rem/1.05 var(--font-hand); color: var(--gold); }
.picker-tab[aria-selected="true"] .w-pay-hint { color: var(--gold-ink); }
.w-pay, .w-pay .picker-panel { scroll-margin-top: .25rem; }
@media (min-width: 901px) { .w-pay, .w-pay .picker-panel { scroll-margin-top: calc(var(--header-h) + 1.25rem); } }
.w-pay-panel > p { font-size: 1.06rem; }
.w-pay-panel > * + * { margin-top: 1rem; }
.w-pay-panel h4 { margin: 0 0 .3rem; font: 600 1.15rem/1.25 var(--font-display); color: var(--navy); }

.w-yesno { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .55rem; }
.w-yesno li { position: relative; margin: 0; padding: .6rem .9rem .6rem 2.9rem; border-radius: 14px; color: var(--navy); font: 600 1.08rem/1.35 var(--font-display); }
.w-yesno li::before { position: absolute; left: .7rem; top: 50%; width: 1.6rem; height: 1.6rem; margin-top: -.8rem; border-radius: 50%; display: grid; place-items: center; font: 800 .95rem/1 var(--font-body); }
.w-yesno .is-yes { background: hsl(160, 42%, 91%); }
.w-yesno .is-yes::before { content: "\2713"; background: hsl(162, 45%, 42%); color: #fff; }
.w-yesno .is-no { background: hsl(10, 75%, 94%); }
.w-yesno .is-no::before { content: "\2715"; background: hsl(8, 55%, 55%); color: #fff; }

.w-prices { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.w-prices li { margin: 0; display: grid; justify-items: center; align-content: center; gap: .15rem; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #fff6d6, color-mix(in srgb, var(--tone) 45%, var(--card))); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tone) 35%, transparent), 0 10px 24px hsla(40, 70%, 40%, .18); text-align: center; }
.w-price { font: 700 clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem)/1 var(--font-display); color: var(--navy); }
.w-price-len { font-size: .95rem; font-weight: 700; }
.w-prices li:nth-child(2) { transform: translateY(-8px); }

.w-two-steps { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .75rem; }
.w-two-steps li { margin: 0; display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; align-items: center; padding: .9rem 1.1rem; border-radius: var(--radius-inner); background: color-mix(in srgb, var(--tone) 22%, var(--card)); }
.w-two-steps .w-price { grid-row: span 2; display: grid; place-items: center; width: 4.6rem; height: 4.6rem; border-radius: 50%; background: var(--card); font-size: 1.35rem; box-shadow: 0 0 0 3px var(--tone); }
.w-two-steps strong { font: 600 1.08rem/1.25 var(--font-display); }
.w-two-steps li > span:last-child { font-size: .98rem; }

.w-pay-duo { display: grid; gap: .8rem; }
.w-pay-duo article { padding: 1rem 1.15rem; border-radius: var(--radius-inner); background: color-mix(in srgb, var(--tone) 22%, var(--card)); }
.w-pay-duo p { margin: 0; font-size: 1.02rem; }

/* The fine print: quiet rows that open on tap. */
.w-fine { border-top: 1.5px dashed hsla(200, 47%, 24%, .2); }
.w-fine-item { border-bottom: 1.5px dashed hsla(200, 47%, 24%, .2); }
.w-fine-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 52px; padding: .55rem .2rem; cursor: pointer; list-style: none; overflow-wrap: anywhere;
  font: 600 1.06rem/1.25 var(--font-display); color: var(--navy);
}
.w-fine-item summary::-webkit-details-marker { display: none; }
.w-fine-item summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--tone) 45%, var(--card)); font: 700 1.3rem/1 var(--font-body); transition: transform .25s var(--ease); }
.w-fine-item[open] summary::after { transform: rotate(45deg); }
.w-fine-item summary:hover { color: #9a5f10; }
.w-fine-item summary:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; border-radius: 10px; }
.w-fine-body { padding: 0 .2rem 1rem; font-size: 1rem; line-height: 1.6; }
.w-fine-body h4 { margin-top: 1rem; font-size: 1.05rem; }
.w-fine-body p:last-child { margin-bottom: 0; }
.w-fine-steps, .w-fine-links { margin: .6rem 0 .9rem; padding-left: 1.3rem; }
.w-fine-steps li, .w-fine-links li { margin: .4rem 0; }

/* Questions go straight to Dr. Taylor. */
.w-ask { display: grid; gap: 1.5rem 2.5rem; align-items: center; max-width: 900px; margin: 0 auto; padding: clamp(1.4rem, 3.5vw, 2.4rem); border-radius: var(--radius-panel); background: hsla(45, 100%, 98%, .9); box-shadow: 0 18px 50px hsla(25, 50%, 40%, .14); }
.w-ask-photo { width: min(62%, 220px); margin: 0 auto; overflow: hidden; border-radius: 999px 999px 26px 26px; border: 3px solid hsla(45, 90%, 60%, .7); box-shadow: 0 0 0 8px hsla(45, 100%, 70%, .18); }
.w-ask-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 18%; }
.w-ask-copy h2 { margin-bottom: .5rem; }
.w-ask-copy p:not(.eyebrow):not(.actions) { font-size: 1.1rem; }
.w-ask .actions { gap: .75rem; }
@media (min-width: 700px) {
  .w-ask { grid-template-columns: 220px 1fr; }
  .w-ask-photo { width: 100%; }
  .w-pay-duo { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 959px) {
  .w-pay .picker-tab:last-child { grid-column: 1 / -1; }
  .w-glance { transform: rotate(.6deg); }
}
@media (max-width: 599px) {
  .w-pay .picker-tab:last-child { flex-direction: row; min-height: 78px; text-align: left; }
  .w-prices { gap: .5rem; }
  .w-price-len { font-size: .85rem; }
}

/* ==========================================================================
   Services: an arched window in the hero, lanterns for how it helps, flip
   cards for what to expect, and a polaroid beside our approach.
   ========================================================================== */
.w-svc-visual { width: min(100%, 360px); }
.w-svc-visual .w-arch > .ph { width: 100%; margin: 0; border-radius: 0; }
.w-svc-badge { position: absolute; z-index: 3; left: -6%; bottom: 8%; display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; background: var(--card); box-shadow: 0 0 0 6px hsla(45, 100%, 70%, .25), 0 0 40px hsla(45, 100%, 60%, .35), 0 14px 30px hsla(230, 50%, 8%, .4); transform: rotate(-6deg); }
.w-svc-badge svg, .w-svc-badge img { width: 60px; height: 60px; }
/* Until the photoshoot, inner-page heroes show the page's icon in a glowing
   glass lantern instead of an empty photo frame. */
.w-svc-orb {
  position: relative; display: grid; place-items: center; width: 78%; margin: 0 auto; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, hsla(45, 100%, 78%, .42), hsla(45, 100%, 70%, .12) 55%, hsla(250, 45%, 30%, .25));
  border: 3px solid hsla(45, 90%, 75%, .55);
  box-shadow: 0 0 0 14px hsla(45, 90%, 75%, .07), 0 0 80px 10px hsla(45, 100%, 60%, .22), inset 0 0 40px hsla(45, 100%, 80%, .18);
}
.w-svc-orb img { width: 54%; height: auto; filter: drop-shadow(0 12px 16px hsla(240, 50%, 10%, .35)); }
@media (prefers-reduced-motion: no-preference) {
  .w-svc-orb img { animation: w-orb-float 5s ease-in-out infinite; }
  @keyframes w-orb-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } }
}

.w-lanterns.w-ways { gap: 1rem; }
.w-ways .w-lantern { padding: 2rem 1.2rem 1.4rem; }
.w-ways .w-lantern p { font: 600 1.12rem/1.35 var(--font-display); color: hsl(45, 70%, 94%); }
@media (min-width: 600px) { .w-lanterns.w-ways { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .w-lanterns.w-ways { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.w-svc-extra { margin-top: clamp(2rem, 5vw, 3rem); text-align: center; }
.w-svc-extra .w-trained-label { color: hsl(45, 70%, 92%); }
.w-aac-price { margin: clamp(1.5rem, 3vw, 2rem) 0 0; text-align: center; font-size: 1.15rem; color: hsl(45, 70%, 92%); }
.w-aac-price strong { color: var(--gold); font-size: 1.3em; }
.w-aac-price + .actions { margin-top: .9rem; }
.w-svc-extra .actions { justify-content: center; margin-top: 1.25rem; }

.w-flips--expect .w-flip-front h3 { font-size: 1.25rem; }
.w-flips--expect .w-flip-back p { font-size: 1.02rem; line-height: 1.45; }
@media (min-width: 960px) { .w-flips--expect.is-live .w-flip-inner { min-height: 300px; } }

.w-svc-approach { display: grid; gap: 1.75rem 3rem; align-items: center; padding: clamp(1.5rem, 3.5vw, 2.6rem); border-radius: var(--radius-panel); background: hsla(45, 100%, 98%, .9); box-shadow: 0 18px 50px hsla(25, 50%, 40%, .14); }
.w-svc-approach-copy h2 { margin-bottom: .6rem; }
.w-svc-approach-copy > p:not(.eyebrow):not(.actions) { font-size: 1.1rem; }
.w-svc-approach .w-tags--day { flex-direction: row; flex-wrap: wrap; gap: .4rem 1.2rem; margin: .5rem 0 1rem; }
.w-svc-small { font-size: 1rem !important; color: #4a5a6a; }
.w-svc-photo { width: min(100%, 420px); justify-self: center; }
.w-svc-note { max-width: 760px; margin: clamp(1.5rem, 4vw, 2.5rem) auto 0; padding: 1.4rem 1.6rem; border-radius: var(--radius-card); background: hsla(45, 100%, 98%, .9); border: 1.5px dashed hsla(40, 70%, 45%, .45); }
.w-svc-note h3 { margin-bottom: .35rem; }
.w-svc-note .actions { margin: 1rem 0 0; }
@media (min-width: 900px) { .w-svc-approach { grid-template-columns: 1fr minmax(280px, 40%); } .w-svc-approach--solo { grid-template-columns: 1fr; } }
.w-svc-approach--solo .w-svc-approach-copy { max-width: 760px; }

/* Services: one card per service. The whole card is the link. */
.w-svc-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.w-svc-grid > li { margin: 0; }
.w-svc-card {
  height: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; padding: 1.5rem 1.4rem 1.4rem; border-radius: var(--radius-card); text-decoration: none;
  background: var(--card); color: var(--navy); border-top: 8px solid var(--tone); box-shadow: 0 20px 50px hsla(220, 60%, 4%, .4);
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s;
}
@media (hover: hover) { .w-svc-card:hover { transform: translateY(-4px); box-shadow: 0 0 0 5px color-mix(in srgb, var(--tone) 40%, transparent), 0 24px 56px hsla(220, 60%, 4%, .45); } }
.w-svc-card:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.w-svc-icon { display: grid; place-items: center; width: 72px; height: 72px; border-radius: var(--radius-inner); background: color-mix(in srgb, var(--tone) 38%, var(--card)); }
.w-svc-icon svg, .w-svc-icon img { width: 52px; height: 52px; }
.w-svc-card-body { display: grid; gap: .35rem; }
.w-svc-card-title { font: 600 1.35rem/1.2 var(--font-display); }
.w-svc-card-desc { font-size: 1.02rem; line-height: 1.5; }
.w-svc-more { margin-top: auto; display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1.1rem; border-radius: var(--radius-pill); border: 2px solid var(--navy); font: 600 .98rem/1.2 var(--font-display); }
.w-svc-more::after { content: ""; width: 8px; height: 8px; border: solid currentColor; border-width: 2.5px 2.5px 0 0; transform: rotate(45deg); }
@media (hover: hover) { .w-svc-card:hover .w-svc-more { background: var(--navy); color: var(--cream); } }
.w-svc-beyond { margin: clamp(2.5rem, 6vw, 4rem) auto 1.25rem; }
.w-svc-beyond h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin-bottom: .4rem; }
.w-svc-card--small { flex-direction: row; flex-wrap: wrap; align-items: center; padding: 1.1rem 1.2rem; }
.w-svc-card--small .w-svc-icon { width: 60px; height: 60px; border-radius: 18px; }
.w-svc-card--small .w-svc-icon svg, .w-svc-card--small .w-svc-icon img { width: 44px; height: 44px; }
.w-svc-card--small .w-svc-card-body { flex: 1; min-width: min(12rem, 100%); }
.w-svc-card--small .w-svc-card-title { font-size: 1.15rem; }
.w-svc-card--small .w-svc-more { display: none; }
.w-steps-wrap > .eyebrow { margin-bottom: .2rem; }
@media (min-width: 760px) { .w-svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 959px) {
  .w-svc-visual { width: min(78%, 320px); }
  .w-svc-badge { width: 76px; height: 76px; left: -8%; }
  .w-svc-badge svg, .w-svc-badge img { width: 50px; height: 50px; }
}
/* Links on cream cards inside the night chapters keep the card's ink. */
.w-night a.w-svc-card:not(.btn):not(.text-link), .w-night a.w-svc-card:not(.btn):not(.text-link):hover { color: var(--navy); }
.w-night .picker-panel a:not(.btn):not(.text-link) { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.w-night .picker-panel a:not(.btn):not(.text-link):hover { color: #9a5f10; }
/* Phones: the "how it helps" lanterns lie on their side so four stay short. */
@media (max-width: 599px) {
  .w-ways .w-lantern { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; border-radius: var(--radius-card); text-align: left; }
  .w-ways .w-lantern-glow { flex: none; width: 34px; height: 34px; margin: 0; }
}

/* ==========================================================================
   Start here and Contact
   ========================================================================== */
.w-meaning { max-width: 760px; margin: clamp(2rem, 5vw, 3rem) auto 0; padding: 1.4rem 1.6rem; border-radius: var(--radius-card); background: hsla(215, 45%, 14%, .55); border: 1px solid hsla(45, 80%, 85%, .18); text-align: center; }
@media (max-width: 699px) { .w-meaning { text-align: left; } }
.w-meaning h3 { margin-bottom: .4rem; }
.w-meaning p { margin: 0; font-size: 1.08rem; }
.w-familiar .picker-tab { font-size: 1.02rem; }
.w-familiar-more { margin: 1.75rem 0 0; text-align: center; }
.w-steps--detail li { align-items: start; }
.w-steps--detail li > span:last-child { display: grid; gap: .3rem; }
.w-steps--detail strong { font-weight: 600; }
.w-steps--detail li > span:last-child > span { font: 400 1rem/1.5 var(--font-body); }
.w-disclaimer { max-width: 760px; margin: 1.5rem auto 0; font-size: .9rem; line-height: 1.55; color: var(--navy); text-align: center; }

/* Contact: the quickest ways to reach Dr. Taylor, on a pinned card. */
.w-reach {
  position: relative; padding: clamp(1.6rem, 3.5vw, 2.1rem) clamp(1.2rem, 3vw, 1.7rem) 1.2rem; border-radius: var(--radius-card); background: var(--card); color: var(--navy); transform: rotate(-1deg);
  box-shadow: 0 0 0 8px hsla(45, 100%, 70%, .14), 0 0 80px hsla(45, 100%, 60%, .2), 0 28px 60px hsla(230, 50%, 8%, .45);
}
.w-reach::before { content: ""; position: absolute; top: -12px; right: 16%; width: 84px; height: 24px; border-radius: 2px; background: hsla(45, 95%, 65%, .8); transform: rotate(4deg); }
.w-reach-title { margin: 0 0 .7rem; font-size: 2rem; line-height: 1; color: var(--gold-ink); }
.w-reach-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.w-reach-list li { margin: 0; }
.w-reach-list a, .w-reach-copy { display: flex; align-items: center; gap: .9rem; min-height: 64px; padding: .55rem .8rem; border-radius: 20px; background: color-mix(in srgb, var(--tone) 22%, var(--card)); color: var(--navy); text-decoration: none; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s; }
@media (hover: hover) { .w-reach-list a:hover, .w-reach-copy:hover { transform: translateY(-2px); box-shadow: 0 0 0 3px var(--tone); } }
.w-reach-list a:focus-visible, .w-reach-copy:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
/* Fax is a button that copies the number, styled like the links above it. */
.w-reach-copy { width: 100%; border: 0; font: inherit; text-align: left; cursor: pointer; }
.w-reach-icon { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; background: var(--card); }
.w-reach-icon svg { width: 36px; height: 36px; }
.w-reach-list a > span:last-child, .w-reach-copy > span:nth-child(2) { display: grid; min-width: 0; }
.w-reach-list strong { font: 600 1.15rem/1.2 var(--font-display); }
.w-reach-list a > span:last-child > span, .w-reach-copy > span:nth-child(2) > span { font-size: .98rem; overflow-wrap: anywhere; }
.w-reach-note { margin: .9rem 0 0; font-size: .98rem; line-height: 1.5; }

.w-form-card { max-width: 760px; margin: 0 auto; }
.w-form-card .form { background: var(--card); color: var(--navy); border-radius: var(--radius-card); border-top: 8px solid var(--gold); box-shadow: 0 20px 60px hsla(220, 60%, 4%, .45); }
.w-night .w-form-card :is(p, label, legend, .hint, .note) { color: var(--navy); text-shadow: none; }
.w-night .w-form-card a:not(.btn):not(.text-link) { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.w-night .w-form-card .form-field-error, .w-night .w-form-card .form-status.err { color: #8c2929; }
.w-night .w-form-card .form-status.ok { color: #24503a; }

.w-visit-map iframe { display: block; width: 100%; height: 320px; border: 0; border-radius: var(--radius-inner); box-shadow: 0 12px 30px hsla(25, 50%, 40%, .18); }
@media (min-width: 960px) { .w-visit--map { grid-template-columns: auto 1fr minmax(300px, 44%); } }
@media (max-width: 959px) { .w-visit-map iframe { height: 260px; } }
@media (max-width: 959px) {
  .w-hero-visual:has(> .w-reach), .w-hero-visual:has(> .w-glance) { width: min(100%, 440px); }
}

/* ==========================================================================
   What we help with: a parent's words in the hero, lanterns for what you
   may be noticing, three steps that flip, and the long read behind a tap.
   ========================================================================== */
.w-concern-hero .w-hero-title { font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.5rem); line-height: 1.08; }
.w-flip-num { font: 700 2.4rem/1 var(--font-display); color: var(--navy); }
@media (min-width: 960px) {
  .w-flips--steps { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1040px; margin-inline: auto; }
  .w-flips--steps.is-live .w-flip-inner { min-height: 260px; }
}
.w-longer { max-width: 860px; margin: clamp(1.75rem, 4vw, 2.5rem) auto 0; border-radius: var(--radius-card); background: hsla(45, 100%, 98%, .92); box-shadow: 0 14px 40px hsla(25, 50%, 40%, .12); }
.w-longer summary { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem 1rem; min-height: 64px; padding: 1.1rem calc(min(1.2rem, 20px) + 48px) 1.1rem min(1.5rem, 24px); overflow-wrap: anywhere; position: relative; cursor: pointer; list-style: none; }
.w-longer summary::-webkit-details-marker { display: none; }
.w-longer summary::after { content: "+"; position: absolute; right: min(1.2rem, 20px); top: 50%; margin-top: -18px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: hsla(45, 100%, 65%, .45); font: 700 1.4rem/1 var(--font-body); transition: transform .25s var(--ease); }
.w-longer[open] summary::after { transform: rotate(45deg); }
.w-longer summary:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; border-radius: var(--radius-card); }
.w-longer-kicker { font-size: 1.4rem; }
.w-longer-title { font: 600 1.2rem/1.3 var(--font-display); }
.w-longer-body { padding: 0 min(1.5rem, 24px) 1.5rem; }
.w-longer-body h3 { font-size: 1.25rem; margin-top: 1.4rem; }
.w-concern-grid { gap: .9rem; }
@media (min-width: 760px) { .w-concern-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.w-concern-card .w-svc-card-body { gap: .15rem; }
.w-concern-topic { font: 600 1.15rem/1.1 var(--font-hand); color: var(--gold-ink); }
.w-concern-card .w-svc-card-title { font-size: 1.12rem; }
.w-unsure { text-align: center; }
.w-unsure .actions { justify-content: center; }

/* Cultivate Play's therapists, beside the neighbor notes on Home and About. */
.w-cp-people { list-style: none; margin: 0 0 1.1rem; padding: 0; display: grid; gap: .75rem; }
.w-cp-people li { display: flex; align-items: center; gap: .85rem; margin: 0; }
.w-cp-photo {
  flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; overflow: hidden;
  font: 700 1.6rem/1 var(--font-display); color: var(--navy); background: radial-gradient(circle at 35% 30%, #fff6d6, hsl(170, 50%, 72%));
  box-shadow: 0 0 0 4px hsla(45, 100%, 70%, .45), 0 0 22px hsla(45, 100%, 60%, .35);
}
.w-cp-photo--b { background: radial-gradient(circle at 35% 30%, #fff6d6, hsl(265, 55%, 84%)); }
.w-cp-photo img { width: 100%; height: 100%; object-fit: cover; }
.w-cp-who { display: grid; gap: .1rem; line-height: 1.3; }
.w-cp-who strong { font: 600 1.15rem/1.2 var(--font-display); }
.w-cp-who span { font-size: .98rem; }
.w-neighbor-note .w-cp-who strong { color: #fff6dc; }
@media (min-width: 700px) { .w-neighbor-note .w-cp-people { grid-template-columns: 1fr 1fr; } }

/* Testimonials: the rating on a pinned card, the featured review as a letter,
   and the rest as notes that flip over to show the whole review. */
.w-rating { max-width: 360px; margin-inline: auto; text-align: center; transform: rotate(-1.4deg); }
.w-rating-num { margin: 0; font: 700 clamp(4rem, 3rem + 4vw, 5.6rem)/1 var(--font-display); color: var(--navy); }
.w-rating .w-letter-stars { margin: .3rem 0 .4rem; font-size: 1.9rem; }
.w-rating-count { margin: 0; font: 600 1.2rem/1.3 var(--font-display); }
.w-rating .w-glance-note { margin-top: .2rem; }
.w-notes-head { margin-top: clamp(3rem, 7vw, 5rem); }
.w-flips--notes { max-width: 1100px; margin-inline: auto; }
.w-flips--notes .w-flip-front { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.w-note-stars { margin: 0 0 .5rem; font-size: 1.15rem; letter-spacing: .12em; color: var(--gold); }
.w-note-quote { margin: 0; font: 500 1.3rem/1.35 var(--font-display); color: #fff6dc; }
.w-flips--notes .w-flip-front { background: hsla(215, 45%, 14%, .94); border-color: color-mix(in srgb, var(--tone) 55%, transparent); box-shadow: 0 18px 44px hsla(225, 50%, 6%, .35); }
.w-flips--notes .w-flip-back { align-content: center; gap: .6rem; }
.w-flips--notes .w-flip-back blockquote { margin: 0; }
.w-flips--notes .w-flip-back p { font-size: 1rem; line-height: 1.45; }
.w-note-source { font-size: .92rem !important; font-weight: 600; }
.w-note-source span { color: #9a5f10; letter-spacing: .1em; margin-right: .3rem; }
.w-flips--notes.is-live .w-flip-inner { min-height: 290px; }
@media (min-width: 700px) {
  .w-flips--notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .w-flips--notes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .w-flips--notes.is-live .w-flip-inner { min-height: 330px; }
}
@media (max-width: 699px) {
  .w-flips--notes .w-flip-front { display: flex; text-align: center; }
  .w-flips--notes .w-flip-hint { align-self: center; }
  .w-flips--notes.is-live .w-flip-inner { min-height: 270px; }
}

/* Support groups: the Thursday group as a pinned invitation, and a pin for groups nearby. */
.w-invite { max-width: 400px; margin-inline: auto; text-align: center; }
.w-invite-name { margin: 0 0 .2rem; font: 600 1.05rem/1.3 var(--font-display); color: var(--navy); }
.w-invite-day { margin: .2rem 0 0; font-size: 2.4rem; line-height: 1; color: var(--gold-ink); }
.w-invite-time { margin: .2rem 0 0; font: 700 clamp(1.8rem, 1.4rem + 1.4vw, 2.3rem)/1.1 var(--font-display); color: var(--navy); }
.w-invite-time abbr { text-decoration: none; }
.w-invite-start { margin: .35rem 0 .6rem; font-weight: 600; }
.w-invite-list { text-align: left; max-width: 300px; margin-inline: auto; }
.w-invite-list span { min-height: 40px; font-size: 1.05rem; }
.w-invite-cta { margin: .9rem 0 .2rem; }
.w-center-cta { margin: clamp(1.75rem, 4vw, 2.5rem) 0 0; text-align: center; }
@media (min-width: 900px) { .w-lanterns.w-ways--three { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1000px; margin-inline: auto; } }
.w-nearby { position: relative; padding-top: 2.6rem; }
.w-nearby-pin { position: absolute; top: -34px; left: 50%; width: 64px; height: 64px; margin-left: -32px; filter: drop-shadow(0 8px 14px hsla(40, 70%, 40%, .3)); }
.w-nearby-pin svg { width: 100%; height: 100%; }
.w-nearby-note { margin: 1rem 0 0; font-size: .98rem; color: hsl(200, 30%, 32%); }

/* Careers: the team with an empty arch for the next clinician, the role as two
   flip cards, what we look for as short cards, and the application at dawn. */
.w-hiring { display: inline-block; padding: .45rem .9rem; border-radius: var(--radius-pill); font-weight: 800; font-size: .92rem; color: var(--gold); background: hsla(45, 100%, 70%, .14); border: 1.5px solid hsla(45, 100%, 70%, .45); }
.w-trio-you { display: grid; place-items: center; background: hsla(45, 100%, 90%, .08); border-style: dashed; container-type: inline-size; }
.w-trio-you .hand { font-size: min(clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem), 34cqi); color: var(--gold); transform: rotate(-6deg); text-shadow: 0 0 18px hsla(45, 100%, 60%, .55); }
.w-flips--two { max-width: 760px; margin-inline: auto; }
@media (min-width: 700px) { .w-flips--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .w-flips--two.is-live .w-flip-inner { min-height: 250px; } }
.w-flips--three { max-width: 1040px; margin-inline: auto; }
@media (min-width: 700px) and (max-width: 959px) { .w-flips--three { grid-template-columns: minmax(0, 1fr); max-width: 480px; } }
@media (min-width: 960px) { .w-flips--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .w-flips--three.is-live .w-flip-inner { min-height: 250px; } }
.w-more-pair { max-width: 860px; margin: clamp(1.75rem, 4vw, 2.5rem) auto 0; display: grid; gap: .9rem; }
.w-more-pair .w-longer { margin: 0; }
/* Careers culture: six even cards, then one warm line. */
.w-culture { list-style: none; margin: 0 auto; padding: 0; max-width: 1100px; display: grid; gap: 1rem; }
@media (min-width: 640px) { .w-culture { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .w-culture { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.w-culture-card { margin: 0; padding: 1.4rem 1.35rem; border-radius: var(--radius-card); border: 1px solid hsla(45, 80%, 85%, .16); box-shadow: inset 0 5px 0 var(--tone); background-color: hsla(215, 45%, 13%, .82); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.w-culture-icon { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: .8rem; border-radius: 16px; background: color-mix(in srgb, var(--tone) 30%, var(--card)); }
.w-culture-icon img { width: 34px; height: 34px; }
.w-culture-card h3 { margin: 0 0 .35rem; font-size: 1.25rem; color: var(--on-dark); }
.w-culture-card p { margin: 0; font-size: 1rem; line-height: 1.55; color: hsl(45, 40%, 86%); }
.w-culture-family { max-width: 760px; margin: clamp(1.75rem, 4vw, 2.5rem) auto 0; text-align: center; }
.w-culture-family .hand { margin: 0 0 .4rem; font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem); line-height: 1.2; color: var(--gold); text-shadow: 0 0 18px hsla(45, 100%, 60%, .45); }
.w-culture-family p:last-child { margin: 0; font-size: 1.12rem; color: hsl(45, 50%, 90%); }
.w-night .w-longer { background: hsla(215, 45%, 14%, .9); border: 1.5px solid hsla(45, 80%, 85%, .2); box-shadow: 0 14px 40px hsla(225, 50%, 6%, .3); }
.w-night .w-longer-kicker { color: var(--gold); }
.w-night .w-longer summary::after { color: var(--midnight); background: var(--gold); }
.w-longer-body ul { margin: 0; padding-left: 1.2rem; }
.w-longer-body li + li { margin-top: .5rem; }
.w-needs { list-style: none; margin: 0 auto; padding: 0; max-width: 1100px; display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; }
.w-needs li { position: relative; margin: 0; padding: 1rem 1.1rem 1rem 3.3rem; border-radius: var(--radius-inner); background: hsla(215, 45%, 14%, .6); border: 1px solid hsla(45, 80%, 85%, .16); display: flex; flex-direction: column; gap: .2rem; flex: 1 1 100%; }
.w-needs li::before { content: "\2713"; position: absolute; left: 1rem; top: 1rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; font: 800 .9rem/1 var(--font-body); color: var(--midnight); background: var(--gold); box-shadow: 0 0 14px 3px hsla(45, 100%, 55%, .45); }
.w-needs strong { font: 600 1.12rem/1.3 var(--font-display); color: var(--on-dark); }
.w-needs span { font-size: .98rem; line-height: 1.45; color: hsl(45, 40%, 84%); }
@media (min-width: 700px) { .w-needs li { flex-basis: calc(50% - .4rem); flex-grow: 0; } }
@media (min-width: 1100px) { .w-needs li { flex-basis: calc(33.333% - .54rem); } }
.w-offer-head { margin-top: clamp(3rem, 7vw, 5rem); }
.w-day .w-form-card .form { background: var(--card); }
.w-meet { font-size: 1.8rem; color: var(--gold-ink); }

/* Parent Resources: questions glow on the night sky; the chosen answer lights up at dawn. */
.pr-page .pr-group-title { color: var(--gold); text-align: center; }
.w-night .pr-link:not(.btn):not(.text-link) { color: var(--on-dark); background: hsla(215, 45%, 14%, .92); border-color: hsla(45, 80%, 85%, .16); box-shadow: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.w-night .pr-link:not(.btn):not(.text-link):hover { color: #fff6dc; border-color: var(--tone); box-shadow: 0 0 30px color-mix(in srgb, var(--tone) 28%, transparent); }
.w-night .pr-link:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.pr-page .pr-answers { padding-top: clamp(2.5rem, 6vw, 4rem); }
.pr-answers.is-live .pr-answer.is-found { animation: pr-found 1.4s var(--ease) 1; }
.pr-empty { margin-top: 0; }
.pr-page .pr-more { padding-top: clamp(2rem, 5vw, 3.5rem); }
.w-day .pr-more-grid li { background: hsla(45, 100%, 98%, .9); border: 0; color: var(--navy); box-shadow: 0 14px 40px hsla(25, 50%, 40%, .12); }
.w-day .pr-more-grid h3 { color: var(--navy); }
@media (prefers-reduced-motion: reduce) { .pr-answers.is-live .pr-answer.is-found { animation: none; } }

/* Privacy and accessibility: a calm dawn sky with the full text on a paper card. 404: a lost firefly at dusk. */
.w-legal-head { padding-block: clamp(2.5rem, 6vw, 4.5rem) 0; }
.w-legal-head h1 { font-size: clamp(2.3rem, 1.6rem + 2.6vw, 3.6rem); margin-bottom: .3rem; }
.w-legal-head .lead { margin: 0; }
.w-paper-wrap { padding-top: clamp(2.5rem, 5vw, 3.5rem); padding-bottom: clamp(3rem, 7vw, 5rem); }
.w-paper { position: relative; padding: clamp(1.6rem, 4vw, 2.8rem); border-radius: var(--radius-card); background: var(--card); color: var(--navy); box-shadow: 0 0 0 8px hsla(45, 100%, 70%, .14), 0 24px 60px hsla(25, 50%, 40%, .16); }
.w-paper::before { content: ""; position: absolute; top: -12px; left: 12%; width: 84px; height: 24px; border-radius: 2px; background: hsla(170, 45%, 60%, .75); transform: rotate(-4deg); }
.w-paper .article h2 { margin-top: 2rem; }
.w-lost { display: grid; place-items: center; min-height: 260px; }
.w-lost-bug { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle, #fff4c4, var(--gold) 60%); box-shadow: 0 0 30px 12px hsla(45, 100%, 60%, .55); }
.w-lost-trail { position: absolute; width: 70%; height: 50%; border: 2px dashed hsla(45, 100%, 75%, .45); border-color: hsla(45, 100%, 75%, .45) transparent transparent transparent; border-radius: 50%; transform: rotate(-12deg); }
@media (prefers-reduced-motion: no-preference) { .w-lost-bug { animation: w-bob 3s ease-in-out infinite; } }
body.world-page .crumbs:has(+ main .w-legal-head) { color: var(--navy); }
body.world-page .crumbs:has(+ main .w-legal-head) a:hover { color: #9a5f10; }
body.world-page .crumbs:has(+ main .w-legal-head) :focus-visible { outline-color: var(--navy); }

/* ---------- Large text: nothing spills off a phone ----------
   A parent who turns on large text should never have to scroll sideways.
   1. Single-column grids get a track that can shrink (an implicit "auto"
      track grows to its longest word and pushed cards off screen). Zero
      specificity, so each breakpoint's own columns still win.
   2. The tab pickers and the About circle measure their own width in
      letters: when only a few words fit per line, the tabs stack into one
      column and the circle straightens into a list of the same tabs. */
:where(.w-team-grid, .w-person, .w-visit, .w-glp-use, .w-aac-intro, .w-more-pair, .picker, .picker-panels, .w-svc-approach, .w-svc-grid, .w-orbit, .w-orbit-panels) { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 479px) {
  .w-reviews-arrow { width: 48px; height: 48px; }
  .w-reviews-dots { gap: 0; }
  .w-reviews-dot { width: 20px; }
}
.picker { container: picker / inline-size; }
.w-orbit { container: orbit / inline-size; }
@container picker (max-width: 15em) {
  .picker-tabs { grid-template-columns: minmax(0, 1fr); }
  .picker-tab { flex-direction: row; justify-content: flex-start; text-align: left; min-height: 0; padding: .7rem 1rem .7rem .7rem; }
  .picker-label { min-width: 0; overflow-wrap: anywhere; }
}
/* Narrow phones: smaller lights and labels so two-line labels clear the lights below them. */
@container orbit (max-width: 340px) {
  .w-orbit-icon { width: 50px; }
  .w-orbit-label { top: calc(100% + .95rem); font-size: .88rem; }
  .w-orbit-tab:first-child .w-orbit-label { top: auto; bottom: calc(100% + .9rem); }
}
@container orbit (max-width: 15em) {
  .w-orbit-stage { width: 100%; aspect-ratio: auto; }
  .w-orbit-stage::before, .w-orbit-center { display: none; }
  .w-orbit-ring { display: grid; gap: .6rem; }
  .w-orbit-tab { position: static; width: 100%; transform: none; flex-direction: row; gap: .8rem; text-align: left; }
  .w-orbit-icon { width: 52px; flex-shrink: 0; }
  .w-orbit-label { position: static; transform: none; width: auto; max-width: none; padding: 0; background: none; min-width: 0; overflow-wrap: anywhere; }
}
/* Outline buttons inside the night chapters sit where the sky can turn to
   sunrise peach as you scroll, so they carry their own dark backing and stay
   readable on either sky. */
.w-chapter .btn-ghost { background: hsla(215, 45%, 14%, .82); color: var(--on-dark); border-color: hsla(45, 90%, 80%, .85); }
.w-chapter .btn-ghost:hover { background: var(--on-dark); color: var(--navy); border-color: var(--on-dark); }

/* Pressed feedback: every tappable card, tab and arrow gives a little squeeze
   when pressed (hover looks only run where there is a mouse, so they can't
   stick on after a tap). */
.picker-tab, .w-svc-card, .w-reach-list a, .w-reach-copy, .w-reviews-arrow, .w-flip { -webkit-tap-highlight-color: transparent; }
.picker-tab:active, .w-svc-card:active, .w-reach-list a:active, .w-reach-copy:active, .w-glance-list a:active { transform: scale(.97); transition-duration: .08s; }
.w-reviews-arrow:active { transform: scale(.92); }
.w-reviews-dot:active::before { transform: scale(.8); }
.w-orbit-tab:active .w-orbit-icon { transform: scale(.94); }
.w-flip { transition: transform .12s ease; }
.w-flip:has(.w-flip-btn:active) { transform: scale(.97); }
.w-night :is(.w-form-card, .picker-panel, .w-orbit-panel, .w-letter) :focus-visible { outline-color: var(--navy); }

/* ==========================================================================
   Brick Club: the flyer's arch of bricks, the three team jobs, the two
   groups with their prices, then who it fits. The teaser card links here
   from Home and Services.
   ========================================================================== */
/* "Luminaries" and "Wednesdays" are long single words: on a small phone with
   large text they shrink to fit instead of breaking mid-word. */
.w-brick-hero .w-hero-title { font-size: min(clamp(2.4rem, 1.5rem + 3.4vw, 4.3rem), 15vw); }
.w-brick-arch { aspect-ratio: 4 / 5; background: radial-gradient(70% 45% at 50% 82%, hsla(45, 100%, 60%, .3), transparent 70%), linear-gradient(180deg, #2b4a63 0%, #2d5a55 100%); }
.w-brick-arch > img { position: absolute; left: 50%; bottom: 7%; width: 82%; height: auto; transform: translateX(-50%); filter: drop-shadow(0 0 14px hsla(45, 100%, 60%, .22)); }
.w-brick-bug { position: absolute; width: 16%; aspect-ratio: 170 / 139; background: url('/assets/firefly-sprite.png') center / contain no-repeat; filter: drop-shadow(0 0 10px hsla(45, 100%, 60%, .85)); }
.w-brick-bug--a { left: 14%; top: 28%; transform: rotate(-14deg); }
.w-brick-bug--b { left: 56%; top: 13%; width: 11%; transform: rotate(8deg); }
.w-brick-bug--c { right: 8%; top: 40%; width: 13%; transform: scaleX(-1) rotate(-6deg); }
@media (prefers-reduced-motion: no-preference) {
  .w-brick-bug { animation: w-brick-hover 4.5s ease-in-out infinite alternate; }
  .w-brick-bug--b { animation-delay: -1.5s; }
  .w-brick-bug--c { animation-delay: -3s; }
  @keyframes w-brick-hover { to { translate: 0 -10px; } }
}

.w-jobs { list-style: none; margin: 0 auto; padding: 0; max-width: 980px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; }
.w-job {
  margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1rem; padding: 1rem 1.3rem 1rem 1rem; border-radius: var(--radius-card);
  border: 1px solid hsla(45, 90%, 80%, .25); background: linear-gradient(160deg, hsla(210, 40%, 26%, .92), hsla(220, 45%, 14%, .92));
}
.w-job-brick { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: var(--radius-inner); background: hsla(45, 90%, 80%, .1); border: 1px solid hsla(45, 90%, 80%, .2); color: var(--tone); }
.w-job-brick svg { width: 40px; height: 34px; fill: currentColor; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--tone) 55%, transparent)); }
.w-job-text { display: grid; gap: .15rem; min-width: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.3; color: hsla(45, 60%, 92%, .88); }
.w-job-text strong { font: 600 1.5rem/1.1 var(--font-display); color: var(--on-dark); }

.w-groups-head { margin-top: clamp(3.5rem, 8vw, 5.5rem); }
.w-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1.25rem; max-width: 820px; margin: 0 auto; }
.w-group {
  margin: 0; padding: 1.5rem min(1.4rem, 22px) 1.4rem; text-align: center; border-radius: var(--radius-card); background: var(--card); color: var(--navy); border-top: 8px solid var(--gold); container-type: inline-size;
  box-shadow: 0 0 0 8px hsla(45, 100%, 70%, .1), 0 20px 50px hsla(220, 60%, 4%, .4);
}
.w-group-kicker { margin: 0; font-weight: 800; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-dark); }
.w-group .w-group-day { margin: .3rem 0 0; font-size: min(clamp(1.7rem, 1.4rem + 1vw, 2.2rem), 16cqi); line-height: 1.1; color: var(--navy); }
.w-group-time { margin: .45rem 0 0; font-weight: 700; font-size: 1.1rem; }
.w-group-price { margin: .9rem 0 0; display: inline-block; padding: .4rem 1.1rem; border-radius: var(--radius-pill); background: hsla(45, 90%, 60%, .25); font-weight: 700; }
.w-group-price strong { font: 600 1.6rem/1.1 var(--font-display); }
.w-groups-facts { margin: 1.6rem 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1.4rem; font-weight: 700; font-size: 1.1rem; color: var(--on-dark); }
.w-groups-facts span { display: inline-flex; align-items: center; gap: .5rem; }
.w-groups-facts span::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px 2px hsla(45, 100%, 60%, .6); }
.w-groups-fee { margin: .4rem 0 0; text-align: center; color: var(--on-dark); }
.w-groups-ask { margin: 1.2rem 0 0; text-align: center; font-size: 1.6rem; }

.w-club-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: clamp(1.75rem, 4vw, 2.5rem); max-width: 1000px; margin: 0 auto; align-items: start; }
.w-club-fit { transform: rotate(-1deg); }
.w-club-know::before { left: auto; right: 14%; background: hsla(15, 80%, 70%, .75); transform: rotate(4deg); }
.w-club-cards .w-glance-title { font-size: clamp(1.9rem, 1.6rem + 1vw, 2.3rem); line-height: 1.05; }
.w-club-fit .w-glance-list span { font-size: 1.05rem; }
.w-club-facts { margin: 0; display: grid; }
.w-club-facts > div { padding: .55rem 0; border-top: 1.5px dashed hsla(200, 47%, 24%, .18); }
.w-club-facts > div:first-child { border-top: 0; }
.w-club-facts dt { font: 600 1.05rem/1.2 var(--font-display); color: var(--gold-ink); }
.w-club-facts dd { margin: .1rem 0 0; font-weight: 700; color: var(--navy); }
.w-club-note { margin: .8rem 0 0; padding: .7rem .9rem; border-radius: var(--radius-inner); background: hsla(45, 90%, 60%, .2); font-weight: 700; font-size: .98rem; line-height: 1.45; color: var(--teal-dark); }
.w-club-note strong { color: var(--navy); }
.w-club-legal { margin: clamp(1.75rem, 4vw, 2.5rem) auto 0; max-width: 60ch; text-align: center; font-size: .85rem; color: hsl(200, 30%, 28%); }

.w-club-teaser {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem 1.6rem; align-items: center; max-width: 860px; margin: clamp(2rem, 5vw, 3rem) auto 0; padding: 1.4rem 1.5rem;
  border-radius: var(--radius-card); text-decoration: none; color: var(--navy); border: 2px solid hsla(45, 85%, 55%, .5);
  background: radial-gradient(60% 90% at 0% 100%, hsla(45, 100%, 60%, .16), transparent 70%), var(--card); box-shadow: 0 18px 50px hsla(25, 50%, 40%, .14);
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s; -webkit-tap-highlight-color: transparent;
}
@media (min-width: 640px) { .w-club-teaser { grid-template-columns: 200px minmax(0, 1fr); } }
.w-club-teaser-art {
  display: grid; place-items: end center; width: 100%; max-width: 220px; aspect-ratio: 4 / 3; padding: 1.2rem 1rem .8rem; border-radius: 999px 999px var(--radius-inner) var(--radius-inner);
  background: radial-gradient(70% 50% at 50% 80%, hsla(45, 100%, 60%, .3), transparent 70%), linear-gradient(180deg, #2b4a63, #2d5a55); border: 2px solid hsla(45, 90%, 70%, .55);
}
.w-club-teaser-art img { width: 100%; height: auto; }
.w-club-teaser-body { display: grid; gap: .35rem; justify-items: start; min-width: 0; }
.w-club-teaser .w-club-teaser-kicker { font-size: 1.6rem; color: var(--gold-ink); }
.w-club-teaser-title { font: 600 clamp(1.5rem, 1.3rem + .8vw, 1.9rem)/1.15 var(--font-display); }
.w-club-teaser-desc { font-size: 1.02rem; line-height: 1.5; }
.w-club-teaser .w-svc-more { margin-top: .5rem; }
@media (hover: hover) {
  .w-club-teaser:hover { transform: translateY(-4px); box-shadow: 0 0 0 5px hsla(45, 90%, 60%, .3), 0 24px 56px hsla(25, 50%, 40%, .18); }
  .w-club-teaser:hover .w-svc-more { background: var(--navy); color: var(--cream); }
}
.w-club-teaser:active { transform: scale(.98); transition-duration: .08s; }
.w-club-teaser:focus-visible { outline: 3px solid var(--navy); outline-offset: 4px; }
.w-night .w-club-teaser:focus-visible { outline-color: var(--gold); }
.w-night a.w-club-teaser:not(.btn):not(.text-link), .w-night a.w-club-teaser:not(.btn):not(.text-link):hover { color: var(--navy); }

/* Dr. Taylor's headshot in an arch keeps her face in view. */
.w-arch > figure.w-arch-portrait img { object-position: 50% 30%; }
.w-arch > figure.w-arch-blocks img { object-position: 53% 50%; }
.w-arch > figure.w-arch-book img { object-position: 64% 50%; }
/* A photo inside the DIR/Floortime blob takes the blob's shape. */
.w-blob.photo { overflow: hidden; aspect-ratio: 4 / 3; }
.w-blob.photo img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }

/* Testimonials: longer family stories as small letters; the pull quote shows and the whole review opens on tap. */
.w-letters { display: grid; gap: clamp(2rem, 4vw, 2.5rem) 1.5rem; margin: clamp(2.5rem, 6vw, 3.5rem) auto 0; max-width: 1100px; align-items: start; }
@media (min-width: 960px) { .w-letters { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.w-letter--mini { max-width: 560px; width: 100%; padding: 2rem 1.4rem 1.5rem; }
.w-letter--mini:nth-child(2) { transform: rotate(.5deg); }
.w-letter--mini::before, .w-letter--mini::after { width: 64px; height: 22px; }
.w-letter--mini .w-letter-stars { font-size: 1.15rem; margin-bottom: .6rem; }
.w-letter-pull { margin: 0 0 1rem; font: 600 1.25rem/1.4 var(--font-display); color: var(--navy); }
.w-letter-full { margin: 0 0 .9rem; border-top: 1.5px dashed hsla(200, 47%, 24%, .2); text-align: left; }
.w-letter-full summary { list-style: none; cursor: pointer; padding: .75rem 0 .2rem; text-align: center; font-weight: 800; color: #9a5f10; }
.w-letter-full summary::-webkit-details-marker { display: none; }
.w-letter-full summary::after { content: " +"; }
.w-letter-full[open] summary::after { content: " \2212"; }
.w-letter-full summary:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; border-radius: 10px; }
.w-letter-full blockquote { margin: .6rem 0 0; }
.w-letter-full blockquote p { margin: 0 0 .7rem; font: 400 1rem/1.55 var(--font-body); color: var(--navy); }
.w-letter--mini figcaption { font-size: .95rem; }

/* The moon drifts behind the cards. Cards over the night sky get a frosted,
   mostly opaque backing so the moon glows softly through instead of reading
   as if it sat on top of the text (Taylor, 2026-10-03). */
.w-card-glass, .w-trail, .w-glp-use, .w-flip-front, .w-meaning, .w-needs li {
  background-color: hsla(215, 45%, 13%, .82);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.picker-tab { backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.picker-tab:not([aria-selected="true"]) { background-color: hsla(215, 45%, 13%, .82); }
.w-toy { background: linear-gradient(hsla(45, 100%, 70%, .12), hsla(45, 100%, 70%, .12)), hsla(215, 45%, 13%, .78); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.w-lantern { background: linear-gradient(180deg, hsla(45, 100%, 70%, .12), hsla(180, 30%, 60%, .05)), hsla(215, 45%, 13%, .78); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.w-aac-systems { background: linear-gradient(hsla(45, 100%, 70%, .1), hsla(45, 100%, 70%, .1)), hsla(215, 45%, 13%, .78); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }

/* Blog: short reads in the firefly look, matching the Instagram posts. No
   emoji anywhere (Taylor: "i hate the emojis"): gold number badges, string
   lights and fireflies carry it instead. */

/* A post's cover: a little dusk scene with lights, a moon, fireflies, its
   handwritten kicker and its title. It tops every post card. */
.b-cover {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: .35rem;
  min-height: 13.5rem; padding: 2.6rem 1.3rem 2.4rem; overflow: hidden; isolation: isolate;
  border-radius: var(--radius-inner); color: var(--on-dark, hsl(45, 60%, 94%));
  background:
    radial-gradient(90% 55% at 50% 112%, color-mix(in oklab, var(--tone) 70%, transparent) 0%, transparent 75%),
    linear-gradient(180deg, hsl(234, 45%, 17%) 0%, hsl(254, 32%, 31%) 62%, hsl(14, 42%, 56%) 100%);
}
.b-cover--photo .b-cover-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.b-cover--photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, hsla(234, 45%, 14%, .55), hsla(234, 45%, 14%, .8)); }
.b-cover-lights { position: absolute; top: 0; left: 0; width: 100%; height: 2.2rem; }
.b-cover-lights circle { fill: hsl(45, 100%, 72%); filter: drop-shadow(0 0 4px hsla(45, 100%, 65%, .9)); }
.b-cover-moon { position: absolute; top: 2.1rem; right: 1.2rem; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: radial-gradient(circle at 40% 40%, hsl(50, 80%, 94%), hsl(45, 55%, 80%)); box-shadow: 0 0 18px 4px hsla(45, 90%, 80%, .35); }
.b-cover-fly { position: absolute; width: 34px; height: auto; filter: drop-shadow(0 0 6px hsla(45, 100%, 60%, .6)); }
.b-cover-fly--1 { right: 1.05rem; top: 4.5rem; width: 30px; transform: rotate(-8deg); }
.b-cover-fly--2 { right: 34%; bottom: 1.15rem; width: 24px; transform: scaleX(-1) rotate(-6deg); }
.b-cover-kicker { position: relative; font: 700 1.35rem/1.1 var(--font-hand); color: var(--gold); transform: rotate(-2deg); transform-origin: left; }
.b-card .b-cover-title { position: relative; margin: 0; max-width: 15ch; padding-right: 1.6rem; font: 600 clamp(1.45rem, 1.2rem + .8vw, 1.7rem)/1.12 var(--font-display); color: hsl(45, 60%, 96%); text-shadow: 0 2px 18px hsla(230, 60%, 8%, .5); animation: none; }
.b-glow { color: var(--gold); text-shadow: 0 0 20px hsla(45, 100%, 60%, .55), 0 0 48px hsla(45, 100%, 60%, .25); }
.b-cover-hill { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 1.9rem; fill: hsl(196, 38%, 17%); }
@media (prefers-reduced-motion: no-preference) {
  .b-cover-lights circle { animation: b-twinkle 3.2s ease-in-out infinite; }
  .b-cover-lights circle:nth-child(odd) { animation-delay: -1.6s; }
  .b-cover-fly--1 { animation: b-float 6s ease-in-out infinite; }
  .b-cover-fly--2 { animation: b-float 7s ease-in-out -2s infinite; }
}
@keyframes b-twinkle { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes b-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }

/* Post cards: the whole card is the link. */
.b-cards { list-style: none; margin: 0 auto; padding: 0; max-width: 1100px; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr)); }
.b-cards > li { margin: 0; display: flex; }
.b-card { position: relative; flex: 1; display: flex; flex-direction: column; padding: .7rem .7rem 1.15rem; border-radius: var(--radius-card); background: var(--card); color: var(--navy); text-decoration: none; box-shadow: 0 18px 44px hsla(25, 50%, 30%, .16); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.w-night .b-card, .w-hero .b-card { box-shadow: 0 18px 50px hsla(220, 60%, 4%, .4); }
.b-card .b-cover { flex: 1; }
.b-card-body { display: flex; flex-direction: column; gap: .5rem; padding: .9rem .55rem 0; }
.b-card-excerpt { font-size: 1rem; line-height: 1.5; color: hsla(200, 47%, 24%, .88); }
.b-card-meta { font-size: .92rem; font-weight: 700; color: var(--teal-dark); }
.b-card-flag { position: absolute; z-index: 2; top: -.9rem; left: 1.4rem; padding: .15rem .8rem .25rem; border-radius: 4px; background: var(--gold); color: var(--navy) !important; font: 700 1.4rem/1 var(--font-hand); transform: rotate(-4deg); box-shadow: 0 6px 14px hsla(220, 60%, 4%, .25); }
.b-card:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.w-day .b-card:focus-visible { outline-color: var(--navy); }
@media (hover: hover) {
  .b-card:hover { transform: translateY(-5px) rotate(-.4deg); box-shadow: 0 26px 60px hsla(25, 50%, 30%, .24); }
  .b-card:hover .b-cover-title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
}
.b-actions { justify-content: center; margin-top: clamp(2rem, 4vw, 2.75rem); }
.b-newest { width: min(100%, 25rem); justify-self: center; }

/* A post: its cover as the hero, the short read on a paper card, then more. */
.b-post-hero.w-page-hero { min-height: min(64svh, 600px); }
.b-post-hero:not(.b-post-hero--photo) .w-hero-grid { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.b-post-hero:not(.b-post-hero--photo) .w-hero-copy { max-width: 46rem; }
.b-post-hero .w-hero-title { margin-bottom: .35em; }
.b-post-hero .eyebrow { font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem); }
.b-post-hero .lead { max-width: 36ch; margin-inline: auto; }
.b-post-hero--photo .lead { margin-inline: 0; }
.b-post-meta { margin: 1rem 0 0; font-size: .95rem; font-weight: 700; color: hsl(45, 60%, 82%); }
.b-photo { justify-self: center; width: min(100%, 26rem); }
.b-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.b-post-body.w-paper-wrap { padding-top: clamp(2rem, 5vw, 3rem); }
.b-article { font-size: 1.1rem; }
.b-article > :first-child { margin-top: 0; }
.w-paper .b-article h2, .w-paper .b-article h3 { color: var(--navy); text-shadow: none; animation: none; }
.b-article h2 { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 1.9rem); }
.b-article > ul { padding-left: 1.2rem; }
.b-article > ul > li { margin-bottom: .35rem; }
.b-article blockquote { margin: 1.25rem 0; padding: 0; border: 0; text-align: center; }
.b-article blockquote p { margin: 0; font: 700 clamp(2rem, 1.4rem + 2.4vw, 2.8rem)/1.1 var(--font-hand); color: var(--gold-ink); }
.b-block { margin: 0 0 2.25rem; }
.b-block > h2 { margin-bottom: .2rem; }
.b-hint { margin: 0 0 .9rem; font: 600 1.35rem/1.2 var(--font-hand); color: var(--gold-ink); }
.b-note { margin: 2rem 0 0; padding-top: 1rem; border-top: 1.5px dashed hsla(200, 47%, 24%, .2); font-size: .92rem; color: hsla(200, 47%, 24%, .8); }

/* Like the Instagram slides: a gold highlighter stroke under the label that
   starts right at the text's left edge, and a small handwritten count. */
.b-hl { padding-right: .14em; background: linear-gradient(transparent 44%, hsla(45, 96%, 62%, .8) 44%, hsla(45, 96%, 62%, .8) 96%, transparent 96%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.b-count { flex: none; font: 700 1.3rem/1 var(--font-hand); color: var(--gold-ink); white-space: nowrap; }

/* Tap cards: tap one to read what it means. */
.b-tap-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
/* Two columns on wider screens. Cards in a row open together (site.js) and
   stretch to the same height, and an odd last card spans the whole row, so
   the grid always stays even. */
@media (min-width: 640px) {
  .b-taps:not(.b-taps--steps) .b-tap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .b-taps:not(.b-taps--steps) .b-tap-grid > li:last-child:nth-child(odd),
  .b-myths .pr-myth-grid > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.b-tap-grid > li { position: relative; margin: 0; display: flex; }
.b-tap-grid > li > .b-tap { flex: 1; }
.b-tap:not([open]) summary { height: 100%; }
.b-tap { border-radius: 20px; background: #fff; border: 1.5px solid hsla(43, 70%, 52%, .38); box-shadow: 0 3px 0 hsla(43, 60%, 45%, .12); transition: background-color .3s var(--ease); }
.b-tap[open] { background: hsl(46, 100%, 97%); }
.b-tap summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .85rem; min-height: 4.1rem; padding: .8rem 1.1rem; border-radius: 20px; }
.b-tap summary::-webkit-details-marker { display: none; }
.b-tap summary:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.b-tap-label { flex: 1; font: 600 1.35rem/1.3 var(--font-display); color: var(--navy); }
.b-tap p { margin: 0; padding: 0 1.1rem 1.05rem; line-height: 1.55; }
@media (hover: hover) { .b-tap:not([open]) summary:hover { background: hsl(46, 100%, 97%); } }
@media (prefers-reduced-motion: no-preference) {
  .b-tap[open] p { animation: b-reveal .35s var(--ease); }
}
@keyframes b-reveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Myth or truth cards reuse the FAQs page's cards. */
.b-myths .pr-myth-grid { margin-top: 0; }

/* "Things to try": always-open cards, counted like the slides. */
.b-things-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.b-things-list > li { position: relative; margin: 0; padding: 1.1rem 3.6rem 1.1rem 1.2rem; border-radius: 20px; background: #fff; border: 1.5px solid hsla(43, 70%, 52%, .38); box-shadow: 0 3px 0 hsla(43, 60%, 45%, .12); }
.b-things-list .b-count { position: absolute; right: 1.1rem; top: 1.1rem; }
.b-things-list h3 { margin: 0 0 .35rem; font-size: 1.25rem; }
.b-things-list p { margin: 0; line-height: 1.55; }

/* Photo story: taped snapshots, each with a short caption. */
.b-story-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.75rem; }
.b-story-list > li { margin: 0; transform: rotate(var(--r, 0deg)); }
.b-story-shot { margin: 0; padding: .6rem .6rem 0; background: var(--white); border-radius: 6px; box-shadow: 0 14px 30px hsla(25, 50%, 30%, .18); }
.b-story-shot img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; }
.b-story-cap { margin: 0; padding: .7rem .9rem 1rem; background: var(--white); border-radius: 0 0 6px 6px; font: 600 1.35rem/1.3 var(--font-hand); color: var(--navy); }

/* The closing "Try this week" card, with a firefly. */
.b-try { position: relative; margin: 2.25rem 0 0; padding: 1.3rem 1.4rem 1.3rem 5.6rem; border-radius: var(--radius-card); background: hsl(45, 100%, 93%); border: 2px dashed hsla(40, 70%, 45%, .45); }
.b-try-fly { position: absolute; left: 1rem; top: 1.1rem; }
.b-try-fly img { display: block; width: 64px; height: auto; filter: drop-shadow(0 0 10px hsla(45, 100%, 60%, .7)); }
.b-try h2 { margin: .1rem 0 .3rem; font: 700 2rem/1 var(--font-hand); color: var(--gold-ink); }
.b-try p { margin: 0; line-height: 1.55; }
.b-try p + p { margin-top: .6rem; }
@media (prefers-reduced-motion: no-preference) { .b-try-fly img { animation: b-float 5s ease-in-out infinite; } }
@media (max-width: 560px) {
  .b-try { padding: 1.2rem 1.2rem 1.2rem; }
  .b-try-fly { left: auto; right: .9rem; top: -1.4rem; }
  .b-try-fly img { width: 54px; }
}

/* ---------- A shorter homepage on phones (Taylor, 2026-10-04) ----------
   Under 700px, .w-desk-only parts hide (What brings you here, gestalt, AAC,
   the video slot, and the longer bio parts) and .w-phone-only parts show
   (tiles to the gestalt and AAC pages). Desktop is unchanged. */
.w-phone-only { display: none; }
.w-chapter--follow { padding-top: 0; }
.w-learn { margin-top: clamp(2rem, 5vw, 3rem); text-align: center; }
.w-learn-title { margin-bottom: .9rem; font-size: 1.6rem; }
.w-learn-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.w-learn-grid > li { margin: 0; display: flex; }
.w-learn-tile { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .65rem; padding: 1.1rem .75rem 1rem; border-radius: var(--radius-card); border: 2px solid color-mix(in srgb, var(--tone) 75%, transparent); background: var(--card); color: var(--navy); text-decoration: none; box-shadow: 0 14px 40px hsla(25, 50%, 40%, .12); -webkit-tap-highlight-color: transparent; }
.w-learn-tile:active { transform: scale(.98); }
.w-learn-icon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; background: color-mix(in srgb, var(--tone) 38%, var(--card)); }
.w-learn-icon img { width: 44px; height: 44px; }
.w-learn-name { font: 600 1.12rem/1.25 var(--font-display); }
.w-learn-tile .w-svc-more { color: var(--navy); }
@media (max-width: 699px) {
  .w-desk-only { display: none !important; }
  .w-phone-only { display: block; }
  /* Our approach: six even icon tiles; the About page tells the longer story. */
  .w-approach-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .w-approach-grid .w-card-glass { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; padding: 1.1rem .7rem; text-align: center; }
  .w-approach-grid .w-card-icon { margin: 0; }
  .w-approach-grid h3 { margin: 0; font-size: 1.08rem; line-height: 1.25; }
  .w-approach-grid .w-card-glass p { display: none; }
  /* Therapists: a small arched photo beside the name, a short bio, and the
     full bio a tap away. */
  .w-person { grid-template-columns: 112px minmax(0, 1fr); gap: .9rem 1rem; align-items: center; }
  .w-person-body { display: contents; }
  .w-person > .w-portrait { grid-column: 1; grid-row: 1; }
  .w-person-name { grid-column: 2; grid-row: 1; }
  .w-person-body > :not(.w-person-name) { grid-column: 1 / -1; margin-block: 0; }
  .w-person .credentials { margin: 0; }
}