/* =====================================================================
   Home page (index.php) layout, transitions and animations.
   Everything is scoped under .hm (the <main> wrapper) or the popup ids,
   so header.php, footer.php and the inner pages are not affected.
   Colours are the ones already used across the site.
   ===================================================================== */

:root {
    --hm-green: #2d7948;
    --hm-olive: #bab83c;
    --hm-blue: #0084b4;
    --hm-cyan: #00bcd4;
    --hm-sky: #81e5fe;
    --hm-purple: #9c27b0;
    --hm-red: #db1b20;
    --hm-yellow: #ffbd0a;
    --hm-lime: #a6c437;
    --hm-orange: #f05a21;

    --hm-ink: #1d2733;
    --hm-body: #4b5563;
    --hm-tint: #f6f7f2;
    --hm-radius: 18px;
    --hm-shadow: 0 12px 32px rgba(29, 39, 51, .09);
    --hm-shadow-lg: 0 24px 50px rgba(29, 39, 51, .16);
    --hm-ease: cubic-bezier(.22, .68, .2, 1);
    --hm-space: clamp(48px, 6vw, 80px);
}

.hm {
    display: block;
    overflow: hidden;
}

.hm-section {
    position: relative;
    padding: var(--hm-space) 0;
}

.hm-section > .container {
    position: relative;
    z-index: 1;
}

/* ---------- Section headings ---------- */

.hm .hm-head {
    max-width: 1000px;
    margin: 0 auto clamp(34px, 4.5vw, 52px);
    text-align: center;
}

.hm .hm-title {
    margin: 0;
    font-family: 'Rubik', sans-serif;
    font-size: clamp(26px, 3.2vw, 40px);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -.2px;
    color: var(--hm-ink);
    text-wrap: balance;
}

.hm .hm-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
    font-size: clamp(14px, 1.3vw, 17px);
    letter-spacing: 4px;
    color: var(--hm-green);
}

.hm .hm-eyebrow::before,
.hm .hm-eyebrow::after {
    content: '';
    width: 34px;
    height: 2px;
    border-radius: 2px;
    background: var(--hm-olive);
}

.hm .hm-title__main {
    display: block;
    font-size: clamp(22px, 2.7vw, 36px);
    font-weight: 600;
}

/* animated gradient text */
.hm .hm-shine {
    --c1: var(--hm-blue);
    --c2: var(--hm-cyan);
    background: linear-gradient(90deg, var(--c1) 0%, var(--c2) 25%, var(--c1) 50%, var(--c2) 75%, var(--c1) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: hm-shine 7s linear infinite;
}

.hm .hm-shine--purple {
    --c1: var(--hm-purple);
    --c2: #d05ce3;
}

.hm .hm-divider {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
}

.hm .hm-divider i {
    display: block;
    width: 12px;
    height: 4px;
    border-radius: 4px;
    background: var(--hm-green);
}

.hm .hm-divider i:nth-child(2) {
    position: relative;
    width: 60px;
    overflow: hidden;
    background: var(--hm-olive);
}

.hm .hm-divider i:nth-child(2)::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9), transparent);
    animation: hm-sweep 2.6s ease-in-out infinite;
}

.hm .hm-head--light .hm-title {
    color: #fff;
}

.hm .hm-head--light .hm-divider i {
    background: #fff;
}

.hm .hm-head--light .hm-divider i:nth-child(2) {
    background: var(--hm-olive);
}

/* ---------- Buttons ---------- */

.hm .hm-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 30px;
    overflow: hidden;
    border-radius: 40px;
    font-family: 'Rubik', sans-serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--hm-ink);
    background: var(--hm-yellow);
    box-shadow: 0 10px 24px rgba(255, 189, 10, .38);
    transition: transform .35s var(--hm-ease), box-shadow .35s var(--hm-ease), background-color .35s ease, color .35s ease;
}

.hm .hm-cta::after {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .6), transparent);
    transform: skewX(-20deg);
    animation: hm-cta-shine 4s ease-in-out infinite;
}

.hm .hm-cta:hover,
.hm .hm-cta:focus-visible {
    transform: translateY(-3px);
    color: #fff;
    background-color: var(--hm-green);
    box-shadow: 0 14px 28px rgba(45, 121, 72, .35);
}

.hm .hm-cta [class*="licon-"],
.hm .hm-pill [class*="licon-"] {
    font-size: 14px;
    transition: transform .35s var(--hm-ease);
}

.hm .hm-cta:hover [class*="licon-"],
.hm .hm-pill:hover [class*="licon-"] {
    transform: translateX(5px);
}

/* outline pill that fills on hover; colour comes from --acc-ink */
.hm .hm-pill {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 22px;
    overflow: hidden;
    border: 2px solid var(--acc-ink, var(--hm-green));
    border-radius: 30px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--acc-ink, var(--hm-green));
    transition: color .35s ease, border-color .35s ease;
}

.hm .hm-pill::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--acc-ink, var(--hm-green));
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform .45s var(--hm-ease);
}

.hm .hm-pill:hover,
.hm .hm-pill:focus-visible {
    color: #fff;
}

.hm .hm-pill:hover::before,
.hm .hm-pill:focus-visible::before {
    transform: scaleX(1);
    transform-origin: left center;
}

.hm .hm-pill--light {
    --acc-ink: #fff;
}

.hm .hm-pill--light:hover,
.hm .hm-pill--light:focus-visible {
    color: var(--hm-blue);
}

/* ---------- Scroll reveal (enabled by js/home.js) ---------- */

.hm-anim [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 36px, 0);
    transition: opacity .8s var(--hm-ease), transform .9s var(--hm-ease);
    transition-delay: var(--d, 0s);
}

.hm-anim [data-reveal="left"] {
    transform: translate3d(-50px, 0, 0);
}

.hm-anim [data-reveal="right"] {
    transform: translate3d(50px, 0, 0);
}

.hm-anim [data-reveal="zoom"] {
    transform: scale(.88);
}

.hm-anim [data-reveal].is-in {
    opacity: 1;
    transform: none;
}

.hm-anim [data-reveal] .hm-divider i,
.hm-anim [data-reveal] .hm-bar {
    transform: scaleX(0);
    transition: transform .7s var(--hm-ease) .35s;
}

.hm-anim [data-reveal].is-in .hm-divider i,
.hm-anim [data-reveal].is-in .hm-bar {
    transform: scaleX(1);
}

/* =====================================================================
   Admission popup
   ===================================================================== */

.modals {
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 32, .62);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    animation: hm-fade-in .45s ease both;
}

.modals.is-closing {
    animation: hm-fade-out .35s ease both;
}

.modals .modal-boxs {
    position: relative;
    width: min(540px, 88vw);
    padding: 12px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .35);
    animation: hm-pop .65s cubic-bezier(.2, .9, .25, 1.2) .1s both;
}

.modals.is-closing .modal-boxs {
    animation: hm-pop-out .35s ease both;
}

.modals .popup-imgs {
    display: block;
    width: 100%;
    height: auto;
    max-height: calc(100vh - 90px);
    object-fit: contain;
    border-radius: 10px;
}

.modals .closes {
    position: absolute;
    top: -16px;
    right: -16px;
    width: 44px;
    height: 44px;
    border: 3px solid #fff;
    border-radius: 50%;
    font-size: 28px;
    font-weight: 700;
    line-height: 37px;
    text-align: center;
    color: #fff;
    background: var(--hm-red);
    box-shadow: 0 6px 18px rgba(219, 27, 32, .45);
    cursor: pointer;
    transition: transform .4s var(--hm-ease), background-color .3s ease;
}

.modals .closes:hover,
.modals .closes:focus-visible {
    background: var(--hm-green);
    transform: rotate(90deg) scale(1.06);
    outline: none;
}

/* =====================================================================
   Hero slider
   ===================================================================== */

.hm-hero {
    position: relative;
    overflow: hidden;
    background: var(--hm-tint);
}

.hm-hero__track {
    display: grid;
    aspect-ratio: 1600 / 608;
}

.hm-hero__slide {
    grid-area: 1 / 1;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.1s ease, visibility 0s linear 1.1s;
}

.hm-hero__slide.is-active {
    z-index: 1;
    opacity: 1;
    visibility: visible;
    transition: opacity 1.1s ease, visibility 0s;
}

.hm-hero__slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hm-hero__slide.is-active img {
    animation: hm-settle 7s ease-out both;
}

.hm .hm-hero__nav {
    position: absolute;
    z-index: 3;
    top: 50%;
    width: 48px;
    height: 48px;
    margin-top: -24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 18px;
    color: var(--hm-green);
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .15);
    cursor: pointer;
    opacity: 0;
    transition: opacity .35s ease, transform .35s var(--hm-ease), background-color .3s ease, color .3s ease;
}

.hm .hm-hero__nav--prev {
    left: 22px;
    transform: translateX(-14px);
}

.hm .hm-hero__nav--next {
    right: 22px;
    transform: translateX(14px);
}

.hm .hm-hero:hover .hm-hero__nav,
.hm .hm-hero__nav:focus-visible {
    opacity: 1;
    transform: none;
}

.hm .hm-hero__nav:hover {
    color: #fff;
    background: var(--hm-olive);
}

.hm-hero__dots {
    position: absolute;
    z-index: 3;
    bottom: calc(clamp(14px, 3.2vw, 46px) + 8px);
    left: 50%;
    display: flex;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 20px;
    background: rgba(0, 0, 0, .22);
    transform: translateX(-50%);
}

.hm .hm-hero__dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, .75);
    cursor: pointer;
    transition: width .45s var(--hm-ease), background-color .3s ease;
}

.hm .hm-hero__dot.is-active {
    width: 28px;
    background: var(--hm-olive);
}

.hm-hero__progress {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(255, 255, 255, .35);
}

.hm-hero__progress span {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--hm-green), var(--hm-olive));
    transform: scaleX(0);
    transform-origin: left center;
}

.hm-hero__progress span.is-running {
    animation: hm-progress 5s linear forwards;
}

.hm-hero.is-paused .hm-hero__progress span {
    animation-play-state: paused;
}

/* =====================================================================
   Welcome / about
   ===================================================================== */

.hm-about {
    overflow: hidden;
    background: #fff;
}

.hm-about::before,
.hm-about::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.hm-about::before {
    top: -140px;
    left: -140px;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle, rgba(186, 184, 60, .16), transparent 70%);
    animation: hm-drift 14s ease-in-out infinite alternate;
}

.hm-about::after {
    right: -160px;
    bottom: 80px;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(0, 132, 180, .10), transparent 70%);
    animation: hm-drift 18s ease-in-out infinite alternate-reverse;
}

.hm-about__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
}

.hm .hm-about__copy p {
    margin: 0 0 14px;
    font-size: 16px;
    line-height: 1.8;
    letter-spacing: 0;
    text-align: justify;
    color: var(--hm-body);
}

.hm .hm-about__copy p:first-child::first-letter {
    float: left;
    margin: 6px 10px 0 0;
    font-family: 'Rubik', sans-serif;
    font-size: 54px;
    font-weight: 600;
    line-height: .8;
    color: var(--hm-green);
}

.hm .hm-about__copy .hm-cta {
    margin-top: 12px;
}

.hm-about__media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.hm-about__glow {
    position: absolute;
    width: 86%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, rgba(129, 229, 254, .55), rgba(186, 184, 60, .16) 60%, transparent 71%);
    animation: hm-breathe 6s ease-in-out infinite;
}

.hm-about__ring {
    position: absolute;
    width: 96%;
    aspect-ratio: 1;
    border: 2px dashed rgba(186, 184, 60, .65);
    border-radius: 50%;
    animation: hm-spin 40s linear infinite;
}

.hm-about__ring::before,
.hm-about__ring::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
}

.hm-about__ring::before {
    top: -8px;
    left: 50%;
    margin-left: -7px;
    background: var(--hm-orange);
    box-shadow: 0 0 0 6px rgba(240, 90, 33, .18);
}

.hm-about__ring::after {
    bottom: 14%;
    left: 6%;
    background: var(--hm-green);
    box-shadow: 0 0 0 6px rgba(45, 121, 72, .18);
}

/* the photo has a white background; multiply lets the glow show through it */
.hm-about__media img {
    position: relative;
    z-index: 1;
    width: min(100%, 360px);
    height: auto;
    mix-blend-mode: multiply;
    animation: hm-float 6s ease-in-out infinite;
}

/* Vision banner */
.hm .hm-vision {
    position: relative;
    margin-top: clamp(40px, 5vw, 60px);
    padding: 34px 28px 32px;
    overflow: hidden;
    border-radius: var(--hm-radius);
    text-align: center;
    color: #fff;
    background: linear-gradient(120deg, var(--hm-purple), var(--hm-blue), var(--hm-purple));
    background-size: 220% 220%;
    box-shadow: 0 18px 40px rgba(156, 39, 176, .25);
    animation: hm-gradient 12s ease infinite;
}

.hm .hm-vision::before,
.hm .hm-vision::after {
    content: '';
    position: absolute;
    width: 150px;
    height: 150px;
    border: 2px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
    animation: hm-breathe 7s ease-in-out infinite;
}

.hm .hm-vision::before {
    top: -60px;
    left: -50px;
}

.hm .hm-vision::after {
    right: -45px;
    bottom: -70px;
    animation-delay: -3.5s;
}

.hm .hm-vision__mark {
    position: absolute;
    top: 14px;
    left: 26px;
    font-size: 70px;
    line-height: 1;
    color: rgba(255, 255, 255, .16);
    animation: hm-float 6s ease-in-out infinite;
}

.hm .hm-vision__label {
    position: relative;
    display: inline-block;
    padding: 4px 18px;
    border-radius: 30px;
    font-family: 'Rubik', sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--hm-purple);
    background: #fff;
}

.hm .hm-vision blockquote {
    position: relative;
    margin: 14px 0 0;
    padding: 0;
    color: #fff;
}

.hm .hm-vision blockquote p {
    margin: 0;
    font-family: 'Rubik', sans-serif;
    font-size: clamp(20px, 2.6vw, 30px);
    font-weight: 400;
    line-height: 1.35;
    color: #fff;
}

/* =====================================================================
   Chairman message
   ===================================================================== */

.hm-chairman {
    overflow: hidden;
    padding-bottom: calc(var(--hm-space) + 70px);
    background: var(--hm-tint);
}

.hm-chairman::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 45%;
    height: 100%;
    background-image: radial-gradient(rgba(186, 184, 60, .35) 1.4px, transparent 1.4px);
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(to left, #000, transparent);
    mask-image: linear-gradient(to left, #000, transparent);
    animation: hm-pan 30s linear infinite;
}

.hm-chairman__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(32px, 5vw, 64px);
    align-items: stretch;
}

.hm-chairman__frame {
    position: relative;
    height: 100%;
    padding: 0 18px 18px 0;
}

.hm-chairman__frame::before {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 82%;
    height: 82%;
    border-radius: var(--hm-radius);
    background: linear-gradient(135deg, var(--hm-olive), var(--hm-green));
    transition: transform .6s var(--hm-ease);
}

.hm-chairman__frame::after {
    content: '';
    position: absolute;
    top: -18px;
    left: -18px;
    width: 110px;
    height: 110px;
    background-image: radial-gradient(var(--hm-red) 1.8px, transparent 1.8px);
    background-size: 14px 14px;
    opacity: .3;
    animation: hm-drift-sm 8s ease-in-out infinite alternate;
}

.hm-chairman__img {
    position: relative;
    z-index: 1;
    height: 100%;
    overflow: hidden;
    border-radius: var(--hm-radius);
    box-shadow: var(--hm-shadow-lg);
}

/* fills the column so the photo matches the message card's height */
.hm-chairman__img img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 320px;
    object-fit: cover;
    object-position: 30% center;
    transition: transform .9s var(--hm-ease);
}

.hm-chairman__img::after {
    content: '';
    position: absolute;
    top: 0;
    left: -80%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .45), transparent);
    transform: skewX(-20deg);
    transition: left .9s var(--hm-ease);
}

.hm-chairman__frame:hover .hm-chairman__img img {
    transform: scale(1.06);
}

.hm-chairman__frame:hover .hm-chairman__img::after {
    left: 130%;
}

.hm-chairman__frame:hover::before {
    transform: translate(8px, 8px);
}

.hm .hm-chairman__card {
    position: relative;
    overflow: hidden;
    padding: clamp(26px, 3.4vw, 44px);
    border-radius: var(--hm-radius);
    background: #fff;
    box-shadow: var(--hm-shadow);
}

.hm .hm-chairman__card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, var(--hm-red), var(--hm-olive), var(--hm-green));
}

.hm .hm-chairman__mark {
    position: absolute;
    top: 18px;
    right: 22px;
    font-size: 96px;
    line-height: 1;
    color: rgba(219, 27, 32, .08);
    animation: hm-float 7s ease-in-out infinite;
    pointer-events: none;
}

.hm .hm-chairman__title {
    position: relative;
    margin: 0;
    font-family: 'Rubik', sans-serif;
    font-size: clamp(26px, 3vw, 34px);
    font-weight: 600;
    color: var(--hm-red);
}

.hm .hm-bar {
    display: block;
    width: 70px;
    height: 4px;
    margin: 14px 0 20px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--hm-red), var(--hm-olive));
    transform-origin: left center;
}

.hm .hm-chairman__card p {
    position: relative;
    margin: 0;
    font-size: 16px;
    line-height: 1.85;
    letter-spacing: 0;
    text-align: justify;
    color: var(--hm-body);
}

.hm .hm-chairman__card strong {
    color: var(--hm-green);
}

/* =====================================================================
   School levels (cards overlap the chairman section)
   ===================================================================== */

.hm-levels {
    z-index: 2;
    padding-top: 0;
    background: #fff;
}

.hm-levels__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    margin-top: -70px;
}

.hm-level {
    --acc: var(--hm-sky);
    --acc-2: var(--hm-blue);
    --acc-ink: var(--hm-blue);
}

.hm-level--lime {
    --acc: var(--hm-lime);
    --acc-2: var(--hm-green);
    --acc-ink: var(--hm-green);
}

.hm-level--orange {
    --acc: var(--hm-orange);
    --acc-2: var(--hm-red);
    --acc-ink: var(--hm-orange);
}

.hm .hm-level__card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border-radius: var(--hm-radius);
    background: #fff;
    box-shadow: var(--hm-shadow);
    transition: transform .5s var(--hm-ease), box-shadow .5s var(--hm-ease);
}

.hm .hm-level__card::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, var(--acc), var(--acc-2));
    transform: scaleX(.3);
    transition: transform .6s var(--hm-ease);
}

.hm .hm-level__card:hover {
    transform: translateY(-10px);
    box-shadow: var(--hm-shadow-lg);
}

.hm .hm-level__card:hover::after {
    transform: scaleX(1);
}

.hm-level__img {
    position: relative;
    aspect-ratio: 800 / 489;
    overflow: hidden;
}

.hm-level__img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s var(--hm-ease);
}

.hm-level__img::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, var(--acc-2), transparent 60%);
    opacity: 0;
    transition: opacity .5s ease;
}

.hm .hm-level__card:hover .hm-level__img img {
    transform: scale(1.08);
}

.hm .hm-level__card:hover .hm-level__img::after {
    opacity: .35;
}

.hm-level__body {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 50px 26px 32px;
    text-align: center;
    background: #fff;
}

.hm-level__curve {
    position: absolute;
    left: 0;
    bottom: 100%;
    width: 100%;
    height: 26px;
    fill: #fff;
}

.hm .hm-level__badge {
    position: absolute;
    z-index: 2;
    top: -36px;
    left: 50%;
    width: 70px;
    height: 70px;
    margin-left: -35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 30px;
    color: #fff;
    background: linear-gradient(135deg, var(--acc), var(--acc-2));
    box-shadow: 0 0 0 6px #fff, 0 12px 26px -6px var(--acc-2);
    transition: transform .7s var(--hm-ease);
}

.hm .hm-level__badge::after {
    content: '';
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    border: 2px solid var(--acc);
    border-radius: 50%;
    animation: hm-ping 2.6s ease-out infinite;
    animation-delay: var(--d, 0s);
}

.hm .hm-level__card:hover .hm-level__badge {
    transform: rotateY(360deg);
}

.hm .hm-level__title {
    position: relative;
    margin: 0 0 12px;
    font-family: 'Rubik', sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--hm-ink);
}

.hm .hm-level__title span {
    display: inline-block;
    margin-top: 4px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 1px;
    color: var(--acc-ink);
}

.hm .hm-level__body p {
    position: relative;
    margin: 0 0 24px;
    font-size: 15px;
    line-height: 1.75;
    letter-spacing: 0;
    color: var(--hm-body);
}

.hm .hm-level__body .hm-pill {
    margin-top: auto;
}

.hm .hm-level__mark {
    position: absolute;
    right: -20px;
    bottom: -30px;
    font-size: 150px;
    line-height: 1;
    color: var(--acc);
    opacity: .1;
    transform: rotate(-12deg);
    transition: transform .8s var(--hm-ease), opacity .5s ease;
    pointer-events: none;
}

.hm .hm-level__card:hover .hm-level__mark {
    opacity: .18;
    transform: rotate(0deg) scale(1.08);
}

/* =====================================================================
   Values (circle images)
   ===================================================================== */

.hm-values {
    overflow: hidden;
    background: var(--hm-tint);
}

.hm-values::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(rgba(45, 121, 72, .14) 1.4px, transparent 1.4px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse at center, transparent 30%, #000 85%);
    mask-image: radial-gradient(ellipse at center, transparent 30%, #000 85%);
    animation: hm-pan 40s linear infinite;
}

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

.hm-value {
    text-align: center;
}

.hm-value__circle {
    position: relative;
    width: min(260px, 100%);
    aspect-ratio: 1;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
    background: rgba(0, 0, 0, .08);
    box-shadow: 0 12px 28px rgba(29, 39, 51, .18);
    cursor: pointer;
    transition: transform .5s var(--hm-ease), box-shadow .5s var(--hm-ease);
}

.hm-value:hover .hm-value__circle {
    transform: translateY(-8px);
    box-shadow: 0 22px 40px rgba(45, 121, 72, .28);
}

/* ring fill: two half panels sweep in behind the photo */
.hm-value__sq {
    position: absolute;
    width: 50%;
    height: 120%;
    max-height: 0;
    background: linear-gradient(var(--hm-olive), var(--hm-green));
}

.hm-value__sq--1 {
    top: -10%;
    right: 0;
    transition: max-height .4s linear .35s;
}

.hm-value__sq--2 {
    bottom: -10%;
    left: 0;
    background: linear-gradient(to top, var(--hm-olive), var(--hm-green));
    transition: max-height .4s linear 0s;
}

.hm-value:hover .hm-value__sq {
    max-height: 130%;
}

.hm-value:hover .hm-value__sq--1 {
    transition-delay: 0s;
}

.hm-value:hover .hm-value__sq--2 {
    transition-delay: .35s;
}

.hm-value__inner {
    position: relative;
    z-index: 1;
    display: block;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    overflow: hidden;
    border: 4px solid #fff;
    border-radius: 50%;
}

.hm-value__inner img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .9s var(--hm-ease);
}

.hm-value:hover .hm-value__inner img {
    transform: scale(1.12);
}

.hm .hm-value__title {
    position: relative;
    display: inline-block;
    margin: 22px 0 0;
    padding-bottom: 10px;
    font-family: 'Rubik', sans-serif;
    font-size: 20px;
    font-weight: 500;
    color: var(--hm-ink);
    transition: color .35s ease;
}

.hm .hm-value__title::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 30px;
    height: 3px;
    border-radius: 3px;
    background: var(--hm-olive);
    transform: translateX(-50%);
    transition: width .45s var(--hm-ease);
}

.hm .hm-value:hover .hm-value__title {
    color: var(--hm-green);
}

.hm .hm-value:hover .hm-value__title::after {
    width: 100%;
}

/* touch screens have no hover: play the ring fill when the circle scrolls in */
@media (hover: none) {
    .hm-value.is-in .hm-value__sq {
        max-height: 130%;
    }

    .hm-value.is-in .hm-value__sq--1 {
        transition-delay: .7s;
    }

    .hm-value.is-in .hm-value__sq--2 {
        transition-delay: 1.05s;
    }
}

/* =====================================================================
   Curricular activities carousel
   ===================================================================== */

.hm-activities {
    background: #fff;
}

.hm-activities .owl-stage {
    display: flex;
}

.hm-activities .owl-item {
    display: flex;
}

/* side padding + negative margin keeps card shadows from being clipped flat */
.hm-activities .owl-stage-outer {
    margin: 0 -15px;
    padding: 14px 15px 30px;
}

/* Owl sets display inline on its controls; the custom arrows below replace them */
.hm-activities .owl-controls {
    display: none !important;
}

.hm .hm-activity {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--hm-radius);
    background: var(--hm-purple);
    box-shadow: 0 10px 26px rgba(29, 39, 51, .12);
    transition: transform .5s var(--hm-ease), box-shadow .5s var(--hm-ease);
}

.hm .hm-activity:hover,
.hm .hm-activity:focus-visible {
    transform: translateY(-8px);
    box-shadow: 0 22px 40px rgba(156, 39, 176, .28);
}

.hm-activity__img {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
}

.hm-activities .owl-item .hm-activity__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s var(--hm-ease);
}

.hm-activity__img::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(156, 39, 176, .6), transparent 55%);
    opacity: 0;
    transition: opacity .5s ease;
}

.hm-activities .hm-activity:hover .hm-activity__img img {
    transform: scale(1.1);
}

.hm .hm-activity:hover .hm-activity__img::after {
    opacity: 1;
}

.hm-activity__body {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px 18px;
}

.hm-activity__curve {
    position: absolute;
    left: 0;
    bottom: 99%;
    width: 100%;
    height: 16px;
    fill: var(--hm-purple);
}

.hm .hm-activity__title {
    margin: 0;
    font-family: 'Rubik', sans-serif;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.3;
    color: #fff;
}

.hm .hm-activity__go {
    flex: none;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 14px;
    color: #fff;
    background: rgba(255, 255, 255, .18);
    transition: transform .45s var(--hm-ease), background-color .3s ease, color .3s ease;
}

.hm .hm-activity:hover .hm-activity__go {
    color: var(--hm-purple);
    background: #fff;
    transform: rotate(-45deg);
}

.hm .hm-activities__nav {
    display: flex;
    justify-content: center;
    gap: 14px;
    opacity: 1;
}

.hm .hm-activities__nav [class*="custom-owl-"]:before {
    width: 48px;
    height: 48px;
    line-height: 44px;
    font-size: 18px;
    color: var(--hm-purple);
    background: #fff;
    border: 2px solid var(--hm-purple);
    transition: background-color .3s ease, color .3s ease, transform .3s var(--hm-ease);
}

.hm .hm-activities__nav [class*="custom-owl-"]:hover:before,
.hm .hm-activities__nav [class*="custom-owl-"]:focus-visible:before {
    color: #fff;
    background: var(--hm-purple);
    transform: scale(1.08);
}

.hm .hm-activities__nav [class*="custom-owl-"]:focus-visible {
    outline: none;
}

/* =====================================================================
   Facilities
   ===================================================================== */

.hm-facilities {
    overflow: hidden;
    isolation: isolate;
    padding-top: calc(var(--hm-space) + 30px);
    background: #0b5f84;
}

.hm-facilities__bg {
    position: absolute;
    z-index: -2;
    top: -15%;
    left: 0;
    width: 100%;
    height: 130%;
    background: url(../images/2122x1000_bg.jpg) center / cover no-repeat;
    transform: translate3d(0, var(--py, 0px), 0);
    will-change: transform;
}

.hm-facilities::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 94, 130, .9) 0%, rgba(0, 132, 180, .78) 50%, rgba(45, 121, 72, .88) 100%);
}

.hm-wave {
    position: absolute;
    z-index: 0;
    top: -1px;
    left: 0;
    width: 100%;
    height: 50px;
    fill: #fff;
}

.hm-bubbles i {
    position: absolute;
    z-index: 0;
    bottom: -80px;
    display: block;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    animation: hm-rise linear infinite;
}

.hm-bubbles i:nth-child(1) { left: 6%;  width: 46px;  height: 46px;  animation-duration: 16s; }
.hm-bubbles i:nth-child(2) { left: 22%; width: 18px;  height: 18px;  animation-duration: 11s; animation-delay: -4s; }
.hm-bubbles i:nth-child(3) { left: 48%; width: 70px;  height: 70px;  animation-duration: 22s; animation-delay: -9s; }
.hm-bubbles i:nth-child(4) { left: 68%; width: 26px;  height: 26px;  animation-duration: 13s; animation-delay: -2s; }
.hm-bubbles i:nth-child(5) { left: 84%; width: 54px;  height: 54px;  animation-duration: 19s; animation-delay: -12s; }
.hm-bubbles i:nth-child(6) { left: 94%; width: 14px;  height: 14px;  animation-duration: 10s; animation-delay: -6s; }

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

.hm .hm-facility__card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
    padding: 30px 28px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--hm-radius);
    background: rgba(255, 255, 255, .08);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: transform .5s var(--hm-ease), background-color .5s ease, border-color .5s ease, box-shadow .5s ease;
}

.hm .hm-facility__card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--hm-cyan), var(--hm-olive));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .6s var(--hm-ease);
}

.hm .hm-facility__card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 255, 255, .4);
    background: rgba(255, 255, 255, .16);
    box-shadow: 0 24px 44px rgba(0, 0, 0, .22);
}

.hm .hm-facility__card:hover::before {
    transform: scaleX(1);
}

.hm-facility__badge {
    position: relative;
    width: 70px;
    height: 70px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--hm-cyan);
    box-shadow: 0 10px 24px rgba(0, 188, 212, .4);
    transition: transform .6s var(--hm-ease), background-color .4s ease, box-shadow .4s ease;
}

.hm-facility__badge::after {
    content: '';
    position: absolute;
    top: -7px;
    left: -7px;
    right: -7px;
    bottom: -7px;
    border: 2px solid rgba(186, 184, 60, .8);
    border-radius: 50%;
    opacity: 0;
    transform: scale(.8);
    transition: opacity .4s ease, transform .4s ease;
}

.hm-facility__badge img {
    width: 38px;
    height: 38px;
    object-fit: contain;
    animation: hm-bob 3.4s ease-in-out infinite;
    animation-delay: var(--d, 0s);
}

.hm .hm-facility__card:hover .hm-facility__badge {
    background: var(--hm-olive);
    box-shadow: 0 10px 24px rgba(186, 184, 60, .45);
    transform: rotate(-10deg) scale(1.06);
}

.hm .hm-facility__card:hover .hm-facility__badge::after {
    opacity: 1;
    transform: scale(1);
    animation: hm-ping 1.6s ease-out infinite;
}

.hm .hm-facility__title {
    margin: 0 0 10px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #fff;
}

.hm .hm-facility__card p {
    margin: 0 0 22px;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.7;
    letter-spacing: 0;
    color: rgba(255, 255, 255, .88);
}

.hm .hm-facility__card .hm-pill {
    margin-top: auto;
}

/* =====================================================================
   Header motion (this stylesheet is only loaded by index.php)
   The entrance waits, paused, until the page loader is gone (.hm-ready)
   and is switched off once played (.hm-done) so nothing can replay it.
   ===================================================================== */

.hm-anim:not(.hm-done) #header .pre-header {
    animation: hm-drop-in .7s var(--hm-ease) both;
}

.hm-anim:not(.hm-done) #header .logo {
    animation: hm-logo-in 1s cubic-bezier(.2, .9, .3, 1.25) .15s both;
}

.hm-anim:not(.hm-done) #header .call-us a.flash_btn {
    animation: hm-from-right .8s var(--hm-ease) .35s both, glowing 1500ms 1.2s infinite;
}

.hm-anim:not(.hm-done) #header #main-navigation > ul > li {
    animation: hm-drop-in-sm .6s var(--hm-ease) both;
}

.hm-anim:not(.hm-done) #header #main-navigation > ul > li:nth-child(1)  { animation-delay: .45s; }
.hm-anim:not(.hm-done) #header #main-navigation > ul > li:nth-child(2)  { animation-delay: .5s; }
.hm-anim:not(.hm-done) #header #main-navigation > ul > li:nth-child(3)  { animation-delay: .55s; }
.hm-anim:not(.hm-done) #header #main-navigation > ul > li:nth-child(4)  { animation-delay: .6s; }
.hm-anim:not(.hm-done) #header #main-navigation > ul > li:nth-child(5)  { animation-delay: .65s; }
.hm-anim:not(.hm-done) #header #main-navigation > ul > li:nth-child(6)  { animation-delay: .7s; }
.hm-anim:not(.hm-done) #header #main-navigation > ul > li:nth-child(7)  { animation-delay: .75s; }
.hm-anim:not(.hm-done) #header #main-navigation > ul > li:nth-child(8)  { animation-delay: .8s; }
.hm-anim:not(.hm-done) #header #main-navigation > ul > li:nth-child(9)  { animation-delay: .85s; }
.hm-anim:not(.hm-done) #header #main-navigation > ul > li:nth-child(10) { animation-delay: .9s; }
.hm-anim:not(.hm-done) #header #main-navigation > ul > li:nth-child(11) { animation-delay: .95s; }
.hm-anim:not(.hm-done) #header #main-navigation > ul > li:nth-child(12) { animation-delay: 1s; }

.hm-anim:not(.hm-done) #header .fixed .buttonDiv {
    animation: hm-from-right .8s var(--hm-ease) 1s both;
}

.hm-anim:not(.hm-done) #header .fixed.fix .buttonDiv {
    animation-delay: 1.15s;
}

.hm-anim:not(.hm-ready) #header .pre-header,
.hm-anim:not(.hm-ready) #header .logo,
.hm-anim:not(.hm-ready) #header .call-us a.flash_btn,
.hm-anim:not(.hm-ready) #header #main-navigation > ul > li,
.hm-anim:not(.hm-ready) #header .fixed .buttonDiv {
    animation-play-state: paused;
}

/* looping touches */
.hm-anim #header .logo {
    position: relative;
    overflow: hidden;
}

.hm-anim #header .logo::after {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 35%;
    height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .8), transparent);
    transform: skewX(-20deg);
    animation: hm-logo-shine 7s ease-in-out 2.5s infinite;
    pointer-events: none;
}

.hm-anim #header .flash_btn i {
    display: inline-block;
    animation: hm-plane 2.8s ease-in-out infinite;
}

.hm-anim #header .pre-header .contact-info-item > i {
    animation: hm-bob 3s ease-in-out infinite;
}

.hm-anim #header .pre-header .contact-info-item + .contact-info-item > i {
    animation-delay: -1.5s;
}

.hm-anim #header.header-2 .pre-header::before {
    animation: hm-stripe-sm 3s linear infinite;
}

/* sticky bar slides down when it attaches (the theme only sticks above 1280px) */
@media only screen and (min-width: 1281px) {
    .hm-anim #header.sticky {
        animation: hm-sticky-in .5s var(--hm-ease) both;
    }
}

/* menu: hover colour rises from the bottom instead of snapping on */
#header #main-navigation > ul > li > a {
    z-index: 0;
    overflow: hidden;
}

#header #main-navigation > ul > li > a::before {
    content: '';
    position: absolute;
    z-index: -1;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: #b23634;
    transform: scaleY(0);
    transform-origin: center bottom;
    transition: transform .35s var(--hm-ease);
}

#header #main-navigation > ul > li:hover > a,
#header #main-navigation > ul > li.current > a {
    background: transparent;
}

#header #main-navigation > ul > li:hover > a::before,
#header #main-navigation > ul > li.current > a::before {
    transform: scaleY(1);
}

/* dropdown items cascade in, links slide on hover */
.hm-anim #header #main-navigation > ul > li:hover .sub-menu-wrap li {
    animation: hm-sub-in .45s var(--hm-ease) both;
}

.hm-anim #header #main-navigation > ul > li:hover .sub-menu-wrap li:nth-child(2) { animation-delay: .04s; }
.hm-anim #header #main-navigation > ul > li:hover .sub-menu-wrap li:nth-child(3) { animation-delay: .08s; }
.hm-anim #header #main-navigation > ul > li:hover .sub-menu-wrap li:nth-child(4) { animation-delay: .12s; }
.hm-anim #header #main-navigation > ul > li:hover .sub-menu-wrap li:nth-child(5) { animation-delay: .16s; }
.hm-anim #header #main-navigation > ul > li:hover .sub-menu-wrap li:nth-child(6) { animation-delay: .2s; }
.hm-anim #header #main-navigation > ul > li:hover .sub-menu-wrap li:nth-child(7) { animation-delay: .24s; }
.hm-anim #header #main-navigation > ul > li:hover .sub-menu-wrap li:nth-child(8) { animation-delay: .28s; }

#header .sub-menu-wrap ul li a::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 16px;
    width: 0;
    height: 2px;
    margin-top: -1px;
    background: var(--hm-green);
    transition: width .3s var(--hm-ease);
}

#header .sub-menu-wrap ul li:hover > a {
    padding-left: 38px;
}

#header .sub-menu-wrap ul li:hover > a::before {
    width: 12px;
}

#header .social-icons > li > a > i,
#footer .social-icons > li > a > i {
    display: inline-block;
    transition: transform .5s var(--hm-ease);
}

#header .social-icons > li > a:hover > i,
#footer .social-icons > li > a:hover > i {
    transform: rotate(360deg) scale(1.2);
}

/* =====================================================================
   Page scroll progress + off-screen pause
   ===================================================================== */

.hm-progress {
    position: fixed;
    z-index: 9998;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--hm-green), var(--hm-olive), var(--hm-orange));
    transform: scaleX(0);
    transform-origin: left center;
    pointer-events: none;
}

/* sections scrolled out of view stop their looping animations */
.hm-off::before,
.hm-off::after,
.hm-off *,
.hm-off *::before,
.hm-off *::after {
    animation-play-state: paused !important;
}

/* =====================================================================
   Scroll entrances
   ===================================================================== */

.hm-anim [data-reveal="flip"] {
    transform: perspective(1000px) rotateX(16deg) translate3d(0, 60px, 0);
    transform-origin: center bottom;
}

.hm-anim [data-reveal="tilt"] {
    transform: perspective(1000px) rotateY(-24deg) translate3d(0, 30px, 0);
    transform-origin: left center;
}

/* headings: words rise out of a mask (spans added by js/home.js) */
.hm-w {
    display: inline-block;
    overflow: hidden;
    padding: 0 .06em .12em;
    margin: 0 -.06em -.12em;
    vertical-align: top;
}

.hm-w--block {
    display: block;
}

.hm-w__i {
    display: inline-block;
    transform: translate3d(0, 110%, 0);
    transition: transform .9s var(--hm-ease);
    transition-delay: calc(var(--d, 0s) + .15s + var(--i, 0) * 70ms);
}

.hm-w--block > .hm-w__i {
    display: block;
}

.is-in .hm-w__i {
    transform: none;
}

/* chairman photo wipes in like a curtain, its green frame slides behind */
.hm-anim .hm-chairman__media .hm-chairman__img img {
    clip-path: inset(0 100% 0 0);
    transition: transform .9s var(--hm-ease), clip-path 1.2s var(--hm-ease) .25s;
}

.hm-anim .hm-chairman__media.is-in .hm-chairman__img img {
    clip-path: inset(0 0 0 0);
}

.hm-anim .hm-chairman__media.is-in .hm-chairman__frame::before {
    animation: hm-frame-in 1s var(--hm-ease) .6s backwards;
}

/* level cards: photo unrolls downward, badge pops */
.hm-anim .hm-level .hm-level__img {
    clip-path: inset(0 0 100% 0);
    transition: clip-path 1.1s var(--hm-ease);
    transition-delay: calc(var(--d, 0s) + .25s);
}

.hm-anim .hm-level.is-in .hm-level__img {
    clip-path: inset(0 0 0 0);
}

.hm-anim .hm-level.is-in .hm-level__badge,
.hm-anim .hm-facility.is-in .hm-facility__badge {
    animation: hm-badge-pop .8s cubic-bezier(.3, 1.6, .5, 1) backwards;
    animation-delay: calc(var(--d, 0s) + .55s);
}

/* value circles roll in like a ball */
.hm-anim .hm-value .hm-value__inner {
    transform: rotate(-220deg) scale(.5);
    transition: transform 1.3s var(--hm-ease);
    transition-delay: calc(var(--d, 0s) + .1s);
}

.hm-anim .hm-value.is-in .hm-value__inner {
    transform: none;
}

/* footer columns rise in (data-reveal is added by js/home.js) */
.hm-anim #footer[class*="footer"]::before {
    animation: hm-stripe-lg 12s linear infinite;
}

/* =====================================================================
   Section backgrounds
   ===================================================================== */

.hm-bg {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    transform: translate3d(0, var(--py, 0px), 0);
}

/* floating icons / glyphs; position, size, colour and timing come from inline vars */
.hm-fl,
.hm-glyph {
    position: absolute;
    left: var(--x);
    top: var(--y);
    font-size: var(--s, 34px);
    line-height: 1;
    color: var(--c, var(--hm-green));
    opacity: var(--o, .14);
    animation: hm-float-r var(--t, 10s) ease-in-out var(--dl, 0s) infinite;
}

.hm-glyph {
    font-family: 'Rubik', sans-serif;
    font-size: var(--s, 48px);
    font-weight: 600;
    opacity: var(--o, .12);
}

.hm-gear {
    animation: hm-spin var(--t, 16s) linear infinite;
}

.hm-gear--rev {
    animation-direction: reverse;
}

/* hero: glint across each new slide + flowing waves */
.hm-hero__track {
    transform: translate3d(0, var(--py, 0px), 0);
}

.hm-hero__slide {
    position: relative;
}

.hm-hero__slide::after {
    content: '';
    position: absolute;
    top: 0;
    left: -45%;
    width: 35%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
    transform: skewX(-18deg);
    pointer-events: none;
}

.hm-hero__slide.is-active::after {
    animation: hm-glint 1.8s ease-in-out .5s both;
}

.hm-hero__waves {
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: -1px;
    height: clamp(14px, 3.2vw, 46px);
    overflow: hidden;
    pointer-events: none;
}

.hm-hero__waves svg {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 200%;
    height: 100%;
    fill: #fff;
    animation: hm-wave 14s linear infinite;
}

.hm-hero__waves svg:first-child {
    opacity: .5;
    animation-duration: 22s;
    animation-direction: reverse;
}

/* vision: twinkling stars */
.hm-stars i {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--s, 10px);
    height: var(--s, 10px);
    background: #fff;
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
    opacity: 0;
    animation: hm-twinkle 3.2s ease-in-out var(--dl, 0s) infinite;
}

/* chairman: pen stroke writes itself, quote marks drift up */
.hm-scribble {
    position: absolute;
    top: 14px;
    left: 2%;
    width: min(420px, 36%);
    height: auto;
    fill: none;
    stroke: var(--hm-olive);
    stroke-width: 3;
    stroke-linecap: round;
    opacity: .55;
}

.hm-scribble path {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: hm-write 9s ease-in-out infinite;
}

.hm-quote-fly {
    position: absolute;
    bottom: -60px;
    left: var(--x);
    font-size: var(--s, 40px);
    line-height: 1;
    color: var(--c);
    opacity: 0;
    animation: hm-quote-rise var(--t, 15s) linear var(--dl, 0s) infinite;
}

/* values: ripple rings spread out from each circle */
.hm-value {
    position: relative;
}

.hm-value__ripple {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 50%;
    width: min(260px, 100%);
    aspect-ratio: 1;
    transform: translateX(-50%);
    pointer-events: none;
}

.hm-value__ripple::before,
.hm-value__ripple::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid rgba(186, 184, 60, .55);
    border-radius: 50%;
    animation: hm-ripple 3.6s ease-out infinite;
}

.hm-value__ripple::after {
    border-color: rgba(45, 121, 72, .4);
    animation-delay: 1.8s;
}

.hm-value__circle {
    z-index: 1;
}

/* activities: confetti and balloons */
.hm-confetti {
    position: absolute;
    top: -24px;
    left: var(--x);
    width: 8px;
    height: 14px;
    border-radius: 2px;
    background: var(--c);
    opacity: .5;
    animation: hm-confetti var(--t, 11s) linear var(--dl, 0s) infinite;
}

.hm-confetti--dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.hm-balloon {
    position: absolute;
    bottom: -70px;
    left: var(--x);
    font-size: var(--s, 44px);
    line-height: 1;
    color: var(--c);
    opacity: 0;
    animation: hm-balloon var(--t, 17s) ease-in var(--dl, 0s) infinite;
}

/* facilities: drifting blueprint grid + sweeping light */
.hm-bg--blueprint {
    background-image:
        linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
    mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
    animation: hm-grid 16s linear infinite;
}

.hm-beam {
    position: absolute;
    top: -30%;
    left: -40%;
    width: 30%;
    height: 160%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .1), transparent);
    transform: rotate(18deg);
    animation: hm-beam 10s ease-in-out infinite;
}

@media (max-width: 767px) {
    .hm-bg .hm-fl:nth-child(n+6),
    .hm-bg .hm-glyph:nth-child(n+5),
    .hm-stars i:nth-child(n+8) {
        display: none;
    }

    .hm-fl,
    .hm-glyph {
        font-size: calc(var(--s, 34px) * .7);
    }

    .hm-scribble {
        width: 70%;
    }

    .hm-quote-fly {
        font-size: 28px;
    }
}

/* =====================================================================
   Keyframes
   ===================================================================== */

@keyframes hm-shine { to { background-position: 200% center; } }
@keyframes hm-sweep { from { transform: translateX(-120%); } to { transform: translateX(260%); } }
@keyframes hm-cta-shine { 0%, 60% { left: -75%; } 100% { left: 130%; } }
@keyframes hm-settle { from { transform: scale(1.04); } to { transform: scale(1); } }
@keyframes hm-progress { to { transform: scaleX(1); } }
@keyframes hm-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes hm-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes hm-spin { to { transform: rotate(360deg); } }
@keyframes hm-breathe { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.06); opacity: .75; } }
@keyframes hm-drift { from { transform: translate(0, 0); } to { transform: translate(60px, 40px); } }
@keyframes hm-drift-sm { from { transform: translate(0, 0); } to { transform: translate(10px, 12px); } }
@keyframes hm-pan { to { background-position: 220px 110px; } }
@keyframes hm-gradient { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes hm-ping { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.45); opacity: 0; } }
@keyframes hm-rise {
    0% { transform: translateY(0) scale(.7); opacity: 0; }
    12% { opacity: 1; }
    100% { transform: translateY(-1000px) scale(1.1); opacity: 0; }
}
@keyframes hm-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes hm-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes hm-pop { from { opacity: 0; transform: translateY(30px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes hm-pop-out { to { opacity: 0; transform: translateY(20px) scale(.94); } }

/* section backgrounds */
@keyframes hm-float-r {
    0%, 100% { transform: translate(0, 0) rotate(var(--r, 0deg)); }
    50% { transform: translate(8px, -18px) rotate(calc(var(--r, 0deg) + 10deg)); }
}
@keyframes hm-wave { to { transform: translateX(-50%); } }
@keyframes hm-glint { from { left: -45%; } to { left: 130%; } }
@keyframes hm-twinkle {
    0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); }
    50% { opacity: .95; transform: scale(1) rotate(90deg); }
}
@keyframes hm-write {
    0% { stroke-dashoffset: 100; opacity: 1; }
    45%, 80% { stroke-dashoffset: 0; opacity: 1; }
    95%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes hm-quote-rise {
    0% { transform: translateY(0) rotate(-10deg); opacity: 0; }
    15%, 80% { opacity: .2; }
    100% { transform: translateY(-640px) rotate(10deg); opacity: 0; }
}
@keyframes hm-ripple { from { transform: scale(1); opacity: .8; } to { transform: scale(1.4); opacity: 0; } }
@keyframes hm-confetti {
    0% { transform: translate3d(0, 0, 0) rotate(0deg); }
    50% { transform: translate3d(var(--sw, 30px), 430px, 0) rotate(360deg); }
    100% { transform: translate3d(0, 880px, 0) rotate(720deg); }
}
@keyframes hm-balloon {
    0% { transform: translate(0, 0) rotate(-6deg); opacity: 0; }
    10%, 85% { opacity: .24; }
    50% { transform: translate(18px, -420px) rotate(6deg); }
    100% { transform: translate(-10px, -840px) rotate(-6deg); opacity: 0; }
}
@keyframes hm-grid { to { background-position: 46px 46px, 46px 46px; } }
@keyframes hm-beam { 0% { left: -40%; } 60%, 100% { left: 130%; } }

/* scroll entrances */
@keyframes hm-badge-pop { from { transform: scale(0) rotate(-120deg); } }
@keyframes hm-frame-in { from { opacity: 0; transform: translate(-30px, -30px) scale(.8); } }

/* header & footer */
@keyframes hm-drop-in { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: none; } }
@keyframes hm-drop-in-sm { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes hm-from-right { from { opacity: 0; transform: translateX(80px); } to { opacity: 1; transform: none; } }
@keyframes hm-logo-in { from { opacity: 0; transform: translateY(-20px) scale(.85); } to { opacity: 1; transform: none; } }
@keyframes hm-logo-shine { 0% { left: -60%; } 20%, 100% { left: 130%; } }
@keyframes hm-plane {
    0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
    45% { transform: translate(5px, -5px) rotate(-10deg); opacity: 1; }
    60% { transform: translate(12px, -12px) rotate(-14deg); opacity: 0; }
    61% { transform: translate(-10px, 10px) rotate(0deg); opacity: 0; }
    80% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
}
@keyframes hm-sticky-in { from { top: -90px; } to { top: 0; } }
@keyframes hm-sub-in { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@keyframes hm-stripe-sm { to { background-position: 130px 0; } }
@keyframes hm-stripe-lg { to { background-position: 600px 0; } }

/* =====================================================================
   Responsive
   ===================================================================== */

@media (max-width: 991px) {
    .hm-about__grid,
    .hm-chairman__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .hm-about__media img {
        width: min(100%, 300px);
    }

    .hm-chairman__media {
        width: 100%;
        max-width: 560px;
        margin: 0 auto;
    }

    .hm-chairman__frame,
    .hm-chairman__img {
        height: auto;
    }

    .hm-chairman__img img {
        height: auto;
        min-height: 0;
    }

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

    .hm-levels__grid > :last-child:nth-child(odd) {
        grid-column: 1 / -1;
        justify-self: center;
        width: 100%;
        max-width: calc(50% - 15px);
    }
}

@media (max-width: 767px) {
    .hm .hm-hero__nav {
        display: none;
    }

    .hm-hero__dots {
        padding: 4px 7px;
    }

    .hm .hm-hero__dot {
        width: 8px;
        height: 8px;
    }

    .hm .hm-hero__dot.is-active {
        width: 20px;
    }

    .hm .hm-eyebrow {
        letter-spacing: 3px;
    }

    .hm .hm-eyebrow::before,
    .hm .hm-eyebrow::after {
        width: 22px;
    }

    .hm .hm-about__copy p,
    .hm .hm-chairman__card p {
        font-size: 15px;
        text-align: left;
    }

    .hm .hm-vision {
        padding: 30px 20px 26px;
    }

    .hm .hm-vision__mark {
        font-size: 50px;
        left: 14px;
    }

    .hm-chairman {
        padding-bottom: calc(var(--hm-space) + 50px);
    }

    .hm-levels__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        margin-top: -50px;
    }

    .hm-levels__grid > :last-child:nth-child(odd) {
        max-width: none;
    }

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

    .hm-values__grid > :last-child {
        grid-column: 1 / -1;
        justify-self: center;
        width: 50%;
    }

    .hm .hm-value__title {
        margin-top: 16px;
        font-size: 17px;
    }

    .hm-facilities__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    /* compact: icon beside the text instead of above it */
    .hm .hm-facility__card {
        display: grid;
        grid-template-columns: 56px minmax(0, 1fr);
        column-gap: 16px;
        align-items: start;
        padding: 22px 20px;
    }

    .hm-facility__badge {
        grid-row: 1 / span 3;
        width: 56px;
        height: 56px;
        margin-bottom: 0;
    }

    .hm-facility__badge img {
        width: 30px;
        height: 30px;
    }

    .hm .hm-facility__title {
        margin-top: 4px;
        font-size: 17px;
    }

    .hm .hm-facility__card p {
        margin-bottom: 16px;
    }

    .hm .hm-facility__card .hm-pill {
        justify-self: start;
    }

    .hm-wave {
        height: 28px;
    }

    .modals .closes {
        top: -14px;
        right: -10px;
        width: 38px;
        height: 38px;
        font-size: 24px;
        line-height: 31px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hm *,
    .hm *::before,
    .hm *::after,
    #header *,
    #header *::before,
    #header *::after,
    .modals,
    .modals * {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        transition-delay: 0s !important;
    }

    .hm-anim [data-reveal] {
        opacity: 1;
        transform: none;
    }
}