@import url("theme_settings/theme_settings.css");
@import url("https://use.typekit.net/epo2xvo.css");

:root {
    --color-1:        var(--color-1-theme);
    --color-2:        var(--color-2-theme);
    --color-over-1:   var(--color-over-1-theme);
    --color-over-2:   var(--color-over-2-theme);
    --color-1-isDark: var(--color-1-theme-isDark);
    --color-2-isDark: var(--color-2-theme-isDark);

    --font-head: "plantin", serif;
    --font-body: "canada-type-gibson", sans-serif;
    --scrim: #0B0B2E;
    --max-width: 75rem;
    --section-pad-x: clamp(1rem, 5vw, 4rem);
    --section-pad-y: clamp(3rem, 7vw, 6rem);
    --section-min-h: clamp(40rem, 100dvh, 67.5rem);
    --snap-pad-y: clamp(1.5rem, 3vw, 2.5rem);
    --header-bar-h: 125px;
    --mobile-header-h: 181px;
    --hero-img-h: max(18rem, calc(100dvh - var(--mobile-header-h)));
    --hero-rule-h: 75px;
    --spotlight-img-w: 614px;
    --spotlight-img-h: 672px;
    --spotlight-m-overhang: 24px;

    --size-sm: 48rem;
    --size-md: 64rem;
    --size-lg: 85.375rem;
    --size-xl: 120rem;
}

html { height: 100%; }

body {
    margin: 0;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    font-family: var(--font-body);
    color: #000;
}

.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;
}

body:has(.site-homepage) #content_main {
    max-width: none;
    padding: 0;
    background-color: transparent;
}

.site-homepage > section {
    box-sizing: border-box;
    padding-block: var(--snap-pad-y);
}
@media (min-width: 64rem) {
    .site-homepage > section { min-height: var(--section-min-h); }
}

.pageTitle {
    color: #000;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 2.25rem;
    line-height: 1.2;
    margin-block: 0 1.5rem;
}

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

/* ============================================================
   SHARED — typography, buttons, section scaffolding
   ============================================================ */
.section-inner {
    width: 100%;
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: var(--section-pad-x);
    box-sizing: border-box;
}

.section-head { text-align: center; margin-bottom: 2.5rem; }
.section-title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 2.75rem);
    color: var(--color-1);
    filter: brightness(var(--color-1-isDark));
    margin: 0;
}
.section-subtitle {
    font-family: var(--font-head);
    font-style: italic;
    font-weight: 600;
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    color: #000;
    margin: 0.5rem 0 0;
}
.section-head--on-dark .section-title { color: var(--color-over-1); filter: none; }
.section-head--on-dark .section-subtitle { color: var(--color-over-1); }

/* Pill buttons — outline and filled variants */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.85rem 1.75rem;
    border-radius: 100px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.18s, color 0.18s, border-color 0.18s;
}
.btn--outline,
body a.btn--outline {
    background: transparent;
    border: 1px solid var(--color-1);
    color: #000;
}
body a.btn--outline:link, body a.btn--outline:visited { color: #000; }
body a.btn--outline:hover,
body a.btn--outline:focus-visible {
    background: var(--color-1);
    color: var(--color-over-1);
    filter: none;
}
.btn--filled,
body a.btn--filled {
    background: var(--color-1);
    border: 1px solid var(--color-1);
    color: var(--color-over-1);
}
body a.btn--filled:hover,
body a.btn--filled:focus-visible {
    background: color-mix(in srgb, var(--color-1), #000 15%);
}
.btn--footer,
body a.btn--footer,
body a.btn--footer:link, body a.btn--footer:visited {
    border-color: var(--color-over-1);
    color: var(--color-over-1);
}
body a.btn--footer:hover,
body a.btn--footer:focus-visible {
    background: var(--color-over-1);
    color: var(--color-1);
}

/* Shared offset image-border graphic */
.img-border {
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    pointer-events: none;
}

/* Carousel nav row (circular arrows flanking a Show-All pill) */
.carousel-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 2.5rem;
}
.carousel-arrow {
    width: 2.75rem; height: 2.75rem;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid var(--color-1);
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    transition: background-color 0.18s;
}
.carousel-arrow::after {
    font-family: 'Material Symbols Outlined';
    font-size: 1.25rem;
    color: var(--color-1);
    text-transform: none;
    line-height: 1;
}
.carousel-arrow#testimonials_prev::after, .carousel-arrow#news_prev::after { content: 'chevron_left'; }
.carousel-arrow#testimonials_next::after, .carousel-arrow#news_next::after { content: 'chevron_right'; }
.carousel-arrow:hover, .carousel-arrow:focus-visible { background: var(--color-1); }
.carousel-arrow:hover::after, .carousel-arrow:focus-visible::after { color: var(--color-over-1); }
.carousel-arrow.swiper-button-disabled { opacity: 0.35; cursor: default; }

/* Flatten CMS link/social icons to currentColor */
.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; }
.flat-icon-colors svg, .flat-icon-colors img { width: 2rem; height: 2rem; }

/* ============================================================
   HEADER — transparent over hero, logo left, icons + hamburger right
   ============================================================ */
.site-header {
    position: relative;
    z-index: 20;
    background: var(--color-1);
}

.site-header__bar {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
    padding: 0.75rem var(--section-pad-x);
}
.site-header__logo { order: 2; flex-basis: 100%; display: flex; justify-content: center; }
.site-header__logo img { display: block; width: 243px; height: auto; max-width: 100%; }

@media (min-width: 64rem) {
    /* Desktop homepage header: transparent over the hero with the gradient
       contrast overlay; single-row bar, logo left. */
    body:has(.site-homepage) .site-header { position: absolute; top: 0; left: 0; right: 0; background: transparent; }
    body:has(.nav-menu.show) .site-header { position: fixed; }
    body:has(.site-homepage) .site-header::before {
        content: '';
        position: absolute;
        inset: 0 0 auto 0;
        height: 314px;
        background: linear-gradient(to bottom,
            rgba(11,11,46,0.7) 0,
            rgba(11,11,46,0.7) 124px,
            rgba(11,11,46,0) 314px);
        pointer-events: none;
    }
    .site-header__bar { flex-wrap: nowrap; gap: 1.5rem; height: var(--header-bar-h); padding: 0 var(--section-pad-x); }
    .site-header__logo { order: 0; flex-basis: auto; margin-right: auto; justify-content: flex-start; }
}

/* Mobile: icons sit at the top-right (logo drops to the row below). */
.site-header__icons { margin-left: auto; }
.site-header__icons ul { display: flex; gap: 0.75rem; list-style: none; margin: 0; padding: 0; }
.site-header__icons a {
    display: flex; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem;
}
/* body-prefixed link states beat the system a:link #333. */
body .site-header__icons a:link,
body .site-header__icons a:visited,
body .site-header__icons a:hover,
body .site-header__icons a:active { color: var(--color-over-1); }
@media (min-width: 64rem) {
    body:has(.nav-menu.show) .site-header__icons a:link,
    body:has(.nav-menu.show) .site-header__icons a:visited,
    body:has(.nav-menu.show) .site-header__icons a:hover,
    body:has(.nav-menu.show) .site-header__icons a:active,
    body:has(.nav-menu.show) .menu-toggle { color: var(--color-1); }
    body:has(.nav-menu.show) .site-header__logo { display: none; }
}

/* Hamburger toggle */
.menu-toggle {
    width: 2.75rem; height: 2.75rem;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--color-over-1);
    padding: 0;
}
.menu-toggle::after {
    font-family: 'Material Symbols Outlined';
    content: 'menu';
    font-size: 1.75rem;
    text-transform: none;
}
.menu-toggle[aria-expanded="true"]::after { content: 'close'; }

/* Mobile: menu drops below the header in flow (no fixed overlay). */
.site-nav__overlay {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    z-index: 50;
}
.site-nav:has(.nav-menu.show) .site-nav__overlay { display: block; }
.site-nav__panel {
    background: #fff;
    box-shadow: 0 12px 24px rgba(0,0,0,0.2);
}
.site-nav__topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
    padding: 1rem var(--section-pad-x);
    background: #fff;
}

.site-nav__body { display: block; }
.site-nav__media { display: none; }
.site-nav__media-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Desktop: fixed right-anchored overlay, 3-column body (photo | L1 | L2). */
@media (min-width: 64rem) {
    .site-nav__overlay {
        position: fixed;
        inset: 0;
        top: 0;
    }
    .site-nav:has(.nav-menu.show) .site-nav__overlay { display: flex; justify-content: flex-end; }
    .site-nav__overlay::before {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(11,11,46,0.5);
    }
    .site-nav__panel {
        position: relative;
        display: grid;
        grid-template-rows: var(--header-bar-h) 1fr;
        width: min(1067px, 100vw);
        height: 100%;
        box-shadow: -12px 0 40px rgba(0,0,0,0.25);
        overflow-y: auto;
    }
    .site-nav__topbar { flex-wrap: nowrap; padding: 0 var(--section-pad-x); }
    .site-nav__body {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 507px) 280px 280px;
        min-height: 0;
    }
    .site-nav__media { grid-column: 1; display: block; overflow: hidden; background: var(--color-1); }
    .site-nav .nav-menu { grid-column: 2; }
}

/* L1 nav column (blue) */
.site-nav .nav-menu {
    display: none;
    list-style: none; margin: 0;
    padding: 2.5rem 1.5rem;
    background: var(--color-1);
}
.site-nav .nav-menu.show { display: block; }
.nav-item { display: flex; align-items: flex-start; justify-content: space-between; }
.nav-item-inner {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--color-over-1);
    text-decoration: none;
    padding: 0.55rem 0;
}
/* body-prefixed link states so white wins over the system a:link #333. */
body .nav-item > a.nav-item-inner:link,
body .nav-item > a.nav-item-inner:visited,
body .nav-item > a.nav-item-inner:hover,
body .nav-item > a.nav-item-inner:active { color: var(--color-over-1); }
.nav-item:not(.dropdown) > a.nav-item-inner { text-decoration: underline; }
body .nav-item.dropdown > a.nav-item-inner:hover,
body .nav-item.dropdown > a.nav-item-inner:focus-visible { text-decoration: underline; }
.nav-item:has(> .dropdown-toggle[aria-expanded="true"]) > .nav-item-inner,
body .nav-item:has(> .dropdown-toggle[aria-expanded="true"]) > a.nav-item-inner:link { color: var(--color-2); }

.nav-item > .dropdown-toggle {
    flex: none;
    width: 1.5rem; height: 2.85rem;
    background: transparent; border: none; cursor: pointer;
    color: var(--color-over-1);
}
.nav-item > .dropdown-toggle::after {
    font-family: 'Material Symbols Outlined'; content: 'add'; font-size: 1.5rem; text-transform: none;
}
.nav-item > .dropdown-toggle[aria-expanded="true"]::after { content: 'remove'; color: var(--color-2); }

.nav-item { flex-wrap: wrap; }
.sub-menu-holder {
    display: none;
    box-sizing: border-box;
    flex-basis: 100%;
    padding: 0.25rem 0 0.75rem 1rem;
}
.sub-menu-holder:has(> .sub-menu.show) { display: block; }
.sub-menu, .sub-menu .sub-menu { list-style: none; margin: 0; padding: 0; }
.sub-menu-item { position: relative; }
.sub-menu-item > a,
.sub-menu-item > .nav-item-inner {
    display: block;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1.125rem;
    text-decoration: none;
    padding: 0.45rem 0;
}
/* White on the blue column (mobile); body + link states beat the system a:link #333. */
.sub-menu-item > .nav-item-inner,
body .sub-menu-item > a:link,
body .sub-menu-item > a:visited,
body .sub-menu-item > a:hover,
body .sub-menu-item > a:active,
body .sub-menu-item > a:focus-visible { color: var(--color-over-1); }
body .sub-menu-item > a:hover,
body .sub-menu-item > a:focus-visible { text-decoration: underline; }
.sub-menu-item > .dropdown-toggle {
    position: absolute; top: 0.45rem; right: 0;
    width: 1.5rem; height: 1.5rem;
    background: transparent; border: none; cursor: pointer; color: var(--color-over-1);
}
.sub-menu-item > .dropdown-toggle::after {
    font-family: 'Material Symbols Outlined'; content: 'add'; font-size: 1.25rem; text-transform: none;
}
.sub-menu-item > .dropdown-toggle[aria-expanded="true"]::after { content: 'remove'; }
.sub-menu .sub-menu { display: none; padding-left: 1.25rem; }
.sub-menu .sub-menu.show { display: block; }
.sub-menu .sub-menu .sub-menu-item > a { font-size: 1rem; }

@media (min-width: 64rem) {
    .sub-menu-holder {
        position: absolute;
        top: 0; bottom: 0; right: 0;
        width: 280px; flex-basis: auto;
        background: #fff;
        padding: 2.5rem 1.5rem;
        overflow-y: auto;
    }
    .sub-menu-item > a,
    .sub-menu-item > .nav-item-inner,
    body .sub-menu-item > a:link,
    body .sub-menu-item > a:visited,
    body .sub-menu-item > a:active { color: #000; }
    body .sub-menu-item > a:hover,
    body .sub-menu-item > a:focus-visible { color: var(--color-1); }
    .sub-menu-item > .dropdown-toggle { color: #000; }
}

body:has(.nav-menu.show) .site-header__icons,
body:has(.nav-menu.show) .menu-toggle { position: relative; z-index: 60; }

.site-nav__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; list-style: none; margin: 0; padding: 0; }
.site-nav__action, body a.site-nav__action {
    display: inline-block;
    padding: 0.65rem 1.5rem;
    border: 1px solid var(--color-1);
    border-radius: 100px;
    color: var(--color-1);
    text-decoration: none;
}

/* ============================================================
   HERO — full-bleed shuffle + "Be More" motto
   ============================================================ */
.hero-section { position: relative; }
.site-homepage > section.hero-section { padding-block: 0; }
.hero-carousel { position: relative; }
.hero-carousel .swiper-slide figure { margin: 0; }

.hero-carousel .swiper-slide img {
    display: block;
    width: 100%;
    height: var(--hero-img-h);
    object-fit: cover;
}
.hero-carousel .swiper-button-prev, .hero-carousel .swiper-button-next {
    --swiper-navigation-color: #fff;
    --swiper-navigation-bg: rgba(0,0,0,0.5);
    z-index: 4;
}
.hero-carousel:not(:has(.navigation-type-1)) .swiper-button-prev,
.hero-carousel:not(:has(.navigation-type-1)) .swiper-button-next { display: none; }

.hero-carousel figure { position: relative; }
.hero-carousel figcaption { background-color: rgba(0,0,0,0.85); color: #fff; padding: 0.75rem 1rem; }
@media (min-width: 768px) {
    .hero-carousel figcaption { position: absolute; left: 0; right: 0; background-color: rgba(0,0,0,0.75); }
    .hero-carousel figcaption.caption-position-top { top: 0; }
    .hero-carousel figcaption.caption-position-bottom { bottom: 0; }
}

.swiper-autoplay-toggle-button {
    display: none;
    position: absolute; left: 1rem; bottom: 1rem; z-index: 3;
    width: 2.5rem; height: 2.5rem; border-radius: 50%;
    background: rgba(0,0,0,0.5); border: none; cursor: pointer; color: #fff;
}
.swiper-autoplay-toggle-button::after { font-family: 'Material Symbols Outlined'; content: 'pause'; text-transform: none; }
.swiper-autoplay-toggle-button.paused::after { content: 'play_arrow'; }
@media (min-width: 768px) { .swiper-autoplay-toggle-button { display: block; } }

/* Motto overlays the hero image on every breakpoint. A zero-height box on
   the text carries the WCAG-contrast scrim background; glyphs overflow via
   the absolutely-positioned label so no visible panel doubles the ::after
   gradient scrim below. */
.hero-motto {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
    gap: 1.25rem;
    text-align: center;
    pointer-events: none;
}
.hero-motto__text {
    position: relative;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(2.5rem, 14vw, 60px);
    line-height: 0.9;
    height: 0;
    color: var(--color-over-1);
    background: color-mix(in srgb, var(--scrim) 55%, transparent);
}
.hero-motto__text-label {
    position: absolute;
    left: 50%; bottom: 0;
    transform: translateX(-50%);
    white-space: nowrap;
}
.hero-motto__rule { width: 2px; height: var(--hero-rule-h); background: var(--color-2); margin-bottom: calc(var(--hero-rule-h) / -2); }
.hero-carousel::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 220px;
    background: linear-gradient(to top,
        rgba(11,11,46,0.7) 0,
        rgba(11,11,46,0.7) 136px,
        rgba(11,11,46,0) 220px);
    pointer-events: none;
    z-index: 2;
}

@media (min-width: 64rem) {
    .hero-section { z-index: 1; }
    .hero-carousel .swiper-slide img { height: var(--section-min-h); }
    .hero-motto { gap: 40px; }
    .hero-motto__text { font-size: clamp(4rem, 9vw, 126px); }
    .hero-carousel::after { height: 308px; background: linear-gradient(to top,
            rgba(11,11,46,0.7) 0,
            rgba(11,11,46,0.7) 191px,
            rgba(11,11,46,0) 308px); }
}

/* ============================================================
   HERO — page-load entrance (clip-path open + staggered cascade)
   ============================================================ */
body:has(.site-homepage) .hero-carousel {
    animation: heroEnter 2.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
body:has(.site-homepage) .site-header {
    animation: heroEnterHeader 1.1s cubic-bezier(0.16, 1, 0.3, 1) 1.6s backwards;
}
body:has(.site-homepage) .hero-motto {
    opacity: 0;
    animation: heroEnterMotto 1.1s cubic-bezier(0.16, 1, 0.3, 1) 2.1s forwards;
}
@keyframes heroEnter {
    0%   { opacity: 0; clip-path: inset(40px round 28px); }
    40%  { opacity: 1; clip-path: inset(40px round 28px); }
    100% { opacity: 1; clip-path: inset(0 round 0); }
}
@keyframes heroEnterHeader {
    from { opacity: 0; transform: translateY(-100%); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroEnterMotto {
    from { opacity: 0; transform: translateY(2rem); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    body:has(.site-homepage) .hero-carousel,
    body:has(.site-homepage) .site-header,
    body:has(.site-homepage) .hero-motto { animation: none; opacity: 1; }
}

/* ============================================================
   SPOTLIGHT — accordion of spotlight messages, "Women of Purpose…"
   ============================================================ */
.spotlight-tabs-section {
    background: #fff url("/pics/spotlight-wave.svg") no-repeat top right;
    background-size: 60% auto;
    /* Extra top padding clears the hero motto's decorative rule, which hangs
       into this section's top seam. Desktop sets its own explicit
       padding-top below and is unaffected by this. */
    padding-top: calc(var(--snap-pad-y) * 2);
}
.spotlight-tabs-section .section-title,
.news-section .section-title { color: var(--color-1); }
.spotlight-tabs-section .section-title { font-size: clamp(2.375rem, 4vw, 2.75rem); }
.spotlight-tabs-section .section-subtitle { font-size: clamp(1.5rem, 2.2vw, 1.875rem); }
.spotlight-tabs-section .section-head { margin-bottom: 1.5rem; }

.spotlight-scroll-track { display: none; }
.spotlight-sticky { display: block; }

.spotlight-tabs-section .section-inner { max-width: var(--size-xl); }
.spotlight-tabs { max-width: var(--size-xl); margin-inline: auto; }
.spotlight-tab {
    background: transparent; border: none; cursor: pointer;
    margin: 0 0 12px; padding: 0;
    width: 100%;
    text-align: center;
}
.spotlight-tab__label {
    font-family: var(--font-head); font-weight: 400;
    font-size: clamp(1.875rem, 4vw, 2.125rem);
    line-height: 1.76;
    color: var(--color-1);
    background-image: linear-gradient(var(--color-2), var(--color-2));
    background-repeat: no-repeat;
    background-position: 0 62%;
    background-size: 0 0.4em;
    transition: background-size 0.5s;
    padding: 0 0.1em;
}
.spotlight-tab[aria-expanded="true"] .spotlight-tab__label { background-size: 100% 0.4em; }

.spotlight-panel { min-width: 0; }
.spotlight-panel[aria-hidden="true"] { display: none; }

.spotlight-panel[aria-hidden="false"] .spotlight-panel__body {
    animation: spotlightBodyIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.spotlight-panel[aria-hidden="false"] .spotlight-panel__media {
    animation: spotlightMediaIn 0.55s ease both;
}
@keyframes spotlightBodyIn {
    from { opacity: 0; transform: translateY(0.75rem); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes spotlightMediaIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .spotlight-panel[aria-hidden="false"] .spotlight-panel__body,
    .spotlight-panel[aria-hidden="false"] .spotlight-panel__media { animation: none; }
}

.spotlight-panel__media { position: relative; margin: 1.25rem 0; }
.spotlight-panel__media img {
    display: block; width: 100%;
    border-radius: 10px;
    border: 4px solid #fff;
    box-sizing: border-box;
}
.spotlight-panel__media::before {
    content: '';
    position: absolute; inset: 14px;
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 10px;
    pointer-events: none;
    z-index: 1;
}
.spotlight-panel__body { color: #000; font-size: clamp(1rem, 1.6vw, 1.375rem); line-height: 1.6; margin-bottom: 1.25rem; }

.spotlight-panel__media::after {
    content: '';
    position: absolute;
    left: 50%; bottom: 0;
    transform: translate(-50%, 50%);
    width: 52px; height: 48px;
    background: #fff url("/pics/brandmark-m.svg") no-repeat center / 35px 35px;
    z-index: 1;
}

@media (min-width: 64rem) {
    .spotlight-tab { text-align: left; }
    .spotlight-tabs {
        position: relative;
        width: 100%;
        box-sizing: border-box;
        padding-right: calc(50% + 40px);
        min-height: var(--spotlight-img-h);
    }
    .spotlight-panel { position: static; }
    .spotlight-panel__media {
        position: absolute; top: 0;
        left: calc(50% + 40px); right: 0;
        height: var(--spotlight-img-h);
        margin: 0;
    }
    .spotlight-panel__media img { width: 100%; height: 100%; object-fit: cover; }
    .spotlight-panel[aria-hidden="true"] .spotlight-panel__media { display: none; }

    /* +1 class specificity so the swapped padding beats the generic section rule. */
    .site-homepage > section.spotlight-tabs-section {
        position: relative;
        min-height: 0;
        padding-top: clamp(4rem, 9vh, 8rem);
        padding-bottom: 0;
        background-image: none;
    }
    .spotlight-sticky {
        position: sticky;
        top: 0;
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        box-sizing: border-box;
        padding-block: var(--snap-pad-y);
        z-index: 1;
        background: url("/pics/spotlight-wave.svg") no-repeat top right;
        background-size: 1366px auto;
    }
    .spotlight-scroll-track {
        display: block; position: relative; z-index: 0;
        margin-top: -100vh;   /* overlap the sticky's own 100vh so item 0 has no dead lead-in */
    }
    .spotlight-scroll-sentinel { height: 100vh; }

    .spotlight-panel__media {
        height: min(var(--spotlight-img-h),
                    calc(100vh - 15rem - var(--spotlight-m-overhang)));
    }
    .spotlight-tabs {
        min-height: min(var(--spotlight-img-h),
                        calc(100vh - 15rem - var(--spotlight-m-overhang)));
        padding-bottom: var(--spotlight-m-overhang);
    }
}

/* ============================================================
   TESTIMONIALS — "The Circle of Mercy"
   ============================================================ */
.testimonials-section { position: relative; overflow-x: clip; background: #fff; }
.testimonials-grid {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 1fr; gap: 0;
    padding-inline: var(--section-pad-x);
}
.testimonials-grid > * { min-width: 0; }
.testimonials-band {
    order: 0;
    margin-inline: calc(-1 * var(--section-pad-x));
    border-radius: 10px;
    background:
        url("/pics/testimonials-wave.svg") no-repeat top left / auto 140px,
        var(--color-1);
    padding: var(--section-pad-y) var(--section-pad-x) 3.5rem;
}
.testimonials-intro { text-align: center; }
.testimonials-cards { order: 1; min-width: 0; margin-top: -2rem; }
.testimonials-nav { order: 2; margin-top: 2rem; }
.section-title--on-dark { color: var(--color-over-1); filter: none; }
.testimonials-intro__body { color: var(--color-over-1); font-size: 1.25rem; line-height: 1.5; margin-top: 1rem; }
.btn--on-dark { border-color: var(--color-over-1); color: var(--color-over-1); filter: none; }
body a.btn--on-dark:hover, body a.btn--on-dark:focus-visible { background: var(--color-over-1); color: var(--color-1); }
.testimonials-cards .carousel-nav { justify-content: center; }

.profile-card { position: relative; }
.profile-card__photo { position: relative; overflow: hidden; border-radius: 10px; }
.profile-card__photo img { display: block; width: 100%; height: auto; }
.profile-card--no-photo .profile-card__photo { aspect-ratio: 347 / 382; background: var(--color-1); }
.profile-card--no-photo .profile-card__logo-fallback {
    position: absolute; inset: 0; margin: auto;
    width: 55%; height: auto; opacity: 0.35;
}
.profile-card__body { padding: 1rem 0 0; }
.profile-card__name {
    font-family: var(--font-head); font-style: italic; font-weight: 700;
    font-size: clamp(1.75rem, 4vw, 2.125rem);
    margin: 0; line-height: 1.1; text-align: center;
}
.profile-card__name a { color: #000; text-decoration: none; }
body .profile-card__name a:link, body .profile-card__name a:visited { color: #000; }
body .profile-card__name a:hover, body .profile-card__name a:focus-visible { text-decoration: underline; }
.profile-card__rule { display: block; width: 100%; height: 2px; background: var(--color-2); margin: 0.75rem 0; }
.profile-card__quote { color: #000; font-size: 1.125rem; line-height: 1.5; margin: 0.75rem 0 0; }
.profile-card__cta { display: none; }

@media (min-width: 64rem) {
    .testimonials-section { padding-block: var(--section-pad-y); }
    .testimonials-grid {
        grid-template-columns: 1.6fr 1fr; gap: 4rem;
        align-items: start;
        max-width: var(--size-xl); margin-inline: auto;
        padding-top: 150px;
    }
    .testimonials-band {
        position: absolute;
        top: 0; left: 0; right: 0; height: 530px;
        margin-inline: 0;
        background-size: auto 100%, auto;
        border-radius: 10px;
        padding: 0;
        z-index: 0;
    }
    .testimonials-intro {
        position: absolute;
        top: var(--section-pad-y); right: max(var(--section-pad-x), calc(50vw - var(--size-xl) / 2));
        width: min(28rem, 30%);
        padding: 1.5rem 0 0;
        text-align: left;
    }
    .testimonials-grid > .testimonials-cards,
    .testimonials-grid > .testimonials-nav { position: relative; z-index: 1; }
    .testimonials-cards { align-self: start; margin-top: 0; grid-column: 1; }
    .testimonials-carousel { overflow: hidden; }
    .testimonials-nav { grid-column: 1 / -1; justify-content: center; margin-top: 2rem; }

    .profile-card__photo { aspect-ratio: 395 / 500; border-radius: 10px; }
    .profile-card--no-photo .profile-card__photo { aspect-ratio: 395 / 500; }
    .profile-card__photo img { height: 100%; object-fit: cover; transition: filter 0.7s; }
    .profile-card--no-photo .profile-card__logo-fallback { object-fit: contain; }
    .profile-card:hover .profile-card__photo img,
    .profile-card:focus-within .profile-card__photo img { filter: grayscale(1); }
    .profile-card__photo .img-border {
        position: absolute; inset: 14px; z-index: 2;
        border: 1px solid rgba(255,255,255,0.6); border-radius: 10px;
        pointer-events: none;
    }
    .profile-card__body {
        position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
        padding: 1.5rem;
        color: #fff; text-align: center;
        background: linear-gradient(to top, rgba(11,11,46,0.95) 55%, rgba(11,11,46,0) 100%);
        border-radius: 0 0 10px 10px;
    }
    .profile-card__name { color: #fff; text-align: center; transition: text-align 0s; }
    body .profile-card__name a:link, body .profile-card__name a:visited,
    body .profile-card__name a:hover, body .profile-card__name a:active { color: #fff; }
    .profile-card__rule { width: 138px; height: 2px; margin: 0.5rem auto 0; transition: width 0.35s; }
    .profile-card__quote {
        color: #fff; font-size: 1rem; text-align: left;
        max-height: 0; opacity: 0; overflow: hidden;
        margin: 0; transition: max-height 0.35s, opacity 0.35s, margin 0.35s;
    }
    .profile-card__cta {
        display: block; margin-top: 0.75rem;
        font-size: 1rem; letter-spacing: 0.12em; text-transform: uppercase; color: #fff;
    }
    .profile-card__body {
        display: flex; flex-direction: column;
    }
    .profile-card__name { order: 0; }
    .profile-card__cta  { order: 1; }
    .profile-card__rule { order: 2; }
    .profile-card__quote { order: 3; }

    .profile-card:hover .profile-card__rule,
    .profile-card:focus-within .profile-card__rule { width: 306px; max-width: 100%; margin: 0.5rem auto 0; order: 1; }
    .profile-card:hover .profile-card__quote,
    .profile-card:focus-within .profile-card__quote { max-height: 16rem; opacity: 1; margin: 0.75rem 0 0; order: 2; }
    .profile-card:hover .profile-card__cta,
    .profile-card:focus-within .profile-card__cta { display: none; }

    .testimonials-cards { order: 0; }
    .testimonials-intro { order: 1; }
}

/* ============================================================
   COLLEGE LOGOS — "Mercy Outcomes" (auto-scroll strip)
   ============================================================ */
.logos-section { background: #fff; }
.logos-section .section-subtitle { font-size: clamp(1.5rem, 2.2vw, 1.875rem); }
.logos-section .section-head { margin-bottom: 1.875rem; }
@media (min-width: 64rem) {
    .site-homepage > section.logos-section { min-height: 0; }
}
.logos-carousel .swiper-slide { width: auto; display: flex; align-items: center; }
.logo-strip__img { height: 42px; width: auto; }

.logos-autoplay-toggle {
    display: block; margin: 1.25rem auto 0;
    width: 2.25rem; height: 2.25rem;
    background: transparent; border: none; cursor: pointer;
    color: var(--color-1);
    line-height: 0;
}
.logos-autoplay-toggle::after {
    font-family: 'Material Symbols Outlined'; content: 'pause';
    font-size: 1.5rem; text-transform: none;
}
.logos-autoplay-toggle.is-paused::after { content: 'play_arrow'; }

.logos-section__see-more { display: table; margin: 1.25rem auto 0; }

/* ============================================================
   NEWS — "Mercy Moments"
   ============================================================ */
.news-section { position: relative; overflow-x: clip; background: #fff; }
.news-section .section-subtitle { font-size: clamp(1.5rem, 2.2vw, 1.875rem); }
.news-section .section-inner { position: relative; z-index: 1; }
.news-section .section-head { position: relative; z-index: 1; padding-top: var(--section-pad-y); }
.news-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 530px;
    background: var(--color-2) url("/pics/news-wave.svg") no-repeat top right;
    background-size: auto 100%;
    border-radius: 10px;
    z-index: 0;
}
.news-carousel {
    position: relative; z-index: 1; padding-top: 3rem;
    left: 50%; transform: translateX(-50%);
    width: min(var(--size-xl), 100vw - 2 * var(--section-pad-x));
}
.news-section .carousel-nav { position: relative; z-index: 1; }

.news-card { position: relative; display: block; text-decoration: none; }
.news-card__photo {
    position: relative; aspect-ratio: 347 / 382; overflow: hidden;
    border: 2px solid #fff; border-radius: 10px 10px 0 0;
    background: var(--color-1);
}
.news-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-card--no-photo .news-card__logo-fallback {
    width: 62%; height: auto; object-fit: contain; margin: auto;
    position: absolute; inset: 0; opacity: 0.3;
}

.news-card__title-block {
    background: var(--color-1);
    color: var(--color-over-1);
    border: 2px solid #fff; border-top: 0; border-radius: 0 0 10px 10px;
    padding: 1.5625rem;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.15;
}
.news-card__title-strip { display: none; }

@media (min-width: 40rem) {
    .news-card__photo { aspect-ratio: auto; height: 500px; border: 0; border-radius: 10px; }
    .news-card__title-block { display: none; }
    .news-card__title-strip {
        display: block;
        position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
        background: color-mix(in srgb, #000 50%, transparent);
        color: #fff;
        font-family: var(--font-head); font-weight: 700; font-size: clamp(1.375rem, 2.2vw, 1.875rem); line-height: 1.2;
        padding: 1.25rem;
    }
}

/* ============================================================
   GALLERY — "More" (staggered static photo trio)
   ============================================================ */
.gallery-section {
    position: relative; overflow: hidden;
    background: url("/pics/gallery-wave.svg") no-repeat top center;
    background-size: 100% auto;
}
.gallery-section__wordmark {
    display: block;
    width: clamp(15rem, 33vw, 28rem);
    height: auto;
    margin: 0 auto 1rem;
}
.gallery-section__group { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.gallery-photo { border-radius: 10px; overflow: hidden; }
.gallery-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-photo--1, .gallery-photo--3 { aspect-ratio: 4 / 5; }
.gallery-photo--2 { aspect-ratio: 4 / 3; }
@media (min-width: 64rem) {
    .gallery-section__group {
        grid-template-columns: 1fr 1.35fr 1fr;
        align-items: start;
        gap: 1.5rem;
    }
    .gallery-photo--2 { margin-top: 8rem; }
}

/* ============================================================
   FINAL CTA — "Ready to Be More?"
   ============================================================ */
.cta-section { padding-inline: var(--section-pad-x); text-align: center; background: #fff; display: flex; flex-direction: column; justify-content: center; }
@media (min-width: 64rem) {
    .site-homepage > section.cta-section { min-height: 0; }
}
.cta-section__inner { max-width: var(--max-width); margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.cta-section__body {
    font-family: var(--font-head); font-style: italic; font-weight: 600;
    font-size: clamp(1.5rem, 2.2vw, 1.875rem);
    color: #000; line-height: 1.3; margin: 0;
}
.cta-section .btn { margin-top: 1.5rem; }

/* ============================================================
   FOOTER — blue surface, building line-art, columns
   ============================================================ */
.site-footer { position: relative; background: var(--color-1); color: var(--color-over-1); padding-bottom: 2rem; --footer-content-w: 83.875rem; }
.site-footer__building {
    background: #fff;
    width: 100%;
    aspect-ratio: 1370 / 310;
}
.site-footer__building img { display: block; width: 100%; height: auto; }

.site-footer__actions {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem;
    max-width: var(--footer-content-w); margin-inline: auto;
    padding: 2.5rem var(--section-pad-x) 3rem;
}
.site-footer__actions .btn { flex: none; }

@media (min-width: 48rem) {
    .site-footer__actions { flex-wrap: nowrap; gap: 1.5rem; }
    .site-footer__actions::before,
    .site-footer__actions::after { content: ""; flex: 1; height: 1px; background: var(--color-over-1); }
}

.site-footer__inner {
    display: grid; grid-template-columns: 1fr; gap: 2.5rem;
    max-width: var(--footer-content-w); margin-inline: auto; padding: 0 var(--section-pad-x);
}
.site-footer__logo { display: block; width: 243px; max-width: 100%; height: auto; margin-bottom: 1.5rem; }
.site-footer__tagline { line-height: 1.4; margin: 0; font-size: 1.125rem; }
.site-footer__heading { font-family: var(--font-body); font-weight: 400; font-size: 1.25rem; margin: 0 0 1.25rem; }
.site-footer__contact { font-style: normal; }
.site-footer__contact-row { display: flex; align-items: flex-start; gap: 0.6rem; margin-bottom: 0.75rem; }
.site-footer__contact-row svg { flex: none; width: 1.125rem; height: 1.125rem; margin-top: 0.15rem; fill: var(--color-over-1); }
body .site-footer a { color: var(--color-over-1); }

.site-footer__links {
    list-style: none; margin: 0; padding: 0; line-height: 1.3;
    display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 2.5rem;
    grid-auto-flow: column; grid-template-rows: repeat(3, auto);
}
body .site-footer__links a { text-decoration: underline; }

.site-footer__identity { display: flex; flex-direction: column; }
.site-footer__social { display: flex; gap: 1.25rem; list-style: none; margin: 1.75rem 0 0; padding: 0; }
.site-footer__social a { display: flex; width: 2rem; height: 2rem; color: var(--color-over-1); }
.site-footer__social svg { width: 100%; height: 100%; fill: currentColor; }

.site-footer__bottom {
    max-width: var(--footer-content-w); margin-inline: auto; padding: 2rem var(--section-pad-x) 0;
    display: flex; justify-content: flex-end;
}
.site-footer__edlio { display: flex; align-items: center; }
.site-footer__edlio svg { fill: currentColor; }
.site-footer__edlio a svg { width: 120px; height: auto; }

/* Mobile: centered, social row ordered to the bottom (display:contents lifts
   the identity children into the grid so social can order past the columns). */
@media (max-width: 63.99rem) {
    .site-footer__inner { justify-items: center; text-align: center; }
    .site-footer__identity { display: contents; }
    .site-footer__logo { margin-inline: auto; margin-bottom: 1.25rem; }
    .site-footer__social { order: 1; justify-content: center; margin-top: 0.5rem; }
    .site-footer__contact { display: inline-block; text-align: left; }
    .site-footer__links { width: fit-content; max-width: 100%; margin-inline: auto; text-align: left; }
    .site-footer__bottom { justify-content: center; }
}

@media (min-width: 64rem) {
    .site-footer__inner { grid-template-columns: 1.3fr 1fr 1fr; gap: 3.5rem; }
}