/* =========================================================
   TAFEL OPERATIONS
   PREMIUM EDITORIAL UI
========================================================= */


:root {

    --cream:
        #f2eee5;

    --cream-dark:
        #e6dfd2;

    --paper:
        #faf8f3;

    --white:
        #ffffff;

    --ink:
        #16262d;

    --ink-soft:
        #27383e;

    --text:
        #303435;

    --muted:
        #777873;

    --line:
        rgba(22, 38, 45, 0.14);

    --accent:
        #b98a62;

    --radius:
        28px;

}


/* =========================================================
   RESET
========================================================= */

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    background:
        var(--cream);

    color:
        var(--text);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    -webkit-font-smoothing:
        antialiased;

}


a {
    color: inherit;
}


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


/* =========================================================
   SHELL
========================================================= */

.site-shell {

    width:
        min(
            1480px,
            calc(100% - 32px)
        );

    margin:
        16px auto;

    background:
        var(--paper);

    min-height:
        calc(100vh - 32px);

    border-radius:
        34px;

    overflow:
        hidden;

    box-shadow:
        0 20px 60px
        rgba(
            18,
            30,
            34,
            0.08
        );

}


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

.site-header {

    height:
        84px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        0 34px;

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

}


.brand {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    text-decoration:
        none;

}


.brand-mark {

    width:
        34px;

    height:
        34px;

    background:
        var(--ink);

    color:
        var(--cream);

    border-radius:
        50%;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    font-family:
        Georgia,
        serif;

    font-size:
        20px;

    font-weight:
        700;

}


.brand-name {

    font-size:
        12px;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;

    font-weight:
        700;

}


.main-nav {

    display:
        flex;

    align-items:
        center;

    gap:
        28px;

}


.main-nav a {

    text-decoration:
        none;

    font-size:
        11px;

    text-transform:
        uppercase;

    letter-spacing:
        0.08em;

    font-weight:
        700;

    color:
        var(--ink-soft);

}


.main-nav a:hover {

    opacity:
        0.6;

}


.nav-button {

    background:
        var(--ink);

    color:
        white !important;

    padding:
        12px 18px;

    border-radius:
        3px;

}


/* =========================================================
   MAIN
========================================================= */

main {

    width:
        100%;

    padding:
        28px;

}


/* =========================================================
   TYPOGRAPHY
========================================================= */

h1,
h2,
h3,
p {

    margin-top:
        0;

}


h1 {

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    color:
        var(--ink);

    font-weight:
        500;

}


h2 {

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    color:
        var(--ink);

    font-weight:
        500;

}


h3 {

    color:
        var(--ink);

}


p {

    line-height:
        1.6;

}


.eyebrow {

    font-size:
        9px;

    letter-spacing:
        0.18em;

    font-weight:
        800;

    color:
        var(--muted);

    text-transform:
        uppercase;

}


.eyebrow.light {

    color:
        rgba(
            255,
            255,
            255,
            0.65
        );

}


.muted {

    color:
        var(--muted);

}


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

.home-hero {

    display:
        grid;

    grid-template-columns:
        1.08fr 0.92fr;

    min-height:
        620px;

    border-radius:
        var(--radius);

    overflow:
        hidden;

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

}


.hero-copy {

    padding:
        76px 60px 44px;

    display:
        flex;

    flex-direction:
        column;

    background:
        #f4efe5;

}


.hero-title {

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

    line-height:
        0.93;

    letter-spacing:
        -0.055em;

    margin:
        46px 0 26px;

    max-width:
        700px;

}


.hero-title em {

    display:
        block;

    color:
        var(--accent);

    font-weight:
        400;

}


.hero-description {

    max-width:
        520px;

    color:
        var(--muted);

    font-size:
        14px;

    line-height:
        1.7;

}


.hero-actions {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        24px;

    margin-top:
        26px;

}


.primary-button {

    background:
        var(--ink);

    color:
        white;

    text-decoration:
        none;

    padding:
        15px 24px;

    border-radius:
        2px;

    font-size:
        10px;

    letter-spacing:
        0.1em;

    text-transform:
        uppercase;

    font-weight:
        800;

}


.text-button {

    text-decoration:
        none;

    font-size:
        10px;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

    font-weight:
        800;

}


.hero-meta {

    margin-top:
        auto;

    display:
        flex;

    justify-content:
        space-between;

    color:
        var(--muted);

    font-size:
        8px;

    letter-spacing:
        0.12em;

}


/* =========================================================
   HERO RIGHT PANEL
========================================================= */

.hero-visual {

    background:
        var(--ink);

    color:
        white;

    padding:
        30px;

    display:
        flex;

    flex-direction:
        column;

    position:
        relative;

    overflow:
        hidden;

}


.hero-visual::before {

    content:
        "";

    position:
        absolute;

    width:
        430px;

    height:
        430px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.08
        );

    border-radius:
        50%;

    right:
        -130px;

    top:
        80px;

}


.hero-visual::after {

    content:
        "";

    position:
        absolute;

    width:
        260px;

    height:
        260px;

    background:
        rgba(
            255,
            255,
            255,
            0.035
        );

    border-radius:
        50%;

    left:
        -80px;

    bottom:
        60px;

}


.hero-visual-top {

    display:
        flex;

    justify-content:
        space-between;

    position:
        relative;

    z-index:
        2;

    font-size:
        8px;

    letter-spacing:
        0.15em;

}


.live-dot {

    color:
        #ccd9c3;

}


.hero-visual-center {

    margin:
        auto 0;

    display:
        grid;

    grid-template-columns:
        120px 1fr;

    align-items:
        end;

    position:
        relative;

    z-index:
        2;

}


.hero-number {

    font-family:
        Georgia,
        serif;

    font-size:
        78px;

    color:
        rgba(
            255,
            255,
            255,
            0.16
        );

}


.hero-visual h2 {

    color:
        white;

    font-size:
        clamp(
            34px,
            4vw,
            62px
        );

    line-height:
        1;

    max-width:
        430px;

    margin:
        14px 0;

}


.hero-visual p {

    color:
        rgba(
            255,
            255,
            255,
            0.58
        );

    max-width:
        360px;

    font-size:
        13px;

}


.hero-visual-bottom {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        20px;

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

    padding-top:
        18px;

    position:
        relative;

    z-index:
        2;

}


.hero-visual-bottom small {

    display:
        block;

    color:
        rgba(
            255,
            255,
            255,
            0.5
        );

    font-size:
        8px;

    letter-spacing:
        0.12em;

    margin-bottom:
        6px;

}


.hero-visual-bottom strong {

    font-size:
        12px;

}


/* =========================================================
   SECTION HEADER
========================================================= */

.section-heading {

    margin:
        84px 0 30px;

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    align-items:
        end;

    gap:
        30px;

}


.section-heading h2 {

    font-size:
        48px;

    margin:
        10px 0 0;

}


.section-heading p {

    color:
        var(--muted);

    max-width:
        440px;

    justify-self:
        end;

}


/* =========================================================
   MODULE CARDS
========================================================= */

.module-grid {

    display:
        grid;

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

    gap:
        14px;

    margin-bottom:
        60px;

}


.editorial-card {

    min-height:
        330px;

    background:
        #ebe5d9;

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

    border-radius:
        22px;

    padding:
        26px;

    display:
        flex;

    flex-direction:
        column;

    text-decoration:
        none;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;

}


a.editorial-card:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 18px 30px
        rgba(
            24,
            34,
            37,
            0.08
        );

}


.editorial-card.featured {

    background:
        var(--ink);

    color:
        white;

}


.editorial-card.featured h3 {

    color:
        white;

}


.editorial-card.featured p {

    color:
        rgba(
            255,
            255,
            255,
            0.6
        );

}


.editorial-card.featured .eyebrow {

    color:
        rgba(
            255,
            255,
            255,
            0.55
        );

}


.card-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

}


.card-number {

    font-family:
        Georgia,
        serif;

    font-size:
        18px;

}


.status-badge,
.coming-badge {

    padding:
        7px 10px;

    font-size:
        8px;

    letter-spacing:
        0.12em;

    font-weight:
        800;

    border:
        1px solid
        currentColor;

    border-radius:
        20px;

}


.card-body {

    margin:
        auto 0;

}


.card-body h3 {

    font-family:
        Georgia,
        serif;

    font-size:
        35px;

    margin:
        12px 0;

    font-weight:
        500;

}


.card-body p {

    color:
        var(--muted);

    font-size:
        13px;

}


.card-link {

    padding-top:
        16px;

    border-top:
        1px solid
        currentColor;

    font-size:
        9px;

    letter-spacing:
        0.1em;

    text-transform:
        uppercase;

    font-weight:
        800;

}


.editorial-card.disabled {

    opacity:
        0.68;

}


/* =========================================================
   EXISTING GENERIC GRID / CARDS
========================================================= */

.grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                240px,
                1fr
            )
        );

    gap:
        14px;

    margin:
        22px 0;

}


.card,
.module {

    background:
        var(--white);

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

    border-radius:
        20px;

    padding:
        24px;

}


.module {

    min-height:
        150px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;

    text-decoration:
        none;

}


.module.active {

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

}


.module span {

    color:
        var(--muted);

}


.module em {

    margin-top:
        auto;

    font-size:
        9px;

    font-style:
        normal;

    font-weight:
        800;

    letter-spacing:
        0.12em;

}


/* =========================================================
   FORMS
========================================================= */

label {

    display:
        block;

    margin:
        16px 0 7px;

    font-size:
        12px;

    font-weight:
        700;

}


input,
textarea,
select {

    width:
        100%;

    padding:
        14px 15px;

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

    border-radius:
        10px;

    background:
        white;

    color:
        var(--text);

}


input:focus,
textarea:focus,
select:focus {

    outline:
        none;

    border-color:
        var(--ink);

}


button {

    border:
        none;

    background:
        var(--ink);

    color:
        white;

    padding:
        13px 18px;

    border-radius:
        4px;

    font-weight:
        800;

    cursor:
        pointer;

}


/* =========================================================
   LOGIN
========================================================= */

.login {

    max-width:
        440px;

    margin:
        10vh auto;

    background:
        var(--white);

    padding:
        38px;

    border-radius:
        24px;

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

}


/* =========================================================
   FLASH
========================================================= */

.flash {

    background:
        #efe2c6;

    border:
        1px solid
        #d8c39a;

    color:
        #56482f;

    border-radius:
        10px;

    padding:
        14px 16px;

    margin-bottom:
        20px;

}


/* =========================================================
   GAAP
========================================================= */

.chips {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;

    margin:
        18px 0;

}


.chips button,
.feedback button {

    background:
        #e8e1d5;

    color:
        var(--ink);

}


.bubble {

    padding:
        18px 20px;

    margin:
        12px 0;

    border-radius:
        18px;

}


.bubble.me {

    background:
        var(--ink);

    color:
        white;

    margin-left:
        15%;

}


.bubble.ai {

    background:
        white;

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

    margin-right:
        5%;

}


.answer {

    line-height:
        1.6;

}


details {

    margin-top:
        14px;

    padding-top:
        12px;

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

}


pre {

    font-family:
        inherit;

    white-space:
        pre-wrap;

}


#ask {

    position:
        sticky;

    bottom:
        0;

    padding:
        14px 0;

    background:
        var(--paper);

}


/* =========================================================
   ADMIN
========================================================= */

.stats {

    display:
        grid;

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

    gap:
        12px;

}


.stats div {

    background:
        white;

    padding:
        24px;

    border-radius:
        20px;

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

}


.stats b {

    display:
        block;

    font-family:
        Georgia,
        serif;

    font-size:
        34px;

}


.stats span {

    color:
        var(--muted);

}


.adminlinks {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        10px;

    margin:
        20px 0;

}


.adminlinks a {

    background:
        var(--ink);

    color:
        white;

    padding:
        11px 15px;

    text-decoration:
        none;

}


/* =========================================================
   CALENDAR
========================================================= */

.calendar-page {

    width:
        100%;

}


.calendar-heading {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-start;

    gap:
        24px;

    margin:
        14px 0 26px;

}


.calendar-heading h1 {

    font-size:
        58px;

    margin:
        10px 0;

}


.calendar-add-button {

    background:
        var(--ink);

    color:
        white;

    text-decoration:
        none;

    padding:
        14px 20px;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

}


.calendar-toolbar {

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    gap:
        24px;

    margin:
        30px 0 18px;

}


.calendar-toolbar h2 {

    min-width:
        230px;

    text-align:
        center;

    margin:
        0;

    font-size:
        30px;

}


.calendar-nav {

    width:
        42px;

    height:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        var(--ink);

    color:
        white;

    text-decoration:
        none;

}


.calendar-scroll {

    overflow-x:
        auto;

}


.calendar-grid {

    display:
        grid;

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

}


.calendar-days {

    background:
        var(--ink);

    color:
        white;

    border-radius:
        16px 16px 0 0;

}


.calendar-days div {

    padding:
        14px;

    text-align:
        center;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        0.1em;

}


.calendar-cell {

    min-height:
        145px;

    padding:
        9px;

    background:
        white;

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

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

}


.calendar-cell:nth-child(
    7n + 1
) {

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

}


.calendar-date {

    font-family:
        Georgia,
        serif;

    font-weight:
        700;

    margin-bottom:
        8px;

}


.other-month {

    background:
        #ece7de;

    color:
        #aaa49b;

}


.calendar-event {

    display:
        block;

    background:
        #ece7dd;

    border-left:
        3px solid
        var(--ink);

    padding:
        8px;

    margin-bottom:
        6px;

    border-radius:
        6px;

    text-decoration:
        none;

    color:
        inherit;

}


.calendar-event-title {

    font-weight:
        800;

    font-size:
        11px;

}


.calendar-event-time,
.calendar-event-category,
.calendar-event-location {

    color:
        var(--muted);

    font-size:
        9px;

    margin-top:
        3px;

}


.category-function {
    border-left-color: #627d98;
}

.category-stock_take {
    border-left-color: #bd8a52;
}

.category-inspection {
    border-left-color: #9e554f;
}

.category-training {
    border-left-color: #75688c;
}

.category-meeting {
    border-left-color: #557d78;
}

.category-maintenance {
    border-left-color: #a56d45;
}

.category-deadline {
    border-left-color: #8f4c5d;
}


/* =========================================================
   CALENDAR FORMS
========================================================= */

.calendar-form-page,
.event-detail-page {

    max-width:
        900px;

    margin:
        20px auto;

}


.calendar-event-form {

    background:
        white;

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

    padding:
        30px;

    border-radius:
        24px;

}


.calendar-form-row {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        18px;

}


.calendar-check {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

}


.calendar-check input,
.restaurant-option input {

    width:
        auto;

}


.calendar-divider {

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

    margin:
        26px 0;

}


.restaurant-selection {

    display:
        grid;

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

    gap:
        10px;

}


.restaurant-option {

    display:
        flex;

    gap:
        9px;

    align-items:
        center;

    padding:
        12px;

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

    border-radius:
        10px;

}


.calendar-form-actions {

    display:
        flex;

    gap:
        10px;

    margin-top:
        24px;

}


.calendar-cancel-button {

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

    padding:
        13px 18px;

    text-decoration:
        none;

}


/* =========================================================
   EVENT DETAILS
========================================================= */

.back-link {

    text-decoration:
        none;

    font-size:
        11px;

    font-weight:
        800;

}


.event-detail-header {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;

    margin:
        30px 0;

}


.event-detail-header h1 {

    font-size:
        52px;

}


.event-actions {

    display:
        flex;

    gap:
        10px;

}


.event-edit-button {

    background:
        var(--ink);

    color:
        white;

    padding:
        12px 18px;

    text-decoration:
        none;

}


.event-delete-button {

    background:
        white;

    color:
        #8c3f3f;

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

}


.event-detail-grid {

    display:
        grid;

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

    gap:
        12px;

}


.event-detail-card,
.event-notes-card {

    padding:
        22px;

    background:
        white;

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

    border-radius:
        18px;

}


.event-detail-label {

    display:
        block;

    margin-bottom:
        8px;

    color:
        var(--muted);

    font-size:
        9px;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;

}


/* =========================================================
   HR
========================================================= */

.hr-page {

    max-width:
        1180px;

    margin:
        0 auto;

}


.hr-page > h1 {

    font-size:
        64px;

    margin:
        12px 0;

}


.hr-page section.card {

    padding:
        34px;

    background:
        #f7f3eb;

}


.hr-page section.card > h2 {

    font-size:
        40px;

}


.hr-page .card {

    box-shadow:
        none;

}


/* =========================================================
   FOOTER
========================================================= */

footer {

    padding:
        24px 34px;

    display:
        flex;

    justify-content:
        space-between;

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

    color:
        var(--muted);

    font-size:
        8px;

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;

}


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

@media (
    max-width: 1000px
) {

    .home-hero {

        grid-template-columns:
            1fr;

    }


    .hero-visual {

        min-height:
            430px;

    }


    .module-grid {

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

    }


    .calendar-grid {

        min-width:
            900px;

    }

}


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

@media (
    max-width: 720px
) {

    .site-shell {

        width:
            100%;

        margin:
            0;

        border-radius:
            0;

    }


    .site-header {

        height:
            auto;

        padding:
            18px;

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    .main-nav {

        width:
            100%;

        overflow-x:
            auto;

        gap:
            18px;

        padding-bottom:
            5px;

    }


    main {

        padding:
            16px;

    }


    .home-hero {

        min-height:
            0;

    }


    .hero-copy {

        padding:
            46px 28px 32px;

    }


    .hero-title {

        font-size:
            52px;

        margin-top:
            36px;

    }


    .hero-meta {

        margin-top:
            50px;

    }


    .hero-visual {

        min-height:
            430px;

    }


    .hero-visual-center {

        grid-template-columns:
            70px 1fr;

    }


    .hero-number {

        font-size:
            48px;

    }


    .section-heading {

        grid-template-columns:
            1fr;

        margin-top:
            54px;

    }


    .section-heading p {

        justify-self:
            start;

    }


    .section-heading h2 {

        font-size:
            40px;

    }


    .module-grid {

        grid-template-columns:
            1fr;

    }


    .editorial-card {

        min-height:
            290px;

    }


    .calendar-heading {

        flex-direction:
            column;

    }


    .calendar-heading h1 {

        font-size:
            44px;

    }


    .calendar-grid {

        min-width:
            820px;

    }


    .calendar-form-row,
    .restaurant-selection,
    .event-detail-grid {

        grid-template-columns:
            1fr;

    }


    .event-detail-header {

        flex-direction:
            column;

    }


    .event-actions {

        flex-direction:
            column;

    }


    .stats {

        grid-template-columns:
            1fr 1fr;

    }


    footer {

        flex-direction:
            column;

        gap:
            8px;

    }

}
/* =========================================================
   HR - FINISHED MODULE
========================================================= */

.hr-hero {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    border: 1px solid var(--line);
    border-radius: 28px;
    overflow: hidden;
    margin-bottom: 18px;
}

.hr-hero > div:first-child {
    padding: 58px;
    background: #f3eee4;
}

.hr-hero h1 {
    font-size: clamp(48px, 7vw, 82px);
    line-height: 0.95;
    letter-spacing: -0.045em;
    margin: 26px 0;
}

.hr-hero h1 em {
    display: block;
    color: var(--accent);
    font-weight: 400;
}

.hr-hero > div:first-child p {
    max-width: 580px;
    color: var(--muted);
}

.hr-hero-panel {
    background: var(--ink);
    color: white;
    padding: 44px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.hr-hero-panel strong {
    font-family: Georgia, serif;
    font-weight: 400;
    font-size: 40px;
    line-height: 1;
    margin: 20px 0;
}

.hr-hero-panel span {
    color: rgba(255,255,255,0.6);
    line-height: 1.6;
    font-size: 13px;
}


/* TOOLS */

.hr-tool-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 18px 0 70px;
}

.hr-tool-card {
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 22px;
    min-height: 170px;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    background: #ebe5d9;
}

.hr-tool-card > span {
    font-family: Georgia, serif;
    color: var(--muted);
}

.hr-tool-card strong {
    font-family: Georgia, serif;
    font-size: 25px;
    margin-top: auto;
    color: var(--ink);
}

.hr-tool-card p {
    color: var(--muted);
    font-size: 12px;
    margin-bottom: 0;
}


/* HR SECTION */

.hr-section {
    padding: 38px 0;
    border-top: 1px solid var(--line);
    margin-top: 24px;
}

.hr-section-heading {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    gap: 30px;
    margin-bottom: 28px;
}

.hr-section-heading h2 {
    font-size: 44px;
    margin: 10px 0 0;
}

.hr-section-heading > p {
    color: var(--muted);
    max-width: 450px;
    justify-self: end;
}


/* SEARCH */

.policy-search-box {
    max-width: 700px;
}

.policy-search-box input {
    font-size: 18px;
    border-radius: 14px;
    padding: 18px;
}

.policy-search-results {
    margin-top: 18px;
    display: grid;
    gap: 10px;
}

.policy-result-card {
    background: white;
    border: 1px solid var(--line);
    padding: 18px;
    border-radius: 14px;
}

.policy-result-card span {
    display: block;
    color: var(--muted);
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.policy-result-card strong {
    color: var(--ink);
}

.policy-result-card p {
    margin: 6px 0 0;
    color: var(--muted);
}

.policy-no-result {
    background: #eee5d5;
    padding: 16px;
    border-radius: 12px;
}


/* ACTION GUIDE */

.action-guide {
    background: #eee8dd;
    margin-left: -28px;
    margin-right: -28px;
    padding-left: 28px;
    padding-right: 28px;
}

.action-form {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 18px;
}

.action-result {
    margin-top: 28px;
    background: white;
    border-radius: 22px;
    border: 1px solid var(--line);
    overflow: hidden;
}

.action-result-header {
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--ink);
    color: white;
}

.action-result-header h3 {
    color: white;
    margin: 7px 0 0;
    font-family: Georgia, serif;
    font-size: 30px;
}

.action-result-header span {
    border: 1px solid rgba(255,255,255,0.4);
    padding: 7px 11px;
    border-radius: 20px;
    font-size: 9px;
    letter-spacing: 0.12em;
}

.action-result-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--line);
}

.action-result-grid > div {
    background: white;
    padding: 24px;
}

.result-label {
    display: block;
    font-size: 9px;
    color: var(--muted);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 800;
    margin-bottom: 10px;
}

#actionProcess {
    padding: 24px;
}

#actionProcess ol {
    line-height: 1.8;
    color: var(--text);
}

.hr-policy-alert {
    background: #eee4d2;
    border-top: 1px solid var(--line);
    padding: 18px 24px;
}


/* CORRECTIVE TABLE */

.hr-table-scroll {
    overflow-x: auto;
}

.hr-policy-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 720px;
    background: white;
    border: 1px solid var(--line);
}

.hr-policy-table th {
    background: var(--ink);
    color: white;
    padding: 15px;
    text-align: left;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hr-policy-table td {
    padding: 18px 15px;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

.hr-policy-table td strong,
.hr-policy-table td span {
    display: block;
}

.hr-policy-table td span {
    color: var(--muted);
    font-size: 12px;
    margin-top: 3px;
}

.hr-abbreviations {
    color: var(--muted);
    font-size: 11px;
    margin-top: 12px;
}


/* CONDUCT */

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

.conduct-card {
    min-height: 230px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 22px;
}

.conduct-card > span {
    font-family: Georgia, serif;
    color: var(--accent);
}

.conduct-card h3 {
    font-family: Georgia, serif;
    font-size: 25px;
    font-weight: 500;
    margin: 30px 0 10px;
}

.conduct-card p {
    color: var(--muted);
    font-size: 13px;
}


/* PROCESS BANNER */

.hr-process-banner {
    background: var(--ink);
    color: white;
    border-radius: 24px;
    padding: 38px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin: 50px 0;
}

.hr-process-banner h2 {
    color: white;
    font-size: 38px;
}

.hr-process-banner p {
    color: rgba(255,255,255,0.62);
}


/* GRIEVANCE */

.grievance-flow {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.grievance-flow > div {
    background: #ebe5d9;
    padding: 20px;
    border-radius: 16px;
}

.grievance-flow span {
    display: block;
    font-family: Georgia, serif;
    color: var(--accent);
    margin-bottom: 28px;
}

.grievance-flow strong {
    display: block;
    color: var(--ink);
}

.grievance-flow p {
    color: var(--muted);
    font-size: 12px;
}


/* MOBILE */

@media(max-width:900px) {

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

    .hr-hero-panel {
        min-height: 320px;
    }

    .hr-tool-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .grievance-flow {
        grid-template-columns: 1fr 1fr;
    }

}


@media(max-width:700px) {

    .hr-hero > div:first-child {
        padding: 36px 24px;
    }

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

    .hr-section-heading,
    .action-form,
    .action-result-grid,
    .conduct-grid,
    .hr-process-banner,
    .grievance-flow {
        grid-template-columns: 1fr;
    }

    .hr-section-heading > p {
        justify-self: start;
    }

    .action-guide {
        margin-left: -16px;
        margin-right: -16px;
        padding-left: 16px;
        padding-right: 16px;
    }

}