/*
Theme Name: North Star
Theme URI: http://northstarestates.co.uk/
Author: Antigravity
Author URI: https://google.com/
Description: A premium WordPress theme for North Star Estates.
Version: 1.0

License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: north-star
*/

/* --- Lenis Smooth Scroll Setup --- */
html.lenis {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-scrolling iframe {
    pointer-events: none;
}

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

body {
    font-family: 'Metropolis', sans-serif;
    color: #333;
    line-height: 1.6;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    text-decoration: none;
    transition: all 0.3s ease;
}

ul {
    list-style: none;
}

/* --- Theme Variables (Will be overridden by Customizer) --- */
:root {
    --primary-color: #ffffff;
    --footer-bg: #001f3f;
    --btn-hover: #003366;
}

/* --- Accredited Section & Carousel (Desktop — Figma 4273:10076) --- */
.accredited-section {
    width: 100%;
    background-color: #ffffff;
    height: 356px;
    padding: 80px 0;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

.accredited-title {
    font-family: var(--Caption-Family, 'Metropolis', sans-serif);
    font-size: var(--Caption-C2, 24px);
    font-style: normal;
    font-weight: 600;
    color: var(--Text-Color-Dark-blue, #00224D);
    margin: 0;
    text-align: center;
    text-transform: capitalize;
    line-height: var(--Caption-Line-height-2, 32px);
    letter-spacing: var(--Caption-Letter-spacing, 0);
    text-box: trim-both cap alphabetic;
}

.accredited-carousel-wrapper {
    margin-top: 60px;
    width: 100%;
    position: relative;
    display: flex;
}

/* Edge fades — Figma side masks are 106px */
.accredited-carousel-wrapper::before,
.accredited-carousel-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    width: 106px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.accredited-carousel-wrapper::before {
    left: 0;
    background: linear-gradient(to right, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
}

.accredited-carousel-wrapper::after {
    right: 0;
    background: linear-gradient(to left, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
}

.accredited-carousel-track {
    display: flex;
    width: max-content;
    animation: marquee-scroll 35s linear infinite;
    will-change: transform;
}

.accredited-carousel-track:hover {
    animation-play-state: paused;
}

.accredited-carousel-group {
    display: flex;
    align-items: center;
    gap: 180px;
    margin-right: 180px;
    flex-shrink: 0;
}

.accredited-logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    height: 120px;
}

.accredited-logo-img {
    height: 120px !important;
    width: auto !important;
    max-width: none;
    object-fit: contain;
    transition: all 0.3s ease;
}


@keyframes marquee-scroll {
    0% {
        transform: translate3d(0, 0, 0);
    }

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

/* --- Services Section --- */
.services-section {
    width: 100%;
    background-color: #00224D;
    padding: 120px 80px;
    color: #ffffff;
    font-family: 'Metropolis', sans-serif;
    overflow: hidden;
}



.services-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 80px;
    padding: 0;
}

.services-title {
    color: var(--Text-Color-White, #FFF);
    text-box: trim-both cap alphabetic;
    font-family: var(--Title-Family, Metropolis);
    font-size: var(--Title-T1, 80px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Title-Line-height, 88px);
    /* 110% */
    letter-spacing: var(--Title-Letter-spacing, 0);
    text-transform: capitalize;
}

.service-category-tabs-wrapper {
    display: flex;
    width: 30%;
}

.service-category-tabs {
    display: flex;
    padding: 8px;
    align-items: center;
    gap: 12px;
    align-self: stretch;
    border-radius: 64px;
    border: 1px solid #FFF;
    position: relative;
    z-index: 1;
    width: 100%;
}

.service-category-tabs::before {
    content: '';
    position: absolute;
    left: var(--active-left, 8px);

    width: var(--active-width, calc(50% - 8px));
    height: var(--active-height, calc(100% - 16px));
    background: #FFF;
    border-radius: 64px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
}

.service-category-tab {
    flex: 1;
    display: flex;
    padding: 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    background: transparent !important;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--Button-Color-White, #FFF);
    text-box: trim-both cap alphabetic;
    font-family: var(--tabs-links-family, Metropolis);
    font-size: var(--tabs-links-l-2, 24px);
    font-style: normal;
    font-weight: 600;
    line-height: var(--tabs-links-line-height-2, 32px);
    /* 133.333% */
    letter-spacing: var(--tabs-links-letter-spacing, 0);
    width: 50%;
}

.service-category-tab.active {
    color: var(--Text-Color-Dark-blue, #00224D);
}

.service-accordion-item:not(:first-child) {
    border-bottom: 1px solid var(--Stroke-Color-White-20, rgba(255, 255, 255, 0.20));
    border-left: 3px solid var(--Stroke-Color-White-20, rgba(255, 255, 255, 0.20));
}

.services-panels {
    padding: 0;
}

.service-category-group {
    display: none;
}

.service-category-group.active {
    display: block;
}

.service-layout-grid {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* Sidebar */
.service-sidebar {
    display: flex;
    flex-direction: column;
    padding: 0px;
    width: 28%;
    align-self: stretch;
    height: 819px;
    overflow: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.20);
    border-bottom: 1px solid rgba(255, 255, 255, 0.20);
}

.service-accordion-list {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1;
    min-height: 695px;
    overflow-y: auto;
    margin-bottom: 40px;

}

/* Custom minimal scrollbar for sidebar */
.service-accordion-list::-webkit-scrollbar {
    width: 4px;
}

.service-accordion-list::-webkit-scrollbar-track {
    background: transparent;
}

.service-accordion-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.go-to-category-btn {
    display: flex;
    width: 100%;
    padding: 24px 20px;
    justify-content: space-between;
    align-items: center;
    border-radius: 8px;
    border: 1px solid var(--Button-Color-White, #FFF);
    color: #FFF;
    text-decoration: none;
    margin-top: auto;
    transition: all 0.3s ease;
    font-family: var(--Button-Family, Metropolis);
    font-size: var(--Button-BU1, 24px);
    font-style: normal;
    font-weight: 600;
    line-height: var(--Button-Line-height, 32px);
    /* 133.333% */
    letter-spacing: var(--Button-Letter-spacing, 0);
}

.go-to-category-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.go-to-arrow {
    font-size: 20px;
    transition: transform 0.3s ease;
    width: 24px;
    height: 24px;
}

.go-to-category-btn:hover .go-to-arrow {
    transform: translate(3px, -3px);
}

.service-main-area {
    width: 69%;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.service-accordion-item {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    transition: background-color 0.3s ease;
}

.service-accordion-item:first-child {
    border-top: none;
}

.service-accordion-item::before {
    content: '';
    position: absolute;
    left: -1px;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: #ffffff;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
}

.service-accordion-item.active {
    border-left: 3px solid var(--Stroke-Color-White, #FFF);
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.10) 100%);
    padding: 56px 24px;
    display: flex;
    flex-direction: column;
}

.service-accordion-item.active::before {
    opacity: 1;
}

.service-accordion-item.active .service-accordion-toggle {
    padding: 0px !important;
    gap: 12px;
}

.service-accordion-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 40px 24px;
    background: transparent;
    border: none;
    color: #ffffff;
    cursor: pointer;
    text-align: left;
    transition: all 0.3s ease;
}

.service-accordion-item:has(.service-accordion-content[style*="max-height: 0"]) .service-accordion-content {
    margin-top: 0;
}

.service-accordion-item:has(.service-accordion-content[style*="max-height"]) .service-accordion-content:not([style*="max-height: 0"]) {
    margin-top: 32px;
}

.service-accordion-title {
    color: var(--Text-Color-White, #FFF);
    font-family: var(--Button-Family, Metropolis);
    font-size: var(--Button-BU1, 36px);
    font-style: normal;
    font-weight: 600;
    letter-spacing: var(--Button-Letter-spacing, 0);
}

.sidebar-sub-listing-item:hover .service-accordion-number,
.sidebar-sub-listing-item.active .service-accordion-number {
    color: #fff;
}

.service-accordion-number {
    color: var(--Stroke-Color-White-20, rgba(255, 255, 255, 0.20));
    text-box: trim-both cap alphabetic;
    font-family: var(--Heading-Family, Metropolis);
    font-size: var(--Heading-H4, 20px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Heading-Line-height-4, 28px);
    /* 140% */
    letter-spacing: var(--Heading-Letter-spacing, 0);
}

.service-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-sub-listings {
    display: flex;
    padding: 0 32px;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    align-self: stretch;
}

.sidebar-sub-listing-item {
    color: var(--Text-Color-White-50, rgba(255, 255, 255, 0.20));
    font-family: var(--Heading-Family, Metropolis);
    font-size: var(--Heading-H4, 20px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Heading-Line-height-4, 28px);
    /* 140% */
    letter-spacing: var(--Heading-Letter-spacing, 0);
    cursor: pointer;
    transition: color 0.3s ease;
}

.sidebar-sub-listing-item:hover,
.sidebar-sub-listing-item.active {
    color: #ffffff;
}

.active-service-main-title {
    color: #FFF;
    text-box: trim-both cap alphabetic;
    font-family: Metropolis;
    font-size: 40px;
    font-style: normal;
    font-weight: 600;
    line-height: 48px;
    /* 120% */
    letter-spacing: 0;
    position: relative;
    letter-spacing: 0;
    display: block;
    padding-bottom: 32px;
}

h3.active-service-main-title:after {
    content: "";
    width: 100%;
    height: 1px;
    background: linear-gradient(180deg, rgba(0, 34, 77, 0.38) -11952.83%, rgba(255, 255, 255, 0.38) 26057.4%);
    display: block;
    bottom: 0px;
    position: absolute;
}

/* Stripe-style Layered Carousel */
.service-carousel-container {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.service-carousel-wrapper {
    display: none;
    width: 100%;
}

.service-carousel-wrapper.active {
    display: block;
}

.service-carousel-track-wrapper {
    position: relative;
    height: 636px;
    width: 100%;
    margin-bottom: 30px;
    overflow: hidden;
}

.service-carousel-track {
    display: flex;
    gap: 16px;
    width: max-content;
    height: 100%;
    transition: transform 0.6s ease-in-out;
}

.service-carousel-track.no-transition,
.service-carousel-track.no-transition * {
    transition: none !important;
}

.service-carousel-card {
    display: flex;
    width: 200px;
    height: 550px;
    padding: 30px 8px;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    flex-shrink: 0;
    align-self: stretch;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    transition: all 0.6s ease-in-out;
    cursor: grab;
}

.service-carousel-card:active {
    cursor: grabbing;
}

.service-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
}

.service-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%);
    z-index: 2;
    transition: background 0.6s ease-in-out;
}

.service-card-number {
    position: relative;
    font-size: 32px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    z-index: 3;
    text-align: left;
    width: 100%;
    transition: all 0.6s ease-in-out;
}

.service-card-content {
    position: relative;
    z-index: 3;
    width: 100%;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0;
    transition: gap 0.5s ease-in-out, all 0.4s ease-in-out;
}

.service-card-title {
    color: var(--Text-Color-White, #FFF);
    font-family: var(--Heading-Family, Metropolis);
    font-size: var(--Heading-H2, 24px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Heading-Line-height-2, 40px);
    letter-spacing: var(--Heading-Letter-spacing, 0);
    text-box: trim-both cap alphabetic;
    transition: all 0.6s ease-in-out;
}

.service-carousel-card.card-active .service-card-title {
    font-size: var(--Heading-H2, 36px);
    font-style: normal;
    font-weight: 600;
}

.service-card-desc-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.4s ease-in-out, opacity 0.4s ease-in-out;
}

.service-carousel-card.card-active .service-card-desc-wrapper {
    grid-template-rows: 1fr;
    opacity: 1;
    transition: grid-template-rows 0.5s ease-in-out 0.35s, opacity 0.5s ease-in-out 0.35s;
}

.service-card-desc {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    overflow: hidden;
    min-height: 0;
}

.service-card-learn-more {
    display: none;
}

/* Hover effect on inactive cards */
.service-carousel-card:not(.card-active):hover {
    filter: brightness(1.05);
    transform: translateY(-4px);
}

/* Card States for JS Logic */
.service-carousel-card.card-active {
    display: flex;
    width: 512px;
    height: 550px;
    padding: 40px 24px;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    flex-shrink: 0;
    border-radius: 16px;
}

.service-carousel-card.card-active .service-card-overlay {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.73) 30.67%, rgba(255, 255, 255, 0.00) 100%);
    border-radius: 16px;
}

.service-carousel-card.card-active .service-card-number {
    color: var(--Text-Color-White-80, rgba(255, 255, 255, 0.80));
    text-box: trim-both cap alphabetic;
    font-family: var(--Display-Family, Metropolis);
    font-size: var(--Display-D1, 80px);
    font-style: normal;
    font-weight: 700;
    line-height: var(--Display-Line-height, 88px);
    /* 110% */
    letter-spacing: var(--Display-Letter-spacing, 0);
    transition: all 0.6s ease;
    text-align: left;
}

.service-carousel-card.card-active .service-card-content {
    color: var(--Text-Color-White, #FFF);
    text-box: trim-both cap alphabetic;
    font-family: var(--Heading-Family, Metropolis);
    font-size: var(--Heading-H2, 32px);
    font-style: normal;
    font-weight: 600;
    line-height: var(--Heading-Line-height-2, 40px);
    letter-spacing: var(--Heading-Letter-spacing, 0);
    gap: 24px;
    transition: gap 0.5s ease-in-out 0.25s;
}

.service-carousel-card.card-active .service-card-desc {
    color: var(--Text-Color-White-80, rgba(255, 255, 255, 0.80));
    text-box: trim-both cap alphabetic;
    font-family: var(--Body-Family, Metropolis);
    font-size: var(--Body-B4, 16px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--Body-Line-height-4, 24px);
    /* 150% */
    letter-spacing: var(--Body-Letter-spacing, 0);
}

/* Carousel Controls */
.carousel-bottom-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
}

.carousel-progress-area {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 405px
}

.carousel-progress-text {
    font-size: 14px;
    font-weight: 500;
}

.carousel-progress-bar-track {
    flex: 1;
    height: 4px;
    background: #ffffff;
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}

.carousel-progress-bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: rgba(0, 34, 77, 0.50);
    border-radius: 2px;
    transition: width 0.4s ease;
}

.carousel-nav-buttons {
    display: flex;
    gap: 15px;
}

.nav-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.nav-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #ffffff;
}





/* --- Real Results Section --- */
.results-section {
    width: 100%;
    background-color: #ffffff;
    padding: 120px 80px;
    color: #1a1a1a;
    font-family: 'Metropolis', sans-serif;
    overflow: hidden;
    border-top: none;
}

.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 120px;
    padding: 0;
}

.results-title {
    color: var(--Text-Color-Black, #1D1D1D);
    text-box: trim-both cap alphabetic;
    font-family: var(--Title-Family, Metropolis);
    font-size: var(--Title-T1, 80px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Title-Line-height, 88px);
    /* 110% */
    letter-spacing: var(--Title-Letter-spacing, 0);
    text-transform: capitalize;
}

.results-category-tabs-wrapper {
    display: flex;
    width: 30%;
}

.results-category-tabs {
    display: flex;
    padding: 8px;
    align-items: center;
    gap: 12px;
    border-radius: 64px;
    border: 1px solid var(--Stroke-Color-Dark-blue, #00224D);
    position: relative;
    z-index: 1;
    width: 100%;
}

.results-category-tabs::before {
    content: '';
    position: absolute;
    left: var(--active-left, 8px);
    top: var(--active-top, 8px);
    width: var(--active-width, calc(50% - 8px));
    height: var(--active-height, calc(100% - 16px));
    background: var(--Fill-color-Dark-blue, #00224D);
    border-radius: 64px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
}

.results-category-tab {
    flex: 1;
    color: var(--Stroke-Color-Dark-blue, #00224D);
    text-box: trim-both cap alphabetic;
    font-family: var(--tabs-links-family, Metropolis);
    font-size: var(--tabs-links-l-2, 24px);
    font-style: normal;
    font-weight: 600;
    line-height: var(--tabs-links-line-height-2, 32px);
    /* 133.333% */
    letter-spacing: var(--tabs-links-letter-spacing, 0);
    display: flex;
    padding: 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    background: transparent !important;
    border: none;
    transition: all 0.3s ease;
    cursor: pointer;
    width: 50%;
}

.results-category-tab.active {
    color: #fff;
}

.results-stats-grid {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    align-content: flex-start;
    row-gap: 120px;
    flex-wrap: wrap;
    width: 80%;
    margin: auto;
}

.results-stat-row {
    display: flex;
}

.results-stat-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 45%;
    gap: 40px;
}

.results-stat-header {
    display: flex;
    padding-bottom: 24px;
    align-items: center;
    gap: 6px;
    align-self: stretch;
    border-bottom: 1px solid var(--Stroke-Color-Soft-grey, #E1E1E1);
}


.results-stat-header .title {
    color: var(--Text-Color-Black, #1D1D1D);
    font-family: var(--Caption-Family, Metropolis);
    font-size: var(--Caption-C2, 24px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Caption-Line-height-2, 32px);
    /* 133.333% */
    letter-spacing: var(--Caption-Letter-spacing, 0);
    text-transform: capitalize;
    text-box: trim-both cap alphabetic;
}

.results-stat-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(29, 29, 29, 0.60);
    margin-right: 8px;
    display: block;
}

.results-stat-divider {
    width: 100%;
    height: 1px;
    background: #e0e0e0;
    margin-top: 16px;
    margin-bottom: 32px;
}

.results-stat-box {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.results-stat-number .counter {
    color: var(--Text-Color-Dark-blue, #00224D);
    text-box: trim-both cap alphabetic;
    font-family: var(--Numerical-Family, Metropolis);
    font-size: var(--Numerical-N1, 120px);
    font-style: normal;
    font-weight: 600;
    line-height: var(--Numerical-Line-height, 120px);
    /* 100% */
    letter-spacing: var(--Numerical-Letter-spacing, -4px);
}

.results-stat-subtitle {
    color: var(--Text-Color-Black, #1D1D1D);
    text-box: trim-both cap alphabetic;
    font-family: var(--Body-Family, Metropolis);
    font-size: var(--Body-B3, 20px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Body-Line-height-3, 28px);
    /* 140% */
    letter-spacing: var(--Body-Letter-spacing, 0);
    margin-bottom: 14px;
}

.results-stat-desc p {
    color: var(--Text-Color-Black-50, rgba(29, 29, 29, 0.50));
    text-box: trim-both cap alphabetic;
    font-family: var(--Body-Family, Metropolis);
    font-size: var(--Body-B3, 20px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Body-Line-height-3, 28px);
    letter-spacing: var(--Body-Letter-spacing, 0);
}




/* --- Built Sectors Vertical Slideshow Section --- */
.built-sectors-section {
    width: 100%;
    height: 100vh;
    background-color: #00224D;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Metropolis', sans-serif;
    color: #ffffff;
    box-sizing: border-box;
}

.built-sectors-container {
    width: 100%;
    max-width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 120px 40px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-sizing: border-box;
}

/* Centered Title Initial State (animates via GSAP) */
.built-sectors-title {
    color: var(--Text-Color-White, #FFF);
    font-family: var(--Title-Family, Metropolis);
    font-size: var(--Title-T1, 80px);
    font-weight: 400;
    line-height: var(--Title-Line-height, 88px);
    letter-spacing: var(--Title-Letter-spacing, 0);
    text-transform: capitalize;
    z-index: 10;
}

/* Carousel Layout Wrapper */
.built-sectors-carousel-wrapper {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    height: 678px;
    padding: 0px 40px 0px 100px;
    margin-top: 168px;
    /* Offset absolute title (80px top + 48px height) for a visual gap of 120px */
    gap: 40px;
    /* 40px gap between left column and right column */
}

/* Left Area: Progress bar & sliding cards */
.built-sectors-left {
    display: flex;
    align-items: center;
    gap: 32px;
    /* 32px gap between progress bar and card container */
    height: 100%;
    position: relative;
}

/* Progress Column Wrapper */
.built-sectors-progress-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    height: 420px;
    justify-content: center;
    margin-top: -241px;
}

/* Slide Counter */
.built-sectors-progress-counter {
    color: var(--Text-Color-White-50, rgba(255, 255, 255, 0.50));
    font-family: var(--Caption-Family, Metropolis);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;
    line-height: 1;
}

/* Vertical Progress Bar Track */
.built-sectors-progress-track {
    width: 4px;
    height: 312px;
    background: #FFF;
    position: relative;
    border-radius: 24px;
}

/* Vertical Progress Bar Thumb (acting as a fill) */
.built-sectors-progress-thumb {
    width: 4px;
    height: 20%;
    background: rgba(0, 34, 77, 0.50);
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 0px;
    transform-origin: top center;
}

/* Cards Window Mask behaving as a frame */
.built-sectors-cards-container {
    width: 940px;
    height: 578px;
    overflow: hidden;
    clip-path: none;
    position: relative;
    border-radius: 0px;
    padding: 8px;
    box-sizing: border-box;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.built-sectors-cards-column {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    position: relative;
}

.built-sectors-scroll-continue {
    display: flex;
    align-items: center;
    align-self: center;
    gap: 8px;
    color: #fff;
    font-family: var(--Caption-Family, Metropolis);
    font-size: 32px;
    font-weight: 500;
    text-transform: capitalize;
    margin-top: 32px;
}

.built-sectors-scroll-continue svg {
    width: 32px;
    height: 32px;
    display: block;
}

.built-sectors-next-container {
    width: 485px;
    height: 97px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.50);
    padding: 4px;
    box-sizing: border-box;
    margin-top: 53px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    opacity: 0.5;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 40%);
    mask-image: linear-gradient(to right, transparent 0%, black 40%);
    transition: opacity 0.3s ease;
}

.built-sectors-next-track {
    position: absolute;
    top: 4px;
    left: 4px;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
}

.built-sector-next-card {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}

.built-sector-next-card .sector-card-img-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.built-sector-next-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.65) contrast(1.1) blur(1.5px);
}

/* Draw container frame border via ::after overlay so that sliding cards pass BEHIND the border line */
.built-sectors-cards-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid var(--Stroke-Color-White-50, rgba(255, 255, 255, 0.50));
    pointer-events: none;
    z-index: 20;
    box-sizing: border-box;
}

/* Bottom fade overlay for upcoming peaking cards (placed below the container) */
.built-sectors-bottom-fade {
    display: none !important;
}

/* Cards Track absolute positioned inside the padded container */
.built-sectors-cards-track {
    position: absolute;
    top: 8px;
    left: 8px;
    width: calc(100% - 16px);
    height: calc(100% - 16px);
    overflow: hidden;
}

/* Individual Image Card */
.built-sector-image-card {
    width: 100%;
    height: 100%;
    border-radius: 0px;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: right center;
}

.built-sector-image-card .sector-card-img-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.built-sector-image-card img {
    width: 100%;
    height: calc(100% + 120px);
    position: absolute;
    top: -60px;
    left: 0;
    object-fit: cover;
    transition: filter 0.8s ease;
    filter: brightness(0.65) contrast(1.1);
}

/* Card Zoom/Brighten effect on active */
.built-sector-image-card.active img {
    filter: brightness(0.9) contrast(1);
}

/* Card Overlay gradient */
.built-sector-image-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 34, 77, 0.4) 100%);
    pointer-events: none;
}

/* Right Area: Text Info & Controls */
.built-sectors-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Aligns buttons to top/bottom, details box centered in between */
    align-items: center;
    /* Center horizontally */
    width: 420px;
    height: 578px;
    /* Equal to the left image card (.built-sectors-cards-container) height */
    position: relative;
    box-sizing: border-box;
    margin-top: -211px;
}

/* Details Box Container */
.built-sectors-details-box {
    position: relative;
    width: 100%;
    height: 250px;
}

/* Detail slide item (absolutely stacked, crossfaded by GSAP) */
.built-sector-detail-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
}

.built-sector-detail-item.active {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* Icon glowing wrapper */
.built-sector-icon-glow {
    position: relative;
    margin-bottom: 30px;
}

.built-sector-icon-glow::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90px;
    height: 90px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 70%);
    border-radius: 50%;
    z-index: 1;
}

.built-sector-icon-wrapper {
    position: relative;
    z-index: 2;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.10) 100%);
    box-shadow: 0 0 16px -2px rgba(255, 255, 255, 0.12);
}

.built-sector-icon-wrapper svg {
    width: 48px;
    height: 48px;
    fill: none;
}

.built-sector-icon-wrapper svg path {
    stroke: #ffffff;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.built-sector-name {
    font-family: var(--Heading-Family, Metropolis);
    font-size: var(--Heading-H2, 56px);
    font-weight: 400;
    letter-spacing: -2px;
    margin: 0 0 48px 0;
    color: #ffffff;
    line-height: 56px;
    text-align: center;
    text-box-edge: cap alphabetic;
    text-box-trim: trim-both;
}

.built-sector-desc {
    color: var(--Text-Color-White-50, rgba(255, 255, 255, 0.50));
    font-family: var(--Body-Family, Metropolis);
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
    margin: 0;
    text-align: center;
    text-box-edge: cap alphabetic;
    text-box-trim: trim-both;
}

/* Nav Controls */
.built-sector-nav-btn {
    border: none !important;
    background: transparent !important;
    background-color: transparent !important;
    padding: 0 !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease;
    margin: 0 !important;
    /* Resets margins to center horizontally inside flex parent */
}

.built-sector-nav-btn.prev-btn {
    /* Top aligned via flexbox justification */
}

.built-sector-nav-btn.next-btn {
    /* Bottom aligned via flexbox justification */
}

.built-sector-nav-btn:hover {
    color: #ffffff !important;
    opacity: 0.6 !important;
}

.built-sector-nav-btn.prev-btn:hover {
    transform: translateY(-4px);
}

.built-sector-nav-btn.next-btn:hover {
    transform: translateY(4px);
}

/* Responsive */


/* --- News Section --- */
.news-section {
    width: 100%;
    background-color: #ffffff;
    padding: 120px 0px 120px 40px;
    font-family: 'Metropolis', sans-serif;
    overflow: hidden;
}

.news-header {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-bottom: 80px;
    padding-right: 40px;
}

.news-title {
    color: var(--Text-Color-Black, #1D1D1D);
    text-box: trim-both cap alphabetic;
    font-family: var(--Title-Family, Metropolis);
    font-size: var(--Title-T1, 80px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Title-Line-height, 88px);
    /* 110% */
    letter-spacing: var(--Title-Letter-spacing, 0);
    text-transform: capitalize;
}

.news-controls {
    display: flex;
    gap: 40px;
    align-items: center;
}

.news-prev-btn,
.news-next-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid #00224D;
    color: #00224D;
    padding: 0;
}

.news-prev-btn:hover,
.news-next-btn:hover {
    background-color: #00224D;
    color: #ffffff;
}

button.news-prev-btn.disabled,
button.news-next-btn.disabled {
    border-color: #d9d9d9;
    color: #d9d9d9;
    background-color: transparent;
    cursor: not-allowed;
}

button.news-prev-btn.disabled svg,
button.news-next-btn.disabled svg {
    color: #d9d9d9;
}

.news-view-all-btn {
    justify-content: center;
    display: flex;
    padding: 24px 20px;
    align-items: center;
    gap: 18px;
    border-radius: 8px;
    border: 1px solid var(--Button-Color-Dark-blue, #00224D);
    background: transparent;
    color: #00224D;
    font-family: 'Metropolis', sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-sizing: border-box;
    text-box: trim-both cap alphabetic;
}

.news-view-all-btn svg {
    transition: transform 0.3s ease;
}

.news-view-all-btn:hover {
    background-color: #00224D;
    color: #ffffff;
}

.news-view-all-btn:hover svg {
    transform: translate(2px, -2px);
}

.news-bottom-controls {
    display: none !important;
}

/* News Carousel */
.news-carousel-container {
    width: 100%;
}

.news-carousel-wrapper {
    position: relative;
    width: 100%;
}

.news-carousel-track-wrapper {
    width: 100%;
    overflow: hidden;
    padding-bottom: 20px;
    /* Safe space for shadow if any */
}

.news-carousel-track {
    --news-card-gap: 24px;
    display: flex;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    gap: var(--news-card-gap);
}

.news-carousel-card {
    flex-shrink: 0;
    height: 680px;
    width: var(--news-card-inactive-width, 280px);
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: width 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.news-carousel-card.card-active {
    width: var(--news-card-active-width, 700px);
    cursor: default;
}

.news-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
    transition: transform 0.6s ease;
}

.news-carousel-card:hover .news-card-bg {
    transform: scale(1.05);
}

.news-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80%;
    background: linear-gradient(to top, rgba(4, 28, 59, 0.95) 0%, rgba(4, 28, 59, 0.6) 40%, rgba(0, 0, 0, 0) 100%);
    z-index: 2;
    mask-image: linear-gradient(to bottom, transparent 0%, #000 25%, #000 100%);
    -webkit-mask-image: radial-gradient(to bottom, transparent 0%, black 25%, black 100%);
}

.news-card-content {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 32px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    height: 245px;
    padding: 48px 24px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 8px;
    flex-shrink: 0;
    align-self: stretch;
    border-radius: 0 0 24px 24px;
    background: linear-gradient(180deg, rgba(0, 34, 77, 0.00) 0%, rgba(0, 34, 77, 0.80) 69.96%);
    backdrop-filter: blur(4px);
}

.news-card-title {
    font-size: 36px;
    font-weight: 500;
    color: #ffffff;
    margin: 0;
    line-height: 40px;
    text-box-edge: cap alphabetic;
    text-box-trim: trim-both;
}

.news-card-desc {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.4s ease, max-height 0.4s ease, margin-top 0.4s ease;
}

.news-carousel-card.card-active .news-card-desc {
    opacity: 1;
    max-height: 200px;
    margin-top: 16px;
}

.news-card-desc p {
    font-size: 15px;
    color: #b0c4de;
    margin: 0 0 24px 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-read-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 7px 24px;
    border-radius: 8px;
    font-size: 20px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
}

.news-read-btn:hover {
    background: #ffffff;
    color: #00224D;
    border-color: #ffffff;
}

.news-mobile-progress,
.built-sectors-mobile-progress,
.built-sectors-mobile-scroll-continue {
    display: none !important;
}

.contact-value,
.footer-menu a {
    text-decoration-thickness: 1px !important;
}

.contact-value.address {
    text-decoration-line: none;
}

.contact-value.address:hover {
    text-decoration-line: underline;
}

.contact-value.address::after {
    content: '';
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40' fill='none'%3E%3Cmask id='mask0_2576_2915' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='40' height='40'%3E%3Crect width='40' height='40' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_2576_2915)'%3E%3Cpath d='M10.3155 28.8116L9.16797 27.6641L25.9692 10.8307H10.4821V9.16406H28.8155V27.4974H27.1488V12.0103L10.3155 28.8116Z' fill='white'/%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0;
    transform: translate(-10px, 10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    margin-left: 12px;
    flex-shrink: 0;
}

.contact-value.address:hover::after {
    opacity: 1;
    transform: translate(0, 0);
}

/* Responsive */




/* --- Responsive Spacing Adjustments --- */


/* --- Services Section Refactor: Desktop/Tablet vs Mobile --- */
.mobile-services {
    display: none !important;
    /* Hidden on Desktop/Tablet by default */
}

.desktop-tablet-services {
    display: block;
    /* Visible on Desktop/Tablet */
}

.service-mobile-tablet-nav,
.go-to-tablet {
    display: none;
}

/* --- Hero Section Styles (Moved from index.php) --- */
.container {
    max-width: 100%;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.hero-section {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.hero-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
}

.hero-content {
    width: 100%;
    padding: 248px 0px 80px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.template-case-study-listing .hero-section .hero-content {
    padding: 0;
}

.template-case-study-listing .hero-section .container {
    justify-content: flex-end;
}

.hero-text-wrap {
    max-width: 100%;
    display: flex;
    justify-content: space-between;
    padding-inline: 40px;

}

.page-template-template-about .hero-content,
.page-template-template-parent-service .hero-content {
    padding: 248px 0px 80px;
}

.page-template .hero-text-wrap {
    background: transparent;
    padding: 80px 40px;
}

.hero-title {
    color: var(--Text-Color-White, #FFF);
    font-family: var(--Display-Family, Metropolis);
    font-size: var(--Display-D2, 64px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Display-Line-height-2, 72px);
    /* 112.5% */
    letter-spacing: var(--Display-Letter-spacing, 0);
    text-box: trim-both cap alphabetic;
    width: 50%;
}

.hero-subtitle {
    color: var(--Text-Color-White, #FFF);
    text-box: trim-both cap alphabetic;
    font-family: var(--Body-Family, Metropolis);
    font-size: var(--Body-B2, 24px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--Body-Line-height-2, 32px);
    letter-spacing: var(--Body-Letter-spacing, 0);
    width: 30%;
    display: flex;
    align-items: center;
}

.page-template-template-parent-service .hero-subtitle {
    width: 35%;
}

/* Styling for the Who We've Become Section */
.who-we-become-section {
    background-color: #00224D;
    color: #ffffff;
    padding: 120px 40px;
    /* Padding set as requested */
    font-family: 'Metropolis', sans-serif;
}

.about-container {
    max-width: 1760px;
    margin: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.about-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 120px;
    /* 120px gap between heading/subtext and stats columns as requested */
    gap: 40px;
}

.about-section-title {
    color: #ffffff;
    font-family: 'Metropolis', sans-serif;
    font-size: 80px;
    font-weight: 400;
    line-height: 88px;
    margin: 0;
    text-transform: capitalize;
    width: 50%;
    text-box: trim-both cap alphabetic;
}

.about-section-subtext {
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Metropolis', sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
    margin: 0;
    width: 40%;
    text-box: trim-both cap alphabetic;
}

.about-stats-grid {
    display: flex;
    justify-content: space-between;
    gap: 60px;
    width: 100%;
}

.about-stat-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 40px;
    text-align: center;
}

.about-stat-header {
    display: flex;
    padding-bottom: 24px;
    align-items: center;
    gap: 6px;
    align-self: stretch;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    justify-content: center;
}

.about-stat-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #ffffff;
    display: inline-block;
}

.about-stat-header-title {
    color: #ffffff;
    font-family: 'Metropolis', sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
    text-transform: capitalize;
    text-box: trim-both cap alphabetic;
}

.about-stat-box {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.about-stat-number {
    font-family: 'Metropolis', sans-serif;
    font-size: 80px;
    font-weight: 700;
    line-height: 88px;
    color: #ffffff;
    text-box: trim-both cap alphabetic;
}

.about-stat-desc {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.about-stat-subtitle {
    color: #ffffff;
    font-family: 'Metropolis', sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
    margin: 0;
    text-box: trim-both cap alphabetic;
}

.about-stat-desc p {
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Metropolis', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    margin: 0;
    text-box: trim-both cap alphabetic;
}

/* Not Just Another Contractor Styles */
.not-just-another-section {
    background-color: #ffffff;
    color: #1a1a1a;
    padding: 120px 0 120px 40px;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    overflow: hidden;
    font-family: 'Metropolis', sans-serif;
    position: relative;
    width: 100%;
}

#not-just-another-section .about-container {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
}

.contractor-layout {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 120px;
    width: 100%;
    max-width: none;
}

.contractor-mobile-layout {
    display: none;
}

.contractor-left {
    width: 713px;
    height: 724px;
    padding-left: 0px !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    padding-left: max(40px, calc((100vw - 1760px) / 2 + 40px));
    box-sizing: border-box;
}

.contractor-info-header {
    display: flex;
    flex-direction: column;
}

.contractor-info-details {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.contractor-title {
    color: #00224D;
    font-family: 'Metropolis', sans-serif;
    font-size: 80px;
    font-weight: 400;
    line-height: 88px;
    margin: 0 0 48px 0;
    text-transform: capitalize;
    text-box: trim-both cap alphabetic;
}

.contractor-subtext {
    color: #00224D;
    font-family: 'Metropolis', sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
    margin: 0;
    opacity: 0.5;
    text-box: trim-both cap alphabetic;
}

.contractor-detail-box {
    margin-top: 0;
    min-height: 146px;
    position: relative;
    width: 100%;
}

.contractor-detail-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
}

.contractor-detail-slide:first-child {
    position: relative;
    opacity: 1;
    visibility: visible;
}

.contractor-detail-title {
    color: #00224D;
    font-family: 'Metropolis', sans-serif;
    font-size: 32px;
    font-weight: 600;
    line-height: 40px;
    margin: 0 0 16px 0;
    text-box: trim-both cap alphabetic;
}

.contractor-detail-desc {
    color: #333333;
    font-family: 'Metropolis', sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 32px;
    margin: 0;
    text-box: trim-both cap alphabetic;
}

.contractor-progress-area {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 150px;
}

.contractor-progress-text {
    font-size: 14px;
    font-weight: 600;
    color: #646970;
    font-family: 'Metropolis', sans-serif;
}

.contractor-pagination-bars {
    display: flex;
    gap: 8px;
    flex-grow: 1;
    align-items: center;
}

.contractor-page-bar {
    height: 4px;
    background: #E1E1E1;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    padding: 0;
    transition: opacity 0.3s ease, background-color 0.3s ease;
    flex: 1;
    position: relative;
    overflow: hidden;
}

.contractor-page-bar.active {
    background: #E1E1E1;
    /* Kept same as track, filled by child */
}

.contractor-page-bar-fill {
    display: block;
    height: 100%;
    width: 0%;
    background: #00224D;
    border-radius: 2px;
}

.not-just-another-section .mobile-only-progress {
    display: none;
}

.contractor-right {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;
}

.contractor-slider-wrapper {
    overflow: hidden;
    width: 100%;
    height: 840px;
    position: relative;
}

.contractor-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 1px solid #ffffff;
    background-color: #001A3F;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 0;
}

.contractor-nav-btn:hover {
    background-color: #002B66;
    transform: translateY(-50%) scale(1.05);
}

.contractor-nav-btn.prev {
    left: 10px;
}

.contractor-nav-btn.next {
    right: 20px;
}

.contractor-nav-btn svg {
    display: block;
    width: 24px;
    height: 24px;
}

.contractor-slider-track {
    display: flex;
    width: 100%;
    gap: 48px;
    height: 100%;
    position: relative;
}

.contractor-slide {
    flex: 0 0 85%;
    flex-shrink: 0;
    height: 100%;
    border-radius: 24px;
    overflow: hidden;
    opacity: 0.2;
    transition: opacity 0.5s ease;
}

.contractor-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 24px;
}


/* Handover Section Styles */
.handover-section {
    background-color: #ffffff;
    overflow: hidden;
    font-family: 'Metropolis', sans-serif;
    position: relative;
    width: 100%;
    height: 100vh;
}

.handover-images-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.handover-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    z-index: 1;
}

.handover-img.active {
    opacity: 1;
    z-index: 2;
}

.handover-left {
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 100%;
    z-index: 2;
    background: #00224d;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    padding: 120px 60px;
    box-sizing: border-box;
}



.handover-left-inner {
    max-width: none;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
	gap:180px;
}

.handover-title {
    color: #ffffff;
    font-family: 'Metropolis', sans-serif;
    font-size: 56px;
    font-weight: 600;
    line-height: 64px;
    margin: 0 0 80px 0;
    text-box: trim-both cap alphabetic;
}

.handover-bottom-wrapper {
    display: flex;
    flex-direction: column;
}

.handover-tabs {
    display: flex;
    gap: 24px;
    margin-bottom: 64px;
    flex-wrap: wrap;
    width: 100%;
}

.handover-tab {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    font-family: 'Metropolis', sans-serif;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    padding: 0 0 16px 0;
    position: relative;
    transition: all 0.3s ease;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

.handover-tab:hover {
    color: #ffffff;
    border-bottom-color: rgba(255, 255, 255, 0.6);
}

.handover-tab.active {
    color: #ffffff;
    border-bottom-color: #ffffff;
}

.handover-tab:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 4px;
    color: #ffffff;
}

.handover-detail-title {
    color: #ffffff;
    font-family: 'Metropolis', sans-serif;
    font-size: 32px;
    font-weight: 600;
    line-height: 40px;
    margin: 0 0 24px 0;
    text-box: trim-both cap alphabetic;
}

.handover-detail-desc {
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Metropolis', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    margin: 0;
    text-box: trim-both cap alphabetic;
}

/* Responsive adjustments */








/* --- People Behind This Projects Section CSS --- */
.people-section {
    background-color: #ffffff;
    color: #1a1a1a;
    padding: 120px 40px;
    font-family: 'Metropolis', sans-serif;
    position: relative;
    overflow: hidden;
}

.people-container {
    max-width: 1760px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.people-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 80px;
}

.page-template-template-parent-service .people-header {
    margin-bottom: 72px;
}

.page-template-template-parent-service .people-section-title {
    margin-bottom: 32px;
}

.page-template-template-parent-service .people-filters-wrapper {
    margin-bottom: 40px;
}

.page-template-template-parent-service .people-filter-btn {
    font-weight: 500;
    color: #00224D;
}

.people-section-title {
    color: #00224D;
    font-family: 'Metropolis', sans-serif;
    font-size: 80px;
    font-weight: 400;
    line-height: 88px;
    margin: 0 0 24px 0;
    text-transform: capitalize;
    text-box: trim-both cap alphabetic;
}

.people-section-subtext {
    color: #646970;
    font-family: 'Metropolis', sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
    margin: 0;
    max-width: 900px;
    text-box: trim-both cap alphabetic;
}

.people-filters-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 80px;
    width: 100%;
}

.people-filters {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 0;
    scrollbar-width: none;
    /* Firefox */
}

.people-filters::-webkit-scrollbar {
    display: none;
    /* Safari and Chrome */
}

.people-filter-btn {
    background: #ffffff;
    border: 1px solid #E1E1E1;
    color: #646970;
    padding: 12px 28px;
    font-family: 'Metropolis', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.people-filter-btn:hover {
    background: #f8f9fa;
    border-color: #00224D;
    color: #00224D;
}

.people-filter-btn.active {
    background: #00224D;
    border-color: #00224D;
    color: #ffffff;
}

.people-slider-outer {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.people-slider-wrapper {
    overflow: hidden;
    width: calc(100% - 176px);
    max-width: 1518px;
    margin: 0 auto;
    /* Room for nav buttons */
}

.people-slider-track {
    display: flex;
    gap: 24px;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    width: 100%;
}

.people-card {
    width: 490px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
    transition: opacity 0.4s ease, transform 0.4s ease, width 0.4s ease;
}

.people-card.filtered-out {
    display: none;
}

.people-card-img-wrap {
    width: 490px;
    height: 626px;
    position: relative;
    padding-top: 0;
    border-radius: 12px;
    overflow: hidden;
    background-color: #f6f7f7;
}

.people-card-img-wrap img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.people-card:hover .people-card-img-wrap img {
    transform: scale(1.05);
}

.people-card-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.people-card-name {
    color: #00224D;
    font-family: 'Metropolis', sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
    margin: 0;
    text-box: trim-both cap alphabetic;
}

.people-card-role {
    color: #00224D;
    font-family: 'Metropolis', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    margin: 0;
    text-box: trim-both cap alphabetic;
}

.people-nav-btn {
    position: absolute;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #00224D;
    color: #ffffff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    top: 40%;
    transform: translateY(-50%);
}

.people-nav-btn.prev {
    left: 0;
}

.people-nav-btn.next {
    right: 0;
}

.people-nav-btn:hover {
    background-color: #001530;
    transform: translateY(-50%) scale(1.05);
}

.people-nav-btn:disabled {
    background-color: #E1E1E1;
    color: #a0a0a0;
    cursor: not-allowed;
    transform: translateY(-50%);
}





/* --- Parent Service Page Content Section (Service Explorer) --- */
.service-explorer-section {
    padding: 120px 40px;
    background-color: #00224D;
    color: #ffffff;
    font-family: 'Metropolis', sans-serif;
    overflow: hidden;
    position: relative;
}

@media (min-width: 1025px) {
    .service-explorer-section {
        height: 1151px;
        box-sizing: border-box;
    }

    .explorer-container {
        height: 100%;
    }

    .explorer-title {
        margin-bottom: 40px;
    }

    .explorer-pills-wrapper {
        margin-bottom: 30px;
    }

    .explorer-accordions-container {
        height: 100%;
        overflow-y: auto;
        align-self: stretch !important;
        padding-right: 0;
        scrollbar-width: none;
        /* Firefox */
        -ms-overflow-style: none;
        /* IE/Edge */
    }

    /* Hide scrollbar for explorer accordions (Chrome, Safari, Opera) */
    .explorer-accordions-container::-webkit-scrollbar {
        display: none;
    }
}

.explorer-container {
    max-width: 100%;
    margin: 0 auto;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    gap: 0 80px;
    /* Desktop gap between columns is 80px */
    align-items: start;
}

.explorer-left-col {
    grid-column: 1;
    grid-row: 1 / span 3;
    align-self: stretch;
    position: relative;
    padding-left: 64px;
    box-sizing: border-box;
}

.explorer-image-viewport {
    position: relative;
    width: 100%;
    max-width: 888px;
    height: 100%;
    max-height: 1031px;
}

.explorer-image-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 24px;
    overflow: hidden;
}

.explorer-active-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 24px;
}

.explorer-slide-indicator {
    position: absolute;
    left: -40px;
    /* Placed in section left padding */
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    z-index: 10;
}

.explorer-slide-text {
    font-size: 16px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    text-orientation: mixed;
}

.explorer-progress-track {
    width: 4px;
    height: 312px;
    background: rgba(255, 255, 255, 0.2);
    position: relative;
    border-radius: 24px;
}

.explorer-progress-fill {
    width: 100%;
    background: #ffffff;
    position: absolute;
    top: 0;
    left: 0;
    transition: height 0.4s ease, top 0.4s ease;
    border-radius: 2px;
}

.explorer-title {
    grid-column: 2;
    grid-row: 1;
    color: #ffffff;
    font-family: 'Metropolis', sans-serif;
    font-size: 80px;
    /* matches display D1 */
    font-style: normal;
    font-weight: 400;
    line-height: 88px;
    margin: 0 0 80px 0;
    text-transform: capitalize;
}

span.explorer-title-main {
    text-box-edge: cap alphabetic;
    text-box-trim: trim-both;
    display: block;
}

.explorer-title-suffix {
    display: none;
}

.explorer-accordions-container {
    grid-column: 2;
    grid-row: 3;
}

.explorer-pills-wrapper {
    grid-column: 2;
    grid-row: 2;
    position: relative;
    width: 100%;
    margin-bottom: 66px;
}

.explorer-pills-container {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 0;
    margin: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.explorer-pills-container::-webkit-scrollbar {
    display: none;
}

.explorer-pills-nav {
    position: absolute;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #ffffff;
    color: #00224D;
    border: none;
    display: none;
    /* JS will toggle flex/none */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
}

.explorer-pills-nav.prev {
    left: -10px;
}

.explorer-pills-nav.next {
    right: -10px;
}

.explorer-pills-nav:hover {
    background-color: #f0f2f6;
    transform: translateY(-50%) scale(1.05);
}

.explorer-pills-nav:active {
    transform: translateY(-50%) scale(0.95);
}

.explorer-pill {
    border-radius: 64px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 12px 24px;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    transition: all 0.3s ease;
    white-space: nowrap;
    flex-shrink: 0;
    font-family: 'Metropolis', sans-serif;
}

.explorer-pill:hover,
.explorer-pill.active {
    border-color: #ffffff;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}

.explorer-accordion-group {
    display: none;
    flex-direction: column;
    width: 100%;
}

.explorer-accordion-group.active {
    display: flex;
}

.explorer-accordion-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    width: 100%;
}

.explorer-accordion-item.active {
    border-bottom-color: #fff;
}

.explorer-accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 60px 0;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    text-align: left;
    transition: color 0.3s ease;
    outline: none;
}

.explorer-accordion-num-title {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.explorer-accordion-num {
    font-size: 32px;
    font-weight: 600;
    font-family: 'Metropolis', sans-serif;
    text-box-edge: cap alphabetic;
    text-box-trim: trim-both;
    display: none;
}

.explorer-accordion-title {
    font-size: 32px;
    font-weight: 600;
    font-family: 'Metropolis', sans-serif;
    line-height: 40px;
    text-box-edge: cap alphabetic;
    text-box-trim: trim-both;
}

.explorer-accordion-icon {
    color: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
}

.explorer-accordion-icon svg {
    width: 40px;
    height: 40px;
    opacity: 0.55;
}

.explorer-accordion-item.active .explorer-accordion-icon svg {
    opacity: 1;
}

.explorer-accordion-icon .icon-up {
    display: none;
}

.explorer-accordion-icon .icon-down {
    display: block;
}

.explorer-accordion-item.active .explorer-accordion-header {
    color: #ffffff;
    padding-bottom: 35px;
}

.explorer-accordion-item.active .explorer-accordion-icon .icon-up {
    display: block;
}

.explorer-accordion-item.active .explorer-accordion-icon .icon-down {
    display: none;
}

.explorer-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease;
    opacity: 0;
}

.explorer-accordion-item.active .explorer-accordion-content {
    opacity: 1;
}

.explorer-accordion-desc {
    font-size: 20px;
    line-height: 28px;
    color: rgba(255, 255, 255, 1);
    padding: 0 0 65px 50px;
    margin: 0;
    font-weight: 500;
    font-family: var(--Body-Family, Metropolis);
}

/* --- Delivering Real Results Section CSS --- */
.results-section {
    background-color: #ffffff;
    color: #1a1a1a;
    padding: 120px 40px;
    font-family: 'Metropolis', sans-serif;
    position: relative;
    overflow: hidden;
}

.results-container {
    max-width: 1760px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.results-section-title {
    color: #00224D;
    font-family: 'Metropolis', sans-serif;
    font-size: 80px;
    font-weight: 400;
    line-height: 88px;
    margin: 0 0 80px 0;
    text-transform: capitalize;
}

.results-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 80px;
    width: 100%;
}

.results-card {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.results-card-label-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
}

.results-card-dot {
    width: 8px;
    height: 8px;
    background-color: #646970;
    border-radius: 50%;
    display: inline-block;
}

.results-card-label {
    color: #646970;
    font-family: 'Metropolis', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
}

.results-card-divider {
    height: 1px;
    background-color: #E1E1E1;
    width: 100%;
    margin-bottom: 16px;
}

.results-card-stat {
    color: #00224D;
    font-family: 'Metropolis', sans-serif;
    font-size: 120px;
    font-weight: 600;
    line-height: 120px;
    margin-bottom: 32px;
    letter-spacing: 0px;
    text-box-edge: cap alphabetic;
    text-box-trim: trim-both;
}

.results-card-subtitle {
    color: #1D1D1D;
    font-family: 'Metropolis', sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    margin-bottom: 0;
}

.results-card-desc {
    color: rgba(29, 29, 29, 0.50);
    font-family: 'Metropolis', sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    margin: 0;
}

/* Tablet Responsive Spacing & Layout */


/* Mobile Responsive Spacing & Layout */


/* --- Case Studies Section CSS --- */
.case-studies-section {
    background-color: #00224D;
    color: #ffffff;
    padding: 120px 40px;
    font-family: 'Metropolis', sans-serif;
    position: relative;
    overflow: hidden;
}

.case-studies-container {
    /* max-width: 1760px; */
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.case-studies-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 80px;
    width: 100%;
}

.case-studies-title {
    color: #ffffff;
    font-family: 'Metropolis', sans-serif;
    font-size: 80px;
    font-weight: 400;
    line-height: 88px;
    margin: 0;
    text-transform: capitalize;
}

.case-studies-view-all {
    border: 1px solid #ffffff;
    border-radius: 12px;
    color: #ffffff;
    padding: 23px;
    font-family: 'Metropolis', sans-serif;
    font-size: 24px;
    font-weight: 600;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 24px;
    transition: all 0.3s ease;
    cursor: pointer;
    background: transparent;
    line-height: 22px;
    text-box-edge: cap alphabetic;
    text-box-trim: trim-both;
}

.case-studies-view-all:hover {
    background-color: #ffffff;
    color: #00224D;
    transform: translateY(-2px);
}

.case-studies-view-all:hover svg g path {
    fill: #00224D;
}

.case-studies-carousel-outer {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.case-studies-carousel-wrapper {
    overflow: hidden;
    width: 100%;
    margin: 0;
    cursor: grab;
    user-select: none;
}

.case-studies-carousel-wrapper.dragging {
    cursor: grabbing;
}

.case-studies-carousel-wrapper.dragging a {
    pointer-events: none;
}

.case-studies-track {
    display: flex;
    gap: 24px;
    width: max-content;
}

.case-study-card {
    position: relative;
    width: 392px;
    height: 560px;
    border-radius: 24px;
    overflow: hidden;
    flex-shrink: 0;
    text-decoration: none;
    color: #ffffff;
    transition: width 0.4s ease;
}

.case-study-card-contents {
    display: flex;
    flex-direction: row-reverse;
    height: auto;
    align-items: center;
    padding: 40px;
    gap: 40px;
    position: absolute;
    bottom: 0;
    left: 0;
}



.case-study-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.22, 1);
}

.case-study-card:hover .case-study-card-bg {
    transform: scale(1.05);
}

.case-study-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%);
    z-index: 1;
}

.case-study-card.active .case-study-card-overlay {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, var(--Fill-color-Dark-blue, rgba(0, 34, 77, 0.60)) 80.18%);
}

.case-study-card-num {
    position: absolute;
    top: 40px;
    left: 40px;
    font-size: 64px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
    z-index: 2;
    font-family: 'Metropolis', sans-serif;
    width: calc(100% - 80px);
    text-align: center;
}

.case-study-card.active .case-study-card-num {
    text-align: left;
}

.page-template-template-case-study-listing a.case-studies-view-all.desktop-only {
    display: none;
}

.case-study-card-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #ffffff;
    color: #00224D;
    /* position: absolute;
    bottom: 40px;
    right: 40px; */
    z-index: 2;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.4s ease, transform 0.4s ease;
}



.case-study-card-details {
    /* position: absolute;
    bottom: 40px;
    left: 40px;
    right: 120px; */
    z-index: 2;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex: 1;
}



.case-study-card-title {
    color: #ffffff;
    font-family: 'Metropolis', sans-serif;
    font-size: 36px;
    font-weight: 600;
    line-height: 40px;
    margin: 0;
    text-box-edge: cap alphabetic;
    text-box-trim: trim-both;
}

.case-study-card-desc {
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Metropolis', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    margin: 0;
    text-box-edge: cap alphabetic;
    text-box-trim: trim-both;
}

.case-studies-pagination {
    display: none !important;
}



/* Tablet Responsive Breakpoint */


/* Mobile Responsive Breakpoint */

/* --- Case Studies Listing Template CSS --- */
.case-study-listing-section {
    background-color: #ffffff;
    color: #00224D;
    padding: 120px 80px;
    font-family: 'Metropolis', sans-serif;
}

.case-study-grid-container {
    max-width: 1832px;
    /* (4 * 440) + (3 * 24) = 1832px */
    margin: 0 auto;
    width: 100%;
}

.more-case-studies-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 96px;
    gap: 32px;
    flex-wrap: wrap;
}

.more-case-studies-title {
    font-size: 80px;
    font-weight: 400;
    line-height: 88px;
    color: #00224D;
    margin: 0;
    letter-spacing: var(--Title-Letter-spacing, -2px);
    text-box-edge: cap alphabetic;
    text-box-trim: trim-both;
    font-family: 'Metropolis', sans-serif;
}

.case-study-tags-filter {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.tag-filter-btn {
    background-color: transparent;
    border: 1px solid #E1E1E1;
    color: rgba(29, 29, 29, 0.50);
    font-family: 'Metropolis', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 14px;
    padding: 16px 28px;
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.3s;
}

.tag-filter-btn:hover {
    border-color: #00224D;
    color: #fff;
    background-color: #00224D;
}

.tag-filter-btn.active {
    background-color: #00224D;
    border-color: #00224D;
    color: #ffffff;
}

.case-study-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.case-study-grid-card {
    position: relative;
    width: 100%;
    max-width: 414px;
    height: 581px;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    padding: 4px;
    background-color: #ffffff;
    border: 1px solid #e1e1e1;
    box-sizing: border-box;
    margin: 0 auto;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.22, 1);
}

.case-study-grid-card:hover {
    box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.18);
}

.case-study-grid-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 22px 18px 18px;
    box-sizing: border-box;
}

.case-study-grid-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.22, 1);
    z-index: 0;
}

.case-study-grid-card:hover .case-study-grid-card-bg {
    transform: scale(1.06);
}

.case-study-grid-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 34, 77, 0) 40%, rgba(0, 34, 77, 0.4) 100%);
    z-index: 1;
    display: none;
}

.card-category-pill {
    position: absolute;
    top: 22px;
    left: 18px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: rgba(29, 29, 29, 0.60);
    border-radius: 100px;
    padding: 8px 16px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    z-index: 2;
    font-family: 'Metropolis', sans-serif;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.card-category-pill svg {
    flex-shrink: 0;
}

.case-study-grid-card-content {
    position: relative;
    background: rgba(0, 34, 77, 0.40);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 8px;
    padding: 12px;
    z-index: 2;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.22, 1);
}

.case-study-grid-card:hover .case-study-grid-card-content {
    transform: translateY(-4px);
}

.case-study-grid-card-client {
    display: inline-flex;
    gap: 2px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.80);
    padding: 8px;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: var(--Body-Line-height-4, 24px);
    letter-spacing: var(--Body-Letter-spacing, 0);
    margin-bottom: 16px;
}

.case-study-grid-card-client .label {
    color: rgba(29, 29, 29, 0.50);
    text-box-edge: cap alphabetic;
    text-box-trim: trim-both;
}

.case-study-grid-card-client .value {
    font-weight: 500;
    color: #1D1D1D;
    text-box-edge: cap alphabetic;
    text-box-trim: trim-both;
}

.case-study-grid-title {
    font-size: 20px;
    font-weight: 600;
    line-height: 26px;
    margin: 0;
    color: #ffffff;
    letter-spacing: -0.2px;
    text-box-edge: cap alphabetic;
    text-box-trim: trim-both;
}

.case-study-grid-desc {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.14px;
    color: rgba(255, 255, 255, 0.50);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.case-study-grid-card-link {
    color: #ffffff;
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-thickness: 1px;
    align-self: flex-end;
    margin-top: 16px;
}

.no-case-studies-message {
    text-align: center;
    padding: 80px 0;
}

.no-case-studies-message h3 {
    font-size: 32px;
    font-weight: 500;
    margin-bottom: 12px;
    color: #00224D;
}

.no-case-studies-message p {
    font-size: 18px;
    color: #646970;
}






/* --- Case Study Listing Hero Styling --- */
.template-case-study-listing .hero-section {
    position: relative;
    padding: 160px 0 80px 0;
    min-height: 700px;
    display: flex;
    align-items: flex-end;
}

.hero-category-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 100px;
    padding: 10px 20px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.5px;
    margin-bottom: 40px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.hero-category-pill svg {
    flex-shrink: 0;
}

.case-study-hero-flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 60px;
    width: 100%;
}

.case-study-hero-details {
    flex: 1;
    max-width: 1100px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
}

.hero-client-badge {
    display: inline-flex;
    gap: 6px;
    background-color: #FFFFFFCC;
    border: 1px solid #ffffff;
    border-radius: 8px;
    padding: 8px;
    margin-bottom: 0;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.hero-client-badge span {
    font-size: 16px;
    font-weight: 500;
    font-family: 'Metropolis', sans-serif;
}

.hero-client-badge .label {
    color: rgba(29, 29, 29, 0.50);
    font-weight: 500;
    text-box-edge: cap alphabetic;
    text-box-trim: trim-both;
}

.hero-client-badge .value {
    color: #1D1D1D;
    font-weight: 500;
    text-box-edge: cap alphabetic;
    text-box-trim: trim-both;
}

.template-case-study-listing .hero-title {
    font-size: 64px;
    font-weight: 400;
    width: 100%;
    line-height: 72px;
    color: #ffffff;
    margin: 0;
    font-family: 'Metropolis', sans-serif;
}

.template-case-study-listing .hero-title .hero-client-badge {
    margin-bottom: 0;
}

.template-case-study-listing .hero-subtitle {
    font-size: 32px;
    width: 100%;
    line-height: 40px;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    font-weight: 400;
    font-family: 'Metropolis', sans-serif;
}

.hero-arrow-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #ffffff;
    color: #00224D;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.hero-arrow-btn:hover {
    transform: scale(1.08);
    background-color: #f8f9fa;
    color: #00224D;
}

/* Tablet adjustments */


/* Mobile adjustments */


/* ==========================================================================
   Contact Page Styles (Redesigned from Figma Specs)
   ========================================================================== */

/* Hero Specific Adjustments */
.page-template-template-contact .hero-content {
    padding: 248px 0px 80px;
}

/* Contact Section & Container */
.contact-section {
    padding: 120px 0;
    background-color: #ffffff;
    /* Pure white background */
    font-family: 'Metropolis', sans-serif;
    position: relative;
    box-sizing: border-box;
}

.contact-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 120px;
    align-items: start;
}

/* Titles */
.contact-section .section-title {
    font-family: 'Metropolis', sans-serif;
    font-size: 56px;
    font-weight: 400;
    line-height: 64px;
    color: #00224D;
    margin: 0;
    letter-spacing: -1px;
}

.contact-responsive-title {
    display: none;
}

.contact-desktop-title {
    display: block;
    margin-bottom: 48px;
}

/* Left Column Info Block */
.contact-info-col {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    min-height: 520px;
    /* Pushes the details to the bottom */
    box-sizing: border-box;
}

.contact-details-desktop {
    display: block;
}

.contact-details-responsive {
    display: none;
}

.contact-detail-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.contact-detail-item:last-child {
    margin-bottom: 0;
}

.detail-label {
    font-family: 'Metropolis', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #94A3B8;
    /* Light grey label */
    text-transform: capitalize;
    line-height: 1;
}

.detail-value {
    font-family: 'Metropolis', sans-serif;
    font-size: 24px;
    font-weight: 500;
    color: #00224D;
    /* Dark navy value */
    text-decoration: none;
    line-height: 1.2;
    transition: color 0.3s ease;
}

a.detail-value:hover {
    color: #003366;
}

/* Form Styles */
.contact-form-card {
    background: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    border: none;
}

.custom-contact-form {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.form-row {
    width: 100%;
}

.form-row.split-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;

}

.custom-contact-form .select-group {
    margin-top: 64px;
    margin-bottom: 64px;
}

.custom-contact-form .form-group {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    box-sizing: border-box;
}

/* Let textarea and checkbox expand naturally */
.custom-contact-form .textarea-group,
.custom-contact-form .consent-group {
    height: auto;
    justify-content: flex-start;
    gap: 40px;
}

.custom-contact-form label {
    color: var(--Icon-Color-Dark-blue, #00224D);
    font-family: var(--Body-Family, Metropolis);
    font-size: var(--Body-B2, 24px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--Body-Line-height-2, 32px);
    /* 133.333% */
    letter-spacing: var(--Body-Letter-spacing, 0);
    text-box: trim-both cap alphabetic;
}

/* Line inputs */
.custom-contact-form input[type="text"],
.custom-contact-form input[type="email"],
.custom-contact-form input[type="tel"] {
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--Icon-Color-Dark-blue-30, rgba(0, 34, 77, 0.30));
    background: transparent;
    padding: 10px 0;
    color: #00224D;
    font-family: var(--Body-Family, Metropolis);
    font-size: var(--Body-B1, 32px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Body-Line-height, 40px);
    /* 125% */
    letter-spacing: var(--Body-Letter-spacing, 0);
    display: flex;
    padding: 40px 40px 40px 0;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    flex: 1 0 0;
    transition: border-color 0.3s ease;
    box-sizing: border-box;
    text-box: trim-both cap alphabetic;
}

.custom-contact-form input[type="text"]::placeholder,
.custom-contact-form input[type="email"]::placeholder,
.custom-contact-form input[type="tel"]::placeholder {
    color: rgba(0, 34, 77, 0.60);
    font-family: var(--Display-Family, Metropolis);
    font-size: var(--Body-B2, 24px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Body-Line-height-2, 32px);
    /* 133.333% */
    letter-spacing: var(--Body-Letter-spacing, 0);
    text-box: trim-both cap alphabetic;
}

.custom-contact-form input[type="text"]:focus,
.custom-contact-form input[type="email"]:focus,
.custom-contact-form input[type="tel"]:focus {
    border: none;
    border-bottom: 1px solid var(--Text-Color-Black, #1D1D1D);
}

.custom-contact-form input[type="text"]:focus-visible,
.custom-contact-form input[type="email"]:focus-visible,
.custom-contact-form input[type="tel"]:focus-visible {
    outline: none;
}

/* Select Dropdown */
.custom-contact-form select {
    width: 100%;
    border: none;
    border-bottom: 1.5px solid rgba(0, 34, 77, 0.15);
    background: transparent;
    padding: 40px 0 40px;
    font-family: 'Metropolis', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #00224D;
    outline: none;
    border-radius: 0;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
}

.custom-contact-form .consent-group {
    margin-bottom: 64px;
    margin-top: 64px;
}

.custom-contact-form select:focus {
    border-color: #00224D;
}

.select-wrapper {
    position: relative;
    width: 100%;
}

.select-wrapper::after {
    content: "";
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 8px;
    background-image: url('data:image/svg+xml;utf8,<svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L6 6L11 1" stroke="%2300224D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
}

/* Textarea Message */
.custom-contact-form textarea {
    width: 100%;
    border: none;
    border-bottom: 1.5px solid rgba(0, 34, 77, 0.15);
    background: transparent;
    padding: 40px 0 40px;
    color: #00224D;
    font-family: var(--Body-Family, Metropolis);
    font-size: var(--Body-B1, 32px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Body-Line-height, 40px);
    letter-spacing: var(--Body-Letter-spacing, 0);
    transition: border-color 0.3s ease;
    box-sizing: border-box;
}

.custom-contact-form textarea::placeholder {
    color: rgba(0, 34, 77, 0.60);
    font-family: var(--Display-Family, Metropolis);
    font-size: var(--Body-B2, 24px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Body-Line-height-2, 32px);
    /* 133.333% */
    letter-spacing: var(--Body-Letter-spacing, 0);
}

.custom-contact-form textarea:focus {
    border-color: #00224D;
}

/* Custom Checkbox */
.consent-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    cursor: pointer;
    user-select: none;
    position: relative;
    align-items: center;
}

.consent-checkbox-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

select:not(:-internal-list-box) option:disabled {
    color: rgba(0, 34, 77, 0.60);
}

.custom-checkbox {
    width: 33px;
    height: 33px;
    border: 2px solid #00224D;
    background-color: transparent;
    display: inline-block;
    flex-shrink: 0;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    position: relative;
    box-sizing: border-box;
    margin-top: 2px;
}

.custom-checkbox::after {
    content: "";
    position: absolute;
    display: none;
    left: 7px;
    top: 2px;
    width: 6px;
    height: 12px;
    border: solid #00224D;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.consent-checkbox-label input[type="checkbox"]:checked~.custom-checkbox::after {
    display: block;
}

.consent-text {
    color: var(--Icon-Color-Dark-blue, #00224D);
    text-box: trim-both cap alphabetic;
    font-family: var(--Body-Family, Metropolis);
    font-size: var(--Body-B3, 20px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Body-Line-height-2, 32px);
    /* 160% */
    letter-spacing: var(--Body-Letter-spacing, 0);
}

.consent-text a {
    color: var(--Icon-Color-Dark-blue, #00224D);
    text-box: trim-both cap alphabetic;
    font-family: var(--Body-Family, Metropolis);
    font-size: var(--Body-B3, 20px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Body-Line-height-2, 32px);
    letter-spacing: var(--Body-Letter-spacing, 0);
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: 7%;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

.consent-text a:hover {
    color: #003366;
}

/* Submit Button & Animations */
.custom-contact-form .submit-btn {
    width: 100%;
    background-color: #00224D;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 20px 30px;
    font-family: 'Metropolis', sans-serif;
    font-size: 18px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    box-shadow: none;
}

.custom-contact-form .submit-btn:hover {
    background-color: #001C3D;
    transform: translateY(-2px);
}

.custom-contact-form .submit-btn:active {
    transform: translateY(0);
}

.submit-btn .btn-arrow {
    display: flex;
    align-items: center;
}

.submit-btn .btn-arrow svg {
    transition: transform 0.3s ease;
}

.custom-contact-form .submit-btn:hover .btn-arrow svg {
    transform: translate(3px, -3px);
}

.submit-btn.loading {
    background-color: #888888;
    pointer-events: none;
}

.submit-btn.loading .btn-text::after {
    content: '...';
}

/* AJAX Response Message */
.form-response {
    padding: 14px 18px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    margin-top: 20px;
}

.form-response.success {
    background: rgba(92, 184, 92, 0.1);
    color: #3e8f3e;
    border: 1px solid rgba(92, 184, 92, 0.25);
}

.form-response.error {
    background: rgba(217, 83, 79, 0.1);
    color: #c9302c;
    border: 1px solid rgba(217, 83, 79, 0.25);
}

/* Google Map Section */
.contact-map-section {
    width: 100%;
    border-top: 1px solid rgba(0, 34, 77, 0.05);
    background-color: #ffffff;
}

.map-wrapper {
    width: 100%;
    height: 550px;
    overflow: hidden;
    background: #eaeaea;
}

.map-wrapper iframe {
    filter: grayscale(10%) contrast(1.05);
    transition: filter 0.4s ease;
}

.map-wrapper:hover iframe {
    filter: none;
}





/* ==========================================================================
   Contact Counter Section Styles (Figma Redesign)
   ========================================================================== */

.contact-counter-section {
    padding: 80px 0 120px 0;
    /* Top padding: 80px, Bottom padding: 120px */
    background-color: #ffffff;
    font-family: 'Metropolis', sans-serif;
    position: relative;
    box-sizing: border-box;
}

.contact-counter-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.counter-image-wrap {
    width: 100%;
    border-radius: 24px;
    overflow: hidden;
    margin-bottom: 80px;
    /* Image to Counter grid spacer: 80px */
    box-sizing: border-box;
}

.counter-main-image {
    width: 100%;
    height: 800px;
    /* High-res responsive height */
    object-fit: cover;
    object-position: center;
    border-radius: 24px;
    display: block;
}

.counters-grid-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
}

.counter-col-item {
    padding: 0 48px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 32px;

}

.counter-col-item:first-child {
    padding-left: 0;
}

.counter-col-item:last-child {
    padding-right: 0;
}

.counter-col-item:not(:last-child) {
    border-right: 1.5px solid rgba(0, 34, 77, 0.15);
    /* Thin vertical divider */
}

.counter-col-title {
    color: var(--Text-Color-Dark-blue, #00224D);
    text-box: trim-both cap alphabetic;
    font-family: var(--Display-Family, Metropolis);
    font-size: var(--Display-D2, 64px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Display-Line-height-2, 72px);
    /* 112.5% */
    letter-spacing: var(--Display-Letter-spacing, 0);
}

.counter-col-desc {
    color: var(--Text-Color-Black-60, rgba(29, 29, 29, 0.60));
    text-box: trim-both cap alphabetic;
    font-family: var(--Body-Family, Metropolis);
    font-size: var(--Body-B4, 16px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Body-Line-height-4, 24px);
    /* 150% */
    letter-spacing: var(--Body-Letter-spacing, 0);
}



/* ==========================================================================
   Case Study Single Post Detail Page Styles
   ========================================================================== */
.case-study-detail-page {
    background-color: #ffffff;
    color: #333333;
}

.case-study-hero-section {
    padding: 120px 40px;
    width: 100%;
    max-width: 100%;
    margin: 0;
    box-sizing: border-box;
}

.case-study-hero-container {
    width: 100%;
    max-width: 100%;
    margin: 0;
}

.case-study-hero-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    margin-bottom: 0;
}

.case-study-hero-title {
    font-family: 'Metropolis', sans-serif;
    font-size: 48px;
    line-height: 56px;
    font-weight: 400;
    color: #00224D;
    margin: 0;
    flex-shrink: 0;
}

.case-study-hero-header-line {
    flex-grow: 1;
    height: 2px;
    background-color: #1D1D1D;
    opacity: 1;
    align-self: center;
    margin-top: 10px;
}

.case-study-hero-client {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #00224D;
    font-family: 'Metropolis', sans-serif;
    font-size: 24px;
    font-weight: 400;
    flex-shrink: 0;
    margin-bottom: 0;
}

.case-study-hero-client .client-label {
    opacity: 0.7;
    font-weight: 400;
}

.case-study-hero-client .client-value {
    font-weight: 600;
}

.case-study-hero-banner-wrap {
    width: 100%;
    height: 657px;
    border-radius: 0;
    overflow: hidden;
    margin: 40px 0;
}

.case-study-hero-banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.case-study-hero-counters {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 80px;
    padding-bottom: 40px;
}

.case-study-counter-item {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.case-study-counter-label-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--Stroke-Color-Soft-grey, #E1E1E1);
}

.case-study-counter-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #1D1D1D;
    display: inline-block;
    flex-shrink: 0;
}

.case-study-counter-title {
    color: var(--Text-Color-Black, #1D1D1D);
    font-family: var(--Caption-Family, Metropolis);
    font-size: var(--Caption-C2, 20px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Caption-Line-height-2, 32px);
    /* 133.333% */
    letter-spacing: var(--Caption-Letter-spacing, 0);
    text-transform: capitalize;
    text-box: trim-both cap alphabetic;
}

.case-study-counter-line {
    height: 1px;
    background-color: #E1E1E1;
    width: 100%;
    margin: 0;
}

.case-study-counter-val {
    color: var(--Text-Color-Dark-blue, #00224D);
    text-box: trim-both cap alphabetic;
    font-family: var(--Numerical-Family, Metropolis);
    font-size: var(--Numerical-N1, 80px);
    font-style: normal;
    font-weight: 600;
    line-height: var(--Numerical-Line-height, 120px);
    /* 100% */
    letter-spacing: var(--Numerical-Letter-spacing, 0px);
    margin-top: 40px;
}

.case-study-content-section {
    padding: 20px 40px 120px 40px;
    max-width: 1440px;
    margin: 0 auto;
    box-sizing: border-box;
}

.case-study-content-container {
    max-width: 1360px;
    margin: 0 auto;
}

.case-study-editor-content {
    max-width: 800px;
    font-family: 'Metropolis', sans-serif;
    font-size: 18px;
    line-height: 30px;
    color: #4A4A4A;
}

.case-study-editor-content p {
    margin-top: 0;
    margin-bottom: 24px;
}

.case-study-editor-content h2 {
    font-size: 32px;
    line-height: 40px;
    font-weight: 700;
    color: #00224D;
    margin-top: 48px;
    margin-bottom: 20px;
}

.case-study-editor-content h3 {
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
    color: #00224D;
    margin-top: 36px;
    margin-bottom: 16px;
}

/* Tablet Layout adjustments */


/* Mobile Layout adjustments */


/* Header style overrides for light-background single case study page */
.single-case_study .site-header .main-navigation>ul>li>a,
.single-case-study .site-header .main-navigation>ul>li>a {
    color: #00224D !important;
}

.single-case_study .site-header .main-navigation>ul>li:hover>a,
.single-case-study .site-header .main-navigation>ul>li:hover>a {
    color: #00224D !important;
    opacity: 0.8;
}

.single-case_study .site-header .main-navigation>ul>li.menu-item-has-children>a::after,
.single-case-study .site-header .main-navigation>ul>li.menu-item-has-children>a::after {
    background-image: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 9L12 15L18 9" stroke="%2300224D" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>') !important;
}

.single-case_study .site-header .mobile-menu-toggle,
.single-case-study .site-header .mobile-menu-toggle {
    color: #00224D !important;
}

.single-case_study .site-header .mobile-menu-toggle .hamburger-icon path,
.single-case-study .site-header .mobile-menu-toggle .hamburger-icon path {
    stroke: #00224D !important;
}

.single-case_study .site-header .light-logo,
.single-case-study .site-header .light-logo {
    display: none !important;
}

.single-case_study .site-header .dark-logo,
.single-case-study .site-header .dark-logo {
    display: block !important;
}

.single-case_study .site-header .dark-logo img,
.single-case-study .site-header .dark-logo img {
    max-height: 50px;
    width: auto;
    display: block;
}

.single-case_study .site-header .main-navigation .sub-menu,
.single-case-study .site-header .main-navigation .sub-menu {
    background: rgba(0, 34, 77, 0.95) !important;
    border: 1px solid rgba(0, 34, 77, 0.1) !important;
}

/* ==========================================================================
   Awards Section ("What We Took On") Styles
   ========================================================================== */
.case-study-awards-section {
    background-color: #00224D;
    color: #ffffff;
    width: 100%;
    box-sizing: border-box;
    padding: 120px 40px;
}

.case-study-awards-container {
    width: 100%;
    margin: 0 auto;
}

.case-study-awards-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 80px;
    margin-bottom: 80px;
    width: 100%;
}

.case-study-awards-main-title {
    font-family: 'Metropolis', sans-serif;
    font-size: 56px;
    font-weight: 400;
    line-height: 64px;
    color: #ffffff;
    margin: 0;
    width: 30%;
    word-wrap: break-word;
}

.case-study-awards-subtitle {
    color: var(--Text-Color-White-50, rgba(255, 255, 255, 0.50));
    font-family: var(--Display-Family, Metropolis);
    font-size: var(--Body-B2, 24px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Body-Line-height-2, 32px);
    letter-spacing: var(--Body-Letter-spacing, 0);
    width: 50%;
}

.case-study-awards-carousel-outer {
    position: relative;
    width: 100%;
}

.case-study-awards-carousel-wrapper {
    overflow-x: auto;
    width: 100%;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.case-study-awards-carousel-wrapper::-webkit-scrollbar {
    display: none;
}

.case-study-awards-track {
    display: flex;
    gap: 24px;
    width: max-content;
}

.case-study-award-item {
    display: flex;
    width: 380px;
    height: 364px;
    padding: 32px;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.04);
}

.case-study-award-num {
    color: rgba(255, 255, 255, 0.15);
    font-family: var(--Title-Family, Metropolis);
    font-size: 48px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}

.case-study-award-content-bottom {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.case-study-award-title {
    color: var(--Text-Color-White, #FFF);
    font-family: var(--Heading-Family, Metropolis);
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.2;
    /* 133.333% */
    letter-spacing: 0px;
}

.case-study-award-desc {
    font-family: 'Metropolis', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 22px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.awards-controls-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 80px;
}

.awards-progress-area {
    display: flex;
    align-items: center;
}

.awards-progress-track {
    width: 405px;
    height: 8px;
    border-radius: 24px;
    background: var(--Stroke-Color-White, #FFF);
    position: relative;
    overflow: hidden;
}

.awards-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 10%;
    background: rgba(0, 34, 77, 0.50);
    border-radius: 2px;
    transition: width 0.1s ease;
}

.awards-nav-buttons {
    display: flex;
    gap: 16px;
}

.awards-nav-btn {
    width: 64px;
    height: 64px;
    padding: 12px;
    border-radius: 32px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background-color: transparent;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.awards-nav-btn:hover:not(:disabled) {
    border: 1px solid #FFF;
    background: rgba(255, 255, 255, 0.30);
    box-shadow: 0 -6px 4px 0 rgba(255, 255, 255, 0.09) inset, 0 6px 6px 0 rgba(255, 255, 255, 0.20) inset;
}

.awards-nav-btn:disabled {
    opacity: 0.25;
    cursor: not-allowed;
    border: 1px solid #FFF;
    box-shadow: 0 -6px 4px 0 rgba(255, 255, 255, 0.09) inset, 0 6px 6px 0 rgba(255, 255, 255, 0.20) inset;
}

/* Tablet adjustments */


/* Mobile adjustments */





/* ==========================================================================
   Delivery Steps ("One Team, Full Delivery") Styles
   ========================================================================== */
.case-study-delivery-section {
    background-color: #ffffff;
    color: #00224D;
    width: 100%;
    box-sizing: border-box;
    padding: 120px 40px;
}

.case-study-delivery-container {
    width: 100%;
    margin: 0 auto;
}

.case-study-delivery-grid {
    display: grid;
    grid-template-columns: minmax(0, 40%) minmax(0, 60%);
    gap: 120px;
    align-items: stretch;
}

.case-study-delivery-left {
    display: flex;
    flex-direction: column;
}

.case-study-delivery-header {
    margin-bottom: 93px;
    /* 93px gap after header */
}

.case-study-delivery-main-title {
    font-family: 'Metropolis', sans-serif;
    font-size: 80px;
    font-weight: 400;
    line-height: 88px;
    color: #00224D;
    margin: 0 0 48px 0;
    text-box: trim-both cap alphabetic;
}

.case-study-delivery-subtitle {
    font-family: 'Metropolis', sans-serif;
    font-size: 16px;
    line-height: 26px;
    font-weight: 400;
    color: #646970;
    margin: 0;
}

.case-study-delivery-accordion-list {
    display: flex;
    flex-direction: column;
}

.case-study-delivery-acc-item {
    padding: 36px 0;
    cursor: pointer;
    transition: border-color 0.3s ease;
}

.case-study-delivery-acc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.case-study-delivery-acc-title {
    color: var(--Text-Color-Dark-blue, #00224D);
    text-box: trim-both cap alphabetic;
    font-family: var(--Heading-Family, Metropolis);
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: 40px;
    /* 125% */
    letter-spacing: var(--Heading-Letter-spacing, 0);
    transition: color 0.3s ease, font-weight 0.3s ease;
}

.case-study-delivery-acc-arrow {
    color: #94A3B8;
    /* Lighter slate color for inactive arrow */
    transition: transform 0.3s ease, color 0.3s ease;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.case-study-delivery-acc-item.active {
    border-bottom-color: #00224D;
}

.case-study-delivery-acc-item.active .case-study-delivery-acc-title {
    color: #00224D;
    font-weight: 700;
    /* Bold active state */
}

.case-study-delivery-acc-item.active .case-study-delivery-acc-arrow {
    color: #00224D;
}

.case-study-delivery-acc-content {
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), padding-top 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    padding-top: 0;
}

.case-study-delivery-acc-item.active .case-study-delivery-acc-content {
    opacity: 1;
}

.case-study-delivery-acc-desc {
    color: var(--Text-Color-Dark-blue, #00224D);
    text-box: trim-both cap alphabetic;
    font-family: var(--Body-Family, Metropolis);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    /* 140% */
    letter-spacing: var(--Body-Letter-spacing, 0);
}

.case-study-delivery-acc-mobile-image {
    display: none;
    /* Desktop hidden */
}

/* Indicators */
.case-study-delivery-indicator-wrap {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 48px;
}

.case-study-delivery-indicator-text {
    font-family: 'Metropolis', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #0F172A;
    min-width: 32px;
}

.case-study-delivery-progress-bar {
    display: flex;
    align-items: center;
    gap: 8px;
}

.case-study-delivery-progress-segment {
    width: 24px;
    height: 2px;
    background-color: #E1E1E1;
    cursor: pointer;
    transition: background-color 0.6s cubic-bezier(0.16, 1, 0.3, 1), width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.case-study-delivery-progress-segment.active {
    background-color: #00224D;
    width: 36px;
    /* Active segment is slightly wider, matching figma style */
}

/* Right column desktop carousel wrapper */
.case-study-delivery-right {
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* Clips horizontal track overflow outside container */
}

.case-study-delivery-slides-wrap {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: visible;
    /* Allows carousel peek on the right */
}

.case-study-delivery-slides-track {
    display: flex;
    gap: 24px;
    width: 100%;
    height: 100%;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.case-study-delivery-slide {
    flex: 0 0 98%;
    /* 1.2 slides visible view */
    height: 840px;
    border-radius: 24px;
    overflow: hidden;
    opacity: 0.6;
    transform: scale(0.95);
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}

.case-study-delivery-slide.active {
    opacity: 1;
    transform: scale(1);
    z-index: 2;
}

.case-study-delivery-slide-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 24px;
}

/* Tablet adjustments */


/* Mobile adjustments */


/* ==========================================================================
   Challenges We Worked Styles
   ========================================================================== */
.case-study-challenges-section {
    background-color: #001A3F;
    /* Rich dark navy background */
    color: #ffffff;
    width: 100%;
    box-sizing: border-box;
    padding: 120px 40px;
}

.case-study-challenges-container {
    width: 100%;
    margin: 0 auto;
}

.case-study-challenges-grid {
    display: grid;
    grid-template-areas:
        "leftcol header"
        "leftcol accordion";
    grid-template-columns: minmax(0, 50%) minmax(0, 45%);
    gap: 80px;
    align-items: stretch;
}

.case-study-challenges-left {
    grid-area: leftcol;
    display: flex;
    gap: 40px;
    align-items: stretch;
}

.case-study-challenges-header {
    grid-area: header;
}

.case-study-challenges-accordion-list {
    grid-area: accordion;
    display: flex;
    flex-direction: column;
}

.case-study-challenges-progress-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    justify-content: center;
    flex-shrink: 0;
}

.challenges-indicator-text {
    color: var(--Text-Color-White, #FFF);
    font-family: var(--Body-Family, Metropolis);
    font-size: var(--Body-B4, 16px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--Body-Line-height-4, 24px);
    /* 150% */
    letter-spacing: var(--Body-Letter-spacing, 0);
}

.challenges-indicator-text .challenges-current {
    color: #ffffff;
}

.case-study-challenges-progress-track {
    width: 4px;
    height: 312px;
    background-color: #fff;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
}

.case-study-challenges-progress-fill {
    width: 100%;
    height: 0%;
    background-color: rgba(0, 34, 77, 0.50);
    position: absolute;
    top: 0;
    left: 0;
    transition: height 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.case-study-challenges-slides-wrap {
    flex: 1;
    position: relative;
    height: 100%;
    min-height: 520px;
    overflow: visible;
}

.case-study-challenges-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 24px;
    overflow: hidden;
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 0;
    z-index: 1;
}

.case-study-challenges-slide.active {
    opacity: 1;
    z-index: 2;
}

.case-study-challenges-slide-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 24px;
}

.case-study-challenges-right {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 110px;
}


.case-study-challenges-main-title {
    color: var(--Text-Color-White, #FFF);
    font-family: var(--Title-Family, Metropolis);
    font-size: var(--Title-T1, 80px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Title-Line-height, 88px);
    letter-spacing: var(--Title-Letter-spacing, -2px);
    text-transform: capitalize;
    margin-bottom: 48px;
    text-box: trim-both cap alphabetic;
}

.case-study-challenges-subtitle {
    color: var(--Text-Color-White, #FFF);
    font-family: var(--Display-Family, Metropolis);
    font-size: var(--Body-B2, 24px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Body-Line-height-2, 32px);
    text-box: trim-both cap alphabetic;
    letter-spacing: var(--Body-Letter-spacing, 0);
    opacity: 0.5
}

.case-study-challenges-accordion-list {
    display: flex;
    flex-direction: column;
}

.case-study-challenges-acc-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 60px 0;
    cursor: pointer;
    transition: border-color 0.3s ease;
}

.case-study-challenges-acc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.case-study-challenges-acc-title {
    font-family: 'Metropolis', sans-serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: 40px;
    /* 125% */
    letter-spacing: var(--Heading-Letter-spacing, 0);
    color: rgba(255, 255, 255, 0.4);
    /* Muted white/grey for inactive items */
    transition: color 0.3s ease, font-weight 0.3s ease;
}

.case-study-challenges-acc-arrow {
    color: rgba(255, 255, 255, 0.4);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.case-study-challenges-acc-arrow svg {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.case-study-challenges-acc-item.active {
    border-bottom-color: #ffffff;
}

.case-study-challenges-acc-item.active .case-study-challenges-acc-title {
    color: #ffffff;
    font-weight: 700;
}

.case-study-challenges-acc-item.active .case-study-challenges-acc-arrow {
    color: #ffffff;
}

.case-study-challenges-acc-item.active .case-study-challenges-acc-arrow svg {
    transform: rotate(180deg);
}

.case-study-challenges-acc-content {
    display: none;
    font-family: var(--Body-Family, Metropolis);
    font-size: var(--Body-B3, 20px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Body-Line-height-3, 28px);
    letter-spacing: var(--Body-Letter-spacing, 0);
}

.case-study-challenges-acc-item.active .case-study-challenges-acc-content {
    display: block;
    padding-top: 40px !important;
}

.case-study-challenges-acc-sub {
    font-family: 'Metropolis', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 8px 0;
}

.case-study-challenges-acc-desc {
    font-family: 'Metropolis', sans-serif;
    font-size: 20px;
    line-height: 24px;
    font-weight: 400;
    color: #94A3B8;
    margin: 0;
}

.case-study-challenges-acc-mobile-image {
    display: none;
}

/* Tablet styles */


/* Mobile styles */


/* ==========================================================================
   Case Study Phase Slider Styles
   ========================================================================== */
.case-study-slider-section {
    position: relative;
    width: 100%;
    height: 1080px;
    background-color: #000000;
    overflow: hidden;
}

.case-study-slider-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.case-study-slider-slides-wrap {
    position: relative;
    width: 100%;
    height: 100%;
}

.case-study-slide-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1;
}

.case-study-slide-item.active {
    opacity: 1;
    visibility: visible;
    z-index: 3;
}

.case-study-slide-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 6s ease;
}

.case-study-slide-item.active .case-study-slide-bg {
    transform: scale(1.05);
}

.case-study-slide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 26, 63, 0.4) 0%, rgba(0, 26, 63, 0.75) 100%);
    z-index: 2;
}

.case-study-slide-inner {
    position: relative;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 40px 40px 88px 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 4;
}

.case-study-slide-top-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-self: flex-start;
}

.case-study-slide-phase {
    font-family: 'Metropolis', sans-serif;
    font-size: 20px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 2px;
    display: none;
}

.case-study-slide-month {
    font-family: 'Metropolis', sans-serif;
    font-size: 48px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
}

.case-study-slide-bottom-details {
    max-width: 950px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-self: flex-start;
}

.case-study-slide-title {
    color: var(--Fill-color-White, #FFF);
    text-shadow: 0 4px 4px rgba(0, 0, 0, 0.30);
    font-family: var(--Heading-Family, Metropolis);
    font-size: var(--Heading-H1, 40px);
    font-style: normal;
    font-weight: 600;
    line-height: var(--Heading-Line-height, 48px);
    /* 120% */
    letter-spacing: var(--Heading-Letter-spacing, 0);
    text-box: trim-both cap alphabetic;
}

.case-study-slide-description {
    color: var(--Text-Color-White, #FFF);
    text-shadow: 0 4px 4px rgba(0, 0, 0, 0.30);
    font-family: var(--Body-Family, Metropolis);
    font-size: var(--Body-B3, 20px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Body-Line-height-2, 32px);
    /* 160% */
    letter-spacing: var(--Body-Letter-spacing, 0);
    text-box: trim-both cap alphabetic;
}

/* Slider Controls */
.case-study-slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background-color: #ffffff;
    color: #001A3F;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.case-study-slider-btn:hover {
    background-color: #001A3F;
    color: #ffffff;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
}

.case-study-slider-btn svg {
    display: block;
}

.prev-btn {
    left: 40px;
}

.next-btn {
    right: 40px;
}

.case-study-slider-pagination {
    position: absolute;
    bottom: 310px;
    /* Placed directly above bottom details title */
    left: 45px;
    display: flex;
    gap: 12px;
    z-index: 10;
}

.case-study-slider-dash {
    width: 506px;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.3);
    border: none;
    cursor: pointer;
    padding: 0;
    position: relative;
    overflow: hidden;
}

.case-study-slider-dash-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background-color: #ffffff;
}

/* Tablet Styles */


/* Mobile Styles */


/* ==========================================================================
   Related Case Studies Carousel Styles
   ========================================================================== */
.case-study-related-section {
    background-color: #ffffff;
    color: #001A3F;
    width: 100%;
    box-sizing: border-box;
    padding: 120px 0px 120px 40px;
    border-top: 1px solid rgba(0, 26, 63, 0.05);
}

.case-study-related-container {
    max-width: 100%;
    margin: 0 auto;
    position: relative;
}

.case-study-related-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60px;
    padding-right: 40px;
}

.case-study-related-title {
    font-family: 'Metropolis', sans-serif;
    font-size: 40px;
    font-weight: 700;
    color: #001A3F;
    margin: 0;
}

.case-study-related-nav {
    display: flex;
    gap: 16px;
}

.case-study-related-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(0, 26, 63, 0.15);
    background: transparent;
    color: #001A3F;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.case-study-related-btn:hover {
    background-color: #001A3F;
    color: #ffffff;
    border-color: #001A3F;
}

.case-study-related-btn svg {
    display: block;
}

.case-study-related-carousel-wrap {
    width: 100%;
    overflow: hidden;
    padding: 10px 0;
}

.case-study-related-carousel-track {
    display: flex;
    gap: 24px;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.case-study-related-card {
    position: relative;
    height: 428px;
    border-radius: 12px;
    overflow: hidden;
    flex: 0 0 280px;
    /* Inactive card base width */
    transition: flex 0.8s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    cursor: pointer;
}

.case-study-related-card.active {
    flex: 0 0 790px;
    /* Active card stretches dynamically */
    box-shadow: 0 20px 40px rgba(0, 26, 63, 0.15);
}

.case-study-related-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.case-study-related-card:hover .case-study-related-card-bg {
    transform: scale(1.03);
}

.case-study-related-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 26, 63, 0) 40%, rgba(0, 26, 63, 0.85) 100%);
    z-index: 2;
}

.case-study-related-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 40px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.case-study-related-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.case-study-related-card-title {
    font-family: 'Metropolis', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    max-width: 80%;
    transition: font-size 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.case-study-related-card.active .case-study-related-card-title {
    font-size: 24px;
}

.case-study-related-card-line {
    height: 1px;
    background-color: rgba(255, 255, 255, 0.2);
    flex: 1;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.case-study-related-card.active .case-study-related-card-line {
    opacity: 1;
}

.case-study-related-card-number {
    font-family: 'Metropolis', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #ffffff;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.case-study-related-card.active .case-study-related-card-number {
    opacity: 1;
}

.case-study-related-card-action {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
}

.case-study-related-card.active .case-study-related-card-action {
    max-height: 80px;
    opacity: 1;
}

.case-study-related-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1.5px solid #ffffff;
    border-radius: 30px;
    padding: 12px 24px;
    color: #ffffff;
    text-decoration: none;
    font-family: 'Metropolis', sans-serif;
    font-size: 15px;
    font-weight: 600;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.case-study-related-link:hover {
    background-color: #ffffff;
    color: #001A3F;
    transform: translateY(-2px);
}

.case-study-related-link svg {
    display: block;
    transition: transform 0.3s ease;
}

.case-study-related-link:hover svg {
    transform: translate(2px, -2px);
}

.case-study-related-progress-wrap {
    display: none;
}


/* Mobile Styles */


/* --- Blog Featured Section CSS --- */
.blog-featured-section {
    background-color: #ffffff;
    color: #00224D;
    padding: 120px 160px;
    font-family: 'Metropolis', sans-serif;
    position: relative;
    overflow: hidden;
}

.blog-featured-container {
    max-width: 1760px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.blog-featured-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 80px;
    width: 100%;
}

.blog-featured-title {
    color: #00224D;
    font-family: 'Metropolis', sans-serif;
    font-size: 80px;
    font-weight: 400;
    line-height: 88px;
    margin: 0;
    text-transform: capitalize;
}

.blog-featured-view-all {
    border: 1px solid #ffffff;
    border-radius: 12px;
    color: #ffffff;
    padding: 24px;
    font-family: 'Metropolis', sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 24px;
    transition: all 0.3s ease;
    cursor: pointer;
    background: transparent;
    line-height: 1;
}

.blog-featured-view-all:hover {
    background-color: #ffffff;
    color: #0c1524;
    transform: translateY(-2px);
}

.blog-featured-carousel-outer {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.blog-featured-carousel-wrapper {
    overflow: hidden;
    width: 100%;
    margin: 0;
    cursor: grab;
    user-select: none;
}

.blog-featured-carousel-wrapper.dragging {
    cursor: grabbing;
}

.blog-featured-carousel-wrapper.dragging a {
    pointer-events: none;
}

.blog-featured-track {
    display: flex;
    gap: 24px;
    width: max-content;
}

.blog-featured-card {
    position: relative;
    width: 272px;
    height: 550px;
    border-radius: 32px;
    overflow: hidden;
    flex-shrink: 0;
    text-decoration: none;
    color: #ffffff;
    transition: width 0.4s ease;
}

.blog-featured-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.22, 1);
}

.blog-featured-card:hover .blog-featured-card-bg {
    transform: scale(1.05);
}

.blog-featured-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 34, 77, 0.00) 0%, rgba(0, 34, 77, 0.90) 80.18%);
    z-index: 1;
}

.blog-featured-card-num {
    position: absolute;
    top: 40px;
    left: 40px;
    font-size: 64px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.35);
    line-height: 1;
    z-index: 2;
    font-family: 'Metropolis', sans-serif;
    transition: color 0.4s ease;
}

.blog-featured-card.active .blog-featured-card-num {
    color: #3a86ff;
}

.blog-featured-card-btn {
    display: none;
    width: 221px;
    padding: 17px 20px;
    justify-content: space-between;
    align-items: center;
    border-radius: 8px;
    border: 1px solid var(--Button-Color-White, #FFF);
    color: #ffffff;
    font-family: 'Metropolis', sans-serif;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s ease;
    text-box: trim-both cap alphabetic;
    margin-top: 4px;
    box-sizing: border-box;
    line-height: var(--Button-Line-height-2, 28px);
    /* 140% */
    letter-spacing: var(--Button-Letter-spacing, 0);
}

.blog-featured-card-btn span {
    text-box: trim-both cap alphabetic;
}

.blog-featured-card-btn:hover {
    background-color: #ffffff;
    color: #00224D;
}

.blog-featured-card-details {
    position: absolute;
    bottom: 40px;
    left: 15px;
    right: 120px;
    z-index: 2;
    opacity: 1;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    display: flex;
    flex-direction: column;
    gap: 28px;
    width: 88%;
}

.blog-featured-card-title {
    color: var(--Text-Color-White, #FFF);
    font-family: var(--Heading-Family, Metropolis);
    font-size: var(--Heading-H3, 24px);
    font-style: normal;
    font-weight: 600;
    text-box: trim-both cap alphabetic;
    line-height: var(--Heading-Line-height-3, 32px);
    /* 133.333% */
    letter-spacing: var(--Heading-Letter-spacing, 0);
}

.blog-featured-card.active .blog-featured-card-title {
    color: #ffffff;
    font-family: 'Metropolis', sans-serif;
    font-size: 36px;
    font-weight: 600;
    line-height: 32px;
    text-box: trim-both cap alphabetic;
    margin: 0;
}

.blog-featured-card.active .blog-featured-card-details {
    width: 100%;
}

.blog-featured-card-desc {
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Metropolis', sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    text-box: trim-both cap alphabetic;
    margin: 0;
    display: none;
}

.blog-featured-card.active .blog-featured-card-desc {
    display: block;
}

.blog-featured-card.active .blog-featured-card-btn {
    display: flex;
}



/* --- Client Logos Row and Client Card Styles --- */
.client-logos-swiper {
    width: 100%;
    margin-top: auto;
    padding-inline: 40px;
}

.client-card {
    width: 100%;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 18px -2px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(12px);
    padding: 16px;
    display: flex;
    gap: 24px;
    align-items: center;
    opacity: 0;
    visibility: hidden;
}

.client-logo-box {
    width: 72px;
    height: 72px;
    background: #ffffff;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    flex-shrink: 0;
}

.client-logo-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.client-title {
    color: var(--Text-Color-White, #FFF);
    font-family: var(--Heading-Family, Metropolis);
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px;
    margin: 0;
}


/* ---- Responsive css here-----------
------------------------------------------ */

@media (min-width: 1025px) {
    .mobile-popup-close-btn {
        display: none;
    }

    .counter-col-desc {
        font-size: 16px;
    }

    .career-apply-btn svg {
        transition: transform 0.3s ease;
        width: 32px;
        height: 32px;
    }

    .blog-featured-card.active .blog-featured-card-details {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.15s;
    }

    .blog-featured-card.active {
        width: 1008px;
    }

    .blog-featured-card:hover {
        width: 310px;
    }

    .blog-featured-card.active:hover {
        width: 1008px;
    }

    .case-study-card.active .case-study-card-details {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.15s;
    }

    .case-study-card.active .case-study-card-arrow {
        opacity: 1;
        transform: scale(1);
        transition-delay: 0.15s;
    }

    .case-study-card.active {
        width: 1008px;
    }

    .case-study-card:hover {
        width: calc(min(calc((100vw - 80px - 48px) / 4), 392px) + 25px);
    }

    .case-study-card.active:hover {
        width: 1008px;
    }

    .handover-left {
        opacity: 0;
    }

    .mobile-tablet-only {
        display: none !important;
    }
}












/* ==========================================================================
   Contact Page Switcher Tabs & "Apply for a position" Form Styles
   ========================================================================== */

.contact-tabs-wrapper {
    display: flex;
    width: 53%;
    margin-bottom: 64px;
}

.contact-category-tabs {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 5px;
    background: #FFFFFF;
    border: 1.5px solid #00224D;
    border-radius: 100px;
    box-sizing: border-box;
    gap: 4px;
}

.contact-category-tab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 24px;
    font-family: var(--Body-Family, Metropolis);
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    color: #00224D;
    background: transparent;
    border: none;
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    outline: none;
    white-space: nowrap;
}

.contact-category-tab:hover:not(.active) {
    background: rgba(0, 34, 77, 0.05);
}

.contact-category-tab.active {
    background: #00224D !important;
    color: #FFFFFF !important;
}

/* Apply Form Field Styling */
.custom-apply-form {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.custom-apply-form .form-group {
    margin-bottom: 40px;
}

.custom-apply-form .form-group.has-label label,
.custom-apply-form .form-group.select-group label,
.custom-apply-form .upload-group label,
.custom-apply-form .cover-letter-group label {
    display: block;
    color: #00224D;
    font-family: var(--Body-Family, Metropolis);
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    margin-bottom: 12px;
}

.custom-apply-form input[type="text"],
.custom-apply-form input[type="email"],
.custom-apply-form input[type="tel"] {
    width: 100%;
    border: none;
    border-bottom: 1px solid rgba(0, 34, 77, 0.3);
    background: transparent;
    padding: 10px 0;
    color: #00224D;
    font-family: var(--Body-Family, Metropolis);
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
    outline: none;
    box-shadow: none;
    border-radius: 0;
    transition: border-color 0.3s ease;
}

.custom-apply-form input[type="text"]:focus,
.custom-apply-form input[type="email"]:focus,
.custom-apply-form input[type="tel"]:focus {
    border-bottom-color: #00224D;
}

.custom-apply-form input[type="text"]::placeholder,
.custom-apply-form input[type="email"]::placeholder,
.custom-apply-form input[type="tel"]::placeholder {
    color: rgba(0, 34, 77, 0.4);
    font-family: var(--Body-Family, Metropolis);
    font-size: 24px;
    font-weight: 400;
}

/* Dropdown Select Styling */
.custom-apply-form .select-wrapper {
    position: relative;
    width: 100%;
}

.custom-apply-form select {
    width: 100%;
    border: none;
    border-bottom: 1px solid rgba(0, 34, 77, 0.3);
    background: transparent;
    padding: 10px 30px 10px 0;
    color: #00224D;
    font-family: var(--Body-Family, Metropolis);
    font-size: 24px;
    font-weight: 400;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    border-radius: 0;
    cursor: pointer;
}

.custom-apply-form select:required:invalid {
    color: rgba(0, 34, 77, 0.4);
}

.custom-apply-form .select-wrapper::after {
    content: '';
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border-right: 2px solid #00224D;
    border-bottom: 2px solid #00224D;
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}

/* CV Upload Box Styling */
.file-input-hidden {
    display: none !important;
}

.cv-upload-box {
    border: 1px dashed rgba(0, 34, 77, 0.3);
    border-radius: 4px;
    padding: 16px 20px;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.cv-upload-box:hover {
    border-color: #00224D;
    background: rgba(0, 34, 77, 0.015);
}

.upload-placeholder {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.upload-icon-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #00224D;
    font-family: var(--Body-Family, Metropolis);
    font-size: 18px;
    font-weight: 500;
}

.upload-icon-label svg {
    stroke: #00224D;
}

.upload-subtext {
    font-family: var(--Body-Family, Metropolis);
    font-size: 14px;
    color: rgba(0, 34, 77, 0.45);
    font-weight: 400;
}

/* Uploaded File Chip Styling */
.uploaded-file-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.chip-file-info {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: #F0F2F6;
    border-radius: 4px;
    color: #00224D;
    font-family: var(--Body-Family, Metropolis);
    font-size: 15px;
    font-weight: 500;
}

.chip-file-info svg.pdf-chip-icon {
    stroke: #00224D;
    flex-shrink: 0;
}

.file-name {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.remove-file-btn {
    background: transparent;
    border: none;
    color: rgba(0, 34, 77, 0.5);
    font-size: 18px;
    font-weight: 400;
    cursor: pointer;
    line-height: 1;
    padding: 0 0 0 6px;
    transition: color 0.2s ease;
}

.remove-file-btn:hover {
    color: #D93025;
}

.chip-upload-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #00224D;
    font-family: var(--Body-Family, Metropolis);
    font-size: 18px;
    font-weight: 500;
}

.chip-upload-action svg {
    stroke: #00224D;
}

/* Cover Letter Dual Input Styling */
.cover-input-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(0, 34, 77, 0.3);
    padding: 10px 0;
}

.cover-line-input {
    border: none !important;
    padding-right: 120px !important;
}

.cover-upload-trigger {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    color: #00224D;
    font-family: var(--Body-Family, Metropolis);
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    padding: 4px 0;
    transition: opacity 0.2s ease;
}

.cover-upload-trigger:hover {
    opacity: 0.8;
}

.cover-chip {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

/* Submit Button Disabled / Muted State */
.apply-submit-btn.muted-btn {
    background-color: #B0C0D0 !important;
    color: #FFFFFF !important;
    cursor: not-allowed;
    opacity: 0.9;
}

.apply-submit-btn.muted-btn:hover {
    transform: none !important;
    background-color: #B0C0D0 !important;
}

/* Responsive Media Queries for Tabs & Apply Form */




/* --- Mobile News Progress Display Override --- */


/* --- Service Explorer Pills Swipe & Sizing --- */
/* Desktop (min-width: 1025px): 4 pills visible */
@media (min-width: 1025px) {
    .explorer-pills-container {
        cursor: grab;
        user-select: none;
    }

    .explorer-pills-container.grabbing {
        cursor: grabbing;
    }

    .explorer-pill {
        flex: 0 0 calc((100% - 36px) / 4) !important;
        text-align: center;
        box-sizing: border-box;
    }
}

/* --- Featured Case Study Card --- */
.featured-case-study-card {
    position: relative;
    display: block;
    width: calc(100% - 304px);
    height: 500px;
    margin: 0 152px;
    border-radius: 24px;
    overflow: hidden;
    text-decoration: none;
    color: #ffffff;
    box-sizing: border-box;
}

.featured-case-study-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.22, 1);
}

.featured-case-study-card:hover .featured-case-study-card-bg {
    transform: scale(1.03);
}

.featured-case-study-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 34, 77, 0.00) 0%, rgba(0, 34, 77, 0.85) 90%);
    z-index: 1;
}

.featured-case-study-card-arrow {
    position: absolute;
    bottom: 40px;
    right: 40px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: #ffffff;
    color: #00224D;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: all 0.3s ease;
}

.featured-case-study-card:hover .featured-case-study-card-arrow {
    transform: scale(1.1);
    background-color: #00224D;
    color: #ffffff;
}

.featured-case-study-card-contents {
    position: absolute;
    bottom: 40px;
    left: 40px;
    right: 120px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.featured-case-study-card-title {
    color: #ffffff;
    font-family: 'Metropolis', sans-serif;
    font-size: 36px;
    font-weight: 600;
    line-height: 44px;
    margin: 0;
    text-transform: none;
}

.featured-case-study-card-desc {
    color: rgba(255, 255, 255, 0.85);
    font-family: 'Metropolis', sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    margin: 0;
}

/* --- Health & Safety Section Styles --- */
.health-safety-section {
    background-color: #ffffff;
    padding: 120px 0;
    font-family: 'Metropolis', sans-serif;
    box-sizing: border-box;
}

.health-safety-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
}

.health-safety-title {
    color: #00224D;
    font-family: 'Metropolis', sans-serif;
    font-size: 80px;
    font-weight: 400;
    line-height: 88px;
    margin: 0 0 60px 0;
    text-transform: none;
}

.health-safety-content {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.health-safety-content p {
    color: #1D1D1D;
    font-family: 'Metropolis', sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 36px;
    margin: 0;
}

/* Tablet (max-width: 1024px): 3.5 pills visible */


/* Mobile (max-width: 768px): 1.8 pills visible */