@import url("theme_settings/theme_settings.css");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,600;0,700;1,400;1,700&display=swap");

:root {
    /* Theme tokens — every reference includes a diagnostic fallback so
       a missing theme_settings.css is visually obvious during review. */
    --color-1:        var(--color-1-theme, #00ff00);
    --color-2:        var(--color-2-theme, #ff00ff);
    --color-over-1:   var(--color-over-1-theme, #000000);
    --color-over-2:   var(--color-over-2-theme, #ffffff);
    --color-1-isDark: var(--color-1-theme-isDark, 0);
    --color-2-isDark: var(--color-2-theme-isDark, 0);

    /* Brand palette. Primary and secondary come from the CMS theme editor via the
       theme tokens above, so a color change in the admin flows through to the
       whole design. The three extra accents (blue, mint, cream) have no slot in
       the theme editor's primary+secondary model, so they stay literal here.
       Each surface color has a paired -over foreground for accessible text. */
    --brand-primary:        var(--color-1);
    --brand-over-primary:   var(--color-over-1);
    --brand-secondary:      var(--color-2);
    --brand-over-secondary: var(--color-over-2);
    --brand-blue:   #22577a;
    --brand-mint:   #80ed99;
    --brand-cream:  #ebe8e6;
    --brand-over-blue:  #ffffff;
    --brand-over-mint:  #0e3524;
    --brand-over-cream: #123a29;
    --brand-primary-hover: color-mix(in srgb, var(--brand-primary), white 14%);
    --brand-mint-hover:  color-mix(in srgb, var(--brand-mint), black 10%);

    /* Breakpoint tokens — media queries can't read custom properties,
       so the rem values repeat in @media (min-width: …) below. */
    --size-sm: 48rem;     /* tablet */
    --size-md: 64rem;     /* desktop */
    --size-lg: 85.375rem; /* large desktop */
    --size-xl: 120rem;    /* max content width */

    --content-max: 75rem;
    --header-h: 4.5rem;   /* fixed header height so header + hero sum to 100vh */
    --spotlight-pad-y: 5.5rem;   /* 88px shared top/bottom breathing room inside each spotlight */
}

html { height: 100%; }

body {
    margin: 0;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    font-family: "Montserrat", Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.6;
    color: #1f2a24;
}

.site-header,
.site-footer { flex: none; }

#content_main {
    flex: 1 0 auto;
    width: 100%;
    box-sizing: border-box;
    max-width: var(--inside-content-max, var(--size-lg));
    padding: var(--inside-content-pad-y, 1.5rem) var(--inside-content-pad-x, clamp(0.5rem, 5%, 3rem));
    margin-inline: auto;
    background-color: #fff;
}

/* Homepage reset — the .site-homepage wrapper in index.jsp gates this. */
body:has(.site-homepage) #content_main {
    max-width: none;
    padding: 0;
    background-color: transparent;
}

.pageTitle {
    color: var(--color-1);
    filter: brightness(var(--color-1-isDark));
    font-family: "Montserrat", Arial, sans-serif;
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.25;
    margin-block: 0 1.5rem;
}

.site-header .site-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 0.5rem 1rem;
    background-color: var(--brand-primary);
    color: var(--brand-over-primary);
    text-decoration: none;
}
.site-header .site-skip-link:focus-visible {
    left: 0;
}

/* Screen-reader-only text. */
.hidden-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

/* ===================================================================
   Shared type + buttons
   =================================================================== */

.site-homepage h2 {
    font-family: "Montserrat", Arial, sans-serif;
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 0.75rem;
}

.site-homepage h3 {
    font-family: "Montserrat", Arial, sans-serif;
    font-weight: 700;
    margin: 0 0 0.5rem;
}

.site-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background-color: var(--brand-mint);
    color: var(--brand-over-mint);
    font-weight: 700;
    text-decoration: none;
    border-radius: 999px;
    transition: background-color 0.15s ease, transform 0.15s ease;
}
.site-btn::after {
    font-family: "Material Symbols Outlined";
    font-variation-settings: "FILL" 1;
    text-transform: none;
    content: "arrow_forward" / "";
    font-size: 1.15em;
}
.site-btn:hover,
.site-btn:focus-visible {
    background-color: var(--brand-mint-hover);
    transform: translateY(-2px);
}
.site-btn--lg {
    padding: 1rem 2rem;
    font-size: 1.125rem;
}
/* button-styled anchors: (0,1,2) beats the system a:link (0,1,1) that loads after main.css */
body a.site-btn { color: var(--brand-over-mint); }
body a.site-btn:hover,
body a.site-btn:focus-visible { color: var(--brand-over-mint); }

/* ===================================================================
   Header + navigation
   =================================================================== */

.site-header {
    position: relative;              /* containing block for the mobile menu panel */
    background-color: #ffffff;
    color: #1f2a24;
}

/* Mobile: a single logo row; the absolutely positioned menu toggle sits in the
   right-hand padding. Desktop turns this into a grid (see the 64rem block). */
.site-header__bar {
    --header-pad-x: clamp(1rem, 4vw, 3rem);
    box-sizing: border-box;
    height: var(--header-h);         /* fixed so it sums with the hero to 100vh */
    display: flex;
    align-items: center;
    padding: 0.75rem 4.5rem 0.75rem var(--header-pad-x);   /* right: toggle clearance */
}

.site-brand {
    grid-area: brand;
    min-width: 0;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
}
.site-brand__logo {
    display: block;
    height: auto;
    width: auto;
    max-height: 2.75rem;
    max-width: 100%;
    object-fit: contain;
}
/* visible new-tab indicator on nav links that open a new tab; suppressed from the accessible name */
.site-nav a[target="_blank"]::after {
    font-family: "Material Symbols Outlined";
    text-transform: none;
    content: "open_in_new" / "";
    font-size: 0.85em;
    margin-left: 0.25em;
    vertical-align: middle;
}

/* search icon link (logo row on desktop, menu panel on mobile) */
.site-header .site-header__search {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    color: var(--brand-primary);
    filter: brightness(var(--color-1-isDark));
    text-decoration: none;
    transition: transform 0.15s ease;
}
.site-header .site-header__search::before {
    font-family: "Material Symbols Outlined";
    text-transform: none;
    content: "search" / "";
    font-size: 1.75rem;
}
.site-header .site-header__search:hover,
.site-header .site-header__search:focus-visible { transform: scale(1.15); }

/* desktop logo-row search + utility group (account link + social icons);
   on mobile both live in the menu panel instead */
.site-header .site-header__search--bar,
.site-header__utility { display: none; }

.site-header__account {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.site-header__account .site-header__account-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--brand-primary);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.site-header__account-label { filter: brightness(var(--color-1-isDark)); }
/* primary-color circle; the flattened icon takes the paired over-primary foreground */
.site-header__account-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background-color: var(--brand-primary);
    color: var(--brand-over-primary);
    transition: transform 0.15s ease;
}
.site-header__account-icon svg,
.site-header__account-icon img { width: 65%; height: 65%; }
.site-header__account .site-header__account-link:hover .site-header__account-label,
.site-header__account .site-header__account-link:focus-visible .site-header__account-label {
    text-decoration: underline;
    text-underline-offset: 0.25em;
}
.site-header__account .site-header__account-link:hover .site-header__account-icon,
.site-header__account .site-header__account-link:focus-visible .site-header__account-icon { transform: scale(1.2); }

/* social icons keep the CMS brand colors: the container carries no .flat-icon-colors */
.site-header__social-list {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.site-header__social .site-header__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    transition: transform 0.15s ease;
}
.site-header__social .site-header__social-link:hover,
.site-header__social .site-header__social-link:focus-visible { transform: scale(1.25); }
.site-header__social-link svg,
.site-header__social-link img { width: 1.5rem; height: 1.5rem; }

/* --- Mobile navigation (base) --- */
.site-nav--desktop { display: none; }

/* toggle is absolute against .site-header (the mobile nav has no position of its own) */
.menu-toggle {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--brand-primary);
    filter: brightness(var(--color-1-isDark));
    cursor: pointer;
}
.menu-toggle::after {
    font-family: "Material Symbols Outlined";
    text-transform: none;
    content: "menu";
    font-size: 1.75rem;
}
.menu-toggle[aria-expanded="true"]::after {
    content: "close";
}

/* the panel overlays the page below the header and opens with the library's .show on the menu */
.site-nav--mobile .site-nav__panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    background-color: var(--brand-primary);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
}
.site-nav--mobile .site-nav__panel:has(.nav-menu.show) { display: block; }
.site-nav--mobile .nav-menu {
    display: none;
    margin: 0;
    padding: 0.5rem 0;
    list-style: none;
}
.site-nav--mobile .nav-menu.show {
    display: block;
}

/* bottom row of the panel: search, account link, social icons on a white strip
   so the icons keep their brand colors */
.site-nav__extras {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    padding: 0.75rem clamp(1rem, 5%, 3rem);
    background-color: #ffffff;
}
.site-nav__extras .site-header__social { margin: 0 0 0 auto; }

.site-nav--mobile .nav-item {
    list-style: none;
}
.site-nav--mobile .nav-item-inner,
.site-nav--mobile .sub-menu-label {
    display: block;
    padding: 0.75rem clamp(1rem, 5%, 3rem);
    color: var(--brand-over-primary);
    text-decoration: none;
}
/* Preserve the native underline that distinguishes links from CONTAINER labels. */
.site-nav--mobile a.nav-item-inner { text-decoration: underline; }
/* Accent color on keyboard focus (:focus-visible) and real hover only. :focus-within
   would also match the programmatic focus the menu library moves in on open, and
   touch taps leave a sticky :hover, so either makes an item look pre-selected. */
.site-nav--mobile .nav-item > .nav-item-inner:focus-visible,
.site-nav--mobile .nav-item > .dropdown-toggle:focus-visible,
.site-nav--mobile .sub-menu-item > a:focus-visible {
    color: var(--brand-mint);
}
@media (hover: hover) {
    .site-nav--mobile .nav-item:hover > .nav-item-inner,
    .site-nav--mobile .nav-item:hover > .dropdown-toggle,
    .site-nav--mobile .sub-menu-item > a:hover {
        color: var(--brand-mint);
    }
}

/* rows with a disclosure sit in a two-column grid: label | toggle */
.site-nav--mobile .nav-item.dropdown,
.site-nav--mobile .sub-menu-item.dropdown {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
}

.site-nav--mobile .dropdown-toggle {
    grid-column: 2;
    grid-row: 1;
    width: 2.75rem;
    height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--brand-over-primary);
    cursor: pointer;
}
.site-nav--mobile .dropdown-toggle::after {
    font-family: "Material Symbols Outlined";
    text-transform: none;
    content: "expand_more";
    font-size: 1.5rem;
    transition: transform 0.15s ease;
}
.site-nav--mobile .dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

.site-nav--mobile .sub-menu {
    grid-column: 1 / -1;
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: var(--brand-primary-hover);
}
.site-nav--mobile .sub-menu-holder { display: none; }
.site-nav--mobile .sub-menu-holder:has(.sub-menu.show) { display: block; grid-column: 1 / -1; }
.site-nav--mobile .sub-menu .sub-menu { display: none; }
.site-nav--mobile .sub-menu .sub-menu.show { display: block; grid-column: 1 / -1; }

.site-nav--mobile .sub-menu-item > a,
.site-nav--mobile .sub-menu-label {
    display: block;
    color: var(--brand-over-primary);
    text-decoration: none;
    padding: 0.625rem 2rem;
}
.site-nav--mobile .sub-menu-item > a { text-decoration: underline; }
/* level-3 indent — two .sub-menu levels required so this doesn't match level-2 */
.site-nav--mobile .sub-menu .sub-menu .sub-menu-item > a { padding-left: 3rem; }

/* --- Desktop navigation --- */
@media (min-width: 64rem) {
    .site-nav--mobile { display: none; }
    .menu-toggle { display: none; }
    :root { --header-h: 10.5rem; }
    /* One grid holds every header part; grid areas set the visual placement so
       the DOM keeps its required order (brand → main nav → supplementary). */
    .site-header__bar {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        grid-template-rows: 1fr 3.5rem;
        grid-template-areas:
            "search brand utility"
            "nav    nav   nav";
        align-items: center;
        column-gap: 1rem;
        padding: 0 var(--header-pad-x);
    }
    .site-brand { justify-self: center; }
    .site-brand__logo {
        max-height: 3.75rem;
        max-width: min(30vw, 30rem);
    }
    .site-header .site-header__search--bar {
        display: inline-flex;
        grid-area: search;
        justify-self: start;
    }
    .site-header__utility {
        display: flex;
        grid-area: utility;
        justify-self: end;
        align-items: center;
        gap: 1.25rem;
    }

    /* nav band: negative margins cancel the bar's inline padding so the
       background runs edge to edge */
    .site-nav--desktop {
        grid-area: nav;
        align-self: stretch;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-inline: calc(-1 * var(--header-pad-x));
        background-color: var(--brand-primary);
    }

    .site-nav--desktop .nav-menu {
        display: flex;
        justify-content: center;
        gap: clamp(0.5rem, 3vw, 4rem);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .site-nav--desktop .nav-item {
        position: relative;
    }
    .site-nav--desktop .nav-item-inner {
        display: block;
        padding: 0.75rem clamp(0.6rem, 1.2vw, 1rem);
        color: var(--brand-over-primary);
        text-decoration: none;
        font-weight: 600;
        transition: color 0.15s ease;
    }
    /* preserve link underline; CONTAINER labels have none */
    .site-nav--desktop a.nav-item-inner { text-decoration: underline; text-underline-offset: 0.25em; }
    .site-nav--desktop div.nav-item-inner { pointer-events: none; }

    /* unified hover/focus: every top-level item turns the accent color, label
       and chevron alike (direct children so it doesn't cascade into submenus) */
    .site-nav--desktop .nav-item:hover > .nav-item-inner,
    .site-nav--desktop .nav-item:focus-within > .nav-item-inner,
    .site-nav--desktop .nav-item:hover > .dropdown-toggle,
    .site-nav--desktop .nav-item:focus-within > .dropdown-toggle {
        color: var(--brand-mint);
    }

    /* Level-1 overlay pattern: toggle spans the cell, label sits above it */
    .site-nav--desktop .nav-item.dropdown {
        display: grid;
        grid-template-columns: 1fr;
    }
    .site-nav--desktop .nav-item.dropdown > a.nav-item-inner,
    .site-nav--desktop .nav-item.dropdown > div.nav-item-inner {
        grid-column: 1;
        grid-row: 1;
        margin-right: 2rem;             /* clears the toggle's icon area */
        position: relative;
        z-index: 1;
    }
    .site-nav--desktop .nav-menu > .nav-item > .dropdown-toggle {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        justify-content: flex-end;
    }

    .site-nav--desktop .dropdown-toggle {
        display: inline-flex;
        align-items: center;
        height: 100%;
        padding: 0 0.5rem;
        border: 0;
        background: transparent;
        color: var(--brand-over-primary);
        cursor: pointer;
        transition: color 0.15s ease;
    }
    .site-nav--desktop .dropdown-toggle::after {
        font-family: "Material Symbols Outlined";
        text-transform: none;
        content: "expand_more";
        font-size: 1.35rem;
        transition: transform 0.15s ease;
    }
    /* chevron points up on hover/focus (in sync with the color change) and while open */
    .site-nav--desktop .nav-item:hover > .dropdown-toggle::after,
    .site-nav--desktop .nav-item:focus-within > .dropdown-toggle::after,
    .site-nav--desktop .dropdown-toggle[aria-expanded="true"]::after {
        transform: rotate(180deg);
    }

    /* Level-2 dropdown panel — primary color at 88% opacity, accent line on top */
    .site-nav--desktop .sub-menu-holder {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 14rem;
        z-index: 60;
        background-color: color-mix(in srgb, var(--brand-primary) 88%, transparent);
        border-top: 3px solid var(--brand-mint);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
        padding: 0.5rem 0;
    }
    .site-nav--desktop .drop-left .sub-menu-holder { left: auto; right: 0; }
    .site-nav--desktop .sub-menu-holder:has(.sub-menu.show) { display: block; }

    .site-nav--desktop .sub-menu {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .site-nav--desktop .sub-menu-item {
        position: relative;
    }
    .site-nav--desktop .sub-menu-item.dropdown {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
    }
    .site-nav--desktop .sub-menu-item > a,
    .site-nav--desktop .sub-menu-label {
        display: block;
        padding: 0.5rem 1rem;
        color: #ffffff;
        text-decoration: none;
    }
    .site-nav--desktop .sub-menu-item > a:hover,
    .site-nav--desktop .sub-menu-item > a:focus-visible {
        color: var(--brand-mint);
    }
    .site-nav--desktop .sub-menu-item.dropdown > .dropdown-toggle {
        grid-column: 2;
        grid-row: 1;
        width: auto;
        color: #ffffff;
    }

    /* Level-3 flyout — no holder wrapper at this level */
    .site-nav--desktop .sub-menu .sub-menu {
        display: none;
        position: absolute;
        top: 0;
        left: 100%;
        min-width: 14rem;
        background-color: color-mix(in srgb, var(--brand-primary) 88%, transparent);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
        padding: 0.5rem 0;
    }
    .site-nav--desktop .drop-left .sub-menu-item.dropdown > .sub-menu {
        right: 100%;
        left: auto;
    }
    .site-nav--desktop .sub-menu .sub-menu.show { display: block; }
}

/* ===================================================================
   Hero (photo shuffle carousel)
   =================================================================== */

/* any carousel that can't advance in either direction hides both arrows */
.swiper-container:has(.swiper-button-prev.swiper-button-disabled):has(.swiper-button-next.swiper-button-disabled) .swiper-button {
    display: none;
}

.site-hero { position: relative; }               /* containing block for the autoplay toggle */
.site-hero .swiper-container { position: relative; }

/* hero fills the viewport below the fixed header, so header + hero = 100vh;
   images cover the box so any aspect ratio fills without distortion */
.site-hero .swiper,
.site-hero .swiper-wrapper,
.site-hero .swiper-slide { height: calc(100vh - var(--header-h)); }
.site-hero .swiper { width: 100%; }

.site-hero .site-hero__figure {
    margin: 0;
    position: relative;
    height: 100%;
}
.site-hero .site-hero__figure > a {
    display: block;
    height: 100%;
}
.site-hero .site-hero__figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Parallax (class added by the hero script): the image is 130% of the slide height
   and starts shifted up by the extra 30% (23.077% of its own height), so moving it
   down by --hero-parallax-y (at most 30% of the slide) never exposes an edge. */
.site-hero.is-parallax .site-hero__figure { overflow: hidden; }
.site-hero.is-parallax .site-hero__figure img {
    height: 130%;
    transform: translate3d(0, calc(var(--hero-parallax-y, 0px) - 23.077%), 0);
    will-change: transform;
}

/* Spotlight overlaid on the hero.
   The full-bleed layer is click-through; only the card itself captures pointer events
   so the carousel controls beneath stay usable. */
.site-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    padding-inline: clamp(1rem, 5.5%, 6.5rem);
    pointer-events: none;
}
.site-hero__spotlight {
    pointer-events: auto;
    max-width: 41rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(1.75rem, 3.5vw, 3.25rem);
    background-color: var(--brand-blue);
    color: var(--brand-over-blue);
}
.site-hero__spotlight-title {
    font-size: clamp(2rem, 4.5vw, 4.25rem);
    font-weight: 700;
    line-height: 1.05;
    margin: 0 0 0.5rem;
}
.site-hero__spotlight-body {
    font-size: clamp(1.25rem, 2.2vw, 2.25rem);
    line-height: 1.2;
}
.site-hero .site-hero__spotlight-body a { color: var(--brand-mint); }

/* rectangular primary-color button; container scope overrides the shared .site-btn pill */
.site-hero .site-hero__spotlight-cta {
    align-self: flex-start;
    margin-top: clamp(1.25rem, 2vw, 1.75rem);
    padding: 0.7rem 2.5rem;
    border-radius: 0;
    background-color: var(--brand-primary);
    font-weight: 400;
}
.site-hero a.site-hero__spotlight-cta { color: var(--brand-over-primary); }
.site-hero a.site-hero__spotlight-cta:hover,
.site-hero a.site-hero__spotlight-cta:focus-visible {
    background-color: var(--brand-secondary);
    color: #000000;
}
.site-hero .site-hero__spotlight-cta::after { content: none; }

@media (max-width: 47.999rem) {
    /* stack the hero vertically: shuffle, then spotlight */
    .site-hero {
        display: flex;
        flex-direction: column;
    }
    .site-hero .swiper-holder { order: 1; width: 100%; position: relative; }   /* arrows center on the shuffle, not the whole column */
    .site-hero__overlay {
        order: 2;
        position: static;
        height: auto;
        padding-inline: 0;              /* spotlight spans full width */
        pointer-events: auto;
    }
    .site-hero__spotlight { max-width: none; }
    .swiper-autoplay-toggle-button { order: 3; }

    /* shuffle: show arrows instead of the pagination dots on mobile
       (.swiper-container raises specificity above the base hide rule) */
    .site-hero.swiper-container:not(:has(.navigation-type-1)) .swiper-button-prev:not(.swiper-button-lock),
    .site-hero.swiper-container:not(:has(.navigation-type-1)) .swiper-button-next:not(.swiper-button-lock) { display: flex; }
    .site-hero .swiper-pagination { display: none; }
}

/* mobile: caption below image in normal flow */
.site-hero figcaption {
    background-color: rgba(14, 53, 36, 0.92);
    color: #fff;
    padding: 0.75rem 1rem;
}
@media (min-width: 48rem) {
    /* desktop: caption overlays the image */
    .site-hero figcaption {
        position: absolute;
        left: 0;
        right: 0;
        background-color: rgba(14, 53, 36, 0.75);
    }
    .site-hero figcaption.caption-position-top    { top: 0; }
    .site-hero figcaption.caption-position-bottom { bottom: 0; }
}

/* navigation-position vars, caption offsets, and arrow clearance take effect at desktop only */
@media (min-width: 48rem) {
    .navigation-position-top    { --swiper-pagination-top: 0.5rem; --swiper-pagination-bottom: auto; }
    .navigation-position-bottom { --swiper-pagination-bottom: 0.5rem; --swiper-pagination-top: auto; }
    .navigation-position-left   { --swiper-pagination-left: 0.5rem; --swiper-pagination-right: auto; }
    .navigation-position-right  { --swiper-pagination-right: 0.5rem; --swiper-pagination-left: auto; }

    /* keep pagination from overlapping caption text */
    .site-hero .navigation-position-top    figcaption.caption-position-top    { padding-top:    calc(var(--swiper-pagination-bullet-size, 1rem) + 1rem); }
    .site-hero .navigation-position-bottom figcaption.caption-position-bottom { padding-bottom: calc(var(--swiper-pagination-bullet-size, 1rem) + 1rem); }
    .site-hero .navigation-position-left   figcaption                         { padding-left:   calc(var(--swiper-pagination-bullet-size, 1rem) + 1rem); }
    .site-hero .navigation-position-right  figcaption                         { padding-right:  calc(var(--swiper-pagination-bullet-size, 1rem) + 1rem); }

    /* arrows always occupy the left and right edges */
    .site-hero .navigation-type-1 figcaption { padding-left: calc(var(--swiper-navigation-size, 44px) + 0.5rem); padding-right: calc(var(--swiper-navigation-size, 44px) + 0.5rem); }
}

/* mobile: force horizontal pagination when the config sets the vertical class for left/right positions */
@media (max-width: 47.999rem) {
    .site-hero .swiper-pagination-vertical {
        flex-direction: row;
        width: auto;
    }
}

/* numbered pagination: center the index and contrast it against the bullet background */
.site-hero {
    --swiper-pagination-bullet-text-color: var(--brand-over-mint);
}
.site-hero .numbered-pagination .swiper-pagination-bullet {
    place-content: center;
    color: var(--swiper-pagination-bullet-text-color, #000);
}

/* Hide prev/next for every navigation type except arrows (type 1) */
.site-hero:not(:has(.navigation-type-1)) .swiper-button-prev,
.site-hero:not(:has(.navigation-type-1)) .swiper-button-next {
    display: none;
}

.site-hero .swiper-button-prev,
.site-hero .swiper-button-next {
    --swiper-navigation-color: #fff;
    --swiper-navigation-size: 1.75rem;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background-color: rgba(14, 50, 73, 0.6);   /* dark disc so the white chevron reads over any slide */
    top: 50%;
    margin-top: 0;
    transform: translateY(-50%);   /* true vertical center regardless of button vs nav-size */
}
.site-hero .swiper-button-prev::after,
.site-hero .swiper-button-next::after {
    font-family: "Material Symbols Outlined";
    font-variation-settings: "FILL" 1;
    font-size: var(--swiper-navigation-size);
}
.site-hero .swiper-button-prev::after { content: "chevron_left"; }
.site-hero .swiper-button-next::after { content: "chevron_right"; }

.site-hero { --swiper-pagination-color: var(--brand-mint); }

.swiper-autoplay-toggle-button {
    display: none;
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    z-index: 10;
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    border-radius: 50%;
    background-color: rgba(14, 53, 36, 0.6);
    color: #fff;
    cursor: pointer;
}
.swiper-autoplay-toggle-button::after {
    font-family: "Material Symbols Outlined";
    font-variation-settings: "FILL" 1;
    text-transform: none;
    font-size: 1.35rem;
}
.swiper-autoplay-toggle-button.playing::after { content: "pause"; }
.swiper-autoplay-toggle-button.paused::after  { content: "play_arrow"; }
@media (min-width: 48rem) {
    .swiper-autoplay-toggle-button { display: block; }
}

/* ===================================================================
   Journey — heading over four colored step cards
   =================================================================== */

.site-journey { background-color: #ffffff; }
.site-journey__heading {
    padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1rem, 5%, 3rem);
    text-align: center;
    color: var(--brand-blue);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    line-height: 1.15;
}
/* the CMS body brings its own heading/paragraph element; it inherits the wrapper's type */
.site-homepage .site-journey__heading > * {
    margin: 0;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}
.site-journey__steps {
    display: grid;
    grid-template-columns: 1fr;
    margin: 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 48rem) {
    .site-journey__steps { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64rem) {
    .site-journey__steps { grid-template-columns: repeat(4, 1fr); }
}

/* Each card sets its own surface and foregrounds; the shared rules read them. */
.site-journey__step {
    --step-bg: #ffffff;
    --step-title: color-mix(in srgb, var(--brand-secondary), black 15%);
    --step-text: var(--brand-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(3rem, 5vw, 4.5rem) 2rem;
    background-color: var(--step-bg);
    color: var(--step-text);
    text-align: center;
}
@media (min-width: 64rem) {
    .site-journey__step { min-height: 28rem; box-sizing: border-box; }
}
.site-journey__step--1 { --step-bg: var(--brand-primary); --step-title: #ffffff; --step-text: #ffffff; }
.site-journey__step--3 { --step-bg: #ececec; }
.site-journey__step--4 { --step-bg: var(--brand-secondary); --step-title: #ffffff; --step-text: #000000; }

.site-journey__icon {
    display: block;
    width: auto;
    height: 6rem;
    max-width: 100%;
    object-fit: contain;
    margin-bottom: 1.75rem;
}
.site-homepage .site-journey__title {
    margin: 0 0 1rem;
    color: var(--step-title);
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}
.site-journey__body {
    max-width: 15rem;
    font-size: 1rem;
    line-height: 1.4;
}
.site-journey .site-journey__link {
    margin-top: 1.75rem;
    color: var(--step-text);
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    text-underline-offset: 0.2em;
}
.site-journey .site-journey__link:hover,
.site-journey .site-journey__link:focus-visible { text-decoration: underline; }

/* ===================================================================
   Split spotlights — image beside a primary text panel, inset from the
   page edges; the --reverse modifier puts the panel on the left
   =================================================================== */

.site-split {
    background-color: #ffffff;
    padding-inline: clamp(1.25rem, 4.5vw, 5rem);
}
.site-split__inner {
    display: grid;
    grid-template-columns: 1fr;
    background-color: var(--brand-primary);
}
@media (min-width: 48rem) {
    .site-split__inner { grid-template-columns: 1fr 1fr; }
    .site-split--reverse .site-split__panel { order: -1; }
}
.site-split__img {
    display: block;
    width: 100%;
    height: 16rem;
    object-fit: cover;
}
@media (min-width: 48rem) {
    .site-split__img { height: 100%; min-height: 32rem; }
}
.site-split__panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem);
    color: #ffffff;
    text-align: center;
}
.site-homepage .site-split__title {
    margin: 0 0 1.25rem;
    color: #ffffff;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
}
.site-split__body {
    max-width: 22rem;
    font-size: 1.05rem;
    line-height: 1.75;
    letter-spacing: 0.02em;
}
.site-split .site-split__cta {
    margin-top: 2rem;
    padding: 0.85rem 3.5rem;
    background-color: var(--brand-blue);
    color: var(--brand-over-blue);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.site-split .site-split__cta:hover,
.site-split .site-split__cta:focus-visible {
    background-color: #ffffff;
    color: #000000;
}

/* ===================================================================
   FAQ accordion — news titles as questions, summaries as answers
   =================================================================== */

/* same white band + side gutters as the split spotlights, so the edges line up */
.site-faq {
    background-color: #ffffff;
    padding-inline: clamp(1.25rem, 4.5vw, 5rem);
}
.site-faq__inner {
    display: grid;
    grid-template-columns: 1fr;
}
@media (min-width: 48rem) {
    .site-faq__inner { grid-template-columns: 1fr 1fr; }
}
.site-faq__media {
    position: relative;   /* nav buttons are absolute against this */
    min-width: 0;
    --swiper-navigation-color: #ffffff;
}
.site-faq__media .swiper,
.site-faq__media .swiper-wrapper,
.site-faq__media .swiper-slide { height: 100%; }
.site-faq__img {
    display: block;
    width: 100%;
    height: 16rem;
    object-fit: cover;
}
/* Desktop: the photo fills its half without setting the row height (an image's
   percentage height can't resolve here and falls back to its intrinsic ratio),
   so the row sizes to the accordion, with a minimum for the photo. */
@media (min-width: 48rem) {
    .site-faq__media { min-height: 32rem; }   /* matches the split spotlights' image minimum */
    .site-faq__media .swiper { position: absolute; inset: 0; }
    .site-faq__img { height: 100%; }
}
.site-faq__media .swiper-button-prev,
.site-faq__media .swiper-button-next {
    border: 0;
    padding: 0;
    background: none;
}
.site-faq__panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2rem, 4vw, 3.5rem) clamp(1.25rem, 3.5vw, 3rem);
    background-color: #f7f8fa;
}
.site-faq__list { width: 100%; }
/* each question + answer pair reads as one white card; the question is a real
   <button> inside the heading so it is keyboard-operable */
.site-homepage .site-faq__heading { margin: 0.75rem 0 0; }
.site-homepage .site-faq__heading:first-child { margin-top: 0; }
.site-faq .site-faq__question {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 1.25rem 3.5rem 1.25rem 1.5rem;
    border: 0;
    background-color: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    color: var(--brand-primary);
    font: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
}
.site-faq .site-faq__question:focus-visible {
    outline: 2px solid var(--brand-blue);
    outline-offset: 2px;
}
/* small triangle; points up while the panel is open */
.site-faq .site-faq__question::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 1.5rem;
    width: 0.6rem;
    height: 0.4rem;
    background-color: var(--brand-blue);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transform: translateY(-50%);
    transition: transform 0.2s ease;
}
.site-faq .site-faq__question[aria-expanded="true"] {
    border-radius: 0.5rem 0.5rem 0 0;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.04);
}
.site-faq .site-faq__question[aria-expanded="true"]::after { transform: translateY(-50%) rotate(180deg); }
.site-faq__answer {
    padding: 0 1.5rem 1.5rem;
    background-color: #ffffff;
    border-radius: 0 0 0.5rem 0.5rem;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.05);
    color: #5f6368;
    line-height: 1.65;
}
.site-faq__answer p { margin: 0; }
/* MonUI flags closed panels with aria-hidden and leaves the hiding to CSS */
.site-faq__answer[aria-hidden="true"] { display: none; }

/* ===================================================================
   Stories — news heading, story card overlapping a blue button band
   =================================================================== */

.site-stories {
    --stories-overlap: 2.5rem;
    background-color: #ffffff;
    padding-top: clamp(3rem, 5vw, 4.5rem);
}
.site-homepage .site-stories__heading {
    margin: 0 0 clamp(2rem, 4vw, 3.5rem);
    padding-inline: clamp(1rem, 5%, 3rem);
    text-align: center;
    color: var(--brand-primary);
    filter: brightness(var(--color-1-isDark));
    font-size: clamp(1.75rem, 3.5vw, 3.25rem);
    font-weight: 400;
    text-transform: uppercase;
}

/* the card sits above the band and hangs --stories-overlap into it */
.site-stories__card {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: min(61.25rem, 100% - 2 * clamp(1rem, 5%, 3rem));
    margin: 0 auto calc(-1 * var(--stories-overlap));
    background-color: #ffffff;
}
.site-stories__item {
    display: grid;
    grid-template-columns: 1fr;
}
.site-stories__item + .site-stories__item { border-top: 1px solid #e3e3e3; }
@media (min-width: 48rem) {
    .site-stories__item { grid-template-columns: 1fr 1fr; }
}
.site-stories__img {
    display: block;
    width: 100%;
    height: 16rem;
    object-fit: cover;
}
@media (min-width: 48rem) {
    .site-stories__img { height: 100%; min-height: 22rem; }
}
.site-stories__img--logo {
    object-fit: contain;
    padding: 2rem;
    box-sizing: border-box;
}
.site-stories__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(1.75rem, 4vw, 3rem);
}
.site-homepage .site-stories__title {
    margin: 0 0 1rem;
    font-size: clamp(1.375rem, 2.2vw, 1.75rem);
    line-height: 1.25;
}
.site-stories .site-stories__title a {
    color: var(--brand-primary);
    text-decoration: none;
}
.site-stories .site-stories__title a:hover,
.site-stories .site-stories__title a:focus-visible { text-decoration: underline; }
.site-stories__summary {
    margin: 0;
    color: var(--brand-primary);
    line-height: 1.6;
}

.site-stories__band {
    display: flex;
    justify-content: center;
    padding: calc(var(--stories-overlap) + 2.5rem) 1rem 2.5rem;
    background-color: var(--brand-blue);
}
/* the 1px border is always present (matching the bg at rest) so hover doesn't shift the size */
.site-stories .site-stories__more {
    padding: 0.85rem 2.25rem;
    border: 1px solid var(--brand-primary);
    background-color: var(--brand-primary);
    color: var(--brand-over-primary);
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.site-stories .site-stories__more:hover,
.site-stories .site-stories__more:focus-visible {
    background-color: transparent;
    border-color: #ffffff;
    color: #ffffff;
}

/* ===================================================================
   Partners intro spotlight — blue band, white title over summary
   =================================================================== */

.site-spotlight {
    background-color: var(--brand-blue);
    color: var(--brand-over-blue);
    padding-block: clamp(3rem, 5vw, 4.5rem) clamp(2rem, 4vw, 3.5rem);
    padding-inline: clamp(1rem, 5%, 3rem);
}
.site-spotlight__inner {
    max-width: 62rem;
    margin-inline: auto;
    text-align: center;
}
.site-homepage .site-spotlight__title {
    color: var(--brand-over-blue);
    margin: 0 0 0.5rem;
    font-size: clamp(1.75rem, 2.6vw, 2.25rem);
    font-weight: 400;
}
.site-spotlight__body { font-size: clamp(1.125rem, 1.5vw, 1.3rem); line-height: 1.35; }
.site-spotlight .site-spotlight__body a { color: var(--brand-over-blue); }

/* ===================================================================
   Partner / district logos — white circles on the blue band
   =================================================================== */

.site-partners {
    padding-block: 0 clamp(2.5rem, 6vw, 4.5rem);
    background-color: var(--brand-blue);
    overflow: hidden;   /* clip the looping slide track */
}
.site-partners__carousel {
    position: relative;   /* nav buttons are absolute against this */
    max-width: var(--content-max);
    margin-inline: auto;
    padding-inline: clamp(2.5rem, 6%, 4rem);   /* room for nav buttons at the edges */
    --swiper-navigation-color: rgba(255, 255, 255, 0.75);
    --swiper-navigation-size: 40px;
}
/* block padding gives the hover-scaled circles room inside Swiper's clipped track */
.site-partners .swiper { width: 100%; padding-block: 0.5rem; }
.site-partners .swiper-slide {
    width: auto;   /* slidesPerView 'auto' — each slide sizes to its circle */
    display: flex;
    align-items: center;
    justify-content: center;
}
.site-partners__circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 7rem;
    height: 7rem;
    border-radius: 50%;
    background-color: #ffffff;
    transition: transform 0.2s ease;
}
.site-partners__logo {
    display: block;
    width: auto;
    height: auto;
    max-width: 68%;
    max-height: 60%;
    object-fit: contain;
    transition: opacity 0.2s ease;
}
.site-partners .swiper-slide:hover .site-partners__circle { transform: scale(1.1); }
.site-partners .swiper-slide:hover .site-partners__logo { opacity: 0.3; }
.site-partners .swiper-button-prev,
.site-partners .swiper-button-next {
    border: 0;
    padding: 0;
    background: none;
}

/* ===================================================================
   Cost tiles — title left, square tiles (primary label bar, gray body)
   =================================================================== */

.site-cost {
    background-color: #ffffff;
    padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 4.5vw, 5rem);
}
/* capped and centered so the tiles stay compact instead of stretching to the gutters */
.site-cost__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: center;
    max-width: 62rem;
    margin-inline: auto;
}
@media (min-width: 64rem) {
    /* block shrink-wraps title + fixed-width tiles and stays centered; tiles may
       shrink below their width only when the viewport is too narrow to fit them */
    .site-cost__inner {
        grid-template-columns: minmax(12rem, 16rem) auto;
        gap: 2.5rem;
        width: fit-content;
        max-width: 100%;
    }
}
/* same type as the Partners intro title; primary color on this white band */
.site-homepage .site-cost__title {
    margin: 0;
    color: var(--brand-primary);
    filter: brightness(var(--color-1-isDark));
    font-size: clamp(1.75rem, 2.6vw, 2.25rem);
    font-weight: 400;
    line-height: 1.15;
}
.site-cost__tiles {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 48rem) {
    .site-cost__tiles { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 64rem) {
    .site-cost__tiles { grid-template-columns: repeat(3, minmax(0, 250px)); }
}
.site-cost__tile {
    display: flex;
    flex-direction: column;
    text-align: center;
}
.site-homepage .site-cost__label {
    margin: 0;
    padding: 1rem;
    background-color: var(--brand-primary);
    color: var(--brand-over-primary);
    font-size: 1.1rem;
}
.site-cost__body {
    flex: 1;
    padding: 1.25rem 1.5rem 1.5rem;
    background-color: #ececec;
    color: #1f2a24;
    line-height: 1.4;
}
.site-cost__body p { margin: 0; }
.site-cost__body .site-cost__value {
    margin: 0 0 0.5rem;
    color: var(--brand-primary);
    font-size: clamp(2.25rem, 3.5vw, 2.75rem);
    font-weight: 700;
    line-height: 1.1;
}

/* ===================================================================
   Footer — badge logo + three link columns, Edlio row below
   =================================================================== */

.site-footer {
    background-color: var(--brand-primary);
    color: var(--brand-over-primary);
    padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 5%, 6rem) 1.5rem;
}
.site-footer__inner {
    max-width: 105rem;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}
@media (min-width: 48rem) {
    .site-footer__inner { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64rem) {
    .site-footer__inner {
        /* content-width columns, centered as a group */
        grid-template-columns: repeat(4, auto);
        justify-content: center;
        column-gap: clamp(1.5rem, 3.5vw, 4rem);
        align-items: start;
    }
}

.site-footer__logo {
    display: block;
    width: clamp(10rem, 16vw, 14.5rem);
    height: auto;
}

.site-footer .site-footer__heading {
    margin: 0 0 1.5rem;
    padding-top: clamp(0rem, 2.5vw, 2.5rem);
    color: var(--brand-secondary);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.site-footer__links {
    margin: 0;
    padding: 0;
    list-style: none;
}
/* Quick Navigation: two columns, filled row by row in CMS order */
.site-footer__col--1 .site-footer__links {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    column-gap: 1.5rem;
}
.site-footer__links li { margin-bottom: 1rem; }
/* Get In Touch: the width cap wraps the one-line address after the street line;
   row-height line spacing makes the wrapped line sit on the same rhythm as separate items */
.site-footer__col--3 .site-footer__links li {
    max-width: 15rem;
    margin-bottom: 0;
    line-height: 2.6;
}
/* container scope (0,2,0) beats the system a:link (0,1,1) on the dark footer surface */
.site-footer .site-footer__link {
    color: var(--brand-over-primary);
    font-weight: 700;
    text-decoration: none;
    text-underline-offset: 0.2em;
}
.site-footer .site-footer__link:hover,
.site-footer .site-footer__link:focus-visible { text-decoration: underline; }

/* bottom row: copyright left, Edlio attribution right */
.site-footer__bottom {
    max-width: 105rem;
    margin: clamp(2rem, 4vw, 3rem) auto 0;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.site-footer__copyright {
    margin: 0;
    font-size: 0.875rem;
    opacity: 0.85;
}
.site-footer__edlio {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}
/* container scope (0,2,0) beats the system a:link (0,1,1) so the SVGs inherit footer text color */
.site-footer__edlio .site-footer__edlio-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: inherit;
    font-size: 0.875rem;
}
.site-footer__edlio .site-footer__edlio-link svg { fill: currentColor; }
.site-footer__edlio .site-footer__edlio-link:first-child svg { width: 120px; height: 18px; }
.site-footer__edlio .site-footer__edlio-link:last-child svg  { height: 1.25rem; width: auto; }

/* Flatten CMS brand SVGs to currentColor inside .flat-icon-colors containers.
   Two-tone icons expose .color-fill / .transparency-change under .color-flatten;
   single-tone icons are filled directly. */
.flat-icon-colors svg.color-flatten .color-fill { fill: currentColor; }
.flat-icon-colors svg.color-flatten .transparency-change { fill: transparent; }
.flat-icon-colors svg:not(.color-flatten) { fill: currentColor; }