body.admission-page {
    overflow-x: hidden;
    background:
        radial-gradient(circle at top left, rgba(56, 166, 221, 0.16), transparent 30%),
        radial-gradient(circle at top right, rgba(15, 58, 113, 0.12), transparent 24%),
        linear-gradient(180deg, #ffffff 0%, #f7fbff 44%, #eef4fb 100%);
}

.admission-page main {
    position: relative;
    overflow: clip;
    padding-top: 15px;
}

.admission-page {
    --amber: #38a6dd;
    --amber-dark: #38a6dd;
    --amber-pale: #FFF6E8;
    --blue-pale: #EAF4FC;
}

.admission-page .section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    font-family: var(--montserrat);
    text-transform: uppercase;
    letter-spacing: 0.24em;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--blue);
}

.admission-page .section-kicker::before {
    content: "";
    width: 42px;
    height: 1px;
    background: currentColor;
    opacity: 0.7;
}

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

.admission-hero {
    padding: 0 0 24px;
}

.admission-hero__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    width: 98%;
    max-width: none;
    margin: auto;
    height: 85vh;
}

.admission-hero__title {
    margin: 0 0 12px;
    font-family: var(--playfair);
    font-size: clamp(2.4rem, 5vw, 4.4rem);
    line-height: 1.02;
    letter-spacing: -0.04em;
    color: var(--dark-blue);
}

.admission-hero__title span {
    color: var(--blue);
    font-style: italic;
}

.admission-hero__lead {
    max-width: 760px;
    margin: 0;
    font-family: var(--poppins);
    font-size: 1.08rem;
    line-height: 1.9;
    color: #536b8a;
}

.admission-visual {
    position: relative;
    isolation: isolate;
}

.admission-banner {
    position: relative;
    overflow: visible;
}

.admission-banner__stage {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 28px 70px rgba(8, 38, 82, 0.18);
    height: 85vh;
    width: 100%;
}

.admission-banner__stage::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(160deg, rgba(7, 39, 97, 0.72) 0%, rgba(7, 39, 97, 0.14) 54%, rgba(7, 39, 97, 0.22) 100%),
        linear-gradient(180deg, rgba(4, 17, 42, 0.22), rgba(4, 17, 42, 0.06));
    z-index: 1;
}

.admission-banner__media,
.admission-banner__media img {
    position: absolute;
    inset: 0;
}

.admission-banner__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.02);
}

.admission-banner__content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 78px 28px 120px;
    text-align: center;
}

.admission-banner__copy {
    max-width: 880px;
    color: #fff;
}

.admission-banner__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding: 9px 14px;
    font-family: var(--montserrat);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.admission-banner__eyebrow::before,
.admission-banner__eyebrow::after {
    content: "";
    width: 38px;
    height: 1px;
    background: rgba(255, 255, 255, 0.7);
}

.admission-banner__title {
    margin: 0 0 10px;
    font-family: 'EB Garamond', serif;
    font-size: clamp(2.7rem, 5.2vw, 5rem);
    line-height: 0.98;
    letter-spacing: -0.04em;
    font-style: italic;
}

.admission-banner__lead {
    max-width: 720px;
    margin: 0;
    font-family: var(--montserrat_alternates);
    font-size: 1.02rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.9);
}

.admission-banner__crest {
    position: absolute;
    left: 22px;
    top: 18px;
    z-index: 3;
    width: 80px;
    height: 80px;
    padding: 10px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(10px);
    box-shadow: 0 16px 34px rgba(4, 17, 42, 0.18);
}

.admission-banner__crest img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.admission-hero p,
.sports-intro-copy p,
.sports-bento-card p,
.pointer-section__lead,
.pointer-card__desc,
.facility-card--reference .facility-card__body p:last-child,
.pointer-gallery__copy p,
.department-message-copy p,
.hoe-card__desc,
.activity-bento-card__overlay p {
    font-family: var(--montserrat_alternates);
}

.sports-intro-section,
.department-message-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}
.title-right {
    color: #38a6dd !important;
}
/* ============================================================
   SPORTS INTRO SECTION
   ============================================================ */

.sports-intro-section {
    padding: clamp(42px, 7vw, 90px) 0 clamp(28px, 4vw, 44px);
    background:
        radial-gradient(circle at 10% 14%, rgba(56, 166, 221, 0.14), transparent 18%),
        radial-gradient(circle at 86% 10%, rgba(247, 183, 58, 0.16), transparent 12%),
        radial-gradient(circle at 50% 100%, rgba(23, 53, 111, 0.06), transparent 20%),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.sports-intro-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.94fr);
    gap: clamp(24px, 4vw, 54px);
    align-items: center;
}

.sports-intro-copy {
    position: relative;
    overflow: visible;
    padding: clamp(8px, 1vw, 12px) 0;
    z-index: 1;
}

.sports-intro-copy::before,
.sports-intro-copy::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
}

.sports-intro-copy::before {
    top: 10px;
    left: -18px;
    width: 72px;
    height: 72px;
    background: radial-gradient(circle, rgba(56, 166, 221, 0.16), transparent 66%);
}

.sports-intro-copy::after {
    right: 10px;
    bottom: 8px;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(247, 183, 58, 0.14), transparent 68%);
}

/* Kicker with a self-drawing underline */
.sports-kicker,
.department-kicker {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
    font-family: var(--montserrat);
    text-transform: uppercase;
    letter-spacing: 0.24em;
    font-size: 0.76rem;
    font-weight: 800;
    color: var(--blue);
}

.sports-kicker::before,
.department-kicker::before {
    content: "";
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: #38a6dd;
    opacity: 1;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}

.sports-intro-copy.is-visible .sports-kicker::before,
.department-message-copy.is-visible .department-kicker::before {
    transform: scaleX(1);
}

.sports-intro-copy h2:not(.section-title) {
    position: relative;
    z-index: 1;
    margin: 0 0 18px;
    max-width: 11.5ch;
    font-family: var(--playfair);
    font-size: clamp(2.55rem, 4.6vw, 4.35rem);
    line-height: 0.94;
    letter-spacing: -0.06em;
    color: #17356f;
    text-transform: none;
    font-style: italic;
    text-wrap: balance;
    background: linear-gradient(100deg, #17356f 0%, #17356f 55%, #38a6dd 78%, #17356f 100%);
    background-size: 220% 100%;
    background-position: 0% 0%;
    -webkit-background-clip: text;
    background-clip: text;
}

.sports-intro-copy.is-visible h2:not(.section-title) {
    animation: headlineSheen 3.2s ease-in-out 0.35s 1;
}

.sports-intro-copy h2:not(.section-title) br {
    display: none;
}

.sports-lead {
    position: relative;
    z-index: 1;
    max-width: 680px;
    margin: 0 0 16px;
    padding-left: 0;
    border-left: 0;
    font-family: var(--montserrat_alternates);
    font-size: 1rem;
    line-height: 1.9;
    color: #314967;
    font-weight: 500;
}

.sports-intro-copy p:not(.sports-lead) {
    position: relative;
    z-index: 1;
    max-width: 640px;
    margin: 0 0 10px;
    font-family: var(--montserrat_alternates);
    font-size: 0.95rem;
    line-height: 1.85;
    color: #5c6e85;
}

/* Staggered paragraph rise-in, choreographed off the parent's .is-visible */
.sports-lead,
.sports-intro-copy p:not(.sports-lead) {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.sports-intro-copy.is-visible .sports-lead,
.sports-intro-copy.is-visible p:not(.sports-lead) {
    opacity: 1;
    transform: translateY(0);
}

.sports-intro-copy.is-visible .sports-lead { transition-delay: 0.15s; }
.sports-intro-copy.is-visible p:not(.sports-lead):nth-of-type(1) { transition-delay: 0.28s; }
.sports-intro-copy.is-visible p:not(.sports-lead):nth-of-type(2) { transition-delay: 0.4s; }
.sports-intro-copy.is-visible p:not(.sports-lead):nth-of-type(3) { transition-delay: 0.52s; }

/* Stat chips */
.sports-stats {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(23, 53, 111, 0.10);
}

.stat-chip {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 132px;
    padding: 14px 16px 15px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(239, 247, 255, 0.92));
    border: 1px solid rgba(56, 166, 221, 0.16);
    box-shadow: 0 12px 28px rgba(8, 38, 82, 0.08);
    opacity: 0;
    transform: translateY(14px) scale(0.96);
    transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.stat-chip:hover {
    box-shadow: 0 12px 26px rgba(23, 53, 111, 0.14);
    border-color: rgba(56, 166, 221, 0.4);
}

.sports-intro-copy.is-visible .stat-chip {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.sports-intro-copy.is-visible .stat-chip:nth-child(1) { transition-delay: 0.62s; }
.sports-intro-copy.is-visible .stat-chip:nth-child(2) { transition-delay: 0.72s; }
.sports-intro-copy.is-visible .stat-chip:nth-child(3) { transition-delay: 0.82s; }
.sports-intro-copy.is-visible .stat-chip:nth-child(4) { transition-delay: 0.92s; }

.stat-number {
    font-family: var(--playfair);
    font-style: italic;
    font-size: 1.9rem;
    line-height: 1;
    background: none;
    color: #17356f;
    letter-spacing: -0.02em;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: #17356f;
}

.stat-number span{
    color: #17356f;
}

.stat-number::after {
    content: attr(data-suffix);
    font-size: 1rem;
    margin-left: 1px;
    color: #38a6dd;
}

.stat-label {
    font-family: var(--montserrat);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #607086;
}

/* Visual stage */
.sports-intro-visual {
    position: relative;
    min-height: 520px;
    padding: 0;
    overflow: visible;
    display: grid;
    place-items: center;
    isolation: isolate;
    z-index: 1;
}

.sports-intro-visual::before {
    content: "";
    position: absolute;
    inset: 8% 4% 10% 4%;
    border-radius: 42px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(240, 247, 255, 0.96)),
        radial-gradient(circle at 20% 20%, rgba(56, 166, 221, 0.10), transparent 24%),
        radial-gradient(circle at 82% 18%, rgba(247, 183, 58, 0.16), transparent 18%);
    border: 1px solid rgba(56, 166, 221, 0.14);
    box-shadow: 0 28px 70px rgba(8, 38, 82, 0.10);
    opacity: 1;
    animation: blobMorph 14s ease-in-out infinite;
}



.sports-athletes-art {
    position: relative;
    z-index: 1;
    width: min(100%, 520px);
    margin: 0 auto;
    opacity: 0.98;
    filter: drop-shadow(0 22px 34px rgba(21, 58, 126, 0.16));
    animation: sportsFloat 8s ease-in-out infinite;
}

.sports-athletes-art img,
.sports-athletes-art svg {
    width: 100%;
    height: auto;
    overflow: visible;
    display: block;
    object-fit: contain;
}

.sports-athletes-art .athlete {
    fill: #8fafdc;
    opacity: 0.72;
    transform-origin: center;
}

.sports-athletes-art .athlete circle {
    fill: currentColor;
}

.sports-athletes-art .athlete path {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 18;
}

.sports-athletes-art .a1 { color: rgba(150, 177, 224, 0.9); }
.sports-athletes-art .a2 { color: rgba(146, 171, 221, 0.84); }
.sports-athletes-art .a3 { color: rgba(136, 164, 216, 0.82); }
.sports-athletes-art .a4 { color: rgba(131, 158, 212, 0.8); }
.sports-athletes-art .a5 { color: rgba(122, 150, 207, 0.78); }

.sports-athletes-art .a1 { transform: translate(0, 0) scale(0.92); }
.sports-athletes-art .a2 { transform: translate(0, 0) scale(1); }
.sports-athletes-art .a3 { transform: translate(0, 0) scale(1.02); }
.sports-athletes-art .a4 { transform: translate(0, 0) scale(1.08); }
.sports-athletes-art .a5 { transform: translate(0, 0) scale(1.1); }

/* Orbiting sport-icon badges around the mascot art */
.orbit-icon {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(6px);
    box-shadow: 0 14px 28px rgba(21, 58, 126, 0.16), inset 0 0 0 1px rgba(56, 166, 221, 0.18);
    color: #17356f;
    font-size: 1.15rem;
    opacity: 0;
    transform: translateY(10px) scale(0.7);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.sports-intro-visual.is-visible .orbit-icon {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.orbit-icon.o1 { top: 6%; left: 4%; color: #38a6dd; transition-delay: 0.15s; animation: orbitFloat 6s ease-in-out infinite; }
.orbit-icon.o2 { top: 14%; right: 2%; color: #38a6dd; transition-delay: 0.3s; animation: orbitFloat 7.5s ease-in-out infinite 0.4s; }
.orbit-icon.o3 { bottom: 18%; left: -2%; color: #17356f; transition-delay: 0.45s; animation: orbitFloat 6.8s ease-in-out infinite 0.8s; }
.orbit-icon.o4 { bottom: 6%; right: 8%; color: #38a6dd; transition-delay: 0.6s; animation: orbitFloat 8.2s ease-in-out infinite 1.1s; }

/* ============================================================
   SPORTS TICKER — signature scrolling discipline band
   ============================================================ */

.sports-ticker {
    position: relative;
    z-index: 1;
    margin: clamp(26px, 4vw, 42px) 0 clamp(8px, 2vw, 16px);
    padding: 12px 0;
    overflow: hidden;
    background: linear-gradient(90deg, #0a56a8, #17356f 52%, #0a56a8);
    transform: rotate(-1deg) scale(1.02);
    box-shadow: 0 18px 40px rgba(13, 43, 82, 0.16);
}

.ticker-track {
    display: flex;
    width: max-content;
    gap: 0;
    animation: tickerScroll 26s linear infinite;
}

.sports-ticker:hover .ticker-track {
    animation-play-state: paused;
}

.ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 28px;
    font-family: var(--montserrat);
    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
}

.ticker-item i {
    color: #38a6dd;
    font-size: 0.9rem;
}

.ticker-item::after {
    content: "\2726";
    margin-left: 28px;
    color: rgba(247, 183, 58, 0.7);
    font-size: 0.7rem;
}

.sports-bento-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.2fr 0.9fr 0.9fr;
    gap: 14px;
    margin-top: 24px;
}

.sports-bento-card {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    padding: 18px 18px 18px 16px;
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(242, 248, 255, 0.94));
    border: 1px solid rgba(56, 166, 221, 0.14);
    box-shadow: 0 18px 40px rgba(8, 38, 82, 0.10);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease;
}

.sports-bento-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 48px rgba(8, 38, 82, 0.16);
}

.sports-bento-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(56, 166, 221, 0.12), transparent 26%);
    pointer-events: none;
}

.sports-bento-card--wide {
    grid-column: span 2;
}

.sports-bento-card--accent {
    background: linear-gradient(135deg, #17356f, #0f4ea2);
    border-color: rgba(255, 255, 255, 0.12);
}

.sports-bento-card__icon {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: #17356f;
    color: #fff;
    box-shadow: 0 12px 22px rgba(23, 53, 111, 0.18);
}

.sports-bento-card--accent .sports-bento-card__icon {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.sports-bento-card__copy {
    position: relative;
    z-index: 1;
}

.sports-bento-card__eyebrow {
    display: inline-flex;
    margin-bottom: 8px;
    font-family: var(--montserrat);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #38a6dd;
}

.sports-bento-card h3 {
    margin: 0 0 8px;
    font-family: var(--playfair);
    font-style: italic;
    font-size: clamp(1.18rem, 1.5vw, 1.5rem);
    line-height: 1.02;
    letter-spacing: -0.03em;
    color: #17356f;
}

.sports-bento-card p {
    margin: 0;
    font-family: var(--montserrat_alternates);
    font-size: 0.9rem;
    line-height: 1.65;
    color: #607086;
}

.sports-bento-card--accent h3,
.sports-bento-card--accent p {
    color: #fff;
}

.sports-bento-card--accent .sports-bento-card__eyebrow {
    color: rgba(255, 255, 255, 0.84);
}

/* ============================================================
   POINTER SECTIONS
   ============================================================ */

.pointer-section {
    padding: clamp(36px, 6vw, 78px) 0;
}

.pointer-section::before,
.pointer-section::after {
    content: "";
    position: absolute;
    pointer-events: none;
    border-radius: 999px;
}

.pointer-section::before {
    width: 240px;
    height: 240px;
    top: -90px;
    right: -60px;
    background: radial-gradient(circle, rgba(56, 166, 221, 0.12), transparent 68%);
    filter: blur(6px);
}

.pointer-section::after {
    width: 180px;
    height: 180px;
    left: -70px;
    bottom: -80px;
    background: radial-gradient(circle, rgba(247, 183, 58, 0.14), transparent 66%);
    filter: blur(10px);
}

.pointer-section__header {
    position: relative;
    z-index: 1;
    max-width: 840px;
    margin: 0 auto 30px;
    text-align: center;
}

.pointer-kicker {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
    font-family: var(--montserrat);
    text-transform: uppercase;
    letter-spacing: 0.24em;
    font-size: 0.76rem;
    font-weight: 800;
    color: #17356f;
}

.pointer-kicker::before {
    content: "";
    width: 38px;
    height: 4px;
    border-radius: 999px;
    background: #38a6dd;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.pointer-section__header.is-visible .pointer-kicker::before {
    transform: scaleX(1);
}

.pointer-section__header .section-title {
    margin-bottom: 14px;
}

.pointer-section__lead {
    max-width: 760px;
    margin: 0 auto;
    font-family: var(--montserrat_alternates);
    font-size: 0.98rem;
    line-height: 1.85;
    color: #5c6e85;
}

.pointer-grid {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 18px;
}

.pointer-grid--facilities {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: minmax(118px, auto);
    gap: clamp(12px, 1.5vw, 20px);
    margin-top: clamp(22px, 3vw, 36px);
}

.pointer-grid--disciplines {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: minmax(120px, auto);
    gap: clamp(12px, 1.4vw, 18px);
    margin-top: clamp(22px, 3vw, 36px);
}

.pointer-card,
.discipline-card,
.activity-card,
.pointer-gallery__card {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    box-shadow: 0 18px 50px rgba(8, 38, 82, 0.12);
}

.pointer-card,
.discipline-card,
.activity-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.96));
    border: 1px solid rgba(56, 166, 221, 0.14);
}

.pointer-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    isolation: isolate;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.55s ease;
}

.pointer-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 28px 68px rgba(8, 38, 82, 0.18);
}

.pointer-card__media,
.discipline-card__media,
.activity-card__media {
    position: relative;
    overflow: hidden;
}

.pointer-card__media {
    aspect-ratio: 1.18 / 1;
    position: relative;
}

.discipline-card__media,
.activity-card__media {
    aspect-ratio: 1 / 1;
}

.pointer-card__media img,
.discipline-card__media img,
.activity-card__media img,
.pointer-gallery__card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.8s ease;
}

.pointer-card:hover img,
.discipline-card:hover img,
.activity-card:hover img,
.pointer-gallery__card:hover img {
    transform: scale(1.05);
}

.pointer-card__media::after,
.discipline-card__media::after,
.activity-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(6, 24, 53, 0.04), rgba(6, 24, 53, 0.26)),
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.2), transparent 28%);
}

.pointer-card__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px 20px 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.98));
}

.pointer-card__eyebrow {
    margin: 0;
    font-family: var(--montserrat);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #38a6dd;
}

.pointer-card__title,
.discipline-card__title,
.activity-card h3 {
    margin: 0;
    font-family: var(--playfair);
    font-style: italic;
    letter-spacing: -0.03em;
    color: #17356f;
}

.pointer-card__title {
    font-size: clamp(1.35rem, 1.7vw, 1.65rem);
    line-height: 1.02;
}

.pointer-card__desc {
    margin: 0;
    font-family: var(--montserrat_alternates);
    font-size: 0.94rem;
    line-height: 1.72;
    color: #607086;
}

.pointer-grid--disciplines .discipline-card,
.pointer-grid--activities .activity-card {
    display: flex;
    flex-direction: column;
}

.discipline-card__title,
.activity-card h3 {
    padding: 16px 18px 18px;
    font-size: 1.25rem;
    text-align: center;
}

.pointer-grid--facilities .pointer-card:nth-child(1) {
    grid-column: 1 / 7;
    grid-row: 1 / 3;
    min-height: 420px;
}

.pointer-grid--facilities .pointer-card:nth-child(2) {
    grid-column: 7 / 13;
    grid-row: 1;
}

.pointer-grid--facilities .pointer-card:nth-child(3) {
    grid-column: 7 / 10;
    grid-row: 2;
}

.pointer-grid--facilities .pointer-card:nth-child(4) {
    grid-column: 10 / 13;
    grid-row: 2;
}

.pointer-section--facilities {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 10% 0%, rgba(56, 166, 221, 0.12), transparent 24%),
        radial-gradient(circle at 96% 8%, rgba(247, 183, 58, 0.12), transparent 18%),
        linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}

.pointer-section--facilities::before {
    content: "";
    position: absolute;
    inset: auto -8% -150px -8%;
    height: 260px;
    background:
        radial-gradient(circle at 20% 30%, rgba(56, 166, 221, 0.12), transparent 18%),
        radial-gradient(circle at 80% 45%, rgba(247, 183, 58, 0.16), transparent 15%);
    filter: blur(10px);
    pointer-events: none;
}

.pointer-section--facilities .pointer-section__header {
    max-width: 920px;
}

.pointer-section--facilities .pointer-section__lead {
    max-width: 760px;
}

.facility-highlights {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
}

.facility-highlights span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(23, 53, 111, 0.1);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 10px 26px rgba(8, 38, 82, 0.06);
    font-family: var(--montserrat);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #17356f;
}

.facility-highlights i {
    color: #38a6dd;
}

.facilities-grid--reference {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(12px, 1.5vw, 20px);
    margin-top: clamp(24px, 3.4vw, 40px);
}

.facility-card--reference {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    background: #fff;
    border: 1px solid rgba(23, 53, 111, 0.08);
    box-shadow: 0 14px 34px rgba(8, 38, 82, 0.12);
    isolation: isolate;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease;
}

.facility-card--reference:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 54px rgba(8, 38, 82, 0.18);
}

.facility-card--reference:nth-child(1),
.facility-card--reference:nth-child(2),
.facility-card--reference:nth-child(3),
.facility-card--reference:nth-child(4),
.facility-card--reference:nth-child(5),
.facility-card--reference:nth-child(6),
.facility-card--reference:nth-child(7),
.facility-card--reference:nth-child(8) {
    grid-column: auto;
    grid-row: auto;
}

.facility-card--reference .facility-card__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1.18 / 0.82;
    background: #eef5fb;
}

.facility-card--reference .facility-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.95s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease;
}

.facility-card--reference:hover .facility-card__media img {
    transform: scale(1.08);
    filter: saturate(1.06) contrast(1.05);
}

.facility-card--reference .facility-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(4, 20, 48, 0.02) 0%, rgba(4, 20, 48, 0.12) 36%, rgba(4, 20, 48, 0.45) 100%),
        radial-gradient(circle at top right, rgba(56, 166, 221, 0.1), transparent 28%);
}

.facility-card--reference .facility-card__body {
    position: relative;
    margin-top: -24px;
    z-index: 2;
    padding: 18px 18px 20px;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 14px 28px rgba(8, 38, 82, 0.08);
    height: 100%;
}

.facility-card--reference .facility-card__icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin: -34px 0 10px;
    border-radius: 999px;
    background: #17356f;
    border: 3px solid #fff;
    box-shadow: 0 10px 22px rgba(8, 38, 82, 0.2);
    color: #fff;
    font-size: 0.8rem;
}

.facility-card--reference .facility-card__eyebrow {
    display: inline-flex;
    align-items: center;
    margin: 0 0 8px;
    padding: 0;
    background: transparent;
    border: 0;
    font-family: var(--montserrat);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #38a6dd;
}

.facility-card--reference .facility-card__body h3 {
    margin: 0 0 8px;
    font-family: var(--playfair);
    font-style: italic;
    font-size: clamp(1rem, 1.25vw, 1.2rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #17356f;
}

.facility-card--reference .facility-card__body p:last-child {
    margin: 0;
    font-family: var(--montserrat_alternates);
    font-size: 0.84rem;
    line-height: 1.55;
    color: #607086;
}

.activity-highlights {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
}

.activity-highlights span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(23, 53, 111, 0.1);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 10px 26px rgba(8, 38, 82, 0.06);
    font-family: var(--montserrat);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #17356f;
}

.activity-highlights i {
    color: #38a6dd;
}

.pointer-grid--disciplines .discipline-card {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    isolation: isolate;
    min-height: 210px;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.55s ease;
}

.pointer-grid--disciplines .discipline-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 28px 64px rgba(8, 38, 82, 0.18);
}

.pointer-grid--disciplines .discipline-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(4, 20, 48, 0.02), rgba(4, 20, 48, 0.56)),
        radial-gradient(circle at top left, rgba(56, 166, 221, 0.10), transparent 28%);
    pointer-events: none;
}

.pointer-grid--disciplines .discipline-card__media {
    flex: 1;
    min-height: 176px;
}

.pointer-grid--disciplines .discipline-card__media img {
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease;
    filter: saturate(0.95) contrast(1.03);
}

.pointer-grid--disciplines .discipline-card:hover img {
    transform: scale(1.08);
    filter: saturate(1.08) contrast(1.05);
}

.pointer-grid--disciplines .discipline-card__title {
    position: relative;
    z-index: 2;
    margin-top: -8px;
    padding: 14px 18px 18px;
    color: #fff;
    text-align: left;
    text-shadow: 0 6px 18px rgba(4, 20, 48, 0.28);
}

.pointer-grid--disciplines .discipline-card:nth-child(1) {
    grid-column: 1 / 5;
    grid-row: 1 / 3;
    min-height: 360px;
}

.pointer-grid--disciplines .discipline-card:nth-child(2) {
    grid-column: 5 / 9;
    grid-row: 1;
}

.pointer-grid--disciplines .discipline-card:nth-child(3) {
    grid-column: 9 / 13;
    grid-row: 1 / 3;
    min-height: 360px;
}

.pointer-grid--disciplines .discipline-card:nth-child(4) {
    grid-column: 5 / 9;
    grid-row: 2;
}

.pointer-grid--disciplines .discipline-card:nth-child(5) {
    grid-column: 1 / 7;
    grid-row: 3;
}

.pointer-grid--disciplines .discipline-card:nth-child(6) {
    grid-column: 7 / 13;
    grid-row: 3;
}

.pointer-gallery {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pointer-gallery__card {
    min-height: 300px;
    background: #0f3a71;
}

.pointer-gallery__card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(7, 39, 97, 0.05), rgba(7, 39, 97, 0.56));
    z-index: 1;
    pointer-events: none;
}

.pointer-gallery__copy {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 22px 20px 20px;
    color: #fff;
    background: linear-gradient(180deg, transparent, rgba(7, 39, 97, 0.92));
}

.pointer-gallery__copy h3 {
    margin: 0 0 8px;
    font-family: var(--playfair);
    font-style: italic;
    font-size: 1.45rem;
    line-height: 1.02;
    letter-spacing: -0.03em;
}

.pointer-gallery__copy p {
    margin: 0;
    font-family: var(--montserrat_alternates);
    font-size: 0.92rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.84);
}

.pointer-section--facilities {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 10% 0%, rgba(56, 166, 221, 0.12), transparent 24%),
        radial-gradient(circle at 96% 8%, rgba(247, 183, 58, 0.12), transparent 18%),
        linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}

.pointer-section--disciplines {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 14% 10%, rgba(56, 166, 221, 0.09), transparent 18%),
        radial-gradient(circle at 88% 8%, rgba(247, 183, 58, 0.12), transparent 16%),
        linear-gradient(180deg, #f7fbff 0%, #ffffff 100%);
}

.pointer-section--activities {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 10% 18%, rgba(56, 166, 221, 0.14), transparent 18%),
        radial-gradient(circle at 86% 12%, rgba(247, 183, 58, 0.14), transparent 16%),
        radial-gradient(circle at 50% 108%, rgba(15, 58, 113, 0.1), transparent 26%),
        linear-gradient(180deg, #fbfdff 0%, #f1f7fd 100%);
}

.pointer-section--activities::before {
    content: "";
    position: absolute;
    inset: auto -8% -140px -8%;
    height: 260px;
    background:
        radial-gradient(circle at 20% 30%, rgba(56, 166, 221, 0.12), transparent 18%),
        radial-gradient(circle at 80% 45%, rgba(247, 183, 58, 0.16), transparent 15%);
    filter: blur(10px);
    pointer-events: none;
}

.pointer-section--activities .pointer-section__header {
    max-width: 920px;
}

.pointer-section--activities .pointer-section__lead {
    max-width: 760px;
}

/* ============================================================
   SECTION 5 - DISCIPLINES MINI TILES
   ============================================================ */

.sports-disciplines-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(16px, 1.8vw, 24px);
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
    margin-top: clamp(24px, 3vw, 36px);
}

.sport-tile {
    position: relative;
    grid-column: span 3;
    padding: 18px 18px 20px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.96));
    border: 1px solid rgba(15, 58, 113, 0.08);
    box-shadow:
        0 16px 36px rgba(8, 38, 82, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    text-align: center;
    overflow: visible;
    transform-origin: center top;
}

.sport-tile::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -12px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 32% 30%, rgba(255, 255, 255, 0.8), transparent 26%),
        linear-gradient(180deg, #ff7b7b 0%, #d93b3b 100%);
    box-shadow:
        0 8px 16px rgba(191, 44, 44, 0.28),
        0 0 0 4px rgba(255, 255, 255, 0.95);
    transform: translateX(-50%);
    z-index: 4;
}

.sport-tile::after {
    content: "";
    position: absolute;
    inset: 10px 10px auto 10px;
    height: 44px;
    border-radius: 14px 14px 20px 20px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0));
    pointer-events: none;
    z-index: 2;
}

.sport-tile__media {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    aspect-ratio: 1.1 / 0.92;
    background: #eef5fb;
    box-shadow:
        0 10px 24px rgba(8, 38, 82, 0.12),
        inset 0 0 0 1px rgba(255, 255, 255, 0.8);
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.55s ease;
    z-index: 1;
}

.sport-tile:hover .sport-tile__media {
    transform: translateY(-4px);
    box-shadow:
        0 18px 38px rgba(8, 38, 82, 0.18),
        inset 0 0 0 1px rgba(255, 255, 255, 0.9);
}

.sport-tile__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.95s cubic-bezier(0.16, 1, 0.3, 1);
}

.sport-tile:hover .sport-tile__media img {
    transform: scale(1.08);
}

.sport-tile__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(4, 20, 48, 0.04), rgba(4, 20, 48, 0.2)),
        radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.16), transparent 28%);
    z-index: 1;
}

.sport-tile__badge {
    position: absolute;
    right: 14px;
    top: 14px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.96);
    color: #d93b3b;
    border: 1px solid rgba(217, 59, 59, 0.22);
    box-shadow: 0 10px 18px rgba(8, 38, 82, 0.14);
    font-size: 0.72rem;
}

.sport-tile h3 {
    position: relative;
    z-index: 2;
    margin: 14px 0 0;
    font-family: var(--montserrat);
    font-style: normal;
    font-weight: 600;
    font-size: clamp(0.98rem, 1.05vw, 1.08rem);
    letter-spacing: -0.01em;
    color: #183b72;
}

.pointer-section--disciplines .sport-tile.reveal-card {
    opacity: 0;
    transform: translateY(22px) rotate(var(--sport-tilt, -2deg));
    transition:
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.pointer-section--disciplines .sport-tile.reveal-card.is-visible {
    opacity: 1;
    transform: translateY(0) rotate(var(--sport-tilt, -2deg));
}

.pointer-section--disciplines .sport-tile:hover {
    transform: translateY(-8px) rotate(0deg);
    box-shadow:
        0 26px 56px rgba(8, 38, 82, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.pointer-section--disciplines .sport-tile:nth-child(1) { --sport-tilt: -2deg; }
.pointer-section--disciplines .sport-tile:nth-child(2) { --sport-tilt: 1.5deg; }
.pointer-section--disciplines .sport-tile:nth-child(3) { --sport-tilt: -1deg; }
.pointer-section--disciplines .sport-tile:nth-child(4) { --sport-tilt: 2deg; }
.pointer-section--disciplines .sport-tile:nth-child(5) { --sport-tilt: -1.5deg; }
.pointer-section--disciplines .sport-tile:nth-child(6) { --sport-tilt: 1deg; }

.pointer-section--disciplines .sport-tile:nth-child(5) {
    grid-column: 3 / span 3;
}

.pointer-section--disciplines .sport-tile:nth-child(6) {
    grid-column: 7 / span 3;
}

/* ============================================================
   SECTION 8 — AFTER SCHOOL ACTIVITIES STORY STACK
   ============================================================ */

/* ============================================================
   RESPONSIVE (base sections)
   ============================================================ */

@media (max-width: 1024px) {
    .sports-intro-grid {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .sports-intro-section {
        padding-bottom: 32px;
    }

    .sports-intro-copy h2:not(.section-title),
    .department-message-copy h2 {
        max-width: none;
    }

    .sports-intro-visual {
        min-height: 380px;
        place-items: center;
    }

    .orbit-icon {
        width: 46px;
        height: 46px;
        font-size: 1rem;
    }

    .department-message-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 36px 22px 50px;
    }

    .pointer-grid--facilities {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        grid-auto-rows: minmax(140px, auto);
    }

    .pointer-grid--facilities .pointer-card:nth-child(1),
    .pointer-grid--facilities .pointer-card:nth-child(2),
    .pointer-grid--facilities .pointer-card:nth-child(3),
    .pointer-grid--facilities .pointer-card:nth-child(4) {
        grid-column: 1 / 7;
        grid-row: auto;
        min-height: 280px;
    }

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

    .pointer-grid--disciplines {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        grid-auto-rows: minmax(150px, auto);
    }

    .pointer-grid--disciplines .discipline-card {
        grid-column: span 3;
        grid-row: auto;
        min-height: 240px;
    }

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

    .pointer-card__title {
        font-size: 1.35rem;
    }

    .pointer-gallery__card {
        min-height: 260px;
    }

    .department-portrait-card {
        max-width: 340px;
    }

    .department-message-copy {
        padding-right: 0;
    }

    .department-watermark {
        right: -8px;
        bottom: -18px;
        width: 220px;
        height: 260px;
    }
}

@media (max-width: 820px) {
    .admission-hero {
        padding-bottom: 18px;
    }

    .admission-hero__grid {
        width: 100%;
        height: auto;
    }

    .admission-banner__stage {
        height: auto;
        min-height: 360px;
        aspect-ratio: 16 / 11;
        border-radius: 18px;
    }

    .admission-banner__content {
        padding: 44px 20px 58px;
    }

    .admission-banner__title {
        font-size: clamp(2.1rem, 6vw, 3.6rem);
    }

    .admission-banner__lead {
        font-size: 0.96rem;
        line-height: 1.72;
    }

    .sports-intro-section {
        padding: 34px 0 24px;
    }

    .sports-intro-grid {
        gap: 22px;
        padding: 0px 15px;
    }

    .sports-intro-copy {
        padding: 0;
    }

    .sports-intro-copy h2:not(.section-title) {
        max-width: none;
        font-size: clamp(2rem, 5.5vw, 3rem);
    }

    .sports-intro-visual {
        min-height: 320px;
    }

    .sports-intro-visual::before {
        inset: 7% 2% 8% 2%;
    }

    .sports-athletes-art {
        width: min(100%, 420px);
    }

    .orbit-icon {
        width: 42px;
        height: 42px;
        font-size: 0.92rem;
    }

    .department-message-section {
        margin-top: 0;
        padding: 40px 0 0;
    }

    .department-message-grid {
        grid-template-columns: 1fr !important;
        gap: 22px !important;
        padding: 32px 18px 46px !important;
    }

    .department-message-copy {
        order: 1;
    }

    .department-portrait-card {
        order: 2;
        justify-self: left;
        width: 100% !important;
        max-width: 70% !important;
    }
    .department-message-section{
        padding: 20px 0 0;
    }
    .department-message-copy {
        padding-right: 0 !important;
    }

    .department-message-copy h2 {
        max-width: none;
    }

    .department-watermark {
        right: 10px;
        bottom: 0;
        width: 220px;
        height: 260px;
    }

    .pointer-section {
        padding: 32px 0 38px;
    }

    .pointer-section__header {
        margin-bottom: 24px;
    }

    .pointer-section__lead {
        max-width: 100%;
    }

    .pointer-grid--facilities {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: minmax(130px, auto);
    }

    .pointer-grid--facilities .pointer-card:nth-child(1),
    .pointer-grid--facilities .pointer-card:nth-child(2),
    .pointer-grid--facilities .pointer-card:nth-child(3),
    .pointer-grid--facilities .pointer-card:nth-child(4) {
        grid-column: auto;
        grid-row: auto;
        min-height: 240px;
    }

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

    .pointer-grid--disciplines {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: minmax(140px, auto);
    }

    .pointer-grid--disciplines .discipline-card {
        grid-column: auto;
        min-height: 220px;
    }

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

    .sports-disciplines-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 100%;
        gap: 14px;
    }

    .sport-tile {
        padding: 16px 16px 18px;
    }

    .activity-bento {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-auto-rows: auto !important;
        gap: 14px !important;
    }

    .activity-bento-card--hero,
    .activity-bento-card--badminton,
    .activity-bento-card--tennis,
    .activity-bento-card--wide,
    .activity-bento-card--final {
        grid-column: auto;
        grid-row: auto;
        margin-top: 0;
        min-height: 220px;
    }

    .activity-bento-card--hero {
        grid-column: 1 / -1;
        min-height: 320px;
    }

    .activity-bento-card--wide,
    .activity-bento-card--final {
        grid-column: 1 / -1;
    }

    .activity-bento-card__panel {
        left: 14px;
        right: 14px;
        bottom: 14px;
        max-width: none;
        width: calc(100% - 28px);
        padding: 14px 16px 16px;
    }

    .hoe-section {
        padding: 34px 0 44px;
    }

    .hoe-carousel {
        gap: 10px;
    }

    .hoe-track {
        gap: 16px;
    }

    .hoe-card {
        flex-basis: 58vw;
        height: 320px;
    }

    .hoe-card.is-active {
        flex-basis: 66vw;
        height: 380px;
    }

    .hoe-nav {
        width: 42px;
        height: 42px;
    }

    #hoe-achievements .hoe-carousel--achievement .hoe-card {
        flex-basis: 78vw !important;
        height: 286px !important;
    }

    #hoe-achievements .hoe-carousel--achievement .hoe-card.is-active {
        flex-basis: 84vw;
        height: 316px;
    }

    #hoe-achievements .hoe-carousel--achievement .hoe-card__overlay {
        width: auto;
        left: auto;
        right: 0;
        top: auto;
        bottom: 0;
        min-width: 0;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }
}

@media (max-width: 767px) {
    .sports-intro-section {
        padding: 22px 0 24px;
    }

    .sports-intro-copy {
        padding: 0;
    }

    .sports-intro-copy h2:not(.section-title) {
        font-size: clamp(1.95rem, 9vw, 2.85rem);
        margin-bottom: 12px;
    }

    .sports-lead,
    .sports-intro-copy p:not(.sports-lead),
    .department-message-copy p {
        font-size: 0.95rem;
        line-height: 1.72;
    }

    .sports-stats {
        gap: 10px;
    }

    .stat-chip {
        min-width: 100%;
        padding: 12px 14px;
    }

    .sports-intro-visual {
        min-height: 290px;
        padding: 0;
    }

    .sports-athletes-art {
        width: min(100%, 440px);
    }

    .orbit-icon {
        width: 38px;
        height: 38px;
        font-size: 0.85rem;
    }

    .sports-ticker {
        transform: rotate(-1deg) scale(1.05);
        padding: 10px 0;
    }

    .ticker-item {
        font-size: 0.72rem;
        padding: 0 18px;
    }

    .sports-bento-grid {
        grid-template-columns: 1fr;
    }

    .sports-bento-card {
        grid-template-columns: 1fr;
        padding: 16px;
    }

    .department-message-section {
        margin-top: -4px;
        padding: 34px 0 0;
    }

    .pointer-section {
        padding: 28px 0 34px;
    }

    .pointer-section__header {
        margin-bottom: 22px;
        text-align: left;
    }

    .pointer-section__lead {
        margin: 0;
        font-size: 0.94rem;
    }

    .pointer-grid--facilities,
    .pointer-grid--disciplines,
    .pointer-grid--activities,
    .pointer-gallery {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }

    .pointer-grid--facilities .pointer-card,
    .pointer-grid--disciplines .discipline-card {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        min-height: 0;
    }

    .pointer-card__media {
        aspect-ratio: 16 / 9;
    }

    .pointer-grid--facilities .pointer-card__media {
        aspect-ratio: 16 / 10;
    }

    .facilities-grid--reference,
    .sports-disciplines-grid {
        grid-template-columns: 1fr;
    }

    .sports-disciplines-grid {
        max-width: 420px;
    }

    .sports-disciplines-grid .sport-tile {
        grid-column: auto !important;
    }

    .facility-highlights {
        justify-content: flex-start;
    }

    .facility-card--reference .facility-card__media {
        aspect-ratio: 16 / 10;
    }

    .facility-card--reference .facility-card__body {
        margin-top: -22px;
        padding: 16px 16px 18px;
    }

    .facility-card--reference .facility-card__icon {
        width: 32px;
        height: 32px;
        margin: -32px 0 10px;
    }

    .sport-tile {
        text-align: left;
        grid-column: auto !important;
        padding: 16px 16px 18px;
    }

    .sport-tile__media {
        aspect-ratio: 16 / 9;
    }

    .sport-tile::before {
        left: 24px;
        top: -10px;
        transform: none;
    }

    .sport-tile h3 {
        font-size: 1.08rem;
    }

    .pointer-gallery__card {
        min-height: 240px;
    }

    .department-message-grid {
        padding: 30px 16px 42px;
    }

    .department-portrait-card {
        max-width: 100% !important;
    }

    .quote-mark {
        font-size: 4.6rem;
        top: -18px;
    }

    .department-message-copy h2 {
        font-size: clamp(1.85rem, 8vw, 2.55rem);
        margin-bottom: 12px;
    }

    .department-signature {
        align-items: flex-start;
        gap: 12px;
        flex-direction: column;
    }

    .department-watermark {
        display: none;
    }
}

/* ============================================================
   DEPARTMENT MESSAGE SECTION
   ============================================================ */

.department-message-section {
    margin-top: -8px;
    padding: 58px 0 0;
    background: linear-gradient(
    135deg,
    rgba(8, 38, 82, 0.94) 0%,
    rgba(15, 58, 113, 0.92) 58%,
    rgba(56, 166, 221, 0.9) 100%
  );
}


.department-message-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    gap: clamp(22px, 4vw, 46px);
    align-items: center;
    padding: clamp(34px, 5vw, 70px) clamp(18px, 4vw, 52px) clamp(42px, 5vw, 60px);
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
}

.department-message-grid::before,
.department-message-grid::after {
    content: "";
    position: absolute;
    pointer-events: none;
}


.department-message-grid::after {
    right: 8px;
    top: 12px;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.16), transparent 58%),
        radial-gradient(circle, rgba(247, 183, 58, 0.12), transparent 72%);
    filter: blur(8px);
    animation: watermarkDrift 10s ease-in-out infinite;
}

.department-portrait-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 334px;
    padding: 16px;
    border-radius: 34px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(238, 246, 255, 0.92));
    border: 1px solid rgba(247, 183, 58, 0.58);
    box-shadow:
        0 24px 52px rgba(1, 27, 69, 0.24),
        inset 0 0 0 1px rgba(255, 255, 255, 0.6);
    overflow: hidden;
    opacity: 0;
    transform: translateX(-26px) rotate(-2deg);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.department-portrait-card.is-visible {
    opacity: 1;
    transform: translateX(0) rotate(0deg);
}

.department-portrait-card::before {
    content: "";
    position: absolute;
    inset: 14px;
    border-radius: 24px;
    border: 1px solid rgba(6, 74, 159, 0.16);
    pointer-events: none;
}

.department-portrait-card::after {
    content: "";
    position: absolute;
    left: -10px;
    top: -10px;
    width: 112px;
    height: 66px;
    border: 2px solid rgba(247, 183, 58, 0.65);
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-radius: 60px 0 0 0;
    transform: rotate(-6deg);
    pointer-events: none;
}

.department-portrait-card img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 18px;
    object-fit: cover;
    transition: transform 0.7s ease;
}

.department-portrait-card:hover img {
    transform: scale(1.03);
}

/* Diagonal shine sweep on hover */
.department-portrait-card .portrait-shine {
    position: absolute;
    z-index: 2;
    inset: 16px;
    border-radius: 18px;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.5) 42%, transparent 64%);
    transform: translateX(-120%);
    transition: transform 0.9s ease;
}

.department-portrait-card:hover .portrait-shine {
    transform: translateX(120%);
}

.department-message-copy {
    position: relative;
    z-index: 1;
    padding: 6px 64px 6px 0;
    color: #fff;
    opacity: 0;
    transform: translateX(26px);
    transition: opacity 0.8s ease 0.1s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}

.department-message-copy.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.quote-mark {
    position: absolute;
    top: -30px;
    left: -6px;
    z-index: 0;
    font-family: var(--playfair);
    font-style: italic;
    font-size: 6.5rem;
    line-height: 1;
    color: rgba(247, 183, 58, 0.28);
    pointer-events: none;
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 0.7s ease 0.3s, transform 0.7s ease 0.3s;
}

.department-message-copy.is-visible .quote-mark {
    opacity: 1;
    transform: scale(1);
}

.department-message-copy h2 {
    position: relative;
    margin: 0 0 14px;
    max-width: 18ch;
    font-family: var(--playfair);
    font-size: clamp(2rem, 3.8vw, 3.5rem);
    line-height: 1;
    letter-spacing: -0.045em;
    color: #fff;
    text-transform: none;
    font-style: italic;
}

.department-message-copy p {
    position: relative;
    margin: 0 0 12px;
    font-family: var(--montserrat_alternates);
    font-size: 0.95rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.88);
}

.department-signature {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.department-signature-line {
    width: 72px;
    height: 2px;
    background: linear-gradient(90deg, #38a6dd, transparent);
    flex-shrink: 0;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.6s;
}

.department-message-copy.is-visible .department-signature-line {
    transform: scaleX(1);
}

.department-signature strong,
.department-signature span {
    display: block;
}

.department-signature strong {
    margin-bottom: 2px;
    font-family: var(--montserrat);
    font-size: 0.94rem;
    font-weight: 800;
    color: #FFF;
}

.department-name {
    color: #38a6dd;
    font-family: var(--montserrat);
}

.department-signature span {
    font-family: var(--montserrat_alternates);
    font-size: 0.86rem;
    color: rgba(255, 255, 255, 0.76);
}

.department-watermark {
    position: absolute;
    right: 24px;
    bottom: 10px;
    width: 280px;
    height: 320px;
    opacity: 0.14;
    border: 2px solid rgba(255, 255, 255, 0.18);
    border-radius: 38px 38px 42% 42%;
    clip-path: polygon(50% 0%, 84% 10%, 84% 44%, 76% 100%, 24% 100%, 16% 44%, 16% 10%);
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.58)) 50% 26% / 62% 2px no-repeat,
        linear-gradient(90deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.58)) 50% 52% / 62% 2px no-repeat,
        linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.58)) 34% 38% / 2px 42% no-repeat,
        linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.58)) 66% 38% / 2px 42% no-repeat;
    animation: watermarkDrift 10s ease-in-out infinite;
}

.reveal-card {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================
   KEYFRAMES
   ============================================================ */

@keyframes sportsFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(-0.4deg); }
}

@keyframes orbitFloat {
    0%, 100% { transform: translateY(0) translateX(0); }
    50% { transform: translateY(-14px) translateX(4px); }
}

@keyframes blobMorph {
    0%, 100% { border-radius: 55% 45% 45% 55% / 48% 50% 50% 52%; }
    33% { border-radius: 48% 52% 58% 42% / 55% 45% 55% 45%; }
    66% { border-radius: 60% 40% 42% 58% / 44% 56% 44% 56%; }
}

@keyframes headlineSheen {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 0%; }
}

@keyframes tickerScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes watermarkDrift {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-8px) rotate(1deg); }
}

@keyframes countPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.08); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .sports-athletes-art,
    .sports-intro-visual::before,
    .orbit-icon,
    .ticker-track,
    .department-watermark,
    .department-message-grid::after,
    .sports-intro-copy h2:not(.section-title).is-visible {
        animation: none !important;
    }

    .reveal-card,
    .sports-lead,
    .sports-intro-copy p,
    .stat-chip,
    .pointer-card,
    .discipline-card,
    .activity-card,
    .pointer-gallery__card,
    .department-portrait-card,
    .department-message-copy,
    .quote-mark,
    .department-signature-line,
    .sports-kicker::before,
    .department-kicker::before,
    .pointer-kicker::before {
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ============================================================
   SECTIONS 6 & 7 — "HALL OF EXCELLENCE" CENTER-FOCUS CAROUSEL
   Signature element: a 3D coverflow-style carousel where the
   active card lifts into full colour while neighbours recede
   into a soft greyscale depth — used for both Achievements (6)
   and Interhouse Spirit (7) so the two sections read as one
   continuous "hall" experience, just re-themed.
   ============================================================ */

.hoe-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(40px, 6vw, 84px) 0;
    background:
        radial-gradient(circle at 8% 8%, rgba(56, 166, 221, 0.10), transparent 22%),
        radial-gradient(circle at 94% 12%, rgba(247, 183, 58, 0.12), transparent 20%),
        linear-gradient(180deg, #ffffff 0%, #f6faff 100%);
}

.hoe-section--dark {
    color: #fff;
    background:
        radial-gradient(circle at 10% 0%, rgba(255, 255, 255, 0.10), transparent 26%),
        radial-gradient(circle at 92% 6%, rgba(247, 183, 58, 0.16), transparent 20%),
        linear-gradient(135deg, #071e42 0%, #0f3a71 55%, #0a56a8 100%);
}

.hoe-section--dark .pointer-kicker {
    color: #9ed9ff;
}

.hoe-section--dark .pointer-section__lead {
    color: rgba(255, 255, 255, 0.78);
}

.hoe-section--dark .pointer-kicker::before {
    background: #38a6dd;
}

.hoe-title {
    font-family: var(--playfair);
    font-weight: 700;
    font-style: normal;
    font-size: clamp(2.3rem, 4.6vw, 3.6rem);
    letter-spacing: -0.03em;
    color: #17356f;
    margin: 0 0 14px;
}

.hoe-section--dark .hoe-title {
    color: #fff;
}

.hoe-title .title-right {
    font-style: italic;
    font-weight: 600;
    color: #38a6dd !important;
}

/* ---- carousel shell ---- */

.hoe-carousel {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;

}

.hoe-carousel__viewport {
    min-width: 0;
    overflow: hidden;
    padding: 12px 0;
}

.hoe-track {
    display: flex;
    align-items: stretch;
    gap: clamp(18px, 2.4vw, 28px);
    width: max-content;
    min-width: 100%;
    padding: 30px 0;
    will-change: transform;
    transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.hoe-card {
    position: relative;
    flex: 0 0 clamp(230px, 24vw, 300px);
    height: clamp(330px, 40vw, 420px);
    border-radius: 26px;
    overflow: hidden;
    cursor: pointer;
    background: #16305c;
    box-shadow: 0 20px 46px rgba(4, 20, 48, 0.28);
    transform:
        scale(calc(1 - var(--abs-offset, 0) * 0.09))
        translateY(calc(var(--abs-offset, 0) * 10px));
    filter: grayscale(calc(min(var(--abs-offset, 0), 1) * 0.85)) brightness(calc(1 - min(var(--abs-offset, 0), 1) * 0.35));
    opacity: calc(1 - min(var(--abs-offset, 0), 3) * 0.22);
    transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
                filter 0.65s ease,
                opacity 0.65s ease,
                box-shadow 0.5s ease;
}

.hoe-card:hover {
    box-shadow: 0 26px 56px rgba(4, 20, 48, 0.36);
}

.hoe-card.is-active {
    flex-basis: clamp(280px, 30vw, 372px);
    height: clamp(400px, 48vw, 490px);
    z-index: 3;
    filter: grayscale(0) brightness(1);
    opacity: 1;
    cursor: default;
    box-shadow: 0 34px 74px rgba(4, 20, 48, 0.4);
}

.hoe-card__media {
    position: absolute;
    inset: 0;
}

.hoe-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.hoe-card.is-active .hoe-card__media img {
    transform: scale(1.04);
}

.hoe-card__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(18px, 2.6vw, 32px);
    background: linear-gradient(0deg, rgba(3, 14, 34, 0.96) 0%, rgba(3, 14, 34, 0.5) 48%, rgba(3, 14, 34, 0.05) 100%);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s ease 0.1s, transform 0.5s ease 0.1s;
}

.hoe-card.is-active .hoe-card__overlay {
    opacity: 1;
    transform: translateY(0);
}

.hoe-card__tag {
    display: inline-flex;
    align-self: flex-start;
    margin-bottom: 12px;
    padding: 6px 14px;
    border-radius: 999px;
    font-family: var(--montserrat);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #082652;
    background: linear-gradient(120deg, #38a6dd, #78d2ff);
}

.hoe-card__title {
    margin: 0 0 8px;
    font-family: var(--playfair);
    font-style: italic;
    font-size: clamp(1.3rem, 2vw, 1.75rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #fff;
}

.hoe-card__desc {
    margin: 0 0 16px;
    max-width: 32ch;
    font-family: var(--montserrat_alternates);
    font-size: 0.86rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.82);
}

.hoe-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px dashed rgba(255, 255, 255, 0.28);
    font-family: var(--montserrat);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: #fff;
}

.hoe-card__cta-icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 0.7rem;
    transition: background 0.3s ease, transform 0.3s ease;
}

.hoe-card:hover .hoe-card__cta-icon {
    background: #38a6dd;
    transform: translateX(3px);
}

/* ---- nav arrows ---- */

.hoe-nav {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid rgba(56, 166, 221, 0.3);
    background: rgba(255, 255, 255, 0.9);
    color: #17356f;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 14px 30px rgba(8, 38, 82, 0.14);
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.hoe-nav:hover {
    background: #38a6dd;
    color: #fff;
    transform: scale(1.08);
    box-shadow: 0 18px 36px rgba(56, 166, 221, 0.34);
}

.hoe-section--dark .hoe-nav {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.24);
    color: #fff;
    backdrop-filter: blur(6px);
}

.hoe-section--dark .hoe-nav:hover {
    background: #38a6dd;
    color: #082652;
}

/* ---- dots ---- */

.hoe-dots {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: clamp(22px, 3vw, 34px);
}

.hoe-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: rgba(23, 53, 111, 0.22);
    cursor: pointer;
    transition: background 0.35s ease, width 0.35s ease, border-radius 0.35s ease;
}

.hoe-section--dark .hoe-dot {
    background: rgba(255, 255, 255, 0.28);
}

.hoe-dot.is-active {
    width: 28px;
    border-radius: 999px;
    background: #38a6dd;
}

.hoe-section--dark .hoe-dot.is-active {
    background: #38a6dd;
}

#hoe-interhouse.hoe-section--dark {
    background:
        radial-gradient(circle at 12% 16%, rgba(247, 183, 58, 0.12), transparent 18%),
        radial-gradient(circle at 86% 12%, rgba(56, 166, 221, 0.10), transparent 20%),
        linear-gradient(180deg, #fff9f0 0%, #fff4e2 45%, #fff9f0 100%);
}

#hoe-interhouse.hoe-section--dark::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.82) 0%, transparent 26%),
        linear-gradient(rgba(23, 53, 111, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(23, 53, 111, 0.03) 1px, transparent 1px);
    background-size: auto, 72px 72px, 72px 72px;
    pointer-events: none;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent 96%);
}

#hoe-interhouse .pointer-kicker,
#hoe-interhouse .hoe-title,
#hoe-interhouse .pointer-section__lead {
    color: #17356f;
}

#hoe-interhouse .pointer-kicker::before {
    background: #f4b23a;
}

#hoe-interhouse .title-right {
    color: #38a6dd !important;
}

#hoe-interhouse .hoe-nav {
    background: rgba(255, 255, 255, 0.92);
    color: #17356f;
    border-color: rgba(23, 53, 111, 0.12);
    box-shadow: none;
}

#hoe-interhouse .hoe-nav:hover {
    background: #38a6dd;
    color: #fff;
}

#hoe-interhouse .hoe-dot {
    background: rgba(23, 53, 111, 0.14);
}

#hoe-interhouse .hoe-dot.is-active {
    background: #38a6dd;
}

#hoe-interhouse .hoe-carousel {
    width: min(100%, 1240px);
    margin-inline: auto;
    padding-inline: clamp(12px, 2vw, 24px);
}

#hoe-interhouse .hoe-carousel__viewport {
    overflow: hidden;
    padding: 10px 0;
}

#hoe-interhouse .hoe-track {
    gap: clamp(14px, 1.6vw, 20px);
    padding: 22px 0;
}

#hoe-interhouse .hoe-card {
    flex: 0 0 clamp(260px, 28vw, 352px);
    height: clamp(320px, 34vw, 420px);
    box-shadow: none;
}

#hoe-interhouse .hoe-card.is-active {
    flex: 0 0 clamp(260px, 28vw, 352px);
    height: clamp(320px, 34vw, 420px);
    z-index: 3;
    filter: grayscale(0) brightness(1);
    opacity: 1;
    cursor: default;
    box-shadow: none;
    transform: translateY(-8px);
}

#hoe-interhouse .hoe-card:hover {
    box-shadow: none;
}

/* ---- achievements redesign (section 6 only) ---- */

#hoe-achievements.hoe-section {
    background:
        radial-gradient(circle at 12% 18%, rgba(56, 166, 221, 0.22), transparent 18%),
        radial-gradient(circle at 90% 16%, rgba(58, 129, 255, 0.22), transparent 16%),
        radial-gradient(circle at 50% 102%, rgba(255, 255, 255, 0.07), transparent 36%),
        linear-gradient(180deg, #07182e 0%, #0a2a52 52%, #06101d 100%);
    color: #fff;
}

#hoe-achievements.hoe-section h2 .title-left{
color: #fff ;
}

#hoe-achievements.hoe-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 0% 50%, rgba(56, 166, 221, 0.08), transparent 16%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, transparent 24%),
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: auto, auto, 72px 72px, 72px 72px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.92), transparent 96%);
    pointer-events: none;
}

#hoe-achievements .achievement-header {
    max-width: 860px;
    margin: 0 auto 10px;
    text-align: center;
}

#hoe-achievements .achievement-kicker {
    color: #9ed9ff;
    justify-content: center;
}

#hoe-achievements .achievement-title {
    margin-bottom: 16px;
    color: #fff;
    font-size: clamp(2.2rem, 4.2vw, 3.9rem);
        font-family: var(--playfair);
}

#hoe-achievements .achievement-title .title-right {
    color: #79d8ff !important;
}

#hoe-achievements .achievement-header .pointer-section__lead {
    color: rgba(255, 255, 255, 0.78);
    max-width: 62ch;
    margin-inline: auto;
}

#hoe-achievements .hoe-carousel--achievement {
    width: min(100%, 1240px);
    margin-inline: auto;
    padding-inline: clamp(12px, 2vw, 20px);
    margin-top: clamp(18px, 3vw, 30px);
    background: transparent;
}


#hoe-achievements .hoe-carousel--achievement .hoe-track {
    gap: clamp(14px, 1.8vw, 26px);
    padding: 18px 0 22px;
}

#hoe-achievements .hoe-carousel--achievement .hoe-card {
    flex: 0 0 clamp(600px, 67vw, 980px);
    height: clamp(280px, 26vw, 430px);
    border-radius: 34px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(6, 18, 35, 0.98), rgba(14, 37, 69, 0.98));
    border: 1px solid rgba(92, 169, 255, 0.20);
    box-shadow: none;
    transform:
        translateY(calc(var(--abs-offset, 0) * 6px))
        scale(calc(1 - min(var(--abs-offset, 0), 4) * 0.02));
    filter: saturate(calc(1 - min(var(--abs-offset, 0), 3) * 0.045));
    opacity: calc(1 - min(var(--abs-offset, 0), 3) * 0.08);
}

#hoe-achievements .hoe-carousel--achievement .hoe-card:hover {
    box-shadow: none;
}

#hoe-achievements .hoe-carousel--achievement .hoe-card.is-active {
    flex-basis: clamp(690px, 76vw, 1040px);
    height: clamp(300px, 30vw, 460px);
    z-index: 3;
    opacity: 1;
    filter: none;
    box-shadow: none;
}

#hoe-achievements .hoe-carousel--achievement .hoe-card__media {
    position: absolute;
    inset: 0 auto 0 0;
    width: 58%;
}

#hoe-achievements .hoe-carousel--achievement .hoe-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(7, 15, 28, 0.06) 0%, rgba(7, 15, 28, 0.12) 100%);
    pointer-events: none;
}

#hoe-achievements .hoe-carousel--achievement .hoe-card__media img {
    transform: scale(1.04);
    filter: contrast(1.06) saturate(1.1);
    will-change: transform, filter, opacity;
    object-position: center center;
}

#hoe-achievements .hoe-carousel--achievement .hoe-card.is-active .hoe-card__media img {
    animation: hoeMediaSlide 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#hoe-achievements .hoe-carousel--achievement .hoe-card__overlay {
    position: absolute;
    inset: 0 0 0 auto;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 46%;
    min-width: 245px;
    border-radius: 28px !important;
    padding: clamp(20px, 2.2vw, 32px);
    background:
        linear-gradient(180deg, rgba(10, 24, 44, 0.52) 0%, rgba(8, 20, 38, 0.94) 100%);
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    opacity: 1;
    transform: translateX(0);
    transition: transform 0.5s ease, background 0.5s ease, box-shadow 0.5s ease;
}

#hoe-achievements .hoe-card.is-active .hoe-card__overlay {
    background:
        linear-gradient(180deg, rgba(17, 37, 64, 0.72) 0%, rgba(7, 15, 28, 0.96) 100%);
    animation: hoePanelSlide 0.72s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#hoe-achievements .hoe-card__tag {
    margin-bottom: 12px;
    padding: 9px 16px;
    border-radius: 999px;
    background: linear-gradient(120deg, rgba(39, 92, 182, 0.95), rgba(61, 131, 255, 0.95));
    color: #fff;
    font-family: var(--montserrat);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    width: fit-content;
}

#hoe-achievements .hoe-card__title {
    margin: 0 0 10px;
    font-family: var(--playfair);
    font-style: normal;
    font-size: clamp(2rem, 2.7vw, 3rem);
    line-height: 0.95;
    color: #fff;
}

#hoe-achievements .hoe-card__title .title-right {
    color: #7bcfff !important;
}

#hoe-achievements .hoe-card__desc {
    max-width: 30ch;
    color: rgba(255, 255, 255, 0.82);
    margin: 0 0 18px;
    line-height: 1.7;
    font-size: 0.95rem;
}

#hoe-achievements .hoe-card__cta {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
}

#hoe-achievements .hoe-card.is-active .hoe-card__tag {
    animation: hoeFadeUp 0.45s ease 0.04s both;
}

#hoe-achievements .hoe-card.is-active .hoe-card__title {
    animation: hoeFadeUp 0.55s ease 0.12s both;
}

#hoe-achievements .hoe-card.is-active .hoe-card__desc {
    animation: hoeFadeUp 0.55s ease 0.18s both;
}

#hoe-achievements .hoe-card.is-active .hoe-card__cta {
    animation: hoeFadeUp 0.55s ease 0.24s both;
}

#hoe-achievements .hoe-card__cta-icon {
    width: 34px;
    height: 34px;
    background: #4f8fff;
    color: #fff;
}

@keyframes hoeFadeUp {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes hoePanelSlide {
    from {
        opacity: 0;
        transform: translateX(18px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes hoeMediaSlide {
    from {
        opacity: 0;
        transform: translateX(-20px) scale(1.06);
        filter: blur(1px) saturate(0.98);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1.08);
        filter: blur(0) saturate(1.08);
    }
}

#hoe-achievements .hoe-card:hover .hoe-card__cta-icon {
    background: #79d8ff;
    color: #fff;
}

#hoe-achievements .hoe-dots {
    margin-top: 8px;
}

/* ============================================================
   SECTION 8 — AFTER SCHOOL ACTIVITIES BENTO GRID
   ============================================================ */

.activity-bento {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: minmax(112px, auto);
    gap: clamp(14px, 1.6vw, 20px);
    margin-top: clamp(26px, 3vw, 40px);
}

.activity-bento::before {
    content: "";
    position: absolute;
    inset: -18px;
    pointer-events: none;
    background:
        radial-gradient(circle at 12% 18%, rgba(56, 166, 221, 0.10), transparent 28%),
        radial-gradient(circle at 88% 12%, rgba(120, 177, 232, 0.08), transparent 24%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 32%);
    filter: blur(8px);
    z-index: -1;
}

.activity-bento-card {
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    background:
        linear-gradient(180deg, rgba(8, 24, 55, 0.15) 0%, rgba(7, 20, 45, 0.78) 100%),
        #0b2448;
    border: 1px solid rgba(130, 182, 236, 0.24);
    box-shadow:
        0 24px 60px rgba(8, 38, 82, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    isolation: isolate;
    min-height: 230px;
    transform: translateY(0);
    transition:
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.55s ease,
        filter 0.55s ease,
        border-color 0.35s ease;
}

.activity-bento-card:hover {
    transform: translateY(-10px) scale(1.01);
    box-shadow:
        0 34px 80px rgba(8, 38, 82, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
    border-color: rgba(120, 177, 232, 0.55);
}

.activity-bento-card::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 140px;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 0%, rgba(3, 14, 34, 0.22) 40%, rgba(3, 14, 34, 0.56) 100%);
}

.activity-bento-card--hero {
    grid-column: 1 / 7;
    grid-row: 1 / 3;
    min-height: 480px;
    --accent: rgba(56, 166, 221, 0.95);
}

.activity-bento-card--badminton {
    grid-column: 7 / 10;
    grid-row: 1;
    min-height: 228px;
    --accent: rgba(120, 177, 232, 0.92);
}

.activity-bento-card--tennis {
    grid-column: 10 / 13;
    grid-row: 1;
    min-height: 256px;
    margin-top: 18px;
    --accent: rgba(111, 207, 178, 0.92);
}

.activity-bento-card--wide {
    grid-column: 7 / 13;
    grid-row: 2;
    min-height: 240px;
    --accent: rgba(255, 202, 92, 0.92);
}

.activity-bento-card--final {
    grid-column: 1 / 13;
    grid-row: 3;
    min-height: 250px;
    --accent: rgba(245, 113, 126, 0.92);
}

.activity-bento-card__media {
    position: absolute;
    inset: 0;
}

.activity-bento-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(0.92) contrast(1.05) brightness(0.92);
    transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease;
}

.activity-bento-card--hero .activity-bento-card__media img {
    object-position: center center;
}

.activity-bento-card--badminton .activity-bento-card__media img {
    object-position: center 22%;
}

.activity-bento-card--tennis .activity-bento-card__media img {
    object-position: center 28%;
}

.activity-bento-card--wide .activity-bento-card__media img {
    object-position: center 52%;
}

.activity-bento-card--final .activity-bento-card__media img {
    object-position: center 45%;
}

.activity-bento-card:hover .activity-bento-card__media img {
    transform: scale(1.08);
    filter: saturate(1.05) contrast(1.05) brightness(1);
}

.activity-bento-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(0deg, rgba(4, 20, 48, 0.82) 0%, rgba(4, 20, 48, 0.34) 48%, rgba(4, 20, 48, 0.06) 100%),
        radial-gradient(circle at top right, rgba(56, 166, 221, 0.12), transparent 32%);
}

.activity-bento-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.18), transparent 24%);
    opacity: 0.22;
    mix-blend-mode: screen;
}

.activity-bento-card__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0;
    pointer-events: none;
}

.activity-bento-card__panel {
    position: absolute;
    left: clamp(16px, 1.6vw, 22px);
    right: clamp(16px, 1.6vw, 22px);
    bottom: clamp(16px, 1.6vw, 22px);
    width: fit-content;
    max-width: min(100%, 420px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0;
    padding: clamp(16px, 1.7vw, 22px) clamp(18px, 2vw, 26px);
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(10, 16, 30, 0.52) 0%, rgba(10, 16, 30, 0.82) 100%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 20px 40px rgba(5, 17, 37, 0.22);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    pointer-events: auto;
}

.activity-bento-card__icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-bottom: 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #38a6dd;
    font-size: 0.95rem;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
    transform: translateY(8px);
    opacity: 0.98;
    transition: transform 0.4s ease, background 0.4s ease, color 0.4s ease;
}

.activity-bento-card__eyebrow {
    align-self: flex-start;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.09);
    color: rgba(255, 255, 255, 0.88);
    font-family: var(--montserrat);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
}

.activity-bento-card__overlay h3 {
    margin: 0;
    font-family: var(--playfair);
    font-style: italic;
    font-size: clamp(1.35rem, 1.7vw, 1.95rem);
    letter-spacing: -0.04em;
    color: #fff;
    text-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
    line-height: 1;
}

.activity-bento-card--hero .activity-bento-card__overlay h3 {
    font-size: clamp(2.15rem, 1.7vw, 3.4rem);
    line-height: 0.9;
}

.activity-bento-card--wide .activity-bento-card__overlay h3 {
    font-size: clamp(1.48rem, 2vw, 2.05rem);
}



.activity-bento-card--final .activity-bento-card__overlay p {
    max-width: 42ch;
    font-family: var(--montserrat_alternates);
}

.activity-bento-card--final .activity-bento-card__footer {
    align-self: flex-start;
    min-width: 190px;
}

.activity-bento-card__panel::after {
    content: "";
    width: 64px;
    height: 3px;
    margin-top: 14px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent, rgba(56, 166, 221, 0.95)) 0%, rgba(255, 255, 255, 0.1) 100%);
    box-shadow: 0 0 24px rgba(56, 166, 221, 0.22);
}

/* ============================================================
   RESPONSIVE — sections 6, 7, 8
   ============================================================ */

@media (max-width: 1024px) {
    #hoe-achievements .hoe-carousel--achievement .hoe-card {
        flex-basis: clamp(420px, 74vw, 780px);
        height: clamp(250px, 29vw, 320px);
    }

    #hoe-achievements .hoe-carousel--achievement .hoe-card.is-active {
        flex-basis: clamp(470px, 82vw, 860px);
        height: clamp(260px, 31vw, 340px);
    }

    .activity-bento {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        grid-auto-rows: 152px;
        gap: 14px;
    }

    .activity-bento-card--hero {
        grid-column: 1 / 7;
        grid-row: auto;
        min-height: 350px;
    }

    .activity-bento-card--badminton { grid-column: 1 / 4; grid-row: auto; min-height: 220px; margin-top: 0; }
    .activity-bento-card--tennis { grid-column: 4 / 7; grid-row: auto; min-height: 220px; margin-top: 0; }
    .activity-bento-card--wide { grid-column: 1 / 7; grid-row: auto; }
    .activity-bento-card--final { grid-column: 1 / 7; grid-row: auto; }
}

@media (max-width: 767px) {
    .hoe-section {
        padding: 30px 0 40px;
    }

    #hoe-achievements.hoe-section {
        padding: 28px 0 42px;
    }

    #hoe-achievements .achievement-header {
        margin: 0;
        max-width: none;
    }

    .hoe-carousel {
        gap: 10px;
        padding-inline: 12px;
    }

    #hoe-interhouse .hoe-carousel {
        width: 100%;
        padding-inline: 12px;
    }

    #hoe-achievements .hoe-carousel--achievement {
        padding-inline: 12px;
    }

    .hoe-carousel {
        position: relative !important;
        padding-bottom: 66px !important;
    }

    #hoe-interhouse .hoe-carousel,
    #hoe-achievements .hoe-carousel--achievement {
        padding-bottom: 30px !important;
    }

    .hoe-track {
        gap: 14px;
    }

    #hoe-achievements .hoe-carousel--achievement .hoe-track {
        gap: 14px;
        padding: 14px 0 20px;
    }

    .hoe-card {
        flex: 0 0 calc(100vw - 52px) !important;
        width: calc(100vw - 52px) !important;
        max-width: 350px !important;
        height: 320px !important;
        margin-inline: auto !important;
    }

    #hoe-interhouse .hoe-card {
        flex: 0 0 calc(100vw - 52px) !important;
        width: calc(100vw - 52px) !important;
        max-width: 350px !important;
        height: 320px !important;
        margin-inline: auto !important;
    }

    #hoe-achievements .hoe-carousel--achievement .hoe-card {
        flex: 0 0 calc(100vw - 52px) !important;
        width: calc(100vw - 52px) !important;
        max-width: 350px !important;
        height: 360px !important;
        margin-inline: auto !important;
    }

    .hoe-card.is-active {
        flex: 0 0 calc(100vw - 52px) !important;
        width: calc(100vw - 52px) !important;
        max-width: 350px !important;
        height: 380px !important;
        margin-inline: auto !important;
    }

    #hoe-interhouse .hoe-card.is-active {
        flex: 0 0 calc(100vw - 52px) !important;
        width: calc(100vw - 52px) !important;
        max-width: 350px !important;
        height: 360px !important;
        transform: translateY(-6px) !important;
        margin-inline: auto !important;
    }

    #hoe-achievements .hoe-carousel--achievement .hoe-card.is-active {
        flex: 0 0 calc(100vw - 52px) !important;
        width: calc(100vw - 52px) !important;
        max-width: 350px !important;
        height: 360px !important; 
        margin-inline: auto !important;
    }

    .hoe-nav {
        width: 40px !important;
        height: 40px !important;
        font-size: 0.85rem !important;
        position: absolute !important;
        top: auto !important;
        bottom: 10px !important;
        z-index: 10 !important;
        transform: none !important;
    }

    .hoe-nav--prev {
        left: calc(50% - 48px) !important;
    }

    .hoe-nav--next {
        left: calc(50% + 8px) !important;
        right: auto !important;
    }

    .hoe-carousel__viewport {
        padding: 8px 0 18px !important;
        overflow: hidden !important;
    }

    .hoe-card__desc {
        display: none;
    }

    #hoe-achievements .hoe-card__desc {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    #hoe-achievements .hoe-carousel--achievement .hoe-card__media {
        inset: 0;
        width: 100%;
    }

    #hoe-achievements .hoe-carousel--achievement .hoe-card__overlay {
        inset: auto 12px 12px 12px;
        width: auto;
        min-width: 0;
        border-left: none;
        border-radius: 22px !important;
        padding: 16px 16px 18px;
        background:
            linear-gradient(180deg, rgba(10, 24, 44, 0.46) 0%, rgba(8, 20, 38, 0.92) 100%);
    }

    #hoe-achievements .hoe-card__overlay {
        width: auto;
        left: auto;
        right: 0;
        top: auto;
        bottom: 0;
        min-width: 0;
        height: auto;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        padding: 16px 16px 18px;
    }

    #hoe-achievements .hoe-card__title {
        max-width: none;
        font-size: 1.55rem;
        line-height: 1;
    }

    #hoe-achievements .hoe-card__tag {
        padding: 7px 12px;
        font-size: 0.6rem;
    }

    .activity-bento {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }

    .pointer-section__header {
        margin-bottom: 18px;
    }

    .pointer-section__header .section-title {
        margin-bottom: 10px;
        line-height: 0.95;
    }

    .pointer-section__lead {
        font-size: 0.95rem;
        line-height: 1.75;
    }

    .activity-bento-card,
    .activity-bento-card--hero,
    .activity-bento-card--wide,
    .activity-bento-card--final {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        min-height: 214px;
    }

    .activity-bento-card--hero {
        min-height: 320px;
    }

    .activity-bento-card__panel {
        position: absolute;
        left: 12px;
        right: 12px;
        bottom: 12px;
        width: calc(100% - 24px);
        max-width: none;
        padding: 14px 15px 16px;
        border-radius: 20px;
    }

    .activity-bento-card--final .activity-bento-card__overlay {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    .activity-bento-card__footer {
        width: 100%;
    }

    .activity-bento-card__overlay p {
        font-size: 0.84rem;
    }

    .activity-bento-card__panel::after {
        margin-top: 10px;
        width: 54px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hoe-track,
    .hoe-card,
    .hoe-card__overlay,
    .hoe-card__media img,
    .activity-bento-card,
    .activity-bento-card__media img,
    .activity-bento-card__icon {
        transition: none !important;
    }

    #hoe-achievements .hoe-card.is-active .hoe-card__media img,
    #hoe-achievements .hoe-card.is-active .hoe-card__overlay,
    #hoe-achievements .hoe-card.is-active .hoe-card__tag,
    #hoe-achievements .hoe-card.is-active .hoe-card__title,
    #hoe-achievements .hoe-card.is-active .hoe-card__desc,
    #hoe-achievements .hoe-card.is-active .hoe-card__cta {
        animation: none !important;
    }
}