/* =========================================================
   IR WORX WEBSITE
   CLEAN COMPLETE STYLE SHEET
   ========================================================= */


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

   *,
   *::before,
   *::after {
       box-sizing: border-box;
       margin: 0;
       padding: 0;
   }
   
   
   /* =========================================================
      ROOT VARIABLES
      ========================================================= */
   
   :root {
   
       --brand: #a8cf45;
       --brand-dark: #7fa52e;
       --brand-hover: #badb69;
       --brand-soft: #eef6dc;
   
       --ink: #1f2a22;
       --ink-soft: #526057;
   
       --dark: #172119;
       --dark-2: #243128;
   
       --surface: #ffffff;
       --surface-soft: #f8faf5;
       --page: #f5f7f3;
   
       --border: #dce4d7;
   
       --radius: 14px;
   
       --shadow-sm:
           0 4px 14px rgba(24, 39, 26, 0.08);
   
       --shadow-md:
           0 14px 36px rgba(24, 39, 26, 0.14);
   
       --max-w: 1160px;
   }
   
   
   /* =========================================================
      GLOBAL
      ========================================================= */
   
   html {
       scroll-behavior: smooth;
       scroll-padding-top: 82px;
   }
   
   
   body {
   
       min-height: 100vh;
   
       overflow-x: hidden;
   
       font-family:
           -apple-system,
           BlinkMacSystemFont,
           "Segoe UI",
           Roboto,
           Arial,
           sans-serif;
   
       line-height: 1.65;
   
       color: var(--ink);
   
       background: var(--page);
   }
   
   
   body.menu-open {
       overflow: hidden;
   }
   
   
   a {
       color: var(--brand-dark);
       text-decoration: none;
   }
   
   
   img,
   svg {
       display: block;
       max-width: 100%;
   }
   
   
   button,
   input,
   textarea,
   select {
       font: inherit;
   }
   
   
   button {
       cursor: pointer;
   }
   
   
   .container {
   
       width:
           min(
               calc(100% - 32px),
               var(--max-w)
           );
   
       margin-inline: auto;
   }
   /* =========================================================
   IR WORX SITE HEADER & NAVIGATION
   SINGLE SOURCE OF TRUTH
========================================================= */

.site-header {

    position: sticky;

    top: 0;

    z-index: 9999;

    width: 100%;

    background: rgba(255,255,255,.98);

    border-bottom: 5px solid #a8cf45;

    box-shadow:
        0 8px 24px rgba(0,0,0,.16);

}


.header-inner {

    width: 100%;

    min-height: 76px;

    padding: 0 30px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    box-sizing: border-box;

}



/* =========================================================
   LOGO
========================================================= */

.logo {

    display: flex;

    align-items: center;

    flex-shrink: 0;

}


.logo img {

    display: block;

    width: 180px;

    height: auto;

    padding: 10px;

}



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

.main-nav {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 5px;

    margin-left: auto;

}


.main-nav > a {

    display: flex;

    align-items: center;

    min-height: 42px;

    padding: 9px 13px;

    border-radius: 8px;

    color: #333;

    font-size: 14px;

    font-weight: 500;

    line-height: 1.2;

    white-space: nowrap;

    text-decoration: none;

    transition:
        color .2s ease,
        background .2s ease;

}


.main-nav > a:hover,
.main-nav > a:focus-visible,
.main-nav > a.active {

    color: #7fa52e;

    background:
        rgba(168,207,69,.10);

    outline: none;

}



/* =========================================================
   DROPDOWN CONTAINER
========================================================= */

.nav-dropdown {

    position: relative;

    display: flex;

    align-items: center;

    flex-shrink: 0;

}



/* =========================================================
   DROPDOWN BUTTON
========================================================= */

.nav-dropdown-toggle {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    min-height: 42px;

    margin: 0;

    padding: 9px 13px;

    border: 0;

    border-radius: 8px;

    background: transparent;

    color: #444;

    font-family: inherit;

    font-size: 14px;

    font-weight: 600;

    line-height: 1.2;

    white-space: nowrap;

    cursor: pointer;

    appearance: none;

    -webkit-appearance: none;

    transition:
        color .2s ease,
        background .2s ease;

}


.nav-dropdown-toggle:hover,
.nav-dropdown-toggle:focus-visible,
.nav-dropdown-toggle.active {

    color: #7fa52e;

    background:
        rgba(168,207,69,.10);

    outline: none;

}



/* =========================================================
   DROPDOWN ARROW
========================================================= */

.dropdown-arrow {

    display: inline-block;

    flex: 0 0 auto;

    font-size: 9px;

    line-height: 1;

    pointer-events: none;

    transition:
        transform .2s ease;

}



/* =========================================================
   DESKTOP DROPDOWNS
========================================================= */

@media (min-width: 981px) {

    .nav-dropdown-menu {

        position: absolute;

        top: calc(100% + 1px);

        left: 50%;

        z-index: 10001;

        width: 240px;

        padding: 8px;

        border: 1px solid #dce4d7;

        border-top: 4px solid #a8cf45;

        border-radius:
            0 0 10px 10px;

        background: #fff;

        box-shadow:
            0 12px 30px rgba(0,0,0,.16);

        opacity: 0;

        visibility: hidden;

        pointer-events: none;

        transform:
            translate(-50%, 6px);

        transition:
            opacity .18s ease,
            visibility .18s ease,
            transform .18s ease;

    }


    .nav-dropdown:hover >
    .nav-dropdown-menu,

    .nav-dropdown:focus-within >
    .nav-dropdown-menu,

    .nav-dropdown.open >
    .nav-dropdown-menu {

        opacity: 1;

        visibility: visible;

        pointer-events: auto;

        transform:
            translate(-50%, 0);

    }


    .nav-dropdown:hover
    .dropdown-arrow,

    .nav-dropdown:focus-within
    .dropdown-arrow,

    .nav-dropdown.open
    .dropdown-arrow {

        transform:
            rotate(180deg);

    }


    .nav-dropdown-menu a {

        display: block;

        width: 100%;

        padding: 11px 13px;

        border-radius: 7px;

        color: #444;

        background: transparent;

        font-size: 14px;

        font-weight: 600;

        line-height: 1.35;

        white-space: nowrap;

        text-align: left;

        text-decoration: none;

        box-sizing: border-box;

        transition:
            background .15s ease,
            color .15s ease;

    }


    .nav-dropdown-menu a:hover,
    .nav-dropdown-menu a:focus-visible,
    .nav-dropdown-menu a.active {

        background: #eef6dc;

        color: #7fa52e;

        outline: none;

    }

}



/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.menu-toggle {

    display: none;

    width: 44px;

    height: 44px;

    flex: 0 0 44px;

    align-items: center;

    justify-content: center;

    margin-left: auto;

    padding: 0;

    border:
        1px solid rgba(0,0,0,.15);

    border-radius: 9px;

    background: #fff;

    color: #333;

    cursor: pointer;

    position: relative;

    z-index: 10005;

    pointer-events: auto;

    touch-action: manipulation;

    appearance: none;

    -webkit-appearance: none;

}


.menu-toggle:hover,
.menu-toggle:focus-visible {

    border-color: #a8cf45;

    color: #7fa52e;

    background: #eef6dc;

    outline: none;

}


.menu-toggle svg {

    display: block;

    width: 24px;

    height: 24px;

    pointer-events: none;

}



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

@media (max-width: 980px) {

    .header-inner {

        min-height: 70px;

        padding:
            0 14px;

    }


    /*
    ---------------------------------------------------------
    HAMBURGER
    ---------------------------------------------------------
    */

    .menu-toggle {

        display: flex !important;

    }


    /*
    ---------------------------------------------------------
    MOBILE MENU
    ---------------------------------------------------------
    */

    #mainNav {

        position: fixed !important;

        top: 75px !important;

        left: 10px !important;

        right: 10px !important;

        width: auto !important;

        height: auto !important;

        max-height:
            calc(100vh - 88px) !important;

        display: none !important;

        flex-direction: column !important;

        align-items: stretch !important;

        justify-content: flex-start !important;

        gap: 2px !important;

        margin: 0 !important;

        padding: 10px !important;

        overflow-x: hidden !important;

        overflow-y: auto !important;

        background: #1c281f !important;

        border:
            1px solid rgba(255,255,255,.18) !important;

        border-radius: 12px !important;

        box-shadow:
            0 18px 45px rgba(0,0,0,.35) !important;

        opacity: 1 !important;

        visibility: visible !important;

        transform: none !important;

        pointer-events: auto !important;

        z-index: 10000 !important;

        box-sizing: border-box !important;

    }


    /*
    ---------------------------------------------------------
    OPEN MENU
    ---------------------------------------------------------
    */

    #mainNav.is-open {

        display: flex !important;

    }


    /*
    ---------------------------------------------------------
    NORMAL MOBILE LINKS
    ---------------------------------------------------------
    */

    #mainNav > a {

        display: flex !important;

        width: 100% !important;

        min-height: 44px !important;

        align-items: center !important;

        justify-content: flex-start !important;

        padding:
            11px 14px !important;

        margin: 0 !important;

        box-sizing: border-box !important;

        border-radius: 8px !important;

        color: #fff !important;

        background: transparent !important;

        font-size: 15px !important;

        font-weight: 700 !important;

        line-height: 1.3 !important;

        text-decoration: none !important;

        pointer-events: auto !important;

    }


    #mainNav > a:hover,
    #mainNav > a:focus-visible,
    #mainNav > a.active {

        color: #a8cf45 !important;

        background:
            rgba(168,207,69,.10) !important;

        outline: none !important;

    }


    /*
    ---------------------------------------------------------
    MOBILE DROPDOWN
    ---------------------------------------------------------
    */

    #mainNav .nav-dropdown {

        position: relative !important;

        display: block !important;

        width: 100% !important;

        margin: 0 !important;

        padding: 0 !important;

    }


    /*
    ---------------------------------------------------------
    DROPDOWN BUTTON
    ---------------------------------------------------------
    */

    #mainNav .nav-dropdown-toggle {

        display: flex !important;

        width: 100% !important;

        min-height: 44px !important;

        align-items: center !important;

        justify-content: space-between !important;

        gap: 10px !important;

        margin: 0 !important;

        padding:
            11px 14px !important;

        box-sizing: border-box !important;

        border: 0 !important;

        border-radius: 8px !important;

        background: transparent !important;

        color: #fff !important;

        font-family: inherit !important;

        font-size: 15px !important;

        font-weight: 700 !important;

        line-height: 1.3 !important;

        text-align: left !important;

        cursor: pointer !important;

        pointer-events: auto !important;

        touch-action: manipulation !important;

        appearance: none !important;

        -webkit-appearance: none !important;

        -webkit-tap-highlight-color: transparent;

    }


    #mainNav .nav-dropdown-toggle:hover,
    #mainNav .nav-dropdown-toggle:focus-visible,
    #mainNav .nav-dropdown-toggle.active,
    #mainNav .nav-dropdown.open >
    .nav-dropdown-toggle {

        color: #a8cf45 !important;

        background:
            rgba(255,255,255,.07) !important;

        outline: none !important;

    }


    /*
    ---------------------------------------------------------
    ARROW
    ---------------------------------------------------------
    */

    #mainNav .dropdown-arrow {

        display: inline-block !important;

        flex: 0 0 auto !important;

        margin-left: auto !important;

        color: #a8cf45 !important;

        font-size: 10px !important;

        line-height: 1 !important;

        pointer-events: none !important;

        transition:
            transform .2s ease !important;

    }


    #mainNav .nav-dropdown.open
    .dropdown-arrow {

        transform:
            rotate(180deg) !important;

    }


    /*
    ---------------------------------------------------------
    DROPDOWN CLOSED
    ---------------------------------------------------------
    */

    #mainNav .nav-dropdown-menu {

        position: static !important;

        display: none !important;

        width: 100% !important;

        min-width: 0 !important;

        max-width: none !important;

        height: auto !important;

        margin: 0 !important;

        padding:
            4px 0 4px 10px !important;

        box-sizing: border-box !important;

        border: 0 !important;

        border-left:
            2px solid #a8cf45 !important;

        border-radius: 0 !important;

        background:
            rgba(0,0,0,.15) !important;

        box-shadow: none !important;

        opacity: 1 !important;

        visibility: visible !important;

        pointer-events: auto !important;

        transform: none !important;

    }


    /*
    ---------------------------------------------------------
    DROPDOWN OPEN
    ---------------------------------------------------------
    */

    #mainNav .nav-dropdown.open >
    .nav-dropdown-menu {

        display: block !important;

    }


    /*
    ---------------------------------------------------------
    MOBILE DROPDOWN LINKS
    ---------------------------------------------------------
    */

    #mainNav .nav-dropdown-menu a {

        display: flex !important;

        width: 100% !important;

        min-height: 42px !important;

        align-items: center !important;

        padding:
            10px 14px !important;

        box-sizing: border-box !important;

        color: #fff !important;

        background: transparent !important;

        border-radius: 6px !important;

        font-size: 14px !important;

        font-weight: 600 !important;

        line-height: 1.3 !important;

        white-space: normal !important;

        text-decoration: none !important;

        touch-action: manipulation;

    }


    #mainNav .nav-dropdown-menu a:hover,
    #mainNav .nav-dropdown-menu a:focus-visible,
    #mainNav .nav-dropdown-menu a.active {

        color: #a8cf45 !important;

        background:
            rgba(168,207,69,.10) !important;

        outline: none !important;

    }


    /*
    ---------------------------------------------------------
    BODY WHEN MENU IS OPEN
    ---------------------------------------------------------
    */

    body.menu-open {

        overflow: hidden;

    }

}



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

@media (max-width: 520px) {

    .header-inner {

        min-height: 64px;

        padding:
            0 12px;

    }


    .logo img {

        width: 125px;

        padding: 6px;

    }


    .menu-toggle {

        width: 42px;

        height: 42px;

        flex-basis: 42px;

    }


    #mainNav {

        top: 69px !important;

        left: 8px !important;

        right: 8px !important;

        max-height:
            calc(100vh - 78px) !important;

    }

}
   
   /* =========================================================
      GENERAL SECTIONS
      ========================================================= */
   
   .section {
       padding: 45px 0;
   }
   
   
   .section--alt {
       background: var(--brand-soft);
   }
   
   
   .section-header {
   
       max-width: 900px;
   
       margin-bottom: 36px;
   }
   
   
   .section-eyebrow {
   
       display: block;
   
       margin-bottom: 8px;
   
       color: var(--brand-dark);
   
       font-size: 0.78rem;
   
       font-weight: 900;
   
       letter-spacing: 0.12em;
   
       text-transform: uppercase;
   }
   
   
   .section-title {
   
       color: var(--dark);
   
       font-size:
           clamp(
               1.2rem,
               6vw,
               2.2rem
           );
   
       line-height: 1.18;
   }
   
   
   .section-title span {
       color: var(--brand-dark);
   }
   
   
   .section-subtitle {
   
       margin-top: 14px;
   
       color: var(--ink-soft);
   }
   
   
   .divider {
   
       width: 64px;
   
       height: 4px;
   
       margin-top: 16px;
   
       border-radius: 999px;
   
       background: var(--brand);
   }
   
   
   .section-actions {
   
       display: flex;
   
       justify-content: center;
   
       gap: 12px;
   
       flex-wrap: wrap;
   
       margin-top: 32px;
   }
   
   
   /* =========================================================
      ACCESSIBILITY
      ========================================================= */
   
   .skip-link {
   
       position: fixed;
   
       top: -100px;
   
       left: 1rem;
   
       z-index: 99999;
   
       padding: 0.65rem 1rem;
   
       background: var(--brand);
   
       color: var(--dark);
   
       font-weight: 800;
   }
   
   
   .skip-link:focus {
       top: 0;
   }
   
   
   /* =========================================================
      HEADER
      ========================================================= */

   
   /* =========================================================
      LOGO
      ========================================================= */
   
   .logo {
   
       display: flex;
   
       align-items: center;
   
       flex-shrink: 0;
   }
   
   
   .logo img {
   
       display: block;
   
       width: 180px;
   
       height: auto;
   
       padding: 10px;
   }
   
   
   /* =========================================================
      MAIN NAVIGATION
      ========================================================= */
   
  /* =========================================================
   MAIN NAVIGATION
   ========================================================= */



/* =========================================================
   DROPDOWN CONTAINER
   ========================================================= */

.nav-dropdown {

    position: relative;

    display: flex;

    align-items: center;

    flex-shrink: 0;
}




/* =========================================================
   DROPDOWN ARROW
   ========================================================= */

.dropdown-arrow {

    display: inline-block;

    flex: 0 0 auto;

    font-size: 9px;

    line-height: 1;

    transition:
        transform .2s ease;
}


/* =========================================================
   DESKTOP DROPDOWN
   ========================================================= */

@media (min-width: 981px) {

    .nav-dropdown-menu {

        position: absolute;

        top: calc(100% + 1px);

        left: 50%;

        z-index: 10001;

        width: 240px;

        padding: 8px;

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

        border-top: 4px solid var(--brand);

        border-radius: 0 0 10px 10px;

        background: #ffffff;

        box-shadow:
            0 12px 30px rgba(0,0,0,.16);

        opacity: 0;

        visibility: hidden;

        pointer-events: none;

        transform:
            translate(-50%, 6px);

        transition:
            opacity .18s ease,
            visibility .18s ease,
            transform .18s ease;
    }


    /* Open on mouse */
    .nav-dropdown:hover > .nav-dropdown-menu,

    /* Open when keyboard focused */
    .nav-dropdown:focus-within > .nav-dropdown-menu,

    /* Open when JavaScript adds .open */
    .nav-dropdown.open > .nav-dropdown-menu {

        opacity: 1;

        visibility: visible;

        pointer-events: auto;

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


    .nav-dropdown:hover .dropdown-arrow,

    .nav-dropdown:focus-within .dropdown-arrow,

    .nav-dropdown.open .dropdown-arrow {

        transform:
            rotate(180deg);
    }


    .nav-dropdown-menu a {

        display: block;

        width: 100%;

        padding: 11px 13px;

        border-radius: 7px;

        color: #444444;

        font-size: 14px;

        font-weight: 600;

        line-height: 1.35;

        white-space: nowrap;

        text-align: left;

        text-decoration: none;

        transition:
            background .15s ease,
            color .15s ease;
    }


    .nav-dropdown-menu a:hover,
    .nav-dropdown-menu a:focus-visible,
    .nav-dropdown-menu a.active {

        background:
            var(--brand-soft);

        color:
            var(--brand-dark);

        text-decoration: none;

        outline: none;
    }
}




/* =========================================================
   MOBILE / TABLET NAVIGATION
   ========================================================= */

@media (max-width: 980px) {

    .header-inner {

        min-height: 70px;

        padding-left: 14px;
        padding-right: 14px;
    }


    /* -----------------------------------------------------
       MOBILE HAMBURGER
       ----------------------------------------------------- */

    .menu-toggle {

        display: flex;
    }


    /* -----------------------------------------------------
       MOBILE MAIN MENU
       ----------------------------------------------------- */

    .main-nav {

        position: fixed;

        top: 75px;

        left: 12px;
        right: 12px;

        z-index: 10001;

        width: auto;

        max-width: none;

        max-height:
            calc(100vh - 88px);

        display: none;

        flex-direction: column;

        align-items: stretch;

        justify-content: flex-start;

        gap: 2px;

        margin: 0;

        padding: 10px;

        overflow-x: hidden;

        overflow-y: auto;

        -webkit-overflow-scrolling: touch;

        background:
            #1c281f;

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

        border-radius: 12px;

        box-shadow:
            0 18px 45px rgba(0,0,0,.35);
    }


    /*
    IMPORTANT:
    JavaScript adds .is-open to the main navigation.
    */

    .main-nav.is-open {

        display: flex !important;
    }


    /* =====================================================
       NORMAL MOBILE LINKS
       ===================================================== */

    .main-nav > a {

        display: flex;

        width: 100%;

        min-height: 44px;

        align-items: center;

        justify-content: flex-start;

        padding: 11px 14px;

        box-sizing: border-box;

        border-radius: 8px;

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

        font-size: 15px;

        font-weight: 700;

        line-height: 1.3;

        white-space: normal;

        text-decoration: none;
    }


    .main-nav > a:hover,
    .main-nav > a:focus-visible,
    .main-nav > a.active {

        color:
            var(--brand);

        background:
            rgba(168,207,69,.10);

        text-decoration: none;

        outline: none;
    }


    /* =====================================================
       MOBILE DROPDOWN CONTAINER
       ===================================================== */

    .main-nav .nav-dropdown {

        position: relative;

        display: block;

        width: 100%;

        margin: 0;

        padding: 0;
    }


    /* =====================================================
       MOBILE DROPDOWN BUTTON
       ===================================================== */

    .main-nav .nav-dropdown-toggle {

        display: flex !important;

        width: 100%;

        min-height: 44px;

        align-items: center;

        justify-content: space-between;

        gap: 10px;

        margin: 0;

        padding: 11px 14px;

        box-sizing: border-box;

        border: 0;

        border-radius: 8px;

        background:
            transparent !important;

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

        font-family: inherit;

        font-size: 15px;

        font-weight: 700;

        line-height: 1.3;

        text-align: left;

        white-space: normal;

        cursor: pointer;

        appearance: none;
        -webkit-appearance: none;

        touch-action: manipulation;
    }


    .main-nav .nav-dropdown-toggle:hover,
    .main-nav .nav-dropdown-toggle:focus-visible,
    .main-nav .nav-dropdown-toggle.active,
    .main-nav .nav-dropdown.open > .nav-dropdown-toggle {

        color:
            var(--brand);

        background:
            rgba(255,255,255,.07) !important;

        outline: none;
    }


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

    .main-nav .dropdown-arrow {

        display: inline-block !important;

        flex: 0 0 auto;

        margin-left: auto;

        color:
            var(--brand);

        font-size: 10px;

        line-height: 1;

        pointer-events: none;

        transition:
            transform .2s ease;
    }


    .main-nav .nav-dropdown.open
    .dropdown-arrow {

        transform:
            rotate(180deg);
    }


    /* =====================================================
       MOBILE DROPDOWN - CLOSED
       ===================================================== */

    .main-nav .nav-dropdown-menu {

        position: static !important;

        display: none !important;

        width: 100% !important;

        min-width: 0 !important;

        max-width: none !important;

        height: auto;

        margin: 0 !important;

        padding:
            4px 0 4px 10px !important;

        box-sizing: border-box;

        border: 0 !important;

        border-left:
            2px solid var(--brand) !important;

        border-radius: 0;

        background:
            rgba(0,0,0,.15) !important;

        box-shadow: none !important;

        opacity: 1 !important;

        visibility: visible !important;

        pointer-events: auto;

        transform: none !important;
    }


    /* =====================================================
       MOBILE DROPDOWN - OPEN
       ===================================================== */

    .main-nav .nav-dropdown.open
    > .nav-dropdown-menu {

        display: block !important;
    }


    /* =====================================================
       MOBILE DROPDOWN LINKS
       ===================================================== */

    .main-nav .nav-dropdown-menu a {

        display: flex !important;

        width: 100% !important;

        min-height: 42px;

        align-items: center;

        padding: 10px 14px !important;

        margin: 0 !important;

        box-sizing: border-box;

        border-radius: 6px;

        color:
            rgba(255,255,255,.88) !important;

        background:
            transparent !important;

        font-size: 14px;

        font-weight: 600;

        line-height: 1.3;

        white-space: normal;

        text-decoration: none;

        touch-action: manipulation;
    }


    .main-nav .nav-dropdown-menu a:hover,
    .main-nav .nav-dropdown-menu a:focus-visible,
    .main-nav .nav-dropdown-menu a.active {

        color:
            var(--brand) !important;

        background:
            rgba(168,207,69,.10) !important;

        text-decoration: none;

        outline: none;
    }


    /* =====================================================
       PREVENT BODY SCROLL
       ===================================================== */

    body.menu-open {

        overflow: hidden;
    }
}


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

@media (max-width: 520px) {

    .header-inner {

        min-height: 64px;
    }


    .logo img {

        width: 120px;

        padding: 6px;
    }


    .menu-toggle {

        width: 42px;

        height: 42px;

        flex-basis: 42px;
    }


    .main-nav {

        top: 69px;

        left: 8px;

        right: 8px;

        max-height:
            calc(100vh - 78px);

        padding: 8px;
    }
}
   
   /* =========================================================
      BUTTONS
      ========================================================= */
   
   .btn {
   
       display: inline-flex;
   
       align-items: center;
   
       justify-content: center;
   
       height: 35px;
   
       padding: 9px 1.3rem;
   
       border:
           2px solid
           transparent;
   
       border-radius: 10px;
   
       font-size: 14px;
   
       font-weight: 600;
   
       transition:
           transform .2s ease,
           background .2s ease,
           border-color .2s ease,
           color .2s ease;
   }
   
   
   .btn:hover {
       transform: translateY(-2px);
   }
   
   
   .btn-primary {
   
       background:
           var(--brand);
   
       border-color:
           var(--brand);
   
       color:
           var(--dark);
   }
   
   
   .btn-primary:hover {
   
       background:
           var(--brand-hover);
   
       border-color:
           var(--brand-hover);
   
       color:
           var(--dark);
   }
   
   
   .btn-outline {
   
       border-color:
           rgba(255,255,255,.5);
   
       background:
           rgba(255,255,255,.05);
   
       color:
           #ffffff;
   }
   
   
   .btn-outline:hover {
   
       background:
           rgba(255,255,255,.14);
   
       border-color:
           rgba(255,255,255,.8);
   }
   
   
   .btn-light {
   
       border-color:
           var(--border);
   
       background:
           #ffffff;
   
       color:
           var(--dark);
   }
   
   
   /* =========================================================
      HERO SLIDER
      ========================================================= */
   
   .hero-slider {
   
       position: relative;
   
       min-height: 700px;
   
       overflow: hidden;
   
       background:
           var(--dark);
   }
   
   
   .hero-slide {
   
       position: absolute;
   
       inset: 0;
   
       z-index: 2;
   
       min-height: 700px;
   
       display: flex;
   
       align-items: center;
   
       overflow: hidden;
   
       background:
           transparent !important;
   
       opacity: 0;
   
       visibility: hidden;
   
       pointer-events: none;
   
       transform:
           translateX(24px);
   
       transition:
           opacity .65s ease,
           transform .65s ease,
           visibility .65s ease;
   }
   
   
   .hero-slide.active {
   
       opacity: 1;
   
       visibility: visible;
   
       pointer-events: auto;
   
       transform:
           translateX(0);
   }
   
   
   /* =========================================================
      HERO VIDEO
      ========================================================= */
   
   .slide-video,
   .hero-video video {
   
       position: absolute;
   
       inset: 0;
   
       z-index: 0;
   
       width: 100%;
   
       height: 100%;
   
       object-fit: cover;
   
       object-position:
           center center;
   
       background:
           var(--dark);
   }
   
   
   .hero-video {
   
       position: absolute;
   
       inset: 0;
   
       z-index: 0;
   
       overflow: hidden;
   }
   
   
   /* =========================================================
      HERO OVERLAY
      ========================================================= */
   
   .hero-overlay {
   
       position: absolute;
   
       inset: 0;
   
       z-index: 1;
   
       pointer-events: none;
   
       background:
           linear-gradient(
               90deg,
               rgba(15,21,17,.84) 0%,
               rgba(15,21,17,.60) 55%,
               rgba(15,21,17,.38) 100%
           );
   }
   
   
   /* =========================================================
      HERO CONTENT
      ========================================================= */
   
   .hero-slide-inner {
   
       position: relative;
   
       z-index: 2;
   
       min-height: 700px;
   
       display: flex;
   
       align-items: center;
   
       justify-content: center;
   }
   
   
   .hero-content {
   
       width: 100%;
   
       max-width: 900px;
   
       padding:
           80px 58px 100px;
   
       color: #ffffff;
   
       text-align: center;
   }
   
   
   .hero-eyebrow {
   
       display: inline-flex;
   
       margin-bottom: 20px;
   
       padding: 7px 14px;
   
       border:
           1px solid
           rgba(168,207,69,.65);
   
       border-radius: 999px;
   
       background:
           rgba(168,207,69,.12);
   
       color:
           #c6e576;
   
       font-size: .78rem;
   
       font-weight: 800;
   
       letter-spacing: .04em;
   
       text-transform: uppercase;
   }
   
   
   .hero-content h1,
   .hero-content h2 {
   
       margin-bottom: 20px;
   
       color: #ffffff;
   
       font-size:
           clamp(
               2.2rem,
               5vw,
               3.7rem
           );
   
       line-height: 1.12;
   }
   
   
   .hero-content h1 span,
   .hero-content h2 span {
       color: var(--brand);
   }
   
   
   .hero-content p {
   
       max-width: 700px;
   
       margin:
           0 auto 35px;
   
       color:
           rgba(255,255,255,.86);
   
       font-size: 1.05rem;
   }
   
   
   .hero-actions {
   
       display: flex;
   
       justify-content: center;
   
       gap: 15px;
   
       flex-wrap: wrap;
   }
   
   
   /* =========================================================
      HERO ARROWS
      ========================================================= */
   
   .slider-arrow {
   
       position: absolute;
   
       top: 50%;
   
       z-index: 4;
   
       width: 46px;
   
       height: 46px;
   
       display: grid;
   
       place-items: center;
   
       border:
           1px solid
           rgba(255,255,255,.35);
   
       border-radius: 50%;
   
       background:
           var(--brand);
   
       color:
           #ffffff;
   
       transform:
           translateY(-50%);
   
       transition:
           background .2s ease,
           border-color .2s ease,
           transform .2s ease;
   }
   
   
   .slider-arrow:hover {
   
       background:
           var(--brand);
   
       border-color:
           var(--brand);
   
       color:
           var(--dark);
   }
   
   
   .slider-arrow svg {
   
       width: 22px;
   
       height: 22px;
   }
   
   
   .slider-prev {
       left: 22px;
   }
   
   
   .slider-next {
       right: 22px;
   }
   
   
   /* =========================================================
      HERO DOTS
      ========================================================= */
   
   .slider-dots {
   
       position: absolute;
   
       left: 50%;
   
       bottom: 28px;
   
       z-index: 4;
   
       display: flex;
   
       gap: 9px;
   
       transform:
           translateX(-50%);
   }
   
   
   .slider-dot {
   
       width: 10px;
   
       height: 10px;
   
       border: 0;
   
       border-radius: 50%;
   
       background:
           rgba(255,255,255,.45);
   
       transition:
           width .2s ease,
           background .2s ease;
   }
   
   
   .slider-dot.active {
   
       width: 28px;
   
       border-radius: 999px;
   
       background:
           var(--brand);
   }
   
   
   /* =========================================================
      PAGE HERO
      ========================================================= */
   
   .page-hero {
   
       position: relative;
   
       display: flex;
   
       align-items: center;
   
       min-height: 480px;
   
       overflow: hidden;
   
       background-color:
           transparent;
   
       background-size:
           cover;
   
       background-position:
           center center;
   
       background-repeat:
           no-repeat;
   
       color: #ffffff;
   }
   
   
   .page-hero::before {
   
       content: "";
   
       position: absolute;
   
       inset: 0;
   
       background:
           linear-gradient(
               90deg,
               rgba(18,28,20,.82) 0%,
               rgba(18,28,20,.65) 35%,
               rgba(18,28,20,.45) 50%
           );
   
       z-index: 1;
   }
   
   
   .page-hero .container {
   
       position: relative;
   
       z-index: 2;
   }
   
   
   .page-hero h1 {
   
       margin:
           10px 0 18px;
   
       color:
           #ffffff;
   
       font-size:
           clamp(
               2.4rem,
               5vw,
               3.8rem
           );
   
       line-height: 1.15;
   }
   
   
   .page-hero p {
   
       max-width: 760px;
   
       color:
           rgba(255,255,255,.90);
   
       font-size:
           1.08rem;
   }
   
   
   .page-hero .section-eyebrow {
       color: var(--brand);
   }
   
   
   /* =========================================================
      ABOUT
      ========================================================= */
   
   .about-columns {
   
       display: grid;
   
       grid-template-columns:
           repeat(2, minmax(0, 1fr));
   
       gap: 35px;
   
       align-items: start;
   }
   
   
   .about-main {
       min-width: 0;
   }
   
   
   .about-content {
       margin-bottom: 25px;
   }
   
   
   .about-content p {
   
       color:
           #555555;
   
       line-height: 1.7;
   
       margin-bottom: 14px;
   }
   
   
   .about-intro {
   
       color:
           var(--ink) !important;
   
       font-size: 18px;
   
       font-weight: 600;
   }
   
   
   .about-features {
   
       display: grid;
   
       grid-template-columns:
           repeat(2, minmax(0, 1fr));
   
       gap: 12px;
   }
   
   
   .feature-card {
   
       padding: 15px;
   
       background: #ffffff;
   
       border:
           1px solid
           #e2e7dd;
   
       border-left:
           4px solid
           var(--brand);
   
       border-radius: 9px;
   }
   
   
   .feature-card h3 {
   
       margin:
           0 0 6px;
   
       color: #444444;
   
       font-size: 16px;
   }
   
   
   .feature-card p {
   
       margin: 0;
   
       color: #666666;
   
       font-size: 13px;
   
       line-height: 1.5;
   }
   
   
   /* =========================================================
      LATEST NEWS
      ========================================================= */
   
   .about-news {
   
       background:
           transparent;
   
       border:
           1px solid
           #e2e7dd;
   
       border-left:
           5px solid
           var(--brand);
   
       border-radius: 10px;
   
       overflow: hidden;
   
       box-shadow:
           0 2px 8px
           rgba(0,0,0,.04);
   }
   
   
   .about-news-header {
   
       padding:
           10px 18px;
   
       background:
           #f8faf5;
   
       border-bottom:
           1px solid
           #e5e9df;
   }
   
   
   .about-news-header .section-eyebrow {
   
       margin-bottom: 3px;
   
       font-size: 11px;
   }
   
   
   .about-news-header h3 {
   
       margin: 0;
   
       color: #444444;
   
       font-size: 18px;
   }
   
   
   .about-news-list {
   
       display: flex;
   
       flex-direction: column;
   }
   
   
   .about-news-item {
   
       padding:
           12px 16px;
   
       border-bottom:
           1px solid
           #edf0e9;
   }
   
   
   .about-news-item:last-child {
       border-bottom: none;
   }
   
   
   .about-news-category {
   
       display: block;
   
       margin-bottom: 2px;
   
       color: #666666;
   
       font-size: 10px;
   
       font-weight: 500;
   
       text-transform: uppercase;
   
       letter-spacing: .4px;
   }
   
   
   .about-news-item h4 {
   
       margin:
           0 0 7px;
   
       text-transform:
           uppercase;
   
       font-size: 14px;
   
       line-height: 1.35;
   }
   
   
   .about-news-item h4 a {
   
       color:
           #444444;
   
       text-decoration: none;
   }
   
   
   .about-news-item h4 a:hover {
       color: #7b9f28;
   }
   
   
   .about-news-meta {
   
       display: flex;
   
       align-items: center;
   
       justify-content: space-between;
   
       gap: 10px;
   
       color: #888888;
   
       font-size: 11px;
   }
   
   
   .news-views {
   
       color: #777777;
   
       white-space: nowrap;
   }
   
   
   .about-news-footer {
   
       padding:
           10px 16px;
   
       background:
           #f8faf5;
   
       border-top:
           1px solid
           #e5e9df;
   }
   
   
   .about-news-button {
   
       display: flex;
   
       align-items: center;
   
       justify-content: space-between;
   
       color:
           #6f9223;
   
       font-size: 13px;
   
       font-weight: 600;
   
       text-decoration: none;
   }
   
   
   .about-news-button:hover {
       color: #4f6d13;
   }
   
   
   .about-news-button span {
       font-size: 18px;
   }
   
   
   .about-news-empty {
   
       padding: 20px;
   
       margin: 0;
   
       color: #777777;
   
       font-size: 13px;
   }
   
   
   /* =========================================================
      GENERAL CARDS
      ========================================================= */
   
   .why-us-grid,
   .content-grid {
   
       display: grid;
   
       grid-template-columns:
           repeat(3, minmax(0, 1fr));
   
       gap: 16px;
   
       margin-top: 30px;
   }
   
   
   .feature-card,
   .why-us-card,
   .content-card {
   
       padding: 22px;
   
       border:
           1px solid
           var(--border);
   
       border-top:
           5px solid
           var(--brand-dark);
   
       border-radius:
           var(--radius);
   
       background:
           var(--surface);
   
       box-shadow:
           var(--shadow-sm);
   
       transition:
           transform .2s ease,
           box-shadow .2s ease;
   }
   
   
   .feature-card:hover,
   .why-us-card:hover,
   .content-card:hover {
   
       transform:
           translateY(-4px);
   
       box-shadow:
           var(--shadow-md);
   }
   
   
   .feature-card h3,
   .why-us-card h3,
   .content-card h2 {
   
       margin-bottom: 7px;
   
       color:
           var(--dark);
   }
   
   
   .feature-card p,
   .why-us-card p,
   .content-card p {
   
       color:
           var(--ink-soft);
   
       font-size: .9rem;
   }
   
   
   /* =========================================================
      CONTACT
      ========================================================= */
   
   .contact-page-grid {
   
       display: grid;
   
       grid-template-columns:
           minmax(260px,.8fr)
           minmax(0,1.2fr);
   
       gap: 20px;
   }
   
   
   .contact-panel,
   .form-card {
   
       padding: 30px;
   
       border:
           1px solid
           var(--border);
   
       border-top:
           5px solid
           var(--brand-dark);
   
       border-radius:
           var(--radius);
   
       background:
           #ffffff;
   
       box-shadow:
           var(--shadow-md);
   }
   
   
   .contact-panel p {
   
       margin-top: 15px;
   
       color:
           var(--ink-soft);
   }
   
   
   .form-row {
   
       display: grid;
   
       grid-template-columns:
           repeat(2,minmax(0,1fr));
   
       gap: 14px;
   }
   
   
   .field {
       margin-bottom: 5px;
   }
   
   
   .field label {
   
       display: block;
   
       margin-bottom: 6px;
   
       font-weight: 800;
   }
   
   
   .field input,
   .field textarea,
   .field select {
   
       width: 100%;
   
       padding:
           6px 12px;
   
       border:
           1.5px solid
           var(--border);
   
       border-radius: 9px;
   
       background:
           #ffffff;
   
       color:
           var(--ink);
   
       outline: none;
   
       transition:
           border-color .2s ease,
           box-shadow .2s ease;
   }
   
   
   .field input:focus,
   .field textarea:focus,
   .field select:focus {
   
       border-color:
           var(--brand-dark);
   
       box-shadow:
           0 0 0 3px
           rgba(168,207,69,.18);
   }
   
   
   .field textarea {
   
       min-height: 100px;
   
       resize: vertical;
   }
   
   
   /* =========================================================
      FOOTER
      ========================================================= */
   
   .site-footer {
   
       padding-top: 15px;
   
       background:
           rgba(255,255,255,.72);
   
       color:
           #444444;
   
       border-top:
           5px solid
           var(--brand);
   }
   
   
   .footer-grid {
   
       display: grid;
   
       grid-template-columns:
           2.0fr
           1.0fr
           1.0fr
           1.0fr;
   
       gap: 25px;
   }
   
   
   .footer-logo img {
   
       width: 120px;
   
       margin: 0 0 6px;
   }
   
   
   .footer-column h3 {
   
       margin-bottom: 2px;
   
       color:
           var(--brand-dark);
   
       font-size: 14px;
   }
   
   
   .footer-description {
       font-size: 12px;
   }
   
   
   .footer ul {
       margin: 0;
   }
   
   
   .footer-links {
   
       display: grid;
   
       list-style: none;
   }
   
   
   .footer-links a {
   
       color:
           #444444;
   
       font-size: 12px;
   
       transition:
           color .2s ease;
   }
   
   
   .footer-links a:hover {
   
       color:
           var(--brand);
   
       text-decoration: underline;
   
       text-decoration-thickness: 2px;
   
       text-underline-offset: 4px;
   }
   
   
   .footer-socials {
   
       display: flex;
   
       gap: 10px;
   }
   
   
   .footer-social-link {
   
       width: 42px;
   
       height: 42px;
   
       display: grid;
   
       place-items: center;
   
       border-radius: 50%;
   
       background:
           var(--brand);
   
       color:
           var(--dark);
   
       font-weight: 900;
   
       transition:
           transform .2s ease,
           background .2s ease;
   }
   
   
   .footer-social-link:hover {
   
       transform:
           translateY(-2px);
   
       background:
           var(--brand-hover);
   }
   
   
   .footer-bottom {
   
       margin-top: 20px;
   
       background:
           var(--brand);
   }
   
   
   .footer-bottom-inner {
   
       min-height: 40px;
   
       display: flex;
   
       align-items: center;
   
       justify-content: space-between;
   
       gap: 20px;
   
       font-size: .8rem;
   }
   
   
   .back-to-top {
       color: #444444;
   }
   
   
   .back-to-top:hover {
       color: #ffffff;
   }
   
   
   /* =========================================================
      ADDITIONAL SERVICES
      ========================================================= */
   
   .additional-services-grid {
   
       display: grid;
   
       grid-template-columns:
           repeat(2,minmax(0,1fr));
   
       gap: 22px;
   
       margin-top: 34px;
   }
   
   
   .service-detail-card {
   
       padding: 28px;
   
       border:
           1px solid
           var(--border);
   
       border-top:
           5px solid
           var(--brand-dark);
   
       border-radius:
           var(--radius);
   
       background:
           var(--surface);
   
       box-shadow:
           var(--shadow-sm);
   
       transition:
           transform .2s ease,
           box-shadow .2s ease;
   }
   
   
   .service-detail-card:hover {
   
       transform:
           translateY(-4px);
   
       box-shadow:
           var(--shadow-md);
   }
   
   
   .service-card-heading {
   
       display: flex;
   
       align-items: center;
   
       gap: 16px;
   
       margin-bottom: 18px;
   }
   
   
   .service-card-number {
   
       width: 54px;
   
       height: 54px;
   
       display: grid;
   
       place-items: center;
   
       flex-shrink: 0;
   
       border-radius: 50%;
   
       background:
           var(--brand);
   
       color:
           var(--dark);
   
       font-size: 1rem;
   
       font-weight: 900;
   }
   
   
   .service-card-label {
   
       display: block;
   
       margin-bottom: 3px;
   
       color:
           var(--brand-dark);
   
       font-size: .72rem;
   
       font-weight: 900;
   
       letter-spacing: .1em;
   
       text-transform: uppercase;
   }
   
   
   .service-card-heading h2 {
   
       color:
           var(--dark);
   
       font-size: 1.35rem;
   
       line-height: 1.25;
   }
   
   
   .service-card-intro {
   
       margin-bottom: 18px;
   
       color:
           var(--ink-soft);
   
       font-size: .95rem;
   }
   
   
   .service-list {
   
       display: grid;
   
       gap: 11px;
   
       padding: 0;
   
       list-style: none;
   }
   
   
   .service-list li {
   
       position: relative;
   
       padding-left: 28px;
   
       color:
           var(--ink-soft);
   
       font-size: .92rem;
   
       line-height: 1.55;
   }
   
   
   .service-list li::before {
   
       content: "✓";
   
       position: absolute;
   
       top: 0;
   
       left: 0;
   
       width: 20px;
   
       height: 20px;
   
       display: grid;
   
       place-items: center;
   
       border-radius: 50%;
   
       background:
           var(--brand-soft);
   
       color:
           var(--brand-dark);
   
       font-size: .72rem;
   
       font-weight: 900;
   }
   
   
   .additional-services-cta {
   
       margin-top: 15px;
   
       padding: 10px;
   
       display: flex;
   
       align-items: center;
   
       justify-content: center;
   
       gap: 28px;
   
       color: #ffffff;
   }
   
   
   .additional-services-cta > div {
       max-width: 760px;
   }
   
   
   .additional-services-cta h2 {
   
       margin-bottom: 8px;
   
       color: #ffffff;
   
       font-size:
           clamp(
               1.55rem,
               3vw,
               2.1rem
           );
   
       line-height: 1.25;
   }
   
   
   .additional-services-cta p {
       color:
           rgba(255,255,255,.75);
   }
   
   
   .additional-services-cta .section-eyebrow {
       color:
           var(--brand);
   }
   
   
   .additional-services-cta .btn {
       flex-shrink: 0;
   }
   
   
   /* =========================================================
      HR SOLUTIONS
      ========================================================= */
   
   .hr-solutions-grid {
   
       display: grid;
   
       grid-template-columns:
           repeat(2,minmax(0,1fr));
   
       gap: 24px;
   
       margin-top: 34px;
   }
   
   
   .hr-solution-card {
   
       display: flex;
   
       flex-direction: column;
   
       padding: 25px;
   
       border:
           1px solid
           var(--border);
   
       border-top:
           5px solid
           var(--brand-dark);
   
       border-radius:
           var(--radius);
   
       background:
           var(--surface);
   
       box-shadow:
           var(--shadow-sm);
   
       transition:
           transform .2s ease,
           box-shadow .2s ease;
   }
   
   
   .hr-solution-card:hover {
   
       transform:
           translateY(-4px);
   
       box-shadow:
           var(--shadow-md);
   }
   
   
   .hr-solution-heading {
   
       display: flex;
   
       align-items: center;
   
       gap: 16px;
   
       margin-bottom: 20px;
   }
   
   
   .hr-solution-number {
   
       width: 56px;
   
       height: 56px;
   
       display: grid;
   
       place-items: center;
   
       flex-shrink: 0;
   
       border-radius: 50%;
   
       background:
           var(--brand);
   
       color:
           var(--dark);
   
       font-size: 1rem;
   
       font-weight: 900;
   }
   
   
   .hr-solution-label {
   
       display: block;
   
       margin-bottom: 3px;
   
       color:
           var(--brand-dark);
   
       font-size: .72rem;
   
       font-weight: 900;
   
       letter-spacing: .1em;
   
       text-transform: uppercase;
   }
   
   
   .hr-solution-heading h2 {
   
       color:
           var(--dark);
   
       font-size:
           1.45rem;
   
       line-height: 1.25;
   }
   
   
   .hr-solution-intro {
   
       margin-bottom: 20px;
   
       color:
           var(--ink-soft);
   
       font-size: .95rem;
   
       line-height: 1.65;
   }
   
   
   .hr-service-list {
   
       display: grid;
   
       gap: 12px;
   
       margin-bottom: 26px;
   
       padding: 0;
   
       list-style: none;
   }
   
   
   .hr-service-list li {
   
       position: relative;
   
       padding-left: 30px;
   
       color:
           var(--ink-soft);
   
       font-size: .92rem;
   
       line-height: 1.55;
   }
   
   
   .hr-service-list li::before {
   
       content: "✓";
   
       position: absolute;
   
       top: 1px;
   
       left: 0;
   
       width: 20px;
   
       height: 20px;
   
       display: grid;
   
       place-items: center;
   
       border-radius: 50%;
   
       background:
           var(--brand-soft);
   
       color:
           var(--brand-dark);
   
       font-size: .72rem;
   
       font-weight: 900;
   }
   
   
   .hr-card-footer {
       margin-top: auto;
   }
   
   
   .hr-card-footer .btn {
       width: 100%;
   }
   
   
   /* =========================================================
      HR PROCESS
      ========================================================= */
   
   .hr-process-grid {
   
       display: grid;
   
       grid-template-columns:
           repeat(3,minmax(0,1fr));
   
       gap: 18px;
   }
   
   
   .hr-process-card {
   
       position: relative;
   
       padding: 26px;
   
       border:
           1px solid
           var(--border);
   
       border-radius:
           var(--radius);
   
       background:
           var(--surface);
   
       box-shadow:
           var(--shadow-sm);
   }
   
   
   .hr-process-step {
   
       width: 42px;
   
       height: 42px;
   
       display: grid;
   
       place-items: center;
   
       margin-bottom: 16px;
   
       border-radius: 50%;
   
       background:
           var(--brand);
   
       color:
           var(--dark);
   
       font-weight: 900;
   }
   
   
   .hr-process-card h3 {
   
       margin-bottom: 8px;
   
       color:
           var(--dark);
   
       font-size:
           1.08rem;
   }
   
   
   .hr-process-card p {
   
       color:
           var(--ink-soft);
   
       font-size:
           .9rem;
   }
   
   
   /* =========================================================
      HR BENEFITS
      ========================================================= */
   
   .hr-benefits {
   
       display: grid;
   
       grid-template-columns:
           minmax(0,1.35fr)
           minmax(280px,.65fr);
   
       gap: 30px;
   
       align-items: stretch;
   }
   
   
   .hr-benefits-content {
   
       padding: 30px;
   
       border:
           1px solid
           var(--border);
   
       border-radius:
           var(--radius);
   
       background:
           var(--surface);
   
       box-shadow:
           var(--shadow-sm);
   }
   
   
   .hr-benefits-content h2 {
   
       margin-bottom: 14px;
   
       color:
           var(--dark);
   
       font-size:
           clamp(
               1.7rem,
               3vw,
               2.3rem
           );
   
       line-height: 1.25;
   }
   
   
   .hr-benefits-content > p {
   
       margin-bottom: 20px;
   
       color:
           var(--ink-soft);
   }
   
   
   .hr-benefit-list {
   
       display: grid;
   
       grid-template-columns:
           repeat(2,minmax(0,1fr));
   
       gap: 12px 20px;
   
       padding: 0;
   
       list-style: none;
   }
   
   
   .hr-benefit-list li {
   
       position: relative;
   
       padding-left: 28px;
   
       color:
           var(--ink-soft);
   
       font-size: .9rem;
   }
   
   
   .hr-benefit-list li::before {
   
       content: "✓";
   
       position: absolute;
   
       top: 0;
   
       left: 0;
   
       color:
           var(--brand-dark);
   
       font-weight: 900;
   }
   
   
   .hr-benefits-panel {
   
       display: flex;
   
       flex-direction: column;
   
       justify-content: center;
   
       padding: 30px;
   
       border-radius:
           var(--radius);
   
       background:
           linear-gradient(
               145deg,
               var(--dark),
               var(--dark-2)
           );
   
       color: #ffffff;
   
       box-shadow:
           var(--shadow-md);
   }
   
   
   .hr-benefits-panel .section-eyebrow {
       color: var(--brand);
   }
   
   
   .hr-benefits-panel h3 {
   
       margin-bottom: 12px;
   
       color: #ffffff;
   
       font-size: 1.5rem;
   
       line-height: 1.3;
   }
   
   
   .hr-benefits-panel p {
   
       margin-bottom: 22px;
   
       color:
           rgba(255,255,255,.75);
   }
   
   
   .hr-benefits-panel .btn {
       width: 100%;
   }
   
   
   /* =========================================================
      LABOUR LAW
      ========================================================= */
   
   .labour-services-grid {
   
       display: grid;
   
       grid-template-columns:
           repeat(2,minmax(0,1fr));
   
       gap: 18px;
   
       margin-top: 34px;
   }
   
   
   .labour-service-card {
   
       display: flex;
   
       align-items: flex-start;
   
       gap: 10px;
   
       padding: 25px;
   
       border:
           1px solid
           var(--border);
   
       border-top:
           5px solid
           var(--brand-dark);
   
       border-radius:
           var(--radius);
   
       background:
           var(--surface);
   
       box-shadow:
           var(--shadow-sm);
   
       transition:
           transform .2s ease,
           box-shadow .2s ease,
           border-color .2s ease;
   }
   
   
   .labour-service-card:hover {
   
       transform:
           translateY(-3px);
   
       border-left-color:
           var(--brand);
   
       box-shadow:
           var(--shadow-md);
   }
   
   
   .labour-service-number {
   
       width: 48px;
   
       height: 48px;
   
       display: grid;
   
       place-items: center;
   
       flex: 0 0 48px;
   
       border-radius: 50%;
   
       background:
           var(--brand);
   
       color:
           var(--dark);
   
       font-size: .82rem;
   
       font-weight: 900;
   }
   
   
   .labour-service-content {
       min-width: 0;
   }
   
   
   .labour-service-label {
   
       display: block;
   
       margin-bottom: 4px;
   
       color:
           var(--brand-dark);
   
       font-size: .7rem;
   
       font-weight: 900;
   
       letter-spacing: .09em;
   
       line-height: 1.3;
   
       text-transform: uppercase;
   }
   
   
   .labour-service-card h3 {
   
       margin-bottom: 8px;
   
       color:
           var(--dark);
   
       font-size: 1.1rem;
   
       line-height: 1.35;
   }
   
   
   .labour-service-card p {
   
       color:
           var(--ink-soft);
   
       font-size: .9rem;
   
       line-height: 1.6;
   }
   
   
   /* =========================================================
      LABOUR SUPPORT
      ========================================================= */
   
   .labour-support-grid {
   
       display: grid;
   
       grid-template-columns:
           minmax(0,1.25fr)
           minmax(280px,.75fr);
   
       gap: 30px;
   
       align-items: stretch;
   }
   
   
   .labour-support-content {
   
       padding: 30px;
   
       border:
           1px solid
           var(--border);
   
       border-radius:
           var(--radius);
   
       background:
           var(--surface);
   
       box-shadow:
           var(--shadow-sm);
   }
   
   
   .labour-support-content > p {
   
       margin-top: 20px;
   
       color:
           var(--ink-soft);
   }
   
   
   .labour-benefit-list {
   
       display: grid;
   
       grid-template-columns:
           repeat(2,minmax(0,1fr));
   
       gap: 13px 20px;
   
       margin-top: 22px;
   
       padding: 0;
   
       list-style: none;
   }
   
   
   .labour-benefit-list li {
   
       position: relative;
   
       padding-left: 28px;
   
       color:
           var(--ink-soft);
   
       font-size: .91rem;
   
       line-height: 1.5;
   }
   
   
   .labour-benefit-list li::before {
   
       content: "✓";
   
       position: absolute;
   
       top: 0;
   
       left: 0;
   
       color:
           var(--brand-dark);
   
       font-weight: 900;
   }
   
   
   .labour-contact-panel {
   
       display: flex;
   
       flex-direction: column;
   
       justify-content: center;
   
       padding: 32px;
   
       border-radius:
           var(--radius);
   
       background:
           linear-gradient(
               145deg,
               var(--dark),
               var(--dark-2)
           );
   
       color: #ffffff;
   
       box-shadow:
           var(--shadow-md);
   }
   
   
   .labour-contact-panel .section-eyebrow {
       color: var(--brand);
   }
   
   
   .labour-contact-panel h2 {
   
       margin-bottom: 14px;
   
       color: #ffffff;
   
       font-size:
           clamp(
               1.45rem,
               3vw,
               2rem
           );
   
       line-height: 1.3;
   }
   
   
   .labour-contact-panel p {
   
       margin-bottom: 22px;
   
       color:
           rgba(255,255,255,.76);
   }
   
   
   .labour-contact-panel .btn {
       width: 100%;
   }
   
   
   /* =========================================================
      LABOUR DISCLAIMER
      ========================================================= */
   
   .labour-disclaimer {
   
       padding: 22px 0;
   
       border-top:
           1px solid
           var(--border);
   
       background:
           #ffffff;
   }
   
   
   .labour-disclaimer p {
   
       color:
           var(--ink-soft);
   
       font-size:
           .83rem;
   
       line-height:
           1.55;
   }
   
   
   /* =========================================================
      E-LEARNING
      ========================================================= */
   
   .elearning-intro-grid {
   
       display: grid;
   
       grid-template-columns:
           minmax(0,1.35fr)
           minmax(290px,.65fr);
   
       gap: 32px;
   
       align-items: stretch;
   }
   
   
   .elearning-intro-content {
   
       padding: 32px;
   
       border:
           1px solid
           var(--border);
   
       border-left:
           4px solid
           var(--brand-dark);
   
       border-radius:
           var(--radius);
   
       background:
           var(--surface);
   
       box-shadow:
           var(--shadow-sm);
   }
   
   
   .elearning-intro-content > p {
   
       margin-top: 15px;
   
       color:
           var(--ink-soft);
   
       font-size: .96rem;
   
       line-height: 1.7;
   }
   
   
   .elearning-summary-card {
   
       display: flex;
   
       flex-direction: column;
   
       justify-content: center;
   
       padding: 32px;
   
       border-radius:
           var(--radius);
   
       background:
           linear-gradient(
               145deg,
               var(--dark),
               var(--dark-2)
           );
   
       color: #ffffff;
   
       box-shadow:
           var(--shadow-md);
   }
   
   
   .elearning-summary-icon {
   
       width: 62px;
   
       height: 62px;
   
       display: grid;
   
       place-items: center;
   
       margin-bottom: 20px;
   
       border-radius: 18px;
   
       background:
           var(--brand);
   
       color:
           var(--dark);
   
       font-size: 1.7rem;
   }
   
   
   .elearning-summary-card .section-eyebrow {
       color: var(--brand);
   }
   
   
   .elearning-summary-card h2 {
   
       margin-bottom: 12px;
   
       color: #ffffff;
   
       font-size: 1.7rem;
   
       line-height: 1.3;
   }
   
   
   .elearning-summary-card > p {
   
       margin-bottom: 20px;
   
       color:
           rgba(255,255,255,.75);
   
       font-size: .94rem;
   
       line-height: 1.6;
   }
   
   
   .elearning-summary-list {
   
       display: grid;
   
       gap: 11px;
   
       margin: 0;
   
       padding: 0;
   
       list-style: none;
   }
   
   
   .elearning-summary-list li {
   
       position: relative;
   
       padding-left: 27px;
   
       color:
           rgba(255,255,255,.88);
   
       font-size: .9rem;
   }
   
   
   .elearning-summary-list li::before {
   
       content: "✓";
   
       position: absolute;
   
       top: 0;
   
       left: 0;
   
       color:
           var(--brand);
   
       font-weight: 900;
   }
   
   
   /* =========================================================
      E-LEARNING BENEFITS
      ========================================================= */
   
   .elearning-benefits-grid {
   
       display: grid;
   
       grid-template-columns:
           repeat(4,minmax(0,1fr));
   
       gap: 18px;
   
       margin-top: 34px;
   }
   
   
   .elearning-benefit-card {
   
       position: relative;
   
       display: flex;
   
       flex-direction: column;
   
       min-height: 100%;
   
       padding: 25px;
   
       overflow: hidden;
   
       border:
           1px solid
           var(--border);
   
       border-top:
           4px solid
           var(--brand-dark);
   
       border-radius:
           var(--radius);
   
       background:
           var(--surface);
   
       box-shadow:
           var(--shadow-sm);
   
       transition:
           transform .2s ease,
           box-shadow .2s ease,
           border-color .2s ease;
   }
   
   
   .elearning-benefit-card:hover {
   
       transform:
           translateY(-4px);
   
       border-top-color:
           var(--brand);
   
       box-shadow:
           var(--shadow-md);
   }
   
   
   .elearning-benefit-icon {
   
       width: 50px;
   
       height: 50px;
   
       display: grid;
   
       place-items: center;
   
       margin-bottom: 20px;
   
       border-radius: 14px;
   
       background:
           var(--brand-soft);
   
       color:
           var(--brand-dark);
   
       font-size: 1.35rem;
   }
   
   
   .elearning-benefit-number {
   
       position: absolute;
   
       top: 19px;
   
       right: 21px;
   
       color:
           rgba(28,45,32,.14);
   
       font-size: 1.5rem;
   
       font-weight: 900;
   }
   
   
   .elearning-benefit-card h3 {
   
       margin-bottom: 10px;
   
       color:
           var(--dark);
   
       font-size: 1.05rem;
   
       line-height: 1.35;
   }
   
   
   .elearning-benefit-card p {
   
       color:
           var(--ink-soft);
   
       font-size: .88rem;
   
       line-height: 1.62;
   }
   
   
   .elearning-benefit-card--featured {
   
       border-color:
           var(--brand);
   
       border-top-color:
           var(--brand);
   
       background:
           linear-gradient(
               145deg,
               rgba(168,207,69,.16),
               var(--surface)
           );
   }
   
   
   /* =========================================================
      E-LEARNING AUDIENCE
      ========================================================= */
   
   .elearning-audience-grid {
   
       display: grid;
   
       grid-template-columns:
           minmax(0,1.3fr)
           minmax(290px,.7fr);
   
       gap: 30px;
   
       align-items: stretch;
   }
   
   
   .elearning-audience-content {
   
       padding: 32px;
   
       border:
           1px solid
           var(--border);
   
       border-radius:
           var(--radius);
   
       background:
           var(--surface);
   
       box-shadow:
           var(--shadow-sm);
   }
   
   
   .elearning-audience-content > p {
   
       margin-top: 18px;
   
       color:
           var(--ink-soft);
   
       line-height: 1.7;
   }
   
   
   .elearning-audience-list {
   
       display: grid;
   
       gap: 16px;
   
       margin-top: 26px;
   }
   
   
   .elearning-audience-item {
   
       display: flex;
   
       align-items: flex-start;
   
       gap: 15px;
   
       padding: 18px;
   
       border-left:
           4px solid
           var(--brand-dark);
   
       border:
           1px solid
           var(--border);
   
       border-radius:
           calc(var(--radius) - 4px);
   
       background:
           var(--surface-soft);
   }
   
   
   .elearning-audience-icon {
   
       width: 46px;
   
       height: 46px;
   
       display: grid;
   
       place-items: center;
   
       flex: 0 0 46px;
   
       border-radius: 13px;
   
       background:
           var(--brand);
   
       color:
           var(--dark);
   
       font-size: 1.2rem;
   }
   
   
   .elearning-audience-item h3 {
   
       margin-bottom: 5px;
   
       color:
           var(--dark);
   
       font-size: 1rem;
   }
   
   
   .elearning-audience-item p {
   
       color:
           var(--ink-soft);
   
       font-size: .88rem;
   
       line-height: 1.55;
   }
   
   
   .elearning-cta-panel {
   
       display: flex;
   
       flex-direction: column;
   
       justify-content: center;
   
       padding: 32px;
   
       border-radius:
           var(--radius);
   
       background:
           linear-gradient(
               145deg,
               var(--dark),
               var(--dark-2)
           );
   
       color: #ffffff;
   
       box-shadow:
           var(--shadow-md);
   }
   
   
   .elearning-cta-panel .section-eyebrow {
       color: var(--brand);
   }
   
   
   .elearning-cta-panel h2 {
   
       margin-bottom: 14px;
   
       color: #ffffff;
   
       font-size:
           clamp(
               1.45rem,
               3vw,
               2rem
           );
   
       line-height: 1.3;
   }
   
   
   .elearning-cta-panel p {
   
       margin-bottom: 24px;
   
       color:
           rgba(255,255,255,.76);
   
       line-height: 1.65;
   }
   
   
   .elearning-cta-panel .btn {
       width: 100%;
   }
   
   
   /* =========================================================
      E-LEARNING CLOSING
      ========================================================= */
   
   .elearning-closing {
   
       padding: 65px 0;
   
       background:
           linear-gradient(
               135deg,
               var(--brand-soft),
               rgba(168,207,69,.05)
           );
   }
   
   
   .elearning-closing-content {
   
       max-width: 850px;
   
       margin: 0 auto;
   
       text-align: center;
   }
   
   
   .elearning-closing-content h2 {
   
       margin: 9px 0 14px;
   
       color:
           var(--dark);
   
       font-size:
           clamp(
               1.8rem,
               4vw,
               2.8rem
           );
   
       line-height: 1.2;
   }
   
   
   .elearning-closing-content p {
   
       color:
           var(--ink-soft);
   
       font-size: 1rem;
   
       line-height: 1.7;
   }
   
   
   /* =========================================================
      DOCUMENT CENTRE
      ========================================================= */
   
   .document-intro-grid {
   
       display: grid;
   
       grid-template-columns:
           minmax(0,1.35fr)
           minmax(290px,.65fr);
   
       gap: 30px;
   
       align-items: stretch;
   }
   
   
   .document-intro-content {
   
       padding: 32px;
   
       border:
           1px solid
           var(--border);
   
       border-left:
           5px solid
           var(--brand-dark);
   
       border-radius:
           var(--radius);
   
       background:
           var(--surface);
   
       box-shadow:
           var(--shadow-sm);
   }
   
   
   .document-intro-content > p {
   
       margin-top: 15px;
   
       color:
           var(--ink-soft);
   
       font-size: .96rem;
   
       line-height: 1.7;
   }
   
   
   .document-download-summary {
   
       display: flex;
   
       flex-direction: column;
   
       justify-content: center;
   
       padding: 32px;
   
       border-radius:
           var(--radius);
   
       background:
           linear-gradient(
               145deg,
               var(--dark),
               var(--dark-2)
           );
   
       color: #ffffff;
   
       box-shadow:
           var(--shadow-md);
   }
   
   
   .document-summary-icon {
   
       width: 62px;
   
       height: 62px;
   
       display: grid;
   
       place-items: center;
   
       margin-bottom: 20px;
   
       border-radius: 18px;
   
       background:
           var(--brand);
   
       color:
           var(--dark);
   
       font-size: 1.7rem;
   }
   
   
   .document-download-summary .section-eyebrow {
       color: var(--brand);
   }
   
   
   .document-download-summary h2 {
   
       margin-bottom: 12px;
   
       color: #ffffff;
   
       font-size: 1.7rem;
   
       line-height: 1.3;
   }
   
   
   .document-download-summary > p {
   
       margin-bottom: 20px;
   
       color:
           rgba(255,255,255,.76);
   
       font-size: .94rem;
   
       line-height: 1.65;
   }
   
   
   .document-summary-list {
   
       display: grid;
   
       gap: 11px;
   
       margin: 0;
   
       padding: 0;
   
       list-style: none;
   }
   
   
   .document-summary-list li {
   
       position: relative;
   
       padding-left: 27px;
   
       color:
           rgba(255,255,255,.88);
   
       font-size: .9rem;
   }
   
   
   .document-summary-list li::before {
   
       content: "✓";
   
       position: absolute;
   
       top: 0;
   
       left: 0;
   
       color:
           var(--brand);
   
       font-weight: 900;
   }
   
   
   /* =========================================================
      DOCUMENT CATEGORY
      ========================================================= */
   
   .document-category-grid {
   
       display: grid;
   
       grid-template-columns:
           repeat(3,minmax(0,1fr));
   
       gap: 18px;
   
       margin-top: 34px;
   }
   
   
   .document-category-card {
   
       position: relative;
   
       display: flex;
   
       flex-direction: column;
   
       min-height: 100%;
   
       padding: 25px;
   
       overflow: hidden;
   
       border:
           1px solid
           var(--border);
   
       border-top:
           5px solid
           var(--brand-dark);
   
       border-radius:
           var(--radius);
   
       background:
           var(--surface);
   
       box-shadow:
           var(--shadow-sm);
   
       transition:
           transform .2s ease,
           box-shadow .2s ease,
           border-color .2s ease;
   }
   
   
   .document-category-card:hover {
   
       transform:
           translateY(-4px);
   
       border-top-color:
           var(--brand);
   
       box-shadow:
           var(--shadow-md);
   }
   
   
   .document-category-top {
   
       display: flex;
   
       align-items: flex-start;
   
       justify-content: space-between;
   
       margin-bottom: 19px;
   }
   
   
   .document-category-icon {
   
       width: 52px;
   
       height: 52px;
   
       display: grid;
   
       place-items: center;
   
       border-radius: 15px;
   
       background:
           var(--brand-soft);
   
       color:
           var(--brand-dark);
   
       font-size: 1.35rem;
   }
   
   
   .document-category-number {
   
       color:
           rgba(28,45,32,.15);
   
       font-size: 1.5rem;
   
       font-weight: 900;
   }
   
   
   .document-category-card h3 {
   
       margin-bottom: 9px;
   
       color:
           var(--dark);
   
       font-size: 1.08rem;
   
       line-height: 1.4;
   }
   
   
   .document-category-card > p {
   
       margin-bottom: 22px;
   
       color:
           var(--ink-soft);
   
       font-size: .89rem;
   
       line-height: 1.62;
   }
   
   
   .document-category-actions {
   
       display: grid;
   
       gap: 12px;
   
       margin-top: auto;
   }
   
   
   .document-category-actions .btn {
       width: 100%;
   }
   
   
   .document-zip-link {
   
       display: inline-flex;
   
       align-items: center;
   
       justify-content: center;
   
       gap: 7px;
   
       min-height: 42px;
   
       padding: 9px 14px;
   
       border:
           1px solid
           var(--border);
   
       border-radius: 8px;
   
       background:
           var(--surface-soft);
   
       color:
           var(--dark);
   
       font-size: .84rem;
   
       font-weight: 800;
   
       text-decoration: none;
   
       transition:
           background .2s ease,
           border-color .2s ease,
           color .2s ease;
   }
   
   
   .document-zip-link:hover {
   
       border-color:
           var(--brand);
   
       background:
           var(--brand-soft);
   
       color:
           var(--brand-dark);
   }
   
   
   /* =========================================================
      DOCUMENT HELP
      ========================================================= */
   
   .document-help-grid {
   
       display: grid;
   
       grid-template-columns:
           minmax(0,1.25fr)
           minmax(290px,.75fr);
   
       gap: 30px;
   
       align-items: stretch;
   }
   
   
   .document-help-content {
   
       padding: 32px;
   
       border:
           1px solid
           var(--border);
   
       border-left:
           5px solid
           var(--brand-dark);
   
       border-radius:
           var(--radius);
   
       background:
           var(--surface);
   
       box-shadow:
           var(--shadow-sm);
   }
   
   
   .document-help-content > p {
   
       margin-top: 15px;
   
       color:
           var(--ink-soft);
   
       line-height: 1.7;
   }
   
   
   .document-help-list {
   
       display: grid;
   
       grid-template-columns:
           repeat(2,minmax(0,1fr));
   
       gap: 13px 20px;
   
       margin-top: 24px;
   
       padding: 0;
   
       list-style: none;
   }
   
   
   .document-help-list li {
   
       position: relative;
   
       padding-left: 28px;
   
       color:
           var(--ink-soft);
   
       font-size: .91rem;
   
       line-height: 1.5;
   }
   
   
   .document-help-list li::before {
   
       content: "✓";
   
       position: absolute;
   
       top: 0;
   
       left: 0;
   
       color:
           var(--brand-dark);
   
       font-weight: 900;
   }
   
   
   .document-contact-panel {
   
       display: flex;
   
       flex-direction: column;
   
       justify-content: center;
   
       padding: 25px;
   
       border-radius:
           var(--radius);
   
       background:
           linear-gradient(
               145deg,
               var(--dark),
               var(--dark-2)
           );
   
       color: #ffffff;
   
       box-shadow:
           var(--shadow-md);
   }
   
   
   .document-contact-panel .section-eyebrow {
       color: var(--brand);
   }
   
   
   .document-contact-panel h2 {
   
       margin-bottom: 14px;
   
       color: #ffffff;
   
       font-size:
           clamp(
               1.45rem,
               3vw,
               2rem
           );
   
       line-height: 1.3;
   }
   
   
   .document-contact-panel p {
   
       margin-bottom: 24px;
   
       color:
           rgba(255,255,255,.76);
   
       line-height: 1.65;
   }
   
   
   .document-contact-panel .btn {
   
       width: 100%;
   
       margin-top: 20px;
   }
   
   
   /* =========================================================
      DOCUMENT DISCLAIMER
      ========================================================= */
   
   .document-disclaimer {
   
       padding: 22px 0;
   
       border-top:
           1px solid
           var(--border);
   
       background:
           #ffffff;
   }
   
   
   .document-disclaimer p {
   
       color:
           var(--ink-soft);
   
       font-size: .83rem;
   
       line-height: 1.6;
   }
   
   
   /* =========================================================
      DOCUMENT DOWNLOAD PAGE
      ========================================================= */
   
   .documents-page {
       padding: 60px 0;
   }
   
   
   .documents-header {
       margin-bottom: 35px;
   }
   
   
   .documents-header h1 {
   
       font-size:
           clamp(
               2rem,
               4vw,
               3rem
           );
   
       color:
           var(--dark);
   
       margin-bottom: 12px;
   }
   
   
   .documents-header p {
   
       max-width: 800px;
   
       color:
           var(--ink-soft);
   }
   
   
   .document-category {
   
       margin-bottom: 35px;
   
       background:
           #ffffff;
   
       border:
           1px solid
           var(--border);
   
       border-radius:
           var(--radius);
   
       padding: 25px;
   
       box-shadow:
           var(--shadow-sm);
   }
   
   
   .document-category h2 {
   
       display: flex;
   
       align-items: center;
   
       gap: 10px;
   
       margin-bottom: 20px;
   
       color:
           var(--dark);
   
       font-size: 1.35rem;
   
       border-bottom:
           2px solid
           var(--brand-soft);
   
       padding-bottom: 12px;
   }
   
   
   .document-category h2::before {
   
       content: "📁";
   
       font-size: 1.2rem;
   }
   
   
   .document-list {
   
       display: grid;
   
       grid-template-columns:
           repeat(3,minmax(0,1fr));
   
       gap: 14px;
   
       list-style: none;
   
       padding: 0;
   
       margin: 0;
   }
   
   
   .document-list li {
   
       background:
           var(--page);
   
       border:
           1px solid
           var(--border);
   
       border-radius: 10px;
   
       padding: 14px 16px;
   
       display: flex;
   
       align-items: center;
   
       justify-content: space-between;
   
       gap: 12px;
   
       transition: .25s ease;
   }
   
   
   .document-list li:hover {
   
       transform:
           translateY(-3px);
   
       box-shadow:
           var(--shadow-sm);
   
       border-color:
           var(--brand);
   }
   
   
   .document-list a {
   
       color:
           var(--dark);
   
       font-weight: 700;
   
       font-size: .92rem;
   
       flex: 1;
   }
   
   
   .document-list a:hover {
       color: var(--brand-dark);
   }
   
   
   .download-btn {
   
       display: inline-flex;
   
       align-items: center;
   
       justify-content: center;
   
       min-width: 38px;
   
       height: 38px;
   
       border-radius: 50%;
   
       background:
           var(--brand);
   
       color:
           var(--dark);
   
       font-weight: 900;
   
       transition: .25s ease;
   }
   
   
   .download-btn:hover {
   
       background:
           var(--brand-dark);
   
       color:
           #ffffff;
   }
   
   
   .no-documents {
   
       padding: 20px;
   
       text-align: center;
   
       color:
           var(--ink-soft);
   
       background:
           var(--page);
   
       border-radius: 10px;
   }
   
   
   /* =========================================================
      DOCUMENT GRID
      ========================================================= */
   
   .document-grid {
   
       display: grid;
   
       grid-template-columns:
           repeat(3,1fr);
   
       gap: 20px;
   
       margin-top: 30px;
   }
   
   
   .document-card {
   
       background:
           #ffffff;
   
       border:
           1px solid
           var(--border);
   
       border-radius: 12px;
   
       padding: 25px;
   }
   
   
   .document-card h3 {
   
       color:
           var(--dark);
   
       margin-top: 0;
   }
   
   
   .document-card ul {
   
       list-style: none;
   
       padding: 0;
   }
   
   
   .document-card li {
   
       padding: 12px 0;
   
       border-bottom:
           1px solid
           #eeeeee;
   
       display: flex;
   
       justify-content: space-between;
   
       gap: 15px;
   }
   
   
   .document-card a {
   
       color:
           var(--dark);
   
       font-weight: 700;
   
       text-decoration: none;
   }
   
   
   .document-card a:hover {
       color: var(--brand);
   }
   
   
   .document-card span {
   
       font-size: .8rem;
   
       color: #777777;
   }
   
   
   .alert-box {
   
       background:
           var(--brand-soft);
   
       padding: 20px;
   
       border-left:
           5px solid
           var(--brand);
   }
   
   
   /* =========================================================
      CLIENT LOGO SLIDER
      ========================================================= */
   
   .clients-section {
       overflow: hidden;
   }
   
   
   .client-slider {
   
       width: 100%;
   
       overflow: hidden;
   
       margin-top: 40px;
   }
   
   
   .client-track {
   
       display: flex;
   
       align-items: center;
   
       gap: 30px;
   
       width: max-content;
   
       animation:
           clientScroll
           30s
           linear
           infinite;
   }
   
   
   .client-logo {
   
       width: 180px;
   
       height: 90px;
   
       display: flex;
   
       align-items: center;
   
       justify-content: center;
   
       flex: 0 0 auto;
   
       background:
           #ffffff;
   
       border:
           1px solid
           #eeeeee;
   
       border-radius: 12px;
   
       padding: 15px;
   
       border-left:
           5px solid
           var(--brand);
   
       border-right:
           5px solid
           var(--brand);
   }
   
   
   .client-logo img {
   
       max-width: 100%;
   
       max-height: 90px;
   
       object-fit: contain;
   }
   
   
   .client-slider:hover
   .client-track {
   
       animation-play-state:
           paused;
   }
   
   
   @keyframes clientScroll {
   
       from {
           transform:
               translateX(0);
       }
   
       to {
           transform:
               translateX(-50%);
       }
   
   }
   
   
   /* =========================================================
      COOKIE CONSENT
      ========================================================= */
   
   .cookie-banner {
   
       position: fixed;
   
       left: 20px;
   
       right: 20px;
   
       bottom: 20px;
   
       z-index: 99999;
   }
   
   
   .cookie-banner-content {
   
       max-width: 1180px;
   
       margin: 0 auto;
   
       display: flex;
   
       align-items: center;
   
       justify-content: space-between;
   
       gap: 24px;
   
       background:
           rgba(255,255,255,.98);
   
       border:
           1px solid
           #e6e6e6;
   
       border-top:
           5px solid
           var(--brand);
   
       border-radius: 16px;
   
       padding: 18px 20px;
   
       box-shadow:
           0 12px 40px
           rgba(0,0,0,.15);
   
       backdrop-filter:
           blur(14px);
   
       -webkit-backdrop-filter:
           blur(14px);
   }
   
   
   .cookie-text {
       flex: 1;
   }
   
   
   .cookie-text strong {
   
       display: block;
   
       font-size: 16px;
   
       color: #222222;
   
       margin-bottom: 5px;
   }
   
   
   .cookie-text p {
   
       margin: 0 0 5px;
   
       font-size: 13px;
   
       line-height: 1.5;
   
       color: #555555;
   }
   
   
   .cookie-text a {
   
       font-size: 13px;
   
       color:
           #6f921b;
   }
   
   
   .cookie-text a:hover {
       text-decoration: underline;
   }
   
   
   .cookie-actions {
   
       display: flex;
   
       align-items: center;
   
       gap: 8px;
   
       flex-shrink: 0;
   }
   
   
   .cookie-btn {
   
       min-height: 38px;
   
       padding: 8px 16px;
   
       border-radius: 9px;
   
       border: none;
   
       font-size: 13px;
   
       font-weight: 600;
   
       cursor: pointer;
   
       transition: .2s ease;
   }
   
   
   .cookie-accept {
   
       background:
           var(--brand);
   
       color:
           #ffffff;
   }
   
   
   .cookie-accept:hover {
       background: #94b93a;
   }
   
   
   .cookie-reject {
   
       background: #f2f2f2;
   
       color: #333333;
   }
   
   
   .cookie-reject:hover {
       background: #e7e7e7;
   }
   
   
   .cookie-settings {
   
       background:
           transparent;
   
       border:
           1px solid
           #dddddd;
   
       color:
           #333333;
   }
   
   
   .cookie-settings:hover {
       background:
           #f7f7f7;
   }
   
   
   /* =========================================================
      COOKIE MODAL
      ========================================================= */
   
   .cookie-modal {
   
       display: none;
   
       position: fixed;
   
       inset: 0;
   
       z-index: 100000;
   
       background:
           rgba(0,0,0,.35);
   
       align-items: center;
   
       justify-content: center;
   
       padding: 20px;
   }
   
   
   .cookie-modal.active {
       display: flex;
   }
   
   
   .cookie-modal-box {
   
       width: 100%;
   
       max-width: 520px;
   
       background:
           #ffffff;
   
       border-radius: 16px;
   
       border-top:
           10px solid
           var(--brand-dark);
   
       padding: 20px;
   
       box-shadow:
           0 20px 60px
           rgba(0,0,0,.25);
   }
   
   
   .cookie-modal-header {
   
       display: flex;
   
       justify-content: space-between;
   
       align-items: center;
   
       margin-bottom: 15px;
   }
   
   
   .cookie-modal-header h3 {
   
       margin: 0;
   
       font-size: 19px;
   
       color:
           var(--brand-dark);
   }
   
   
   .cookie-close {
   
       border: none;
   
       background: none;
   
       font-size: 28px;
   
       cursor: pointer;
   
       color: #777777;
   }
   
   
   .cookie-setting-row {
   
       display: flex;
   
       justify-content: space-between;
   
       align-items: center;
   
       gap: 20px;
   
       padding: 16px 0;
   
       border-top:
           1px solid
           #eeeeee;
   }
   
   
   .cookie-setting-row strong {
   
       display: block;
   
       font-size: 14px;
   
       color: #333333;
   
       margin-bottom: 4px;
   }
   
   
   .cookie-setting-row p {
   
       margin: 0;
   
       font-size: 12px;
   
       line-height: 1.45;
   
       color: #777777;
   }
   
   
   /* =========================================================
      COOKIE TOGGLE
      ========================================================= */
   
   .cookie-switch {
   
       position: relative;
   
       width: 44px;
   
       height: 24px;
   
       flex-shrink: 0;
   }
   
   
   .cookie-switch input {
   
       opacity: 0;
   
       width: 0;
   
       height: 0;
   }
   
   
   .cookie-slider {
   
       position: absolute;
   
       inset: 0;
   
       background:
           #cccccc;
   
       border-radius: 30px;
   
       cursor: pointer;
   
       transition: .2s;
   }
   
   
   .cookie-slider::before {
   
       content: "";
   
       position: absolute;
   
       width: 18px;
   
       height: 18px;
   
       left: 3px;
   
       top: 3px;
   
       background:
           #ffffff;
   
       border-radius: 50%;
   
       transition: .2s;
   }
   
   
   .cookie-switch input:checked
   + .cookie-slider {
   
       background:
           var(--brand);
   }
   
   
   .cookie-switch input:checked
   + .cookie-slider::before {
   
       transform:
           translateX(20px);
   }
   
   
   .cookie-switch input:disabled
   + .cookie-slider {
   
       opacity: .6;
   
       cursor: not-allowed;
   }
   
   
   .cookie-modal-actions {
   
       display: flex;
   
       justify-content: flex-end;
   
       gap: 8px;
   
       margin-top: 15px;
   }
   
   
   /* =========================================================
      GRADUATES
      ========================================================= */
   
   .graduate-list {
   
       display: grid;
   
       grid-template-columns:
           repeat(3,minmax(0,1fr));
   
       gap: 22px;
   
       margin-top: 35px;
   }
   
   
   .graduate-card {
   
       background:
           #ffffff;
   
       padding: 28px;
   
       border:
           1px solid
           var(--border);
   
       border-top:
           5px solid
           var(--brand-dark);
   
       border-radius:
           var(--radius);
   
       box-shadow:
           var(--shadow-sm);
   
       transition: .25s ease;
   }
   
   
   .graduate-card:hover {
   
       transform:
           translateY(-5px);
   
       box-shadow:
           var(--shadow-md);
   }
   
   
   .graduate-card h3 {
   
       margin-bottom: 12px;
   
       color:
           var(--dark);
   
       font-size: 1.25rem;
   }
   
   
   .graduate-card p {
   
       color:
           var(--ink-soft);
   
       font-size: .95rem;
   
       line-height: 1.7;
   }
   
   
   .graduate-card ul {
   
       margin-top: 15px;
   
       padding-left: 20px;
   
       color:
           var(--ink-soft);
   }
   
   
   .graduate-card li {
       margin-bottom: 8px;
   }
   
   
   .graduate-image {
       margin-bottom: 20px;
   }
   
   
   .graduate-image img {
   
       width: 100%;
   
       height: 200px;
   
       object-fit: cover;
   
       border-radius: 12px;
   }
   
   
   .graduate-actions {
       margin-top: 25px;
   }
   
   
   .graduate-cta {
   
       margin-top: 50px;
   
       padding: 45px;
   
       text-align: center;
   
       background:
           var(--brand-soft);
   
       border-radius:
           var(--radius);
   }
   
   
   .graduate-cta h2 {
       color: var(--dark);
   }
   
   
   .graduate-cta p {
   
       color:
           var(--ink-soft);
   
       max-width: 750px;
   
       margin: 15px auto;
   }
   
   
   /* =========================================================
      DOWNLOAD OVERVIEW
      ========================================================= */
   
   .download-overview {
   
       display: flex;
   
       flex-wrap: wrap;
   
       gap: 14px;
   
       margin-bottom: 24px;
   }
   
   
   .download-overview-item {
   
       display: flex;
   
       align-items: center;
   
       gap: 12px;
   
       min-width: 190px;
   
       padding: 14px 18px;
   
       border:
           1px solid
           var(--border);
   
       border-radius: 12px;
   
       background:
           var(--surface);
   
       box-shadow:
           var(--shadow-sm);
   }
   
   
   .download-overview-item > span {
   
       width: 44px;
   
       height: 44px;
   
       display: grid;
   
       place-items: center;
   
       flex: 0 0 44px;
   
       border-radius: 12px;
   
       background:
           var(--brand-soft);
   
       color:
           var(--brand-dark);
   
       font-size: 1.2rem;
   }
   
   
   .download-overview-item div {
   
       display: flex;
   
       flex-direction: column;
   }
   
   
   .download-overview-item strong {
   
       color:
           var(--dark);
   
       font-size: 1.25rem;
   
       line-height: 1.1;
   }
   
   
   .download-overview-item small {
   
       margin-top: 3px;
   
       color:
           var(--ink-soft);
   
       font-size: .75rem;
   
       font-weight: 700;
   }
   
   
   /* =========================================================
      DOWNLOAD CATEGORY FILTER
      ========================================================= */
   
   .download-category-filter {
   
       display: flex;
   
       gap: 9px;
   
       margin-bottom: 32px;
   
       padding: 8px;
   
       overflow-x: auto;
   
       border:
           1px solid
           var(--border);
   
       border-radius: 12px;
   
       background:
           var(--surface-soft);
   
       scrollbar-width: thin;
   }
   
   
   .download-category-filter a {
   
       display: inline-flex;
   
       align-items: center;
   
       justify-content: center;
   
       min-height: 40px;
   
       padding: 8px 14px;
   
       flex: 0 0 auto;
   
       border:
           1px solid
           transparent;
   
       border-radius: 8px;
   
       color:
           var(--ink-soft);
   
       font-size: .82rem;
   
       font-weight: 800;
   
       line-height: 1.25;
   
       text-decoration: none;
   
       transition:
           background .2s ease,
           color .2s ease,
           border-color .2s ease;
   }
   
   
   .download-category-filter a:hover {
   
       border-color:
           var(--brand);
   
       background:
           #ffffff;
   
       color:
           var(--brand-dark);
   }
   
   
   .download-category-filter a.active {
   
       border-color:
           var(--brand);
   
       background:
           var(--brand);
   
       color:
           var(--dark);
   }
   
   
   /* =========================================================
      DOWNLOAD CATEGORY SECTIONS
      ========================================================= */
   
   .download-category-list {
   
       display: grid;
   
       gap: 26px;
   }
   
   
   .download-category-section {
   
       overflow: hidden;
   
       border:
           1px solid
           var(--border);
   
       border-radius:
           var(--radius);
   
       background:
           var(--surface);
   
       box-shadow:
           var(--shadow-sm);
   }
   
   
   .download-category-heading {
   
       display: flex;
   
       align-items: center;
   
       justify-content: space-between;
   
       gap: 26px;
   
       padding: 25px;
   
       border-bottom:
           1px solid
           var(--border);
   
       background:
           linear-gradient(
               135deg,
               var(--surface-soft),
               rgba(168,207,69,.08)
           );
   }
   
   
   .download-category-title {
   
       display: flex;
   
       align-items: flex-start;
   
       gap: 17px;
   }
   
   
   .download-category-icon {
   
       width: 54px;
   
       height: 54px;
   
       display: grid;
   
       place-items: center;
   
       flex: 0 0 54px;
   
       border-radius: 15px;
   
       background:
           var(--brand);
   
       color:
           var(--dark);
   
       font-size: 1.35rem;
   }
   
   
   .download-category-label {
   
       display: block;
   
       margin-bottom: 3px;
   
       color:
           var(--brand-dark);
   
       font-size: .67rem;
   
       font-weight: 900;
   
       letter-spacing: .1em;
   
       text-transform: uppercase;
   }
   
   
   .download-category-title h2 {
   
       margin-bottom: 5px;
   
       color:
           var(--dark);
   
       font-size: 1.25rem;
   
       line-height: 1.3;
   }
   
   
   .download-category-title p {
   
       max-width: 690px;
   
       color:
           var(--ink-soft);
   
       font-size: .88rem;
   
       line-height: 1.55;
   }
   
   
   .download-category-meta {
   
       display: flex;
   
       align-items: center;
   
       gap: 12px;
   
       flex: 0 0 auto;
   }
   
   
   .download-file-count {
   
       display: inline-flex;
   
       align-items: center;
   
       gap: 6px;
   
       padding: 8px 11px;
   
       border:
           1px solid
           var(--border);
   
       border-radius: 8px;
   
       background:
           #ffffff;
   
       color:
           var(--ink-soft);
   
       font-size: .8rem;
   
       font-weight: 800;
   }
   
   
   /* =========================================================
      DOWNLOAD FILES
      ========================================================= */
   
   .download-file-list {
       display: grid;
   }
   
   
   .download-file-card {
   
       display: flex;
   
       align-items: center;
   
       justify-content: space-between;
   
       gap: 20px;
   
       padding: 17px 22px;
   
       border-bottom:
           1px solid
           var(--border);
   
       transition:
           background .2s ease;
   }
   
   
   .download-file-card:last-child {
       border-bottom: 0;
   }
   
   
   .download-file-card:hover {
       background:
           var(--surface-soft);
   }
   
   
   .download-file-main {
   
       display: flex;
   
       align-items: center;
   
       gap: 14px;
   
       min-width: 0;
   }
   
   
   .download-file-icon {
   
       width: 45px;
   
       height: 45px;
   
       display: grid;
   
       place-items: center;
   
       flex: 0 0 45px;
   
       border-radius: 12px;
   
       background:
           var(--brand-soft);
   
       color:
           var(--brand-dark);
   
       font-size: 1.2rem;
   }
   
   
   .download-file-info {
       min-width: 0;
   }
   
   
   .download-file-info h3 {
   
       margin-bottom: 5px;
   
       overflow-wrap: anywhere;
   
       color:
           var(--dark);
   
       font-size: .96rem;
   
       line-height: 1.35;
   }
   
   
   .download-file-details {
   
       display: flex;
   
       flex-wrap: wrap;
   
       gap: 5px 12px;
   }
   
   
   .download-file-details span {
   
       position: relative;
   
       color:
           var(--ink-soft);
   
       font-size: .74rem;
   }
   
   
   .download-file-details span:not(:last-child)::after {
   
       content: "•";
   
       position: absolute;
   
       right: -8px;
   
       color:
           var(--border);
   }
   
   
   .download-file-button {
   
       display: inline-flex;
   
       align-items: center;
   
       justify-content: center;
   
       gap: 7px;
   
       min-height: 40px;
   
       padding: 8px 14px;
   
       flex: 0 0 auto;
   
       border:
           1px solid
           var(--brand);
   
       border-radius: 8px;
   
       background:
           var(--brand);
   
       color:
           var(--dark);
   
       font-size: .8rem;
   
       font-weight: 900;
   
       text-decoration: none;
   
       transition:
           transform .2s ease,
           background .2s ease;
   }
   
   
   .download-file-button:hover {
   
       transform:
           translateY(-1px);
   
       background:
           var(--brand-dark);
   
       color:
           #ffffff;
   }
   
   
   /* =========================================================
      DOWNLOAD EMPTY
      ========================================================= */
   
   .download-empty-state {
   
       display: flex;
   
       align-items: center;
   
       gap: 15px;
   
       padding: 28px 25px;
   }
   
   
   .download-empty-state > span {
   
       width: 48px;
   
       height: 48px;
   
       display: grid;
   
       place-items: center;
   
       flex: 0 0 48px;
   
       border-radius: 13px;
   
       background:
           var(--surface-soft);
   
       color:
           var(--ink-soft);
   
       font-size: 1.25rem;
   }
   
   
   .download-empty-state h3 {
   
       margin-bottom: 4px;
   
       color:
           var(--dark);
   
       font-size: .96rem;
   }
   
   
   .download-empty-state p {
   
       color:
           var(--ink-soft);
   
       font-size: .84rem;
   }
   
   
   /* =========================================================
      DOCUMENT LIBRARY CTA
      ========================================================= */
   
   .document-library-cta {
   
       display: flex;
   
       align-items: center;
   
       justify-content: space-between;
   
       gap: 30px;
   
       padding: 34px;
   
       border:
           1px solid
           var(--border);
   
       border-left:
           6px solid
           var(--brand);
   
       border-radius:
           var(--radius);
   
       background:
           var(--surface);
   
       box-shadow:
           var(--shadow-sm);
   }
   
   
   .document-library-cta-content {
       max-width: 760px;
   }
   
   
   .document-library-cta-content h2 {
   
       margin: 7px 0 12px;
   
       color:
           var(--dark);
   
       font-size:
           clamp(
               1.55rem,
               3vw,
               2.25rem
           );
   
       line-height: 1.25;
   }
   
   
   .document-library-cta-content p {
   
       color:
           var(--ink-soft);
   
       line-height: 1.65;
   }
   
   
   .document-library-cta-action {
       flex: 0 0 auto;
   }
   
   
   .document-library-cta-action .btn {
       white-space: nowrap;
   }
   
   
   /* =========================================================
      DOCUMENT CENTRE HERO
      ========================================================= */
   
   .document-centre-hero {
   
       position: relative;
   
       padding: 100px 0;
   
       color: #ffffff;
   
       background:
           linear-gradient(
               rgba(23,33,25,.85),
               rgba(23,33,25,.85)
           ),
           url('../assets/images/document-centre-bg.jpg');
   
       background-size:
           cover;
   
       background-position:
           center;
   
       background-repeat:
           no-repeat;
   }
   
   
   .document-centre-hero h1 {
   
       margin:
           12px 0 18px;
   
       font-size:
           clamp(
               2.2rem,
               5vw,
               3.5rem
           );
   
       line-height: 1.15;
   }
   
   
   .document-centre-hero p {
   
       max-width: 760px;
   
       color:
           rgba(255,255,255,.85);
   
       font-size: 1.05rem;
   }
   
   
   /* =========================================================
      DOCUMENT CENTRE INTRO
      ========================================================= */
   
   .document-intro {
   
       max-width: 900px;
   
       margin: auto;
   
       text-align: left;
   }
   
   
   .document-intro p {
   
       color:
           var(--ink-soft);
   
       margin-bottom: 15px;
   }
   
   
   /* =========================================================
      DOCUMENT CENTRE BUTTON
      ========================================================= */
   
   .document-centre-button {
   
       margin-top: 40px;
   
       display: flex;
   
       justify-content: center;
   }
   
   
   /* =========================================================
      RESPONSIVE TABLET
      ========================================================= */
   
   @media (max-width: 1050px) {
   
       .elearning-benefits-grid {
   
           grid-template-columns:
               repeat(2,minmax(0,1fr));
       }
   
   
       .document-category-grid {
   
           grid-template-columns:
               repeat(2,minmax(0,1fr));
       }
   
   }
   
   
   @media (max-width: 1000px) {
   
       .about-columns {
   
           grid-template-columns:
               1fr 300px;
   
           gap: 25px;
       }
   
   }
   
   
   @media (max-width: 900px) {
   
       .why-us-grid,
       .content-grid {
   
           grid-template-columns:
               repeat(2,minmax(0,1fr));
       }
   
   
       .contact-page-grid {
   
           grid-template-columns: 1fr;
       }
   
   
       .additional-services-grid {
   
           grid-template-columns: 1fr;
       }
   
   
       .hr-solutions-grid {
   
           grid-template-columns: 1fr;
       }
   
   
       .hr-process-grid {
   
           grid-template-columns: 1fr;
       }
   
   
       .hr-benefits {
   
           grid-template-columns: 1fr;
       }
   
   
       .labour-services-grid {
   
           grid-template-columns: 1fr;
       }
   
   
       .labour-support-grid {
   
           grid-template-columns: 1fr;
       }
   
   
       .elearning-intro-grid,
       .elearning-audience-grid {
   
           grid-template-columns: 1fr;
       }
   
   
       .document-intro-grid,
       .document-help-grid {
   
           grid-template-columns: 1fr;
       }
   
   
       .document-grid {
   
           grid-template-columns: 1fr;
       }
   
   
       .document-list {
   
           grid-template-columns:
               repeat(2,1fr);
       }
   
   
       .document-library-cta,
       .download-page-header {
   
           align-items: flex-start;
   
           flex-direction: column;
       }
   
   
       .download-category-heading {
   
           align-items: flex-start;
   
           flex-direction: column;
       }
   
   
       .download-category-meta {
   
           width: 100%;
       }
   
   
       .graduate-list {
   
           grid-template-columns:
               repeat(2,minmax(0,1fr));
       }
   
   }
   
   
   /* =========================================================
      MOBILE
      ========================================================= */
   
   @media (max-width: 800px) {
   
       .about-columns {
   
           grid-template-columns: 1fr;
   
           gap: 25px;
       }
   
   
       .about-news {
   
           width: 100%;
       }
   
   }
   
   
   @media (max-width: 700px) {
   
       .client-logo {
   
           width: 130px;
   
           height: 70px;
       }
   
   
       .client-track {
           gap: 25px;
       }
   
   
       .cookie-banner {
   
           left: 10px;
   
           right: 10px;
   
           bottom: 10px;
       }
   
   
       .cookie-banner-content {
   
           display: block;
   
           padding: 15px;
       }
   
   
       .cookie-actions {
   
           margin-top: 12px;
   
           display: grid;
   
           grid-template-columns:
               repeat(3,1fr);
       }
   
   
       .cookie-btn {
   
           width: 100%;
   
           padding:
               8px 7px;
   
           font-size: 12px;
       }
   
   }
   
   
   /* =========================================================
      MOBILE 640px
      ========================================================= */
   
   @media (max-width: 640px) {
   
       .container {
   
           width:
               min(
                   calc(100% - 24px),
                   var(--max-w)
               );
       }
   
   
       .section {
           padding: 50px 0;
       }
   
   
       /* -----------------------------------------------------
          HERO
          ----------------------------------------------------- */
   
       .hero-slider,
       .hero-slide,
       .hero-slide-inner {
   
           min-height: 570px;
   
           height: 570px;
       }
   
   
       .slide-video,
       .hero-video video {
   
           width: 100%;
   
           height: 100%;
   
           object-fit: contain;
   
           object-position:
               center center;
   
           background:
               var(--dark);
       }
   
   
       .hero-overlay {
   
           background:
               linear-gradient(
                   180deg,
                   rgba(15,21,17,.35) 0%,
                   rgba(15,21,17,.50) 42%,
                   rgba(15,21,17,.88) 100%
               );
       }
   
   
       .hero-content {
   
           width: 100%;
   
           max-width: 100%;
   
           padding:
               55px 24px 105px;
       }
   
   
       .hero-eyebrow {
   
           margin-bottom: 15px;
   
           padding:
               6px 11px;
   
           font-size: .68rem;
       }
   
   
       .hero-content h1,
       .hero-content h2 {
   
           margin-bottom: 15px;
   
           font-size:
               clamp(
                   1.9rem,
                   9vw,
                   2.4rem
               );
   
           line-height: 1.12;
       }
   
   
       .hero-content p {
   
           margin-bottom: 25px;
   
           font-size: .95rem;
   
           line-height: 1.55;
       }
   
   
       .hero-actions {
   
           flex-direction: column;
   
           gap: 10px;
       }
   
   
       .hero-actions .btn {
           width: 100%;
       }
   
   
       .slider-arrow {
   
           top: auto;
   
           bottom: 20px;
   
           width: 42px;
   
           height: 42px;
   
           transform: none;
       }
   
   
       .slider-prev {
           left: 18px;
       }
   
   
       .slider-next {
           right: 18px;
       }
   
   
       .slider-dots {
           bottom: 35px;
       }
   
   
       /* -----------------------------------------------------
          GRIDS
          ----------------------------------------------------- */
   
       .about-features,
       .why-us-grid,
       .content-grid,
       .form-row,
       .footer-grid {
   
           grid-template-columns: 1fr;
       }
   
   
       .contact-panel,
       .form-card {
   
           padding: 20px;
       }
   
   
       .footer-bottom-inner {
   
           padding:
               18px 0;
   
           flex-direction: column;
   
           align-items: flex-start;
       }
   
   
       /* -----------------------------------------------------
          ADDITIONAL SERVICES
          ----------------------------------------------------- */
   
       .service-detail-card {
   
           padding:
               22px 18px;
       }
   
   
       .service-card-heading {
   
           align-items:
               flex-start;
   
           gap: 12px;
       }
   
   
       .service-card-number {
   
           width: 46px;
   
           height: 46px;
   
           font-size: .88rem;
       }
   
   
       .service-card-heading h2 {
           font-size: 1.18rem;
       }
   
   
       .additional-services-cta {
   
           padding:
               24px 20px;
   
           flex-direction: column;
   
           align-items: flex-start;
       }
   
   
       .additional-services-cta .btn {
           width: 100%;
       }
   
   
       /* -----------------------------------------------------
          HR
          ----------------------------------------------------- */
   
       .hr-solution-card {
   
           padding:
               22px 18px;
       }
   
   
       .hr-solution-heading {
   
           align-items:
               flex-start;
   
           gap: 12px;
       }
   
   
       .hr-solution-number {
   
           width: 46px;
   
           height: 46px;
   
           font-size: .88rem;
       }
   
   
       .hr-solution-heading h2 {
           font-size: 1.2rem;
       }
   
   
       .hr-process-card,
       .hr-benefits-content,
       .hr-benefits-panel {
   
           padding:
               22px 18px;
       }
   
   
       .hr-benefit-list {
           grid-template-columns: 1fr;
       }
   
   
       /* -----------------------------------------------------
          LABOUR
          ----------------------------------------------------- */
   
       .labour-services-grid {
           gap: 14px;
       }
   
   
       .labour-service-card {
   
           gap: 12px;
   
           padding:
               20px 17px;
       }
   
   
       .labour-service-number {
   
           width: 42px;
   
           height: 42px;
   
           flex-basis: 42px;
   
           font-size: .74rem;
       }
   
   
       .labour-service-card h3 {
           font-size: 1rem;
       }
   
   
       .labour-service-card p {
           font-size: .87rem;
       }
   
   
       .labour-support-content,
       .labour-contact-panel {
   
           padding:
               22px 18px;
       }
   
   
       .labour-benefit-list {
           grid-template-columns: 1fr;
       }
   
   
       /* -----------------------------------------------------
          E-LEARNING
          ----------------------------------------------------- */
   
       .elearning-intro-content,
       .elearning-summary-card,
       .elearning-audience-content,
       .elearning-cta-panel {
   
           padding:
               22px 18px;
       }
   
   
       .elearning-benefits-grid {
   
           grid-template-columns: 1fr;
   
           gap: 14px;
       }
   
   
       .elearning-benefit-card {
   
           padding:
               22px 18px;
       }
   
   
       .elearning-benefit-icon {
   
           width: 46px;
   
           height: 46px;
   
           margin-bottom: 16px;
   
           font-size: 1.2rem;
       }
   
   
       .elearning-benefit-number {
   
           top: 17px;
   
           right: 18px;
   
           font-size: 1.3rem;
       }
   
   
       .elearning-audience-item {
   
           gap: 12px;
   
           padding: 15px;
       }
   
   
       .elearning-audience-icon {
   
           width: 42px;
   
           height: 42px;
   
           flex-basis: 42px;
       }
   
   
       .elearning-closing {
   
           padding:
               48px 0;
       }
   
   
       .elearning-closing-content {
   
           text-align: left;
       }
   
   
       .elearning-closing-content .section-eyebrow {
   
           justify-content:
               flex-start;
       }
   
   
       /* -----------------------------------------------------
          DOCUMENTS
          ----------------------------------------------------- */
   
       .document-intro-content,
       .document-download-summary,
       .document-help-content,
       .document-contact-panel {
   
           padding:
               22px 18px;
       }
   
   
       .document-category-grid {
   
           grid-template-columns: 1fr;
   
           gap: 14px;
       }
   
   
       .document-category-card {
   
           padding:
               21px 18px;
       }
   
   
       .document-category-icon {
   
           width: 46px;
   
           height: 46px;
   
           font-size: 1.2rem;
       }
   
   
       .document-category-number {
           font-size: 1.3rem;
       }
   
   
       .document-category-card h3 {
           font-size: 1rem;
       }
   
   
       .document-category-card > p {
           font-size: .87rem;
       }
   
   
       .document-help-list {
           grid-template-columns: 1fr;
       }
   
   
       .document-category-actions {
           grid-template-columns: 1fr;
       }
   
   
       .document-library-cta {
   
           padding:
               23px 18px;
       }
   
   
       .document-library-cta-action,
       .document-library-cta-action .btn,
       .download-page-header .btn {
   
           width: 100%;
       }
   
   
       .download-category-filter {
   
           margin-right: -15px;
   
           margin-left: -15px;
   
           padding-right: 15px;
   
           padding-left: 15px;
   
           border-right: 0;
   
           border-left: 0;
   
           border-radius: 0;
       }
   
   
       .download-category-heading {
   
           gap: 18px;
   
           padding:
               20px 17px;
       }
   
   
       .download-category-title {
   
           gap: 12px;
       }
   
   
       .download-category-icon {
   
           width: 45px;
   
           height: 45px;
   
           flex-basis: 45px;
   
           font-size: 1.15rem;
       }
   
   
       .download-category-title h2 {
           font-size: 1.05rem;
       }
   
   
       .download-category-meta {
   
           display: grid;
   
           grid-template-columns: 1fr;
       }
   
   
       .download-category-meta .btn,
       .download-file-count {
   
           width: 100%;
       }
   
   
       .download-file-count {
           justify-content: center;
       }
   
   
       .download-file-card {
   
           align-items:
               flex-start;
   
           flex-direction:
               column;
   
           gap: 14px;
   
           padding: 17px;
       }
   
   
       .download-file-main {
   
           align-items:
               flex-start;
       }
   
   
       .download-file-button {
           width: 100%;
       }
   
   
       .download-file-details {
   
           gap:
               4px 9px;
       }
   
   
       .download-file-details span:not(:last-child)::after {
           right: -6px;
       }
   
   
       .documents-page {
           padding: 40px 0;
       }
   
   
       .document-category {
           padding: 18px;
       }
   
   
       .document-list {
           grid-template-columns: 1fr;
       }
   
   
       .document-list li {
           padding: 12px;
       }
   
   
       .download-overview {
   
           display: grid;
   
           grid-template-columns:
               repeat(2,minmax(0,1fr));
   
           gap: 10px;
       }
   
   
       .download-overview-item {
   
           min-width: 0;
   
           padding: 12px;
       }
   
   
       .download-overview-item > span {
   
           width: 38px;
   
           height: 38px;
   
           flex-basis: 38px;
       }
   
   
       .download-overview-item strong {
           font-size: 1.05rem;
       }
   
   
       .download-overview-item small {
           font-size: .68rem;
       }
   
   
       /* -----------------------------------------------------
          DOCUMENT CENTRE HERO
          ----------------------------------------------------- */
   
       .document-centre-hero {
   
           padding:
               70px 0;
   
           background-position:
               center center;
       }
   
   
       .document-centre-hero h1 {
           font-size: 2rem;
       }
   
   
       .document-centre-hero p {
           font-size: .95rem;
       }
   
   
       /* -----------------------------------------------------
          GRADUATES
          ----------------------------------------------------- */
   
       .graduate-list {
           grid-template-columns: 1fr;
       }
   
   
       .graduate-card {
           padding: 22px;
       }
   
   
       /* -----------------------------------------------------
          COOKIE
          ----------------------------------------------------- */
   
       .cookie-modal {
           padding: 12px;
       }
   
   }
   
   
   /* =========================================================
      VERY SMALL MOBILE
      ========================================================= */
   
   @media (max-width: 420px) {
   
       .hero-slider,
       .hero-slide,
       .hero-slide-inner {
   
           min-height: 540px;
   
           height: 540px;
       }
   
   
       .hero-content {
   
           padding:
               45px 18px 95px;
       }
   
   
       .hero-content h1,
       .hero-content h2 {
           font-size: 1.85rem;
       }
   
   
       .hero-content p {
           font-size: .9rem;
       }
   
   
       .section-title {
           font-size: 1.8rem;
       }
   
   
       .download-overview {
           grid-template-columns: 1fr;
       }
   
   }
   
   
   /* =========================================================
      LANDSCAPE MOBILE
      ========================================================= */
   
   @media (max-width: 900px)
   and (orientation: landscape) {
   
       .hero-slider,
       .hero-slide,
       .hero-slide-inner {
   
           min-height: 500px;
   
           height: 500px;
       }
   
   
       .slide-video,
       .hero-video video {
           object-fit: cover;
       }
   
   
       .hero-content {
   
           padding:
               45px 70px 80px;
       }
   
   
       .hero-content h1,
       .hero-content h2 {
           font-size: 2.2rem;
       }
   
   }
   
   
   /* =========================================================
      REDUCED MOTION
      ========================================================= */
   
   @media (prefers-reduced-motion: reduce) {
   
       html {
           scroll-behavior: auto;
       }
   
   
       *,
       *::before,
       *::after {
   
           animation-duration:
               .01ms !important;
   
           animation-iteration-count:
               1 !important;
   
           transition-duration:
               .01ms !important;
   
           scroll-behavior:
               auto !important;
       }
   
   }
  

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

@media (max-width: 520px) {

    .main-nav {
        top: 64px !important;

        left: 8px !important;
        right: 8px !important;

        width: auto !important;

        max-height: calc(100vh - 74px) !important;

        overflow-y: auto !important;
    }

}