/* ===== Design Tokens (palette) ===== */
:root {
    /* Light palette */
    --light-bg: #f5f6fa;
    --light-bg-alt: #e1e3ea;
    --light-header: #fff;
    --light-footer: #222;
    --light-footer-text: #fff;
    --light-primary: #0057b8;
    --light-text: #111;
    --light-nav-hover: #e1e3ea;
    --light-overlay: rgba(0, 0, 0, 0.6);
    --light-hero-overlay: rgba(0, 0, 0, 0.6);
    --light-header-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    --light-dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    --light-mobile-menu-bg: #fff;
    --light-cta-bg: #fff;
    --light-cta-text: var(--light-primary);
    --light-cta-hover-bg: var(--light-primary);
    --light-cta-hover-text: #fff;

    /* Dark palette */
    --dark-bg: #23272f;
    --dark-bg-alt: #2e323a;
    --dark-header: #181a20;
    --dark-footer: #111;
    --dark-footer-text: #eee;
    --dark-primary: #4ea1ff;
    --dark-text: #f5f6fa;
    --dark-nav-hover: #353a42;
    --dark-overlay: rgba(0, 0, 0, 0.8);
    --dark-hero-overlay: rgba(0, 0, 0, 0.6);
    --dark-header-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    --dark-dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    --dark-mobile-menu-bg: rgba(30, 34, 40, 0.98);
    --dark-cta-bg: var(--dark-primary);
    --dark-cta-text: #fff;
    --dark-cta-hover-bg: #fff;
    --dark-cta-hover-text: var(--dark-primary);
    --dark-primary-strong: #2563eb;

    /* Semantic tokens (mapped to palette) */
    --bg: var(--light-bg);
    --bg-alt: var(--light-bg-alt);
    --header-bg: var(--light-header);
    --header-shadow: var(--light-header-shadow);
    --footer-bg: var(--light-footer);
    --footer-text: var(--light-footer-text);
    --primary: var(--light-primary);
    --text: var(--light-text);
    --nav-hover: var(--light-nav-hover);
    --overlay: var(--light-overlay);
    --hero-overlay: var(--light-hero-overlay);
    --dropdown-shadow: var(--light-dropdown-shadow);
    --mobile-menu-bg: var(--light-mobile-menu-bg);
    --cta-bg: var(--light-cta-bg);
    --cta-text: var(--light-cta-text);
    --cta-hover-bg: var(--light-cta-hover-bg);
    --cta-hover-text: var(--light-cta-hover-text);
    --divider: #e5e7eb;
}

/* Toggle semantic tokens when dark mode is active */
:root[data-theme="dark"] {
    --bg: var(--dark-bg);
    --bg-alt: var(--dark-bg-alt);
    --header-bg: var(--dark-header);
    --header-shadow: var(--dark-header-shadow);
    --footer-bg: var(--dark-footer);
    --footer-text: var(--dark-footer-text);
    --primary: var(--dark-primary);
    --text: var(--dark-text);
    --nav-hover: var(--dark-nav-hover);
    --overlay: var(--dark-overlay);
    --hero-overlay: var(--dark-hero-overlay);
    --dropdown-shadow: var(--dark-dropdown-shadow);
    --mobile-menu-bg: var(--dark-mobile-menu-bg);
    --cta-bg: var(--dark-primary-strong);
    --cta-text: #fff;
    --cta-hover-bg: #fff;
    --cta-hover-text: var(--dark-primary-strong);
    --divider: #3a3f46;
}

:root[data-theme="light"] .hero {
    background-color: #b68144;
}

:root[data-theme="dark"] .hero {
    background-color: #b68144;
}

html {
    color-scheme: light dark;
}

/* === No‑JS mode: keep only brand + theme toggle visible === */
.no-js .nav,
.no-js .hamburger,
.no-js .overlay,
.no-js .mobile-menu {
    display: none !important;
}

/* Hide the hamburger until the menu is populated (first paint & if JSON fails) */
.header-right-controls:has(.nav ul:empty) .hamburger {
    display: none;
}

/* Also hide an empty desktop nav at ≥1200px to avoid a blank bar */
@media (min-width: 1200px) {
    .header-right-controls:has(.nav ul:empty) .nav {
        display: none !important;
    }
}

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

.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.skip-link:focus {
    left: 8px;
    top: 8px;
    width: auto;
    height: auto;
    padding: 8px 12px;
    background: var(--header-bg);
    color: var(--text);
    border-radius: 4px;
    z-index: 2000;
}

body {
    margin: 0;
    font-family: "Segoe UI", Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    /* Keep off-canvas elements (e.g. mobile drawer) from widening the page */
    overflow-x: hidden;
}

/* ===== Header ===== */
.header {
    position: sticky;
    top: 0;
    background: var(--header-bg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    height: 56px;
    z-index: 1000;
    box-shadow: var(--header-shadow);
    transition: background 0.3s;
}

/* default: show light logo, hide dark one */
.logo-dark {
    display: none;
}

:root[data-theme="dark"] .logo-light {
    display: none;
}

:root[data-theme="dark"] .logo-dark {
    display: inline-block;
}

:root[data-theme="dark"] .brand img {
    filter: none;
}

/* Brand area aligns logo + short title on one line */
.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: var(--text);
}

.brand:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Short site title: compact, bold, respects theme colors */
.brand-title {
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.2px;
    font-size: clamp(0.95rem, 1rem + 0.5vw, 1.25rem);
    white-space: nowrap;
    max-width: 18ch;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-right-controls {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Light/Dark Toggle */
.theme-toggle {
    background: none;
    border: none;
    font-size: 1.5em;
    cursor: pointer;
    color: var(--primary);
    transition: color 0.3s;
    flex-shrink: 0;
    padding: 0;
    line-height: 1;
}

/* ===== Hamburger ===== */
.hamburger {
    display: flex;
    /* Default for mobile */
    flex-direction: column;
    justify-content: center;
    width: 36px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
}

.hamburger span {
    display: block;
    height: 3px;
    width: 100%;
    background: var(--primary);
    margin: 2px 0;
    border-radius: 2px;
    transition: background 0.3s;
}

:focus-visible {
    outline: 4px solid var(--primary);
    outline-offset: 0px;
}

/* ===== Navigation (Mobile First) ===== */
.nav {
    display: none;
    /* Hidden on mobile by default */
    align-items: center;
}

/* Mobile Menu Overlay */
.overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--overlay);
    z-index: 1100;
    transition: background 0.3s;
}

.overlay.active {
    display: block;
}

.mobile-menu {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    width: 80vw;
    max-width: 340px;
    height: 100vh;
    background: var(--mobile-menu-bg);
    z-index: 1101;
    padding: 32px 0 0 0;
    box-shadow: -2px 0 16px rgba(0, 0, 0, 0.12);
    transform: translateX(100%);
    transition: transform 0.3s;
    overflow-y: auto;
}

.mobile-menu.active {
    transform: translateX(0);
}

.mobile-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-menu .nav-item {
    border-bottom: 1px solid var(--divider);
    position: relative;
}

.mobile-menu .nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 28px;
    color: var(--text);
    text-decoration: none;
    font-size: 1.1em;
    font-weight: 500;
    background: none;
    border: none;
    width: 100%;
    cursor: pointer;
    transition: background 0.2s;
}

.mobile-menu :is(.nav-link, .dropdown a):hover {
    background: var(--nav-hover);
}

.mobile-menu .arrow {
    margin-left: 8px;
    font-size: 1em;
    transition: transform 0.2s;
}

.mobile-menu .dropdown {
    display: none;
    flex-direction: column;
    background: none;
    box-shadow: none;
    position: static;
    padding: 0 0 0 24px;
}

.mobile-menu .dropdown a {
    display: block;
    padding: 12px 0;
    color: var(--text);
    text-decoration: none;
    font-size: 1em;
    transition: background 0.2s;
}

.mobile-menu .nav-item.open>.dropdown {
    display: flex;
}

.mobile-menu .nav-item.open>.nav-link .arrow {
    transform: rotate(180deg);
}

/* ===== Hero ===== */
.hero {
    /* layout */
    position: relative;
    display: grid;
    place-items: center;
    text-align: center;
    overflow: hidden;

    /* sizing */
    min-height: clamp(420px, 52vw, 640px);

    /* colour + fallbacks */
    color: #fff;
    background: #b68144;
    /* visible only while image loads */
    /* hero-scoped tokens (no theme duplication) */
    --hero-cta-bg: var(--dark-primary-strong);
    --hero-cta-text: #fff;
    --hero-cta-hover-bg: #8b0000;
    --hero-cta-hover-text: #fff;
    --hero-link: #7ee1ff;
    --hero-link-hover: #ff6d6f;
    --hero-link-underline: color-mix(in srgb, var(--hero-link) 60%, transparent);
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--hero-overlay);
    z-index: 1;
}

.hero .hero-media {
    grid-area: 1 / 1;
    display: block;
    width: 100%;
    justify-self: stretch;
}

.hero .hero-media img {
    display: block;
    width: 100%;
    height: auto;
    /* safe with responsive picture sources */
    object-position: center;
    /* consistent crop focus */
}

.hero-content {
    grid-area: 1 / 1;
    position: relative;
    z-index: 2;
    max-width: min(92vw, 980px);
    padding: clamp(16px, 3vw, 40px);

    /* unify spacing without extra wrappers */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(8px, 1.5vw, 18px);
}

/* One-line title that truncates gracefully on small screens */
.hero-title {
    margin: 0;
    font-weight: 800;
    line-height: 1.1;
    font-size: clamp(1rem, 5.6vw, 3rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Centered list container; left‑aligned items */
.hero-bullets {
    list-style: none;
    margin: 6px 0 12px;
    padding: 0;
    display: inline-block;
    /* centers the UL */
    text-align: left;
}

.hero-bullets li {
    font-weight: 700;
    display: flex;
    margin: 6px 0;
    line-height: 1.6;
    font-size: clamp(1.12rem, 1rem + 1.35vw, 2rem);
    align-items: baseline;
    /* baseline-align icon + text */
    gap: clamp(15px, 2vw, 30px);
    /* scale spacing with viewport */
}

/* --- Hero bullets: green checkmark that scales with text size --- */
.hero-bullets li::before {
    content: "✓";
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 1em;
    height: 1em;
    font-weight: 900;
    line-height: 1;
    color: #16a34a;
    transform: translateY(0.06em);
}


/* High-contrast links on dark image */
.hero-bullets a {
    color: var(--hero-link);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--hero-link-underline, currentColor);
    text-underline-offset: 3px;
}

.hero-bullets a:hover,
.hero-bullets a:focus-visible {
    color: var(--hero-link-hover);
    text-decoration-color: var(--hero-link-hover);
}

/* Stacked CTAs */
.hero-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(12px, 4vh, 60px);
}

/* Pill CTAs: one definition covers size + theme */
.hero-cta {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 30px;
    background: var(--hero-cta-bg);
    color: var(--hero-cta-text);
    font-weight: 600;
    font-size: clamp(1.06rem, 0.6rem + 1vw, 1.375rem);
    line-height: 1.2;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: background 0.2s ease, color 0.2s ease, transform 0.06s ease-in-out;
}

.hero-cta:hover,
.hero-cta:focus-visible {
    background: var(--hero-cta-hover-bg);
    color: var(--hero-cta-hover-text);
}

.hero-cta:active {
    transform: translateY(1px);
}

/* ——— Responsive tweaks ——— */
@media (max-width: 767.98px) {
    .hero {
        align-items: flex-start;
        min-height: clamp(320px, 60vw, 420px);
    }

    .hero-content {
        padding-top: clamp(8px, 3vh, 16px);
    }
}

@media (min-width: 1200px) {

    /* preserve your original “shorter on desktop” intent */
    .hero {
        height: 420px;
    }
}

@media (min-width: 1200px) {
    .hero-content {
        align-self: start;
        padding-top: 60px;
        padding-left: 40px;
        max-width: 1100px;
    }
}

/* keep existing behaviour: hide secondary CTA on very small screens */
@media (max-width: 549.98px) {
    .hero-cta--contact {
        display: none;
    }
}

/* Restore container top alignment only at ultra‑wide widths */
@media (min-width: 1600px) {
    .hero {
        align-items: flex-start;
    }
}

/* Ensure the focus ring itself meets 3:1 on a dark hero */
.hero :is(a, .hero-cta):focus-visible {
    outline: 3px solid #ffffff;
    /* 5.74:1 on #666 */
    outline-offset: 3px;
}

/* Give CTAs a visible perimeter that meets Non-text Contrast (3:1) */
.hero-cta {
    box-shadow: 0 0 0 1px #ffffff,
        /* white keyline: 5.74:1 vs #666 */
        0 2px 8px rgba(0, 0, 0, 0.08);
    /* keep your existing soft shadow */
}

/* Extra-small phones: tighten hero bullets only */
@media (max-width: 349.98px) {
    .hero .hero-bullets li {
        /* Smaller than your current clamp on tiny screens */
        font-size: clamp(0.95rem, 0.85rem + 0.6vw, 1.08rem);
        line-height: 1.5;
        /* a touch tighter than 1.6 to save vertical space */
        gap: 10px;
        /* your current min is 15px; trim a little on XS */
    }
}

/* ===== Sections ===== */
.section {
    width: 100%;
    padding: 36px 0;
    text-align: center;
    content-visibility: auto;
    contain-intrinsic-size: 500px;
}

/* Robust alternation: scope to main content only */
#main-content>.section:nth-child(even) {
    background: var(--bg-alt);
}

#main-content>.section:nth-child(odd) {
    background: var(--bg);
}

.section-title {
    font-size: 1.2rem;
    margin-bottom: 12px;
    font-weight: 600;
}

.section-content {
    max-width: 90vw;
    margin: 0 auto;
    font-size: 1rem;
    line-height: 1.7;
}

/* === Sections: reusable split layout & link styling (About) === */

/* Hyperlinks in ALL sections (bold + underline; light/dark color rules) */
:root[data-theme="light"] #main-content .section a {
    color: #0b5bd3;
}

:root[data-theme="light"] #main-content .section a:hover,
:root[data-theme="light"] #main-content .section a:focus-visible {
    color: #c00000;
}

:root[data-theme="dark"] #main-content .section a {
    color: #7ec1ff;
}

:root[data-theme="dark"] #main-content .section a:hover,
:root[data-theme="dark"] #main-content .section a:focus-visible {
    color: #ff7578;
}

#main-content .section a {
    font-weight: 800;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

/* Split section (text left, image right; stacks on mobile) */
.section--split {
    text-align: left;
}

.section--split .split {
    display: grid;
    grid-template-columns: 1fr;
    /* mobile-first: single column */
    align-items: center;
    gap: clamp(24px, 4vw, 56px);
    max-width: min(1160px, 86vw);
    /* ↑ more side margins */
    margin: 0 auto;
}

.section--split .section-title {
    margin: 0 0 clamp(10px, 1.2vw, 18px);
    font-weight: 800;
    line-height: 1.1;
    font-size: clamp(2.1rem, 3.4vw, 3.1rem);
    /* big on desktop */
}

.section--split .lead {
    font-size: clamp(1.18rem, 1.05rem + 1.2vw, 1.6rem);
    line-height: 1.7;
    margin: 0 0 clamp(10px, 1.6vw, 20px);
}

/* Prevent non‑lead paragraph from shrinking too much */
.section--split .split-text p {
    font-size: clamp(1.06rem, 0.6rem + 1vw, 1.25rem);
    line-height: 1.7;
    margin: 0 0 clamp(10px, 1.4vw, 18px);
}

.section--split .split-text {
    max-width: 68ch;
}

.section--split .split-media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

/* Tablets & phones: scale down text and tighten line-height slightly */
@media (max-width: 1199.98px) {
    .section--split .lead {
        font-size: clamp(1.02rem, 0.9rem + 0.8vw, 1.35rem);
        line-height: 1.55;
    }

    .section--split .split-text p {
        font-size: clamp(1rem, 0.88rem + 0.7vw, 1.2rem);
        line-height: 1.55;
    }
}

/* Mobile: picture above the words */
@media (max-width: 899.98px) {
    .section--split .split-media {
        order: -1;
    }
}

/* Desktop: two columns */
@media (min-width: 900px) {
    .section--split .split {
        grid-template-columns: 1.08fr 1fr;
    }
}

/* === Sections: tablet centering fix (600–900px) === */
@media (min-width: 600px) and (max-width: 899.98px) {
    .section--split .split {
        justify-items: center;
        /* center the blocks horizontally */
    }

    .section--split .split>* {
        justify-self: center;
        /* ensure both text and image are centered */
    }
}

/* === Sections: orange accent card behind image === */

/* 1) Make the image wrapper the containing block for ::after */
.section--split .split-media {
    position: relative;
    /* <— CRITICAL: anchors ::after to the image */
    isolation: isolate;
    /* keep negative z-index behind the photo only */
    overflow: visible;
    z-index: 0;
    /* creates a local stacking context */
}

/* 2) The accent card itself */
.section--split .split-media.split-media--accent::after {
    content: "";
    position: absolute;
    inset: auto 0 0 auto;
    transform: translate(8%, 10%);
    /* consistent “peek” everywhere */
    inline-size: clamp(220px, 85%, 640px);
    /* scales with the photo */
    aspect-ratio: 1.3;
    /* locks the shape */
    background: #f59e0b;
    border-radius: clamp(18px, 2.2vw, 24px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
    z-index: -1;
}

/* === Split orientation helpers (preserve existing sizes/spacing) === */
@media (min-width: 900px) {

    /* Base desktop columns (image wider than text) */
    .section--split .split {
        grid-template-columns: 1.08fr 1fr;
        /* already defined; restated for clarity */
    }

    /* Image on LEFT (default) — explicit but optional */
    .section--split .split.split--image-left .split-media {
        grid-column: 1;
    }

    .section--split .split.split--image-left .split-text {
        grid-column: 2;
    }

    /* Image on RIGHT — keep the image column the wider one */
    .section--split .split.split--image-right {
        grid-template-columns: 1fr 1.08fr;
        /* swap column widths so image keeps its width */
    }

    .section--split .split.split--image-right .split-media {
        grid-column: 2;
    }

    .section--split .split.split--image-right .split-text {
        grid-column: 1;
    }
}

/* === Split orientation via template areas (explicit, no holes) === */

/* Mobile-first: single column, image above text */
.section--split .split {
    /* keep existing properties; add the following two lines */
    grid-template-areas:
        "media"
        "text";
}

.section--split .split .split-media {
    grid-area: media;
}

.section--split .split .split-text {
    grid-area: text;
}

/* Desktop orientations */
@media (min-width: 900px) {

    /* Image LEFT (original look) */
    .section--split .split.split--image-left {
        grid-template-columns: 1.08fr 1fr;
        /* image slightly wider */
        grid-template-areas: "media text";
    }

    /* Image RIGHT (swap columns; keep image the wider column) */
    .section--split .split.split--image-right {
        grid-template-columns: 1fr 1.08fr;
        /* text | image */
        grid-template-areas: "text media";
    }
}

/* === Qualifications section: larger bullet lists === */
/* No HTML changes needed; targets only #qualifications */
#qualifications .split-text ul {
    /* match paragraph spacing rhythm */
    margin: 0 0 clamp(10px, 1.4vw, 18px);
    padding-left: clamp(22px, 2.2vw, 30px);
    /* comfortable indent */
    list-style: disc outside;
}

#qualifications .split-text li {
    /* ~6–10% larger than your normal paragraph size, fully responsive */
    font-size: clamp(1.12rem, 0.72rem + 1.05vw, 1.35rem);
    line-height: 1.7;
    color: var(--text);
    /* explicit for safety across themes */
}

/* Reusable large-list utility */
.split-text ul.list--lg>li {
    font-size: clamp(1.12rem, 0.72rem + 1.05vw, 1.35rem);
    line-height: 1.7;
}

.section--programs .section-title {
    margin: 0 0 clamp(10px, 1.2vw, 18px);
    font-weight: 800;
    line-height: 1.1;
    font-size: clamp(2.1rem, 3.4vw, 3.1rem);
    /* big on desktop */
}

/* === Sections: 3-up "Programs" cards === */
.section--programs .programs-grid {
    /* centers the grid like your split layout */
    max-width: min(1160px, 92vw);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(18px, 2.6vw, 36px);
}

@media (min-width: 900px) {
    .section--programs .programs-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.section--programs .program {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* centers the block under the image */
    gap: 12px;
}

.section--programs .program-media {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
    background: var(--header-bg);
}

.section--programs .program-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.section--programs .program-text {
    /* left-justified text, but constrained + centered within the card */
    width: 88%;
    max-width: 46ch;
    text-align: left;
}

.section--programs .program-title {
    margin: 2px 0 6px;
    font-weight: 800;
    line-height: 1.2;
    font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem);
}

.section--programs .program-desc {
    margin: 0;
    font-size: clamp(1rem, 0.92rem + 0.4vw, 1.1rem);
    line-height: 1.65;
}

#main-content .section.section--programs .program-title a {
    text-decoration: none;
}

/* Ensure an accessible focus indicator since we removed the underline */
.section--programs a:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* === Programs (mobile/tablet tuning) === */

/* When the grid stacks (<900px): make each square image smaller
   and keep the text block the same width, centered under the image. */
@media (max-width: 899.98px) {

    .section--programs .program-media,
    .section--programs .program-text {
        width: min(75vw, 320px);
        /* ← tune these two numbers */
        inline-size: min(75vw, 320px);
        /* logical alias; keep in sync */
    }
}

/* Tablets only (≈ 600–899px): phone sizes were fine, tablet was too small. */
@media (min-width: 600px) and (max-width: 899.98px) {
    .section--programs .program-title {
        /* lift heading weight/size a notch on tablets */
        font-size: clamp(1.35rem, 0.8rem + 2vw, 1.7rem);
    }

    .section--programs .program-desc {
        font-size: clamp(1.06rem, 0.9rem + 1.1vw, 1.3rem);
        line-height: 1.65;
    }
}

/* Programs: larger text on desktop only */
@media (min-width: 1200px) {

    /* Section heading */
    .section--programs .section-title {
        /* was: clamp(2.1rem, 3.4vw, 3.1rem) */
        font-size: clamp(2.4rem, 2rem + 1vw, 3.4rem);
    }

    /* Card title */
    .section--programs .program-title {
        /* was: clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem) */
        font-size: clamp(1.6rem, 1.2rem + 1.1vw, 2rem);
    }

    /* Card body */
    .section--programs .program-desc {
        /* was: clamp(1rem, 0.92rem + 0.4vw, 1.1rem) */
        font-size: clamp(1.15rem, 1rem + 0.6vw, 1.3rem);
        line-height: 1.7;
    }
}

/* Reuse the hero CTA shape inside the Programs section */
.section--programs {
    --hero-cta-bg: var(--dark-primary-strong);
    /* same blue as hero */
    --hero-cta-text: #fff;
    --hero-cta-hover-bg: #8b0000;
    /* dark red on hover */
    --hero-cta-hover-text: #fff;
}

.section--programs .hero-cta {
    margin-top: 10px;
    font-size: clamp(0.95rem, 0.6rem + 0.6vw, 1.05rem);
    padding: 10px 22px;
}

/* Override the global section link styling only for the pill */
#main-content .section.section--programs .hero-cta {
    text-decoration: none;
    font-weight: 600;
    /* match hero pill weight */
}

/* Visible perimeter ring (keyline) tuned per theme */
:root[data-theme="light"] #main-content .section.section--programs .hero-cta {
    box-shadow: 0 0 0 1px #000000, 0 2px 8px rgba(0, 0, 0, 0.08);
}

:root[data-theme="dark"] #main-content .section.section--programs .hero-cta {
    box-shadow: 0 0 0 1px #ffffff, 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Keyboard focus ring, also theme-aware */
:root[data-theme="light"] #main-content .section.section--programs .hero-cta:focus-visible {
    outline: 3px solid #000;
    /* strong on light backgrounds */
    outline-offset: 3px;
}

:root[data-theme="dark"] #main-content .section.section--programs .hero-cta:focus-visible {
    outline: 3px solid #fff;
    /* strong on dark backgrounds */
    outline-offset: 3px;
}

/* Programs: WhatsApp pill — white text, slightly larger, bold */
:root[data-theme="light"] #main-content .section.section--programs .hero-cta,
:root[data-theme="dark"] #main-content .section.section--programs .hero-cta {
    color: #fff;
    /* beat the section link color */
    font-weight: 700;
    /* ensure bold */
    font-size: clamp(1.12rem, 0.7rem + 1vw, 1.45rem);
    /* slightly larger than hero */
    text-decoration: none;
    /* keep pill un‑underlined */
}

/* Hover/focus: keep text white while background switches to dark red */
:root[data-theme="light"] #main-content .section.section--programs .hero-cta:hover,
:root[data-theme="light"] #main-content .section.section--programs .hero-cta:focus-visible,
:root[data-theme="dark"] #main-content .section.section--programs .hero-cta:hover,
:root[data-theme="dark"] #main-content .section.section--programs .hero-cta:focus-visible {
    color: #fff;
    /* override section hover link color */
}

/* ===== Testimonials ===== */
.section--testimonials {
    text-align: center;
}

.section--testimonials .t-wrap {
    max-width: min(1160px, 92vw);
    margin: 0 auto;
    text-align: center;
    position: relative;
}

.section--testimonials .t-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: clamp(10px, 1.6vw, 18px);
}

/* Larger, bold, in line with your other large section titles */
.section--testimonials .t-title {
    margin: 0;
    font-weight: 800;
    line-height: 1.1;
    font-size: clamp(2.2rem, 2rem + 1.2vw, 3.2rem);
}

/* Prev / Next buttons */
.section--testimonials .t-nav {
    display: inline-flex;
    gap: 10px;
}

.section--testimonials .t-btn {
    inline-size: 60px;
    block-size: 60px;
    border-radius: 50%;
    border: 2px solid var(--divider);
    background: transparent;
    color: var(--text);
    font-size: 36px;
    line-height: 1;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease,
        transform 0.06s ease-in-out;
}

.section--testimonials .t-btn:hover,
.section--testimonials .t-btn:focus-visible {
    background: var(--nav-hover);
    border-color: var(--primary);
}

.section--testimonials .t-btn:active {
    transform: translateY(1px);
}

.section--testimonials .t-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* The sliding track */
.section--testimonials .t-track {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    overflow: hidden;
    border-radius: 16px;
    position: relative;
}

/* Each slide (card) */
.section--testimonials .t-slide {
    display: grid;
    place-items: center;
    padding: clamp(20px, 4vw, 36px);
}

.section--testimonials .t-card {
    max-width: min(100ch, 90%);
    background: var(--header-bg);
    color: var(--text);
    border-radius: 18px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
    padding: clamp(22px, 3.6vw, 40px);
    border: 1px solid var(--divider);
}

/* Avatar + name block */
.section--testimonials .t-headerline {
    display: grid;
    justify-items: center;
    gap: 8px;
    margin-bottom: clamp(8px, 1.2vw, 12px);
}

.section--testimonials .t-avatar {
    inline-size: 72px;
    block-size: 72px;
    border-radius: 50%;
    background: var(--bg-alt);
    color: var(--text);
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 1.25rem;
    border: 2px solid var(--divider);
    overflow: hidden;
}

.section--testimonials .t-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.section--testimonials .t-name {
    font-weight: 800;
    font-size: clamp(1.25rem, 1rem + 0.9vw, 1.6rem);
    margin: 0;
}

.section--testimonials .t-tagline {
    margin: 0;
    opacity: 0.85;
    font-size: clamp(1rem, 0.92rem + 0.5vw, 1.1rem);
}

.section--testimonials .t-quote {
    margin: clamp(14px, 2vw, 20px) auto 0;
    font-size: clamp(1.12rem, 0.9rem + 1.1vw, 1.5rem);
    line-height: 1.8;
    max-width: 66ch;
}

#testimonials {
    --testimonial-scale: 0.75;
}

.section--testimonials .t-quote {
    font-size: clamp(calc(1.12rem * var(--testimonial-scale)),
            calc((0.9rem + 1.1vw) * var(--testimonial-scale)),
            calc(1.5rem * var(--testimonial-scale)));
}

/* Dots */
.section--testimonials .t-dots {
    margin-top: clamp(10px, 1.6vw, 18px);
    display: flex;
    justify-content: center;
    gap: 10px;
}

.section--testimonials .t-dot {
    inline-size: 10px;
    block-size: 10px;
    border-radius: 50%;
    background: transparent;
    border: 2px solid var(--divider);
    padding: 0;
    display: inline-block;
    cursor: pointer;
    position: relative;
}

.section--testimonials .t-dot[aria-selected="true"]::after {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background: var(--primary);
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .section--testimonials .t-track {
        scroll-behavior: auto;
    }

    .section--testimonials .t-btn {
        transition: none;
    }
}

.section--testimonials .t-card {
    border-bottom: 4px solid #f59e0b;
}

@media (max-width: 420px) {
    .section--testimonials .t-btn {
        inline-size: 48px;
        block-size: 48px;
        font-size: 30px;
    }
}

/* === Testimonials: high-contrast arrow discs (idle + hover) === */
:root[data-theme="light"] {
    /* Black disc on light theme, white chevron */
    --tbtn-bg: #000;
    --tbtn-fg: #fff;
}

:root[data-theme="dark"] {
    /* White disc on dark theme, black chevron */
    --tbtn-bg: #fff;
    --tbtn-fg: #000;
}

.section--testimonials .t-btn {
    background: var(--tbtn-bg);
    color: var(--tbtn-fg);
    /* chevrons */
    border-color: var(--tbtn-bg);
    /* no faint ring */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    /* subtle lift on both themes */
}

/* Keep the disc on hover/focus, just highlight the ring */
.section--testimonials .t-btn:hover,
.section--testimonials .t-btn:focus-visible {
    background: var(--tbtn-bg);
    /* override earlier grey hover */
    color: var(--tbtn-fg);
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary), 0 8px 20px rgba(0, 0, 0, 0.18);
}

/* === Make orange accent card a bit shorter on ≤400px === */
@media (max-width: 400px) {
    .section--split .split-media.split-media--accent::after {
        aspect-ratio: 1.6;
        /* was 1.3 → ~19% shorter; try 1.7–1.8 if you want more */
        /* keep inset + translate as-is to retain bottom-right placement */
        /* inset: auto 0 0 auto; transform: translate(8%, 10%); */
    }
}

/* Testimonials: dedicated viewport so the track can move */
.section--testimonials .t-viewport {
    overflow: hidden;
    border-radius: 16px;
    /* preserve the rounded corners you had on .t-track */
}

/* Let the track move; clipping is now on the wrapper */
.section--testimonials .t-track {
    overflow: visible;
    /* important override */
    will-change: transform;
    /* smoother */
}

/* Tighten vertical rhythm a touch */
.section--testimonials .t-header {
    margin-bottom: clamp(6px, 0.9vw, 12px);
}

.section--testimonials .t-slide {
    padding: clamp(14px, 2.4vw, 28px);
}

.section--testimonials .t-card {
    padding: clamp(18px, 3vw, 34px);
}

.section--testimonials .t-dots {
    margin-top: clamp(6px, 0.9vw, 12px);
}

.section--testimonials {
    content-visibility: visible;
    contain-intrinsic-size: auto;
}

/* Testimonials: make the track hug the active slide */
.section--testimonials .t-track {
    align-items: start;
    /* don't stretch items to the max slide */
    transition: height 0.25s ease;
    /* smooth height adjustment */
}

/* Put the card at the top of each slide; center horizontally only */
.section--testimonials .t-slide {
    place-items: start center;
    /* was: place-items: center */
}

/*=====*/

/* === Testimonials: high-visibility indicator dots (Google/WCAG-friendly) === */
/* Theme-aware colors */
:root[data-theme="light"] {
    --t-dot-ring: #000;
    /* visible outline on light bg */
    --t-dot-fill: transparent;
    /* idle interior */
    --t-dot-active: var(--primary);
    --t-dot-focus: var(--primary);
}

:root[data-theme="dark"] {
    --t-dot-ring: #fff;
    /* visible outline on dark bg */
    --t-dot-fill: transparent;
    --t-dot-active: var(--primary);
    --t-dot-focus: var(--primary);
}

/* Row spacing and hit targets */
.section--testimonials .t-dots {
    margin-top: clamp(8px, 1.2vw, 14px);
    display: flex;
    justify-content: center;
    gap: 12px;
}

/* Make each dot a 44×44px tap target (Google recommends ≥48dp; WCAG suggests ≥44px) */
.section--testimonials .t-dot {
    inline-size: 44px;
    block-size: 44px;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    position: relative;
    border-radius: 999px;
    /* for focus outline shape */
}

/* The visible dot is drawn with a pseudo-element inside the 44×44 target */
.section--testimonials .t-dot::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    inline-size: 12px;
    /* visual dot size */
    block-size: 12px;
    border-radius: 50%;
    background: var(--t-dot-fill);
    box-shadow: 0 0 0 2px var(--t-dot-ring);
    /* high-contrast ring */
    transition: transform 0.12s ease, box-shadow 0.12s ease,
        background-color 0.12s ease;
}

/* Selected (current slide): filled with primary + matching ring */
.section--testimonials .t-dot[aria-selected="true"]::before {
    background: var(--t-dot-active);
    box-shadow: 0 0 0 2px var(--t-dot-active);
}

/* Hover: slightly enlarge and tint the ring (keeps contrast) */
.section--testimonials .t-dot:hover::before {
    transform: scale(1.15);
    box-shadow: 0 0 0 2px var(--t-dot-active);
}

/* Keyboard focus: clear, accessible outline around the full 44×44 target */
.section--testimonials .t-dot:focus-visible {
    outline: 3px solid var(--t-dot-focus);
    outline-offset: 2px;
}

/* Optional: denser layout on very narrow phones */
@media (max-width: 380px) {
    .section--testimonials .t-dot {
        inline-size: 40px;
        block-size: 40px;
    }

    .section--testimonials .t-dot::before {
        inline-size: 10px;
        block-size: 10px;
    }
}

/* --- Dots: prevent overflow by allowing wrap and densifying when many --- */

/* Let dots wrap to multiple rows, keep centered */
.section--testimonials .t-dots {
    flex-wrap: wrap;
    /* key change */
    row-gap: 6px;
    /* comfortable vertical spacing between rows */
}

/* When there are ≥12 dots, shrink the 44×44 tap targets to 32×32 to save space */
.section--testimonials .t-dots:has(.t-dot:nth-child(n + 12)) .t-dot {
    inline-size: 32px;
    block-size: 32px;
}

.section--testimonials .t-dots:has(.t-dot:nth-child(n + 12)) .t-dot::before {
    inline-size: 10px;
    block-size: 10px;
}

/* Optional: fallback if a very old browser lacks :has() (Firefox <121 etc.) */
@supports not selector(:has(*)) {
    @media (max-width: 600px) {
        .section--testimonials .t-dot {
            inline-size: 36px;
            block-size: 36px;
        }
    }
}

/* Disable the legacy ::after fill so only the modern ::before dot is used */
.section--testimonials .t-dot::after {
    content: none;
}

/* Selected state: fill interior with theme-blue, keep ring as high-contrast */
.section--testimonials .t-dot[aria-selected="true"]::before {
    background: var(--t-dot-active);
    /* the blue interior */
    box-shadow: 0 0 0 2px var(--t-dot-ring);
    /* keep the ring black (light) / white (dark) */
}

/* Hover: don’t recolor the ring; keep the contrast outline */
.section--testimonials .t-dot:hover::before {
    transform: scale(1.15);
    box-shadow: 0 0 0 2px var(--t-dot-ring);
}

/* === PATCH: Testimonials dots — keep blue strictly inside the dot === */

/* 1) Kill the legacy ::after painter completely (older 10px dot rules) */
.section--testimonials .t-dot::after {
    content: none !important;
}

/* 2) Selected state: fill ONLY the interior; ring stays high‑contrast (black in light / white in dark) */
.section--testimonials .t-dot[aria-selected="true"]::before {
    background: var(--t-dot-active) !important;
    /* dark blue in light mode, light blue in dark mode */
    box-shadow: 0 0 0 2px var(--t-dot-ring) !important;
    /* neutral ring; prevents blue halo */
}

/* 3) Hover: keep the ring neutral as well (no blue spill) */
.section--testimonials .t-dot:hover::before {
    box-shadow: 0 0 0 2px var(--t-dot-ring) !important;
}

/* 4) Keyboard focus: retain an accessible outline, but neutral (not blue) */
.section--testimonials .t-dot:focus-visible {
    outline: 3px solid var(--t-dot-ring) !important;
    /* was var(--t-dot-focus)=blue */
    outline-offset: 2px;
}

/* 5) Belt‑and‑braces: ensure the base (idle) ring is neutral everywhere */
.section--testimonials .t-dot::before {
    box-shadow: 0 0 0 2px var(--t-dot-ring) !important;
}

/* === PATCH: Extra‑small phones (≤400px) — tighter title + smaller arrow discs === */
@media (max-width: 400px) {
    .section--testimonials .t-title {
        /* reduce from clamp(2.2rem, 2rem + 1.2vw, 3.2rem) */
        font-size: clamp(1.45rem, 6vw, 1.9rem);
    }

    /* keep tap target ≥44px for usability while shrinking the glyph */
    .section--testimonials .t-btn {
        inline-size: 44px;
        block-size: 44px;
        font-size: 24px;
        /* chevron size */
    }
}

/* --- Contact section (scoped) --- */
.section--contact {
    text-align: left;
}

/* Center + large heading like other big section titles */
.section--contact .section-title {
    text-align: center;
    margin-bottom: clamp(14px, 1.8vw, 20px);
    font-weight: 800;
    line-height: 1.1;
    /* matches your larger section headings/testimonials size */
    font-size: clamp(2.2rem, 2rem + 1.2vw, 3.2rem);
}

.contact-grid {
    display: grid;
    gap: clamp(16px, 2.2vw, 24px);
    grid-template-columns: 1fr;
    max-width: min(1160px, 92vw);
    margin: 0 auto;
}

@media (min-width: 1000px) {
    .contact-grid {
        grid-template-columns: minmax(280px, 380px) 1fr;
    }
}

/* ===== Left Contact Card =====
     Very dark brown for *all* modes to guarantee high contrast */
.contact-card {
    --card-bg: #2b1600;
    /* very dark brown: white text/links have excellent contrast */
    background: var(--card-bg);
    color: #fff;
    border-radius: 18px;
    padding: clamp(18px, 2.8vw, 28px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}

.contact-card .card-title {
    margin: 0 0 8px;
    font-weight: 900;
    font-size: clamp(1.8rem, 1.1rem + 1.8vw, 2.2rem);
    line-height: 1.15;
}

.contact-card .card-blurb {
    margin: 0 0 14px;
    line-height: 1.7;
    font-size: clamp(1.06rem, 0.95rem + 0.6vw, 1.25rem);
}

.meta {
    display: grid;
    gap: 14px;
    margin-top: 8px;
    font-size: clamp(1.02rem, 0.9rem + 0.5vw, 1.2rem);
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.avatar {
    inline-size: 64px;
    block-size: 64px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 800;
    background: rgba(255, 255, 255, 0.16);
    border: 2px solid rgba(255, 255, 255, 0.7);
}

.contact-card a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 800;
}

.contact-card a:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
    border-radius: 6px;
}

.icon {
    inline-size: 22px;
    block-size: 22px;
    fill: currentColor;
    opacity: 0.95;
}

/* ===== Form ===== */
.contact-form {
    background: var(--header-bg);
    color: var(--text);
    border: 1px solid var(--divider);
    border-radius: 18px;
    padding: clamp(18px, 2.8vw, 28px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.form-row--2 {
    grid-template-columns: 1fr;
}

@media (min-width: 700px) {
    .form-row--2 {
        grid-template-columns: 1fr 1fr;
    }
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-label {
    font-weight: 800;
    font-size: clamp(1.06rem, 0.9rem + 0.5vw, 1.25rem);
}

.form-hint {
    font-size: 0.98rem;
    opacity: 0.85;
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
    font: inherit;
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--divider);
    border-radius: 12px;
    padding: 14px 16px;
    font-size: clamp(1.02rem, 0.9rem + 0.4vw, 1.2rem);
}

textarea {
    min-height: 160px;
    resize: vertical;
}

input:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
    border-color: var(--primary);
}

fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 10px;
}

.form-legend {
    font-weight: 900;
    margin-bottom: 8px;
    font-size: clamp(1.15rem, 1rem + 0.6vw, 1.35rem);
}

.options {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
}

.option {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: clamp(1.02rem, 0.9rem + 0.5vw, 1.2rem);
}

.option input[type="radio"] {
    accent-color: var(--primary);
}

.option--other input[type="text"] {
    min-width: min(320px, 60vw);
}

.required-badge {
    font-weight: 700;
    color: #ff0000;
}

.btn-pill {
    display: inline-block;
    padding: 14px 28px;
    border-radius: 30px;
    background: var(--cta-bg);
    color: var(--cta-text);
    font-weight: 800;
    border: 0;
    cursor: pointer;
    font-size: clamp(1.02rem, 0.9rem + 0.5vw, 1.2rem);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 20%, transparent),
        0 2px 8px rgba(0, 0, 0, 0.08);
    transition: background 0.2s ease, color 0.2s ease, transform 0.06s ease-in-out;
}

.btn-pill:hover,
.btn-pill:focus-visible {
    background: var(--cta-hover-bg);
    color: var(--cta-hover-text);
}

.btn-pill:active {
    transform: translateY(1px);
}

.form-actions {
    margin-top: 12px;
}

.form-alert {
    display: none;
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 1rem;
}

.form-alert--success {
    background: #e8f8ee;
    color: #065f46;
    border: 1px solid #10b981;
}

.form-alert--error {
    background: #fde8e8;
    color: #7f1d1d;
    border: 1px solid #ef4444;
}

:root[data-theme="dark"] .form-alert--success {
    background: #0b2b1f;
    color: #b7f3dc;
}

:root[data-theme="dark"] .form-alert--error {
    background: #3a0f0f;
    color: #fecaca;
}

.counter {
    font-size: 1rem;
    opacity: 0.75;
    text-align: right;
}

/* accessible “screen reader only” helper */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    white-space: nowrap;
    clip-path: inset(50%);
    clip: rect(0 0 0 0);
    overflow: hidden;
}

/* =========================
     PATCH: Contact card links
     ========================= */
/* Use dark‑mode link/hover colours on the left card even when the page is in light mode. 
     We out‑specific the global '#main-content .section a' rules. */
:root[data-theme="light"] #main-content .section.section--contact .contact-card a {
    color: #7ec1ff;
    /* same as dark mode link colour */
    text-decoration-color: #7ec1ff;
    /* keep underline consistent */
}

:root[data-theme="light"] #main-content .section.section--contact .contact-card a:hover,
:root[data-theme="light"] #main-content .section.section--contact .contact-card a:focus-visible {
    color: #ff7578;
    /* same as dark mode hover colour */
    text-decoration-color: #ff7578;
}

/* Keep the white focus outline on the dark card for visibility */
.section--contact .contact-card a:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
    border-radius: 6px;
}

/* ==============================================
     PATCH: "Send Message" pill – thicker theme ring
     ============================================== */
/* Light mode: thicker black perimeter */
:root[data-theme="light"] .section--contact .btn-pill {
    /* was a 1px subtle keyline; make it clearly 2px */
    box-shadow: 0 0 0 2px #000000, 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Dark mode: analogous 2px white perimeter */
:root[data-theme="dark"] .section--contact .btn-pill {
    box-shadow: 0 0 0 2px #ffffff, 0 2px 8px rgba(0, 0, 0, 0.18);
}

/* ================================
   CONTACT: XS overflow hardening
   ================================= */

/* Let grid children shrink with the viewport (safe globally) */
.contact-grid>* {
    min-width: 0;
    /* overrides grid default min-width:auto */
}

/* Inputs should never exceed their container */
.section--contact input[type="text"],
.section--contact input[type="email"],
.section--contact input[type="tel"],
.section--contact textarea {
    width: 100%;
    max-width: 100%;
}

/* When space is tight, allow the "Other" text box to wrap under its label */
@media (max-width: 359.98px) {
    .option--other {
        flex-wrap: wrap;
        /* allow children to break to a new line */
        align-items: flex-start;
        gap: 8px 10px;
        /* slightly denser on XS */
    }

    .option--other input[type="text"] {
        /* override global min(320px,60vw) so it cannot force the card wider */
        min-width: 0;
        flex: 1 1 100%;
        width: 100%;
    }

    /* Slightly tighter card padding to reclaim a few px on ultra-narrow phones */
    .contact-card,
    .contact-form {
        padding: 12px;
    }
}

/* Optional: give the grid a touch more usable width on very small phones */
@media (max-width: 399.98px) {
    .contact-grid {
        max-width: 96vw;
        /* was 92vw; reduces side margins to cut risk of scrollbars */
    }
}

/* ===== Footer ===== */
.footer {
    background: var(--footer-bg);
    color: var(--footer-text);
    text-align: center;
    padding: 24px 0 16px 0;
    font-size: 1rem;
    letter-spacing: 0.5px;
    transition: background 0.3s, color 0.3s;
}

/* ====== Desktop Styles ====== */
@media (min-width: 1200px) {
    .header {
        height: 72px;
        padding: 0 40px;
    }

    .logo img {
        max-height: 40px;
    }

    .theme-toggle {
        font-size: 1.7em;
    }

    .hamburger {
        display: none;
    }

    /* Hide hamburger on desktop */
    .nav {
        display: flex;
        align-items: center;
        gap: 0;
    }

    .nav ul {
        display: flex;
        align-items: center;
        gap: 0;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .nav-item {
        position: relative;
    }

    .nav-link {
        text-decoration: none;
        color: var(--text);
        font-weight: 500;
        padding: 12px 16px;
        border-radius: 4px;
        transition: background 0.2s;
        display: flex;
        align-items: center;
        cursor: pointer;
        background: none;
        border: none;
        font-size: 1em;
        line-height: 1.2;
    }

    .nav-link:hover {
        background: var(--nav-hover);
    }

    .arrow {
        margin-left: 6px;
        font-size: 0.8em;
        transition: transform 0.2s;
    }

    .dropdown {
        display: none;
        position: absolute;
        top: 100%;
        right: 0;
        background: var(--header-bg);
        min-width: 180px;
        box-shadow: var(--dropdown-shadow);
        border-radius: 6px;
        z-index: 1001;
        padding: 8px 0;
        flex-direction: column;
    }

    .dropdown a {
        display: block;
        padding: 10px 20px;
        color: var(--text);
        text-decoration: none;
        font-size: 1em;
        transition: background 0.2s;
    }

    .dropdown a:hover {
        background: var(--nav-hover);
    }

    /* Make dropdown keyboard-openable, not just hover */
    .nav-item:hover .dropdown,
    .nav-item:focus-within .dropdown {
        display: flex;
    }

    .nav-item.force-close .dropdown {
        display: none !important;
    }

    .nav-item:focus-within .arrow,
    .nav-item:hover .arrow {
        transform: rotate(180deg);
    }

    .mobile-menu,
    .overlay {
        display: none !important;
    }

    /* Hide mobile UI */
    .hero {
        height: 420px;
    }

    .section {
        padding: 64px 0;
    }

    .section-title {
        font-size: 2rem;
    }

    .section-content {
        max-width: 700px;
        font-size: 1.1rem;
    }
}

/* ===== WhatsApp floating button ===== */
.whatsapp-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: transparent;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
    z-index: 1002;
    width: 60px;
    height: 60px;
}

.whatsapp-button img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.whatsapp-button:hover,
.whatsapp-button:active {
    transform: scale(1.1);
    animation: pulse 1s infinite;
}

@media (min-width: 768px) {
    .whatsapp-button {
        width: 80px;
        height: 80px;
    }

    .whatsapp-button:hover,
    .whatsapp-button:active {
        transform: scale(1.15);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }

    .whatsapp-button:hover,
    .whatsapp-button:active {
        transform: none;
        animation: none;
    }
}

/* --- Fix descender clipping in hero titles on non-blog pages --- */
.hero .hero-title {
    /* give glyphs with descenders (g,j,p,q,y) headroom */
    line-height: 1.15;
    /* was effectively ~1.00; bump slightly */
    padding-bottom: 0.12em;
    /* tiny breathing room, visually neutral */
}

/* If a container is clipping, ensure the text can render fully */
.hero .hero-content {
    overflow: visible;
    /* safe for text; does not affect background */
}


/* 700–1199px: compact hero + tighter vertical rhythm */
@media (min-width: 700px) and (max-width: 1199.98px) {

    /* shorter overall hero */
    .hero {
        /* was clamp(420px, 52vw, 640px) */
        min-height: clamp(320px, 40vw, 480px);
        /* lift content toward the sticky header */
        align-items: flex-start;
        /* overrides place-items:center vertically */
    }

    /* reduce the gap above/below the hero text block */
    .hero-content {
        padding-block-start: 10px;
        /* less space under header */
        padding-block-end: 12px;
        /* less space above next section */
        gap: clamp(6px, 1vw, 12px);
        /* slightly tighter internal spacing */
    }

    /* CTAs stack tighter on tablets */
    .hero-actions {
        gap: clamp(8px, 1.8vh, 24px);
    }

    /* first content section starts closer to the hero */
    #main-content>.section:first-of-type {
        padding-top: 18px;
    }
}


/* Make the hero image always fill the hero’s height */
.hero {
    position: relative;
    /* already present; needed for absolute positioning */
    overflow: hidden;
    /* hide the crop */
}

/* Pin the <picture> to the hero’s edges so it defines the backdrop */
.hero-media {
    position: absolute;
    inset: 0;
    /* top:0 right:0 bottom:0 left:0 */
    z-index: 1;
    /* stays behind the text (hero-content has z-index:2) */
    height: 100%;
    pointer-events: none;
    /* image never blocks clicks on CTAs */
}

/* Force the <img> to fill the box and crop as needed */
.hero .hero-media img {
    width: 100%;
    height: 100% !important;
    /* override inline height:auto */
    object-fit: cover;
    /* fill + maintain aspect ratio, crop overflow */
    object-position: center;
    /* adjust focal point as needed */
}