/* ========================================
   GRAPHIK TRIAL FONT FAMILY
======================================== */

/*
Folder structure:

project/
├── index.html
├── css/
│   └── style.css
├── js/
│   └── script.js
├── img/
│   ├── leader.png
│   └── ci-recruitment-logo.svg
└── assets/
    └── fonts/
        ├── Graphik-Light-Trial.woff2
        ├── Graphik-Regular-Trial.woff2
        ├── Graphik-Medium-Trial.woff2
        └── Graphik-Semibold-Trial.woff2
 */

@font-face {
    font-family: "Graphik Trial";
    src: url("../assets/fonts/Graphik-Light-Trial.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Graphik Trial";
    src: url("../assets/fonts/Graphik-Regular-Trial.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Graphik Trial";
    src: url("../assets/fonts/Graphik-Medium-Trial.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Graphik Trial";
    src: url("../assets/fonts/Graphik-Semibold-Trial.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}


/* ========================================
   ROOT VARIABLES
======================================== */

:root {
    --primary-dark: #002c2f;
    --primary-darkest: #001f22;
    --primary-teal: #00474a;
    --secondary-teal: #087477;

    --accent-green: #d7ff00;

    --white: #ffffff;
    --light-text: rgba(255, 255, 255, 0.78);
    --muted-text: rgba(255, 255, 255, 0.62);

    --container-width: 1240px;
    --navbar-height: 82px;
}


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

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    overflow-x: hidden;

    font-family: "Graphik Trial", Arial, sans-serif;

    background: var(--primary-dark);
    color: var(--white);
}

body.menu-open {
    overflow: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

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

button {
    color: inherit;
}

img {
    display: block;
    max-width: 100%;
}




/* ========================================
   NAVBAR VARIABLES
======================================== */

:root {
    --nav-ink: #0A1022;
    --nav-copy: #4B5563;
    --nav-green: #00575a;
    --nav-deep: #002f32;
    --nav-white: #ffffff;
    --nav-width: 1320px;
}


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

.site-header {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;

    width: 100%;

    background: transparent;
    border: 0;
    box-shadow: none;

    transform: translateY(0);

    transition:
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}


/* Inner pages */

.inner-page .site-header {
    background: #ffffff;

    border-bottom:
        1px solid rgba(10, 16, 34, 0.08);
}


/* Scrolled header */

.site-header.scrolled {
    position: fixed;
    top: 0;
    left: 0;

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

    border-bottom:
        1px solid rgba(10, 16, 34, 0.08);

    box-shadow:
        0 12px 40px rgba(10, 16, 34, 0.08);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}


/* ========================================
   NAVBAR CONTAINER
======================================== */

.navbar-container {
    position: relative;

    width: min(var(--nav-width),
            calc(100% - 64px));

    min-height: 104px;

    margin: 0 auto;
    padding: 0;

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

    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;

    transition:
        min-height 0.3s ease;
}

.site-header.scrolled .navbar-container {
    min-height: 82px;
}

.navbar-container::before,
.navbar-container::after {
    content: none !important;
    display: none !important;
}


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

.site-logo {
    position: relative;
    z-index: 5;

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

    margin: 0;
    padding: 0;

    text-decoration: none;
}

.site-logo-image {
    width: 172px;
    height: auto;

    display: block;

    object-fit: contain;

    transition:
        width 0.3s ease,
        filter 0.3s ease;
}


/* Home page logo white */

.home-page .site-header:not(.scrolled) .site-logo-image {
    filter:
        brightness(0) invert(1);
}


/* Inner/scrolled logo dark */

.inner-page .site-logo-image,
.site-header.scrolled .site-logo-image {
    filter: none !important;
}

.site-header.scrolled .site-logo-image {
    width: 158px;
}


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

.main-navigation {
    position: relative;

    margin-left: auto;
}

.nav-list {
    margin: 0;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(30px, 2.2vw, 44px);

    list-style: none;
}

.nav-item {
    position: relative;

    margin: 0;
    padding: 0;

    flex-shrink: 0;

    list-style: none;
}

.nav-item::before,
.nav-item::after,
.nav-item::marker {
    content: none !important;
    display: none !important;
}


/* ========================================
   NAVIGATION LINKS
======================================== */

.nav-link {
    position: relative;

    min-height: 82px;

    padding: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    color: var(--nav-ink);
    text-decoration: none;
    white-space: nowrap;

    font-family:
        "Graphik Trial",
        Arial,
        sans-serif;

    font-size: 15px;
    font-weight: 500;
    line-height: 1;

    transition:
        color 0.25s ease;
}


/* Home page white links */

.home-page .site-header:not(.scrolled) .nav-link {
    color: rgba(255, 255, 255, 0.94);
}


/* Inner/scrolled dark links */

.inner-page .nav-link,
.site-header.scrolled .nav-link {
    color: var(--nav-ink);
}


/* Underline */

.nav-link::before {
    content: "";

    position: absolute;
    left: 0;
    bottom: 21px;

    width: 0;
    height: 1px;

    background: currentColor;

    transition:
        width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-link:hover,
.nav-link:focus-visible,
.has-dropdown:hover>.nav-link,
.has-dropdown:focus-within>.nav-link {
    color: var(--nav-green);
}

.home-page .site-header:not(.scrolled) .nav-link:hover,
.home-page .site-header:not(.scrolled) .has-dropdown:hover>.nav-link {
    color: #ffffff;
}

.nav-link:hover::before,
.nav-link:focus-visible::before,
.has-dropdown:hover>.nav-link::before,
.has-dropdown:focus-within>.nav-link::before {
    width: 100%;
}


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

.dropdown-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: inherit;

    font-size: 13px;
    line-height: 1;

    transition:
        transform 0.3s ease;
}

.has-dropdown:hover>.nav-link .dropdown-arrow,
.has-dropdown:focus-within>.nav-link .dropdown-arrow {
    transform: rotate(180deg);
}


/* ========================================
   DESKTOP LARGE MEGA MENU
======================================== */

@media (min-width: 992px) {

    .dropdown-menu.mega-menu {
        position: fixed;
        top: 76px;
        left: 50%;
        z-index: 1100;

        width: min(1300px,
                calc(100vw - 80px));

        min-height: 430px;

        margin: 0;
        padding: 64px 60px 52px;

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

        column-gap: 85px;
        row-gap: 0;

        overflow: hidden;

        background: #ffffff;

        border:
            1px solid rgba(10, 16, 34, 0.1);

        border-radius: 10px;

        box-shadow:
            0 32px 80px rgba(10, 16, 34, 0.16);

        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        transform:
            translateX(-50%) translateY(-18px) scale(0.985);

        transform-origin: top center;

        clip-path:
            inset(0 0 100% 0 round 10px);

        transition:
            opacity 0.25s ease,
            visibility 0.25s ease,
            transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
            clip-path 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    }


    /* Open menu */

    .has-dropdown:hover>.dropdown-menu.mega-menu,
    .has-dropdown:focus-within>.dropdown-menu.mega-menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;

        transform:
            translateX(-50%) translateY(0) scale(1);

        clip-path:
            inset(0 0 0 0 round 10px);
    }


    /* Hover bridge */

    .dropdown-menu.mega-menu::before {
        content: "";

        position: fixed;
        top: 64px;
        left: 0;

        width: 100%;
        height: 30px;
    }


    /* Subtle background shape */

    .dropdown-menu.mega-menu::after {
        content: "";

        position: absolute;
        top: -170px;
        right: -130px;

        width: 420px;
        height: 420px;

        background:
            radial-gradient(circle,
                rgba(0, 87, 90, 0.08),
                transparent 68%);

        border-radius: 50%;

        pointer-events: none;
    }


    /* ========================================
       MEGA MENU LINKS
    ======================================== */

    .dropdown-menu.mega-menu a {
        position: relative;
        z-index: 2;

        min-height: 64px;

        padding: 18px 48px 18px 30px;

        display: flex;
        align-items: center;

        color: var(--nav-ink);
        background: transparent;

        border: 0;
        border-bottom:
            1px solid rgba(10, 16, 34, 0.08);

        font-family:
            "Graphik Trial",
            Arial,
            sans-serif;

        font-size: 18px;
        font-weight: 500;
        line-height: 1.3;
        text-decoration: none;

        opacity: 0;

        transform: translateY(18px);

        transition:
            color 0.25s ease,
            background-color 0.25s ease,
            opacity 0.38s ease,
            transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }


    /* Dot */

    .dropdown-menu.mega-menu a::before {
        content: "";

        position: absolute;
        left: 5px;

        width: 7px;
        height: 7px;

        background: transparent;

        border: 1px solid var(--nav-green);
        border-radius: 50%;

        transition:
            background-color 0.25s ease,
            transform 0.25s ease;
    }


    /* Arrow */

    .dropdown-menu.mega-menu a::after {
        content: "↗";

        position: absolute;
        right: 16px;

        color: var(--nav-green);

        font-size: 17px;

        opacity: 0;

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

        transition:
            opacity 0.25s ease,
            transform 0.3s ease;
    }


    /* Reveal links */

    .has-dropdown:hover>.dropdown-menu.mega-menu a,
    .has-dropdown:focus-within>.dropdown-menu.mega-menu a {
        opacity: 1;

        transform: translateY(0);
    }


    /* Smooth stagger */

    .dropdown-menu.mega-menu a:nth-child(1),
    .dropdown-menu.mega-menu a:nth-child(2) {
        transition-delay: 0.08s;
    }

    .dropdown-menu.mega-menu a:nth-child(3),
    .dropdown-menu.mega-menu a:nth-child(4) {
        transition-delay: 0.12s;
    }

    .dropdown-menu.mega-menu a:nth-child(5),
    .dropdown-menu.mega-menu a:nth-child(6) {
        transition-delay: 0.16s;
    }

    .dropdown-menu.mega-menu a:nth-child(7),
    .dropdown-menu.mega-menu a:nth-child(8) {
        transition-delay: 0.20s;
    }

    .dropdown-menu.mega-menu a:nth-child(9),
    .dropdown-menu.mega-menu a:nth-child(10) {
        transition-delay: 0.24s;
    }

    .dropdown-menu.mega-menu a:nth-child(11),
    .dropdown-menu.mega-menu a:nth-child(12) {
        transition-delay: 0.28s;
    }


    /* Hover */

    .dropdown-menu.mega-menu a:hover,
    .dropdown-menu.mega-menu a:focus-visible {
        color: var(--nav-green);

        background:
            linear-gradient(90deg,
                rgba(0, 87, 90, 0.07),
                rgba(0, 87, 90, 0.01));
    }

    .dropdown-menu.mega-menu a:hover::before,
    .dropdown-menu.mega-menu a:focus-visible::before {
        background: var(--nav-green);

        transform: scale(1.15);
    }

    .dropdown-menu.mega-menu a:hover::after,
    .dropdown-menu.mega-menu a:focus-visible::after {
        opacity: 1;

        transform: translate(0, 0);
    }


    /* ========================================
       SERVICES MENU
    ======================================== */

    .nav-item.has-dropdown:first-child .dropdown-menu.mega-menu {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        min-height: 350px;
    }


    /* Services only 5 links */

    .nav-item.has-dropdown:first-child .dropdown-menu.mega-menu a {
        font-size: 19px;
    }


    /* ========================================
       FUNCTIONS MENU
    ======================================== */

    .nav-item.has-dropdown:nth-child(3) .dropdown-menu.mega-menu {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        column-gap: 50px;

        min-height: 430px;
    }
}


/* ========================================
   CONTACT BUTTON
======================================== */

.contact-button {
    min-height: 46px;

    padding: 12px 24px;

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

    color: var(--nav-ink);
    background: transparent;

    border:
        1px solid rgba(10, 16, 34, 0.65);

    border-radius: 100px;

    font-family:
        "Graphik Trial",
        Arial,
        sans-serif;

    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;

    transition:
        color 0.25s ease,
        background-color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}


/* Home contact button */

.home-page .site-header:not(.scrolled) .contact-button {
    color: #ffffff;

    border-color:
        rgba(255, 255, 255, 0.75);
}

.contact-button:hover,
.contact-button:focus-visible {
    color: #ffffff;
    background: var(--nav-green);
    border-color: var(--nav-green);

    transform: translateY(-2px);
}

.home-page .site-header:not(.scrolled) .contact-button:hover {
    color: var(--nav-ink);
    background: #ffffff;
    border-color: #ffffff;
}


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

.mobile-menu-button {
    position: relative;
    z-index: 1500;

    width: 44px;
    height: 44px;

    margin: 0;
    padding: 8px;

    display: none;

    background: transparent;
    border: 0;
    box-shadow: none;

    cursor: pointer;
}

.mobile-menu-button span {
    width: 25px;
    height: 2px;

    margin: 5px auto;

    display: block;

    background: var(--nav-ink);

    border-radius: 20px;

    transform-origin: center;

    transition:
        transform 0.3s ease,
        opacity 0.3s ease,
        background-color 0.3s ease;
}

.home-page .site-header:not(.scrolled) .mobile-menu-button span {
    background: #ffffff;
}

.mobile-menu-button.active span {
    background: #ffffff !important;
}

.mobile-menu-button.active span:nth-child(1) {
    transform:
        translateY(7px) rotate(45deg);
}

.mobile-menu-button.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-button.active span:nth-child(3) {
    transform:
        translateY(-7px) rotate(-45deg);
}


/* ========================================
   HEADER SCROLL STATES
======================================== */

.site-header.nav-hidden {
    transform: translateY(-110%);
}

.site-header.nav-visible {
    transform: translateY(0);
}


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

.menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 900;

    background:
        rgba(0, 18, 20, 0.62);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}

.menu-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* ========================================
   LAPTOP
======================================== */

@media (max-width: 1250px) and (min-width: 992px) {

    .navbar-container {
        width: calc(100% - 48px);

        gap: 26px;
    }

    .site-logo-image {
        width: 150px;
    }

    .nav-list {
        gap: 24px;
    }

    .nav-link {
        font-size: 13.5px;
    }

    .dropdown-menu.mega-menu {
        width: calc(100vw - 48px);

        padding: 50px 44px 42px;
    }

    .dropdown-menu.mega-menu a {
        font-size: 16px;
    }
}




/* ========================================
   MOBILE NAVBAR — FINAL CLEAN VERSION
   ONE SOURCE OF TRUTH
======================================== */

@media (max-width: 991px) {

    /* Header */
    .site-header,
    .inner-page .site-header,
    .home-page .site-header,
    .site-header.scrolled {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1600;
        width: 100%;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .site-header.scrolled {
        position: fixed;
    }

    /* Top navbar row */
    .navbar-container,
    .site-header.scrolled .navbar-container {
        position: relative;
        z-index: 1700;
        width: calc(100% - 28px);
        min-height: 68px;
        margin: 10px auto 0;
        padding: 0 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        /* background: #003f42 !important; */
        /* border: 1px solid rgba(255, 255, 255, 0.12) !important;
        border-radius: 0 !important;
        box-shadow: 0 16px 38px rgba(0, 48, 51, 0.18) !important; */
    }

    .navbar-container::before,
    .navbar-container::after {
        content: none !important;
        display: none !important;
    }

    /* Logo */
    .site-logo {
        position: relative;
        z-index: 1900;
        display: inline-flex !important;
        align-items: center;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .site-logo-image,
    .inner-page .site-logo-image,
    .home-page .site-logo-image,
    .site-header.scrolled .site-logo-image {
        width: 138px;
        height: auto;
        display: block !important;
        object-fit: contain;
        filter: brightness(0) invert(1) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Hamburger / close button */
    .mobile-menu-button {
        position: relative;
        z-index: 2000;
        width: 42px;
        height: 42px;
        margin: 0;
        padding: 9px;
        display: block !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 8px !important;
        box-shadow: none !important;
        cursor: pointer;
    }

    .mobile-menu-button span,
    .mobile-menu-button.active span {
        width: 23px;
        height: 2px;
        margin: 5px auto;
        display: block;
        background: #ffffff !important;
        border-radius: 20px;
        transform-origin: center;
        transition: transform 0.3s ease, opacity 0.25s ease, background-color 0.25s ease;
    }

    .mobile-menu-button.active span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .mobile-menu-button.active span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-button.active span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    /* White top-down mobile menu */
    .main-navigation {
        position: fixed !important;
        top: 10px !important;
        left: 50% !important;
        right: auto !important;
        z-index: 1800 !important;
        width: min(430px, calc(100% - 20px)) !important;
        height: auto !important;
        max-height: calc(100dvh - 20px) !important;
        margin: 0 !important;
        padding: 88px 22px 26px !important;
        display: block !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        background: #ffffff !important;
        border: 1px solid rgba(10, 16, 34, 0.1) !important;
        border-radius: 14px !important;
        box-shadow: 0 30px 80px rgba(10, 16, 34, 0.22) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translate(-50%, -35px) scale(0.97) !important;
        transform-origin: top center;
        transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.32s ease, visibility 0.32s ease !important;
    }

    .main-navigation.active {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translate(-50%, 0) scale(1) !important;
    }

    /* Menu open top row */
    body.menu-open .navbar-container {
        background: #ffffff !important;
        border-color: rgba(10, 16, 34, 0.1) !important;
        box-shadow: none !important;
    }

    body.menu-open .site-logo-image,
    body.menu-open .site-header .site-logo-image,
    body.menu-open .site-header.scrolled .site-logo-image {
        filter: brightness(0) saturate(100%) invert(7%) sepia(16%) saturate(1390%) hue-rotate(190deg) brightness(91%) contrast(102%) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    body.menu-open .mobile-menu-button {
        background: #ffffff !important;
    }

    body.menu-open .mobile-menu-button span {
        background: #0A1022 !important;
    }

    /* Nav list */
    .main-navigation .nav-list {
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        list-style: none;
    }

    .main-navigation .nav-item {
        width: 100%;
        margin: 0;
        padding: 0;
        border-bottom: 1px solid rgba(10, 16, 34, 0.1) !important;
    }

    /* Main menu links */
    .main-navigation .nav-link,
    .main-navigation .nav-item>.nav-link {
        width: 100% !important;
        min-height: 60px !important;
        margin: 0 !important;
        padding: 17px 0 !important;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        color: #0A1022 !important;
        background: transparent !important;
        font-size: 17px !important;
        font-weight: 500 !important;
        line-height: 1.25 !important;
        text-decoration: none;
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
    }

    .main-navigation .nav-link::before,
    .main-navigation .nav-link::after {
        content: none !important;
        display: none !important;
    }

    .main-navigation .nav-link:focus,
    .main-navigation .nav-link:focus-visible,
    .main-navigation .nav-link:active,
    .nav-item.has-dropdown.active>.nav-link {
        color: #0A1022 !important;
        background: transparent !important;
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
    }

    /* Dropdown arrow */
    .main-navigation .dropdown-arrow {
        width: 32px;
        height: 32px;
        margin-left: auto;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        color: #00575a !important;
        font-size: 0 !important;
        line-height: 1;
        border-radius: 50%;
        transition: background-color 0.25s ease, transform 0.35s ease;
    }

    .main-navigation .dropdown-arrow::before {
        content: "";
        width: 9px;
        height: 9px;
        display: block;
        border-right: 1.8px solid currentColor;
        border-bottom: 1.8px solid currentColor;
        transform: translateY(-2px) rotate(45deg);
        transition: transform 0.35s ease;
    }

    .nav-item.has-dropdown.active>.nav-link .dropdown-arrow {
        background: rgba(0, 87, 90, 0.08);
        transform: none !important;
    }

    .nav-item.has-dropdown.active>.nav-link .dropdown-arrow::before {
        transform: translateY(2px) rotate(225deg);
    }

    /* Mobile dropdown */
    .nav-item.has-dropdown>.dropdown-menu.mega-menu {
        position: static !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        overflow: hidden !important;
        background: #f7f9f9 !important;
        border: 0 !important;
        border-radius: 10px !important;
        box-shadow: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: none !important;
        transform: none !important;
        clip-path: none !important;
        transition: max-height 0.55s cubic-bezier(0.22, 1, 0.36, 1), margin 0.3s ease, padding 0.3s ease !important;
    }

    .nav-item.has-dropdown.active>.dropdown-menu.mega-menu {
        max-height: 1200px !important;
        margin: 2px 0 16px !important;
        padding: 10px !important;
        pointer-events: auto !important;
    }

    .dropdown-menu.mega-menu::before,
    .dropdown-menu.mega-menu::after {
        content: none !important;
        display: none !important;
    }

    .nav-item.has-dropdown>.dropdown-menu.mega-menu a {
        position: relative;
        width: 100% !important;
        min-height: 50px !important;
        padding: 13px 34px 13px 30px !important;
        display: flex !important;
        align-items: center;
        color: #344054 !important;
        background: transparent !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(10, 16, 34, 0.07) !important;
        border-radius: 4px !important;
        font-size: 15px !important;
        font-weight: 400 !important;
        line-height: 1.35 !important;
        text-decoration: none;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
        touch-action: manipulation;
    }

    .nav-item.has-dropdown>.dropdown-menu.mega-menu a:last-child {
        border-bottom: 0 !important;
    }

    .nav-item.has-dropdown>.dropdown-menu.mega-menu a::before {
        content: "";
        position: absolute;
        left: 11px !important;
        width: 6px !important;
        height: 6px !important;
        background: transparent;
        border: 1.5px solid #006064 !important;
        border-radius: 50%;
    }

    .nav-item.has-dropdown>.dropdown-menu.mega-menu a::after {
        content: "↗" !important;
        position: absolute;
        right: 11px !important;
        display: block !important;
        color: #006064 !important;
        font-size: 14px !important;
        opacity: 0.8 !important;
    }

    .nav-item.has-dropdown>.dropdown-menu.mega-menu a:hover,
    .nav-item.has-dropdown>.dropdown-menu.mega-menu a:focus-visible {
        color: #00575a !important;
        background: rgba(0, 87, 90, 0.07) !important;
        outline: 0 !important;
        box-shadow: none !important;
    }

    /* Contact button */
    .contact-button {
        width: 100% !important;
        min-height: 50px !important;
        margin: 24px 0 0 !important;
        padding: 14px 20px !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        color: #ffffff !important;
        background: #00575a !important;
        border: 1px solid #00575a !important;
        border-radius: 8px !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        text-decoration: none;
    }

    .contact-button:hover {
        color: #ffffff !important;
        background: #003f42 !important;
        border-color: #003f42 !important;
    }

    /* Overlay */
    .menu-overlay {
        position: fixed;
        inset: 0;
        z-index: 1500;
        background: rgba(10, 16, 34, 0.4) !important;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .menu-overlay.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    body.menu-open {
        overflow: hidden !important;
        touch-action: none;
    }
}

@media (max-width: 480px) {

    .navbar-container,
    .site-header.scrolled .navbar-container {
        width: calc(100% - 20px);
        min-height: 64px;
        margin-top: 8px;
        padding: 0 13px;
    }

    .site-logo-image,
    .site-header.scrolled .site-logo-image {
        width: 126px;
    }

    .mobile-menu-button {
        width: 40px;
        height: 40px;
    }

    .main-navigation {
        top: 8px !important;
        width: calc(100% - 16px) !important;
        max-height: calc(100dvh - 16px) !important;
        padding: 82px 17px 22px !important;
        border-radius: 12px !important;
    }

    .main-navigation .nav-link,
    .main-navigation .nav-item>.nav-link {
        min-height: 57px !important;
        font-size: 16px !important;
    }

    .main-navigation .dropdown-arrow {
        width: 30px;
        height: 30px;
    }

    .nav-item.has-dropdown>.dropdown-menu.mega-menu a {
        min-height: 48px !important;
        padding: 12px 31px 12px 29px !important;
        font-size: 14px !important;
    }
}


/* ========================================
   HERO BANNER SECTION
======================================== */

.hero-banner {
    position: relative;
    isolation: isolate;

    width: 100%;

    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;

    overflow: hidden;

    background: #002427;
}


/* ========================================
   HERO DARK BACKGROUND
======================================== */

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

    position: absolute;
    inset: 0;
    z-index: 0;

    background:
        linear-gradient(105deg,
            #001c1f 0%,
            #00272a 30%,
            #00383b 58%,
            #00282b 100%);

    pointer-events: none;
}


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

.hero-banner::after {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 5;

    background:
        radial-gradient(ellipse at 63% 45%,
            transparent 0%,
            transparent 38%,
            rgba(0, 13, 15, 0.12) 68%,
            rgba(0, 9, 11, 0.34) 100%);

    pointer-events: none;
}


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

.hero-container {
    position: relative;
    z-index: 6;

    width: min(var(--container-width),
            calc(100% - 64px));

    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;

    margin: 0 auto;

    display: grid;
    grid-template-columns: 48% 52%;
    align-items: center;
}


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

.hero-content {
    position: relative;
    z-index: 10;

    width: 100%;
    max-width: 590px;

    padding-top: 70px;
}


.hero-title {
    margin-bottom: 22px;

    font-size: clamp(48px, 4.8vw, 72px);
    font-weight: 300;
    line-height: 1.01;
    letter-spacing: -2px;
}

.hero-title em {
    color: var(--accent-green);

    font-weight: 300;
}

.hero-description {
    max-width: 420px;

    margin-bottom: 32px;

    color: var(--light-text);

    font-size: 18px;
    font-weight: 300;
    line-height: 1.65;
}

.hero-button {
    min-width: 185px;

    padding: 13px 23px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 100px;

    font-size: 13px;
    font-weight: 400;
    line-height: 1;

    transition:
        color 0.25s ease,
        background 0.25s ease,
        transform 0.25s ease;
}

.hero-button:hover {
    color: var(--primary-darkest);
    background: var(--white);

    transform: translateY(-2px);
}

.hero-button span {
    transition: transform 0.25s ease;
}

.hero-button:hover span {
    transform: translateX(4px);
}


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

.hero-image-area {
    position: absolute;

    right: 10px;
    bottom: 0;

    z-index: 7;

    width: 54%;
    height: calc(100% - 100px);

    display: flex;
    align-items: flex-end;
    justify-content: center;

    pointer-events: none;
}


.hero-image {

    position: relative;

    z-index: 2;

    width: auto;
    height: 92%;

    max-width: none;

    object-fit: contain;
    object-position: center bottom;

    filter:
        drop-shadow(-24px 12px 42px rgba(0, 0, 0, 0.24));
}


/* ========================================
   HERO GLOW COMMON
======================================== */

.hero-glow {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    will-change: transform, opacity;
}


/* ========================================
   MAIN TEAL GLOW
======================================== */

.hero-glow-one {
    top: -42%;
    left: 35%;
    z-index: 1;

    width: 1100px;
    height: 1100px;

    background:
        radial-gradient(circle,
            rgba(19, 190, 188, 0.74) 0%,
            rgba(12, 151, 151, 0.52) 20%,
            rgba(7, 107, 110, 0.3) 42%,
            rgba(4, 74, 78, 0.12) 58%,
            transparent 72%);

    filter: blur(26px);

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


/* ========================================
   SECONDARY TEAL GLOW
======================================== */

.hero-glow-two {
    right: -25%;
    bottom: -48%;
    z-index: 1;

    width: 900px;
    height: 900px;

    background:
        radial-gradient(circle,
            rgba(28, 153, 150, 0.38) 0%,
            rgba(10, 101, 103, 0.22) 40%,
            transparent 72%);

    filter: blur(46px);

    animation:
        secondaryGlowBreathing 9s ease-in-out infinite;
}


/* ========================================
   WARM LOWER-RIGHT GLOW
======================================== */

.hero-bottom-glow {
    position: absolute;
    right: -14%;
    bottom: -52%;
    z-index: 8;

    width: 760px;
    height: 680px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(218, 174, 104, 0.48) 0%,
            rgba(183, 132, 70, 0.27) 30%,
            rgba(135, 92, 48, 0.1) 52%,
            transparent 72%);

    filter: blur(48px);

    pointer-events: none;

    animation:
        warmGlowBreathing 8s ease-in-out infinite;
}


/* ========================================
   GLOW ANIMATIONS
======================================== */

@keyframes tealGlowBreathing {

    0%,
    100% {
        opacity: 0.65;
        transform: scale(0.94);
    }

    50% {
        opacity: 1;
        transform: scale(1.08);
    }
}

@keyframes secondaryGlowBreathing {

    0%,
    100% {
        opacity: 0.35;
        transform: scale(0.95);
    }

    50% {
        opacity: 0.72;
        transform: scale(1.1);
    }
}

@keyframes warmGlowBreathing {

    0%,
    100% {
        opacity: 0.38;
        transform: scale(0.94);
    }

    50% {
        opacity: 0.76;
        transform: scale(1.1);
    }
}


/* ========================================
   HERO TORN EDGE TRANSITION
======================================== */

.hero-torn-edge {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    z-index: 20;

    width: 100%;
    height: 190px;

    background: #ffffff;

    -webkit-mask-image: url("../img/torn-edge.svg");
    mask-image: url("../img/torn-edge.svg");

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;

    -webkit-mask-position: bottom center;
    mask-position: bottom center;

    pointer-events: none;
}


/* ========================================
   SHORT LAPTOP HEIGHT
======================================== */


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

@media (max-width: 991px) {

    .hero-torn-edge {
        height: 150px;
    }

    .hero-banner {
        min-height: 820px;
    }

    .hero-container {
        width: calc(100% - 40px);
        min-height: 820px;

        display: block;

        padding-top: 100px;
    }

    .hero-content {
        width: 100%;
        max-width: 520px;

        padding-top: 0;
    }

    .hero-title {
        font-size: 54px;
        line-height: 1.04;
    }

    .hero-description {
        max-width: 370px;
    }

    .hero-image-area {
        right: -85px;
        bottom: 0;

        width: 620px;
        height: 520px;
    }

    .hero-glow-one {
        top: 1%;
        left: -6%;

        width: 720px;
        height: 720px;

        filter: blur(34px);
    }

    .hero-glow-two {
        right: -48%;
        bottom: -18%;

        width: 650px;
        height: 650px;
    }

    .hero-bottom-glow {
        right: -36%;
        bottom: -32%;

        width: 580px;
        height: 520px;
    }
}


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

@media (max-width: 767px) {
    :root {
        --navbar-height: 70px;
    }

    .hero-banner {
        min-height: 740px;
    }

    .hero-container {
        width: calc(100% - 30px);
        /* min-height: 740px; */

        padding-top: 100px;
    }

    .hero-content {
        position: relative;
        z-index: 15;

        max-width: 100%;
    }

    .hero-torn-edge {
        height: 100px;
    }

    .hero-label {
        margin-bottom: 13px;

        font-size: 10px;
        line-height: 1.4;
        letter-spacing: 1.2px;
    }

    .hero-title {
        max-width: 360px;

        margin-bottom: 16px;

        font-size: clamp(38px, 10.7vw, 47px);
        line-height: 1.04;
        letter-spacing: -1.8px;
    }

    .hero-description {
        max-width: 285px;

        margin-bottom: 23px;

        font-size: 18px;
        line-height: 1.55;
    }

    .hero-button {
        min-width: 165px;

        padding: 12px 18px;

        font-size: 13px;
    }

    .hero-image-area {
        right: -125px;
        bottom: 0;

        width: 510px;
        height: 400px;
    }

    .hero-image {
        width: auto;
        height: 100%;
        max-width: none;

        object-position: right bottom;
    }

    .hero-glow-one {
        top: 16%;
        left: -68%;

        width: 620px;
        height: 620px;

        filter: blur(34px);
    }

    .hero-glow-two {
        right: -110%;
        bottom: -5%;

        width: 540px;
        height: 540px;

        filter: blur(40px);
    }

    .hero-bottom-glow {
        right: -86%;
        bottom: -19%;

        width: 500px;
        height: 440px;

        filter: blur(40px);
    }

    .hero-banner::after {
        background:
            linear-gradient(180deg,
                rgba(0, 22, 24, 0.08) 0%,
                transparent 50%,
                rgba(0, 12, 14, 0.18) 100%);
    }
}


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

@media (max-width: 480px) {
    .hero-banner {
        min-height: 700px;
    }

    .hero-container {
        width: calc(100% - 26px);
        min-height: 700px;

        padding-top: 88px;
    }

    .hero-torn-edge {
        height: 72px;
    }

    .hero-label {
        max-width: 260px;
    }

    .hero-title {
        max-width: 330px;

        font-size: clamp(35px, 10.5vw, 41px);
        letter-spacing: -1.5px;
    }

    .hero-description {
        max-width: 255px;

        font-size: 16px;
    }

    .hero-image-area {
        right: -140px;

        width: 465px;
        height: 390px;
    }

    .hero-glow-one {
        top: 18%;
        left: -90%;

        width: 580px;
        height: 580px;
    }
}


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

@media (max-width: 360px) {
    .site-logo-image {
        width: 105px;
    }

    .hero-container {
        padding-top: 88px;
    }

    .hero-title {
        font-size: 34px;
    }

    .hero-description {
        max-width: 230px;
    }

    .hero-image-area {
        right: -150px;

        width: 440px;
        height: 365px;
    }
}


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

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

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
    }

    .hero-glow,
    .hero-bottom-glow {
        animation: none;
    }

    .hero-button,
    .contact-button,
    .dropdown-menu,
    .main-navigation {
        transition: none;
    }
}


/* ========================================


HERO ENTRANCE ANIMATION
======================================== */

/* Label animation */

.hero-label {
    animation:
        heroTextReveal 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}

/* Heading animation */

.hero-title {
    animation:
        heroTextReveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.28s both;
}

/* Description animation */

.hero-description {
    animation:
        heroTextReveal 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both;
}

/* Button animation */

.hero-button {
    animation:
        heroButtonReveal 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.62s both;
}

/* Hero image animation */

.hero-image-area {
    transform-origin: right bottom;

    animation:
        heroImageReveal 1.3s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both;
}


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

@keyframes heroTextReveal {
    from {
        opacity: 0;

        transform:
            translate3d(0, 34px, 0);

        filter: blur(5px);
    }

    to {
        opacity: 1;

        transform:
            translate3d(0, 0, 0);

        filter: blur(0);
    }
}


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

@keyframes heroButtonReveal {
    from {
        opacity: 0;

        transform:
            translate3d(0, 24px, 0) scale(0.96);
    }

    to {
        opacity: 1;

        transform:
            translate3d(0, 0, 0) scale(1);
    }
}


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

@keyframes heroImageReveal {
    from {
        opacity: 0;

        transform:
            translate3d(80px, 20px, 0) scale(0.95);

        filter: blur(7px);
    }

    to {
        opacity: 1;

        transform:
            translate3d(0, 0, 0) scale(1);

        filter: blur(0);
    }
}


/* ========================================
   IMAGE SOFT FLOAT
======================================== */

.hero-image {
    transform-origin: bottom center;

    animation:
        heroImageFloat 7s ease-in-out 1.5s infinite;
}

@keyframes heroImageFloat {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform:
            translate3d(0, -7px, 0) scale(1.006);
    }
}


/* ========================================
   NEXT TEXT GLOW
======================================== */

.hero-title em {
    display: inline-block;

    animation:
        accentTextGlow 4.5s ease-in-out 1.3s infinite;
}

@keyframes accentTextGlow {

    0%,
    100% {
        text-shadow:
            0 0 0 rgba(215, 255, 0, 0);
    }

    50% {
        text-shadow:
            0 0 15px rgba(215, 255, 0, 0.15),
            0 0 28px rgba(215, 255, 0, 0.07);
    }
}


/* ========================================
   BUTTON ARROW HOVER
======================================== */

.hero-button {
    overflow: hidden;
}

.hero-button span {
    display: inline-block;
}

.hero-button:hover span {
    animation: heroArrowMove 0.6s ease;
}

@keyframes heroArrowMove {
    0% {
        transform: translateX(0);
    }

    45% {
        transform: translateX(7px);
    }

    46% {
        opacity: 0;
        transform: translateX(-7px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ========================================
   MOBILE HERO IMAGE POSITION
======================================== */

@media (max-width:767px) {

    .hero-image-area {

        right: -25px;
        bottom: 0;

        width: 100%;
        height: 400px;

        display: flex;
        justify-content: center;
        align-items: flex-end;
    }


    .hero-image {

        width: auto;
        height: 100%;

        max-width: none;

        object-fit: contain;
        object-position: center bottom;
    }


    @keyframes heroImageFloatMobile {

        0%,
        100% {
            transform: translate3d(0, 0, 0);
        }

        50% {
            transform: translate3d(0, -3px, 0);
        }
    }
}


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

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

    .hero-label,
    .hero-title,
    .hero-description,
    .hero-button,
    .hero-image-area,
    .hero-image,
    .hero-title em {
        opacity: 1;
        transform: none;
        filter: none;
        animation: none;
    }
}


/* ========================================
   INDUSTRY EXPERTISE SECTION
======================================== */

.industry-expertise-section {
    position: relative;
    padding: 108px 0 96px;
    overflow: hidden;
    background: #ffffff;
    color: #4B5563;
}

.industry-expertise-container {
    width: min(var(--container-width),
            calc(100% - 64px));

    margin: 0 auto;
}


/* ========================================
   INDUSTRY INTRODUCTION GRID
======================================== */

.industry-intro-grid {
    width: 100%;

    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 110px;

    align-items: start;
}

.industry-intro-left,
.industry-intro-right {
    min-width: 0;
}


/* ========================================
   INDUSTRY LEFT CONTENT
======================================== */

.industry-intro-heading {
    max-width: 510px;
    margin: 0;

    color: #0A1022;

    font-family: "Graphik Trial", Arial, sans-serif;
    font-size: clamp(42px, 3.4vw, 50px);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -2.2px;
}


/* ========================================
   INDUSTRY RIGHT CONTENT
======================================== */


.industry-intro-description {
    max-width: 610px;
    margin: 0;

    color: #4B5563;

    font-size: 16px;
    font-weight: 400;
    line-height: 1.72;
    letter-spacing: -0.18px;
}


/* ========================================
   INDUSTRY ANIMATED DIVIDER
======================================== */

.industry-expertise-divider {
    position: relative;

    width: 100%;
    height: 1px;

    margin: 88px 0 45px;

    overflow: hidden;

    background: rgba(15, 54, 59, 0.17);
}

.industry-expertise-divider span {
    position: absolute;
    top: 0;
    left: 0;

    width: 17%;
    height: 100%;

    background: #006064;

    animation:
        industryDividerMove 5.2s linear infinite;
}

@keyframes industryDividerMove {
    from {
        transform: translateX(-120%);
    }

    to {
        transform: translateX(700%);
    }
}


/* ========================================
   INDUSTRY STATISTICS GRID
======================================== */

.industry-statistics-grid {
    width: 100%;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 85px;
}

.industry-statistic-card {
    position: relative;
    min-width: 0;
}

.industry-statistic-top {
    margin-bottom: 19px;

    display: flex;
    align-items: flex-start;
}

.industry-statistic-number {
    color: #073c40;

    font-size: 43px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -1.7px;
}

.industry-statistic-symbol {
    margin: -1px 0 0 4px;

    color: #073c40;

    font-size: 25px;
    font-weight: 400;
    line-height: 1;
}

.industry-statistic-description {
    max-width: 300px;
    margin: 0;

    color: #4B5563;

    font-size: 16px;
    font-weight: 400;
    line-height: 1.65;
}


/* ========================================
   LAPTOP RESPONSIVE
======================================== */

@media (max-width: 1200px) {
    .industry-expertise-section {
        padding: 92px 0 88px;
    }

    .industry-expertise-container {
        width: min(1120px,
                calc(100% - 48px));
    }

    .industry-intro-grid {
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
        gap: 75px;
    }

    .industry-intro-heading {
        font-size: clamp(39px, 4vw, 52px);
    }

    .industry-intro-description {
        font-size: 18px;
    }

    .industry-statistics-grid {
        gap: 55px;
    }
}


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

@media (max-width: 991px) {
    .industry-expertise-section {
        padding: 76px 0 78px;
    }

    .industry-expertise-container {
        width: calc(100% - 40px);
    }

    .industry-intro-grid {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .industry-intro-heading {
        max-width: 650px;

        font-size: 45px;
        line-height: 1.1;
    }

    .industry-intro-right {
        padding-top: 0;
    }

    .industry-intro-description {
        max-width: 740px;

        font-size: 18px;
        line-height: 1.68;
    }

    .industry-expertise-divider {
        margin: 62px 0 40px;
    }

    .industry-statistics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 44px 50px;
    }

    .industry-statistic-card:last-child {
        grid-column: 1 / -1;
        max-width: calc(50% - 25px);
    }
}


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

@media (max-width: 767px) {
    .industry-expertise-section {
        padding: 62px 0 66px;
    }

    .industry-expertise-container {
        width: calc(100% - 30px);
    }

    .industry-intro-grid {
        gap: 26px;
    }

    .industry-expertise-label {
        margin-bottom: 18px;

        font-size: 12px;
    }

    .industry-intro-heading {
        max-width: 100%;

        font-size: clamp(34px, 9.5vw, 43px);
        line-height: 1.1;
        letter-spacing: -1.5px;
    }

    .industry-intro-description {
        max-width: 100%;

        font-size: 18px;
        line-height: 1.65;
    }

    .industry-expertise-divider {
        margin: 44px 0 32px;
    }

    .industry-expertise-divider span {
        width: 30%;
        animation-duration: 4.3s;
    }

    .industry-statistics-grid {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .industry-statistic-card,
    .industry-statistic-card:last-child {
        grid-column: auto;
        max-width: 100%;
    }

    .industry-statistic-number {
        font-size: 40px;
    }

    .industry-statistic-symbol {
        font-size: 23px;
    }

    .industry-statistic-description {
        max-width: 340px;
        font-size: 18px;
    }
}


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

@media (max-width: 480px) {
    .industry-expertise-container {
        width: calc(100% - 26px);
    }

    .industry-intro-heading {
        font-size: 34px;
    }

    .industry-intro-description {
        font-size: 18px;
    }

    .industry-statistic-number {
        font-size: 37px;
    }

    .industry-statistic-description {
        font-size: 18px;
    }
}


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

@media (prefers-reduced-motion: reduce) {
    .industry-expertise-divider span {
        animation: none;
        transform: none;
    }
}





/* ========================================
   INDUSTRIES SLIDER SECTION
======================================== */

.industries-slider-section {
    position: relative;
    isolation: isolate;

    padding: 84px 0 92px;

    overflow: hidden;

    background:
        radial-gradient(circle at 80% -8%,
            rgba(197, 154, 105, 0.34) 0%,
            rgba(142, 108, 74, 0.2) 20%,
            rgba(66, 75, 70, 0.08) 38%,
            transparent 56%),
        radial-gradient(circle at 102% 13%,
            rgba(0, 150, 146, 0.48) 0%,
            rgba(0, 112, 112, 0.3) 25%,
            rgba(0, 73, 76, 0.13) 47%,
            transparent 68%),
        linear-gradient(110deg,
            #00191c 0%,
            #002326 42%,
            #003235 72%,
            #004447 100%);

    color: #ffffff;
}


/* ========================================
   RIGHT TEAL BACKGROUND GLOW
======================================== */

.industries-slider-section::before {
    content: "";

    position: absolute;
    top: -260px;
    right: -160px;
    z-index: -1;

    width: 820px;
    height: 820px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(38, 191, 185, 0.25) 0%,
            rgba(14, 126, 124, 0.16) 36%,
            rgba(0, 78, 80, 0.07) 54%,
            transparent 72%);

    filter: blur(38px);

    pointer-events: none;
}


/* ========================================
   WARM TOP BACKGROUND GLOW
======================================== */

.industries-slider-section::after {
    content: "";

    position: absolute;
    top: -360px;
    right: 13%;
    z-index: -1;

    width: 700px;
    height: 650px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(222, 177, 124, 0.28) 0%,
            rgba(157, 116, 75, 0.15) 42%,
            transparent 72%);

    filter: blur(48px);

    pointer-events: none;
}


/* ========================================
   INDUSTRIES HEADER CONTAINER
======================================== */

.industries-slider-container {
    position: relative;
    z-index: 2;

    width: min(var(--container-width),
            calc(100% - 64px));

    margin: 0 auto;
}


/* ========================================
   INDUSTRIES SLIDER HEADER
======================================== */

.industries-slider-header {
    width: 100%;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
}

.industries-slider-title {
    max-width: 560px;

    margin: 0;

    color: #ffffff;

    font-family: "Graphik Trial", Arial, sans-serif;
    font-size: clamp(42px, 3.15vw, 56px);
    font-weight: 300;
    line-height: 1.02;
    letter-spacing: -2px;
}

.industries-slider-title em {
    display: block;

    color: #ffffff;

    font-family: "Graphik Trial", Arial, sans-serif;
    font-size: inherit;
    font-weight: 300;
    font-style: normal;
    line-height: inherit;
}

.industries-slider-title span {
    display: block;

    color: #ffffff;

    font-family: "Graphik Trial", Arial, sans-serif;
    font-weight: 300;
}





/* ========================================
   INDUSTRIES SLIDER CONTROLS
======================================== */

.industries-slider-controls {
    padding-bottom: 4px;

    display: flex;
    align-items: center;
    gap: 10px;
}

.industries-slider-arrow {
    width: 46px;
    height: 46px;

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

    color: #ffffff;
    background: rgba(255, 255, 255, 0.02);

    border: 1px solid rgba(255, 255, 255, 0.48);
    border-radius: 50%;

    font-family: "Graphik Trial", Arial, sans-serif;
    font-size: 17px;
    font-weight: 300;
    line-height: 1;

    cursor: pointer;

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    transition:
        color 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease,
        opacity 0.3s ease;
}

.industries-slider-arrow:hover {
    color: #002c2f;
    background: #ffffff;
    border-color: #ffffff;

    transform: scale(1.05);
}

.industries-slider-arrow:disabled {
    opacity: 0.3;
    pointer-events: none;
}


/* ========================================
   INDUSTRIES HEADER DIVIDER
======================================== */

.industries-slider-divider {
    width: 100%;
    height: 1px;

    margin: 34px 0 42px;

    background: rgba(255, 255, 255, 0.25);
}


/* ========================================
   FULL-WIDTH SLIDER VIEWPORT
======================================== */

.industries-slider-viewport {
    position: relative;
    z-index: 2;

    width: 100vw;

    margin-left: calc(50% - 50vw);

    overflow: hidden;
}

.industries-slider-track-wrap {
    width: 100%;
    overflow: hidden;
}



/* ========================================
   INDUSTRIES SLIDER TRACK
======================================== */

.industries-slider-track {
    display: flex;
    gap: 20px;

    padding-left: max(50px,
            calc((100vw - var(--container-width)) / 2));

    padding-right: 110px;

    transform: translate3d(0, 0, 0);

    transition:
        transform 1.05s cubic-bezier(0.22, 1, 0.36, 1);

    will-change: transform;
    touch-action: pan-y;
    cursor: grab;
    user-select: none;
}

.industries-slider-track.is-dragging {
    cursor: grabbing;
    transition: none;
}




/* ========================================
   INDUSTRY SLIDE CARD
======================================== */

.industry-slide-card {
    flex: 0 0 clamp(320px,
            23.5vw,
            440px);

    min-width: 0;
}

.industry-slide-link {
    display: block;

    height: 100%;

    color: inherit;
    text-decoration: none;

    transition:
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.industry-slide-link:hover {
    transform: translateY(-8px);
}


/* ========================================
   INDUSTRY CARD TITLE
======================================== */

.industry-slide-title {
    margin: 0 0 15px;

    color: #ffffff;

    font-family: "Graphik Trial", Arial, sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: -0.25px;
}


/* ========================================
   INDUSTRY IMAGE
======================================== */

.industry-slide-image-wrap {
    position: relative;

    width: 100%;
    aspect-ratio: 1.3 / 1;

    overflow: hidden;

    background: #002c2f;

    border: 0;
    border-radius: 12px;
    outline: 0;
    box-shadow: none;

    transform: translateZ(0);

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.industry-slide-image {
    position: absolute;
    top: -1px;
    left: -1px;

    width: calc(100% + 2px);
    height: calc(100% + 2px);
    max-width: none;

    display: block;

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

    border: 0;
    outline: 0;

    pointer-events: none;

    transform:
        scale(1.002) translateZ(0);

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    transition:
        transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.45s ease;
}

.industry-slide-link:hover .industry-slide-image {
    transform:
        scale(1.045) translateZ(0);

    filter: brightness(0.9);
}


/* ========================================
   INDUSTRY CARD DESCRIPTION
======================================== */

.industry-slide-description {
    max-width: 390px;

    margin: 16px 0 0;

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

    font-family: "Graphik Trial", Arial, sans-serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.58;
}


/* ========================================
   MOBILE DOTS
   HIDDEN ON DESKTOP
======================================== */

.industries-slider-dots {
    display: none;
}



/* ========================================
   INDUSTRIES SLIDER — MOBILE FINAL
======================================== */

@media (max-width: 767px) {

    .industries-slider-section {
        padding: 56px 0 64px;
    }

    .industries-slider-container {
        width: 100%;
        margin: 0;
        padding: 0 12px;
        box-sizing: border-box;
    }

    /* REMOVE ARROWS ON MOBILE */

    .industries-slider-controls {
        display: none !important;
    }

    .industries-slider-header {
        display: block !important;
        width: 100%;
    }

    /* HEADLINE — 2 LINES */

    .industries-slider-title {
        width: 100%;
        max-width: none;

        margin: 0;
        padding: 0 14px;

        box-sizing: border-box;

        font-size: 34px;
        line-height: 1.05;
        letter-spacing: -1.2px;
    }

    .industries-slider-title em,
    .industries-slider-title span {
        display: block;
        white-space: nowrap;
    }

    .industries-slider-divider {
        width: calc(100% - 28px);
        margin: 24px auto 32px;
    }

    /* VIEWPORT */

    .industries-slider-viewport {
        width: 100%;
        margin: 0;
        overflow: hidden;
    }

    .industries-slider-track-wrap {
        width: 100%;
        overflow: hidden;
    }

    .industries-slider-track {
        width: max-content;

        display: flex;
        gap: 10px;

        margin: 0;
        padding: 0;

        transform: translate3d(0, 0, 0);

        transition:
            transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* LARGE EDGE-TO-EDGE CARD */

    .industry-slide-card {
        flex: 0 0 calc(100vw - 34px);
        width: calc(100vw - 34px);
        max-width: none;
    }

    .industry-slide-title {
        margin: 0 0 12px;

        font-size: 20px;
        line-height: 1.3;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* IMAGE */

    .industry-slide-image-wrap {
        position: relative;

        width: 100%;
        aspect-ratio: 1.28 / 1;

        overflow: hidden;

        background: #00383b;

        border-radius: 12px;
    }

    .industry-slide-image {
        position: absolute;
        inset: 0;

        width: 100%;
        height: 100%;

        display: block;

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

        transform: none;
    }

    .industry-slide-link:hover,
    .industry-slide-link:hover .industry-slide-image {
        transform: none;
        filter: none;
    }

    /* DESCRIPTION */

    .industry-slide-description {
        margin: 16px 0 0;

        font-size: 16px;
        line-height: 1.55;
    }

    /* DOTS */

    .industries-slider-dots {
        width: 100%;

        margin: 20px 0 0;

        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 9px;
    }

    .industries-slider-dot {
        width: 8px;
        height: 8px;

        padding: 0;

        flex: 0 0 auto;

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

        border: 0;
        border-radius: 50%;

        transition:
            width 0.3s ease,
            background 0.3s ease;
    }

    .industries-slider-dot.is-active {
        width: 28px;
        height: 8px;

        background: #ffffff;
        border-radius: 20px;
    }
}


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

@media (max-width: 480px) {

    .industries-slider-container {
        padding: 0 10px;
    }

    .industries-slider-title {
        padding: 0 12px;
        font-size: 28px;
    }

    .industries-slider-divider {
        width: calc(100% - 24px);
    }

    .industry-slide-card {
        flex: 0 0 calc(100vw - 28px);
        width: calc(100vw - 28px);
    }

    .industry-slide-image-wrap {
        aspect-ratio: 1.24 / 1;
    }
}



/* ========================================
   LEADERSHIP SERVICES SECTION
======================================== */

.leadership-services-section {
    position: relative;
    isolation: isolate;

    padding: 104px 0 20px;

    overflow: visible;

    background:
        radial-gradient(circle at 10% 14%,
            rgba(255, 255, 255, 0.055),
            transparent 34%),
        radial-gradient(circle at 88% 88%,
            rgba(0, 117, 119, 0.035),
            transparent 30%),
        #ffffff;

    color: #d8e1e6;
}

.leadership-services-section::before {
    content: "";

    position: absolute;
    top: 85px;
    left: 4%;
    z-index: -1;

    width: 330px;
    height: 330px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(0, 103, 106, 0.055) 0%,
            rgba(0, 103, 106, 0.022) 42%,
            transparent 72%);

    filter: blur(22px);

    pointer-events: none;

    animation:
        leadershipGlowMove 8s ease-in-out infinite;
}

@keyframes leadershipGlowMove {

    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(0.96);
        opacity: 0.6;
    }

    50% {
        transform: translate3d(20px, 16px, 0) scale(1.05);
        opacity: 1;
    }
}


/* ========================================
   LEADERSHIP SERVICES CONTAINER
======================================== */

.leadership-services-container {
    width: min(var(--container-width),
            calc(100% - 64px));

    margin: 0 auto;

    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    gap: 118px;

    align-items: start;
}


/* ========================================
   LEFT INTRO CONTENT
======================================== */

.leadership-services-intro {
    position: sticky;
    top: 112px;

    align-self: start;

    max-width: 470px;

    padding-right: 20px;
}

.leadership-services-heading {
    position: relative;

    margin: 0 0 28px;
    padding-bottom: 24px;

    color: #0A1022;

    font-family: "Graphik Trial", Arial, sans-serif;
    font-size: clamp(42px, 3.3vw, 54px);
    font-weight: 400;
    line-height: 1.04;
    letter-spacing: -2px;
}

.leadership-services-heading::after {
    content: "";

    position: absolute;
    bottom: 0;
    left: 0;

    width: 58px;
    height: 2px;

    background: #006064;

    transform-origin: left center;

    transition:
        width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.leadership-services-intro:hover .leadership-services-heading::after {
    width: 96px;
}

.leadership-services-description {
    max-width: 440px;

    margin: 0 0 22px;

    color: #4B5563;

    font-family: "Graphik Trial", Arial, sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.72;
    letter-spacing: -0.08px;
}


/* ========================================
   RIGHT SERVICES LIST
======================================== */

.leadership-services-list {
    position: relative;

    width: 100%;

    border-top: 1px solid rgba(6, 48, 51, 0.23);
}


/* ========================================
   LEADERSHIP SERVICE ITEM
======================================== */

.leadership-service-item {
    position: relative;
    isolation: isolate;

    width: 100%;

    padding: 30px 10px 30px 0;

    display: block;

    overflow: hidden;

    border-bottom: 1px solid rgba(6, 48, 51, 0.28);

    color: inherit;
    text-decoration: none;

    transition:
        padding-left 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.35s ease,
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}



.leadership-service-item::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: -1;

    background:
        linear-gradient(90deg,
            rgba(0, 96, 100, 0.075) 0%,
            rgba(0, 96, 100, 0.025) 55%,
            transparent 100%);

    opacity: 0;

    transform: translateX(-18px);

    transition:
        opacity 0.4s ease,
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.leadership-service-item::after {
    content: "";

    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;

    width: 2px;

    background: #006064;

    transform: scaleY(0);
    transform-origin: center;

    transition:
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.leadership-service-item:hover {
    padding-left: 16px;

    border-color: rgba(0, 96, 100, 0.38);

    transform: translateX(3px);
}

.leadership-service-item:hover::before {
    opacity: 1;
    transform: translateX(0);
}

.leadership-service-item:hover::after {
    transform: scaleY(1);
}



/* ========================================
   SERVICE CONTENT
======================================== */

.leadership-service-content {
    min-width: 0;
}

.leadership-service-heading-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 25px;
}

.leadership-service-title {
    margin: 0;

    color: #0A1022;

    font-family: "Graphik Trial", Arial, sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -0.45px;

    transition:
        color 0.35s ease,
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.leadership-service-item:hover .leadership-service-title {
    color: #00585b;

    transform: translateX(2px);
}

.leadership-service-text {
    max-width: 540px;

    margin: 14px 0 0;

    color: #4B5563;

    font-family: "Graphik Trial", Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.65;

    transition:
        color 0.35s ease,
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.leadership-service-item:hover .leadership-service-text {
    color: #3f555b;

    transform: translateX(2px);
}


/* ========================================
   SERVICE ARROW
======================================== */

.leadership-service-arrow {
    flex-shrink: 0;

    width: 34px;
    height: 34px;

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

    border: 1px solid rgba(0, 82, 85, 0.22);
    border-radius: 50%;

    color: #173b3e;
    background: rgba(255, 255, 255, 0.6);

    font-family: "Graphik Trial", Arial, sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 1;

    transform: translateX(0);

    transition:
        color 0.35s ease,
        background 0.35s ease,
        border-color 0.35s ease,
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.leadership-service-item:hover .leadership-service-arrow {
    color: #ffffff;
    background: #006064;
    border-color: #006064;

    transform: translateX(5px) rotate(-4deg);
}


/* ========================================
   LAPTOP RESPONSIVE
======================================== */

@media (max-width: 1200px) {
    .leadership-services-section {
        padding: 90px 0 98px;
    }

    .leadership-services-container {
        width: min(1120px,
                calc(100% - 48px));

        grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
        gap: 78px;
    }

    .leadership-services-intro {
        top: 100px;
    }

    .leadership-services-heading {
        font-size: clamp(38px, 4vw, 49px);
    }

    .leadership-services-description {
        font-size: 18px;
    }

    .leadership-service-title {
        font-size: 20px;
    }

    .leadership-service-text {
        font-size: 18px;
    }
}


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

@media (max-width: 991px) {
    .leadership-services-section {
        padding: 76px 0 84px;

        overflow: hidden;
    }

    .leadership-services-container {
        width: calc(100% - 40px);

        grid-template-columns: 1fr;
        gap: 50px;
    }

    .leadership-services-intro {
        position: static;

        max-width: 720px;
        padding-right: 0;
    }

    .leadership-services-heading {
        font-size: 42px;
    }

    .leadership-services-description {
        max-width: 650px;
    }

    .leadership-services-list {
        max-width: 100%;
    }

    .leadership-service-item {
        padding-right: 0;
    }
}


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

@media (max-width: 767px) {
    .leadership-services-section {
        padding: 60px 0 68px;
    }

    .leadership-services-container {
        width: calc(100% - 30px);
        gap: 40px;
    }

    .leadership-services-heading {
        margin-bottom: 22px;
        padding-bottom: 18px;

        font-size: clamp(32px, 9vw, 40px);
        line-height: 1.08;
        letter-spacing: -1.35px;
    }

    .leadership-services-heading::after {
        width: 46px;
    }

    .leadership-services-description {
        margin-bottom: 18px;

        font-size: 18px;
        line-height: 1.68;
    }

    .leadership-service-item {
        padding: 24px 0;

        grid-template-columns: 30px minmax(0, 1fr);
        gap: 13px;
    }

    .leadership-service-item:hover {
        padding-left: 0;
        transform: none;
    }

    .leadership-service-item::after {
        display: none;
    }

    .leadership-service-item::before {
        display: none;
    }

    .leadership-service-number {
        font-size: 11px;
    }

    .leadership-service-title {
        font-size: 18px;
    }

    .leadership-service-text {
        margin-top: 11px;

        max-width: 100%;

        font-size: 14px;
        line-height: 1.62;
    }

    .leadership-service-arrow {
        width: 31px;
        height: 31px;

        font-size: 14px;
    }
}


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

@media (max-width: 480px) {
    .leadership-services-container {
        width: calc(100% - 26px);
    }

    .leadership-services-heading {
        font-size: 33px;
    }

    .leadership-services-description {
        font-size: 18px;
    }

    .leadership-service-item {
        grid-template-columns: 25px minmax(0, 1fr);
        gap: 10px;
    }

    .leadership-service-title {
        font-size: 20px;
    }

    .leadership-service-text {
        font-size: 18px;
    }

    .leadership-service-arrow {
        width: 29px;
        height: 29px;
    }
}


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

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

    .leadership-services-section::before,
    .leadership-services-heading::after,
    .leadership-service-item,
    .leadership-service-item::before,
    .leadership-service-item::after,
    .leadership-service-number,
    .leadership-service-title,
    .leadership-service-text,
    .leadership-service-arrow {
        animation: none;
        transition: none;
    }
}


/* ========================================
   INDUSTRIES SLIDER ENTRANCE ANIMATION
======================================== */

/* Initial hidden states */
.industries-slider-title,
.industries-slider-controls,
.industries-slider-divider,
.industry-slide-card {
    opacity: 0;
}

/* Heading */
.industries-slider-title {
    transform: translateY(48px);
}

/* Controls */
.industries-slider-controls {
    transform: translateX(30px);
}

/* Divider */
.industries-slider-divider {
    transform: scaleX(0);
    transform-origin: left center;
}

/* Cards */
.industry-slide-card {
    transform: translateY(58px);
}

/* ========================================
   VISIBLE STATE
======================================== */

.industries-slider-section.industries-visible .industries-slider-title {
    opacity: 1;
    transform: translateY(0);

    transition:
        opacity 0.75s ease,
        transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
}

.industries-slider-section.industries-visible .industries-slider-controls {
    opacity: 1;
    transform: translateX(0);

    transition:
        opacity 0.7s 0.15s ease,
        transform 0.9s 0.15s cubic-bezier(0.22, 1, 0.36, 1);
}

.industries-slider-section.industries-visible .industries-slider-divider {
    opacity: 1;
    transform: scaleX(1);

    transition:
        opacity 0.4s 0.22s ease,
        transform 1.1s 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ========================================
   CARD STAGGER
======================================== */

.industries-slider-section.industries-visible .industry-slide-card {
    opacity: 1;
    transform: translateY(0);

    transition:
        opacity 0.7s ease,
        transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
}

.industries-slider-section.industries-visible .industry-slide-card:nth-child(1) {
    transition-delay: 0.28s;
}

.industries-slider-section.industries-visible .industry-slide-card:nth-child(2) {
    transition-delay: 0.36s;
}

.industries-slider-section.industries-visible .industry-slide-card:nth-child(3) {
    transition-delay: 0.44s;
}

.industries-slider-section.industries-visible .industry-slide-card:nth-child(4) {
    transition-delay: 0.52s;
}

.industries-slider-section.industries-visible .industry-slide-card:nth-child(5) {
    transition-delay: 0.60s;
}

.industries-slider-section.industries-visible .industry-slide-card:nth-child(6) {
    transition-delay: 0.68s;
}

.industries-slider-section.industries-visible .industry-slide-card:nth-child(7) {
    transition-delay: 0.76s;
}

.industries-slider-section.industries-visible .industry-slide-card:nth-child(8) {
    transition-delay: 0.84s;
}

.industries-slider-section.industries-visible .industry-slide-card:nth-child(9) {
    transition-delay: 0.92s;
}

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

.industry-slide-image-wrap {
    clip-path: inset(0 0 100% 0 round 12px);

    transition:
        clip-path 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.industries-slider-section.industries-visible .industry-slide-image-wrap {
    clip-path: inset(0 0 0 0 round 12px);
}

.industries-slider-section.industries-visible .industry-slide-card:nth-child(1) .industry-slide-image-wrap {
    transition-delay: 0.34s;
}

.industries-slider-section.industries-visible .industry-slide-card:nth-child(2) .industry-slide-image-wrap {
    transition-delay: 0.42s;
}

.industries-slider-section.industries-visible .industry-slide-card:nth-child(3) .industry-slide-image-wrap {
    transition-delay: 0.50s;
}

.industries-slider-section.industries-visible .industry-slide-card:nth-child(4) .industry-slide-image-wrap {
    transition-delay: 0.58s;
}

.industries-slider-section.industries-visible .industry-slide-card:nth-child(5) .industry-slide-image-wrap {
    transition-delay: 0.66s;
}

/* ========================================
   CARD TITLE AND DESCRIPTION
======================================== */

.industry-slide-title,
.industry-slide-description {
    opacity: 0;
    transform: translateY(18px);
}

.industries-slider-section.industries-visible .industry-slide-title,
.industries-slider-section.industries-visible .industry-slide-description {
    opacity: 1;
    transform: translateY(0);

    transition:
        opacity 0.65s ease,
        transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.industries-slider-section.industries-visible .industry-slide-title {
    transition-delay: 0.4s;
}

.industries-slider-section.industries-visible .industry-slide-description {
    transition-delay: 0.52s;
}

/* ========================================
   CARD HOVER LIFT
======================================== */

.industry-slide-link {
    transition:
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.industry-slide-link:hover {
    transform: translateY(-8px);
}

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

@media (max-width: 767px) {
    .industry-slide-card {
        transform: translateY(38px);
    }

    .industries-slider-title {
        transform: translateY(34px);
    }

    .industry-slide-image-wrap {
        clip-path: inset(0 0 100% 0 round 10px);
    }

    .industries-slider-section.industries-visible .industry-slide-image-wrap {
        clip-path: inset(0 0 0 0 round 10px);
    }
}

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

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

    .industries-slider-title,
    .industries-slider-controls,
    .industries-slider-divider,
    .industry-slide-card,
    .industry-slide-image-wrap,
    .industry-slide-title,
    .industry-slide-description {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
        transition: none !important;
    }
}





/* ========================================
   FUNCTIONS WE SERVE SECTION
======================================== */

.functions-section {
    position: relative;
    isolation: isolate;

    padding: 104px 0 20px;

    overflow: hidden;

    background:
        radial-gradient(circle at 88% 12%,
            rgba(0, 94, 97, 0.055),
            transparent 32%),
        #ffffff;

    color: #4B5563;
}

.functions-section::before {
    content: "";

    position: absolute;
    top: 120px;
    right: -140px;
    z-index: -1;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(0, 105, 108, 0.075) 0%,
            transparent 68%);

    filter: blur(30px);

    pointer-events: none;
}

.functions-container {
    width: min(var(--container-width),
            calc(100% - 64px));

    margin: 0 auto;
}


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

.functions-header {
    margin-bottom: 48px;

    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 85px;

    align-items: start;
}


.functions-title {
    position: relative;

    margin: 0;
    padding-bottom: 22px;

    color: #0A1022;

    font-family: "Graphik Trial", Arial, sans-serif;
    font-size: clamp(42px, 3.2vw, 54px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -2px;
}

.functions-title::after {
    content: "";

    position: absolute;
    bottom: 0;
    left: 0;

    width: 56px;
    height: 2px;

    background: #006064;

    transition:
        width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.functions-header:hover .functions-title::after {
    width: 96px;
}

.functions-header-description {
    max-width: 590px;

    margin: 0 0 4px;

    color: #4B5563;

    font-family: "Graphik Trial", Arial, sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.72;
}


/* ========================================
   FUNCTIONS MAIN GRID
======================================== */

.functions-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: 22px;
}

.functions-small-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}


/* ========================================
   FUNCTION CARD
======================================== */

.function-card {
    position: relative;
    min-width: 0;
}

.function-card-wide {
    grid-column: 1 / -1;
}

.function-card-link {
    display: block;

    height: 100%;

    color: inherit;
    text-decoration: none;
}


/* ========================================
   FUNCTION IMAGE
======================================== */

.function-image-wrap {
    position: relative;

    width: 100%;

    overflow: hidden;

    border-radius: 14px;

    background: #dce5e3;
}

.function-card-large .function-image-wrap {
    aspect-ratio: 0.9 / 1;
}

.function-card-small .function-image-wrap {
    aspect-ratio: 1.48 / 1;
}

.function-card-wide .function-image-wrap {
    aspect-ratio: 1.85 / 1;
}

.function-image-wrap::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        linear-gradient(180deg,
            rgba(0, 28, 30, 0.02) 40%,
            rgba(0, 28, 30, 0.28) 100%);

    opacity: 0;

    transition: opacity 0.45s ease;

    pointer-events: none;
}

.function-image {
    width: 100%;
    height: 100%;

    display: block;

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

    transform: scale(1.001);

    transition:
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.45s ease;
}

.function-card-link:hover .function-image {
    transform: scale(1.055);
    filter: brightness(0.9);
}

.function-card-link:hover .function-image-wrap::before {
    opacity: 1;
}


/* ========================================
   FUNCTION CARD INDEX
======================================== */

.function-card-index {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;

    min-width: 34px;
    height: 34px;

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

    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 50%;

    color: #ffffff;
    background: rgba(0, 34, 36, 0.18);

    font-family: "Graphik Trial", Arial, sans-serif;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.5px;

    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}


/* ========================================
   FUNCTION CARD ARROW
======================================== */

.function-card-arrow {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 2;

    width: 38px;
    height: 38px;

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

    border-radius: 50%;

    color: #003f42;
    background: rgba(255, 255, 255, 0.94);

    font-family: "Graphik Trial", Arial, sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 1;

    opacity: 0;

    transform: translate3d(-8px, 8px, 0);

    transition:
        opacity 0.4s ease,
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.35s ease,
        color 0.35s ease;
}

.function-card-link:hover .function-card-arrow {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}


/* ========================================
   FUNCTION CARD CONTENT
======================================== */

.function-card-content {
    padding-top: 17px;
}

.function-card-title {
    margin: 0 0 9px;

    color: #0A1022;

    font-family: "Graphik Trial", Arial, sans-serif;
    font-size: 19px;
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: -0.4px;

    transition:
        color 0.35s ease,
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.function-card-description {
    max-width: 420px;

    margin: 0;

    color: #4B5563;

    font-family: "Graphik Trial", Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.65;

    transition:
        color 0.35s ease,
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.function-card-link:hover .function-card-title {
    color: #00585b;
    transform: translateX(3px);
}

.function-card-link:hover .function-card-description {
    color: #40575d;
    transform: translateX(3px);
}


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

.functions-footer {
    margin-top: 46px;

    display: flex;
    justify-content: center;
}

.functions-view-all {
    min-width: 165px;

    padding: 13px 20px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    border-radius: 100px;

    color: #ffffff;
    background: #006064;

    font-family: "Graphik Trial", Arial, sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;

    transition:
        background 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.functions-view-all:hover {
    background: #004f52;

    transform: translateY(-3px);

    box-shadow:
        0 12px 28px rgba(0, 83, 86, 0.18);
}

.functions-view-all-arrow {
    display: inline-block;

    transition:
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.functions-view-all:hover .functions-view-all-arrow {
    transform: translateX(5px);
}



.footer-policy-link {
    color: inherit;
    text-decoration: none;

    transition:
        color 0.3s ease,
        opacity 0.3s ease;
}

.footer-policy-link:hover {
    color: #ffffff;
    opacity: 0.75;
}




/* ========================================
   LAPTOP RESPONSIVE
======================================== */

@media (max-width: 1200px) {
    .functions-section {
        padding: 90px 0 98px;
    }

    .functions-container {
        width: min(1120px,
                calc(100% - 48px));
    }

    .functions-header {
        gap: 65px;
    }

    .functions-title {
        font-size: clamp(38px, 4vw, 49px);
    }

    .functions-grid,
    .functions-small-grid {
        gap: 18px;
    }

    .function-card-title {
        font-size: 18px;
    }
}


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

@media (max-width: 991px) {
    .functions-section {
        padding: 76px 0 84px;
    }

    .functions-container {
        width: calc(100% - 40px);
    }

    .functions-header {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .functions-header-description {
        max-width: 720px;
    }

    .functions-grid {
        grid-template-columns: 1fr;
    }

    .function-card-large .function-image-wrap {
        aspect-ratio: 1.55 / 1;
    }

    .functions-small-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .function-card-wide .function-image-wrap {
        aspect-ratio: 1.8 / 1;
    }
}


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

@media (max-width: 767px) {
    .functions-section {
        padding: 20px 0 68px;
    }

    .functions-container {
        width: calc(100% - 30px);
    }

    .functions-header {
        margin-bottom: 36px;
    }

    .functions-eyebrow {
        margin-bottom: 12px;

        font-size: 12px;
    }

    .functions-title {
        padding-bottom: 18px;

        font-size: clamp(32px, 9vw, 40px);
        line-height: 1.08;
        letter-spacing: -1.35px;
    }

    .functions-header-description {
        font-size: 18px;
        line-height: 1.68;
    }

    .functions-small-grid {
        grid-template-columns: 1fr;
    }

    .function-card-large .function-image-wrap,
    .function-card-small .function-image-wrap,
    .function-card-wide .function-image-wrap {
        aspect-ratio: 1.4 / 1;
    }

    .function-image-wrap {
        border-radius: 11px;
    }

    .function-card-content {
        padding-top: 14px;
    }

    .function-card-title {
        font-size: 18px;
    }

    .function-card-description {
        font-size: 16px;
    }

    .function-card-index {
        top: 13px;
        left: 13px;

        width: 31px;
        height: 31px;
    }

    .function-card-arrow {
        right: 13px;
        bottom: 13px;

        width: 34px;
        height: 34px;

        opacity: 1;
        transform: none;
    }

    .functions-footer {
        margin-top: 38px;
    }
}


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

@media (max-width: 480px) {
    .functions-container {
        width: calc(100% - 26px);
    }

    .functions-title {
        font-size: 33px;
    }

    .functions-header-description {
        font-size: 18px;
    }

    .function-card-title {
        font-size: 18px;
    }

    .function-card-description {
        font-size: 16px;
    }

    .functions-view-all {
        min-width: 150px;

        padding: 12px 17px;

        font-size: 13px;
    }
}



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

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

    .functions-title::after,
    .function-image,
    .function-image-wrap::before,
    .function-card-arrow,
    .function-card-title,
    .function-card-description,
    .functions-view-all,
    .functions-view-all-arrow {
        transition: none;
    }
}



/* ========================================
   FUNCTIONS SECTION SCROLL ANIMATION
======================================== */

/* Initial hidden state */
.functions-title,
.functions-header-description,
.function-card,
.functions-footer {
    opacity: 0;
}

.functions-title {
    transform: translateY(42px);
}

.functions-header-description {
    transform: translateY(34px);
}

.function-card {
    transform: translateY(52px);
}

.functions-footer {
    transform: translateY(28px);
}

/* Heading underline */
.functions-title::after {
    transform: scaleX(0);
    transform-origin: left center;
}

/* Image reveal */
.function-image-wrap {
    clip-path: inset(0 0 100% 0 round 14px);

    transition:
        clip-path 1.05s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ========================================
   VISIBLE STATE
======================================== */

.functions-section.functions-visible .functions-title {
    opacity: 1;
    transform: translateY(0);

    transition:
        opacity 0.75s ease,
        transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
}

.functions-section.functions-visible .functions-header-description {
    opacity: 1;
    transform: translateY(0);

    transition:
        opacity 0.75s 0.12s ease,
        transform 0.95s 0.12s cubic-bezier(0.22, 1, 0.36, 1);
}

.functions-section.functions-visible .functions-title::after {
    transform: scaleX(1);

    transition:
        transform 0.85s 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

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

.functions-section.functions-visible .function-card {
    opacity: 1;
    transform: translateY(0);

    transition:
        opacity 0.72s ease,
        transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
}

.functions-section.functions-visible .function-card:nth-child(1) {
    transition-delay: 0.18s;
}

.functions-section.functions-visible .function-card:nth-child(2) {
    transition-delay: 0.28s;
}

.functions-section.functions-visible .function-card:nth-child(3) {
    transition-delay: 0.38s;
}

.functions-section.functions-visible .function-card:nth-child(4) {
    transition-delay: 0.48s;
}

/* Image curtain reveal */
.functions-section.functions-visible .function-image-wrap {
    clip-path: inset(0 0 0 0 round 14px);
}

.functions-section.functions-visible .function-card:nth-child(1) .function-image-wrap {
    transition-delay: 0.24s;
}

.functions-section.functions-visible .function-card:nth-child(2) .function-image-wrap {
    transition-delay: 0.34s;
}

.functions-section.functions-visible .function-card:nth-child(3) .function-image-wrap {
    transition-delay: 0.44s;
}

.functions-section.functions-visible .function-card:nth-child(4) .function-image-wrap {
    transition-delay: 0.54s;
}

/* ========================================
   CARD TEXT REVEAL
======================================== */

.function-card-title,
.function-card-description,
.function-card-index {
    opacity: 0;
    transform: translateY(16px);
}

.functions-section.functions-visible .function-card-title,
.functions-section.functions-visible .function-card-description,
.functions-section.functions-visible .function-card-index {
    opacity: 1;
    transform: translateY(0);

    transition:
        opacity 0.6s ease,
        transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.functions-section.functions-visible .function-card-title {
    transition-delay: 0.42s;
}

.functions-section.functions-visible .function-card-description {
    transition-delay: 0.5s;
}

.functions-section.functions-visible .function-card-index {
    transition-delay: 0.35s;
}

/* ========================================
   VIEW ALL BUTTON
======================================== */

.functions-section.functions-visible .functions-footer {
    opacity: 1;
    transform: translateY(0);

    transition:
        opacity 0.7s 0.65s ease,
        transform 0.9s 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

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

@media (max-width: 767px) {
    .functions-title {
        transform: translateY(30px);
    }

    .functions-header-description {
        transform: translateY(26px);
    }

    .function-card {
        transform: translateY(36px);
    }

    .function-image-wrap {
        clip-path: inset(0 0 100% 0 round 11px);
    }

    .functions-section.functions-visible .function-image-wrap {
        clip-path: inset(0 0 0 0 round 11px);
    }
}

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

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

    .functions-title,
    .functions-header-description,
    .function-card,
    .functions-footer,
    .function-card-title,
    .function-card-description,
    .function-card-index,
    .function-image-wrap {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
        transition: none !important;
    }

    .functions-title::after {
        transform: scaleX(1) !important;
    }
}



/* ========================================
   CASE STUDIES SECTION
======================================== */

.case-studies-section {
    position: relative;
    isolation: isolate;

    padding: 105px 0 10px;

    overflow: hidden;

    background: #ffffff;

    color: #4B5563;
}

.case-studies-section::before {
    content: "";

    position: absolute;
    top: 80px;
    right: -130px;
    z-index: -1;

    width: 410px;
    height: 410px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(0, 101, 104, 0.075) 0%,
            rgba(0, 101, 104, 0.028) 45%,
            transparent 72%);

    filter: blur(32px);

    pointer-events: none;
}

.case-studies-container {
    width: min(var(--container-width),
            calc(100% - 64px));

    margin: 0 auto;
}


/* ========================================
   CASE STUDIES HEADER
======================================== */

.case-studies-header {
    margin-bottom: 48px;

    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 70px;

    align-items: end;
}

.case-studies-header-copy {
    max-width: none;
}

.case-studies-eyebrow {
    display: block;

    margin-bottom: 17px;

    color: #315158;

    font-family: "Graphik Trial", Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.45px;
    text-transform: uppercase;
}

.case-studies-title {
    position: relative;
    max-width: none;
    white-space: nowrap;

    margin: 0;
    padding-bottom: 24px;

    color: #0A1022;

    font-family: "Graphik Trial", Arial, sans-serif;
    font-size: clamp(36px, 2.8vw, 35px);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -1.7px;
}

.case-studies-title::after {
    content: "";

    position: absolute;
    bottom: 0;
    left: 0;

    width: 58px;
    height: 2px;

    background: #006064;

    transition:
        width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.case-studies-header:hover .case-studies-title::after {
    width: 98px;
}


/* ========================================
   SEE ALL BUTTON
======================================== */

.case-studies-header-action {
    padding-bottom: 5px;
}

.case-studies-view-all {
    min-width: 125px;

    padding: 13px 19px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;

    border: 1px solid #006064;
    border-radius: 100px;

    color: #ffffff;
    background: #006064;

    font-family: "Graphik Trial", Arial, sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;

    transition:
        color 0.3s ease,
        background 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.case-studies-view-all:hover {
    color: #006064;
    background: transparent;

    transform: translateY(-3px);

    box-shadow:
        0 12px 26px rgba(0, 86, 89, 0.14);
}

.case-studies-view-all-arrow {
    display: inline-block;

    transition:
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.case-studies-view-all:hover .case-studies-view-all-arrow {
    transform: translateX(5px);
}


/* ========================================
   CASE STUDIES GRID
======================================== */

.case-studies-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.88fr) minmax(0, 0.88fr);
    gap: 20px;

    align-items: start;
}


/* ========================================
   CASE STUDY CARD
======================================== */

.case-study-card {
    position: relative;
    min-width: 0;
}

.case-study-link {
    display: block;

    height: 100%;

    color: inherit;
    text-decoration: none;
}


/* ========================================
   CASE STUDY IMAGE
======================================== */

.case-study-image-wrap {
    position: relative;

    width: 100%;

    overflow: hidden;

    border-radius: 14px;

    background: #dbe5e3;
}

.case-study-card-featured .case-study-image-wrap {
    aspect-ratio: 1.34 / 1;
}

.case-study-card:not(.case-study-card-featured) .case-study-image-wrap {
    aspect-ratio: 1.12 / 1;
}

.case-study-image {
    width: 100%;
    height: 100%;

    display: block;

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

    transform: scale(1.001);

    transition:
        transform 0.95s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.5s ease;
}

.case-study-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        linear-gradient(180deg,
            rgba(0, 25, 27, 0.02) 35%,
            rgba(0, 25, 27, 0.46) 100%);

    opacity: 0;

    transition: opacity 0.45s ease;

    pointer-events: none;
}

.case-study-link:hover .case-study-image {
    transform: scale(1.055);
    filter: brightness(0.92);
}

.case-study-link:hover .case-study-overlay {
    opacity: 1;
}


/* ========================================
   CASE STUDY INDEX
======================================== */

.case-study-index {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;

    width: 34px;
    height: 34px;

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

    border: 1px solid rgba(255, 255, 255, 0.52);
    border-radius: 50%;

    color: #ffffff;
    background: rgba(0, 37, 39, 0.18);

    font-family: "Graphik Trial", Arial, sans-serif;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.5px;

    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}


/* ========================================
   CASE STUDY CATEGORY
======================================== */

.case-study-category {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 2;

    padding: 8px 12px;

    border: 1px solid rgba(255, 255, 255, 0.38);
    border-radius: 100px;

    color: #ffffff;
    background: rgba(0, 38, 40, 0.28);

    font-family: "Graphik Trial", Arial, sans-serif;
    font-size: 10px;
    font-weight: 500;
    line-height: 1;

    opacity: 0;

    transform: translateY(8px);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    transition:
        opacity 0.4s ease,
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.case-study-link:hover .case-study-category {
    opacity: 1;
    transform: translateY(0);
}


/* ========================================
   CASE STUDY ARROW
======================================== */

.case-study-arrow {
    position: absolute;
    left: 16px;
    bottom: 16px;
    z-index: 2;

    width: 38px;
    height: 38px;

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

    border-radius: 50%;

    color: #003f42;
    background: rgba(255, 255, 255, 0.94);

    font-family: "Graphik Trial", Arial, sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 1;

    opacity: 0;

    transform: translate3d(-8px, 8px, 0);

    transition:
        opacity 0.4s ease,
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.case-study-link:hover .case-study-arrow {
    opacity: 1;

    transform: translate3d(0, 0, 0);
}


/* ========================================
   CASE STUDY CONTENT
======================================== */

.case-study-content {
    padding-top: 17px;
}

.case-study-heading {
    margin: 0 0 10px;

    color: #0A1022;

    font-family: "Graphik Trial", Arial, sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: -0.45px;

    transition:
        color 0.35s ease,
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.case-study-description {
    max-width: 420px;

    margin: 0;

    color: #4B5563;

    font-family: "Graphik Trial", Arial, sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.65;

    transition:
        color 0.35s ease,
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.case-study-link:hover .case-study-heading {
    color: #00585b;

    transform: translateX(3px);
}

.case-study-link:hover .case-study-description {
    color: #40575d;

    transform: translateX(3px);
}


/* ========================================
   LAPTOP RESPONSIVE
======================================== */

@media (max-width: 1200px) {
    .case-studies-section {
        padding: 90px 0 98px;
    }

    .case-studies-container {
        width: min(1120px,
                calc(100% - 48px));
    }

    .case-studies-title {
        font-size: clamp(34px, 3.5vw, 35px);
    }

    .case-studies-grid {
        gap: 18px;
    }

    .case-study-heading {
        font-size: 20px;
    }
}


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

@media (max-width: 991px) {
    .case-studies-section {
        padding: 76px 0 84px;
    }

    .case-studies-container {
        width: calc(100% - 40px);
    }

    .case-studies-header {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .case-studies-header-action {
        padding-bottom: 0;
    }

    .case-studies-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .case-study-card-featured {
        grid-column: 1 / -1;
    }

    .case-study-card-featured .case-study-image-wrap {
        aspect-ratio: 1.7 / 1;
    }

    .case-study-card:not(.case-study-card-featured) .case-study-image-wrap {
        aspect-ratio: 1.3 / 1;
    }
}


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

@media (max-width: 767px) {
    .case-studies-section {
        padding: 10px 0 68px;
    }

    .case-studies-container {
        width: calc(100% - 30px);
    }

    .case-studies-header {
        margin-bottom: 36px;
    }

    .case-studies-eyebrow {
        margin-bottom: 13px;

        font-size: 12px;
    }

    .case-studies-title {
        padding-bottom: 19px;
        white-space: normal;
        font-size: clamp(30px, 8vw, 30px);
        line-height: 1.13;
        letter-spacing: -1.2px;
    }

    .case-studies-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .case-study-card-featured {
        grid-column: auto;
    }

    .case-study-card-featured .case-study-image-wrap,
    .case-study-card:not(.case-study-card-featured) .case-study-image-wrap {
        aspect-ratio: 1.35 / 1;
    }

    .case-study-image-wrap {
        border-radius: 11px;
    }

    .case-study-index {
        top: 13px;
        left: 13px;

        width: 31px;
        height: 31px;
    }

    .case-study-arrow {
        left: 13px;
        bottom: 13px;

        width: 34px;
        height: 34px;

        opacity: 1;
        transform: none;
    }

    .case-study-category {
        right: 13px;
        bottom: 13px;

        opacity: 1;
        transform: none;
    }

    .case-study-heading {
        font-size: 20px;
    }

    .case-study-description {
        font-size: 16px;
    }
}


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

@media (max-width: 480px) {
    .case-studies-container {
        width: calc(100% - 26px);
    }

    .case-studies-title {
        font-size: 26px;
    }

    .case-studies-view-all {
        min-width: 115px;

        padding: 12px 17px;

        font-size: 13px;
    }

    .case-study-heading {
        font-size: 20px;
    }

    .case-study-description {
        font-size: 16px;
    }
}


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

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

    .case-studies-title::after,
    .case-studies-view-all,
    .case-studies-view-all-arrow,
    .case-study-image,
    .case-study-overlay,
    .case-study-category,
    .case-study-arrow,
    .case-study-heading,
    .case-study-description {
        transition: none;
    }
}



/* ========================================
   CASE STUDIES SCROLL ANIMATION
======================================== */

/* Initial hidden state */
.case-studies-title,
.case-studies-header-action,
.case-study-card {
    opacity: 0;
}


.case-studies-title {
    transform: translateY(38px);
}

.case-studies-header-action {
    transform: translateX(28px);
}

.case-study-card {
    transform: translateY(52px);
}

/* Heading underline initial state */
.case-studies-title::after {
    transform: scaleX(0);
    transform-origin: left center;
}

/* Image reveal initial state */
.case-study-image-wrap {
    clip-path: inset(0 0 100% 0 round 14px);

    transition:
        clip-path 1.05s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Card content initial state */
.case-study-index,
.case-study-heading,
.case-study-description {
    opacity: 0;
    transform: translateY(16px);
}

/* ========================================
   VISIBLE STATE
======================================== */


.case-studies-section.case-studies-visible .case-studies-title {
    opacity: 1;
    transform: translateY(0);

    transition:
        opacity 0.75s 0.08s ease,
        transform 0.95s 0.08s cubic-bezier(0.22, 1, 0.36, 1);
}

.case-studies-section.case-studies-visible .case-studies-header-action {
    opacity: 1;
    transform: translateX(0);

    transition:
        opacity 0.7s 0.2s ease,
        transform 0.9s 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.case-studies-section.case-studies-visible .case-studies-title::after {
    transform: scaleX(1);

    transition:
        transform 0.85s 0.3s cubic-bezier(0.22, 1, 0.36, 1),
        width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

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

.case-studies-section.case-studies-visible .case-study-card {
    opacity: 1;
    transform: translateY(0);

    transition:
        opacity 0.72s ease,
        transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
}

.case-studies-section.case-studies-visible .case-study-card:nth-child(1) {
    transition-delay: 0.22s;
}

.case-studies-section.case-studies-visible .case-study-card:nth-child(2) {
    transition-delay: 0.34s;
}

.case-studies-section.case-studies-visible .case-study-card:nth-child(3) {
    transition-delay: 0.46s;
}

/* Image curtain reveal */
.case-studies-section.case-studies-visible .case-study-image-wrap {
    clip-path: inset(0 0 0 0 round 14px);
}

.case-studies-section.case-studies-visible .case-study-card:nth-child(1) .case-study-image-wrap {
    transition-delay: 0.28s;
}

.case-studies-section.case-studies-visible .case-study-card:nth-child(2) .case-study-image-wrap {
    transition-delay: 0.40s;
}

.case-studies-section.case-studies-visible .case-study-card:nth-child(3) .case-study-image-wrap {
    transition-delay: 0.52s;
}

/* ========================================
   CARD CONTENT REVEAL
======================================== */

.case-studies-section.case-studies-visible .case-study-index,
.case-studies-section.case-studies-visible .case-study-heading,
.case-studies-section.case-studies-visible .case-study-description {
    opacity: 1;
    transform: translateY(0);

    transition:
        opacity 0.6s ease,
        transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.case-studies-section.case-studies-visible .case-study-index {
    transition-delay: 0.38s;
}

.case-studies-section.case-studies-visible .case-study-heading {
    transition-delay: 0.48s;
}

.case-studies-section.case-studies-visible .case-study-description {
    transition-delay: 0.58s;
}

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

@media (max-width: 767px) {
    .case-studies-title {
        transform: translateY(28px);
    }

    .case-studies-header-action {
        transform: translateY(22px);
    }

    .case-study-card {
        transform: translateY(36px);
    }

    .case-study-image-wrap {
        clip-path: inset(0 0 100% 0 round 11px);
    }

    .case-studies-section.case-studies-visible .case-study-image-wrap {
        clip-path: inset(0 0 0 0 round 11px);
    }
}

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

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

    .case-studies-eyebrow,
    .case-studies-title,
    .case-studies-header-action,
    .case-study-card,
    .case-study-index,
    .case-study-heading,
    .case-study-description,
    .case-study-image-wrap {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
        transition: none !important;
    }

    .case-studies-title::after {
        transform: scaleX(1) !important;
    }
}



/* ========================================
   LEADERSHIP CTA SECTION
======================================== */

.leadership-cta-section {
    position: relative;

    padding: 96px 0 104px;

    overflow: hidden;

    background: #ffffff;
}

.leadership-cta-container {
    width: min(var(--container-width),
            calc(100% - 64px));

    margin: 0 auto;
}


/* ========================================
   LEADERSHIP CTA PANEL
======================================== */

.leadership-cta-panel {
    position: relative;
    isolation: isolate;

    min-height: 320px;

    padding: 64px 70px;

    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 70px;

    align-items: center;

    overflow: hidden;

    border-radius: 18px;

    background:
        radial-gradient(circle at 82% 10%,
            rgba(44, 178, 172, 0.22),
            transparent 34%),
        radial-gradient(circle at 92% 88%,
            rgba(197, 151, 102, 0.15),
            transparent 36%),
        linear-gradient(110deg,
            #00383b 0%,
            #005157 55%,
            #00676a 100%);

    box-shadow:
        0 26px 70px rgba(0, 54, 57, 0.18);

    color: #ffffff;
}


/* ========================================
   CTA DECORATIVE BORDER
======================================== */

.leadership-cta-panel::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: -1;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: inherit;

    pointer-events: none;
}

.leadership-cta-panel::after {
    content: "";

    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;

    width: 38%;
    height: 100%;

    background:
        linear-gradient(135deg,
            transparent 0%,
            rgba(255, 255, 255, 0.03) 50%,
            transparent 100%);

    transform: skewX(-18deg) translateX(30%);

    pointer-events: none;
}


/* ========================================
   CTA GLOWS
======================================== */

.leadership-cta-glow {
    position: absolute;
    z-index: -1;

    border-radius: 50%;

    pointer-events: none;

    will-change: transform, opacity;
}

.leadership-cta-glow-one {
    top: -180px;
    right: 6%;

    width: 420px;
    height: 420px;

    background:
        radial-gradient(circle,
            rgba(72, 211, 201, 0.26) 0%,
            rgba(27, 133, 130, 0.15) 40%,
            transparent 72%);

    filter: blur(28px);

    animation:
        leadershipCtaGlowOne 8s ease-in-out infinite;
}

.leadership-cta-glow-two {
    right: -120px;
    bottom: -190px;

    width: 380px;
    height: 380px;

    background:
        radial-gradient(circle,
            rgba(216, 171, 112, 0.22) 0%,
            rgba(145, 105, 67, 0.1) 42%,
            transparent 72%);

    filter: blur(34px);

    animation:
        leadershipCtaGlowTwo 9s ease-in-out infinite;
}

@keyframes leadershipCtaGlowOne {

    0%,
    100% {
        opacity: 0.65;
        transform: scale(0.95) translate3d(0, 0, 0);
    }

    50% {
        opacity: 1;
        transform: scale(1.08) translate3d(-12px, 10px, 0);
    }
}

@keyframes leadershipCtaGlowTwo {

    0%,
    100% {
        opacity: 0.48;
        transform: scale(0.94);
    }

    50% {
        opacity: 0.82;
        transform: scale(1.08);
    }
}


/* ========================================
   CTA CONTENT
======================================== */

.leadership-cta-content {
    position: relative;
    z-index: 2;

    max-width: 690px;
}

.leadership-cta-label {
    display: block;

    margin-bottom: 16px;

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

    font-family: "Graphik Trial", Arial, sans-serif;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.leadership-cta-title {
    margin: 0 0 18px;

    color: #ffffff;

    font-family: "Graphik Trial", Arial, sans-serif;
    font-size: clamp(40px, 3.6vw, 58px);
    font-weight: 300;
    line-height: 1.04;
    letter-spacing: -2px;
}

.leadership-cta-description {
    max-width: 590px;

    margin: 0;

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

    font-family: "Graphik Trial", Arial, sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.7;
}


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

.leadership-cta-action {
    position: relative;
    z-index: 2;

    display: flex;
    justify-content: flex-end;
}


/* ========================================
   CTA BUTTON
======================================== */

.leadership-cta-button {
    min-width: 165px;

    padding: 14px 20px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 100px;

    color: #ffffff;
    background: rgba(255, 255, 255, 0.04);

    font-family: "Graphik Trial", Arial, sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    transition:
        color 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.leadership-cta-button:hover {
    color: #003b3e;
    background: #ffffff;
    border-color: #ffffff;

    transform: translateY(-3px);

    box-shadow:
        0 14px 30px rgba(0, 34, 36, 0.18);
}

.leadership-cta-button-arrow {
    display: inline-block;

    transition:
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.leadership-cta-button:hover .leadership-cta-button-arrow {
    transform: translateX(5px);
}


/* ========================================
   LAPTOP RESPONSIVE
======================================== */

@media (max-width: 1200px) {
    .leadership-cta-section {
        padding: 84px 0 92px;
    }

    .leadership-cta-container {
        width: min(1120px,
                calc(100% - 48px));
    }

    .leadership-cta-panel {
        min-height: 290px;

        padding: 56px 58px;

        gap: 55px;
    }

    .leadership-cta-title {
        font-size: clamp(38px, 4vw, 52px);
    }
}


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

@media (max-width: 991px) {
    .leadership-cta-section {
        padding: 72px 0 80px;
    }

    .leadership-cta-container {
        width: calc(100% - 40px);
    }

    .leadership-cta-panel {
        min-height: auto;

        padding: 50px 46px;

        grid-template-columns: 1fr;
        gap: 34px;
    }

    .leadership-cta-content {
        max-width: 660px;
    }

    .leadership-cta-title {
        max-width: 620px;

        font-size: 46px;
    }

    .leadership-cta-action {
        justify-content: flex-start;
    }
}


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

@media (max-width: 767px) {
    .leadership-cta-section {
        padding: 28px 0 66px;
    }

    .leadership-cta-container {
        width: calc(100% - 30px);
    }

    .leadership-cta-panel {
        padding: 38px 28px;

        gap: 28px;

        border-radius: 14px;
    }

    .leadership-cta-label {
        margin-bottom: 13px;

        font-size: 11px;
    }

    .leadership-cta-title {
        max-width: 100%;

        font-size: clamp(32px, 9vw, 41px);
        line-height: 1.07;
        letter-spacing: -1.4px;
    }

    .leadership-cta-description {
        max-width: 100%;

        font-size: 16px;
        line-height: 1.65;
    }

    .leadership-cta-button {
        min-width: 150px;

        padding: 13px 18px;

        font-size: 13px;
    }

    .leadership-cta-glow-one {
        top: -140px;
        right: -130px;

        width: 330px;
        height: 330px;
    }

    .leadership-cta-glow-two {
        right: -160px;
        bottom: -160px;

        width: 300px;
        height: 300px;
    }
}


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

@media (max-width: 480px) {
    .leadership-cta-container {
        width: calc(100% - 26px);
    }

    .leadership-cta-panel {
        padding: 34px 22px;
    }

    .leadership-cta-title {
        font-size: 33px;
    }

    .leadership-cta-description {
        font-size: 16px;
    }

    .leadership-cta-button {
        min-width: 142px;
    }
}


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

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

    .leadership-cta-glow,
    .leadership-cta-button,
    .leadership-cta-button-arrow {
        animation: none;
        transition: none;
    }
}


/* ========================================
   LEADERSHIP CTA SCROLL ANIMATION
======================================== */

/* Initial panel state */
.leadership-cta-panel {
    opacity: 0;
    transform: translateY(58px) scale(0.97);
}

/* Initial content states */
.leadership-cta-title,
.leadership-cta-description,
.leadership-cta-action {
    opacity: 0;
}

.leadership-cta-title {
    transform: translateY(34px);
}

.leadership-cta-description {
    transform: translateY(24px);
}

.leadership-cta-action {
    transform: translateX(36px);
}

/* Initial decorative sweep state */
.leadership-cta-panel::after {
    opacity: 0;
    transform: skewX(-18deg) translateX(120%);
}

/* ========================================
   PANEL VISIBLE
======================================== */

.leadership-cta-section.cta-visible .leadership-cta-panel {
    opacity: 1;
    transform: translateY(0) scale(1);

    transition:
        opacity 0.8s ease,
        transform 1.05s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ========================================
   TITLE VISIBLE
======================================== */

.leadership-cta-section.cta-visible .leadership-cta-title {
    opacity: 1;
    transform: translateY(0);

    transition:
        opacity 0.75s 0.2s ease,
        transform 0.95s 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ========================================
   DESCRIPTION VISIBLE
======================================== */

.leadership-cta-section.cta-visible .leadership-cta-description {
    opacity: 1;
    transform: translateY(0);

    transition:
        opacity 0.7s 0.34s ease,
        transform 0.85s 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

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

.leadership-cta-section.cta-visible .leadership-cta-action {
    opacity: 1;
    transform: translateX(0);

    transition:
        opacity 0.7s 0.44s ease,
        transform 0.9s 0.44s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ========================================
   DECORATIVE LIGHT SWEEP
======================================== */

.leadership-cta-section.cta-visible .leadership-cta-panel::after {
    opacity: 1;
    transform: skewX(-18deg) translateX(30%);

    transition:
        opacity 0.8s 0.28s ease,
        transform 1.4s 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ========================================
   CTA BUTTON SHINE
======================================== */

.leadership-cta-button {
    position: relative;
    overflow: hidden;
}

.leadership-cta-button::before {
    content: "";

    position: absolute;
    top: 0;
    left: -140%;

    width: 70%;
    height: 100%;

    background:
        linear-gradient(110deg,
            transparent,
            rgba(255, 255, 255, 0.35),
            transparent);

    transform: skewX(-18deg);

    pointer-events: none;
}

.leadership-cta-section.cta-visible .leadership-cta-button::before {
    animation:
        ctaButtonShine 1.1s 0.85s ease forwards;
}

@keyframes ctaButtonShine {
    from {
        left: -140%;
    }

    to {
        left: 150%;
    }
}

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

@media (max-width: 767px) {
    .leadership-cta-panel {
        transform: translateY(40px) scale(0.98);
    }

    .leadership-cta-title {
        transform: translateY(26px);
    }

    .leadership-cta-description {
        transform: translateY(20px);
    }

    .leadership-cta-action {
        transform: translateY(22px);
    }

    .leadership-cta-section.cta-visible .leadership-cta-action {
        transform: translateY(0);
    }
}

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

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

    .leadership-cta-panel,
    .leadership-cta-title,
    .leadership-cta-description,
    .leadership-cta-action {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .leadership-cta-panel::after {
        opacity: 1 !important;
        transform:
            skewX(-18deg) translateX(30%) !important;

        transition: none !important;
    }

    .leadership-cta-button::before {
        display: none;
        animation: none !important;
    }
}


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


.premium-footer {

    position: relative;

    overflow: hidden;

    background:

        radial-gradient(circle at 90% 0%,
            rgba(31, 145, 143, .35),
            transparent 35%),

        linear-gradient(120deg,
            #001f22,
            #00383b);

    color: white;

    padding: 90px 0 25px;

}



.footer-wrapper {

    width: min(1320px,
            calc(100% - 80px));

    margin: auto;

}



/* TOP GRID */

.footer-grid {

    display: grid;

    grid-template-columns:

        1.5fr .7fr .9fr .8fr;

    gap: 70px;

}



/* BRAND */
.footer-brand h3 {
    margin: 0 0 26px;

    color: #ffffff;

    font-family: "Graphik Trial", Arial, sans-serif;
    font-size: clamp(31px, 2.4vw, 40px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -1.2px;
}


.footer-brand p {

    max-width: 390px;

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

    font-size: 16px;

    line-height: 1.7;

}



/* TITLES */

.footer-column h4,
.footer-contact h4 {

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

    font-size: 12px;

    letter-spacing: 1px;

    text-transform: uppercase;

    margin-bottom: 25px;

}



/* LINKS */


.footer-column a {

    display: block;

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

    text-decoration: none;

    font-size: 15px;

    margin-bottom: 15px;

    transition: .3s ease;

}


.footer-column a:hover {

    color: white;

    transform: translateX(5px);

}



/* CONTACT */


.footer-contact p {

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

    line-height: 1.6;

}



.footer-contact button {


    margin-top: 22px;

    background: transparent;

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

    color: white;

    border-radius: 50px;

    padding: 12px 24px;

    cursor: pointer;

    transition: .35s ease;

}



.footer-contact button:hover {

    background: white;

    color: #00383b;

}



.footer-contact span {

    margin-left: 10px;

}



/* DIVIDER */


.footer-divider {

    height: 1px;

    background:

        rgba(255, 255, 255, .18);

    margin-top: 70px;

}



/* BOTTOM */


.footer-bottom {

    display: flex;

    justify-content: space-between;

    padding-top: 20px;

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

    font-size: 12px;

}


/* ========================================
   GIANT FOOTER WORDMARK
======================================== */

.footer-wordmark {
    margin-top: 45px;
    margin-left: -10px;
    margin-bottom: 40px;
    display: flex;
    align-items: flex-end;

    font-size: clamp(100px, 13vw, 190px);
    font-weight: 700;
    line-height: 0.8;
    letter-spacing: -12px;
    white-space: nowrap;

    cursor: default;
}

.footer-wordmark span {
    display: inline-block;

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

    transition:
        color 0.35s ease,
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        text-shadow 0.4s ease;
}

.footer-wordmark-space {
    width: 0.28em;
    flex: 0 0 0.28em;
}


/* One-by-one animation on hover */

.footer-wordmark:hover span {
    color: #d9ff00;

    transform: translateY(-8px);

    text-shadow:
        0 0 18px rgba(217, 255, 0, 0.25),
        0 0 42px rgba(217, 255, 0, 0.12);
}

.footer-wordmark:hover span:nth-child(1) {
    transition-delay: 0s;
}

.footer-wordmark:hover span:nth-child(2) {
    transition-delay: 0.04s;
}

.footer-wordmark:hover span:nth-child(3) {
    transition-delay: 0.08s;
}

.footer-wordmark:hover span:nth-child(4) {
    transition-delay: 0.12s;
}

.footer-wordmark:hover span:nth-child(5) {
    transition-delay: 0.16s;
}

.footer-wordmark:hover span:nth-child(6) {
    transition-delay: 0.20s;
}

.footer-wordmark:hover span:nth-child(7) {
    transition-delay: 0.24s;
}

.footer-wordmark:hover span:nth-child(9) {
    transition-delay: 0.28s;
}

.footer-wordmark:hover span:nth-child(10) {
    transition-delay: 0.32s;
}

.footer-wordmark:hover span:nth-child(11) {
    transition-delay: 0.36s;
}

.footer-wordmark:hover span:nth-child(12) {
    transition-delay: 0.40s;
}

.footer-wordmark:hover span:nth-child(13) {
    transition-delay: 0.44s;
}


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

@media (max-width: 1000px) {
    .footer-wrapper {
        width: calc(100% - 48px);
        margin: 0 auto;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 50px 40px;
    }

    .footer-wordmark {
        width: 100%;
        max-width: 100%;

        margin-top: 42px;
        margin-left: 0;

        font-size: 95px;
        line-height: 0.84;
        letter-spacing: -5px;

        white-space: nowrap;
        overflow: visible;
    }
}


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

@media (max-width: 900px) {
    .premium-footer {
        height: auto;
        min-height: auto;
        overflow: visible;
    }

    .footer-wrapper,
    .premium-footer-inner {
        height: auto;
        min-height: auto;
        overflow: visible;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .footer-wordmark {
        width: 100%;
        max-width: 100%;

        margin-top: 40px;
        margin-left: 0;
        padding-bottom: 12px;

        font-size: 76px;
        line-height: 0.84;
        letter-spacing: -4px;

        white-space: nowrap;
        overflow: visible;
    }
}


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

@media (max-width: 767px) {
    .premium-footer {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;

        padding-bottom: 30px !important;

        overflow: visible !important;
    }

    .footer-wrapper,
    .premium-footer-inner {
        width: calc(100% - 32px);

        height: auto !important;
        min-height: auto !important;
        max-height: none !important;

        margin: 0 auto;

        overflow: visible !important;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .premium-footer .footer-wordmark {
        position: static !important;

        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;

        margin: 38px 0 24px !important;
        padding: 0 !important;

        display: flex !important;
        align-items: flex-end;
        justify-content: flex-start;

        overflow: visible !important;

        font-size: 54px !important;
        font-weight: 700;
        line-height: 0.84 !important;
        letter-spacing: -4px !important;
        white-space: nowrap;

        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;

        pointer-events: auto !important;
    }

    .premium-footer .footer-wordmark span {
        display: inline-block !important;

        opacity: 1 !important;
        visibility: visible !important;
        transform: none;
    }

    .footer-wordmark-space {
        width: 0.24em;
        flex: 0 0 0.24em;
    }
}


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

@media (max-width: 430px) {

    .footer-wrapper,
    .premium-footer-inner {
        width: calc(100% - 28px);
    }

    .footer-grid {
        gap: 38px;
    }

    .footer-bottom {
        gap: 12px;
    }

    .premium-footer {
        padding-bottom: 36px !important;
    }

    .premium-footer .footer-wordmark {
        margin-top: 34px !important;
        margin-bottom: 24px !important;

        font-size: 48px !important;
        line-height: 0.84 !important;
        letter-spacing: -3px !important;
    }
}


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

@media (max-width: 380px) {
    .premium-footer .footer-wordmark {
        font-size: 43px !important;
        letter-spacing: -2.5px !important;
    }
}


/* ========================================
   PREMIUM FOOTER CINEMATIC ANIMATION
======================================== */

/* Initial hidden states */
.footer-brand,
.footer-column,
.footer-contact {
    opacity: 0;
    transform: translateY(42px);
}

.footer-brand h3,
.footer-brand p,
.footer-column h4,
.footer-column a,
.footer-contact h4,
.footer-contact p,
.footer-contact button {
    opacity: 0;
    transform: translateY(24px);
}

.footer-divider {
    transform: scaleX(0);
    transform-origin: left center;
}

.footer-bottom {
    opacity: 0;
    transform: translateY(20px);
}

.footer-wordmark {
    opacity: 0;
    transform: translateY(90px);
}

/* ========================================
   MAIN COLUMN REVEAL
======================================== */

.premium-footer.footer-visible .footer-brand,
.premium-footer.footer-visible .footer-column,
.premium-footer.footer-visible .footer-contact {
    opacity: 1;
    transform: translateY(0);

    transition:
        opacity 0.7s ease,
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.premium-footer.footer-visible .footer-brand {
    transition-delay: 0.05s;
}

.premium-footer.footer-visible .footer-column:nth-child(2) {
    transition-delay: 0.12s;
}

.premium-footer.footer-visible .footer-column:nth-child(3) {
    transition-delay: 0.19s;
}

.premium-footer.footer-visible .footer-contact {
    transition-delay: 0.26s;
}

/* ========================================
   BRAND CONTENT REVEAL
======================================== */

.premium-footer.footer-visible .footer-brand h3 {
    opacity: 1;
    transform: translateY(0);

    transition:
        opacity 0.65s 0.12s ease,
        transform 0.85s 0.12s cubic-bezier(0.22, 1, 0.36, 1);
}

.premium-footer.footer-visible .footer-brand p {
    opacity: 1;
    transform: translateY(0);

    transition:
        opacity 0.65s 0.22s ease,
        transform 0.85s 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ========================================
   FOOTER HEADING REVEAL
======================================== */

.premium-footer.footer-visible .footer-column h4,
.premium-footer.footer-visible .footer-contact h4 {
    opacity: 1;
    transform: translateY(0);

    transition:
        opacity 0.6s ease,
        transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.premium-footer.footer-visible .footer-column:nth-child(2) h4 {
    transition-delay: 0.22s;
}

.premium-footer.footer-visible .footer-column:nth-child(3) h4 {
    transition-delay: 0.29s;
}

.premium-footer.footer-visible .footer-contact h4 {
    transition-delay: 0.36s;
}

/* ========================================
   FOOTER LINKS STAGGER
======================================== */

.premium-footer.footer-visible .footer-column a {
    opacity: 1;
    transform: translateY(0);

    transition:
        opacity 0.55s ease,
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        color 0.3s ease;
}

.premium-footer.footer-visible .footer-column:nth-child(2) a:nth-of-type(1) {
    transition-delay: 0.28s;
}

.premium-footer.footer-visible .footer-column:nth-child(2) a:nth-of-type(2) {
    transition-delay: 0.34s;
}

.premium-footer.footer-visible .footer-column:nth-child(2) a:nth-of-type(3) {
    transition-delay: 0.40s;
}

.premium-footer.footer-visible .footer-column:nth-child(2) a:nth-of-type(4) {
    transition-delay: 0.46s;
}

.premium-footer.footer-visible .footer-column:nth-child(2) a:nth-of-type(5) {
    transition-delay: 0.52s;
}

.premium-footer.footer-visible .footer-column:nth-child(2) a:nth-of-type(6) {
    transition-delay: 0.58s;
}

.premium-footer.footer-visible .footer-column:nth-child(3) a:nth-of-type(1) {
    transition-delay: 0.35s;
}

.premium-footer.footer-visible .footer-column:nth-child(3) a:nth-of-type(2) {
    transition-delay: 0.41s;
}

.premium-footer.footer-visible .footer-column:nth-child(3) a:nth-of-type(3) {
    transition-delay: 0.47s;
}

.premium-footer.footer-visible .footer-column:nth-child(3) a:nth-of-type(4) {
    transition-delay: 0.53s;
}

.premium-footer.footer-visible .footer-column:nth-child(3) a:nth-of-type(5) {
    transition-delay: 0.59s;
}

/* ========================================
   CONNECT CONTENT REVEAL
======================================== */

.premium-footer.footer-visible .footer-contact p {
    opacity: 1;
    transform: translateY(0);

    transition:
        opacity 0.6s 0.44s ease,
        transform 0.8s 0.44s cubic-bezier(0.22, 1, 0.36, 1);
}

.premium-footer.footer-visible .footer-contact button {
    opacity: 1;
    transform: translateY(0);

    transition:
        opacity 0.6s 0.54s ease,
        transform 0.85s 0.54s cubic-bezier(0.22, 1, 0.36, 1),
        color 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

/* ========================================
   DIVIDER DRAW ANIMATION
======================================== */

.premium-footer.footer-visible .footer-divider {
    transform: scaleX(1);

    transition:
        transform 1.15s 0.62s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ========================================
   FOOTER BOTTOM REVEAL
======================================== */

.premium-footer.footer-visible .footer-bottom {
    opacity: 1;
    transform: translateY(0);

    transition:
        opacity 0.65s 0.74s ease,
        transform 0.8s 0.74s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ========================================
   LARGE WORDMARK REVEAL
======================================== */

.premium-footer.footer-visible .footer-wordmark {
    opacity: 1;
    transform: translateY(0);

    transition:
        opacity 1s 0.82s ease,
        transform 1.35s 0.82s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ========================================
   WORDMARK HOVER MOTION
======================================== */

.footer-wordmark {
    transition:
        opacity 1s ease,
        transform 1.35s cubic-bezier(0.22, 1, 0.36, 1);
}






/* ========================================
   FOOTER LINK HOVER
======================================== */

.footer-column a {
    position: relative;
}

.footer-column a::before {
    content: "→";

    position: absolute;
    left: -18px;

    color: #caff00;

    opacity: 0;
    transform: translateX(-5px);

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

.footer-column a:hover {
    color: #ffffff;
    transform: translateX(18px);
}

.footer-column a:hover::before {
    opacity: 1;
    transform: translateX(0);
}

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

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

    .footer-brand,
    .footer-column,
    .footer-contact,
    .footer-brand h3,
    .footer-brand p,
    .footer-column h4,
    .footer-column a,
    .footer-contact h4,
    .footer-contact p,
    .footer-contact button,
    .footer-divider,
    .footer-bottom,
    .footer-wordmark {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}



/* ========================================
   FUNCTIONS MOBILE CARD SPACING
======================================== */

@media (max-width: 767px) {
    .functions-grid {
        gap: 46px;
    }

    .functions-small-grid {
        gap: 46px;
    }

    .function-card {
        margin: 0;
    }

    .function-card-content {
        padding-top: 16px;
    }

    .function-card-description {
        margin-bottom: 0;
    }
}



/* ========================================
   CASE STUDIES MOBILE CARD SPACING
======================================== */

@media (max-width: 767px) {
    .case-studies-grid {
        gap: 46px;
    }

    .case-study-card {
        margin: 0;
    }

    .case-study-content {
        padding-top: 16px;
    }

    .case-study-description {
        margin-bottom: 0;
    }
}






.hero-banner,
.industry-expertise-section,
.industries-slider-section,
.leadership-services-section,
.functions-section,
.case-studies-section,
.leadership-cta-section,
.premium-footer {

    scroll-margin-top: 80px;

}



/* ========================================
   FINAL MOBILE HEADER STATES
======================================== */

@media (max-width: 991px) {

    /* =====================================
       HOME PAGE - TRANSPARENT
    ===================================== */

    body.home-page .site-header,
    body.home-page .site-header.scrolled {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    body.home-page .navbar-container,
    body.home-page .site-header.scrolled .navbar-container {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }



    /* =====================================
       CLOSED STATE - WHITE LOGO
    ===================================== */

    body:not(.menu-open) .site-logo-image {
        filter: brightness(0) invert(1) !important;
    }

    body:not(.menu-open) .mobile-menu-button span {
        background: #ffffff !important;
    }


    /* =====================================
       MENU OPEN - WHITE TOP AREA
    ===================================== */

    body.menu-open .site-header,
    body.menu-open .navbar-container {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }


    /* Dark logo on white menu */

    body.menu-open .site-logo-image {
        filter:
            brightness(0) saturate(100%) invert(7%) sepia(16%) saturate(1390%) hue-rotate(190deg) brightness(91%) contrast(102%) !important;

        opacity: 1 !important;
        visibility: visible !important;
    }


    /* Dark close icon */

    body.menu-open .mobile-menu-button span {
        background: #0A1022 !important;
    }
}


/* ========================================
   FINAL MOBILE HEADER - NO PATCH ANY PAGE
======================================== */

@media (max-width: 991px) {

    /* Header always transparent */
    .site-header,
    .site-header.scrolled,
    body.home-page .site-header,
    body.inner-page .site-header,
    body:not(.home-page) .site-header {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;

        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Navbar row transparent */
    .navbar-container,
    .site-header.scrolled .navbar-container,
    body.home-page .navbar-container,
    body.inner-page .navbar-container,
    body:not(.home-page) .navbar-container {
        width: calc(100% - 28px) !important;
        min-height: 68px !important;

        margin: 0 auto !important;
        padding: 0 !important;

        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }


    /* Closed state logo */
    body:not(.menu-open) .site-logo-image {
        filter:
            brightness(0) saturate(100%) invert(7%) sepia(16%) saturate(1390%) hue-rotate(190deg) brightness(91%) contrast(102%) !important;
    }


    /* Home hero = white logo */
    body.home-page:not(.menu-open) .site-header:not(.scrolled) .site-logo-image {
        filter: brightness(0) invert(1) !important;
    }


    /* Hamburger dark on inner white pages */
    body:not(.home-page):not(.menu-open) .mobile-menu-button span,
    body.inner-page:not(.menu-open) .mobile-menu-button span {
        background: #0A1022 !important;
    }


    /* Hamburger white on home dark hero */
    body.home-page:not(.menu-open) .site-header:not(.scrolled) .mobile-menu-button span {
        background: #ffffff !important;
    }


    /* Menu open - dark logo */
    body.menu-open .site-logo-image {
        filter:
            brightness(0) saturate(100%) invert(7%) sepia(16%) saturate(1390%) hue-rotate(190deg) brightness(91%) contrast(102%) !important;

        opacity: 1 !important;
        visibility: visible !important;
    }


    /* Menu open - dark X */
    body.menu-open .mobile-menu-button span {
        background: #0A1022 !important;
    }

}


/* ========================================
   MOBILE SCROLL LOGO FIX
======================================== */

@media (max-width: 991px) {

    /* Scroll ke baad logo always dark */
    .site-header.scrolled .site-logo-image,
    body.home-page .site-header.scrolled .site-logo-image,
    body.inner-page .site-header.scrolled .site-logo-image,
    body:not(.home-page) .site-header.scrolled .site-logo-image {
        filter:
            brightness(0) saturate(100%) invert(7%) sepia(16%) saturate(1390%) hue-rotate(190deg) brightness(91%) contrast(102%) !important;
    }

    /* Scroll ke baad hamburger bhi dark */
    .site-header.scrolled .mobile-menu-button span {
        background: #0A1022 !important;
    }

    /* Menu open state same dark logo */
    body.menu-open .site-header .site-logo-image,
    body.menu-open .site-header.scrolled .site-logo-image {
        filter:
            brightness(0) saturate(100%) invert(7%) sepia(16%) saturate(1390%) hue-rotate(190deg) brightness(91%) contrast(102%) !important;
    }
}