/* ================================================================
   Scroll reveal — shared by the sections below.
   Elements start displaced and settle when custom.js observes them.
   If IntersectionObserver is missing, custom.js marks everything in
   at once, so nothing here can leave content permanently hidden.
   ================================================================ */
.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
    transition-delay: var(--reveal-delay, 0ms);
}

.reveal.is-in {
    opacity: 1;
    transform: none;
}

/* A button that also reveals. `.reveal.is-in { transform: none }` sits after
   `.theme-btn:hover` in the cascade at equal specificity, so without this the hover
   lift is cancelled the moment the button lands. */
.theme-btn.reveal.is-in:hover,
.theme-btn.reveal.is-in:focus-visible {
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* ================================================================
   The operative word of a section heading is wrapped in <em>:
   <h2 class="common-heading">What makes us <em>different</em></h2>

   It renders as plain, upright text. The gold marker stroke that used
   to sit behind it was removed sitewide, so the <em> now does nothing
   but cancel the browser's default italic.

   ADD ANY NEW HEADING CLASS THAT USES <em> TO THE LIST BELOW. It is a
   list rather than a bare `h2 em` so that italics inside editor prose
   (.page-content) stay ordinary italics.
   ================================================================ */
.common-heading em,
.page-banner-title em,
.admission-cta-title em,
.error-404-title em {
    font-style: normal;
}

/* ================================================================
   Why Choose Us — differentiator cards over an ambient wash
   ================================================================ */
.page-section.features-section {
    position: relative;
    background: var(--color-white);
    /* The gold stat band is pulled up into this padding, so the bottom
       needs more room than the shared .page-section rhythm allows. */
    padding-bottom: clamp(80px, 10vw, 150px);
    overflow: hidden;
}

/* White cards on a white page need something to sit on. */
.features-section::before {
    content: '';
    position: absolute;
    top: -230px;
    left: 50%;
    width: min(940px, 130%);
    height: 560px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(111, 71, 228, 0.09), transparent 68%);
    pointer-events: none;
}

.features-section .heading-wrap {
    position: relative;
    z-index: 1;
    margin-bottom: clamp(34px, 4vw, 54px);
}

.features-lead {
    max-width: 620px;
    margin: 14px auto 0;
    color: var(--color-muted);
    font-size: 1.02rem;
    line-height: 1.8;
}

.features-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.feature-card {
    position: relative;
    padding: 32px 30px 34px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(17, 26, 63, 0.04);
    transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.35s cubic-bezier(0.2, 0.7, 0.3, 1), border-color 0.35s ease, opacity 0.6s ease;
    /* isolation keeps the tint layer's negative z-index inside the card. */
    isolation: isolate;
    overflow: hidden;
}

/* The hue lives in its own layer so the card reads calm at rest and warms
   up under the cursor without the border or shadow being repainted. */
.feature-card::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    background: var(--tint, var(--color-tint-bg));
    opacity: 0.5;
    transition: opacity 0.35s ease;
}

.feature-card:hover,
.feature-card:focus-within {
    transform: translateY(-6px);
    box-shadow: 0 22px 44px -20px rgba(17, 26, 63, 0.3);
    border-color: var(--color-tint-border);
    border-color: color-mix(in srgb, var(--hue) 30%, var(--color-border));
}

.feature-card:hover::before,
.feature-card:focus-within::before {
    opacity: 1;
}

/* Reveal and hover both drive transform, so the lift only applies once the
   card has landed — otherwise a hover mid-reveal snaps it into place. */
.feature-card.reveal:not(.is-in):hover {
    transform: translateY(18px);
}

.feature-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    margin-bottom: 24px;
    color: var(--hue, var(--color-primary));
    background: var(--color-white);
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(17, 26, 63, 0.07);
}

.feature-icon::after {
    content: '';
    position: absolute;
    inset: -6px;
    border: 1.5px dashed var(--color-tint-border);
    border: 1.5px dashed color-mix(in srgb, var(--hue) 45%, transparent);
    border-radius: 50%;
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.feature-card:hover .feature-icon::after {
    transform: rotate(120deg);
}

/* Inline-SVG icons — still used by the About Us pillars. */
.feature-icon svg {
    width: 26px;
    height: 26px;
}

/* Image icons, painted as a mask so black source art takes the card's --hue.
   An <img> could not do this: recolouring one per card would mean six copies
   of every file, or a hand-tuned filter chain per colour.
   Only .has-art gets the ::before, so an icon that carries an <svg> instead
   is not given a stray coloured block behind it. */
.feature-icon.has-art::before {
    content: '';
    /* Larger than the 26px inline-SVG icons above, and deliberately so: the
       webp art carries its own margin inside the 256px square, so matching
       box sizes would leave the drawing looking noticeably smaller. */
    width: 36px;
    height: 36px;
    background: var(--hue, var(--color-primary));
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
}

.feature-title {
    margin: 0 0 10px;
    font-family: var(--heading-font-family);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--color-navy);
}

.feature-desc {
    margin: 0;
    color: var(--color-body);
    font-size: 0.95rem;
    line-height: 1.75;
}

/* Fact chips — only on the cards where there is an actual number behind it. */
.feature-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 18px;
    padding: 6px 13px;
    color: var(--hue, var(--color-primary));
    background: var(--color-white);
    border: 1px solid var(--color-tint-border);
    border: 1px solid color-mix(in srgb, var(--hue) 26%, transparent);
    border-radius: 100px;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.3;
}

.feature-chip svg {
    flex: none;
    width: 13px;
    height: 13px;
}

@media (max-width: 1199.98px) {
    .feature-card {
        padding: 28px 24px 30px;
    }
}

@media (max-width: 991.98px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

    /* One card per row here, so the medallion no longer has a narrow column
       to head — stacked, it left a band of empty space above every title.
       The icon and the title share the first row instead, and the icon comes
       down to a size that suits sitting beside type rather than above it. */
    .feature-card {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: 14px;
        align-items: center;
    }
    .feature-icon {
        width: 46px;
        height: 46px;
        margin-bottom: 0;
    }
    .feature-icon.has-art::before {
        width: 26px;
        height: 26px;
    }
    .feature-icon svg {
        width: 20px;
        height: 20px;
    }
    .feature-title {
        margin: 0;
        font-size: 1.08rem;
    }
    /* Both run the full card width under that first row. */
    .feature-desc,
    .feature-chip {
        grid-column: 1 / -1;
        margin-top: 14px;
    }
    /* A grid item stretches by default, which would pull the pill out to the
       full width and stop it reading as a chip. */
    .feature-chip {
        justify-self: start;
    }
}

/* ================================================================
   Stat band — overlaps the section above, ridgeline watermark
   ================================================================ */
.page-section.stats-section {
    position: relative;
    z-index: 1;
    padding-block: 0;
    /* max() rather than clamp() so the pull shrinks with the viewport
       instead of bottoming out at a fixed value on phones. */
    margin-top: max(-100px, -7vw);
    margin-bottom: clamp(20px, 3vw, 42px);
}

.stats-band {
    position: relative;
    /* Contains the watermark's multiply blend, so it darkens the band and
       nothing behind it. */
    isolation: isolate;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    padding: 44px 52px;
    /* Nearly flat — the old gradient ran to a much deeper gold at the bottom
       and fought the watermark for attention. */
    background: linear-gradient(180deg, #f6cb52 0%, var(--color-accent) 100%);
    border-radius: 999px;
    box-shadow: 0 26px 52px -28px rgba(224, 175, 30, 0.85);
    overflow: hidden;
}

/* Watermark.
   The source file is pale grey continents on near-white, so laying it over
   gold at low opacity only washed the band out — the map was invisible.
   `multiply` is what makes it read: white pixels leave the gold untouched
   and the grey continents darken it, which is the effect the reference has.
   `isolation` on the band keeps the blend inside it. */
.stats-band-map {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    mix-blend-mode: multiply;
    opacity: 0.9;
    pointer-events: none;
}

/* No rules between the columns — the watermark now carries the band, and a
   grid of dividers on top of it read as clutter. */
.stat-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

.stat-badge {
    flex: none;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    color: var(--color-navy);
    background: var(--color-white);
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(90, 66, 7, 0.2);
}

/* Source art is flat black; on the white disc it needs to be brand navy,
   not raw #000 — the same recolour the hero facts and social chips use. */
.stat-badge img {
    width: 30px;
    height: 30px;
    filter: brightness(0) saturate(100%) invert(6%) sepia(26%) saturate(2198%) hue-rotate(192deg) brightness(97%) contrast(88%);
}

.stat-figure {
    display: block;
    font-family: var(--heading-font-family);
    font-size: clamp(1.75rem, 1.25rem + 1.2vw, 2.35rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--color-navy);
}

/* Sits on the baseline at nearly full size. As a raised superscript it read
   as a footnote marker rather than as part of the number. */
.stat-suffix {
    font-size: 0.72em;
    margin-left: 2px;
}

.stat-label {
    display: block;
    margin-top: 8px;
    color: #6b551f;
    font-family: var(--body-font-family);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
}

@media (max-width: 991.98px) {
    .stats-band {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 24px;
        padding: 36px 32px;
        border-radius: 32px;
    }
}

@media (max-width: 575.98px) {
    /* Two up rather than one: four stacked cards turned the band into a
       column half a screen long. Beside its disc the label was left with
       about 100px and broke into two ragged lines, so on a phone the disc
       goes back on top and the text gets the whole cell — "Qualified
       Teachers" and "Years of Excellence" then sit on one line each. */
    .stats-band {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px 14px;
        padding: 26px 18px;
        border-radius: 26px;
    }
    .stat-card {
        flex-direction: column;
        gap: 9px;
        text-align: center;
    }
    .stat-badge {
        width: 48px;
        height: 48px;
    }
    .stat-badge img {
        width: 23px;
        height: 23px;
    }
    .stat-label {
        margin-top: 4px;
        font-size: 0.8rem;
    }
}

/* ================================================================
   Our Faculty — pitch on the left, staggered face cards on the right
   ================================================================ */
/* ================================================================
   HOME PAGE SECTION RHYTHM — white and tint alternate strictly:

     hero (dark) → about (tint) → features (white) → [stat band]
     → faculty (tint) → news (white) → admission CTA (tint)
     → gallery (white) → testimonials (tint) → blog (white)

   Three white sections used to run together here, which read as one
   very long section with a couple of seams in it. Change one of these
   backgrounds and everything after it has to be re-checked.
   ================================================================ */
.page-section.faculty-section {
    position: relative;
    background: var(--color-tint-bg);
    padding-block: clamp(56px, 7vw, 100px);
    overflow: hidden;
}

.faculty-grid-outer {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1.18fr;
    gap: clamp(40px, 5vw, 72px);
    align-items: center;
}

/* ---------- Doodles ---------- */
.faculty-doodle {
    position: absolute;
    z-index: 0;
    pointer-events: none;
}

/* The star is a webp painted through a mask, so one token drives it and the
   arc below. The source art is #FFD25D, which would otherwise sit a shade
   warmer than everything else gold on the page. */
.faculty-doodle.is-star {
    top: 13%;
    left: 38%;
    /* Height is explicit here — a span has no intrinsic ratio to fall back on
       the way the <svg> it replaced did. */
    width: 56px;
    height: 56px;
    background: var(--color-accent);
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
}

.faculty-doodle.is-arc {
    bottom: 13%;
    left: 37%;
    width: 46px;
    color: var(--color-accent);
}

.faculty-doodle.is-dots {
    top: 30%;
    left: -16px;
    width: 78px;
    color: #d9cffa;
}

@media (prefers-reduced-motion: no-preference) {
    .faculty-doodle.is-star {
        transform-origin: center;
        animation: cbps-doodle-spin 22s linear infinite;
    }
}

@keyframes cbps-doodle-spin {
    to { transform: rotate(360deg); }
}

/* ---------- Left column ---------- */
.faculty-intro {
    position: relative;
    z-index: 1;
}

.faculty-intro .heading-wrap {
    margin-bottom: 20px;
}

.faculty-lead {
    max-width: 46ch;
    margin: 0 0 34px;
    color: var(--color-body);
    font-size: 1.04rem;
    line-height: 1.78;
}

.faculty-lead b {
    color: var(--color-navy);
    font-weight: 600;
}

.faculty-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* ---------- Right column ---------- */
.faculty-people {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}

.faculty-card {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    /* The violet frame is the section's signature — it is what stops four
       photographs from reading as a stock-photo grid. */
    border: 3px solid var(--color-primary);
    border-radius: 18px;
    background: linear-gradient(150deg, #e7e2fb, #d5ccf6);
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.35s ease, opacity 0.6s ease;
}

/* Dropped columns stagger, so the eye moves down the grid rather than
   straight across it. Scoped to the home section — the Teachers page reuses
   .faculty-card in 3- and 4-column grids where a stagger would just look
   like a mistake. */
.faculty-section .faculty-card:nth-child(even) {
    margin-top: 26px;
}

.faculty-card:hover,
.faculty-card:focus-visible {
    transform: translateY(-6px);
    box-shadow: 0 26px 50px -24px rgba(111, 71, 228, 0.75);
}

/* Reveal and hover both drive transform, so the lift waits until the card
   has landed — otherwise hovering mid-reveal snaps it into place. */
.faculty-card.reveal:not(.is-in):hover,
.faculty-card.reveal:not(.is-in):focus-visible {
    transform: translateY(20px);
}

.faculty-card:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 4px;
}

/* Pinned rather than sized at 100% — a percentage height against an
   aspect-ratio parent is not reliably definite, and pinning also leaves the
   card with no in-flow children, so aspect-ratio alone sets its height. */
.faculty-photo,
.faculty-monogram {
    position: absolute;
    inset: 0;
    width: 100%;
    /* Also beats the global `img { height: auto }`. */
    height: 100%;
}

.faculty-photo {
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.faculty-card:hover .faculty-photo {
    transform: scale(1.05);
}

/* Stand-in until a portrait is dropped into assets/images/faculty/. */
.faculty-monogram {
    display: grid;
    place-items: center;
    color: var(--color-primary);
    font-family: var(--heading-font-family);
    font-size: clamp(2.6rem, 5vw, 3.6rem);
    font-weight: 800;
    letter-spacing: 0.02em;
    opacity: 0.42;
}

/* Keeps the plate legible over a light photo. */
.faculty-card::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 46%;
    background: linear-gradient(transparent, rgba(9, 17, 36, 0.42));
    pointer-events: none;
}

/* The reference put a share button here. A parent scanning faces wants to
   know what the person teaches, so it carries the subject instead. */
.faculty-subject {
    position: absolute;
    z-index: 3;
    top: 14px;
    right: 14px;
    padding: 7px 13px;
    color: var(--color-white);
    background: var(--color-primary);
    border-radius: 100px;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    box-shadow: 0 4px 14px rgba(85, 53, 212, 0.5);
}

.faculty-plate {
    position: absolute;
    z-index: 3;
    right: 14px;
    bottom: 14px;
    left: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--color-white);
    border-radius: 12px;
    box-shadow: 0 14px 30px -14px rgba(18, 32, 63, 0.3);
    transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.faculty-card:hover .faculty-plate {
    transform: translateY(-4px);
}

.faculty-plate-text {
    min-width: 0;
}

.faculty-name {
    margin: 0 0 3px;
    color: var(--color-navy);
    font-family: var(--heading-font-family);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.faculty-role {
    display: block;
    color: var(--color-primary);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.35;
}

.faculty-qual {
    display: block;
    margin-top: 3px;
    color: var(--color-muted);
    font-size: 0.75rem;
    font-weight: 400;
}

.faculty-go {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-left: auto;
    color: var(--color-primary);
    background: var(--color-tint-chip);
    border-radius: 50%;
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.faculty-go svg {
    width: 15px;
    height: 15px;
}

.faculty-card:hover .faculty-go {
    color: var(--color-white);
    background: var(--color-primary);
    transform: translateX(3px);
}

/* Reused on the Teachers page, where the card is a plain div rather than a
   link. Nothing to click, so nothing should lift under the cursor. */
.faculty-card.is-static {
    cursor: default;
}

.faculty-card.is-static:hover,
.faculty-card.is-static.reveal:not(.is-in):hover {
    transform: none;
}

.faculty-card.is-static.reveal:not(.is-in) {
    transform: translateY(20px);
}

@media (max-width: 991.98px) {
    .faculty-grid-outer {
        grid-template-columns: 1fr;
        gap: 46px;
    }
    .faculty-lead {
        max-width: 60ch;
    }
    /* Stacked columns lose the gutter the star and arc were sitting in. */
    .faculty-doodle.is-star {
        top: 2%;
        right: 5%;
        left: auto;
    }
    .faculty-doodle.is-arc {
        display: none;
    }
    .faculty-doodle.is-dots {
        top: 7%;
    }
    .faculty-card:nth-child(even) {
        margin-top: 0;
    }
}

@media (max-width: 575.98px) {
    /* The intro read as three widely separated blocks on a phone. */
    .faculty-intro .heading-wrap {
        margin-bottom: 14px;
    }
    .faculty-lead {
        margin-bottom: 20px;
    }
    /* Both actions on one row. Together they are a little wider than a phone,
       so they used to wrap and leave a column of empty space beside them —
       the same fix the hero pair uses: allow them to shrink and let the label
       wrap inside the pill rather than pushing the second button down. */
    .faculty-actions {
        flex-wrap: nowrap;
        gap: 10px;
    }
    .faculty-actions .theme-btn {
        min-width: 0;
        justify-content: space-between;
        padding-left: 14px;
        white-space: normal;
        text-align: left;
    }
    /* Four stacked portraits made this the tallest section on the phone home
       page. It becomes a swipe rail instead: one card at a time with the next
       one peeking, so the section costs a single card's height.
       Scoped to the home section on purpose — the Teachers page reuses
       .faculty-people for its directory, which has to stay a plain grid. */
    .faculty-section .faculty-people {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 82%;
        gap: 14px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        /* The cards lift on tap and carry a shadow; overflow-x also clips the
           vertical axis, so the rail keeps a little room for both. */
        padding-block: 4px 10px;
        /* Runs to both screen edges, so the card being peeked at slides off the
           side of the phone instead of stopping short in the container gutter.
           The matching padding puts the first card back in line with the copy
           above it, and scroll-padding makes every snapped card land there
           too rather than flush against the bleed edge. */
        margin-inline: calc(-1 * clamp(10px, 1.3vw, 15px));
        padding-inline: clamp(10px, 1.3vw, 15px);
        scroll-padding-inline: clamp(10px, 1.3vw, 15px);
        scrollbar-width: none;
    }
    .faculty-section .faculty-people::-webkit-scrollbar {
        display: none;
    }
    .faculty-section .faculty-card {
        scroll-snap-align: start;
    }
    .faculty-people {
        gap: 16px;
    }
    .faculty-card {
        aspect-ratio: 3 / 4;
    }
    .faculty-plate {
        right: 10px;
        bottom: 10px;
        left: 10px;
        padding: 12px;
    }
    .faculty-name {
        font-size: 0.9375rem;
    }
    .faculty-doodle.is-dots {
        display: none;
    }
}

@media (max-width: 400px) {
    /* The home rail sets its own track, so this only reaches the Teachers
       page directory. */
    .faculty-people {
        grid-template-columns: 1fr;
    }
    .faculty-section .faculty-people {
        grid-template-columns: none;
    }
}

/* ================================================================
   Latest News & Notices — compact two-column list on the home page.

   A school posts many more notices than it has photographs, so this
   drops the image entirely and fits ten items in the height three
   picture cards used to need. The `.news-card` set below still
   dresses the archive listing, which does want images.
   ================================================================ */
/* White — faculty above it is tinted. The rows carry a border, so they still
   read as cards without a tint behind them. */
.page-section.news-section {
    background: var(--color-white);
}

.news-head {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 32px;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 28px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--color-tint-border);
}

.news-head-title {
    margin: 0;
    font-size: clamp(1.6rem, 1.1rem + 2vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.news-head-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 2px;
    color: var(--color-primary);
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
}

.news-head-all svg {
    width: 16px;
    height: 16px;
    transition: transform 0.18s ease;
}

.news-head-all:hover,
.news-head-all:focus-visible {
    color: var(--color-navy);
}

.news-head-all:hover svg,
.news-head-all:focus-visible svg {
    transform: translateX(4px);
}

/* ---- The list -------------------------------------------------- */
.newsline {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 20px;
}

.newsline-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 16px 20px 16px 16px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    text-decoration: none;
    transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease, opacity 0.6s ease;
}

.newsline-item:hover,
.newsline-item:focus-visible {
    transform: translateY(-2px);
    border-color: var(--color-primary);
    box-shadow: 0 6px 20px rgba(111, 71, 228, 0.1);
}

/* Reveal and hover both drive transform, so the lift waits until the row
   has landed — otherwise hovering mid-reveal snaps it into place. */
.newsline-item.reveal:not(.is-in):hover {
    transform: translateY(18px);
}

.newsline-item:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

/* ---- Date block ------------------------------------------------ */
.newsline-date {
    flex: 0 0 auto;
    align-self: stretch;
    width: 52px;
    padding-right: 16px;
    border-right: 1px solid var(--color-border);
    text-align: center;
}

.newsline-day {
    display: block;
    color: var(--color-navy);
    font-family: var(--heading-font-family);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.1;
    /* Tabular figures so 11 and 08 occupy the same width and the months
       below them stay on one optical line down the column. */
    font-variant-numeric: tabular-nums;
}

.newsline-month {
    display: block;
    margin-top: 2px;
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* ---- Body ------------------------------------------------------ */
.newsline-body {
    min-width: 0;
}

.newsline-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 7px;
}

.newsline-tag {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* One pair per news_type term slug, shared by the home list and the archive
   cards so a category cannot be amber in one place and green in the other.
   Anything unrecognised, and anything with no term, lands on .is-default. */
.newsline-tag.is-notice,
.news-card-tag.is-notice    { color: #8a6400; background: #fdf4dd; }

.newsline-tag.is-event,
.news-card-tag.is-event     { color: #4b2fa8; background: var(--color-tint-chip); }

.newsline-tag.is-academics,
.news-card-tag.is-academics { color: #1a7a55; background: #e3f8ef; }

.newsline-tag.is-admission,
.news-card-tag.is-admission { color: var(--color-navy); background: #eef0f7; }

.newsline-tag.is-default,
.news-card-tag.is-default   { color: var(--color-body); background: var(--color-bg-soft); }

.newsline-new {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--color-navy);
    font-size: 11px;
    font-weight: 700;
}

.newsline-new::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--color-accent);
    border-radius: 50%;
}

.newsline-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin: 0;
    color: var(--color-navy);
    font-family: var(--heading-font-family);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
    overflow: hidden;
    transition: color 0.18s ease;
}

.newsline-item:hover .newsline-title,
.newsline-item:focus-visible .newsline-title {
    color: var(--color-primary);
}

.news-foot {
    display: flex;
    justify-content: center;
    margin-top: 34px;
}

@media (max-width: 899.98px) {
    .newsline {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

@media (max-width: 575.98px) {
    .news-head {
        gap: 10px;
    }
    /* The header link duplicates the button at the foot; on a phone that is
       two identical calls to action inside one screen height. */
    .news-head-all {
        display: none;
    }
    .newsline-item {
        gap: 14px;
        padding: 14px 16px 14px 14px;
    }
    .newsline-date {
        width: 44px;
        padding-right: 12px;
    }
    .newsline-day {
        font-size: 21px;
    }
    /* The two-line clamp cut both of the school's real headlines mid-title
       on a phone. Stacked in one column there is no neighbouring row to stay
       level with, so the title runs its full length instead — display:block
       is what switches the -webkit-box clamp off. */
    .newsline-title {
        display: block;
        font-size: 16px;
    }
}

/* ================================================================
   News / search / archive cards — shared by index.php, archive.php
   and search.php. The home page news list above has its own
   `.newsline-*` set; these two are separate on purpose, so
   restyling one cannot silently redesign the other.
   ================================================================ */
.news-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
}

.news-card {
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, opacity 0.6s ease;
}

.news-card:hover,
.news-card:focus-visible {
    transform: translateY(-4px);
    border-color: var(--color-tint-border);
    box-shadow: 0 14px 34px rgba(17, 26, 63, 0.1);
}

/* Reveal and hover both drive transform, so the lift waits until the card
   has landed — otherwise hovering mid-reveal snaps it into place. */
.news-card.reveal:not(.is-in):hover {
    transform: translateY(18px);
}

.news-card:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

/* ---- Media + date block ---------------------------------------- */
.news-card-image {
    position: relative;
    aspect-ratio: 3 / 2;
    background: var(--color-tint-chip);
    /* Not hidden — the date block deliberately hangs below this box. */
    overflow: visible;
}

.news-card-image img {
    display: block;
    width: 100%;
    /* Beats the global `img { height: auto }` so the photo fills the box. */
    height: 100%;
    object-fit: cover;
}

.news-card-blank {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: var(--color-primary);
    opacity: 0.28;
}

.news-card-blank svg {
    width: 46px;
    height: 46px;
}

/* Overlaps the image edge, rhyming with the date column on the home list. */
.news-date {
    position: absolute;
    z-index: 1;
    bottom: -22px;
    left: 16px;
    width: 62px;
    padding: 9px 0 8px;
    color: var(--color-white);
    background: var(--color-primary);
    border-radius: 12px;
    text-align: center;
}

.news-day {
    display: block;
    font-family: var(--heading-font-family);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.05;
    /* Tabular figures so 09 and 24 sit at the same width down the column. */
    font-variant-numeric: tabular-nums;
}

.news-month {
    display: block;
    margin-top: 1px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.82;
}

/* ---- Body ------------------------------------------------------ */
.news-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    /* Top padding clears the date block hanging into this space. */
    padding: 34px 20px 20px;
}

.news-card-tag {
    align-self: flex-start;
    margin-bottom: 11px;
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.news-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin: 0 0 9px;
    color: var(--color-navy);
    font-family: var(--heading-font-family);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.01em;
    overflow: hidden;
    transition: color 0.16s ease;
}

.news-card:hover .news-title,
.news-card:focus-visible .news-title {
    color: var(--color-primary);
}

.news-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin: 0 0 16px;
    color: var(--color-body);
    font-size: 15px;
    line-height: 1.65;
    overflow: hidden;
}

.news-read-more {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    /* Pins to the bottom so the link sits on one line across the row even
       when titles run to different lengths. */
    margin-top: auto;
    color: var(--color-primary);
    font-size: 14px;
    font-weight: 700;
}

.news-read-more svg {
    width: 14px;
    height: 14px;
    transition: transform 0.2s ease;
}

.news-card:hover .news-read-more svg,
.news-card:focus-visible .news-read-more svg {
    transform: translateX(4px);
}

@media (max-width: 979.98px) {
    .news-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 619.98px) {
    .news-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* ================================================================
   Blog strip — heading and archive CTA on one row, three tinted
   cards below. White ground, because the testimonials section
   directly above it is already tinted and two soft greys back to
   back read as one long section with a seam in it.
   ================================================================ */
.page-section.blog-section {
    position: relative;
    background: var(--color-white);
    overflow: hidden;
}

/* ---- Header row ------------------------------------------------ */
.blog-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: clamp(34px, 4vw, 52px);
}

.blog-head-text {
    max-width: 640px;
}

/* A squarer, letter-spaced take on the shared eyebrow — here it sits flush
   with the left edge of the heading rather than centred over it, and the
   full pill radius looks unmoored once nothing is centred with it. */
.blog-section .heading-top-text {
    margin-bottom: 18px;
    padding: 8px 18px;
    border-radius: 8px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.blog-heading {
    margin: 0;
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.03em;
}

.blog-heading span {
    color: var(--color-primary);
}

.blog-lede {
    max-width: 46ch;
    margin: 14px 0 0;
    color: var(--color-muted);
    line-height: 1.7;
}

/* Bottom-aligned against the lede, so it must not stretch to the row. */
.blog-head .theme-btn {
    flex: none;
}

/* ---- Cards ----------------------------------------------------- */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

.blog-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 14px 14px 26px;
    background: var(--color-bg-soft);
    border: 1px solid transparent;
    border-radius: 20px;
    /* opacity is listed so the reveal fade keeps its own 0.6s ease — this
       rule would otherwise shorten it to the 0.35s used for the lift. */
    transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.35s ease, background 0.35s ease, border-color 0.35s ease, opacity 0.6s ease;
}

.blog-card:hover,
.blog-card:focus-within {
    transform: translateY(-6px);
    background: var(--color-white);
    border-color: var(--color-tint-border);
    box-shadow: 0 22px 44px -22px rgba(17, 26, 63, 0.3);
}

/* Reveal and hover both drive transform, so the lift only applies once the
   card has landed — otherwise a hover mid-reveal snaps it into place. */
.blog-card.reveal:not(.is-in):hover {
    transform: translateY(18px);
}

/* The tint shows through as the panel's ground while the image loads, and
   carries the slot on its own when a post has no featured image. */
.blog-card-media {
    position: relative;
    aspect-ratio: 16 / 10;
    background: linear-gradient(150deg, var(--tint-a), var(--tint-b));
    border-radius: 14px;
    overflow: hidden;
}

.blog-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.blog-card:hover .blog-card-media img {
    transform: scale(1.06);
}

.blog-card-cat {
    position: absolute;
    z-index: 1;
    top: 12px;
    left: 12px;
    padding: 6px 12px;
    color: var(--color-navy);
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-radius: 100px;
    box-shadow: 0 2px 8px rgba(17, 26, 63, 0.14);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.3;
    text-transform: uppercase;
}

.blog-card-meta {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 20px 4px 12px;
    color: var(--color-muted);
    font-size: 0.8125rem;
    line-height: 1.4;
}

.blog-card-meta span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.blog-card-meta svg {
    flex: none;
    width: 15px;
    height: 15px;
    color: var(--color-primary);
}

.blog-card-title {
    margin: 0 4px 22px;
    font-family: var(--heading-font-family);
    font-size: 1.1875rem;
    font-weight: 700;
    line-height: 1.34;
    letter-spacing: -0.012em;
    color: var(--color-navy);
}

/* Underline drawn as a background image so it can grow out from the left
   instead of fading in across the whole width at once. */
.blog-card-title a {
    color: inherit;
    background-image: linear-gradient(var(--color-primary), var(--color-primary));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 1.5px;
    transition: background-size 0.4s cubic-bezier(0.2, 0.7, 0.3, 1), color 0.25s ease;
}

.blog-card:hover .blog-card-title a {
    color: var(--color-primary);
    background-size: 100% 1.5px;
}

/* The whole card is the hit area — there is no second link to hunt for.
   Everything else in the card is a span, so nothing is buried under this. */
.blog-card-title a::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
}

.blog-card-title a:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 4px;
    border-radius: 4px;
}

.blog-card-more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    /* auto on top pins this to the card's bottom however tall the title runs,
       so the arrows line up across a row of uneven headlines. */
    margin: auto 4px 0;
    color: var(--color-primary);
    font-size: 0.875rem;
    font-weight: 700;
}

.blog-card-more i {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    background: var(--color-tint-chip);
    border-radius: 50%;
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.blog-card-more svg {
    width: 15px;
    height: 15px;
}

.blog-card:hover .blog-card-more i,
.blog-card:focus-within .blog-card-more i {
    color: var(--color-white);
    background: var(--color-primary);
    transform: translateX(4px);
}

@media (max-width: 991.98px) {
    .blog-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px;
    }
}

@media (max-width: 575.98px) {
    .blog-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

/* ================================================================
   Testimonials Section (World Map Background)
   ================================================================ */
.page-section.testimonials-section {
    position: relative;
    background-color: var(--color-tint-bg);
    background-image: url('../images/webp-icons/testimonial-bg-map.webp');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    overflow: hidden;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.testimonial-card {
    background: var(--color-white);
    border: 1px solid var(--color-tint-border);
    border-radius: 20px;
    padding: 36px 32px 32px;
}

.testimonial-card .quote-mark {
    display: block;
    margin-bottom: 18px;
}
.testimonial-card .quote-mark img {
    width: 40px;
    height: auto;
}

.testimonial-text {
    color: var(--color-body);
    font-size: 15px;
    line-height: 1.85;
    margin-bottom: 22px;
}

.testimonial-author strong {
    display: block;
    font-family: var(--heading-font-family);
    color: var(--color-navy);
    font-size: 17px;
    margin-bottom: 4px;
}
.testimonial-author span {
    display: block;
    color: var(--color-primary);
    font-size: 14px;
}

.testimonials-nav-arrow {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-top: 40px;
    margin-left: auto;
    background: var(--color-primary);
    border-radius: 50%;
    box-shadow: 0 14px 28px -14px rgba(111, 71, 228, 0.9);
}
.testimonials-nav-arrow .icon {
    width: 16px;
    height: 16px;
    filter: brightness(0) saturate(100%) invert(100%);
}

@media (max-width: 991.98px) {
    .testimonials-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 767.98px) {
    .testimonials-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .testimonials-nav-arrow {
        margin-top: 24px;
    }
}

/* ================================================================
   About Section Layout
   ================================================================ */
.about-home {
    /* 4rem of air above the eyebrow was most of a phone screen before the
       first word — the low end comes down, the wide end is unchanged. */
    padding: clamp(2.5rem, 6vw, 6rem) 0;
    background: var(--color-bg-soft);
}

.about-home-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.75rem, 1rem + 3vw, 3rem);
    align-items: center;
}

@media (min-width: 992px) {
    .about-home-grid {
        grid-template-columns: 1.2fr 1fr;
        gap: 5rem;
    }
}

/* The stack inside this column read as a list of separated blocks rather
   than one piece of writing: 3rem under the heading, 1.5rem under the
   affiliation line and 2rem above the button, all fixed. Every gap now
   clamps down on a narrow screen and lands on the old figure on a wide one. */
.about-home-content .heading-wrap {
    margin-bottom: clamp(0.75rem, 0.4rem + 1vw, 1.5rem);
}

/* Was an inline style on the paragraph itself. */
.about-home-content .affiliation-text {
    margin-bottom: clamp(0.7rem, 0.4rem + 0.9vw, 1.2rem);
    color: #e8772e;
    font-weight: 600;
}

.about-home-content p {
    color: var(--color-body);
    line-height: 1.8;
    font-size: 1.05rem;
    margin-bottom: clamp(0.7rem, 0.4rem + 0.9vw, 1.2rem);
}

/* Also an inline style before this. */
.about-home-actions {
    margin-top: clamp(1rem, 0.5rem + 1.4vw, 2rem);
}

/* The two corner brackets below hang 14px outside the photo, and the photo
   fills this column on a phone — so they ran past the container's 10px gutter
   and gave the whole page a horizontal scrollbar. The column keeps that 14px
   for itself instead, which is also why the brackets are not clipped. */
.about-home-image {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding-inline: 14px;
}

/* Dot-grid pattern peeking out behind the top-right corner */
.about-home-image::before {
    content: '';
    position: absolute;
    top: -24px;
    right: 8px;
    width: 130px;
    height: 130px;
    background: url('../images/webp-icons/image-bg-pattern.webp') repeat;
    z-index: 0;
}

.about-home-image .image-wrapper {
    background: var(--color-white);
    box-shadow: 0 20px 40px -10px rgba(26,58,110,0.15);
    position: relative;
    max-width: 420px;
    width: 100%;
    z-index: 1;
}

/* Top-left corner bracket accent */
.about-home-image .image-wrapper::before {
    content: '';
    position: absolute;
    top: -14px;
    left: -14px;
    width: 56px;
    height: 56px;
    border-top: 6px solid var(--color-accent);
    border-left: 6px solid var(--color-accent);
    z-index: 2;
}

/* Bottom-right corner bracket accent */
.about-home-image .image-wrapper::after {
    content: '';
    position: absolute;
    bottom: -14px;
    right: -14px;
    width: 56px;
    height: 56px;
    border-bottom: 6px solid var(--color-accent);
    border-right: 6px solid var(--color-accent);
    z-index: 2;
}

.about-home-image img {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
}

/* ================================================================
   Admission CTA — dark band with a map watermark
   ================================================================ */

.page-section.admission-cta-section {
    background: var(--color-tint-bg);
}

.admission-cta-banner {
    position: relative;
    display: grid;
    /* `auto` rather than a fraction: the actions column takes exactly the
       width of the buttons instead of claiming a share of the banner and
       leaving a band of dead space at the right edge. */
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
    padding: clamp(32px, 4.5vw, 60px);
    background: linear-gradient(125deg, #171e2e 0%, #2a2350 55%, #3a2a6b 100%);
    border-radius: 26px;
    box-shadow: 0 30px 60px -34px rgba(17, 26, 63, 0.95);
    overflow: hidden;
}

.admission-cta-map {
    position: absolute;
    top: 50%;
    right: -60px;
    width: 620px;
    height: auto;
    max-width: none;
    transform: translateY(-50%);
    opacity: 0.09;
    pointer-events: none;
}

.admission-cta-content {
    position: relative;
    z-index: 1;
}

.admission-cta-eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    padding: 7px 16px;
    color: var(--color-accent);
    background: rgba(247, 201, 72, 0.14);
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.admission-cta-title {
    margin: 0 0 14px;
    color: var(--color-white);
    font-family: var(--heading-font-family);
    font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.4rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.03em;
}

.admission-cta-text {
    max-width: 50ch;
    margin: 0;
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.975rem;
    line-height: 1.75;
}

.admission-cta-points {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.admission-cta-points li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.85rem;
    font-weight: 600;
}

.admission-cta-points svg {
    flex: none;
    width: 15px;
    height: 15px;
    color: var(--color-accent);
}

.admission-cta-actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    /* stretch, not flex-start — "Apply now" and "Send an enquiry" are
       different lengths, and left-aligned pills left a ragged right edge. */
    align-items: stretch;
    width: 270px;
    gap: 14px;
}

/* Label hard left, arrow chip hard right, now that the pills share a width. */
.admission-cta-actions .theme-btn {
    justify-content: space-between;
}

.admission-cta-call {
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.875rem;
    text-align: center;
}

.admission-cta-call strong {
    color: var(--color-white);
    border-bottom: 1px dashed rgba(255, 255, 255, 0.45);
}

.admission-cta-call:hover,
.admission-cta-call:focus-visible {
    color: var(--color-white);
}

@media (max-width: 991.98px) {
    .admission-cta-banner {
        grid-template-columns: 1fr;
    }
    /* Stacked, the actions sit under the copy and run across it instead. */
    .admission-cta-actions {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        width: auto;
    }
    .admission-cta-call {
        text-align: left;
    }
}

@media (max-width: 575.98px) {
    .admission-cta-actions .theme-btn {
        width: 100%;
        justify-content: space-between;
    }
}

/* ================================================================
   Gallery — mosaic, the lead tile spans 2×2
   ================================================================ */
/* Explicitly white, not merely unset — the admission CTA above it is tinted,
   and leaving this to chance is how the run of three whites happened. */
.page-section.gallery-section {
    background: var(--color-white);
}

.gallery-lead {
    max-width: 560px;
    margin: 14px auto 0;
    color: var(--color-muted);
    font-size: 1.02rem;
    line-height: 1.8;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: clamp(130px, 15vw, 190px);
    gap: 16px;
}

.gallery-item {
    position: relative;
    display: block;
    background: var(--color-bg-soft);
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.35s ease, opacity 0.6s ease;
}

/* The lead tile. Everything after it falls into single cells on its own. */
.gallery-item:first-child {
    grid-column: span 2;
    grid-row: span 2;
}

.gallery-item img {
    width: 100%;
    /* Beats the global `img { height: auto }` so tiles crop instead of stretch. */
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* Scrim only on the clickable version — it exists to carry the zoom chip. */
a.gallery-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent 45%, rgba(9, 17, 36, 0.5));
    opacity: 0;
    transition: opacity 0.35s ease;
}

a.gallery-item:hover,
a.gallery-item:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 22px 44px -22px rgba(17, 26, 63, 0.55);
}

a.gallery-item:hover img,
a.gallery-item:focus-visible img {
    transform: scale(1.06);
}

a.gallery-item:hover::after,
a.gallery-item:focus-visible::after {
    opacity: 1;
}

.gallery-zoom {
    position: absolute;
    z-index: 1;
    right: 14px;
    bottom: 14px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    color: var(--color-navy);
    background: var(--color-white);
    border-radius: 50%;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.gallery-zoom svg {
    width: 16px;
    height: 16px;
}

a.gallery-item:hover .gallery-zoom,
a.gallery-item:focus-visible .gallery-zoom {
    opacity: 1;
    transform: none;
}

/* Three stock shots: the lead tile plus two stacked beside it. */
.gallery-grid.is-fallback {
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 767.98px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .gallery-item:first-child {
        grid-column: span 2;
    }
}

@media (max-width: 420px) {
    .gallery-grid,
    .gallery-grid.is-fallback {
        grid-template-columns: 1fr;
    }
    .gallery-item:first-child {
        grid-column: span 1;
        grid-row: span 2;
    }
}