/* === Design Tokens - Derived from Logo === */
:root {
    /* Brand: indigo-navy from logo + white. Everything else is a tint. */
    --color-navy: #232066;
    --color-white: #FFFFFF;

    /* Semantic: all derived from the navy */
    --color-primary: var(--color-navy);
    --color-primary-dark: #1A1750;
    --color-text: var(--color-navy);
    --color-text-light: rgba(35, 32, 102, 0.65);
    --color-text-muted: rgba(35, 32, 102, 0.45);
    --color-bg: var(--color-white);
    --color-bg-warm: rgba(35, 32, 102, 0.06);
    --color-bg-warm-light: rgba(35, 32, 102, 0.03);
    --color-border: rgba(35, 32, 102, 0.12);
    --color-accent: var(--color-navy);

    --font-heading: 'Comic Sans MS', 'Comic Sans', 'Comic Neue', 'Chalkboard SE', sans-serif;
    --font-body: 'Comic Sans MS', 'Comic Sans', 'Comic Neue', 'Chalkboard SE', sans-serif;

    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    --shadow-sm: 0 1px 3px rgba(35,32,102,0.06);
    --shadow-md: 0 4px 12px rgba(35,32,102,0.08);
    --shadow-lg: 0 8px 30px rgba(35,32,102,0.1);
    --shadow-xl: 0 16px 50px rgba(35,32,102,0.12);

    --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* === Reset === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 120px; overflow-x: hidden; cursor: default; }
body {
    font-family: var(--font-body);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.7;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea { font-family: inherit; font-size: inherit; cursor: text; }
input[type="range"] { cursor: pointer; }

/* === Layout === */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-xl);
}
.section {
    padding: var(--space-4xl) 0;
}
.section-warm {
    background: var(--color-bg-warm);
}
.section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto var(--space-3xl);
}
.section-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: start;
}

/* === Typography === */
h1, h2, h3, h4 {
    font-family: var(--font-heading);
    line-height: 1.25;
    color: var(--color-primary);
    overflow-wrap: break-word;
    word-wrap: break-word;
}
h1 { font-size: clamp(1.8rem, 3.5vw, 3rem); font-weight: 600; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 600; margin-bottom: var(--space-lg); }
h3 { font-size: 1.3rem; font-weight: 600; margin-bottom: var(--space-sm); }
h4 { font-size: 1.05rem; font-weight: 600; margin-bottom: var(--space-xs); }
p { margin-bottom: var(--space-md); }
.lead { font-size: 1.1rem; color: var(--color-text-light); line-height: 1.8; }
.section-eyebrow {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-sm);
}
.section-desc {
    color: var(--color-text-light);
    font-size: 1.02rem;
}

/* === Buttons === */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 1.8rem;
    border-radius: var(--radius-md);
    font-weight: 500;
    font-size: 0.95rem;
    transition: all var(--transition);
    white-space: nowrap;
}
.btn-primary {
    background: var(--color-navy);
    color: var(--color-white);
    box-shadow: 0 2px 8px rgba(35,32,102,0.25);
}
.btn-primary:hover {
    background: var(--color-primary-dark);
    box-shadow: 0 4px 16px rgba(35,32,102,0.35);
    transform: translateY(-1px);
}
.btn-outline {
    border: 2px solid var(--color-navy);
    color: var(--color-navy);
}
.btn-outline:hover {
    background: var(--color-navy);
    color: var(--color-white);
}
.btn-nav {
    background: var(--color-white);
    color: var(--color-navy);
    padding: 0.55rem 1.4rem;
    font-size: 0.875rem;
}
.btn-nav:hover { background: rgba(255,255,255,0.85); }
.btn-full { width: 100%; }
.btn-sm { padding: 0.45rem 1.2rem; font-size: 0.85rem; }

/* === Main content - clears fixed navbar === */
main {
    margin-top: 120px;
}

/* === Navbar === */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--color-navy);
    transition: all var(--transition);
}
.navbar.scrolled {
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

/* === Banner row: figures spread wide with title centred === */
.nav-banner {
    padding: var(--space-md) var(--space-2xl) 0;
}
.nav-banner-link {
    display: flex;
    align-items: flex-end;
    justify-content: space-evenly;
    color: var(--color-white);
    --banner-h: 80px;
}
.banner-fig {
    flex-shrink: 0;
    width: auto;
}
/* Slightly imperfect vertical alignment - kid-friendly feel */
.nav-banner-link > .banner-fig:first-child  { height: calc(var(--banner-h) * 0.83); margin-bottom: 4px; }  /* running girl - rides a bit high */
.nav-banner-link > .banner-fig-group        { margin-bottom: 0; }                                           /* two children - baseline */
.nav-banner-link > .banner-fig:nth-last-child(2) { height: calc(var(--banner-h) * 0.59); margin-bottom: 24px; } /* dancing girl - raised */
.nav-banner-link > .banner-fig:last-child   { height: calc(var(--banner-h) * 0.68); margin-bottom: 6px; }  /* scooter boy - rides high */

/* Butterfly + two-children wrapper */
.fig-group-children {
    position: relative;
    display: inline-flex;
    align-items: flex-end;
    flex-shrink: 0;
}
.banner-fig-group .banner-fig {
    height: var(--banner-h);
}
.fig-group-children .logo-butterfly {
    position: absolute;
    top: -4px;
    right: -6px;
    height: 16px !important;
    margin: 0 !important;
}

.banner-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 2px;
}
.banner-title .logo-title {
    font-size: 1em;
}
.banner-title .logo-subtitle {
    font-size: 0.62em;
}
.banner-title .logo-divider {
    margin: 2px 0;
}

/* === Nav links row below the banner === */
.nav-bar-row {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xs) var(--space-2xl) var(--space-sm);
}
/* Hide the compact logo on desktop - it's for mobile only */
.nav-logo-compact {
    display: none;
    align-items: center;
}

/* === Composed Logo (compact - used in mobile & footer) === */
.logo-composed {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--color-white);
    height: 80px;
    --logo-font: 'Comic Sans MS', 'Comic Sans', 'Comic Neue', 'Chalkboard SE', sans-serif;
    --row-h: 58px;
}
.logo-row {
    display: flex;
    align-items: flex-end;
    gap: 0;
    height: var(--row-h);
}
.logo-fig {
    width: auto;
    flex-shrink: 0;
}
/* Per-figure heights matching original proportions - slightly off alignment */
.logo-row > .logo-fig:first-child { height: calc(var(--row-h) * 0.83); margin-bottom: 3px; margin-right: 10px; }  /* running girl - rides high */
.logo-row > .fig-group-children { margin-left: 4px; margin-bottom: 0; }  /* two children - baseline */
.logo-row > .fig-group-children .logo-fig:not(.logo-butterfly) { height: var(--row-h); }
.logo-row > .logo-fig:nth-last-child(2) { height: calc(var(--row-h) * 0.59); margin-left: 4px; margin-bottom: -1px; } /* dancing girl - dips */
.logo-row > .logo-fig:last-child { height: calc(var(--row-h) * 0.68); margin-left: 1px; margin-bottom: 4px; } /* scooter boy - rides high */

/* Compact logo butterfly positioned at top-right of two-children */
.logo-row .fig-group-children .logo-butterfly {
    position: absolute;
    top: -2px;
    right: -4px;
    height: 12px !important;
    margin: 0 !important;
}

.logo-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    margin: 0 6px;
}
.logo-title {
    display: flex;
    font-family: 'Comic Sans MS', 'Comic Sans', 'Comic Neue', 'Chalkboard SE', sans-serif;
    font-weight: 700;
    font-size: 0.72em;
    letter-spacing: 0.1em;
    line-height: 1.15;
    white-space: nowrap;
}
/* Shift ADERET left so the D sits above the T in THERAPY */
.logo-title:first-of-type {
    transform: translateX(-1.19em);
}
.logo-divider {
    width: 100%;
    height: 1.5px;
    background: currentColor;
    margin: 1px 0;
    opacity: 0.8;
}
.logo-subtitle {
    display: flex;
    font-family: 'Comic Sans MS', 'Comic Sans', 'Comic Neue', 'Chalkboard SE', sans-serif;
    font-weight: 700;
    font-size: 0.52em;
    letter-spacing: 0.12em;
    line-height: 1.2;
    white-space: nowrap;
}

/* Individual element hover/tap animation */
.logo-el {
    display: inline-block;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: center bottom;
}
@media (hover: hover) {
    .logo-el:hover {
        transform: scale(1.2);
    }
}
/* Character-level hover */
.logo-char {
    display: inline-block;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}
@media (hover: hover) {
    .logo-char:hover {
        transform: scale(1.25) translateY(-1px);
    }
    .logo-el:active,
    .logo-char:active {
        transform: scale(1.3);
    }
}
@keyframes tap-pop-logo {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.3); }
    100% { transform: scale(1); }
}
@media (hover: none) {
    .logo-char.tap-pop,
    .logo-el.tap-pop { animation: tap-pop-logo 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
}

/* Footer variant - proportions from template-matched pixel analysis
   of logo.png (1321×520) against individual figure PNGs:
   ┌────────────────┬──────────────┬───────────┬──────────────────────┐
   │ Element        │ Ref px size  │ Ht ratio  │ Bottom offset (×row) │
   │ Running girl   │ 156×218      │ 0.838     │ +0.038 (raised)      │
   │ Two children   │ 254×260      │ 1.0       │  0                   │
   │ Butterfly      │  63× 65      │ 0.250     │ (abs-positioned)     │
   │ Dancing girl   │ 154×159      │ 0.612     │ +0.473 (leaps high)  │
   │ Scooter boy    │ 202×180      │ 0.692     │ −0.154 (wheel dips)  │
   └────────────────┴──────────────┴───────────┴──────────────────────┘  */
.logo-composed--footer {
    color: var(--color-white);
    height: 54px;
    --row-h: 40px;
    margin-bottom: var(--space-md);
}
/* Footer figure heights - override shared .logo-row defaults */
.logo-composed--footer .logo-row > .logo-fig:first-child {
    height: calc(var(--row-h) * 0.838);       /* running girl */
    margin-bottom: calc(var(--row-h) * 0.038); /* slightly raised */
}
.logo-composed--footer .logo-row > .fig-group-children .logo-fig:not(.logo-butterfly) {
    height: var(--row-h);                       /* two children = baseline */
}
.logo-composed--footer .logo-row > .logo-fig:nth-last-child(2) {
    height: calc(var(--row-h) * 0.612);        /* dancing girl - compact figure */
    margin-bottom: calc(var(--row-h) * 0.473); /* leaps well above baseline */
    margin-left: 4px;
}
.logo-composed--footer .logo-row > .logo-fig:last-child {
    height: calc(var(--row-h) * 0.692);         /* scooter boy */
    margin-bottom: calc(var(--row-h) * -0.154); /* wheel dips below baseline */
    margin-left: 2px;
}
/* Footer butterfly - proportional to row height */
.logo-composed--footer .logo-row .fig-group-children .logo-butterfly {
    height: calc(var(--row-h) * 0.250) !important;
    top: -4px;
    right: -5px;
}
/* Footer text center gap mirrors reference spacing */
.logo-composed--footer .logo-center {
    margin: 0 8px;
}
/* Footer divider: SVG vector line, left-aligned with row start, stops before scooter boy */
.logo-composed--footer .logo-divider {
    width: 30%;
    height: 1.5px;
    align-self: flex-start;
    margin-left: 32%;
    background: none;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
}
.nav-links a {
    font-size: 0.9rem;
    font-weight: 450;
    color: rgba(255,255,255,0.75);
    transition: color var(--transition);
}
.nav-links a:hover { color: var(--color-white); }
.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 4px;
}
.nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-white);
    border-radius: 2px;
    transition: all var(--transition);
}

/* === Hero === */
.hero {
    position: relative;
    padding-top: 120px;
    overflow: hidden;
}
.hero-bg {
    position: absolute;
    inset: 0;
    background: var(--color-bg-warm);
    z-index: -1;
}
.hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: center;
    padding-top: var(--space-4xl);
    padding-bottom: var(--space-4xl);
}
.hero h1 {
    margin-bottom: var(--space-lg);
}
.hero-subtitle {
    font-size: 1.05rem;
    color: var(--color-text-light);
    line-height: 1.8;
    margin-bottom: var(--space-xl);
}
.hero-cta {
    display: flex;
    gap: var(--space-md);
    margin-bottom: var(--space-2xl);
    flex-wrap: wrap;
    justify-content: center;
}
.hero-trust {
    display: flex;
    gap: var(--space-xl);
    flex-wrap: wrap;
    justify-content: center;
}
.trust-item {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.85rem;
    color: var(--color-text-muted);
    font-weight: 450;
}
.trust-item svg {
    width: 18px;
    height: 18px;
    color: var(--color-text-muted);
    flex-shrink: 0;
}
.hero-visual {
    display: flex;
    justify-content: center;
}
.hero-image {
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    max-height: 450px;
    width: 100%;
    object-fit: cover;
}
.hero-wave { display: none; }

/* === Services Intro (homepage cards) === */
.services-intro-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}
.service-intro-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    border: 1px solid var(--color-border);
    text-align: center;
    transition: all var(--transition);
    display: block;
}
@media (hover: hover) {
    .service-intro-card:hover {
        box-shadow: var(--shadow-lg);
        transform: translateY(-4px);
        border-color: var(--color-navy);
    }
}
.sic-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto var(--space-lg);
    color: var(--color-navy);
}
.service-intro-card h3 { color: var(--color-navy); }
.service-intro-card p {
    color: var(--color-text-light);
    font-size: 0.92rem;
    margin-bottom: 0;
}

/* === About === */
.about-content p { line-height: 1.8; }
.name-origin {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-lg) var(--space-xl);
    margin-top: var(--space-lg);

}
.name-origin h4 { color: var(--color-navy); font-family: var(--font-body); }
.name-origin p { margin-bottom: 0; font-size: 0.92rem; color: var(--color-text-light); }

/* Values */
.about-values h3 { margin-bottom: var(--space-xl); }
.values-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}
.value-card {
    background: var(--color-white);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    border: 1px solid var(--color-border);
    transition: all var(--transition);
}
@media (hover: hover) {
    .value-card:hover {
        box-shadow: var(--shadow-md);
    }
}
.value-card h4 { color: var(--color-navy); font-family: var(--font-body); font-size: 0.95rem; }
.value-card p { color: var(--color-text-light); font-size: 0.88rem; margin-bottom: 0; }

/* === Services Grid === */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
    margin-bottom: var(--space-3xl);
}
.service-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    overflow: hidden;
    transition: all var(--transition);
}
@media (hover: hover) {
    .service-card:hover {
        box-shadow: var(--shadow-lg);
        transform: translateY(-4px);
    }
}
.service-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}
.service-body {
    padding: var(--space-lg) var(--space-xl) var(--space-xl);
}
.service-card p {
    color: var(--color-text-light);
    font-size: 0.9rem;
    line-height: 1.7;
}
.service-features {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
}
.service-features li {
    font-size: 0.76rem;
    background: var(--color-bg-warm);
    padding: 0.3rem 0.7rem;
    border-radius: 100px;
    color: var(--color-text-muted);
    font-weight: 500;
}

/* Equipment section */
.equipment-section {
    background: var(--color-bg-warm);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl) var(--space-3xl);
    text-align: center;
}
.equipment-section h3 { margin-bottom: var(--space-sm); }
.equipment-section .lead { margin-bottom: var(--space-xl); }
.equipment-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-sm);
}
.equip-item {
    background: var(--color-white);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    color: var(--color-text-light);
    border: 1px solid var(--color-border);
}

/* === Team === */
.team-card {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--space-3xl);
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-3xl);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-border);
}
.team-img {
    width: 100%;
    border-radius: var(--radius-lg);
    object-fit: cover;
    aspect-ratio: 3/4;
}
.team-header { margin-bottom: var(--space-lg); }
.team-role {
    color: var(--color-text-muted);
    font-weight: 500;
    font-size: 1rem;
    margin-bottom: 0;
}
.team-quals {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-bottom: var(--space-lg);
}
.qual-badge {
    font-size: 0.78rem;
    background: var(--color-bg-warm);
    color: var(--color-navy);
    padding: 0.35rem 0.8rem;
    border-radius: 100px;
    font-weight: 450;
}
.team-info p { color: var(--color-text-light); font-size: 0.95rem; }
.team-specialties {
    background: var(--color-bg-warm-light);
    border-radius: var(--radius-md);
    padding: var(--space-lg) var(--space-xl);
    margin: var(--space-lg) 0;
}
.team-specialties h4 { margin-bottom: var(--space-sm); font-family: var(--font-body); color: var(--color-navy); }
.team-specialties ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xs);
}
.team-specialties li {
    font-size: 0.88rem;
    color: var(--color-text-light);
    padding-left: 1.2rem;
    position: relative;
}
.team-specialties li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-navy);
}
.team-personal {
    font-style: italic;
    font-size: 0.88rem !important;
    color: var(--color-text-muted) !important;
    margin-bottom: 0 !important;
}

/* === Funding === */
.funding-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
    margin-bottom: var(--space-3xl);
}
.funding-card {
    background: var(--color-bg-warm);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    text-align: center;
    border: 1px solid var(--color-border);
    transition: all var(--transition);
}
@media (hover: hover) {
    .funding-card:hover {
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
    }
}
.funding-card h3 { color: var(--color-navy); }
.funding-card p {
    color: var(--color-text-light);
    font-size: 0.92rem;
}
.funding-rate {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-navy);
    margin-top: var(--space-xs);
}

/* Pricing summary */
.pricing-summary {
    background: var(--color-bg-warm-light);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    border: 1px solid var(--color-border);
}
.pricing-summary h3 {
    text-align: center;
    margin-bottom: var(--space-xl);
}
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}
.price-item {
    text-align: center;
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    background: var(--color-white);
    border: 1px solid var(--color-border);
}
.price-duration {
    display: block;
    font-size: 0.82rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-xs);
    font-weight: 500;
}
.price-amount {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-navy);
}
.price-note {
    display: block;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-top: 0.25rem;
}
.price-item {
    cursor: pointer;
    transition: all var(--transition);
}
.price-item.active {
    background: var(--color-navy);
    border-color: var(--color-navy);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
@media (hover: hover) {
    .price-item:hover {
        background: var(--color-navy);
        border-color: var(--color-navy);
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }
    .price-item:hover .price-duration { color: rgba(255,255,255,0.7); }
    .price-item:hover .price-amount { color: var(--color-white); }
    .price-item:hover .price-note { color: rgba(255,255,255,0.6); }
}
.price-item.active .price-duration { color: rgba(255,255,255,0.7); }
.price-item.active .price-amount { color: var(--color-white); }
.price-item.active .price-note { color: rgba(255,255,255,0.6); }
.pricing-note {
    text-align: center;
    font-size: 1.02rem;
    color: var(--color-text-light);
    margin-bottom: 0;
}

/* === FAQ === */
.faq-list {
    max-width: 760px;
    margin: 0 auto;
}
.faq-item {
    border-bottom: 1px solid var(--color-border);
}
.faq-item:first-child {
    border-top: 1px solid var(--color-border);
}
.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-lg) 0;
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--color-text);
    text-align: left;
    transition: color var(--transition);
}
.faq-question:hover { color: var(--color-navy); }
.faq-question svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    transition: transform var(--transition);
    color: var(--color-text-muted);
}
.faq-item.active .faq-question svg {
    transform: rotate(180deg);
}
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}
.faq-item.active .faq-answer {
    max-height: 400px;
}
.faq-answer p {
    padding-bottom: var(--space-lg);
    color: var(--color-text-light);
    font-size: 0.95rem;
    line-height: 1.8;
}

/* === Blog === */
.blog-carousel {
    overflow: hidden;
    cursor: grab;
}
.blog-carousel:active { cursor: grabbing; }
.blog-track {
    display: flex;
    gap: var(--space-xl);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}
.blog-track.dragging { transition: none; }
.blog-card {
    background: var(--color-bg-warm-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
    transition: box-shadow var(--transition), transform var(--transition);
    flex: 0 0 calc((100% - var(--space-xl) * 2) / 3);
    min-width: 0;
}
@media (hover: hover) {
    .blog-card:hover {
        box-shadow: var(--shadow-lg);
        transform: translateY(-4px);
    }
}
/* Carousel arrows (desktop only) */
.blog-carousel { position: relative; }
.blog-arrow {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-navy);
    color: var(--color-white);
    border: none;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    transition: all var(--transition);
    padding: 0;
}
.blog-arrow svg { width: 22px; height: 22px; }
.blog-arrow:hover {
    background: var(--color-primary-dark);
    box-shadow: var(--shadow-lg);
    transform: translateY(-50%) scale(1.1);
}
.blog-arrow:disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}
.blog-arrow-left { left: var(--space-sm); }
.blog-arrow-right { right: var(--space-sm); }
@media (hover: hover) and (pointer: fine) {
    .blog-arrow { display: flex; }
}

/* Blog grid (used on blog.html listing page) */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}
.blog-grid.few-results {
    justify-content: center;
    grid-template-columns: repeat(var(--visible-count, 3), minmax(0, 420px));
}
/* On the grid page, cards shouldn't have flex sizing */
.blog-grid .blog-card { flex: none; }

.blog-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}
.blog-body {
    padding: var(--space-lg) var(--space-xl) var(--space-xl);
}
.blog-date {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
}
.blog-card h3 {
    font-size: 1.1rem;
    margin-top: var(--space-xs);
    margin-bottom: var(--space-sm);
}
.blog-card p {
    color: var(--color-text-light);
    font-size: 0.88rem;
    margin-bottom: 0;
    line-height: 1.7;
}

/* Related posts carousel (inline cards on post pages) */
.related-cards {
    display: flex;
    gap: var(--space-xl);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: var(--space-sm);
}
.related-cards::-webkit-scrollbar { display: none; }
.related-cards .blog-card {
    flex: 0 0 calc((100% - var(--space-xl) * 2) / 3);
    scroll-snap-align: start;
}
.related-cards .blog-card a {
    text-decoration: none;
    color: inherit;
    display: block;
}
.related-cards .blog-img {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
@media (max-width: 1024px) {
    .related-cards .blog-card { flex: 0 0 calc((100% - var(--space-xl)) / 2); }
}
@media (max-width: 768px) {
    .related-cards .blog-card { flex: 0 0 85%; }
}

/* === Blog Page === */
.blog-hero {
    background: var(--color-bg-warm);
    padding: var(--space-4xl) 0 var(--space-3xl);
    margin-top: 120px;
    text-align: center;
}
.blog-hero h1 {
    font-size: 2.2rem;
    margin-top: var(--space-xs);
    margin-bottom: var(--space-sm);
}
.blog-hero-desc {
    color: var(--color-text-light);
    font-size: 1.05rem;
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
}
/* Blog search */
.blog-search-wrap {
    position: relative;
    max-width: 420px;
    margin: var(--space-lg) auto 0;
}
.blog-search {
    width: 100%;
    padding: var(--space-sm) var(--space-md) var(--space-sm) 44px;
    border: 2px solid var(--color-brand);
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-text);
    background: var(--color-white);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.blog-search::placeholder { color: var(--color-text-light); opacity: 0.6; }
.blog-search:focus {
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px rgba(45, 39, 103, 0.12);
}
.blog-search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: var(--color-text-light);
    pointer-events: none;
}
.blog-card.search-hidden, .blog-card.type-hidden {
    display: none;
}

/* Blog type filter chips - mirrors .btn / .btn-outline pattern */
.blog-type-filters {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
    flex-wrap: wrap;
}
.blog-type-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.55rem 1.4rem;
    border: 2px solid var(--color-navy);
    border-radius: var(--radius-md);
    background: transparent;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-navy);
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
}
.blog-type-chip svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.blog-type-chip:hover {
    background: var(--color-bg-warm);
}
.blog-type-chip.active {
    background: var(--color-navy);
    color: var(--color-white);
    box-shadow: 0 2px 8px rgba(35,32,102,0.25);
}
.blog-type-chip.active:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}
@media (max-width: 480px) {
    .blog-type-filters { gap: 6px; }
    .blog-type-chip { padding: 0.45rem 1rem; font-size: 0.82rem; }
    .blog-type-chip svg { width: 14px; height: 14px; }
}

.blog-no-results {
    text-align: center;
    color: var(--color-text-light);
    font-size: 1.05rem;
    padding: var(--space-2xl) 0;
    grid-column: 1 / -1;
}

.blog-view-all {
    text-align: center;
    margin-top: var(--space-lg);
}
/* Iframes carrying _cards.html: default `inline` leaves a ~7px baseline
   gap under them from line-height, which visually widens the space
   between the last card row and the section bottom / footer. */
#blogCarouselFrame, #blogGridFrame { display: block; }
.blog-show-more {
    text-align: center;
    margin-top: var(--space-2xl);
}

/* === Blog content lists === */
.blog-content ul,
.blog-content ol {
    padding-left: var(--space-xl);
    margin-bottom: var(--space-md);
}
.blog-content ul { list-style: disc; }
.blog-content ol { list-style: decimal; }
.blog-content li {
    margin-bottom: var(--space-xs);
}

/* === Image lightbox (blog post inline images) === */
.blog-content img { cursor: zoom-in; }
.lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl);
    cursor: zoom-out;
}
.lightbox-overlay img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--radius-md);
}
.lightbox-close {
    position: absolute;
    top: var(--space-lg);
    right: var(--space-lg);
    width: 44px;
    height: 44px;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    font-size: 1.5rem;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition);
}
.lightbox-close:hover { background: rgba(255, 255, 255, 0.3); }

/* === Contact === */
.contact-grid {
    grid-template-columns: 1fr 1.2fr;
}
.contact-details {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    margin-top: var(--space-xl);
}
.contact-detail {
    display: flex;
    gap: var(--space-md);
    align-items: center;
    flex-wrap: wrap;
}
.contact-detail > svg {
    width: 22px;
    height: 22px;
    color: var(--color-navy);
    flex-shrink: 0;
}
.contact-detail-info {
    flex: 1 1 200px;
    min-width: 0;
}
.contact-detail strong {
    display: block;
    margin-bottom: 0.15rem;
    color: var(--color-navy);
    font-size: 0.9rem;
}
.contact-detail p {
    color: var(--color-text-light);
    font-size: 0.9rem;
    margin-bottom: 0;
}
.contact-detail a {
    color: var(--color-text-muted);
    transition: color var(--transition);
}
.contact-detail a:hover { color: var(--color-navy); }
.contact-detail-action {
    flex: 0 0 200px;
}
.contact-detail-action .btn {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    padding-left: 0.6rem;
    padding-right: 0.6rem;
    color: var(--color-white);
}
.contact-detail-action .btn:hover { color: var(--color-white); }
.contact-detail-action .btn > svg {
    margin-right: 0.4rem;
    flex-shrink: 0;
}
@media (max-width: 480px) {
    /* Icon width (22px) + row gap (--space-md) - same offset the info
       block sits at on the row above, so the button's left edge lines up
       with the label and value text and is inset by the same amount on
       the right. Padding (not margin) so `.btn { width: 100% }` fills
       the padded content box without overflowing. */
    .contact-detail-action {
        flex: 1 1 100%;
        box-sizing: border-box;
        padding-left: calc(22px + var(--space-md));
        padding-right: calc(22px + var(--space-md));
    }
}

/* Google Maps embed - responsive container */
.google-maps {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-border);
    align-self: stretch;
    min-height: 280px;
}
.google-maps iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Contact modal overlay */
.contact-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(35, 32, 102, 0.45);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition), visibility var(--transition);
}
.contact-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}
.contact-modal {
    position: relative;
    font-family: 'Comic Sans MS', 'Comic Sans', 'Comic Neue', 'Chalkboard SE', sans-serif;
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--color-border);
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    transform: translateY(20px);
    transition: transform var(--transition);
}
.contact-modal-overlay.active .contact-modal {
    transform: translateY(0);
}
/* Booking modal: the Cliniko calendar needs more width than the message form.
   Fixed height + flex so the iframe fills the card and scrolls internally -
   one scrollbar (Cliniko's own), never two nested ones. */
.contact-modal-wide {
    max-width: 900px;
    height: 90vh;
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
}
.contact-modal-wide iframe {
    flex: 1;
    min-height: 0;
}
/* Contact form "Sending" spinner - inherits the button text colour */
.btn-spinner {
    display: inline-block;
    width: 0.85em;
    height: 0.85em;
    margin-left: 0.4em;
    vertical-align: -0.12em;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: btn-spin 0.6s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
.contact-modal h3 {
    margin-bottom: var(--space-xl);
}
.contact-modal-close {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    background: none;
    border: none;
    font-size: 1.8rem;
    line-height: 1;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    transition: color var(--transition);
}
.contact-modal-close:hover {
    color: var(--color-navy);
}
.form-group {
    margin-bottom: var(--space-lg);
}
.form-group label {
    display: block;
    font-size: 0.88rem;
    font-weight: 500;
    margin-bottom: var(--space-xs);
    color: var(--color-text);
}
.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-warm-light);
    transition: all var(--transition);
    color: var(--color-text);
}
.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-navy);
    box-shadow: 0 0 0 3px rgba(35,32,102,0.08);
    background: var(--color-white);
}
.form-group textarea { resize: vertical; min-height: 100px; }

/* Enlarge individual letters on hover/tap - applied via JS span wrapping */
.hover-char {
    display: inline-block;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}
/* Word wrapper - inline-block so each word is a unit; browser line-breaks between words */
.hover-word {
    display: inline-block;
    white-space: nowrap;
}
/* SVG letter/figure hover-enlarge - mirrors .hover-char for SVG elements */
.svg-hover-char {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
    pointer-events: auto;
}
.svg-hover-fig {
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: center;
    cursor: default;
}
/* Desktop: hover enlarge */
@media (hover: hover) {
    .hover-char:hover  { transform: scale(1.35); }
    .hover-char:active { transform: scale(1.45); }
    .svg-hover-char:hover  { transform: scale(1.35); }
    .svg-hover-char:active { transform: scale(1.45); }
    .svg-hover-fig:hover  { transform: scale(1.1); }
    .svg-hover-fig:active { transform: scale(1.15); }
}
/* Mobile: tap-pop animation (enlarge then shrink back) */
@keyframes tap-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.45); }
    100% { transform: scale(1); }
}
@keyframes tap-pop-small {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.15); }
    100% { transform: scale(1); }
}
@keyframes tap-pop-lift {
    0%   { transform: translateY(0); }
    40%  { transform: translateY(-4px); }
    100% { transform: translateY(0); }
}
@keyframes tap-pop-lift-small {
    0%   { transform: translateY(0); }
    40%  { transform: translateY(-2px); }
    100% { transform: translateY(0); }
}
@keyframes tap-pop-img {
    0%   { transform: scale(1); filter: sepia(0.3) saturate(0.85); }
    25%  { transform: scale(1.02); filter: sepia(0) saturate(1.15) brightness(1.05); }
    100% { transform: scale(1); filter: sepia(0.3) saturate(0.85); }
}
@media (hover: none) {
    .hover-char.tap-pop,
    .svg-hover-char.tap-pop { animation: tap-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
    .svg-hover-fig.tap-pop  { animation: tap-pop-small 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
    .service-intro-card.tap-pop,
    .service-card.tap-pop,
    .blog-card.tap-pop       { animation: tap-pop-lift 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
    .funding-card.tap-pop    { animation: tap-pop-lift-small 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
    .value-card.tap-pop      { animation: tap-pop-lift-small 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
    .hero-image.tap-pop,
    .service-img.tap-pop,
    .team-img.tap-pop,
    .blog-img.tap-pop        { animation: tap-pop-img 1s ease-in-out; }
}

/* === Quote Section === */
.quote-section {
    background: var(--color-bg-warm);
    padding: var(--space-3xl) 0;
    text-align: center;
}
.quote-section blockquote p {
    font-family: var(--font-heading);
    font-size: clamp(1.3rem, 3vw, 1.8rem);
    color: var(--color-navy);
    font-style: italic;
    margin-bottom: var(--space-sm);
}
.quote-section cite {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    font-style: normal;
}

/* === Footer === */
.footer {
    background: var(--color-navy);
    color: rgba(255,255,255,0.8);
    padding: var(--space-3xl) 0 var(--space-xl);
}
.footer-content {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: var(--space-2xl);
    margin-bottom: var(--space-2xl);
}
.footer-logo {
    height: 48px;
    width: auto;
    margin-bottom: var(--space-md);
}
.footer-brand p {
    font-size: 0.88rem;
    line-height: 1.7;
    opacity: 0.7;
}
.footer-links h4,
.footer-contact h4 {
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-lg);
}
.footer-links li {
    margin-bottom: var(--space-sm);
}
.footer-links a {
    font-size: 0.88rem;
    opacity: 0.65;
    transition: opacity var(--transition);
}
.footer-links a:hover { opacity: 1; }
.footer-contact p {
    font-size: 0.88rem;
    opacity: 0.7;
    margin-bottom: var(--space-xs);
}
.footer-contact a {
    opacity: 0.8;
    transition: opacity var(--transition);
}
.footer-contact a:hover { opacity: 1; }
.footer-bottom {
    text-align: center;
    padding-top: var(--space-xl);
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 0.82rem;
    opacity: 0.5;
}
.footer-bottom p { margin-bottom: 0; }

/* === Image Hover - Colour Pop === */
.hero-image,
.service-img,
.team-img,
.blog-img {
    filter: sepia(0.3) saturate(0.85);
    transition: filter 0.4s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@media (hover: hover) {
    .hero-image:hover,
    .service-img:hover,
    .team-img:hover,
    .blog-img:hover {
        filter: sepia(0) saturate(1.15) brightness(1.05);
        transform: scale(1.02);
    }
}

/* === Animations === */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   RESPONSIVE BREAKPOINTS
   - 1024px: Tablet landscape / small desktop
   - 768px: Tablet portrait
   - 480px: Mobile
   ============================================ */

/* --- Tablet Landscape & Small Desktop (≤1024px) --- */
@media (max-width: 1024px) {
    .container { padding: 0 var(--space-xl); }
    .section { padding: var(--space-3xl) 0; }

    /* Nav → hide banner, show compact logo + hamburger */
    .nav-banner { display: none; }
    .nav-logo-compact { display: flex; }
    /* Compact logo: only running girl + title text */
    .nav-logo-compact .logo-row > .logo-fig { display: none; }
    .nav-logo-compact .logo-row > .logo-fig:first-child { display: block; }
    .nav-logo-compact .logo-row > .fig-group-children { display: none; }
    .nav-bar-row {
        justify-content: space-between;
    }
    .nav-toggle { display: flex; }
    .nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--color-navy);
        flex-direction: column;
        padding: 0 var(--space-xl);
        gap: 0;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        box-shadow: 0 4px 20px rgba(0,0,0,0.3);
        max-height: 0;
        overflow: hidden;
        pointer-events: none;
        transition: max-height 0.35s ease, padding 0.35s ease, gap 0.35s ease;
    }
    .nav-links.open {
        max-height: 400px;
        padding: var(--space-xl);
        gap: var(--space-md);
        pointer-events: all;
    }
    .nav-links a { font-size: 1rem; padding: var(--space-xs) 0; }

    /* Hero → single column */
    .hero-content {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
        padding-top: var(--space-2xl);
        padding-bottom: var(--space-2xl);
    }
    .hero-image { max-height: 350px; border-radius: var(--radius-lg); }

    /* Two-column grids → single column */
    .section-grid { grid-template-columns: 1fr; gap: var(--space-2xl); }
    .contact-grid { grid-template-columns: 1fr; }

    /* Service intro cards → 3 across still works, but tighter */
    .services-intro-grid { gap: var(--space-md); }
    .service-intro-card { padding: var(--space-lg); }

    /* Services grid → 2 columns */
    .services-grid { grid-template-columns: repeat(2, 1fr); }

    /* Blog carousel → 2 cards visible */
    .blog-card { flex: 0 0 calc((100% - var(--space-xl)) / 2); }
    /* Blog grid (blog.html) → 2 columns */
    .blog-grid { grid-template-columns: repeat(2, 1fr); }

    /* Team card → single column */
    .team-card {
        grid-template-columns: 1fr;
        padding: var(--space-2xl);
        gap: var(--space-xl);
    }
    .team-img { aspect-ratio: 16/9; max-height: 320px; }
    .team-specialties ul { grid-template-columns: 1fr; }

    /* Equipment → 2 columns */
    .equipment-grid { grid-template-columns: repeat(2, 1fr); }
    .equipment-section { padding: var(--space-2xl) var(--space-xl); }

    /* Footer → 2 columns */
    .footer-content { grid-template-columns: 1fr 1fr; }

    /* Pricing → 2x2 */
    .pricing-grid { grid-template-columns: repeat(2, 1fr); }

    /* Funding → stack */
    .funding-grid { grid-template-columns: 1fr; }
}

/* --- Tablet Portrait (≤768px) --- */
@media (max-width: 768px) {
    .section { padding: var(--space-2xl) 0; }

    .nav-logo-compact .logo-composed { height: 64px; --row-h: 46px; }

    /* Service intro cards → single column */
    .services-intro-grid { grid-template-columns: 1fr; }

    /* Services → single column */
    .services-grid { grid-template-columns: 1fr; }

    /* Blog carousel → 1 card visible */
    .blog-card { flex: 0 0 100%; }
    /* Blog grid (blog.html) → single column */
    .blog-grid { grid-template-columns: 1fr; }

    /* Values → single column */
    .values-grid { grid-template-columns: 1fr; }

    /* Footer → single column */
    .footer-content { grid-template-columns: 1fr; gap: var(--space-xl); }

    /* Hero trust items wrap tighter */
    .hero-trust { gap: var(--space-md); }
}

/* --- Mobile (≤480px) --- */
@media (max-width: 480px) {
    .container { padding: 0 var(--space-md); }
    .section { padding: var(--space-xl) 0; }

    .nav-logo-compact .logo-composed { height: 48px; --row-h: 34px; }
    .nav-logo-compact .logo-divider,
    .nav-logo-compact .logo-subtitle { display: none; }

    .hero-cta { flex-direction: column; }
    .hero-cta .btn { width: 100%; justify-content: center; }

    .pricing-grid { grid-template-columns: 1fr; }
    .equipment-grid { grid-template-columns: 1fr; }
    .equipment-section { padding: var(--space-lg) var(--space-md); }

    .team-card { padding: var(--space-lg); }
    .contact-modal { padding: var(--space-lg); }
    .google-maps { min-height: 220px; }
    .pricing-summary { padding: var(--space-lg); }
}

/* ===== Pose schema controls (auto-rendered in interactive posts) =====
   Rendered by window.renderControlsFromSchema into
   .aderet-auto-pose-controls-bottom for schema-based poses. */
.aderet-auto-pose-controls-top,
.aderet-auto-pose-controls-bottom {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin: var(--space-md) 0;
}
.pose-control-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pose-ctrl-label {
    font-size: 13px;
    color: var(--color-navy);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.pose-ctrl-value {
    font-size: 13px;
    color: var(--color-navy);
    font-weight: 700;
    margin-left: 6px;
}
.pose-control-slider-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.pose-control-slider-end {
    font-size: 12px;
    color: var(--color-text-muted);
    white-space: nowrap;
}
input[type="range"].pose-control-slider {
    flex: 1;
    width: 100%;
    accent-color: var(--color-navy);
    cursor: pointer;
}
.pose-control-toggle {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.pose-control-pill {
    flex: 1;
    padding: 8px 14px;
    border-radius: 999px;
    border: 2px solid var(--color-navy);
    background: transparent;
    color: var(--color-navy);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.pose-control-pill.active {
    background: var(--color-navy);
    color: #fff;
}
.pose-control-pill:hover:not(.active) {
    background: rgba(30, 58, 95, 0.08);
}
.pose-control-button {
    padding: 8px 16px;
    border-radius: var(--radius-md);
    border: 2px solid var(--color-navy);
    background: var(--color-navy);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    align-self: flex-start;
}
.pose-control-status {
    background: var(--color-bg-warm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    font-size: 14px;
    line-height: 1.6;
}
.pose-status-line {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.pose-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.pose-status-title {
    font-weight: 700;
    color: var(--color-navy);
}
.pose-status-tip {
    color: var(--color-text);
    font-size: 13.5px;
    margin-top: 6px;
}


/* ==== find-in-page underlay ==================================== */
/* wrapChars() splits text into per-character inline-block spans for the
   hover effect, which breaks Ctrl+F. Each split element gets an invisible
   plain-text twin (.find-underlay) layered behind the glyphs: the browser
   matches and highlights the twin, and the highlight paints through
   beneath the visible letters. Kerning/ligatures are disabled on the twin
   so it wraps at the same points as the kerning-free split spans.
   NOTE: no overflow:hidden here - combined with the negative z-index it
   hangs Chromium's headless/CDP capture pipeline. */
.has-find-underlay { position: relative; z-index: 0; }
.find-underlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    padding: inherit;
    box-sizing: border-box;
    color: transparent !important;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    font-kerning: none;
    font-variant-ligatures: none;
}
.find-underlay * { color: transparent !important; }
/* replaced elements don't obey text transparency - hide them but keep
   their layout box so the twin wraps at the same points */
.find-underlay img, .find-underlay svg, .find-underlay video,
.find-underlay iframe, .find-underlay canvas, .find-underlay input,
.find-underlay button { visibility: hidden !important; }


/* ==== article components (byline, share bar, contact CTA) ====== */
.post-byline { margin-top: var(--space-xl); margin-bottom: 0; font-size: 0.85rem; opacity: 0.65; }
.post-share { margin-top: var(--space-2xl); display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.post-share-label { font-weight: 700; color: var(--color-navy); }
.post-share .share-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 2.6rem; min-height: 2.6rem; padding: 0.5rem; border-radius: 999px; border: 2px solid var(--color-navy); background: transparent; color: var(--color-navy); font-family: inherit; font-size: 0.9rem; font-weight: 700; text-decoration: none; cursor: pointer; transition: all var(--transition); }
.post-share .share-btn svg { width: 1.15rem; height: 1.15rem; }
.post-share .share-btn[hidden] { display: none; }
.post-share .share-btn:hover { background: var(--color-navy); color: var(--color-white); transform: translateY(-2px); }
.post-share .share-btn-copied { padding: 0.5rem 1rem; }
.post-cta { margin-top: var(--space-xl); background: var(--color-bg-warm); border-radius: var(--radius-lg); padding: var(--space-xl) var(--space-lg); text-align: center; }
.post-cta h2 { margin-bottom: var(--space-sm); font-size: 1.35rem; }
.post-cta p { max-width: 560px; margin: 0 auto var(--space-md); }
.post-cta .post-cta-buttons { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; }