.hr-page {
    --hu-green:#148154;
    --hu-green-dark:#0a3420;
    --hu-green-soft:#e8f3ee;

    --hu-blue:#2c85b7;
    --hu-blue-dark:#236e98;
    --hu-blue-soft:#eaf4f9;

    --ink:#242a26;
    --soft:#616963;
    --muted:#7b847e;

    --white:#ffffff;
    --paper:#fafbf9;
    --cream:#f5f7f4;

    --line:#d9e0dc;
    --line-dark:#c3cec7;

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

    width:100%;

    color:var(--ink);
    background:var(--paper);

    font-family:var(--body);

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

    overflow:visible;
}


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


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

    margin-inline:auto;
}


.hr-kicker {
    color:var(--hu-green);

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

    letter-spacing:.11em;

    text-transform:uppercase;
}


/* HERO */

.hr-hero {
    position:relative;

    overflow:hidden;

    background:#fff;

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


.hr-hero::before {
    content:"PEOPLE";

    position:absolute;

    left:-20px;
    bottom:180px;

    color:
        rgba(20,129,84,.025);

    font-family:var(--display);

    font-size:clamp(
        120px,
        18vw,
        270px
    );

    font-weight:700;

    pointer-events:none;
}


.hr-topbar {
    min-height:80px;

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

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


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

    gap:12px;
}


.hr-brand-mark {
    width:41px;
    height:41px;

    display:grid;
    place-items:center;

    color:#fff;
    background:var(--hu-green);

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


.hr-brand strong {
    display:block;

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

    font-size:13px;
}


.hr-brand small {
    color:var(--muted);
    font-size:12px;
}


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

    gap:12px;
}


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

    font-family:var(--mono);
    font-size:11px;
}


.hr-top-meta i {
    width:48px;
    height:1px;

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


/* HERO GRID */

.hr-hero-grid {
    min-height:720px;

    display:grid;

    grid-template-columns:
        minmax(360px, 470px)
        1fr;

    align-items:center;

    gap:90px;

    padding:
        75px
        0
        65px;
}


/* PORTRAIT */

.hr-portrait-number {
    margin-bottom:12px;

    color:var(--hu-blue);

    font-family:var(--mono);
    font-size:11px;
}


.hr-portrait-frame {
    position:relative;

    min-height:540px;

    overflow:hidden;

    background:var(--hu-green-soft);

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


.hr-portrait-frame::before {
    content:"";

    position:absolute;

    z-index:4;

    left:0;
    top:0;

    width:9px;
    height:100%;

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


.hr-portrait-frame::after {
    content:"";

    position:absolute;

    z-index:4;

    right:0;
    bottom:0;

    width:9px;
    height:42%;

    background:var(--hu-blue);
}


.hr-portrait-frame img {
    position:absolute;

    left:50%;
    top:50%;

    width:106%;
    height:106%;

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

    transform:
        translate(-50%,-50%)
        scale(1.015);

    transition:
        transform .18s ease-out;
}


.hr-portrait-caption {
    position:absolute;

    z-index:6;

    left:24px;
    right:24px;
    bottom:20px;

    min-height:60px;

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

    gap:18px;

    padding:
        0
        15px;

    color:#fff;

    background:
        rgba(15,104,67,.88);

    backdrop-filter:blur(7px);
}


.hr-portrait-caption span,
.hr-portrait-caption strong {
    font-family:var(--mono);
    font-size:10px;
}


/* HERO COPY */

.hr-hero-copy h1 {
    max-width:760px;

    margin:
        17px
        0
        0;

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

    font-family:var(--display);

    font-size:clamp(
        70px,
        9vw,
        118px
    );

    font-weight:500;

    line-height:.87;

    letter-spacing:-.065em;
}


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

    color:var(--hu-blue);
}


.hr-hero-copy > p {
    max-width:590px;

    margin-top:28px;

    color:var(--soft);

    font-size:18px;
}


.hr-person-line {
    display:flex;
    align-items:center;

    gap:15px;

    margin-top:40px;

    padding:
        20px
        0;

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

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


.hr-person-line strong {
    color:var(--hu-green-dark);
}


.hr-person-line span {
    color:var(--hu-blue-dark);

    font-size:13px;
}


.hr-person-line i {
    height:1px;
    flex:1;

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


/* TALENT WEAVE */

.hr-weave {
    position:relative;

    padding:
        28px
        30px
        40px;

    background:var(--cream);

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


.hr-weave-head {
    display:flex;
    justify-content:space-between;

    gap:20px;

    padding-bottom:20px;

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


.hr-weave-head span,
.hr-weave-head strong {
    font-family:var(--mono);
    font-size:10px;
}


.hr-weave-head span {
    color:var(--muted);
}


.hr-weave-head strong {
    color:var(--hu-blue);
}


.hr-weave-grid {
    display:grid;

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

    gap:22px;

    margin-top:35px;
}


.hr-thread {
    position:relative;

    min-height:160px;

    padding:18px;

    background:#fff;

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


.hr-thread span {
    color:var(--hu-blue);

    font-family:var(--mono);
    font-size:10px;
}


.hr-thread strong {
    display:block;

    margin-top:55px;

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

    font-family:var(--display);

    font-size:29px;
    font-weight:500;
}


.hr-thread-line {
    position:absolute;

    left:18px;
    right:18px;
    bottom:18px;

    height:3px;

    background:
        linear-gradient(
            90deg,
            var(--hu-green),
            var(--hu-blue)
        );
}


.hr-weave-marker {
    position:absolute;

    left:12.5%;
    bottom:14px;

    width:38px;
    height:38px;

    display:grid;
    place-items:center;

    color:#fff;

    background:var(--hu-green);

    border:
        4px solid
        var(--cream);

    font-family:var(--display);
    font-size:11px;

    animation:
        hrWeaveTravel
        10s
        ease-in-out
        infinite;
}


@keyframes hrWeaveTravel {

    0%,
    10% {
        left:12.5%;
    }

    33% {
        left:37.5%;
    }

    58% {
        left:62.5%;
        background:var(--hu-blue);
    }

    82%,
    100% {
        left:87.5%;
        background:var(--hu-green);
    }

}


/* HERO BOTTOM */

.hr-hero-bottom {
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:40px;

    padding:
        38px
        0
        48px;
}


.hr-hero-bottom p {
    margin:0;

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

    font-family:var(--display);

    font-size:28px;
}


.hr-hero-bottom button {
    display:flex;
    align-items:center;

    gap:12px;

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

    background:transparent;

    border:0;

    cursor:pointer;

    font-weight:700;
}


.hr-hero-bottom button span {
    width:46px;
    height:46px;

    display:grid;
    place-items:center;

    color:#fff;

    background:var(--hu-green);

    border-radius:50%;
}


/* MESSAGE */

.hr-message {
    padding:
        135px
        0
        150px;
}


.hr-message-heading {
    max-width:900px;

    margin-left:auto;
}


.hr-message-heading > span {
    color:var(--hu-blue);

    font-family:var(--mono);
    font-size:11px;
}


.hr-message-heading h2 {
    margin:
        15px
        0
        0;

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

    font-family:var(--display);

    font-size:clamp(
        52px,
        6vw,
        78px
    );

    font-weight:500;

    line-height:.97;
}


.hr-message-heading h2 span {
    display:block;

    color:var(--hu-blue);
}


/* STORY */

.hr-story {
    max-width:1040px;

    display:grid;

    grid-template-columns:
        210px
        1fr;

    gap:60px;

    margin:
        85px
        0
        0
        auto;

    padding-top:35px;

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


.hr-story aside span {
    color:var(--hu-blue);

    font-family:var(--mono);
    font-size:11px;
}


.hr-story aside strong {
    display:block;

    margin-top:10px;

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

    font-family:var(--display);

    font-size:26px;
    font-weight:500;
}


.hr-story p {
    margin:0;

    color:var(--ink);

    font-family:var(--display);

    font-size:clamp(
        23px,
        2.4vw,
        29px
    );

    line-height:1.62;
}


.hr-dropcap::first-letter {
    float:left;

    margin:
        6px
        10px
        0
        0;

    color:var(--hu-green);

    font-size:82px;
    line-height:.76;
}


/* PEOPLE STATEMENT */

.hr-people-statement {
    max-width:1040px;

    margin:
        70px
        0
        0
        auto;

    padding:
        45px;

    background:
        linear-gradient(
            90deg,
            var(--hu-green-soft),
            #fff
        );

    border-left:
        6px solid
        var(--hu-green);
}


.hr-people-statement > span {
    color:var(--hu-blue);

    font-family:var(--mono);
    font-size:10px;
}


.hr-people-statement h3 {
    margin:
        10px
        0
        0;

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

    font-family:var(--display);

    font-size:clamp(
        44px,
        6vw,
        70px
    );

    font-weight:500;
}


.hr-people-statement h3 strong {
    color:var(--hu-blue);
}


/* PRINCIPLES */

.hr-principles {
    max-width:1040px;

    display:grid;

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

    gap:1px;

    margin:
        60px
        0
        0
        auto;

    background:var(--line-dark);

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


.hr-principles article {
    min-height:170px;

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

    padding:20px;

    background:#fff;
}


.hr-principles span {
    color:var(--hu-blue);

    font-family:var(--mono);
    font-size:10px;
}


.hr-principles strong {
    color:var(--hu-green-dark);

    font-family:var(--display);

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

    line-height:1.12;
}


/* PRACTICE */

.hr-practice-board {
    max-width:1040px;

    display:grid;

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

    gap:12px;

    margin:
        65px
        0
        0
        auto;

    padding:28px;

    background:var(--hu-blue-soft);

    border-top:
        4px solid
        var(--hu-blue);
}


.hr-practice-board > div {
    min-height:130px;

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

    padding:18px;

    background:#fff;

    border:
        1px solid
        #c5d9e4;
}


.hr-practice-board span {
    color:var(--hu-blue);

    font-family:var(--mono);
    font-size:10px;
}


.hr-practice-board strong {
    color:var(--hu-green-dark);

    font-family:var(--display);

    font-size:22px;
    font-weight:500;
}


/* FUTURE BAND */

.hr-future-band {
    max-width:1040px;

    display:flex;
    align-items:center;

    gap:12px;

    margin:
        65px
        0
        0
        auto;

    padding:
        23px
        0;

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

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


.hr-future-band span {
    flex:none;

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

    font-family:var(--mono);
    font-size:10px;
}


.hr-future-band span:nth-of-type(2) {
    color:var(--hu-blue);
}


.hr-future-band i {
    height:1px;

    flex:1;

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


/* SIGNATURE */

.hr-signature {
    max-width:1040px;

    display:grid;

    grid-template-columns:
        90px
        1fr
        auto;

    align-items:center;

    gap:25px;

    margin:
        75px
        0
        0
        auto;

    padding:28px;

    background:var(--hu-green-soft);

    border-top:
        4px solid
        var(--hu-green);
}


.hr-signature-photo {
    width:80px;
    height:80px;

    overflow:hidden;
}


.hr-signature-photo img {
    width:100%;
    height:100%;

    object-fit:cover;
}


.hr-signature span {
    color:var(--hu-blue);

    font-family:var(--mono);
    font-size:10px;
}


.hr-signature h3 {
    margin:
        6px
        0
        0;

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

    font-family:var(--display);

    font-size:28px;
    font-weight:500;
}


.hr-signature strong {
    color:var(--hu-green);

    font-size:13px;
}


.hr-signature a {
    color:var(--hu-blue-dark);

    padding:
        10px
        13px;

    background:#fff;

    border:
        1px solid
        #bfd5e2;

    text-decoration:none;

    font-size:13px;
}


/* CLOSE */

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

    background:#fff;
}


.hr-closing-grid {
    display:grid;

    grid-template-columns:
        300px
        1fr;

    align-items:center;

    gap:80px;

    padding:
        70px;

    background:var(--cream);

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


.hr-closing-word {
    color:var(--hu-green);

    font-family:var(--display);

    font-size:84px;

    line-height:.85;

    writing-mode:vertical-rl;

    transform:rotate(180deg);
}


.hr-closing h2 {
    margin:
        15px
        0
        0;

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

    font-family:var(--display);

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

    font-weight:500;

    line-height:.96;
}


.hr-closing h2 span {
    display:block;

    color:var(--hu-blue);
}


.hr-closing button {
    margin-top:30px;

    padding:
        13px
        18px;

    color:#fff;

    background:var(--hu-green);

    border:0;

    cursor:pointer;

    font-weight:700;
}


/* REVEALS */

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

    transform:translateY(20px);

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


.hr-page.js-ready
.hr-reveal.is-visible {
    opacity:1;
    transform:none;
}


/* RESPONSIVE */

@media (max-width: 950px) {

    .hr-hero-grid {
        grid-template-columns:
            360px
            1fr;

        gap:50px;
    }

    .hr-principles {
        grid-template-columns:
            1fr
            1fr;
    }

}


@media (max-width: 720px) {

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

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

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

        gap:35px;

        padding:
            55px
            0;
    }

    .hr-portrait-frame {
        min-height:470px;
    }

    .hr-hero-copy h1 {
        font-size:
            clamp(
                55px,
                16vw,
                78px
            );
    }

    .hr-weave-grid {
        grid-template-columns:
            1fr
            1fr;
    }

    .hr-weave-marker {
        display:none;
    }

    .hr-hero-bottom {
        align-items:flex-start;
        flex-direction:column;
    }

    .hr-message,
    .hr-closing {
        padding:
            82px
            0;
    }

    .hr-message-heading {
        margin-left:0;
    }

    .hr-message-heading h2 {
        font-size:42px;
    }

    .hr-story {
        grid-template-columns:1fr;

        gap:20px;

        margin-left:0;
    }

    .hr-story p {
        font-size:21px;
    }

    .hr-people-statement,
    .hr-principles,
    .hr-practice-board,
    .hr-future-band,
    .hr-signature {
        margin-left:0;
    }

    .hr-principles {
        grid-template-columns:1fr;
    }

    .hr-practice-board {
        grid-template-columns:1fr;
    }

    .hr-signature {
        grid-template-columns:1fr;
    }

    .hr-closing-grid {
        grid-template-columns:1fr;

        gap:35px;

        padding:
            50px
            28px;
    }

    .hr-closing-word {
        font-size:58px;

        writing-mode:initial;

        transform:none;
    }

}


html,
body {
    height:auto !important;
    min-height:100% !important;

    overflow-y:auto !important;
    overflow-x:hidden;
}


.hr-page {
    height:auto !important;
    max-height:none !important;

    overflow:visible !important;
}


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

    .hr-page *,
    .hr-page *::before,
    .hr-page *::after {
        animation:none !important;
        transition:none !important;
    }

    .hr-page.js-ready
    .hr-reveal {
        opacity:1;
        transform:none;
    }

}

/* ==========================================================
   HORMUUD UNIVERSITY — HRM IDENTITY + DARK MODE 2026

   Page-specific identity correction and complete dark mode.
   Keep this section at the END of hrm.css.

   This page already used HU green/blue, but several neutral
   values, literal whites, decorative gradients and dark-mode
   states were still outside the canonical university system.
   ========================================================== */


/* ==========================================================
   LIGHT MODE — CANONICAL HU IDENTITY
   ========================================================== */

.hr-page {
    --hu-green: #148154;
    --hu-green-dark: #0F6843;
    --hu-green-soft: #E8F3EE;

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

    --ink: #202522;
    --soft: #606862;
    --muted: #7B857E;

    --white: #FFFFFF;
    --paper: #F8FAF9;
    --cream: #F1F5F2;

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

    color: var(--ink);
    background: var(--paper);
}


/* ---------- Light-mode identity cleanup ---------- */

.hr-page .hr-hero {
    background: var(--white);
    border-bottom-color: var(--line);
}

.hr-page .hr-hero::before {
    color: rgba(20, 129, 84, .028);
}

.hr-page .hr-thread,
.hr-page .hr-principles article,
.hr-page .hr-practice-board > div,
.hr-page .hr-signature a,
.hr-page .hr-closing {
    background: var(--white);
}


/* Keep the portrait natural; only correct its frame system. */

.hr-page .hr-portrait-frame {
    background: var(--hu-green-soft);
    border-color: var(--line-dark);
}

.hr-page .hr-portrait-caption {
    background: rgba(15, 104, 67, .92);
}


/* Remove decorative green/blue gradients from the main identity.
   Green remains primary; blue is used as a structural secondary. */

.hr-page .hr-thread-line {
    background: var(--hu-green);
}

.hr-page .hr-people-statement {
    background: var(--hu-green-soft);
    border-left-color: var(--hu-blue);
}


/* Tighten old literal border colors to the HU system. */

.hr-page .hr-practice-board > div {
    border-color: #C8DCE6;
}

.hr-page .hr-signature a {
    border-color: #C5D9E4;
}


/* ==========================================================
   DARK MODE — CANONICAL HU IDENTITY
   ========================================================== */

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

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

    --ink: #EDF3EF;
    --soft: #A9B5AE;
    --muted: #7F8B84;

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

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

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


/* ==========================================================
   DARK — HERO
   ========================================================== */

html[data-theme="dark"] .hr-page .hr-hero {
    background: #0E1511 !important;
    border-bottom-color: var(--line) !important;
}

html[data-theme="dark"] .hr-page .hr-hero::before {
    color: rgba(102, 197, 155, .035) !important;
}

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

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

html[data-theme="dark"] .hr-page .hr-brand strong {
    color: var(--hu-green-dark) !important;
}

html[data-theme="dark"] .hr-page .hr-brand small,
html[data-theme="dark"] .hr-page .hr-top-meta span {
    color: var(--muted) !important;
}

html[data-theme="dark"] .hr-page .hr-top-meta i {
    background: var(--line-dark) !important;
}


/* Portrait */

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

html[data-theme="dark"] .hr-page .hr-portrait-frame {
    background: #183A2C !important;
    border-color: var(--line-dark) !important;

    box-shadow:
        0 22px 55px
        rgba(0, 0, 0, .20);
}

html[data-theme="dark"] .hr-page .hr-portrait-frame::before {
    background: var(--hu-green) !important;
}

html[data-theme="dark"] .hr-page .hr-portrait-frame::after {
    background: var(--hu-blue) !important;
}

html[data-theme="dark"] .hr-page .hr-portrait-frame img {
    filter: none !important;
}

html[data-theme="dark"] .hr-page .hr-portrait-caption {
    color: #FFFFFF !important;
    background: rgba(15, 104, 67, .92) !important;
}


/* Hero copy */

html[data-theme="dark"] .hr-page .hr-kicker {
    color: var(--hu-green) !important;
}

html[data-theme="dark"] .hr-page .hr-hero-copy h1 {
    color: var(--hu-green-dark) !important;
}

html[data-theme="dark"] .hr-page .hr-hero-copy h1 span {
    color: var(--hu-blue) !important;
}

html[data-theme="dark"] .hr-page .hr-hero-copy > p {
    color: var(--soft) !important;
}

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

html[data-theme="dark"] .hr-page .hr-person-line strong {
    color: var(--hu-green-dark) !important;
}

html[data-theme="dark"] .hr-page .hr-person-line span {
    color: var(--hu-blue-dark) !important;
}

html[data-theme="dark"] .hr-page .hr-person-line i {
    background: var(--line-dark) !important;
}


/* ==========================================================
   DARK — HUMAN RESOURCE JOURNEY
   ========================================================== */

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

html[data-theme="dark"] .hr-page .hr-weave-head {
    border-bottom-color: var(--line) !important;
}

html[data-theme="dark"] .hr-page .hr-weave-head span {
    color: var(--muted) !important;
}

html[data-theme="dark"] .hr-page .hr-weave-head strong {
    color: var(--hu-blue) !important;
}

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

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

html[data-theme="dark"] .hr-page .hr-thread strong {
    color: var(--hu-green-dark) !important;
}

html[data-theme="dark"] .hr-page .hr-thread-line {
    background: var(--hu-green) !important;
}

html[data-theme="dark"] .hr-page .hr-weave-marker {
    color: #0E1511 !important;
    background: var(--hu-green) !important;
    border-color: #18241D !important;
}


/* ==========================================================
   DARK — HERO BOTTOM
   ========================================================== */

html[data-theme="dark"] .hr-page .hr-hero-bottom p,
html[data-theme="dark"] .hr-page .hr-hero-bottom button {
    color: var(--hu-green-dark) !important;
}

html[data-theme="dark"] .hr-page .hr-hero-bottom button span {
    color: #0E1511 !important;
    background: var(--hu-green) !important;
}


/* ==========================================================
   DARK — MESSAGE
   ========================================================== */

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

html[data-theme="dark"] .hr-page .hr-message-heading > span,
html[data-theme="dark"] .hr-page .hr-story aside span {
    color: var(--hu-blue) !important;
}

html[data-theme="dark"] .hr-page .hr-message-heading h2,
html[data-theme="dark"] .hr-page .hr-story aside strong {
    color: var(--hu-green-dark) !important;
}

html[data-theme="dark"] .hr-page .hr-message-heading h2 span {
    color: var(--hu-blue) !important;
}

html[data-theme="dark"] .hr-page .hr-story {
    border-top-color: var(--line-dark) !important;
}

html[data-theme="dark"] .hr-page .hr-story p {
    color: var(--ink) !important;
}

html[data-theme="dark"] .hr-page .hr-story p strong {
    color: var(--hu-green-dark) !important;
}

html[data-theme="dark"] .hr-page .hr-dropcap::first-letter {
    color: var(--hu-green) !important;
}


/* ==========================================================
   DARK — PEOPLE STATEMENT
   ========================================================== */

html[data-theme="dark"] .hr-page .hr-people-statement {
    background: #183A2C !important;
    border-left-color: var(--hu-blue) !important;
}

html[data-theme="dark"] .hr-page .hr-people-statement > span {
    color: var(--hu-blue) !important;
}

html[data-theme="dark"] .hr-page .hr-people-statement h3 {
    color: var(--hu-green-dark) !important;
}

html[data-theme="dark"] .hr-page .hr-people-statement h3 strong {
    color: var(--hu-blue) !important;
}


/* ==========================================================
   DARK — PEOPLE PRINCIPLES
   ========================================================== */

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

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

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

html[data-theme="dark"] .hr-page .hr-principles strong {
    color: var(--hu-green-dark) !important;
}


/* ==========================================================
   DARK — HR PRACTICE BOARD
   ========================================================== */

html[data-theme="dark"] .hr-page .hr-practice-board {
    background: var(--hu-blue-soft) !important;
    border-top-color: var(--hu-blue) !important;
}

html[data-theme="dark"] .hr-page .hr-practice-board > div {
    background: #151E18 !important;
    border-color: #315466 !important;
}

html[data-theme="dark"] .hr-page .hr-practice-board span {
    color: var(--hu-blue) !important;
}

html[data-theme="dark"] .hr-page .hr-practice-board strong {
    color: var(--hu-green-dark) !important;
}


/* ==========================================================
   DARK — FUTURE BAND
   ========================================================== */

html[data-theme="dark"] .hr-page .hr-future-band {
    border-color: var(--line-dark) !important;
}

html[data-theme="dark"] .hr-page .hr-future-band span {
    color: var(--hu-green-dark) !important;
}

html[data-theme="dark"] .hr-page .hr-future-band span:nth-of-type(2) {
    color: var(--hu-blue) !important;
}

html[data-theme="dark"] .hr-page .hr-future-band i {
    background: var(--line-dark) !important;
}


/* ==========================================================
   DARK — SIGNATURE
   ========================================================== */

html[data-theme="dark"] .hr-page .hr-signature {
    background: var(--hu-green-soft) !important;
    border-top-color: var(--hu-green) !important;
}

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

html[data-theme="dark"] .hr-page .hr-signature-photo img {
    filter: none !important;
}

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

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

html[data-theme="dark"] .hr-page .hr-signature strong {
    color: var(--hu-green) !important;
}

html[data-theme="dark"] .hr-page .hr-signature a {
    color: var(--hu-blue-dark) !important;
    background: #151E18 !important;
    border-color: #315466 !important;
}


/* ==========================================================
   DARK — CLOSING
   ========================================================== */

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

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

html[data-theme="dark"] .hr-page .hr-closing-word {
    color: var(--hu-green) !important;
}

html[data-theme="dark"] .hr-page .hr-closing h2 {
    color: var(--hu-green-dark) !important;
}

html[data-theme="dark"] .hr-page .hr-closing h2 span {
    color: var(--hu-blue) !important;
}

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

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


/* ==========================================================
   THEME TRANSITIONS
   ========================================================== */

.hr-page,
.hr-page .hr-hero,
.hr-page .hr-portrait-frame,
.hr-page .hr-weave,
.hr-page .hr-thread,
.hr-page .hr-message,
.hr-page .hr-people-statement,
.hr-page .hr-principles article,
.hr-page .hr-practice-board,
.hr-page .hr-practice-board > div,
.hr-page .hr-signature,
.hr-page .hr-signature a,
.hr-page .hr-closing,
.hr-page .hr-closing-grid {
    transition:
        background-color .24s ease,
        color .24s ease,
        border-color .24s ease;
}


/* ==========================================================
   MOBILE DARK MODE
   ========================================================== */

@media (max-width: 720px) {

    html[data-theme="dark"] .hr-page .hr-principles {
        background: var(--line-dark) !important;
    }

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

}


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

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

    .hr-page,
    .hr-page .hr-hero,
    .hr-page .hr-portrait-frame,
    .hr-page .hr-weave,
    .hr-page .hr-thread,
    .hr-page .hr-message,
    .hr-page .hr-people-statement,
    .hr-page .hr-principles article,
    .hr-page .hr-practice-board,
    .hr-page .hr-practice-board > div,
    .hr-page .hr-signature,
    .hr-page .hr-signature a,
    .hr-page .hr-closing,
    .hr-page .hr-closing-grid {
        transition: none !important;
    }

}