/* Public website refinements. Load after style.css; portal styles stay separate. */
body.public-site {
    --primary: #06bbcc;
    --dark: #181d38;
    --light: #f0fbfc;
    --ff-action: #007f8b;
    --ff-action-hover: #006975;
    --ff-border: #dce8eb;
    --ff-radius: 10px;
    --bg-primary: #fff;
    --bg-secondary: #fff;
    --bg-tertiary: #f0fbfc;
    --text-primary: #181d38;
    --text-secondary: #526070;
    --border-color: #dce8eb;
    --secondary: #007f8b;
    color: #465365;
    background-color: #fff;
    font-family: 'Heebo', system-ui, -apple-system, 'Segoe UI', sans-serif;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

body.public-site :where(h1, h2, h3, h4, h5, h6) {
    font-family: 'Nunito', 'Trebuchet MS', sans-serif;
    color: var(--dark);
    line-height: 1.22;
    text-wrap: balance;
}

body.public-site h1:not(.display-3) {
    font-size: clamp(1.85rem, 3vw, 2.5rem);
}

body.public-site p {
    color: inherit;
}

body.public-site a {
    color: var(--ff-action);
    text-underline-offset: .2em;
}

body.public-site a:hover {
    opacity: 1;
    color: var(--ff-action-hover);
}

/* Cancel the portal stylesheet's global underline/ripple on public pages. */
body.public-site a:not(.dropdown-toggle)::after,
body.public-site .btn:not(.btn-link)::before {
    content: none;
}

body.public-site :is(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid var(--dark) !important;
    outline-offset: 3px;
    box-shadow: 0 0 0 3px #fff;
}

body.public-site [id] {
    scroll-margin-top: 100px;
}

body.public-site .text-primary {
    color: var(--ff-action) !important;
}

body.public-site .section-title {
    font-size: .85rem;
    font-weight: 800;
    letter-spacing: .1em;
    margin-bottom: 1rem;
}

body.public-site .btn,
body.public-site .button1 {
    border-radius: 6px;
    font-family: 'Nunito', 'Trebuchet MS', sans-serif;
    font-weight: 800;
    line-height: 1.5;
    transition: background-color .2s, border-color .2s, box-shadow .2s;
}

body.public-site .btn-primary,
body.public-site .button1 {
    color: #fff;
    background: var(--ff-action);
    border-color: var(--ff-action);
    box-shadow: none;
}

body.public-site .btn-primary:hover,
body.public-site .btn-primary:focus,
body.public-site .button1:hover {
    color: #fff;
    background: var(--ff-action-hover);
    border-color: var(--ff-action-hover);
    transform: none;
    box-shadow: 0 4px 14px rgb(0 105 117 / 16%);
}

body.public-site .btn-light {
    color: var(--dark);
    border-color: #fff;
    background: #fff;
}

body.public-site .btn-light:hover {
    background: var(--light);
    color: var(--dark);
}

body.public-site .btn-outline-primary {
    border-color: var(--ff-action);
    color: var(--ff-action);
}

body.public-site .btn-outline-primary:hover {
    color: #fff;
    background: var(--ff-action);
}

body.public-site .btn-secondary { background: #edf2f4; color: #181d38; border-color: #b9c9d0; }
body.public-site .btn-secondary:hover { background: #dce8eb; color: #181d38; }
body.public-site .category a.h-100 { min-width: 0; width: 100%; max-width: 100%; }

/* Keep the familiar white navbar and full school name at every width. */
body.public-site .navbar {
    border-bottom: 1px solid #edf1f4;
    box-shadow: 0 3px 18px rgb(24 29 56 / 7%) !important;
}

body.public-site .navbar .navbar-brand {
    min-width: 0;
    margin-right: 1rem;
    padding-left: clamp(1rem, 2.5vw, 2.5rem) !important;
    padding-right: 0 !important;
    white-space: normal;
}

body.public-site .navbar .navbar-brand h2 {
    display: flex;
    align-items: center;
    gap: .65rem;
    max-width: 340px;
    font-size: clamp(.95rem, 1.24vw, 1.2rem);
    line-height: 1.2;
    text-wrap: initial;
}

body.public-site .navbar #logo_img {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    object-fit: contain;
}

body.public-site .navbar-light .navbar-nav .nav-link {
    margin-right: clamp(.65rem, 1.2vw, 1.25rem);
    padding-top: 25px;
    padding-bottom: 25px;
    font-size: .79rem;
    font-weight: 700;
    letter-spacing: .025em;
    white-space: nowrap;
}

body.public-site .navbar-light .navbar-nav .nav-link:hover,
body.public-site .navbar-light .navbar-nav .nav-link.active {
    color: var(--ff-action);
}

body.public-site .navbar-light .navbar-nav .nav-link.active {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: .5em;
}

body.public-site .navbar .navbar-collapse > .btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    border-radius: 0;
    font-size: .9rem;
    white-space: nowrap;
}

body.public-site .navbar .dropdown-menu {
    border: 1px solid var(--ff-border);
    border-radius: 0 0 8px 8px;
    padding: .65rem;
    box-shadow: 0 12px 28px rgb(24 29 56 / 10%);
}

body.public-site .navbar .dropdown-item {
    padding: .65rem .8rem;
    border-radius: 4px;
    color: var(--dark);
    font-size: .9rem;
}

body.public-site .navbar .dropdown-item:hover,
body.public-site .navbar .dropdown-item:focus {
    background-color: var(--light);
    color: var(--ff-action);
}

body.public-site .navbar .dropdown-toggle::after {
    position: static;
    width: auto;
    height: auto;
    background: none;
}

/* Content-driven hero height avoids clipping on small phones and zoomed views. */
body.public-site .header-carousel .owl-carousel-item {
    display: flex;
    min-height: clamp(540px, 78vh, 760px);
}

body.public-site .header-carousel .owl-carousel-item > .position-absolute {
    position: relative !important;
    min-height: inherit;
    height: auto !important;
    padding: clamp(3rem, 6vw, 5rem) 0;
    background: linear-gradient(90deg, rgb(16 24 49 / 82%), rgb(16 24 49 / 46%)) !important;
}

body.public-site .header-carousel h1.display-3 {
    font-size: clamp(2.35rem, 4.8vw, 4.5rem);
    line-height: 1.09;
    max-width: 900px;
    margin-bottom: 1.35rem;
}

body.public-site .header-carousel p {
    max-width: 700px;
    line-height: 1.7;
}

body.public-site .header-carousel .text-primary {
    color: #6de3ed !important;
    font-size: .95rem;
    letter-spacing: .09em;
}

body.public-site .header-carousel .btn {
    margin-bottom: .6rem;
    padding: .9rem 1.5rem;
}

body.public-site .hero-media,
body.public-site .hero-video {
    min-height: 100%;
    height: 100%;
}

body.public-site .page-header .display-3,
body.public-site .container-fluid.bg-primary .display-3 {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
}

body.public-site .service-item,
body.public-site .course-item,
body.public-site .team-item {
    border: 1px solid var(--ff-border);
    border-radius: var(--ff-radius);
    overflow: hidden;
    height: 100%;
    box-shadow: 0 4px 18px rgb(24 29 56 / 4%);
}

body.public-site .service-item {
    transition: box-shadow .2s, border-color .2s;
}

body.public-site .service-item:hover {
    margin-top: 0;
    background: var(--light);
    border-color: #88cfd5;
    box-shadow: 0 8px 24px rgb(24 29 56 / 9%);
}

body.public-site .service-item:hover * {
    color: var(--dark) !important;
}

body.public-site .service-item:hover .text-primary {
    color: var(--ff-action) !important;
}

body.public-site .service-item p:last-child {
    margin-bottom: 0;
}

body.public-site .category .carousel-inner,
body.public-site .category a.overflow-hidden,
body.public-site .container-xxl .position-relative.h-100 > img,
body.public-site .card,
body.public-site .open-day-form-card,
body.public-site .testimonial-text {
    border-radius: var(--ff-radius);
}

body.public-site .category .carousel-item img {
    height: 100%;
    object-fit: cover;
}

body.public-site .category a:hover img,
body.public-site .course-item:hover img,
body.public-site .team-item:hover img {
    transform: scale(1.025);
}

body.public-site .category .carousel-caption {
    bottom: 1rem;
    right: 1rem;
    left: auto;
    padding: .5rem 1rem !important;
}

body.public-site .category .carousel-caption h5 {
    margin-bottom: 0;
}

body.public-site .carousel-control-prev-icon,
body.public-site .carousel-control-next-icon {
    border-radius: 50%;
    background-color: rgb(24 29 56 / 55%);
    background-size: 60%;
    width: 2.5rem;
    height: 2.5rem;
}

body.public-site .testimonial-carousel .owl-item.center .testimonial-text {
    background: var(--ff-action) !important;
}

body.public-site .testimonial-carousel .owl-dot {
    width: 24px;
    height: 24px;
    border: 6px solid #fff;
    border-radius: 50%;
    background: #bdcbd0;
    margin: 0 3px;
}

body.public-site .testimonial-carousel .owl-dot.active {
    background: var(--ff-action);
    border-color: #fff;
}

body.public-site .form-control,
body.public-site .form-select,
body.public-site .form-input-modern {
    min-height: 48px;
    border: 1px solid #b9c9d0;
    border-radius: 6px;
    background-color: #fff;
    color: var(--dark);
    font-size: 1rem;
    transition: border-color .2s, box-shadow .2s;
}

body.public-site .form-control:focus,
body.public-site .form-select:focus,
body.public-site .form-input-modern:focus {
    border-color: var(--ff-action);
    box-shadow: 0 0 0 .2rem rgb(0 127 139 / 14%);
}

body.public-site .form-control::placeholder {
    color: #657383;
    opacity: 1;
}

body.public-site .form-label {
    opacity: 1;
    text-transform: none;
    letter-spacing: normal;
    color: var(--dark);
}

body.public-site .form-hint,
body.public-site .form-help {
    color: #596574;
}

body.public-site iframe {
    border-radius: var(--ff-radius);
}

body.public-site .footer {
    color: #d9e1ec;
    border-top: 4px solid var(--primary);
}

body.public-site .footer .container.py-5 {
    background: transparent;
}

body.public-site .footer p {
    color: #d9e1ec;
    font-size: .92rem;
    overflow-wrap: anywhere;
}

body.public-site .footer h4 {
    font-size: 1.2rem;
}

body.public-site .footer .btn.btn-link {
    color: #e9edf4;
    padding: .2rem 0;
    font-size: .93rem;
    letter-spacing: normal;
}

body.public-site .footer .btn.btn-link:hover,
body.public-site .footer .copyright a:hover {
    color: #6de3ed;
    text-decoration: underline;
}

body.public-site .footer .btn.btn-link::before {
    width: auto;
    height: auto;
    left: auto;
    top: auto;
    transform: none;
    background: none;
}

body.public-site .footer .btn.btn-social {
    width: 42px;
    height: 42px;
    border-color: #76859b;
    border-radius: 50%;
}

body.public-site .footer .col-4 img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 4px;
}

body.public-site .footer .copyright {
    font-size: .85rem;
    color: #d9e1ec;
}

body.public-site .back-to-top {
    right: 24px;
    bottom: 24px;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgb(24 29 56 / 18%);
}

@media (min-width: 1200px) {
    body.public-site .navbar .nav-item:focus-within .dropdown-menu,
    body.public-site .navbar .dropdown-menu.show {
        top: 100%;
        transform: none;
        visibility: visible;
        opacity: 1;
    }
}

/* The long school name needs the collapsed layout through tablet landscape. */
@media (max-width: 1199.98px) {
    body.public-site .navbar.navbar-expand-xl {
        flex-wrap: wrap;
        justify-content: space-between;
    }

    body.public-site .navbar .navbar-toggler {
        display: block;
        min-width: 44px;
        min-height: 44px;
        padding: .35rem;
        margin-right: 1rem !important;
        border-color: var(--ff-border);
        border-radius: 6px;
    }

    body.public-site .navbar .navbar-brand {
        width: calc(100% - 84px);
        height: 76px;
        margin-right: 0;
    }

    body.public-site .navbar .navbar-brand h2 {
        font-size: 1.1rem;
    }

    body.public-site .navbar.navbar-expand-xl .navbar-collapse {
        flex-basis: 100%;
        flex-grow: 1;
        padding: 0 1rem 1rem;
        max-height: calc(100dvh - 76px);
        overflow-y: auto;
    }

    body.public-site .navbar .collapse:not(.show) {
        display: none !important;
    }

    body.public-site .navbar .navbar-collapse.show {
        display: block !important;
    }

    body.public-site .navbar .navbar-nav {
        display: flex;
        flex-direction: column;
        align-items: stretch !important;
        padding: .65rem 0 !important;
        border-top: 1px solid var(--ff-border);
    }

    body.public-site .navbar-light .navbar-nav .nav-link {
        padding: .7rem .6rem;
        margin-right: 0;
        font-size: .86rem;
    }

    body.public-site .navbar .navbar-collapse > .btn {
        height: auto;
        min-height: 48px;
        padding: .8rem 1.25rem !important;
        border-radius: 6px;
    }

    body.public-site .navbar .nav-item .dropdown-menu {
        display: none;
        position: static;
        float: none;
        transform: none;
        opacity: 1;
        visibility: visible;
        box-shadow: none;
        border-radius: 6px;
        background: #f8fcfd;
    }

    body.public-site .navbar .nav-item .dropdown-menu.show {
        display: block;
    }
}

/* Content stays visible when an optional library is unavailable. */
body.public-site #spinner { display: none !important; }
body.public-site .navbar.sticky-top { top: 0; }
body.public-site .navbar .navbar-brand h2 { color: #181d38; }
body.public-site .navbar button.nav-link { background: transparent; border: 0; text-align: left; width: 100%; }
body.public-site .navbar .dropdown-toggle::after { content: ''; border: solid currentColor; border-width: 0 2px 2px 0; padding: 3px; display: inline-block; transform: rotate(45deg); margin-left: 9px; vertical-align: .2em; }
body.public-site .ff-picture { display: contents; }
body.public-site .owl-carousel:not(.owl-loaded) { display: block; }
body.public-site .testimonial-carousel:not(.owl-loaded) { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 24px; }
body.public-site .skip-link { position: fixed; top: 8px; left: 8px; z-index: 9999; transform: translateY(-150%); background: #fff; color: #181d38; border: 2px solid #007f8b; padding: .7rem 1rem; }
body.public-site .skip-link:focus { transform: none; }
body.public-site main:focus { outline: none; }
body.public-site .hero-media { background-image: none; }
body.public-site .hero-photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 24%; }
body.public-site .school-hero .owl-carousel-item { display: block; }
body.public-site .school-hero .hero-media { position: absolute; inset: 0; }
body.public-site .school-hero .owl-carousel-item > .position-absolute { background: linear-gradient(90deg, rgb(16 24 49 / 88%) 0%, rgb(16 24 49 / 74%) 40%, rgb(16 24 49 / 15%) 100%) !important; }
body.public-site .school-hero .col-lg-8 { max-width: 690px; }
body.public-site .school-hero h1.display-3 { font-size: clamp(2.3rem, 3.7vw, 3.8rem); }
body.public-site .school-hero p { font-size: 1.05rem !important; }
body.public-site .container-xxl .position-relative.h-100:has(> .ff-picture) { width: 100%; max-width: 100%; min-width: 0; height: auto !important; min-height: 400px; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px; background: #f0fbfc; }
body.public-site .container-xxl .position-relative.h-100 > .ff-picture > img { object-position: center 25%; }
body.public-site .admissions-band { padding: 28px; border: 1px solid #dce8eb; border-left: 4px solid #007f8b; border-radius: 10px; background: #f0fbfc; display: flex; gap: 24px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
body.public-site .admissions-band h3 { font-size: 1.3rem; margin-bottom: .5rem; }
body.public-site .admissions-band p { margin: 0; }
body.public-site .admissions-archive { align-self: center; text-decoration: underline; font-size: .85rem; }
body.public-site .curriculum-links { display: flex; flex-wrap: wrap; gap: 12px; margin-block: 24px; }
body.public-site .curriculum-links .button1 { width: auto; flex: 1 1 200px; padding: 12px; }
body.public-site .card-img-top { aspect-ratio: 3 / 2; object-fit: cover; }
body.public-site .past-event-note { background: rgb(255 255 255 / 12%); border-left: 3px solid #f4cf45; padding: 12px 16px; color: #fff; max-width: 720px; }
body.public-site .event-back-link, body.public-site .event-actions .btn-outline-primary { color: #fff; }
body.public-site .event-actions .btn-outline-primary { border-color: #fff; }
body.public-site .event-actions .btn-outline-primary:hover { color: #181d38; background: #fff; }
body.public-site .video-toggle { position: absolute; bottom: 14px; right: 14px; z-index: 3; background: #181d38; color: #fff; border: 1px solid #fff; border-radius: 6px; padding: 8px 12px; }
body.public-site .video-close { position: absolute; top: 12px; right: 12px; z-index: 2; padding: 12px; background-color: #181d38; }
body.public-site .apply-brand { display: flex; align-items: center; gap: 10px; color: #181d38; font-family: 'Nunito', sans-serif; }
body.public-site .apply-entry-header { background: linear-gradient(120deg, #181d38, #006975); }
body.public-site .apply-entry-header h1, body.public-site .apply-entry-header p { color: #fff; }
body.public-site .apply-entry-card, body.public-site .apply-form-card { border-radius: 10px; border: 1px solid #dce8eb; box-shadow: 0 8px 30px rgb(24 29 56 / 8%); }
body.public-site .form-section-title { color: #006975; }
body.public-site .btn-submit-modern { background: #007f8b; border-radius: 6px; }
body.public-site .form-input-modern { min-width: 0; }
body.public-site .apply-entry-actions .btn { white-space: normal; }
body.public-site .form-group-modern { min-width: 0; }
body.public-site .footer .btn.btn-social { color: #fff; }
body.public-site .footer .btn.btn-social:hover { color: #181d38; background: #fff; }
body.public-site .team-item img { aspect-ratio: 1 / 1; object-fit: cover; }
body.public-site .testimonial-avatar { width: 80px; height: 80px; object-fit: cover; }
@media (max-width: 767.98px) {
    body.public-site .school-hero .owl-carousel-item { min-height: 0; background: #181d38; }
    body.public-site .school-hero .hero-media { position: relative; height: auto; min-height: 0; }
    body.public-site .school-hero .hero-photo { position: static !important; width: 100%; height: auto !important; object-fit: contain; }
    body.public-site .school-hero .owl-carousel-item > .position-absolute { min-height: 0; background: #181d38 !important; padding: 2rem .5rem; }
    body.public-site .school-hero h1.display-3 { font-size: 2.2rem; }
    body.public-site .container-xxl .position-relative.h-100:has(> .ff-picture) { min-height: 280px; }
    body.public-site .apply-topbar-inner { flex-wrap: wrap; }
    body.public-site .apply-content-wrapper { padding: 18px 12px 24px; }
    body.public-site .apply-brand { font-size: .95rem; }
    body.public-site .admissions-band { padding: 22px; }
}

@media (max-width: 767.98px) {
    body.public-site .navbar .navbar-brand h2 {
        max-width: 330px;
        font-size: 1rem;
    }

    body.public-site .header-carousel .owl-carousel-item {
        min-height: 570px;
    }

    body.public-site .header-carousel .owl-carousel-item > .position-absolute {
        padding: 3.5rem .5rem;
        background: linear-gradient(90deg, rgb(16 24 49 / 83%), rgb(16 24 49 / 60%)) !important;
    }

    body.public-site .header-carousel .fs-5 {
        font-size: 1rem !important;
    }

    body.public-site .header-carousel .text-primary {
        font-size: .8rem;
    }

    body.public-site section:is(.our-facts, .online-school, .chooseus, .country-school) {
        background-attachment: scroll;
        padding-top: 64px;
        padding-bottom: 64px;
    }

    body.public-site section:is(.our-facts, .online-school, .chooseus, .country-school) h2 {
        font-size: 1.85rem;
        line-height: 1.3;
        margin-bottom: 1.75rem;
    }

    body.public-site section:is(.our-facts, .online-school) .video {
        margin-left: 0;
    }

    body.public-site .container-xxl > .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    body.public-site .row:is(.g-5, .gx-5) { --bs-gutter-x: 1.5rem; }

    body.public-site .container-xxl p[style*="text-align: justify"] {
        text-align: left !important;
    }

    body.public-site .container > table {
        width: 100% !important;
        margin-left: 0 !important;
        table-layout: fixed;
        overflow-wrap: anywhere;
    }

    body.public-site .container > table td {
        width: auto !important;
    }

    body.public-site .button1 {
        width: 100%;
        margin: .35rem 0;
    }

    body.public-site .open-day-form-card {
        padding: 22px;
    }

    body.public-site .back-to-top {
        right: 16px;
        bottom: 16px;
    }
}

@media (max-width: 359.98px) {
    body.public-site .navbar .navbar-brand h2 {
        font-size: .87rem;
        gap: .45rem;
    }

    body.public-site .navbar #logo_img {
        flex-basis: 32px;
        width: 32px;
        height: 32px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html:has(> body.public-site) {
        scroll-behavior: auto !important;
    }

    body.public-site *,
    body.public-site *::before,
    body.public-site *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    body.public-site .wow {
        visibility: visible !important;
    }

    body.public-site .category a:hover img,
    body.public-site .course-item:hover img,
    body.public-site .team-item:hover img {
        transform: none;
    }
}

/* Compressed public-page photographs; original files remain available. */
body.public-site .page-header { background-image: linear-gradient(rgb(24 29 56 / 82%), rgb(24 29 56 / 82%)), url("../img/refresh/school-performance-5917452aa5-1200.webp"); }
body.public-site .event-detail-hero { background-image: linear-gradient(rgb(24 29 56 / 82%), rgb(24 29 56 / 82%)), url("../img/refresh/school-achievement-d2e5c07c42-1200.webp"); }
body.public-site .open-day-hero { background-image: linear-gradient(rgb(24 29 56 / 82%), rgb(24 29 56 / 82%)), url("../img/refresh/school-performance-5917452aa5-1200.webp"); }
body.public-site section.country-school { background-image: url("../img/refresh/chegutu-campus-ea2b45f4f7-1200.webp"); background-attachment: scroll; }
body.public-site section.online-school { background-image: url("../img/refresh/school-performance-5917452aa5-1200.webp"); background-attachment: scroll; }
body.public-site section.our-facts { background-image: linear-gradient(rgb(24 29 56 / 85%), rgb(24 29 56 / 85%)), url("../img/refresh/school-celebration-041ae46c34-1200.webp"); background-attachment: scroll; }
body.public-site section.our-facts .video { background-image: url("../img/refresh/school-transport-256c6ee420-1200.webp"); }
body.public-site .boarding-header { background-image: linear-gradient(rgb(24 29 56 / 78%), rgb(24 29 56 / 78%)), url("../img/refresh/boarding-banner-b1c05e7bd9-1200.webp") !important; }
@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
body.public-site section.country-school { background-image: image-set(url("../img/refresh/chegutu-campus-ea2b45f4f7-1200.webp") type("image/webp"), url("../img/refresh/chegutu-campus-ea2b45f4f7-1200.jpg") type("image/jpeg")); }
body.public-site section.online-school { background-image: image-set(url("../img/refresh/school-performance-5917452aa5-1200.webp") type("image/webp"), url("../img/refresh/school-performance-5917452aa5-1200.jpg") type("image/jpeg")); }
}
body.public-site .page-header1 { background-image: linear-gradient(rgb(24 29 56 / 82%), rgb(24 29 56 / 82%)), url("../img/refresh/school-performance-5917452aa5-1200.webp"); }

/* Admissions gateway retains the latest campus portal and legacy tracking flows. */
body.public-site .admissions-hero { background: linear-gradient(115deg, #181d38, #101831 58%, #075b65); }
body.public-site .admissions-hero h1:not(.display-3) { color: #fff; font-size: clamp(2.1rem, 4vw, 3.8rem); }
body.public-site .campus-action-primary,
body.public-site .legacy-button { background: #087b86; border-color: #087b86; color: #fff; }
body.public-site .campus-label,
body.public-site .section-eyebrow { color: #08717b; }
body.public-site .campus-icon,
body.public-site .legacy-icon { background: #e4f6f7; color: #08717b; }
body.public-site .legacy-panel { border-top-color: #06bbcc; }
body.public-site .apply-brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; }
body.public-site .apply-brand img { border-radius: 50%; flex: 0 0 40px; }
body.public-site .campus-copy { min-width: 0; }
@media (max-width: 767.98px) {
    body.public-site .admissions-hero { margin: -18px -12px 0; padding: 42px 20px; }
    body.public-site .school-choice-panel, body.public-site .legacy-panel { padding: 22px; }
}

/* Fixed photographs scroll behind public-page content on desktop. */
body.public-site.photo-theme-about { --ff-photo: url("../img/refresh/prize-presentation-c032a1448a-1200.jpg"); }
@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
body.public-site.photo-theme-about { --ff-photo: image-set(url("../img/refresh/prize-presentation-c032a1448a-1200.webp") type("image/webp"), url("../img/refresh/prize-presentation-c032a1448a-1200.jpg") type("image/jpeg")); }
}
body.public-site.photo-theme-academics { --ff-photo: url("../img/refresh/science-introduction-93c71e584a-1200.jpg"); }
@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
body.public-site.photo-theme-academics { --ff-photo: image-set(url("../img/refresh/science-introduction-93c71e584a-1200.webp") type("image/webp"), url("../img/refresh/science-introduction-93c71e584a-1200.jpg") type("image/jpeg")); }
}
body.public-site.photo-theme-boarding { --ff-photo: url("../img/refresh/sports-supporters-240e9f8b52-1200.jpg"); }
@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
body.public-site.photo-theme-boarding { --ff-photo: image-set(url("../img/refresh/sports-supporters-240e9f8b52-1200.webp") type("image/webp"), url("../img/refresh/sports-supporters-240e9f8b52-1200.jpg") type("image/jpeg")); }
}
body.public-site.photo-theme-country { --ff-photo: url("../img/refresh/campus-wide-grounds-3639adceba-1200.jpg"); }
@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
body.public-site.photo-theme-country { --ff-photo: image-set(url("../img/refresh/campus-wide-grounds-3639adceba-1200.webp") type("image/webp"), url("../img/refresh/campus-wide-grounds-3639adceba-1200.jpg") type("image/jpeg")); }
}
body.public-site.photo-theme-contact { --ff-photo: url("../img/refresh/prize-awards-65430ee0fc-1200.jpg"); }
@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
body.public-site.photo-theme-contact { --ff-photo: image-set(url("../img/refresh/prize-awards-65430ee0fc-1200.webp") type("image/webp"), url("../img/refresh/prize-awards-65430ee0fc-1200.jpg") type("image/jpeg")); }
}
body.public-site.photo-theme-team { --ff-photo: url("../img/refresh/prize-stage-group-f897fca772-1200.jpg"); }
@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
body.public-site.photo-theme-team { --ff-photo: image-set(url("../img/refresh/prize-stage-group-f897fca772-1200.webp") type("image/webp"), url("../img/refresh/prize-stage-group-f897fca772-1200.jpg") type("image/jpeg")); }
}
body.public-site.photo-theme-apply1 { --ff-photo: url("../img/refresh/admissions-family-6081e60d36-1200.jpg"); }
@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
body.public-site.photo-theme-apply1 { --ff-photo: image-set(url("../img/refresh/admissions-family-6081e60d36-1200.webp") type("image/webp"), url("../img/refresh/admissions-family-6081e60d36-1200.jpg") type("image/jpeg")); }
}
body.public-site.photo-theme-apply { --ff-photo: url("../img/refresh/admissions-school-c41510d63b-1200.jpg"); }
@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
body.public-site.photo-theme-apply { --ff-photo: image-set(url("../img/refresh/admissions-school-c41510d63b-1200.webp") type("image/webp"), url("../img/refresh/admissions-school-c41510d63b-1200.jpg") type("image/jpeg")); }
}
body.public-site.photo-theme-openday { --ff-photo: url("../img/refresh/school-visit-banner-d3d2cbeae2-1200.jpg"); }
@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
body.public-site.photo-theme-openday { --ff-photo: image-set(url("../img/refresh/school-visit-banner-d3d2cbeae2-1200.webp") type("image/webp"), url("../img/refresh/school-visit-banner-d3d2cbeae2-1200.jpg") type("image/jpeg")); }
}
body.public-site.photo-theme-event-open-day-2027 { --ff-photo: url("../img/refresh/school-event-banner-f4cc143a5c-1200.jpg"); }
@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
body.public-site.photo-theme-event-open-day-2027 { --ff-photo: image-set(url("../img/refresh/school-event-banner-f4cc143a5c-1200.webp") type("image/webp"), url("../img/refresh/school-event-banner-f4cc143a5c-1200.jpg") type("image/jpeg")); }
}
body.public-site.photo-theme-web-development { --ff-photo: url("../img/refresh/creative-study-0d4f8b52d5-1200.jpg"); }
@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
body.public-site.photo-theme-web-development { --ff-photo: image-set(url("../img/refresh/creative-study-0d4f8b52d5-1200.webp") type("image/webp"), url("../img/refresh/creative-study-0d4f8b52d5-1200.jpg") type("image/jpeg")); }
}
body.public-site.photo-theme-graphic-design { --ff-photo: url("../img/refresh/creative-expression-a1ac1b0882-1200.jpg"); }
@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
body.public-site.photo-theme-graphic-design { --ff-photo: image-set(url("../img/refresh/creative-expression-a1ac1b0882-1200.webp") type("image/webp"), url("../img/refresh/creative-expression-a1ac1b0882-1200.jpg") type("image/jpeg")); }
}
body.public-site.photo-theme-digital-marketing { --ff-photo: url("../img/refresh/student-voice-3b69e56008-1200.jpg"); }
@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
body.public-site.photo-theme-digital-marketing { --ff-photo: image-set(url("../img/refresh/student-voice-3b69e56008-1200.webp") type("image/webp"), url("../img/refresh/student-voice-3b69e56008-1200.jpg") type("image/jpeg")); }
}
body.public-site.photo-theme-onlineschool { --ff-photo: url("../img/refresh/online-community-a5067ee310-1200.jpg"); }
@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
body.public-site.photo-theme-onlineschool { --ff-photo: image-set(url("../img/refresh/online-community-a5067ee310-1200.webp") type("image/webp"), url("../img/refresh/online-community-a5067ee310-1200.jpg") type("image/jpeg")); }
}
body.public-site.photo-theme-gallery { --ff-photo: url("../img/refresh/school-gallery-c5a4858cb0-1200.jpg"); }
@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
body.public-site.photo-theme-gallery { --ff-photo: image-set(url("../img/refresh/school-gallery-c5a4858cb0-1200.webp") type("image/webp"), url("../img/refresh/school-gallery-c5a4858cb0-1200.jpg") type("image/jpeg")); }
}
body.public-site .photo-backdrop {
    background-image: linear-gradient(rgb(16 24 49 / 74%), rgb(16 24 49 / 74%)), var(--ff-photo) !important;
    background-position: center 28%;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: scroll;
}
body.public-site .our-facts.photo-backdrop { --ff-photo: image-set(url("../img/refresh/prize-trophies-32a1e53e5d-1200.webp") type("image/webp"), url("../img/refresh/prize-trophies-32a1e53e5d-1200.jpg") type("image/jpeg")); }
@media (min-width: 992px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    body.public-site .photo-backdrop { background-attachment: fixed !important; }
}
@media (max-width: 991.98px), (prefers-reduced-motion: reduce), (hover: none) {
    body.public-site .photo-backdrop { background-attachment: scroll !important; }
}
body.public-site section.country-school.photo-backdrop::before { background: transparent; }

/* Album navigation and photographs use the school's existing public styles. */
body.public-site .gallery-preview-actions {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    padding: 1.5rem; margin-top: 1.5rem; background: #f0fbfc;
    border: 1px solid var(--ff-border); border-radius: var(--ff-radius);
}
body.public-site .gallery-preview-actions > div { flex: 1 1 300px; }
body.public-site .gallery-preview-actions p { margin: 0; }
body.public-site .footer-gallery-link { display: inline-block; color: #fff; margin-bottom: .7rem; text-decoration: underline; text-underline-offset: 4px; }
body.public-site .gallery-intro { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
body.public-site .gallery-intro p { margin: .6rem 0 0; max-width: 690px; }
body.public-site .album-total { color: #526070; font-weight: 600; }
body.public-site .album-grid, body.public-site .album-photo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
body.public-site .album-card { display: flex; flex-direction: column; overflow: hidden; background: #fff; color: var(--dark); border: 1px solid var(--ff-border); border-radius: var(--ff-radius); text-decoration: none; transition: box-shadow .2s ease, border-color .2s ease; }
body.public-site .album-card:hover { border-color: #007f8b; box-shadow: 0 8px 25px rgb(24 29 56 / 10%); }
body.public-site .album-cover { position: relative; background: #f0fbfc; }
body.public-site .album-cover img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: center 30%; }
body.public-site .album-count { position: absolute; left: .8rem; bottom: .8rem; background: #181d38; color: #fff; padding: .3rem .7rem; border-radius: 5px; font-size: .8rem; }
body.public-site .album-card-copy { display: flex; flex: 1; flex-direction: column; padding: 1.25rem; }
body.public-site .album-card h3 { font-size: 1.25rem; }
body.public-site .album-card p { color: #526070; font-size: .95rem; }
body.public-site .album-open { color: #007f8b; font-weight: 700; margin-top: auto; }
body.public-site .gallery-note { color: #526070; font-size: .95rem; }
body.public-site .album-photo { margin: 0; border-radius: var(--ff-radius); border: 1px solid var(--ff-border); overflow: hidden; background: #fff; }
body.public-site .album-photo > a { display: block; position: relative; background: #f0fbfc; }
body.public-site .album-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; }
body.public-site .album-photo figcaption { padding: 1rem; color: #465365; font-size: .9rem; line-height: 1.55; }
body.public-site .photo-view-label { position: absolute; right: .7rem; bottom: .7rem; color: #fff; background: #181d38; border-radius: 5px; padding: .3rem .6rem; font-size: .8rem; }
body.public-site .photo-lightbox { width: min(1100px, 94vw); max-height: 92dvh; padding: 1rem; border: 0; border-radius: 10px; color: #fff; background: #101831; overflow-y: auto; overscroll-behavior: contain; }
body.public-site .photo-lightbox::backdrop { background: rgb(0 0 0 / 85%); }
body.public-site .lightbox-topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
body.public-site .lightbox-media img { display: block; max-width: 100%; max-height: 60dvh; width: auto; height: auto; object-fit: contain; margin: auto; }
body.public-site #lightbox-caption { color: #fff; margin: 1rem 0; line-height: 1.5; }
body.public-site .lightbox-controls { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
body.public-site .photo-lightbox button { min-height: 44px; border: 1px solid #8795aa; border-radius: 6px; color: #fff; background: #24334e; padding: .5rem 1rem; }
body.public-site .photo-lightbox button:focus-visible { outline: 3px solid #6de3ed !important; outline-offset: 3px; }
@media (max-width: 991.98px) {
    body.public-site .album-grid, body.public-site .album-photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    body.public-site .album-grid, body.public-site .album-photo-grid { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
    body.public-site .gallery-preview-actions { padding: 1.2rem; }
    body.public-site .gallery-preview-actions .btn { flex: 1 1 100%; }
}

/* Additional homepage photographs retain the familiar navy and turquoise palette. */
body.public-site .photo-story-band { min-height: 410px; display: flex; align-items: center; padding: 76px 0; margin: 24px 0; background-position: center 35%; }
body.public-site .photo-story-copy { max-width: 660px; color: #fff; }
body.public-site .photo-story-copy h2 { color: #fff; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.15; margin-bottom: 1.2rem; }
body.public-site .photo-story-copy p { color: #fff; font-size: 1.1rem; max-width: 570px; }
body.public-site .photo-story-copy .photo-story-label { color: #84e8f1; font-size: .85rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
body.public-site .school-video-card { margin: 28px 0; padding: 24px; border-radius: 12px; background: #101831; color: #fff; }
body.public-site .school-video-card h2 { font-size: 1.8rem; margin: 0 0 20px; color: #fff; }
body.public-site .school-video-player { position: relative; }
body.public-site .school-video-player video { display: block; width: 100%; height: auto; aspect-ratio: 636 / 360; object-fit: contain; background: #000; border-radius: 8px; }
body.public-site .school-video-play { position: absolute; inset: 0; margin: auto; width: max-content; max-width: 90%; height: 60px; padding: 0 24px; border: 2px solid #fff; border-radius: 40px; background: #087b86; color: #fff; font-weight: 700; box-shadow: 0 5px 24px rgb(0 0 0 / 35%); }
body.public-site .school-video-play[hidden] { display: none; }
body.public-site .school-video-play span { margin-right: 10px; }
body.public-site .school-video-card p { color: #fff; margin: 16px 0 8px; }
body.public-site .school-video-card [role="status"]:empty { display: none; }
body.public-site .school-video-link { color: #84e8f1; text-decoration: underline; text-underline-offset: 4px; }
/* Clip only animated horizontal travel; vertical content and focus remain accessible. */
body.public-site main.has-scroll-motion { overflow-x: clip; }
@media (max-width: 767.98px) {
    body.public-site .photo-story-band { min-height: 330px; padding: 52px 0; margin: 12px 0; }
    body.public-site .photo-story-copy { padding: 0 12px; }
    body.public-site .school-video-card { padding: 20px; }
    body.public-site .school-video-play { font-size: .9rem; height: 52px; padding: 0 16px; }
}
body.public-site .photo-story-values { --ff-photo: url("../img/refresh/prize-choir-a5551c2a4c-1200.jpg"); }
@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
body.public-site .photo-story-values { --ff-photo: image-set(url("../img/refresh/prize-choir-a5551c2a4c-1200.webp") type("image/webp"), url("../img/refresh/prize-choir-a5551c2a4c-1200.jpg") type("image/jpeg")); }
}
body.public-site .photo-story-sports { --ff-photo: url("../img/refresh/sports-high-jump-a41a7790ef-1200.jpg"); }
@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
body.public-site .photo-story-sports { --ff-photo: image-set(url("../img/refresh/sports-high-jump-a41a7790ef-1200.webp") type("image/webp"), url("../img/refresh/sports-high-jump-a41a7790ef-1200.jpg") type("image/jpeg")); }
}
body.public-site .photo-story-campus { --ff-photo: url("../img/refresh/campus-overhead-97e07963f3-1200.jpg"); }
@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
body.public-site .photo-story-campus { --ff-photo: image-set(url("../img/refresh/campus-overhead-97e07963f3-1200.webp") type("image/webp"), url("../img/refresh/campus-overhead-97e07963f3-1200.jpg") type("image/jpeg")); }
}
body.public-site .photo-story-learning { --ff-photo: url("../img/refresh/science-demonstration-ff7e1397df-1200.jpg"); }
@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
body.public-site .photo-story-learning { --ff-photo: image-set(url("../img/refresh/science-demonstration-ff7e1397df-1200.webp") type("image/webp"), url("../img/refresh/science-demonstration-ff7e1397df-1200.jpg") type("image/jpeg")); }
}

body.public-site .photo-story-band { background-image: linear-gradient(90deg, rgb(16 24 49 / 84%), rgb(16 24 49 / 62%) 48%, rgb(16 24 49 / 28%)), var(--ff-photo) !important; }
@media (max-width: 767.98px) {
    body.public-site .photo-story-band {
        min-height: 470px;
        align-items: flex-end;
        padding: 190px 0 40px;
        background-position: center 28%;
        background-image: linear-gradient(0deg, rgb(16 24 49 / 94%), rgb(16 24 49 / 64%) 55%, rgb(16 24 49 / 16%)), var(--ff-photo) !important;
    }
}