body {
    background-color: white;
    /* Ensure the iframe has a white background */
}

/* ==========================================================================
   LOTS4KIDS OT Services — Design Tokens  v2.0 (refinement pass)
   Source of truth: LOTS4KIDS_DESIGN_SYSTEM.md §7–§10, §30–§33, §43
   Changes in v2: added hairline system, ink footer tone, measure widths,
   tighter type scale for mobile, motion tokens, removed decorative-blob vars.
   ========================================================================== */

:root {
    /* ---------- Colour · brand ---------- */
    --navy: #172A3A;
    --navy-600: #22394C;
    --navy-400: #3D5567;
    --ink: #101E2A;
    /* footer, deeper than navy for separation */
    --coral: #F47C73;
    --coral-dark: #D960５７;
    --coral-dark: #D96057;
    --coral-tint: #FCEDEB;

    /* ---------- Colour · soft accents ---------- */
    --sky: #DDF3F5;
    --sky-tint: #F1FAFB;
    --sky-ink: #22666D;
    /* accessible text on sky */
    --lavender: #EEE9F7;
    --lavender-tint: #F8F6FC;
    --lavender-ink: #5C4B93;
    --yellow: #FFF3CF;
    --yellow-tint: #FFFAEC;
    --yellow-ink: #7A5C10;

    /* ---------- Colour · surface & text ---------- */
    --bg: #FAFAF7;
    --surface: #FFFFFF;
    --cream: #F3F2EC;
    --text: #172A3A;
    --text-2: #53616D;
    --text-3: #7B8790;
    --on-dark: #F7F9FA;
    --on-dark-2: rgba(247, 249, 250, .72);
    --on-dark-line: rgba(247, 249, 250, .14);

    /* ---------- Hairlines & rules (the backbone of the v2 system) ---------- */
    --line: rgba(23, 42, 58, .12);
    --line-soft: rgba(23, 42, 58, .075);
    --line-strong: rgba(23, 42, 58, .24);

    /* ---------- Typography ---------- */
    --font-display: 'Manrope Variable', 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Helvetica, sans-serif;
    --font-body: 'Inter Variable', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Helvetica, sans-serif;

    --fs-hero: clamp(2.625rem, 1.2rem + 5.6vw, 4.25rem);
    /* 42 → 68 */
    --fs-h1: clamp(2.125rem, 1.35rem + 3.1vw, 3.5rem);
    /* 34 → 56 */
    --fs-h2: clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem);
    /* 28 → 44 */
    --fs-h3: clamp(1.25rem, 1.13rem + .5vw, 1.625rem);
    /* 20 → 26 */
    --fs-h4: clamp(1.0625rem, 1.02rem + .2vw, 1.25rem);
    /* 17 → 20 */
    --fs-lead: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
    /* 17 → 20 */
    --fs-body: 1.0625rem;
    /* 17 */
    --fs-sm: .9375rem;
    /* 15 */
    --fs-xs: .8125rem;
    /* 13 */
    --fs-num: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);

    --lh-tight: 1.06;
    --lh-head: 1.14;
    --lh-body: 1.68;
    --ls-display: -.032em;
    --ls-head: -.02em;
    --ls-label: .11em;

    /* ---------- Measure (line length) ---------- */
    --measure: 64ch;
    --measure-wide: 78ch;

    /* ---------- Spacing · 8px base ---------- */
    --s1: 8px;
    --s2: 16px;
    --s3: 24px;
    --s4: 32px;
    --s5: 48px;
    --s6: 64px;
    --s7: 80px;
    --s8: 96px;
    --s9: 120px;

    --sect: clamp(64px, 4vw + 52px, 120px);
    --sect-sm: clamp(48px, 2.6vw + 36px, 72px);
    --sect-xs: clamp(40px, 2vw + 30px, 56px);

    /* ---------- Layout ---------- */
    --container: 1240px;
    --container-sm: 820px;
    --container-xs: 680px;
    --gutter: clamp(20px, 4vw, 44px);
    --gap: clamp(20px, 1.6vw + 10px, 32px);

    /* ---------- Radius (restrained, §32) ---------- */
    --r-xs: 6px;
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-xl: 28px;
    --r-pill: 999px;
    --r-arch: 999px 999px 20px 20px;

    /* ---------- Shadows (very subtle, §33) ---------- */
    --sh-1: 0 1px 2px rgba(23, 42, 58, .04);
    --sh-2: 0 6px 20px rgba(23, 42, 58, .05);
    --sh-3: 0 16px 40px rgba(23, 42, 58, .08);

    /* ---------- Motion ---------- */
    --ease: cubic-bezier(.22, .61, .36, 1);
    --ease-io: cubic-bezier(.4, 0, .2, 1);
    --t1: 160ms;
    --t2: 280ms;
    --t3: 480ms;

    /* ---------- Z ---------- */
    --z-hdr: 60;
    --z-scrim: 70;
    --z-drawer: 80;
    --z-mbar: 55;
}

/* ==========================================================================
   LOTS4KIDS OT Services — Base  v2.0
   Reset · typography · focus · a11y primitives
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 104px;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    font-weight: 400;
    font-feature-settings: "kern" 1, "liga" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    text-rendering: optimizeLegibility;
}

body.is-locked {
    overflow: hidden
}

/* ---------- Type ---------- */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: var(--lh-head);
    letter-spacing: var(--ls-head);
    color: var(--navy);
    margin: 0 0 .5em;
    text-wrap: balance;
}

h1 {
    font-size: var(--fs-h1);
    font-weight: 800;
    letter-spacing: var(--ls-display);
    line-height: var(--lh-tight)
}

h2 {
    font-size: var(--fs-h2)
}

h3 {
    font-size: var(--fs-h3)
}

h4 {
    font-size: var(--fs-h4)
}

p {
    margin: 0 0 1em;
    max-width: var(--measure-wide)
}

p:last-child {
    margin-bottom: 0
}

strong {
    font-weight: 600;
    color: var(--navy)
}

em {
    font-style: italic
}

small {
    font-size: var(--fs-xs)
}

a {
    color: var(--navy);
    text-underline-offset: 3px;
    text-decoration-thickness: 1px
}

a:hover {
    color: var(--coral-dark)
}

ul,
ol {
    margin: 0 0 1em;
    padding-left: 1.15em
}

li {
    margin-bottom: .45em
}

li::marker {
    color: var(--coral)
}

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

img {
    height: auto;
    background: var(--cream)
}

figure {
    margin: 0
}

hr {
    border: 0;
    border-top: 1px solid var(--line-soft);
    margin: var(--s5) 0
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    margin: 0;
    padding: 0;
    cursor: pointer
}

input,
select,
textarea {
    font: inherit;
    color: inherit
}

/* numerals in editorial lists */
.num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1
}

/* ---------- Focus (WCAG 2.2 AA) ---------- */
:focus {
    outline: none
}

:focus-visible {
    outline: 3px solid var(--coral);
    outline-offset: 3px;
    border-radius: var(--r-xs);
}

.on-dark :focus-visible,
.cta :focus-visible,
.ftr :focus-visible {
    outline-color: var(--sky)
}

/* ---------- Utilities ---------- */
.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0
}

.skip {
    position: absolute;
    top: -64px;
    left: var(--s2);
    z-index: 200;
    background: var(--navy);
    color: #fff;
    padding: 12px 20px;
    border-radius: 0 0 var(--r-sm) var(--r-sm);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-sm);
    text-decoration: none;
    transition: top var(--t1) var(--ease);
}

.skip:focus {
    top: 0;
    color: #fff
}

.sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none
}

.ico {
    width: 1.15em;
    height: 1.15em;
    flex: none;
    display: inline-block;
    vertical-align: -.16em
}

::selection {
    background: var(--coral);
    color: #fff
}

/* ---------- Placeholder / TODO treatment ---------- */
.todo {
    border-bottom: 1px dashed var(--coral);
    text-decoration: none;
    cursor: help
}

[data-todo] {
    border-bottom: 1px dashed rgba(247, 249, 250, .55);
    text-decoration: none
}

.note {
    font-size: var(--fs-sm);
    color: var(--text-3);
    max-width: var(--measure);
    margin-top: var(--s3);
    line-height: 1.6
}

/* ---------- Reveal (only with JS; never hides content otherwise) ---------- */
.js .rv {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--t3) var(--ease), transform var(--t3) var(--ease)
}

.js .rv.in {
    opacity: 1;
    transform: none
}

.js .rv-mask {
    clip-path: inset(0 0 100% 0);
    transition: clip-path .7s var(--ease)
}

.js .rv-mask.in {
    clip-path: inset(0 0 0 0)
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }

    .js .rv {
        opacity: 1;
        transform: none
    }

    .js .rv-mask {
        clip-path: none
    }
}

/* ---------- Print ---------- */
@media print {

    .hdr,
    .ftr,
    .cta,
    .mbar,
    .scrim,
    .skip,
    .drawer {
        display: none !important
    }

    body {
        background: #fff;
        color: #000;
        font-size: 11pt
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: .85em;
        color: #555
    }
}

/* ==========================================================================
   LOTS4KIDS OT Services — Layout  v2.0
   Container · sections · editorial grids · header · drawer · footer · CTA
   ========================================================================== */

/* ---------- Container ---------- */
.wrap {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter)
}

.wrap--sm {
    max-width: var(--container-sm)
}

.wrap--xs {
    max-width: var(--container-xs)
}

.measure {
    max-width: var(--measure)
}

/* ---------- Sections ---------- */
.sect {
    padding-block: var(--sect);
    position: relative
}

.sect--sm {
    padding-block: var(--sect-sm)
}

.sect--xs {
    padding-block: var(--sect-xs)
}

.sect--sky {
    background: var(--sky-tint)
}

.sect--cream {
    background: var(--cream)
}

.sect--lav {
    background: var(--lavender-tint)
}

.sect--yellow {
    background: var(--yellow-tint)
}

.sect--navy {
    background: var(--navy);
    color: var(--on-dark)
}

.sect--navy h1,
.sect--navy h2,
.sect--navy h3,
.sect--navy h4 {
    color: #fff
}

.sect--navy p {
    color: var(--on-dark-2)
}

.sect--navy strong {
    color: #fff
}

.sect--navy li::marker {
    color: var(--coral)
}

.sect--navy .lead {
    color: var(--on-dark-2)
}

/* hairline that separates two same-tone sections */
.hairline-top {
    border-top: 1px solid var(--line-soft)
}

/* ---------- Editorial grids ---------- */
.cols {
    display: grid;
    gap: var(--gap)
}

.cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr))
}

.cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr))
}

.cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr))
}

/* asymmetric editorial splits */
.split {
    display: grid;
    gap: clamp(32px, 4.6vw, 88px);
    align-items: start
}

.split-40 {
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr)
}

.split-45 {
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr)
}

.split-50 {
    grid-template-columns: repeat(2, minmax(0, 1fr))
}

.split-55 {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr)
}

.split-mid {
    align-items: center
}

/* sticky two-column (editorial device used on Home/Services) */
.sticky-col {
    display: grid;
    grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
    gap: clamp(32px, 4.5vw, 88px);
    align-items: start
}

.sticky-col__aside {
    position: sticky;
    top: 120px
}

.sticky-col__aside .btn,
.sticky-col__aside .link-arrow {
    margin-top: var(--s3)
}

/* ---------- Section heading system ---------- */
.shead {
    margin-bottom: clamp(32px, 3.2vw, 60px)
}

.shead--row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s3) var(--s5);
    align-items: flex-end;
    justify-content: space-between
}

.shead--row>div {
    max-width: var(--measure)
}

.shead--center {
    text-align: center;
    max-width: var(--container-sm);
    margin-inline: auto
}

.shead__lead {
    color: var(--text-2);
    font-size: var(--fs-lead);
    line-height: 1.6;
    max-width: 56ch;
    margin-top: var(--s2)
}

.shead__lead.on-dark {
    color: var(--on-dark-2)
}

/* eyebrow / section label */
.eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--coral-dark);
    margin: 0 0 var(--s2);
}

.eyebrow::before {
    content: "";
    width: 20px;
    height: 1.5px;
    background: currentColor;
    opacity: .7;
    flex: none
}

.eyebrow--center {
    justify-content: center
}

.eyebrow.on-dark {
    color: var(--sky)
}

.eyebrow .n {
    font-variant-numeric: tabular-nums;
    color: var(--text-3);
    font-weight: 600;
    letter-spacing: .06em;
}

.eyebrow.on-dark .n {
    color: rgba(247, 249, 250, .5)
}

.lead {
    font-size: var(--fs-lead);
    line-height: 1.62;
    color: var(--text-2);
    max-width: var(--measure)
}

/* ---------- Header ---------- */
.hdr {
    position: sticky;
    top: 0;
    z-index: var(--z-hdr);
    background: rgba(250, 250, 247, .88);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color var(--t2) var(--ease), background-color var(--t2) var(--ease), box-shadow var(--t2) var(--ease);
}

.hdr.stuck {
    background: rgba(255, 255, 255, .95);
    border-bottom-color: var(--line-soft);
    box-shadow: 0 4px 20px rgba(23, 42, 58, .045)
}

.hdr__in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s4);
    height: 80px;
    transition: height var(--t2) var(--ease)
}

.hdr.stuck .hdr__in {
    height: 68px
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    flex: none
}

.brand:hover {
    text-decoration: none
}

.brand__mark {
    width: 40px;
    height: 40px;
    flex: none;
    transition: transform var(--t2) var(--ease)
}

.brand:hover .brand__mark {
    transform: rotate(-6deg)
}

.brand__name {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.0625rem;
    letter-spacing: -.02em;
    color: var(--navy);
    line-height: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.brand__name i {
    font-style: normal;
    font-weight: 600;
    font-size: .5625rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--text-3);
}

.brand--light .brand__name {
    color: #fff
}

.brand--light .brand__name i {
    color: rgba(255, 255, 255, .55)
}

.nav {
    margin-left: auto
}

.nav__list {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0
}

.nav__list>li {
    margin: 0
}

.nav__list a {
    display: block;
    padding: 9px 13px;
    border-radius: var(--r-sm);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .9063rem;
    letter-spacing: -.005em;
    color: var(--text-2);
    text-decoration: none;
    transition: color var(--t1) var(--ease), background-color var(--t1) var(--ease);
}

.nav__list a:hover {
    color: var(--navy);
    background: rgba(23, 42, 58, .05)
}

.nav__list a[aria-current="page"] {
    color: var(--navy);
    background: var(--sky)
}

.nav__mcta {
    display: none
}

.hdr__act {
    display: flex;
    align-items: center;
    gap: var(--s2);
    flex: none;
    margin-left: auto;
}

.navbtn {
    display: none;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--navy);
    transition: background-color var(--t1) var(--ease), border-color var(--t1) var(--ease);
}

.navbtn:hover {
    border-color: var(--line-strong);
    background: var(--cream)
}

.navbtn .ico {
    width: 22px;
    height: 22px
}

.navbtn__x {
    display: none
}

.navbtn[aria-expanded="true"] .navbtn__i {
    display: none
}

.navbtn[aria-expanded="true"] .navbtn__x {
    display: block
}

/* ---------- Mobile drawer ---------- */
.scrim {
    position: fixed;
    inset: 0;
    z-index: var(--z-scrim);
    background: rgba(16, 30, 42, .5);
    opacity: 0;
    transition: opacity var(--t2) var(--ease);
    backdrop-filter: blur(2px);
}

.scrim.on {
    opacity: 1
}

.drawer {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: var(--z-drawer);
    width: min(100%, 400px);
    background: var(--bg);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--t2) var(--ease), visibility var(--t2) var(--ease);
    box-shadow: -20px 0 60px rgba(16, 30, 42, .18);
}

.drawer.open {
    transform: none;
    visibility: visible
}

.drawer__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s2);
    padding: 16px var(--s3);
    border-bottom: 1px solid var(--line-soft);
    flex: none;
    padding-top: max(16px, env(safe-area-inset-top));
}

.drawer__close {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--navy);
}

.drawer__close .ico {
    width: 20px;
    height: 20px
}

.drawer__body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--s2) var(--s3) var(--s4)
}

.drawer__nav {
    list-style: none;
    margin: 0;
    padding: 0
}

.drawer__nav li {
    margin: 0
}

.drawer__nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s2);
    padding: 17px 2px;
    border-bottom: 1px solid var(--line-soft);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.1875rem;
    letter-spacing: -.015em;
    color: var(--navy);
    text-decoration: none;
}

.drawer__nav a .ico {
    width: 16px;
    height: 16px;
    color: var(--text-3);
    transition: transform var(--t1) var(--ease), color var(--t1) var(--ease)
}

.drawer__nav a:hover .ico,
.drawer__nav a:focus-visible .ico {
    transform: translateX(4px);
    color: var(--coral)
}

.drawer__nav a[aria-current="page"] {
    color: var(--coral-dark)
}

.drawer__nav a[aria-current="page"]::after {
    content: "Current"
}

.drawer__foot {
    flex: none;
    border-top: 1px solid var(--line-soft);
    padding: var(--s3);
    padding-bottom: max(var(--s3), env(safe-area-inset-bottom));
    background: var(--surface);
}

.drawer__foot .btn {
    width: 100%;
    margin-bottom: var(--s2)
}

.drawer__foot ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px
}

.drawer__foot li {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--fs-sm);
    color: var(--text-2)
}

.drawer__foot .ico {
    width: 17px;
    height: 17px;
    color: var(--coral)
}

.drawer__foot a {
    color: var(--text-2);
    text-decoration: none;
    border-bottom: 1px solid var(--line)
}

.drawer__foot a:hover {
    color: var(--navy)
}

/* ---------- Page hero base ---------- */
.phero {
    position: relative;
    padding-block: clamp(40px, 4.4vw, 72px) clamp(48px, 5vw, 88px);
    overflow: hidden
}

.phero__in {
    position: relative;
    z-index: 1
}

.phero--split {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: clamp(32px, 4.5vw, 80px);
    align-items: center
}

.phero__copy h1 {
    margin-bottom: var(--s3)
}

.phero__copy .lead {
    margin-bottom: var(--s4)
}

/* ---------- Breadcrumb ---------- */
.crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0 0 var(--s3);
    font-size: var(--fs-xs);
    letter-spacing: .02em
}

.crumb li {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-3)
}

.crumb a {
    color: var(--text-2);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color var(--t1) var(--ease), border-color var(--t1) var(--ease)
}

.crumb a:hover {
    color: var(--coral-dark);
    border-bottom-color: currentColor
}

.crumb .ico {
    width: 12px;
    height: 12px;
    opacity: .45
}

.crumb [aria-current] {
    color: var(--navy);
    font-weight: 500
}

.on-dark .crumb li {
    color: rgba(247, 249, 250, .5)
}

.on-dark .crumb a {
    color: var(--on-dark-2)
}

.on-dark .crumb [aria-current] {
    color: #fff
}

/* ---------- Hero meta strip (Modern Multi-Screen Card Grid) ---------- */
.metastrip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: clamp(40px, 4.5vw, 68px);
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-xl);
    padding: 16px;
    box-shadow: 0 12px 36px rgba(23, 42, 58, .05);
}

.metastrip>div {
    background: var(--bg);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 6px;
    transition: transform var(--t2) var(--ease), box-shadow var(--t2) var(--ease), border-color var(--t2) var(--ease), background-color var(--t2) var(--ease);
}

.metastrip>div:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(23, 42, 58, .07);
    border-color: rgba(244, 124, 115, .35);
    background: #ffffff;
}

.metastrip dt {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .7188rem;
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--coral-dark);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.metastrip dt::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--coral);
    display: inline-block;
    flex: none;
}

.metastrip dt .ico {
    width: 16px;
    height: 16px;
    color: var(--coral);
    flex: none;
}

.metastrip dt:has(.ico)::before {
    display: none;
}

.metastrip dd {
    margin: 0;
    font-family: var(--font-body);
    font-size: .9375rem;
    color: var(--navy);
    font-weight: 600;
    line-height: 1.45;
}

/* ---------- CTA Section (Elevated Master Bento) ---------- */
.cta {
    background: var(--navy);
    color: var(--on-dark);
    padding-block: clamp(64px, 7vw, 110px);
    position: relative;
    overflow: hidden;
}

.cta::before {
    content: "";
    position: absolute;
    top: -40%;
    right: -20%;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(244, 124, 115, .15) 0%, rgba(244, 124, 115, 0) 70%);
    pointer-events: none;
}

.cta::after {
    content: "";
    position: absolute;
    bottom: -40%;
    left: -15%;
    width: 550px;
    height: 550px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(221, 243, 245, .12) 0%, rgba(221, 243, 245, 0) 70%);
    pointer-events: none;
}

.cta__in {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
    gap: clamp(32px, 4.5vw, 68px);
    align-items: center;
    position: relative;
    z-index: 1;
}

.cta__copy {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
}

.cta h2 {
    color: #fff;
    font-size: clamp(2rem, 3.2vw, 2.75rem);
    line-height: 1.18;
    letter-spacing: -.03em;
    margin: 0 0 10px 0;
    max-width: 22ch;
}

.cta p.lead,
.cta p {
    color: var(--on-dark-2);
    font-size: clamp(1rem, 1.2vw, 1.125rem);
    line-height: 1.6;
    max-width: 48ch;
    margin: 0;
}

.cta__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 10px 0 0 0;
}

.cta__chips li {
    font-size: .8125rem;
    font-weight: 700;
    color: var(--sky);
    background: rgba(221, 243, 245, .1);
    border: 1px solid rgba(221, 243, 245, .18);
    padding: 6px 14px;
    border-radius: var(--r-pill);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cta__act {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: flex-end;
    align-items: center;
}

.cta__act .btn {
    box-shadow: 0 10px 25px rgba(0, 0, 0, .2);
}

/* ---------- Footer (Midnight Luxury Tier) ---------- */
.ftr {
    background: linear-gradient(180deg, #132433 0%, #0C1721 100%);
    color: var(--on-dark-2);
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding-block: clamp(56px, 6vw, 84px) 0;
    position: relative;
}

.ftr__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr) minmax(0, 1.1fr) minmax(0, .9fr);
    gap: clamp(32px, 3.8vw, 56px);
    padding-bottom: clamp(44px, 4.5vw, 64px);
}

.ftr__brand {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ftr__brand p {
    font-size: .9375rem;
    line-height: 1.65;
    margin: 0;
    max-width: 36ch;
    color: var(--on-dark-2);
}

.ftr__contact,
.ftr-contact-list {
    list-style: none;
    padding: 0;
    margin: 6px 0 0 0;
    display: grid;
    gap: 10px;
}

.ftr__contact li,
.ftr-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: var(--r-md);
    font-size: .875rem;
    color: var(--on-dark-2);
    line-height: 1.5;
    transition: background var(--t1) var(--ease), border-color var(--t1) var(--ease), transform var(--t1) var(--ease);
}

.ftr__contact li:hover,
.ftr-contact-item:hover {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(244, 124, 115, .4);
    transform: translateX(2px);
}

.ftr__contact .ico,
.ftr-contact-item .ico {
    width: 17px;
    height: 17px;
    margin-top: 3px;
    color: var(--coral);
    flex: none;
}

.ftr__contact a,
.ftr-contact-item a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, .2);
    transition: color var(--t1) var(--ease), border-color var(--t1) var(--ease);
}

.ftr__contact a:hover,
.ftr-contact-item a:hover {
    color: var(--sky);
    border-bottom-color: var(--coral);
}

.ftr-contact-item span {
    font-size: .8125rem;
    color: rgba(247, 249, 250, .6);
    display: block;
}

.ftr h2 {
    font-family: var(--font-display);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ftr h2::after {
    content: "";
    display: block;
    width: 16px;
    height: 2px;
    background: var(--coral);
    border-radius: var(--r-pill);
}

.ftr__col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
}

.ftr__col li {
    margin: 0;
}

.ftr__col a {
    color: var(--on-dark-2);
    text-decoration: none;
    font-size: .9063rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color var(--t1) var(--ease), transform var(--t1) var(--ease);
}

.ftr__col a:hover {
    color: #fff;
    transform: translateX(3px);
}

.ftr__col--plain {
    list-style: none;
    padding: 0;
    margin: 0 0 16px 0 !important;
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px !important;
}

.ftr__col--plain li {
    font-size: .75rem;
    font-weight: 600;
    color: var(--sky);
    background: rgba(221, 243, 245, .08);
    border: 1px solid rgba(221, 243, 245, .15);
    padding: 4px 10px;
    border-radius: var(--r-pill);
    margin: 0;
}

.ftr__col .btn {
    margin-top: 14px;
    width: 100%;
}

.ftr__word {
    border-top: 1px solid rgba(255, 255, 255, .07);
    padding-block: clamp(20px, 3vw, 32px);
    font-family: var(--font-display);
    font-weight: 900;
    letter-spacing: .02em;
    font-size: clamp(1.5rem, 4.2vw, 3.5rem);
    line-height: 1;
    color: rgba(255, 255, 255, .05);
    user-select: none;
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 1) 15%, rgba(0, 0, 0, 1) 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 1) 15%, rgba(0, 0, 0, 1) 85%, transparent 100%);
}

.ftr__bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
    align-items: center;
    justify-content: space-between;
    padding-block: 20px 24px;
    font-size: .8125rem;
    border-top: 1px solid rgba(255, 255, 255, .07);
}

.ftr__bottom p {
    margin: 0;
    color: rgba(247, 249, 250, .45);
    max-width: none;
}

.ftr__legal {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    padding: 0;
    margin: 0;
}

.ftr__legal a {
    color: rgba(247, 249, 250, .55);
    text-decoration: none;
    transition: color var(--t1) var(--ease);
}

.ftr__legal a:hover {
    color: #fff;
}

/* ---------- Mobile sticky action bar ---------- */
.mbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-mbar);
    display: none;
    gap: 10px;
    align-items: center;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(250, 250, 247, .96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--line-soft);
    box-shadow: 0 -8px 28px rgba(23, 42, 58, .07);
    transform: translateY(120%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.35s cubic-bezier(.22, .61, .36, 1), opacity 0.35s ease;
}

.mbar.is-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.mbar .btn {
    flex: 1;
    min-height: 48px;
    padding-inline: 14px
}

.mbar__call {
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: var(--r-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--navy);
}

.mbar__call .ico {
    width: 20px;
    height: 20px
}

body.no-mbar .mbar,
.no-mbar .mbar {
    display: none !important;
}

body.is-locked .mbar {
    transform: translateY(120%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ==========================================================================
   LOTS4KIDS OT Services — Components  v2.0
   Buttons · links · index rows · bands · steps · accordion · forms ·
   photo placeholders · portraits · callouts · chips
   ========================================================================== */

/* ---------- Buttons (§29) ---------- */
.btn {
    --bg: var(--coral);
    --fg: #fff;
    --bd: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 52px;
    padding: 0 24px;
    background: var(--bg);
    color: var(--fg);
    border: 1.5px solid var(--bd);
    border-radius: 12px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .9375rem;
    letter-spacing: -.008em;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: transform var(--t1) var(--ease), background-color var(--t1) var(--ease),
        border-color var(--t1) var(--ease), color var(--t1) var(--ease), box-shadow var(--t1) var(--ease);
}

.btn:hover {
    transform: translateY(-2px);
    color: var(--fg);
    box-shadow: 0 8px 20px rgba(23, 42, 58, .13)
}

.btn:active {
    transform: translateY(0);
    box-shadow: none
}

.btn .ico {
    width: 17px;
    height: 17px;
    transition: transform var(--t1) var(--ease)
}

.btn:hover .ico {
    transform: translateX(3px)
}

.btn--sm {
    min-height: 44px;
    padding: 0 17px;
    font-size: .875rem;
    border-radius: var(--r-sm)
}

.btn--lg {
    min-height: 56px;
    padding: 0 28px;
    font-size: 1rem;
    border-radius: var(--r-md)
}

.btn--primary:hover,
.btn--coral:hover {
    --bg: var(--coral-dark)
}

.btn--outline {
    --bg: transparent;
    --fg: var(--navy);
    --bd: var(--line-strong)
}

.btn--outline:hover {
    --bg: var(--navy);
    --fg: #fff;
    --bd: var(--navy);
    box-shadow: none
}

.btn--ghost {
    --bg: transparent;
    --fg: #fff;
    --bd: rgba(255, 255, 255, .32)
}

.btn--ghost:hover {
    --bg: rgba(255, 255, 255, .1);
    --bd: rgba(255, 255, 255, .6);
    box-shadow: none
}

.btn--navy {
    --bg: var(--navy);
    --fg: #fff
}

.btn--navy:hover {
    --bg: var(--navy-600)
}

.btn--sky {
    --bg: var(--sky);
    --fg: var(--sky-ink);
    --bd: transparent
}

.btn--sky:hover {
    --bg: #C9EAEE
}

.btn[aria-disabled="true"] {
    opacity: .6;
    pointer-events: none
}

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center
}

/* ---------- Text link with arrow ---------- */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .9063rem;
    color: var(--navy);
    text-decoration: none;
    padding-bottom: 3px;
    border-bottom: 1.5px solid rgba(244, 124, 115, .5);
    transition: color var(--t1) var(--ease), border-color var(--t1) var(--ease), gap var(--t1) var(--ease);
}

.link-arrow .ico {
    width: 16px;
    height: 16px;
    color: var(--coral);
    transition: transform var(--t1) var(--ease)
}

.link-arrow:hover {
    color: var(--coral-dark);
    border-bottom-color: var(--coral-dark);
    gap: 12px
}

.link-arrow:hover .ico {
    transform: translateX(2px)
}

.link-arrow--sm {
    font-size: .8438rem
}

.on-dark .link-arrow {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, .35)
}

.on-dark .link-arrow .ico {
    color: var(--coral)
}

.on-dark .link-arrow:hover {
    color: var(--sky);
    border-bottom-color: var(--sky)
}

/* ---------- Index rows (the primary v2 content device) ---------- */
.idx {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--line)
}

.idx>li {
    margin: 0;
    border-bottom: 1px solid var(--line)
}

.idx a,
.idx__row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--s3);
    align-items: baseline;
    padding: 22px 12px 22px 4px;
    text-decoration: none;
    position: relative;
    transition: background-color var(--t2) var(--ease), padding-inline var(--t2) var(--ease);
}

.idx a:hover,
.idx a:focus-visible {
    background: var(--surface);
    padding-inline: 16px 20px
}

.idx__n {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .8125rem;
    letter-spacing: .06em;
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
    transition: color var(--t2) var(--ease);
    padding-top: 4px;
}

.idx a:hover .idx__n {
    color: var(--coral)
}

.idx__t {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.0625rem;
    letter-spacing: -.015em;
    color: var(--navy);
    display: block;
    margin-bottom: 4px
}

.idx__d {
    display: block;
    font-size: var(--fs-sm);
    color: var(--text-2);
    line-height: 1.55;
    max-width: 52ch
}

.idx__go {
    align-self: center;
    color: var(--text-3);
    transition: transform var(--t2) var(--ease), color var(--t2) var(--ease)
}

.idx__go .ico {
    width: 18px;
    height: 18px
}

.idx a:hover .idx__go {
    transform: translateX(5px);
    color: var(--coral)
}

.idx--2col {
    column-count: 2;
    column-gap: clamp(32px, 4vw, 72px);
    border-top: 0
}

.idx--2col>li {
    break-inside: avoid;
    border-top: 1px solid var(--line)
}

.idx--plain a {
    grid-template-columns: auto minmax(0, 1fr)
}

/* ---------- Age / band rows ---------- */
.bands {
    border-top: 1px solid var(--line)
}

.band {
    display: grid;
    grid-template-columns: minmax(120px, .42fr) minmax(0, 1fr) minmax(0, .9fr);
    gap: clamp(20px, 3vw, 48px);
    align-items: start;
    padding: clamp(24px, 2.6vw, 36px) 0;
    border-bottom: 1px solid var(--line);
}

.band__age {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--fs-num);
    letter-spacing: -.04em;
    color: var(--navy);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.band__age span {
    display: block;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--text-3);
    margin-top: 10px
}

.band h3 {
    font-size: var(--fs-h4);
    margin-bottom: 8px
}

.band p {
    color: var(--text-2);
    font-size: .9688rem;
    margin: 0
}

.band__link {
    align-self: center
}

/* ---------- Roster (team list) ---------- */
.roster {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--line)
}

.roster>li {
    margin: 0;
    border-bottom: 1px solid var(--line)
}

.roster a,
.roster__row {
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding: 16px 4px;
    text-decoration: none;
    transition: background-color var(--t2) var(--ease), padding-inline var(--t2) var(--ease);
}

.roster a:hover {
    background: var(--surface);
    padding-inline: 14px
}

.roster__av {
    width: 52px;
    height: 52px;
    flex: none;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(150deg, var(--sky), var(--lavender));
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1rem;
    color: var(--navy);
    opacity: .95;
}

.roster__t {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.0625rem;
    color: var(--navy);
    letter-spacing: -.015em;
    display: block
}

.roster__r {
    font-size: var(--fs-sm);
    color: var(--text-3);
    display: block;
    margin-top: 2px
}

.roster__go {
    margin-left: auto;
    color: var(--text-3);
    transition: transform var(--t2) var(--ease), color var(--t2) var(--ease)
}

.roster a:hover .roster__go {
    transform: translateX(4px);
    color: var(--coral)
}

/* ---------- Cards (used sparingly in v2) ---------- */
.card {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-lg);
    padding: clamp(22px, 2vw, 30px);
    box-shadow: var(--sh-1);
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform var(--t2) var(--ease), box-shadow var(--t2) var(--ease), border-color var(--t2) var(--ease);
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: var(--sh-2);
    border-color: var(--line)
}

.card h3 {
    font-size: var(--fs-h4);
    margin-bottom: 8px
}

.card h3 a {
    text-decoration: none;
    color: var(--navy)
}

.card p {
    color: var(--text-2);
    font-size: .9688rem;
    line-height: 1.6;
    margin: 0
}

.card .link-arrow {
    margin-top: auto;
    padding-top: var(--s3)
}

.card--flush {
    padding: 0;
    overflow: hidden
}

.card--tint {
    background: var(--sky-tint);
    border-color: transparent
}

.card--tint2 {
    background: var(--lavender-tint);
    border-color: transparent
}

.card--tint3 {
    background: var(--yellow-tint);
    border-color: transparent
}

/* icon badge — used only where it genuinely aids scanning */
.ibadge {
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--coral-tint);
    color: var(--coral-dark);
    margin-bottom: var(--s2);
}

.ibadge .ico {
    width: 21px;
    height: 21px
}

.ibadge--sky {
    background: var(--sky);
    color: var(--sky-ink)
}

.ibadge--lav {
    background: var(--lavender);
    color: var(--lavender-ink)
}

.ibadge--yellow {
    background: var(--yellow);
    color: var(--yellow-ink)
}

/* ---------- Chips ---------- */
.chips {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 0
}

.chips li {
    margin: 0
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 15px;
    border-radius: var(--r-pill);
    background: var(--surface);
    border: 1px solid var(--line);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .8438rem;
    color: var(--navy);
    text-decoration: none;
    transition: border-color var(--t1) var(--ease), transform var(--t1) var(--ease), background-color var(--t1) var(--ease);
}

.chip .ico {
    width: 15px;
    height: 15px;
    color: var(--coral)
}

a.chip:hover {
    border-color: var(--coral);
    transform: translateY(-2px);
    color: var(--navy);
    background: var(--surface)
}

.chip--solid {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff
}

.chip--solid .ico {
    color: var(--sky)
}

a.chip--solid:hover {
    background: var(--navy-600);
    border-color: var(--navy-600)
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: var(--r-pill);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .6875rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    background: var(--sky);
    color: var(--sky-ink);
}

.badge--coral {
    background: var(--coral-tint);
    color: var(--coral-dark)
}

.badge--lav {
    background: var(--lavender);
    color: var(--lavender-ink)
}

.badge--yellow {
    background: var(--yellow);
    color: var(--yellow-ink)
}

/* ---------- Lists ---------- */
.checks {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 14px
}

.checks li {
    position: relative;
    padding-left: 32px;
    margin: 0;
    color: var(--text-2);
    line-height: 1.55
}

.checks li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--sky) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322666D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='m5 12.5 4.5 4.5L19 7'/></svg>") center/12px no-repeat;
}

.checks strong {
    display: block;
    color: var(--navy);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 2px
}

.checks--lg {
    gap: 20px;
    font-size: var(--fs-lead)
}

.checks--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px clamp(24px, 3vw, 48px)
}

.checks--tight li {
    padding-left: 28px;
    font-size: .9688rem
}

.on-dark .checks li {
    color: var(--on-dark-2)
}

.on-dark .checks li::before {
    background-color: rgba(221, 243, 245, .16)
}

.on-dark .checks strong {
    color: #fff
}

.bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 9px
}

.bullets li {
    position: relative;
    padding-left: 18px;
    margin: 0;
    color: var(--text-2);
    font-size: .9688rem;
    line-height: 1.55
}

.bullets li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .62em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--coral)
}

/* numbered editorial list */
.nlist {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid var(--line)
}

.nlist li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--s2);
    align-items: start;
    margin: 0;
    padding: 16px 0;
    border-bottom: 1px solid var(--line-soft);
}

.nlist__n {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .75rem;
    letter-spacing: .06em;
    color: var(--coral);
    padding-top: 5px;
    font-variant-numeric: tabular-nums
}

.nlist strong {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--navy);
    font-size: 1rem;
    margin-bottom: 2px
}

.nlist p {
    color: var(--text-2);
    font-size: .9375rem;
    line-height: 1.55;
    margin: 0
}

/* definition list */
.defs {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid var(--line)
}

.defs li {
    margin: 0;
    padding: 20px 0;
    border-bottom: 1px solid var(--line-soft);
    display: grid;
    gap: 6px
}

.defs strong {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--navy);
    font-size: 1.0625rem;
    letter-spacing: -.012em
}

.defs p {
    color: var(--text-2);
    font-size: .9688rem;
    margin: 0;
    max-width: var(--measure)
}

/* ---------- Process steps (§21) ---------- */
.steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(24px, 3vw, 48px);
    position: relative;
    counter-reset: st
}

.steps::before {
    content: "";
    position: absolute;
    top: 31px;
    left: 64px;
    right: 64px;
    height: 1px;
    background-image: linear-gradient(90deg, currentColor 0 7px, transparent 7px 14px);
    background-size: 14px 1px;
    opacity: .22;
}

.step {
    position: relative;
    margin: 0;
    counter-increment: st
}

.step__n {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.125rem;
    letter-spacing: -.02em;
    background: var(--surface);
    color: var(--navy);
    border: 1px solid var(--line);
    margin-bottom: var(--s3);
    position: relative;
    z-index: 1;
    font-variant-numeric: tabular-nums;
}

.step h3 {
    font-size: 1.125rem;
    margin-bottom: 8px
}

.step p {
    color: var(--text-2);
    font-size: .9688rem;
    margin: 0
}

.steps--light .step__n {
    background: rgba(255, 255, 255, .07);
    border-color: var(--on-dark-line);
    color: #fff
}

.steps--light .step p {
    color: var(--on-dark-2)
}

/* ---------- Accordion (§26) ---------- */
.acc {
    border-top: 1px solid var(--line)
}

.acc__item {
    border-bottom: 1px solid var(--line)
}

.acc__h {
    margin: 0
}

.acc__t {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s3);
    padding: 22px 4px;
    text-align: left;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.0625rem;
    letter-spacing: -.015em;
    color: var(--navy);
    line-height: 1.35;
    transition: color var(--t1) var(--ease), padding-inline var(--t2) var(--ease);
}

.acc__t:hover {
    color: var(--coral-dark);
    padding-inline: 10px
}

.acc__t .acc__i {
    width: 30px;
    height: 30px;
    flex: none;
    padding: 7px;
    box-sizing: border-box;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--line);
    color: var(--navy);
    transition: transform var(--t2) var(--ease), background-color var(--t2) var(--ease), color var(--t2) var(--ease), border-color var(--t2) var(--ease);
}

.acc__t[aria-expanded="true"] .acc__i {
    transform: rotate(180deg);
    background: var(--coral);
    border-color: var(--coral);
    color: #fff
}

.acc__p {
    overflow: hidden
}

.acc__b {
    padding: 0 56px 24px 4px;
    color: var(--text-2);
    font-size: .9688rem;
    line-height: 1.65
}

.acc__b p {
    max-width: var(--measure)
}

.acc__b a {
    color: var(--navy);
    text-decoration-color: rgba(244, 124, 115, .55)
}

.acc__b ul {
    margin-bottom: 0
}

/* ---------- Callouts ---------- */
.callout {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 20px 22px;
    border-radius: var(--r-md);
    background: var(--sky);
    color: var(--navy);
    font-size: .9688rem;
    line-height: 1.6;
}

.callout .ico {
    width: 20px;
    height: 20px;
    color: var(--sky-ink);
    margin-top: 3px;
    flex: none
}

.callout p {
    margin: 0;
    max-width: none
}

.callout strong {
    display: block;
    margin-bottom: 4px
}

.callout a {
    color: inherit;
    text-decoration-color: rgba(23, 42, 58, .35)
}

.callout--yellow {
    background: var(--yellow)
}

.callout--yellow .ico {
    color: var(--yellow-ink)
}

.callout--lav {
    background: var(--lavender)
}

.callout--lav .ico {
    color: var(--lavender-ink)
}

.callout--coral {
    background: var(--coral-tint)
}

.callout--coral .ico {
    color: var(--coral-dark)
}

.callout--line {
    background: var(--surface);
    border: 1px solid var(--line-soft)
}

.callout--line .ico {
    color: var(--coral)
}

/* ---------- Pull quote ---------- */
.pull {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.25rem, 1.05rem + .9vw, 1.75rem);
    line-height: 1.35;
    letter-spacing: -.022em;
    color: var(--navy);
    margin: 0 0 var(--s4);
    padding-left: var(--s3);
    border-left: 2px solid var(--coral);
    max-width: 34ch;
}

.on-dark .pull {
    color: #fff;
    border-left-color: var(--coral)
}

/* ---------- Image caption ---------- */
.caption {
    display: block;
    margin-top: 12px;
    font-size: var(--fs-xs);
    color: var(--text-3);
    line-height: 1.5;
    max-width: 44ch;
    padding-left: 14px;
    border-left: 2px solid var(--line);
}

/* ---------- Photo placeholder system (see assets/images/README.md) ---------- */
.ph {
    position: relative;
    overflow: hidden;
    margin: 0;
    background: var(--sky);
    border-radius: var(--r-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4/3;
    box-shadow: var(--sh-2);
}

.ph--arch {
    border-radius: var(--r-arch)
}

.ph--tall {
    aspect-ratio: 4/5
}

.ph--portrait {
    aspect-ratio: 3/4
}

.ph--wide {
    aspect-ratio: 16/10
}

.ph--sq {
    aspect-ratio: 1/1
}

.ph__wash {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(115% 90% at 16% 6%, rgba(255, 255, 255, .92), rgba(255, 255, 255, 0) 56%),
        linear-gradient(158deg, var(--sky) 0%, #EAF4F1 46%, var(--lavender) 100%);
}

.ph__wash--warm {
    background:
        radial-gradient(115% 90% at 18% 8%, rgba(255, 255, 255, .92), rgba(255, 255, 255, 0) 56%),
        linear-gradient(158deg, var(--yellow) 0%, #F7F3E6 46%, var(--sky) 100%);
}

.ph__wash--lav {
    background:
        radial-gradient(115% 90% at 20% 8%, rgba(255, 255, 255, .92), rgba(255, 255, 255, 0) 58%),
        linear-gradient(158deg, var(--lavender) 0%, #F3F0FA 50%, var(--sky) 100%);
}

/* artboard annotation — reads as intentional, not broken */
.ph::after {
    content: "";
    position: absolute;
    inset: 12px;
    border: 1px dashed rgba(23, 42, 58, .16);
    border-radius: calc(var(--r-lg) - 8px);
    pointer-events: none;
}

.ph--arch::after {
    border-radius: var(--r-arch)
}

.ph__art {
    width: 40%;
    max-width: 170px;
    color: var(--navy);
    opacity: .2;
    position: relative;
    z-index: 1
}

.ph__tag {
    position: absolute;
    left: 20px;
    bottom: 20px;
    z-index: 2;
    font-family: var(--font-display);
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--navy);
    background: rgba(255, 255, 255, .78);
    padding: 6px 10px;
    border-radius: var(--r-pill);
    backdrop-filter: blur(4px);
    max-width: calc(100% - 40px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ph-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit
}

.ph-img+.ph__tag {
    display: none
}

/* ---------- Portraits / monograms ---------- */
.mono {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4/5;
    border-radius: var(--r-lg);
    background: linear-gradient(155deg, var(--sky) 0%, #EFF2F0 52%, var(--lavender) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: var(--sh-1);
}

.mono b {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 2.75rem;
    letter-spacing: -.04em;
    color: var(--navy);
    opacity: .2
}

.mono em {
    font-style: normal;
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--text-3);
    background: rgba(255, 255, 255, .72);
    padding: 5px 9px;
    border-radius: var(--r-pill);
}

.mono--round {
    aspect-ratio: 1/1;
    border-radius: 50%
}

.mono--round b {
    font-size: 1.375rem
}

.mono--round em {
    display: none
}

.mono--lg b {
    font-size: 4rem
}

/* ---------- Founder feature ---------- */
.founder {
    display: grid;
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
    gap: clamp(28px, 3.6vw, 64px);
    align-items: start;
}

.founder__media {
    position: relative
}

.founder__meta {
    margin-top: -32px;
    margin-left: auto;
    width: min(100%, 300px);
    position: relative;
    z-index: 2;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    padding: 18px 20px;
    box-shadow: var(--sh-3);
}

.founder__meta strong {
    display: block;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.125rem;
    color: var(--navy);
    letter-spacing: -.02em
}

.founder__meta span {
    display: block;
    font-size: var(--fs-sm);
    color: var(--text-3);
    margin-top: 4px;
    line-height: 1.45
}

.founder__body h2,
.founder__body h3 {
    margin-bottom: 6px
}

.founder__body>p {
    color: var(--text-2)
}

/* ---------- Location rows (mobile therapy) ---------- */
.loclist {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--line)
}

.loclist li {
    margin: 0;
    border-bottom: 1px solid var(--line);
    padding: 20px 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--s2);
    align-items: start
}

.loclist .ico {
    width: 20px;
    height: 20px;
    color: var(--coral);
    margin-top: 4px
}

.loclist strong {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--navy);
    font-size: 1.0625rem;
    margin-bottom: 3px
}

.loclist p {
    margin: 0;
    color: var(--text-2);
    font-size: .9375rem;
    line-height: 1.55
}

/* ---------- Coverage panel ---------- */
.coverage {
    border-top: 1px solid var(--line)
}

.coverage>div {
    padding: 20px 0;
    border-bottom: 1px solid var(--line-soft);
    display: grid;
    gap: 4px
}

.coverage dt {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .9375rem;
    color: var(--navy)
}

.coverage dd {
    margin: 0;
    color: var(--text-2);
    font-size: .9375rem;
    line-height: 1.55
}

/* ---------- Forms (§27) ---------- */
.form {
    display: grid;
    gap: var(--s3)
}

.form__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s3)
}

.field {
    display: grid;
    gap: 8px;
    margin: 0
}

.field>label {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .875rem;
    color: var(--navy);
    letter-spacing: -.005em
}

.field .opt {
    font-weight: 500;
    color: var(--text-3);
    font-family: var(--font-body);
    font-size: .7813rem;
    letter-spacing: 0
}

.field input,
.field select,
.field textarea {
    width: 100%;
    min-height: 54px;
    padding: 15px 16px;
    background: var(--surface);
    color: var(--text);
    border: 1.5px solid var(--line);
    border-radius: var(--r-sm);
    font-size: 1rem;
    line-height: 1.5;
    transition: border-color var(--t1) var(--ease), box-shadow var(--t1) var(--ease);
    appearance: none;
}

.field textarea {
    min-height: 148px;
    resize: vertical
}

.field select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2353616D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9.5 6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 18px;
    padding-right: 46px;
}

.field input::placeholder,
.field textarea::placeholder {
    color: #9BA5AD
}

.field input:hover,
.field select:hover,
.field textarea:hover {
    border-color: var(--line-strong)
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--coral);
    box-shadow: 0 0 0 4px rgba(244, 124, 115, .15);
    outline: none
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
    outline: 3px solid var(--coral);
    outline-offset: 2px
}

.field.invalid input,
.field.invalid select,
.field.invalid textarea {
    border-color: #C0433A;
    background: #FEF7F6
}

.field__err {
    display: none;
    align-items: center;
    gap: 6px;
    font-size: .8125rem;
    font-weight: 500;
    color: #A9382F
}

.field.invalid .field__err {
    display: flex
}

.field__hint {
    font-size: .7813rem;
    color: var(--text-3);
    line-height: 1.5
}

.hp {
    position: absolute !important;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden
}

.form__foot {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2) var(--s3);
    align-items: center;
    justify-content: space-between;
    padding-top: var(--s1)
}

.form__note {
    font-size: .7813rem;
    color: var(--text-3);
    max-width: 40ch;
    line-height: 1.5;
    margin: 0
}

.status {
    display: none;
    padding: 18px 20px;
    border-radius: var(--r-md);
    font-size: .9688rem;
    line-height: 1.55
}

.status.on {
    display: block
}

.status--ok {
    background: #E9F6ED;
    border: 1px solid #C3E4CD;
    color: #1D5733
}

.status--err {
    background: #FDEEEC;
    border: 1px solid #F2C9C4;
    color: #8E3229
}

.status strong {
    display: block;
    margin-bottom: 4px;
    color: inherit
}

.spinner {
    width: 15px;
    height: 15px;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    display: inline-block;
    animation: spin .7s linear infinite
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

@media (prefers-reduced-motion:reduce) {
    .spinner {
        animation-duration: 2.4s
    }
}

/* ---------- Info card (contact aside) ---------- */
.icard {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-lg);
    padding: clamp(20px, 2vw, 28px);
    box-shadow: var(--sh-1)
}

.icard h2,
.icard h3 {
    font-size: 1.0625rem;
    margin-bottom: 14px
}

.icard ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 16px
}

.icard li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    margin: 0;
    font-size: .9375rem;
    color: var(--text-2);
    line-height: 1.55
}

.icard .ico {
    width: 18px;
    height: 18px;
    color: var(--coral);
    margin-top: 3px
}

.icard strong {
    display: block;
    color: var(--navy);
    font-family: var(--font-display);
    font-weight: 700;
    margin-bottom: 2px
}

.icard a {
    color: var(--navy);
    text-decoration: none;
    border-bottom: 1px solid rgba(244, 124, 115, .5)
}

.icard a:hover {
    color: var(--coral-dark)
}

.icard--sky {
    background: var(--sky-tint);
    border-color: transparent
}

.icard--lav {
    background: var(--lavender-tint);
    border-color: transparent
}

/* ---------- Resource card ---------- */
.res {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px 0;
    border-bottom: 1px solid var(--line);
}

.res:first-child {
    border-top: 1px solid var(--line)
}

.res h3 {
    font-size: 1.0625rem;
    margin: 0
}

.res p {
    color: var(--text-2);
    font-size: .9375rem;
    margin: 0;
    max-width: var(--measure)
}

.res__go {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 6px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .8438rem;
    color: var(--coral-dark);
    text-decoration: none;
}

.res__go .ico {
    width: 14px;
    height: 14px;
    transition: transform var(--t1) var(--ease)
}

.res__go:hover {
    text-decoration: underline
}

.res__go:hover .ico {
    transform: translate(2px, -2px)
}

/* ---------- Service-detail "next" strip ---------- */
.svcnext {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    padding-top: var(--s4);
    margin-top: var(--s5);
    border-top: 1px solid var(--line)
}

.svcnext>span {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .6875rem;
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--text-3);
    margin-right: 6px;
}

/* ---------- Underline accent (single playful mark, §20) ---------- */
.mark {
    position: relative;
    display: inline-block;
    white-space: nowrap
}

.mark svg {
    position: absolute;
    left: 0;
    bottom: -.1em;
    width: 100%;
    height: .24em;
    color: var(--coral);
    overflow: visible
}

/* ==========================================================================
   LOTS4KIDS OT Services — Page composition  v2.0
   Each page gets its own art direction within the shared system.
   ========================================================================== */

/* ======================================================================
   HOME · hero — editorial split with arch image + full-width meta strip
   ====================================================================== */
.hero {
    position: relative;
    overflow: hidden;
    padding-block: clamp(36px, 4vw, 64px) clamp(48px, 5vw, 80px)
}

.hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
    gap: clamp(32px, 4.6vw, 84px);
    align-items: center;
    position: relative;
    z-index: 1;
}

.hero h1 {
    font-size: var(--fs-hero);
    margin-bottom: var(--s3)
}

.hero .lead {
    max-width: 48ch;
    margin-bottom: var(--s4)
}

.hero__act {
    margin-bottom: var(--s5)
}

.hero__facts {
    list-style: none;
    margin: 0;
    padding: var(--s3) 0 0;
    border-top: 1px solid var(--line);
    display: grid;
    gap: 10px
}

.hero__facts li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: .9063rem;
    color: var(--text-2);
    font-weight: 500
}

.hero__facts .ico {
    width: 16px;
    height: 16px;
    color: var(--coral)
}

.hero__media {
    position: relative
}

.hero__media .ph {
    aspect-ratio: 1/1.16;
    border-radius: var(--r-arch)
}

.hero__badge {
    position: absolute;
    left: -24px;
    bottom: 40px;
    z-index: 2;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    padding: 14px 18px;
    box-shadow: var(--sh-3);
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 250px;
}

.hero__badge b {
    display: block;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: -.03em;
    color: var(--navy);
    line-height: 1
}

.hero__badge span {
    display: block;
    font-size: .7813rem;
    color: var(--text-3);
    line-height: 1.4;
    margin-top: 5px
}

.hero__badge .ibadge {
    margin: 0;
    width: 40px;
    height: 40px;
    border-radius: 11px
}

.hero__badge .ibadge .ico {
    width: 19px;
    height: 19px
}

/* ======================================================================
   HOME · what we do — sticky editorial two-column with index list
   ====================================================================== */
.areagrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 clamp(28px, 3.4vw, 56px)
}

.areagrid>div {
    padding: 18px 0;
    border-bottom: 1px solid var(--line-soft);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: start
}

.areagrid>div:first-child,
.areagrid>div:nth-child(2) {
    border-top: 1px solid var(--line)
}

.areagrid .k {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .75rem;
    letter-spacing: .06em;
    color: var(--coral);
    padding-top: 5px;
    font-variant-numeric: tabular-nums
}

.areagrid strong {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--navy);
    font-size: 1.0625rem;
    letter-spacing: -.015em;
    margin-bottom: 3px
}

.areagrid p {
    margin: 0;
    color: var(--text-2);
    font-size: .9063rem;
    line-height: 1.55
}

/* ======================================================================
   SERVICES · index of services
   ====================================================================== */
.svcidx {
    border-top: 1px solid var(--line)
}

.svcidx>li {
    margin: 0;
    border-bottom: 1px solid var(--line)
}

.svcidx a {
    display: grid;
    grid-template-columns: auto minmax(0, 1.4fr) minmax(0, 1.6fr) auto;
    gap: clamp(16px, 2.4vw, 40px);
    align-items: center;
    padding: 26px 12px 26px 4px;
    text-decoration: none;
    transition: background-color var(--t2) var(--ease), padding-inline var(--t2) var(--ease);
}

.svcidx a:hover,
.svcidx a:focus-visible {
    background: var(--surface);
    padding-inline: 20px 24px
}

.svcidx__n {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .8125rem;
    letter-spacing: .06em;
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
    transition: color var(--t2) var(--ease)
}

.svcidx a:hover .svcidx__n {
    color: var(--coral)
}

.svcidx__t {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -.022em;
    color: var(--navy);
    line-height: 1.25
}

.svcidx__d {
    font-size: .9375rem;
    color: var(--text-2);
    line-height: 1.55;
    margin: 0;
    max-width: 46ch
}

.svcidx__go {
    color: var(--text-3);
    transition: transform var(--t2) var(--ease), color var(--t2) var(--ease)
}

.svcidx__go .ico {
    width: 20px;
    height: 20px
}

.svcidx a:hover .svcidx__go {
    transform: translateX(6px);
    color: var(--coral)
}

/* pathway (services page) */
.pathway {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: var(--on-dark-line);
    border: 1px solid var(--on-dark-line);
    border-radius: var(--r-lg);
    overflow: hidden
}

.pathway>div {
    background: var(--navy);
    padding: clamp(24px, 2.4vw, 36px)
}

.pathway span {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .6875rem;
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--coral);
    margin-bottom: 14px
}

.pathway h3 {
    font-size: 1.25rem;
    color: #fff;
    margin-bottom: 8px
}

.pathway p {
    font-size: .9375rem;
    margin: 0;
    color: var(--on-dark-2)
}

/* ======================================================================
   ABOUT · story page
   ====================================================================== */
.story {
    font-size: var(--fs-lead);
    line-height: 1.65;
    color: var(--text-2)
}

.story strong {
    color: var(--navy)
}

.story p+p {
    margin-top: 1.1em
}

.dropcap::first-letter {
    float: left;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 3.6em;
    line-height: .82;
    padding: 6px 12px 0 0;
    color: var(--coral);
    letter-spacing: -.04em;
}

.mv {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden
}

.mv>div {
    background: var(--surface);
    padding: clamp(26px, 3vw, 44px)
}

.mv h2 {
    font-size: .6875rem;
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: var(--s3)
}

.mv blockquote {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.1875rem, 1.05rem + .7vw, 1.5625rem);
    line-height: 1.4;
    letter-spacing: -.022em;
    color: var(--navy);
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 clamp(28px, 3.4vw, 56px)
}

/* ======================================================================
   TEAM
   ====================================================================== */
.team-hero {
    background: var(--navy);
    color: var(--on-dark);
    padding-block: clamp(48px, 5vw, 88px) clamp(56px, 5.5vw, 96px);
    overflow: hidden;
    position: relative
}

.team-hero h1 {
    color: #fff
}

.team-hero .lead {
    color: var(--on-dark-2)
}

.team-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: clamp(32px, 4.5vw, 80px);
    align-items: end;
    position: relative;
    z-index: 1
}

.team-hero__strip {
    position: absolute;
    right: 0;
    bottom: 0;
    top: 0;
    width: 34%;
    background: linear-gradient(180deg, rgba(221, 243, 245, .06), rgba(244, 124, 115, .10));
    border-left: 1px solid var(--on-dark-line);
    pointer-events: none;
}

.team-head {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2) var(--s4);
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--s4);
    padding-bottom: var(--s3);
    border-bottom: 1px solid var(--line)
}

.team-head h2 {
    margin: 0;
    font-size: var(--fs-h3)
}

.team-head span {
    font-size: var(--fs-sm);
    color: var(--text-3)
}

.profile {
    display: grid;
    gap: var(--s3)
}

.profile__body h3 {
    margin-bottom: 3px;
    font-size: 1.25rem
}

.profile__body .role {
    font-size: .875rem;
    color: var(--text-3);
    margin: 0 0 12px
}

.profile__body p {
    font-size: .9375rem;
    color: var(--text-2);
    line-height: 1.6
}

.bio-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .8125rem;
    color: var(--coral-dark);
}

.bio-toggle .ico {
    width: 14px;
    height: 14px;
    transition: transform var(--t2) var(--ease)
}

.bio-toggle[aria-expanded="true"] .ico {
    transform: rotate(180deg)
}

.bio-extra {
    overflow: hidden;
    margin-top: 10px
}

.bio-extra__in {
    font-size: .875rem;
    color: var(--text-2);
    line-height: 1.6
}

.role {
    font-size: .875rem;
    color: var(--text-3);
    font-weight: 500
}

/* ======================================================================
   RESOURCES
   ====================================================================== */
.resgroup {
    margin-bottom: clamp(40px, 4.4vw, 72px)
}

.resgroup:last-child {
    margin-bottom: 0
}

.resgroup__head {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2) var(--s4);
    align-items: baseline;
    margin-bottom: var(--s3)
}

.resgroup__head h2 {
    font-size: var(--fs-h3);
    margin: 0
}

.resgroup__head span {
    font-size: .9063rem;
    color: var(--text-3)
}

.reslist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 clamp(28px, 3.6vw, 64px)
}

.reslist .res {
    padding-right: clamp(0px, 2vw, 24px)
}

/* ======================================================================
   FAQs
   ====================================================================== */
.faqlayout {
    display: grid;
    grid-template-columns: minmax(0, .58fr) minmax(0, 1.42fr);
    gap: clamp(32px, 4.5vw, 88px);
    align-items: start
}

.faqjump {
    position: sticky;
    top: 120px;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-lg);
    padding: 24px;
    box-shadow: var(--sh-1)
}

.faqjump h2 {
    font-size: .6875rem;
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 14px
}

.faqjump ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 2px
}

.faqjump li {
    margin: 0
}

.faqjump a {
    display: block;
    padding: 10px 12px;
    border-radius: var(--r-sm);
    font-size: .9063rem;
    font-weight: 500;
    color: var(--text-2);
    text-decoration: none;
    transition: background-color var(--t1) var(--ease), color var(--t1) var(--ease);
}

.faqjump a:hover {
    background: var(--sky-tint);
    color: var(--navy)
}

.faqjump hr {
    margin: var(--s3) 0
}

.faqjump p {
    font-size: .875rem;
    color: var(--text-3);
    margin: 0
}

.faqjump .link-arrow {
    margin-top: 14px
}

.faqblock {
    margin-bottom: clamp(44px, 4.6vw, 72px);
    scroll-margin-top: 120px
}

.faqblock:last-child {
    margin-bottom: 0
}

.faqblock>h2 {
    font-size: var(--fs-h3);
    margin-bottom: var(--s3);
    padding-bottom: var(--s2);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: baseline;
    gap: 12px
}

.faqblock>h2 span {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .75rem;
    letter-spacing: .06em;
    color: var(--coral);
    font-variant-numeric: tabular-nums
}

/* ======================================================================
   CONTACT
   ====================================================================== */
.contactlayout {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr);
    gap: clamp(28px, 3.4vw, 56px);
    align-items: start
}

.formcard {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-xl);
    padding: clamp(24px, 3vw, 44px);
    box-shadow: var(--sh-2)
}

.formcard>h2 {
    font-size: var(--fs-h3);
    margin-bottom: 6px
}

.formcard__intro {
    color: var(--text-2);
    margin-bottom: var(--s4);
    font-size: .9688rem
}

.contactaside {
    display: grid;
    gap: var(--s3);
    position: sticky;
    top: 120px
}

.nextsteps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 18px
}

.nextsteps li {
    margin: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: start
}

.nextsteps .n {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sky);
    color: var(--sky-ink);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
}

.nextsteps strong {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--navy);
    font-size: .9688rem;
    margin-bottom: 2px
}

.nextsteps p {
    margin: 0;
    font-size: .875rem;
    color: var(--text-2);
    line-height: 1.55
}

/* ======================================================================
   SERVICE DETAIL template
   ====================================================================== */
.svchero {
    position: relative;
    overflow: hidden;
    padding-block: clamp(36px, 4vw, 60px) clamp(44px, 4.6vw, 72px)
}

.svchero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    gap: clamp(32px, 4.4vw, 72px);
    align-items: center;
    position: relative;
    z-index: 1
}

.svchero h1 {
    margin-bottom: var(--s3)
}

.svchero .lead {
    margin-bottom: var(--s3)
}

.svcmeta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 var(--s4);
    padding: 0;
    list-style: none
}

.svcbody>*+* {
    margin-top: clamp(48px, 5vw, 88px)
}

.svc-fig {
    position: relative
}

.svc-fig .caption {
    position: absolute;
    left: 0;
    bottom: -8px;
    transform: translateY(100%)
}

/* ==========================================================================
   LOTS4KIDS OT Services — Responsive  v2.0
   A deliberate mobile design pass, not a collapsed desktop layout.
   Targets: 360 · 375 · 390 · 414 · 430 · 768 · 1024 · 1280 · 1440
   ========================================================================== */

/* ---------------------------------------------------------------- 1440+ */
@media (min-width:1500px) {
    :root {
        --container: 1280px;
        --gutter: 48px
    }
}

/* ---------------------------------------------------------------- ≤1240 */
@media (max-width:1240px) {
    .nav__list a {
        padding: 9px 10px;
        font-size: .875rem
    }

    .svcidx__t {
        font-size: 1.125rem
    }

    .svcidx__d {
        font-size: .9063rem
    }
}

/* ---------------------------------------------------------------- ≤1120 · drawer takes over */
@media (max-width:1120px) {
    .nav {
        display: none;
    }

    .navbtn {
        display: inline-flex;
    }

    .hdr__cta {
        display: none;
    }

    .hdr__in {
        height: 72px;
        gap: var(--s2)
    }

    .hdr.stuck .hdr__in {
        height: 64px
    }

    .hero__grid,
    .phero--split,
    .svchero__grid,
    .team-hero__grid,
    .split,
    .split-40,
    .split-45,
    .split-50,
    .split-55,
    .sticky-col,
    .faqlayout,
    .contactlayout,
    .founder {
        grid-template-columns: minmax(0, 1fr)
    }

    .sticky-col__aside,
    .faqjump,
    .contactaside {
        position: static
    }

    .hero__media {
        order: -1;
        max-width: 560px;
        width: 100%
    }

    .hero__media .ph {
        aspect-ratio: 16/11;
        border-radius: var(--r-lg) var(--r-lg) 120px 120px
    }

    .hero__badge {
        left: auto;
        right: 16px;
        bottom: 16px;
        max-width: 220px;
        padding: 12px 15px
    }

    .hero__badge b {
        font-size: 1.25rem
    }

    .team-hero__strip {
        width: 100%;
        height: 1px;
        top: auto;
        bottom: 0;
        left: 0;
        border-left: 0;
        border-top: 1px solid var(--on-dark-line);
        background: none
    }

    .cta__in {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        gap: var(--s4)
    }

    .cta__act {
        justify-content: flex-start
    }

    .cta__arch {
        right: -14%;
        width: min(52vw, 420px)
    }

    .ftr__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 36px
    }

    .metastrip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        border-top: none;
        margin-top: var(--s4);
        background: var(--surface);
        border: 1px solid var(--line-soft);
        border-radius: var(--r-lg);
        padding: 16px;
        box-shadow: var(--sh-1);
    }

    .metastrip>div {
        padding: 14px 16px !important;
        border: 1px solid var(--line-soft) !important;
        border-radius: var(--r-md);
        background: var(--bg);
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
    }

    .metastrip>div+div {
        padding-left: 14px !important;
    }

    .metastrip dt {
        font-size: .6875rem;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--coral-dark);
        margin-bottom: 2px;
    }

    .metastrip dd {
        font-size: .875rem;
        font-weight: 600;
        color: var(--navy);
        line-height: 1.35;
    }

    .band {
        grid-template-columns: minmax(96px, .36fr) minmax(0, 1fr);
        gap: var(--s3)
    }

    .band__link {
        grid-column: 2;
        margin-top: var(--s2)
    }

    .areagrid {
        grid-template-columns: minmax(0, 1fr)
    }

    .areagrid>div:nth-child(2) {
        border-top: 0
    }

    .cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .reslist {
        grid-template-columns: minmax(0, 1fr)
    }

    .idx--2col {
        column-count: 1
    }
}

/* ---------------------------------------------------------------- ≤960 */
@media (max-width:960px) {

    .cols-3,
    .mv,
    .values-grid,
    .pathway,
    .steps {
        grid-template-columns: minmax(0, 1fr)
    }

    .mv,
    .pathway {
        gap: 1px
    }

    .steps {
        gap: var(--s4)
    }

    .steps::before {
        display: none
    }

    .step {
        display: grid;
        grid-template-columns: 62px minmax(0, 1fr);
        gap: var(--s3);
        align-items: start
    }

    .step__n {
        margin-bottom: 0
    }

    .svcidx a {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: var(--s2)
    }

    .svcidx__d {
        display: none
    }

    .team-grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

/* ---------------------------------------------------------------- ≤860 · MOBILE PASS BEGINS */
@media (max-width:860px) {
    :root {
        --sect: clamp(56px, 8vw, 76px);
        --sect-sm: clamp(44px, 6vw, 60px);
        --gutter: 20px
    }

    html {
        scroll-padding-top: 84px
    }

    body {
        padding-bottom: 76px
    }

    /* room for the sticky action bar */
    body.no-mbar {
        padding-bottom: 0
    }

    .mbar {
        display: flex
    }

    .cols-2,
    .cols-4,
    .checks--2 {
        grid-template-columns: minmax(0, 1fr)
    }

    .team-grid-3 {
        grid-template-columns: minmax(0, 1fr)
    }

    /* hero recomposed for small screens: text first, then a wide crop */
    .hero {
        padding-block: 24px 40px
    }

    .hero h1 {
        font-size: clamp(2.375rem, 9.5vw, 3rem);
        letter-spacing: -.035em
    }

    .hero .lead {
        font-size: 1.0625rem;
        margin-bottom: var(--s4)
    }

    .hero__facts {
        padding-top: var(--s3);
        gap: 8px;
        margin-top: var(--s4)
    }

    .hero__facts li {
        font-size: .8438rem
    }

    .hero__media .ph {
        aspect-ratio: 16/10;
        border-radius: var(--r-lg)
    }

    .hero__badge {
        position: static;
        max-width: none;
        margin-top: 14px;
        box-shadow: var(--sh-1)
    }

    .metastrip {
        margin-top: var(--s5)
    }

    /* page heroes: tighter, left-aligned, no orphan space */
    .phero {
        padding-block: 28px 44px
    }

    .phero__copy h1 {
        font-size: clamp(2rem, 8.4vw, 2.625rem)
    }

    .svchero {
        padding-block: 24px 40px
    }

    .svchero__grid>.svc-fig {
        order: 2
    }

    .svchero__grid>div:first-child {
        order: 1
    }

    /* index rows: single column stack, larger touch targets */
    .idx a,
    .idx__row {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 14px;
        padding: 18px 0
    }

    .idx a:hover,
    .idx a:focus-visible {
        padding-inline: 0;
        background: transparent
    }

    .idx__go {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%)
    }

    .idx a:hover .idx__go {
        transform: translateY(-50%) translateX(3px)
    }

    .idx__t {
        font-size: 1.0625rem
    }

    .idx__d {
        font-size: .9063rem;
        padding-right: 28px
    }

    .svcidx a {
        grid-template-columns: auto minmax(0, 1fr) auto;
        padding: 18px 0;
        gap: 14px
    }

    .svcidx a:hover {
        padding-inline: 0;
        background: transparent
    }

    .svcidx__t {
        font-size: 1.0625rem
    }

    /* age bands recomposed */
    .band {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        padding: 24px 0
    }

    .band__age {
        display: flex;
        align-items: baseline;
        gap: 12px
    }

    .band__age span {
        margin-top: 0
    }

    .band__link {
        grid-column: 1;
        margin-top: 6px
    }

    .founder__meta {
        margin-top: 16px;
        margin-left: 0;
        width: 100%
    }

    .roster a,
    .roster__row {
        padding: 14px 0
    }

    .roster__av {
        width: 46px;
        height: 46px
    }

    /* forms tuned for thumbs */
    .form__row {
        grid-template-columns: minmax(0, 1fr)
    }

    .formcard {
        padding: 22px 18px;
        border-radius: var(--r-lg);
        box-shadow: var(--sh-1)
    }

    .field input,
    .field select,
    .field textarea {
        min-height: 52px;
        font-size: 16px
    }

    /* 16px prevents iOS zoom */
    .field textarea {
        min-height: 132px
    }

    .form__foot {
        flex-direction: column;
        align-items: stretch
    }

    .form__foot .btn {
        width: 100%
    }

    .form__note {
        text-align: center;
        max-width: none
    }

    /* accordions */
    .acc__t {
        padding: 18px 0;
        font-size: 1rem;
        gap: var(--s2)
    }

    .acc__t:hover {
        padding-inline: 0
    }

    .acc__t .acc__i {
        width: 28px;
        height: 28px;
        padding: 6px
    }

    .acc__b {
        padding: 0 0 20px;
        font-size: .9375rem
    }

    .steps {
        gap: var(--s4)
    }

    .step {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 14px
    }

    .step__n {
        width: 52px;
        height: 52px;
        font-size: 1rem
    }

    .ftr__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px
    }

    .ftr__bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px
    }

    .ftr__word {
        font-size: clamp(2.5rem, 15vw, 5rem)
    }

    .btn-row {
        gap: 10px
    }

    .btn-row .btn {
        flex: 1 1 auto
    }

    .pull {
        font-size: 1.25rem;
        padding-left: 18px
    }

    .caption {
        max-width: none
    }

    .team-head {
        gap: 6px var(--s3)
    }
}

/* ---------------------------------------------------------------- ≤600 */
@media (max-width:600px) {
    .metastrip {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        background: var(--surface);
        border: 1px solid var(--line-soft);
        border-radius: var(--r-lg);
        padding: 12px;
        box-shadow: var(--sh-1);
        margin-top: var(--s4);
    }

    .metastrip>div {
        border: 1px solid var(--line-soft) !important;
        border-radius: var(--r-md);
        background: var(--bg);
        padding: 14px 16px !important;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .metastrip>div+div {
        padding-left: 16px !important;
    }

    .metastrip dt {
        font-size: .7rem;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--coral-dark);
        margin-bottom: 2px;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .metastrip dt::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--coral);
        display: inline-block;
        flex: none;
    }

    .metastrip dd {
        font-size: .9375rem;
        font-weight: 600;
        color: var(--navy);
        line-height: 1.4;
    }

    .hero__badge {
        flex-direction: row
    }

    .card {
        padding: 20px 18px;
        border-radius: var(--r-md)
    }

    .icard {
        padding: 20px 18px;
        border-radius: var(--r-md)
    }

    .ph__tag {
        left: 14px;
        bottom: 14px;
        font-size: .5625rem;
        padding: 5px 9px
    }

    .ph::after {
        inset: 8px
    }

    .mono b {
        font-size: 2.25rem
    }

    .mv>div,
    .pathway>div {
        padding: 24px 20px
    }

    .resgroup__head {
        gap: 6px
    }

    .svcnext {
        gap: 8px
    }

    .svcnext>span {
        width: 100%;
        margin-bottom: 2px
    }
}

/* ---------------------------------------------------------------- ≤400 · smallest supported */
@media (max-width:400px) {
    :root {
        --gutter: 16px
    }

    .hdr__in {
        height: 64px
    }

    .hdr.stuck .hdr__in {
        height: 60px
    }

    .brand__mark {
        width: 34px;
        height: 34px
    }

    .brand__name {
        font-size: .9375rem;
        gap: 4px
    }

    .brand__name i {
        font-size: .5rem;
        letter-spacing: .16em
    }

    .drawer {
        width: 100%
    }

    .hero h1 {
        font-size: 2.125rem
    }

    .btn {
        padding-inline: 16px;
        font-size: .875rem;
        min-height: 50px
    }

    .btn--lg {
        min-height: 52px;
        padding-inline: 20px
    }

    .mbar {
        padding-inline: 12px
    }

    .mbar .btn {
        font-size: .875rem;
        padding-inline: 10px
    }

    .checks--lg {
        font-size: 1rem;
        gap: 16px
    }

    .nlist li {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px
    }

    .nlist__n {
        padding-top: 0
    }

    .loclist li {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px
    }

    .loclist .ico {
        margin-top: 0
    }

    .nextsteps li {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px
    }
}

/* ---------------------------------------------------- landscape phones */
@media (max-height:520px) and (orientation:landscape) {
    .hero {
        padding-block: 20px 32px
    }

    .hero__media {
        max-width: 320px
    }

    .mbar {
        display: none
    }

    body {
        padding-bottom: 0
    }
}

/* ---------------------------------------------------- fine pointer only hover */
@media (hover:none) {

    .idx a:hover,
    .svcidx a:hover,
    .roster a:hover,
    .card:hover,
    .btn:hover {
        transform: none;
        box-shadow: var(--sh-1)
    }

    .card:hover {
        border-color: var(--line-soft)
    }
}

/* ======================================================================
   HOMEPAGE · Service Cards Grid (§4)
   ====================================================================== */
.svc-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin-top: var(--s5);
}

.svc-card {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--sh-1);
    transition: transform var(--t2) var(--ease), box-shadow var(--t2) var(--ease), border-color var(--t2) var(--ease);
    position: relative;
}

.svc-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--sh-3);
    border-color: rgba(244, 124, 115, .4);
    color: inherit;
}

.svc-card__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16/10;
    background: var(--cream);
}

.svc-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s var(--ease);
}

.svc-card:hover .svc-card__img {
    transform: scale(1.06);
}

.svc-card__num {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: .75rem;
    letter-spacing: .05em;
    color: var(--navy);
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 4px 9px;
    border-radius: var(--r-pill);
    box-shadow: 0 2px 8px rgba(23, 42, 58, .1);
    font-variant-numeric: tabular-nums;
}

.svc-card__body {
    padding: 20px 22px 22px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.svc-card__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.125rem;
    letter-spacing: -.02em;
    color: var(--navy);
    margin: 0 0 8px;
    transition: color var(--t1) var(--ease);
}

.svc-card:hover .svc-card__title {
    color: var(--coral-dark);
}

.svc-card__desc {
    font-size: .875rem;
    color: var(--text-2);
    line-height: 1.55;
    margin: 0 0 16px;
    flex: 1;
}

.svc-card__action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .8125rem;
    color: var(--coral-dark);
    margin-top: auto;
    transition: gap var(--t1) var(--ease);
}

.svc-card__action .ico {
    width: 14px;
    height: 14px;
    transition: transform var(--t1) var(--ease);
}

.svc-card:hover .svc-card__action {
    gap: 9px;
}

.svc-card:hover .svc-card__action .ico {
    transform: translateX(3px);
}

@media (max-width: 1200px) {
    .svc-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }
}

@media (max-width: 600px) {
    .svc-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .svc-card__media {
        aspect-ratio: 16/9;
    }

    .svc-card__body {
        padding: 16px 18px 18px;
    }
}


/* ==========================================================================
   HOMEPAGE · Creative Redesign Components
   ========================================================================== */

/* ---------- Area Deck (Section 01: What We Do) ---------- */
.area-deck {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.area-card {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    padding: 18px 20px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    box-shadow: var(--sh-1);
    transition: transform var(--t2) var(--ease), box-shadow var(--t2) var(--ease), border-color var(--t2) var(--ease);
}

.area-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--sh-2);
    border-color: rgba(244, 124, 115, .3);
}

.area-card__badge {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.area-card__badge .ico {
    width: 18px;
    height: 18px;
}

.area-card__badge--sky {
    background: var(--sky);
    color: var(--sky-ink);
}

.area-card__badge--coral {
    background: var(--coral-tint);
    color: var(--coral-dark);
}

.area-card__badge--yellow {
    background: var(--yellow);
    color: var(--yellow-ink);
}

.area-card__badge--lav {
    background: var(--lavender);
    color: var(--lavender-ink);
}

.area-card__content strong {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    color: var(--navy);
    letter-spacing: -.015em;
    margin-bottom: 3px;
}

.area-card__content p {
    margin: 0;
    font-size: .875rem;
    color: var(--text-2);
    line-height: 1.5;
}

/* ---------- Age Deck (Section 02: Who We Support) ---------- */
.age-deck {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: var(--s4);
}

.age-card {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-xl);
    padding: clamp(24px, 2.5vw, 36px);
    display: flex;
    flex-direction: column;
    box-shadow: var(--sh-1);
    transition: transform var(--t2) var(--ease), box-shadow var(--t2) var(--ease), border-color var(--t2) var(--ease);
    position: relative;
}

.age-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sh-3);
    border-color: rgba(23, 42, 58, .18);
}

.age-card--featured {
    border-color: rgba(244, 124, 115, .4);
    box-shadow: 0 12px 36px rgba(244, 124, 115, .1);
    background: linear-gradient(175deg, #ffffff 0%, var(--sky-tint) 100%);
}

.age-card__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: var(--s3);
    padding-bottom: var(--s2);
    border-bottom: 1px solid var(--line-soft);
}

.age-card__num {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 2.25rem;
    letter-spacing: -.04em;
    color: var(--navy);
    line-height: 1;
}

.age-card__tag {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .6875rem;
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--coral-dark);
}

.age-card__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--navy);
    margin: 0 0 10px;
    letter-spacing: -.02em;
}

.age-card__desc {
    font-size: .9375rem;
    color: var(--text-2);
    line-height: 1.6;
    margin: 0 0 var(--s4);
    flex: 1;
}

.age-card__foot {
    margin-top: auto;
}

.age-card__foot .btn {
    width: 100%;
}

/* ---------- Approach Grid (Section 04) ---------- */
.approach-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: var(--s4);
}

.approach-item {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    padding: 14px 16px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    box-shadow: var(--sh-1);
}

.approach-item__num {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: .75rem;
    letter-spacing: .06em;
    color: var(--coral-dark);
    padding-top: 3px;
}

.approach-item strong {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--navy);
    font-size: .9375rem;
    margin-bottom: 2px;
}

.approach-item p {
    margin: 0;
    font-size: .8438rem;
    color: var(--text-2);
    line-height: 1.45;
}

/* ---------- Trust Card Grid (Section 05: Why Families Choose Us) ---------- */
.trust-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin-top: var(--s4);
}

.trust-card {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-lg);
    padding: 22px 22px;
    display: flex;
    flex-direction: column;
    box-shadow: var(--sh-1);
    transition: transform var(--t2) var(--ease), box-shadow var(--t2) var(--ease), border-color var(--t2) var(--ease);
}

.trust-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--sh-2);
    border-color: rgba(244, 124, 115, .35);
}

.trust-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.trust-card__icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
    flex-shrink: 0;
}

.trust-card__icon .ico {
    width: 18px;
    height: 18px;
}

.trust-card__icon--coral {
    background: var(--coral-tint);
    color: var(--coral-dark);
}

.trust-card__icon--sky {
    background: var(--sky);
    color: var(--sky-ink);
}

.trust-card__icon--yellow {
    background: var(--yellow);
    color: var(--yellow-ink);
}

.trust-card__icon--lav {
    background: var(--lavender);
    color: var(--lavender-ink);
}

.trust-card__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.0625rem;
    letter-spacing: -.015em;
    color: var(--navy);
    margin: 0;
    line-height: 1.28;
}

.trust-card__desc {
    font-size: .875rem;
    color: var(--text-2);
    line-height: 1.55;
    margin: 0;
}

/* ---------- Workflow Grid (Section 06: How It Works) ---------- */
.workflow-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.workflow-card {
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--on-dark-line);
    border-radius: var(--r-xl);
    padding: clamp(24px, 2.5vw, 36px);
    display: flex;
    flex-direction: column;
    transition: background-color var(--t2) var(--ease), transform var(--t2) var(--ease), border-color var(--t2) var(--ease);
}

.workflow-card:hover {
    background: rgba(255, 255, 255, .08);
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, .25);
}

.workflow-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: var(--s3);
}

.workflow-card__num {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.75rem;
    letter-spacing: -.03em;
    color: var(--sky);
}

.workflow-card__icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: var(--coral);
    display: flex;
    align-items: center;
    justify-content: center;
}

.workflow-card__icon .ico {
    width: 18px;
    height: 18px;
}

.workflow-card__title {
    font-size: 1.25rem;
    color: #fff;
    margin: 0 0 10px;
    letter-spacing: -.02em;
}

.workflow-card__desc {
    font-size: .9375rem;
    color: var(--on-dark-2);
    line-height: 1.6;
    margin: 0;
}

/* ---------- Destination Deck (Section 07: Mobile Therapy) ---------- */
.dest-deck {
    display: grid;
    gap: 14px;
    margin-top: var(--s3);
}

.dest-card {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    padding: 16px 18px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    box-shadow: var(--sh-1);
    transition: transform var(--t2) var(--ease), border-color var(--t2) var(--ease);
}

.dest-card:hover {
    transform: translateY(-2px);
    border-color: rgba(244, 124, 115, .35);
}

.dest-card__icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--sky);
    color: var(--sky-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    margin-top: 2px;
}

.dest-card__icon .ico {
    width: 17px;
    height: 17px;
}

.dest-card strong {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.0625rem;
    color: var(--navy);
    margin-bottom: 3px;
}

.dest-card p {
    margin: 0;
    font-size: .875rem;
    color: var(--text-2);
    line-height: 1.5;
}

/* ---------- Team Cards Grid (Section 08: Team Preview) ---------- */
.team-cards-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}

.team-mini-card {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    box-shadow: var(--sh-1);
    transition: transform var(--t2) var(--ease), box-shadow var(--t2) var(--ease), border-color var(--t2) var(--ease);
}

.team-mini-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--sh-2);
    border-color: var(--line);
}

.team-mini-card__av {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--sky), var(--lavender));
    color: var(--navy);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.0625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.team-mini-card strong {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .9688rem;
    color: var(--navy);
}

.team-mini-card span {
    display: block;
    font-size: .75rem;
    color: var(--text-3);
    margin-top: 2px;
}

/* ---------- Coverage Cards (Section 10: Service Area) ---------- */
.area-coverage-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.coverage-card {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    padding: 20px 18px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    box-shadow: var(--sh-1);
    transition: transform var(--t2) var(--ease), border-color var(--t2) var(--ease);
}

.coverage-card:hover {
    transform: translateY(-2px);
    border-color: rgba(244, 124, 115, .3);
}

.coverage-card__icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--sky);
    color: var(--sky-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.coverage-card__icon .ico {
    width: 18px;
    height: 18px;
}

.coverage-card strong {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .9688rem;
    color: var(--navy);
    margin-bottom: 4px;
}

.coverage-card p {
    margin: 0;
    font-size: .8438rem;
    color: var(--text-2);
    line-height: 1.5;
}

/* ==========================================================================
   ABOUT PAGE ELEVATED COMPONENTS
   ========================================================================== */

    /* ---------- Page Hero Refinements ---------- */
    .phero {
        padding-block: clamp(36px, 3.5vw, 64px) clamp(44px, 4vw, 76px);
        position: relative;
        overflow: hidden;
    }

    .phero .crumb {
        margin-bottom: var(--s3);
    }

    .phero__copy h1 {
        font-size: var(--fs-h1);
        line-height: var(--lh-tight);
        letter-spacing: var(--ls-display);
        color: var(--navy);
        margin-bottom: var(--s3);
    }

    .phero__copy .lead {
        font-size: var(--fs-lead);
        line-height: var(--lh-body);
        color: var(--text-2);
        margin-bottom: var(--s4);
    }

    .phero-visual {
        position: relative;
        max-width: 420px;
        justify-self: end;
    }

    .phero-visual .ph {
        border-radius: var(--r-xl);
        overflow: hidden;
        box-shadow: var(--sh-2);
        border: 1px solid var(--line-soft);
        background: var(--surface);
    }

    .phero-visual__badge {
        position: absolute;
        bottom: -16px;
        left: -18px;
        background: rgba(255, 255, 255, .96);
        backdrop-filter: blur(10px);
        border: 1px solid var(--line);
        border-radius: var(--r-md);
        padding: 12px 18px;
        display: flex;
        align-items: center;
        gap: 12px;
        box-shadow: var(--sh-3);
        z-index: 2;
    }

    .phero-visual__badge strong {
        display: block;
        font-family: var(--font-display);
        font-size: .9375rem;
        font-weight: 800;
        color: var(--navy);
        line-height: 1.2;
    }

    .phero-visual__badge span {
        display: block;
        font-size: .8125rem;
        color: var(--text-2);
        margin-top: 2px;
    }

    /* ---------- Story Deck & Cards ---------- */
    .story-deck {
        display: flex;
        flex-direction: column;
        gap: var(--s3);
    }

    .story-spotlight {
        background: var(--surface);
        border: 1px solid var(--line-soft);
        border-radius: var(--r-xl);
        padding: clamp(24px, 3vw, 36px);
        box-shadow: var(--sh-1);
        position: relative;
    }

    .story-spotlight__head {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: var(--s3);
    }

    .story-spotlight__tag {
        font-family: var(--font-display);
        font-size: .8125rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: var(--ls-label);
        color: var(--coral-dark);
    }

    .story-spotlight p {
        font-size: 1.0625rem;
        line-height: 1.7;
        color: var(--text);
        margin-bottom: var(--s2);
    }

    .story-spotlight p:last-child {
        margin-bottom: 0;
    }

    .story-spotlight .lead-statement {
        font-family: var(--font-display);
        font-size: clamp(1.125rem, 1rem + .4vw, 1.3125rem);
        font-weight: 700;
        line-height: 1.45;
        color: var(--navy);
        letter-spacing: -.015em;
        margin-bottom: var(--s3);
    }

    .story-pillars {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--s2);
    }

    .story-pillar-card {
        background: var(--surface);
        border: 1px solid var(--line-soft);
        border-radius: var(--r-lg);
        padding: 20px 18px;
        box-shadow: var(--sh-1);
        display: flex;
        flex-direction: column;
        gap: 8px;
        transition: transform var(--t2) var(--ease), box-shadow var(--t2) var(--ease), border-color var(--t2) var(--ease);
    }

    .story-pillar-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--sh-2);
        border-color: rgba(23, 42, 58, .15);
    }

    .story-pillar-card strong {
        font-family: var(--font-display);
        font-weight: 700;
        font-size: .9688rem;
        color: var(--navy);
    }

    .story-pillar-card p {
        font-size: .875rem;
        line-height: 1.55;
        color: var(--text-2);
        margin: 0;
    }

    .story-pull-banner {
        background: var(--cream);
        border: 1px solid rgba(23, 42, 58, .08);
        border-radius: var(--r-lg);
        padding: 20px 24px;
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .story-pull-banner p {
        margin: 0;
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 1.0625rem;
        line-height: 1.45;
        color: var(--navy);
    }

    /* ---------- Mission & Vision Bento Cards ---------- */
    .purpose-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(20px, 2.5vw, 32px);
    }

    .purpose-card {
        background: var(--surface);
        border: 1px solid var(--line-soft);
        border-radius: var(--r-xl);
        padding: clamp(28px, 3.5vw, 44px);
        box-shadow: var(--sh-1);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: relative;
        overflow: hidden;
        transition: transform var(--t2) var(--ease), box-shadow var(--t2) var(--ease);
    }

    .purpose-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--sh-2);
    }

    .purpose-card--mission {
        background: linear-gradient(175deg, var(--surface) 0%, var(--sky-tint) 100%);
        border-top: 4px solid var(--sky-ink);
    }

    .purpose-card--vision {
        background: linear-gradient(175deg, var(--surface) 0%, var(--yellow-tint) 100%);
        border-top: 4px solid var(--coral);
    }

    .purpose-card__top {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-bottom: var(--s3);
    }

    .purpose-card__tag {
        font-family: var(--font-display);
        font-size: .8125rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: var(--ls-label);
        color: var(--navy);
    }

    .purpose-card blockquote {
        margin: 0 0 var(--s4) 0;
        font-family: var(--font-display);
        font-weight: 600;
        font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem);
        line-height: 1.45;
        color: var(--navy);
        letter-spacing: -.015em;
    }

    .purpose-card__tags {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .purpose-card__tags li {
        font-size: .8125rem;
        font-weight: 600;
        color: var(--navy-600);
        background: rgba(23, 42, 58, .05);
        padding: 4px 12px;
        border-radius: var(--r-pill);
    }

    /* ---------- 7 Values Interactive Deck ---------- */
    .values-deck {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .value-card {
        background: var(--surface);
        border: 1px solid var(--line-soft);
        border-radius: var(--r-lg);
        padding: 22px 20px;
        box-shadow: var(--sh-1);
        display: flex;
        gap: 16px;
        align-items: flex-start;
        transition: transform var(--t2) var(--ease), box-shadow var(--t2) var(--ease), border-color var(--t2) var(--ease);
    }

    .value-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--sh-2);
        border-color: rgba(23, 42, 58, .16);
    }

    .value-card--featured {
        grid-column: 1 / -1;
        background: linear-gradient(135deg, var(--surface) 0%, var(--lavender-tint) 100%);
        border-color: rgba(92, 75, 147, .2);
    }

    .value-card__badge {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
    }

    .value-card__badge--sky {
        background: var(--sky);
        color: var(--sky-ink);
    }

    .value-card__badge--coral {
        background: var(--coral-tint);
        color: var(--coral-dark);
    }

    .value-card__badge--lav {
        background: var(--lavender);
        color: var(--lavender-ink);
    }

    .value-card__badge--yellow {
        background: var(--yellow);
        color: var(--yellow-ink);
    }

    .value-card__badge .ico {
        width: 20px;
        height: 20px;
    }

    .value-card__content {
        flex: 1;
    }

    .value-card__num {
        font-family: var(--font-display);
        font-weight: 800;
        font-size: .75rem;
        color: var(--text-3);
        text-transform: uppercase;
        letter-spacing: .08em;
        display: block;
        margin-bottom: 2px;
    }

    .value-card strong {
        display: block;
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 1.0625rem;
        color: var(--navy);
        line-height: 1.3;
        margin-bottom: 6px;
    }

    .value-card p {
        font-size: .9063rem;
        line-height: 1.55;
        color: var(--text-2);
        margin: 0;
    }

    /* ---------- Founder Executive Profile Bento ---------- */
    .founder-card {
        background: var(--surface);
        border: 1px solid var(--line-soft);
        border-radius: var(--r-xl);
        padding: clamp(28px, 3.5vw, 48px);
        box-shadow: var(--sh-2);
        display: grid;
        grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
        gap: clamp(28px, 4vw, 56px);
        align-items: center;
    }

    .founder-card__media {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 16px;
    }

    .founder-avatar {
        width: 220px;
        height: 220px;
        border-radius: var(--r-arch);
        background: linear-gradient(135deg, var(--sky) 0%, var(--cream) 100%);
        border: 3px solid var(--surface);
        box-shadow: var(--sh-2);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: var(--navy);
        position: relative;
        overflow: hidden;
    }

    .founder-avatar b {
        font-family: var(--font-display);
        font-size: 3.5rem;
        font-weight: 800;
        letter-spacing: -.02em;
        color: var(--navy);
        line-height: 1;
    }

    .founder-avatar em {
        font-style: normal;
        font-size: .8125rem;
        font-weight: 600;
        color: var(--text-2);
        margin-top: 6px;
    }

    .founder-card__badge-pill {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: var(--yellow-tint);
        border: 1px solid rgba(244, 124, 115, .25);
        color: var(--navy);
        font-size: .8125rem;
        font-weight: 700;
        padding: 6px 14px;
        border-radius: var(--r-pill);
    }

    .founder-card__badge-pill .ico {
        width: 14px;
        height: 14px;
        color: var(--coral-dark);
    }

    .founder-card__content h3 {
        font-size: clamp(1.5rem, 1.3rem + .8vw, 2rem);
        color: var(--navy);
        margin-bottom: 4px;
    }

    .founder-card__role {
        display: block;
        font-family: var(--font-display);
        font-size: 1rem;
        font-weight: 700;
        color: var(--coral-dark);
        margin-bottom: var(--s3);
    }

    .founder-card__content p {
        font-size: 1rem;
        line-height: 1.68;
        color: var(--text-2);
        margin-bottom: var(--s3);
    }

    .founder-chips {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        list-style: none;
        padding: 0;
        margin: 0 0 var(--s4) 0;
    }

    .founder-chip {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: .875rem;
        font-weight: 600;
        color: var(--navy);
        background: var(--bg);
        border: 1px solid var(--line-soft);
        border-radius: var(--r-sm);
        padding: 8px 12px;
    }

    .founder-chip .ico {
        width: 15px;
        height: 15px;
        color: var(--coral);
        flex: none;
    }

    /* ---------- 3-Step Pathway Deck ---------- */
    .pathway-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(18px, 2vw, 28px);
    }

    .pathway-card {
        background: var(--surface);
        border: 1px solid var(--line-soft);
        border-radius: var(--r-xl);
        padding: clamp(24px, 3vw, 36px);
        box-shadow: var(--sh-1);
        display: flex;
        flex-direction: column;
        position: relative;
        transition: transform var(--t2) var(--ease), box-shadow var(--t2) var(--ease);
    }

    .pathway-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--sh-2);
    }

    .pathway-card__top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: var(--s3);
    }

    .pathway-card__num {
        font-family: var(--font-display);
        font-weight: 800;
        font-size: 1.5rem;
        color: var(--coral);
        line-height: 1;
    }

    .pathway-card__badge {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        background: var(--sky-tint);
        color: var(--sky-ink);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .pathway-card__badge .ico {
        width: 18px;
        height: 18px;
    }

    .pathway-card strong {
        font-family: var(--font-display);
        font-weight: 800;
        font-size: 1.125rem;
        color: var(--navy);
        margin-bottom: 8px;
        line-height: 1.3;
    }

    .pathway-card p {
        font-size: .9375rem;
        line-height: 1.6;
        color: var(--text-2);
        margin: 0;
    }

    /* ==========================================================================
   RESPONSIVE BREAKPOINTS FOR ABOUT & HOMEPAGE COMPONENTS
   ========================================================================== */
    @media (max-width: 1200px) {
        .trust-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .team-cards-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .founder-card {
            grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
            gap: 32px;
        }
    }

    @media (max-width: 960px) {

        .age-deck,
        .workflow-grid,
        .purpose-grid,
        .pathway-grid {
            grid-template-columns: minmax(0, 1fr);
            gap: 18px;
        }

        .approach-grid {
            grid-template-columns: minmax(0, 1fr);
        }

        .story-pillars {
            grid-template-columns: minmax(0, 1fr);
        }

        .founder-card {
            grid-template-columns: minmax(0, 1fr);
            text-align: center;
        }

        .founder-card__media {
            margin-bottom: var(--s2);
        }

        .founder-chips {
            grid-template-columns: minmax(0, 1fr);
            text-align: left;
        }
    }

    @media (max-width: 768px) {

        .area-deck,
        .values-deck {
            grid-template-columns: minmax(0, 1fr);
        }

        .area-coverage-grid {
            grid-template-columns: minmax(0, 1fr);
        }

        .team-cards-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .phero-visual {
            max-width: 100%;
            justify-self: center;
            margin-top: var(--s4);
        }

        .phero-visual__badge {
            left: 50%;
            transform: translateX(-50%);
            bottom: -12px;
            width: max-content;
            max-width: 90%;
        }
    }

    @media (max-width: 480px) {
        .trust-grid {
            grid-template-columns: minmax(0, 1fr);
        }

        .team-cards-grid {
            grid-template-columns: minmax(0, 1fr);
        }
    }

/* ==========================================================================
   TEAM PAGE ELEVATED COMPONENTS
   ========================================================================== */

/* ---------- Team Hero Refinements ---------- */
.team-hero-card {
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--r-xl);
    padding: clamp(24px, 3vw, 36px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .28);
    display: flex;
    flex-direction: column;
    gap: var(--s3);
}

.team-hero-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.team-hero-card__tag {
    font-family: var(--font-display);
    font-size: .8125rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
    color: var(--sky);
}

.team-hero-card strong {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.4;
    color: #fff;
}

.team-hero-card p {
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--on-dark-2);
    margin: 0;
}

.team-hero-card__metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.team-hero-card__metrics li {
    font-size: .75rem;
    font-weight: 700;
    color: var(--yellow);
    background: rgba(255, 243, 207, .12);
    border: 1px solid rgba(255, 243, 207, .2);
    padding: 5px 12px;
    border-radius: var(--r-pill);
}

/* ---------- Registered Therapists Grid ---------- */
.therapist-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 32px);
}

.therapist-card {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-xl);
    padding: clamp(28px, 3.5vw, 44px);
    box-shadow: var(--sh-1);
    display: grid;
    grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
    gap: clamp(24px, 3.5vw, 44px);
    align-items: center;
    transition: transform var(--t2) var(--ease), box-shadow var(--t2) var(--ease);
}

.therapist-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--sh-2);
}

.therapist-card__media {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
}

.therapist-avatar {
    width: 170px;
    height: 170px;
    border-radius: var(--r-arch);
    background: linear-gradient(135deg, var(--sky) 0%, var(--lavender) 100%);
    border: 3px solid var(--surface);
    box-shadow: var(--sh-2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--navy);
}

.therapist-avatar b {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 800;
    color: var(--navy);
    line-height: 1;
}

.therapist-avatar em {
    font-style: normal;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--text-2);
    margin-top: 4px;
}

.therapist-card__content h3 {
    font-size: clamp(1.4rem, 1.2rem + .6vw, 1.8rem);
    color: var(--navy);
    margin-bottom: 2px;
}

.therapist-card__role {
    display: block;
    font-family: var(--font-display);
    font-size: .9688rem;
    font-weight: 700;
    color: var(--coral-dark);
    margin-bottom: var(--s2);
}

.therapist-scope {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0 0 var(--s3) 0;
}

.therapist-scope li {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--navy-600);
    background: var(--bg);
    border: 1px solid var(--line-soft);
    padding: 4px 12px;
    border-radius: var(--r-pill);
}

.therapist-card__content p {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--text-2);
    margin-bottom: var(--s2);
}

/* ---------- Occupational Therapy Assistants Grid ---------- */
.assistant-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.assistant-card {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-lg);
    padding: 24px 20px;
    box-shadow: var(--sh-1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform var(--t2) var(--ease), box-shadow var(--t2) var(--ease), border-color var(--t2) var(--ease);
}

.assistant-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--sh-2);
    border-color: rgba(23, 42, 58, .16);
}

.assistant-card__top {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: var(--s2);
}

.assistant-avatar-pill {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--yellow-tint) 0%, var(--lavender) 100%);
    border: 2px solid var(--surface);
    box-shadow: var(--sh-1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--navy);
    flex: none;
}

.assistant-card__meta strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.2;
}

.assistant-card__meta span {
    display: block;
    font-size: .8125rem;
    color: var(--coral-dark);
    font-weight: 600;
    margin-top: 2px;
}

.assistant-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0 0 var(--s3) 0;
}

.assistant-card__tags li {
    font-size: .75rem;
    font-weight: 600;
    color: var(--text-2);
    background: var(--bg);
    border: 1px solid var(--line-soft);
    padding: 3px 9px;
    border-radius: var(--r-pill);
}

.assistant-card p {
    font-size: .875rem;
    line-height: 1.55;
    color: var(--text-2);
    margin: 0 0 var(--s2) 0;
}

/* ---------- Supervised Care Model Section ---------- */
.model-commitments {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.model-commitment-card {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    padding: 18px 20px;
    box-shadow: var(--sh-1);
    display: flex;
    gap: 16px;
    align-items: flex-start;
    transition: transform var(--t2) var(--ease), box-shadow var(--t2) var(--ease);
}

.model-commitment-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--sh-2);
}

.model-commitment-card__content strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 3px;
}

.model-commitment-card__content p {
    font-size: .9063rem;
    line-height: 1.5;
    color: var(--text-2);
    margin: 0;
}

.model-visual {
    position: relative;
    max-width: 440px;
    justify-self: end;
}

.model-visual .ph {
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--sh-2);
    border: 1px solid var(--line-soft);
}

.model-visual__badge {
    position: absolute;
    bottom: -16px;
    left: -18px;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(10px);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: var(--sh-3);
    z-index: 2;
}

.model-visual__badge strong {
    display: block;
    font-family: var(--font-display);
    font-size: .9375rem;
    font-weight: 800;
    color: var(--navy);
}

.model-visual__badge span {
    display: block;
    font-size: .8125rem;
    color: var(--text-2);
    margin-top: 2px;
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS FOR TEAM COMPONENTS
   ========================================================================== */
@media (max-width: 1200px) {
    .assistant-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 960px) {
    .therapist-card {
        grid-template-columns: minmax(0, 1fr);
        text-align: center;
    }
    .therapist-card__media {
        margin-bottom: var(--s2);
    }
    .therapist-scope {
        justify-content: center;
    }
    .model-visual {
        max-width: 100%;
        justify-self: center;
        margin-top: var(--s4);
    }
    .model-visual__badge {
        left: 50%;
        transform: translateX(-50%);
        bottom: -12px;
        width: max-content;
        max-width: 90%;
    }
}

@media (max-width: 680px) {
    .assistant-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ==========================================================================
   SERVICES PAGE ELEVATED COMPONENTS
   ========================================================================== */

/* ---------- 8 Core Services Catalog Grid (3-Col + 2 Featured Top) ---------- */
.service-catalog-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(18px, 2.2vw, 26px);
}

.service-catalog-card {
    grid-column: span 2;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--sh-1);
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: transform var(--t2) var(--ease), box-shadow var(--t2) var(--ease), border-color var(--t2) var(--ease);
}

.service-catalog-card--featured,
.service-catalog-card:nth-child(1),
.service-catalog-card:nth-child(2) {
    grid-column: span 3;
}

.service-catalog-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sh-3);
    border-color: rgba(23, 42, 58, .18);
}

.service-catalog-card__media {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--cream);
}

.service-catalog-card--featured .service-catalog-card__media {
    aspect-ratio: 16/8.5;
}

.service-catalog-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s var(--ease);
}

.service-catalog-card:hover .service-catalog-card__media img {
    transform: scale(1.04);
}

.service-catalog-card__body {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: space-between;
}

.service-catalog-card--featured .service-catalog-card__body {
    padding: clamp(20px, 2.5vw, 26px);
}

.service-catalog-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.service-catalog-card__num {
    font-family: var(--font-display);
    font-size: .6875rem;
    font-weight: 800;
    color: var(--text-3);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.service-catalog-card h3 {
    font-size: 1.125rem;
    color: var(--navy);
    margin: 0 0 6px 0;
    line-height: 1.3;
    transition: color var(--t1) var(--ease);
}

.service-catalog-card--featured h3 {
    font-size: 1.25rem;
}

.service-catalog-card:hover h3 {
    color: var(--coral-dark);
}

.service-catalog-card p {
    font-size: .875rem;
    line-height: 1.5;
    color: var(--text-2);
    margin: 0 0 12px 0;
}

.service-catalog-card--featured p {
    font-size: .9063rem;
    line-height: 1.55;
}

.service-catalog-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    list-style: none;
    padding: 0;
    margin: 0 0 14px 0;
}

.service-catalog-card__tags li {
    font-size: .6875rem;
    font-weight: 600;
    color: var(--navy-600);
    background: var(--bg);
    border: 1px solid var(--line-soft);
    padding: 2px 8px;
    border-radius: var(--r-pill);
}

.service-catalog-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid var(--line-soft);
}

.service-catalog-card__foot .link-arrow {
    font-size: .8125rem;
    font-weight: 700;
    color: var(--coral-dark);
}

.service-catalog-card:hover .service-catalog-card__foot .link-arrow .ico {
    transform: translateX(3px);
}

/* ---------- 3-Stage Pathway Section (Dark Navy) ---------- */
.pathway-stage-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 2.5vw, 28px);
}

.pathway-stage-card {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--r-xl);
    padding: clamp(24px, 3vw, 36px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform var(--t2) var(--ease), background var(--t2) var(--ease);
}

.pathway-stage-card:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, .09);
}

.pathway-stage-card__tag {
    display: inline-block;
    font-family: var(--font-display);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--yellow);
    margin-bottom: var(--s2);
}

.pathway-stage-card h3 {
    font-size: 1.375rem;
    color: #fff;
    margin-bottom: 8px;
}

.pathway-stage-card p {
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--on-dark-2);
    margin: 0;
}

/* ---------- Funding Deck & Cards ---------- */
.funding-deck {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.funding-card {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    padding: 16px 18px;
    box-shadow: var(--sh-1);
    display: flex;
    align-items: flex-start;
    gap: 14px;
    transition: transform var(--t2) var(--ease), border-color var(--t2) var(--ease);
}

.funding-card:hover {
    transform: translateY(-2px);
    border-color: rgba(23, 42, 58, .16);
}

.funding-card strong {
    display: block;
    font-family: var(--font-display);
    font-size: .9688rem;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 2px;
}

.funding-card p {
    font-size: .8438rem;
    line-height: 1.45;
    color: var(--text-2);
    margin: 0;
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS FOR SERVICES COMPONENTS
   ========================================================================== */
@media (max-width: 1024px) {
    .service-catalog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .service-catalog-card,
    .service-catalog-card--featured,
    .service-catalog-card:nth-child(1),
    .service-catalog-card:nth-child(2) {
        grid-column: span 1;
    }
}

@media (max-width: 640px) {
    .service-catalog-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .pathway-stage-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
}

/* ==========================================================================
   RESOURCES PAGE ELEVATED COMPONENTS
   ========================================================================== */

.res-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.res-card {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-lg);
    padding: 24px 22px;
    box-shadow: var(--sh-1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform var(--t2) var(--ease), box-shadow var(--t2) var(--ease), border-color var(--t2) var(--ease);
}

.res-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--sh-2);
    border-color: rgba(23, 42, 58, .18);
}

.res-card__top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.res-card__domain {
    font-size: .75rem;
    font-weight: 700;
    color: var(--text-3);
    background: var(--bg);
    border: 1px solid var(--line-soft);
    padding: 3px 10px;
    border-radius: var(--r-pill);
}

.res-card h3 {
    font-size: 1.125rem;
    color: var(--navy);
    margin-bottom: 8px;
    line-height: 1.35;
}

.res-card p {
    font-size: .9063rem;
    line-height: 1.55;
    color: var(--text-2);
    margin: 0 0 16px 0;
}

.res-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid var(--line-soft);
}

.res-card__foot .link-arrow {
    font-size: .8438rem;
    font-weight: 700;
    color: var(--coral-dark);
}

/* ---------- 4-Step First Session Preparation Deck ---------- */
.prep-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.prep-card {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-lg);
    padding: 22px 20px;
    box-shadow: var(--sh-1);
    display: flex;
    gap: 16px;
    align-items: flex-start;
    transition: transform var(--t2) var(--ease), box-shadow var(--t2) var(--ease);
}

.prep-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--sh-2);
}

.prep-card strong {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    color: var(--navy);
    margin-bottom: 4px;
}

.prep-card p {
    font-size: .9063rem;
    line-height: 1.5;
    color: var(--text-2);
    margin: 0;
}

/* ==========================================================================
   FAQS PAGE ELEVATED COMPONENTS
   ========================================================================== */

.faq-hero-search {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-lg);
    padding: 16px 20px;
    box-shadow: var(--sh-1);
    margin-top: var(--s3);
}

.faq-sidebar-card {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-lg);
    padding: 24px 20px;
    box-shadow: var(--sh-1);
    position: sticky;
    top: 100px;
}

.faq-sidebar-card h2 {
    font-size: 1.125rem;
    color: var(--navy);
    margin-bottom: 12px;
}

.faq-sidebar-nav {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--s3) 0;
    display: grid;
    gap: 6px;
}

.faq-sidebar-nav a {
    display: block;
    padding: 8px 12px;
    border-radius: var(--r-sm);
    font-size: .875rem;
    font-weight: 600;
    color: var(--text-2);
    text-decoration: none;
    transition: background var(--t1), color var(--t1);
}

.faq-sidebar-nav a:hover,
.faq-sidebar-nav a.active {
    background: var(--sky-tint);
    color: var(--sky-ink);
}

/* ==========================================================================
   CONTACT PAGE ELEVATED COMPONENTS
   ========================================================================== */

.contact-card-deck {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-info-card {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-lg);
    padding: 24px 22px;
    box-shadow: var(--sh-1);
}

.contact-info-card--sky {
    background: linear-gradient(135deg, var(--surface) 0%, var(--sky-tint) 100%);
    border-color: rgba(34, 102, 109, .15);
}

.contact-info-card--lav {
    background: linear-gradient(135deg, var(--surface) 0%, var(--lavender-tint) 100%);
    border-color: rgba(92, 75, 147, .15);
}

.contact-info-card h2,
.contact-info-card h3 {
    font-size: 1.125rem;
    color: var(--navy);
    margin-bottom: 14px;
}

.contact-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 14px;
}

.contact-info-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: .9375rem;
    color: var(--text);
    margin: 0;
}

.contact-info-list .ico {
    width: 18px;
    height: 18px;
    color: var(--coral-dark);
    flex: none;
    margin-top: 3px;
}

.contact-info-list strong {
    display: block;
    font-family: var(--font-display);
    font-size: .8125rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-3);
    margin-bottom: 2px;
}

/* ---------- Contact Hero Trust Deck (Elevated Bento Chips) ---------- */
.hero-trust-deck,
.hero-highlights {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: clamp(24px, 3vw, 36px);
    max-width: 820px;
}

.hero-trust-card,
.hero-chip {
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(23, 42, 58, .09);
    border-radius: var(--r-lg);
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 4px 16px rgba(23, 42, 58, .04);
    text-decoration: none;
    transition: transform var(--t2) var(--ease), box-shadow var(--t2) var(--ease), border-color var(--t2) var(--ease), background var(--t2) var(--ease);
}

.hero-trust-card:hover,
.hero-chip:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(23, 42, 58, .08);
    border-color: rgba(244, 124, 115, .35);
    background: #ffffff;
}

.hero-trust-card__icon,
.hero-chip .ico-box {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.hero-trust-card__icon--sky,
.hero-chip .ico-box--sky {
    background: var(--sky);
    color: var(--sky-ink);
}

.hero-trust-card__icon--coral,
.hero-chip .ico-box--coral {
    background: var(--coral-tint);
    color: var(--coral-dark);
}

.hero-trust-card__icon--yellow,
.hero-chip .ico-box--yellow {
    background: var(--yellow);
    color: var(--yellow-ink);
}

.hero-trust-card__icon .ico,
.hero-chip .ico {
    width: 18px;
    height: 18px;
}

.hero-trust-card__content,
.hero-chip__text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.hero-trust-card__content strong,
.hero-chip__text strong {
    font-family: var(--font-display);
    font-size: .875rem;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.25;
}

.hero-trust-card__content span,
.hero-chip__text span {
    font-size: .7813rem;
    color: var(--text-2);
    line-height: 1.3;
}

/* ==========================================================================
   RESPONSIVE MEDIA QUERIES FOR RESOURCES, FAQS & CONTACT
   ========================================================================== */
@media (max-width: 960px) {
    .res-grid,
    .prep-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .hero-trust-deck,
    .hero-highlights {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .hero-trust-deck,
    .hero-highlights {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        max-width: 100%;
    }
    .hero-trust-card,
    .hero-chip {
        padding: 10px 14px;
    }
}