/* Beyond Limits Pediatric Therapy Center
   Playful, calm, accessible. Bright colors live in shapes and backgrounds;
   text and buttons use the "deep" shades so they pass WCAG AA contrast. */

:root {
    --ink: #1e2a3a;
    --ink-soft: #4a5568;
    --cream: #fdf5ea;
    --paper: #ffffff;
    --line: #eadfca;
    --field-edge: #8c8070; /* edges of form fields, filter buttons, chips and choices: 3.9:1 on white, 3.6:1 on cream (1.4.11) */

    --sun: #ffa41b;
    --sun-soft: #ffeccc;
    --coral: #e0243f;
    --coral-soft: #fde0e4;
    --coral-deep: #c81e36;
    --teal: #00a651;
    --teal-soft: #d8f3e3;
    --teal-deep: #00733a; /* link green: 6:1 on white and 4.7:1 or better on every tint */
    --sky: #4a9fe8;
    --sky-soft: #dcecfb;
    --sky-deep: #2f6fbf;
    --grape: #7b61d1;
    --grape-soft: #e8e1fa;
    --grape-deep: #6247b8;
    --leaf: #5bb85a;
    --leaf-soft: #def3dc;
    --leaf-deep: #2e7a2f;
    --indigo: #45488f;
    --indigo-2: #5a5ea8;
    --indigo-soft: #e7e7f5;
    --lime: #8dc63f;
    --lime-soft: #e8f4d6;
    --lime-deep: #4f7a1c;
    --navy: #1b2d4f;
    --navy-soft: #dfe6f3;
    /* Service card colors, taken from the clinic's current site (beyondlimitstherapy.org) */
    --card-green: #92c96b;  /* dark text 7.5:1 */
    --card-sky: #5fbde1;    /* dark text 6.8:1 */

    --font-display: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
    --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;

    --radius: 22px;
    --radius-lg: 36px;
    --shadow: 0 10px 30px -12px rgba(30, 42, 58, 0.25);
    --shadow-pop: 0 6px 0 0 rgba(30, 42, 58, 0.12);
    --container: 1180px;
    --gutter: clamp(16px, 4vw, 32px);
    --space: clamp(56px, 8vw, 104px);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* Keeps link targets and keyboard focus clear of the sticky header. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 110px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--ink);
    background: var(--paper);
    overflow-x: hidden;
    /* A word or web address too long for a 320px phone ("Nondiscrimination" in a page title, the
       addresses in the HHS Spanish notice) wraps instead of being cut off (1.4.10 Reflow). */
    overflow-wrap: break-word;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--teal-deep); text-underline-offset: 3px; text-decoration-thickness: 2px; }
a:hover { color: var(--coral-deep); }
:focus-visible { border-radius: 6px; } /* softens the ring's corners; the ring itself is at the end of this file */
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.15; margin: 0 0 0.5em; font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.4rem, 5.5vw, 4rem); font-weight: 800; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.75rem); }
h3 { font-size: 1.35rem; }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.2em; }
.center { text-align: center; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 12px; }
.skip-link:focus { top: 12px; color: #fff; }
main:focus { outline: none; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.container--narrow { max-width: 820px; }
.section { padding: calc(var(--space) * 0.6) 0; }
.section--tight { padding: 24px 0; }
.block { margin-bottom: 32px; }
.block__title { font-size: clamp(1.6rem, 3vw, 2.1rem); }

.eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-weight: 800;
    font-size: .85rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--indigo);
    margin-bottom: 0.5em;
}
.eyebrow--light { color: #b0dc70; } /* lighter lime: 5.2:1 on indigo */

.section-heading { max-width: 720px; margin-bottom: 40px; }
.section-heading--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-heading__intro { font-size: 1.15rem; color: var(--ink-soft); }

.prose > :last-child { margin-bottom: 0; }
.prose h2 { margin-top: 1.2em; }
.prose h3 { margin-top: 1em; }
.prose li { margin-bottom: 0.35em; }
.prose--lead, .prose--lead p { font-size: 1.2rem; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; line-height: 1;
    padding: 15px 26px; border-radius: 999px; border: 2px solid transparent;
    text-decoration: none; cursor: pointer;
    box-shadow: var(--shadow-pop);
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 0 0 rgba(30, 42, 58, 0.14); }
.btn:active { transform: translateY(1px); box-shadow: 0 2px 0 0 rgba(30, 42, 58, 0.14); }
.btn--coral { background: var(--coral-deep); color: #fff; }
.btn--coral:hover { color: #fff; background: #a8182c; }
.btn--teal { background: var(--teal-deep); color: #fff; }
.btn--teal:hover { color: #fff; background: #00622f; }
.btn--grape { background: var(--grape-deep); color: #fff; }
.btn--grape:hover { color: #fff; }
.btn--sun { background: var(--sun); color: var(--ink); }
.btn--sun:hover { color: var(--ink); background: #ff9500; }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { color: #fff; background: #000; }
.btn--lime { background: var(--lime); color: var(--ink); }
.btn--lime:hover { background: #7cb52f; color: var(--ink); }
.btn--indigo { background: var(--indigo); color: #fff; }
.btn--indigo:hover { background: var(--ink); color: #fff; }
.btn--ghost { background: var(--paper); color: var(--ink); border-color: var(--ink); box-shadow: none; }
.btn--ghost:hover { color: var(--ink); background: var(--sun-soft); box-shadow: none; }
.btn--large { font-size: 1.2rem; padding: 18px 30px; }
.btn[aria-disabled="true"] { cursor: progress; } /* the contact form's "Sending..." (site.js) */
.btn--small { font-size: 1rem; padding: 11px 20px; }
.btn--block { width: 100%; margin-bottom: 10px; }
@media (prefers-reduced-motion: reduce) { .btn, .btn:hover, .btn:active { transition: none; transform: none; } }

.pill { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.75); border-radius: 999px; padding: 6px 14px; font-weight: 700; font-size: .95rem; }

/* ---------- Top bar & header ---------- */
.topbar { background: var(--indigo); color: #fff; font-size: .95rem; }
.topbar a { color: #fff; text-decoration: none; }
.topbar a:hover { text-decoration: underline; color: #fff; }
.topbar__inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 42px; flex-wrap: wrap; }
.topbar__contact, .topbar__links { display: flex; gap: 22px; align-items: center; margin: 0; flex-wrap: wrap; }
.topbar__contact a, .topbar__contact span, .topbar__links a { display: inline-flex; align-items: center; gap: 6px; padding: 1px 0; } /* padding: 24px tall links (2.5.8) */
.topbar__veterans { background: rgba(255,255,255,.14); padding: 4px 12px; border-radius: 999px; }

/* White bar with an indigo tab that hangs below it for the current page. */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--paper); transition: box-shadow .2s; }
.site-header.is-scrolled { box-shadow: 0 6px 20px -10px rgba(30,42,58,.45); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 88px; }

.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand__logo { height: 64px; width: auto; }
.site-footer .brand__logo { height: 56px; }

.site-nav { display: flex; align-items: center; gap: 14px; align-self: stretch; }
.site-nav__list { list-style: none; display: flex; gap: 2px; margin: 0; padding: 0; align-self: stretch; }
.site-nav__list li { display: flex; }
.site-nav__list .site-nav__home { display: none; }
.site-nav__link {
    display: flex; align-items: center; padding: 0 12px; position: relative; white-space: nowrap;
    font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; color: var(--ink); text-decoration: none;
}
.site-nav__link:hover { color: var(--indigo); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; }
.site-nav__link.is-active { background: var(--indigo); color: #fff; border-radius: 0 0 10px 10px; margin-bottom: -20px; padding-top: 0; box-shadow: 0 6px 12px -6px rgba(0,0,0,.35); }
.site-nav__link.is-active:hover { color: #fff; }
.site-nav__extras { display: none; }
.site-nav__cta { align-self: center; }
.nav-toggle { display: none; background: var(--paper); border: 0; border-radius: 16px; width: 52px; height: 52px; align-items: center; justify-content: center; cursor: pointer; color: var(--ink); }
.nav-toggle__close { display: none; }

@media (max-width: 1180px) {
    .nav-toggle { display: inline-flex; }
    .site-nav {
        position: absolute; top: 100%; left: 0; right: 0; height: calc(100vh - 100%); background: var(--cream);
        flex-direction: column; align-items: stretch; gap: 16px; padding: 24px var(--gutter) 40px;
        overflow-y: auto; opacity: 0; transform: translateY(-12px); visibility: hidden; transition: opacity .2s ease, transform .2s ease, visibility .2s;
    }
    .nav-open .site-nav { opacity: 1; transform: none; visibility: visible; }
    .nav-open .nav-toggle__open { display: none; }
    .nav-open .nav-toggle__close { display: inline; }
    .nav-open { overflow: hidden; }
    .site-nav__list { flex-direction: column; gap: 6px; align-self: auto; }
    .site-nav__list li, .site-nav__list .site-nav__home { display: block; }
    .site-nav__link { font-size: 1.4rem; padding: 14px 18px; border-radius: 18px; background: var(--paper); }
    .site-nav__link.is-active { margin: 0; border-radius: 18px; padding-top: 14px; }
    .site-nav__extras { display: flex; flex-direction: column; gap: 10px; }
    .site-nav__extras a { display: flex; align-items: center; gap: 10px; font-weight: 700; padding: 12px 18px; border-radius: 18px; background: var(--navy-soft); color: var(--navy); text-decoration: none; }
    .site-nav__cta { font-size: 1.3rem; padding: 18px; align-self: stretch; }
}
@media (max-width: 640px) {
    .topbar__contact .topbar__hours, .topbar__links .topbar__careers { display: none; }
    .topbar__contact, .topbar__links { gap: 12px; }
    .topbar__inner { flex-wrap: nowrap; font-size: .88rem; justify-content: center; padding-top: 6px; padding-bottom: 6px; }
    .site-header__inner { min-height: 74px; }
    .brand__logo { height: 50px; }
}

/* Section headings: big, centered, with a little rainbow divider. */
.section-heading--center h2 { text-transform: uppercase; letter-spacing: .01em; margin-bottom: .2em; }
.divider { display: flex; justify-content: center; gap: 22px; margin: 4px auto 28px; }
.divider span { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); }
.section-heading:not(.section-heading--center) .divider { justify-content: flex-start; }

/* Scroll to top */
.to-top {
    position: fixed; right: 20px; bottom: 20px; z-index: 40; width: 52px; height: 52px; border-radius: 50%;
    display: grid; place-items: center; background: var(--indigo); color: #fff; border: 3px solid #fff;
    box-shadow: var(--shadow); opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s;
}
.to-top.is-shown { opacity: 1; visibility: visible; }
.to-top:hover { color: #fff; background: var(--ink); }
.to-top svg { transform: rotate(-90deg); }

/* ---------- Waves & shapes ---------- */
.wave { position: absolute; left: 0; width: 100%; height: clamp(36px, 5vw, 80px); pointer-events: none; }
.wave--bottom { bottom: -1px; }
.wave--top { top: 1px; transform: translateY(-99%); } /* overlaps the band by a pixel or two, so no hairline shows where they meet */

/* ---------- Home slider ---------- */
.slider { position: relative; background: var(--sky-soft); overflow: hidden; }
/* The slides stack in one grid cell, so the track is always as tall as the tallest slide and
   nothing is cut off when text spacing, zoom or a large system font makes a slide taller (1.4.12, 1.4.4). */
.slider__track { position: relative; display: grid; min-height: clamp(560px, 70vh, 700px); }
.slide { grid-area: 1 / 1; position: relative; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility .45s; display: flex; align-items: center; }
.slide.is-current { opacity: 1; visibility: visible; transition-delay: .3s; }
.slide--sky { background: var(--sky-soft); } .slide--sun { background: var(--sun-soft); } .slide--coral { background: var(--coral-soft); }
.slide--teal { background: var(--teal-soft); } .slide--grape { background: var(--grape-soft); } .slide--leaf { background: var(--lime-soft); }
.slide--indigo { background: var(--indigo-soft); }
.slide__inner { position: relative; z-index: 1; width: 100%; padding-bottom: 40px; }
.slide__box {
    max-width: 580px; color: #fff; border-top: 8px solid var(--lime);
    border-radius: 0 90px 26px 26px; padding: clamp(26px, 4vw, 44px);
    box-shadow: 0 18px 40px -18px rgba(0,0,0,.45);
}
.slide__eyebrow { font-family: var(--font-display); font-weight: 700; font-size: .95rem; letter-spacing: .04em; margin-bottom: 8px; }
.slide__box--indigo { background: var(--indigo); } .slide__box--teal { background: var(--teal-deep); } .slide__box--coral { background: var(--coral-deep); }
.slide__box--grape { background: var(--grape-deep); } .slide__box--sky { background: var(--sky-deep); } .slide__box--navy { background: var(--navy); }
.slide__title { font-size: clamp(2.2rem, 4.2vw, 3.5rem); line-height: 1.08; margin-bottom: 16px; }
.slide__text { font-size: clamp(1.1rem, 1.6vw, 1.3rem); margin: 0 0 24px; }
.slide__buttons { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.slide__note { margin: 12px 0 0; font-size: .95rem; }
.slide__note a { color: #fff; }
@media (max-width: 860px) {
    .slide { align-items: flex-end; }
    .slide__box { border-radius: 0 60px 22px 22px; }
}

.slider__arrow {
    position: absolute; top: 45%; z-index: 2; width: 48px; height: 48px; border-radius: 50%; border: 0;
    background: rgba(255,255,255,.92); color: var(--ink); display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow);
}
.slider__arrow--prev { left: 16px; } .slider__arrow--prev svg { transform: rotate(180deg); }
.slider__arrow--next { right: 16px; }
.slider__controls { position: absolute; z-index: 2; left: 0; right: 0; bottom: 74px; display: flex; justify-content: center; align-items: center; }
/* Each dot is a 24px button (2.5.8 Target Size) that draws a 14px circle, so the row looks as it did at 14px dots with 10px gaps. */
.slider__dot { width: 24px; height: 24px; border: 0; border-radius: 50%; background: none; padding: 0; cursor: pointer; display: grid; place-items: center; }
.slider__dot::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ink); background: #fff; }
.slider__dot[aria-current="true"]::before { background: var(--ink); }
.slider__pause { border: 2px solid var(--ink); background: #fff; color: var(--ink); border-radius: 999px; font: 700 .85rem var(--font-body); padding: 4px 12px; cursor: pointer; margin-left: 11px; }
@media (max-width: 640px) { .slider__arrow { display: none; } }
@media (prefers-reduced-motion: reduce) { .slide { transition: none; } }

/* Shared photo frame on the right of the slider. A round-topped "window" with a
   white mat and a lime ring, so photos and illustrations sit in the same shape. */
.slider__stage { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.slider__frame {
    position: absolute; top: 50%; right: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
    transform: translateY(-54%); width: min(470px, 38vw); aspect-ratio: 1;
    border-radius: 999px 999px 36px 36px; overflow: hidden; background: #fff;
    border: 10px solid #fff; box-shadow: 0 0 0 5px var(--lime), 0 24px 50px -24px rgba(30,42,58,.55);
}
.slider__visual { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; background: #fff; }
.slider__visual.is-current { opacity: 1; }
.slider__visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slider__visual .illo { position: absolute; inset: 6% 4% 2%; width: 92%; height: 92%; }
.slider__visual--indigo { background: var(--indigo-soft); } .slider__visual--leaf { background: var(--lime-soft); }
.slider__visual--sky { background: var(--sky-soft); } .slider__visual--sun { background: var(--sun-soft); }
.slider__visual--coral { background: var(--coral-soft); } .slider__visual--teal { background: var(--teal-soft); }
.slider__visual--grape { background: var(--grape-soft); }
.slider__visual .illo > path:first-child { fill: #fff; opacity: .7; }

/* Tile transition: site.js lays a grid of tiles, each holding a slice of the
   outgoing picture, over the incoming one; they shrink away in a checkerboard wave. */
.slider__tiles { position: absolute; inset: 0; z-index: 2; }
.slider__tile { position: absolute; overflow: hidden; animation: tile-collapse .7s cubic-bezier(.5,0,.7,.4) both; }
.slider__tile > .slider__visual { opacity: 1; transition: none; }
@keyframes tile-collapse {
    0% { transform: none; opacity: 1; border-radius: 0; }
    35% { opacity: 1; }
    100% { transform: scale(0) rotate(12deg); opacity: 0; border-radius: 40%; }
}
.slider.is-paused .slider__tile { animation-play-state: running; }
@media (max-width: 860px) {
    .slider__track { min-height: 730px; }
    .slider__frame { top: 20px; left: 50%; right: auto; transform: translateX(-50%); width: min(196px, 52vw); border-width: 6px; box-shadow: 0 0 0 4px var(--lime), 0 16px 34px -18px rgba(30,42,58,.5); }
}
@media (prefers-reduced-motion: reduce) { .slider__visual { transition: none; } .slider__tile { animation: none; display: none; } }

.illo__float { animation: float 6s ease-in-out infinite; transform-box: fill-box; }
.illo__float--2 { animation-duration: 8s; animation-delay: -2s; }
@keyframes float { 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .illo__float { animation: none; } }

.blob-photo { width: 100%; border-radius: 58% 42% 50% 50% / 48% 52% 48% 52%; object-fit: cover; box-shadow: var(--shadow); }

/* ---------- Page hero ---------- */
.page-hero { position: relative; padding: 64px 0 clamp(96px, 10vw, 130px); overflow: hidden; }
.page-hero__inner { position: relative; z-index: 1; max-width: 900px; }
.page-hero__inner--service { display: flex; gap: 28px; align-items: flex-start; }
.page-hero__title { margin-bottom: 14px; }
.page-hero__intro { font-size: clamp(1.15rem, 1.8vw, 1.35rem); max-width: 40em; }
.page-hero__crumb { font-weight: 700; margin-bottom: 8px; }
.page-hero__creds { display: block; font-family: var(--font-body); font-size: clamp(1.15rem, 1.8vw, 1.35rem); font-weight: 400; margin-top: .25em; }
.page-hero__crumb a { color: inherit; }
.page-hero__crumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; row-gap: 2px; }
.page-hero__crumb li + li::before { content: "\203A"; content: "\203A" / ""; margin: 0 9px; opacity: .55; }
.page-hero__crumb [aria-current] { font-weight: 600; opacity: .75; }
.page-hero__icon { flex: none; width: 96px; height: 96px; border-radius: 30px; background: #fff; display: grid; place-items: center; box-shadow: var(--shadow-pop); transform: rotate(-6deg); }
.page-hero--sun { background: var(--sun-soft); }
.page-hero--coral { background: var(--coral-soft); }
.page-hero--teal { background: var(--teal-soft); }
.page-hero--sky { background: var(--sky-soft); }
.page-hero--grape { background: var(--grape-soft); }
.page-hero--leaf, .page-hero--indigo { background: var(--lime-soft); }
.page-hero--navy { background: var(--navy); color: #fff; }
.page-hero--navy a { color: #fff; }
.page-hero--sun .page-hero__icon { color: #9a5a00; }
.page-hero--indigo .page-hero__icon { color: var(--indigo); }
.page-hero--coral .page-hero__icon { color: var(--coral-deep); }
.page-hero--teal .page-hero__icon { color: var(--teal-deep); }
.page-hero--sky .page-hero__icon { color: var(--sky-deep); }
.page-hero--grape .page-hero__icon { color: var(--grape-deep); }
.page-hero--leaf .page-hero__icon { color: var(--leaf-deep); }
/* The navy header's text is white; the icon box and age pill are light, so they need navy ink. */
.page-hero--navy .page-hero__icon { color: var(--navy); }
.page-hero--navy .pill { background: #fff; color: var(--navy); }
@media (max-width: 640px) {
    .page-hero { padding-top: 40px; }
    .page-hero__inner--service { flex-direction: column; gap: 16px; }
    .page-hero__icon { width: 72px; height: 72px; border-radius: 22px; }
}
.page-body { padding: 24px 0 8px; }

/* ---------- Cards ---------- */
.card-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card-grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.card {
    position: relative; background: var(--paper); border-radius: var(--radius); padding: 28px 26px;
    border: 2px solid var(--line); transition: transform .2s, box-shadow .2s;
}
.card:has(a):hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card__icon { width: 60px; height: 60px; border-radius: 20px; display: grid; place-items: center; margin-bottom: 16px; }
.card__title a { color: inherit; text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.card p { color: var(--ink-soft); margin-bottom: .6em; }
.card__more { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: var(--teal-deep); }
.card--sun .card__icon { background: var(--sun-soft); color: #9a5a00; }
.card--coral .card__icon { background: var(--coral-soft); color: var(--coral-deep); }
.card--teal .card__icon { background: var(--teal-soft); color: var(--teal-deep); }
.card--sky .card__icon { background: var(--sky-soft); color: var(--sky-deep); }
.card--grape .card__icon { background: var(--grape-soft); color: var(--grape-deep); }
.card--leaf .card__icon { background: var(--leaf-soft); color: var(--leaf-deep); }
.card--sun { border-bottom: 6px solid var(--sun); }
.card--coral { border-bottom: 6px solid var(--coral); }
.card--teal { border-bottom: 6px solid var(--teal); }
.card--sky { border-bottom: 6px solid var(--sky); }
.card--grape { border-bottom: 6px solid var(--grape); }
.card--leaf { border-bottom: 6px solid var(--leaf); }

/* Service cards: solid brand color, big rounded bottom-right corner */
.service-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.service-card {
    position: relative; display: flex; flex-direction: column; text-decoration: none; color: var(--ink); min-height: 230px;
    padding: 30px 26px 26px; border-radius: 16px 16px 48px 16px; overflow: hidden; background: var(--card-sky);
    transition: transform .2s, box-shadow .2s;
}
/* Therapy cards alternate sky blue and green; the Veterans card is navy.
   Sky and green are light, so their text is dark to pass WCAG AA. */
.service-card:nth-child(odd) { background: var(--card-sky); color: var(--ink); }
.service-card:nth-child(even) { background: var(--card-green); color: var(--ink); }
.service-grid .service-card--veterans { background: var(--navy); color: #fff; }
.service-card::after { content: ""; position: absolute; width: 160px; height: 160px; border-radius: 50%; right: -60px; top: -60px; background: rgba(255,255,255,.08); }
.service-card:hover { color: var(--ink); transform: translateY(-5px); box-shadow: var(--shadow); }
.service-grid .service-card--veterans:hover { color: #fff; }
.service-card h2, .service-card h3 { font-size: 1.55rem; }
.service-card p { flex: 1; opacity: .95; }
.service-card__icon { width: 64px; height: 64px; border-radius: 18px; background: rgba(255,255,255,.16); display: grid; place-items: center; margin-bottom: 18px; position: relative; z-index: 1; }
.service-card__ages { flex: 0; font-weight: 700; font-size: .95rem; }
.service-card__more { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; }
.service-card:hover .service-card__more { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Steps: grey cards with a lime top edge and big numbers ---------- */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.steps__item { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; background: #f2f3f7; border-radius: 18px; padding: 30px 24px 28px; border-top: 6px solid var(--lime); box-shadow: 0 8px 20px -14px rgba(30,42,58,.35); }
.steps__num { font-family: var(--font-display); font-weight: 800; font-size: 2.5rem; line-height: 1; color: var(--lime-deep); margin-bottom: 14px; }
.steps__item h3 { color: var(--indigo); font-size: 1.45rem; }
.steps__item p { color: var(--ink-soft); flex: 1; }
.steps__item .btn { margin-top: 8px; }

/* ---------- Checklist / offer / callout ---------- */
.checklist { border-radius: var(--radius); padding: 28px 30px; margin: 32px 0; }
.checklist h2, .checklist h3 { font-size: 1.6rem; }
.checklist ul, .offer__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.checklist li, .offer__list li { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; }
.checklist .icon, .offer__list .icon { flex: none; margin-top: 3px; }
.checklist__cols { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.checklist--sun { background: var(--sun-soft); } .checklist--sun .icon { color: #9a5a00; }
.checklist--coral { background: var(--coral-soft); } .checklist--coral .icon { color: var(--coral-deep); }
.checklist--teal { background: var(--teal-soft); } .checklist--teal .icon { color: var(--teal-deep); }
.checklist--sky { background: var(--sky-soft); } .checklist--sky .icon { color: var(--sky-deep); }
.checklist--grape { background: var(--grape-soft); } .checklist--grape .icon { color: var(--grape-deep); }
.checklist--leaf { background: var(--leaf-soft); } .checklist--leaf .icon { color: var(--leaf-deep); }
.checklist--navy { background: var(--navy-soft); } .checklist--navy .icon { color: var(--navy); }
.offer { margin: 32px 0; }
.offer__list { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.offer__list li { background: var(--paper); border-radius: 16px; padding: 14px 16px; border: 2px solid var(--line); }
.offer__list .icon { color: var(--coral-deep); }
.first-visit { background: var(--paper); border-radius: var(--radius); padding: 28px 30px; border: 2px solid var(--line); margin: 32px 0; }

.callout { display: flex; gap: 20px; border-radius: var(--radius); padding: 26px 28px; }
.callout__icon { flex: none; width: 56px; height: 56px; border-radius: 18px; background: #fff; display: grid; place-items: center; }
.callout h2, .callout h3 { font-size: 1.35rem; margin-bottom: .3em; }
.callout .btn { margin-top: 14px; }
.callout--sun { background: var(--sun-soft); } .callout--coral { background: var(--coral-soft); } .callout--teal { background: var(--teal-soft); }
.callout--sky { background: var(--sky-soft); } .callout--grape { background: var(--grape-soft); } .callout--leaf { background: var(--leaf-soft); }
/* Language help notices and text in another language (nondiscrimination page) */
.lang-notices__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.lang-notices__item { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 24px; scroll-margin-top: 120px; }
.lang-notices__item:target { border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo); }
.lang-notices__name { font-size: 1.3rem; margin: 0 0 .3em; }
.lang-notices__english { font-family: var(--font-body); font-size: .95rem; font-weight: 600; color: var(--ink-soft); margin-inline-start: .4em; }
.lang-notices__item p { margin: 0; font-size: 1.1rem; line-height: 1.65; }
.block--other-language { border-top: 1px solid var(--line); padding-top: 8px; }
@media (max-width: 560px) { .callout { flex-direction: column; } }

/* ---------- Service page layout ---------- */
.service-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; padding-top: 24px; padding-bottom: 24px; }
.sticky-card { position: sticky; top: 110px; background: var(--paper); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); }
.sticky-card h2 { font-size: 1.6rem; }
.sticky-card h3 { font-size: 1.15rem; margin-top: 20px; }
.mini-links { list-style: none; padding: 0; margin: 0; }
.mini-links a { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-weight: 700; color: var(--ink); text-decoration: none; }
.mini-links a:hover { color: var(--coral-deep); }
@media (max-width: 900px) { .service-layout { grid-template-columns: 1fr; } .sticky-card { position: static; } }

/* ---------- Split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.split--image-left .split__media { order: -1; }
.split__text .btn { margin-top: 12px; }
.split__media { max-width: 520px; width: 100%; justify-self: center; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } .split__media { order: -1; max-width: 380px; } }

/* ---------- Team ---------- */
.face-row { list-style: none; padding: 0; margin: 0 0 32px; display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); text-align: center; }
.face__initials, .face__photo, .team-card__initials {
    display: grid; place-items: center; aspect-ratio: 1; width: 100%; max-width: 128px; margin: 0 auto 10px;
    font-family: var(--font-display); font-weight: 800; font-size: 2.2rem;
    border-radius: 46% 54% 50% 50% / 52% 46% 54% 48%; object-fit: cover;
}
.face__name { display: block; font-weight: 800; line-height: 1.25; }
.face__role { display: block; font-size: .9rem; color: var(--ink-soft); }
.face--sun .face__initials, .team-card--sun .team-card__initials { background: var(--sun); }
.face--coral .face__initials, .team-card--coral .team-card__initials { background: var(--coral); }
.face--teal .face__initials, .team-card--teal .team-card__initials { background: var(--teal); }
.face--sky .face__initials, .team-card--sky .team-card__initials { background: var(--sky); }
.face--grape .face__initials, .team-card--grape .team-card__initials { background: var(--grape-soft); }
.face--leaf .face__initials, .team-card--leaf .team-card__initials { background: var(--leaf); }

.filter { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 40px; }
.filter__btn {
    font: 700 1rem var(--font-body); padding: 10px 18px; border-radius: 999px; cursor: pointer;
    background: var(--paper); color: var(--ink); border: 2px solid var(--field-edge); /* 3:1 or better, so the button's edge shows (1.4.11) */
}
.filter__btn:hover { border-color: var(--ink); }
.filter__btn.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
/* Leadership row at the top of Our Providers: a quiet line of the three people to ask when something needs escalating */
.leaders { max-width: 1180px; margin: 0 auto 44px; padding: 4px 0 30px; border-bottom: 1px solid var(--line); text-align: center; }
.leaders__label { font-size: .95rem; letter-spacing: .14em; text-transform: uppercase; color: var(--indigo); margin: 0 0 22px; }
.leaders__row { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 32px; }
.leaders__link { display: inline-flex; align-items: center; gap: 16px; text-decoration: none; color: inherit; padding: 6px 8px; border-radius: 999px; }
.leaders__link:hover strong, .leaders__link:focus-visible strong { text-decoration: underline; text-underline-offset: 3px; }
.leaders__photo { width: 88px; height: 88px; border-radius: 50%; border: 4px solid var(--indigo); object-fit: cover; margin: 0; flex: none; }
.leaders__photo.team-card__initials { display: grid; place-items: center; font-weight: 800; font-size: 1.7rem; max-width: none; color: var(--indigo); }
/* Until headshots arrive, pale initials so the circles don't outshine the photos beside them */
.leaders .team-card--sun .team-card__initials { background: var(--sun-soft); } .leaders .team-card--coral .team-card__initials { background: var(--coral-soft); }
.leaders .team-card--teal .team-card__initials { background: var(--teal-soft); } .leaders .team-card--sky .team-card__initials { background: var(--sky-soft); }
.leaders .team-card--grape .team-card__initials { background: var(--grape-soft); } .leaders .team-card--leaf .team-card__initials { background: var(--leaf-soft); }
.leaders__text { display: flex; flex-direction: column; text-align: left; line-height: 1.25; max-width: 260px; } /* long titles wrap, so three leaders still fit in one row */
.leaders__text strong { font-size: 1.22rem; }
.leaders__text small { font-size: 1rem; color: var(--ink-soft); }
.leaders__note { max-width: 720px; margin: 22px auto 0; font-size: 1.02rem; color: var(--ink-soft); }
.leaders__note p { margin: 0; }
/* A clear gap between paragraphs. Blank lines typed in the editor (empty paragraphs) are skipped,
   so the spacing looks the same whether or not an editor presses Enter twice. */
.leaders__note p + p { margin-top: .7em; }
.leaders__note p:empty { display: none; }
@media (max-width: 640px) { .leaders__row { flex-direction: column; align-items: center; gap: 8px; } .leaders__link { width: 300px; } .leaders__photo { width: 80px; height: 80px; } }
.team-group { margin-bottom: 48px; }
.team-group__title { display: inline-block; padding: 4px 18px; border-radius: 999px; font-size: 1.5rem; }
.team-group__title--sun { background: var(--sun-soft); } .team-group__title--coral { background: var(--coral-soft); }
.team-group__title--teal { background: var(--teal-soft); } .team-group__title--sky { background: var(--sky-soft); }
.team-group__title--grape { background: var(--grape-soft); } .team-group__title--leaf { background: var(--leaf-soft); }
.team-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.team-card {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    background: var(--paper); border-radius: var(--radius); padding: 24px 20px;
    border: 2px solid #d6d7ea; box-shadow: 0 8px 20px -16px rgba(30,42,58,.4);
}
.team-card__photo img { border: 4px solid var(--indigo); border-radius: 50%; margin: 0 auto 10px; width: 100%; max-width: 150px; }
.team-card__initials { max-width: 120px; border: 4px solid var(--indigo); border-radius: 50%; }
.team-card .team-card__initials { width: 120px; height: 120px; max-width: none; }
.team-card__name { font-size: 1.25rem; margin: 6px 0 2px; }
.team-card__creds { font-weight: 700; color: var(--ink-soft); margin: 0 0 14px; font-size: .95rem; }
.team-card__title { font-weight: 700; color: var(--indigo); margin: 4px 0 0; font-size: .95rem; }
.team-card__fun { display: flex; gap: 6px; justify-content: center; align-items: center; font-size: .9rem; color: var(--ink-soft); margin: 8px 0 0; }

/* ---------- Careers ---------- */
.careers-band { position: relative; background: var(--indigo); color: #fff; padding: 72px 0 clamp(96px, 10vw, 130px); margin: 80px 0 24px; }

.careers-band__inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
.careers-band__text p:not(.eyebrow) { font-size: 1.15rem; }
.careers-band__points { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 10px; }
.careers-band__points li { display: flex; gap: 10px; align-items: flex-start; font-weight: 700; }
.careers-band__points .icon { flex: none; color: var(--sun); margin-top: 3px; }
.careers-band__media { max-width: 460px; justify-self: center; width: 100%; }
@media (max-width: 860px) { .careers-band__inner { grid-template-columns: 1fr; } .careers-band__media { max-width: 300px; order: -1; } }

.job-list { list-style: none; padding: 0; margin: 0 0 32px; display: grid; gap: 18px; }
.job-card { position: relative; display: flex; gap: 20px; justify-content: space-between; align-items: center; background: var(--paper); border-radius: var(--radius); padding: 24px 28px; border: 2px solid var(--line); border-left-width: 10px; }
.job-card h3 a { color: var(--ink); text-decoration: none; }
.job-card h3 a::after { content: ""; position: absolute; inset: 0; }
.job-card:hover { box-shadow: var(--shadow); }
.job-card p:last-child { margin: 0; color: var(--ink-soft); }
.job-card__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.job-card__meta span { display: inline-flex; align-items: center; gap: 4px; background: var(--cream); border-radius: 999px; padding: 3px 12px; font-weight: 700; font-size: .9rem; }
.job-card__meta--page { margin-top: 8px; }
.job-card__go { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--sun); }
.job-card--sun { border-left-color: var(--sun); } .job-card--coral { border-left-color: var(--coral); } .job-card--teal { border-left-color: var(--teal); }
.job-card--sky { border-left-color: var(--sky); } .job-card--grape { border-left-color: var(--grape); } .job-card--leaf { border-left-color: var(--leaf); }
.openings-note { text-align: center; font-size: 1.15rem; max-width: 640px; margin: -12px auto 32px; color: var(--ink-soft); }
.openings-more { text-align: center; max-width: 640px; margin: 0 auto; }

/* Roles we hire for (shown while no job is posted) */
.roles { list-style: none; padding: 0; margin: 0; display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.role { display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--paper); border-radius: var(--radius); padding: 26px 20px 24px; border: 2px solid var(--line); border-top-width: 8px; }
.role__icon { width: 60px; height: 60px; border-radius: 20px; display: grid; place-items: center; margin-bottom: 14px; }
.role__title { font-size: 1.25rem; margin-bottom: .25em; }
.role__note { color: var(--ink-soft); font-size: .98rem; margin: 0 0 16px; }
.role__btn { margin-top: auto; }
.role--sun { border-top-color: var(--sun); } .role--sun .role__icon { background: var(--sun-soft); color: #9a5a00; }
.role--coral { border-top-color: var(--coral); } .role--coral .role__icon { background: var(--coral-soft); color: var(--coral-deep); }
.role--teal { border-top-color: var(--teal); } .role--teal .role__icon { background: var(--teal-soft); color: var(--teal-deep); }
.role--sky { border-top-color: var(--sky); } .role--sky .role__icon { background: var(--sky-soft); color: var(--sky-deep); }
.role--grape { border-top-color: var(--grape); } .role--grape .role__icon { background: var(--grape-soft); color: var(--grape-deep); }
.role--leaf { border-top-color: var(--leaf); } .role--leaf .role__icon { background: var(--leaf-soft); color: var(--leaf-deep); }

/* Chosen providers ("Meet who you'd work with") */
.leads { list-style: none; padding: 0; margin: 0 auto; max-width: 1040px; display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.lead { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--paper); border-radius: var(--radius); padding: 26px 20px 22px; border: 2px solid #d6d7ea; box-shadow: 0 8px 20px -16px rgba(30,42,58,.4); transition: transform .2s, box-shadow .2s; }
.lead:has(a):hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.lead__photo { width: 132px; height: 132px; border-radius: 50%; border: 4px solid var(--indigo); object-fit: cover; margin: 0 0 12px; }
.lead__photo.team-card__initials { display: grid; place-items: center; font-weight: 800; font-size: 2.2rem; max-width: none; color: #fff; }
.lead.team-card--grape .lead__photo.team-card__initials { color: var(--indigo); }
.lead__name { font-size: 1.3rem; margin: 0 0 2px; }
.lead__name a { color: inherit; text-decoration: none; }
.lead__name a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.lead__creds { font-weight: 700; color: var(--ink-soft); margin: 0; font-size: .95rem; }
.lead__title { font-weight: 700; color: var(--indigo); margin: 6px 0 0; font-size: .95rem; }
.lead__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-weight: 800; color: var(--teal-deep); }
.lead:hover .lead__more { text-decoration: underline; text-underline-offset: 3px; }
.lead:focus-within { outline: 3px solid var(--indigo); outline-offset: 3px; }
.leads__btn { margin-top: 32px; }

/* Benefits band: indigo, like the home page's careers band */
.benefits { position: relative; background: var(--indigo); color: #fff; padding: 64px 0 clamp(88px, 9vw, 120px); margin: 80px 0 24px; }
.benefits h2 { color: #fff; }
.benefits .section-heading__intro { color: #e7e7f5; }
.benefits__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px 28px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.benefit { display: flex; gap: 16px; align-items: flex-start; background: rgba(255,255,255,.08); border-radius: 18px; padding: 20px 22px; }
.benefit__icon { flex: none; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--lime); color: var(--ink); }
.benefit__title { font-size: 1.2rem; margin: 2px 0 4px; color: #fff; }
.benefit p { margin: 0; color: #e7e7f5; }

/* Row of photos ("Inside the clinic") */
.photo-strip { list-style: none; padding: 0; margin: 0; display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.photo-strip figure { margin: 0; }
.photo-strip img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }
.photo-strip__item:nth-child(4n+1) img { border-radius: 36px 22px 22px 22px; }
.photo-strip__item:nth-child(4n+3) img { border-radius: 22px 22px 36px 22px; }
.photo-strip figcaption { margin-top: 12px; text-align: center; font-weight: 700; color: var(--ink-soft); }

/* A job posting */
.job-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; padding-top: 24px; padding-bottom: 24px; }
.job-layout__main .callout { margin-bottom: 24px; }
.job-section { margin-top: 32px; }
.job-section h2 { font-size: 1.7rem; }
.job-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.job-points li { display: flex; gap: 10px; align-items: flex-start; }
.job-points .icon { flex: none; margin-top: 4px; color: var(--grape-deep); }
.job-points--check .icon { color: var(--teal-deep); }
.job-more h2 { font-size: 1.7rem; margin-top: 1.4em; }
.job-more ul { padding-left: 1.3em; }
.job-facts dl { margin: 0 0 20px; display: grid; gap: 10px; }
.job-facts dl div { display: grid; grid-template-columns: 92px 1fr; gap: 8px; }
.job-facts dt { font-weight: 800; color: var(--indigo); }
.job-facts dd { margin: 0; }
.job-facts__note { font-size: .95rem; color: var(--ink-soft); margin: 4px 0 12px; }
@media (max-width: 900px) { .job-layout { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
    .leads { grid-template-columns: 1fr 1fr; gap: 14px; }
    .lead { padding: 20px 10px 18px; }
    .lead__photo { width: 96px; height: 96px; }
    .lead__photo.team-card__initials { font-size: 1.8rem; }
    .lead__name { font-size: 1.15rem; }
    .photo-strip img { aspect-ratio: 4 / 3; }
}

/* ---------- Testimonial / stats / CTA ---------- */
.testimonial { position: relative; margin: 0; background: var(--paper); border-radius: var(--radius-lg); padding: 48px 44px 36px; box-shadow: var(--shadow); text-align: center; }
.testimonial__mark { width: 56px; color: var(--coral); margin: -80px auto 18px; background: var(--sun); padding: 14px; border-radius: 50%; box-sizing: content-box; }
.testimonial blockquote { margin: 0 0 18px; font-family: var(--font-display); font-size: clamp(1.35rem, 2.4vw, 1.75rem); line-height: 1.35; font-weight: 600; }
.testimonial figcaption span { color: var(--ink-soft); }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; margin: 0; }
.stats__item { display: flex; flex-direction: column-reverse; text-align: center; border-radius: var(--radius); padding: 26px 16px; }
.stats__item dd { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem, 4vw, 3rem); line-height: 1; }
.stats__item dt { font-weight: 700; margin-top: 6px; }
.stats__item--1 { background: var(--sun-soft); } .stats__item--2 { background: var(--coral-soft); }
.stats__item--3 { background: var(--teal-soft); } .stats__item--4 { background: var(--sky-soft); }

.cta { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: center; padding: clamp(32px, 5vw, 56px); border-radius: var(--radius-lg); }
.cta h2 { margin-bottom: .2em; }
.cta p { margin: 0; font-size: 1.15rem; max-width: 36em; }
.cta > div { position: relative; z-index: 1; }
.cta__buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.cta__shape { position: absolute; width: 240px; height: 240px; border-radius: 50%; right: -60px; bottom: -120px; background: rgba(255,255,255,.4); }
.cta--sun { background: var(--sun); } .cta--coral { background: var(--coral-soft); } .cta--teal { background: var(--teal-soft); }
.cta--sky { background: var(--sky-soft); } .cta--grape { background: var(--grape-soft); } .cta--leaf { background: var(--leaf-soft); }

/* ---------- Lists, FAQ, docs ---------- */
.faq { display: grid; gap: 12px; }
.faq__item { background: var(--paper); border-radius: 18px; border: 2px solid var(--line); }
.faq__item summary { cursor: pointer; list-style: none; padding: 18px 56px 18px 22px; position: relative; font-weight: 800; font-size: 1.1rem; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; content: "+" / ""; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; background: var(--sun); display: grid; place-items: center; font-size: 1.3rem; line-height: 1; }
.faq__item[open] summary::after { content: "\2212"; content: "\2212" / ""; }
.faq__item .prose { padding: 0 22px 18px; }

.link-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.link-list li { background: var(--paper); border-radius: 16px; padding: 14px 18px; border: 2px solid var(--line); }
.link-list a { font-weight: 800; }
.link-list span { display: block; color: var(--ink-soft); font-size: .95rem; }

.doc-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.doc-list__item { display: flex; align-items: center; gap: 14px; background: var(--paper); border-radius: 16px; padding: 14px 18px; border: 2px solid var(--line); }
.doc-list__icon { flex: none; width: 44px; height: 44px; border-radius: 14px; background: var(--coral-soft); color: var(--coral-deep); display: grid; place-items: center; }
.doc-list__text { flex: 1; }
.doc-list__text a { font-weight: 800; }
.doc-list__text small { display: block; color: var(--ink-soft); }
.doc-list__type { font-weight: 800; font-size: .85rem; background: var(--sun-soft); padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.doc-list__type--muted { background: var(--cream); color: var(--ink-soft); }

.figure img { border-radius: var(--radius); width: 100%; }
.figure--blob img { border-radius: 58% 42% 50% 50% / 48% 52% 48% 52%; }
.figure figcaption { text-align: center; color: var(--ink-soft); margin-top: 10px; font-size: .95rem; }

/* ---------- Contact ---------- */
.contact-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.form { background: var(--paper); border-radius: var(--radius); padding: clamp(22px, 4vw, 36px); box-shadow: var(--shadow); margin-top: 20px; }
.form__field { margin-bottom: 18px; }
.form__field label { display: block; font-weight: 800; margin-bottom: 6px; }
/* When the browser jumps to a field it won't send ("Please select an item in the list"), keep the field's
   label in view below the sticky header, not just the box (html's scroll-padding-top covers the header). */
.form__field :is(input, select, textarea) { scroll-margin-top: 3rem; }
.form__field input:not([type="checkbox"]):not([type="radio"]), .form__field select, .form__field textarea, .search-form input {
    width: 100%; font: inherit; padding: 13px 16px; border-radius: 14px; border: 2px solid var(--field-edge); background: var(--cream); color: var(--ink);
}
.form__field input:focus, .form__field select:focus, .form__field textarea:focus { border-color: var(--teal-deep); }
.form__field textarea { min-height: 140px; }
.form__field small { color: var(--ink-soft); }
.form__field--check { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 10px; align-items: center; }
.form__field--check label { margin: 0; font-weight: 600; }
.form__req { color: var(--coral-deep); }
.form__note { color: var(--ink-soft); font-size: .95rem; margin: 0 0 14px; }
.form__error { color: var(--coral-deep); font-weight: 700; margin: 6px 0 0; }
.has-error input, .has-error textarea, .has-error select { border-color: var(--coral-deep) !important; }
.form__privacy { display: flex; gap: 8px; align-items: flex-start; font-size: .95rem; color: var(--ink-soft); }
.form__privacy .icon { flex: none; margin-top: 4px; }
.info-card { background: var(--teal-soft); border-radius: var(--radius); padding: 28px; }
.info-card p { display: flex; gap: 12px; align-items: flex-start; }
.info-card .icon { flex: none; margin-top: 3px; color: var(--teal-deep); }
/* The map picture (tools/contact-map.js) is drawn at 1600 x 1200 for 800 x 600 CSS pixels. The box
   shows its middle 500 pixels across, scaled to fit, and never enlarges it past 800 wide, so street
   names stay readable on a phone and the wide single-column layout shows the whole picture. */
.map-figure { margin: 20px 0 0; }
.map { position: relative; display: block; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--shadow); background: #f5f3ee; }
.map img { position: absolute; left: 50%; top: 50%; width: min(800px, 160%); max-width: none; height: auto; transform: translate(-50%, -50%); }
.map-credit { margin: 8px 4px 0; font-size: 0.8125rem; color: var(--ink-soft); }
.search-form { display: flex; gap: 10px; max-width: 560px; }
@media (max-width: 860px) { .contact-layout { grid-template-columns: 1fr; } }

/* ---------- Veterans theme ---------- */
.theme-navy .checklist { background: var(--navy-soft); }
.theme-navy .checklist .icon, .theme-navy .card__icon { color: var(--navy); }
.theme-navy .eyebrow { color: var(--navy); }

/* ---------- Footer ---------- */
.site-footer { background: #f4f4f2; color: var(--ink); margin-top: 80px; border-top: 6px solid var(--lime); padding: 56px 0 0; }
.site-footer a { color: var(--indigo); }
.site-footer a:hover { color: var(--ink); }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; padding-bottom: 36px; }
.site-footer__grid p { display: flex; gap: 10px; align-items: flex-start; }
.site-footer__grid .icon { flex: none; margin-top: 4px; color: var(--indigo); }
.site-footer__about .brand { margin-bottom: 16px; }
.site-footer__heading { font-family: var(--font-body); font-weight: 800; font-size: 1.05rem; letter-spacing: .08em; text-transform: uppercase; }
.site-footer__links { list-style: none; padding: 0; margin: 0; }
.site-footer__links li { border-bottom: 1px solid #d9d9d4; padding: 8px 0; }
.site-footer__links a { display: inline-flex; align-items: center; gap: 6px; }
/* A div, not a p (WAVE reads short bold lines as possible headings), so it repeats the footer p styles. */
.site-footer__hipaa { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 1em; font-weight: 700; }
.site-footer__social { margin-top: 4px; }
/* Free language help band (Section 1557 notice of availability), on every page */
.site-footer__language { border-top: 1px solid #d9d9d4; padding-top: 26px; padding-bottom: 22px; }
.site-footer__language p { max-width: 75ch; margin: 0 0 .8em; }
.site-footer__languages { list-style: none; padding: 0; margin: 0 0 .9em; display: flex; flex-wrap: wrap; gap: 6px 20px; }
.site-footer__languages a { font-weight: 700; }
.site-footer__language a[href^="tel:"] { white-space: nowrap; }
/* A phone number inside right-to-left text keeps its digits in order and on one line. */
.lang-notices .num { white-space: nowrap; unicode-bidi: isolate; direction: ltr; }
.site-footer__bottom { border-top: 1px solid #d9d9d4; padding-top: 18px; padding-bottom: 24px; font-size: .9rem; text-align: center; }
.site-footer__bottom p { margin: 0; }
@media (max-width: 900px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .site-footer__grid { grid-template-columns: 1fr; } }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Numbered quick links (overlaps the slider) ---------- */
.quick-links { position: relative; z-index: 3; margin-top: -56px; }
.quick-links__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); }
.quick-links__item { position: relative; display: flex; gap: 16px; padding: 30px 28px; color: #fff; }
.quick-links__item:nth-child(3n+1) { background: var(--indigo); }
.quick-links__item:nth-child(3n+2) { background: var(--indigo-2); }
.quick-links__item:nth-child(3n+3) { background: var(--lime); color: var(--ink); }
.quick-links__num { font-family: var(--font-display); font-weight: 800; font-size: 2.4rem; line-height: 1; opacity: .85; }
.quick-links__item h2 { font-size: 1.35rem; text-transform: uppercase; letter-spacing: .02em; margin-bottom: 4px; }
.quick-links__item a { color: inherit; text-decoration: none; }
.quick-links__item a::after { content: ""; position: absolute; inset: 0; }
.quick-links__item:hover h2 { text-decoration: underline; text-underline-offset: 4px; }
.quick-links__item p { margin: 0; }
@media (max-width: 860px) { .quick-links { margin-top: 0; padding-top: 24px; } }

/* ---------- Provider cards & profiles ---------- */
.team-card__btn { margin-top: auto; }
.team-card__title + .team-card__btn, .team-card__fun + .team-card__btn { margin-top: 14px; }
.profile { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 56px; align-items: start; padding-top: 16px; }
.profile__photo img, .profile__photo .team-card__initials { width: 100%; max-width: 320px; aspect-ratio: 1; border-radius: 50%; border: 6px solid var(--indigo); object-fit: cover; font-size: 4rem; }
.profile__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.pill--indigo { background: var(--indigo); color: #fff; }
.profile__aside .pill:not(.pill--indigo) { background: var(--indigo-soft); }
.profile__main h2 { font-size: 1.7rem; }
@media (max-width: 800px) { .profile { grid-template-columns: 1fr; gap: 24px; } .profile__photo { max-width: 240px; } }

/* ---------- Form finder ---------- */
.finder { max-width: 960px; margin: 0 auto; background: #f2f3f7; border-radius: 26px; padding: clamp(20px, 4vw, 40px); border-top: 6px solid var(--lime); }
.finder__step { border: 0; padding: 0; margin: 0 0 28px; min-width: 0; }
.finder__question { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 2.4vw, 1.6rem); margin-bottom: 16px; padding: 0; }
.finder__num { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--indigo); color: #fff; display: grid; place-items: center; font-size: 1.2rem; }
.finder__choices { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.finder__choice {
    display: flex; align-items: center; gap: 14px; text-align: left; cursor: pointer;
    font: inherit; color: var(--ink); background: var(--paper); border: 2px solid var(--field-edge); border-radius: 18px; padding: 16px 18px;
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.finder__choice strong { display: block; font-size: 1.05rem; }
.finder__choice small { display: block; color: var(--ink-soft); }
.finder__choice:hover { border-color: var(--indigo); }
.finder__choice[aria-pressed="true"] { border-color: var(--indigo); background: var(--indigo-soft); box-shadow: inset 0 0 0 2px var(--indigo); }
.finder__choice--small { font-weight: 700; justify-content: center; text-align: center; }
.finder__icon { flex: none; width: 52px; height: 52px; border-radius: 16px; background: var(--lime-soft); color: var(--lime-deep); display: grid; place-items: center; }
.finder__result { background: var(--paper); border-radius: 20px; padding: clamp(18px, 3vw, 28px); margin-bottom: 16px; }
.finder__result:focus { outline: 3px solid var(--indigo); outline-offset: 2px; }
.finder__result-title { display: flex; align-items: center; gap: 10px; font-size: 1.35rem; color: var(--indigo); }
.finder__forms { margin-bottom: 18px; }
.finder__note { margin-bottom: 14px; }
.finder__return { display: flex; gap: 12px; background: var(--lime-soft); border-radius: 14px; padding: 14px 16px; margin-bottom: 16px; }
.finder__return .icon { flex: none; margin-top: 3px; color: var(--lime-deep); }
.finder__hint { margin: -6px 0 14px; color: var(--ink-soft); }
.finder__choices--multi .finder__choice::before {
    content: ""; flex: none; width: 24px; height: 24px; border: 2px solid var(--indigo); border-radius: 7px; background: var(--paper);
    display: grid; place-items: center; color: #fff; font-weight: 800; line-height: 1;
}
.finder__choices--multi .finder__choice[aria-pressed="true"]::before { content: "\2713"; content: "\2713" / ""; background: var(--indigo); }
.finder__choices--multi .finder__choice--small { justify-content: flex-start; text-align: left; }
.finder__note--first { background: var(--sun-soft); border-radius: 14px; padding: 14px 16px; }
/* The forms are steps in order, so number them in place of the document icon. */
.finder__forms { counter-reset: form; }
.finder__forms > li { counter-increment: form; }
.finder__forms .doc-list__icon { background: var(--indigo); color: #fff; font-weight: 800; font-size: 1.15rem; }
.finder__forms .doc-list__icon .icon { display: none; }
.finder__forms .doc-list__icon::before { content: counter(form); }
h3.finder__nojs { margin-top: 12px; }
.js .finder__nojs { display: none; }
.js .finder__panel, .js .finder__result { display: none; }
.js .finder__panel.is-open, .js .finder__result.is-open { display: block; animation: finder-in .3s ease-out; }
@keyframes finder-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .js .finder__panel.is-open, .js .finder__result.is-open { animation: none; } }
a.doc-list__type { text-decoration: none; color: var(--indigo); }
a.doc-list__type:hover { text-decoration: underline; }
@media (max-width: 560px) { .doc-list__item { flex-wrap: wrap; } }
/* Phones: the photo sits at the top of the slide (see .slider__frame), so keep that much room above the
   box; a box made taller by text spacing or zoom then grows downward instead of sliding up behind the photo. */
@media (max-width: 860px) { .slider__controls { bottom: 14px; } .slide__inner { padding-top: calc(min(196px, 52vw) + 24px); padding-bottom: 60px; } }

.topbar__vet-short { display: none; }
@media (max-width: 640px) { .topbar__vet-long { display: none; } .topbar__vet-short { display: inline; } }
.doc-list__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ---------- Who we help (conditions) ---------- */
[hidden] { display: none !important; }
.conditions { background: var(--indigo-soft); }
.conditions__search { max-width: 560px; margin: 0 auto 28px; }
.conditions__search label { display: block; font-weight: 800; margin-bottom: 6px; text-align: center; }
.conditions__input { position: relative; }
.conditions__input svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--indigo); pointer-events: none; }
.conditions__input input { width: 100%; font: inherit; padding: 14px 18px 14px 46px; border: 2px solid var(--indigo-2); border-radius: 999px; background: #fff; }

.conditions__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
.conditions__item { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: #fff; border-radius: 16px; padding: 12px 16px; box-shadow: 0 2px 0 rgba(69, 72, 143, .12); }
.conditions__name { font-weight: 700; }
.conditions__services { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: .85rem; font-weight: 800; text-decoration: none; color: #fff; background: var(--indigo); }
.chip:hover { color: #fff; filter: brightness(1.1); }
.chip--coral { background: var(--coral-deep); }
.chip--leaf { background: var(--leaf-deep); }
.chip--grape { background: var(--grape-deep); }
.chip--sky { background: var(--sky-deep); }
.chip--teal { background: var(--teal-deep); }
.conditions__empty { text-align: center; margin-top: 20px; font-weight: 700; }
.conditions__note { text-align: center; color: var(--ink-soft); font-size: .9rem; margin: 12px 0 0; min-height: 1.2em; }
@media (max-width: 760px) { .conditions__list { grid-template-columns: 1fr; } }

/* ---------- Contact extras ---------- */
.info-card .btn { margin-top: 8px; }
.info-card--secure { background: var(--indigo-soft); margin-top: 20px; }
.info-card--secure h2 { display: flex; align-items: center; gap: 10px; font-size: 1.4rem; }
.info-card--secure h2 .icon { margin: 0; color: var(--indigo); }
.info-card--secure p { display: block; }
.contact-layout__more { margin: 16px 4px; font-weight: 700; }
.sticky-card__link { margin: 14px 0 0; font-weight: 700; }
.sticky-card__link a { display: inline-flex; align-items: center; gap: 6px; }
.service-grid__more { text-align: center; margin: 28px 0 0; font-weight: 800; }
.service-grid__more a { display: inline-flex; align-items: center; gap: 8px; }

/* ---------- Butterflies ----------
   Original line art in the logo's rainbow colors. Each wing half is its own
   group so it can flap. Motion is gentle: bursts of fluttering, then gliding.
   On the home slider it stops with the Pause button; in page headers it plays
   once (under 5 seconds) and replays on hover. Reduced motion: no movement. */
.bf { display: block; width: 100%; }
.bf__img { display: block; width: 100%; height: auto; transform-origin: 50% 50%; }

@keyframes bf-flap { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.55); } }
@keyframes bf-flap-again { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.55); } }
@keyframes bf-flutter {
    0%, 40%, 100% { transform: scaleX(1); }
    5%, 15%, 25%, 35% { transform: scaleX(.55); }
    10%, 20%, 30% { transform: scaleX(1); }
}
@keyframes bf-drift {
    0%, 100% { transform: translate(0, 0) rotate(-8deg); }
    25% { transform: translate(16px, -18px) rotate(4deg); }
    50% { transform: translate(-4px, -32px) rotate(-3deg); }
    75% { transform: translate(-18px, -12px) rotate(7deg); }
}
@keyframes bf-arrive {
    0% { transform: translate(var(--from-x, 30vw), var(--from-y, 160px)) rotate(24deg) scale(.5); opacity: 0; }
    15% { opacity: 1; }
    100% { transform: none; opacity: 1; }
}
.bf-fly { position: absolute; display: block; pointer-events: none; z-index: 1;
    animation: bf-arrive var(--arrive, 3.4s) cubic-bezier(.25, .7, .35, 1) var(--delay, 0s) both; }
.bf-fly .bf { transform: rotate(var(--tilt, -8deg)); }

/* Home slider: ambient, pausable */
.slider__butterflies { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.slider .bf-fly .bf { animation: bf-drift var(--drift, 12s) ease-in-out calc(var(--delay, 0s) + var(--arrive, 3.4s)) infinite; }
.slider .bf-fly .bf__img { animation: bf-flutter var(--flutter, 5s) ease-in-out var(--delay, 0s) infinite; }
.slider.is-paused .bf-fly, .slider.is-paused .bf, .slider.is-paused .bf__img { animation-play-state: paused; }
.bf-fly--h1 { width: 104px; right: 2%; top: 3%; --from-x: 30vw; --from-y: 220px; --tilt: 10deg; --flutter: 4.6s; }
.bf-fly--h2 { width: 74px; left: 47%; top: 11%; --delay: .7s; --from-x: -40vw; --from-y: 260px; --drift: 14s; --flutter: 5.6s; }
.bf-fly--h3 { width: 52px; right: 43%; bottom: 17%; --delay: 1.4s; --from-x: 20vw; --from-y: 120px; --drift: 10s; --flutter: 4s; --tilt: -16deg; }
@media (max-width: 860px) {
    .bf-fly--h1 { width: 72px; right: 5%; top: 4%; }
    .bf-fly--h2 { width: 46px; left: 5%; right: auto; top: 9%; }
    .bf-fly--h3 { display: none; }
}

/* Page headers: fly in once, settle, flutter again on hover */
.page-hero__art { position: absolute; inset: 0; pointer-events: none; }
.page-hero .bf-fly .bf__img { animation: bf-flap .5s ease-in-out var(--delay, 0s) 6; }
.page-hero:hover .bf-fly .bf__img { animation: bf-flap-again .5s ease-in-out 3; }
.bf-fly--a { width: 96px; right: 10%; top: 14%; --from-x: 24vw; --from-y: -120px; --tilt: 12deg; }
.bf-fly--b { width: 54px; right: 4%; bottom: 26%; --delay: .5s; --from-x: 30vw; --from-y: 80px; --tilt: -14deg; }
@media (max-width: 760px) {
    .bf-fly--a { width: 52px; right: 6%; top: auto; bottom: 64px; }
    .bf-fly--b { display: none; }
}

/* Soft outline butterfly pattern behind page headers */
.page-hero::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-color: var(--indigo); opacity: .06;
    -webkit-mask: url("../img/butterfly-pattern.a90ddee8f528.svg") 0 0 / 300px repeat;
    mask: url("../img/butterfly-pattern.a90ddee8f528.svg") 0 0 / 300px repeat;
}
.page-hero--navy::before { background-color: #fff; opacity: .08; }

@media (prefers-reduced-motion: reduce) {
    .bf-fly, .bf-fly .bf, .bf-fly .bf__img { animation: none !important; }
}

/* ---------- Service page photo ---------- */
.first-visit--photo { display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; align-items: center; }
.service-photo { width: 100%; height: auto; border-radius: 999px 999px 28px 28px; border: 8px solid #fff; box-shadow: 0 0 0 4px var(--lime), 0 18px 40px -24px rgba(30,42,58,.5); }
@media (max-width: 640px) { .first-visit--photo { grid-template-columns: 1fr; } .service-photo { max-width: 320px; margin: 0 auto; } }
.text-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--indigo); }

/* ---------- First visit photo story ---------- */
.story__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin-bottom: 28px; }
.story__title { margin-bottom: 8px; }
.story__note { max-width: 680px; margin: 0; font-size: 1.1rem; }
.story__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 24px; }
.story__card { margin: 0; height: 100%; background: #fff; border-radius: 24px; overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.story__photo { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.story__placeholder { aspect-ratio: 4 / 3; display: grid; place-items: center; color: var(--indigo); }
.story__placeholder--sky { background: var(--sky-soft); } .story__placeholder--leaf { background: var(--lime-soft); }
.story__placeholder--sun { background: var(--sun-soft); } .story__placeholder--grape { background: var(--grape-soft); }
.story__placeholder--coral { background: var(--coral-soft); } .story__placeholder--teal { background: var(--teal-soft); }
.story__card figcaption { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px 22px; font-size: 1.25rem; line-height: 1.45; font-weight: 600; color: var(--ink); }
.story__num { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--indigo); color: #fff; display: grid; place-items: center; font: 800 1.05rem var(--font-display); }

@media print {
    .topbar, .site-header, .site-footer, .page-hero__art, .wave, .to-top, .story__print, .skip-link, .bf-fly { display: none !important; }
    body { background: #fff; }
    .reveal { opacity: 1; transform: none; } /* sections not yet scrolled into view would print blank */
    .page-hero { padding: 0 0 12px; background: none !important; }
    .page-hero::before { display: none; }
    .section { padding: 0; }
    .story__steps { grid-template-columns: 1fr 1fr; gap: 14px; }
    .story__card { box-shadow: none; border: 2px solid #ccd; break-inside: avoid; }
    .story__placeholder, .story__num { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .story__card figcaption { font-size: 15pt; }
    .page-body:has(.story) > :not(.story) { display: none; }
}
.form-thanks { display: flex; gap: 14px; align-items: flex-start; background: var(--lime-soft); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 24px; font-size: 1.1rem; }
.form-thanks .icon { flex: none; color: var(--lime-deep); }
.form-thanks p { margin: 0; }

/* ---------- Does this sound like your child? ---------- */
.signs { background: var(--indigo-soft); }
.signs__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.signs__card { background: #fff; border-radius: 26px; padding: 26px 26px 28px; box-shadow: var(--shadow); display: flex; flex-direction: column; border-top: 6px solid var(--card-accent, var(--indigo)); }
.signs__icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--card-soft, var(--indigo-soft)); color: var(--card-deep, var(--indigo)); margin-bottom: 14px; }
.signs__title { font-size: 1.35rem; margin-bottom: 12px; }
.signs__list { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; }
.signs__list li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; }
.signs__list .icon { flex: none; margin-top: 3px; color: var(--card-deep, var(--indigo)); }
.signs__btn { margin-top: auto; align-self: flex-start; }
.signs__card--sky { --card-accent: var(--sky); --card-soft: var(--sky-soft); --card-deep: var(--sky-deep); }
.signs__card--coral { --card-accent: var(--coral); --card-soft: var(--coral-soft); --card-deep: var(--coral-deep); }
.signs__card--teal { --card-accent: var(--teal); --card-soft: var(--teal-soft); --card-deep: var(--teal-deep); }
.signs__card--grape { --card-accent: var(--grape); --card-soft: var(--grape-soft); --card-deep: var(--grape-deep); }
.signs__card--leaf { --card-accent: var(--leaf); --card-soft: var(--leaf-soft); --card-deep: var(--leaf-deep); }
.signs__card--sun { --card-accent: var(--sun); --card-soft: var(--sun-soft); --card-deep: #8a5300; }

/* ---------- Our Providers: whole-team photo ---------- */
/* Any shape of photo works: it's shown whole (never cropped), scaled to the
   column, and a tall photo is capped in height with soft side margins. */
.team-photo { margin: 0 auto 40px; max-width: 980px; width: fit-content; border-radius: 56px 56px 24px 24px; overflow: hidden; border: 10px solid #fff; box-shadow: 0 0 0 5px var(--lime), var(--shadow); background: var(--leaf-soft); }
.team-photo img { display: block; width: auto; max-width: 100%; height: auto; max-height: 620px; }
.team-photo--illo { width: auto; display: grid; place-items: center; padding: 20px; }
.team-photo--illo .illo { width: min(440px, 80%); height: auto; }
@media (max-width: 640px) { .team-photo { border-radius: 32px 32px 16px 16px; border-width: 6px; } }

/* Service cards with a photo: the photo fills the top of the card */
.service-card--photo { padding-top: 0; }
.service-card__photo { display: block; width: calc(100% + 52px); max-width: none; height: 190px; object-fit: cover; margin: 0 -26px 20px; position: relative; z-index: 1; }
/* On the Services page the photos are tall (4:5), so families see the whole child, not just a face (Kimberly, November 2026) */
.template-services .service-card__photo { height: auto; aspect-ratio: 4 / 5; }
/* The home page's service cards show the same tall photos on computers and tablets (Kimberly, November 2026).
   On phones the cards stack one per row, so they keep a shorter, wide crop to save scrolling. */
.section--services .service-card__photo { height: auto; aspect-ratio: 4 / 5; }
@media (max-width: 479px) { .section--services .service-card__photo { aspect-ratio: 8 / 5; } }

/* Photo cards (home page) */
.photo-cards { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.photo-card { position: relative; display: flex; flex-direction: column; background: var(--paper); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); text-align: center; transition: transform .2s; }
.photo-card:hover { transform: translateY(-4px); }
.photo-card__img { display: block; width: 100%; height: 220px; object-fit: cover; }
.photo-card__img--blank { background: var(--indigo-soft); }
.photo-card__body { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 22px 26px; flex: 1; }
.photo-card__title { font-size: 1.6rem; margin: 0; }
.photo-card__title a { color: var(--indigo); text-decoration: none; }
.photo-card__title a::after { content: ""; position: absolute; inset: 0; } /* the whole card is the link */
.photo-card p { margin: 0; }
.photo-card .slogan { margin-top: auto; }
.photo-card__btn { pointer-events: none; }
.slogan { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; line-height: 1.2; }
.slogan__1 { color: var(--grape-deep); }
.slogan__2 { color: var(--leaf-deep); }
.slogan__3 { color: var(--sky-deep); }
.photo-card:focus-within { outline: 3px solid var(--indigo); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .photo-card { transition: none; } .photo-card:hover { transform: none; } }

/* Logos (insurance plans) */
.logos__list { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.logos__item { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px; display: grid; place-items: center; min-height: 86px; }
.logos__img { max-width: 100%; max-height: 62px; width: auto; height: auto; }
.logos__text { max-width: 820px; margin: 0 auto; text-align: center; }

/* Card rows that divide evenly: the Services page shows its six cards as two rows of three,
   the home page's service row fits all five across, and the Super Six values sit three by two. */
.template-services .service-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.section--services .service-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.card-grid--6 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/* Team faces: 2, 4 or 8 across, so the home page's eight faces never leave one alone on a row */
.face-row { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 560px) { .face-row { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1100px) { .face-row { grid-template-columns: repeat(8, 1fr); } }

/* ---------- Family resources (resources app; blocks resource_directory and related_resources) ---------- */
.nowrap { white-space: nowrap; }
.resources__search { max-width: 560px; margin: 0 auto 22px; }
.resources__search label { display: block; font-weight: 800; margin-bottom: 6px; text-align: center; }
.resources__topics ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.topic-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; font-weight: 800; font-size: .95rem; text-decoration: none; color: var(--ink); background: var(--paper); border: 2px solid var(--field-edge); }
.topic-chip:hover, .topic-chip:focus-visible { border-color: currentColor; }
.topic-chip--sun .icon { color: #9a5a00; }
.topic-chip--coral .icon { color: var(--coral-deep); }
.topic-chip--teal .icon { color: var(--teal-deep); }
.topic-chip--sky .icon { color: var(--sky-deep); }
.topic-chip--grape .icon { color: var(--grape-deep); }
.topic-chip--leaf .icon { color: var(--leaf-deep); }
.resources__count { text-align: center; color: var(--ink-soft); font-size: .9rem; margin: 14px 0 0; min-height: 1.2em; }

.resource-topic { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 20px 40px; align-items: start; padding: 40px 0; border-top: 2px solid var(--line); scroll-margin-top: 110px; }
.resource-topic:first-of-type { margin-top: 18px; }
.resource-topic__title { font-size: clamp(1.4rem, 2.4vw, 1.75rem); margin: 12px 0 8px; }
.resource-topic__head p { color: var(--ink-soft); margin: 0; }
.resource-topic__icon { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; }
.resource-topic--sun .resource-topic__icon { background: var(--sun-soft); color: #9a5a00; }
.resource-topic--coral .resource-topic__icon { background: var(--coral-soft); color: var(--coral-deep); }
.resource-topic--teal .resource-topic__icon { background: var(--teal-soft); color: var(--teal-deep); }
.resource-topic--sky .resource-topic__icon { background: var(--sky-soft); color: var(--sky-deep); }
.resource-topic--grape .resource-topic__icon { background: var(--grape-soft); color: var(--grape-deep); }
.resource-topic--leaf .resource-topic__icon { background: var(--leaf-soft); color: var(--leaf-deep); }

.resource-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.resource-grid--two { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.resource { display: flex; flex-direction: column; gap: 8px; background: var(--paper); border: 2px solid var(--line); border-radius: 18px; padding: 18px 20px; }
.resource__name { font-size: 1.1rem; margin: 0; line-height: 1.3; }
.resource__name a { color: var(--indigo); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.resource__name a:hover { color: var(--indigo-2); }
.resource__name .icon { display: inline-block; vertical-align: -2px; margin-left: 6px; opacity: .7; }
.resource__desc { margin: 0; color: var(--ink-soft); font-size: .97rem; }
.resource__meta { margin: auto 0 0; padding-top: 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: .8rem; font-weight: 800; background: var(--indigo-soft); color: var(--indigo); text-decoration: none; }
.tag--georgia { background: var(--lime-soft); color: #3d6114; } /* 6.3:1 */
.tag--local { background: var(--sun-soft); color: #7a4700; }
.tag--online { background: var(--sky-soft); color: #235a9c; } /* 5.8:1 */
a.tag:hover { filter: brightness(.95); }
.resource__phone { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; font-size: .9rem; color: var(--ink); }

.resources__empty { text-align: center; font-weight: 700; margin: 28px 0 0; }
.resources__note { margin-top: 28px; padding-top: 18px; border-top: 2px solid var(--line); color: var(--ink-soft); font-size: .9rem; }
.resources__note p { margin: 0 0 6px; }

.related-resources__intro { color: var(--ink-soft); }
.related-resources__more { margin: 16px 0 0; }

@media (max-width: 860px) {
    .resource-topic { grid-template-columns: 1fr; padding: 32px 0; }
    .resource-topic__head { display: grid; grid-template-columns: 48px 1fr; column-gap: 14px; align-items: center; }
    .resource-topic__icon { width: 48px; height: 48px; border-radius: 15px; }
    .resource-topic__title { margin: 0; }
    .resource-topic__head p { grid-column: 1 / -1; margin-top: 10px; }
}
@media print {
    .resources__search, .resources__topics, .resources__count { display: none !important; }
    .resource { break-inside: avoid; border-width: 1px; }
    .resource__name a::after { content: " (" attr(href) ")"; font-weight: 400; font-size: .8rem; color: var(--ink-soft); word-break: break-all; }
}
@media (max-width: 560px) {
    .resources__topics ul { gap: 8px; }
    .topic-chip { padding: 6px 12px; font-size: .88rem; }
}

/* ---------- Social links (includes/social_links.html; the home page's Social links block and the footer) ---------- */
.social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.social__link { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: 999px; background: var(--paper); color: var(--ink); border: 2px solid var(--field-edge); font-weight: 800; text-decoration: none; }
.social__link:hover, .social__link:focus-visible { border-color: var(--indigo); color: var(--indigo); }
.social__link--instagram .brand-icon { color: #e4405f; }
.social__link--facebook .brand-icon { color: #0866ff; }
.social__link--tiktok .brand-icon { color: #000; }
.social__link--youtube .brand-icon { color: #f00; }
.social--small { gap: 10px; }
.social--small .social__link { width: 44px; height: 44px; padding: 0; justify-content: center; box-shadow: 0 1px 3px rgba(30, 42, 58, .15); }
.social--small .social__link:hover { box-shadow: 0 0 0 3px var(--indigo); }

.follow { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px 40px; background: var(--grape-soft); border-radius: var(--radius); padding: 34px 44px; }
.follow__title { margin: 4px 0 6px; font-size: clamp(1.6rem, 3vw, 2.1rem); }
.follow__text p:last-child { margin: 0; color: var(--ink-soft); }
@media (max-width: 640px) {
    .follow { padding: 26px 22px; }
    .social--large { width: 100%; }
    .social--large li { flex: 1 1 100%; }
    .social--large .social__link { width: 100%; justify-content: center; }
}

/* ---------- Focus (WCAG 2.4.7 and 1.4.11) ----------
   A two-tone ring, white inside and dark outside, so it stands out on every background:
   the dark ring on light areas, the white ring on the indigo top bar, slider, tiles and navy
   veterans header. Last in the file and one notch more specific, so component box-shadows
   don't replace it. */
:root :focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 3px #fff; }
:root main:focus-visible { outline: none; box-shadow: none; } /* the skip link's target */
/* The contact page map: focus is inside Google's frame, so ring its box (site.js adds has-focus). */
/* Cards that are links as a whole (their title link stretches over the card): ring the card,
   not the title's words. Quick-link tiles sit in a row that clips its corners, so their ring
   is drawn just inside the tile. Browsers without :has() keep the ring on the title link. */
@supports selector(:has(*)) {
    :root .card:has(.card__title a:focus-visible),
    :root .job-card:has(h3 a:focus-visible),
    :root .photo-card:has(.photo-card__title a:focus-visible) { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 3px #fff; }
    :root .quick-links__item:has(a:focus-visible) { outline: 3px solid var(--ink); outline-offset: -7px; box-shadow: inset 0 0 0 4px #fff; }
    :root .card__title a:focus-visible, :root .job-card h3 a:focus-visible,
    :root .photo-card__title a:focus-visible, :root .quick-links__item a:focus-visible { outline: none; box-shadow: none; }
}

/* ---------- Windows High Contrast (forced colors) ----------
   The browser replaces our backgrounds and shadows with the user's colours, so a selected
   state that is only a filled background disappears. Give it a shape of its own instead:
   the current page's tab is underlined, pressed filter and form-finder buttons get a check
   mark (the pick-several choices already draw one), and the current slider dot keeps its fill
   in the user's text colour. */
@media (forced-colors: active) {
    .site-nav__link.is-active { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
    .filter__btn.is-active::before,
    .finder__choices:not(.finder__choices--multi) > .finder__choice[aria-pressed="true"]::before { content: "\2713\00a0"; content: "\2713\00a0" / ""; }
    .slider__dot::before { forced-color-adjust: none; border-color: CanvasText; background: Canvas; }
    .slider__dot[aria-current="true"]::before { background: CanvasText; }
}