/* ==========================================================================
   OLIS "Bright Campus" Theme Layer
   --------------------------------------------------------------------------
   A purely VISUAL layer for Our Lady's International School.
   It only changes colour, background, depth and decoration - never content,
   markup, copy, images, links or behaviour.

   Identity  : School uniform Yellow + Blue stay the lead colours.
   Support   : Aqua, violet, coral, mint and buttercream keep the page
               colourful and elegant instead of relentlessly yellow/blue.
   Loaded from header.php, so every page picks it up automatically.
   ========================================================================== */

:root {
    /* ---- School identity -------------------------------------------- */
    --olis-blue: #0b62d6;
    --olis-blue-deep: #0a4aa8;
    --olis-blue-mid: #3a90e8;
    --olis-blue-light: #7cc0f5;
    --olis-blue-tint: #e6f2ff;

    --olis-yellow: #ffd21e;
    --olis-yellow-warm: #ffb300;
    --olis-yellow-deep: #cf8b00;
    --olis-yellow-tint: #fff4cc;

    /* ---- Lead playground accents ------------------------------------
       Orange and purple join yellow at the front of the palette. Both are
       kept in two strengths: a bright face for fills and decoration, and a
       deep face reserved for anything that has to carry white text. */
    --olis-orange: #ff8a1f;
    --olis-orange-warm: #ffa53d;
    --olis-orange-deep: #b3480a;   /* white text 5.5:1 - measured */
    --olis-orange-tint: #fff0dd;

    --olis-purple: #8b46e8;
    --olis-purple-bright: #a566f5;
    --olis-purple-deep: #6d28d9;   /* white text 7.1:1 - measured */
    --olis-purple-tint: #f2e9ff;

    /* ---- Supporting accents ------------------------------------------ */
    --olis-aqua: #0ec4b4;
    --olis-aqua-tint: #d9fbf6;
    --olis-violet: #8b5cf6;
    --olis-violet-tint: #efe6ff;
    --olis-coral: #ff5f4d;
    --olis-coral-tint: #ffe8e3;
    --olis-mint: #46c85a;
    --olis-mint-tint: #ddf8e1;
    --olis-pink: #f857a6;
    --olis-pink-tint: #ffe7f3;

    /* ---- Neutrals ---------------------------------------------------- */
    --olis-ink: #16233a;
    --olis-paper: #fffdfa;

    /* ---- The rainbow ------------------------------------------------
       One ribbon definition, reused for every rainbow accent on the site so
       the sweep reads identically in the header, the headings, the cards and
       the footer. `-soft` is the same sweep at low alpha for large washes. */
    --olis-rainbow: linear-gradient(90deg,
            #ff5a4e 0%,
            var(--olis-orange) 17%,
            var(--olis-yellow) 34%,
            var(--olis-mint) 50%,
            var(--olis-aqua) 66%,
            var(--olis-blue) 83%,
            var(--olis-purple) 100%);

    --olis-rainbow-soft: linear-gradient(90deg,
            rgba(255, 90, 78, .16) 0%,
            rgba(255, 138, 31, .16) 17%,
            rgba(255, 210, 30, .18) 34%,
            rgba(70, 200, 90, .16) 50%,
            rgba(14, 196, 180, .16) 66%,
            rgba(11, 98, 214, .16) 83%,
            rgba(139, 70, 232, .16) 100%);

    /* ---- Elevation ---------------------------------------------------
       Shadows are tinted violet rather than neutral grey: on the warm bands
       a grey shadow reads as dirt, a violet one reads as depth. */
    --olis-shadow-sm: 0 2px 6px rgba(22, 35, 58, .05), 0 8px 20px -12px rgba(109, 40, 217, .24);
    --olis-shadow-md: 0 4px 10px rgba(22, 35, 58, .05), 0 18px 40px -18px rgba(109, 40, 217, .32);
    --olis-shadow-lg: 0 8px 18px rgba(22, 35, 58, .06), 0 34px 64px -26px rgba(109, 40, 217, .40);
    --olis-shadow-glow: 0 18px 42px -14px rgba(139, 70, 232, .48);

    --olis-hairline: 1px solid rgba(11, 98, 214, .10);
}

/* ==========================================================================
   0a-2. BAND WASHES
   Every coloured band on the site resolves to one of these tokens. They are
   declared once here and referenced from the per-page choreography (section
   10) and from the decorative motif tiers (section 18), so a band can never
   drift out of step with its own illustration.

   The rotation deliberately walks orange -> purple -> yellow -> green ->
   aqua -> blue -> pink and back, so scrolling any page moves through the
   whole rainbow without two neighbouring bands sharing a hue. Every wash
   stays in the top slice of its hue's lightness range: the colour belongs to
   the band, the contrast still belongs to the text sitting on it.
   ========================================================================== */

:root {
    /* ---- Home ---------------------------------------------------------- */
    --band-playgroup:   linear-gradient(150deg, #fff0d2 0%, #ffffff 42%, #f1e6ff 100%);
    --band-hero:        linear-gradient(150deg, #ffe6cc 0%, #ffffff 46%, #fff2bf 100%);
    --band-trust:       linear-gradient(90deg, #fff4e6 0%, #ffffff 26%, #fff6d1 52%, #ffffff 76%, #f2e9ff 100%);
    --band-story:       linear-gradient(168deg, #e6fffb 0%, var(--olis-aqua-tint) 52%, #dceaff 100%);
    --band-violet:      linear-gradient(168deg, #f8f2ff 0%, var(--olis-purple-tint) 50%, #e6efff 100%);
    --band-why:         linear-gradient(168deg, #fffaea 0%, var(--olis-yellow-tint) 48%, #ffe6cc 100%);
    --band-sky:         linear-gradient(168deg, #ffffff 0%, #e9f3ff 48%, #dbebff 100%);
    --band-mint:        linear-gradient(168deg, #f2fff4 0%, var(--olis-mint-tint) 48%, #dcf5ff 100%);
    --band-studentlife: linear-gradient(168deg, #e6f0ff 0%, #dfe9ff 46%, #ede2ff 100%);
    --band-coral:       linear-gradient(168deg, #fff3ec 0%, var(--olis-orange-tint) 46%, #ffe9d6 100%);
    --band-pink:        linear-gradient(168deg, #fff2f9 0%, var(--olis-pink-tint) 46%, #f0e6ff 100%);
    --band-gold:        linear-gradient(168deg, #ffffff 0%, #fff2c9 46%, #e8f1ff 100%);
    --band-faq:         linear-gradient(168deg, #ffffff 0%, #e8f2ff 50%, #e6e6ff 100%);

    /* ---- Inner pages ----------------------------------------------------- */
    --band-butter:      linear-gradient(168deg, #fffaea 0%, var(--olis-yellow-tint) 48%, #ece4ff 100%);
    --band-aqua:        linear-gradient(168deg, #e6fffb 0%, var(--olis-aqua-tint) 50%, #dceaff 100%);
    --band-aims:        linear-gradient(168deg, #fffaea 0%, var(--olis-yellow-tint) 48%, #ffeada 100%);
    --band-gallery:     linear-gradient(168deg, #ffffff 0%, #eaf3ff 46%, #ddfaf4 100%);
    --band-comingsoon:  linear-gradient(168deg, #ffffff 0%, #eaf3ff 46%, #fff2c9 100%);
    --band-principal:   linear-gradient(168deg, #fffaf0 0%, #ffeed4 46%, #ece4ff 100%);
    --band-contactaqua: linear-gradient(168deg, #e6fffb 0%, var(--olis-aqua-tint) 50%, #e4ecff 100%);

    /* ---- The closing call to action --------------------------------------
       Deep indigo through purple, lit by an orange and a pink glow. The
       gradient stops stay dark because this band carries white body copy;
       the warmth arrives as low-alpha orbs on top rather than as a light
       gradient stop, which is what keeps the text at 8:1 or better. */
    --band-finale:
        radial-gradient(30rem 22rem at 12% 14%, rgba(255, 165, 61, .34), transparent 62%),
        radial-gradient(30rem 22rem at 88% 84%, rgba(248, 87, 166, .32), transparent 62%),
        linear-gradient(125deg, #10214a 0%, #35208f 40%, #5b21b6 72%, #7b2a9e 100%);
}

/* ==========================================================================
   0b. TYPEFACES
   A warmer pairing for a primary school: Fredoka - rounded, cheerful, still
   tidy - carries the headings, the menu and the buttons; Nunito, with its
   soft letter terminals, carries body copy and stays very readable at small
   sizes. Be Vietnam Pro remains in every stack as the fallback, so nothing
   reflows if a webfont fails to load.

   Applied by element, never with a universal selector: the Material Symbols
   icon font declares its own family on the element and must not be inherited
   over.
   ========================================================================== */

:root {
    --olis-font-display: "Fredoka", "Be Vietnam Pro", "Segoe UI", system-ui, sans-serif;
    --olis-font-body: "Nunito", "Be Vietnam Pro", "Segoe UI", system-ui, sans-serif;
}

body.font-display {
    font-family: var(--olis-font-body);
}

body.font-display h1,
body.font-display h2,
body.font-display h3,
body.font-display h4,
body.font-display h5,
body.font-display .logo_title,
body.font-display > footer h3 {
    font-family: var(--olis-font-display);
    letter-spacing: -0.005em;
}

/* Big display headings read better slightly tightened. */
body.font-display h1,
body.font-display h2 {
    letter-spacing: -0.015em;
}

/* Menu, buttons and the small eyebrow pills share the display face so the
   chrome feels of a piece with the headings. */
header.sticky nav > a,
header.sticky nav > div > button,
header.sticky .group\/apply > button,
#mobileMenu nav > a,
#mobileMenu nav > div > button,
#mobileMenu #mobileApplyBtn,
body.font-display a.bg-primary,
body.font-display button.bg-primary,
body.font-display a.bg-secondary-yellow,
body.font-display button.bg-secondary-yellow,
body.font-display .filter-btn,
body.font-display .rounded-full.bg-primary\/10.border {
    font-family: var(--olis-font-display);
}

/* Fredoka sets narrower than the old face, which freed up room in the bar,
   so the menu takes a small size bump for presence and legibility. Measured
   at 1280px: 67px of clearance either side of the nav, nothing wrapping. */
header.sticky nav > a,
header.sticky nav > div > button {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.005em;
}

/* Menu items in capitals. Both the desktop bar and the mobile panel sit
   inside header.sticky, so this covers each; #mobileApplyBtn is the Apply Now
   call to action rather than a menu item, so it keeps its own casing. */
header.sticky nav > a,
header.sticky nav > div > button:not(#mobileApplyBtn) {
    text-transform: uppercase;
}

/* ==========================================================================
   1. PAGE GROUND
   Replaces the flat near-white body with a soft, luminous wash so no part
   of the site ever reads as plain white paper.
   ========================================================================== */

body.font-display {
    background-color: var(--olis-paper);
    background-image:
        radial-gradient(rgba(139, 70, 232, .045) 1px, transparent 1px),
        radial-gradient(46rem 30rem at 8% -4%, rgba(255, 210, 30, .22), transparent 60%),
        radial-gradient(52rem 34rem at 104% 6%, rgba(255, 138, 31, .16), transparent 62%),
        radial-gradient(40rem 30rem at -6% 52%, rgba(139, 70, 232, .14), transparent 60%),
        radial-gradient(44rem 32rem at 108% 88%, rgba(14, 196, 180, .13), transparent 62%);
    background-size: 26px 26px, auto, auto, auto, auto;
    background-attachment: fixed;
    background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    color: var(--olis-ink);
}


/* ==========================================================================
   2. ANNOUNCEMENT BAR + HEADER
   ========================================================================== */

#oliAnnouncementBar {
    background-image: linear-gradient(100deg,
            var(--olis-orange-deep) 0%,
            #c2237f 30%,
            var(--olis-purple-deep) 58%,
            #b4269b 82%,
            var(--olis-orange-deep) 100%) !important;
    box-shadow: 0 6px 18px -10px rgba(109, 40, 217, .85);
    letter-spacing: .012em;
}

/* Sunlit sheen travelling across the bar - premium, not distracting. */
#oliAnnouncementBar::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .16) 50%, transparent 62%);
    background-size: 260% 100%;
    animation: olis-sheen 7s linear infinite;
}

@keyframes olis-sheen {
    0% { background-position: 160% 0; }
    100% { background-position: -60% 0; }
}

header.sticky {
    background-color: #ffffff;
    background-image: none;
    box-shadow: 0 6px 26px -18px rgba(0, 87, 183, .55);
    border-bottom-color: rgba(0, 87, 183, .10);
}

/* Uniform-stripe accent under the navigation bar. */
header.sticky::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 3px;
    background: var(--olis-rainbow);
    opacity: 1;
}

/* In the markup the collapsed menu panel sits before the logo row, so opening
   it pushed the crest down the page. Flip the visual order here rather than
   moving the markup. The header only ever has these two children; the accent
   stripe is absolutely positioned, so it is not a flex item. */
header.sticky {
    display: flex;
    flex-direction: column;
}

/* The logo row centres itself with mx-auto, and an auto cross-axis margin
   cancels a flex item's default stretch -- without this the bar collapses to
   the width of its contents. */
header.sticky > * {
    width: 100%;
}

header.sticky > #mobileMenu {
    order: 2;
    border-top: 1px solid rgba(0, 87, 183, .10);
}

/* Nav labels must never break across two lines. "Our School" and "Campus Life"
   were wrapping whenever the bar ran short of room, which is what made the
   header look broken. The class strings are assembled in PHP with active-page
   ternaries, so nowrap is applied here rather than threaded through each one. */
header.sticky > div > div > nav > a,
header.sticky > div > div > nav > div > button,
header.sticky .group\/apply > button {
    white-space: nowrap;
}

/* ==========================================================================
   2b. NAVIGATION COLOURS
   Each menu item carries its own accent, the way the reference school sites
   do, with an underline that fills in on hover. The colour is set as a custom
   property on the nav child so it also reaches the button inside the
   "Our School" dropdown wrapper. Only colour and the underline are added -
   the links, labels, dropdown behaviour and active-page logic are untouched.
   ========================================================================== */

/* Positions remapped after Academics / Campus Life / Admissions were removed
   from the bar, so each remaining item keeps the exact colour it had. */
header.sticky nav > :nth-child(1) { --nav-accent: #c25607; }   /* About    4.5:1 */
header.sticky nav > :nth-child(2) { --nav-accent: #7c3aed; }   /* Our Sch. 5.7:1 */
header.sticky nav > :nth-child(3) { --nav-accent: #c2237f; }   /* Gallery  5.5:1 */
header.sticky nav > :nth-child(4) { --nav-accent: #0c7d75; }   /* Contact  5.0:1 */

header.sticky nav > a,
header.sticky nav > div > button {
    color: var(--nav-accent, var(--olis-blue-deep)) !important;
    position: relative;
    padding-bottom: 6px;
    transition: color .2s ease;
}

/* The underline sits in the padding below the label, so nothing reflows. */
header.sticky nav > a::after,
header.sticky nav > div > button::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    border-radius: 999px;
    background: var(--nav-accent, var(--olis-blue));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .25s ease;
}

header.sticky nav > a:hover::after,
header.sticky nav > div:hover > button::after,
header.sticky nav > a:focus-visible::after {
    transform: scaleX(1);
}

/* The active page keeps its underline permanently. */
header.sticky nav > a.text-primary::after {
    transform: scaleX(1);
}

/* Dropdown entries pick up the parent item's accent on hover. */
header.sticky nav > div .absolute a:hover {
    color: var(--nav-accent, var(--olis-blue)) !important;
    background-color: color-mix(in srgb, var(--nav-accent, #0057b7) 8%, transparent) !important;
}

/* Mobile menu gets the same colour run. */
#mobileMenu > nav > :nth-child(1) { --nav-accent: #c25607; }   /* About    4.5:1 */
#mobileMenu > nav > :nth-child(2) { --nav-accent: #7c3aed; }   /* Our Sch. 5.7:1 */
#mobileMenu > nav > :nth-child(3) { --nav-accent: #c2237f; }   /* Gallery  5.5:1 */
#mobileMenu > nav > :nth-child(4) { --nav-accent: #0c7d75; }   /* Contact  5.0:1 */

#mobileMenu > nav > a,
#mobileMenu > nav > div > button {
    color: var(--nav-accent, var(--olis-blue-deep)) !important;
    border-left: 4px solid var(--nav-accent, var(--olis-blue));
    padding-left: 12px;
    border-radius: 3px;
}

/* ==========================================================================
   3. SECTION GROUNDS
   Every band gets its own soft, colourful wash. White is kept for the cards
   that sit on top, which is what gives the page its depth.
   ========================================================================== */

body.font-display > section {
    position: relative;
}

/* Base wash - applied to any section still relying on flat white. */
body.font-display > section.bg-white,
body.font-display > section.bg-background-light {
    background-color: transparent;
    background-image: linear-gradient(170deg, #ffffff 0%, var(--olis-blue-tint) 100%);
}


/* ==========================================================================
   4. DECORATIVE SHAPES
   Soft colour orbs drift behind the quieter bands. `isolation: isolate` gives
   each band its own stacking context so the orbs can sit at z-index -1: above
   the wash of that band, always below its text, never intercepting a click.
   ========================================================================== */

body[data-page="index"] > section:nth-of-type(3),
body[data-page="index"] > section:nth-of-type(7),
body[data-page="index"] > section:nth-of-type(12),
#our-story-section,
#why-olis-section,
#admissions-section,
#faq-section,
body[data-page="about"] > section:nth-of-type(2),
body[data-page="about"] > section:nth-of-type(4),
body[data-page="aims"] > section:nth-of-type(2),
body[data-page="goals"] > section:nth-of-type(2),
body[data-page="facilities"] > section:nth-of-type(2),
body[data-page="gallery"] > section:nth-of-type(2),
body[data-page="principal"] > section:nth-of-type(2),
body[data-page="contact"] > section:nth-of-type(2),
body[data-page="contact"] > section:nth-of-type(3) {
    isolation: isolate;
    overflow: hidden;
}

body[data-page="index"] > section:nth-of-type(7)::before,
body[data-page="index"] > section:nth-of-type(7)::after,
body[data-page="index"] > section:nth-of-type(12)::before,
body[data-page="index"] > section:nth-of-type(12)::after,
#our-story-section::before,
#our-story-section::after,
#why-olis-section::before,
#why-olis-section::after,
#admissions-section::before,
#admissions-section::after,
#faq-section::before,
#faq-section::after,
body[data-page="about"] > section:nth-of-type(2)::before,
body[data-page="about"] > section:nth-of-type(2)::after,
body[data-page="about"] > section:nth-of-type(4)::before,
body[data-page="about"] > section:nth-of-type(4)::after,
body[data-page="aims"] > section:nth-of-type(2)::before,
body[data-page="aims"] > section:nth-of-type(2)::after,
body[data-page="goals"] > section:nth-of-type(2)::before,
body[data-page="goals"] > section:nth-of-type(2)::after,
body[data-page="facilities"] > section:nth-of-type(2)::before,
body[data-page="facilities"] > section:nth-of-type(2)::after,
body[data-page="gallery"] > section:nth-of-type(2)::before,
body[data-page="gallery"] > section:nth-of-type(2)::after,
body[data-page="principal"] > section:nth-of-type(2)::before,
body[data-page="principal"] > section:nth-of-type(2)::after,
body[data-page="contact"] > section:nth-of-type(2)::before,
body[data-page="contact"] > section:nth-of-type(2)::after,
body[data-page="contact"] > section:nth-of-type(3)::before,
body[data-page="contact"] > section:nth-of-type(3)::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    border-radius: 50%;
}

body[data-page="index"] > section:nth-of-type(7)::before,
body[data-page="index"] > section:nth-of-type(12)::before,
#our-story-section::before,
#why-olis-section::before,
#admissions-section::before,
#faq-section::before,
body[data-page="about"] > section:nth-of-type(2)::before,
body[data-page="about"] > section:nth-of-type(4)::before,
body[data-page="aims"] > section:nth-of-type(2)::before,
body[data-page="goals"] > section:nth-of-type(2)::before,
body[data-page="facilities"] > section:nth-of-type(2)::before,
body[data-page="gallery"] > section:nth-of-type(2)::before,
body[data-page="principal"] > section:nth-of-type(2)::before,
body[data-page="contact"] > section:nth-of-type(2)::before,
body[data-page="contact"] > section:nth-of-type(3)::before {
    width: 26rem;
    height: 26rem;
    top: -9rem;
    left: -8rem;
}

body[data-page="index"] > section:nth-of-type(7)::after,
body[data-page="index"] > section:nth-of-type(12)::after,
#our-story-section::after,
#why-olis-section::after,
#admissions-section::after,
#faq-section::after,
body[data-page="about"] > section:nth-of-type(2)::after,
body[data-page="about"] > section:nth-of-type(4)::after,
body[data-page="aims"] > section:nth-of-type(2)::after,
body[data-page="goals"] > section:nth-of-type(2)::after,
body[data-page="facilities"] > section:nth-of-type(2)::after,
body[data-page="gallery"] > section:nth-of-type(2)::after,
body[data-page="principal"] > section:nth-of-type(2)::after,
body[data-page="contact"] > section:nth-of-type(2)::after,
body[data-page="contact"] > section:nth-of-type(3)::after {
    width: 30rem;
    height: 30rem;
    bottom: -12rem;
    right: -10rem;
}

/* Each band gets its own orb pairing, so scrolling the page walks through the
   whole palette instead of repeating a single glow. */
#our-story-section::before   { background: radial-gradient(circle at 34% 34%, rgba(18, 179, 166, .34), transparent 68%); }
#our-story-section::after    { background: radial-gradient(circle at 62% 60%, rgba(255, 183, 3, .30), transparent 68%); }

#why-olis-section::before    { background: radial-gradient(circle at 34% 34%, rgba(255, 215, 0, .28), transparent 68%); }
#why-olis-section::after     { background: radial-gradient(circle at 62% 60%, rgba(0, 87, 183, .24), transparent 68%); }

#admissions-section::before  { background: radial-gradient(circle at 34% 34%, rgba(95, 195, 106, .22), transparent 68%); }
#admissions-section::after   { background: radial-gradient(circle at 62% 60%, rgba(0, 87, 183, .24), transparent 68%); }

#faq-section::before         { background: radial-gradient(circle at 34% 34%, rgba(0, 87, 183, .24), transparent 68%); }
#faq-section::after          { background: radial-gradient(circle at 62% 60%, rgba(124, 92, 224, .26), transparent 68%); }

body[data-page="index"] > section:nth-of-type(7)::before  { background: radial-gradient(circle at 34% 34%, rgba(0, 87, 183, .22), transparent 68%); }
body[data-page="index"] > section:nth-of-type(7)::after   { background: radial-gradient(circle at 62% 60%, rgba(18, 179, 166, .26), transparent 68%); }

body[data-page="index"] > section:nth-of-type(12)::before { background: radial-gradient(circle at 34% 34%, rgba(255, 215, 0, .28), transparent 68%); }
body[data-page="index"] > section:nth-of-type(12)::after  { background: radial-gradient(circle at 62% 60%, rgba(240, 107, 168, .24), transparent 68%); }

body[data-page="about"] > section:nth-of-type(2)::before  { background: radial-gradient(circle at 34% 34%, rgba(255, 215, 0, .38), transparent 68%); }
body[data-page="about"] > section:nth-of-type(2)::after   { background: radial-gradient(circle at 62% 60%, rgba(0, 87, 183, .24), transparent 68%); }
body[data-page="about"] > section:nth-of-type(4)::before  { background: radial-gradient(circle at 34% 34%, rgba(124, 92, 224, .26), transparent 68%); }
body[data-page="about"] > section:nth-of-type(4)::after   { background: radial-gradient(circle at 62% 60%, rgba(111, 180, 238, .32), transparent 68%); }

body[data-page="aims"] > section:nth-of-type(2)::before       { background: radial-gradient(circle at 34% 34%, rgba(255, 215, 0, .38), transparent 68%); }
body[data-page="aims"] > section:nth-of-type(2)::after        { background: radial-gradient(circle at 62% 60%, rgba(0, 87, 183, .24), transparent 68%); }
body[data-page="goals"] > section:nth-of-type(2)::before      { background: radial-gradient(circle at 34% 34%, rgba(95, 195, 106, .30), transparent 68%); }
body[data-page="goals"] > section:nth-of-type(2)::after       { background: radial-gradient(circle at 62% 60%, rgba(0, 87, 183, .24), transparent 68%); }
body[data-page="facilities"] > section:nth-of-type(2)::before { background: radial-gradient(circle at 34% 34%, rgba(124, 92, 224, .26), transparent 68%); }
body[data-page="facilities"] > section:nth-of-type(2)::after  { background: radial-gradient(circle at 62% 60%, rgba(255, 183, 3, .30), transparent 68%); }
body[data-page="gallery"] > section:nth-of-type(2)::before    { background: radial-gradient(circle at 34% 34%, rgba(0, 87, 183, .22), transparent 68%); }
body[data-page="gallery"] > section:nth-of-type(2)::after     { background: radial-gradient(circle at 62% 60%, rgba(18, 179, 166, .26), transparent 68%); }
body[data-page="principal"] > section:nth-of-type(2)::before  { background: radial-gradient(circle at 34% 34%, rgba(255, 215, 0, .38), transparent 68%); }
body[data-page="principal"] > section:nth-of-type(2)::after   { background: radial-gradient(circle at 62% 60%, rgba(124, 92, 224, .24), transparent 68%); }
body[data-page="contact"] > section:nth-of-type(2)::before    { background: radial-gradient(circle at 34% 34%, rgba(255, 107, 91, .26), transparent 68%); }
body[data-page="contact"] > section:nth-of-type(2)::after     { background: radial-gradient(circle at 62% 60%, rgba(255, 215, 0, .32), transparent 68%); }
body[data-page="contact"] > section:nth-of-type(3)::before    { background: radial-gradient(circle at 34% 34%, rgba(18, 179, 166, .30), transparent 68%); }
body[data-page="contact"] > section:nth-of-type(3)::after     { background: radial-gradient(circle at 62% 60%, rgba(0, 87, 183, .24), transparent 68%); }

/* ==========================================================================
   5. CARDS AND PANELS
   White cards stay white - they simply gain a warmer shadow, a hairline
   edge and a livelier lift so they read as premium on the tinted grounds.
   ========================================================================== */

body.font-display .rounded-2xl.shadow-lg,
body.font-display .rounded-2xl.shadow-xl,
body.font-display .rounded-xl.shadow-lg,
body.font-display .rounded-lg.shadow-lg,
body.font-display .rounded-3xl.shadow-lg,
body.font-display .rounded-3xl.shadow-2xl {
    box-shadow: var(--olis-shadow-md);
}

body.font-display .rounded-2xl.shadow-lg:hover,
body.font-display .rounded-2xl.shadow-xl:hover,
body.font-display .rounded-xl.shadow-lg:hover,
body.font-display .rounded-3xl.shadow-lg:hover {
    box-shadow: var(--olis-shadow-lg);
}

/* Give every white card a faint tinted edge instead of a hard cut-out. */
body.font-display > section .bg-white.rounded-2xl,
body.font-display > section .bg-white.rounded-xl,
body.font-display > section .bg-white.rounded-3xl {
    border-color: rgba(0, 87, 183, .09);
    background-image: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%);
}

/* The accent strip that already tops several cards becomes a gradient ribbon.
   Painted into the border box as a background layer rather than with
   border-image, so it follows the card's rounded corners. */
body.font-display > section .border-t-4[class*="border-secondary"],
body.font-display > section .border-t-4[class*="border-primary"],
body.font-display > section .border-t-4[class*="border-accent"] {
    border-top-color: transparent !important;
    background-repeat: no-repeat, no-repeat;
    background-size: 100% 4px, 100% 100%;
    background-position: top left, top left;
    background-origin: border-box, padding-box;
}

body.font-display > section .border-t-4.border-secondary-yellow { background-image: linear-gradient(90deg, var(--olis-yellow), var(--olis-yellow-warm) 55%, var(--olis-coral)), linear-gradient(180deg, #ffffff, #fffdf6); }
body.font-display > section .border-t-4.border-primary          { background-image: linear-gradient(90deg, var(--olis-purple), var(--olis-blue) 55%, var(--olis-aqua)), linear-gradient(180deg, #ffffff, #fafdff); }
body.font-display > section .border-t-4.border-secondary-purple { background-image: linear-gradient(90deg, var(--olis-violet), #a07df0 55%, var(--olis-pink)), linear-gradient(180deg, #ffffff, #fdfbff); }
body.font-display > section .border-t-4.border-secondary-teal   { background-image: linear-gradient(90deg, var(--olis-aqua), #4fd6c2 55%, var(--olis-mint)), linear-gradient(180deg, #ffffff, #f9fffe); }
body.font-display > section .border-t-4.border-accent-orange    { background-image: linear-gradient(90deg, var(--olis-yellow), var(--olis-orange) 55%, var(--olis-coral)), linear-gradient(180deg, #ffffff, #fffbf8); }

/* Round icon chips gain a soft gradient fill and matching halo. */
body.font-display .rounded-full.bg-primary\/10   { background-image: linear-gradient(140deg, rgba(139, 70, 232, .20), rgba(11, 98, 214, .18)); box-shadow: inset 0 0 0 1px rgba(139, 70, 232, .20); }
body.font-display .rounded-full.bg-secondary-yellow\/20 { background-image: linear-gradient(140deg, rgba(255, 210, 30, .42), rgba(255, 138, 31, .32)); box-shadow: inset 0 0 0 1px rgba(207, 139, 0, .26); }
body.font-display .rounded-full.bg-secondary-teal\/15   { background-image: linear-gradient(140deg, rgba(14, 196, 180, .28), rgba(70, 200, 90, .26)); box-shadow: inset 0 0 0 1px rgba(14, 196, 180, .26); }
body.font-display .rounded-full.bg-accent-orange\/15    { background-image: linear-gradient(140deg, rgba(255, 138, 31, .30), rgba(255, 95, 77, .26)); box-shadow: inset 0 0 0 1px rgba(226, 98, 10, .26); }
body.font-display .rounded-full.bg-blue-100      { background-image: linear-gradient(140deg, #d7e8ff, #eaf4ff); box-shadow: inset 0 0 0 1px rgba(11, 98, 214, .16); }
body.font-display .rounded-full.bg-yellow-100    { background-image: linear-gradient(140deg, #ffeaa8, #fff6d4); box-shadow: inset 0 0 0 1px rgba(207, 139, 0, .22); }
body.font-display .rounded-full.bg-green-100     { background-image: linear-gradient(140deg, #cdf5d3, #e8fbeb); box-shadow: inset 0 0 0 1px rgba(70, 200, 90, .26); }
body.font-display .rounded-full.bg-pink-100      { background-image: linear-gradient(140deg, #ffd9ec, #ffecf5); box-shadow: inset 0 0 0 1px rgba(248, 87, 166, .26); }

/* Half-opacity blue panels pick up whatever band they sit on and go muddy on
   the warm grounds, so they get an opaque fill of their own. */
body.font-display > section .rounded-xl.bg-blue-50\/50,
body.font-display > section .rounded-2xl.bg-blue-50\/50,
body.font-display > section .rounded-xl.bg-blue-50,
body.font-display > section .rounded-2xl.bg-blue-50 {
    background-color: transparent;
    background-image: linear-gradient(160deg, #ffffff 0%, #f1f7ff 100%);
    border-color: rgba(0, 87, 183, .14);
    box-shadow: var(--olis-shadow-sm);
}

body.font-display > section .rounded-xl.bg-blue-50\/50:hover,
body.font-display > section .rounded-2xl.bg-blue-50\/50:hover,
body.font-display > section .rounded-xl.bg-blue-50:hover,
body.font-display > section .rounded-2xl.bg-blue-50:hover {
    background-image: linear-gradient(160deg, #ffffff 0%, #e2eefd 100%);
    border-color: rgba(0, 87, 183, .26);
    box-shadow: var(--olis-shadow-md);
}

/* Grey utility panels are used as cards on the inner pages. Flat grey reads
   as dirty on a coloured band, so they become crisp white cards. */
body.font-display > section .rounded-xl.bg-gray-50,
body.font-display > section .rounded-2xl.bg-gray-50 {
    background-color: transparent;
    background-image: linear-gradient(160deg, #ffffff 0%, #f5f9ff 100%);
    border-color: rgba(0, 87, 183, .12);
    box-shadow: var(--olis-shadow-sm);
}

body.font-display > section .rounded-xl.bg-gray-50:hover,
body.font-display > section .rounded-2xl.bg-gray-50:hover {
    background-image: linear-gradient(160deg, #ffffff 0%, #ffffff 100%);
    box-shadow: var(--olis-shadow-md);
}

/* 5%-opacity tints were designed against white. Over a coloured band they go
   muddy, so the trio is repainted as an opaque white / blue / cream set. */
body.font-display > section .rounded-xl.bg-primary\/5,
body.font-display > section .rounded-2xl.bg-primary\/5 {
    background-color: transparent;
    background-image: linear-gradient(160deg, #f3f8ff 0%, #e6f0fe 100%);
    box-shadow: var(--olis-shadow-sm);
}

body.font-display > section .rounded-xl.bg-secondary-yellow\/5,
body.font-display > section .rounded-2xl.bg-secondary-yellow\/5 {
    background-color: transparent;
    background-image: linear-gradient(160deg, #fffdf2 0%, #fff5d8 100%);
    box-shadow: var(--olis-shadow-sm);
}

/* The bordered feature panel keeps its accent, drawn as a gradient spine. */
body.font-display > section .border-l-8.border-primary {
    border-left-color: transparent !important;
    background-image:
        linear-gradient(180deg, var(--olis-orange), var(--olis-yellow) 34%, var(--olis-aqua) 68%, var(--olis-purple)),
        linear-gradient(160deg, #ffffff 0%, #f5f9ff 100%);
    background-repeat: no-repeat, no-repeat;
    background-size: 8px 100%, 100% 100%;
    background-position: top left, top left;
    background-origin: border-box, padding-box;
}

/* Eyebrow pills above section headings. */
body.font-display .rounded-full.bg-primary\/10.border {
    background-image: var(--olis-rainbow-soft);
    border-color: rgba(139, 70, 232, .26);
    box-shadow: 0 6px 16px -10px rgba(139, 70, 232, .6);
}

/* ==========================================================================
   6. BUTTONS
   Solid fills become two-stop gradients with a coloured glow, which is what
   gives the reference sites their "premium" feel.
   ========================================================================== */

body.font-display a.bg-primary,
body.font-display button.bg-primary {
    background-image: linear-gradient(135deg, var(--olis-blue) 0%, #4f46e5 54%, var(--olis-purple-deep) 100%);
    box-shadow: 0 10px 24px -12px rgba(109, 40, 217, .9), inset 0 1px 0 rgba(255, 255, 255, .26);
}

body.font-display a.bg-primary:hover,
body.font-display button.bg-primary:hover {
    background-image: linear-gradient(135deg, #4f46e5 0%, var(--olis-purple-deep) 52%, #5b21b6 100%);
    box-shadow: 0 16px 34px -12px rgba(109, 40, 217, 1), inset 0 1px 0 rgba(255, 255, 255, .3);
}

body.font-display a.bg-secondary-yellow,
body.font-display button.bg-secondary-yellow {
    background-image: linear-gradient(135deg, #ffe45c 0%, var(--olis-yellow) 46%, #ffc21a 100%);
    box-shadow: 0 10px 24px -12px rgba(217, 154, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .55);
}

body.font-display a.bg-secondary-yellow:hover,
body.font-display button.bg-secondary-yellow:hover {
    background-image: linear-gradient(135deg, var(--olis-yellow) 0%, #ffc21a 55%, #ffb300 100%);
    box-shadow: 0 16px 34px -12px rgba(217, 154, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .6);
}

body.font-display a.bg-green-500,
body.font-display button.bg-green-500 {
    background-image: linear-gradient(135deg, #2fbf71 0%, #16a34a 55%, #0f8a3d 100%);
    box-shadow: 0 12px 28px -12px rgba(22, 163, 74, .9), inset 0 1px 0 rgba(255, 255, 255, .25);
}

body.font-display a.bg-red-600,
body.font-display button.bg-red-600,
body.font-display div.bg-red-600 {
    background-image: linear-gradient(135deg, #e5484d 0%, #d32f2f 55%, #b02020 100%);
}

/* Ghost / outline buttons sitting on photography or gradients. */
body.font-display a.bg-white\/10 {
    backdrop-filter: blur(6px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
}

/* ==========================================================================
   7. SECTION HEADINGS
   A short gradient rule under each band heading. Headings that already carry
   their own animated underline element are left untouched.
   ========================================================================== */

@supports selector(:has(*)) {
    body.font-display > section h2.font-black:not(.inline-block):not(:has(span))::after {
        content: "";
        display: block;
        width: 84px;
        height: 5px;
        margin-top: 18px;
        border-radius: 999px;
        background: var(--olis-rainbow);
    }

    body.font-display > section .text-center h2.font-black:not(.inline-block):not(:has(span))::after,
    body.font-display > section h2.font-black.text-center:not(.inline-block):not(:has(span))::after {
        margin-left: auto;
        margin-right: auto;
    }

    /* On dark / photographic grounds the rule switches to a warm scheme. */
    body.font-display > section.olis-invert h2.font-black:not(.inline-block):not(:has(span))::after,
    body.font-display > section .text-white h2.font-black:not(.inline-block):not(:has(span))::after {
        background: linear-gradient(90deg, var(--olis-yellow), #ffffff 55%, var(--olis-yellow));
    }
}

/* ==========================================================================
   9. FOOTER
   Previously white text on a white ground. It becomes the deep campus-navy
   band the reference sites use, which fixes the contrast and anchors the page.
   ========================================================================== */

body.font-display > footer {
    background-color: #06203f !important;
    background-image:
        radial-gradient(38rem 24rem at 8% 0%, rgba(0, 87, 183, .55), transparent 62%),
        radial-gradient(34rem 24rem at 92% 8%, rgba(124, 92, 224, .32), transparent 62%),
        radial-gradient(30rem 20rem at 60% 100%, rgba(18, 179, 166, .24), transparent 64%),
        linear-gradient(180deg, #0b2c56 0%, #06203f 60%, #041831 100%);
    border-top: 4px solid transparent;
    border-image: var(--olis-rainbow) 1;
    color: #e8eefb;
}

body.font-display > footer .text-gray-400 { color: #b9c8e0 !important; }
body.font-display > footer .text-gray-500 { color: #92a5c4 !important; }
body.font-display > footer .text-slate-600 { color: var(--olis-yellow) !important; }
body.font-display > footer .border-gray-800 { border-color: rgba(255, 255, 255, .14) !important; }
body.font-display > footer a:hover { color: var(--olis-yellow) !important; }

body.font-display > footer .bg-white\/10 {
    background-image: linear-gradient(140deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .06));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}

body.font-display > footer .bg-white\/10:hover {
    background-image: linear-gradient(140deg, var(--olis-yellow), var(--olis-yellow-warm));
    color: var(--olis-blue-deep) !important;
}

body.font-display > footer .text-primary { color: var(--olis-yellow) !important; }

/* Keep the crest legible against the dark ground. */
body.font-display > footer img {
    background: #ffffff;
    border-radius: 14px;
    padding: 8px;
    box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .8);
}

/* ==========================================================================
   10. PER-PAGE COLOUR CHOREOGRAPHY
   Each band is given its own wash so no two neighbours repeat a hue. Blue and
   yellow lead; aqua, violet, coral, mint and blush keep it from tipping into
   a two-colour site. Bands are addressed by their existing id where they have
   one, and by position otherwise - no markup is touched.
   ========================================================================== */

/* ---- Home page -------------------------------------------------------- */

/* 1. OLI Time Playgroup - sunny welcome */
#oli-playgroup-section {
    background-image: var(--band-playgroup) !important;
    background-color: transparent !important;
}

/* 2. Hero slider - keep the photography, warm the surround */
body[data-page="index"] > section:nth-of-type(2) {
    background-image: var(--band-hero) !important;
    background-color: transparent !important;
}

/* 3. Trust strip - a bright ribbon between hero and story */
body[data-page="index"] > section:nth-of-type(3) {
    background-image: var(--band-trust) !important;
    background-color: transparent !important;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
    border-image: var(--olis-rainbow) 1;
}

/* 4. Who we are / our story - fresh aqua */
#our-story-section {
    background-image: var(--band-story) !important;
    background-color: transparent !important;
}

/* 5. Academic journey - scholarly violet */
#academic-programs-section {
    background-image: var(--band-violet) !important;
    background-color: transparent !important;
}

/* 6. Why choose us - warm buttercream */
#why-olis-section {
    background-image: var(--band-why) !important;
    background-color: transparent !important;
}

/* 7. Welcome to our growing school - clear sky */
body[data-page="index"] > section:nth-of-type(7) {
    background-image: var(--band-sky) !important;
    background-color: transparent !important;
}

/* 8. How to apply - mint, so the steps feel like a fresh start */
#admissions-section {
    background-image: var(--band-mint) !important;
    background-color: transparent !important;
}

/* 9. Student life - school blue at its most confident */
#student-life-section {
    background-image: var(--band-studentlife) !important;
    background-color: transparent !important;
}

/* 10. Facilities - warm coral */
#facilities-section {
    background-image: var(--band-coral) !important;
    background-color: transparent !important;
}

/* 11. News and events - soft blush */
#news-section {
    background-image: var(--band-pink) !important;
    background-color: transparent !important;
}

/* 12. Parent voices - golden, the warmest band on the page */
body[data-page="index"] > section:nth-of-type(12) {
    background-image: var(--band-gold) !important;
    background-color: transparent !important;
}

/* 13. FAQ - calm sky */
#faq-section {
    background-image: var(--band-faq) !important;
    background-color: transparent !important;
}

/* 14. Closing call to action - the premium finale */
body[data-page="index"] > section:last-of-type {
    background-image: var(--band-finale) !important;
    background-color: transparent !important;
}

/* ---- About ------------------------------------------------------------ */
body[data-page="about"] > section:nth-of-type(2) { background-image: var(--band-butter) !important; background-color: transparent !important; }
body[data-page="about"] > section:nth-of-type(3) { background-image: var(--band-aqua) !important; background-color: transparent !important; }
body[data-page="about"] > section:nth-of-type(4) { background-image: var(--band-violet) !important; background-color: transparent !important; }
body[data-page="about"] > section:last-of-type {
    background-image: var(--band-finale) !important;
    background-color: transparent !important;
}

/* ---- Inner pages with a hero plus one or two content bands ------------ */
body[data-page="aims"] > section:nth-of-type(2)       { background-image: var(--band-aims) !important; background-color: transparent !important; }
body[data-page="goals"] > section:nth-of-type(2)      { background-image: var(--band-mint) !important; background-color: transparent !important; }
body[data-page="facilities"] > section:nth-of-type(2) { background-image: var(--band-violet) !important; background-color: transparent !important; }
body[data-page="gallery"] > section:nth-of-type(2)    { background-image: var(--band-gallery) !important; background-color: transparent !important; }
/* The gallery holding page wraps its content in <main> rather than <section>. */
body[data-page="coming-soon-gallery"] > main { background-image: var(--band-comingsoon) !important; background-color: transparent !important; }

body[data-page="principal"] > section:nth-of-type(2)  { background-image: var(--band-principal) !important; background-color: transparent !important; }
body[data-page="principal"] > section:nth-of-type(3)  { background-image: var(--band-aqua) !important; background-color: transparent !important; }

body[data-page="contact"] > section:nth-of-type(2)    { background-image: var(--band-coral) !important; background-color: transparent !important; }
body[data-page="contact"] > section:nth-of-type(3)    { background-image: var(--band-contactaqua) !important; background-color: transparent !important; }
#campus-visit {
    background-image: var(--band-finale) !important;
    background-color: transparent !important;
}

/* ==========================================================================
   11. ACCORDIONS
   The FAQ panels stop being flat grey boxes and pick up the school palette,
   with the open panel clearly the warmest thing on the band.
   ========================================================================== */

body.font-display details.group {
    background-color: transparent !important;
    background-image: linear-gradient(135deg, #ffffff 0%, #f3f8ff 100%);
    border: 1px solid rgba(0, 87, 183, .12);
    box-shadow: var(--olis-shadow-sm);
    transition: background-image .3s ease, box-shadow .3s ease, border-color .3s ease;
}

body.font-display details.group:hover {
    border-color: rgba(0, 87, 183, .24);
    box-shadow: var(--olis-shadow-md);
}

body.font-display details.group[open] {
    background-image: linear-gradient(135deg, #ffffff 0%, #fff8e1 58%, #eef5ff 100%);
    border-color: rgba(217, 154, 0, .34);
    box-shadow: var(--olis-shadow-md);
}

body.font-display details.group[open] > summary {
    color: var(--olis-blue-deep);
}

/* ==========================================================================
   12. FORM CONTROLS
   ========================================================================== */

body.font-display input[type="text"],
body.font-display input[type="email"],
body.font-display input[type="tel"],
body.font-display input[type="number"],
body.font-display input[type="date"],
body.font-display select,
body.font-display textarea {
    background-image: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    border-color: rgba(0, 87, 183, .20);
    box-shadow: inset 0 1px 2px rgba(22, 35, 58, .04);
}

body.font-display input[type="text"]:focus,
body.font-display input[type="email"]:focus,
body.font-display input[type="tel"]:focus,
body.font-display input[type="number"]:focus,
body.font-display input[type="date"]:focus,
body.font-display select:focus,
body.font-display textarea:focus {
    border-color: var(--olis-blue) !important;
    background-image: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
    box-shadow: 0 0 0 4px rgba(0, 87, 183, .14), 0 8px 20px -14px rgba(0, 87, 183, .7);
    outline: none;
}

body.font-display ::placeholder {
    color: #93a3bb;
}

/* ==========================================================================
   13. IMAGERY
   Photographs get a soft brand-tinted frame so they sit on the colour bands
   rather than being punched out of them.
   ========================================================================== */

body.font-display > section .rounded-3xl.overflow-hidden.shadow-2xl {
    box-shadow: var(--olis-shadow-lg);
}

body.font-display > section .rounded-3xl.border-4.border-white,
body.font-display > section .rounded-2xl.border-4.border-white {
    box-shadow: var(--olis-shadow-lg), 0 0 0 1px rgba(0, 87, 183, .10);
}

/* ==========================================================================
   14. SMALL DETAILS
   ========================================================================== */

body.font-display ::selection {
    background: rgba(255, 215, 0, .45);
    color: var(--olis-blue-deep);
}

html {
    scrollbar-color: rgba(0, 87, 183, .45) rgba(0, 87, 183, .08);
}

body.font-display ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

body.font-display ::-webkit-scrollbar-track {
    background: rgba(0, 87, 183, .07);
}

body.font-display ::-webkit-scrollbar-thumb {
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: content-box;
    background-color: rgba(0, 87, 183, .45);
}

body.font-display ::-webkit-scrollbar-thumb:hover {
    background-color: var(--olis-blue);
}

/* Keyboard focus stays visible everywhere on the new grounds. */
body.font-display a:focus-visible,
body.font-display button:focus-visible,
body.font-display summary:focus-visible {
    outline: 3px solid var(--olis-yellow-warm);
    outline-offset: 3px;
    border-radius: 6px;
}

/* ==========================================================================
   15. DARK MODE
   The site currently ships light-only (`<html class="light">`, no toggle), so
   this is a safety net: chrome, cards and panels have dark equivalents ready.
   The coloured band washes above are deliberately light-mode only.
   ========================================================================== */

.dark body.font-display {
    background-color: #0e1420;
    background-image:
        radial-gradient(rgba(111, 180, 238, .05) 1px, transparent 1px),
        radial-gradient(46rem 30rem at 8% -4%, rgba(255, 215, 0, .10), transparent 60%),
        radial-gradient(52rem 34rem at 104% 6%, rgba(0, 87, 183, .22), transparent 62%),
        radial-gradient(40rem 30rem at -6% 52%, rgba(18, 179, 166, .12), transparent 60%),
        radial-gradient(44rem 32rem at 108% 88%, rgba(124, 92, 224, .16), transparent 62%);
    color: #e8eefb;
}

.dark body.font-display > section .bg-white.rounded-2xl,
.dark body.font-display > section .bg-white.rounded-xl,
.dark body.font-display > section .bg-white.rounded-3xl {
    background-image: linear-gradient(180deg, #1a2334 0%, #151d2c 100%);
    border-color: rgba(111, 180, 238, .14);
}

.dark body.font-display details.group {
    background-image: linear-gradient(135deg, #1a2334 0%, #141c2b 100%);
    border-color: rgba(111, 180, 238, .16);
}

.dark body.font-display details.group[open] {
    background-image: linear-gradient(135deg, #1f2a3d 0%, #1a2334 100%);
    border-color: rgba(255, 183, 3, .34);
}

.dark body.font-display header.sticky {
    background-image: linear-gradient(180deg, #131b28 0%, #0f1622 100%);
}

/* ==========================================================================
   16. MOTION AND PRINT
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    #oliAnnouncementBar::after {
        animation: none;
    }
}

@media print {
    body.font-display,
    body.font-display > section,
    body.font-display > footer {
        background: #ffffff !important;
        color: #000000 !important;
    }

    body.font-display > section::before,
    body.font-display > section::after,
    #oliAnnouncementBar::after,
    header.sticky::after {
        display: none !important;
    }
}

/* ==========================================================================
   17. GALLERY FILTER PILLS
   The gallery ships its own <style> block further down the page, so these
   selectors carry an extra step of specificity to win the cascade.
   ========================================================================== */

body.font-display .filter-btn {
    background-color: transparent;
    background-image: linear-gradient(160deg, #ffffff 0%, #f4f9ff 100%);
    border-color: rgba(0, 87, 183, .22);
    color: var(--olis-blue-deep);
    box-shadow: var(--olis-shadow-sm);
}

body.font-display .filter-btn:hover {
    background-image: linear-gradient(160deg, #ffffff 0%, #e7f1fe 100%);
    border-color: rgba(0, 87, 183, .45);
    color: var(--olis-blue);
    box-shadow: var(--olis-shadow-md);
}

body.font-display .filter-btn.active {
    background: linear-gradient(135deg, var(--olis-blue) 0%, #0a68d0 52%, var(--olis-blue-deep) 100%);
    border-color: var(--olis-blue);
    color: #ffffff;
    box-shadow: 0 10px 24px -12px rgba(0, 87, 183, .85), inset 0 1px 0 rgba(255, 255, 255, .22);
}

/* Empty state shown when a filter matches nothing. */
body.font-display #no-results .rounded-full.bg-gray-100 {
    background-color: transparent;
    background-image: linear-gradient(140deg, #e7f1fe, #f5faff);
    box-shadow: inset 0 0 0 1px rgba(0, 87, 183, .12);
}


/* ==========================================================================
   18. DECORATIVE MOTIFS
   Small school-themed illustrations - flowers, a teddy bear, a school bus,
   balloons, ABC blocks, a kite - scattered gently across the colour bands.

   They are painted as background layers in front of each band's wash, so they
   sit above the colour and behind the content: they can never cover text or
   intercept a click.

   Tier 1 (>=900px) tucks a small motif into the top-left and bottom-right of
   each band, inside the band's own vertical padding, so it finishes before the
   content box begins at any window width.

   Tier 2 (>=1600px) moves them out into the margin beside the content and
   lets them grow. The offset is derived from the widest content container on
   the site (1400px), so each motif lands centred in genuinely empty space.

   Phones stay clear, and the photographic heroes and the dark closing call to
   action are left undecorated on purpose.
   ========================================================================== */

@media (min-width: 900px) {

    #oli-playgroup-section {
        background-image:
            url("../img/decor/balloon-coral.svg"),
            url("../img/decor/rainbow.svg"),
            var(--band-playgroup) !important;
        background-position: left 16px top 10px, right 16px bottom 10px, 0 0 !important;
        background-size: 54px 54px, 54px 54px, auto !important;
        background-repeat: no-repeat, no-repeat, no-repeat !important;
    }

    body[data-page="index"] > section:nth-of-type(7) {
        background-image:
            url("../img/decor/balloon-coral.svg"),
            url("../img/decor/flower-pink.svg"),
            var(--band-sky) !important;
        background-position: left 16px top 10px, right 16px bottom 10px, 0 0 !important;
        background-size: 54px 54px, 54px 54px, auto !important;
        background-repeat: no-repeat, no-repeat, no-repeat !important;
    }

    body[data-page="index"] > section:nth-of-type(12) {
        background-image:
            url("../img/decor/flower-blue.svg"),
            url("../img/decor/butterfly.svg"),
            var(--band-gold) !important;
        background-position: left 16px top 10px, right 16px bottom 10px, 0 0 !important;
        background-size: 54px 54px, 54px 54px, auto !important;
        background-repeat: no-repeat, no-repeat, no-repeat !important;
    }

    #our-story-section {
        background-image:
            url("../img/decor/balloon-coral.svg"),
            url("../img/decor/flower-yellow.svg"),
            var(--band-story) !important;
        background-position: left 16px top 10px, right 16px bottom 10px, 0 0 !important;
        background-size: 54px 54px, 54px 54px, auto !important;
        background-repeat: no-repeat, no-repeat, no-repeat !important;
    }

    #academic-programs-section {
        background-image:
            url("../img/decor/bus.svg"),
            url("../img/decor/star-yellow.svg"),
            var(--band-violet) !important;
        background-position: left 16px top 10px, right 16px bottom 10px, 0 0 !important;
        background-size: 54px 54px, 54px 54px, auto !important;
        background-repeat: no-repeat, no-repeat, no-repeat !important;
    }

    #why-olis-section {
        background-image:
            url("../img/decor/flower-blue.svg"),
            url("../img/decor/butterfly.svg"),
            var(--band-why) !important;
        background-position: left 16px top 10px, right 16px bottom 10px, 0 0 !important;
        background-size: 54px 54px, 54px 54px, auto !important;
        background-repeat: no-repeat, no-repeat, no-repeat !important;
    }

    #admissions-section {
        background-image:
            url("../img/decor/pencil.svg"),
            url("../img/decor/blocks.svg"),
            var(--band-mint) !important;
        background-position: left 16px top 10px, right 16px bottom 10px, 0 0 !important;
        background-size: 54px 54px, 54px 54px, auto !important;
        background-repeat: no-repeat, no-repeat, no-repeat !important;
    }

    #student-life-section {
        background-image:
            url("../img/decor/star-yellow.svg"),
            url("../img/decor/balloon-coral.svg"),
            var(--band-studentlife) !important;
        background-position: left 16px top 10px, right 16px bottom 10px, 0 0 !important;
        background-size: 54px 54px, 54px 54px, auto !important;
        background-repeat: no-repeat, no-repeat, no-repeat !important;
    }

    #facilities-section {
        background-image:
            url("../img/decor/book.svg"),
            url("../img/decor/flower-blue.svg"),
            var(--band-coral) !important;
        background-position: left 16px top 10px, right 16px bottom 10px, 0 0 !important;
        background-size: 54px 54px, 54px 54px, auto !important;
        background-repeat: no-repeat, no-repeat, no-repeat !important;
    }

    #news-section {
        background-image:
            url("../img/decor/star-yellow.svg"),
            url("../img/decor/flower-blue.svg"),
            var(--band-pink) !important;
        background-position: left 16px top 10px, right 16px bottom 10px, 0 0 !important;
        background-size: 54px 54px, 54px 54px, auto !important;
        background-repeat: no-repeat, no-repeat, no-repeat !important;
    }

    body[data-page="about"] > section:nth-of-type(2) {
        background-image:
            url("../img/decor/flower-blue.svg"),
            url("../img/decor/butterfly.svg"),
            var(--band-butter) !important;
        background-position: left 16px top 10px, right 16px bottom 10px, 0 0 !important;
        background-size: 54px 54px, 54px 54px, auto !important;
        background-repeat: no-repeat, no-repeat, no-repeat !important;
    }

    body[data-page="about"] > section:nth-of-type(3) {
        background-image:
            url("../img/decor/balloon-coral.svg"),
            url("../img/decor/flower-yellow.svg"),
            var(--band-aqua) !important;
        background-position: left 16px top 10px, right 16px bottom 10px, 0 0 !important;
        background-size: 54px 54px, 54px 54px, auto !important;
        background-repeat: no-repeat, no-repeat, no-repeat !important;
    }

    body[data-page="about"] > section:nth-of-type(4) {
        background-image:
            url("../img/decor/bus.svg"),
            url("../img/decor/star-yellow.svg"),
            var(--band-violet) !important;
        background-position: left 16px top 10px, right 16px bottom 10px, 0 0 !important;
        background-size: 54px 54px, 54px 54px, auto !important;
        background-repeat: no-repeat, no-repeat, no-repeat !important;
    }

    body[data-page="aims"] > section:nth-of-type(2) {
        background-image:
            url("../img/decor/flower-blue.svg"),
            url("../img/decor/kite.svg"),
            var(--band-aims) !important;
        background-position: left 16px top 10px, right 16px bottom 10px, 0 0 !important;
        background-size: 54px 54px, 54px 54px, auto !important;
        background-repeat: no-repeat, no-repeat, no-repeat !important;
    }

    body[data-page="goals"] > section:nth-of-type(2) {
        background-image:
            url("../img/decor/balloon-coral.svg"),
            url("../img/decor/star-violet.svg"),
            var(--band-mint) !important;
        background-position: left 16px top 10px, right 16px bottom 10px, 0 0 !important;
        background-size: 54px 54px, 54px 54px, auto !important;
        background-repeat: no-repeat, no-repeat, no-repeat !important;
    }

    body[data-page="facilities"] > section:nth-of-type(2) {
        background-image:
            url("../img/decor/bus.svg"),
            url("../img/decor/star-yellow.svg"),
            var(--band-violet) !important;
        background-position: left 16px top 10px, right 16px bottom 10px, 0 0 !important;
        background-size: 54px 54px, 54px 54px, auto !important;
        background-repeat: no-repeat, no-repeat, no-repeat !important;
    }

    body[data-page="gallery"] > section:nth-of-type(2) {
        background-image:
            url("../img/decor/flower-pink.svg"),
            url("../img/decor/cloud-rainbow.svg"),
            var(--band-gallery) !important;
        background-position: left 16px top 10px, right 16px bottom 10px, 0 0 !important;
        background-size: 54px 54px, 54px 54px, auto !important;
        background-repeat: no-repeat, no-repeat, no-repeat !important;
    }

    body[data-page="principal"] > section:nth-of-type(2) {
        background-image:
            url("../img/decor/flower-blue.svg"),
            url("../img/decor/book.svg"),
            var(--band-principal) !important;
        background-position: left 16px top 10px, right 16px bottom 10px, 0 0 !important;
        background-size: 54px 54px, 54px 54px, auto !important;
        background-repeat: no-repeat, no-repeat, no-repeat !important;
    }

    body[data-page="principal"] > section:nth-of-type(3) {
        background-image:
            url("../img/decor/balloon-coral.svg"),
            url("../img/decor/star-yellow.svg"),
            var(--band-aqua) !important;
        background-position: left 16px top 10px, right 16px bottom 10px, 0 0 !important;
        background-size: 44px 44px, 44px 44px, auto !important;
        background-repeat: no-repeat, no-repeat, no-repeat !important;
    }

    body[data-page="contact"] > section:nth-of-type(2) {
        background-image:
            url("../img/decor/flower-blue.svg"),
            url("../img/decor/kite.svg"),
            var(--band-coral) !important;
        background-position: left 16px top 10px, right 16px bottom 10px, 0 0 !important;
        background-size: 54px 54px, 54px 54px, auto !important;
        background-repeat: no-repeat, no-repeat, no-repeat !important;
    }

    body[data-page="contact"] > section:nth-of-type(3) {
        background-image:
            url("../img/decor/balloon-coral.svg"),
            url("../img/decor/flower-yellow.svg"),
            var(--band-contactaqua) !important;
        background-position: left 16px top 10px, right 16px bottom 10px, 0 0 !important;
        background-size: 54px 54px, 54px 54px, auto !important;
        background-repeat: no-repeat, no-repeat, no-repeat !important;
    }

    body[data-page="coming-soon-gallery"] > main {
        background-image:
            url("../img/decor/balloon-coral.svg"),
            url("../img/decor/star-violet.svg"),
            var(--band-comingsoon) !important;
        background-position: left 16px top 10px, right 16px bottom 10px, 0 0 !important;
        background-size: 54px 54px, 54px 54px, auto !important;
        background-repeat: no-repeat, no-repeat, no-repeat !important;
    }

}

@media (min-width: 1600px) {

    #oli-playgroup-section {
        background-image:
            url("../img/decor/balloon-coral.svg"),
            url("../img/decor/rainbow.svg"),
            var(--band-playgroup) !important;
        background-position: left calc((100vw - 1400px) / 4 - 39px) top 15%, right calc((100vw - 1400px) / 4 - 33px) bottom 16%, 0 0 !important;
        background-size: 78px 78px, 66px 66px, auto !important;
        background-repeat: no-repeat, no-repeat, no-repeat !important;
    }

    body[data-page="index"] > section:nth-of-type(7) {
        background-image:
            url("../img/decor/balloon-coral.svg"),
            url("../img/decor/flower-pink.svg"),
            var(--band-sky) !important;
        background-position: left calc((100vw - 1400px) / 4 - 39px) top 15%, right calc((100vw - 1400px) / 4 - 38px) bottom 16%, 0 0 !important;
        background-size: 78px 78px, 76px 76px, auto !important;
        background-repeat: no-repeat, no-repeat, no-repeat !important;
    }

    body[data-page="index"] > section:nth-of-type(12) {
        background-image:
            url("../img/decor/flower-blue.svg"),
            url("../img/decor/butterfly.svg"),
            var(--band-gold) !important;
        background-position: left calc((100vw - 1400px) / 4 - 40px) top 15%, right calc((100vw - 1400px) / 4 - 39px) bottom 16%, 0 0 !important;
        background-size: 80px 80px, 78px 78px, auto !important;
        background-repeat: no-repeat, no-repeat, no-repeat !important;
    }

    #our-story-section {
        background-image:
            url("../img/decor/balloon-coral.svg"),
            url("../img/decor/flower-yellow.svg"),
            var(--band-story) !important;
        background-position: left calc((100vw - 1400px) / 4 - 39px) top 15%, right calc((100vw - 1400px) / 4 - 40px) bottom 16%, 0 0 !important;
        background-size: 78px 78px, 80px 80px, auto !important;
        background-repeat: no-repeat, no-repeat, no-repeat !important;
    }

    #academic-programs-section {
        background-image:
            url("../img/decor/bus.svg"),
            url("../img/decor/star-yellow.svg"),
            var(--band-violet) !important;
        background-position: left calc((100vw - 1400px) / 4 - 47px) top 15%, right calc((100vw - 1400px) / 4 - 32px) bottom 16%, 0 0 !important;
        background-size: 94px 94px, 64px 64px, auto !important;
        background-repeat: no-repeat, no-repeat, no-repeat !important;
    }

    #why-olis-section {
        background-image:
            url("../img/decor/flower-blue.svg"),
            url("../img/decor/butterfly.svg"),
            var(--band-why) !important;
        background-position: left calc((100vw - 1400px) / 4 - 41px) top 15%, right calc((100vw - 1400px) / 4 - 40px) bottom 16%, 0 0 !important;
        background-size: 82px 82px, 80px 80px, auto !important;
        background-repeat: no-repeat, no-repeat, no-repeat !important;
    }

    #admissions-section {
        background-image:
            url("../img/decor/pencil.svg"),
            url("../img/decor/blocks.svg"),
            var(--band-mint) !important;
        background-position: left calc((100vw - 1400px) / 4 - 40px) top 15%, right calc((100vw - 1400px) / 4 - 43px) bottom 16%, 0 0 !important;
        background-size: 80px 80px, 86px 86px, auto !important;
        background-repeat: no-repeat, no-repeat, no-repeat !important;
    }

    #student-life-section {
        background-image:
            url("../img/decor/star-yellow.svg"),
            url("../img/decor/balloon-coral.svg"),
            var(--band-studentlife) !important;
        background-position: left calc((100vw - 1400px) / 4 - 32px) top 15%, right calc((100vw - 1400px) / 4 - 39px) bottom 16%, 0 0 !important;
        background-size: 64px 64px, 78px 78px, auto !important;
        background-repeat: no-repeat, no-repeat, no-repeat !important;
    }

    #facilities-section {
        background-image:
            url("../img/decor/book.svg"),
            url("../img/decor/flower-blue.svg"),
            var(--band-coral) !important;
        background-position: left calc((100vw - 1400px) / 4 - 43px) top 15%, right calc((100vw - 1400px) / 4 - 39px) bottom 16%, 0 0 !important;
        background-size: 86px 86px, 78px 78px, auto !important;
        background-repeat: no-repeat, no-repeat, no-repeat !important;
    }

    #news-section {
        background-image:
            url("../img/decor/star-yellow.svg"),
            url("../img/decor/flower-blue.svg"),
            var(--band-pink) !important;
        background-position: left calc((100vw - 1400px) / 4 - 32px) top 15%, right calc((100vw - 1400px) / 4 - 38px) bottom 16%, 0 0 !important;
        background-size: 64px 64px, 76px 76px, auto !important;
        background-repeat: no-repeat, no-repeat, no-repeat !important;
    }

    body[data-page="about"] > section:nth-of-type(2) {
        background-image:
            url("../img/decor/flower-blue.svg"),
            url("../img/decor/butterfly.svg"),
            var(--band-butter) !important;
        background-position: left calc((100vw - 1400px) / 4 - 40px) top 15%, right calc((100vw - 1400px) / 4 - 39px) bottom 16%, 0 0 !important;
        background-size: 80px 80px, 78px 78px, auto !important;
        background-repeat: no-repeat, no-repeat, no-repeat !important;
    }

    body[data-page="about"] > section:nth-of-type(3) {
        background-image:
            url("../img/decor/balloon-coral.svg"),
            url("../img/decor/flower-yellow.svg"),
            var(--band-aqua) !important;
        background-position: left calc((100vw - 1400px) / 4 - 39px) top 15%, right calc((100vw - 1400px) / 4 - 39px) bottom 16%, 0 0 !important;
        background-size: 78px 78px, 78px 78px, auto !important;
        background-repeat: no-repeat, no-repeat, no-repeat !important;
    }

    body[data-page="about"] > section:nth-of-type(4) {
        background-image:
            url("../img/decor/bus.svg"),
            url("../img/decor/star-yellow.svg"),
            var(--band-violet) !important;
        background-position: left calc((100vw - 1400px) / 4 - 46px) top 15%, right calc((100vw - 1400px) / 4 - 32px) bottom 16%, 0 0 !important;
        background-size: 92px 92px, 64px 64px, auto !important;
        background-repeat: no-repeat, no-repeat, no-repeat !important;
    }

    body[data-page="aims"] > section:nth-of-type(2) {
        background-image:
            url("../img/decor/flower-blue.svg"),
            url("../img/decor/kite.svg"),
            var(--band-aims) !important;
        background-position: left calc((100vw - 1400px) / 4 - 41px) top 15%, right calc((100vw - 1400px) / 4 - 41px) bottom 16%, 0 0 !important;
        background-size: 82px 82px, 82px 82px, auto !important;
        background-repeat: no-repeat, no-repeat, no-repeat !important;
    }

    body[data-page="goals"] > section:nth-of-type(2) {
        background-image:
            url("../img/decor/balloon-coral.svg"),
            url("../img/decor/star-violet.svg"),
            var(--band-mint) !important;
        background-position: left calc((100vw - 1400px) / 4 - 39px) top 15%, right calc((100vw - 1400px) / 4 - 32px) bottom 16%, 0 0 !important;
        background-size: 78px 78px, 64px 64px, auto !important;
        background-repeat: no-repeat, no-repeat, no-repeat !important;
    }

    body[data-page="facilities"] > section:nth-of-type(2) {
        background-image:
            url("../img/decor/bus.svg"),
            url("../img/decor/star-yellow.svg"),
            var(--band-violet) !important;
        background-position: left calc((100vw - 1400px) / 4 - 47px) top 15%, right calc((100vw - 1400px) / 4 - 32px) bottom 16%, 0 0 !important;
        background-size: 94px 94px, 64px 64px, auto !important;
        background-repeat: no-repeat, no-repeat, no-repeat !important;
    }

    body[data-page="gallery"] > section:nth-of-type(2) {
        background-image:
            url("../img/decor/flower-pink.svg"),
            url("../img/decor/cloud-rainbow.svg"),
            var(--band-gallery) !important;
        background-position: left calc((100vw - 1400px) / 4 - 39px) top 15%, right calc((100vw - 1400px) / 4 - 39px) bottom 16%, 0 0 !important;
        background-size: 78px 78px, 78px 78px, auto !important;
        background-repeat: no-repeat, no-repeat, no-repeat !important;
    }

    body[data-page="principal"] > section:nth-of-type(2) {
        background-image:
            url("../img/decor/flower-blue.svg"),
            url("../img/decor/book.svg"),
            var(--band-principal) !important;
        background-position: left calc((100vw - 1400px) / 4 - 40px) top 15%, right calc((100vw - 1400px) / 4 - 42px) bottom 16%, 0 0 !important;
        background-size: 80px 80px, 84px 84px, auto !important;
        background-repeat: no-repeat, no-repeat, no-repeat !important;
    }

    body[data-page="principal"] > section:nth-of-type(3) {
        background-image:
            url("../img/decor/balloon-coral.svg"),
            url("../img/decor/star-yellow.svg"),
            var(--band-aqua) !important;
        background-position: left calc((100vw - 1400px) / 4 - 39px) top 15%, right calc((100vw - 1400px) / 4 - 32px) bottom 16%, 0 0 !important;
        background-size: 78px 78px, 64px 64px, auto !important;
        background-repeat: no-repeat, no-repeat, no-repeat !important;
    }

    body[data-page="contact"] > section:nth-of-type(2) {
        background-image:
            url("../img/decor/flower-blue.svg"),
            url("../img/decor/kite.svg"),
            var(--band-coral) !important;
        background-position: left calc((100vw - 1400px) / 4 - 40px) top 15%, right calc((100vw - 1400px) / 4 - 41px) bottom 16%, 0 0 !important;
        background-size: 80px 80px, 82px 82px, auto !important;
        background-repeat: no-repeat, no-repeat, no-repeat !important;
    }

    body[data-page="contact"] > section:nth-of-type(3) {
        background-image:
            url("../img/decor/balloon-coral.svg"),
            url("../img/decor/flower-yellow.svg"),
            var(--band-contactaqua) !important;
        background-position: left calc((100vw - 1400px) / 4 - 39px) top 15%, right calc((100vw - 1400px) / 4 - 39px) bottom 16%, 0 0 !important;
        background-size: 78px 78px, 78px 78px, auto !important;
        background-repeat: no-repeat, no-repeat, no-repeat !important;
    }

    body[data-page="coming-soon-gallery"] > main {
        background-image:
            url("../img/decor/balloon-coral.svg"),
            url("../img/decor/star-violet.svg"),
            var(--band-comingsoon) !important;
        background-position: left calc((100vw - 1400px) / 4 - 39px) top 15%, right calc((100vw - 1400px) / 4 - 33px) bottom 16%, 0 0 !important;
        background-size: 78px 78px, 66px 66px, auto !important;
        background-repeat: no-repeat, no-repeat, no-repeat !important;
    }

}



/* ==========================================================================
   19. PLAYGROUND LAYER
   The bands, buttons and chrome above establish the brighter palette. This
   last section is what makes the site read as a *children's* school rather
   than a merely colourful one: it walks the rainbow across the repeating card
   grids, so a run of six identical tiles becomes six friends in a row.

   Everything here is colour, edge and a few pixels of lift. No rule in this
   section changes layout, spacing, flow or behaviour, and every selector is
   scoped to an id or a utility class that is already in the markup, so
   nothing depends on HTML that is not on the page today.

   The rainbow is used as a RUN - one hue per sibling - rather than as a
   gradient smeared over everything. That is the difference between playful
   and cluttered: each individual element still carries exactly one colour.
   ========================================================================== */

/* --------------------------------------------------------------------------
   19a. The run
   Seven stops, defined once and referenced by index. Every one of these is
   used as a CHIP FILL behind a white Material Symbol of 24px or larger, so
   the threshold that applies is the 3:1 one for large text and graphics, not
   4.5:1 - the measured ratios against white are noted per line below.

   None of them is used for small white text. Where white body copy sits on a
   colour (the announcement bar, the gallery's active pill) the -deep tokens
   are used instead, and those do clear 4.5:1.
   -------------------------------------------------------------------------- */

body.font-display {
    --run-1: #e2620a;   /* orange - 3.5:1 on white */
    --run-2: #c2237f;   /* pink   - 5.5:1 */
    --run-3: #6d28d9;   /* purple - 7.1:1 */
    --run-4: #0b62d6;   /* blue   - 5.6:1 */
    --run-5: #0e8f86;   /* teal   - 4.0:1 */
    --run-6: #2e9e42;   /* green  - 3.5:1 */
    --run-7: #b3730a;   /* amber  - 3.9:1 */
}

/* --------------------------------------------------------------------------
   19b. "Why Choose Our Lady's?" - the six-tile grid
   Six tiles that read blue, yellow, blue, yellow, blue, yellow. Each now
   carries its own hue across its icon chip, its wash and its border, so the
   row reads as a rainbow while no single tile is multicoloured. The icon is
   forced white because the markup pairs the blue chips with text-white and
   the yellow chips with text-primary.
   -------------------------------------------------------------------------- */

body.font-display #why-olis-section .grid > div {
    border-color: color-mix(in srgb, var(--tile) 34%, transparent) !important;
    background-image: linear-gradient(160deg, #ffffff 0%, color-mix(in srgb, var(--tile) 12%, #ffffff) 100%) !important;
    transition: transform .25s ease, box-shadow .25s ease, background-image .25s ease, border-color .25s ease;
}

body.font-display #why-olis-section .grid > div:hover {
    background-image: linear-gradient(160deg, #ffffff 0%, color-mix(in srgb, var(--tile) 20%, #ffffff) 100%) !important;
    border-color: color-mix(in srgb, var(--tile) 58%, transparent) !important;
    transform: translateY(-4px);
    box-shadow: 0 18px 34px -18px color-mix(in srgb, var(--tile) 70%, transparent);
}

body.font-display #why-olis-section .grid > div .rounded-full {
    background-color: var(--tile) !important;
    background-image: linear-gradient(140deg, color-mix(in srgb, var(--tile) 78%, #ffffff) 0%, var(--tile) 100%) !important;
    box-shadow: 0 10px 20px -10px color-mix(in srgb, var(--tile) 85%, transparent);
    transition: transform .25s ease;
}

body.font-display #why-olis-section .grid > div .rounded-full,
body.font-display #why-olis-section .grid > div .rounded-full > span {
    color: #ffffff !important;
}

/* A small tilt on hover - the one piece of character motion on the page. */
body.font-display #why-olis-section .grid > div:hover .rounded-full {
    transform: rotate(-8deg) scale(1.06);
}

/* The six tiles sweep the spectrum in order rather than jumping around it,
   which is what makes the row read as one rainbow instead of six unrelated
   colours. Amber is deliberately skipped: this band's wash is already yellow,
   and an amber chip dark enough to carry a white icon (#b3730a) goes muddy
   against it. The yellow of the rainbow is supplied by the band itself. */
body.font-display #why-olis-section .grid > div:nth-child(1) { --tile: var(--run-1); }  /* orange */
body.font-display #why-olis-section .grid > div:nth-child(2) { --tile: var(--run-6); }  /* green  */
body.font-display #why-olis-section .grid > div:nth-child(3) { --tile: var(--run-5); }  /* teal   */
body.font-display #why-olis-section .grid > div:nth-child(4) { --tile: var(--run-4); }  /* blue   */
body.font-display #why-olis-section .grid > div:nth-child(5) { --tile: var(--run-3); }  /* purple */
body.font-display #why-olis-section .grid > div:nth-child(6) { --tile: var(--run-2); }  /* pink   */

/* --------------------------------------------------------------------------
   19c. Trust strip - the four badges under the hero
   These already carried four hues; they move onto the new lead colours and
   take a solid fill so they read at a glance against the ribbon. The icon is
   coloured by a Tailwind text-* class in the markup, so it is overridden to
   white here to stay legible on the fill.
   -------------------------------------------------------------------------- */

body[data-page="index"] > section:nth-of-type(3) .rounded-full {
    background-image: linear-gradient(140deg, color-mix(in srgb, var(--badge) 78%, #ffffff) 0%, var(--badge) 100%) !important;
    box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--badge) 85%, transparent),
                inset 0 0 0 1px color-mix(in srgb, var(--badge) 30%, transparent);
}

body[data-page="index"] > section:nth-of-type(3) .rounded-full,
body[data-page="index"] > section:nth-of-type(3) .rounded-full > span {
    color: #ffffff !important;
}

body[data-page="index"] > section:nth-of-type(3) .grid > div:nth-child(1) { --badge: var(--run-1); }
body[data-page="index"] > section:nth-of-type(3) .grid > div:nth-child(2) { --badge: var(--run-3); }
body[data-page="index"] > section:nth-of-type(3) .grid > div:nth-child(3) { --badge: var(--run-5); }
body[data-page="index"] > section:nth-of-type(3) .grid > div:nth-child(4) { --badge: var(--run-2); }

/* --------------------------------------------------------------------------
   19d. "How to Apply" - the four numbered steps
   The rings walk orange, amber, purple, teal, and hovering a step fills its
   ring with its own colour. The markup puts the connector line in as the
   grid's first child, so the steps themselves are children 2 to 5.
   -------------------------------------------------------------------------- */

body.font-display #admissions-section .grid > *:nth-child(2) { --step: var(--run-1); }
body.font-display #admissions-section .grid > *:nth-child(3) { --step: var(--run-7); }
body.font-display #admissions-section .grid > *:nth-child(4) { --step: var(--run-3); }
body.font-display #admissions-section .grid > *:nth-child(5) { --step: var(--run-5); }

body.font-display #admissions-section .grid > * .size-24 {
    border-color: var(--step) !important;
    box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--step) 80%, transparent);
    transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
}

body.font-display #admissions-section .grid > * .size-24 > span {
    color: var(--step) !important;
    transition: color .25s ease;
}

body.font-display #admissions-section .grid > *:hover .size-24 {
    background-color: var(--step) !important;
    border-color: color-mix(in srgb, var(--step) 45%, #ffffff) !important;
    transform: translateY(-4px) scale(1.04);
}

body.font-display #admissions-section .grid > *:hover .size-24 > span {
    color: #ffffff !important;
}

/* The connector line behind the steps becomes the ribbon it always wanted to
   be. It is a plain 2px div, so it simply takes the sweep as a background. */
body.font-display #admissions-section .grid > .absolute {
    background-color: transparent !important;
    background-image: var(--olis-rainbow);
    opacity: .55;
    border-radius: 999px;
}

/* --------------------------------------------------------------------------
   19e. Cards - a rainbow edge that arrives on hover
   Every plain white card gets the same treatment: it lifts a little and a
   thin rainbow rule wipes across its top edge. Painted as a background layer
   so it follows the card's rounded corners, and animated from 0 to 100% width
   so it wipes rather than fades. Cards that already carry a coloured ribbon
   from section 5 are excluded - they have their accent already.
   -------------------------------------------------------------------------- */

body.font-display > section .bg-white.rounded-2xl:not([class*="border-t-4"]),
body.font-display > section .bg-white.rounded-3xl:not([class*="border-t-4"]),
body.font-display > section .bg-white.rounded-xl:not([class*="border-t-4"]) {
    background-image: var(--olis-rainbow), linear-gradient(180deg, #ffffff 0%, #fdfbff 100%);
    background-repeat: no-repeat, no-repeat;
    background-size: 0% 4px, 100% 100%;
    background-position: top left, top left;
    transition: background-size .35s ease, transform .25s ease, box-shadow .25s ease;
}

body.font-display > section .bg-white.rounded-2xl:not([class*="border-t-4"]):hover,
body.font-display > section .bg-white.rounded-3xl:not([class*="border-t-4"]):hover,
body.font-display > section .bg-white.rounded-xl:not([class*="border-t-4"]):hover {
    background-size: 100% 4px, 100% 100%;
    transform: translateY(-3px);
}

/* --------------------------------------------------------------------------
   19f. FAQ panels
   An open panel takes the ribbon along its top edge, so the thing you just
   opened is unmistakably the liveliest item on the band.
   -------------------------------------------------------------------------- */

body.font-display details.group[open] {
    background-image: var(--olis-rainbow), linear-gradient(135deg, #ffffff 0%, #fff8e6 58%, #f4ecff 100%);
    background-repeat: no-repeat, no-repeat;
    background-size: 100% 4px, 100% 100%;
    background-position: top left, top left;
    border-color: rgba(139, 70, 232, .30);
}

/* --------------------------------------------------------------------------
   19g. Gallery filter pills
   -------------------------------------------------------------------------- */

body.font-display .filter-btn.active {
    background: linear-gradient(135deg, var(--olis-purple-deep) 0%, #b4269b 55%, var(--olis-orange-deep) 100%);
    /* stops measure 7.1:1, 5.7:1 and 5.5:1 against the white label */
    border-color: var(--olis-purple-deep);
    box-shadow: 0 10px 24px -12px rgba(109, 40, 217, .9), inset 0 1px 0 rgba(255, 255, 255, .26);
}

body.font-display .filter-btn:hover:not(.active) {
    background-image: linear-gradient(160deg, #ffffff 0%, #f6efff 100%);
    border-color: rgba(139, 70, 232, .5);
    color: var(--olis-purple-deep);
}

/* --------------------------------------------------------------------------
   19h. Footer
   The dark band stays dark - it is what stops the page from turning sweet -
   but the column headings get a rainbow dash and the three social chips get
   three different hues on hover.
   -------------------------------------------------------------------------- */

body.font-display > footer {
    border-top-width: 6px;
}

body.font-display > footer h3 {
    position: relative;
    padding-bottom: 10px;
}

body.font-display > footer h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 46px;
    height: 4px;
    border-radius: 999px;
    background: var(--olis-rainbow);
}

body.font-display > footer a.size-10.rounded-full:nth-child(1):hover { background-image: linear-gradient(140deg, var(--olis-orange-warm), var(--olis-orange-deep)); color: #ffffff !important; }
body.font-display > footer a.size-10.rounded-full:nth-child(2):hover { background-image: linear-gradient(140deg, #f857a6, #c2237f); color: #ffffff !important; }
body.font-display > footer a.size-10.rounded-full:nth-child(3):hover { background-image: linear-gradient(140deg, var(--olis-purple-bright), var(--olis-purple-deep)); color: #ffffff !important; }

/* --------------------------------------------------------------------------
   19i. Announcement bar
   A rainbow hairline along the bottom ties the bar to the header stripe
   sitting a few pixels below it.
   -------------------------------------------------------------------------- */

#oliAnnouncementBar {
    border-bottom: 3px solid transparent;
    border-image: var(--olis-rainbow) 1;
}

/* --------------------------------------------------------------------------
   19j. Photographs
   A white mat plus a faint rainbow halo, so pictures of the children sit on
   the colour bands as framed prints rather than punched-out rectangles.
   -------------------------------------------------------------------------- */

body.font-display > section .rounded-3xl.border-4.border-white,
body.font-display > section .rounded-2xl.border-4.border-white {
    box-shadow: var(--olis-shadow-lg),
                0 0 0 1px rgba(139, 70, 232, .16),
                0 0 0 6px rgba(255, 210, 30, .12);
}

/* --------------------------------------------------------------------------
   19k. Focus, motion and small screens
   -------------------------------------------------------------------------- */

/* The focus ring moves to purple: it has to stay visible on the yellow and
   orange bands, where the old amber ring disappeared into the background. */
body.font-display a:focus-visible,
body.font-display button:focus-visible,
body.font-display summary:focus-visible {
    outline: 3px solid var(--olis-purple-deep);
    outline-offset: 3px;
}

/* Phones: the lift and the wipe are pointer affordances a touch screen cannot
   show, and a transform creates a containing block that can interfere with
   sticky descendants. Both are dropped below the tablet break. All of the
   colour is kept - only the hover choreography goes. */
@media (max-width: 767px) {
    body.font-display > section .bg-white.rounded-2xl:not([class*="border-t-4"]),
    body.font-display > section .bg-white.rounded-3xl:not([class*="border-t-4"]),
    body.font-display > section .bg-white.rounded-xl:not([class*="border-t-4"]) {
        background-size: 100% 4px, 100% 100%;
        transform: none;
    }

    body.font-display #why-olis-section .grid > div:hover {
        transform: none;
    }

    body.font-display #admissions-section .grid > *:hover .size-24 {
        transform: none;
    }

    /* The footer collapses to a single column on phones, where a shorter dash
       sits better under the narrower headings. */
    body.font-display > footer h3::after {
        width: 38px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.font-display #why-olis-section .grid > div,
    body.font-display #why-olis-section .grid > div .rounded-full,
    body.font-display #admissions-section .grid > * .size-24,
    body.font-display > section .bg-white.rounded-2xl,
    body.font-display > section .bg-white.rounded-3xl,
    body.font-display > section .bg-white.rounded-xl {
        transition: none !important;
    }

    body.font-display #why-olis-section .grid > div:hover,
    body.font-display #why-olis-section .grid > div:hover .rounded-full,
    body.font-display #admissions-section .grid > *:hover .size-24,
    body.font-display > section .bg-white.rounded-2xl:hover,
    body.font-display > section .bg-white.rounded-3xl:hover,
    body.font-display > section .bg-white.rounded-xl:hover {
        transform: none !important;
    }
}

/* Keep the playground layer off the printed page. */
@media print {
    body.font-display #why-olis-section .grid > div .rounded-full,
    body[data-page="index"] > section:nth-of-type(3) .rounded-full {
        background-image: none !important;
        box-shadow: none !important;
    }

    body.font-display > footer h3::after {
        display: none !important;
    }
}