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

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


html {
    scroll-behavior: smooth;
}


body {
    font-family: "Outfit", sans-serif;

    color: #111b47;

    background: #ffffff;

    overflow-x: hidden;

    transition:
        background-color .3s ease,
        color .3s ease;
}


body,
button,
input {
    font-family: "Outfit", sans-serif;
}


img {
    display: block;

    max-width: 100%;
}


a {
    text-decoration: none;
}


button {
    cursor: pointer;
}


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

:root {

    --navy: #111b47;

    --navy-dark: #091334;

    --teal: #10b8b1;

    --gold: #f4a900;

    --white: #ffffff;

    --muted: #59637b;

    --border: #e7ebf1;

}


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

.top-bar {

    width: 100%;

    min-height: 44px;

    padding: 0 8%;

    background: var(--navy);

    color: #ffffff;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    font-size: 13px;

}


.top-bar-left,
.top-bar-right {

    display: flex;

    align-items: center;

    gap: 30px;

}


.top-bar a,
.top-bar span {

    color: #ffffff;

    display: flex;

    align-items: center;

    gap: 8px;

}


.top-bar i {

    color: var(--teal);

    flex-shrink: 0;

}


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

.site-header {

    position: fixed;

    top: 0;

    left: 0;

    z-index: 1000;

    width: 100%;

    height: 100px;

    background: #ffffff;

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

    transition:
        background-color .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;

}


.header-inner {

    width: 100%;

    height: 100%;

    padding: 0 8%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

}


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

.site-logo {

    width: 185px;

    min-width: 150px;

    flex-shrink: 0;

}


.site-logo img {

    width: 100%;

    height: auto;

    object-fit: contain;

}


/* =========================================================
   DESKTOP NAV
========================================================= */

.desktop-nav {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 25px;

    min-width: 0;

}


.desktop-nav > a {

    color: var(--navy);

    font-size: 15px;

    font-weight: 600;

    white-space: nowrap;

    transition: color .2s ease;

}


.desktop-nav > a:hover {

    color: var(--teal);

}


.desktop-nav .nav-link.active {

    color: var(--teal);

}


.desktop-nav .candidate-portal {

    color: #69738a;

}


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

.header-icon-btn {

    width: 42px;

    height: 42px;

    flex-shrink: 0;

    border: 1px solid #e2e6ed;

    border-radius: 7px;

    background: #f7f8fa;

    color: var(--navy);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 15px;

    transition:
        background-color .25s ease,
        color .25s ease,
        border-color .25s ease;

}


.header-icon-btn:hover {

    background: var(--navy);

    border-color: var(--navy);

    color: #ffffff;

}


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

.header-cta {

    min-height: 54px;

    padding: 0 22px;

    flex-shrink: 0;

    border-radius: 7px;

    background: var(--teal);

    color: #ffffff !important;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    font-size: 15px;

    font-weight: 700;

    transition:
        background-color .25s ease,
        transform .25s ease;

}


.header-cta:hover {

    background: var(--navy);

    transform: translateY(-1px);

}



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

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: #fff;
}

/* Header links */
.desktop-nav .nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--navy);
    white-space: nowrap;
    transition: color .2s ease;
}

.desktop-nav .nav-link:hover,
.desktop-nav .nav-link.active {
    color: var(--teal);
}

/* Active underline */
.desktop-nav .nav-link.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -8px;
    height: 2px;
    border-radius: 2px;
    background: var(--teal);
}

/* Services dropdown */
.nav-dropdown {
    position: relative;
    display: flex;
    align-items: center;
}

.dropdown-arrow {
    font-size: 10px;
    transition: transform .2s ease;
}

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

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    padding: 8px;
    margin: 0;
    display: none;
    background: #fff;
    border: 1px solid #e7ebf1;
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(17, 27, 71, .14);
    z-index: 1001;
}

.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu {
    display: block;
}

.dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    color: var(--navy);
    font-size: 13px;
    border-radius: 6px;
    transition: background .2s ease, color .2s ease;
}

.dropdown-menu a i {
    width: 17px;
    color: var(--teal);
}

.dropdown-menu a:hover,
.dropdown-menu a.active {
    background: #edf8f8;
    color: #087f7b;
}

/* Mobile dropdown */
.mobile-dropdown {
    width: 100%;
}

.mobile-dropdown summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
    cursor: pointer;
    list-style: none;
}

.mobile-dropdown summary::-webkit-details-marker {
    display: none;
}

.mobile-dropdown summary.active {
    color: var(--teal);
}

.mobile-dropdown summary i {
    font-size: 11px;
    transition: transform .2s ease;
}

.mobile-dropdown[open] summary i {
    transform: rotate(180deg);
}

.mobile-submenu {
    display: flex;
    flex-direction: column;
    padding: 0 0 8px 14px;
}

.mobile-submenu a {
    display: block;
    padding: 10px 16px;
    font-size: 14px;
    color: var(--navy);
}

.mobile-submenu a.active {
    color: var(--teal);
    font-weight: 700;
    background: #edf8f8;
}

/* Fixed-header anchor offset */
html {
    scroll-padding-top: 110px;
}

/* Dark mode dropdown */
body.dark-mode .site-header,
body.dark-mode .dropdown-menu {
    background: #111b35;
    border-color: #293552;
}

body.dark-mode .desktop-nav .nav-link,
body.dark-mode .dropdown-menu a,
body.dark-mode .mobile-submenu a {
    color: #f4f7ff;
}

body.dark-mode .dropdown-menu a:hover,
body.dark-mode .dropdown-menu a.active,
body.dark-mode .mobile-submenu a.active {
    background: #1c3048;
    color: #64ddd5;
}



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

.mobile-toggle {

    display: none;

    width: 44px;

    height: 44px;

    flex-shrink: 0;

    border: 1px solid #e1e5ec;

    border-radius: 8px;

    background: #ffffff;

    color: var(--navy);

    align-items: center;

    justify-content: center;

    font-size: 18px;

}


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

.mobile-navigation {

    display: none !important;

}


.mobile-navigation.open {

    display: flex !important;

    flex-direction: column;

}


/* =========================================================
   SEARCH OVERLAY
========================================================= */

.search-overlay {

    position: fixed;

    inset: 0;

    z-index: 5000;

    display: none;

    align-items: flex-start;

    justify-content: center;

    padding: 120px 20px 40px;

    background: rgba(7, 15, 43, .72);

    backdrop-filter: blur(8px);

}


.search-overlay.active {

    display: flex;

}


.search-box {

    position: relative;

    width: min(650px, 100%);

    padding: 38px;

    border-radius: 15px;

    background: #ffffff;

    box-shadow: 0 30px 90px rgba(0,0,0,.28);

}


.search-close {

    position: absolute;

    top: 18px;

    right: 18px;

    width: 36px;

    height: 36px;

    border: 0;

    border-radius: 50%;

    background: #f0f2f6;

    color: var(--navy);

    display: flex;

    align-items: center;

    justify-content: center;

}


.search-title span {

    color: var(--teal);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.2px;

}


.search-title h2 {

    margin-top: 5px;

    color: var(--navy);

    font-size: 30px;

}


.search-input-wrap {

    margin-top: 25px;

    padding: 12px 2px;

    display: flex;

    align-items: center;

    gap: 12px;

    border-bottom: 2px solid var(--navy);

}


.search-input-wrap i {

    color: var(--teal);

}


.search-input-wrap input {

    width: 100%;

    border: 0;

    outline: 0;

    background: transparent;

    color: var(--navy);

    font-size: 18px;

}


.search-input-wrap input::placeholder {

    color: #9aa2b2;

}


.search-results {

    margin-top: 18px;

    color: #667085;

    font-size: 14px;

    line-height: 1.6;

    max-height: 300px;

    overflow-y: auto;

}


.search-result-item {

    width: 100%;

    padding: 12px 14px;

    margin-bottom: 8px;

    border-radius: 7px;

    background: #f5f7f9;

    color: var(--navy);

    font-weight: 600;

    cursor: pointer;

}


.search-result-item:hover {

    background: #eaf9f8;

    color: var(--teal);

}


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

.hero-section {

    position: relative;

    width: 100%;

    height: calc(100vh - 144px);

    min-height: 650px;

    overflow: hidden;

    background: #ffffff;

}


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

.hero-slide {

    position: absolute;

    inset: 0;

    opacity: 0;

    visibility: hidden;

    transition:
        opacity .7s ease,
        visibility .7s ease;

}


.hero-slide.active {

    opacity: 1;

    visibility: visible;

}


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

.hero-image {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center center;

}


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

.hero-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,

            rgba(255,255,255,.97) 0%,

            rgba(255,255,255,.92) 28%,

            rgba(255,255,255,.72) 45%,

            rgba(255,255,255,.30) 66%,

            rgba(255,255,255,.04) 100%
        );

}


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

.hero-content {

    position: absolute;

    z-index: 10;

    left: 8%;

    top: 50%;

    transform: translateY(-50%);

    width: 49%;

    max-width: 720px;

}


.hero-kicker {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 24px;

    color: var(--gold);

    font-size: 16px;

    line-height: 1.4;

    font-weight: 700;

}


.hero-kicker span {

    width: 7px;

    height: 7px;

    flex-shrink: 0;

    border-radius: 50%;

    background: var(--teal);

}


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

.hero-content h1 {

    margin-bottom: 27px;

    color: var(--navy);

    font-size: clamp(48px, 4.8vw, 74px);

    line-height: .99;

    letter-spacing: -2.3px;

    font-weight: 800;

}


.hero-content p {

    max-width: 630px;

    margin-bottom: 29px;

    color: #4c5873;

    font-size: 17px;

    line-height: 1.65;

}


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

.hero-actions {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 15px;

}


.hero-primary {

    min-height: 54px;

    padding: 0 22px;

    border-radius: 6px;

    background: var(--gold);

    color: #ffffff;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    font-size: 14px;

    font-weight: 700;

    transition:
        background-color .25s ease,
        transform .25s ease;

}


.hero-primary:hover {

    background: var(--navy);

    transform: translateY(-2px);

}


.hero-secondary {

    min-height: 54px;

    padding: 0 22px;

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

    border-radius: 6px;

    color: var(--navy);

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-size: 14px;

    font-weight: 700;

    transition:
        background-color .25s ease,
        color .25s ease;

}


.hero-secondary:hover {

    background: var(--navy);

    color: #ffffff;

}


.hero-cv {

    color: var(--navy);

    font-size: 13px;

    font-weight: 700;

    transition: color .2s ease;

}


.hero-cv:hover {

    color: var(--teal);

}


/* =========================================================
   SOCIAL SIDEBAR
========================================================= */

.social-sidebar {

    position: absolute;

    z-index: 20;

    left: 18px;

    top: 50%;

    transform: translateY(-50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 18px;

}


.social-sidebar span {

    writing-mode: vertical-rl;

    transform: rotate(180deg);

    margin-bottom: 2px;

    color: var(--navy);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1px;

}


.social-sidebar a {

    color: var(--navy);

    font-size: 16px;

    transition: color .2s ease;

}


.social-sidebar a:hover {

    color: var(--teal);

}


/* =========================================================
   RECRUITMENT BADGE
========================================================= */

.recruitment-badge {

    position: absolute;

    z-index: 20;

    top: 38px;

    right: 8%;

    padding: 10px 20px 10px 11px;

    border-radius: 50px;

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

    box-shadow: 0 12px 35px rgba(17,27,71,.10);

    display: flex;

    align-items: center;

    gap: 10px;

}


.recruitment-badge .badge-icon {

    width: 35px;

    height: 35px;

    border-radius: 50%;

    background: var(--teal);

    color: #ffffff;

    display: grid;

    place-items: center;

    font-size: 13px;

}


.recruitment-badge strong {

    display: block;

    color: var(--navy);

    font-size: 12px;

}


.recruitment-badge span {

    display: block;

    margin-top: 2px;

    color: var(--muted);

    font-size: 10px;

}


/* =========================================================
   HERO SLIDER BOTTOM
========================================================= */

.hero-slider-bottom {

    position: absolute;

    z-index: 30;

    left: 8%;

    right: 8%;

    bottom: 28px;

    display: flex;

    align-items: center;

    justify-content: space-between;

}


.slider-dots {

    display: flex;

    align-items: center;

    gap: 8px;

}


.slider-dot {

    width: 35px;

    height: 4px;

    padding: 0;

    border: 0;

    border-radius: 20px;

    background: #a6adba;

    transition:
        width .25s ease,
        background .25s ease;

}


.slider-dot.active {

    width: 37px;

    background: var(--teal);

}


/* =========================================================
   SLIDER NAVIGATION
========================================================= */

.slider-navigation {

    display: flex;

    align-items: center;

    gap: 9px;

}


.slider-navigation > span {

    margin-right: 6px;

    color: var(--navy);

    font-size: 13px;

}


.slider-navigation b {

    color: var(--teal);

}


.slider-navigation em {

    margin: 0 4px;

    font-style: normal;

}


.slider-navigation button {

    width: 43px;

    height: 43px;

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

    border-radius: 50%;

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

    color: var(--navy);

    display: flex;

    align-items: center;

    justify-content: center;

    transition:
        background-color .25s ease,
        color .25s ease;

}


.slider-navigation button:hover {

    background: var(--navy);

    color: #ffffff;

}


/* =========================================================
   SCROLL INDICATOR
========================================================= */

.scroll-indicator {

    position: absolute;

    z-index: 30;

    right: 20px;

    bottom: 50px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 10px;

}


.scroll-indicator span {

    writing-mode: vertical-rl;

    transform: rotate(180deg);

    color: var(--navy);

    font-size: 12px;

    font-weight: 700;

}


.scroll-indicator div {

    width: 39px;

    height: 39px;

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

    border-radius: 50%;

    color: var(--navy);

    display: grid;

    place-items: center;

}


/* =========================================================
   FUTURE ANCHORS
========================================================= */

.future-anchor {

    min-height: 1px;

    scroll-margin-top: 100px;

}


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

body.dark-mode {

    background: #080f27;

    color: #ffffff;

}


body.dark-mode .site-header {

    background: #0d1636;

    border-color: rgba(255,255,255,.08);

}


body.dark-mode .desktop-nav > a {

    color: #ffffff;

}


body.dark-mode .desktop-nav .candidate-portal {

    color: #aeb6c9;

}


body.dark-mode .header-icon-btn {

    border-color: #27335a;

    background: #182346;

    color: #ffffff;

}


body.dark-mode .mobile-toggle {

    border-color: #27335a;

    background: #182346;

    color: #ffffff;

}


body.dark-mode .hero-section {

    background: #0b1430;

}


body.dark-mode .hero-overlay {

    background:
        linear-gradient(
            90deg,
            rgba(8,15,39,.98) 0%,
            rgba(8,15,39,.93) 30%,
            rgba(8,15,39,.72) 55%,
            rgba(8,15,39,.25) 78%,
            rgba(8,15,39,.05) 100%
        );

}


body.dark-mode .hero-content h1 {

    color: #ffffff;

}


body.dark-mode .hero-content p {

    color: #c4cada;

}


body.dark-mode .hero-secondary {

    border-color: #ffffff;

    color: #ffffff;

}


body.dark-mode .hero-cv {

    color: #ffffff;

}


body.dark-mode .social-sidebar span,
body.dark-mode .social-sidebar a,
body.dark-mode .scroll-indicator span,
body.dark-mode .scroll-indicator div {

    color: #ffffff;

}


body.dark-mode .slider-navigation > span {

    color: #ffffff;

}


body.dark-mode .slider-navigation button {

    border-color: #ffffff;

    background: rgba(8,15,39,.45);

    color: #ffffff;

}


body.dark-mode .search-box {

    background: #111c3c;

}


body.dark-mode .search-title h2 {

    color: #ffffff;

}


body.dark-mode .search-input-wrap {

    border-color: #ffffff;

}


body.dark-mode .search-input-wrap input {

    color: #ffffff;

}


/* =========================================================
   GENERAL SECTION HELPERS
========================================================= */

.section-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: var(--teal);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.8px;

}


.section-eyebrow::before {

    content: "";

    width: 28px;

    height: 2px;

    background: var(--teal);

}


/* =========================================================
   STATS STRIP
========================================================= */

.stats-strip {

    position: relative;

    z-index: 5;

    padding: 0 8%;

    background: #ffffff;

}


.stats-container {

    min-height: 125px;

    display: grid;

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

    align-items: center;

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

}


.stat-item {

    min-height: 75px;

    padding: 10px 25px;

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

    display: flex;

    flex-direction: column;

    justify-content: center;

}


.stat-item:last-child {

    border-right: 0;

}


.stat-number {

    color: var(--teal);

    font-size: 29px;

    line-height: 1;

    font-weight: 800;

}


.stat-title {

    margin-top: 7px;

    color: var(--navy);

    font-size: 14px;

    font-weight: 700;

}


.stat-desc {

    margin-top: 4px;

    color: var(--muted);

    font-size: 11px;

}


body.dark-mode .stats-strip {

    background: #080f27;

}


body.dark-mode .stats-container {

    border-color: #263256;

}


body.dark-mode .stat-item {

    border-color: #263256;

}


body.dark-mode .stat-title {

    color: #ffffff;

}


body.dark-mode .stat-desc {

    color: #aab2c5;

}


/* =========================================================
   ABOUT SECTION
========================================================= */

.about-section {

    position: relative;

    overflow: hidden;

    padding: 110px 0;

    background: #ffffff;

}


.about-container {

    width: min(1180px, calc(100% - 40px));

    margin: 0 auto;

    display: grid;

    grid-template-columns: 0.95fr 1.05fr;

    align-items: center;

    gap: 80px;

    position: relative;

    z-index: 2;

}


.about-decor {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

}


.about-decor-one {

    width: 360px;

    height: 360px;

    top: -130px;

    left: -160px;

    background: rgba(16,184,177,.06);

}


.about-decor-two {

    width: 280px;

    height: 280px;

    right: -120px;

    bottom: -100px;

    background: rgba(244,169,0,.06);

}


.about-visual {

    position: relative;

    min-height: 520px;

    display: flex;

    align-items: center;

    justify-content: center;

}


.about-shape {

    position: relative;

    z-index: 3;

    width: 420px;

    height: 500px;

    overflow: hidden;

    border-radius: 210px 210px 15px 15px;

    background: #edf5f5;

}


.about-shape img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}


.about-orange-shape {

    position: absolute;

    z-index: 1;

    background: var(--gold);

}


.about-orange-shape.shape-one {

    width: 125px;

    height: 125px;

    left: 0;

    bottom: 20px;

    border-radius: 50%;

}


.about-orange-shape.shape-two {

    width: 95px;

    height: 95px;

    right: 20px;

    top: 35px;

    border-radius: 50%;

    background: var(--teal);

}


.about-experience {

    position: absolute;

    z-index: 5;

    left: 15px;

    bottom: 45px;

    width: 155px;

    min-height: 105px;

    padding: 18px;

    background: var(--navy);

    color: #ffffff;

    display: flex;

    flex-direction: column;

    justify-content: center;

}


.about-experience strong {

    color: var(--gold);

    font-size: 34px;

    line-height: 1;

}


.about-experience span {

    margin-top: 6px;

    font-size: 12px;

    line-height: 1.4;

    font-weight: 600;

}


.about-content {

    padding-top: 10px;

}


.about-eyebrow {

    color: var(--teal);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;

}


.about-content h2 {

    margin: 15px 0 20px;

    color: var(--navy);

    font-size: clamp(38px, 4vw, 55px);

    line-height: 1.08;

    letter-spacing: -1.5px;

}


.about-content h2 span {

    color: var(--teal);

    display: block;

}


.about-intro {

    max-width: 100%;

    color: var(--muted);

    font-size: 15px;

    line-height: 1.8;

}


.about-features {

    margin-top: 35px;

    display: grid;

    gap: 22px;

}


.about-feature {

    display: grid;

    grid-template-columns: 55px 1fr;

    gap: 17px;

    align-items: start;

}


.feature-icon {

    width: 55px;

    height: 55px;

    border: 1px solid #dce5e9;

    background: #f7fbfb;

    display: grid;

    place-items: center;

}


.feature-icon span {

    color: var(--teal);

    font-size: 14px;

    font-weight: 800;

}


.about-feature h3 {

    margin-bottom: 5px;

    color: var(--navy);

    font-size: 17px;

}


.about-feature p {

    color: var(--muted);

    font-size: 13px;

    line-height: 1.65;

}


.about-bottom {

    margin-top: 35px;

    padding-top: 25px;

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

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

}


.about-author {

    display: flex;

    align-items: center;

    gap: 12px;

}


.author-avatar {

    width: 45px;

    height: 45px;

    border-radius: 50%;

    background: var(--teal);

    color: #ffffff;

    display: grid;

    place-items: center;

    font-size: 11px;

    font-weight: 800;

}


.about-author strong {

    display: block;

    color: var(--navy);

    font-size: 13px;

}


.about-author span {

    display: block;

    margin-top: 3px;

    color: var(--muted);

    font-size: 11px;

}


.about-btn {

    min-height: 46px;

    padding: 0 18px;

    background: var(--navy);

    color: #ffffff;

    display: inline-flex;

    align-items: center;

    gap: 15px;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1px;

    transition: background .25s ease;

}


.about-btn:hover {

    background: var(--teal);

}


body.dark-mode .about-section {

    background: #0b1430;

}


body.dark-mode .about-content h2,
body.dark-mode .about-feature h3,
body.dark-mode .about-author strong {

    color: #ffffff;

}


body.dark-mode .about-intro,
body.dark-mode .about-feature p,
body.dark-mode .about-author span {

    color: #adb6ca;

}


body.dark-mode .about-bottom {

    border-color: #27335a;

}


body.dark-mode .feature-icon {

    background: #111c3c;

    border-color: #27335a;

}

/* =========================================================
   ABOUT SECTION - CONTINUED / FINAL
========================================================= */

.about-section {
    position: relative;
    overflow: hidden;
    padding: 110px 0;
    background: #ffffff;
}

.about-container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    align-items: center;
    gap: 80px;
    position: relative;
    z-index: 2;
}

.about-decor {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.about-decor-one {
    width: 420px;
    height: 420px;
    right: -220px;
    top: 40px;
    border: 1px solid rgba(16,184,177,.12);
}

.about-decor-two {
    width: 300px;
    height: 300px;
    left: -180px;
    bottom: -160px;
    border: 1px solid rgba(17,27,71,.08);
}


/* IMAGE */

.about-visual {
    position: relative;
    min-height: 540px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-shape {
    width: 430px;
    height: 500px;
    position: relative;
    overflow: hidden;

    clip-path: polygon(
        18% 0%,
        82% 0%,
        100% 18%,
        100% 82%,
        82% 100%,
        18% 100%,
        0% 82%,
        0% 18%
    );

    z-index: 3;
}

.about-shape img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-orange-shape {
    position: absolute;
    background: var(--gold);
    z-index: 1;
}

.shape-one {
    width: 150px;
    height: 150px;
    left: 0;
    top: 35px;

    clip-path: polygon(
        0 0,
        100% 0,
        70% 100%,
        0 70%
    );
}

.shape-two {
    width: 130px;
    height: 130px;
    right: 5px;
    bottom: 35px;

    clip-path: polygon(
        30% 0,
        100% 30%,
        100% 100%,
        0 100%
    );
}

.about-experience {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);

    width: 145px;
    height: 145px;

    border-radius: 50%;
    background: var(--navy);
    color: #fff;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
    z-index: 5;

    box-shadow: 0 15px 35px rgba(17,27,71,.20);
}

.about-experience strong {
    font-size: 42px;
    line-height: 1;
    color: var(--gold);
}

.about-experience span {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 600;
}


/* ABOUT CONTENT */

.about-content {
    position: relative;
}

.about-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 18px;

    color: var(--teal);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
}

.about-eyebrow::before {
    content: "";
    width: 35px;
    height: 3px;
    background: var(--gold);
}

.about-content h2 {
    margin: 0 0 22px;

    color: var(--navy);
    font-size: clamp(38px,4vw,56px);
    line-height: 1.08;
    letter-spacing: -1.5px;
    font-weight: 800;
}

.about-content h2 span {
    display: block;
    color: var(--teal);
}

.about-intro {
    max-width: 100%;
    margin: 0 0 30px;

    color: var(--muted);
    font-size: 16px;
    line-height: 1.8;
}


/* FEATURES */

.about-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    margin-bottom: 35px;
}

.about-feature {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.feature-icon {
    flex: 0 0 48px;

    width: 48px;
    height: 48px;

    border-radius: 50%;
    background: rgba(16,184,177,.10);

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

.feature-icon span {
    font-size: 12px;
    font-weight: 800;
    color: var(--teal);
}

.about-feature h3 {
    margin: 0 0 7px;

    color: var(--navy);
    font-size: 17px;
}

.about-feature p {
    margin: 0;

    color: var(--muted);
    font-size: 13px;
    line-height: 1.65;
}


/* ABOUT BOTTOM */

.about-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;

    padding-top: 25px;
    border-top: 1px solid var(--border);
}

.about-author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.author-avatar {
    width: 48px;
    height: 48px;

    border-radius: 50%;
    background: var(--navy);
    color: #fff;

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

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

.about-author strong {
    display: block;
    color: var(--navy);
    font-size: 14px;
}

.about-author span {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
}

.about-btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;

    padding: 14px 23px;

    background: var(--navy);
    color: #fff;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;

    transition: .3s ease;
}

.about-btn span {
    font-size: 18px;
    color: var(--gold);
}

.about-btn:hover {
    background: var(--teal);
    transform: translateY(-2px);
}



/* ==========================================
   SERVICES PAGE
========================================== */

.services-page .services-hero {
    padding-top: 90px;
    padding-bottom: 95px;
}

.services-page .services-intro {
    background: #ffffff;
}

.services-page .services-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.services-page .service-card {
    min-width: 0;
    padding: 30px;
    border: 1px solid #e2ecee;
    border-radius: 12px;
    background: #ffffff;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.services-page .service-card:hover {
    transform: translateY(-5px);
    border-color: #b9e5df;
    box-shadow: 0 14px 35px rgba(18, 61, 76, 0.08);
}

.services-page .service-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.services-page .service-icon {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border-radius: 11px;
    background: #e6f7f3;
    color: #139e96;
    font-size: 23px;
}

.services-page .service-number {
    color: #a5b9bd;
    font-family: "Outfit", sans-serif;
    font-size: 22px;
    font-weight: 700;
}

.services-page .service-card h3 {
    margin: 0 0 12px;
    color: #153e4b;
    font-family: "Outfit", sans-serif;
    font-size: 24px;
    font-weight: 700;
}

.services-page .service-card p {
    margin: 0 0 22px;
    color: #61737c;
    font-size: 15px;
    line-height: 1.85;
}

.services-page .service-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #108e86;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.services-page .service-link i {
    transition: transform 0.2s ease;
}

.services-page .service-link:hover {
    color: #0b6e68;
}

.services-page .service-link:hover i {
    transform: translateX(4px);
}

/* Benefits section */
.services-page .services-benefits {
    background: #f4f8fa;
}

.services-page .benefits-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 65px;
}

.services-page .benefits-content h2 {
    margin: 0 0 20px;
    color: #153e4b;
    font-family: "Outfit", sans-serif;
    font-size: clamp(30px, 3.5vw, 42px);
    line-height: 1.2;
}

.services-page .benefits-content > p {
    margin: 0 0 25px;
    color: #61737c;
    font-size: 15px;
    line-height: 1.9;
}

.services-page .benefits-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.services-page .benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 22px;
    border: 1px solid #e1ebed;
    border-radius: 10px;
    background: #ffffff;
}

.services-page .benefit-check {
    display: grid;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 50%;
    background: #e5f6f2;
    color: #139e96;
}

.services-page .benefit-item h3 {
    margin: 0 0 7px;
    color: #153e4b;
    font-family: "Outfit", sans-serif;
    font-size: 17px;
}

.services-page .benefit-item p {
    margin: 0;
    color: #61737c;
    font-size: 14px;
    line-height: 1.8;
}

.services-page .services-cta .section-eyebrow {
    color: #74ded3;
}

/* Dark mode */
body.dark-mode .services-page .services-intro {
    background: #13252e;
}

body.dark-mode .services-page .services-benefits {
    background: #172c35;
}

body.dark-mode .services-page .service-card,
body.dark-mode .services-page .benefit-item {
    border-color: #314850;
    background: #1a303a;
}

body.dark-mode .services-page .service-card h3,
body.dark-mode .services-page .benefits-content h2,
body.dark-mode .services-page .benefit-item h3 {
    color: #edf7f8;
}

body.dark-mode .services-page .service-card p,
body.dark-mode .services-page .benefits-content > p,
body.dark-mode .services-page .benefit-item p {
    color: #c0d1d6;
}

body.dark-mode .services-page .service-number {
    color: #a8c1c7;
}


/* ==========================================
   C-SUITE HIRING PAGE
========================================== */

.executive-page .executive-intro {
    background: #ffffff;
}

.executive-page .executive-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: 60px;
}

.executive-page .executive-copy h2 {
    margin: 0 0 22px;
    color: #123d4c;
    font-family: "Outfit", sans-serif;
    font-size: clamp(30px, 3.5vw, 43px);
    line-height: 1.2;
}

.executive-page .executive-copy p {
    margin: 0 0 17px;
    color: #61737c;
    font-size: 15px;
    line-height: 1.9;
}

.executive-page .executive-highlight {
    padding: 38px;
    border: 1px solid #dcefeb;
    border-radius: 12px;
    background: linear-gradient(135deg, #e8f8f5, #f6fbfa);
}

.executive-page .executive-highlight-icon {
    display: grid;
    width: 58px;
    height: 58px;
    margin-bottom: 24px;
    place-items: center;
    border-radius: 10px;
    background: #d7f1ec;
    color: #139e96;
    font-size: 24px;
}

.executive-page .executive-highlight > span {
    color: #139e96;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.executive-page .executive-highlight h3 {
    margin: 12px 0;
    color: #153e4b;
    font-family: "Outfit", sans-serif;
    font-size: 27px;
    line-height: 1.3;
}

.executive-page .executive-highlight p {
    margin: 0;
    color: #61737c;
    line-height: 1.9;
}

.executive-page .executive-roles {
    background: #f4f8fa;
}

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

.executive-page .executive-role-card {
    padding: 28px;
    border: 1px solid #e2ecee;
    border-radius: 10px;
    background: #ffffff;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.executive-page .executive-role-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(18, 61, 76, 0.07);
}

.executive-page .role-icon {
    display: grid;
    width: 50px;
    height: 50px;
    margin-bottom: 20px;
    place-items: center;
    border-radius: 9px;
    background: #e6f7f3;
    color: #139e96;
    font-size: 21px;
}

.executive-page .executive-role-card h3,
.executive-page .process-card h3 {
    margin: 0 0 12px;
    color: #153e4b;
    font-family: "Outfit", sans-serif;
    font-size: 20px;
}

.executive-page .executive-role-card p,
.executive-page .process-card p {
    margin: 0;
    color: #61737c;
    font-size: 14px;
    line-height: 1.9;
}

.executive-page .executive-process {
    background: #ffffff;
}

.executive-page .executive-process-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.executive-page .process-card {
    padding: 28px;
    border: 1px solid #e2ecee;
    border-radius: 10px;
    background: #ffffff;
}

.executive-page .process-number {
    display: inline-block;
    margin-bottom: 20px;
    color: #139e96;
    font-family: "Outfit", sans-serif;
    font-size: 28px;
    font-weight: 800;
}

body.dark-mode .executive-page .executive-intro,
body.dark-mode .executive-page .executive-process {
    background: #13252e;
}

body.dark-mode .executive-page .executive-roles {
    background: #172c35;
}

body.dark-mode .executive-page .executive-copy h2,
body.dark-mode .executive-page .executive-highlight h3,
body.dark-mode .executive-page .executive-role-card h3,
body.dark-mode .executive-page .process-card h3 {
    color: #edf7f8;
}

body.dark-mode .executive-page .executive-copy p,
body.dark-mode .executive-page .executive-highlight p,
body.dark-mode .executive-page .executive-role-card p,
body.dark-mode .executive-page .process-card p {
    color: #c0d1d6;
}

body.dark-mode .executive-page .executive-highlight,
body.dark-mode .executive-page .executive-role-card,
body.dark-mode .executive-page .process-card {
    border-color: #314850;
    background: #1a303a;
}

@media (max-width: 800px) {
    .executive-page .executive-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    .executive-page .executive-role-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .executive-page .executive-process-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 600px) {
    .executive-page .executive-highlight,
    .executive-page .executive-role-card,
    .executive-page .process-card {
        padding: 24px;
    }
}

/* =========================================
   TALENT LADDER - JOBS PAGE
========================================= */

.jobs-page {
    font-family: 'Outfit', sans-serif;
    color: #172b3a;
}

.jobs-container {
    width: min(1160px, 90%);
    margin: 0 auto;
}

.jobs-section {
    padding: 85px 0;
}

.jobs-hero {
    position: relative;
    overflow: hidden;
    padding: 105px 0 90px;
    background: linear-gradient(135deg, #e5f7f0 0%, #f5fbf8 65%, #eaf5f2 100%);
}

.jobs-hero-content {
    position: relative;
    z-index: 2;
}

.jobs-eyebrow,
.jobs-section-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #087d69;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.7px;
}

.jobs-hero h1 {
    max-width: 780px;
    margin: 22px 0;
    color: #172b3a;
    font-size: clamp(38px, 5.2vw, 65px);
    line-height: 1.12;
    letter-spacing: -1.8px;
}

.jobs-hero h1 span {
    color: #07856e;
}

.jobs-hero-content > p {
    max-width: 650px;
    color: #586b75;
    font-size: 17px;
    line-height: 1.85;
}

.jobs-hero-actions,
.jobs-cta-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 30px;
}

.jobs-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 11px;
    min-height: 48px;
    padding: 13px 21px;
    border: 1px solid transparent;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.25s ease;
}

.jobs-btn:hover {
    transform: translateY(-2px);
}

.jobs-btn-primary {
    background: #087d69;
    color: #fff;
}

.jobs-btn-primary:hover {
    background: #066653;
}

.jobs-btn-outline {
    border-color: #b6d6cb;
    color: #175849;
    background: rgba(255,255,255,0.5);
}

.jobs-hero-note {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 25px;
    color: #64766f;
    font-size: 12px;
}

.jobs-hero-decoration {
    position: absolute;
    border: 1px solid rgba(8, 125, 105, 0.12);
    border-radius: 50%;
    pointer-events: none;
}

.jobs-decoration-one {
    width: 370px;
    height: 370px;
    right: -100px;
    top: -120px;
}

.jobs-decoration-two {
    width: 240px;
    height: 240px;
    right: 100px;
    bottom: -170px;
}

/* Intro */

.jobs-intro-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 65px;
}

.jobs-intro h2,
.jobs-section-heading h2 {
    margin: 15px 0;
    color: #172b3a;
    font-size: clamp(29px, 3.5vw, 42px);
    line-height: 1.2;
    letter-spacing: -0.8px;
}

.jobs-intro-grid > div:first-child > p {
    color: #687680;
    font-size: 15px;
    line-height: 1.9;
}

.jobs-text-link,
.jobs-card-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
    color: #087d69;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.jobs-intro-panel {
    padding: 35px;
    border: 1px solid #e1eee8;
    border-radius: 14px;
    background: #f5faf7;
}

.jobs-panel-icon,
.jobs-card-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 54px;
    height: 54px;
    border-radius: 12px;
    color: #087d69;
    background: #dff3ea;
    font-size: 22px;
}

.jobs-intro-panel h3 {
    margin: 22px 0 10px;
    color: #172b3a;
    font-size: 23px;
}

.jobs-intro-panel p,
.jobs-intro-panel li {
    color: #687680;
    font-size: 14px;
    line-height: 1.8;
}

.jobs-intro-panel ul {
    display: grid;
    gap: 12px;
    padding: 0;
    margin: 22px 0 0;
    list-style: none;
}

.jobs-intro-panel li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.jobs-intro-panel li i {
    margin-top: 5px;
    color: #07856e;
}

/* Career areas */

.jobs-career-section {
    background: #f7faf9;
}

.jobs-section-heading {
    max-width: 720px;
    margin: 0 auto 42px;
    text-align: center;
}

.jobs-section-heading > p {
    color: #687680;
    font-size: 15px;
    line-height: 1.8;
}

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

.jobs-career-card {
    position: relative;
    min-width: 0;
    padding: 30px;
    border: 1px solid #e5ece9;
    border-radius: 12px;
    background: #fff;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.jobs-career-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 35px rgba(25, 65, 52, 0.08);
}

.jobs-card-number {
    position: absolute;
    top: 30px;
    right: 30px;
    color: #b5d9cd;
    font-size: 23px;
    font-weight: 700;
}

.jobs-career-card h3 {
    margin: 22px 0 10px;
    color: #172b3a;
    font-size: 21px;
}

.jobs-career-card p {
    margin: 0;
    color: #687680;
    font-size: 14px;
    line-height: 1.85;
}

/* Process */

.jobs-process-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.jobs-process-card {
    position: relative;
    padding: 25px 20px;
    border: 1px solid #e8eeeb;
    border-radius: 10px;
    background: #fff;
}

.jobs-process-number {
    display: block;
    margin-bottom: 22px;
    color: #07856e;
    font-size: 13px;
    font-weight: 700;
}

.jobs-process-card > i {
    color: #07856e;
    font-size: 25px;
}

.jobs-process-card h3 {
    margin: 17px 0 9px;
    color: #172b3a;
    font-size: 17px;
}

.jobs-process-card p {
    margin: 0;
    color: #687680;
    font-size: 13px;
    line-height: 1.8;
}

/* CTA */

.jobs-cta-section {
    padding: 65px 0;
    background: #173a3a;
}

.jobs-cta-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 35px;
}

.jobs-cta-content .jobs-section-label {
    color: #a5e2cf;
}

.jobs-cta-content h2 {
    margin: 15px 0 12px;
    color: #fff;
    font-size: clamp(28px, 3.5vw, 40px);
}

.jobs-cta-content p {
    max-width: 610px;
    margin: 0;
    color: #d2e0dc;
    font-size: 15px;
    line-height: 1.8;
}

.jobs-btn-light {
    flex-shrink: 0;
    background: #fff;
    color: #173a3a;
}

.jobs-btn-cta-outline {
    flex-shrink: 0;
    border-color: rgba(255,255,255,0.45);
    color: #fff;
}

/* Dark mode */

body.dark-mode .jobs-page {
    color: #edf4f2;
}

body.dark-mode .jobs-hero {
    background: linear-gradient(135deg, #142d2b, #1a3734);
}

body.dark-mode .jobs-hero h1,
body.dark-mode .jobs-intro h2,
body.dark-mode .jobs-section-heading h2,
body.dark-mode .jobs-intro-panel h3,
body.dark-mode .jobs-career-card h3,
body.dark-mode .jobs-process-card h3 {
    color: #edf4f2;
}

body.dark-mode .jobs-hero-content > p,
body.dark-mode .jobs-intro-grid > div:first-child > p,
body.dark-mode .jobs-section-heading > p,
body.dark-mode .jobs-career-card p,
body.dark-mode .jobs-process-card p {
    color: #bdcbc7;
}

body.dark-mode .jobs-career-section,
body.dark-mode .jobs-career-card,
body.dark-mode .jobs-process-card {
    background: #172b2a;
}

body.dark-mode .jobs-career-card,
body.dark-mode .jobs-process-card,
body.dark-mode .jobs-intro-panel {
    border-color: #304542;
}

body.dark-mode .jobs-intro-panel {
    background: #1b302e;
}

body.dark-mode .jobs-intro-panel p,
body.dark-mode .jobs-intro-panel li {
    color: #bdcbc7;
}

body.dark-mode .jobs-btn-outline {
    color: #d9eee7;
    border-color: #45645b;
}

/* Responsive */

@media (max-width: 900px) {
    .jobs-intro-grid {
        gap: 35px;
    }

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

    .jobs-cta-content {
        align-items: flex-start;
        flex-direction: column;
    }

    .jobs-cta-actions {
        margin-top: 0;
    }
}

@media (max-width: 600px) {
    .jobs-container {
        width: 90%;
    }

    .jobs-section {
        padding: 58px 0;
    }

    .jobs-hero {
        padding: 70px 0 58px;
    }

    .jobs-hero h1 {
        font-size: 38px;
        letter-spacing: -1px;
    }

    .jobs-hero-content > p {
        font-size: 15px;
    }

    .jobs-hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .jobs-hero-actions .jobs-btn {
        width: 100%;
        box-sizing: border-box;
    }

    .jobs-intro-grid,
    .jobs-career-grid,
    .jobs-process-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .jobs-intro-panel,
    .jobs-career-card {
        padding: 24px;
    }

    .jobs-card-number {
        right: 24px;
    }

    .jobs-section-heading {
        margin-bottom: 30px;
    }

    .jobs-cta-section {
        padding: 50px 0;
    }

    .jobs-cta-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .jobs-cta-actions .jobs-btn {
        width: 100%;
        box-sizing: border-box;
    }
}
/* ======================================
   TESTIMONIALS PAGE
====================================== */

.testimonials-page {
    font-family: 'Outfit', sans-serif;
    color: #18343a;
}

.testimonials-container {
    width: min(1160px, 90%);
    margin: 0 auto;
}

.testimonials-hero {
    padding: 100px 0 90px;
    background: linear-gradient(135deg, #e4f6ee, #f5faf7);
}

.testimonials-eyebrow,
.testimonials-label {
    color: #087d69;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.testimonials-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.testimonials-hero h1 {
    margin: 24px 0 20px;
    color: #18343a;
    font-size: clamp(38px, 5.5vw, 64px);
    line-height: 1.12;
    letter-spacing: -1.5px;
}

.testimonials-hero h1 span {
    color: #07856e;
}

.testimonials-hero p {
    max-width: 670px;
    color: #60736f;
    font-size: 16px;
    line-height: 1.9;
}

.testimonials-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    padding: 14px 22px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: #087d69;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.25s ease;
}

.testimonials-btn:hover {
    background: #066653;
    transform: translateY(-2px);
}

/* Intro */

.testimonials-section {
    padding: 75px 0;
}

.testimonials-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 55px;
}

.testimonials-intro h2,
.testimonials-heading h2,
.testimonials-feedback-panel h2,
.testimonials-cta h2 {
    margin: 16px 0;
    color: #18343a;
    font-size: clamp(28px, 3.4vw, 41px);
    line-height: 1.25;
}

.testimonials-intro > p,
.testimonials-heading > p,
.testimonials-feedback-panel > p {
    color: #687a7b;
    font-size: 15px;
    line-height: 1.9;
}

/* Values cards */

.testimonials-values-section {
    padding: 80px 0;
    background: #f5f9f7;
}

.testimonials-heading {
    max-width: 700px;
    margin: 0 auto 42px;
    text-align: center;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 23px;
}

.testimonial-card {
    padding: 32px 27px;
    border: 1px solid #e2ece7;
    border-radius: 12px;
    background: #fff;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 35px rgba(20, 60, 48, 0.08);
}

.testimonial-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 55px;
    border-radius: 12px;
    background: #e1f4eb;
    color: #087d69;
    font-size: 22px;
}

.testimonial-card h3 {
    margin: 23px 0 12px;
    color: #18343a;
    font-size: 20px;
}

.testimonial-card p {
    margin: 0;
    color: #687a7b;
    font-size: 14px;
    line-height: 1.9;
}

/* Feedback panel */

.testimonials-feedback-panel {
    padding: 45px;
    border: 1px solid #e0eee7;
    border-radius: 16px;
    background: #f5faf7;
    text-align: center;
}

.feedback-panel-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 23px;
    border-radius: 50%;
    background: #dff3e9;
    color: #087d69;
    font-size: 25px;
}

.testimonials-feedback-panel > p {
    max-width: 720px;
    margin: 0 auto;
}

/* CTA */

.testimonials-cta {
    padding: 65px 0;
    background: #173a3a;
}

.testimonials-cta-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
}

.testimonials-cta .testimonials-label {
    color: #a5e2cf;
}

.testimonials-cta h2 {
    color: #fff;
}

.testimonials-cta p {
    max-width: 600px;
    margin: 0;
    color: #d2e0dc;
    font-size: 15px;
    line-height: 1.8;
}

.testimonials-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.testimonials-btn-light {
    flex-shrink: 0;
    background: #fff;
    color: #173a3a;
}

.testimonials-btn-light:hover {
    background: #e9f4ef;
    color: #173a3a;
}

.testimonials-btn-outline {
    flex-shrink: 0;
    border-color: rgba(255,255,255,0.45);
    background: transparent;
    color: #fff;
}

.testimonials-btn-outline:hover {
    background: rgba(255,255,255,0.08);
}

/* Dark mode */

body.dark-mode .testimonials-page {
    color: #edf4f2;
}

body.dark-mode .testimonials-hero {
    background: linear-gradient(135deg, #142d2b, #1a3734);
}

body.dark-mode .testimonials-hero h1,
body.dark-mode .testimonials-intro h2,
body.dark-mode .testimonials-heading h2,
body.dark-mode .testimonials-feedback-panel h2,
body.dark-mode .testimonial-card h3 {
    color: #edf4f2;
}

body.dark-mode .testimonials-hero p,
body.dark-mode .testimonials-intro > p,
body.dark-mode .testimonials-heading > p,
body.dark-mode .testimonial-card p,
body.dark-mode .testimonials-feedback-panel > p {
    color: #bdcbc7;
}

body.dark-mode .testimonials-values-section,
body.dark-mode .testimonial-card {
    background: #172b2a;
}

body.dark-mode .testimonial-card,
body.dark-mode .testimonials-feedback-panel {
    border-color: #304542;
}

body.dark-mode .testimonials-feedback-panel {
    background: #1b302e;
}

/* Responsive */

@media (max-width: 850px) {
    .testimonials-intro {
        gap: 30px;
    }

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

    .testimonials-cta-content {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 600px) {
    .testimonials-container {
        width: 90%;
    }

    .testimonials-hero {
        padding: 65px 0 55px;
    }

    .testimonials-hero h1 {
        font-size: 38px;
        letter-spacing: -0.8px;
    }

    .testimonials-hero p {
        font-size: 15px;
    }

    .testimonials-section,
    .testimonials-values-section {
        padding: 55px 0;
    }

    .testimonials-intro,
    .testimonials-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .testimonial-card {
        padding: 26px 23px;
    }

    .testimonials-feedback-panel {
        padding: 30px 22px;
    }

    .testimonials-cta {
        padding: 50px 0;
    }

    .testimonials-cta-actions {
        width: 100%;
        flex-direction: column;
    }

    .testimonials-cta-actions .testimonials-btn {
        width: 100%;
        box-sizing: border-box;
    }
}


/* CONTACT PAGE HERO — LAYOUT FIX */
.contact-page .contact-hero {
    display: block !important;
    padding: 65px 0 70px !important;
    overflow: hidden;
}

.contact-page .contact-hero .contact-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    width: min(1160px, 90%) !important;
    margin: 0 auto !important;
    text-align: left !important;
}

.contact-page .contact-hero .contact-eyebrow {
    position: static !important;
    float: none !important;
    order: 1 !important;
    margin: 0 0 22px !important;
}

.contact-page .contact-hero h1 {
    position: static !important;
    float: none !important;
    order: 2 !important;
    display: block !important;
    width: 100% !important;
    max-width: 850px !important;
    margin: 0 0 20px !important;
    text-align: left !important;
    transform: none !important;
}

.contact-page .contact-hero p {
    position: static !important;
    float: none !important;
    order: 3 !important;
    display: block !important;
    width: 100% !important;
    max-width: 650px !important;
    margin: 0 !important;
    text-align: left !important;
}

@media (max-width: 600px) {
    .contact-page .contact-hero {
        padding: 48px 0 !important;
    }

    .contact-page .contact-hero h1 {
        font-size: 36px !important;
    }
}


/* ======================================
   TALENT LADDER - CONTACT PAGE
====================================== */

.contact-page {
    font-family: 'Outfit', sans-serif;
    color: #18343a;
}

.contact-container {
    width: min(1160px, 90%);
    margin: 0 auto;
}

.contact-hero {
    padding: 85px 0 75px;
    background: linear-gradient(135deg, #e4f6ee, #f5faf7);
}

.contact-eyebrow,
.contact-label {
    color: #087d69;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.contact-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.contact-hero h1 {
    margin: 22px 0 17px;
    color: #18343a;
    font-size: clamp(38px, 5vw, 61px);
    line-height: 1.13;
    letter-spacing: -1.5px;
}

.contact-hero h1 span {
    color: #07856e;
}

.contact-hero p {
    max-width: 650px;
    color: #60736f;
    font-size: 16px;
    line-height: 1.9;
}

/* Main layout */

.contact-main-section {
    padding: 80px 0;
}

.contact-layout {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    align-items: start;
    gap: 60px;
}

.contact-info h2,
.contact-form-card h2 {
    margin: 15px 0;
    color: #18343a;
    font-size: clamp(27px, 3vw, 36px);
    line-height: 1.25;
}

.contact-description,
.contact-form-intro {
    color: #687a7b;
    font-size: 14px;
    line-height: 1.9;
}

.contact-info-card {
    display: flex;
    align-items: flex-start;
    gap: 17px;
    margin-top: 28px;
}

.contact-info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: #e1f4eb;
    color: #087d69;
    font-size: 19px;
}

.contact-info-card h3 {
    margin: 2px 0 6px;
    color: #18343a;
    font-size: 17px;
}

.contact-info-card p {
    margin: 0;
    color: #687a7b;
    font-size: 13px;
    line-height: 1.7;
}

.contact-info-note {
    display: flex;
    gap: 12px;
    margin-top: 35px;
    padding: 17px;
    border-radius: 9px;
    background: #f1f8f4;
    color: #087d69;
}

.contact-info-note i {
    margin-top: 3px;
}

.contact-info-note p {
    margin: 0;
    color: #60736f;
    font-size: 12px;
    line-height: 1.8;
}

/* Form */

.contact-form-card {
    padding: 35px;
    border: 1px solid #e2ece7;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 38px rgba(25, 65, 52, 0.05);
}

.contact-form-intro {
    margin-bottom: 25px;
}

.contact-form {
    display: grid;
    gap: 19px;
}

.contact-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.contact-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.contact-field label {
    color: #263e43;
    font-size: 13px;
    font-weight: 600;
}

.contact-field input,
.contact-field select,
.contact-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 14px;
    border: 1px solid #dce7e2;
    border-radius: 7px;
    outline: none;
    background: #fff;
    color: #18343a;
    font: inherit;
    font-size: 13px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-field input,
.contact-field select {
    min-height: 46px;
}

.contact-field textarea {
    min-height: 125px;
    resize: vertical;
}

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
    border-color: #07856e;
    box-shadow: 0 0 0 3px rgba(7, 133, 110, 0.1);
}

.contact-submit-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 11px;
    min-height: 49px;
    padding: 14px 22px;
    border: 0;
    border-radius: 7px;
    background: #087d69;
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.25s ease;
}

.contact-submit-btn:hover {
    background: #066653;
}

.contact-form-disclaimer {
    margin: -7px 0 0;
    color: #7a8985;
    font-size: 11px;
    line-height: 1.7;
}

.contact-alert {
    margin: 18px 0;
    padding: 13px 15px;
    border-radius: 7px;
    font-size: 13px;
    line-height: 1.7;
}

.contact-alert-error {
    border: 1px solid #efc6c6;
    background: #fff4f4;
    color: #a52b2b;
}

.contact-alert-warning {
    border: 1px solid #ecd8a5;
    background: #fff9e9;
    color: #775719;
}

/* Bottom CTA */

.contact-bottom-cta {
    padding: 60px 0;
    background: #173a3a;
}

.contact-bottom-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}

.contact-bottom-content .contact-label {
    color: #a5e2cf;
}

.contact-bottom-content h2 {
    margin: 15px 0 10px;
    color: #fff;
    font-size: clamp(27px, 3.5vw, 38px);
}

.contact-bottom-content p {
    max-width: 600px;
    margin: 0;
    color: #d2e0dc;
    font-size: 14px;
    line-height: 1.8;
}

.contact-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    gap: 10px;
    padding: 14px 21px;
    border-radius: 7px;
    background: #fff;
    color: #173a3a;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

/* Dark mode */

body.dark-mode .contact-page {
    color: #edf4f2;
}

body.dark-mode .contact-hero {
    background: linear-gradient(135deg, #142d2b, #1a3734);
}

body.dark-mode .contact-hero h1,
body.dark-mode .contact-info h2,
body.dark-mode .contact-form-card h2,
body.dark-mode .contact-info-card h3 {
    color: #edf4f2;
}

body.dark-mode .contact-hero p,
body.dark-mode .contact-description,
body.dark-mode .contact-form-intro,
body.dark-mode .contact-info-card p {
    color: #bdcbc7;
}

body.dark-mode .contact-form-card {
    border-color: #304542;
    background: #172b2a;
}

body.dark-mode .contact-field label {
    color: #e1ece8;
}

body.dark-mode .contact-field input,
body.dark-mode .contact-field select,
body.dark-mode .contact-field textarea {
    border-color: #405751;
    background: #1b302e;
    color: #edf4f2;
}

body.dark-mode .contact-info-note {
    background: #1b302e;
}

body.dark-mode .contact-info-note p {
    color: #bdcbc7;
}

/* Responsive */

@media (max-width: 850px) {
    .contact-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

    .contact-bottom-content {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 600px) {
    .contact-container {
        width: 90%;
    }

    .contact-hero {
        padding: 60px 0 50px;
    }

    .contact-hero h1 {
        font-size: 37px;
        letter-spacing: -0.8px;
    }

    .contact-hero p {
        font-size: 14px;
    }

    .contact-main-section {
        padding: 55px 0;
    }

    .contact-form-card {
        padding: 23px 18px;
    }

    .contact-form-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .contact-submit-btn {
        width: 100%;
    }

    .contact-bottom-cta {
        padding: 48px 0;
    }

    .contact-cta-btn {
        width: 100%;
        box-sizing: border-box;
    }
}

/* ======================================
   HIRE TALENT PAGE
====================================== */

.hire-talent-page {
    font-family: 'Outfit', sans-serif;
    color: #18343a;
}

.hire-talent-container {
    width: min(1160px, 90%);
    margin: 0 auto;
}

.hire-talent-hero {
    padding: 80px 0 70px;
    background: linear-gradient(135deg, #e4f6ee, #f5faf7);
}

.hire-talent-eyebrow,
.hire-talent-label {
    color: #087d69;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.hire-talent-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.hire-talent-hero h1 {
    margin: 22px 0 18px;
    color: #18343a;
    font-size: clamp(38px, 5vw, 60px);
    line-height: 1.13;
    letter-spacing: -1.5px;
}

.hire-talent-hero h1 span {
    color: #07856e;
}

.hire-talent-hero p {
    max-width: 680px;
    color: #60736f;
    font-size: 16px;
    line-height: 1.9;
}

/* Layout */

.hire-talent-section {
    padding: 75px 0;
}

.hire-talent-layout {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    align-items: start;
    gap: 55px;
}

.hire-talent-sidebar h2,
.hire-talent-form-card h2 {
    margin: 15px 0;
    color: #18343a;
    font-size: clamp(27px, 3vw, 36px);
    line-height: 1.25;
}

.hire-talent-sidebar > p,
.hire-talent-form-intro {
    color: #687a7b;
    font-size: 14px;
    line-height: 1.9;
}

.hire-talent-benefit {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    margin-top: 28px;
}

.hire-talent-benefit > i {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 47px;
    height: 47px;
    border-radius: 10px;
    background: #e1f4eb;
    color: #087d69;
    font-size: 19px;
}

.hire-talent-benefit h3 {
    margin: 2px 0 6px;
    color: #18343a;
    font-size: 17px;
}

.hire-talent-benefit p {
    margin: 0;
    color: #687a7b;
    font-size: 13px;
    line-height: 1.8;
}

/* Form card */

.hire-talent-form-card {
    min-width: 0;
    padding: 35px;
    border: 1px solid #e2ece7;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 38px rgba(25, 65, 52, 0.05);
}

.hire-talent-form {
    display: grid;
    gap: 19px;
    margin-top: 25px;
}

.hire-talent-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.hire-talent-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.hire-talent-field label {
    color: #263e43;
    font-size: 13px;
    font-weight: 600;
}

.hire-talent-field input,
.hire-talent-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 14px;
    border: 1px solid #dce7e2;
    border-radius: 7px;
    outline: none;
    background: #fff;
    color: #18343a;
    font: inherit;
    font-size: 13px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.hire-talent-field input {
    min-height: 46px;
}

.hire-talent-field textarea {
    min-height: 125px;
    resize: vertical;
}

.hire-talent-field input:focus,
.hire-talent-field textarea:focus {
    border-color: #07856e;
    box-shadow: 0 0 0 3px rgba(7, 133, 110, 0.1);
}

.hire-talent-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 49px;
    padding: 14px 22px;
    border: 0;
    border-radius: 7px;
    background: #087d69;
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.25s ease;
}

.hire-talent-submit:hover {
    background: #066653;
}

.hire-talent-privacy {
    margin: -5px 0 0;
    color: #7a8985;
    font-size: 11px;
    line-height: 1.7;
}

.hire-talent-alert {
    margin-top: 18px;
    padding: 13px 15px;
    border-radius: 7px;
    font-size: 13px;
    line-height: 1.7;
}

.hire-talent-alert.error {
    border: 1px solid #efc6c6;
    background: #fff4f4;
    color: #a52b2b;
}

.hire-talent-alert.warning {
    border: 1px solid #ecd8a5;
    background: #fff9e9;
    color: #775719;
}

/* Dark mode */

body.dark-mode .hire-talent-page {
    color: #edf4f2;
}

body.dark-mode .hire-talent-hero {
    background: linear-gradient(135deg, #142d2b, #1a3734);
}

body.dark-mode .hire-talent-hero h1,
body.dark-mode .hire-talent-sidebar h2,
body.dark-mode .hire-talent-form-card h2,
body.dark-mode .hire-talent-benefit h3 {
    color: #edf4f2;
}

body.dark-mode .hire-talent-hero p,
body.dark-mode .hire-talent-sidebar > p,
body.dark-mode .hire-talent-benefit p,
body.dark-mode .hire-talent-form-intro {
    color: #bdcbc7;
}

body.dark-mode .hire-talent-form-card {
    border-color: #304542;
    background: #172b2a;
}

body.dark-mode .hire-talent-field label {
    color: #e1ece8;
}

body.dark-mode .hire-talent-field input,
body.dark-mode .hire-talent-field textarea {
    border-color: #405751;
    background: #1b302e;
    color: #edf4f2;
}

/* Responsive */

@media (max-width: 850px) {
    .hire-talent-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 38px;
    }
}

@media (max-width: 600px) {
    .hire-talent-container {
        width: 90%;
    }

    .hire-talent-hero {
        padding: 60px 0 50px;
    }

    .hire-talent-hero h1 {
        font-size: 37px;
        letter-spacing: -0.8px;
    }

    .hire-talent-hero p {
        font-size: 14px;
    }

    .hire-talent-section {
        padding: 50px 0;
    }

    .hire-talent-form-card {
        padding: 23px 18px;
    }

    .hire-talent-form-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .hire-talent-submit {
        width: 100%;
    }
}

/* ==================================
   HOME PAGE CANDIDATE POPUP
================================== */

.candidate-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(12, 29, 28, 0.72);
    backdrop-filter: blur(5px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease, visibility .25s ease;
}

.candidate-popup-overlay.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.candidate-popup {
    position: relative;
    width: min(650px, 80%);
    max-height: 90vh;
    overflow-y: auto;
    padding: 32px;
    box-sizing: border-box;
    border: 1px solid #e0eee7;
    border-radius: 16px;
    background: #fff;
    color: #18343a;
    box-shadow: 0 25px 90px rgba(0, 0, 0, .24);
    transform: translateY(15px);
    transition: transform .25s ease;
}

.candidate-popup-overlay.is-visible .candidate-popup {
    transform: translateY(0);
}

.candidate-popup-close {
    position: absolute;
    top: 14px;
    right: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: #edf5f1;
    color: #18343a;
    font-size: 18px;
    cursor: pointer;
}

.candidate-popup-header {
    padding-right: 24px;
    margin-bottom: 24px;
}

.candidate-popup-tag {
    color: #087d69;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
}

.candidate-popup-header h2 {
    margin: 12px 0 9px;
    color: #18343a;
    font-size: clamp(25px, 4vw, 34px);
    line-height: 1.2;
}

.candidate-popup-header p {
    margin: 0;
    color: #687a7b;
    font-size: 13px;
    line-height: 1.7;
}

.candidate-popup-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px;
}

.candidate-popup-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.candidate-popup-field label {
    color: #263e43;
    font-size: 12px;
    font-weight: 600;
}

.candidate-popup-field input {
    width: 100%;
    min-height: 44px;
    padding: 11px 12px;
    box-sizing: border-box;
    border: 1px solid #dce7e2;
    border-radius: 7px;
    background: #fff;
    color: #18343a;
    font: inherit;
    font-size: 13px;
}

.candidate-popup-field input:focus {
    outline: 2px solid rgba(8, 125, 105, .18);
    border-color: #087d69;
}

.candidate-popup-upload {
    grid-column: 1 / -1;
}

.candidate-popup-upload input {
    padding: 10px;
    background: #f7faf8;
}

.candidate-popup-upload small {
    color: #687a7b;
    font-size: 11px;
}

.candidate-popup-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    margin-top: 22px;
    padding: 13px 20px;
    border: 0;
    border-radius: 7px;
    background: #087d69;
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s ease;
}

.candidate-popup-submit:hover {
    background: #066653;
}

.candidate-popup-privacy {
    margin: 12px 0 0;
    color: #7a8985;
    font-size: 10px;
    line-height: 1.6;
    text-align: center;
}

body.candidate-popup-open {
    overflow: hidden;
}

@media (max-width: 600px) {
    .candidate-popup-overlay {
        padding: 10px;
        align-items: center;
    }

    .candidate-popup {
        max-height: 92vh;
        padding: 25px 19px;
        border-radius: 12px;
    }

    .candidate-popup-header {
        padding-right: 18px;
        margin-bottom: 20px;
    }

    .candidate-popup-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .candidate-popup-upload {
        grid-column: auto;
    }

    .candidate-popup-close {
        top: 10px;
        right: 10px;
        width: 32px;
        height: 32px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .candidate-popup,
    .candidate-popup-overlay {
        transition: none;
    }
}

/* ==========================================
   CANDIDATES PAGE
========================================== */

.candidates-page .candidate-intro {
    background: #ffffff;
}

.candidates-page .candidate-intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: 60px;
}

.candidates-page .candidate-intro-content h2 {
    margin: 0 0 22px;
    color: #123d4c;
    font-family: "Outfit", sans-serif;
    font-size: clamp(30px, 3.5vw, 43px);
    line-height: 1.2;
}

.candidates-page .candidate-intro-content p {
    margin: 0 0 17px;
    color: #61737c;
    font-size: 15px;
    line-height: 1.9;
}

.candidates-page .candidate-highlight {
    padding: 38px;
    border: 1px solid #dcefeb;
    border-radius: 12px;
    background: linear-gradient(135deg, #e8f8f5, #f6fbfa);
}

.candidates-page .candidate-highlight-icon {
    display: grid;
    width: 58px;
    height: 58px;
    margin-bottom: 24px;
    place-items: center;
    border-radius: 10px;
    background: #d7f1ec;
    color: #139e96;
    font-size: 24px;
}

.candidates-page .candidate-highlight > span {
    color: #139e96;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.candidates-page .candidate-highlight h3 {
    margin: 13px 0;
    color: #153e4b;
    font-family: "Outfit", sans-serif;
    font-size: 27px;
    line-height: 1.3;
}

.candidates-page .candidate-highlight p {
    margin: 0;
    color: #61737c;
    font-size: 15px;
    line-height: 1.9;
}

/* Candidate support */
.candidates-page .candidate-support {
    background: #f4f8fa;
}

.candidates-page .candidate-support-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.candidates-page .candidate-support-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 28px;
    border: 1px solid #e2ecee;
    border-radius: 10px;
    background: #ffffff;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.candidates-page .candidate-support-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(18, 61, 76, 0.07);
}

.candidates-page .candidate-support-icon {
    display: grid;
    width: 52px;
    height: 52px;
    margin-bottom: 20px;
    place-items: center;
    border-radius: 9px;
    background: #e6f7f3;
    color: #139e96;
    font-size: 21px;
}

.candidates-page .candidate-support-card h3 {
    margin: 0 0 12px;
    color: #153e4b;
    font-family: "Outfit", sans-serif;
    font-size: 20px;
}

.candidates-page .candidate-support-card p {
    flex: 1;
    margin: 0 0 20px;
    color: #61737c;
    font-size: 14px;
    line-height: 1.9;
}

.candidates-page .candidate-support-card a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #108e86;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.candidates-page .candidate-support-card a i {
    transition: transform 0.2s ease;
}

.candidates-page .candidate-support-card a:hover i {
    transform: translateX(4px);
}

/* Steps */
.candidates-page .candidate-steps {
    background: #ffffff;
}

.candidates-page .candidate-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.candidates-page .candidate-step-card {
    padding: 28px;
    border: 1px solid #e2ecee;
    border-radius: 10px;
    background: #ffffff;
}

.candidates-page .candidate-step-number {
    display: inline-block;
    margin-bottom: 18px;
    color: #139e96;
    font-family: "Outfit", sans-serif;
    font-size: 28px;
    font-weight: 800;
}

.candidates-page .candidate-step-card h3 {
    margin: 0 0 12px;
    color: #153e4b;
    font-family: "Outfit", sans-serif;
    font-size: 20px;
}

.candidates-page .candidate-step-card p {
    margin: 0;
    color: #61737c;
    font-size: 14px;
    line-height: 1.9;
}

/* Dark mode */
body.dark-mode .candidates-page .candidate-intro,
body.dark-mode .candidates-page .candidate-steps {
    background: #13252e;
}

body.dark-mode .candidates-page .candidate-support {
    background: #172c35;
}

body.dark-mode .candidates-page .candidate-intro-content h2,
body.dark-mode .candidates-page .candidate-highlight h3,
body.dark-mode .candidates-page .candidate-support-card h3,
body.dark-mode .candidates-page .candidate-step-card h3 {
    color: #edf7f8;
}

body.dark-mode .candidates-page .candidate-intro-content p,
body.dark-mode .candidates-page .candidate-highlight p,
body.dark-mode .candidates-page .candidate-support-card p,
body.dark-mode .candidates-page .candidate-step-card p {
    color: #c0d1d6;
}

body.dark-mode .candidates-page .candidate-highlight,
body.dark-mode .candidates-page .candidate-support-card,
body.dark-mode .candidates-page .candidate-step-card {
    border-color: #314850;
    background: #1a303a;
}

/* Tablet */
@media (max-width: 850px) {
    .candidates-page .candidate-intro-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    .candidates-page .candidate-support-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobile */
@media (max-width: 600px) {
    .candidates-page .candidate-support-grid,
    .candidates-page .candidate-steps-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .candidates-page .candidate-highlight,
    .candidates-page .candidate-support-card,
    .candidates-page .candidate-step-card {
        padding: 24px;
    }
}

/* ==========================================
   AI & IT SERVICES PAGE
========================================== */

.ai-services-page .ai-intro {
    background: #ffffff;
}

.ai-services-page .ai-intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: 60px;
}

.ai-services-page .ai-intro-content h2 {
    margin: 0 0 22px;
    color: #123d4c;
    font-family: "Outfit", sans-serif;
    font-size: clamp(30px, 3.5vw, 43px);
    line-height: 1.2;
}

.ai-services-page .ai-intro-content p {
    margin: 0 0 17px;
    color: #61737c;
    font-size: 15px;
    line-height: 1.9;
}

.ai-services-page .ai-highlight {
    position: relative;
    overflow: hidden;
    padding: 38px;
    border: 1px solid #dcefeb;
    border-radius: 12px;
    background: linear-gradient(135deg, #e8f8f5, #f6fbfa);
}

.ai-services-page .ai-highlight-icon {
    display: grid;
    width: 58px;
    height: 58px;
    margin-bottom: 24px;
    place-items: center;
    border-radius: 10px;
    background: #d7f1ec;
    color: #139e96;
    font-size: 24px;
}

.ai-services-page .ai-highlight > span {
    color: #139e96;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.ai-services-page .ai-highlight h3 {
    margin: 13px 0;
    color: #153e4b;
    font-family: "Outfit", sans-serif;
    font-size: 27px;
    line-height: 1.3;
}

.ai-services-page .ai-highlight p {
    color: #61737c;
    font-size: 15px;
    line-height: 1.9;
}

.ai-services-page .ai-highlight-line {
    width: 65px;
    height: 4px;
    margin-top: 24px;
    border-radius: 10px;
    background: #139e96;
}

.ai-services-page .ai-offerings {
    background: #f4f8fa;
}

.ai-services-page .ai-offerings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.ai-services-page .ai-offering-card {
    padding: 28px;
    border: 1px solid #e2ecee;
    border-radius: 10px;
    background: #ffffff;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ai-services-page .ai-offering-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(18, 61, 76, 0.07);
}

.ai-services-page .ai-offering-icon {
    display: grid;
    width: 52px;
    height: 52px;
    margin-bottom: 20px;
    place-items: center;
    border-radius: 9px;
    background: #e6f7f3;
    color: #139e96;
    font-size: 21px;
}

.ai-services-page .ai-offering-card h3 {
    margin: 0 0 12px;
    color: #153e4b;
    font-family: "Outfit", sans-serif;
    font-size: 21px;
}

.ai-services-page .ai-offering-card p {
    margin: 0 0 20px;
    color: #61737c;
    font-size: 14px;
    line-height: 1.9;
}

.ai-services-page .ai-offering-card a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #108e86;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.ai-services-page .ai-offering-card a i {
    transition: transform 0.2s ease;
}

.ai-services-page .ai-offering-card a:hover i {
    transform: translateX(4px);
}

.ai-services-page .ai-process {
    background: #ffffff;
}

.ai-services-page .ai-process-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.ai-services-page .ai-process-card {
    padding: 28px;
    border: 1px solid #e2ecee;
    border-radius: 10px;
    background: #ffffff;
}

.ai-services-page .ai-process-card > span {
    display: inline-block;
    margin-bottom: 18px;
    color: #139e96;
    font-family: "Outfit", sans-serif;
    font-size: 27px;
    font-weight: 800;
}

.ai-services-page .ai-process-card h3 {
    margin: 0 0 12px;
    color: #153e4b;
    font-family: "Outfit", sans-serif;
    font-size: 20px;
}

.ai-services-page .ai-process-card p {
    margin: 0;
    color: #61737c;
    font-size: 14px;
    line-height: 1.9;
}

/* Dark mode */
body.dark-mode .ai-services-page .ai-intro,
body.dark-mode .ai-services-page .ai-process {
    background: #13252e;
}

body.dark-mode .ai-services-page .ai-offerings {
    background: #172c35;
}

body.dark-mode .ai-services-page .ai-intro-content h2,
body.dark-mode .ai-services-page .ai-highlight h3,
body.dark-mode .ai-services-page .ai-offering-card h3,
body.dark-mode .ai-services-page .ai-process-card h3 {
    color: #edf7f8;
}

body.dark-mode .ai-services-page .ai-intro-content p,
body.dark-mode .ai-services-page .ai-highlight p,
body.dark-mode .ai-services-page .ai-offering-card p,
body.dark-mode .ai-services-page .ai-process-card p {
    color: #c0d1d6;
}

body.dark-mode .ai-services-page .ai-highlight,
body.dark-mode .ai-services-page .ai-offering-card,
body.dark-mode .ai-services-page .ai-process-card {
    border-color: #314850;
    background: #1a303a;
}

/* Tablet */
@media (max-width: 800px) {
    .ai-services-page .ai-intro-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    .ai-services-page .ai-process-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Mobile */
@media (max-width: 600px) {
    .ai-services-page .ai-offerings-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ai-services-page .ai-highlight,
    .ai-services-page .ai-offering-card,
    .ai-services-page .ai-process-card {
        padding: 24px;
    }
}


/* Tablet */
@media (max-width: 850px) {
    .services-page .benefits-layout {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .services-page .services-grid {
        gap: 18px;
    }

    .services-page .service-card {
        padding: 25px;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .services-page .services-hero {
        padding-top: 65px;
        padding-bottom: 65px;
    }

    .services-page .services-grid {
        grid-template-columns: 1fr;
        gap: 17px;
    }

    .services-page .service-card {
        padding: 25px 22px;
    }

    .services-page .service-card h3 {
        font-size: 22px;
    }

    .services-page .benefit-item {
        padding: 18px;
    }
}

/* =========================================================
   STATS
========================================================= */

.stats-strip {
    width: 100%;
    background: #ffffff;
    border-bottom: 1px solid #e9edf3;
}

.stats-container {
    width: min(1700px,calc(100% - 80px));
    margin: 0 auto;

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

    padding: 30px 0 22px;
}

.stat-item {
    min-height: 90px;
    padding: 8px 22px;

    border-left: 2px solid rgba(16,184,177,.65);

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.stat-number {
    color: var(--navy);
    font-size: 31px;
    line-height: 1;
    font-weight: 800;
    margin-bottom: 6px;
}

.stat-title {
    color: #34415d;
    font-size: 16px;
    font-weight: 600;
}

.stat-desc {
    color: #71809d;
    font-size: 14px;
    margin-top: 2px;
}


/* =========================================================
   WHY CHOOSE US
========================================================= */

.why-section {
    position: relative;
    padding: 105px 0;
    background: #ffffff;
    overflow: hidden;
}

.why-container {
    width: min(1180px,calc(100% - 40px));
    margin: 0 auto;
}

.why-heading {
    max-width: 760px;
    margin: 0 auto 55px;
    text-align: center;
}

.why-heading .section-eyebrow {
    justify-content: center;
}

.why-heading h2 {
    margin: 0 0 20px;

    color: var(--navy);
    font-size: clamp(38px,4vw,54px);
    line-height: 1.08;
    letter-spacing: -1.5px;
}

.why-heading h2 span {
    color: var(--teal);
}

.why-heading p {
    max-width: 650px;
    margin: 0 auto;

    color: var(--muted);
    font-size: 15px;
    line-height: 1.8;
}

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

.why-card {
    position: relative;

    min-height: 280px;
    padding: 32px 30px;

    background: #ffffff;
    border: 1px solid #e5eaf1;

    overflow: hidden;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.why-card::before {
    content: "";

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

    width: 100%;
    height: 3px;

    background: var(--teal);

    transform: scaleX(0);
    transform-origin: left;

    transition: transform .3s ease;
}

.why-card:hover {
    transform: translateY(-7px);

    border-color: rgba(16,184,177,.35);

    box-shadow: 0 18px 40px rgba(17,27,71,.08);
}

.why-card:hover::before {
    transform: scaleX(1);
}

.why-number {
    position: absolute;

    top: 20px;
    right: 22px;

    color: #edf1f6;

    font-size: 42px;
    font-weight: 800;
}

.why-icon {
    width: 52px;
    height: 52px;

    margin-bottom: 25px;

    border-radius: 50%;

    background: rgba(16,184,177,.10);
    color: var(--teal);

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

.why-card:nth-child(even) .why-icon {
    background: rgba(244,169,0,.10);
    color: var(--gold);
}

.why-card h3 {
    margin: 0 0 12px;

    color: var(--navy);
    font-size: 20px;
    line-height: 1.3;
}

.why-card p {
    margin: 0;

    color: var(--muted);
    font-size: 14px;
    line-height: 1.75;
}

.why-arrow {
    position: absolute;

    left: 30px;
    bottom: 25px;

    color: var(--teal);

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

    transition: transform .3s ease;
}

.why-card:hover .why-arrow {
    transform: translateX(7px);
}


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

.services-section {
    position: relative;

    padding: 105px 0;

    background: #f8fafc;

    overflow: hidden;
}

.services-container {
    width: min(1180px,calc(100% - 40px));
    margin: 0 auto;
}

.services-heading {
    max-width: 760px;

    margin: 0 auto 55px;

    text-align: center;
}

.services-heading .section-eyebrow {
    justify-content: center;
}

.services-heading h2 {
    margin: 0 0 20px;

    color: var(--navy);

    font-size: clamp(38px,4vw,54px);

    line-height: 1.08;

    letter-spacing: -1.5px;
}

.services-heading h2 span {
    color: var(--teal);
}

.services-heading p {
    max-width: 650px;

    margin: 0 auto;

    color: var(--muted);

    font-size: 15px;

    line-height: 1.8;
}

.services-grid {
    display: grid;

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

    gap: 20px;
}

.service-card {
    position: relative;

    min-height: 330px;

    padding: 30px;

    background: #ffffff;

    border: 1px solid #e4e9f0;

    display: flex;

    flex-direction: column;

    transition: .3s ease;
}

.service-card:hover {
    transform: translateY(-7px);

    border-color: rgba(16,184,177,.45);

    box-shadow: 0 18px 40px rgba(17,27,71,.08);
}

.service-highlight {
    background: var(--navy);

    border-color: var(--navy);
}

.service-highlight h3 {
    color: #ffffff;
}

.service-highlight p {
    color: rgba(255,255,255,.70);
}

.service-highlight .service-number {
    color: rgba(255,255,255,.35);
}

.service-highlight .service-icon {
    background: var(--teal);

    color: #ffffff;
}

.service-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 32px;
}

.service-number {
    color: #dfe5ee;

    font-size: 38px;

    font-weight: 800;
}

.service-icon {
    width: 45px;
    height: 45px;

    border-radius: 50%;

    background: rgba(16,184,177,.10);

    color: var(--teal);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 20px;
}

.service-card h3 {
    margin: 0 0 15px;

    color: var(--navy);

    font-size: 20px;

    line-height: 1.35;
}

.service-card p {
    margin: 0;

    color: var(--muted);

    font-size: 14px;

    line-height: 1.75;
}

.service-card a {
    margin-top: auto;

    padding-top: 25px;

    color: var(--navy);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: .8px;
}

.service-card a span {
    margin-left: 7px;

    color: var(--teal);

    font-size: 17px;

    transition: .3s ease;
}

.service-card:hover a span {
    margin-left: 12px;
}

.service-highlight a {
    color: #ffffff;
}

.service-highlight a span {
    color: var(--gold);
}


/* =========================================================
   CLIENTS
========================================================= */

.clients-section {
    padding: 78px 8%;

    background: #f8fbfd;

    overflow: hidden;
}

.clients-container {
    width: min(1400px,100%);

    margin: 0 auto;
}

.clients-heading {
    text-align: center;

    margin-bottom: 38px;
}

.clients-heading .section-eyebrow {
    display: inline-block;

    margin-bottom: 8px;
}

.clients-heading h2 {
    color: var(--navy);

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

    line-height: 1.1;
}

.clients-heading h2 span {
    color: var(--teal);
}

.clients-slider {
    width: 100%;

    overflow: hidden;

    position: relative;
}

.clients-track {
    display: flex;

    width: max-content;

    gap: 22px;

    animation: clientLogoSlide 24s linear infinite;
}

.clients-slider:hover .clients-track {
    animation-play-state: paused;
}

.client-logo {
    width: 240px;
    height: 110px;

    flex: 0 0 240px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid #e2e9ef;

    border-radius: 10px;

    background: #ffffff;

    color: #7a8498;

    font-size: 17px;

    font-weight: 700;

    letter-spacing: 1px;

    box-shadow: 0 8px 24px rgba(17,27,71,.05);
}

@keyframes clientLogoSlide {

    from {
        transform: translateX(0);
    }

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

}


/* =========================================================
   TESTIMONIALS
========================================================= */

.testimonials-section {
    position: relative;

    padding: 105px 0;

    background: #ffffff;

    overflow: hidden;
}

.testimonials-container {
    width: min(1180px,calc(100% - 40px));

    margin: 0 auto;
}

.testimonials-heading {
    max-width: 760px;

    margin: 0 auto 55px;

    text-align: center;
}

.testimonials-heading .section-eyebrow {
    justify-content: center;
}

.testimonials-heading h2 {
    margin: 0 0 20px;

    color: var(--navy);

    font-size: clamp(38px,4vw,54px);

    line-height: 1.08;

    letter-spacing: -1.5px;
}

.testimonials-heading h2 span {
    color: var(--teal);
}

.testimonials-heading p {
    max-width: 620px;

    margin: 0 auto;

    color: var(--muted);

    font-size: 15px;

    line-height: 1.8;
}

.testimonials-grid {
    display: grid;

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

    gap: 20px;
}

.testimonial-card {
    position: relative;

    padding: 35px 30px 30px;

    min-height: 350px;

    background: #f8fafc;

    border: 1px solid #e5eaf1;

    display: flex;

    flex-direction: column;

    transition: .3s ease;
}

.testimonial-card:hover {
    transform: translateY(-6px);

    background: #ffffff;

    border-color: rgba(16,184,177,.40);

    box-shadow: 0 18px 40px rgba(17,27,71,.08);
}

.testimonial-card.featured {
    background: var(--navy);

    border-color: var(--navy);
}

.testimonial-card.featured p {
    color: rgba(255,255,255,.78);
}

.testimonial-card.featured .quote-mark {
    color: var(--gold);
}

.testimonial-card.featured .testimonial-person strong {
    color: #ffffff;
}

.testimonial-card.featured .testimonial-person span {
    color: rgba(255,255,255,.60);
}

.quote-mark {
    color: var(--teal);

    font-family: Georgia,serif;

    font-size: 70px;

    line-height: .7;

    margin-bottom: 25px;
}

.testimonial-card p {
    margin: 0;

    color: #59637b;

    font-size: 15px;

    line-height: 1.85;
}

.testimonial-person {
    display: flex;

    align-items: center;

    gap: 13px;

    margin-top: auto;

    padding-top: 30px;
}

.testimonial-avatar {
    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    border-radius: 50%;

    background: var(--teal);

    color: #ffffff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 13px;

    font-weight: 800;
}

.testimonial-person strong {
    display: block;

    color: var(--navy);

    font-size: 14px;
}

.testimonial-person span {
    display: block;

    margin-top: 4px;

    color: var(--muted);

    font-size: 12px;
}

.testimonial-stars {
    position: absolute;

    right: 25px;

    bottom: 31px;

    color: var(--gold);

    font-size: 13px;

    letter-spacing: 2px;
}


/* =========================================================
   CANDIDATE PORTAL
========================================================= */

.candidate-section {
    position: relative;

    padding: 105px 0;

    background: var(--navy);

    overflow: hidden;
}

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

    position: absolute;

    width: 500px;
    height: 500px;

    right: -220px;
    top: -220px;

    border: 1px solid rgba(16,184,177,.20);

    border-radius: 50%;
}

.candidate-section::after {
    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    left: -180px;
    bottom: -180px;

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

    border-radius: 50%;
}

.candidate-container {
    width: min(1180px,calc(100% - 40px));

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1.1fr .9fr;

    gap: 90px;

    align-items: center;

    position: relative;

    z-index: 2;
}

.candidate-content .section-eyebrow {
    color: var(--gold);
}

.candidate-content h2 {
    margin: 0 0 22px;

    color: #ffffff;

    font-size: clamp(40px,4.5vw,60px);

    line-height: 1.05;

    letter-spacing: -1.8px;
}

.candidate-content h2 span {
    display: block;

    color: var(--teal);
}

.candidate-content > p {
    max-width: 620px;

    margin: 0;

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

    font-size: 16px;

    line-height: 1.8;
}

.candidate-actions {
    display: flex;

    align-items: center;

    gap: 15px;

    margin-top: 32px;
}

.candidate-primary-btn,
.candidate-secondary-btn {
    min-height: 50px;

    padding: 0 22px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: .8px;

    transition: .3s ease;
}

.candidate-primary-btn {
    gap: 14px;

    background: var(--teal);

    color: #ffffff;
}

.candidate-primary-btn span {
    color: var(--gold);

    font-size: 18px;
}

.candidate-primary-btn:hover {
    background: var(--gold);

    transform: translateY(-2px);
}

.candidate-secondary-btn {
    border: 1px solid rgba(255,255,255,.25);

    color: #ffffff;
}

.candidate-secondary-btn:hover {
    background: #ffffff;

    color: var(--navy);
}

.candidate-points {
    display: flex;

    flex-wrap: wrap;

    gap: 22px;

    margin-top: 32px;
}

.candidate-point {
    display: flex;

    align-items: center;

    gap: 8px;

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

    font-size: 12px;
}

.candidate-point span {
    color: var(--teal);

    font-size: 15px;
}


/* PORTAL CARD */

.candidate-portal-card {
    position: relative;

    padding: 48px 42px;

    background: #ffffff;

    min-height: 420px;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    box-shadow: 0 25px 60px rgba(0,0,0,.18);

    overflow: hidden;
}

.portal-decoration {
    position: absolute;

    width: 180px;
    height: 180px;

    right: -70px;
    top: -70px;

    border-radius: 50%;

    border: 25px solid rgba(16,184,177,.08);
}

.portal-icon {
    width: 62px;
    height: 62px;

    border-radius: 50%;

    background: var(--navy);

    color: #ffffff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 15px;

    font-weight: 800;

    margin-bottom: 22px;
}

.portal-label {
    color: var(--teal);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;
}

.candidate-portal-card h3 {
    margin: 10px 0 15px;

    color: var(--navy);

    font-size: 38px;

    line-height: 1.1;
}

.candidate-portal-card h3 strong {
    color: var(--teal);
}

.candidate-portal-card p {
    max-width: 400px;

    margin: 0;

    color: var(--muted);

    font-size: 14px;

    line-height: 1.75;
}

.portal-btn {
    margin-top: 28px;

    padding: 14px 22px;

    display: inline-flex;

    align-items: center;

    gap: 14px;

    background: var(--navy);

    color: #ffffff;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1px;

    transition: .3s ease;
}

.portal-btn span {
    color: var(--gold);

    font-size: 18px;
}

.portal-btn:hover {
    background: var(--teal);
}

.portal-line {
    width: 100%;

    height: 1px;

    margin-top: auto;

    margin-bottom: 13px;

    background: #e8edf3;
}

.candidate-portal-card small {
    color: #8993a7;

    font-size: 11px;
}


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

.contact-section {
    position: relative;

    padding: 105px 0;

    background: #f8fafc;

    overflow: hidden;
}

.contact-container {
    width: min(1180px,calc(100% - 40px));

    margin: 0 auto;

    display: grid;

    grid-template-columns: .85fr 1.15fr;

    gap: 80px;

    align-items: center;
}

.contact-info h2 {
    margin: 0 0 22px;

    color: var(--navy);

    font-size: clamp(40px,4vw,56px);

    line-height: 1.06;

    letter-spacing: -1.5px;
}

.contact-info h2 span {
    display: block;

    color: var(--teal);
}

.contact-info > p {
    max-width: 500px;

    margin: 0;

    color: var(--muted);

    font-size: 15px;

    line-height: 1.8;
}

.contact-details {
    display: flex;

    flex-direction: column;

    gap: 22px;

    margin-top: 38px;
}

.contact-detail {
    display: flex;

    align-items: center;

    gap: 15px;
}

.contact-icon {
    width: 50px;
    height: 50px;

    flex: 0 0 50px;

    border-radius: 50%;

    background: rgba(16,184,177,.10);

    color: var(--teal);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 18px;

    font-weight: 700;
}

.contact-detail span {
    display: block;

    margin-bottom: 4px;

    color: #8a94a8;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.5px;
}

.contact-detail strong {
    display: block;

    color: var(--navy);

    font-size: 14px;
}


/* FORM */

.contact-form-card {
    padding: 42px;

    background: #ffffff;

    border: 1px solid #e4e9f0;

    box-shadow: 0 20px 50px rgba(17,27,71,.07);
}

.contact-form-heading {
    margin-bottom: 28px;
}

.contact-form-heading > span {
    color: var(--teal);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;
}

.contact-form-heading h3 {
    margin: 8px 0 0;

    color: var(--navy);

    font-size: 30px;
}

.contact-form-row {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px;
}

.form-group {
    margin-bottom: 19px;
}

.form-group label {
    display: block;

    margin-bottom: 8px;

    color: var(--navy);

    font-size: 12px;

    font-weight: 700;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;

    border: 1px solid #dfe5ed;

    background: #fbfcfe;

    color: var(--navy);

    font-family: inherit;

    font-size: 13px;

    outline: none;

    transition: .25s ease;
}

.form-group input,
.form-group select {
    height: 50px;

    padding: 0 15px;
}

.form-group textarea {
    resize: vertical;

    min-height: 125px;

    padding: 14px 15px;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--teal);

    background: #ffffff;

    box-shadow:
        0 0 0 3px rgba(16,184,177,.08);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #a0a8b8;
}

.contact-submit {
    width: 100%;

    min-height: 52px;

    border: 0;

    background: var(--navy);

    color: #ffffff;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    font-family: inherit;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1px;

    transition: .3s ease;
}

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

    font-size: 18px;
}

.contact-submit:hover {
    background: var(--teal);
}


/* ===== FOOTER ===== */
.site-footer {
    background: #102d3a;
    color: #ffffff;
    padding: 55px 8% 0;
    margin-top: 0;
}

.footer-container {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 35px;
    padding-bottom: 40px;
}

.footer-logo img {
    width: 190px;
    max-width: 100%;
    height: auto;
    display: block;
    margin-bottom: 18px;
    background: #ffffff;
    padding: 6px;
    border-radius: 6px;
}

.footer-column p {
    color: #d4e0e5;
    line-height: 1.8;
    font-size: 14px;
}

.footer-column h3 {
    font-size: 17px;
    margin: 0 0 20px;
    color: #ffffff;
}

.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-column li {
    margin-bottom: 12px;
    color: #d4e0e5;
    font-size: 14px;
    line-height: 1.7;
}

.footer-column a {
    color: #d4e0e5;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-column a:hover {
    color: #63d4c4;
}

.footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.footer-contact i {
    color: #63d4c4;
    margin-top: 5px;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    padding: 18px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.footer-bottom p {
    margin: 0;
    color: #d4e0e5;
    font-size: 13px;
}

/* Mobile footer */
@media (max-width: 900px) {
    .footer-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 30px 22px;
    }
}

@media (max-width: 560px) {
    .site-footer {
        padding: 40px 6% 0;
    }

    .footer-container {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .footer-logo img {
        width: 170px;
    }

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

 
.back-to-top {
    position: absolute;

    right: 35px;

    bottom: 25px;

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--teal);

    color: #ffffff;

    font-size: 20px;

    font-weight: 700;

    transition: .3s ease;
}

.back-to-top:hover {
    background: var(--gold);

    transform: translateY(-3px);
}


/* =========================================================
   CLIENTS DARK MODE
========================================================= */

body.dark-mode .clients-section {
    background: #0b1430;
}

body.dark-mode .clients-heading h2 {
    color: #ffffff;
}

body.dark-mode .client-logo {
    background: #111c3c;

    border-color: #27335a;

    color: #c3cad9;
}


/* =========================================================
   DARK MODE - SECTIONS
========================================================= */

body.dark-mode .about-section,
body.dark-mode .why-section,
body.dark-mode .testimonials-section {
    background: #0b1430;
}

body.dark-mode .services-section,
body.dark-mode .contact-section {
    background: #0e1836;
}

body.dark-mode .about-content h2,
body.dark-mode .why-heading h2,
body.dark-mode .services-heading h2,
body.dark-mode .testimonials-heading h2,
body.dark-mode .contact-info h2 {
    color: #ffffff;
}

body.dark-mode .about-intro,
body.dark-mode .about-feature p,
body.dark-mode .why-heading p,
body.dark-mode .why-card p,
body.dark-mode .services-heading p,
body.dark-mode .service-card p,
body.dark-mode .testimonials-heading p,
body.dark-mode .testimonial-card p,
body.dark-mode .contact-info > p {
    color: #aeb8cd;
}

body.dark-mode .why-card,
body.dark-mode .service-card,
body.dark-mode .testimonial-card,
body.dark-mode .contact-form-card {
    background: #111c3c;

    border-color: #27335a;
}

body.dark-mode .why-card h3,
body.dark-mode .service-card h3,
body.dark-mode .testimonial-person strong,
body.dark-mode .contact-detail strong,
body.dark-mode .contact-form-heading h3,
body.dark-mode .form-group label {
    color: #ffffff;
}

body.dark-mode .about-bottom {
    border-color: #27335a;
}

body.dark-mode .feature-icon {
    background: #111c3c;

    border-color: #27335a;
}

body.dark-mode .contact-form-card {
    box-shadow: 0 20px 50px rgba(0,0,0,.20);
}

body.dark-mode .form-group input,
body.dark-mode .form-group select,
body.dark-mode .form-group textarea {
    background: #0b1430;

    border-color: #27335a;

    color: #ffffff;
}

body.dark-mode .form-group input::placeholder,
body.dark-mode .form-group textarea::placeholder {
    color: #7f8ba8;
}


/* =========================================================
   TALENT LADDER CONSULTING — ABOUT PAGE
   Add this code at the END of style.css
========================================================= */

/* Global inner page */
.inner-page {
    padding-top: 0;
    background: #ffffff;
    color: #183744;
    overflow: hidden;
}

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

.page-container {
    width: min(1140px, 88%);
    margin-inline: auto;
}

.section-spacing {
    padding: 85px 0;
}

/* Eyebrows */
.page-eyebrow,
.section-eyebrow {
    display: inline-block;
    margin-bottom: 16px;
    color: #139e96;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    line-height: 1.6;
    text-transform: uppercase;
}

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

.inner-page .page-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 100px 0 105px;
    text-align: center;
    background:
        radial-gradient(
            circle at 12% 15%,
            rgba(40, 190, 177, 0.14),
            transparent 35%
        ),
        linear-gradient(135deg, #f1fbfa 0%, #f5f8fc 100%);
}

.inner-page .page-hero::before,
.inner-page .page-hero::after {
    position: absolute;
    z-index: -1;
    content: "";
    border: 1px solid rgba(19, 158, 150, 0.15);
    border-radius: 50%;
    pointer-events: none;
}

.inner-page .page-hero::before {
    width: 330px;
    height: 330px;
    top: -175px;
    right: -70px;
}

.inner-page .page-hero::after {
    width: 250px;
    height: 250px;
    bottom: -160px;
    left: -60px;
}

.inner-page .page-hero .page-container {
    max-width: 900px;
}

.inner-page .page-hero h1 {
    max-width: 850px;
    margin: 0 auto 22px;
    color: #123d4c;
    font-family: "Outfit", sans-serif;
    font-size: clamp(36px, 5.2vw, 62px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -1.5px;
}

.inner-page .page-hero p {
    max-width: 700px;
    margin: 0 auto 30px;
    color: #596e78;
    font-size: 17px;
    line-height: 1.85;
}

/* Buttons */
.inner-page .page-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    min-height: 49px;
    padding: 13px 24px;
    border: 1px solid #139e96;
    border-radius: 5px;
    background: #139e96;
    color: #ffffff !important;
    font-family: "Outfit", sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.inner-page .page-button:hover {
    background: #0d7f79;
    border-color: #0d7f79;
    box-shadow: 0 9px 22px rgba(19, 158, 150, 0.18);
    transform: translateY(-2px);
}

.inner-page .page-button i {
    font-size: 12px;
    transition: transform 0.25s ease;
}

.inner-page .page-button:hover i {
    transform: translateX(3px);
}

/* ===== FIX: WHO WE ARE SECTION ===== */

.inner-page .about-intro > .page-container.about-grid {
    width: 100%;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;

    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: center;
    gap: clamp(30px, 5vw, 60px);
}

.inner-page .about-content {
    width: 100%;
    min-width: 0;
}

.inner-page .about-content h2 {
    max-width: 100%;
}

.inner-page .about-content p {
    max-width: 100%;
}

.inner-page .about-highlight {
    width: 100%;
    min-width: 0;
    padding: 36px;
    box-sizing: border-box;
}

 
/* Highlight panel */
.inner-page .about-highlight {
    position: relative;
    padding: 42px 36px;
    overflow: hidden;
    border: 1px solid #dcefeb;
    border-radius: 12px;
    background:
        radial-gradient(
            circle at 100% 0,
            rgba(19, 158, 150, 0.12),
            transparent 45%
        ),
        #f1faf8;
}

.inner-page .about-highlight::after {
    position: absolute;
    right: -35px;
    bottom: -55px;
    width: 150px;
    height: 150px;
    border: 1px solid rgba(19, 158, 150, 0.17);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.inner-page .about-highlight-icon {
    display: grid;
    width: 58px;
    height: 58px;
    margin-bottom: 24px;
    place-items: center;
    border-radius: 10px;
    background: #dff4f0;
    color: #108e86;
    font-size: 25px;
}

.inner-page .about-highlight h3 {
    margin: 0 0 15px;
    color: #153e4b;
    font-family: "Outfit", sans-serif;
    font-size: 27px;
    line-height: 1.3;
}

.inner-page .about-highlight p {
    margin: 0;
    color: #5d727b;
    font-size: 15px;
    line-height: 1.9;
}

/* =========================================================
   CORE VALUES
========================================================= */

.inner-page .about-values {
    background: #f5f8fa;
}

.inner-page .section-heading {
    max-width: 720px;
    margin: 0 auto 42px;
    text-align: center;
}

.inner-page .section-heading p {
    margin: 0;
    color: #61737c;
    font-size: 15px;
    line-height: 1.85;
}

.inner-page .values-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 25px;
}

.inner-page .value-card {
    padding: 32px 28px;
    border: 1px solid #e3ebee;
    border-radius: 10px;
    background: #ffffff;
    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.inner-page .value-card:hover {
    transform: translateY(-5px);
    border-color: #b8e4dd;
    box-shadow: 0 15px 35px rgba(18, 61, 76, 0.07);
}

.inner-page .value-icon {
    display: grid;
    width: 54px;
    height: 54px;
    margin-bottom: 23px;
    place-items: center;
    border-radius: 10px;
    background: #e7f7f3;
    color: #139e96;
    font-size: 21px;
}

.inner-page .value-card h3 {
    margin: 0 0 12px;
    color: #153e4b;
    font-family: "Outfit", sans-serif;
    font-size: 21px;
    font-weight: 600;
}

.inner-page .value-card p {
    margin: 0;
    color: #61737c;
    font-size: 14px;
    line-height: 1.9;
}

/* =========================================================
   OUR FOCUS
========================================================= */

.inner-page .about-focus {
    background: #ffffff;
}

.inner-page .focus-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 25px;
}

.inner-page .focus-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 32px 28px;
    border: 1px solid #e3ebee;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 4px 18px rgba(18, 61, 76, 0.025);
    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.inner-page .focus-card:hover {
    transform: translateY(-5px);
    border-color: #b8e4dd;
    box-shadow: 0 15px 35px rgba(18, 61, 76, 0.07);
}

.inner-page .focus-card > i {
    display: grid;
    width: 54px;
    height: 54px;
    margin-bottom: 22px;
    place-items: center;
    border-radius: 10px;
    background: #e7f7f3;
    color: #139e96;
    font-size: 22px;
}

.inner-page .focus-card h3 {
    margin: 0 0 12px;
    color: #153e4b;
    font-family: "Outfit", sans-serif;
    font-size: 20px;
}

.inner-page .focus-card p {
    flex: 1;
    margin: 0 0 22px;
    color: #61737c;
    font-size: 14px;
    line-height: 1.9;
}

.inner-page .focus-card a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #108e86;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.inner-page .focus-card a:hover {
    color: #0b6e68;
}

.inner-page .focus-card a i {
    transition: transform 0.2s ease;
}

.inner-page .focus-card a:hover i {
    transform: translateX(4px);
}

/* =========================================================
   CALL TO ACTION
========================================================= */

.inner-page .about-cta {
    position: relative;
    overflow: hidden;
    padding: 75px 0;
    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(40, 190, 177, 0.14),
            transparent 35%
        ),
        #123d4c;
    color: #ffffff;
    text-align: center;
}

.inner-page .about-cta .page-container {
    max-width: 850px;
}

.inner-page .about-cta .section-eyebrow {
    color: #74ded3;
}

.inner-page .about-cta h2 {
    margin: 0 0 18px;
    color: #ffffff;
    font-family: "Outfit", sans-serif;
    font-size: clamp(29px, 4vw, 43px);
    font-weight: 700;
    line-height: 1.2;
}

.inner-page .about-cta p {
    max-width: 650px;
    margin: 0 auto 28px;
    color: #d6e6e9;
    font-size: 15px;
    line-height: 1.9;
}

.inner-page .about-cta .page-button-light {
    border-color: #ffffff;
    background: #ffffff;
    color: #123d4c !important;
}

.inner-page .about-cta .page-button-light:hover {
    border-color: #e5f7f4;
    background: #e5f7f4;
}

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

body.dark-mode .inner-page {
    background: #13252e;
    color: #e7eff1;
}

body.dark-mode .inner-page .page-hero {
    background:
        radial-gradient(
            circle at 12% 15%,
            rgba(40, 190, 177, 0.10),
            transparent 35%
        ),
        #1a303a;
}

body.dark-mode .inner-page .page-hero h1,
body.dark-mode .inner-page .about-content h2,
body.dark-mode .inner-page .section-heading h2,
body.dark-mode .inner-page .about-highlight h3,
body.dark-mode .inner-page .value-card h3,
body.dark-mode .inner-page .focus-card h3 {
    color: #edf7f8;
}

body.dark-mode .inner-page .page-hero p,
body.dark-mode .inner-page .about-content p,
body.dark-mode .inner-page .section-heading p,
body.dark-mode .inner-page .about-highlight p,
body.dark-mode .inner-page .value-card p,
body.dark-mode .inner-page .focus-card p {
    color: #c0d1d6;
}

body.dark-mode .inner-page .about-intro,
body.dark-mode .inner-page .about-focus {
    background: #13252e;
}

body.dark-mode .inner-page .about-values {
    background: #172c35;
}

body.dark-mode .inner-page .about-highlight {
    border-color: #34514f;
    background: #203b40;
}

body.dark-mode .inner-page .value-card,
body.dark-mode .inner-page .focus-card {
    border-color: #314850;
    background: #1a303a;
}

body.dark-mode .inner-page .value-icon,
body.dark-mode .inner-page .focus-card > i,
body.dark-mode .inner-page .about-highlight-icon {
    background: #264b4a;
    color: #75ded3;
}

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

@media (max-width: 900px) {
    .inner-page .about-grid {
        grid-template-columns: 1fr 0.9fr;
        gap: 35px;
    }

    .inner-page .values-grid,
    .inner-page .focus-grid {
        gap: 18px;
    }

    .inner-page .value-card,
    .inner-page .focus-card {
        padding: 26px 22px;
    }

    .inner-page .about-highlight {
        padding: 32px 26px;
    }
}

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

@media (max-width: 700px) {
    .inner-page .page-container {
        width: 90%;
    }

    .inner-page .section-spacing {
        padding: 55px 0;
    }

    .inner-page .page-hero {
        padding: 65px 0 70px;
    }

    .inner-page .page-hero h1 {
        font-size: clamp(34px, 9vw, 46px);
        letter-spacing: -0.8px;
    }

    .inner-page .page-hero p {
        font-size: 15px;
        line-height: 1.8;
    }

    .inner-page .about-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .inner-page .about-content h2,
    .inner-page .section-heading h2 {
        font-size: 31px;
    }

    .inner-page .about-highlight {
        padding: 28px 24px;
    }

    .inner-page .about-highlight h3 {
        font-size: 24px;
    }

    .inner-page .section-heading {
        margin-bottom: 30px;
    }

    .inner-page .values-grid,
    .inner-page .focus-grid {
        grid-template-columns: 1fr;
        gap: 17px;
    }

    .inner-page .value-card,
    .inner-page .focus-card {
        padding: 26px 24px;
    }

    .inner-page .about-cta {
        padding: 55px 0;
    }

    .inner-page .about-cta h2 {
        font-size: 31px;
    }
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {
    .inner-page *,
    .inner-page *::before,
    .inner-page *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}


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

@media (max-width: 1100px) {

    .header-inner {
        padding-left: 4%;
        padding-right: 4%;
    }

    .top-bar {
        padding-left: 4%;
        padding-right: 4%;
    }

    .desktop-nav {
        gap: 16px;
    }

    .desktop-nav > a {
        font-size: 13px;
    }

    .header-cta {
        padding-left: 17px;
        padding-right: 17px;
    }

    .hero-content {
        left: 7%;
        width: 54%;
    }

    .hero-content h1 {
        font-size: 58px;
    }

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

    .about-container,
    .why-container,
    .services-container,
    .testimonials-container,
    .candidate-container,
    .contact-container,
    .footer-container {
        width: calc(100% - 40px);
    }
}


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

@media (max-width: 900px) {

    .top-bar {
        display: none;
    }

    .site-header {
        height: 78px;
    }

    .header-inner {
        height: 78px;
        padding: 0 22px;
    }

    .site-logo {
        width: 160px;
        min-width: 140px;
    }

    .desktop-nav {
        display: none !important;
    }

    .mobile-toggle {
        display: flex !important;
    }

    .mobile-navigation {
        position: absolute;

        top: 88px;

        left: 12px;
        right: 12px;

        z-index: 5000;

        padding: 12px;

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

        border-radius: 12px;

        background: #ffffff;

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

    .mobile-navigation > a {
        min-height: 44px;

        padding: 10px 13px;

        border-radius: 7px;

        color: var(--navy);

        display: flex;

        align-items: center;

        font-size: 15px;

        font-weight: 600;
    }

    .mobile-navigation > a:hover {
        background: #f1fbfa;

        color: var(--teal);
    }

    .mobile-tools {
        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 8px;

        margin: 5px 0;

        padding: 8px 0;

        border-top: 1px solid #edf0f4;

        border-bottom: 1px solid #edf0f4;
    }

    .mobile-tools button {
        min-height: 42px;

        border: 1px solid #e1e6ed;

        border-radius: 7px;

        background: #f7f9fb;

        color: var(--navy);

        font-size: 13px;

        font-weight: 600;
    }

    .mobile-tools i {
        margin-right: 5px;

        color: var(--teal);
    }

    .mobile-cta {
        justify-content: center;

        gap: 8px;

        margin-top: 7px;

        background: var(--navy);

        color: #ffffff !important;
    }

    .hero-section {
        height: calc(100svh - 78px);

        min-height: 620px;

        max-height: 850px;
    }

    .hero-content {
        left: 7%;

        right: 7%;

        width: auto;

        max-width: 650px;

        top: 46%;
    }

    .hero-content h1 {
        font-size: 50px;
    }

    .hero-content p {
        font-size: 15px;
    }

    .social-sidebar,
    .scroll-indicator {
        display: none;
    }

    .hero-slider-bottom {
        left: 7%;
        right: 7%;
    }

    .about-container,
    .candidate-container,
    .contact-container {
        grid-template-columns: 1fr;
    }

    .about-container {
        gap: 55px;
    }

    .about-content {
        max-width: 720px;
        margin: 0 auto;
    }

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

    .candidate-container {
        gap: 50px;
    }

    .contact-container {
        gap: 50px;
    }

    .footer-container {
        grid-template-columns: 1fr 1fr;
        gap: 45px;
    }

    .footer-contact {
        grid-column: 2;
    }
}


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

@media (max-width: 600px) {

    .site-header {
        height: 74px;
    }

    .header-inner {
        height: 74px;

        padding: 0 16px;
    }

    .site-logo {
        width: 150px;

        min-width: 135px;
    }

    .mobile-toggle {
        width: 42px;

        height: 42px;
    }

    .mobile-navigation {
        top: 84px;
    }

    .hero-section {
        height: calc(100svh - 74px);

        min-height: 650px;
    }

    .hero-content {
        left: 20px;

        right: 20px;

        top: 45%;
    }

    .hero-kicker {
        margin-bottom: 15px;

        font-size: 11px;
    }

    .hero-content h1 {
        margin-bottom: 17px;

        font-size: clamp(36px,10vw,50px);

        line-height: 1.02;
    }

    .hero-content p {
        margin-bottom: 20px;

        font-size: 13.5px;
    }

    .hero-actions {
        gap: 9px;
    }

    .hero-primary,
    .hero-secondary {
        min-height: 46px;

        padding: 0 15px;

        font-size: 12px;
    }

    .hero-slider-bottom {
        left: 20px;

        right: 20px;

        bottom: 18px;
    }

    .slider-dot {
        width: 10px;

        height: 10px;

        border-radius: 50%;
    }

    .slider-dot.active {
        width: 10px;
    }

    .stats-container {
        width: calc(100% - 28px);

        grid-template-columns: 1fr 1fr;

        padding: 20px 0;
    }

    .stat-item {
        min-height: 88px;

        padding: 12px 14px;
    }

    .stat-number {
        font-size: 25px;
    }

    .stat-title {
        font-size: 14px;
    }

    .stat-desc {
        font-size: 12px;
    }

    .about-section,
    .why-section,
    .services-section,
    .clients-section,
    .testimonials-section,
    .candidate-section,
    .contact-section {
        padding-top: 65px;

        padding-bottom: 65px;
    }

    .about-container,
    .why-container,
    .services-container,
    .clients-container,
    .testimonials-container,
    .candidate-container,
    .contact-container,
    .footer-container {
        width: calc(100% - 28px);
    }

    .about-visual {
        min-height: 390px;
    }

    .about-shape {
        width: 285px;

        height: 355px;
    }

    .about-experience {
        width: 105px;

        height: 105px;

        right: 0;
    }

    .about-experience strong {
        font-size: 30px;
    }

    .about-experience span {
        font-size: 10px;
    }

    .about-content h2,
    .why-heading h2,
    .services-heading h2,
    .testimonials-heading h2 {
        font-size: 35px;
    }

    .about-features {
        grid-template-columns: 1fr;
    }

    .about-bottom {
        align-items: flex-start;

        flex-direction: column;
    }

    .about-btn {
        width: 100%;

        justify-content: center;
    }

    .why-grid,
    .services-grid,
    .testimonials-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .why-card,
    .service-card {
        min-height: 280px;
    }

    .testimonial-card {
        min-height: 320px;
    }

    .clients-track {
        gap: 14px;

        animation-duration: 20s;
    }

    .client-logo {
        width: 170px;

        flex-basis: 170px;

        height: 85px;

        font-size: 14px;
    }

    .candidate-actions {
        flex-direction: column;

        align-items: stretch;
    }

    .candidate-primary-btn,
    .candidate-secondary-btn {
        width: 100%;
    }

    .candidate-points {
        flex-direction: column;

        gap: 12px;
    }

    .candidate-portal-card {
        padding: 35px 27px;

        min-height: 390px;
    }

    .candidate-portal-card h3 {
        font-size: 32px;
    }

    .contact-form-card {
        padding: 28px 22px;
    }

    .contact-form-row {
        grid-template-columns: 1fr;

        gap: 0;
    }

    .contact-info h2 {
        font-size: 38px;
    }

    .footer-container {
        width: calc(100% - 28px);

        grid-template-columns: 1fr;

        gap: 38px;
    }

    .footer-contact {
        grid-column: auto;
    }

    .footer-bottom-container {
        width: calc(100% - 28px);

        padding: 20px 0;

        flex-direction: column;

        align-items: flex-start;
    }

    .footer-bottom-links {
        flex-wrap: wrap;

        gap: 15px;
    }

    .back-to-top {
        right: 15px;

        bottom: 85px;
    }
}


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

@media (max-width:390px) {

    .site-logo {
        width: 138px;

        min-width: 125px;
    }

    .header-inner {
        padding: 0 13px;
    }

    .mobile-toggle {
        width: 40px;

        height: 40px;
    }

    .hero-content {
        left: 17px;

        right: 17px;
    }

    .hero-content h1 {
        font-size: 34px;
    }

    .hero-content p {
        font-size: 12.5px;
    }

    .hero-secondary {
        display: none;
    }

    .mobile-tools button {
        font-size: 12px;
    }

    .stats-container {
        grid-template-columns: 1fr;
    }

    .stat-item {
        border-left: 2px solid rgba(16,184,177,.65);
    }

    .clients-logo-grid {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   SCROLL PROGRESS
========================================================= */

.scroll-progress {
    position: fixed;

    top: 0;

    left: 0;

    width: 0%;

    height: 3px;

    background: #58c7e8;

    z-index: 10000;

    pointer-events: none;

    transition: width .08s linear;
}


/* =========================================================
   HEADER SCROLL SHADOW
========================================================= */

.site-header.scrolled {
    box-shadow: 0 8px 25px rgba(17,27,71,.10);
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

:where(a,button,input,textarea,select):focus-visible {

    outline: 3px solid rgba(16,184,177,.35);

    outline-offset: 3px;
}

/* =========================================================
   ENQUIRY POPUP
========================================================= */

.enquiry-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;

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

    padding: 20px;

    background: rgba(8, 17, 38, 0.62);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

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

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


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


/* Popup */

.enquiry-popup {
    position: relative;

    width: min(900px, 100%);

    max-height: 90vh;
    overflow-y: auto;

    background: #ffffff;

    border-radius: 22px;

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.22);

    transform: translateY(30px) scale(0.96);

    transition:
        transform 0.4s ease;

    border: 1px solid rgba(88, 199, 232, 0.18);
}


.enquiry-overlay.active .enquiry-popup {
    transform: translateY(0) scale(1);
}


/* Close */

.enquiry-close {
    position: absolute;

    top: 16px;
    right: 18px;

    width: 38px;
    height: 38px;

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

    border: none;
    border-radius: 50%;

    background: #f2f5f8;
    color: #111b47;

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

    cursor: pointer;

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

    z-index: 5;
}


.enquiry-close:hover {
    background: #58c7e8;
    color: #ffffff;
    transform: rotate(90deg);
}


/* Content */

.enquiry-content {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
}


/* Left */

.enquiry-left {
    padding: 55px 40px;

    background:
        linear-gradient(
            145deg,
            #111b47 0%,
            #17275b 60%,
            #58c7e8 180%
        );

    color: #ffffff;

    border-radius: 22px 0 0 22px;
}


.enquiry-eyebrow {
    display: inline-block;

    margin-bottom: 15px;

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

    letter-spacing: 2px;

    color: #8fe1f5;
}


.enquiry-left h2 {
    margin: 0 0 18px;

    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.12;

    font-weight: 700;
}


.enquiry-left h2 span {
    color: #58c7e8;
}


.enquiry-left p {
    max-width: 350px;

    margin: 0;

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

    font-size: 15px;
    line-height: 1.75;
}


/* Form */

.enquiry-form {
    padding: 45px 42px;
}


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


.enquiry-form .form-group {
    margin-bottom: 18px;
}


.enquiry-form label {
    display: block;

    margin-bottom: 7px;

    color: #18213f;

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


.enquiry-form input,
.enquiry-form textarea {
    width: 100%;

    padding: 13px 15px;

    border: 1px solid #dce3eb;
    border-radius: 9px;

    background: #f9fbfc;
    color: #18213f;

    font-family: inherit;
    font-size: 14px;

    outline: none;

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


.enquiry-form textarea {
    resize: vertical;
    min-height: 105px;
}


.enquiry-form input:focus,
.enquiry-form textarea:focus {
    border-color: #58c7e8;

    background: #ffffff;

    box-shadow:
        0 0 0 3px rgba(88, 199, 232, 0.12);
}


.enquiry-form input::placeholder,
.enquiry-form textarea::placeholder {
    color: #9ba5b4;
}


/* Submit */

.enquiry-submit {
    width: 100%;

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

    margin-top: 5px;

    padding: 14px 20px;

    border: none;
    border-radius: 9px;

    background: #111b47;
    color: #ffffff;

    font-family: inherit;
    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

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


.enquiry-submit:hover {
    background: #58c7e8;

    transform: translateY(-2px);

    box-shadow:
        0 10px 25px rgba(88, 199, 232, 0.22);
}


.enquiry-submit span {
    font-size: 19px;
}


/* =========================================================
   WHATSAPP RIGHT SIDE
========================================================= */

.whatsapp-side {
    position: fixed;

    right: 0;
    top: 50%;

    transform: translateY(-50%);

    width: 52px;
    height: 58px;

    z-index: 9990;

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

    background: #25d366;
    color: #ffffff;

    border-radius: 14px 0 0 14px;

    font-size: 29px;

    text-decoration: none;

    box-shadow:
        0 8px 25px rgba(37, 211, 102, 0.28);

    transition:
        width 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}


.whatsapp-side:hover {
    width: 62px;

    background: #20bd5a;

    box-shadow:
        0 10px 30px rgba(37, 211, 102, 0.38);
}


/* =========================================================
   WHATSAPP CHAT
========================================================= */

.whatsapp-chat {
    position: fixed;

    right: 22px;
    bottom: 22px;

    z-index: 9991;

    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}


/* Message */

.whatsapp-message {
    position: relative;

    width: 230px;

    padding: 15px 38px 15px 16px;

    background: #ffffff;

    border-radius: 12px;

    box-shadow:
        0 10px 35px rgba(0, 0, 0, 0.15);

    border: 1px solid #e5e9ef;

    display: flex;
    flex-direction: column;
    gap: 4px;

    opacity: 0;
    visibility: hidden;

    transform: translateY(10px);

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


.whatsapp-message.show {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}


.whatsapp-message strong {
    color: #18213f;

    font-size: 14px;
}


.whatsapp-message span {
    color: #6d7787;

    font-size: 12px;
    line-height: 1.5;
}


.whatsapp-message-close {
    position: absolute;

    top: 7px;
    right: 8px;

    width: 23px;
    height: 23px;

    border: none;
    border-radius: 50%;

    background: #f1f3f6;
    color: #687282;

    font-size: 16px;

    cursor: pointer;
}


/* Chat button */

.whatsapp-chat-button {
    width: 58px;
    height: 58px;

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

    border-radius: 50%;

    background: #25d366;
    color: #ffffff;

    font-size: 31px;

    text-decoration: none;

    box-shadow:
        0 8px 25px rgba(37, 211, 102, 0.30);

    animation: whatsappPulse 2.5s infinite;

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


.whatsapp-chat-button:hover {
    transform: scale(1.08);

    background: #20bd5a;
}


@keyframes whatsappPulse {

    0% {
        box-shadow:
            0 8px 25px rgba(37, 211, 102, 0.30);
    }

    50% {
        box-shadow:
            0 8px 25px rgba(37, 211, 102, 0.30),
            0 0 0 10px rgba(37, 211, 102, 0.10);
    }

    100% {
        box-shadow:
            0 8px 25px rgba(37, 211, 102, 0.30);
    }

}


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

@media (max-width: 768px) {

    .enquiry-overlay {
        padding: 12px;
    }


    .enquiry-popup {
        max-height: 94vh;
        border-radius: 16px;
    }


    .enquiry-content {
        grid-template-columns: 1fr;
    }


    .enquiry-left {
        padding: 35px 25px 25px;

        border-radius: 16px 16px 0 0;
    }


    .enquiry-left h2 {
        font-size: 30px;
    }


    .enquiry-left p {
        font-size: 14px;
    }


    .enquiry-form {
        padding: 28px 22px 25px;
    }


    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }


    .enquiry-close {
        top: 10px;
        right: 10px;

        width: 34px;
        height: 34px;
    }


    .whatsapp-side {
        width: 46px;
        height: 50px;

        font-size: 25px;
    }


    .whatsapp-side:hover {
        width: 46px;
    }


    .whatsapp-chat {
        right: 15px;
        bottom: 15px;
    }


    .whatsapp-chat-button {
        width: 53px;
        height: 53px;

        font-size: 28px;
    }


    .whatsapp-message {
        width: 205px;
    }

}


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

body.dark-mode .enquiry-popup {
    background: #111827;
    border-color: rgba(255, 255, 255, 0.08);
}


body.dark-mode .enquiry-form label {
    color: #e8edf5;
}


body.dark-mode .enquiry-form input,
body.dark-mode .enquiry-form textarea {
    background: #1a2334;
    border-color: #303b4e;
    color: #ffffff;
}


body.dark-mode .enquiry-form input:focus,
body.dark-mode .enquiry-form textarea:focus {
    background: #202b3e;
}


body.dark-mode .whatsapp-message {
    background: #182131;
    border-color: #303b4e;
}


body.dark-mode .whatsapp-message strong {
    color: #ffffff;
}


body.dark-mode .whatsapp-message span {
    color: #aeb8c7;
}


body.dark-mode .whatsapp-message-close {
    background: #293446;
    color: #d9e0ea;
}

/* =========================================================
   TALENT LADDER MESSENGER STYLE CHATBOT
========================================================= */

.tl-chatbot {
    position: fixed;
    right: 22px;
    bottom: 22px;

    z-index: 9995;

    font-family: inherit;
}


/* =========================================================
   CHAT BUTTON
========================================================= */

.tl-chat-button {
    position: relative;

    width: 60px;
    height: 60px;

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

    border: none;
    border-radius: 50%;

    background: #111b47;
    color: #ffffff;

    font-size: 24px;

    cursor: pointer;

    box-shadow:
        0 10px 30px rgba(17, 27, 71, 0.28);

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


.tl-chat-button:hover {
    transform: translateY(-3px) scale(1.04);

    background: #58c7e8;

    box-shadow:
        0 14px 35px rgba(88, 199, 232, 0.35);
}


/* Notification */

.tl-chat-notification {
    position: absolute;

    top: -2px;
    right: -2px;

    width: 21px;
    height: 21px;

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

    border: 2px solid #ffffff;
    border-radius: 50%;

    background: #e74c3c;
    color: #ffffff;

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

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}


.tl-chat-button.active
.tl-chat-notification {
    opacity: 0;
    transform: scale(0);
}


/* =========================================================
   CHAT WINDOW
========================================================= */

.tl-chat-window {
    position: absolute;

    right: 0;
    bottom: 76px;

    width: 365px;
    height: 530px;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid rgba(17, 27, 71, 0.08);

    border-radius: 18px;

    box-shadow:
        0 20px 60px rgba(15, 23, 42, 0.20);

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

    transform:
        translateY(18px)
        scale(0.96);

    transform-origin: bottom right;

    transition:
        opacity 0.28s ease,
        visibility 0.28s ease,
        transform 0.28s ease;
}


.tl-chat-window.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform:
        translateY(0)
        scale(1);
}


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

.tl-chat-header {
    min-height: 72px;

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

    padding: 12px 15px;

    background:
        linear-gradient(
            135deg,
            #111b47,
            #17275b
        );

    color: #ffffff;
}


.tl-chat-agent {
    display: flex;
    align-items: center;
    gap: 11px;
}


.tl-chat-avatar {
    width: 42px;
    height: 42px;

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

    flex-shrink: 0;

    border-radius: 50%;

    background: #58c7e8;
    color: #ffffff;

    font-size: 17px;
}


.tl-chat-agent-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}


.tl-chat-agent-info strong {
    font-size: 14px;
    font-weight: 700;
}


.tl-chat-agent-info span {
    display: flex;
    align-items: center;
    gap: 5px;

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

    font-size: 11px;
}


.tl-chat-agent-info span i {
    color: #52df84;
    font-size: 7px;
}


/* Header buttons */

.tl-chat-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}


.tl-chat-actions button {
    width: 32px;
    height: 32px;

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

    border: none;
    border-radius: 50%;

    background: transparent;
    color: rgba(255, 255, 255, 0.75);

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}


.tl-chat-actions button:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}


/* =========================================================
   MESSAGES AREA
========================================================= */

.tl-chat-messages {
    flex: 1;

    overflow-y: auto;

    padding: 18px 15px;

    background:
        #f6f8fb;

    scroll-behavior: smooth;
}


.tl-chat-messages::-webkit-scrollbar {
    width: 5px;
}


.tl-chat-messages::-webkit-scrollbar-thumb {
    background: #cbd2dc;
    border-radius: 10px;
}


/* =========================================================
   BOT MESSAGE
========================================================= */

.tl-message {
    display: flex;
    align-items: flex-start;
    gap: 8px;

    margin-bottom: 14px;
}


.tl-message-avatar {
    width: 29px;
    height: 29px;

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

    flex-shrink: 0;

    border-radius: 50%;

    background: #58c7e8;
    color: #ffffff;

    font-size: 11px;
}


.tl-message-content {
    max-width: 82%;
}


.tl-message-name {
    display: block;

    margin: 0 0 4px 4px;

    color: #687386;

    font-size: 10px;
    font-weight: 600;
}


.tl-message-bubble {
    padding: 11px 13px;

    background: #ffffff;
    color: #273149;

    border-radius:
        4px
        14px
        14px
        14px;

    box-shadow:
        0 2px 8px rgba(20, 30, 50, 0.06);

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


/* =========================================================
   USER MESSAGE
========================================================= */

.tl-user-message {
    justify-content: flex-end;
}


.tl-user-message .tl-message-content {
    max-width: 82%;
}


.tl-user-message .tl-message-bubble {
    background: #111b47;
    color: #ffffff;

    border-radius:
        14px
        4px
        14px
        14px;
}


.tl-user-message .tl-message-avatar {
    display: none;
}


/* =========================================================
   QUICK OPTIONS
========================================================= */

.tl-quick-options {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;

    margin:
        3px
        0
        5px
        37px;
}


.tl-quick-options button {
    padding: 8px 11px;

    border: 1px solid #b9eaf6;
    border-radius: 18px;

    background: #ffffff;
    color: #1d6981;

    font-family: inherit;
    font-size: 11px;
    font-weight: 600;

    cursor: pointer;

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


.tl-quick-options button:hover {
    background: #58c7e8;
    border-color: #58c7e8;
    color: #ffffff;

    transform: translateY(-1px);
}


/* =========================================================
   TYPING INDICATOR
========================================================= */

.tl-typing {
    display: flex;
    align-items: center;
    gap: 4px;

    width: fit-content;

    margin:
        0
        0
        8px
        52px;

    padding: 8px 11px;

    background: #ffffff;

    border-radius: 12px;

    opacity: 0;
    visibility: hidden;

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


.tl-typing.show {
    opacity: 1;
    visibility: visible;
}


.tl-typing span {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #8e99aa;

    animation:
        tlTyping 1.2s infinite;
}


.tl-typing span:nth-child(2) {
    animation-delay: 0.15s;
}


.tl-typing span:nth-child(3) {
    animation-delay: 0.30s;
}


@keyframes tlTyping {

    0%,
    60%,
    100% {
        transform: translateY(0);
        opacity: 0.45;
    }

    30% {
        transform: translateY(-4px);
        opacity: 1;
    }

}


/* =========================================================
   INPUT AREA
========================================================= */

.tl-chat-input-area {
    display: flex;
    align-items: center;
    gap: 8px;

    padding: 11px;

    background: #ffffff;

    border-top: 1px solid #e8ecf1;
}


.tl-chat-input-area input {
    flex: 1;

    min-width: 0;

    height: 42px;

    padding: 0 13px;

    border: 1px solid #e0e5ec;
    border-radius: 21px;

    outline: none;

    background: #f7f9fb;
    color: #202a3d;

    font-family: inherit;
    font-size: 13px;

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}


.tl-chat-input-area input:focus {
    border-color: #58c7e8;

    background: #ffffff;

    box-shadow:
        0 0 0 3px rgba(88, 199, 232, 0.10);
}


.tl-chat-input-area input::placeholder {
    color: #9aa4b3;
}


.tl-chat-input-area button {
    width: 42px;
    height: 42px;

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

    flex-shrink: 0;

    border: none;
    border-radius: 50%;

    background: #111b47;
    color: #ffffff;

    font-size: 14px;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}


.tl-chat-input-area button:hover {
    background: #58c7e8;

    transform: scale(1.05);
}


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

body.dark-mode .tl-chat-window {
    background: #111827;

    border-color:
        rgba(255, 255, 255, 0.07);

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.45);
}


body.dark-mode .tl-chat-messages {
    background: #0f1724;
}


body.dark-mode .tl-message-bubble {
    background: #1c2738;
    color: #e8edf5;
}


body.dark-mode .tl-message-name {
    color: #9da9ba;
}


body.dark-mode .tl-quick-options button {
    background: #172334;
    border-color: #315469;
    color: #8fe1f5;
}


body.dark-mode .tl-chat-input-area {
    background: #111827;
    border-color: #293548;
}


body.dark-mode .tl-chat-input-area input {
    background: #1b2637;
    border-color: #334055;
    color: #ffffff;
}


body.dark-mode .tl-chat-input-area input:focus {
    background: #202d40;
}


body.dark-mode .tl-typing {
    background: #1c2738;
}


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

@media (max-width: 600px) {

    .tl-chatbot {
        right: 14px;
        bottom: 14px;
    }


    .tl-chat-window {
        right: 0;
        bottom: 68px;

        width:
            min(
                calc(100vw - 28px),
                365px
            );

        height:
            min(
                530px,
                calc(100vh - 100px)
            );

        border-radius: 16px;
    }


    .tl-chat-button {
        width: 56px;
        height: 56px;

        font-size: 22px;
    }


    .tl-chat-header {
        min-height: 66px;
    }


    .tl-chat-messages {
        padding: 15px 12px;
    }


    .tl-message-content {
        max-width: 86%;
    }


    .tl-quick-options {
        margin-left: 37px;
    }


    .tl-chat-input-area {
        padding: 9px;
    }

}


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

@media (max-width: 380px) {

    .tl-chatbot {
        right: 10px;
        bottom: 10px;
    }


    .tl-chat-window {
        width:
            calc(100vw - 20px);

        height:
            calc(100vh - 80px);
    }


    .tl-message-bubble {
        font-size: 12px;
    }


    .tl-quick-options button {
        font-size: 10px;
        padding: 7px 9px;
    }

}