/* ==========================================================
   GLOBAL
========================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    background: var(--background);
    color: var(--text);
    line-height: 1.6;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
}

button,
input,
textarea,
select {
    font: inherit;
}

.site-container {
    width: min(100% - 42px, 1400px);
    margin-inline: auto;
}

.section {
    padding: 70px 0;
}


/* ==========================================================
   ANNOUNCEMENT
   Matched to supplied reference
========================================================== */

.announcement-bar {
    height: 36px;
    min-height: 36px;

    background: var(--primary);
    color: var(--secondary);
}

.announcement-inner {
    height: 36px;
    min-height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;
    font-weight: 500;
    font-size: 12px;
    line-height: 1;
}

.announcement-text {
    display: flex;
    align-items: center;

    gap: 6px;

    white-space: nowrap;
}

.announcement-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: #D9E0FF;

    font-size: 12px;
    line-height: 1;
}
.announcement-icon {
    width: 14px;
    height: 14px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;
}

.announcement-icon img {
    width: 14px;
    height: 14px;

    display: block;

    object-fit: contain;
}

.announcement-action {
    position: absolute;

    right: 0;
    top: 50%;

    display: inline-flex;
    align-items: center;

    gap: 4px;

    transform: translateY(-50%);

    color: var(--accent);

    font-size: 12px;
    line-height: 1;

    font-weight: 600;

    white-space: nowrap;
}


/* ==========================================================
   NAVBAR
   Matched to supplied reference
========================================================== */

.site-header {
    height: 76px;

    background: var(--surface);

    border-bottom:
        1px solid #e5e5e5;

    position: sticky;

    top: 0;

    z-index: 1000;
}

.navbar {
    height: 76px;
    min-height: 76px;

    display: flex;
    align-items: center;

    gap: 0;
}

.navbar-brand {
    flex: 0 0 216px;

    display: flex;
    align-items: center;

    gap: 9px;

    padding-left: 19px;
}

.navbar-logo {
    width: 52px;
    height: 48px;

    flex: 0 0 52px;

    display: grid;
    place-items: center;

    overflow: hidden;

    border-radius: 50%;

    background: var(--primary);
    color: var(--secondary);

    font-size: 20px;
    line-height: 1;

    font-weight: 700;
}

.navbar-logo img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.navbar-brand-text {
    min-width: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;

    line-height: 1.15;
}

.navbar-brand-text strong {
    color: var(--primary);

    font-size: 17px;
    line-height: 1.2;

    font-weight: 700;

    white-space: nowrap;
}

.navbar-brand-text small {
    margin-top: 2px;

    color: #6B7288;

    font-size: 10px;
    font-weight: 400;
    line-height: 1.2;

    white-space: nowrap;
}

.navbar-links {
    min-width: 0;

    flex: 1 1 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 0;

    margin-left: 50px;
    margin-right: 97px;
}

.navbar-links a {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: var(--text);

    font-size: 13px;
    line-height: 1;

    font-weight: 500;

    white-space: nowrap;

    transition:
        color .2s ease;
}

.navbar-links a:hover {
    color: var(--accent);
}

.navbar-links a.active {
    color: var(--primary);
}

.navbar-links a.active::after {
    content: '';

    position: absolute;

    left: 0;
    right: 0;

    bottom: -16px;

    height: 3px;

    border-radius: 999px;

    background: var(--accent);
}

.portal-login-btn {
    width: 108px;
    height: 36px;

    flex: 0 0 82px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 10px;

    border-radius: 6px;

    background: var(--primary);
    color: var(--secondary);

    font-size: 13px;
    line-height: 1;

    font-weight: 600;

    white-space: nowrap;

    transition:
        transform .2s ease,
        opacity .2s ease;
}

.portal-login-btn:hover {
    transform: translateY(-1px);
    opacity: .95;
}

.mobile-menu-btn {
    display: none;

    width: 36px;
    height: 36px;

    align-items: center;
    justify-content: center;

    margin-left: auto;

    border: 0;

    background: transparent;
    color: var(--primary);

    font-size: 24px;
    line-height: 1;

    cursor: pointer;
}


/* ==========================================================
   HERO
========================================================== */

.hero-section {
    padding: 20px 0 0;
    background: var(--background);
}


.hero {
    min-height: 460px;

    display: grid;
    grid-template-columns: 1.45fr .98fr;

    background: var(--primary);
    color: var(--secondary);

    overflow: hidden;

    border: 1px solid var(--border);
    margin-bottom: 20px;
}


.hero-content {
    padding: 30px 58px 28px 58px;

    display: flex;
    flex-direction: column;
    justify-content: center;
}


/* ==========================================================
   HERO BADGE
========================================================== */

.hero-badge {
    width: fit-content;

    margin-bottom: 14px;

    padding: 6px 14px;

    border-radius: 999px;

    background:
        color-mix(
            in srgb,
            var(--accent) 18%,
            transparent
        );

    color: var(--accent);

    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}


/* ==========================================================
   HERO TITLE
========================================================== */

.hero h1 {
    max-width: 520px;

    margin: 0;

    color: var(--secondary);

    font-size: 54px;
    font-weight: 800;

    line-height: .98;

    letter-spacing: -2px;
}


.hero-title-line {
    display: block;

    width: 200px;
    height: 4px;

    margin-top: 14px;

    border-radius: 999px;

    background: var(--accent);
}


/* ==========================================================
   HERO DESCRIPTION
========================================================== */

.hero-description {
    max-width: 500px;

    margin-top: 12px;

    color:
        color-mix(
            in srgb,
            var(--secondary) 78%,
            transparent
        );

    font-size: 15px;
    font-weight: 400;

    line-height: 1.25;
}


/* ==========================================================
   HERO ACTIONS
========================================================== */

.hero-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 14px;

    margin-top: 28px;
}


.hero-actions .btn {
    height: 52px;

    min-width: 170px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 20px;

    border-radius: 8px;

    font-size: 13px;
    font-weight: 600;

    line-height: 1;

    transition:
        transform .2s ease,
        opacity .2s ease;
}


.hero-actions .btn:hover {
    transform: translateY(-1px);
}


/* PRIMARY HERO BUTTON */

.hero-actions .btn-accent {
    background: var(--accent);
    color: var(--primary);
}


/* SECONDARY HERO BUTTONS */

.hero-actions .btn-soft {
    background:
        color-mix(
            in srgb,
            var(--secondary) 32%,
            var(--primary)
        );

    color: var(--secondary);
}


/* ==========================================================
   HERO MEDIA
========================================================== */

.hero-media {
    min-height: 420px;

    position: relative;

    overflow: hidden;
 border-radius: 15px;
    background: var(--primary-light);
    margin-top: 40px;
}


.hero-main-image {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* ==========================================================
   FLOATING IMAGE CARDS
========================================================== */

.hero-float-card {
    position: absolute;

    z-index: 4;

    overflow: hidden;

    border:
        2px solid
        color-mix(
            in srgb,
            var(--accent) 85%,
            transparent
        );

    border-radius: 12px;

    background: var(--primary-light);

    box-shadow:
        0 14px 28px rgba(0, 0, 0, .18);
}


.hero-float-card img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* ==========================================================
   FLOATING CARD DECORATION
========================================================== */

.hero-float-ui {
    width: 36px;
    height: 8px;

    position: absolute;

    top: 8px;
    left: 8px;

    z-index: 5;

    border-radius: 999px;

    background:
        linear-gradient(
            to right,

            var(--accent) 0 35%,

            color-mix(
                in srgb,
                var(--secondary) 45%,
                var(--primary-light)
            ) 35% 65%,

            color-mix(
                in srgb,
                var(--secondary) 45%,
                transparent
            ) 65% 100%
        );
}


/* ==========================================================
   TOP RIGHT FLOATING IMAGE
========================================================== */

.hero-float-top {
    width: 160px;
    height: 108px;

    top: 14px;
    right: 0;

    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}


/* ==========================================================
   LEFT FLOATING IMAGE
========================================================== */

.hero-float-middle {
    width: 160px;
    height: 108px;

    left: 14px;
    top: 180px;
}


/* ==========================================================
   HERO STATS
========================================================== */

.hero-stats {
    min-height: 100px;

    position: absolute;

    left: 14px;
    right: 14px;
    bottom: 14px;

    z-index: 3;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    overflow: hidden;

    border-radius:14px;

    background:  var(--primary);

    box-shadow:
        0 12px 24px
        rgba(0, 0, 0, .14);
}


.hero-stat {
    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    padding: 10px 8px;

    text-align: center;
}


.hero-stat strong {
    color: var(--secondary);

    font-size: 18px;
    font-weight: 700;

    line-height: 1.1;
}


.hero-stat span {
    margin-top: 3px;

    color:
        color-mix(
            in srgb,
            var(--secondary) 78%,
            transparent
        );

    font-size: 11px;
     font-weight: 600;
    line-height: 1.1;
}


/* ==========================================================
   HERO RESPONSIVE
========================================================== */


/* ==========================================================
   SCHOOL STATISTICS
========================================================== */

.school-statistics {
    background: var(--surface);
}

.statistics-grid {
    min-height: 92px;

    display: grid;

    grid-template-columns:
        repeat(6, 1fr);

    align-items: center;
}

.statistics-item {
    text-align: center;

    border-right:
        1px solid var(--border);
}

.statistics-item:last-child {
    border-right: 0;
}

.statistics-item strong {
    display: block;

    color: var(--primary);

    font-size: 26px;

    font-weight: 700;
}

.statistics-item span {
    display: block;

    margin-top: 3px;

    color: var(--muted);
    font-weight: 400;
    font-size: 11px;
}


/* ==========================================================
   SECTION HEADINGS
========================================================== */

.section-heading h2,
.section-heading-row h2,
.about-content h2 {
    margin: 0;

    color: var(--primary);

    font-size: 28px;
    font-weight: 700;

    line-height: 1.1;

    letter-spacing: -0.45px;
}


.section-heading p {
    margin-top: 5px;

    color: var(--muted);

    font-size: 14px;
    font-weight: 400;

    line-height: 1.4;
}


.section-heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 22px;
}


.section-eyebrow {
    display: block;

    margin-bottom: 8px;

    color: var(--accent);

    font-size: 9px;
    font-weight: 700;
}



/* ==========================================================
   WHY CHOOSE US
========================================================== */

.why-choose-section {
    /*
        Override the generic .section padding.
        This is important for matching the screenshot.
    */
    padding: 27px 0 22px;

    background: var(--cream);
}
.why-choose-section .site-container {
    width: min(calc(100% - 110px), 1320px);
    margin-inline: auto;
    height: 270px;
}


/* HEADING */

.why-heading {
    margin: 0;
}


.why-heading h2 {
    color: var(--primary);

    font-size: 20px;
    font-weight: 700;

    line-height: 1.1;

    letter-spacing: -0.4px;
    margin-top: 15px;
}



.why-heading p {
    max-width: 700px;

    margin-top: 15px;

    color: var(--muted);

    font-size: 15px;

    line-height: 1.4;
}



/* ==========================================================
   CARD GRID
========================================================== */

.why-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 18px;

    margin-top: 15px;
}



/* ==========================================================
   CARD
========================================================== */

.why-card {
    min-width: 0;
    min-height: 158px;

    position: relative;

    padding: 11px 12px 9px;

    overflow: hidden;

    border-top:
        5px solid var(--accent);

    border-radius: 10px;

    background: var(--surface);

    box-shadow:
        0 5px 15px rgba(0, 0, 0, .06);
}



/* ==========================================================
   CARD HEADER
========================================================== */

.why-card-header {
    display: flex;
    align-items: center;

    gap: 16px;
}



/* ICON */

.why-icon {
    width: 52px;
    height: 52px;

    min-width: 52px;
    min-height: 52px;

    flex: 0 0 52px;

    display: grid;
    place-items: center;

    border-radius: 12px;

    background: var(--primary);
    color: var(--secondary);
}

.why-icon span {
    display: block;

    font-size: 25px;

    line-height: 1;
}



/* CARD TITLE */

.why-card h3 {
    margin: 0;

    color: var(--primary);

    font-size: 14px;
    font-weight: 600;

    line-height: 1.25;
}


/* ==========================================================
   CARD DESCRIPTION
========================================================== */

.why-card > p {
    min-height: 40px;

    margin-top: 9px;
    margin-bottom: 0;

    color: var(--muted);

    font-size: 12px;
    font-weight: 400;

    line-height: 1.35;
}



/* ==========================================================
   LEARN MORE BUTTON
========================================================== */

.why-learn-more {
    width: fit-content;

    min-height: 28px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 3px;

    margin-top: 3px;

    padding: 2px 8px;

    border-radius: 6px;

    background:
       #EDF2FF;
    color:
       #1A3FD4;

    font-size: 13px;
    font-weight: 600;

    line-height: 1;

    transition:
        background .2s ease,
        transform .2s ease;
}


.why-learn-more span {
    font-size: 9px;
}

.why-learn-more-icon {
    width: 13px;
    height: 13px;

    position: relative;

    display: inline-block;
}

.why-learn-more-icon::before {
    content: '';

    position: absolute;

    width: 7px;
    height: 2px;

    background: #2d55d4;

    top: 50%;
    left: 2px;

    transform: translateY(-50%);

    border-radius: 2px;
}

.why-learn-more-icon::after {
    content: '';

    position: absolute;

    width: 5px;
    height: 5px;

    top: 50%;
    right: 2px;

    border-top: 2px solid #2d55d4;
    border-right: 2px solid #2d55d4;

    transform:
        translateY(-50%)
        rotate(45deg);
}

.why-learn-more:hover {
    transform: translateX(1px);

    background:
        color-mix(
            in srgb,
            var(--primary) 12%,
            var(--surface)
        );
}



/* ==========================================================
   RESPONSIVE
========================================================== */


/* ==========================================================
   ABOUT
========================================================== */

.about-section {
    padding: 30px 0;
    background: var(--surface);
}

.about-section .site-container {
    width: min(calc(100% - 100px), 1360px);
    margin-inline: auto;
}

.about-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 34px;
    align-items: center;
}


/* ==========================================================
   LEFT CONTENT
========================================================== */

.about-content {
    min-width: 0;
}

.about-eyebrow {
    width: fit-content;
    position: relative;
    display: block;
    margin-bottom: 19px;
    color: var(--accent);
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
}

.about-eyebrow::after {
    content: '';
    width: 78px;
    height: 2px;
    position: absolute;
    left: 0;
    bottom: -8px;
    border-radius: 999px;
    background: var(--accent);
}

.about-content h2 {
    max-width: 430px;
    margin: 0;
    color: var(--primary);
    font-size: 32px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -1px;
}

.about-description {
    max-width: 560px;
    margin-top: 18px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
}

.about-button {
    width: fit-content;
    min-width: 180px;
    height: 44px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 5px;

    margin-top: 18px;
    padding: 0 18px;

    border-radius: 8px;

    background: var(--primary);
    color: var(--secondary);

    font-size: 13px;
    font-weight: 600;
    line-height: 1;

    transition:
        transform .2s ease,
        opacity .2s ease;
}

.about-button:hover {
    transform: translateY(-1px);
    opacity: .95;
}


/* ==========================================================
   RIGHT MEDIA
========================================================== */

.about-media {
    min-height: 430px;

    position: relative;

    overflow: hidden;

    border-radius: 22px;

    background: var(--primary);
}

.about-media > img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.about-overlay {
    position: absolute;

    inset: 0;

    background:
        color-mix(
            in srgb,
            var(--primary) 62%,
            transparent
        );
}


/* ==========================================================
   TOP HEADING INSIDE IMAGE
========================================================== */

.about-media-header {
    position: absolute;

    top: 18px;
    left: 34px;
    right: 34px;

    z-index: 3;
}

.about-media-header h3 {
    margin: 0;

    color: #172243;

    font-size: 14px;
    font-weight: 600;

    line-height: 1.1;
}

.about-media-line {
    height: 2px;

    margin-top: 10px;

    border-radius: 999px;

    background:
        rgba(255, 255, 255, .65);
}


/* ==========================================================
   INFO GRID
========================================================== */

.about-info-grid {
    position: absolute;

    left: 34px;
    right: 34px;

    top: 70px;
    bottom: 28px;

    z-index: 3;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    grid-template-rows:
        repeat(4, minmax(0, 1fr));

    gap: 14px 30px;
}


/* ==========================================================
   INFO CARD
========================================================== */

.about-info-card {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 14px;

    padding: 10px 18px;

    border-radius: 16px;

    background:
        rgba(255, 255, 255, .95);

    box-shadow:
        0 2px 8px rgba(0, 0, 0, .05);
}


/* ==========================================================
   INFO ICON
========================================================== */

.about-info-icon {
    width: 28px;
    height: 28px;

    min-width: 28px;

    flex: 0 0 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 18px;

    line-height: 1;
}


/* ==========================================================
   INFO TEXT
========================================================== */

.about-info-content {
    min-width: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.about-info-card small {
    display: block;

    margin: 0;

    color: #6B7387;

    font-size: 10px;
    font-weight: 400;

    line-height: 1.1;
}

.about-info-card strong {
    display: block;

    margin-top: 8px;

    color: #202842;

    font-size: 12px;
    font-weight: 600;

    line-height: 1.1;
}

/* ==========================================================
   RESPONSIVE
========================================================== */


/* ==========================================================
   MISSION
========================================================== */

.mission-section {
    background: var(--primary);
    color: var(--secondary);

    border-left: 5px solid var(--accent);
}


.mission-section .site-container {
    width: min(calc(100% - 100px), 1360px);
    margin-inline: auto;
}


.mission-grid {
    min-height: 160px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr) 305px;

    align-items: center;

    gap: 110px;

    padding-top: 18px;
    padding-bottom: 18px;
}


/* LEFT SIDE */

.mission-content {
    align-self: start;

    padding-top: 4px;
}


.mission-title {
    width: fit-content;

    position: relative;

    display: block;

    margin-bottom: 15px;

    color: var(--accent);

    font-size: 11px;
    font-weight: 600;

    line-height: 1;
}


.mission-title::after {
    content: '';

    width: 52px;
    height: 2px;

    position: absolute;

    left: 0;
    bottom: -7px;

    border-radius: 999px;

    background: var(--accent);
}


.mission-content > p {
    max-width: 1200px;

    margin: 0;

    color:
        color-mix(
            in srgb,
            var(--secondary) 83%,
            transparent
        );

font-size: 15px;
    font-weight: 400;

    line-height: 1.3;
}


/* QUOTE */

.mission-quote {
    min-height: 112px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    margin: 0;

    padding: 17px 18px;

    border-radius: 12px;

    background:
        var(--secondary1);

    color: var(--secondary);
}


.mission-quote p {
    margin: 0;

    color:
        color-mix(
            in srgb,
            var(--secondary) 69%,
            transparent
        );

    font-size: 13px;
    font-weight: 400;

    line-height: 1.3;
}


.mission-quote strong {
    display: block;

    margin-top: 18px;

    color: var(--accent);

    font-size: 11px;
    font-weight: 600;

    line-height: 1;
}



/* ==========================================================
   EVENTS
========================================================== */

.events-section {
    padding: 24px 0 26px;

    background: var(--secondary1);

    color: var(--secondary);
}


.events-section .site-container {
    width: min(calc(100% - 100px), 1360px);
    margin-inline: auto;
}



/* ==========================================================
   EVENTS HEADING
========================================================== */

.events-heading-row {
    display: flex;

    align-items: center;
    justify-content: space-between;

    margin-bottom: 15px;
}


.events-heading-row h2 {
    margin: 0;

    color: var(--secondary);

    font-size: 24px;
    font-weight: 700;

    line-height: 1.1;
}


.view-all-btn {
    min-width: 76px;
    height: 34px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 0 14px;

    border-radius: 9px;

    background:
        color-mix(
            in srgb,
            var(--secondary) 16%,
            transparent
        );

    color: var(--secondary);

    font-size: 13px;
    font-weight: 600;

    line-height: 1;

    transition:
        background .2s ease,
        transform .2s ease;
}


.view-all-btn:hover {
    transform: translateY(-1px);

    background:
        color-mix(
            in srgb,
            var(--secondary) 22%,
            transparent
        );
}



/* ==========================================================
   EVENTS GRID
========================================================== */

.events-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 27px;
}



/* ==========================================================
   EVENT CARD
========================================================== */

.event-card {
    min-width: 0;
    min-height: 160px;

    position: relative;

    display: flex;
    flex-direction: column;

    padding: 14px 13px 12px;

    overflow: hidden;

    border-top:
        4px solid var(--accent);

    border-radius: 10px;

    background:
        color-mix(
            in srgb,
            var(--primary-light) 88%,
            black
        );
}



/* ==========================================================
   EVENT HEADER
========================================================== */

.event-header {
    display: flex;

    align-items: flex-start;

    gap: 12px;
}



/* DATE BOX */

.event-date {
    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background:
        color-mix(
            in srgb,
            var(--primary-light) 75%,
            white
        );

    text-align: center;
}


.event-date span {
    display: block;

    padding: 0;

    background: transparent;

    color: var(--accent);

    font-size: 16px;
    font-weight: 700;

    line-height: 1;
}


.event-date strong {
    display: block;

    margin-top: 5px;
    padding: 0;

    background: transparent;

    color:
        color-mix(
            in srgb,
            var(--secondary) 35%,
            transparent
        );

    font-size: 9px;
    font-weight: 400;

    line-height: 1;
}



/* ==========================================================
   EVENT TITLE
========================================================== */

.event-info {
    min-width: 0;

    padding-top: 2px;
}


.event-card h3 {
    margin: 0;

    color: var(--secondary);

    font-size: 13px;
    font-weight: 600;

    line-height: 1.25;
}



/* ==========================================================
   EVENT BADGES
========================================================== */

.event-badge {
    min-width: 70px;

    min-height: 18px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    margin-top: 9px;

    padding: 2px 9px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 600;

    line-height: 1;
}


/* Academic */

.event-badge.academic {
    background: #eef2ff;
    color: #3155db;
}


/* Event */

.event-badge.event {
    background: #f0eaff;
    color: #7854c7;
}


/* Sports */

.event-badge.sports {
    background: #e5f8ef;
    color: #349765;
}



/* ==========================================================
   EVENT DESCRIPTION
========================================================== */

.event-description {
    min-height: 36px;

    margin: 15px 0 0;

    color:
        color-mix(
            in srgb,
            var(--secondary) 58%,
            transparent
        );

    font-size: 12px;
    font-weight: 400;

    line-height: 1.3;
}



/* ==========================================================
   READ MORE BUTTON
========================================================== */

.event-read-more {
    width: fit-content;
    min-width: 120px;
    height: 28px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 5px;

    margin-top: auto;

    padding: 0 12px;

    border-radius: 5px;

    background:
       var(--secondary2);

    color: var(--secondary);

    font-size: 13px;
    font-weight: 600;

    line-height: 1;

    transition:
        transform .2s ease,
        opacity .2s ease;
}


.event-read-more:hover {
    transform: translateX(1px);
    opacity: .92;
}



/* ==========================================================
   SHORT ARROW
========================================================== */

.event-short-arrow {
    width: 12px;
    height: 12px;

    position: relative;

    display: inline-block;
}


.event-short-arrow::before {
    content: '';

    width: 6px;
    height: 1px;

    position: absolute;

    left: 2px;
    top: 50%;

    background: currentColor;

    transform: translateY(-50%);
}


.event-short-arrow::after {
    content: '';

    width: 4px;
    height: 4px;

    position: absolute;

    right: 2px;
    top: 50%;

    border-top:
        1px solid currentColor;

    border-right:
        1px solid currentColor;

    transform:
        translateY(-50%)
        rotate(45deg);
}



/* ==========================================================
   RESPONSIVE
========================================================== */


/* ==========================================================
   TESTIMONIALS
========================================================== */

.testimonials-section {
    background: var(--surface);
}

.testimonials-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 20px;

    margin-top: 28px;
}

.testimonial-card {
    --testimonial-color: #4562e8;

    padding: 20px;

    border-radius: 8px;

    border-top:
        3px solid var(--testimonial-color);

    background: #fbfbfd;
}

.testimonial-card:nth-child(2) {
    --testimonial-color: var(--accent);
}

.testimonial-card:nth-child(3) {
    --testimonial-color: var(--success);
}

.testimonial-stars {
    color: var(--accent);

    font-size: 16px;
}

.testimonial-card > p {
    min-height: 66px;

    margin-top: 8px;

    color: var(--text);
    font-weight: 400;
    font-size: 13px;
}

.testimonial-user {
    display: flex;
    align-items: center;

    gap: 10px;

    padding-top: 11px;

    border-top:
        1px solid var(--border);
}

.testimonial-avatar {
    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--testimonial-color);

    color: white;

    font-size: 12px;
    font-weight: 700;
}

.testimonial-user strong,
.testimonial-user small {
    display: block;
}

.testimonial-user strong {
    font-size: 9px;
}

.testimonial-user small {
    color: var(--muted);
    font-weight: 400;
    font-size: 10px;
}

.testimonials-section {
    background: var(--surface);
}

.testimonials-section .site-container {
    width: min(calc(100% - 100px), 1360px);
    margin-inline: auto;
}
/* ==========================================================
   ADMISSION CTA
========================================================== */

.admission-cta-section {
    background: var(--surface);

    padding-bottom: 55px;
}

.admission-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;

    padding: 20px 25px;

    border-radius: 11px;

    border-left:
        6px solid var(--accent);

    background: var(--primary);

    color: var(--secondary);
}

.admission-cta h3 {
    font-size: 22px;
}

.admission-cta p {
    margin-top: 3px;

    color:
        color-mix(
            in srgb,
            var(--secondary) 60%,
            transparent
        );

    font-size: 13px;
    font-weight: 400;
}

.admission-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;
}

.admission-actions a {
    padding: 9px 12px;

    border-radius: 10px;

    background:
        color-mix(
            in srgb,
            var(--secondary) 22%,
            transparent
        );

    font-size: 10px;

    font-weight: 600;
}

.admission-actions .cta-primary {
    background: var(--accent);

    color: var(--primary);
}


/* ==========================================================
   STUDENT LIFE
========================================================== */

.student-life-section {
    background: var(--background);
}

.student-life-section .site-container {
    width: min(calc(100% - 100px), 1360px);
    margin-inline: auto;
}


.activity-tabs {
    display: grid;

    grid-template-columns:
        repeat(6, 1fr);

    gap: 10px;

    margin: 20px 0 14px;
}


.activity-tab {
    padding: 10px;

    border: 0;
    border-radius: 22px;

    background: #e5e9f5;
    color: var(--muted);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    font-size: 12px;

    cursor: pointer;
}

.activity-tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 13px;
    line-height: 1;
}

.activity-tab.active {
    background: var(--primary);
    color: var(--secondary);
}


.activity-content {
    display: grid;

    height: 148px;

    grid-template-columns:
        minmax(250px, .75fr)
        2fr;

    overflow: hidden;

    border-radius: 9px;

    border-top:
        4px solid var(--success);

    background: var(--surface);
}


.activity-image {
    min-height: 143px;
}


.activity-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.activity-details {
    padding: 20px;
}


.activity-details h3 {
    color: var(--primary);

    font-size: 18px;
    font-weight: 600;
}


.activity-details p {
    margin-top: 5px;

    color: var(--muted);

    font-size: 13px;
    font-weight: 400;
}


.activity-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;

    margin-top: 17px;
}


.activity-tags span {
    min-width: 156px;

    padding: 4px 15px;

    border-radius: 18px;

    background: #eaf8ef;

    color: var(--success);

    font-weight: 600;
    font-size: 11px;

    text-align: left;
}


/* responsive side spacing */



/* ==========================================================
   GALLERY
========================================================== */

.gallery-section {
    padding: 28px 0;

    background: #08132e;
    margin-bottom: 15px;
    color: var(--secondary);
}

.gallery-section .site-container {
    width: min(calc(100% - 100px), 1360px);
    margin-inline: auto;
}

.gallery-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 18px;
}

.gallery-heading h2 {
    font-size: 22px;
}

.gallery-button {
    padding: 7px 12px;
    min-height: 36px;

    border-radius: 5px;

    background: var(--accent);

    color: var(--primary);

    font-size: 13px;

    font-weight: 600;
}

.gallery-grid {
    display: grid;

    grid-template-columns:
        repeat(5, 1fr);

    gap: 16px;
}

.gallery-card {
    height: 128px;

    position: relative;

    overflow: hidden;

    border-radius: 7px;
}

.gallery-card img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.gallery-gradient {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            transparent 40%,
            rgba(0, 0, 0, .75)
        );
}

.gallery-card span {
    position: absolute;

    left: 8px;
    bottom: 7px;

    z-index: 2;

    font-weight: 600;
    font-size: 11px;
}


/* ==========================================================
   CULTURE
========================================================== */

.culture-section {
    padding: 26px 0 32px;

    background: var(--cream);
}


/* SAME SIDE SPACING AS OTHER SECTIONS */

.culture-section .site-container {
    width: min(calc(100% - 100px), 1360px);
    margin-inline: auto;
}


/* ==========================================================
   HEADING
========================================================== */

.culture-heading {
    margin-bottom: 0;
}


.culture-heading h2 {
    margin: 0;

    color: var(--primary);

    font-size: 30px;
    font-weight: 700;

    line-height: 1.1;
}


.culture-heading p {
    margin-top: 5px;

    color: var(--muted);

    font-size: 14px;
    font-weight: 400;

    line-height: 1.35;
}


/* ==========================================================
   GRID
========================================================== */

.culture-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 20px;

    margin-top: 17px;
}


/* ==========================================================
   CARD
========================================================== */

.culture-card {
    min-width: 0;
    min-height: 120px;

    padding: 10px 12px 13px;

    overflow: hidden;

    border-radius: 11px;

    border-top:
        5px solid var(--accent);

    background: var(--surface);

    box-shadow:
        0 7px 18px rgba(0, 0, 0, .06);
}


/* CARD 2 — PURPLE */

.culture-card:nth-child(2) {
    border-top-color: #8b3fe8;
}


/* CARD 3 — BLUE */

.culture-card:nth-child(3) {
    border-top-color: #4169e1;
}


/* CARD 4 — GREEN */

.culture-card:nth-child(4) {
    border-top-color: var(--success);
}


/* ==========================================================
   TOP ROW
========================================================== */

.culture-card-top {
    min-height: 29px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 8px;

    padding: 5px 8px;

    border-radius: 7px;


}


/* ==========================================================
   TITLE + ICON
========================================================== */

.culture-card-title {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 9px;
}


.culture-icon {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 24px;
    line-height: 1;
}


.culture-card h3 {
    margin: 0;

    color: var(--primary);

    font-size: 14px;
    font-weight: 600;

    line-height: 1.1;

    white-space: nowrap;
}


/* ==========================================================
   BADGE
========================================================== */

.culture-badge {
    flex: 0 0 auto;
    min-height: 22px;
    display: inline-flex;
    align-items: center;

    padding: 2px 6px;

    border-radius: 11px;

    background: #F5F7FF;

    color: var(--accent);

    font-size: 9px;
    font-weight: 500;

    line-height: 1;

    white-space: nowrap;
}


/* DIFFERENT BADGE COLOURS */

.culture-card:nth-child(2) .culture-badge {
    color: #8b3fe8;
}


.culture-card:nth-child(3) .culture-badge {
    color: #4169e1;
}


.culture-card:nth-child(4) .culture-badge {
    color: var(--success);
}


/* ==========================================================
   DESCRIPTION
========================================================== */

.culture-card > p {
    margin: 14px 8px 0;

    color: var(--muted);

    font-size: 9px;
    font-weight: 400;

    line-height: 1.3;
}


/* ==========================================================
   RESPONSIVE
========================================================== */


/* ==========================================================
   FOOTER
========================================================== */
.site-footer .site-container {
    width: min(calc(100% - 100px), 1360px);
    margin-inline: auto;
}

.site-footer {
    padding: 50px 0 20px;

    border-top:
        3px solid var(--accent);

    background: #08132e;

    color: var(--secondary);
}

.footer-grid {
    display: grid;

    grid-template-columns:
        1.5fr 1fr 1fr 1fr 1.2fr;

    gap: 45px;
}

.footer-brand {
    display: flex;
    align-items: center;

    gap: 10px;
}

.footer-logo {
    width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    overflow: hidden;

    border-radius: 50%;

    background: var(--primary-light);

    font-size: 18px;

    font-weight: 700;
}

.footer-logo img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}

.footer-brand strong,
.footer-brand small {
    display: block;
}

.footer-brand strong {
    font-size: 16px;
}

.footer-brand small {
    margin-top: 2px;

    color:
        color-mix(
            in srgb,
            var(--secondary) 45%,
            transparent
        );

    font-size: 11px;
}

.footer-contact {
    margin-top: 16px;
}

.footer-contact p {
    margin-bottom: 3px;

    color:
        color-mix(
            in srgb,
            var(--secondary) 45%,
            transparent
        );

    font-size: 11px;
}

.footer-socials {
    display: flex;

    gap: 7px;

    margin-top: 12px;
}

.footer-socials a {
    width: 28px;
    height: 28px;

    display: grid;
    place-items: center;

    border-radius: 5px;

    background: var(--primary-light);

    font-size: 12px;
}

.footer-column {
    display: flex;
    flex-direction: column;

    gap: 7px;
}

.footer-column h4,
.footer-newsletter h4 {
    margin-bottom: 6px;

    color: var(--secondary);

    font-size: 13px;
}

.footer-column h4::after,
.footer-newsletter h4::after {
    content: '';

    display: block;

    width: 36px;
    height: 2px;

    margin-top: 4px;

    background: var(--accent);
}

.footer-column a {
    color:
        color-mix(
            in srgb,
            var(--secondary) 52%,
            transparent
        );

    font-size: 12px;
}

.footer-newsletter p {
    color:
        color-mix(
            in srgb,
            var(--secondary) 45%,
            transparent
        );

    font-size: 11px;
}

.footer-newsletter form {
    margin-top: 15px;
}

.footer-newsletter input {
    width: 100%;

    height: 36px;

    padding: 0 11px;

    border:
        1px solid #38496f;

    border-radius: 5px;

    outline: 0;

    background: var(--primary-light);

    color: var(--secondary);

    font-size: 11px;
}

.footer-newsletter button {
    width: 100%;

    height: 34px;

    margin-top: 7px;

    border: 0;

    border-radius: 5px;

    background: var(--accent);

    color: var(--primary);

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;

    gap: 20px;

    margin-top: 43px;

    padding-top: 17px;

    border-top:
        1px solid rgba(255,255,255,.07);

    color:
        color-mix(
            in srgb,
            var(--secondary) 35%,
            transparent
        );

    font-size: 11px;
}

.footer-bottom-links {
    display: flex;

    gap: 35px;
}


/* ==========================================================
   RESPONSIVE
========================================================== */


/* ==========================================================
   MOBILE VIEW — MATCH REFERENCE
========================================================== */


/* ==========================================================
   TESTIMONIALS
========================================================== */

.testimonials-section {
    padding: 28px 0 34px;
    background: var(--surface);
}

.testimonials-section .site-container {
    width: min(calc(100% - 100px), 1360px);
    margin-inline: auto;
}

.testimonials-heading h2 {
    margin: 0;
    color: var(--primary);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
}

.testimonials-heading p {
    margin-top: 6px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.4;
}


/* ==========================================================
   SLIDER / TRACK
========================================================== */

.testimonials-slider {
    position: relative;
    margin-top: 18px;
    overflow: hidden;
}

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


/* ==========================================================
   CARD
========================================================== */

.testimonial-card {
    --testimonial-color: #1f3f95;

    padding: 16px 18px 18px;
    border-top: 4px solid var(--testimonial-color);
    border-radius: 14px;
    background: #fbfbfd;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .05);
}

.testimonial-card:nth-child(2) {
    --testimonial-color: var(--accent);
}

.testimonial-card:nth-child(3) {
    --testimonial-color: var(--success);
}


/* ==========================================================
   STARS
========================================================== */

.testimonial-stars {
    color: #f3a61d;
    font-size: 15px;
    letter-spacing: 1px;
    line-height: 1;
}


/* ==========================================================
   QUOTE
========================================================== */

.testimonial-card > p {
    min-height: 72px;
    margin-top: 14px;
    color: var(--text);
    font-size: 14px;
    line-height: 1.45;
}


/* ==========================================================
   USER
========================================================== */

.testimonial-user {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-top: 20px;
    padding-top: 14px;

    border-top: 1px solid #e4e7ef;
}

.testimonial-avatar {
    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--testimonial-color);
    color: #fff;

    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.testimonial-user-info strong,
.testimonial-user-info small {
    display: block;
}

.testimonial-user-info strong {
    color: var(--primary);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
}

.testimonial-user-info small {
    margin-top: 4px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.2;
}


/* ==========================================================
   DOTS
========================================================== */

.testimonial-dots {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
}

.testimonial-dot {
    width: 8px;
    height: 8px;

    border: 0;
    border-radius: 50%;

    background: #e7eaf3;

    cursor: pointer;
}

.testimonial-dot.active {
    background: var(--primary);
}


/* ==========================================================
   TABLET
========================================================== */


/* ==========================================================
   MOBILE — EXACT STYLE LIKE REFERENCE
========================================================== */


/* ==========================================================
   SMALL MOBILE
========================================================== */


/* ==========================================================
   FOOTER — MOBILE VIEW
   Matches supplied mobile reference
========================================================== */


/* ==========================================================
   HERO — MOBILE VIEW
   Match supplied reference
========================================================== */

/* ==========================================================
   RESPONSIVE
   Single source of truth
   Breakpoints:
   1100px = compact desktop/tablet
   900px  = tablet
   650px  = mobile
   430px  = small mobile
========================================================== */


/* ==========================================================
   COMPACT DESKTOP / TABLET
========================================================== */

@media (max-width: 1100px) {

    .site-container,
    .why-choose-section .site-container,
    .about-section .site-container,
    .mission-section .site-container,
    .events-section .site-container,
    .testimonials-section .site-container,
    .student-life-section .site-container,
    .gallery-section .site-container,
    .culture-section .site-container,
    .site-footer .site-container {
        width: calc(100% - 60px);
        margin-inline: auto;
    }

    .navbar-brand {
        flex-basis: 205px;
    }

    .navbar-links {
        margin-left: 28px;
        margin-right: 45px;
        gap: 0;
    }

    .hero {
        grid-template-columns: 1fr 1fr;
    }

    .hero-content {
        padding: 40px;
    }

    .hero h1 {
        font-size: 48px;
    }

    .why-choose-section .site-container {
        height: auto;
    }

    .why-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .events-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .gallery-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .culture-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 900px) {

    .section {
        padding: 52px 0;
    }

    .site-container,
    .why-choose-section .site-container,
    .about-section .site-container,
    .mission-section .site-container,
    .events-section .site-container,
    .testimonials-section .site-container,
    .student-life-section .site-container,
    .gallery-section .site-container,
    .culture-section .site-container,
    .site-footer .site-container {
        width: calc(100% - 40px);
        margin-inline: auto;
    }

    /* NAVBAR */

    .navbar-brand {
        flex: 1 1 auto;
        padding-left: 0;
    }

    .navbar-links {
        display: none;

        position: absolute;
        top: 76px;
        left: 0;
        right: 0;

        margin: 0;
        padding: 18px 24px;

        flex-direction: column;
        align-items: flex-start;
        gap: 16px;

        background: var(--surface);

        border-bottom: 1px solid var(--border);

        box-shadow: 0 12px 30px rgba(15, 30, 69, .08);

        z-index: 1100;
    }

    .navbar-links.show {
        display: flex;
    }

    .navbar-links a.active::after {
        display: none;
    }

    .mobile-menu-btn {
        display: inline-flex;
    }

    .portal-login-btn {
        margin-left: auto;
        margin-right: 10px;
    }

    /* HERO */

    .hero {
        grid-template-columns: 1fr;
    }

    .hero-media {
        min-height: 400px;
        margin-top: 0;
        border-radius: 0;
    }

    /* SCHOOL STATISTICS */

    .statistics-grid {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 20px;
        padding: 22px 0;
    }

    /* WHY CHOOSE */

    .why-choose-section .site-container {
        height: auto;
    }

    .why-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* ABOUT */

    .about-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .about-media {
        min-height: 470px;
    }

    /* MISSION */

    .mission-grid {
        grid-template-columns: 1fr;
        gap: 22px;
        padding-top: 25px;
        padding-bottom: 25px;
    }

    .mission-quote {
        width: 100%;
        min-height: auto;
    }

    /* EVENTS */

    .events-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* TESTIMONIALS */

    .testimonials-track {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    /* STUDENT LIFE */

    .activity-tabs {
        display: flex;
        overflow-x: auto;
        gap: 10px;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    .activity-tabs::-webkit-scrollbar {
        display: none;
    }

    .activity-tab {
        min-width: 145px;
        flex: 0 0 auto;
    }

    /* GALLERY */

    .gallery-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* CULTURE */

    .culture-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* FOOTER */

    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 35px;
    }
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 650px) {

    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    .section {
        padding: 30px 0;
    }

    .site-container,
    .why-choose-section .site-container,
    .about-section .site-container,
    .mission-section .site-container,
    .events-section .site-container,
    .testimonials-section .site-container,
    .student-life-section .site-container,
    .gallery-section .site-container,
    .culture-section .site-container {
        width: calc(100% - 16px);
        margin-inline: auto;
    }


    /* ======================================================
       ANNOUNCEMENT
    ====================================================== */

    .announcement-bar {
        height: auto;
        min-height: 34px;
    }

    .announcement-inner {
        min-height: 34px;
        height: auto;

        display: flex;
        align-items: center;
        justify-content: space-between;

        gap: 10px;

        padding: 7px 0;

        font-size: 9px;
        line-height: 1.2;
    }

    .announcement-text {
        min-width: 0;
        flex: 1 1 auto;
        white-space: normal;
    }

    .announcement-icon,
    .announcement-icon img {
        width: 12px;
        height: 12px;
    }

    .announcement-action {
        position: static;
        flex: 0 0 auto;
        transform: none;
        font-size: 9px;
    }


    /* ======================================================
       NAVBAR
    ====================================================== */

    .site-header {
        height: 68px;
    }

    .navbar {
        height: 68px;
        min-height: 68px;
    }

    .navbar-brand {
        min-width: 0;
        flex: 1 1 auto;
        gap: 8px;
        padding-left: 0;
    }

    .navbar-logo {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
    }

    .navbar-brand-text strong {
        font-size: 15px;
    }

    .navbar-brand-text small,
    .portal-login-btn {
        display: none;
    }

    .mobile-menu-btn {
        display: inline-flex;
        width: 40px;
        height: 40px;
        margin-left: auto;
        font-size: 24px;
    }

    .navbar-links {
        top: 68px;
        left: 0;
        right: 0;

        width: 100%;

        margin: 0;
        padding: 18px 20px 22px;

        gap: 0;

        background: var(--surface);

        border-bottom: 1px solid var(--border);

        box-shadow: 0 14px 30px rgba(15, 30, 69, .12);
    }

    .navbar-links a {
        width: 100%;
        justify-content: flex-start;

        padding: 12px 4px;

        font-size: 14px;

        border-bottom: 1px solid var(--border);
    }

    .navbar-links a:last-child {
        border-bottom: 0;
    }


    /* ======================================================
       HERO — MOBILE REFERENCE
    ====================================================== */

    .hero-section {
        padding: 0;
        background: var(--background);
    }

    .hero-section .site-container {
        width: 100%;
        margin: 0;
    }

    .hero {
        min-height: 400px;
        height: 400px;

        position: relative;
        display: block;

        overflow: hidden;

        margin: 0;

        border: 0;
        border-radius: 0;

        background: var(--primary);
    }

    .hero-media {
        position: absolute;
        inset: 0;

        width: 100%;
        height: 400px;
        min-height: 400px;

        margin: 0;

        border-radius: 0;

        overflow: hidden;

        z-index: 0;
    }

    .hero-main-image {
        width: 100%;
        height: 100%;

        display: block;

        object-fit: cover;
        object-position: center;
    }

    .hero-media::after {
        content: '';

        position: absolute;
        inset: 0;

        z-index: 1;

        background:
            linear-gradient(
                to bottom,
                rgba(5, 15, 45, .46) 0%,
                rgba(5, 15, 45, .52) 45%,
                rgba(5, 15, 45, .68) 100%
            );

        pointer-events: none;
    }

    .hero-content {
        min-height: 400px;

        position: relative;

        z-index: 3;

        display: flex;
        flex-direction: column;
        justify-content: flex-start;

        padding: 14px 9px;
    }

    .hero-badge {
        width: fit-content;

        margin: 0 0 12px;

        padding: 7px 15px;

        border-radius: 999px;

        background: #FFD339;
        color: #F4A300;

        font-size: 11px;
        font-weight: 500;

        line-height: 1;
    }

    .hero h1 {
        max-width: 100%;

        margin: 0;

        color: #fff;

        font-size: 30px;
        font-weight: 800;

        line-height: 1.15;

        letter-spacing: -.7px;
    }

    .hero-title-line {
        display: none;
    }

    .hero-description {
        max-width: 320px;

        margin-top: 34px;

        color: rgba(255,255,255,.88);

        font-size: 11px;
        font-weight: 400;

        line-height: 1.3;
    }

    .hero-actions {
        width: 100%;

        display: grid;

        grid-template-columns:
            minmax(0, 1.05fr)
            minmax(0, .95fr);

        gap: 8px 10px;

        margin-top: 20px;
    }

    .hero-actions .btn {
        width: 100%;
        min-width: 0;
        height: 45px;

        margin: 0;

        padding: 0 10px;

        border-radius: 10px;

        font-size: 11px;
        font-weight: 600;

        white-space: nowrap;
    }

    .hero-actions .btn:nth-child(1) {
        grid-column: 1;

        background: var(--accent);
        color: var(--primary);
    }

    .hero-actions .btn:nth-child(2) {
        grid-column: 2;

        background: rgba(255,255,255,.26);
        color: #fff;

        backdrop-filter: blur(5px);
    }

    .hero-actions .btn:nth-child(3) {
        grid-column: 1 / -1;

        height: 44px;

        background: rgba(255,255,255,.25);
        color: #fff;

        backdrop-filter: blur(5px);
    }

    .hero-float-middle {
        display: none;
    }

    .hero-float-top {
        display: block;

        width: 100px;
        height: 82px;

        position: absolute;

        top: auto;
        right: 8px;
        bottom: 46px;

        z-index: 5;

        border: 2px solid var(--accent);

        border-radius: 9px;

        overflow: hidden;

        box-shadow: 0 7px 18px rgba(0,0,0,.25);
    }

    .hero-float-top img {
        width: 100%;
        height: 100%;

        object-fit: cover;
    }

    .hero-float-top .hero-float-ui {
        display: none;
    }

    .hero-stats {
        display: none;
    }


    /* ======================================================
       SCHOOL STATISTICS
    ====================================================== */

    .school-statistics {
        overflow: hidden;
    }

    .statistics-grid {
        width: 100%;
        min-height: 54px;

        display: grid;

        grid-template-columns:
            repeat(6, minmax(0, 1fr));

        align-items: center;

        padding: 0;
    }

    .statistics-item {
        min-width: 0;

        padding: 8px 2px;

        border-right: 1px solid var(--border);
        border-bottom: 0;

        text-align: center;
    }

    .statistics-item:last-child {
        border-right: 0;
    }

    .statistics-item strong {
        display: block;

        font-size: 10px;
        font-weight: 700;

        line-height: 1.05;
    }

    .statistics-item span {
        display: block;

        margin-top: 3px;

        font-size: 5px;

        line-height: 1.1;
    }


    /* ======================================================
       GENERAL SECTION HEADINGS
    ====================================================== */

    .section-heading h2,
    .section-heading-row h2 {
        font-size: 15px;
    }

    .section-heading p {
        font-size: 7px;
        line-height: 1.3;
    }


    /* ======================================================
       WHY CHOOSE
    ====================================================== */

    .why-choose-section {
        padding: 17px 0 20px;
    }

    .why-choose-section .site-container {
        height: auto;
    }

    .why-heading h2 {
        margin-top: 0;

        font-size: 13px;
        font-weight: 700;

        line-height: 1.15;
    }

    .why-heading p {
        max-width: 100%;

        margin-top: 4px;

        font-size: 7px;

        line-height: 1.3;
    }

    .why-grid {
        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 7px;

        margin-top: 8px;
    }

    .why-card {
        min-width: 0;
        min-height: 95px;

        padding: 7px;

        border-top-width: 3px;

        border-radius: 7px;
    }

    .why-card-header {
        gap: 6px;
    }

    .why-icon {
        width: 28px;
        height: 28px;

        min-width: 28px;
        min-height: 28px;

        flex: 0 0 28px;

        border-radius: 6px;
    }

    .why-icon span {
        font-size: 13px;
    }

    .why-card h3 {
        font-size: 7px;
        font-weight: 600;

        line-height: 1.15;
    }

    .why-card > p {
        min-height: 25px;

        margin-top: 6px;

        font-size: 6px;

        line-height: 1.25;
    }

    .why-learn-more {
        min-height: 17px;

        margin-top: 3px;

        padding: 2px 7px;

        border-radius: 4px;

        font-size: 6px;
    }

    .why-learn-more-icon {
        width: 9px;
        height: 9px;
    }

    .why-learn-more-icon::before {
        width: 5px;
        height: 1px;
    }

    .why-learn-more-icon::after {
        width: 3px;
        height: 3px;

        border-top-width: 1px;
        border-right-width: 1px;
    }


    /* ======================================================
       ABOUT
    ====================================================== */

    .about-section {
        padding: 19px 0 22px;
    }

    .about-grid {
        display: grid;

        grid-template-columns: 1fr;

        gap: 12px;
    }

    .about-eyebrow {
        margin-bottom: 13px;

        font-size: 6px;
    }

    .about-eyebrow::after {
        width: 45px;
        height: 1px;

        bottom: -5px;
    }

    .about-content h2 {
        max-width: 210px;

        font-size: 21px;
        font-weight: 800;

        line-height: 1.02;

        letter-spacing: -.5px;
    }

    .about-description {
        max-width: 100%;

        margin-top: 10px;

        font-size: 7px;

        line-height: 1.25;
    }

    .about-button {
        width: fit-content;

        min-width: 90px;
        height: 27px;

        margin-top: 10px;

        padding: 0 10px;

        border-radius: 5px;

        font-size: 6px;
    }

    .about-media {
        min-height: 250px;

        border-radius: 9px;
    }

    .about-media-header {
        top: 8px;
        left: 9px;
        right: 9px;
    }

    .about-media-header h3 {
        font-size: 8px;
    }

    .about-media-line {
        height: 1px;

        margin-top: 5px;
    }

    .about-info-grid {
        position: absolute;

        left: 9px;
        right: 9px;

        top: 34px;
        bottom: 9px;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        grid-template-rows:
            repeat(4, minmax(0, 1fr));

        gap: 6px 8px;

        overflow: visible;
    }

    .about-info-card {
        min-width: 0;

        gap: 5px;

        padding: 5px 6px;

        border-radius: 6px;
    }

    .about-info-icon {
        width: 15px;
        height: 15px;

        min-width: 15px;

        flex: 0 0 15px;

        font-size: 10px;
    }

    .about-info-card small {
        font-size: 5px;

        line-height: 1;
    }

    .about-info-card strong {
        margin-top: 2px;

        font-size: 6px;
        font-weight: 600;

        line-height: 1.1;
    }


    /* ======================================================
       MISSION
    ====================================================== */

    .mission-section .site-container {
        width: calc(100% - 20px);
    }

    .mission-grid {
        min-height: auto;

        grid-template-columns: 1fr;

        gap: 14px;

        padding-top: 18px;
        padding-bottom: 18px;
    }

    .mission-content {
        padding-top: 0;
    }

    .mission-content > p {
        font-size: 9px;
        line-height: 1.4;
    }

    .mission-quote {
        width: 100%;
        min-height: auto;

        padding: 12px;
    }

    .mission-quote p {
        font-size: 8px;
    }


    /* ======================================================
       EVENTS
    ====================================================== */

    .events-section {
        padding: 20px 0;
    }

    .events-heading-row {
        gap: 10px;

        margin-bottom: 12px;
    }

    .events-heading-row h2 {
        font-size: 15px;
    }

    .view-all-btn {
        min-width: 60px;
        height: 28px;

        padding-inline: 9px;

        font-size: 8px;
    }

    .events-grid {
        grid-template-columns: 1fr;

        gap: 8px;
    }

    .event-card {
        min-height: auto;

        padding: 10px;
    }

    .event-description {
        min-height: 0;

        margin-top: 9px;

        font-size: 8px;
    }

    .event-read-more {
        margin-top: 10px;
    }


    /* ======================================================
       TESTIMONIALS — ONE CARD SLIDER
    ====================================================== */

    .testimonials-section {
        padding: 18px 0 20px;
    }

    .testimonials-heading h2 {
        font-size: 12px;
        font-weight: 700;

        line-height: 1.15;
    }

    .testimonials-heading p {
        margin-top: 4px;

        font-size: 6px;

        line-height: 1.3;
    }

    .testimonials-slider {
        margin-top: 10px;
    }

    .testimonials-track {
        display: flex;

        gap: 0;

        transition: transform .35s ease;
    }

    .testimonial-card {
        flex: 0 0 100%;
        min-width: 100%;

        padding: 10px 10px 12px;

        border-top-width: 3px;
        border-radius: 12px;
    }

    .testimonial-stars {
        font-size: 10px;
        letter-spacing: .5px;
    }

    .testimonial-card > p {
        min-height: 52px;

        margin-top: 9px;

        font-size: 6px;

        line-height: 1.35;
    }

    .testimonial-user {
        gap: 8px;

        margin-top: 12px;
        padding-top: 10px;
    }

    .testimonial-avatar {
        width: 28px;
        height: 28px;

        font-size: 8px;
    }

    .testimonial-user-info strong {
        font-size: 7px;
    }

    .testimonial-user-info small {
        margin-top: 2px;

        font-size: 5px;
    }

    .testimonial-dots {
        display: flex;

        margin-top: 10px;
    }

    .testimonial-dot {
        width: 6px;
        height: 6px;
    }


    /* ======================================================
       ADMISSION CTA
    ====================================================== */

    .admission-cta-section {
        padding-bottom: 24px;
    }

    .admission-cta {
        align-items: stretch;
        flex-direction: column;

        gap: 12px;

        padding: 14px 12px;
    }

    .admission-cta h3 {
        font-size: 14px;

        line-height: 1.25;
    }

    .admission-cta p {
        margin-top: 4px;

        font-size: 8px;
    }

    .admission-actions {
        width: 100%;

        flex-direction: column;
    }

    .admission-actions a {
        width: 100%;
        min-height: 32px;

        display: inline-flex;
        align-items: center;
        justify-content: center;
    }


    /* ======================================================
       STUDENT LIFE
    ====================================================== */

    .student-life-section {
        padding: 22px 0;
    }

    .activity-tabs {
        display: flex;

        overflow-x: auto;

        gap: 6px;

        margin: 12px 0 9px;

        scrollbar-width: none;
    }

    .activity-tabs::-webkit-scrollbar {
        display: none;
    }

    .activity-tab {
        min-width: 95px;

        flex: 0 0 auto;

        padding: 7px 9px;

        font-size: 7px;
    }

    .activity-tab-icon {
        font-size: 9px;
    }

    .activity-content {
        height: auto;

        grid-template-columns: 1fr;
    }

    .activity-image {
        height: 140px;
        min-height: 140px;
    }

    .activity-details {
        padding: 12px;
    }

    .activity-details h3 {
        font-size: 13px;
    }

    .activity-details p {
        font-size: 8px;
    }

    .activity-tags {
        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 5px;

        margin-top: 9px;
    }

    .activity-tags span {
        min-width: 0;
        width: 100%;

        padding: 4px 7px;

        font-size: 7px;
    }


    /* ======================================================
       GALLERY
    ====================================================== */

    .gallery-section {
        padding: 20px 0;
    }

    .gallery-heading {
        gap: 10px;

        margin-bottom: 12px;
    }

    .gallery-heading h2 {
        font-size: 15px;
    }

    .gallery-button {
        min-height: 28px;

        padding: 6px 8px;

        font-size: 8px;
    }

    .gallery-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 7px;
    }

    .gallery-card {
        height: 100px;
    }


    /* ======================================================
       CULTURE
    ====================================================== */

    .culture-section {
        padding: 20px 0;
    }

    .culture-heading h2 {
        font-size: 16px;
    }

    .culture-heading p {
        font-size: 7px;
    }

    .culture-grid {
        grid-template-columns: 1fr;

        gap: 8px;

        margin-top: 11px;
    }

    .culture-card {
        min-height: auto;

        padding: 10px;
    }

    .culture-card-top {
        gap: 6px;
    }

    .culture-icon {
        font-size: 18px;
    }

    .culture-card h3 {
        font-size: 10px;
    }

    .culture-badge {
        max-width: 48%;

        overflow: hidden;

        text-overflow: ellipsis;

        font-size: 7px;
    }

    .culture-card > p {
        margin: 10px 5px 0;

        font-size: 8px;

        line-height: 1.4;
    }


    /* ======================================================
       FOOTER — MOBILE REFERENCE
    ====================================================== */

    .site-footer {
        padding: 0 0 18px;

        border-top: 3px solid var(--accent);

        background: #08132e;
    }

    .site-footer .site-container {
        width: calc(100% - 28px);

        margin-inline: auto;
    }

    .footer-grid {
        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 0 24px;

        padding-top: 16px;
    }

    .footer-grid > :first-child {
        grid-column: 1 / -1;
    }

    .footer-brand {
        display: flex;
        align-items: center;

        gap: 10px;
    }

    .footer-logo {
        width: 36px;
        height: 36px;

        flex: 0 0 36px;

        border-radius: 50%;
    }

    .footer-brand strong {
        color: var(--secondary);

        font-size: 13px;
        font-weight: 700;

        line-height: 1.15;
    }

    .footer-brand small {
        margin-top: 3px;

        color:
            color-mix(
                in srgb,
                var(--secondary) 48%,
                transparent
            );

        font-size: 7px;

        line-height: 1.2;
    }

    .footer-description {
        grid-column: 1 / -1;

        margin-top: 12px;
        padding-bottom: 13px;

        border-bottom: 1px solid rgba(255,255,255,.12);

        color:
            color-mix(
                in srgb,
                var(--secondary) 58%,
                transparent
            );

        font-size: 10px;
        font-weight: 400;

        line-height: 1.45;
    }

    .footer-column {
        margin-top: 12px;

        display: flex;
        flex-direction: column;

        gap: 9px;
    }

    .footer-column h4 {
        width: fit-content;

        margin: 0 0 2px;

        position: relative;

        color: var(--accent);

        font-size: 12px;
        font-weight: 600;

        line-height: 1.2;
    }

    .footer-column h4::after {
        content: '';

        width: 37px;
        height: 2px;

        display: block;

        margin-top: 4px;

        background: var(--accent);
    }

    .footer-column a {
        color:
            color-mix(
                in srgb,
                var(--secondary) 62%,
                transparent
            );

        font-size: 10px;
        font-weight: 400;

        line-height: 1.25;
    }

    .footer-column a:hover {
        color: var(--secondary);
    }

    .footer-contact {
        grid-column: 1 / -1;

        width: 100%;

        margin-top: 18px;
        padding-top: 12px;

        border-top: 1px solid rgba(255,255,255,.12);
    }

    .footer-contact p {
        margin-bottom: 6px;

        color:
            color-mix(
                in srgb,
                var(--secondary) 55%,
                transparent
            );

        font-size: 9px;
        font-weight: 400;

        line-height: 1.25;
    }

    .footer-socials {
        grid-column: 1 / -1;

        display: flex;

        gap: 8px;

        margin-top: 10px;
    }

    .footer-socials a {
        width: 36px;
        height: 36px;

        display: grid;
        place-items: center;

        border-radius: 7px;

        background:
            color-mix(
                in srgb,
                var(--primary-light) 75%,
                white
            );

        color:
            color-mix(
                in srgb,
                var(--secondary) 75%,
                transparent
            );

        font-size: 10px;
        font-weight: 600;
    }

    .footer-newsletter {
        display: none;
    }

    .footer-bottom {
        display: flex;
        flex-direction: column;

        align-items: flex-start;

        gap: 6px;

        margin-top: 15px;
        padding-top: 12px;

        border-top: 1px solid rgba(255,255,255,.12);

        color:
            color-mix(
                in srgb,
                var(--secondary) 48%,
                transparent
            );

        font-size: 8px;

        line-height: 1.4;
    }

    .footer-bottom-links {
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        gap: 0;
    }

    .footer-bottom-links a {
        font-size: 8px;
    }

    .footer-bottom-links a + a::before {
        content: '|';

        display: inline-block;

        margin: 0 6px;

        color:
            color-mix(
                in srgb,
                var(--secondary) 28%,
                transparent
            );
    }
}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width: 430px) {

    .navbar-logo {
        width: 40px;
        height: 40px;

        flex-basis: 40px;
    }

    .navbar-brand-text strong {
        font-size: 14px;
    }

    .hero h1 {
        font-size: 28px;
    }

    .hero-float-top {
        width: 92px;
        height: 74px;
    }

    .activity-tags {
        grid-template-columns: 1fr;
    }

    .culture-card-top {
        flex-wrap: wrap;
    }

    .culture-badge {
        max-width: 100%;
    }
}



/* ------------------------------------------------------------ABOUT---------------------------------------------------- */
/* ==========================================================
   ABOUT PAGE HERO
========================================================== */

.about-page-hero {
    padding: 32px 40px 28px;
    background: var(--primary);
    color: var(--secondary);
    min-height: 160px;
}
/* ==========================================================
   ABOUT PAGE CONTAINER SPACING
   Same spacing as the other website sections
========================================================== */

.about-page-hero .site-container,
.about-cards-section .site-container,
.about-main-section .site-container {
    width: min(calc(100% - 100px), 1360px);
    margin-inline: auto;
}
.about-page-hero h1 {
    margin: 0;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
}

.about-breadcrumb {
    display: flex;
    align-items: center;
    gap: 5px;

    margin-top: 15px;

    font-size: 12px;
    color: #99A6D9;
}

.about-breadcrumb a {
    color: #99A6D9;
}


.about-breadcrumb .breadcrumb-current {
    position: relative;
    display: inline-block;
    color: var(--secondary);
}

.about-breadcrumb .breadcrumb-current::after {
    content: '';

    position: absolute;
    left: 0;
    bottom: -6px;


    height: 2px;
 width: 60px;
    border-radius: 999px;

    background: var(--accent);
}

/* ==========================================================
   ABOUT PAGE CARDS
========================================================== */

.about-cards-section {
    padding: 18px 0 14px;
    background: var(--surface);
}

.about-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.about-info-box {
    min-height: 136px;
    padding: 14px 16px 16px;

    border-radius: 12px;
    background: #ffffff;

    box-shadow: 0 8px 20px rgba(0, 0, 0, .05);
    border-top: 5px solid var(--primary);
}

.vision-box {
    border-top-color: #3366ff;
}

.values-box {
    border-top-color: var(--accent);
}

.about-info-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.about-info-icon {
    font-size: 24px;
    line-height: 1;
}

.about-info-box h3 {
    margin: 0;
    color: var(--primary);
    font-size: 13px;
    font-weight: 600;
}

.about-info-box p {
    margin-top: 10px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.45;
}


/* ==========================================================
   ABOUT MAIN SECTION
========================================================== */

.about-main-section {
    padding: 8px 0 28px;
    background: var(--surface);
}

.about-main-grid {
    display: grid;
    grid-template-columns: 1.35fr .9fr;
    gap: 34px;
}

.about-story h2,
.about-leadership h2 {
    margin: 0 0 14px;
    color: var(--primary);
    font-size: 22px;
    font-weight: 700;
}


/* ==========================================================
   STORY TIMELINE
========================================================== */

.story-timeline {
    position: relative;
    padding-left: 0;
}

.story-item {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 16px;
    align-items: start;

    margin-bottom: 20px;
}

.story-dot {
    width: 24px;
    height: 24px;
    margin-top: 4px;

    border-radius: 50%;
    background: var(--accent);
}

.story-content {
    display: grid;
    grid-template-columns: 55px 1fr;
    gap: 14px;
    align-items: start;
}

.story-content strong {
    color: var(--primary);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
}

.story-content p {
    margin: 0;
    color: var(--text);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
}


/* ==========================================================
   LEADERSHIP
========================================================== */

.leadership-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.leader-card {
    padding: 20px 16px 18px;
    border-radius: 8px;
    background:  var(--surface);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .05);
    text-align: center;
    height: 150px;
}

.leader-avatar {
    width: 60px;
    height: 60px;
    margin: 0 auto 10px;

    display: grid;
    place-items: center;

    border-radius: 50%;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}

.leader-avatar.blue-dark {
    background: #122a63;
}

.leader-avatar.blue {
    background: #2d56db;
}

.leader-avatar.green {
    background: #3f8c50;
}

.leader-card h3 {
    margin: 0;
    color: var(--primary);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
}

.leader-card p {
    margin-top: 5px;
    color: var(--muted);
    font-size: 9px;
    line-height: 1.3;
}


/* ==========================================================
   ABOUT PAGE RESPONSIVE
========================================================== */

@media (max-width: 900px) {
    .about-cards-grid {
        grid-template-columns: 1fr;
    }

    .about-main-grid {
        grid-template-columns: 1fr;
    }

    .leadership-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .about-page-hero {
    padding: 32px 40px 28px;
    background: var(--primary);
    color: var(--secondary);
    min-height: 160px;
}
}

@media (max-width: 650px) {
    .about-page-hero {
        padding: 22px 0 18px;
    }

    .about-page-hero .site-container,
    .about-cards-section .site-container,
    .about-main-section .site-container {
        width: calc(100% - 20px);
    }

    .about-page-hero h1 {
        font-size: 14px;
    }

    .about-breadcrumb {
        margin-top: 8px;
        font-size: 7px;
    }

    .about-breadcrumb a::after {
        width: 22px;
        height: 1px;
    }

    .about-cards-grid {
        gap: 10px;
    }

    .about-info-box {
        min-height: auto;
        padding: 12px;
    }

    .about-info-box h3 {
        font-size: 11px;
    }

    .about-info-box p {
        font-size: 8px;
    }

    .about-main-grid {
        gap: 20px;
    }

    .about-story h2,
    .about-leadership h2 {
        font-size: 13px;
        margin-bottom: 10px;
    }

    .story-item {
        grid-template-columns: 14px 1fr;
        gap: 10px;
        margin-bottom: 14px;
    }

    .story-dot {
        width: 11px;
        height: 11px;
    }

    .story-content {
        grid-template-columns: 42px 1fr;
        gap: 8px;
    }

    .story-content strong {
        font-size: 9px;
    }

    .story-content p {
        font-size: 8px;
    }

    .leadership-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 8px;
    }

    .leader-card {
        padding: 10px 6px;
    }

    .leader-avatar {
        width: 34px;
        height: 34px;
        font-size: 9px;
        margin-bottom: 8px;
    }

    .leader-card h3 {
        font-size: 8px;
    }

    .leader-card p {
        font-size: 7px;
    }
    /* ======================================================
   ABOUT PAGE — MOBILE
====================================================== */

.about-page-hero .site-container,
.about-cards-section .site-container,
.about-main-section .site-container {
    width: calc(100% - 16px);
    margin-inline: auto;
}

.about-page-hero {
    min-height: 110px;

    padding: 22px 0 20px;
}

.about-page-hero h1 {
    font-size: 22px;
    line-height: 1.15;
}

.about-breadcrumb {
    gap: 4px;

    margin-top: 10px;

    font-size: 9px;
}

.about-breadcrumb .breadcrumb-current::after {
    bottom: -5px;

    width: 42px;
    height: 2px;
}
}
/* ==========================================================
   OUR STORY TIMELINE CONNECTION
========================================================== */

.story-timeline {
    position: relative;
}


/* Vertical connecting line */
.story-timeline::before {
    content: '';

    position: absolute;

    left: 7px;
    top: 10px;
    bottom: 10px;

    width: 2px;

    background: #d7deee;

    z-index: 0;
}


.story-item {
    position: relative;

    display: grid;

    grid-template-columns:
        20px 1fr;

    gap: 16px;

    align-items: start;

    margin-bottom: 26px;
}


.story-item:last-child {
    margin-bottom: 0;
}


/* Orange circle */
.story-dot {
    width: 14px;
    height: 14px;

    position: relative;

    z-index: 2;

    margin-top: 3px;

    border-radius: 50%;

    background: var(--accent);

    /* hides the line underneath the dot */
    box-shadow:
        0 0 0 3px var(--surface);
}
/* -------------------------------------------------ACADEMICS-------------------------------------- */
/* ==========================================================
   ACADEMICS PAGE
========================================================== */

.academics-page-hero .site-container,
.academic-programmes-section .site-container,
.academic-subjects-section .site-container,
.academic-timetable-section .site-container,
.curriculum-section .site-container,
.academics-bottom-cta .site-container {
    width: min(calc(100% - 100px), 1360px);
    margin-inline: auto;
}


/* ==========================================================
   HERO
========================================================== */

.academics-page-hero {
    min-height: 160px;

    padding: 38px 0 30px;

    background: var(--primary);
    color: var(--secondary);
}

.academics-page-hero h1 {
    margin: 0;

    font-size: 36px;
    font-weight: 700;

    line-height: 1.15;
}

.academics-breadcrumb {
    display: flex;
    align-items: center;

    gap: 5px;

    margin-top: 14px;

    color: #99A6D9;

    font-size: 11px;
}

.academics-breadcrumb a {
    color: #99A6D9;
}

.academics-breadcrumb .breadcrumb-current {
    position: relative;

    color: var(--secondary);
}

.academics-breadcrumb .breadcrumb-current::after {
    content: '';

    position: absolute;

    left: 0;
    bottom: -6px;

    width: 48px;
    height: 2px;

    border-radius: 999px;

    background: var(--accent);
}


/* ==========================================================
   COMMON SECTION
========================================================== */

.academic-programmes-section,
.academic-subjects-section,
.academic-timetable-section,
.curriculum-section {
    background: var(--background);
}

.academic-programmes-section {
    padding: 48px 0 20px;
}

.academic-subjects-section {
    padding: 24px 0;
}

.academic-timetable-section {
    padding: 26px 0;
}

.curriculum-section {
    padding: 24px 0 42px;
}

.academics-section-heading {
    margin-bottom: 18px;
}

.academics-section-heading h2 {
    margin: 0;

    color: var(--primary);

    font-size: 28px;
    font-weight: 700;

    line-height: 1.15;
}

.academics-section-heading p {
    margin-top: 5px;

    color: var(--muted);

    font-size: 14px;
    font-weight: 400;

    line-height: 1.4;
}


/* ==========================================================
   PROGRAMMES
========================================================== */
/* ==========================================================
   ACADEMIC PROGRAMMES
   Match reference
========================================================== */

.academic-programmes-section {
    padding: 30px 0 24px;

    background: #f9f9fb;
}


/* ==========================================================
   HEADING
========================================================== */

.academic-programmes-section
.academics-section-heading {
    margin-bottom: 20px;
}

.academic-programmes-section
.academics-section-heading h2 {
    margin: 0;

    color: #0f1e45;

    font-size: 28px;
    font-weight: 700;

    line-height: 1.15;

    letter-spacing: -.4px;
}

.academic-programmes-section
.academics-section-heading p {
    margin-top: 6px;

    color: #6b7288;

    font-size: 14px;
    font-weight: 400;

    line-height: 1.4;
}


/* ==========================================================
   GRID
========================================================== */

.programme-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 10px;
}


/* ==========================================================
   CARD
========================================================== */

.programme-card {
    min-width: 0;
    min-height: 210px;

    position: relative;

    display: flex;
    flex-direction: column;

    padding: 11px 18px 9px;

    overflow: hidden;

    border-top: 5px solid #0f1e45;
    border-radius: 11px;

    background: #ffffff;

    box-shadow:
        0 7px 18px rgba(15, 30, 69, .07);
}


/* THEMES */

.programme-orange {
    border-top-color: #f5a623;

    --programme-color: #f5a623;
    --programme-light: #fef4e2;
}

.programme-navy {
    border-top-color: #0f1e45;

    --programme-color: #0f1e45;
    --programme-light: #f1f4fb;
}

.programme-blue {
    border-top-color: #2f55df;

    --programme-color: #2f55df;
    --programme-light: #eaf0ff;
}


/* ==========================================================
   ICON
========================================================== */

.programme-icon {
    width: 44px;
    height: 44px;

    flex: 0 0 36px;

    display: grid;
    place-items: center;

    margin-bottom: 10px;

    border-radius: 9px;

    background: var(--programme-light);

    color: var(--programme-color);
}

.programme-icon svg {
    width: 22px;
    height: 22px;

    stroke: currentColor;
    stroke-width: 1.7;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ==========================================================
   TITLE
========================================================== */

.programme-card h3 {
    margin: 0;

    color: #0f1e45;

    font-size: 15px;
    font-weight: 600;

    line-height: 1.25;
}


/* ==========================================================
   AGE
========================================================== */

.programme-age {
    display: block;

    margin-top: 6px;

    color: #6b7288;

    font-size: 11px;
    font-weight: 500;

    line-height: 1.2;
}


/* ==========================================================
   DESCRIPTION
========================================================== */

.programme-card > p {
    margin: 8px 0 0;

    color: #6b7288;

    font-size: 12px;
    font-weight: 400;

    line-height: 1.45;
}


/* ==========================================================
   DIVIDER
========================================================== */

.programme-divider {
    width: 100%;
    height: 1px;

    margin-top: auto;
    margin-bottom: 6px;

    background: #EDF0F6;
}


/* ==========================================================
   BADGE
========================================================== */

.programme-badge {
    width: fit-content;

    min-height: 22px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 2px 10px;

    border-radius: 11px;

    background: var(--programme-light);

    color: var(--programme-color);

    font-size: 11px;
    font-weight: 600;

    line-height: 1;
}


/* ==========================================================
   SUBJECTS WE OFFER
========================================================== */

.academic-subjects-section {
    padding: 22px 0 28px;
    background: #f8f8fa;
}


/* GRID */

.subjects-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 12px;

    margin-top: 16px;
}


/* CARD */

.subject-card {
    min-width: 0;
    min-height: 108px;

    display: flex;
    align-items: flex-start;

    gap: 14px;

    padding: 18px 18px;

    border-radius: 12px;

    background: #ffffff;

    box-shadow:
        0 5px 16px rgba(15, 30, 69, .045);
}


/* ICON BOX */

.subject-icon {
    width: 38px;
    height: 38px;

    min-width: 38px;
    flex: 0 0 38px;

    display: grid;
    place-items: center;

    border-radius: 9px;

    background: #f0f3fb;
    color: #102653;
}


/* SVG */

.subject-icon svg {
    width: 20px;
    height: 20px;

    display: block;

    stroke: currentColor;
    stroke-width: 1.7;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* make filled SVG dots inherit color */

.subject-icon svg circle {
    vector-effect: non-scaling-stroke;
}


/* TEXT */

.subject-info {
    min-width: 0;

    padding-top: 2px;
}

.subject-info h3 {
    margin: 0;

    color: #0F1E45;

    font-size: 14px;
    font-weight: 600;

    line-height: 1.25;
}

.subject-info p {
    margin: 7px 0 0;

    color: #6B7288;

    font-size: 11px;
    font-weight: 400;

    line-height: 1.3;
}

/* ==========================================================
   TIMETABLE
========================================================== */
/* ==========================================================
   WEEKLY TIMETABLE
   Match supplied reference
========================================================== */

.academic-timetable-section {
    padding: 28px 0 32px;

    background: #f8f8fa;
}


/* ==========================================================
   TABLE WRAPPER
========================================================== */

.timetable-wrapper {
    width: 100%;

    overflow-x: auto;

    border-radius: 11px;

    background: #ffffff;

    box-shadow:
        0 7px 20px rgba(15, 30, 69, .055);
}


/* ==========================================================
   TABLE
========================================================== */

.academic-timetable {
    width: 100%;

    min-width: 850px;

    border-collapse: separate;
    border-spacing: 0;

    table-layout: fixed;

    background: #ffffff;
}


/* ==========================================================
   HEADER
========================================================== */

.academic-timetable thead {
    background: #10214f;
    color: #ffffff;
}


.academic-timetable thead th {
    height: 40px;

    padding: 0 14px;

    border: 0;

    color: #ffffff;

    font-size: 12px;
    font-weight: 600;

    line-height: 1;

    text-align: center;
}


/* TIME COLUMN */

.academic-timetable thead th:first-child {
    width: 108px;

    border-top-left-radius: 11px;
}


.academic-timetable thead th:last-child {
    border-top-right-radius: 11px;
}


/* ==========================================================
   NORMAL CELLS
========================================================== */

.academic-timetable tbody td {
    height: 48px;

    padding: 0 14px;

    border-right:
        1px solid #e7eaf1;

    border-bottom:
        1px solid #edf0f5;

    color: #17213b;

    background: #ffffff;

    font-size: 12px;
    font-weight: 400;

    line-height: 1.2;

    text-align: center;

    vertical-align: middle;
}


.academic-timetable tbody td:last-child {
    border-right: 0;
}


/* ==========================================================
   ALTERNATING ROW BACKGROUND
========================================================== */

.academic-timetable tbody tr:not(.timetable-break):nth-child(even) td {
    background: #f7f8fa;
}


/* ==========================================================
   TIME COLUMN
========================================================== */

.academic-timetable .timetable-time {
    width: 108px;

    background: #f2f4f9 !important;

    color: #10214f;

    font-size: 11px;
    font-weight: 700;

    white-space: nowrap;
}


/* ==========================================================
   BREAK ROW
========================================================== */

.academic-timetable .timetable-break td {
    height: 48px;

    border-right:
        1px solid #f5e6ca;

    border-bottom:
        1px solid #f5e6ca;

    background: #fff2d9;

    color: #d88600;
}


/* blank Time cell during break */

.academic-timetable .timetable-break-time {
    width: 108px;

    background: #fff2d9 !important;
}


/* break text */

.break-content {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 7px;

    color: #d48300;

    font-size: 12px;
    font-weight: 600;

    line-height: 1;
}


/* cup icon */

.break-content svg {
    width: 17px;
    height: 17px;

    stroke: currentColor;
    stroke-width: 1.6;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ==========================================================
   LAST ROW CORNERS
========================================================== */

.academic-timetable tbody tr:last-child td:first-child {
    border-bottom-left-radius: 11px;
}


.academic-timetable tbody tr:last-child td:last-child {
    border-bottom-right-radius: 11px;
}

/* ==========================================================
   CURRICULUM
========================================================== */
/* ==========================================================
   CURRICULUM FRAMEWORK
========================================================== */

.curriculum-section {
    padding: 24px 0 34px;
    background: #f8f8fa;
}


/* GRID */

.curriculum-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 16px;
}


/* CARD */

.curriculum-card {
    min-width: 0;
    min-height: 150px;

    display: flex;
    align-items: flex-start;
    gap: 14px;

    padding: 18px 18px 16px;

    border-top: 5px solid #10214f;
    border-radius: 12px;

    background: #ffffff;

    box-shadow: 0 6px 18px rgba(15, 30, 69, .05);
}


/* THEMES */

.curriculum-navy {
    border-top-color: #10214f;
    --curriculum-color: #10214f;
    --curriculum-light: #eef2fb;
}

.curriculum-blue {
    border-top-color: #2f55df;
    --curriculum-color: #2f55df;
    --curriculum-light: #eef3ff;
}

.curriculum-orange {
    border-top-color: #f5a623;
    --curriculum-color: #f5a623;
    --curriculum-light: #fef3df;
}


/* ICON */

.curriculum-icon {
    width: 46px;
    height: 46px;

    min-width: 36px;
    flex: 0 0 36px;

    display: grid;
    place-items: center;

    border-radius: 12px;

    background: var(--curriculum-light);
    color: var(--curriculum-color);
}

.curriculum-icon svg {
    width: 24px;
    height: 24px;

    display: block;

    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* CONTENT */

.curriculum-content {
    min-width: 0;
    padding-top: 2px;
}

.curriculum-card h3 {
    margin: 0;

    color: #10214f;

    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
}

.curriculum-card p {
    margin: 28px 0 0;

    color: #7a8297;

    font-size: 12px;
    font-weight: 400;
    line-height: 1.45;
}

/* ==========================================================
   BOTTOM CTA
========================================================== */

.academics-bottom-cta {
    padding: 30px 0;

    background: var(--primary);

    color: var(--secondary);

    text-align: center;
}

.academics-bottom-cta h2 {
    margin: 0;

    font-size: 30px;
    font-weight: 700;
}

.academics-bottom-cta p {
    margin-top: 7px;

    color: #99A6D9;

    font-size: 14px;
    font-weight: 400;
}

.academics-cta-actions {
    display: flex;
    justify-content: center;

    gap: 10px;

    margin-top: 16px;
}

.academics-cta-actions a {
    min-width: 190px;
    height: 48px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 13px;

    border-radius: 6px;

    font-size: 14px;
    font-weight: 600;
}

.academics-cta-primary {
    background: var(--accent);
    color: var(--primary);
}

.academics-cta-secondary {
    border:
        1px solid rgba(255,255,255,.35);

    background: transparent;
    color: var(--secondary);
}

@media (max-width: 1100px) {

    /* ======================================================
       ACADEMICS CONTAINER
    ====================================================== */

    .academics-page-hero .site-container,
    .academic-programmes-section .site-container,
    .academic-subjects-section .site-container,
    .academic-timetable-section .site-container,
    .curriculum-section .site-container,
    .academics-bottom-cta .site-container {
        width: calc(100% - 60px);
    }


    /* HERO */

    .academics-page-hero {
        min-height: 150px;
        padding: 34px 0 28px;
    }

    .academics-page-hero h1 {
        font-size: 32px;
    }


    /* PROGRAMMES */

    .programme-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 12px;
    }


    /* SUBJECTS */

    .subjects-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 12px;
    }


    /* CURRICULUM */

    .curriculum-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 12px;
    }
}
@media (max-width: 650px) {

    /* ======================================================
       CONTAINER
    ====================================================== */

    .academics-page-hero .site-container,
    .academic-programmes-section .site-container,
    .academic-subjects-section .site-container,
    .academic-timetable-section .site-container,
    .curriculum-section .site-container,
    .academics-bottom-cta .site-container {
        width: calc(100% - 16px);
    }


    /* ======================================================
       HERO
    ====================================================== */

    .academics-page-hero {
        min-height: 110px;

        padding: 22px 0 18px;
    }

    .academics-page-hero h1 {
        font-size: 22px;
    }

    .academics-breadcrumb {
        gap: 4px;

        margin-top: 8px;

        font-size: 8px;
    }

    .academics-breadcrumb
    .breadcrumb-current::after {
        width: 38px;
        height: 2px;

        bottom: -5px;
    }


    /* ======================================================
       SECTION SPACING
    ====================================================== */

    .academic-programmes-section {
        padding: 22px 0 16px;
    }

    .academic-subjects-section {
        padding: 18px 0;
    }

    .academic-timetable-section {
        padding: 18px 0;
    }

    .curriculum-section {
        padding: 18px 0 25px;
    }


    /* ======================================================
       SECTION HEADINGS
    ====================================================== */

    .academics-section-heading,
    .academic-programmes-section
    .academics-section-heading {
        margin-bottom: 12px;
    }

    .academics-section-heading h2,
    .academic-programmes-section
    .academics-section-heading h2 {
        font-size: 17px;

        letter-spacing: -.15px;
    }

    .academics-section-heading p,
    .academic-programmes-section
    .academics-section-heading p {
        margin-top: 4px;

        font-size: 8px;

        line-height: 1.4;
    }


    /* ======================================================
       PROGRAMMES — 2 COLUMNS
    ====================================================== */

    .programme-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 7px;
    }

    .programme-card {
        min-height: 154px;

        padding: 9px 10px 8px;

        border-top-width: 3px;

        border-radius: 8px;
    }

    .programme-icon {
        width: 30px;
        height: 30px;

        flex: 0 0 30px;

        margin-bottom: 7px;

        border-radius: 7px;
    }

    .programme-icon svg {
        width: 16px;
        height: 16px;
    }

    .programme-card h3 {
        font-size: 9px;
    }

    .programme-age {
        margin-top: 4px;

        font-size: 7px;
    }

    .programme-card > p {
        margin-top: 6px;

        font-size: 6.5px;

        line-height: 1.4;
    }

    .programme-divider {
        margin-bottom: 5px;
    }

    .programme-badge {
        min-height: 16px;

        padding: 2px 7px;

        font-size: 6px;

        border-radius: 8px;
    }


    /* ======================================================
       SUBJECTS — 2 COLUMNS
    ====================================================== */

    .subjects-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 7px;

        margin-top: 10px;
    }

    .subject-card {
        min-height: 70px;

        gap: 8px;

        padding: 9px 8px;

        border-radius: 8px;
    }

    .subject-icon {
        width: 30px;
        height: 30px;

        min-width: 30px;
        flex: 0 0 30px;

        border-radius: 7px;
    }

    .subject-icon svg {
        width: 16px;
        height: 16px;
    }

    .subject-info {
        padding-top: 1px;
    }

    .subject-info h3 {
        font-size: 8px;

        line-height: 1.25;
    }

    .subject-info p {
        margin-top: 4px;

        font-size: 6px;

        line-height: 1.3;
    }


    /* ======================================================
       TIMETABLE — HORIZONTAL SCROLL
    ====================================================== */

    .timetable-wrapper {
        width: 100%;

        overflow-x: auto;
        overflow-y: hidden;

        border-radius: 8px;

        -webkit-overflow-scrolling: touch;
    }

    .academic-timetable {
        width: 720px;
        min-width: 720px;
    }

    .academic-timetable thead th {
        height: 36px;

        padding: 0 9px;

        font-size: 8px;
    }

    .academic-timetable
    thead th:first-child {
        width: 88px;
    }

    .academic-timetable tbody td {
        height: 42px;

        padding: 0 8px;

        font-size: 8px;
    }

    .academic-timetable
    .timetable-time {
        width: 88px;

        font-size: 7px;
    }

    .academic-timetable
    .timetable-break-time {
        width: 88px;
    }

    .break-content {
        gap: 5px;

        font-size: 8px;
    }

    .break-content svg {
        width: 13px;
        height: 13px;
    }


    /* ======================================================
       CURRICULUM
    ====================================================== */

    .curriculum-grid {
        grid-template-columns: 1fr;

        gap: 8px;

        margin-top: 10px;
    }

    .curriculum-card {
        min-height: 92px;

        gap: 10px;

        padding: 11px;

        border-top-width: 3px;

        border-radius: 8px;
    }

    .curriculum-icon {
        width: 30px;
        height: 30px;

        min-width: 30px;
        flex: 0 0 30px;

        border-radius: 8px;
    }

    .curriculum-icon svg {
        width: 16px;
        height: 16px;
    }

    .curriculum-card h3 {
        font-size: 9px;
    }

    .curriculum-card p {
        margin-top: 13px;

        font-size: 6.5px;

        line-height: 1.4;
    }


    /* ======================================================
       BOTTOM CTA
    ====================================================== */

    .academics-bottom-cta {
        padding: 23px 0;
    }

    .academics-bottom-cta h2 {
        font-size: 18px;
    }

    .academics-bottom-cta p {
        margin-top: 5px;

        font-size: 8px;

        line-height: 1.4;
    }

    .academics-cta-actions {
        gap: 7px;

        margin-top: 12px;
    }

    .academics-cta-actions a {
        min-width: 0;

        width: 135px;
        height: 34px;

        padding: 0 8px;

        font-size: 8px;

        border-radius: 5px;
    }
}


/* -------------------------------------------------------------Admission------------------------------------------------------ */
/* ==========================================================
   ADMISSIONS PAGE
========================================================== */

.admissions-page-hero .site-container,
.admissions-body-section .site-container {
    width: min(calc(100% - 100px), 1360px);
    margin-inline: auto;
}


/* ==========================================================
   HERO
========================================================== */

.admissions-page-hero {
    width: 100%;
    height: 160px;

    padding: 0;

    background: var(--primary);

    overflow: hidden;
}



.admissions-hero-content h1 {
    margin: 0;

    color: var(--secondary);

    font-size: 32px;
    font-weight: 700;

    line-height: 1.15;
}


.admissions-hero-content p {
    margin-top: 6px;

    color:
        color-mix(
            in srgb,
            var(--secondary) 70%,
            transparent
        );

    font-size: 12px;
    font-weight: 400;

    line-height: 1.4;
}


.admissions-hero-line {
    width: 46px;
    height: 3px;

    margin-top: 13px;

    border-radius: 999px;

    background: var(--accent);
}


/* APPLY NOW */

.admissions-apply-btn {
    width: fit-content;

    min-width: 120px;
    height: 36px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    margin-top: 15px;

    padding: 0 16px;

    border: 0;
    border-radius: 7px;

    background: var(--accent);
    color: var(--primary);

    font-size: 10px;
    font-weight: 700;

    cursor: pointer;

    transition:
        transform .2s ease,
        opacity .2s ease;
}


.admissions-apply-btn:hover {
    transform: translateY(-1px);
    opacity: .95;
}





.admissions-hero-grid {
    height: 160px;
    min-height: 160px;

    display: grid;

    grid-template-columns:
        minmax(0, 1.5fr)
        minmax(260px, .55fr);

    overflow: hidden;

    background: var(--primary);
    color: var(--secondary);
}


.admissions-hero-content {
    min-width: 0;

    height: 160px;
    min-height: 160px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 28px 48px;
}


.admissions-hero-media {
    height: 160px;
    min-height: 160px;

    position: relative;

    overflow: hidden;
}


.admissions-hero-media img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

/* ==========================================================
   BODY
========================================================== */

.admissions-body-section {
    padding: 28px 0 50px;

    background: var(--background);
}


.admissions-body-inner {
    position: relative;
}


.admissions-body-left {
    min-width: 0;
}


.admissions-block + .admissions-block {
    margin-top: 32px;
}


.admissions-heading h2 {
    margin: 0;

    color: var(--primary);

    font-size: 22px;
    font-weight: 700;

    line-height: 1.2;
}


.admissions-heading p {
    margin-top: 4px;

    color: var(--muted);

    font-size: 13px;
    font-weight: 400;

    line-height: 1.4;
}


/* ==========================================================
   HOW TO APPLY — FOUR CARDS
========================================================== */

.admissions-steps-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 22px;

    margin-top: 16px;
}


.admissions-step-card {
    min-width: 0;
    min-height: 154px;

    position: relative;

    padding: 15px 18px 17px;

    border-radius: 10px;

    background: var(--surface);

    box-shadow:
        0 7px 18px
        color-mix(
            in srgb,
            var(--primary) 7%,
            transparent
        );
}


.step-number {
    display: block;

    color:
        color-mix(
            in srgb,
            var(--primary) 10%,
            var(--surface)
        );

    font-size: 32px;
    font-weight: 800;

    line-height: 1;
}


.step-line {
    width: 28px;
    height: 3px;

    display: block;

    margin-top: 5px;

    border-radius: 999px;

    background: var(--accent);
}


.admissions-step-card h3 {
    margin: 7px 0 0;

    color: var(--primary);

    font-size: 14px;
    font-weight: 600;

    line-height: 1.25;
}


.admissions-step-card p {
    margin: 6px 0 0;

    color: var(--muted);

    font-size: 12px;
    font-weight: 400;

    line-height: 1.45;
}


/* ==========================================================
   REQUIRED DOCUMENTS
   Match reference
========================================================== */

.admissions-documents-block {
    width: 100%;
    max-width: 420px;
}


/* HEADING */

.documents-heading h2 {
    margin: 0;

    color: var(--primary);

    font-size: 22px;
    font-weight: 700;

    line-height: 1.2;
}


/* LIST */

.documents-list {
    display: flex;
    flex-direction: column;

    gap: 18px;

    margin-top: 18px;
}


/* EACH DOCUMENT */

.document-item {
    min-height: 18px;

    display: flex;
    align-items: center;

    gap: 10px;
}


/* ==========================================================
   CHECK ICON
========================================================== */

.document-check {
    width: 20px;
    height: 20px;

    min-width: 20px;
    flex: 0 0 16px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
       #EAF0FF;

    color:
        #1A3FD4;
}


.document-check svg {
    width: 12px;
    height: 12px;

    display: block;

    stroke: currentColor;
    stroke-width: 2.2;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ==========================================================
   TEXT
========================================================== */

.document-text {
    color: var(--text);

    font-size: 13px;
    font-weight: 400;

    line-height: 1.35;
}

/* ==========================================================
   FORM
   Hidden initially
========================================================== */

.admissions-form-card {
    width: min(420px, calc(100% - 30px));

    position: absolute;

    top: -8px;
    right: 0;

    z-index: 40;

    padding: 20px 22px 22px;

    border-top:
        4px solid var(--accent);

    border-radius: 12px;

    background: var(--surface);

    box-shadow:
        0 14px 35px
        color-mix(
            in srgb,
            var(--primary) 14%,
            transparent
        );


    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform:
        translateY(-10px)
        scale(.985);

    transition:
        opacity .22s ease,
        transform .22s ease,
        visibility .22s ease;
}


.admissions-form-card.is-open {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform:
        translateY(0)
        scale(1);
}


/* ==========================================================
   FORM HEADER
========================================================== */

.admissions-form-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 12px;
}


.admissions-form-card h3 {
    margin: 0;

    color: var(--primary);

    font-size: 16px;
    font-weight: 600;

    line-height: 1.2;
}


.admissions-form-subtitle {
    max-width: 330px;

    margin-top: 5px;

    color: var(--muted);

    font-size: 12px;

    line-height: 1.4;
}


.admissions-form-close {
    width: 28px;
    height: 28px;

    min-width: 28px;

    display: grid;
    place-items: center;

    border: 0;
    border-radius: 50%;

    background:
        color-mix(
            in srgb,
            var(--primary) 7%,
            var(--surface)
        );

    color: var(--primary);

    font-size: 20px;

    line-height: 1;

    cursor: pointer;
}


/* ==========================================================
   FORM INPUTS
========================================================== */

.admissions-enquiry-form {
    margin-top: 15px;
}


.admission-form-group + .admission-form-group {
    margin-top: 10px;
}


.admission-form-group label {
    display: block;

    margin-bottom: 5px;

    color: var(--text);

    font-size: 11px;
    font-weight: 600;

    line-height: 1.2;
}


.admission-form-group input,
.admission-form-group select {
    width: 100%;
    height: 34px;

    padding: 0 11px;

    border:
        1px solid transparent;

    border-radius: 6px;

    outline: none;

    background:
        color-mix(
            in srgb,
            var(--primary) 6%,
            var(--surface)
        );

    color: var(--text);

    font-size: 12px;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}


.admission-form-group input::placeholder {
    color:
        color-mix(
            in srgb,
            var(--muted) 55%,
            transparent
        );
}


.admission-form-group input:focus,
.admission-form-group select:focus {
    border-color:
        color-mix(
            in srgb,
            var(--primary-light) 35%,
            transparent
        );

    background: var(--surface);

    box-shadow:
        0 0 0 3px
        color-mix(
            in srgb,
            var(--primary-light) 8%,
            transparent
        );
}


/* ==========================================================
   SUBMIT BUTTON
========================================================== */

.admissions-submit-btn {
    width: 100%;
    height: 48px;

    margin-top: 16px;

    border: 0;
    border-radius: 6px;

    background: var(--accent);
    color: var(--primary);

    font-size: 13px;
    font-weight: 600;

    cursor: pointer;
}


/* ==========================================================
   BACKDROP
========================================================== */

.admissions-form-backdrop {
    display: none;
}
.admissions-steps-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 22px;

    margin-top: 16px;
}
.admission-success-message {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 18px;

    padding: 12px 14px;

    border-radius: 8px;

    background:
        color-mix(
            in srgb,
            var(--success) 10%,
            var(--surface)
        );

    color: var(--text);

    font-size: 10px;
}


.admission-success-icon {
    width: 22px;
    height: 22px;

    display: grid;
    place-items: center;

    flex: 0 0 22px;

    border-radius: 50%;

    background: var(--success);
    color: var(--secondary);

    font-size: 11px;
    font-weight: 700;
}


.admission-form-error {
    display: block;

    margin-top: 4px;

    color: #dc2626;

    font-size: 7px;
}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 1100px) {
    .admissions-page-hero .site-container,
    .admissions-body-section .site-container {
        width: calc(100% - 60px);
    }

    .admissions-body-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .admissions-form-card {
        margin-top: 0;
    }
}

@media (max-width: 650px) {
    .admissions-page-hero .site-container,
    .admissions-body-section .site-container {
        width: calc(100% - 16px);
    }

    .admissions-hero-grid {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .admissions-hero-content {
        padding: 16px 14px 14px;
    }

    .admissions-hero-content h1 {
        font-size: 18px;
    }

    .admissions-hero-content p {
        font-size: 8px;
    }

    .admissions-hero-media {
        min-height: 76px;
    }

    .admissions-body-section {
        padding: 14px 0 22px;
    }

    .admissions-heading h2 {
        font-size: 13px;
    }

    .admissions-heading p {
        font-size: 8px;
    }

    .admissions-steps-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .admissions-step-card {
        min-height: auto;
        padding: 12px;
    }

    .step-number {
        font-size: 22px;
    }

    .admissions-step-card h3 {
        font-size: 9px;
    }

    .admissions-step-card p {
        font-size: 7px;
    }

    .documents-list {
        gap: 10px;
    }

    .document-text {
        font-size: 7.5px;
    }

    .admissions-form-card {
        padding: 12px;
        border-radius: 10px;
    }

    .admissions-form-card h3 {
        font-size: 11px;
    }

    .admissions-form-subtitle {
        font-size: 7px;
    }

    .form-group label {
        font-size: 7px;
    }

    .form-group input {
        height: 30px;
        font-size: 8px;
    }
}

/* ==========================================================
   REUSABLE INNER PAGE HERO
========================================================== */

.inner-page-hero {
    min-height: 160px;

    padding: 38px 0 30px;

    background: var(--primary);
    color: var(--secondary);
}

.inner-page-hero .site-container {
    width: min(calc(100% - 100px), 1360px);
    margin-inline: auto;
}

.inner-page-hero h1 {
    margin: 0;

    color: var(--secondary);

    font-size: 36px;
    font-weight: 700;

    line-height: 1.15;
}

.inner-page-breadcrumb {
    display: flex;
    align-items: center;

    gap: 5px;

    margin-top: 14px;

    color:
        color-mix(
            in srgb,
            var(--secondary) 60%,
            transparent
        );

    font-size: 11px;
}

.inner-page-breadcrumb a {
    color:
        color-mix(
            in srgb,
            var(--secondary) 60%,
            transparent
        );
}

.inner-page-breadcrumb .breadcrumb-current {
    position: relative;

    display: inline-block;

    color: var(--secondary);
}

.inner-page-breadcrumb
.breadcrumb-current::after {
    content: '';

    position: absolute;

    left: 0;
    bottom: -6px;

    width: 55px;
    height: 2px;

    border-radius: 999px;

    background: var(--accent);
}
/* ---------------------------------------------------------NEWS AND EVENTS-------------------------------------------------------- */
/* ==========================================================
   NEWS & EVENTS PAGE
========================================================== */

.news-events-page-section {
    padding: 34px 0 48px;

    background: var(--background);
}


.news-events-page-section .site-container {
    width: min(calc(100% - 100px), 1360px);

    margin-inline: auto;
}


/* ==========================================================
   MAIN GRID
========================================================== */

.news-events-page-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        310px;

    gap: 34px;

    align-items: start;
}


/* ==========================================================
   SECTION TITLES
========================================================== */

.news-events-column-title {
    margin: 0 0 14px;

    color: var(--primary);

    font-size: 20px;
    font-weight: 700;

    line-height: 1.2;
}


/* ==========================================================
   NEWS GRID
========================================================== */

.latest-news-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 22px 20px;
}


/* ==========================================================
   NEWS CARD
========================================================== */

.news-page-card {
    min-width: 0;

    overflow: hidden;

    border-radius: 10px;

    background: var(--surface);

    box-shadow:
        0 7px 18px
        color-mix(
            in srgb,
            var(--primary) 7%,
            transparent
        );
}


/* ==========================================================
   NEWS IMAGE
========================================================== */

.news-page-image {
    height: 120px;

    position: relative;

    overflow: hidden;

    background:
        color-mix(
            in srgb,
            var(--primary) 7%,
            var(--surface)
        );
}


.news-page-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* ==========================================================
   CATEGORY BADGE
========================================================== */

.news-page-category {
    position: absolute;

    left: 15px;
    bottom: 10px;

    min-height: 20px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 3px 12px;

    border-radius: 999px;

    background: var(--surface);

    color:
        color-mix(
            in srgb,
            var(--primary-light) 80%,
            var(--primary)
        );

    font-size: 11px;
    font-weight: 600;
}


/* ==========================================================
   NEWS CONTENT
========================================================== */

.news-page-content {
    padding: 13px 15px 15px;
}


.news-page-content h3 {
    min-height: 32px;

    margin: 0;

    color: var(--primary);

    font-size: 14px;
    font-weight: 600;

    line-height: 1.3;
}


.news-page-content time {
    display: block;

    margin-top: 14px;

    color:#A6AAB7;

    font-size: 11px;
}


.news-page-content p {
    min-height: 40px;

    margin: 8px 0 0;

    color: var(--muted);

    font-size: 12px;
    font-weight: 400;

    line-height: 1.45;

    display: -webkit-box;

    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    overflow: hidden;
}


.news-page-read-more {
    width: fit-content;

    display: inline-flex;
    align-items: center;

    gap: 4px;

    margin-top: 14px;

    color:#1A3FD4;

    font-size: 12px;
    font-weight: 600;
}


/* ==========================================================
   UPCOMING EVENTS
========================================================== */

.upcoming-events-list {
    display: flex;
    flex-direction: column;

    gap: 13px;
}


.upcoming-event-card {
    min-height: 72px;

    display: flex;
    align-items: center;

    gap: 12px;

    padding: 10px 13px;

    border-left:
        5px solid var(--accent);

    border-radius: 9px;

    background: var(--surface);

    box-shadow:
        0 6px 16px
        color-mix(
            in srgb,
            var(--primary) 6%,
            transparent
        );
}


/* ==========================================================
   EVENT DATE
========================================================== */

.upcoming-event-date {
    width: 44px;
    height: 44px;

    flex: 0 0 43px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    border-radius: 8px;

    background:
        color-mix(
            in srgb,
            var(--primary-light) 7%,
            var(--surface)
        );

    color: var(--primary);

    text-align: center;
}


.upcoming-event-date strong {
    font-size: 14px;
    font-weight: 700;

    line-height: 1;
}


.upcoming-event-date span {
    margin-top: 5px;

    color: var(--muted);

    font-size: 10px;
    font-weight: 400;

    line-height: 1;
}


/* ==========================================================
   EVENT INFO
========================================================== */

.upcoming-event-info {
    min-width: 0;
}


.upcoming-event-info h3 {
    margin: 0;

    color: var(--text);

    font-size: 12px;
    font-weight: 600;

    line-height: 1.3;
}


/* ==========================================================
   EVENT BADGES
========================================================== */

.upcoming-event-badge {
    min-width: 70px;
    min-height: 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-top: 11px;

    padding: 2px 8px;

    border-radius: 999px;
    background:#EDF2FF;
     color:#1A3FD4;
    font-size: 7px;
    font-weight: 600;
}


/* .upcoming-event-badge.academic {
    background:
        color-mix(
            in srgb,
            var(--primary-light) 8%,
            var(--surface)
        );

    color:
        color-mix(
            in srgb,
            var(--primary-light) 80%,
            var(--primary)
        );
} */


/* .upcoming-event-badge.event {
    background: #f2edff;
    color: #7659c7;
}


.upcoming-event-badge.sports {
    background:
        color-mix(
            in srgb,
            var(--success) 12%,
            var(--surface)
        );

    color: var(--success);
} */


.news-events-empty {
    padding: 18px;

    border-radius: 8px;

    background: var(--surface);

    color: var(--muted);

    font-size: 10px;
}



/* ==========================================================
   1100PX — SMALL DESKTOP / TABLET LANDSCAPE
========================================================== */

@media (max-width: 1100px) {


    /* ======================================================
       REUSABLE PAGE HERO
    ====================================================== */

    .inner-page-hero {
        min-height: 150px;
        padding: 34px 0 28px;
    }

    .inner-page-hero h1 {
        font-size: 32px;
    }

    .inner-page-breadcrumb {
        margin-top: 12px;
        font-size: 10px;
    }



    /* ======================================================
       NEWS & EVENTS
    ====================================================== */

    .news-events-page-grid {
        grid-template-columns:
            minmax(0, 1fr)
            280px;

        gap: 25px;
    }

    .latest-news-grid {
        gap: 16px;
    }

    .news-page-image {
        height: 125px;
    }


}



/* ==========================================================
   900PX — TABLET
========================================================== */

@media (max-width: 900px) {


    /* ======================================================
       REUSABLE PAGE HERO
    ====================================================== */

    .inner-page-hero {
        min-height: 140px;
        padding: 30px 0 25px;
    }

    .inner-page-hero h1 {
        font-size: 28px;
    }


    /* ======================================================
       ADMISSIONS
    ====================================================== */

    .admissions-hero-grid {
        grid-template-columns:
            minmax(0, 1.25fr)
            minmax(260px, .75fr);
    }

    .admissions-hero-content {
        padding: 22px 28px;
    }

    .admissions-hero-content h1 {
        font-size: 25px;
    }

    .admissions-heading h2,
    .documents-heading h2 {
        font-size: 19px;
    }

    .admissions-heading p {
        font-size: 11px;
    }


    /* ======================================================
       NEWS & EVENTS
    ====================================================== */

    .news-events-page-section {
        padding: 28px 0 38px;
    }

    .news-events-page-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }


    /* News remains 2 columns on tablet */

    .latest-news-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 16px;
    }


    /* Events become 2 columns */

    .upcoming-events-list {
        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 12px;
    }

    .upcoming-event-card {
        min-width: 0;
    }
}



/* ==========================================================
   650PX — MOBILE
========================================================== */

@media (max-width: 650px) {



    /* ======================================================
       NEWS & EVENTS PAGE
    ====================================================== */

    .news-events-page-section {
        padding: 20px 0 28px;
    }

    .news-events-page-grid {
        grid-template-columns: 1fr;

        gap: 24px;
    }


    /* HEADINGS */

    .news-events-column-title {
        margin-bottom: 10px;

        font-size: 14px;
    }


    /* NEWS — ONE CARD PER ROW */

    .latest-news-grid {
        grid-template-columns: 1fr;

        gap: 10px;
    }

    .news-page-card {
        border-radius: 8px;
    }

    .news-page-image {
        height: 145px;
    }

    .news-page-category {
        left: 10px;
        bottom: 8px;

        min-height: 17px;

        padding: 2px 8px;

        font-size: 6px;
    }

    .news-page-content {
        padding: 10px 11px 12px;
    }

    .news-page-content h3 {
        min-height: 0;

        font-size: 10px;

        line-height: 1.3;
    }

    .news-page-content time {
        margin-top: 7px;

        font-size: 6px;
    }

    .news-page-content p {
        min-height: 0;

        margin-top: 6px;

        font-size: 7px;

        line-height: 1.4;
    }

    .news-page-read-more {
        margin-top: 9px;

        font-size: 7px;
    }


    /* ======================================================
       UPCOMING EVENTS
    ====================================================== */

    .upcoming-events-list {
        display: grid;

        grid-template-columns: 1fr;

        gap: 7px;
    }

    .upcoming-event-card {
        min-height: 60px;

        gap: 9px;

        padding: 8px 10px;

        border-left-width: 3px;

        border-radius: 7px;
    }

    .upcoming-event-date {
        width: 37px;
        height: 42px;

        flex: 0 0 37px;

        border-radius: 6px;
    }

    .upcoming-event-date strong {
        font-size: 9px;
    }

    .upcoming-event-date span {
        margin-top: 4px;

        font-size: 6px;
    }

    .upcoming-event-info h3 {
        font-size: 8px;
    }

    .upcoming-event-badge {
        min-width: 45px;
        min-height: 14px;

        margin-top: 5px;

        padding: 2px 6px;

        font-size: 5.5px;
    }


    /* EMPTY STATE */

    .news-events-empty {
        padding: 12px;

        font-size: 8px;
    }
}



/* ==========================================================
   430PX — SMALL MOBILE
========================================================== */

@media (max-width: 430px) {



    /* ======================================================
       REUSABLE HERO
    ====================================================== */

    .inner-page-hero {
        min-height: 100px;

        padding: 19px 0 16px;
    }

    .inner-page-hero h1 {
        font-size: 20px;
    }

    .inner-page-breadcrumb {
        font-size: 7px;
    }

    .inner-page-breadcrumb
    .breadcrumb-current::after {
        width: 36px;
    }



    /* ======================================================
       NEWS
    ====================================================== */

    .news-page-image {
        height: 125px;
    }

    .news-events-column-title {
        font-size: 13px;
    }


    /* ======================================================
       EVENTS
    ====================================================== */

    .upcoming-event-card {
        min-height: 56px;
    }
}
/* ==========================================================
   ARTICLE SHOW — REFERENCE MATCH
========================================================== */


/* ==========================================================
   HERO
========================================================== */

.article-show-hero .inner-page-hero {
    min-height: 74px;

    padding: 19px 0 12px;

    background: var(--primary);
}


.article-show-hero
.inner-page-hero
.site-container {
    width: min(calc(100% - 88px), 1360px);

    margin-inline: auto;
}


.article-show-hero
.inner-page-hero h1 {
    margin: 0;

    color: var(--secondary);

    font-size: 16px;
    font-weight: 700;

    line-height: 1.15;
}


.article-show-hero
.inner-page-breadcrumb {
    margin-top: 5px;

    gap: 4px;

    color:
        color-mix(
            in srgb,
            var(--secondary) 60%,
            transparent
        );

    font-size: 6px;
}


.article-show-hero
.inner-page-breadcrumb a {
    color:
        color-mix(
            in srgb,
            var(--secondary) 60%,
            transparent
        );
}


.article-show-hero
.inner-page-breadcrumb
.breadcrumb-current {
    color: var(--secondary);
}


.article-show-hero
.inner-page-breadcrumb
.breadcrumb-current::after {
    width: 27px;
    height: 2px;

    bottom: -7px;

    background: var(--accent);
}



/* ==========================================================
   PAGE
========================================================== */

.news-article-section {
    padding: 16px 0 14px;

    background: var(--background);
}


.news-article-section .site-container {
    width: min(calc(100% - 88px), 1360px);

    margin-inline: auto;
}



/* ==========================================================
   GRID
========================================================== */

.news-article-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        188px;

    gap: 32px;

    align-items: start;
}


.news-article-main {
    min-width: 0;
}



/* ==========================================================
   IMAGE
========================================================== */

.article-featured-image {
    width: 100%;
    height: 200px;

    position: relative;

    overflow: hidden;

    border-radius: 7px;

    background: var(--surface);
}


.article-featured-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.article-image-category {
    position: absolute;

    left: 13px;
    bottom: 10px;

    min-height: 16px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 2px 8px;

    border-radius: 999px;

    background: var(--success);
    color: var(--secondary);

    font-size: 5px;
    font-weight: 600;

    line-height: 1;
}



/* ==========================================================
   META
========================================================== */

.article-top-meta {
    height: 31px;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    align-items: center;

    border-bottom:
        1px solid var(--border);
}


.article-top-meta span {
    display: inline-flex;
    align-items: center;

    gap: 4px;

    color: var(--muted);

    font-size: 5.5px;
    font-weight: 400;

    white-space: nowrap;
}


.article-top-meta svg {
    width: 7px;
    height: 7px;

    flex: 0 0 7px;

    stroke: currentColor;
    stroke-width: 1.7;

    stroke-linecap: round;
    stroke-linejoin: round;
}



/* ==========================================================
   TITLE
========================================================== */

.article-title-block {
    padding: 8px 0 6px;

    border-bottom:
        1px solid var(--border);
}


.article-title-block h1 {
    max-width: 450px;

    margin: 0;

    color: var(--primary);

    font-size: 18px;
    font-weight: 700;

    line-height: 1.05;

    letter-spacing: -.3px;
}



/* ==========================================================
   AUTHOR
========================================================== */

.article-author {
    display: flex;
    align-items: center;

    gap: 6px;

    margin-top: 3px;
}


.article-author-avatar {
    width: 22px;
    height: 22px;

    flex: 0 0 22px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--primary);
    color: var(--secondary);

    font-size: 5.5px;
    font-weight: 700;
}


.article-author-info {
    min-width: 0;

    display: flex;
    flex-direction: column;
}


.article-author-info strong {
    color: var(--text);

    font-size: 6px;
    font-weight: 600;

    line-height: 1.1;
}


.article-author-info small {
    margin-top: 1px;

    color: var(--muted);

    font-size: 4.5px;

    line-height: 1.1;
}



/* ==========================================================
   BODY
========================================================== */

.article-body {
    padding-top: 10px;
}


.article-body > p {
    margin: 0 0 15px;

    color: var(--text);

    font-size: 6.5px;
    font-weight: 400;

    line-height: 1.4;
}



/* ==========================================================
   QUOTE
========================================================== */

.article-quote {
    margin: 12px 0;

    padding: 9px 10px 8px;

    border-left:
        2px solid var(--accent);

    background:
        color-mix(
            in srgb,
            var(--primary-light) 3%,
            var(--surface)
        );
}


.article-quote p {
    margin: 0;

    color: var(--primary);

    font-size: 6.5px;

    line-height: 1.35;
}


.article-quote footer {
    margin-top: 10px;

    color: var(--muted);

    font-size: 4.5px;
}



/* ==========================================================
   ARTICLE FOOTER — EXACT REFERENCE PROPORTIONS
========================================================== */

.article-footer-row {
    width: 100%;
    min-height: 28px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;

    padding: 7px 0 4px;

    border-top:
        1px solid var(--border);
}


/* ==========================================================
   TAGS
========================================================== */

.article-tags {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 8px;

    flex-wrap: nowrap;
}


.article-footer-label {
    flex: 0 0 auto;

    color: var(--muted);

    font-size: 5px;
    font-weight: 500;

    line-height: 1;
}


.article-tag {
    min-width: 42px;
    height: 15px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 8px;

    border-radius: 999px;

    background:
        color-mix(
            in srgb,
            var(--primary-light) 6%,
            var(--surface)
        );

    color: var(--primary);

    font-size: 4.5px;
    font-weight: 600;

    line-height: 1;

    white-space: nowrap;
}


/* ==========================================================
   SHARE
========================================================== */

.article-share {
    flex: 0 0 auto;

    display: flex;
    align-items: center;

    gap: 6px;
}


.article-share .article-footer-label {
    margin-right: 2px;
}


.article-share-button {
    width: 22px;
    height: 22px;

    flex: 0 0 22px;

    display: grid;
    place-items: center;

    padding: 0;

    border: 0;
    border-radius: 5px;

    background:
        color-mix(
            in srgb,
            var(--primary-light) 5%,
            var(--surface)
        );

    color:
        color-mix(
            in srgb,
            var(--primary-light) 82%,
            var(--primary)
        );

    cursor: pointer;
}


.article-share-button svg {
    width: 9px;
    height: 9px;

    display: block;

    fill: currentColor;

    stroke: currentColor;
    stroke-width: 1.5;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.article-share-button:hover {
    background:
        color-mix(
            in srgb,
            var(--primary-light) 10%,
            var(--surface)
        );
}



/* ==========================================================
   SIDEBAR
========================================================== */

.news-article-sidebar {
    min-width: 0;
}


.article-sidebar-title {
    margin: 2px 0 9px;

    color: var(--primary);

    font-size: 7px;
    font-weight: 700;

    line-height: 1.2;
}



/* ==========================================================
   RELATED
========================================================== */

.related-articles-list {
    display: flex;
    flex-direction: column;

    gap: 8px;
}


.related-article-card {
    min-height: 62px;

    position: relative;

    padding: 8px 8px 7px;

    overflow: hidden;

    border-top:
        2px solid var(--primary-light);

    border-radius: 7px;

    background: var(--surface);

    box-shadow:
        0 4px 10px
        color-mix(
            in srgb,
            var(--primary) 5%,
            transparent
        );
}


.related-article-card.related-sports {
    border-top-color: #ef7318;
}


.related-article-card.related-event {
    border-top-color: #8848d8;
}


.related-category {
    min-height: 10px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 1px 5px;

    border-radius: 999px;

    background:
        color-mix(
            in srgb,
            var(--primary-light) 6%,
            var(--surface)
        );

    color: var(--primary-light);

    font-size: 3.7px;
    font-weight: 600;

    line-height: 1;
}


.related-category.sports {
    background: #fff0e7;
    color: #ef7318;
}


.related-category.event {
    background: #f3ecff;
    color: #8848d8;
}


.related-article-card h3 {
    margin: 5px 0 0;

    color: var(--text);

    font-size: 5.2px;
    font-weight: 600;

    line-height: 1.3;
}


.related-article-bottom {
    position: absolute;

    left: 8px;
    right: 8px;
    bottom: 6px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 6px;
}


.related-article-bottom time {
    color: var(--muted);

    font-size: 4px;
}


.related-article-bottom a {
    width: 34px;
    height: 13px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 3px;

    background:
        color-mix(
            in srgb,
            var(--primary-light) 7%,
            var(--surface)
        );

    color: var(--primary-light);

    font-size: 4.5px;
    font-weight: 600;
}



/* ==========================================================
   SIDEBAR SPACING
========================================================== */

.article-sidebar-block + .article-sidebar-block {
    margin-top: 36px;
}



/* ==========================================================
   UPCOMING EVENTS
========================================================== */

.article-events-sidebar {
    padding: 10px 9px 7px;

    border-top:
        2px solid var(--accent);

    border-radius: 7px;

    background: var(--surface);

    box-shadow:
        0 4px 10px
        color-mix(
            in srgb,
            var(--primary) 5%,
            transparent
        );
}


.article-events-sidebar
.article-sidebar-title {
    margin: 0 0 6px;
}


.article-event-list {
    display: flex;
    flex-direction: column;
}


.article-event-item {
    min-height: 28px;

    display: flex;
    align-items: center;

    gap: 6px;

    border-bottom:
        1px solid var(--border);
}


.article-event-item:last-child {
    border-bottom: 0;
}


.article-event-date {
    width: 22px;
    height: 23px;

    flex: 0 0 22px;

    display: flex;
    flex-direction: column;

    justify-content: center;

    padding-left: 4px;

    border-radius: 3px;

    background:
        color-mix(
            in srgb,
            var(--primary-light) 6%,
            var(--surface)
        );
}


.article-event-date strong {
    color: var(--primary);

    font-size: 4.5px;
    font-weight: 700;

    line-height: 1;
}


.article-event-date span {
    margin-top: 2px;

    color: var(--muted);

    font-size: 3.5px;

    line-height: 1;
}


.article-event-info {
    min-width: 0;
}


.article-event-info h3 {
    margin: 0;

    color: var(--text);

    font-size: 4.8px;
    font-weight: 600;

    line-height: 1.25;
}


/* ---------------------------------------------------------CONTACT---------------------------------------------------- */
/* ==========================================================
   CONTACT PAGE
========================================================== */

.contact-page-section {
    padding: 36px 0 48px;

    background: var(--background);
}


.contact-page-section .site-container {
    width: min(calc(100% - 112px), 1360px);

    margin-inline: auto;
}


/* ==========================================================
   GRID
========================================================== */

.contact-page-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 28px;

    align-items: start;
}


/* ==========================================================
   COMMON CARD
========================================================== */

.contact-form-card,
.contact-info-card {
    border-radius: 10px;

    background: var(--surface);

    box-shadow:
        0 8px 22px
        color-mix(
            in srgb,
            var(--primary) 7%,
            transparent
        );
}


/* ==========================================================
   LEFT FORM CARD
========================================================== */

.contact-form-card {
    padding: 24px 28px 22px;

    border-top:
        4px solid var(--accent);
}


.contact-card-heading h2 {
    margin: 0;

    color: var(--primary);

    font-size: 22px;
    font-weight: 700;

    line-height: 1.2;
}


.contact-card-heading p {
    margin: 6px 0 0;

    color: var(--muted);

    font-size: 13px;
    font-weight: 400;

    line-height: 1.4;
}


/* ==========================================================
   FORM
========================================================== */

.contact-message-form {
    margin-top: 20px;
}


.contact-form-row {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;
}


.contact-form-group {
    min-width: 0;
}


.contact-form-group + .contact-form-group,
.contact-form-row + .contact-form-group {
    margin-top: 14px;
}


.contact-form-row
.contact-form-group + .contact-form-group {
    margin-top: 0;
}


.contact-form-group label {
    display: block;

    margin-bottom: 5px;

    color: var(--text);

    font-size: 12px;
    font-weight: 600;
}


.contact-form-group input,
.contact-form-group textarea {
    width: 100%;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--primary-light) 16%,
            var(--border)
        );

    border-radius: 6px;

    outline: none;

    background:
        color-mix(
            in srgb,
            var(--primary) 1%,
            var(--surface)
        );

    color: var(--text);

    font-family: inherit;

    font-size: 13px;
    font-weight: 400;
}


.contact-form-group input {
    height: 32px;

    padding: 0 10px;
}


.contact-form-group textarea {
    height: 105px;

    display: block;

    resize: vertical;

    padding: 10px;
}


.contact-form-group input::placeholder,
.contact-form-group textarea::placeholder {
    color:
        color-mix(
            in srgb,
            var(--muted) 45%,
            transparent
        );
}


.contact-form-group input:focus,
.contact-form-group textarea:focus {
    border-color:
        color-mix(
            in srgb,
            var(--primary-light) 45%,
            transparent
        );

    box-shadow:
        0 0 0 3px
        color-mix(
            in srgb,
            var(--primary-light) 6%,
            transparent
        );
}


/* ==========================================================
   SUBMIT
========================================================== */

.contact-submit-btn {
    width: 100%;
    height: 50px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    margin-top: 17px;

    border: 0;
    border-radius: 5px;

    background: var(--primary);
    color: var(--secondary);

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;
}


.contact-submit-btn svg {
    width: 16px;
    height: 16px;

    stroke: currentColor;
    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ==========================================================
   PRIVACY
========================================================== */

.contact-privacy {
    display: flex;
    align-items: center;

    gap: 6px;

    margin-top: 13px;

    color:
        color-mix(
            in srgb,
            var(--muted) 70%,
            transparent
        );

    font-size: 11px;
}


.contact-privacy svg {
    width: 14px;
    height: 14px;

    stroke: currentColor;
    stroke-width: 1.6;
}


/* ==========================================================
   SUCCESS / ERROR
========================================================== */

.contact-success-message {
    display: flex;
    align-items: center;

    gap: 8px;

    margin-top: 14px;

    padding: 9px 10px;

    border-radius: 6px;

    background:
        color-mix(
            in srgb,
            var(--success) 9%,
            var(--surface)
        );

    color: var(--text);

    font-size: 7px;
}


.contact-success-icon {
    width: 18px;
    height: 18px;

    flex: 0 0 18px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--success);
    color: var(--secondary);
}


.contact-form-error {
    display: block;

    margin-top: 4px;

    color: #dc2626;

    font-size: 6px;
}


/* ==========================================================
   RIGHT COLUMN
========================================================== */

.contact-right-column {
    display: flex;
    flex-direction: column;

    gap: 17px;
}


/* ==========================================================
   CONTACT DETAILS
========================================================== */

.contact-info-card {
    padding: 22px 24px 18px;
}


.contact-info-list {
    display: flex;
    flex-direction: column;

    gap: 10px;

    margin-top: 16px;
}


.contact-info-item {
    display: flex;
    align-items: center;

    gap: 10px;
}


.contact-info-icon {
    width: 40px;
    height: 40px;

    flex: 0 0 28px;

    display: grid;
    place-items: center;

    border-radius: 6px;

    background:
        color-mix(
            in srgb,
            var(--primary-light) 6%,
            var(--surface)
        );

    color: var(--primary);
}


.contact-info-icon svg {
    width: 18px;
    height: 18px;

    stroke: currentColor;
    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.contact-info-copy {
    min-width: 0;

    display: flex;
    flex-direction: column;
}


.contact-info-copy strong {
    color: var(--text);

    font-size: 13px;
    font-weight: 600;
}


.contact-info-copy span,
.contact-info-copy a {
    margin-top: 2px;

    color: var(--muted);

    font-size:12px;
    font-weight: 400;

    line-height: 1.35;
}


/* ==========================================================
   MAP
========================================================== */

.contact-map-card {
    overflow: hidden;

    border-radius: 9px;

    background: var(--surface);

    box-shadow:
        0 8px 22px
        color-mix(
            in srgb,
            var(--primary) 7%,
            transparent
        );
}


.contact-map-frame {
    height: 348px;

    position: relative;

    overflow: hidden;

    background:
        color-mix(
            in srgb,
            var(--primary-light) 7%,
            var(--surface)
        );
}


.contact-map-frame iframe {
    width: 100%;
    height: 100%;

    display: block;

    border: 0;
}


.contact-map-label {
    position: absolute;

    left: 50%;
    bottom: 62px;

    transform:
        translateX(-50%);

    padding: 7px 12px;

    border-radius: 5px;

    background: var(--primary);
    color: var(--secondary);

    box-shadow:
        0 5px 14px
        color-mix(
            in srgb,
            var(--primary) 20%,
            transparent
        );

    font-size: 12px;
    font-weight: 600;

    white-space: nowrap;
}


.contact-map-footer {
    min-height: 34px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding: 0 14px;

    background: var(--primary);
}


.contact-map-caption {
    display: flex;
    align-items: center;

    gap: 6px;

    color:
        color-mix(
            in srgb,
            var(--secondary) 78%,
            transparent
        );

    font-size: 12px;
    font-weight: 400;
}


.contact-map-caption svg {
    width: 16px;
    height: 16px;

    stroke: currentColor;
    stroke-width: 1.5;
}


.contact-map-link {
    display: inline-flex;
    align-items: center;

    gap: 5px;

    color: var(--accent);

    font-size: 12px;
    font-weight: 600;
}
/* ==========================================================
   1100PX — SMALL DESKTOP / TABLET LANDSCAPE
========================================================== */

@media (max-width: 1100px) {

    /* ======================================================
       CONTACT PAGE
    ====================================================== */

    .contact-page-section {
        padding: 32px 0 42px;
    }


    .contact-page-section .site-container {
        width: calc(100% - 60px);
    }


    .contact-page-grid {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr);

        gap: 22px;
    }


    /* FORM */

    .contact-form-card {
        padding: 22px 22px 20px;
    }


    .contact-form-row {
        gap: 12px;
    }


    .contact-message-form {
        margin-top: 18px;
    }


    .contact-form-group input {
        height: 34px;
    }


    .contact-form-group textarea {
        height: 110px;
    }


    /* INFO */

    .contact-info-card {
        padding: 20px 20px 17px;
    }


    .contact-info-list {
        gap: 9px;
        margin-top: 14px;
    }


    /* MAP */

    .contact-map-frame {
        height: 200px;
    }

}



/* ==========================================================
   900PX — TABLET
========================================================== */

@media (max-width: 900px) {

    /* ======================================================
       CONTACT PAGE
    ====================================================== */

    .contact-page-section {
        padding: 28px 0 36px;
    }


    .contact-page-section .site-container {
        width: calc(100% - 40px);
    }


    /*
    | Keep both columns on normal tablets,
    | but give the form slightly more space.
    */

    .contact-page-grid {
        grid-template-columns:
            minmax(0, 1.08fr)
            minmax(0, .92fr);

        gap: 18px;
    }


    /* HEADINGS */

    .contact-card-heading h2 {
        font-size: 15px;
    }


    .contact-card-heading p {
        font-size: 7.5px;
    }


    /* FORM */

    .contact-form-card {
        padding: 20px;
    }


    .contact-form-row {
        grid-template-columns: 1fr;

        gap: 12px;
    }


    .contact-form-row
    .contact-form-group + .contact-form-group {
        margin-top: 0;
    }


    .contact-form-group + .contact-form-group,
    .contact-form-row + .contact-form-group {
        margin-top: 12px;
    }


    .contact-form-group label {
        font-size: 7px;
    }


    .contact-form-group input,
    .contact-form-group textarea {
        font-size: 7.5px;
    }


    .contact-form-group input {
        height: 34px;
    }


    .contact-form-group textarea {
        height: 108px;
    }


    .contact-submit-btn {
        height: 35px;
    }


    /* RIGHT INFO */

    .contact-info-card {
        padding: 18px;
    }


    .contact-info-item {
        gap: 8px;
    }


    .contact-info-icon {
        width: 26px;
        height: 26px;

        flex: 0 0 26px;
    }


    .contact-info-icon svg {
        width: 12px;
        height: 12px;
    }


    .contact-info-copy strong {
        font-size: 7.5px;
    }


    .contact-info-copy span,
    .contact-info-copy a {
        font-size: 6px;
    }


    /* MAP */

    .contact-map-frame {
        height: 190px;
    }


    .contact-map-label {
        bottom: 52px;

        padding: 6px 10px;

        font-size: 5.5px;
    }


    .contact-map-footer {
        min-height: 32px;

        padding: 0 11px;
    }
}



/* ==========================================================
   650PX — MOBILE
========================================================== */

@media (max-width: 650px) {

    /* ======================================================
       CONTACT PAGE
    ====================================================== */

    .contact-page-section {
        padding: 20px 0 28px;
    }


    .contact-page-section .site-container {
        width: calc(100% - 16px);
    }


    /*
    | Stack form and contact information.
    */

    .contact-page-grid {
        grid-template-columns: 1fr;

        gap: 14px;
    }


    /* ======================================================
       CARDS
    ====================================================== */

    .contact-form-card,
    .contact-info-card,
    .contact-map-card {
        border-radius: 8px;
    }


    /* ======================================================
       FORM CARD
    ====================================================== */

    .contact-form-card {
        padding: 16px 14px 15px;

        border-top-width: 3px;
    }


    .contact-card-heading h2 {
        font-size: 13px;

        line-height: 1.2;
    }


    .contact-card-heading p {
        margin-top: 4px;

        font-size: 7px;

        line-height: 1.4;
    }


    .contact-message-form {
        margin-top: 15px;
    }


    /*
    | Name and phone now full width.
    */

    .contact-form-row {
        grid-template-columns: 1fr;

        gap: 11px;
    }


    .contact-form-group + .contact-form-group,
    .contact-form-row + .contact-form-group {
        margin-top: 11px;
    }


    .contact-form-row
    .contact-form-group + .contact-form-group {
        margin-top: 0;
    }


    .contact-form-group label {
        margin-bottom: 4px;

        font-size: 7px;
    }


    .contact-form-group input,
    .contact-form-group textarea {
        border-radius: 5px;

        font-size: 8px;
    }


    .contact-form-group input {
        height: 35px;

        padding: 0 9px;
    }


    .contact-form-group textarea {
        height: 110px;

        padding: 9px;

        resize: vertical;
    }


    /* ERROR */

    .contact-form-error {
        margin-top: 3px;

        font-size: 6px;
    }


    /* ======================================================
       SUBMIT
    ====================================================== */

    .contact-submit-btn {
        height: 36px;

        gap: 6px;

        margin-top: 14px;

        border-radius: 5px;

        font-size: 8px;
    }


    .contact-submit-btn svg {
        width: 10px;
        height: 10px;
    }


    /* ======================================================
       PRIVACY
    ====================================================== */

    .contact-privacy {
        gap: 5px;

        margin-top: 10px;

        font-size: 6px;
    }


    .contact-privacy svg {
        width: 8px;
        height: 8px;
    }


    /* ======================================================
       SUCCESS MESSAGE
    ====================================================== */

    .contact-success-message {
        gap: 7px;

        margin-top: 11px;

        padding: 8px 9px;

        font-size: 7px;
    }


    .contact-success-icon {
        width: 17px;
        height: 17px;

        flex: 0 0 17px;

        font-size: 7px;
    }


    /* ======================================================
       RIGHT COLUMN
    ====================================================== */

    .contact-right-column {
        gap: 14px;
    }


    /* ======================================================
       CONTACT INFO
    ====================================================== */

    .contact-info-card {
        padding: 15px 14px;
    }


    .contact-info-list {
        gap: 9px;

        margin-top: 13px;
    }


    .contact-info-item {
        align-items: flex-start;

        gap: 8px;
    }


    .contact-info-icon {
        width: 26px;
        height: 26px;

        flex: 0 0 26px;

        border-radius: 5px;
    }


    .contact-info-icon svg {
        width: 11px;
        height: 11px;
    }


    .contact-info-copy strong {
        font-size: 7.5px;
    }


    .contact-info-copy span,
    .contact-info-copy a {
        margin-top: 2px;

        font-size: 6.5px;

        line-height: 1.4;

        overflow-wrap: anywhere;
    }


    /* ======================================================
       MAP
    ====================================================== */

    .contact-map-frame {
        height: 210px;
    }


    .contact-map-label {
        bottom: 52px;

        max-width: calc(100% - 30px);

        padding: 6px 10px;

        overflow: hidden;

        font-size: 5.5px;

        text-overflow: ellipsis;

        white-space: nowrap;
    }


    .contact-map-footer {
        min-height: 34px;

        gap: 8px;

        padding: 0 10px;
    }


    .contact-map-caption {
        min-width: 0;

        gap: 5px;

        font-size: 5.5px;
    }


    .contact-map-caption svg {
        width: 10px;
        height: 10px;

        flex: 0 0 10px;
    }


    .contact-map-link {
        flex: 0 0 auto;

        gap: 4px;

        font-size: 5.5px;

        white-space: nowrap;
    }
}



/* ==========================================================
   430PX — SMALL MOBILE
========================================================== */

@media (max-width: 430px) {

    /* ======================================================
       CONTACT PAGE
    ====================================================== */

    .contact-page-section {
        padding: 16px 0 24px;
    }


    .contact-page-section .site-container {
        width: calc(100% - 14px);
    }


    .contact-page-grid {
        gap: 12px;
    }


    /* ======================================================
       FORM
    ====================================================== */

    .contact-form-card {
        padding: 14px 12px;
    }


    .contact-card-heading h2 {
        font-size: 12px;
    }


    .contact-card-heading p {
        font-size: 6.5px;
    }


    .contact-message-form {
        margin-top: 13px;
    }


    .contact-form-group + .contact-form-group,
    .contact-form-row + .contact-form-group {
        margin-top: 10px;
    }


    .contact-form-row {
        gap: 10px;
    }


    .contact-form-group label {
        font-size: 6.5px;
    }


    .contact-form-group input,
    .contact-form-group textarea {
        font-size: 7.5px;
    }


    .contact-form-group input {
        height: 34px;

        padding: 0 8px;
    }


    .contact-form-group textarea {
        height: 100px;

        padding: 8px;
    }


    .contact-submit-btn {
        height: 34px;

        margin-top: 12px;

        font-size: 7.5px;
    }


    /* ======================================================
       INFO
    ====================================================== */

    .contact-info-card {
        padding: 14px 12px;
    }


    .contact-info-list {
        gap: 8px;

        margin-top: 11px;
    }


    .contact-info-icon {
        width: 24px;
        height: 24px;

        flex: 0 0 24px;
    }


    .contact-info-icon svg {
        width: 10px;
        height: 10px;
    }


    .contact-info-copy strong {
        font-size: 7px;
    }


    .contact-info-copy span,
    .contact-info-copy a {
        font-size: 6px;
    }


    /* ======================================================
       MAP
    ====================================================== */

    .contact-map-frame {
        height: 185px;
    }


    .contact-map-label {
        bottom: 45px;

        padding: 5px 8px;

        font-size: 5px;
    }


    .contact-map-footer {
        min-height: 32px;

        padding: 0 8px;
    }


    .contact-map-caption {
        font-size: 5px;
    }


    .contact-map-link {
        font-size: 5px;
    }
}
/* ==========================================================
   CUSTOM MAP LOCATION MARKER
========================================================== */

.contact-map-marker {
    width: 48px;
    height: 48px;

    position: absolute;

    left: 50%;
    top: 50%;

    z-index: 5;

    display: grid;
    place-items: center;

    transform:
        translate(-50%, -62%);

    border-radius: 50%;

    background: var(--accent);

    box-shadow:
        0 10px 25px
        color-mix(
            in srgb,
            var(--accent) 30%,
            transparent
        );
}


.contact-map-marker svg {
    width: 22px;
    height: 22px;

    display: block;

    stroke: var(--secondary);
    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;
}
/* -----------------------------------------------------------------GALLERY----------------------------------------------------------------- */
/* ==========================================================
   FULL GALLERY PAGE
========================================================== */

.gallery-page-section {
    padding: 24px 0 44px;

    background: var(--background);
}


.gallery-page-section .site-container {
    width: min(calc(100% - 96px), 1360px);

    margin-inline: auto;
}


/* ==========================================================
   FILTERS
========================================================== */

.gallery-page-filters {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    margin-bottom: 19px;

    flex-wrap: wrap;
}


.gallery-filter-btn {
    min-width: 117px;
    height: 41px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 14px;

    border:
        1px solid var(--border);

    border-radius: 999px;

    background: var(--surface);
    color: var(--muted);

    font-family: inherit;

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background .18s ease,
        color .18s ease,
        border-color .18s ease;
}


.gallery-filter-btn.is-active {
    border-color: var(--primary);

    background: var(--primary);
    color: var(--secondary);
}


/* ==========================================================
   GRID
========================================================== */

.gallery-page-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 15px 14px;
}


/* ==========================================================
   CARD
========================================================== */

.gallery-page-card {
    min-width: 0;
    height: 240px;

    overflow: hidden;

    border-radius: 9px;

    background: var(--surface);

    box-shadow:
        0 6px 16px
        color-mix(
            in srgb,
            var(--primary) 6%,
            transparent
        );
}


/* ==========================================================
   MEDIA
========================================================== */

.gallery-page-media {
    height: 160px;

    position: relative;

    overflow: hidden;

    background:
        color-mix(
            in srgb,
            var(--primary-light) 6%,
            var(--surface)
        );
}


.gallery-page-media img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .25s ease;
}


.gallery-page-card:hover
.gallery-page-media img {
    transform:
        scale(1.035);
}


/* ==========================================================
   CONTENT
========================================================== */

.gallery-page-card-content {
    padding: 9px 10px 10px;
}


.gallery-page-category {
    min-height: 21px;
    max-width: 58px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 2px 12px;

    border-radius: 8px;

    background:
        color-mix(
            in srgb,
            var(--accent) 10%,
            var(--surface)
        );

    color: var(--accent);

    font-size: 11px;
    font-weight: 600;
}


.gallery-page-card-content h3 {
    margin: 5px 0 0;

    color: var(--primary);

    font-size: 14px;
    font-weight: 700;

    line-height: 1.25;
}


/* ==========================================================
   VIDEO PLAY
========================================================== */

.gallery-video-play {
    width: 34px;
    height: 34px;

    position: absolute;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);

    display: grid;
    place-items: center;

    border: 0;
    border-radius: 50%;

    background:
        color-mix(
            in srgb,
            var(--primary) 85%,
            transparent
        );

    color: var(--secondary);

    cursor: pointer;
}


.gallery-video-play span {
    margin-left: 2px;

    font-size: 11px;
}


/* ==========================================================
   EMPTY
========================================================== */

.gallery-page-empty {
    grid-column: 1 / -1;

    padding: 20px;

    border-radius: 8px;

    background: var(--surface);

    color: var(--muted);

    font-size: 8px;

    text-align: center;
}


/* ==========================================================
   VIDEO MODAL
========================================================== */

.gallery-video-modal {
    position: fixed;

    inset: 0;

    z-index: 5000;

    display: grid;
    place-items: center;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transition:
        opacity .2s ease,
        visibility .2s ease;
}


.gallery-video-modal.is-open {
    opacity: 1;
    visibility: visible;

    pointer-events: auto;
}


.gallery-video-backdrop {
    position: absolute;

    inset: 0;

    background:
        color-mix(
            in srgb,
            var(--primary) 75%,
            transparent
        );
}


.gallery-video-dialog {
    width: min(760px, calc(100% - 40px));

    position: relative;

    z-index: 1;

    padding: 10px;

    border-radius: 10px;

    background: var(--surface);
}


.gallery-video-dialog video {
    width: 100%;

    display: block;

    border-radius: 7px;

    background: #000;
}


.gallery-video-close {
    width: 30px;
    height: 30px;

    position: absolute;

    right: -10px;
    top: -10px;

    z-index: 2;

    display: grid;
    place-items: center;

    border: 0;
    border-radius: 50%;

    background: var(--primary);
    color: var(--secondary);

    font-size: 18px;

    cursor: pointer;
}
/* ==========================================================
   ==========================================================
   GALLERY PAGE — FULL RESPONSIVE
   KEEP RESPONSIVENESS IN CENTRAL MEDIA BLOCKS ONLY
   ==========================================================
   ========================================================== */


/* ==========================================================
   1100PX — SMALL DESKTOP / TABLET LANDSCAPE
========================================================== */

@media (max-width: 1100px) {

    /* ======================================================
       GALLERY SECTION
    ====================================================== */

    .gallery-page-section {
        padding: 22px 0 38px;
    }


    .gallery-page-section .site-container {
        width: calc(100% - 60px);
    }


    /* ======================================================
       FILTERS
    ====================================================== */

    .gallery-page-filters {
        gap: 8px;

        margin-bottom: 18px;
    }


    .gallery-filter-btn {
        min-width: 105px;
        height: 38px;

        padding: 0 13px;

        font-size: 13px;
    }


    /* ======================================================
       GRID
    ====================================================== */

    .gallery-page-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 14px;
    }


    /* ======================================================
       CARD
    ====================================================== */

    .gallery-page-card {
        height: 225px;

        border-radius: 9px;
    }


    /* ======================================================
       MEDIA
    ====================================================== */

    .gallery-page-media {
        height: 148px;
    }


    /* ======================================================
       CARD CONTENT
    ====================================================== */

    .gallery-page-card-content {
        padding: 8px 9px 9px;
    }


    .gallery-page-category {
        min-height: 20px;

        max-width: none;

        padding: 2px 10px;

        font-size: 10px;
    }


    .gallery-page-card-content h3 {
        margin-top: 5px;

        font-size: 13px;
    }


    /* ======================================================
       VIDEO PLAY
    ====================================================== */

    .gallery-video-play {
        width: 36px;
        height: 36px;
    }


    .gallery-video-play span {
        font-size: 11px;
    }


    /* ======================================================
       VIDEO MODAL
    ====================================================== */

    .gallery-video-dialog {
        width: min(
            700px,
            calc(100% - 50px)
        );
    }
}



/* ==========================================================
   900PX — TABLET
========================================================== */

@media (max-width: 900px) {

    /* ======================================================
       GALLERY SECTION
    ====================================================== */

    .gallery-page-section {
        padding: 20px 0 34px;
    }


    .gallery-page-section .site-container {
        width: calc(100% - 40px);
    }


    /* ======================================================
       FILTERS
    ====================================================== */

    .gallery-page-filters {
        gap: 7px;

        margin-bottom: 16px;
    }


    .gallery-filter-btn {
        min-width: 92px;
        height: 35px;

        padding: 0 12px;

        font-size: 11px;
    }


    /* ======================================================
       GRID — 2 PER ROW
    ====================================================== */

    .gallery-page-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 14px;
    }


    /* ======================================================
       CARD
    ====================================================== */

    .gallery-page-card {
        height: 235px;

        border-radius: 9px;
    }


    /* ======================================================
       MEDIA
    ====================================================== */

    .gallery-page-media {
        height: 158px;
    }


    /* ======================================================
       CONTENT
    ====================================================== */

    .gallery-page-card-content {
        padding: 8px 10px 10px;
    }


    .gallery-page-category {
        min-height: 20px;

        max-width: none;

        padding: 2px 10px;

        font-size: 10px;
    }


    .gallery-page-card-content h3 {
        margin-top: 5px;

        font-size: 13px;

        line-height: 1.25;
    }


    /* ======================================================
       VIDEO
    ====================================================== */

    .gallery-video-play {
        width: 38px;
        height: 38px;
    }


    .gallery-video-play span {
        font-size: 12px;
    }


    /* ======================================================
       EMPTY
    ====================================================== */

    .gallery-page-empty {
        padding: 18px;

        font-size: 8px;
    }


    /* ======================================================
       VIDEO MODAL
    ====================================================== */

    .gallery-video-dialog {
        width: min(
            650px,
            calc(100% - 40px)
        );
    }
}



/* ==========================================================
   650PX — MOBILE
========================================================== */

@media (max-width: 650px) {

    /* ======================================================
       GALLERY SECTION
    ====================================================== */

    .gallery-page-section {
        padding: 18px 0 28px;
    }


    .gallery-page-section .site-container {
        width: calc(100% - 16px);
    }


    /* ======================================================
       FILTERS
       HORIZONTAL SCROLL
    ====================================================== */

    .gallery-page-filters {
        width: 100%;

        justify-content: flex-start;

        gap: 6px;

        margin-bottom: 14px;

        padding-bottom: 4px;

        overflow-x: auto;
        overflow-y: hidden;

        flex-wrap: nowrap;

        scrollbar-width: none;

        -webkit-overflow-scrolling: touch;
    }


    .gallery-page-filters::-webkit-scrollbar {
        display: none;
    }


    .gallery-filter-btn {
        min-width: auto;
        height: 32px;

        flex: 0 0 auto;

        padding: 0 12px;

        font-size: 10px;

        white-space: nowrap;
    }


    /* ======================================================
       GRID — STILL 2 PER ROW
    ====================================================== */

    .gallery-page-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 9px;
    }


    /* ======================================================
       CARD
    ====================================================== */

    .gallery-page-card {
        width: 100%;
        height: 200px;

        min-width: 0;

        border-radius: 8px;
    }


    /* ======================================================
       MEDIA
    ====================================================== */

    .gallery-page-media {
        width: 100%;
        height: 130px;
    }


    .gallery-page-media img {
        width: 100%;
        height: 100%;

        object-fit: cover;
    }


    /* ======================================================
       CARD CONTENT
    ====================================================== */

    .gallery-page-card-content {
        padding: 7px 8px 8px;
    }


    .gallery-page-category {
        min-height: 18px;

        max-width: 100%;

        padding: 2px 8px;

        border-radius: 6px;

        font-size: 8px;

        white-space: nowrap;
    }


    .gallery-page-card-content h3 {
        margin-top: 4px;

        font-size: 10px;

        line-height: 1.25;

        display: -webkit-box;

        -webkit-line-clamp: 2;

        -webkit-box-orient: vertical;

        overflow: hidden;
    }


    /* ======================================================
       VIDEO PLAY
    ====================================================== */

    .gallery-video-play {
        width: 34px;
        height: 34px;
    }


    .gallery-video-play span {
        margin-left: 1px;

        font-size: 11px;
    }


    /* ======================================================
       EMPTY
    ====================================================== */

    .gallery-page-empty {
        padding: 16px;

        font-size: 8px;
    }


    /* ======================================================
       VIDEO MODAL
    ====================================================== */

    .gallery-video-dialog {
        width: calc(100% - 24px);

        padding: 7px;

        border-radius: 8px;
    }


    .gallery-video-dialog video {
        border-radius: 6px;
    }


    .gallery-video-close {
        width: 28px;
        height: 28px;

        right: -6px;
        top: -8px;

        font-size: 17px;
    }
}



/* ==========================================================
   430PX — SMALL MOBILE
   IMPORTANT: STILL 2 CARDS PER ROW
========================================================== */

@media (max-width: 430px) {

    /* ======================================================
       GALLERY SECTION
    ====================================================== */

    .gallery-page-section {
        padding: 15px 0 24px;
    }


    .gallery-page-section .site-container {
        width: calc(100% - 14px);
    }


    /* ======================================================
       FILTERS
    ====================================================== */

    .gallery-page-filters {
        gap: 5px;

        margin-bottom: 12px;

        padding-bottom: 3px;
    }


    .gallery-filter-btn {
        height: 29px;

        padding: 0 10px;

        font-size: 9px;
    }


    /* ======================================================
       GRID — 2 PER ROW
    ====================================================== */

    .gallery-page-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 8px;
    }


    /* ======================================================
       CARD
    ====================================================== */

    .gallery-page-card {
        width: 100%;
        height: 176px;

        min-width: 0;

        border-radius: 7px;
    }


    /* ======================================================
       MEDIA
    ====================================================== */

    .gallery-page-media {
        width: 100%;
        height: 112px;
    }


    .gallery-page-media img {
        width: 100%;
        height: 100%;

        object-fit: cover;
    }


    /* ======================================================
       CONTENT
    ====================================================== */

    .gallery-page-card-content {
        padding: 6px 7px 7px;
    }


    .gallery-page-category {
        min-height: 16px;

        max-width: 100%;

        padding: 1px 6px;

        border-radius: 5px;

        font-size: 7px;

        line-height: 1;
    }


    .gallery-page-card-content h3 {
        margin-top: 4px;

        font-size: 8.5px;
        font-weight: 700;

        line-height: 1.25;

        display: -webkit-box;

        -webkit-line-clamp: 2;

        -webkit-box-orient: vertical;

        overflow: hidden;
    }


    /* ======================================================
       VIDEO PLAY
    ====================================================== */

    .gallery-video-play {
        width: 30px;
        height: 30px;
    }


    .gallery-video-play span {
        margin-left: 1px;

        font-size: 9px;
    }


    /* ======================================================
       EMPTY
    ====================================================== */

    .gallery-page-empty {
        grid-column: 1 / -1;

        padding: 14px;

        font-size: 7px;
    }


    /* ======================================================
       VIDEO MODAL
    ====================================================== */

    .gallery-video-dialog {
        width: calc(100% - 18px);

        padding: 6px;
    }


    .gallery-video-close {
        width: 26px;
        height: 26px;

        right: -4px;
        top: -7px;

        font-size: 16px;
    }
}

/* ----------------------------------------------------------FAQ----------------------------------------------------------------------- */
/* ==========================================================
   FAQ PAGE
========================================================== */

.faq-page-section {
    padding: 36px 0 35px;

    background: var(--background);
}


/* ==========================================================
   SAME CONTENT WIDTH AS OTHER WEBSITE SECTIONS
========================================================== */

.faq-page-section .site-container {
    width: min(calc(100% - 100px), 1360px);

    margin-inline: auto;
}


/* ==========================================================
   PAGE LAYOUT
========================================================== */

/* ==========================================================
   FAQ PAGE LAYOUT
========================================================== */

/* ==========================================================
   FAQ PAGE LAYOUT
========================================================== */

.faq-page-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 860px)
        minmax(0, 380px);

    gap: 24px;

    align-items: start;
    justify-content: space-between;
}
/* ==========================================================
   FAQ LEFT SIDE
========================================================== */

.faq-groups {
    width: 100%;

    min-width: 0;
}


/* ==========================================================
   FAQ GROUP
========================================================== */

.faq-group + .faq-group {
    margin-top: 14px;
}


.faq-group-title {
    margin: 0 0 9px;

    color: var(--primary);

    font-size: 20px;
    font-weight: 700;

    line-height: 1.2;
}


/* ==========================================================
   FAQ ITEMS
========================================================== */

.faq-group-items {
    display: flex;
    flex-direction: column;

    gap: 10px;
}


.faq-item {
    width: 100%;

    overflow: hidden;

    border: 0;

    border-radius: 8px;

    background: var(--surface);

    box-shadow:
        0 5px 14px
        color-mix(
            in srgb,
            var(--primary) 4%,
            transparent
        );
}


/* ==========================================================
   QUESTION
========================================================== */

.faq-question {
    width: 100%;
    min-height: 59px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;

    padding: 0 14px;

    border: 0;

    outline: none;

    background: transparent;

    color: var(--text);

    font-family: inherit;

    font-size: 15px;
    font-weight: 600;

    line-height: 1.35;

    text-align: left;

    cursor: pointer;
}


.faq-question > span:first-child {
    min-width: 0;

    flex: 1;
}


/* ==========================================================
   PLUS / MINUS
========================================================== */

.faq-toggle {
    width: 16px;
    height: 16px;

    flex: 0 0 16px;

    display: grid;
    place-items: center;

    color: var(--accent);

    font-size: 15px;
    font-weight: 700;

    line-height: 1;
}


/* ==========================================================
   OPEN ITEM
========================================================== */

.faq-item.is-open
.faq-toggle {
    font-size: 0;
}


.faq-item.is-open
.faq-toggle::before {
    content: "−";

    color: var(--accent);

    font-size: 15px;
    font-weight: 700;

    line-height: 1;
}


/* ==========================================================
   ANSWER
========================================================== */

.faq-answer {
    display: grid;

    grid-template-rows: 0fr;

    transition:
        grid-template-rows .22s ease;
}


.faq-item.is-open
.faq-answer {
    grid-template-rows: 1fr;
}


.faq-answer-inner {
    min-height: 0;

    overflow: hidden;
}


.faq-answer-inner p {
    margin: 0;

    padding:
        0 14px
        12px;

    color: var(--muted);

    font-size: 13px;
    font-weight: 400;

    line-height: 1.55;
}


/* ==========================================================
   OPEN QUESTION DIVIDER
========================================================== */

.faq-item.is-open
.faq-question {
    position: relative;
}


.faq-item.is-open
.faq-question::after {
    content: "";

    position: absolute;

    left: 14px;
    right: 14px;
    bottom: 0;

    height: 1px;

    background:
        color-mix(
            in srgb,
            var(--border) 80%,
            transparent
        );
}


/* ==========================================================
   SUPPORT CARD
========================================================== */

.faq-support-card {
    width: 100%;
    min-height: 299px;

    display: flex;
    flex-direction: column;

    align-items: center;

    padding:
        20px 16px
        18px;

    border-radius: 10px;

    background: var(--primary);

    color: var(--secondary);

    text-align: center;
}


/* ==========================================================
   SUPPORT ICON
========================================================== */

.faq-support-icon {
    width: 32px;
    height: 32px;

    align-self: flex-start;

    display: grid;
    place-items: center;

    margin:
        0 0
        14px;

    color:
        color-mix(
            in srgb,
            var(--secondary) 78%,
            transparent
        );
}


.faq-support-icon svg {
    width: 32px;
    height: 32px;

    display: block;

    fill:
        color-mix(
            in srgb,
            var(--secondary) 72%,
            transparent
        );

    stroke:
        color-mix(
            in srgb,
            var(--secondary) 72%,
            transparent
        );

    stroke-width: 1.2;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ==========================================================
   SUPPORT HEADING
========================================================== */

.faq-support-card h2 {
    margin: 0;

    color: var(--secondary);

    font-size: 22px;
    font-weight: 700;

    line-height: 1.25;
}


/* ==========================================================
   SUPPORT TEXT
========================================================== */

.faq-support-card p {
    max-width: 316px;

    margin:
        13px auto
        15px;

    color:
        color-mix(
            in srgb,
            var(--secondary) 68%,
            transparent
        );

    font-size: 13px;
    font-weight: 400;

    line-height: 1.5;
}


/* ==========================================================
   SUPPORT BUTTON
========================================================== */

.faq-support-button {
    width: 100%;
    min-height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-top: auto;

    padding: 6px 8px;

    border-radius: 6px;

    background: var(--accent);

    color: var(--primary);

    font-size: 13px;
    font-weight: 600;

    line-height: 1.2;

    text-decoration: none;

    transition:
        transform .18s ease,
        opacity .18s ease;
}


.faq-support-button:hover {
    transform:
        translateY(-1px);

    opacity: .95;
}
/* -------------------------------------------------CALENDER------------------------------------ */
/* ==========================================================
   ACADEMICS HERO CALENDAR BUTTON
========================================================== */

.academics-hero-content-row {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 24px;
}


.academics-calendar-button {
    min-width: 170px;
    height: 40px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    padding: 0 16px;

    border-radius: 7px;

    background: var(--accent);
    color: var(--primary);

    font-size: 12px;
    font-weight: 700;

    line-height: 1;

    white-space: nowrap;
}


.academics-calendar-button svg {
    width: 17px;
    height: 17px;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}
/* ==========================================================
   ACADEMIC SCHOOL CALENDAR PAGE
========================================================== */

.academic-calendar-section {
    padding: 30px 0 42px;

    background: var(--background);
}


/* SAME CONTENT WIDTH AS MAIN WEBSITE SECTIONS */

.academic-calendar-section .site-container {
    width:
        min(
            calc(100% - 100px),
            1360px
        );

    margin-inline: auto;
}


/* ==========================================================
   MAIN LAYOUT
========================================================== */

.academic-calendar-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        300px;

    gap: 32px;

    align-items: start;
}


/* ==========================================================
   CALENDAR CARD
========================================================== */

.academic-calendar-card {
    min-width: 0;

    overflow: hidden;

    border-radius: 11px;

    background: var(--surface);

    box-shadow:
        0 7px 20px
        color-mix(
            in srgb,
            var(--primary) 7%,
            transparent
        );
}


/* ==========================================================
   MONTH TOOLBAR
========================================================== */

.academic-calendar-toolbar {
    min-height: 54px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding:
        0 18px;

    background: var(--primary);

    color: var(--secondary);
}


.academic-calendar-toolbar strong {
    font-size: 18px;
    font-weight: 700;
}


/* ==========================================================
   MONTH NAVIGATION
========================================================== */

.academic-calendar-navigation {
    display: flex;

    gap: 8px;
}


.academic-calendar-navigation button {
    width: 28px;
    height: 28px;

    display: grid;
    place-items: center;

    border: 0;

    border-radius: 50%;

    background:
        color-mix(
            in srgb,
            var(--secondary) 14%,
            transparent
        );

    color: var(--secondary);

    font-size: 18px;

    line-height: 1;

    cursor: pointer;

    transition:
        background .18s ease,
        transform .18s ease;
}


.academic-calendar-navigation button:hover {
    background:
        color-mix(
            in srgb,
            var(--secondary) 23%,
            transparent
        );

    transform:
        translateY(-1px);
}


/* ==========================================================
   CALENDAR SCROLL
========================================================== */

.academic-calendar-scroll {
    min-width: 0;
}


/* ==========================================================
   WEEKDAYS
========================================================== */

.academic-calendar-weekdays {
    display: grid;

    grid-template-columns:
        repeat(
            7,
            minmax(0, 1fr)
        );

    min-height: 42px;

    align-items: center;

    border-bottom:
        1px solid var(--border);
}


.academic-calendar-weekdays span {
    color: var(--muted);

    font-size: 13px;
    font-weight: 600;

    text-align: center;
}


/* ==========================================================
   DAY GRID
========================================================== */

.academic-calendar-grid {
    display: grid;

    grid-template-columns:
        repeat(
            7,
            minmax(0, 1fr)
        );
}


/* ==========================================================
   DAY CELL
========================================================== */

.academic-calendar-day {
    min-width: 0;
    min-height: 92px;

    position: relative;

    padding:
        8px 6px;

    border-right:
        1px solid var(--border);

    border-bottom:
        1px solid var(--border);

    background: var(--surface);
}


.academic-calendar-day:nth-child(7n) {
    border-right: 0;
}


.academic-calendar-day.is-empty {
    background:
        color-mix(
            in srgb,
            var(--background) 45%,
            var(--surface)
        );
}


/* ==========================================================
   DAY NUMBER
========================================================== */

.academic-calendar-day-number {
    display: block;

    margin-bottom: 7px;

    color: var(--text);

    font-size: 13px;
    font-weight: 600;

    line-height: 1;
}


/* ==========================================================
   EVENT PILL
========================================================== */

.academic-calendar-event {
    width: 100%;

    display: block;

    margin-top: 4px;

    padding:
        3px 5px;

    overflow: hidden;

    border-radius: 3px;

    background:
        color-mix(
            in srgb,
            var(--primary) 10%,
            var(--surface)
        );

    color: var(--primary);

    font-size: 10px;
    font-weight: 600;

    line-height: 1.2;

    white-space: nowrap;

    text-overflow: ellipsis;
}


/* ACADEMIC */

.academic-calendar-event--academic {
    background:
        color-mix(
            in srgb,
            var(--primary) 11%,
            var(--surface)
        );

    color: var(--primary);
}


/* EVENT */

.academic-calendar-event--event {
    background:
        color-mix(
            in srgb,
            var(--primary-light) 11%,
            var(--surface)
        );

    color: var(--secondary2);
}


/* SPORTS */

.academic-calendar-event--sports {
    background:
        color-mix(
            in srgb,
            var(--success) 14%,
            var(--surface)
        );

    color: var(--success);
}


/* TERM DATES */

.academic-calendar-event--term-date {
    background:
        color-mix(
            in srgb,
            var(--accent) 17%,
            var(--surface)
        );

    color:
        color-mix(
            in srgb,
            var(--accent) 75%,
            var(--text)
        );
}


/* ==========================================================
   MORE
========================================================== */

.academic-calendar-more {
    display: block;

    margin-top: 4px;

    color: var(--muted);

    font-size: 10px;
    font-weight: 600;
}


/* ==========================================================
   RIGHT SIDEBAR
========================================================== */

.academic-calendar-sidebar {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 18px;
}


/* ==========================================================
   SIDE CARD
========================================================== */

.calendar-side-card {
    padding:
        20px 18px;

    border-radius: 11px;

    background: var(--surface);

    box-shadow:
        0 7px 20px
        color-mix(
            in srgb,
            var(--primary) 6%,
            transparent
        );
}


.calendar-side-card h2 {
    margin: 0;

    color: var(--primary);

    font-size: 18px;
    font-weight: 700;

    line-height: 1.2;
}


/* ==========================================================
   ORANGE LINE
========================================================== */

.calendar-side-heading-line {
    width: 32px;
    height: 2px;

    display: block;

    margin:
        9px 0
        12px;

    border-radius: 999px;

    background: var(--accent);
}


/* ==========================================================
   TERM DATE ROW
========================================================== */

.calendar-term-date-list {
    display: flex;
    flex-direction: column;

    gap: 9px;
}


.calendar-term-date-row {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 12px;
}


.calendar-term-date-row span {
    color: var(--muted);

    font-size: 13px;
    font-weight: 400;
}


.calendar-term-date-row strong {
    flex: 0 0 auto;

    color: var(--text);

    font-size: 13px;
    font-weight: 600;

    white-space: nowrap;
}


/* ==========================================================
   HIGHLIGHTS
========================================================== */

.calendar-highlights-list {
    display: flex;
    flex-direction: column;

    gap: 13px;

    margin-top: 16px;
}


.calendar-highlight-item {
    display: flex;

    align-items: center;

    gap: 10px;
}


/* ==========================================================
   HIGHLIGHT ICON
========================================================== */

.calendar-highlight-icon {
    width: 36px;
    height: 36px;

    flex: 0 0 30px;

    display: grid;
    place-items: center;

    border-radius: 7px;

    background:
        color-mix(
            in srgb,
            var(--primary) 8%,
            var(--surface)
        );

    font-size: 16px;
}


.calendar-highlight-icon--sports {
    background:
        color-mix(
            in srgb,
            var(--success) 12%,
            var(--surface)
        );
}


.calendar-highlight-icon--academic {
    background:
        color-mix(
            in srgb,
            var(--primary) 10%,
            var(--surface)
        );
}


/* ==========================================================
   HIGHLIGHT TEXT
========================================================== */

.calendar-highlight-item div {
    min-width: 0;
}


.calendar-highlight-item strong {
    display: block;

    overflow: hidden;

    color: var(--text);

    font-size: 13px;
    font-weight: 600;

    line-height: 1.25;

    white-space: nowrap;

    text-overflow: ellipsis;
}


.calendar-highlight-item small {
    display: block;

    margin-top: 3px;

    color: var(--muted);

    font-size: 11px;
    font-weight: 400;

    line-height: 1.2;
}


/* ==========================================================
   EMPTY
========================================================== */

.calendar-empty-text {
    margin: 10px 0 0;

    color: var(--muted);

    font-size: 9px;

    line-height: 1.4;
}
/* ==========================================================
   ==========================================================
   FULL RESPONSIVE CSS
   FAQ + ACADEMIC CALENDAR
   ADD BELOW YOUR CURRENT DESKTOP CSS
   ==========================================================
   ========================================================== */


/* ==========================================================
   1100PX
   SMALL DESKTOP / TABLET LANDSCAPE
========================================================== */

@media (max-width: 1100px) {

    /* ======================================================
       FAQ PAGE CONTAINER
    ====================================================== */

    .faq-page-section .site-container {
        width: calc(100% - 60px);
    }


    /* ======================================================
       FAQ LAYOUT
    ====================================================== */

    .faq-page-layout {
        grid-template-columns:
            minmax(0, 1fr)
            320px;

        gap: 24px;

        justify-content: initial;
    }


    .faq-group-title {
        font-size: 18px;
    }


    .faq-question {
        min-height: 56px;

        font-size: 14px;
    }


    .faq-answer-inner p {
        font-size: 12px;
    }


    /* ======================================================
       FAQ SUPPORT CARD
    ====================================================== */

    .faq-support-card {
        min-height: 280px;

        padding:
            20px 16px
            18px;
    }


    .faq-support-card h2 {
        font-size: 20px;
    }


    .faq-support-card p {
        max-width: 280px;

        font-size: 12px;
    }


    .faq-support-button {
        min-height: 42px;

        font-size: 12px;
    }


    /* ======================================================
       ACADEMICS CALENDAR BUTTON
    ====================================================== */

    .academics-calendar-button {
        min-width: 160px;
        height: 39px;

        padding: 0 14px;

        font-size: 11px;
    }


    /* ======================================================
       ACADEMIC CALENDAR CONTAINER
    ====================================================== */

    .academic-calendar-section .site-container {
        width: calc(100% - 60px);
    }


    /* ======================================================
       ACADEMIC CALENDAR LAYOUT
    ====================================================== */

    .academic-calendar-layout {
        grid-template-columns:
            minmax(0, 1fr)
            270px;

        gap: 24px;
    }


    /* ======================================================
       CALENDAR TOOLBAR
    ====================================================== */

    .academic-calendar-toolbar {
        min-height: 52px;

        padding: 0 16px;
    }


    .academic-calendar-toolbar strong {
        font-size: 16px;
    }


    /* ======================================================
       CALENDAR GRID
    ====================================================== */

    .academic-calendar-weekdays span {
        font-size: 12px;
    }


    .academic-calendar-day {
        min-height: 88px;

        padding: 7px 5px;
    }


    .academic-calendar-day-number {
        font-size: 12px;
    }


    .academic-calendar-event {
        padding: 3px 4px;

        font-size: 9px;
    }


    .academic-calendar-more {
        font-size: 9px;
    }


    /* ======================================================
       CALENDAR SIDEBAR
    ====================================================== */

    .calendar-side-card {
        padding:
            18px 15px;
    }


    .calendar-side-card h2 {
        font-size: 16px;
    }


    .calendar-term-date-row span,
    .calendar-term-date-row strong {
        font-size: 11px;
    }


    .calendar-highlight-item strong {
        font-size: 11px;
    }


    .calendar-highlight-item small {
        font-size: 10px;
    }


    .calendar-highlight-icon {
        width: 34px;
        height: 34px;

        flex: 0 0 34px;

        font-size: 14px;
    }
}



/* ==========================================================
   900PX
   TABLET
========================================================== */

@media (max-width: 900px) {

    /* ======================================================
       FAQ CONTAINER
    ====================================================== */

    .faq-page-section {
        padding:
            30px 0
            34px;
    }


    .faq-page-section .site-container {
        width: calc(100% - 40px);
    }


    /* ======================================================
       FAQ LAYOUT
    ====================================================== */

    .faq-page-layout {
        grid-template-columns:
            minmax(0, 1fr)
            270px;

        gap: 20px;
    }


    .faq-group-title {
        font-size: 17px;
    }


    .faq-question {
        min-height: 54px;

        padding: 0 13px;

        font-size: 13px;
    }


    .faq-answer-inner p {
        padding:
            0 13px
            12px;

        font-size: 11px;
    }


    .faq-item.is-open
    .faq-question::after {
        left: 13px;
        right: 13px;
    }


    /* ======================================================
       FAQ SUPPORT
    ====================================================== */

    .faq-support-card {
        min-height: 260px;

        padding:
            18px 14px
            16px;
    }


    .faq-support-icon {
        width: 28px;
        height: 28px;
    }


    .faq-support-icon svg {
        width: 28px;
        height: 28px;
    }


    .faq-support-card h2 {
        font-size: 18px;
    }


    .faq-support-card p {
        max-width: 240px;

        margin:
            11px auto
            14px;

        font-size: 11px;
    }


    .faq-support-button {
        min-height: 40px;

        font-size: 11px;
    }


    /* ======================================================
       ACADEMICS HERO CALENDAR BUTTON
    ====================================================== */

    .academics-hero-content-row {
        gap: 18px;
    }


    .academics-calendar-button {
        min-width: 150px;
        height: 38px;

        font-size: 10px;
    }


    /* ======================================================
       ACADEMIC CALENDAR SECTION
    ====================================================== */

    .academic-calendar-section {
        padding:
            26px 0
            34px;
    }


    .academic-calendar-section .site-container {
        width: calc(100% - 40px);
    }


    /* ======================================================
       CALENDAR LAYOUT
       CALENDAR ABOVE — SIDEBAR BELOW
    ====================================================== */

    .academic-calendar-layout {
        grid-template-columns: 1fr;

        gap: 20px;
    }


    /* ======================================================
       SIDEBAR CARDS SIDE BY SIDE
    ====================================================== */

    .academic-calendar-sidebar {
        display: grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: 16px;
    }


    /* ======================================================
       TOOLBAR
    ====================================================== */

    .academic-calendar-toolbar {
        min-height: 50px;

        padding: 0 15px;
    }


    .academic-calendar-toolbar strong {
        font-size: 15px;
    }


    /* ======================================================
       CALENDAR
    ====================================================== */

    .academic-calendar-weekdays span {
        font-size: 11px;
    }


    .academic-calendar-day {
        min-height: 82px;

        padding: 6px 5px;
    }


    .academic-calendar-day-number {
        font-size: 11px;
    }


    .academic-calendar-event {
        font-size: 8.5px;
    }


    .academic-calendar-more {
        font-size: 8px;
    }


    /* ======================================================
       SIDEBAR CONTENT
    ====================================================== */

    .calendar-side-card {
        padding:
            17px 15px;
    }


    .calendar-side-card h2 {
        font-size: 15px;
    }


    .calendar-term-date-row span,
    .calendar-term-date-row strong {
        font-size: 11px;
    }


    .calendar-highlight-icon {
        width: 34px;
        height: 34px;

        flex: 0 0 34px;

        font-size: 14px;
    }


    .calendar-highlight-item strong {
        font-size: 11px;
    }


    .calendar-highlight-item small {
        font-size: 9px;
    }
}



/* ==========================================================
   650PX
   MOBILE
========================================================== */

@media (max-width: 650px) {

    /* ======================================================
       FAQ SECTION
    ====================================================== */

    .faq-page-section {
        padding:
            20px 0
            28px;
    }


    .faq-page-section .site-container {
        width: calc(100% - 16px);
    }


    /* ======================================================
       FAQ STACK
    ====================================================== */

    .faq-page-layout {
        grid-template-columns: 1fr;

        gap: 20px;
    }


    .faq-groups {
        width: 100%;
    }


    .faq-group + .faq-group {
        margin-top: 18px;
    }


    .faq-group-title {
        margin-bottom: 8px;

        font-size: 16px;
    }


    .faq-group-items {
        gap: 8px;
    }


    .faq-item {
        border-radius: 7px;
    }


    /* ======================================================
       FAQ QUESTION
    ====================================================== */

    .faq-question {
        min-height: 52px;

        gap: 10px;

        padding: 0 12px;

        font-size: 12px;
    }


    .faq-toggle {
        width: 15px;
        height: 15px;

        flex: 0 0 15px;

        font-size: 14px;
    }


    .faq-item.is-open
    .faq-toggle::before {
        font-size: 14px;
    }


    /* ======================================================
       FAQ ANSWER
    ====================================================== */

    .faq-answer-inner p {
        padding:
            0 12px
            12px;

        font-size: 10.5px;
    }


    .faq-item.is-open
    .faq-question::after {
        left: 12px;
        right: 12px;
    }


    /* ======================================================
       FAQ SUPPORT
    ====================================================== */

    .faq-support-card {
        width: 100%;

        min-height: 230px;

        padding:
            20px 18px;
    }


    .faq-support-icon {
        width: 28px;
        height: 28px;

        margin-bottom: 12px;
    }


    .faq-support-icon svg {
        width: 28px;
        height: 28px;
    }


    .faq-support-card h2 {
        font-size: 17px;
    }


    .faq-support-card p {
        max-width: 400px;

        font-size: 10.5px;
    }


    .faq-support-button {
        width:
            min(
                100%,
                360px
            );

        min-height: 40px;

        margin-inline: auto;

        font-size: 10.5px;
    }


    /* ======================================================
       ACADEMICS HERO CALENDAR BUTTON
    ====================================================== */

    .academics-hero-content-row {
        flex-direction: column;

        align-items: flex-start;

        gap: 14px;
    }


    .academics-calendar-button {
        min-width: 150px;
        height: 37px;

        padding: 0 13px;

        font-size: 10px;
    }


    .academics-calendar-button svg {
        width: 15px;
        height: 15px;
    }


    /* ======================================================
       ACADEMIC CALENDAR SECTION
    ====================================================== */

    .academic-calendar-section {
        padding:
            20px 0
            28px;
    }


    .academic-calendar-section .site-container {
        width: calc(100% - 16px);
    }


    .academic-calendar-layout {
        gap: 16px;
    }


    /* ======================================================
       CALENDAR CARD
    ====================================================== */

    .academic-calendar-card {
        width: 100%;

        border-radius: 9px;
    }


    /* ======================================================
       CALENDAR TOOLBAR
    ====================================================== */

    .academic-calendar-toolbar {
        min-height: 48px;

        padding: 0 13px;
    }


    .academic-calendar-toolbar strong {
        font-size: 14px;
    }


    .academic-calendar-navigation {
        gap: 6px;
    }


    .academic-calendar-navigation button {
        width: 26px;
        height: 26px;

        font-size: 16px;
    }


    /* ======================================================
       HORIZONTAL CALENDAR SCROLL
    ====================================================== */

    .academic-calendar-scroll {
        width: 100%;

        overflow-x: auto;
        overflow-y: hidden;

        -webkit-overflow-scrolling: touch;

        scrollbar-width: thin;
    }


    /*
       DON'T CRUSH 7 DAYS INTO MOBILE WIDTH.
       KEEP IT READABLE AND ALLOW SIDE SCROLL.
    */

    .academic-calendar-weekdays,
    .academic-calendar-grid {
        min-width: 680px;
    }


    /* ======================================================
       WEEK DAYS
    ====================================================== */

    .academic-calendar-weekdays {
        min-height: 38px;
    }


    .academic-calendar-weekdays span {
        font-size: 10px;
    }


    /* ======================================================
       DAY CELLS
    ====================================================== */

    .academic-calendar-day {
        min-height: 78px;

        padding:
            6px 5px;
    }


    .academic-calendar-day-number {
        margin-bottom: 5px;

        font-size: 10px;
    }


    /* ======================================================
       EVENTS
    ====================================================== */

    .academic-calendar-event {
        margin-top: 3px;

        padding:
            3px 4px;

        font-size: 8px;
    }


    .academic-calendar-more {
        font-size: 8px;
    }


    /* ======================================================
       CALENDAR SIDEBAR STACK
    ====================================================== */

    .academic-calendar-sidebar {
        display: grid;

        grid-template-columns: 1fr;

        gap: 14px;
    }


    /* ======================================================
       SIDE CARD
    ====================================================== */

    .calendar-side-card {
        padding:
            16px 14px;

        border-radius: 9px;
    }


    .calendar-side-card h2 {
        font-size: 14px;
    }


    .calendar-side-heading-line {
        margin:
            8px 0
            11px;
    }


    /* ======================================================
       ACADEMIC DATES
    ====================================================== */

    .calendar-term-date-list {
        gap: 8px;
    }


    .calendar-term-date-row {
        gap: 10px;
    }


    .calendar-term-date-row span {
        font-size: 10px;
    }


    .calendar-term-date-row strong {
        font-size: 10px;
    }


    /* ======================================================
       HIGHLIGHTS
    ====================================================== */

    .calendar-highlights-list {
        gap: 11px;

        margin-top: 13px;
    }


    .calendar-highlight-icon {
        width: 32px;
        height: 32px;

        flex: 0 0 32px;

        font-size: 13px;
    }


    .calendar-highlight-item strong {
        font-size: 10px;
    }


    .calendar-highlight-item small {
        margin-top: 2px;

        font-size: 9px;
    }


    .calendar-empty-text {
        font-size: 9px;
    }
}



/* ==========================================================
   430PX
   SMALL MOBILE
========================================================== */

@media (max-width: 430px) {

    /* ======================================================
       FAQ PAGE
    ====================================================== */

    .faq-page-section {
        padding:
            16px 0
            24px;
    }


    .faq-page-section .site-container {
        width: calc(100% - 14px);
    }


    .faq-page-layout {
        gap: 16px;
    }


    .faq-group + .faq-group {
        margin-top: 16px;
    }


    .faq-group-title {
        margin-bottom: 7px;

        font-size: 15px;
    }


    .faq-group-items {
        gap: 7px;
    }


    /* ======================================================
       FAQ QUESTION
    ====================================================== */

    .faq-question {
        min-height: 48px;

        padding:
            0 10px;

        font-size: 11px;

        line-height: 1.35;
    }


    .faq-toggle {
        width: 14px;
        height: 14px;

        flex: 0 0 14px;
    }


    .faq-item.is-open
    .faq-toggle::before {
        font-size: 13px;
    }


    /* ======================================================
       FAQ ANSWER
    ====================================================== */

    .faq-answer-inner p {
        padding:
            0 10px
            10px;

        font-size: 9.5px;

        line-height: 1.5;
    }


    .faq-item.is-open
    .faq-question::after {
        left: 10px;
        right: 10px;
    }


    /* ======================================================
       FAQ SUPPORT
    ====================================================== */

    .faq-support-card {
        min-height: 210px;

        padding:
            18px 14px;
    }


    .faq-support-icon {
        width: 26px;
        height: 26px;

        margin-bottom: 11px;
    }


    .faq-support-icon svg {
        width: 26px;
        height: 26px;
    }


    .faq-support-card h2 {
        font-size: 15px;
    }


    .faq-support-card p {
        margin:
            10px auto
            13px;

        font-size: 9.5px;
    }


    .faq-support-button {
        min-height: 37px;

        font-size: 9.5px;
    }


    /* ======================================================
       ACADEMICS CALENDAR BUTTON
    ====================================================== */

    .academics-calendar-button {
        min-width: 145px;
        height: 35px;

        padding:
            0 11px;

        border-radius: 6px;

        font-size: 9px;
    }


    .academics-calendar-button svg {
        width: 14px;
        height: 14px;
    }


    /* ======================================================
       ACADEMIC CALENDAR SECTION
    ====================================================== */

    .academic-calendar-section {
        padding:
            16px 0
            24px;
    }


    .academic-calendar-section .site-container {
        width: calc(100% - 14px);
    }


    .academic-calendar-layout {
        gap: 14px;
    }


    /* ======================================================
       TOOLBAR
    ====================================================== */

    .academic-calendar-toolbar {
        min-height: 45px;

        padding:
            0 11px;
    }


    .academic-calendar-toolbar strong {
        font-size: 12px;
    }


    .academic-calendar-navigation {
        gap: 5px;
    }


    .academic-calendar-navigation button {
        width: 24px;
        height: 24px;

        font-size: 15px;
    }


    /* ======================================================
       CALENDAR SCROLL
    ====================================================== */

    .academic-calendar-scroll {
        overflow-x: auto;

        -webkit-overflow-scrolling: touch;
    }


    .academic-calendar-weekdays,
    .academic-calendar-grid {
        min-width: 630px;
    }


    /* ======================================================
       WEEKDAYS
    ====================================================== */

    .academic-calendar-weekdays {
        min-height: 35px;
    }


    .academic-calendar-weekdays span {
        font-size: 9px;
    }


    /* ======================================================
       DAY CELLS
    ====================================================== */

    .academic-calendar-day {
        min-height: 72px;

        padding:
            5px 4px;
    }


    .academic-calendar-day-number {
        margin-bottom: 4px;

        font-size: 9px;
    }


    /* ======================================================
       EVENTS
    ====================================================== */

    .academic-calendar-event {
        margin-top: 3px;

        padding:
            2px 3px;

        border-radius: 2px;

        font-size: 7.5px;
    }


    .academic-calendar-more {
        font-size: 7px;
    }


    /* ======================================================
       SIDEBAR
    ====================================================== */

    .academic-calendar-sidebar {
        grid-template-columns: 1fr;

        gap: 12px;
    }


    .calendar-side-card {
        padding:
            15px 12px;
    }


    .calendar-side-card h2 {
        font-size: 13px;
    }


    .calendar-side-heading-line {
        width: 28px;

        margin:
            7px 0
            10px;
    }


    /* ======================================================
       ACADEMIC DATE ROW
    ====================================================== */

    .calendar-term-date-row {
        gap: 8px;
    }


    .calendar-term-date-row span,
    .calendar-term-date-row strong {
        font-size: 9px;
    }


    /* ======================================================
       HIGHLIGHTS
    ====================================================== */

    .calendar-highlights-list {
        gap: 10px;

        margin-top: 11px;
    }


    .calendar-highlight-icon {
        width: 30px;
        height: 30px;

        flex: 0 0 30px;

        font-size: 12px;
    }


    .calendar-highlight-item strong {
        font-size: 9px;
    }


    .calendar-highlight-item small {
        font-size: 8px;
    }


    .calendar-empty-text {
        font-size: 8px;
    }
}
/* ==========================================================
   MOBILE CALENDAR — FIT FULL CALENDAR ON SCREEN
========================================================== */

@media (max-width: 650px) {

    .academic-calendar-scroll {
        width: 100%;

        overflow-x: hidden;
        overflow-y: visible;
    }


    .academic-calendar-weekdays,
    .academic-calendar-grid {
        width: 100%;
        min-width: 0;

        grid-template-columns:
            repeat(
                7,
                minmax(0, 1fr)
            );
    }


    .academic-calendar-weekdays {
        min-height: 34px;
    }


    .academic-calendar-weekdays span {
        font-size: 8px;

        padding: 0 1px;
    }


    .academic-calendar-day {
        min-width: 0;
        min-height: 62px;

        padding:
            4px 2px;
    }


    .academic-calendar-day-number {
        margin-bottom: 3px;

        font-size: 8px;
    }


    .academic-calendar-event {
        width: 100%;

        margin-top: 2px;

        padding:
            2px 2px;

        font-size: 6px;

        line-height: 1.15;

        border-radius: 2px;

        overflow: hidden;

        white-space: nowrap;

        text-overflow: ellipsis;
    }


    .academic-calendar-more {
        margin-top: 2px;

        font-size: 6px;
    }
}
/* ==========================================================
   SMALL MOBILE CALENDAR
========================================================== */

@media (max-width: 430px) {

    .academic-calendar-section .site-container {
        width: calc(100% - 12px);
    }


    .academic-calendar-toolbar {
        min-height: 42px;

        padding: 0 9px;
    }


    .academic-calendar-toolbar strong {
        font-size: 11px;
    }


    .academic-calendar-navigation button {
        width: 23px;
        height: 23px;

        font-size: 14px;
    }


    .academic-calendar-weekdays,
    .academic-calendar-grid {
        width: 100%;
        min-width: 0;
    }


    .academic-calendar-weekdays {
        min-height: 30px;
    }


    .academic-calendar-weekdays span {
        font-size: 7px;
    }


    .academic-calendar-day {
        min-height: 56px;

        padding:
            3px 1px;
    }


    .academic-calendar-day-number {
        margin-bottom: 2px;

        font-size: 7px;
    }


    .academic-calendar-event {
        margin-top: 1px;

        padding:
            2px 1px;

        font-size: 5.5px;

        line-height: 1.1;
    }


    .academic-calendar-more {
        font-size: 5.5px;
    }
}

/* ==========================================================
   PUBLIC WEBSITE BRANDING FIX
   Compact navbar logo, no white logo box, balanced text
   Add this at the VERY END of public/css/landing.css
========================================================== */

/* ------------------------------
   DESKTOP / TABLET NAVBAR
------------------------------ */

.site-header {
    height: 64px !important;
}

.navbar {
    height: 64px !important;
    min-height: 64px !important;
}

.navbar-brand {
    flex: 0 0 200px !important;

    display: flex !important;
    align-items: center !important;
    gap: 9px !important;

    min-width: 0;

    padding-left: 0 !important;
}

/* Clean logo holder */
.navbar-logo {
    width: 38px !important;
    height: 38px !important;

    min-width: 38px !important;
    min-height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;

    flex: 0 0 38px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;

    overflow: hidden !important;

    background: transparent !important;

    border: 0 !important;
    border-radius: 50% !important;

    box-shadow: none !important;
}

/* Uploaded logo */
.navbar-logo img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    max-width: 38px !important;
    max-height: 38px !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: contain !important;
    object-position: center !important;

    background: transparent !important;

    border: 0 !important;
    border-radius: 50% !important;

    box-shadow: none !important;
}

/* No-logo fallback */
.navbar-logo:not(:has(img)) {
    background: var(--primary) !important;

    border: 1px solid
        color-mix(
            in srgb,
            var(--primary) 85%,
            white
        ) !important;
}

.navbar-logo:not(:has(img)) span {
    color: var(--secondary);

    font-size: 13px !important;
    font-weight: 800;
    line-height: 1;
}

/* School name / motto */
.navbar-brand-text {
    min-width: 0;
}

.navbar-brand-text strong {
    overflow: hidden;

    max-width: 145px;

    font-size: 15px !important;
    line-height: 1.1 !important;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.navbar-brand-text small {
    overflow: hidden;

    max-width: 145px;
    margin-top: 3px !important;

    font-size: 8px !important;
    line-height: 1.15 !important;

    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Keep navigation vertically aligned after reducing header height */
.navbar-links a.active::after {
    bottom: -14px !important;
}

/* Dropdown/mobile menu must start immediately below new header height */
@media (max-width: 900px) {
    .navbar-links {
        top: 64px !important;
    }
}


/* ------------------------------
   MOBILE
------------------------------ */

@media (max-width: 650px) {

    .site-header {
        height: 58px !important;
    }

    .navbar {
        height: 58px !important;
        min-height: 58px !important;
    }

    .navbar-brand {
        flex: 1 1 auto !important;
        gap: 8px !important;
    }

    .navbar-logo {
        width: 34px !important;
        height: 34px !important;

        min-width: 34px !important;
        min-height: 34px !important;
        max-width: 34px !important;
        max-height: 34px !important;

        flex-basis: 34px !important;
    }

    .navbar-logo img {
        max-width: 34px !important;
        max-height: 34px !important;
    }

    .navbar-brand-text strong {
        max-width: 180px;

        font-size: 13px !important;
    }

    .navbar-brand-text small {
        display: none !important;
    }

    .mobile-menu-btn {
        width: 36px !important;
        height: 36px !important;

        font-size: 22px !important;
    }

    .navbar-links {
        top: 58px !important;
    }
}


/* ------------------------------
   SMALL MOBILE
------------------------------ */

@media (max-width: 430px) {

    .navbar-logo {
        width: 32px !important;
        height: 32px !important;

        min-width: 32px !important;
        min-height: 32px !important;
        max-width: 32px !important;
        max-height: 32px !important;

        flex-basis: 32px !important;
    }

    .navbar-logo img {
        max-width: 32px !important;
        max-height: 32px !important;
    }

    .navbar-brand-text strong {
        max-width: 145px;

        font-size: 12px !important;
    }
}


/* ------------------------------
   FOOTER LOGO
   Keep same visual language
------------------------------ */

.footer-logo {
    width: 34px !important;
    height: 34px !important;

    min-width: 34px !important;
    min-height: 34px !important;

    flex: 0 0 34px !important;

    padding: 0 !important;

    overflow: hidden !important;

    background: transparent !important;

    border: 0 !important;
    border-radius: 50% !important;

    box-shadow: none !important;
}

.footer-logo img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: contain !important;

    background: transparent !important;

    border: 0 !important;
    border-radius: 50% !important;

    box-shadow: none !important;
}

.footer-logo:not(:has(img)) {
    background: var(--primary-light) !important;
}