/* =========================================================
   SUSTAINA — Hero + About Animations + Responsive
   ========================================================= */
   
   /* =========================================================
       PREVENT HORIZONTAL SCROLL / WHITE SPACE ON MOBILE
    ========================================================= */
    
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }
    
    .sustaina-homepage {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }
    
    @media (max-width: 768px) {
    
        .sustaina-homepage > section {
            width: 100%;
            max-width: 100%;
            overflow-x: hidden;
            box-sizing: border-box;
        }
    }

/* =========================================================
   2. HERO ENTRANCE ANIMATION
   ========================================================= */

.home-hero__title,
.home-hero__desc,
.home-hero__card {
    opacity: 0;
    will-change: opacity, transform;
}

@keyframes sustaina-hero-title {
    0%   { opacity: 0; transform: translateY(38px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes sustaina-hero-description {
    0%   { opacity: 0; transform: translateY(42px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes sustaina-hero-card {
    0%   { opacity: 0; transform: translateY(52px); }
    100% { opacity: 1; transform: translateY(0); }
}

.hero-animated .home-hero__title {
    animation: sustaina-hero-title 900ms cubic-bezier(.22, 1, .36, 1) forwards;
    animation-delay: 100ms;
}

.hero-animated .home-hero__desc {
    animation: sustaina-hero-description 950ms cubic-bezier(.22, 1, .36, 1) forwards;
    animation-delay: 220ms;
}

.hero-animated .home-hero__card {
    animation: sustaina-hero-card 1000ms cubic-bezier(.22, 1, .36, 1) forwards;
    animation-delay: 380ms;
}


/* =========================================================
   3. ABOUT SECTION — initial state for GSAP
   ========================================================= */

.about-section__title,
.about-section__heading,
.about-card {
    opacity: 0;
    will-change: opacity, transform;
}

/* Hard fallback — if GSAP never fires */
.about-section.about-gsap-done .about-section__title,
.about-section.about-gsap-done .about-section__heading,
.about-section.about-gsap-done .about-card {
    opacity: 1 !important;
    transform: none !important;
}


/* =========================================================
   ABOUT CARD ICON — Circular pulse + ripple
   ========================================================= */

.about-card__icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    overflow: visible;
}

.about-card__icon {
    position: relative;
    z-index: 3;
    width: 48px;
    height: 48px;
    object-fit: contain;
    will-change: transform;
}

.about-card__ripple {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;

    transform:
        translate3d(-50%, -50%, 0)
        scale(0.7);

    opacity: 0;

    background:
        radial-gradient(
            circle,
            rgba(45, 211, 197, 0.22) 0%,
            rgba(45, 211, 197, 0.10) 35%,
            rgba(45, 211, 197, 0.03) 58%,
            rgba(45, 211, 197, 0) 72%
        );

    will-change: transform, opacity;
}

.about-card__ripple--2 {
    z-index: 0;
}

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

    .about-card__icon {
        transform: none !important;
    }

    .about-card__ripple {
        opacity: 0 !important;
    }
}

/* =========================================================
   5. MOBILE — HERO
   ========================================================= */

@media (max-width: 768px) {

    .home-hero {
        width: 100%;
        height: 100svh;
        min-height: clamp(600px, 100svh, 900px);
    }

    .home-hero__content {
        top: 0;
        left: 23px;
        right: 23px;
        bottom: auto;
        width: calc(100% - 46px);
        max-width: none;
        transform: none;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding-top: clamp(118px, 16vh, 145px);
        box-sizing: border-box;
    }

    .home-hero__title {
        width: 100%;
        color: #fff;
        font-family: Manrope, sans-serif;
        font-size: 32px;
        font-weight: 600;
        line-height: normal;
    }

    .home-hero__desc {
        width: 100%;
        max-width: none;
        color: #fff;
        font-family: Manrope, sans-serif;
        font-size: 16px;
        font-weight: 400;
        line-height: normal;
    }

    .home-hero__card {
        left: 23px;
        right: 23px;
        bottom: 24px;
        width: calc(100% - 46px);
        max-width: none;
        box-sizing: border-box;
    }

    .home-hero__card-body {
        display: flex;
        padding: 16px;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-start;
        gap: 8px;
        align-self: stretch;
        box-sizing: border-box;
    }

    .home-hero__card-top {
        display: flex;
        align-items: center;
        gap: 12px;
        align-self: stretch;
    }

    .home-hero__card-icon {
        width: 33px;
        height: 33px;
        flex-shrink: 0;
    }

    .home-hero__card-heading {
        color: #fff;
        font-family: Manrope, sans-serif;
        font-size: 20px;
        font-weight: 500;
        line-height: normal;
        flex: 1;
        min-width: 0;
    }

    .home-hero__nav-btn {
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }

    .home-hero__nav-icon { width: 24px; height: 24px; }

    .home-hero__feature-icon { width: 16.23px; height: 18.231px; flex-shrink: 0; }

    .home-hero__feature-text {
        color: #fff;
        font-family: Manrope, sans-serif;
        font-size: 14px;
        font-weight: 500;
        line-height: normal;
    }

    .home-hero__tabs { height: 12px; align-self: stretch; }
    .home-hero__tab  { height: 12px; }

    .hero-animated .home-hero__title { animation-duration: 850ms; animation-delay: 100ms; }
    .hero-animated .home-hero__desc  { animation-duration: 900ms; animation-delay: 230ms; }
    .hero-animated .home-hero__card  { animation-duration: 950ms; animation-delay: 380ms; }
}


/* =========================================================
   6. MOBILE — ABOUT SECTION
   
   ROOT CAUSE FIX: The desktop .about-card uses
   flex: 1 0 0 + align-self: stretch inside a flex-row.
   On mobile this collapses the card height because the
   row container has no explicit height but the card tries
   to stretch to match siblings. Fix: force column layout
   on the wrapper and auto height on each card.
   ========================================================= */

@media (max-width: 768px) {

    .about-section {
        padding: 48px 20px 72px 20px;
        box-sizing: border-box;
        /* Override the desktop gap that was 80px — too large on mobile */
        gap: 48px;
    }

    .about-section__inner {
        width: 100%;
        max-width: none;
        gap: 40px;
    }

    .about-section__header {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 14px;
        width: 100%;
    }

    .about-section__title {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6px;
        width: 100%;
    }

    .about-section__title-icon { width: 22px; height: 22px; }

    .about-section__title-text {
        color: #2DD3C5;
        font-family: Manrope, sans-serif;
        font-size: 18px;
        font-weight: 500;
        line-height: normal;
    }

    .about-section__heading {
        width: 100%;
        max-width: none;
        text-align: center;
        font-family: Manrope, sans-serif;
        font-size: clamp(22px, 6.5vw, 30px);
        font-weight: 600;
        line-height: 1.25;
    }

    .about-section__cards {
        display: grid !important;
        grid-template-columns: 1fr !important;
        /* Each card gets the same row track — auto makes tracks 
           independent, but we can force equal rows with grid */
        grid-auto-rows: 1fr !important;
        gap: 14px !important;
        align-items: unset !important;
    }

    /* Cards fill their grid cell fully */
    .about-card {
        height: 100% !important;
        align-self: stretch !important;
        box-sizing: border-box !important;
    }

    /* Content inside card — full width, column stack */
    .about-card__content {
        width: 100% !important;
        position: relative;
        z-index: 1;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
        /* Do NOT set height or overflow here */
    }

    .about-card__icon {
        width: 44px !important;
        height: 44px !important;
        flex-shrink: 0;
        object-fit: contain;
        display: block !important;
    }

    .about-card__title {
        color: #fff !important;
        font-family: Manrope, sans-serif;
        font-size: 17px !important;
        font-weight: 600;
        line-height: 1.35;
        margin: 0;
        width: 100%;
        /* Ensure text wraps and is never hidden */
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        display: block !important;
        visibility: visible !important;
    }

    .about-card__desc {
        color: rgba(255, 255, 255, 0.85) !important;
        font-family: Manrope, sans-serif;
        font-size: 14px !important;
        font-weight: 400;
        line-height: 1.6;
        margin: 0;
        width: 100%;
        white-space: normal !important;
        overflow: visible !important;
        display: block !important;
        visibility: visible !important;
    }

    /* Glow elements — keep them from adding unwanted height */
    .about-card__glow {
        pointer-events: none;
        z-index: 0;
    }
    /* Last card bottom gap fix */
    .about-section__cards {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    .about-card:last-child {
        margin-bottom: 0 !important;
    }

    /* Tighten section bottom padding — was causing the large gap */
    .about-section {
        padding-bottom: 48px !important;
    }
}


/* =========================================================
   7. TABLET
   ========================================================= */

@media (min-width: 769px) and (max-width: 1024px) {

    .home-hero { height: clamp(680px, 100vh, 100vh); }

    .home-hero__title   { font-size: clamp(30px, 3.5vw, 42px); }
    .home-hero__desc    { font-size: clamp(15px, 1.5vw, 18px); }
    .home-hero__card    { width: clamp(280px, 32vw, 360px); }

    .about-section__heading { font-size: clamp(26px, 3vw, 36px); }
    .about-card__title      { font-size: clamp(16px, 1.7vw, 20px); }
    .about-card__desc       { font-size: clamp(13px, 1.3vw, 16px); }
}


/* =========================================================
   8. REDUCED MOTION
   ========================================================= */

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

    .home-hero__title,
    .home-hero__desc,
    .home-hero__card,
    .about-section__title,
    .about-section__heading,
    .about-card,
    .about-card__icon {
        opacity: 1 !important;
        animation: none !important;
        transform: none !important;
    }
}

/* ============================================
   STATS COUNTER ANIMATION
   ============================================ */
.stats-section__value {
    display: inline-block;
}

/* ============================================
   BASE IMAGE FIX — all breakpoints
   ============================================ */
.stats-slider__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    border-radius: 8px;
}

/* ============================================
   SMALL DESKTOP — 1025px to 1280px
   ============================================ */
@media (min-width: 1025px) and (max-width: 1280px) {

    .stats-section {
        padding: clamp(48px, 6vw, 80px) clamp(24px, 4vw, 48px);
    }

    .stats-section__inner {
        gap: clamp(16px, 2vw, 24px);
    }

    .stats-section__left {
        width: clamp(200px, 26vw, 340px);
        min-height: clamp(280px, 36vw, 440px);
        gap: 0;
    }

    .stats-section__value {
        font-size: clamp(22px, 2.4vw, 32px);
    }

    .stats-section__label {
        font-size: clamp(14px, 1.5vw, 20px);
    }

    .stats-slider {
        min-height: clamp(280px, 36vw, 440px);
        height: clamp(280px, 36vw, 440px);
    }

    .stats-slider__title {
        font-size: clamp(14px, 1.5vw, 20px);
    }

    .stats-slider__desc {
        font-size: clamp(12px, 1.2vw, 17px);
    }

    .stats-slider__btn {
        width: clamp(36px, 3.5vw, 48px);
        height: clamp(36px, 3.5vw, 48px);
    }
}

/* ============================================
   TABLET — 769px to 1024px
   ============================================ */
@media (min-width: 769px) and (max-width: 1024px) {

    .stats-section {
        padding: clamp(40px, 5vw, 64px) clamp(20px, 4vw, 40px);
        gap: clamp(32px, 4vw, 56px);
    }

    .stats-section__inner {
        flex-direction: row;
        align-items: stretch;
        gap: clamp(16px, 2.5vw, 24px);
    }

    .stats-section__left {
        width: clamp(180px, 28vw, 300px);
        min-height: clamp(260px, 34vw, 400px);
        padding: 12px 0;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: nowrap;
        gap: 0;
    }

    .stats-section__stat {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        align-self: stretch;
        flex: unset;
        min-width: unset;
        width: 100%;
    }

    .stats-section__value {
        font-size: clamp(20px, 2.8vw, 30px);
    }

    .stats-section__label {
        font-size: clamp(13px, 1.6vw, 18px);
    }

    .stats-section__sep {
        display: block;
        width: 100%;
        height: 1px;
        background: #ffffff;
        opacity: 0.3;
    }

    .stats-slider {
        flex: 1 0 0;
        min-height: clamp(260px, 34vw, 400px);
        height: clamp(260px, 34vw, 400px);
        border-radius: 8px;
    }

    .stats-slider__gradient {
        height: clamp(160px, 24vw, 280px);
    }

    .stats-slider__bottom {
        padding: clamp(12px, 1.8vw, 20px);
        gap: 10px;
    }

    .stats-slider__title {
        font-size: clamp(14px, 1.8vw, 20px);
    }

    .stats-slider__desc {
        font-size: clamp(12px, 1.4vw, 16px);
    }

    .stats-slider__btn {
        width: clamp(36px, 4vw, 48px);
        height: clamp(36px, 4vw, 48px);
        padding: clamp(8px, 1vw, 12px);
    }

    .stats-slider__btn-icon {
        width: clamp(8px, 1vw, 12px);
        height: clamp(14px, 1.8vw, 22px);
    }
}

/* ============================================
   MOBILE — up to 768px
   ============================================ */
@media (max-width: 768px) {

    /* Outer wrapper */
    .stats-section {
        padding: 48px 0;
        gap: 40px;
    }

    /* Main inner container — column: stats top, slider bottom */
    .stats-section__inner {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        width: 100%;
        padding: 0 23px;
        box-sizing: border-box;
    }

    /* Stats container */
    .stats-section__left {
        width: 100%;
        max-width: 347px;
        min-height: unset;
        height: auto;
        padding: 12px 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 21px;
        flex-wrap: nowrap;
        /* Ensure stats come first */
        order: 1;
    }

    /* Each stat item — left aligned per spec */
    .stats-section__stat {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        align-self: stretch;
        flex: unset;
        min-width: unset;
        width: 100%;
    }

    /* Stat value */
    .stats-section__value {
        font-size: 26px;
        text-align: left;
    }

    /* Stat label */
    .stats-section__label {
        font-size: 20px;
        text-align: left;
    }

    /* Separator line */
    .stats-section__sep {
        display: block;
        width: 100%;
        height: 1px;
        background: #ffffff;
        opacity: 0.3;
        flex-shrink: 0;
    }

    /* ── Image slider card — comes second ── */
    .stats-slider {
        /* Fixed Figma dimensions */
        width: 347px;
        height: 495px;
        /* Override any flex/min-height from base styles */
        min-height: unset !important;
        flex: none;
        /* Positioning */
        position: relative;
        overflow: hidden;
        border-radius: 8px;
        /* Ensure it is visible */
        display: block;
        order: 2;
    }

    /* Track must fill the card fully so slides are visible */
    .stats-slider__track {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    /* Each slide fills the card */
    .stats-slider__slide {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    /* Image fills card — cover keeps aspect ratio, no distortion */
    .stats-slider__image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
        border-radius: 8px;
        display: block;
    }

    /* Gradient overlay */
    .stats-slider__gradient {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 337px;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #000 100%);
        z-index: 1;
        pointer-events: none;
    }

    /* Bottom content */
    .stats-slider__bottom {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 2;
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        box-sizing: border-box;
    }

    /* Title + description FIRST */
    .stats-slider__text {
        order: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        width: 100%;
        max-width: 317px;
    }

    /* Progress tabs BELOW text */
    .stats-slider__tabs {
        order: 2;
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        max-width: 317px;
    }

    /* Slide title */
    .stats-slider__title {
        font-size: 20px;
    }

    /* Slide description */
    .stats-slider__desc {
        font-size: 16px;
    }

    /* Nav buttons */
    .stats-slider__btn {
        width: 40px;
        height: 40px;
        padding: 10px;
    }
}

/* ============================================
   CORE SERVICES SECTION — FULL CSS
   ============================================ */

.core-services {
    position: relative;
    width: 100%;
    background: #000103;
    overflow: hidden;
    box-sizing: border-box;
}

/* ─── DESKTOP ELLIPSE GLOW ─── */
/*
   Sits inside the header div.
   z-index: 2 places it above the background but the button gets z-index: 3
   so the ellipse creates the "bleeds through" look from Figma.
*/
.core-services__ellipse--desktop {
    position: absolute;
    width: 1441px;
    height: 194px;
    top: 0;
    right: -550px;
    border-radius: 1441px;
    background: radial-gradient(50% 50% at 50% 50%, rgba(45, 211, 197, 0.36) 0%, rgba(0, 0, 0, 0.00) 100%);
    filter: blur(78px);
    pointer-events: none;
    z-index: 2;
}

/* ─── HEADER ROW ─── */
.core-services__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: clamp(32px, 4vw, 50px) clamp(20px, 5.5vw, 80px);
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
    background: #000103;
}

/* ─── LEFT: heading column ─── */
.core-services__heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    position: relative; /* so the desktop ellipse (absolute child) is contained */
}

.core-services__label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #2DD3C5;
    font-family: 'Manrope', sans-serif;
    font-size: clamp(16px, 1.6vw, 24px);
    font-weight: 500;
    line-height: normal;
}

.core-services__label-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* Main title — gradient text */
.core-services__title {
    font-family: 'Manrope', sans-serif;
    font-size: clamp(24px, 3vw, 40px);
    font-weight: 600;
    line-height: normal;
    margin: 0;
    background: linear-gradient(98deg, #FFF 34.28%, #2DD3C5 88.27%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ─── VIEW ALL SERVICES BUTTON — shared base ─── */
.core-services__btn {
    position: relative;
    display: inline-flex;
    height: 48px;
    padding: 12px 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 26px;
    /* Glassmorphic */
    background: rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 4px 24px rgba(0, 0, 0, 0.18);
    color: #E4F6F5 !important;
    font-family: 'Manrope', sans-serif;
    font-size: 20px;
    font-weight: 700;
    text-decoration: none !important;
    white-space: nowrap;
    overflow: visible; /* let hover icon overflow if needed */
    isolation: isolate;
    cursor: pointer;
    /* NO sweep animation — transparent buttons only swap the icon */
    transition: border-color 0.2s ease;
    z-index: 3; /* sits above the ellipse glow (z-index: 2) */
}

/* Remove the slide-in sweep — transparent buttons don't use it */
.core-services__btn::before {
    display: none;
}

/* Label sits above everything */
.core-services__btn .core-services__btn-label {
    position: relative;
    z-index: 20;
    color: #E4F6F5;
}

/* ─── Icon area ─── */
.core-services__btn-icon-area {
    position: relative;
    display: block;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    overflow: visible;
    z-index: 20;
}

/* Default arrow */
.core-services__btn-arrow-rest {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 28px !important;
    height: 28px !important;
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%);
    transition: opacity 0.16s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

/* Hover ring icon */
.core-services__btn-hover-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -50%);
    transition: opacity 0.18s ease, visibility 0.18s ease;
    pointer-events: none;
}

.core-services__btn-hover-svg {
    display: block;
    width: 28px !important;
    height: 28px !important;
    overflow: visible;
    transform: translateX(0);
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

/* On hover: hide rest arrow, show ring icon, nudge svg right */
.core-services__btn:hover .core-services__btn-arrow-rest,
.core-services__btn:focus-visible .core-services__btn-arrow-rest {
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -50%) translateX(3px);
}

.core-services__btn:hover .core-services__btn-hover-icon,
.core-services__btn:focus-visible .core-services__btn-hover-icon {
    opacity: 1;
    visibility: visible;
}

.core-services__btn:hover .core-services__btn-hover-svg,
.core-services__btn:focus-visible .core-services__btn-hover-svg {
    transform: translateX(3px);
}

/* ─── Desktop-only button: always visible ─── */
.core-services__btn--desktop {
    display: inline-flex;
    flex-shrink: 0;
}

/* ─── Mobile-only button: hidden on desktop ─── */
.core-services__btn--mobile {
    display: none;
}

/* ─── CARDS WRAP ─── */
.core-services__wrap {
    width: 100%;
    overflow: hidden;
    position: relative;
    z-index: 1;
    line-height: 0;
    font-size: 0;
    max-width: 1440px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* ─── CARDS TRACK ─── */
.core-services__track {
    display: flex;
    gap: 0;
    will-change: transform;
    line-height: 0;
    font-size: 0;
}

/* ─── INDIVIDUAL CARD ─── */
.core-services__card {
    flex: 0 0 calc(100% / 3);
    height: clamp(400px, 48vw, 700px);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    flex-shrink: 0;
    display: block;
    margin: 0;
    padding: 0;
}

/* ─── CARD IMAGE ─── */
.cs-card__img-wrap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    line-height: 0;
    font-size: 0;
}

.cs-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.4s ease;
    vertical-align: top;
}

.core-services__card:hover .cs-card__img {
    transform: scale(1.08);
}

/* Bottom gradient over image */
.cs-card__img-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: clamp(200px, 35vw, 480px);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #000 85.19%);
    pointer-events: none;
}

/* ─── TEXT OVERLAY ─── */
.cs-card__text {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 20px clamp(20px, 4.2vw, 60px) 40px clamp(20px, 4.2vw, 60px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    box-sizing: border-box;
}

/* ─── CARD TITLE ─── */
.cs-card__title {
    color: #ffffff;
    font-family: 'Manrope', sans-serif;
    font-size: clamp(20px, 2.5vw, 36px);
    font-weight: 700;
    line-height: normal;
    margin: 0;
    flex-shrink: 0;
}

/* ─── CARD DESCRIPTION ─── */
.cs-card__desc-wrap {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.4s ease;
}

.core-services__card:hover .cs-card__desc-wrap {
    max-height: 200px;
}

.cs-card__desc {
    color: #ffffff;
    font-family: 'Manrope', sans-serif;
    font-size: clamp(13px, 1.2vw, 18px);
    font-weight: 500;
    line-height: normal;
    margin: 0;
    max-width: 360px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.3s ease 0.15s, transform 0.3s ease 0.15s;
}

.core-services__card:hover .cs-card__desc {
    opacity: 1;
    transform: translateY(0);
}

/* Hide mobile-only elements on desktop */
.cs-mobile-tabs,
.cs-mobile-nav {
    display: none;
}


/* ============================================================
   CORE SERVICES — DESKTOP ELLIPSE FIX
   The ellipse div is now a direct child of .core-services__header
   so we can position it on the RIGHT side over the desktop button.
   ============================================================ */

/* Header must be position:relative and clip the giant ellipse */
.core-services__header {
    position: relative;
    overflow: hidden; /* clips the 1441px-wide ellipse so page doesn't scroll */
}

/* Desktop ellipse — right side, behind the "View All Services" button */
.core-services__ellipse--desktop {
    position: absolute;
    top: 50%;
    right: -550px;           /* pulled right so the glow blooms over the button */
    transform: translateY(-50%);
    width: 1441px;
    height: 194px;
    border-radius: 1441px;
    background: radial-gradient(50% 50% at 50% 50%, rgba(45, 211, 197, 0.36) 0%, rgba(0, 0, 0, 0.00) 100%);
    filter: blur(78px);
    pointer-events: none;
    z-index: 0;              /* sits behind everything */
}

/* Desktop button must sit above the ellipse */
.core-services__btn--desktop {
    position: relative;
    z-index: 2;
}

/* The heading (left side) must also be above the ellipse */
.core-services__heading {
    position: relative;
    z-index: 2;
}


/* ============================================================
   CORE SERVICES — MOBILE (≤768px)
   ============================================================ */
@media (max-width: 768px) {

    /* ── Outer section wrapper ── */
    .core-services {
        display: flex;
        width: 100%;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        overflow: hidden;
    }

    /* ── Header row ── */
    .core-services__header {
        position: relative;
        display: flex;
        width: 100%;
        height: 187px;
        padding: 12px 20px;
        justify-content: flex-start;
        align-items: flex-start;
        background: #000103;
        overflow: hidden;
        box-sizing: border-box;
        max-width: 100%;
        margin: 0;
    }

    /* Desktop ellipse div — completely hidden on mobile.
       Mobile uses the ::after pseudo-element on __header instead. */
    .core-services__ellipse--desktop {
        display: none !important;
    }

    /* Mobile ellipse glow — left side, glowing behind the mobile button.
       This is UNCHANGED from your original working mobile ellipse. */
    .core-services__header::after {
        content: '';
        position: absolute;
        bottom: -4px;
        left: 50%;
        transform: translateX(-50%);
        width: 393px;
        height: 194px;
        border-radius: 393px;
        background: radial-gradient(50% 50% at 50% 50%, rgba(45, 211, 197, 0.36) 0%, rgba(0, 0, 0, 0.00) 100%);
        filter: blur(78px);
        pointer-events: none;
        z-index: 0;
    }

    /* Heading column — full width, stacks vertically, above the ellipse */
    .core-services__heading {
        display: flex;
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        position: relative;
        z-index: 1;
    }

    /* Icon label */
    .core-services__label {
        color: #2DD3C5;
        font-family: 'Manrope', sans-serif;
        font-size: 20px;
        font-weight: 500;
        line-height: normal;
    }

    /* Main heading — gradient text */
    .core-services__title {
        font-family: 'Manrope', sans-serif;
        font-size: 28px;
        font-weight: 600;
        line-height: normal;
        background: linear-gradient(98deg, #FFF 34.28%, #2DD3C5 88.27%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    /* Desktop button — hidden on mobile */
    .core-services__btn--desktop {
        display: none !important;
    }

    /* Mobile button — shown inside heading column, above ellipse */
    .core-services__btn--mobile {
        display: inline-flex !important;
        height: 48px;
        padding: 12px 16px;
        font-size: 16px;
        position: relative;
        z-index: 3;
    }

    /* ── Cards area ── */
    .core-services__wrap {
        width: 100%;
        overflow: hidden;   /* clips the off-screen cards */
        position: relative;
        max-width: 100%;
        margin: 0;
    }

    /* Track — flex row, no wrapping, JS drives transform */
    .core-services__track {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;      /* CRITICAL: stops cards from stacking */
        will-change: transform;
    }

    /* Each card = exactly the wrap width (100% of the clipped parent) */
    .core-services__card {
        flex: 0 0 100%;         /* 100% of the track's parent (.core-services__wrap) */
        width: 100%;
        min-width: 0;
        height: 700px;
        position: relative;
        overflow: hidden;
        cursor: pointer;
        /* Do NOT use 100vw here — it ignores the overflow:hidden parent
           and causes all 3 cards to be visible simultaneously */
    }

    /* Image */
    .cs-card__img-wrap {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .cs-card__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
    }

    /* Gradient overlay */
    .cs-card__img-gradient {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%),
                    linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #000 85.19%);
        pointer-events: none;
    }

    /* Text overlay — bottom of card */
    .cs-card__text {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 20px 20px 40px 20px;
        box-sizing: border-box;
    }

    /* Title */
    .cs-card__title {
        color: #FFF;
        font-family: 'Manrope', sans-serif;
        font-size: 36px;
        font-weight: 700;
        line-height: normal;
        order: 1;
    }

    /* Description — always visible on mobile */
    .cs-card__desc-wrap {
        max-height: none !important;
        overflow: visible;
        order: 2;
    }

    .cs-card__desc {
        color: #FFF;
        font-family: 'Manrope', sans-serif;
        font-size: 18px;
        font-weight: 500;
        line-height: normal;
        opacity: 1 !important;
        transform: none !important;
        max-width: 100%;
    }

    /* Timer tab row — below desc */
    .cs-mobile-tabs {
        order: 3;
        display: inline-flex !important;
        align-items: center;
        gap: 8px;
        margin-top: 4px;
    }

    /* Tab track */
    .cs-mobile-tab {
        width: 112px;
        height: 4px;
        border-radius: 1000px;
        background: rgba(255, 255, 255, 0.2);
        overflow: hidden;
        position: relative;
    }

    /* White fill — JS animates this via rAF, no CSS transition */
    .cs-mobile-tab-fill {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 0%;
        background: #FFF;
        border-radius: 1000px;
    }
    
    .cs-mobile-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 0;
        right: 0;
        z-index: 10;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;
        pointer-events: none;
        box-sizing: border-box;
    }
    
    .cs-mobile-nav__btn {
        display: flex;
        height: 39px;
        width: 39px;
        padding: 8px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.24);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        border: none;
        cursor: pointer;
        box-sizing: border-box;
        pointer-events: all;
        transition: opacity 0.2s ease;
    }
    .cs-mobile-nav__btn svg {
        display: block;
        flex-shrink: 0;
    }
}

/* ============================================================
   FEATURES SECTION — FULL CSS
   Desktop: 3-2 hover grid  |  Mobile: single-card carousel
   ============================================================ */

/* ── Section wrapper ─────────────────────────────────────── */

.features-section {
    position: relative;
    width: 100%;
    min-height: clamp(600px, 58vw, 838px);
    background: linear-gradient(180deg, #070A22 0%, #050714 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: clamp(48px, 6vw, 80px) clamp(24px, 5.5vw, 80px);
    box-sizing: border-box;
}

/* ── Desktop background ellipses ─────────────────────────── */

.features-ellipse {
    position: absolute;
    width: clamp(400px, 58vw, 834px);
    height: clamp(220px, 30vw, 441px);
    border-radius: 834px;
    opacity: 0.6;
    background: radial-gradient(50% 50% at 50% 50%, rgba(17, 28, 127, 0.56) 0%, #070A22 100%);
    filter: blur(78px);
    pointer-events: none;
    top: 50%;
}

.features-ellipse--left {
    left: clamp(-400px, -20vw, -200px);
    transform: translateY(-50%) rotate(-90deg);
}

.features-ellipse--right {
    right: clamp(-400px, -20vw, -200px);
    transform: translateY(-50%) rotate(90deg);
}

/* ── Inner wrapper ───────────────────────────────────────── */

.features-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(32px, 4vw, 48px);
}

/* ── Section Header ──────────────────────────────────────── */

.features-header {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.features-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.features-tag__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.features-tag__text {
    color: #2DD3C5;
    font-family: 'Manrope', sans-serif;
    font-size: clamp(16px, 1.6vw, 24px);
    font-weight: 500;
    line-height: normal;
}

.features-title {
    margin: 0;
    text-align: center;
    font-family: 'Manrope', sans-serif;
    font-size: clamp(24px, 3vw, 40px);
    font-weight: 600;
    line-height: normal;
    background: linear-gradient(95deg, #FFF -2.2%, #2DD3C5 125.49%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ── DESKTOP GRID ────────────────────────────────────────── */
/*
    6-column ghost grid:
    Row 1: Card1(col1-3)  Card2(col3-5)  Card3(col5-7)
    Row 2:      Card4(col2-4)       Card5(col4-6)
*/

.features-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: clamp(12px, 1.5vw, 20px);
    width: 100%;
    max-width: 1280px;
    /* Use align-items: start so rows don't stretch cards
       beyond their fixed height when a sibling overflows */
    align-items: start;
}

.feature-card {
    grid-column: span 2;
    position: relative;
    /* FIXED height — never changes on hover.
       All cards in both rows stay exactly this tall always.
       The description fits inside via controlled padding + font size. */
    height: clamp(200px, 18vw, 262px);
    border-radius: 8px;
    background: linear-gradient(298deg, rgba(228, 246, 245, 0.06) 15.9%, rgba(255, 255, 255, 0.06) 94.14%);
    /* overflow hidden so nothing bleeds outside the fixed height */
    overflow: hidden;
    box-sizing: border-box;
    cursor: pointer;
    transition: background 0.8s ease;
}

/* 3-2 centred arrangement */
.feature-card:nth-child(4) { grid-column: 2 / span 2; }
.feature-card:nth-child(5) { grid-column: 4 / span 2; }

/* Card top glow ellipse */
.feature-card__glow {
    position: absolute;
    top: -207px;
    left: 50%;
    transform: translateX(-50%);
    width: 414px;
    height: 414px;
    border-radius: 50%;
    background: radial-gradient(50% 50% at 50% 50%, rgba(45, 211, 197, 0.24) 0%, rgba(0, 0, 0, 0.00) 100%);
    filter: blur(78px);
    pointer-events: none;
    z-index: 0;
}

/* ── Card body ───────────────────────────────────────────── */
/* At rest: centered. On hover: shifts to flex-start with top padding
   so icon + title move up and description slides in underneath.
   The card height is FIXED — only the internal layout shifts. */

.feature-card__body {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Center vertically at rest */
    justify-content: center;
    gap: clamp(10px, 1.2vw, 16px);
    /* Generous horizontal padding; vertical controlled separately */
    padding: clamp(16px, 2vw, 24px) clamp(16px, 2vw, 24px);
    box-sizing: border-box;
    /* Slow, smooth transition for the vertical layout shift */
    transition: justify-content 0.8s ease,
                padding-top     0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                gap             0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ── Icon wrapper ────────────────────────────────────────── */

.feature-card__icon-wrap {
    display: flex;
    /* Slightly smaller so desc has room inside fixed height */
    width: clamp(48px, 4.5vw, 62px);
    height: clamp(48px, 4.5vw, 62px);
    padding: 13px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 9999px;
    background: linear-gradient(298deg, rgba(228, 246, 245, 0.15) 15.9%, rgba(255, 255, 255, 0.15) 94.14%);
    flex-shrink: 0;
    box-sizing: border-box;
    transition: background 0.8s ease;
    overflow: visible;
}

.feature-card__icon {
    width: clamp(24px, 2.2vw, 32px);
    height: clamp(24px, 2.2vw, 32px);
    flex-shrink: 0;
    display: block;
    filter: brightness(0) saturate(100%) invert(71%) sepia(46%) saturate(480%) hue-rotate(130deg) brightness(95%) contrast(88%);
}

/* ── Text block ──────────────────────────────────────────── */

.feature-card__text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
}

.feature-card__title {
    margin: 0;
    color: #E4F6F5;
    text-align: center;
    font-family: 'Manrope', sans-serif;
    font-size: clamp(14px, 1.4vw, 20px);
    font-weight: 600;
    line-height: normal;
}

.feature-card__desc {
    margin: 0;
    color: #E4F6F5;
    text-align: center;
    font-family: 'Satoshi', sans-serif;
    /* Slightly smaller font so it fits inside the fixed card height */
    font-size: clamp(11px, 0.95vw, 14px);
    font-weight: 400;
    line-height: 1.5;
    /* Hidden at rest */
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    /* Slow reveal */
    transition: max-height 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                opacity    1s   cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.15s;
}

/* ── DESKTOP HOVER STATE ─────────────────────────────────── */
/* Card height does NOT change — only internal layout shifts */


.feature-card:hover .feature-card__body {
    justify-content: center;
    padding-top: clamp(16px, 2vw, 24px);
    gap: clamp(8px, 1vw, 12px);
}

.feature-card:hover .feature-card__icon-wrap {
    background: #5ECFC9;
}

.feature-card:hover .feature-card__icon {
    filter: brightness(0);
}

.feature-card:hover .feature-card__desc {
    max-height: 120px;
    opacity: 1;
}

/* ────────────────────────────────────────────────────────────
   PER-CARD ICON ANIMATIONS (desktop hover)
   1.5s delay before animation fires — subtle, not instant.
   ──────────────────────────────────────────────────────────── */

/* Card 1 — Leaf: scale from small to original (grow in) */
@keyframes icon-grow-in {
    0%   { transform: scale(0.4); opacity: 0.3; }
    60%  { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); }
}

.feature-card[data-card-index="1"]:hover .feature-card__icon {
    animation: icon-grow-in 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 1.5s forwards;
    will-change: transform;
}

/* Card 2 — Truck: slide in from left */
@keyframes icon-slide-from-left {
    0%   { transform: translateX(-28px); opacity: 0; }
    70%  { transform: translateX(3px); opacity: 1; }
    100% { transform: translateX(0); }
}

.feature-card[data-card-index="2"]:hover .feature-card__icon {
    animation: icon-slide-from-left 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.5s forwards;
    will-change: transform;
}

/* Card 3 — Globe: counter-clockwise 360° rotation */
@keyframes icon-rotate-ccw {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
}

.feature-card[data-card-index="3"]:hover .feature-card__icon {
    animation: icon-rotate-ccw 0.9s cubic-bezier(0.4, 0, 0.2, 1) 1.5s forwards;
    will-change: transform;
}

/* Card 4 — Box: expand wide then snap back */
@keyframes icon-expand-width {
    0%   { transform: scaleX(1); }
    40%  { transform: scaleX(1.45); }
    70%  { transform: scaleX(0.92); }
    100% { transform: scaleX(1); }
}

.feature-card[data-card-index="4"]:hover .feature-card__icon {
    animation: icon-expand-width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 1.5s forwards;
    will-change: transform;
}

/* Card 5 — Location pin: bouncy drop-settle */
@keyframes icon-bounce-settle {
    0%   { transform: translateY(-18px); }
    40%  { transform: translateY(4px); }
    60%  { transform: translateY(-8px); }
    78%  { transform: translateY(3px); }
    90%  { transform: translateY(-3px); }
    100% { transform: translateY(0); }
}

.feature-card[data-card-index="5"]:hover .feature-card__icon {
    animation: icon-bounce-settle 0.9s cubic-bezier(0.4, 0, 0.2, 1) 1.5s forwards;
    will-change: transform;
}

/* ── DESKTOP RESPONSIVE ──────────────────────────────────── */

@media (max-width: 900px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .feature-card,
    .feature-card:nth-child(4),
    .feature-card:nth-child(5) {
        grid-column: auto;
    }
}

/* ============================================================
   MOBILE (≤ 768px) — Single card carousel
   ============================================================ */

@media (max-width: 768px) {

    /* ── Section wrapper ─────────────────────────────────── */
    .features-section {
        min-height: unset;
        padding: 40px 0 48px 0;
        align-items: flex-end;
        justify-content: center;
    }

    /* Hide desktop elements */
    .features-ellipse,
    .features-grid {
        display: none !important;
    }

    /* ── Inner ───────────────────────────────────────────── */
    .features-inner {
        width: 393px;
        max-width: 100%;
        flex-direction: column;
        align-items: center;
        gap: 28px;
        padding: 0;
    }

    /* ── Header ──────────────────────────────────────────── */
    .features-header {
        width: 361px;
        max-width: 100%;
        height: 94px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 6px;
        align-self: stretch;
    }

    .features-tag {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6px;
        align-self: stretch;
    }

    .features-tag__icon {
        width: 28px;
        height: 28px;
    }

    .features-tag__text {
        color: #2DD3C5;
        text-align: center;
        font-family: 'Manrope', sans-serif;
        font-size: 20px;
        font-weight: 500;
        line-height: normal;
    }

    .features-title {
        text-align: center;
        font-family: 'Manrope', sans-serif;
        font-size: 28px;
        font-weight: 600;
        line-height: normal;
        background: linear-gradient(95deg, #FFF -2.2%, #2DD3C5 125.49%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    /* ── Mobile carousel wrapper ─────────────────────────── */
    .features-mobile-carousel {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        width: 100%;
        overflow: hidden;
    }

    /* Track — flex row, JS drives translateX */
    .features-mobile-track {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        width: 100%;
        will-change: transform;
        transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    /* Each slide = full carousel width */
    .features-mobile-slide {
        flex: 0 0 100%;
        width: 100%;
        box-sizing: border-box;
        padding: 0 16px;
    }

    /* ── Mobile card — COLUMN layout (icon top, text bottom) ── */
    .features-mobile-card__inner {
        position: relative;
        z-index: 1;
        width: 100%;
        min-height: 282px;
        display: flex;
        flex-direction: column;   /* icon on top, text below */
        align-items: center;
        gap: 16px;
        border-radius: 8px;
        background: linear-gradient(298deg, rgba(228, 246, 245, 0.06) 15.9%, rgba(255, 255, 255, 0.06) 94.14%);
        padding: 24px 20px;
        box-sizing: border-box;
        overflow: hidden;
    }

    /* Mobile card glow ellipse */
     .features-mobile-card__glow {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 414px;
        height: 414px;
        aspect-ratio: 1 / 1;
        border-radius: 414px;
        /* Reduced from 0.24 to 0.10 to match Figma subtlety */
        background: radial-gradient(50% 50% at 50% 50%, rgba(45, 211, 197, 0.10) 0%, rgba(0, 0, 0, 0.00) 100%);
        filter: blur(78px);
        pointer-events: none;
        z-index: 0;
    }
    
    .features-mobile-card__icon-wrap,
    .features-mobile-card__text {
        position: relative;
        z-index: 1;
    }


    /* Icon wrap — always teal on mobile */
    .features-mobile-card__icon-wrap {
        display: flex;
        width: 70px;
        height: 70px;
        min-width: 70px;
        padding: 14.737px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 9999px;
        background: #5ECFC9;
        box-sizing: border-box;
        flex-shrink: 0;
    }

    .features-mobile-card__icon {
        width: 36.842px;
        height: 36.842px;
        display: block;
        filter: brightness(0);
    }

    /* Text block — below icon */
    .features-mobile-card__text {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        width: 100%;
    }

    .features-mobile-card__title {
        margin: 0;
        color: #E4F6F5;
        text-align: left;
        font-family: 'Manrope', sans-serif;
        font-size: 22px;
        font-weight: 600;
        line-height: normal;
    }

    .features-mobile-card__desc {
        margin: 0;
        color: #E4F6F5;
        text-align: center;
        font-family: 'Satoshi', sans-serif;
        font-size: 16px;
        font-weight: 400;
        line-height: 20px;
    }

    /* ── Progress dots ───────────────────────────────────── */
    .features-mobile-dots {
        display: flex !important;
        align-items: center;
        gap: 8px;
    }

    .features-mobile-dot {
        width: 60px;
        height: 4px;
        border-radius: 1000px;
        background: rgba(255, 255, 255, 0.2);
        overflow: hidden;
        position: relative;
        flex-shrink: 0;
    }

    .features-mobile-dot__fill {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 0%;
        background: #2DD3C5;
        border-radius: 1000px;
    }
}

/* Hide mobile carousel on desktop */
.features-mobile-carousel {
    display: none;
}

/* ============================================================
   MOBILE ICON ANIMATIONS
   1.5s delay — same as desktop, fires when JS adds .icon-animate
   ============================================================ */

.features-mobile-slide[data-card-index="1"].icon-animate .features-mobile-card__icon {
    animation: icon-grow-in 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 1.5s forwards;
}

.features-mobile-slide[data-card-index="2"].icon-animate .features-mobile-card__icon {
    animation: icon-slide-from-left 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.5s forwards;
}

.features-mobile-slide[data-card-index="3"].icon-animate .features-mobile-card__icon {
    animation: icon-rotate-ccw 0.9s cubic-bezier(0.4, 0, 0.2, 1) 1.5s forwards;
}

.features-mobile-slide[data-card-index="4"].icon-animate .features-mobile-card__icon {
    animation: icon-expand-width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 1.5s forwards;
}

.features-mobile-slide[data-card-index="5"].icon-animate .features-mobile-card__icon {
    animation: icon-bounce-settle 0.9s cubic-bezier(0.4, 0, 0.2, 1) 1.5s forwards;
}

/* =========================================================
   IMPACT SECTION — GSAP INITIAL STATE
   ========================================================= */

.impact-section__header,
.impact-section__grid > .impact-col {
    opacity: 0;
    will-change: opacity, transform;
}


/* Fallback after GSAP has completed */
.impact-section.impact-gsap-done
.impact-section__header,
.impact-section.impact-gsap-done
.impact-section__grid > .impact-col {
    opacity: 1 !important;
    transform: none !important;
}


/* Mobile-only elements hidden on desktop */

.impact-mobile-dots {
    display: none;
}

.impact-section__mobile-viewport {
    width: 100%;
}

/* =========================================================
   MOBILE VIEWPORT / DOTS
   Hidden by default
   ========================================================= */

.impact-section__mobile-viewport {
    width: 100%;
}

.impact-mobile-dots {
    display: none;
}

/* =========================================================
   TABLET
   769px — 1024px
   ========================================================= */

@media (min-width: 769px) and (max-width: 1024px) {

    .impact-section {
        padding-left: clamp(30px, 5vw, 60px);
        padding-right: clamp(30px, 5vw, 60px);
    }

    .impact-section__inner {
        width: 100%;
        max-width: 100%;
    }

    .impact-section__grid {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        gap: clamp(12px, 1.5vw, 18px);
    }

    .impact-section__grid > .impact-col {
        flex: 1 0 0;
        width: auto;
    }

    .impact-col--video1 {
        min-height: clamp(300px, 42vw, 460px);
    }

    .impact-video-wrap {
        height: clamp(150px, 20vw, 230px);
    }

    .impact-stat-card--teal {
        padding: clamp(16px, 2.5vw, 24px) clamp(16px, 2.5vw, 24px);
        justify-content: flex-start;
    }

    .impact-stat-card--teal
    .impact-stat-card__content {
        width: 100%;
    }

    .impact-stat-card--light {
        padding-left: clamp(20px, 3vw, 35px);
    }

    .impact-stat-card--light
    .impact-stat-card__content {
        width: 100%;
    }

}

/* =========================================================
   MOBILE
   <= 768px
   ========================================================= */

@media (max-width: 768px) {

    /* -----------------------------------------------------
       SECTION
       ----------------------------------------------------- */

    .impact-section {
        width: 100%;
        box-sizing: border-box;
        padding: 48px 21px 40px;
    }


    /* -----------------------------------------------------
       INNER
       393px viewport
       21 + 351 + 21
       ----------------------------------------------------- */

    .impact-section__inner {
        width: 100%;
        max-width: 351px;
        margin: 0 auto;
        gap: 32px;
    }


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

    .impact-section__header {
        width: 100%;

        display: flex;
        flex-direction: column;

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

        gap: 12px;

        /*
         * IMPORTANT:
         * Do NOT put opacity here.
         * GSAP controls the initial state and reveal.
         */
    }


    /* -----------------------------------------------------
       TITLE
       ----------------------------------------------------- */

    .impact-section__title {
        margin: 0;

        font-family: 'Manrope', sans-serif;
        font-size: 28px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;

        background: linear-gradient(
            95deg,
            #FFF -2.17%,
            #2DD3C5 103.73%
        );

        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }


    /* -----------------------------------------------------
       DESCRIPTION
       ----------------------------------------------------- */

    .impact-section__subtitle {
        margin: 0;
        max-width: 100%;

        color: #FFF;

        font-family: 'Manrope', sans-serif;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }


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

    .impact-section__mobile-viewport {
        width: 100%;
        max-width: 351px;

        overflow: hidden;

        position: relative;
    }


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

       3 slides
       each = 351px

       GSAP controls translateX.
       Do NOT use CSS transition here.
       ===================================================== */

    .impact-section__grid {
        display: flex;
        flex-direction: row;
        align-items: flex-start;

        width: 300%;

        gap: 0;

        transform: translate3d(0, 0, 0);

        will-change: transform;
    }


    /* =====================================================
       EACH COLUMN = ONE MOBILE SLIDE
       ===================================================== */

    .impact-section__grid > .impact-col {
        flex: 0 0 33.333333%;
        width: 33.333333%;
        min-width: 0;

        box-sizing: border-box;

        opacity: 1;
        transform: none;
    }


    /* =====================================================
       SLIDE 1 — MAIN VIDEO

       Figma:
       351px × 360px
       ===================================================== */

    .impact-col--video1 {
        width: 100%;
        height: 360px;
        min-height: 360px;

        position: relative;

        overflow: hidden;

        border-radius: 4px;

        flex-shrink: 0;
    }


    .impact-col--video1 .impact-video {
        width: 100%;
        height: 100%;

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

        display: block;
    }


    /* =====================================================
       SLIDE 2 — MIDDLE COLUMN
       ===================================================== */

    .impact-col--middle {
        display: flex;

        flex-direction: column;

        align-items: flex-start;

        gap: 12px;

        height: auto;
        min-height: 0;
    }

    /* -----------------------------------------------------
       MIDDLE STAT
       ----------------------------------------------------- */

    .impact-col--middle
    .impact-stat-card--teal {

        display: flex;

        width: 100%;

        min-height: 0;

        padding: 24px 20px;

        justify-content: flex-start;
        align-items: center;
        align-self: stretch;

        box-sizing: border-box;
    }


    .impact-col--middle
    .impact-stat-card--teal
    .impact-stat-card__content {

        display: flex;

        width: 271px;

        flex-direction: row;

        align-items: center;
        width:100%;
        gap: 16px;
    }
    
    .impact-stat-card__icon {
        width: 94px;
        height: 94px;
        flex-shrink: 0;
    }
    
     .impact-col--middle .impact-stat-card--teal .impact-stat-card__text-group {
        flex: 1;
        min-width: 0;
    }


    .impact-col--middle
    .impact-stat-card--teal
    .impact-stat-card__value {

        color: #E4F6F5;

        font-family: 'Manrope', sans-serif;
        font-size: 28px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }


    .impact-col--middle
    .impact-stat-card--teal
    .impact-stat-card__label {

        color: #E4F6F5;

        font-family: 'Manrope', sans-serif;
        font-size: 18px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
    }


    /* -----------------------------------------------------
       MIDDLE IMAGE
       ----------------------------------------------------- */

    .impact-col--middle
    .impact-image-wrap {

        width: 100%;

        height: 220px;
        min-height: 220px;

        align-self: stretch;

        overflow: hidden;
    }


    .impact-col--middle
    .impact-image {

        width: 100%;
        height: 100%;

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

        display: block;
    }


    /* =====================================================
       SLIDE 3 — RIGHT COLUMN
       MOBILE:
       STAT → VIDEO
       ===================================================== */

    .impact-col--right {

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        gap: 12px;

        height: auto;
        min-height: 0;
    }


    /* -----------------------------------------------------
       MOBILE RIGHT STAT FIRST
       ----------------------------------------------------- */

    .impact-col--right
    .impact-stat-card--light {
        order: 1;
    }


    /* -----------------------------------------------------
       MOBILE RIGHT VIDEO SECOND
       ----------------------------------------------------- */

    .impact-col--right
    .impact-video-wrap {
        order: 2;
    }


    /* -----------------------------------------------------
       RIGHT STAT
       ----------------------------------------------------- */

    .impact-col--right
    .impact-stat-card--light {

        display: flex;

        width: 100%;

        min-height: 0;

        padding: 26px 40px 27px 40px;

        justify-content: center;
        align-items: center;
        align-self: stretch;

        box-sizing: border-box;
    }


    .impact-col--right
    .impact-stat-card--light
    .impact-stat-card__content {

        display: flex;

        width: 271px;

        flex-direction: column;

        align-items: flex-start;

        gap: 12px;
    }


    .impact-col--right
    .impact-stat-card--light
    .impact-stat-card__value {

        color: #0F5E59;

        font-family: 'Manrope', sans-serif;
        font-size: 28px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }


    .impact-col--right
    .impact-stat-card--light
    .impact-stat-card__label {

        color: #0F5E59;

        font-family: 'Manrope', sans-serif;
        font-size: 18px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
    }


    /* -----------------------------------------------------
       RIGHT VIDEO
       ----------------------------------------------------- */

    .impact-col--right
    .impact-video-wrap {

        width: 100%;

        height: 220px;
        min-height: 220px;

        align-self: stretch;

        overflow: hidden;
    }


    /* -----------------------------------------------------
       LIGHT CARD GLOW
       ----------------------------------------------------- */

    .impact-col--right
    .impact-stat-card__glows {

        right: -75px;
        top: 50%;
    }


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

    .impact-mobile-dots {

        display: flex;

        width: 100%;

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

        gap: 6px;

        margin-top: -12px;
    }


    .impact-mobile-dot {

        appearance: none;

        border: 0;

        padding: 0;
        margin: 0;

        width: 22px;
        height: 3px;

        border-radius: 10px;

        background: rgba(
            228,
            246,
            245,
            0.25
        );

        cursor: pointer;
    }


    .impact-mobile-dot.is-active {

        width: 32px;

        background: #2DD3C5;
    }

}


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

@media (max-width: 374px) {

    .impact-section {
        padding-left: 16px;
        padding-right: 16px;
    }


    .impact-section__inner,
    .impact-section__mobile-viewport {
        max-width: 100%;
    }


    /*
     * Keep the design ratio but allow the first video
     * to fit a narrower phone.
     */

    .impact-col--video1 {
        height: min(360px, calc(100vw - 32px));
        min-height: min(360px, calc(100vw - 32px));
    }


    .impact-col--middle
    .impact-stat-card--teal,
    .impact-col--right
    .impact-stat-card--light {

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


    .impact-col--middle
    .impact-stat-card--teal
    .impact-stat-card__content,

    .impact-col--right
    .impact-stat-card--light
    .impact-stat-card__content {

        width: 100%;
    }

}


/* =========================================================
   GLOBAL CONTACT SECTION
   MOBILE + GSAP IMAGE ZOOM
   Desktop styles intentionally excluded.
   ========================================================= */

/* GSAP image zoom preparation */
.contact-left__image {
    transform-origin: center center;
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    .contact-left__image {
        transform: none !important;
        will-change: auto;
    }
}

/* =========================================================
   CONTACT FORM REVEAL — GSAP initial state
   ========================================================= */

.contact-form__title,
.contact-form-wrap {
    will-change: opacity, transform;
}

/* =========================================================
   SUBMIT BUTTON ICON — GLOBAL BASE STATES
   Must live outside all media queries so desktop inherits.
   ========================================================= */

/* Icon area wrapper */
.contact-submit__icon-area {
    position: relative;
    display: block;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    margin: 0;
    padding: 0;
    overflow: visible;
}

/* Both icons: stacked on the same point */
.contact-submit__arrow-rest,
.contact-submit__hover-icon {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
    transform: translate(-50%, -50%) !important;
}

/* Simple arrow — visible by default */
.contact-submit__arrow-rest {
    display: block !important;
    width: 11px !important;
    height: 11px !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition:
        opacity 0.18s ease,
        visibility 0.18s ease,
        transform 0.25s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* Ellipse arrow — hidden by default */
.contact-submit__hover-icon {
    display: flex !important;
    width: 28px !important;
    height: 28px !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition:
        opacity 0.18s ease,
        visibility 0.18s ease !important;
}

.contact-submit__hover-icon .contact-submit__btn-icon {
    display: block !important;
    width: 28px !important;
    height: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateX(0);
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

/* On hover: swap icons */
.contact-form-wrap .ff-btn-submit:hover .contact-submit__arrow-rest,
.contact-form-wrap .ff-btn-submit:focus-visible .contact-submit__arrow-rest,
.contact-form-wrap button[type='submit']:hover .contact-submit__arrow-rest,
.contact-form-wrap button[type='submit']:focus-visible .contact-submit__arrow-rest {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translate(-50%, -50%) translateX(3px) !important;
}

.contact-form-wrap .ff-btn-submit:hover .contact-submit__hover-icon,
.contact-form-wrap .ff-btn-submit:focus-visible .contact-submit__hover-icon,
.contact-form-wrap button[type='submit']:hover .contact-submit__hover-icon,
.contact-form-wrap button[type='submit']:focus-visible .contact-submit__hover-icon {
    opacity: 1 !important;
    visibility: visible !important;
}

.contact-form-wrap .ff-btn-submit:hover .contact-submit__btn-icon,
.contact-form-wrap .ff-btn-submit:focus-visible .contact-submit__btn-icon,
.contact-form-wrap button[type='submit']:hover .contact-submit__btn-icon,
.contact-form-wrap button[type='submit']:focus-visible .contact-submit__btn-icon {
    transform: translateX(3px);
}


/* =========================================================
   TABLET — 769px to 1024px
   Keep existing desktop/tablet two-column layout.
   ========================================================= */

@media (min-width: 769px) and (max-width: 1024px) {
    .sustaina-contact-section__inner {
        flex-direction: row;
    }

    .contact-left {
        flex: 0 0 50%;
        min-height: 500px;
    }

    .contact-right {
        flex: 0 0 50%;
        padding: 48px 40px;
    }

    .contact-form-wrap {
        width: 100%;
    }
}


/* =========================================================
   MOBILE — 768px and below
   ========================================================= */

@media (max-width: 768px) {

    /* -----------------------------------------------------
       CONTACT SECTION
       ----------------------------------------------------- */

    .sustaina-contact-section {
        width: 100%;
        overflow: hidden;
        padding-bottom: 60px;
        box-sizing: border-box;
    }

    .sustaina-contact-section__inner {
        width: 100%;
        max-width: none;
        min-height: 0;
        margin: 0;
        flex-direction: column;
        align-items: center;
    }


    /* -----------------------------------------------------
       IMAGE + OVERLAY
       ----------------------------------------------------- */

    .contact-left {
        position: relative;
        display: flex;
        width: 100%;
        max-width: 394px;
        height: 602px;
        min-height: 602px;
        padding-top: 298px;
        flex: none;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        overflow: hidden;
        box-sizing: border-box;
    }

    .contact-left__image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        transform-origin: center center;
        will-change: transform;
    }


    /* -----------------------------------------------------
       IMAGE OVERLAY
       ----------------------------------------------------- */

    .contact-left__overlay {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        z-index: 1;
        display: flex;
        width: 100%;
        padding: 30px 29px 31px 18px;
        align-items: center;
        align-self: stretch;
        flex-direction: column;
        gap: 24px;
        box-sizing: border-box;
        background: #000;
        opacity: 0.8;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }


    /* -----------------------------------------------------
       OVERLAY TITLE
       ----------------------------------------------------- */

    .contact-overlay__title {
        width: 100%;
        margin: 0;
        color: #fff;
        font-family: 'Manrope', sans-serif;
        font-size: 28px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
    }


    /* -----------------------------------------------------
       OVERLAY DESCRIPTION
       ----------------------------------------------------- */

    .contact-overlay__subtitle {
        width: 100%;
        margin: 0;
        color: #fff;
        font-family: 'Manrope', sans-serif;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        opacity: 1;
    }


    /* -----------------------------------------------------
       LOCATION + EMAIL
       ----------------------------------------------------- */

    .contact-overlay__details {
        display: flex;
        width: 100%;
        margin: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        align-self: stretch;
    }

    .contact-detail {
        display: flex;
        width: 100%;
        align-items: flex-start;
        gap: 12px;
        align-self: stretch;
    }

    .contact-detail__icon {
        display: flex;
        width: 26px;
        height: 26px;
        justify-content: center;
        align-items: center;
        flex: 0 0 26px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.12);
    }

    .contact-detail__icon img {
        width: 26px;
        height: 26px;
        aspect-ratio: 1 / 1;
        object-fit: contain;
    }

    .contact-detail__text {
        flex: 1 1 auto;
        min-width: 0;
        color: #fff;
        font-family: 'Manrope', sans-serif;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        overflow-wrap: anywhere;
    }


    /* -----------------------------------------------------
       FORM SIDE
       ----------------------------------------------------- */

    .contact-right {
        display: flex;
        width: 100%;
        max-width: 360px;
        padding: 30px 0 0 11px;
        flex: none;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        box-sizing: border-box;
        background: #070920;
    }

    .contact-form-wrap {
        display: flex;
        width: 100%;
        max-width: 360px;
        flex-direction: column;
        align-items: center;
    }


    /* -----------------------------------------------------
       GET IN TOUCH TITLE
       ----------------------------------------------------- */

    .contact-form__title {
        width: 100%;
        margin: 0 0 24px;
        font-family: 'Manrope', sans-serif;
        font-size: 28px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        text-align: left;
        background: linear-gradient(96deg, #fff 2.44%, #2dd3c5 58.57%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .contact-form__body {
        width: 100%;
    }


    /* -----------------------------------------------------
       FLUENT FORMS RESET
       ----------------------------------------------------- */

    .contact-form-wrap .fluentform,
    .contact-form-wrap .ffs_default_wrap,
    .contact-form-wrap form {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }


    /* -----------------------------------------------------
       FORM GROUP
       ----------------------------------------------------- */

    .contact-form-wrap .ff-el-group {
        display: flex !important;
        width: 100% !important;
        margin: 0 0 22px !important;
        padding: 0 !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
    }

    .contact-form-wrap .ff-el-input--label,
    .contact-form-wrap .ff-el-input--content {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }


    /* -----------------------------------------------------
       FORM LABELS
       ----------------------------------------------------- */

    .contact-form-wrap .ff-el-input--label label,
    .contact-form-wrap label {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #fff !important;
        font-family: 'Satoshi', sans-serif !important;
        font-size: 16px !important;
        font-style: normal !important;
        font-weight: 500 !important;
        line-height: normal !important;
        background: none !important;
        -webkit-text-fill-color: #fff !important;
    }

    .contact-form-wrap .asterisk-right label::after {
        color: #2dd3c5 !important;
        -webkit-text-fill-color: #2dd3c5 !important;
    }


    /* -----------------------------------------------------
       NAME FIELD WRAPPER
       ----------------------------------------------------- */

    .contact-form-wrap .ff-t-container,
    .contact-form-wrap .ff-t-cell,
    .contact-form-wrap .ff-name-field-wrapper {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }


    /* -----------------------------------------------------
       INPUTS + TEXTAREA
       ----------------------------------------------------- */

    .contact-form-wrap input.ff-el-form-control,
    .contact-form-wrap textarea.ff-el-form-control {
        display: flex !important;
        width: 100% !important;
        box-sizing: border-box !important;
        align-self: stretch !important;
        color: #fff !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        font-family: 'Inter', sans-serif !important;
        font-size: 16px !important;
        font-style: normal !important;
        font-weight: 400 !important;
        line-height: normal !important;
        border-radius: 16px !important;
    }

    .contact-form-wrap input.ff-el-form-control {
        height: 44px !important;
        padding: 10px 16px !important;
        align-items: center !important;
    }

    .contact-form-wrap textarea.ff-el-form-control {
        min-height: 120px !important;
        height: 120px !important;
        padding: 10px 16px !important;
        resize: vertical !important;
    }


    /* -----------------------------------------------------
       PLACEHOLDER
       ----------------------------------------------------- */

    .contact-form-wrap input.ff-el-form-control::placeholder,
    .contact-form-wrap textarea.ff-el-form-control::placeholder {
        color: rgba(255, 255, 255, 0.4) !important;
        font-family: 'Inter', sans-serif !important;
        font-size: 16px !important;
        font-style: normal !important;
        font-weight: 400 !important;
        line-height: normal !important;
    }

    .contact-form-wrap .ff-el-form-control:focus {
        background: rgba(255, 255, 255, 0.12) !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
    }


    /* =====================================================
       SUBMIT BUTTON
       Header CTA style
       ===================================================== */

    .contact-form-wrap .ff_submit_btn_wrapper,
    .contact-form-wrap .ff-el-group.ff-text-center {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
    }

    .contact-form-wrap .ff-btn-submit,
    .contact-form-wrap button.ff-btn-submit,
    .contact-form-wrap button[type='submit'] {
        position: relative !important;
        display: inline-flex !important;
        width: 100% !important;
        height: 48px !important;
        margin: 0 !important;
        padding: 12px 16px !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        overflow: hidden !important;
        isolation: isolate !important;
        border: 0 !important;
        border-radius: 26px !important;
        background: #30aea4 !important;
        color: #e4f6f5 !important;
        font-family: 'Manrope', sans-serif !important;
        font-size: 20px !important;
        font-style: normal !important;
        font-weight: 700 !important;
        line-height: normal !important;
        text-align: center !important;
        cursor: pointer !important;
        box-shadow: none !important;
        outline: none !important;
        -webkit-appearance: none !important;
    }


    /* -----------------------------------------------------
       BUTTON HOVER BACKGROUND
       ----------------------------------------------------- */

    .contact-form-wrap .ff-btn-submit::before,
    .contact-form-wrap button[type='submit']::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
        border-radius: 26px;
        background: #289d93;
        transform: translateX(101%);
        transition: transform 0.35s ease-out;
        pointer-events: none;
    }

    .contact-form-wrap .ff-btn-submit:hover::before,
    .contact-form-wrap .ff-btn-submit:focus-visible::before,
    .contact-form-wrap button[type='submit']:hover::before,
    .contact-form-wrap button[type='submit']:focus-visible::before {
        transform: translateX(0);
    }


    /* -----------------------------------------------------
       BUTTON TEXT
       ----------------------------------------------------- */

    .contact-submit__label {
        position: relative;
        z-index: 20;
        display: block;
        margin: 0;
        padding: 0;
        color: inherit;
        white-space: nowrap;
    }


    /* =====================================================
       BUTTON ICON
       ===================================================== */

    .contact-submit__icon-area {
        position: relative;
        z-index: 20;
        display: block;
        width: 24px;
        height: 24px;
        flex: 0 0 24px;
        margin: 0;
        padding: 0;
        overflow: visible;
    }


    /* Both icons occupy exactly the same position */
    .contact-submit__arrow-rest,
    .contact-submit__hover-icon {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        margin: 0 !important;
        padding: 0 !important;
        pointer-events: none !important;
        transform: translate(-50%, -50%) !important;
    }


    /* -----------------------------------------------------
       DEFAULT ARROW
       Visible normally
       ----------------------------------------------------- */

    .contact-submit__arrow-rest {
        display: block !important;
        width: 11px !important;
        height: 11px !important;
        opacity: 1 !important;
        visibility: visible !important;
        transition:
            opacity 0.18s ease,
            visibility 0.18s ease,
            transform 0.25s cubic-bezier(0.22, 1, 0.36, 1) !important;
    }


    /* -----------------------------------------------------
       HOVER / ELLIPSE ARROW
       Hidden normally
       ----------------------------------------------------- */

    .contact-submit__hover-icon {
        display: flex !important;
        width: 24px !important;
        height: 24px !important;
        align-items: center !important;
        justify-content: center !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition:
            opacity 0.18s ease,
            visibility 0.18s ease !important;
    }

    .contact-submit__hover-icon .contact-submit__btn-icon {
        display: block !important;
        width: 24px !important;
        height: 24px !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: translateX(0);
        transition:
            transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    }


    /* =====================================================
       HOVER STATE
       Default arrow disappears.
       Ellipse arrow appears.
       ===================================================== */

    .contact-form-wrap .ff-btn-submit:hover .contact-submit__arrow-rest,
    .contact-form-wrap .ff-btn-submit:focus-visible .contact-submit__arrow-rest,
    .contact-form-wrap button[type='submit']:hover .contact-submit__arrow-rest,
    .contact-form-wrap button[type='submit']:focus-visible .contact-submit__arrow-rest {
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translate(-50%, -50%) translateX(3px) !important;
    }

    .contact-form-wrap .ff-btn-submit:hover .contact-submit__hover-icon,
    .contact-form-wrap .ff-btn-submit:focus-visible .contact-submit__hover-icon,
    .contact-form-wrap button[type='submit']:hover .contact-submit__hover-icon,
    .contact-form-wrap button[type='submit']:focus-visible .contact-submit__hover-icon {
        opacity: 1 !important;
        visibility: visible !important;
    }

    .contact-form-wrap .ff-btn-submit:hover .contact-submit__btn-icon,
    .contact-form-wrap .ff-btn-submit:focus-visible .contact-submit__btn-icon,
    .contact-form-wrap button[type='submit']:hover .contact-submit__btn-icon,
    .contact-form-wrap button[type='submit']:focus-visible .contact-submit__btn-icon {
        transform: translateX(3px);
    }
}


/* =========================================================
   SMALL MOBILE
   393px and below
   ========================================================= */

@media (max-width: 393px) {

    .contact-left {
        width: 100%;
        height: 602px;
        min-height: 602px;
    }

    .contact-left__overlay {
        padding-right: 18px;
    }

    .contact-right {
        width: calc(100% - 22px);
        max-width: 360px;
        padding-left: 0;
        padding-right: 0;
    }
}

/* ── DESKTOP: Reduce form field height and spacing so form fits in viewport ── */
@media (min-width: 769px) {

    .contact-form-wrap .ff-el-group {
        margin-bottom: 10px !important;
    }

    .contact-form-wrap input.ff-el-form-control {
        height: 40px !important;
        padding: 8px 14px !important;
        font-size: 14px !important;
    }

    .contact-form-wrap textarea.ff-el-form-control {
        height: 100px !important;
        padding: 8px 14px !important;
        font-size: 14px !important;
    }

    .contact-form-wrap .ff-el-input--label label,
    .contact-form-wrap label {
        font-size: 13px !important;
        margin-bottom: 5px !important;
    }

    .contact-form-wrap .ff_submit_btn_wrapper,
    .contact-form-wrap .ff-el-group.ff-text-center {
        margin-top: 4px !important;
    }

    .contact-form-wrap .ff-btn-submit,
    .contact-form-wrap button[type="submit"] {
        height: 44px !important;
        font-size: 16px !important;
    }

    .contact-form__title {
        margin: 0 0 20px !important;
    }

    .contact-right {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
}

/* ── Error color — light red across all screens ── */
.contact-form-wrap .error,
.contact-form-wrap .ff-el-is-error ~ .error,
.contact-form-wrap .text-danger {
    color: #ff8a8a !important;
    font-size: 12px !important;
    margin-top: 3px !important;
    border: none !important;
    background: none !important;
}

.contact-form-wrap .ff-el-is-error .ff-el-form-control {
    border: 1px solid rgba(255, 138, 138, 0.5) !important;
}

/* ── MOBILE: Remove gap between image and overlay ── */
@media (max-width: 768px) {

    .contact-left {
        padding-top: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    .contact-left__image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .contact-left__overlay {
        position: relative;
        z-index: 1;
        margin-top: auto; /* pushes overlay flush to bottom of image */
    }
}

/* ── Submit button icon — match header size ── */
.contact-submit__arrow-rest {
    width: 11px !important;
    height: 11px !important;
    transition:
        opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0.25s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.contact-submit__hover-icon {
    width: 24px !important;
    height: 24px !important;
    transition:
        opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0.25s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.contact-submit__hover-icon .contact-submit__btn-icon {
    width: 24px !important;
    height: 24px !important;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* ── Smoother hover transition on button background ── */
.contact-form-wrap .ff-btn-submit,
.contact-form-wrap button[type="submit"] {
    transition: background 0.35s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* =========================================================
   CTA SECTION — RESPONSIVE + ANIMATION STYLES
   Updated: increased desktop vertical lines, subtler/slower
   line pulses, content-safe grid layering, CTA button styling.
   ========================================================= */


/* ---------------------------------------------------------
   GSAP INITIAL WILL-CHANGE
   --------------------------------------------------------- */

.cta-title,
.cta-description,
.cta-buttons {
    will-change: opacity, transform;
}

/*
 * Grid borders are animated by JS directly.
 * No pseudo-elements and no CSS border transitions.
 */
.cta-grid-col,
.cta-grid-row {
    transition: none;
}


/* ---------------------------------------------------------
   GRID LAYERING
   Keep every grid/highlight line below CTA content/buttons.
   --------------------------------------------------------- */

.sustaina-cta-section .cta-grid {
    z-index: 0;
    pointer-events: none;
}

.sustaina-cta-section .cta-inner {
    position: relative;
    z-index: 2;
}

.sustaina-cta-section .cta-text-group,
.sustaina-cta-section .cta-buttons,
.sustaina-cta-section .sustaina-btn {
    position: relative;
    z-index: 2;
}


/* ---------------------------------------------------------
   CTA BUTTON 1 — GLASS
   Keep all existing hover/icon behaviour.
   Only the resting background + border are changed.
   --------------------------------------------------------- */

.sustaina-cta-section .cta-buttons .sustaina-btn--glass {
    border: 1px solid #FFF;
    background: rgba(255, 255, 255, 0.25);
}

/*
 * The CTA now has a real 1px white border, so remove the
 * previous decorative pseudo-border from this CTA button.
 * Hover/fill/icon behaviour remains unchanged.
 */
.sustaina-cta-section .cta-buttons .sustaina-btn--glass::before {
    display: none;
}


/* =========================================================
   CTA BUTTON ICON SIZES — all viewports
   ========================================================= */

.sustaina-cta-section .sustaina-btn__icon-wrap {
    width: 28px;
    height: 28px;
}

.sustaina-cta-section .sustaina-btn__icon-rest {
    width: 11px !important;
    height: 11px !important;
}

.sustaina-cta-section .sustaina-btn__icon-hover {
    width: 28px !important;
    height: 28px !important;
}

.sustaina-cta-section .sustaina-btn__icon-svg {
    width: 28px !important;
    height: 28px !important;
}


/* =========================================================
   TABLET — 769px to 1024px
   ========================================================= */

@media (min-width: 769px) and (max-width: 1024px) {
    .sustaina-cta-section {
        min-height: 480px;
    }

    .cta-inner {
        padding: 60px 32px;
    }

    .cta-title {
        font-size: 34px;
        line-height: 46px;
    }

    .cta-description {
        font-size: 20px;
        line-height: 32px;
    }
}


/* =========================================================
   MOBILE — 768px and below
   ========================================================= */

@media (max-width: 768px) {

    .sustaina-cta-section {
        width: 100%;
        min-height: 475px;
        height: auto;
        background: linear-gradient(180deg, #131D77 0%, #1A2BB7 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .cta-inner {
        display: flex;
        width: 351px;
        max-width: 100%;
        flex-direction: column;
        align-items: center;
        gap: 32px;
        padding: 48px 21px;
        box-sizing: border-box;
        text-align: center;
    }

    .cta-text-group {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 22px;
        align-self: stretch;
    }

    .cta-title {
        margin: 0;
        text-align: center;
        font-family: 'Satoshi', 'Manrope', sans-serif;
        font-size: 28px;
        font-style: normal;
        font-weight: 500;
        line-height: 36px;
        background: linear-gradient(357deg, #B2E4E1 38.25%, #FAFBF8 82.61%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .cta-description {
        color: #fff;
        text-align: center;
        font-family: 'Satoshi', 'Manrope', sans-serif;
        font-size: 22px;
        font-style: normal;
        font-weight: 400;
        line-height: 26px;
        height: 81px;
        align-self: stretch;
        margin: 0;
    }

    .cta-buttons {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
        align-self: stretch;
        margin-top: 0;
    }

    .sustaina-cta-section .sustaina-btn {
        display: flex;
        width: 100%;
        height: 48px;
        padding: 12px 16px;
        justify-content: center;
        align-items: center;
        gap: 8px;
        align-self: stretch;
        min-width: 0;
        font-size: 20px;
        font-weight: 700;
    }

    .sustaina-cta-section .sustaina-btn--teal,
    .sustaina-cta-section .sustaina-btn--glass {
        min-width: 0;
    }

    /*
     * First CTA button: retain mobile width/height/padding,
     * but use the requested background and border.
     */
    .sustaina-cta-section .cta-buttons .sustaina-btn--glass {
        border: 1px solid #FFF;
        background: rgba(255, 255, 255, 0.25);
    }

    .sustaina-cta-section .sustaina-btn__icon-wrap {
        width: 24px;
        height: 24px;
    }

    .sustaina-cta-section .sustaina-btn__icon-rest {
        width: 11px !important;
        height: 11px !important;
    }

    .sustaina-cta-section .sustaina-btn__icon-hover {
        width: 24px !important;
        height: 24px !important;
    }

    .sustaina-cta-section .sustaina-btn__icon-svg {
        width: 24px !important;
        height: 24px !important;
    }

    /*
     * MOBILE GRID — show 3 columns.
     * Extra desktop columns are hidden.
     */
    .sustaina-cta-section .cta-grid-col:nth-child(n+4) {
        display: none;
    }

    .sustaina-cta-section .cta-grid-col:nth-child(3) {
        border-right: none;
    }

    .sustaina-cta-section .cta-grid-row:nth-child(n+4) {
        display: none;
    }

    .sustaina-cta-section .cta-grid-row:nth-child(3) {
        border-bottom: none;
    }
}


/* =========================================================
   SMALL MOBILE — 393px and below
   ========================================================= */

@media (max-width: 393px) {
    .cta-inner {
        width: 100%;
        padding: 48px 20px;
    }
}


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

@media (prefers-reduced-motion: reduce) {
    .cta-title,
    .cta-description,
    .cta-buttons {
        will-change: auto;
        opacity: 1 !important;
        transform: none !important;
    }

    .cta-grid-col {
        border-right-color: rgba(255, 255, 255, 0.06) !important;
    }

    .cta-grid-row {
        border-bottom-color: rgba(255, 255, 255, 0.06) !important;
    }
}


/* =========================================================
   SERVICES HERO (About, Why Choose Us, etc.)
   Entrance animation + mobile responsive
   ========================================================= */

/* Initial hidden state */
.services-hero__title,
.services-hero__subtitle {
    opacity: 0;
    will-change: opacity, transform;
}

/* Keyframes — reuse same easing as homepage */
@keyframes sustaina-services-title {
    0%   { opacity: 0; transform: translateY(38px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes sustaina-services-subtitle {
    0%   { opacity: 0; transform: translateY(42px); }
    100% { opacity: 1; transform: translateY(0); }
}

.services-hero-animated .services-hero__title {
    animation: sustaina-services-title 900ms cubic-bezier(.22, 1, .36, 1) forwards;
    animation-delay: 100ms;
}

.services-hero-animated .services-hero__subtitle {
    animation: sustaina-services-subtitle 950ms cubic-bezier(.22, 1, .36, 1) forwards;
    animation-delay: 220ms;
}

/* ── Mobile responsive ── */
@media (max-width: 768px) {

    .services-hero__content {
        justify-content: flex-start;
    }

    .services-hero__text {
        height: auto;
        gap: 12px;
    }

    .services-hero__title {
        font-size: clamp(22px, 6vw, 28px);
        line-height: 1.25;
    }

    .services-hero__subtitle {
        font-size: 15px;
        max-width: 100%;
        line-height: 1.5;
    }
}

@media (max-width: 480px) {

    .services-hero__title {
        font-size: clamp(20px, 5.5vw, 24px);
    }

    .services-hero__subtitle {
        font-size: 14px;
    }
}

/* ============================================================
   ABOUT INTRO SECTION — MOBILE & TABLET RESPONSIVE
   ============================================================ */

/* ── iPad / Tablet (768px – 1024px) — 3-column card fix ── */
@media (min-width: 769px) and (max-width: 1024px) {

    .about-intro__inner {
        padding: 40px 32px;
        gap: 28px;
    }

    /* 3 cards in a row, equal width, auto height */
    .about-intro__cards {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;   /* all cards same height */
        gap: 14px;
    }

    .about-intro-card {
        flex: 1 1 0;
        min-width: 0;
        height: auto;           /* let content define height */
        min-height: unset;
        padding: 16px;
        gap: 10px;
    }

    /* Smaller icon circle */
    .about-intro-card__icon-wrap {
        width: 48px;
        height: 48px;
        padding: 10px;
        flex-shrink: 0;
    }

    .about-intro-card__icon {
        width: 24px;
        height: 24px;
    }

    /* Tighter text */
    .about-intro-card__heading {
        font-size: 14px;
        font-weight: 600;
        line-height: 1.3;
    }

    .about-intro-card__desc {
        font-size: 12px;
        line-height: 1.5;
    }

    /* Text block — no max-width constraint on tablet */
    .about-intro-card__text {
        max-width: 100%;
        gap: 4px;
    }

    /* Stats — 2×2 grid on tablet */
    .about-stats {
        max-width: 100%;
        height: auto;
        min-height: 180px;
    }

    .about-stats__inner {
        flex-wrap: wrap;
        padding: 32px 24px;
        gap: 24px;
    }

    .about-stats__item {
        flex: 1 1 calc(50% - 12px);
        min-width: 140px;
        gap: 8px;
    }

    .about-stats__value {
        font-size: 32px;
        line-height: 1.2;
        text-align: center;
        align-self: stretch;
    }

    .about-stats__label {
        font-size: 14px;
        text-align: center;
        align-self: stretch;
    }
}

/* ── Mobile (≤ 768px) ── */
@media (max-width: 768px) {

    /* ── Section overflow guard ── */
    .about-intro-section {
        overflow: hidden;
    }

    /* ── Ellipse — Figma: 1441×673, left -524, top 20 ── */
    .about-intro__ellipse {
        width: 1441px;
        height: 673px;
        left: -524px;
        top: 20px;
        border-radius: 1441px;
    }

    /* ── Main wrapper ── */
    .about-intro__inner {
        width: 393px;
        max-width: 100%;
        padding: 22px 20px;
        gap: 22px;
        align-items: flex-start;
    }

    /* ── Header: title + description ── */
    .about-intro__header {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 12px;
        align-self: stretch;
    }

    .about-intro__title {
        text-align: center;
        font-size: 28px;
        font-weight: 600;
        line-height: normal;
    }

    .about-intro__desc,
    .about-intro__desc p {
        color: #fff;
        text-align: center;
        font-family: 'Manrope', sans-serif;
        font-size: 16px;
        font-weight: 400;
        line-height: normal;
        align-self: stretch;
        margin: 0;
    }

    /* ── Info cards — stacked column, no carousel ── */
    .about-intro__cards {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        align-self: stretch;
        height: auto;        /* let cards set their own height */
        flex-wrap: nowrap;
    }

    /* Each card */
    .about-intro-card {
        height: 196px;
        flex: none;
        width: 100%;
        align-self: stretch;
        border-radius: 8px;
        background: linear-gradient(298deg, rgba(228, 246, 245, 0.06) 15.9%, rgba(255, 255, 255, 0.06) 94.14%);
        padding: 20px;
        gap: 16px;
        justify-content: flex-start;   /* icon top, text below */
        align-items: flex-start;
        flex-direction: column;
        overflow: hidden;
    }

    /* Card glow ellipse — top-left per Figma */
    .about-intro-card__glow {
        width: 414px;
        height: 414px;
        top: -165px;
        left: -104px;
        transform: none;
    }

    /* Icon wrap */
    .about-intro-card__icon-wrap {
        width: 46px;
        height: 46px;
        padding: 10px;
        flex-shrink: 0;
    }

    .about-intro-card__icon {
        width: 26px;
        height: 26px;
    }

    /* Text block */
    .about-intro-card__text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 7px;
        align-self: stretch;
        max-width: 305px;
    }

    .about-intro-card__heading {
        font-size: 20px;
        font-weight: 600;
        line-height: normal;
    }

    .about-intro-card__desc {
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
    }

    /* ── Stats banner ── */
    .about-stats {
        width: 346px;
        max-width: 100%;
        height: auto;
        min-height: unset;
        align-self: center;
        border-radius: 8px;
    }

    .about-stats__inner {
        width: 100%;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 22px;
        padding: 22px 20px;
    }

    .about-stats__item {
        width: 299px;
        max-width: 100%;
        flex: none;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 8px;
        align-self: stretch;
    }

    .about-stats__value {
        color: #DDF8EE;
        font-family: 'Satoshi', 'Manrope', sans-serif;
        font-size: 36px;
        font-weight: 700;
        line-height: 40px;
        text-align: center;
        align-self: stretch;
    }

    .about-stats__label {
        color: #fff;
        font-family: 'Satoshi', 'Manrope', sans-serif;
        font-size: 18px;
        font-weight: 500;
        line-height: normal;
        text-align: center;
        align-self: stretch;
    }
}

/* ── Mobile responsive ── */
@media (max-width: 768px) {

    /* Outer section padding */
    .wcu-section {
        padding: 56px 20px 38px 22px;
        display: inline-flex;
        justify-content: flex-end;
        align-items: center;
        width: 100%;
        box-sizing: border-box;
    }

    /* Inner container */
    .wcu-section__inner {
        width: 351px;
        max-width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 38px;
    }

    /* Header */
    .wcu-section__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 11px;
        align-self: stretch;
    }

    /* Tag row */
    .wcu-section__tag {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6px;
        align-self: stretch;
    }

    .wcu-section__tag-icon {
        width: 28px;
        height: 28px;
    }

    .wcu-section__tag-text {
        color: #2DD3C5;
        font-size: 20px;
        font-weight: 500;
    }

    /* Main title */
    .wcu-section__title {
        align-self: stretch;
        text-align: center;
        font-size: 28px;
        font-weight: 600;
    }

    /* Cards column */
    .wcu-section__grid {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        align-self: stretch;
        grid-template-columns: unset;
    }

    /* Each card */
    .wcu-card {
        display: flex;
        padding: 20px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        align-self: stretch;
        min-height: unset;
    }

    /* ── Ellipse — Figma mobile values ── */
    .wcu-card__glow {
        width: 180px;
        height: 180px;
        aspect-ratio: 1 / 1;
        left: -77px;
        top: -90px;
    }

    /* Icon inside card */
    .wcu-card__icon {
        width: 34px;
        height: 23px;
    }

    /* Text block */
    .wcu-card__text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        align-self: stretch;
    }

    .wcu-card__title {
        font-size: 20px;
        font-weight: 600;
        line-height: normal;
    }

    .wcu-card__desc {
        font-family: 'Satoshi', 'Manrope', sans-serif;
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
    }
}

/* =========================================================
   CONTACT US PAGE — RESPONSIVE OVERRIDES
   Desktop base styles live in style.css
   ========================================================= */


/* =========================================================
   TABLET  769px–1024px
   ========================================================= */

@media (min-width: 769px) and (max-width: 1024px) {

    .cu-section__inner {
        flex-direction: row;
        height: clamp(600px, calc(100vh - 80px), 800px);
    }

    .cu-left {
        flex: 0 0 50%;
    }

    .cu-left__header {
        padding: 44px 32px 24px;
    }

    .cu-left__title {
        font-size: 30px;
    }

    .cu-section .contact-right,
    .cu-section .cu-right {
        flex: 0 0 50% !important;
        width: 50% !important;
        height: 100% !important;
        padding: 44px 36px !important;
    }

    .cu-section .cu-right .contact-form-wrap {
        gap: 28px !important;
    }
}


/* =========================================================
   MOBILE  ≤768px
   ========================================================= */

@media (max-width: 768px) {

    /* ── Section: stacked, auto height ── */
    .cu-section__inner {
        flex-direction: column;
        height: auto;
        min-height: unset;
    }

    /* ── Left column ── */
    .cu-left {
        position: relative;
        width: 100%;
        flex: none;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    /* Header: title + contact details */
    .cu-left__header {
        flex-shrink: 0;
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 24px 20px 16px;
        width: 100%;
        box-sizing: border-box;
    }

    .cu-left__title {
        margin: 0;
        font-family: 'Manrope', sans-serif;
        font-size: 28px;
        font-weight: 600;
        line-height: normal;
    }

    .contact-overlay__details {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        width: 100%;
    }

    .contact-detail {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .contact-detail__icon {
        display: flex;
        width: 26px;
        height: 26px;
        justify-content: center;
        align-items: center;
        flex: 0 0 26px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.12);
        box-sizing: border-box;
    }

    .contact-detail__icon img {
        width: 16px;
        height: 16px;
        object-fit: contain;
    }

    .contact-detail__text {
        color: #ffffff;
        font-family: 'Manrope', sans-serif;
        font-size: 14px;
        font-weight: 500;
        line-height: normal;
    }

    /* Image: aspect-ratio 395/292 as per Figma */
    .cu-left__image-wrap {
        position: relative;
        width: 100%;
        aspect-ratio: 395 / 292;
        flex: none;
        overflow: hidden;
        /* Reset any desktop absolute positioning */
        left: unset;
        right: unset;
        bottom: unset;
        height: unset;
        min-height: unset;
    }

    .cu-left__image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center top;
        transform-origin: center center;
        will-change: transform;
    }

    /* ── Right column ──
       CRITICAL: override .contact-right global styles here too.
       The global .contact-right may have large padding that narrows
       everything inside it — kill it and replace with our values.
    ── */
    .sustaina-contact-page .contact-right,
    .sustaina-contact-page .cu-right,
    .cu-section .contact-right,
    .cu-section .cu-right {
        all: unset !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        width: 100% !important;
        padding: 32px 20px 48px !important;
        box-sizing: border-box !important;
        background: #070920 !important;
    }

    /* Form + title wrapper: genuinely full width */
    .sustaina-contact-page .contact-form-wrap,
    .cu-section .cu-right .contact-form-wrap {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 20px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* "Get in touch" title */
    .contact-form__title {
        align-self: stretch;
        margin: 0;
        font-family: 'Manrope', sans-serif;
        font-size: 28px;
        font-weight: 600;
        line-height: normal;
        background: linear-gradient(96deg, #ffffff 2.44%, #2dd3c5 58.57%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    /* ── Fluent Form: every wrapper and input — genuinely full width ──
       The form plugin renders:
       .fluentform > form > .ff-el-group > .ff-el-input--content > input
       Every single wrapper needs 100% width and box-sizing:border-box.
       float:none stops any column-layout FF might apply.
    ── */
    .cu-section .cu-right .contact-form__body,
    .cu-section .cu-right .fluentform,
    .cu-section .cu-right .fluentform form,
    .cu-section .cu-right .fluentform fieldset,
    .cu-section .cu-right .fluentform .ff-el-group,
    .cu-section .cu-right .fluentform .ff-el-input--content,
    .cu-section .cu-right .fluentform .ff-el-form-control,
    .cu-section .cu-right .fluentform input[type="text"],
    .cu-section .cu-right .fluentform input[type="email"],
    .cu-section .cu-right .fluentform input[type="tel"],
    .cu-section .cu-right .fluentform input[type="number"],
    .cu-section .cu-right .fluentform input[type="search"],
    .cu-section .cu-right .fluentform textarea,
    .cu-section .cu-right .fluentform select {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        float: none !important;
        box-sizing: border-box !important;
    }

    /* ── Submit button ── */
    .contact-form-wrap .ff-btn-submit,
    .contact-form-wrap button.ff-btn-submit,
    .contact-form-wrap button[type='submit'] {
        position: relative !important;
        display: inline-flex !important;
        width: 100% !important;
        height: 48px !important;
        margin: 0 !important;
        padding: 12px 16px !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        overflow: hidden !important;
        isolation: isolate !important;
        border: 0 !important;
        border-radius: 26px !important;
        background: #30aea4 !important;
        color: #e4f6f5 !important;
        font-family: 'Manrope', sans-serif !important;
        font-size: 20px !important;
        font-weight: 700 !important;
        line-height: normal !important;
        cursor: pointer !important;
        box-shadow: none !important;
        outline: none !important;
        -webkit-appearance: none !important;
        box-sizing: border-box !important;
    }

    .contact-form-wrap .ff-btn-submit::before,
    .contact-form-wrap button[type='submit']::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
        border-radius: 26px;
        background: #289d93;
        transform: translateX(101%);
        transition: transform 0.35s ease-out;
        pointer-events: none;
    }

    .contact-form-wrap .ff-btn-submit:hover::before,
    .contact-form-wrap button[type='submit']:hover::before {
        transform: translateX(0);
    }

    .contact-submit__label {
        position: relative;
        z-index: 20;
        display: block;
        margin: 0;
        padding: 0;
        color: inherit;
        white-space: nowrap;
    }

    .contact-submit__icon-area {
        position: relative;
        z-index: 20;
        display: block;
        width: 24px;
        height: 24px;
        flex: 0 0 24px;
        overflow: visible;
    }

    .contact-submit__arrow-rest,
    .contact-submit__hover-icon {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        margin: 0 !important;
        padding: 0 !important;
        pointer-events: none !important;
        transform: translate(-50%, -50%) !important;
    }

    .contact-submit__arrow-rest {
        display: block !important;
        width: 11px !important;
        height: 11px !important;
        opacity: 1 !important;
        visibility: visible !important;
        transition: opacity 0.18s ease, visibility 0.18s ease,
                    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1) !important;
    }

    .contact-submit__hover-icon {
        display: flex !important;
        width: 24px !important;
        height: 24px !important;
        align-items: center !important;
        justify-content: center !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: opacity 0.18s ease, visibility 0.18s ease !important;
    }

    .contact-submit__hover-icon .contact-submit__btn-icon {
        display: block !important;
        width: 24px !important;
        height: 24px !important;
        transform: translateX(0);
        transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .contact-form-wrap .ff-btn-submit:hover .contact-submit__arrow-rest,
    .contact-form-wrap button[type='submit']:hover .contact-submit__arrow-rest {
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translate(-50%, -50%) translateX(3px) !important;
    }

    .contact-form-wrap .ff-btn-submit:hover .contact-submit__hover-icon,
    .contact-form-wrap button[type='submit']:hover .contact-submit__hover-icon {
        opacity: 1 !important;
        visibility: visible !important;
    }

    .contact-form-wrap .ff-btn-submit:hover .contact-submit__btn-icon,
    .contact-form-wrap button[type='submit']:hover .contact-submit__btn-icon {
        transform: translateX(3px);
    }
}


/* =========================================================
   VERY SMALL PHONES  ≤390px
   ========================================================= */

@media (max-width: 390px) {

    .cu-left__header {
        padding-left: 16px;
        padding-right: 16px;
    }

    .sustaina-contact-page .contact-right,
    .sustaina-contact-page .cu-right,
    .cu-section .cu-right {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}


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

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

    .cu-left__image {
        transform: scale(1) !important;
    }

    .cu-right .contact-form__title,
    .cu-right .contact-form-wrap {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ============================================
   SERVICES ARCHIVE — ANIMATION + RESPONSIVE
   Base / desktop styles live in services-archive.css
   ============================================ */


/* ============================================
   GSAP WILL-CHANGE PREPARATION
   ============================================ */

.services-listing__heading,
.services-listing__label,
.services-listing__title,
.services-tab,
.services-get-in-touch,
.service-panel__header,
.service-panel__image-wrap {
    will-change: opacity, transform;
}

.service-panel__image {
    transform-origin: center center;
    will-change: transform;
}


/* ============================================
   REDUCED MOTION — ANIMATION SAFETY
   ============================================ */

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

    .services-listing__heading,
    .services-listing__label,
    .services-listing__title,
    .services-tab,
    .services-get-in-touch,
    .service-panel__header,
    .service-panel__image-wrap {
        opacity: 1 !important;
        transform: none !important;
        will-change: auto;
    }

    .service-panel__image {
        transform: scale(1) !important;
        will-change: auto;
    }
}


/* ============================================
   TABLET — 769px to 1024px
   ============================================ */

@media (min-width: 769px) and (max-width: 1024px) {

    .services-hero {
        height: clamp(460px, 55vw, 650px);
    }

    .services-hero__overlay {
        height: 50%;
    }

    .services-listing__inner {
        padding: 60px 40px 80px;
    }

    .services-listing__sidebar {
        width: clamp(200px, 28vw, 300px);
    }
}


/* ============================================
   MOBILE — 768px and below
   ============================================ */

@media (max-width: 768px) {

    /* ── Hero ── */

    .services-hero {
        height: clamp(400px, 70vw, 560px);
    }

    .services-hero__overlay {
        height: 55%;
    }

    .services-hero__content {
        justify-content: flex-start;
        padding-left: clamp(20px, 5vw, 40px);
        padding-right: clamp(20px, 5vw, 40px);
    }

    .services-hero__text {
        height: auto;
    }

    .services-hero__title {
        font-size: 26px;
    }

    .services-hero__subtitle {
        font-size: 16px;
    }


    /* ── Listing section outer wrapper ── */

    .services-listing__inner {
        padding: 22px 20px;
        gap: 22px;
        align-items: flex-start;
    }


    /* ── Section heading block ── */

    .services-listing__heading {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        width: 100%;
        max-width: 353px;
        min-height: 94px;
        justify-content: center;
        margin: 0 auto;
    }

    /* Icon + label row */
    .services-listing__label {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        gap: 6px;
        align-self: stretch;
        color: #2DD3C5;
        font-family: 'Manrope', sans-serif;
        font-size: 20px;
        font-weight: 500;
        line-height: normal;
    }

    /* Main heading */
    .services-listing__title {
        font-size: 28px;
        text-align: center;
        align-self: stretch;
    }


    /* ── Layout: stacked on mobile ── */

    .services-listing__layout {
        flex-direction: column;
        gap: 26px;
        align-self: stretch;
    }


    /* ── Sidebar: hidden on mobile (tabs replaced by stacked list) ── */

    .services-listing__sidebar {
        display: none;
    }


    /* ── Panels: all visible, stacked ── */

    .services-panels {
        display: flex;
        flex-direction: column;
        gap: 26px;
        align-self: stretch;
    }

    /*
     * On mobile ALL panels are visible — no tab switching.
     * Override the desktop display:none / is-active pattern.
     */
    .service-panel {
        display: flex !important;
        flex-direction: column;
        gap: 16px;
        width: 100%;
        max-width: 353px;
        align-self: stretch;
        flex-shrink: 0;
    }


    /* ── Panel header (title + desc + button) ── */

    .service-panel__header {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 22px;
        align-self: stretch;
        min-height: 162px;
        flex-shrink: 0;
    }

    .service-panel__meta {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        align-self: stretch;
    }

    .service-panel__title {
        color: #ffffff;
        font-family: 'Manrope', sans-serif;
        font-size: 26px;
        font-weight: 700;
        line-height: normal;
    }

    .service-panel__desc {
        color: #ffffff;
        font-family: 'Manrope', sans-serif;
        font-size: 16px;
        font-weight: 500;
        line-height: normal;
        max-width: 100%;
    }


    /* ── View Service button — mobile ── */

    .service-panel__btn {
        display: flex;
        width: 182px;
        height: 48px;
        padding: 12px 16px;
        justify-content: center;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
        border-radius: 26px;
        background: rgba(255, 255, 255, 0.12);
        text-decoration: none;

        /* Reset glass button styles for mobile */
        border: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
    }

    .service-panel__btn .sustaina-btn__text {
        color: #ffffff;
        font-family: 'Manrope', sans-serif;
        font-size: 16px;
        font-weight: 600;
        line-height: normal;
    }

    /* Keep btn fill hidden on mobile */
    .service-panel__btn .sustaina-btn__fill {
        display: none;
    }


    /* ── Panel image ── */

    .service-panel__image-wrap {
        height: 307px;
        width: 100%;
        align-self: stretch;
        aspect-ratio: 123 / 64;
        border-radius: 4px;
        overflow: hidden;
        flex-shrink: 0;
    }

    .service-panel__image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
    }
}


/* ============================================
   SMALL PHONES — 393px and below
   ============================================ */

@media (max-width: 393px) {

    .services-listing__inner {
        padding: 22px 16px;
    }

    .service-panel {
        max-width: 100%;
    }

    .services-listing__heading {
        max-width: 100%;
    }
}

/* ============================================
   Single Service Page
   ============================================ */

.sustaina-single-service {
    background-color: #0b1628;
    color: #ffffff;
    font-family: 'Manrope', sans-serif;
    min-height: 100vh;
}

/* Remove Blocksy default content padding */
.sustaina-single-service .entry-content,
.sustaina-single-service .content-wrap {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
}

/* Page inner wrapper */
.service-page-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding: 100px 89px;
    max-width: 1440px;
    margin: 0 auto;
    box-sizing: border-box;
    width: 100%;
}

/* ── Breadcrumb ── */
.breadcrumb-nav {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    align-self: stretch;
}

.breadcrumb-back {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.breadcrumb-arrow {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    filter: brightness(0) invert(1);
}

.breadcrumb-services {
    color: #ffffff;
    font-family: 'Manrope', sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: normal;
    text-decoration: none;
}

.breadcrumb-back:hover .breadcrumb-services {
    opacity: 0.8;
}

.breadcrumb-sep {
    color: #ffffff;
    font-size: 24px;
    font-weight: 400;
    opacity: 0.4;
    line-height: normal;
}

.breadcrumb-current {
    color: #30AEA4;
    font-family: 'Manrope', sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: normal;
}

/* ── Service Header ── */
.service-header {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-self: stretch;
}

.service-title {
    color: #ffffff;
    font-family: 'Manrope', sans-serif;
    font-size: 48px;
    font-weight: 600;
    line-height: normal;
    margin: 0;
}

.service-tagline {
    color: #ffffff;
    font-family: 'Manrope', sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: normal;
    margin: 0;
}

/* ── Hero Image ── */
.service-hero-image {
    align-self: stretch;
    width: 100%;
    overflow: hidden;
    border-radius: 4px;
}

.service-main-image {
    width: 100%;
    aspect-ratio: 1260 / 391;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 4px;
    /* Zoom loop animation — same as contact section */
    animation: serviceImageZoom 8s ease-in-out infinite alternate;
    transform-origin: center center;
    will-change: transform;
}

@keyframes serviceImageZoom {
    0%   { transform: scale(1); }
    100% { transform: scale(1.06); }
}

/* ── Service Content ── */
.service-content {
    align-self: stretch;
    width: 100%;
}

.service-content p {
    color: #ffffff;
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.7;
    margin-bottom: 24px;
}

.service-content p:last-child {
    margin-bottom: 0;
}

/* ── GSAP Reveal States ── */
/* Elements start invisible; GSAP will animate them in */
.gsap-reveal {
    opacity: 0;
    transform: translateY(30px);
}

/* Breadcrumb slides in from left */
.gsap-reveal-left {
    opacity: 0;
    transform: translateX(-24px);
}

/* Content paragraphs stagger */
.service-content p {
    opacity: 0;
    transform: translateY(20px);
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
    .service-main-image {
        animation: none;
    }
    .gsap-reveal,
    .gsap-reveal-left,
    .service-content p {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ============================================
   Responsive — Tablet  (max 1024px)
   ============================================ */
@media (max-width: 1024px) {
    .service-page-inner {
        padding: 80px 48px;
        gap: 32px;
    }

    .service-title {
        font-size: 42px;
    }

    .service-tagline {
        font-size: 20px;
    }

    .breadcrumb-services,
    .breadcrumb-sep,
    .breadcrumb-current {
        font-size: 18px;
    }

    .service-content p {
        font-size: 18px;
    }
}

/* ============================================
   Responsive — Mobile  (max 768px)
   ============================================ */
@media (max-width: 768px) {
    .service-page-inner {
        padding: 40px 20px;
        gap: 24px;
    }

    /* ── Breadcrumb mobile ── */
    .breadcrumb-nav {
        display: flex;
        align-items: flex-start;
        gap: 40px;           /* keep spec gap */
        align-self: stretch;
    }

    .breadcrumb-arrow {
        width: 24px;
        height: 24px;
        aspect-ratio: 1 / 1;
        flex-shrink: 0;
    }

    .breadcrumb-services {
        font-size: 16px;
    }

    .breadcrumb-sep {
        font-size: 16px;
    }

    .breadcrumb-current {
        color: #30AEA4;
        font-size: 16px;
        font-weight: 600;
    }

    /* ── Service header mobile ── */
    .service-header {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 6px;
        width: 100%;
        /* Figma shows centered content on mobile */
        text-align: left;
    }

    .service-title {
        font-size: 28px;
        font-weight: 600;
        width: 100%;
        max-width: 353px;
        margin: 0 auto;
    }

    .service-tagline {
        font-size: 16px;
        font-weight: 400;
        width: 100%;
        max-width: 353px;
        margin: 0 auto;
    }

    /* ── Hero image mobile ── */
    .service-hero-image {
        display: flex;
        height: 278px;
        justify-content: flex-end;
        align-items: center;
        align-self: stretch;
        overflow: hidden;
        border-radius: 4px;
    }

    .service-main-image {
        /* Figma: width 895px — overflows container intentionally, cropped by overflow:hidden */
        width: 895px;
        max-width: none;
        height: 100%;
        align-self: stretch;
        aspect-ratio: 132 / 41;
        object-fit: cover;
        object-position: center;
    }

    /* ── Content mobile ── */
    .service-content {
        align-self: stretch;
    }

    .service-content p {
        font-size: 14px;
        font-weight: 500;
        line-height: 1.7;
    }
}

/* ── Very small phones (max 375px) ── */
@media (max-width: 375px) {
    .service-page-inner {
        padding: 32px 16px;
    }

    .service-title {
        font-size: 24px;
        max-width: 100%;
    }

    .service-hero-image {
        height: 220px;
    }
}