/* ==========================================================
   HORMUUD UNIVERSITY
   SKILLS ADVANCEMENT CENTRE — HUSAC

   HORMUUD UNIVERSITY EDITORIAL SYSTEM
   LIGHT MODE
   ========================================================== */


.hs-page {
    /* Hormuud University identity */
    --hs-green: #148154;
    --hs-green-hover: #0F6843;
    --hs-green-dark: #0a3420;
    --hs-green-soft: #E8F3EE;

    --hs-blue: #2C85B7;
    --hs-blue-dark: #236E98;
    --hs-blue-soft: #EAF4F9;

    --hs-paper: #F8FAF9;
    --hs-paper-warm: #F1F5F2;
    --hs-white: #FFFFFF;

    --hs-text: #202522;
    --hs-text-soft: #606862;
    --hs-muted: #7B857E;

    --hs-line: #D9E0DC;
    --hs-line-dark: #C8D1CB;

    /* Former clay/gold/lilac roles now use HU blue. */
    --hs-clay: var(--hs-blue-dark);
    --hs-gold: var(--hs-blue);
    --hs-lilac: var(--hs-blue-soft);

    --hs-display: "Fraunces", Georgia, serif;
    --hs-body: "Inter", Arial, sans-serif;
    --hs-mono: "DM Mono", monospace;

    width: 100%;

    color:
        var(--hs-text);

    background:
        var(--hs-paper);

    font-family:
        var(--hs-body);

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

    -webkit-font-smoothing:
        antialiased;
}


.hs-page *,
.hs-page *::before,
.hs-page *::after {
    box-sizing: border-box;
}


.hs-page button {
    font: inherit;
}


.hs-shell {
    width:
        min(
            1260px,
            calc(100% - 56px)
        );

    margin-inline: auto;
}


.hs-svg-library {
    position: absolute;

    width: 0;
    height: 0;

    overflow: hidden;
}


/* ==========================================================
   SHARED
   ========================================================== */

.hs-kicker {
    display: block;

    color:
        var(--hs-green);

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

    letter-spacing: .11em;

    text-transform: uppercase;
}


.hs-section-index > span {
    color:
        var(--hs-gold);

    font-family:
        var(--hs-mono);

    font-size: 12px;
}


.hs-section-index p {
    margin:
        10px
        0
        0;

    color:
        var(--hs-green);

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

    letter-spacing: .08em;

    text-transform: uppercase;
}


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

.hs-hero {
    position: relative;

    overflow: hidden;

    background:
        var(--hs-paper);
}


.hs-hero::before {
    content: "";

    position: absolute;

    width: 800px;
    height: 800px;

    right: -390px;
    top: 150px;

    border:
        1px solid
        rgba(20,129,84,.08);

    border-radius: 50%;

    pointer-events: none;
}


/* ==========================================================
   TOP BAR
   ========================================================== */

.hs-topbar {
    position: relative;

    z-index: 6;

    min-height: 78px;

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

    gap: 30px;

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


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

    gap: 12px;
}


.hs-brand-mark {
    width: 39px;
    height: 39px;

    display: grid;
    place-items: center;

    color:
        #ffffff;

    background:
        var(--hs-green);

    border-radius:
        50%;

    font-family:
        var(--hs-display);

    font-size: 15px;
}


.hs-brand strong {
    display: block;

    color:
        var(--hs-green-dark);

    font-size: 13px;
}


.hs-brand small {
    display: block;

    color:
        var(--hs-muted);

    font-size: 11px;
}


.hs-top-meta {
    display: flex;
    align-items: center;

    gap: 11px;
}


.hs-top-meta span {
    color:
        var(--hs-muted);

    font-family:
        var(--hs-mono);

    font-size: 10px;
}


.hs-top-meta i {
    width: 40px;
    height: 1px;

    background:
        var(--hs-line-dark);
}


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

.hs-hero-intro {
    position: relative;

    z-index: 4;

    display: grid;

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

    gap: 78px;

    padding:
        95px
        0
        105px;
}


.hs-hero-copy h1 {
    max-width: 1000px;

    margin:
        17px
        0
        0;

    color:
        var(--hs-green-dark);

    font-family:
        var(--hs-display);

    font-size:
        clamp(
            72px,
            10vw,
            132px
        );

    font-weight: 500;

    line-height: .86;

    letter-spacing: -.067em;
}


.hs-hero-copy h1 span {
    display: block;

    color:
        var(--hs-clay);
}


.hs-hero-bottom {
    max-width: 900px;

    display: grid;

    grid-template-columns:
        1fr
        auto;

    align-items: end;

    gap: 50px;

    margin-top: 42px;
}


.hs-hero-bottom p {
    max-width: 650px;

    margin: 0;

    color:
        var(--hs-text-soft);

    font-size: 18px;

    line-height: 1.75;
}


/* ==========================================================
   ACTION
   ========================================================== */

.hs-primary-action {
    display: inline-flex;
    align-items: center;

    gap: 13px;

    padding: 0;

    color:
        var(--hs-green-dark);

    background:
        transparent;

    border: 0;

    cursor: pointer;

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


.hs-primary-action > span {
    width: 46px;
    height: 46px;

    display: grid;
    place-items: center;

    color:
        #ffffff;

    background:
        var(--hs-green);

    border-radius:
        50%;

    transition:
        transform
        220ms ease,
        background
        180ms ease;
}


.hs-primary-action:hover > span {
    background:
        var(--hs-green-hover);

    transform:
        translateY(4px);
}


.hs-primary-action svg {
    width: 16px;
    height: 16px;

    fill: none;

    stroke:
        currentColor;

    stroke-width: 1.8;
}


/* ==========================================================
   MOMENTUM
   ========================================================== */

.hs-momentum {
    position: relative;

    z-index: 5;

    padding:
        42px
        0;

    background:
        var(--hs-green);

    color:
        #ffffff;
}


.hs-momentum-head {
    min-height: 54px;

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

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


.hs-momentum-head span,
.hs-momentum-head strong {
    font-family:
        var(--hs-mono);

    font-size: 10px;
}


.hs-momentum-head span {
    opacity: .72;
}


.hs-momentum-head strong {
    color:
        #ffffff;
}


/* ==========================================================
   MOMENTUM STAGE
   ========================================================== */

.hs-momentum-stage {
    position: relative;

    min-height: 590px;

    display: grid;

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

    align-items: center;

    gap: 50px;

    overflow: hidden;
}


.hs-momentum-stage::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    top: 50%;

    height: 1px;

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


/* ==========================================================
   WORD STREAM
   ========================================================== */

.hs-word-stream {
    position: absolute;

    left: 0;
    right: 0;
    top: 38px;

    overflow: hidden;

    white-space: nowrap;

    opacity: .5;
}


.hs-word-stream > div {
    width: max-content;

    display: flex;

    gap: 55px;

    animation:
        hsWordTravel
        30s
        linear
        infinite;
}


.hs-word-stream span {
    font-family:
        var(--hs-mono);

    font-size: 9px;

    letter-spacing: .08em;
}


@keyframes hsWordTravel {

    to {
        transform:
            translateX(-50%);
    }

}


/* ==========================================================
   BIG NUMBER
   ========================================================== */

.hs-momentum-number {
    position: relative;

    z-index: 4;

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

    font-family:
        var(--hs-display);

    font-size:
        clamp(
            95px,
            11vw,
            160px
        );

    line-height: .8;

    letter-spacing: -.08em;

    transition:
        opacity
        220ms ease,
        transform
        300ms ease;
}


/* ==========================================================
   MOMENTUM CONTENT
   ========================================================== */

.hs-momentum-content {
    position: relative;

    z-index: 5;

    max-width: 680px;

    transition:
        opacity
        200ms ease,
        transform
        320ms ease;
}


.hs-momentum-content.is-changing {
    opacity: .1;

    transform:
        translateY(12px);
}


.hs-momentum-type {
    font-family:
        var(--hs-mono);

    font-size: 10px;

    letter-spacing: .1em;

    opacity: .74;
}


.hs-momentum-content h2 {
    margin:
        15px
        0
        0;

    color:
        #ffffff;

    font-family:
        var(--hs-display);

    font-size:
        clamp(
            45px,
            5vw,
            67px
        );

    font-weight: 500;

    line-height: 1;

    letter-spacing: -.045em;
}


.hs-momentum-content p {
    max-width: 580px;

    margin:
        26px
        0
        0;

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

    font-size: 17px;

    line-height: 1.75;
}


/* ==========================================================
   ORBIT
   ========================================================== */

.hs-momentum-orbit {
    position: relative;

    z-index: 5;

    display: grid;
    place-items: center;
}


.hs-orbit-ring {
    position: relative;

    width: 190px;
    height: 190px;

    display: grid;
    place-items: center;

    border:
        1px solid
        rgba(255,255,255,.4);

    border-radius:
        50%;
}


.hs-orbit-ring::before {
    content: "";

    position: absolute;

    inset: 28px;

    border:
        1px dashed
        rgba(255,255,255,.25);

    border-radius:
        50%;

    animation:
        hsOrbitRotate
        18s
        linear
        infinite;
}


@keyframes hsOrbitRotate {

    to {
        transform:
            rotate(360deg);
    }

}


.hs-orbit-ring span {
    font-family:
        var(--hs-display);

    font-size: 35px;
}


.hs-orbit-dot {
    position: absolute;

    width: 11px;
    height: 11px;

    background:
        #ffffff;

    border-radius:
        50%;
}


.hs-orbit-dot--1 {
    top: -5px;
    left: 50%;
}


.hs-orbit-dot--2 {
    right: 7px;
    bottom: 32px;
}


.hs-orbit-dot--3 {
    left: 13px;
    bottom: 43px;

    background:
        #2C85B7;
}


/* ==========================================================
   MOMENTUM NAV
   ========================================================== */

.hs-momentum-nav {
    position: absolute;

    z-index: 9;

    left: 160px;
    right: 280px;
    bottom: 35px;

    display: grid;

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

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


.hs-momentum-nav button {
    min-height: 75px;

    display: flex;
    align-items: center;

    gap: 10px;

    padding:
        0
        13px;

    text-align: left;

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

    background:
        transparent;

    border: 0;

    border-right:
        1px solid
        rgba(255,255,255,.18);

    cursor: pointer;

    transition:
        color
        180ms ease,
        background
        180ms ease;
}


.hs-momentum-nav button:last-child {
    border-right: 0;
}


.hs-momentum-nav button:hover,
.hs-momentum-nav button.is-active {
    color:
        #ffffff;

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


.hs-momentum-nav button > span {
    font-family:
        var(--hs-mono);

    font-size: 9px;
}


.hs-momentum-nav button strong {
    font-size: 11px;

    line-height: 1.3;
}


/* ==========================================================
   MOMENTUM FOOT
   ========================================================== */

.hs-momentum-foot {
    min-height: 54px;

    display: flex;
    align-items: center;

    gap: 12px;

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


.hs-momentum-foot span {
    flex: none;

    font-family:
        var(--hs-mono);

    font-size: 9px;

    opacity: .7;
}


.hs-momentum-foot i {
    height: 1px;

    flex: 1;

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


/* ==========================================================
   INTRO
   ========================================================== */

.hs-intro {
    padding:
        135px
        0;

    background:
        var(--hs-paper);
}


.hs-editorial-grid,
.hs-facilities-heading {
    display: grid;

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

    gap: 85px;
}


.hs-intro-heading h2 {
    max-width: 900px;

    margin:
        16px
        0
        0;

    color:
        var(--hs-green-dark);

    font-family:
        var(--hs-display);

    font-size:
        clamp(
            52px,
            7vw,
            82px
        );

    font-weight: 500;

    line-height: .96;

    letter-spacing: -.055em;
}


.hs-intro-heading h2 span {
    display: block;

    color:
        var(--hs-clay);
}


.hs-intro-copy {
    max-width: 870px;

    margin:
        55px
        0
        0;

    padding-top: 35px;

    color:
        var(--hs-text-soft);

    border-top:
        1px solid
        var(--hs-line-dark);

    font-size: 18px;

    line-height: 1.88;
}


/* ==========================================================
   PURPOSE
   ========================================================== */

.hs-purpose {
    padding:
        120px
        0
        135px;

    background:
        #ffffff;

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


.hs-purpose-heading h2 {
    max-width: 780px;

    margin:
        14px
        0
        0;

    color:
        var(--hs-green-dark);

    font-family:
        var(--hs-display);

    font-size:
        clamp(
            49px,
            6vw,
            72px
        );

    font-weight: 500;

    line-height: 1;
}


.hs-purpose-grid {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 22px;

    margin-top: 70px;
}


/* ==========================================================
   PURPOSE CARDS
   ========================================================== */

.hs-purpose-card {
    position: relative;

    min-height: 490px;

    padding:
        34px;

    overflow: hidden;

    border-radius:
        28px;
}


.hs-purpose-card--mission {
    color:
        #ffffff;

    background:
        var(--hs-green);
}


.hs-purpose-card--vision {
    color:
        var(--hs-green-dark);

    background:
        #EAF4F9;
}


.hs-purpose-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}


.hs-purpose-meta span {
    color:
        var(--hs-gold);

    font-family:
        var(--hs-mono);

    font-size: 11px;
}


.hs-purpose-card--mission
.hs-purpose-meta span {
    color:
        #2C85B7;
}


.hs-purpose-meta strong {
    font-size: 13px;
}


.hs-purpose-card blockquote {
    position: relative;

    z-index: 3;

    max-width: 650px;

    margin:
        90px
        0
        0;

    font-family:
        var(--hs-display);

    font-size:
        clamp(
            35px,
            4vw,
            50px
        );

    font-weight: 500;

    line-height: 1.12;

    letter-spacing: -.035em;
}


.hs-purpose-symbol {
    position: absolute;

    right: 30px;
    bottom: 24px;

    display: flex;
    align-items: center;

    gap: 12px;

    opacity: .45;
}


.hs-purpose-symbol span {
    font-family:
        var(--hs-display);

    font-size: 60px;
}


.hs-purpose-symbol i {
    width: 70px;
    height: 1px;

    background:
        currentColor;
}


/* ==========================================================
   OFFER
   ========================================================== */

.hs-offer {
    padding:
        130px
        0;

    background:
        var(--hs-paper-warm);
}


.hs-offer-title h2 {
    max-width: 860px;

    margin:
        15px
        0
        0;

    color:
        var(--hs-green-dark);

    font-family:
        var(--hs-display);

    font-size:
        clamp(
            50px,
            6vw,
            74px
        );

    font-weight: 500;

    line-height: .98;

    letter-spacing: -.05em;
}


/* ==========================================================
   OFFER STACK
   ========================================================== */

.hs-offer-stack {
    margin-top: 80px;

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


.hs-offer-item {
    position: relative;

    min-height: 175px;

    display: grid;

    grid-template-columns:
        70px
        1fr
        1fr
        55px;

    align-items: center;

    gap: 30px;

    border-bottom:
        1px solid
        var(--hs-line-dark);

    transition:
        padding
        300ms ease,
        background
        200ms ease;
}


.hs-offer-item:hover {
    padding:
        0
        18px;

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


.hs-offer-number {
    color:
        var(--hs-gold);

    font-family:
        var(--hs-mono);

    font-size: 11px;
}


.hs-offer-name > span {
    color:
        var(--hs-green);

    font-family:
        var(--hs-mono);

    font-size: 9px;
}


.hs-offer-name h3 {
    margin:
        7px
        0
        0;

    color:
        var(--hs-green-dark);

    font-family:
        var(--hs-display);

    font-size:
        clamp(
            29px,
            3vw,
            40px
        );

    font-weight: 500;
}


.hs-offer-item > p {
    max-width: 450px;

    margin: 0;

    color:
        var(--hs-text-soft);

    font-size: 15px;

    line-height: 1.7;
}


.hs-offer-plus {
    width: 45px;
    height: 45px;

    display: grid;
    place-items: center;

    color:
        var(--hs-green);

    border:
        1px solid
        var(--hs-line-dark);

    border-radius:
        50%;

    transition:
        color
        180ms ease,
        background
        180ms ease,
        transform
        300ms ease;
}


.hs-offer-item:hover
.hs-offer-plus {
    color:
        #ffffff;

    background:
        var(--hs-green);

    transform:
        rotate(90deg);
}


.hs-offer-plus svg {
    width: 18px;
    height: 18px;

    fill: none;

    stroke:
        currentColor;

    stroke-width: 1.5;
}


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

.hs-why {
    padding:
        125px
        0
        140px;

    background:
        #ffffff;
}


.hs-why-header {
    max-width: 850px;
}


.hs-why-header h2 {
    margin:
        15px
        0
        0;

    color:
        var(--hs-green-dark);

    font-family:
        var(--hs-display);

    font-size:
        clamp(
            50px,
            6vw,
            75px
        );

    font-weight: 500;

    line-height: .98;
}


.hs-why-grid {
    display: grid;

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

    gap: 18px;

    margin-top: 70px;
}


.hs-why-card {
    min-height: 380px;

    padding:
        30px;

    border:
        1px solid
        var(--hs-line-dark);

    border-radius:
        24px;

    transition:
        transform
        320ms ease,
        background
        220ms ease;
}


.hs-why-card:hover {
    background:
        var(--hs-green-soft);

    transform:
        translateY(-7px);
}


.hs-why-card > span {
    color:
        var(--hs-gold);

    font-family:
        var(--hs-mono);

    font-size: 10px;
}


.hs-why-icon {
    width: 63px;
    height: 63px;

    display: grid;
    place-items: center;

    margin-top: 80px;

    color:
        var(--hs-green);

    border:
        1px solid
        #C8D1CB;

    border-radius:
        50%;
}


.hs-why-icon svg {
    width: 26px;
    height: 26px;

    fill: none;

    stroke:
        currentColor;

    stroke-width: 1.4;
}


.hs-why-card h3 {
    margin:
        25px
        0
        0;

    color:
        var(--hs-green-dark);

    font-family:
        var(--hs-display);

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

    line-height: 1.1;
}


.hs-why-card p {
    margin:
        15px
        0
        0;

    color:
        var(--hs-text-soft);

    font-size: 15px;
}


/* ==========================================================
   COMMUNITY
   ========================================================== */

.hs-community {
    padding:
        125px
        0
        140px;

    background:
        var(--hs-green-soft);
}


.hs-community-layout {
    display: grid;

    grid-template-columns:
        .8fr
        1.2fr;

    align-items: center;

    gap: 90px;
}


.hs-community-copy h2 {
    max-width: 650px;

    margin:
        15px
        0
        0;

    color:
        var(--hs-green-dark);

    font-family:
        var(--hs-display);

    font-size:
        clamp(
            48px,
            6vw,
            73px
        );

    font-weight: 500;

    line-height: .99;
}


/* ==========================================================
   AUDIENCE FIELD
   ========================================================== */

.hs-audience-field {
    position: relative;

    min-height: 570px;

    border:
        1px solid
        #C8D1CB;

    border-radius:
        50%;

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


.hs-audience-field::before {
    content: "";

    position: absolute;

    inset: 72px;

    border:
        1px dashed
        #C8D1CB;

    border-radius:
        50%;

    animation:
        hsAudienceSpin
        35s
        linear
        infinite;
}


@keyframes hsAudienceSpin {

    to {
        transform:
            rotate(360deg);
    }

}


.hs-audience-line {
    position: absolute;

    left: 50%;
    top: 8%;
    bottom: 8%;

    width: 1px;

    background:
        #C8D1CB;

    transform:
        rotate(48deg);
}


.hs-audience {
    position: absolute;

    z-index: 4;

    width: 205px;

    padding:
        17px;

    background:
        #ffffff;

    border:
        1px solid
        #C8D1CB;

    border-radius:
        14px;

    box-shadow:
        0
        12px
        30px
        rgba(28,54,37,.06);

    animation:
        hsAudienceFloat
        7s
        ease-in-out
        infinite;
}


.hs-audience--one {
    left: 3%;
    top: 19%;
}


.hs-audience--two {
    right: 2%;
    top: 30%;

    animation-delay:
        1.2s;
}


.hs-audience--three {
    left: 18%;
    bottom: 11%;

    animation-delay:
        2.3s;
}


@keyframes hsAudienceFloat {

    50% {
        transform:
            translateY(-9px);
    }

}


.hs-audience > span {
    color:
        var(--hs-gold);

    font-family:
        var(--hs-mono);

    font-size: 9px;
}


.hs-audience strong {
    display: block;

    margin-top: 7px;

    color:
        var(--hs-green-dark);

    font-size: 13px;

    line-height: 1.4;
}


.hs-audience-center {
    position: absolute;

    z-index: 6;

    left: 50%;
    top: 50%;

    width: 125px;
    height: 125px;

    display: grid;
    place-items: center;

    align-content: center;

    color:
        #ffffff;

    background:
        var(--hs-green);

    border-radius:
        50%;

    transform:
        translate(-50%, -50%);
}


.hs-audience-center span {
    font-family:
        var(--hs-display);

    font-size: 35px;
}


.hs-audience-center strong {
    font-family:
        var(--hs-mono);

    font-size: 8px;
}


/* ==========================================================
   FACILITIES
   ========================================================== */

.hs-facilities {
    padding:
        130px
        0;

    background:
        var(--hs-paper);
}


.hs-facilities-title h2 {
    max-width: 880px;

    margin:
        15px
        0
        0;

    color:
        var(--hs-green-dark);

    font-family:
        var(--hs-display);

    font-size:
        clamp(
            48px,
            6vw,
            73px
        );

    font-weight: 500;

    line-height: 1;
}


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

.hs-facility-grid {
    display: grid;

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

    gap: 1px;

    margin-top: 75px;

    background:
        var(--hs-line-dark);

    border:
        1px solid
        var(--hs-line-dark);
}


.hs-facility {
    min-height: 260px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding:
        30px;

    background:
        #ffffff;

    transition:
        background
        220ms ease;
}


.hs-facility:hover {
    background:
        var(--hs-green-soft);
}


.hs-facility span {
    color:
        var(--hs-gold);

    font-family:
        var(--hs-mono);

    font-size: 10px;
}


.hs-facility strong {
    max-width: 470px;

    color:
        var(--hs-green-dark);

    font-family:
        var(--hs-display);

    font-size:
        clamp(
            30px,
            3vw,
            42px
        );

    font-weight: 500;

    line-height: 1.12;
}


/* ==========================================================
   CLOSING
   ========================================================== */

.hs-closing {
    padding:
        110px
        0
        130px;

    background:
        #ffffff;
}


.hs-closing-card {
    position: relative;

    min-height: 710px;

    padding:
        30px
        36px
        45px;

    overflow: hidden;

    background:
        var(--hs-paper-warm);

    border-radius:
        30px;
}


.hs-closing-meta {
    display: flex;
    align-items: center;

    gap: 12px;

    font-family:
        var(--hs-mono);

    font-size: 9px;

    color:
        var(--hs-muted);
}


.hs-closing-meta i {
    height: 1px;

    flex: 1;

    background:
        var(--hs-line-dark);
}


.hs-closing-main {
    position: relative;

    z-index: 5;

    display: grid;

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

    gap: 45px;

    padding:
        100px
        25px
        60px;
}


.hs-closing-number {
    color:
        var(--hs-gold);

    font-family:
        var(--hs-mono);

    font-size: 12px;
}


.hs-closing-copy h2 {
    max-width: 890px;

    margin:
        15px
        0
        0;

    color:
        var(--hs-green-dark);

    font-family:
        var(--hs-display);

    font-size:
        clamp(
            59px,
            8vw,
            100px
        );

    font-weight: 500;

    line-height: .9;

    letter-spacing: -.06em;
}


.hs-closing-copy h2 span {
    display: block;

    color:
        var(--hs-clay);
}


/* ==========================================================
   CONTACT LEDGER
   ========================================================== */

.hs-contact-ledger {
    max-width: 850px;

    display: grid;

    grid-template-columns:
        1.4fr
        1fr
        1fr;

    gap: 0;

    margin-top: 55px;

    border-top:
        1px solid
        var(--hs-line-dark);

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


.hs-contact-ledger > div {
    min-height: 150px;

    padding:
        24px
        24px
        24px
        0;

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


.hs-contact-ledger > div:not(:first-child) {
    padding-left: 24px;
}


.hs-contact-ledger > div:last-child {
    border-right: 0;
}


.hs-contact-ledger span {
    color:
        var(--hs-gold);

    font-family:
        var(--hs-mono);

    font-size: 9px;
}


.hs-contact-ledger strong {
    display: block;

    margin-top: 9px;

    color:
        var(--hs-green-dark);

    font-size: 14px;
}


.hs-contact-ledger p {
    margin:
        7px
        0
        0;

    color:
        var(--hs-text-soft);

    font-size: 13px;

    line-height: 1.5;
}


/* ==========================================================
   CLOSING BUTTON
   ========================================================== */

.hs-closing-copy button {
    min-height: 49px;

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

    gap: 9px;

    margin-top: 33px;

    padding:
        0
        18px;

    color:
        #ffffff;

    background:
        var(--hs-green);

    border: 0;

    border-radius:
        999px;

    cursor: pointer;

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


.hs-closing-copy button:hover {
    background:
        var(--hs-green-hover);
}


.hs-closing-copy svg {
    width: 15px;
    height: 15px;

    fill: none;

    stroke:
        currentColor;

    stroke-width: 1.8;
}


/* ==========================================================
   CLOSING ORBIT
   ========================================================== */

.hs-closing-orbit {
    position: absolute;

    right: -80px;
    bottom: -90px;

    width: 390px;
    height: 390px;

    display: grid;
    place-items: center;

    color:
        var(--hs-green);

    border:
        1px solid
        rgba(20,129,84,.25);

    border-radius:
        50%;
}


.hs-closing-orbit::before {
    content: "";

    position: absolute;

    inset: 55px;

    border:
        1px dashed
        rgba(20,129,84,.22);

    border-radius:
        50%;

    animation:
        hsOrbitRotate
        22s
        linear
        infinite;
}


.hs-closing-orbit span {
    font-family:
        var(--hs-display);

    font-size: 60px;
}


.hs-closing-orbit i {
    position: absolute;

    width: 13px;
    height: 13px;

    background:
        var(--hs-green);

    border-radius:
        50%;
}


.hs-closing-orbit i:nth-of-type(1) {
    left: 49%;
    top: -6px;
}


.hs-closing-orbit i:nth-of-type(2) {
    right: 20px;
    top: 30%;
}


.hs-closing-orbit i:nth-of-type(3) {
    left: 12%;
    bottom: 22%;
}


/* ==========================================================
   REVEAL
   ========================================================== */

.hs-page.js-ready
.hs-reveal {
    opacity: 0;

    transform:
        translateY(20px);

    transition:
        opacity
        760ms ease,
        transform
        760ms
        cubic-bezier(
            .16,
            1,
            .3,
            1
        );
}


.hs-page.js-ready
.hs-reveal.is-visible {
    opacity: 1;

    transform: none;
}


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

@media (max-width: 980px) {

    .hs-hero-intro,
    .hs-editorial-grid,
    .hs-facilities-heading {
        grid-template-columns: 1fr;

        gap: 35px;
    }


    .hs-momentum-stage {
        grid-template-columns:
            120px
            1fr;

        gap: 35px;
    }


    .hs-momentum-orbit {
        display: none;
    }


    .hs-momentum-nav {
        left: 120px;
        right: 0;
    }


    .hs-purpose-grid,
    .hs-why-grid {
        grid-template-columns: 1fr;
    }


    .hs-purpose-card {
        min-height: 420px;
    }


    .hs-community-layout {
        grid-template-columns: 1fr;

        gap: 55px;
    }


    .hs-audience-field {
        max-width: 700px;
    }

}


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

@media (max-width: 720px) {

    .hs-shell {
        width:
            min(
                100% - 30px,
                1260px
            );
    }


    .hs-top-meta {
        display: none;
    }


    .hs-hero-intro {
        padding:
            65px
            0
            70px;
    }


    .hs-hero-copy h1 {
        font-size:
            clamp(
                56px,
                17vw,
                80px
            );
    }


    .hs-hero-bottom {
        grid-template-columns: 1fr;

        gap: 25px;
    }


    .hs-hero-bottom p {
        font-size: 16px;
    }


    /* MOMENTUM */

    .hs-momentum {
        padding:
            25px
            0;
    }


    .hs-momentum-stage {
        min-height: 660px;

        grid-template-columns: 1fr;

        align-content: center;

        padding-bottom: 145px;
    }


    .hs-momentum-number {
        font-size: 75px;
    }


    .hs-momentum-content h2 {
        font-size: 41px;
    }


    .hs-momentum-nav {
        left: 0;
        right: 0;
        bottom: 25px;

        display: flex;

        overflow-x: auto;

        scrollbar-width: none;
    }


    .hs-momentum-nav::-webkit-scrollbar {
        display: none;
    }


    .hs-momentum-nav button {
        min-width: 175px;

        flex:
            0
            0
            175px;
    }


    .hs-momentum-foot {
        overflow-x: auto;
    }


    .hs-intro,
    .hs-purpose,
    .hs-offer,
    .hs-why,
    .hs-community,
    .hs-facilities,
    .hs-closing {
        padding:
            82px
            0;
    }


    .hs-intro-heading h2,
    .hs-purpose-heading h2,
    .hs-offer-title h2,
    .hs-why-header h2,
    .hs-community-copy h2,
    .hs-facilities-title h2 {
        font-size: 41px;
    }


    .hs-intro-copy {
        font-size: 16px;
    }


    .hs-purpose-card {
        min-height: 390px;
    }


    .hs-purpose-card blockquote {
        margin-top: 60px;

        font-size: 34px;
    }


    .hs-offer-item {
        grid-template-columns:
            45px
            1fr
            46px;

        gap: 16px;

        padding:
            25px
            0;
    }


    .hs-offer-item > p {
        grid-column:
            2;

        margin-top: -5px;
    }


    .hs-offer-item:hover {
        padding:
            25px
            10px;
    }


    .hs-audience-field {
        min-height: 520px;

        border-radius:
            30px;
    }


    .hs-audience-field::before {
        inset: 45px;
    }


    .hs-audience {
        width: 165px;
    }


    .hs-audience--one {
        left: 5%;
        top: 8%;
    }


    .hs-audience--two {
        right: 4%;
        top: 29%;
    }


    .hs-audience--three {
        left: 7%;
        bottom: 8%;
    }


    .hs-facility-grid {
        grid-template-columns: 1fr;
    }


    .hs-facility {
        min-height: 200px;
    }


    .hs-closing-card {
        min-height: 800px;

        padding:
            24px;
    }


    .hs-closing-main {
        grid-template-columns: 1fr;

        padding:
            70px
            0
            60px;
    }


    .hs-closing-copy h2 {
        font-size:
            clamp(
                52px,
                15vw,
                75px
            );
    }


    .hs-contact-ledger {
        grid-template-columns: 1fr;
    }


    .hs-contact-ledger > div {
        min-height: auto;

        padding:
            20px
            0;

        border-right: 0;

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


    .hs-contact-ledger > div:not(:first-child) {
        padding-left: 0;
    }


    .hs-contact-ledger > div:last-child {
        border-bottom: 0;
    }


    .hs-closing-orbit {
        width: 250px;
        height: 250px;

        right: -70px;
        bottom: -60px;
    }

}


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

@media (max-width: 460px) {

    .hs-shell {
        width:
            min(
                100% - 22px,
                1260px
            );
    }


    .hs-brand small {
        display: none;
    }


    .hs-momentum-stage {
        min-height: 700px;
    }


    .hs-momentum-nav button {
        min-width: 155px;

        flex-basis: 155px;
    }


    .hs-audience {
        width: 145px;

        padding: 13px;
    }


    .hs-audience strong {
        font-size: 11px;
    }


    .hs-audience-center {
        width: 100px;
        height: 100px;
    }

}


/* ==========================================================
   SCROLL SAFETY
   ========================================================== */

html,
body {
    height: auto !important;

    min-height: 100% !important;

    overflow-y: auto !important;

    overflow-x: hidden;
}


.hs-page {
    height: auto !important;

    max-height: none !important;

    overflow: visible !important;
}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .hs-page *,
    .hs-page *::before,
    .hs-page *::after {
        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;
    }


    .hs-page.js-ready
    .hs-reveal {
        opacity: 1;

        transform: none;
    }

}

/* ==========================================================
   HUSAC — HU IDENTITY REFINEMENT
   ========================================================== */

/*
 * The old decorative orbit language is intentionally removed.
 * HUSAC now reads as an institutional university page rather
 * than a startup/product landing page.
 */
.hs-page .hs-hero::before,
.hs-page .hs-momentum-orbit,
.hs-page .hs-closing-orbit {
    display: none !important;
}


/* ==========================================================
   HORMUUD UNIVERSITY — HUSAC DARK MODE 2026
   ========================================================== */

html[data-theme="dark"] .hs-page {
    --hs-green: #66C59B;
    --hs-green-hover: #86D5B2;
    --hs-green-dark: #86D5B2;
    --hs-green-soft: #183A2C;

    --hs-blue: #72BCE3;
    --hs-blue-dark: #97D1EC;
    --hs-blue-soft: #173442;

    --hs-paper: #0E1511;
    --hs-paper-warm: #18241D;
    --hs-white: #151E18;

    --hs-text: #EDF3EF;
    --hs-text-soft: #A9B5AE;
    --hs-muted: #7F8B84;

    --hs-line: #2D3A32;
    --hs-line-dark: #3A493F;

    --hs-clay: var(--hs-blue-dark);
    --hs-gold: var(--hs-blue);
    --hs-lilac: var(--hs-blue-soft);

    color: var(--hs-text) !important;
    background: var(--hs-paper) !important;
}


/* HERO */

html[data-theme="dark"] .hs-page .hs-hero {
    background: #0E1511 !important;
}

html[data-theme="dark"] .hs-page .hs-topbar,
html[data-theme="dark"] .hs-page .hs-hero-bottom {
    border-color: var(--hs-line-dark) !important;
}

html[data-theme="dark"] .hs-page .hs-brand-mark {
    color: #0E1511 !important;
    background: var(--hs-green) !important;
}

html[data-theme="dark"] .hs-page .hs-brand strong,
html[data-theme="dark"] .hs-page .hs-hero-copy h1,
html[data-theme="dark"] .hs-page .hs-intro-heading h2,
html[data-theme="dark"] .hs-page .hs-purpose-heading h2,
html[data-theme="dark"] .hs-page .hs-offer-title h2,
html[data-theme="dark"] .hs-page .hs-why-header h2,
html[data-theme="dark"] .hs-page .hs-community-copy h2,
html[data-theme="dark"] .hs-page .hs-facilities-title h2,
html[data-theme="dark"] .hs-page .hs-closing-copy h2 {
    color: var(--hs-green-dark) !important;
}

html[data-theme="dark"] .hs-page .hs-brand small,
html[data-theme="dark"] .hs-page .hs-top-meta,
html[data-theme="dark"] .hs-page .hs-section-index p,
html[data-theme="dark"] .hs-page .hs-hero-bottom {
    color: var(--hs-muted) !important;
}

html[data-theme="dark"] .hs-page .hs-section-index > span {
    color: var(--hs-blue) !important;
}

html[data-theme="dark"] .hs-page .hs-kicker,
html[data-theme="dark"] .hs-page .hs-primary-action {
    color: var(--hs-green) !important;
}

html[data-theme="dark"] .hs-page .hs-primary-action > span {
    color: #0E1511 !important;
    background: var(--hs-green) !important;
}


/* MOMENTUM */

html[data-theme="dark"] .hs-page .hs-momentum {
    color: #F4F7F5 !important;
    background: #0B3322 !important;
}

html[data-theme="dark"] .hs-page .hs-momentum-stage {
    border-color: rgba(134,213,178,.22) !important;
}

html[data-theme="dark"] .hs-page .hs-momentum-head,
html[data-theme="dark"] .hs-page .hs-momentum-foot {
    border-color: rgba(237,243,239,.15) !important;
}

html[data-theme="dark"] .hs-page .hs-momentum-number,
html[data-theme="dark"] .hs-page .hs-momentum-type {
    color: #97D1EC !important;
}

html[data-theme="dark"] .hs-page .hs-momentum-content p,
html[data-theme="dark"] .hs-page .hs-word-stream,
html[data-theme="dark"] .hs-page .hs-momentum-foot {
    color: rgba(244,247,245,.66) !important;
}

html[data-theme="dark"] .hs-page .hs-momentum-nav button {
    color: rgba(244,247,245,.72) !important;
}

html[data-theme="dark"] .hs-page .hs-momentum-nav button:hover,
html[data-theme="dark"] .hs-page .hs-momentum-nav button.is-active {
    color: #FFFFFF !important;
    background: rgba(134,213,178,.10) !important;
}


/* INTRO / PURPOSE */

html[data-theme="dark"] .hs-page .hs-intro {
    background: #0E1511 !important;
}

html[data-theme="dark"] .hs-page .hs-intro-copy p,
html[data-theme="dark"] .hs-page .hs-purpose-card p,
html[data-theme="dark"] .hs-page .hs-why-card p,
html[data-theme="dark"] .hs-page .hs-community-copy p,
html[data-theme="dark"] .hs-page .hs-facility p,
html[data-theme="dark"] .hs-page .hs-closing-copy p {
    color: var(--hs-text-soft) !important;
}

html[data-theme="dark"] .hs-page .hs-purpose {
    background: #151E18 !important;
}

html[data-theme="dark"] .hs-page .hs-purpose-grid,
html[data-theme="dark"] .hs-page .hs-purpose-card {
    border-color: var(--hs-line-dark) !important;
}

html[data-theme="dark"] .hs-page .hs-purpose-card--mission {
    color: #0E1511 !important;
    background: var(--hs-green) !important;
}

html[data-theme="dark"] .hs-page .hs-purpose-card--vision {
    background: var(--hs-blue-soft) !important;
}


/* OFFER */

html[data-theme="dark"] .hs-page .hs-offer {
    background: #18241D !important;
}

html[data-theme="dark"] .hs-page .hs-offer-stack,
html[data-theme="dark"] .hs-page .hs-offer-item {
    border-color: var(--hs-line-dark) !important;
}

html[data-theme="dark"] .hs-page .hs-offer-item:hover {
    background: #151E18 !important;
}

html[data-theme="dark"] .hs-page .hs-offer-number {
    color: var(--hs-blue) !important;
}

html[data-theme="dark"] .hs-page .hs-offer-name {
    color: var(--hs-green-dark) !important;
}

html[data-theme="dark"] .hs-page .hs-offer-plus {
    color: var(--hs-muted) !important;
}


/* WHY */

html[data-theme="dark"] .hs-page .hs-why {
    background: #0E1511 !important;
}

html[data-theme="dark"] .hs-page .hs-why-grid,
html[data-theme="dark"] .hs-page .hs-why-card {
    border-color: var(--hs-line-dark) !important;
}

html[data-theme="dark"] .hs-page .hs-why-card {
    background: #151E18 !important;
}

html[data-theme="dark"] .hs-page .hs-why-card:hover {
    background: var(--hs-green-soft) !important;
}

html[data-theme="dark"] .hs-page .hs-why-icon {
    color: var(--hs-blue) !important;
}


/* COMMUNITY */

html[data-theme="dark"] .hs-page .hs-community {
    background: #183A2C !important;
}

html[data-theme="dark"] .hs-page .hs-audience-field {
    background: rgba(21,30,24,.62) !important;
    border-color: #315944 !important;
}

html[data-theme="dark"] .hs-page .hs-audience-line {
    background: #315944 !important;
}

html[data-theme="dark"] .hs-page .hs-audience {
    color: var(--hs-text) !important;
    background: #151E18 !important;
    border-color: var(--hs-line-dark) !important;
}

html[data-theme="dark"] .hs-page .hs-audience-center {
    color: #0E1511 !important;
    background: var(--hs-green) !important;
}


/* FACILITIES */

html[data-theme="dark"] .hs-page .hs-facilities {
    background: #0E1511 !important;
}

html[data-theme="dark"] .hs-page .hs-facility-grid {
    background: var(--hs-line-dark) !important;
    border-color: var(--hs-line-dark) !important;
}

html[data-theme="dark"] .hs-page .hs-facility {
    background: #151E18 !important;
}

html[data-theme="dark"] .hs-page .hs-facility:hover {
    background: var(--hs-green-soft) !important;
}

html[data-theme="dark"] .hs-page .hs-facility span {
    color: var(--hs-blue) !important;
}

html[data-theme="dark"] .hs-page .hs-facility h3 {
    color: var(--hs-green-dark) !important;
}


/* CLOSING */

html[data-theme="dark"] .hs-page .hs-closing {
    background: #0E1511 !important;
}

html[data-theme="dark"] .hs-page .hs-closing-card {
    background: #18241D !important;
    border-color: var(--hs-line-dark) !important;
}

html[data-theme="dark"] .hs-page .hs-contact-ledger {
    border-color: var(--hs-line-dark) !important;
}

html[data-theme="dark"] .hs-page .hs-contact-ledger span {
    color: var(--hs-muted) !important;
}

html[data-theme="dark"] .hs-page .hs-contact-ledger strong {
    color: var(--hs-green-dark) !important;
}

html[data-theme="dark"] .hs-page .hs-closing-copy button {
    color: #0E1511 !important;
    background: var(--hs-green) !important;
}

html[data-theme="dark"] .hs-page .hs-closing-copy button:hover,
html[data-theme="dark"] .hs-page .hs-closing-copy button:focus-visible {
    background: var(--hs-green-dark) !important;
}


/* THEME TRANSITIONS */

.hs-page,
.hs-page .hs-hero,
.hs-page .hs-momentum,
.hs-page .hs-intro,
.hs-page .hs-purpose,
.hs-page .hs-purpose-card,
.hs-page .hs-offer,
.hs-page .hs-offer-item,
.hs-page .hs-why,
.hs-page .hs-why-card,
.hs-page .hs-community,
.hs-page .hs-audience-field,
.hs-page .hs-audience,
.hs-page .hs-facilities,
.hs-page .hs-facility,
.hs-page .hs-closing,
.hs-page .hs-closing-card {
    transition:
        background-color .24s ease,
        color .24s ease,
        border-color .24s ease;
}

@media (prefers-reduced-motion: reduce) {
    .hs-page,
    .hs-page .hs-hero,
    .hs-page .hs-momentum,
    .hs-page .hs-intro,
    .hs-page .hs-purpose,
    .hs-page .hs-purpose-card,
    .hs-page .hs-offer,
    .hs-page .hs-offer-item,
    .hs-page .hs-why,
    .hs-page .hs-why-card,
    .hs-page .hs-community,
    .hs-page .hs-audience-field,
    .hs-page .hs-audience,
    .hs-page .hs-facilities,
    .hs-page .hs-facility,
    .hs-page .hs-closing,
    .hs-page .hs-closing-card {
        transition: none !important;
    }
}