/* ==========================================================================
   1. GEIST SANS FONTS INSTALLATION
   ========================================================================== */
@font-face {
    font-family: 'Geist';
    src: url('../Assets/Fonts/Geist-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Geist';
    src: url('../Assets/Fonts/Geist-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Geist';
    src: url('../Assets/Fonts/Geist-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Geist';
    src: url('../Assets/Fonts/Geist-Semibold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Geist';
    src: url('../Assets/Fonts/Geist-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Geist';
    src: url('../Assets/Fonts/Geist-Extrabold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Geist';
    src: url('../Assets/Fonts/Geist-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   2. DESIGN TOKENS (EXCLUSIVELY 1440PX DESKTOP SPECIFICATIONS)
   ========================================================================== */
:root {
    /* Color Palette */
    --clr-teal-bg: #154244;
    --clr-mint-accent: #66DCA1;
    --clr-text-white: #FFFFFF;
    --clr-dark-heading: #000000;
    --clr-dark-meta: #111111;
    --clr-mint-green: #E6EFEE;
    --clr-mint-deepgreen: #BCD2D3;
    
    /* Typography Family */
    --font-family-base: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;

    /* 🎬 MOTION AND ANIMATION CONTROLS */
    --ease-premium-spring: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-smooth-in-out: cubic-bezier(0.9, 0, 0.2, 1);
    --motion-duration-long: 5s;
}

/* ==========================================================================
   GLOBAL BOX-SIZING RESET
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
}

/* ==========================================================================
   3. GLOBAL MASTER RESET & GROUND RULES
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    background-color: #FFFFFF;
}

body {
    font-family: var(--font-family-base);
    background-color: #FFFFFF;
    -webkit-font-smoothing: antialiased;
    padding-top: 104px;    /* Matches the exact desktop height of your header */
}

/* ==========================================================================
   3.1 HARDWARE ACCELERATED ENTRANCE KEYFRAMES
   ========================================================================== */
@keyframes sectionCardReveal {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes sideSlideReveal {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ==========================================================================
   4. LOCKED LAYOUT CONTAINER SPECIFICATIONS (1440px Canvas / 1200px Content)
   ========================================================================== */
.site-container {
    width: 100%;
    max-width: 1440px;
    margin-right: auto;
    margin-left: auto;
    padding-right: min(120px, 5vw); /* Dynamic Fluid Padding */
    padding-left: min(120px, 5vw);
}

/* ==========================================================================
   5. SITE HEADER COMPONENT (DESKTOP)
   ========================================================================== */
.site-header {
    background-color: var(--clr-teal-bg);
    width: 100%;
    height:90px; 
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.brand-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--clr-text-white);
}

.logo-mark {
    width: auto;
    height: 37px;
}

.logo-text {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Horizontal Link Matrix */
.nav-links-list {
    display: flex;
    align-items: center;
    gap: 32px;
    list-style: none;
}

.nav-anchor {
    font-size: 18px;
    font-weight: 450;
    color: var(--clr-text-white);
    text-decoration: none;
    opacity: 0.75;
    transition: opacity 0.25s ease;
}

.nav-anchor.active-anchor {
    color: #3bc285;
    font-weight: 600;
}

.nav-anchor:hover,
.active-anchor {
    opacity: 1;
    color: var(--clr-mint-accent);
}

/* Brand Button Structure */
.btn-primary-cta {
    background-color: var(--clr-mint-accent);
    color: var(--clr-dark-meta);
    text-decoration: none;
    padding: 11px 26px;
    border-radius: 0px;
    font-weight: 650;
    font-size: 20px;
    display: inline-block;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-primary-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(94, 226, 163, 0.2);
}

/* ==========================================================================
   6. HERO VIEWPORT COMPONENT (DESKTOP)
   ========================================================================== */
.hero-viewport-section {
    background-color: #FFFFFF;
    padding-top: 99px;
    padding-bottom: 47px;
}

.hero-inner-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Split Typography Controls */
.hero-master-headline {
    color: var(--clr-dark-heading);
    font-size: 64px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.03em;
    text-align: center;
    margin-bottom: 56px;
    display: flex;
    flex-direction: column;
}

.headline-row-top {
    display: block;
}

.headline-row-bottom {
    display: block;
}

/* Precise Image Framing Framework */
.hero-asset-frame {
    position: relative;
    width: 100%; /* Fully spans the 1200px internal grid container bounds */
    height: 548px;
    overflow: hidden;
    border-radius: 0px;
}

.hero-main-display {
    width: 100%;
    height: 548px;        
    object-fit: cover;    /* 🌟 CRUCIAL: This prevents the image from looking squished */
    border-radius: 0px;
    display: block;
    object-position: center 70%;
    transition: transform 0.4s ease;
}

.hero-asset-frame:hover .hero-main-display {
    transform: scale(1.04);
}

/* Absolute Center Overlay Positioning Grid */
.metric-accent-badge {
    left: 50%; 
    right: 50%;
    transform: translateX(-50%);
    background-color: var(--clr-mint-accent);
    padding: 28px 45px;
    margin-right: 372px;
    margin-left: 844px;
    margin-top: -62px;
    border-radius: 0px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0px 12px 32px rgba(0, 0, 0, 0.08);
    z-index: 500;
}

.metric-num {
    font-size: 56px;
    font-weight: 900;
    color: #FFFFFF;
    letter-spacing: -0.03em;
    line-height: 1;
}

.metric-label-block {
    display: flex;
    flex-direction: column;
    text-align: left;
    color: var(--clr-dark-meta);
    line-height: 1.15;
}

.label-meta-top {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.label-meta-bold {
    font-size: 40px;
    font-weight: 800;
    letter-spacing: 0.02em;
}
/* ==========================================================================
   7. ABOUT SECTION COMPONENT (DESKTOP SPECIFIC - 1440PX SYSTEM)
   ========================================================================== */
.about-viewport-section {
    background-color: #FFFFFF;
    padding-top: 99px;
    padding-bottom: 99px;
    position: relative;
    
    /* 🎬 ENFORCED VIEWPORT TRACKING ANCHOR */
    view-timeline: --aboutTimeline block;
}

/* Header Context Alignment */
.about-section-header {
    text-align: center;
    margin-bottom: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.about-main-title {
    color: var(--clr-dark-heading);
    font-size: 48px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
}

.about-header-lead {
    color: #666666;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.5;
    max-width: 980px;
}

/* ==========================================
   Bento Grid System Framework
   ========================================== */
.about-bento-grid {
    display: grid !important;
    grid-template-columns: 1.3fr 1fr !important;
    gap: 22px !important;
    align-items: stretch !important;
    width: 100% !important;
    position: relative !important;
}

/* Left Feature Card Component */
.concept-feature-card {
    background-color: var(--clr-mint-green);
    border-radius: 0px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 347px;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    
    opacity: 0;
    will-change: transform, opacity;
    animation: sectionCardReveal var(--motion-duration-long) var(--ease-premium-spring) forwards;
    animation-timeline: --aboutTimeline;
    animation-range: entry 5% cover 30%;
}

.concept-image-frame {
    width: 45%;
    max-width: 311px;
    height: 297px;
    overflow: hidden;
    background: transparent;
    margin: 0 !important;
    clip-path: polygon(60px 0%, 100% 0%, 100% calc(100% - 40px), calc(100% - 60px) 100%, 0% 100%, 0% 40px);
    flex-shrink: 0;
}

.concept-display-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.concept-feature-card:hover .concept-display-img {
    transform: scale(1.04);
}

.concept-content-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    min-width: 0;
}

.concept-card-title {
    color: var(--clr-dark-heading);
    font-size: clamp(18px, 1.8vw, 20px);
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    word-break: break-word;
}

.concept-card-body {
    color: #000000;
    font-size: clamp(14px, 1.4vw, 18px);
    line-height: 1.4;
    font-weight: 400;
    margin-bottom: 24px;
}


.btn-secondary-cta {
    background-color: var(--clr-teal-bg);
    color: var(--clr-text-white);
    text-decoration: none;
    padding: 11px 22px;
    height: 48px;
    border-radius: 0px;
    font-weight: 650;
    font-size: 18px;
    align-self: flex-start;
    transition: background-color 0.2s ease;
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
}

.btn-secondary-cta:hover {
    background-color: var(--clr-mint-accent);
}

/* ==========================================
   🎯 FIX: Right Metrics Grid Assembly (Pure CSS Grid)
   ========================================== */
.metrics-grid-aside {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* Strict 2 equal fluid columns */
    grid-template-rows: repeat(2, 1fr) !important;
    gap: 22px !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 347px;
}

/* 🎯 FIX: Universal Responsive Padding (Replaces fixed padding-right) */
.metric-data-card,
.metric-data-card-1,
.metric-data-card-2,
.metric-data-card-3 {
    background-color: var(--clr-mint-green); 
    border-radius: 0px;
    padding: 20px !important; /* Fluid, even internal spacing */
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important; /* Prevents text overflow breaking grid columns */
}

/* Motion links */
.concept-feature-card,
.metrics-grid-aside .metric-data-card,
.metrics-grid-aside .metric-data-card-1,
.metrics-grid-aside .metric-data-card-2,
.metrics-grid-aside .metric-data-card-3 {
    opacity: 0;
    will-change: transform, opacity;
    animation: sideSlideReveal var(--motion-duration-long) var(--ease-premium-spring) forwards;
    animation-timeline: --aboutTimeline;
    animation-range: entry 10% cover 80%;
}

/* Scalable Typography */
.metric-num-display {
    color: var(--clr-teal-bg);
    font-size: clamp(32px, 3.2vw, 56px); /* Shrinks gracefully as screen narrow */
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1;
    margin-bottom: 8px;
}

.metric-label-display {
    color: #222222;
    font-size: clamp(12px, 1.1vw, 16px);
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

/* Mobile & Tablet Stacking Rules */
@media screen and (max-width: 991px) {
    .about-bento-grid {
        grid-template-columns: 1fr !important; /* Stacks concept card on top of metrics */
    }
}

@media screen and (max-width: 580px) {
    .metrics-grid-aside {
        grid-template-columns: 1fr !important; /* Single column on small mobile devices */
        grid-template-rows: auto !important;
    }
    
    .concept-feature-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .concept-image-frame {
        width: 100%;
        max-width: 100%;
    }
}
/* ==========================================================================
   8. FOUNDATION SECTION COMPONENT (DESKTOP SPECIFIC - 1440PX SYSTEM)
   ========================================================================== */
.foundation-viewport-section {
    background-color: #EBF1F1; /* Soft tint backdrop canvas spanning the full screen width */
    padding-top: 99px;
    padding-bottom: 99px;
}

/* Header Text Alignment Matrix */
.foundation-section-header {
    text-align: center;
    margin-bottom: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.foundation-main-title {
    color: var(--clr-dark-heading);
    font-size: 48px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
}

.foundation-header-lead {
    color: #666666;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.5;
    max-width: 780px; /* Precise layout line width configuration */
}

/* Column Row Layout Stack */
.foundation-rows-stack {
    display: flex;
    flex-direction: column;
    gap: 32px; /* Uniform spatial rhythm between cards */
    width: 100%;
}

/* Individual Content Row Grid Panels with Waterfall Sequence Motion Mapping */
.foundation-row-card {
    background-color: #FFFFFF; /* Crisp white interior panel surfaces */
    border-radius: 0px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 412px 1fr; /* Precise alignment distribution ratio */
    min-height: 240px;
    width: 100%; /* Spans full width inside the 1200px constraint layer */
    
    /* Cinematic Continuous Rolling Track View Hook */
    view-timeline-name: --rowTimeline;
    view-timeline-axis: block;
    animation: sectionCardReveal 0.7s var(--ease-smooth-in-out) both;
    animation-timeline: --rowTimeline;
    animation-range: entry 5% entry-crossing 45%;
}

/* Asset Container Frame */
.foundation-image-block {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.foundation-row-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.foundation-row-card:hover .foundation-row-img {
    transform: scale(1.04);
}

/* Content Frame Layout Details */
.foundation-content-block {
    padding: 48px 56px; /* Generous text margins matching your desktop design aspect ratio */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.foundation-card-title {
    color: var(--clr-dark-heading);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 14px;
}

.foundation-card-body {
    color: var(--clr-dark-heading);
    font-size: 24px;
    line-height: 1.6;
    font-weight: 400;
    max-width: 640px;
}

/* Values Custom Typography Rules */
.values-detailed-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.values-detailed-list li {
    color: var(--clr-dark-heading);
    font-size: 24px;
    line-height: 1.2;
}

.values-detailed-list li strong {
    color: var(--clr-dark-heading);
    font-weight: 400;
}

/* ==========================================================================
   9. SERVICES SECTION COMPONENT (REALIGNED BACKGROUND & PERFECT SQUARES)
   ========================================================================== */
.services-viewport-section {
    background-color: #FFFFFF; /* Main background starts out clean white */
    padding-top: 99px;
    padding-bottom: 99px;
}

/* Header stays cleanly on top of the white background */
.services-section-header {
    text-align: center;
    margin-bottom: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.services-main-title {
    color: var(--clr-dark-heading);
    font-size: 48px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
}

.services-header-lead {
    color: #666666;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.5;
    max-width: 820px;
}

/* 🛠️ BACKGROUND COLOR TRAY: Kicks in immediately after the description text */
.services-color-tray {
    background-color: var(--clr-mint-deepgreen); /* deep tint backdrop color begins here */
    width: 100%;
    padding-top:99px;
    padding-bottom:99px;
}

/* 4-Column Grid mapping within the 1200px box framework */
.services-desktop-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px; 
    align-items: start;
    width: 100%;
}

/* 🛠️ THE PERFECT SQUARE CUSTOM CARD ASYMMETRY */
.service-custom-card {
    background-color: #FFFFFF;
    width: 100%;
    
    /* 1:1 Aspect Ratio forces height to track width exactly, creating a square */
    aspect-ratio: 1 / 1; 
    
    /* Architectural Clipped Corner System */
    clip-path: polygon(60px 0%, 100% 0%, 100% calc(100% - 40px), calc(100% - 60px) 100%, 0% 100%, 0% 40px);
    
    padding: 40px 28px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    
}


/* 🎬 STAGGERED ENTRANCE THRESHOLDS (Negative offsets to allow slow, visible reveal from bottom screen edge) */
.service-custom-card:nth-child(1) { animation-range: entry -5% entry 45%; }
.service-custom-card:nth-child(2) { animation-range: entry 2% entry 52%; }
.service-custom-card:nth-child(3) { animation-range: entry 9% entry 59%; }
.service-custom-card:nth-child(4) { animation-range: entry 16% entry 66%; }

/* 🛠️ SCRIPT INTERACTION OVERRIDE: When text expands, we break the square aspect ratio 
   safely so the card expands vertically without cutting text or warping corners */
.service-custom-card.is-expanded-card {
    aspect-ratio: auto;
}

.service-custom-card:hover {
    transform: translateY(-8px);
}

.service-card-inner-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between; /* Pins icons up top and "Read more" buttons along the base line */
}

/* Inner Layout Elements */
.service-icon-box {
    width: 100%;
    margin-bottom: 16px;
}

.service-vector {
    height: 48px;
    width: auto;
    display: block;
    will-change: transform;
    /* Smooth transitions for a snappy, premium bouncing effect on entry/exit */
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
}

/* --- The Icon Pop Interaction Trigger --- */
/* When the card is hovered, the icon will scale up by 12% and lift upwards seamlessly */
.service-custom-card:hover .service-vector {
    transform: scale(1.12) translateY(-4px);
    color: var(--clr-teal-bg); /* Optional: changes vector color mapping slightly if utilizing SVG injection */
}

.service-card-title {
    color: var(--clr-dark-heading);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin-bottom: 12px;
}

/* Base Text Container State */
.service-expand-wrapper {
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: 48px; /* Shows only the absolute teaser summary line to save card height space */
    margin-bottom: 16px;
}

.service-card-body-text {
    color: #444444;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 400;
}

.btn-service-toggle {
    background: none;
    border: none;
    color: #444444;
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
    align-self: flex-start;
    padding: 0;
    margin-top: auto; /* Keeps the toggle link resting evenly at the bottom edge */
}


/* ==========================================================================
   10. MEET THE TEAM SECTION (DESKTOP SYSTEM - 1440PX CANVAS)
   ========================================================================== */
.team-viewport-section {
    background-color: #FFFFFF; /* Matches upper section breaks */
    padding-top: 99px;
    padding-bottom: 99px;
}

.team-section-header {
    text-align: center;
    margin-bottom: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.team-main-title {
    color: var(--clr-dark-heading);
    font-size: 48px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
}

.team-header-lead {
    color: #666666;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.5;
    max-width: 950px;
}

/* COLOR TRAY TINT: Anchors background right after text block */
.team-color-tray {
    background-color: var(--clr-mint-deepgreen);
    width: 100%;
    padding-top: 80px;
    padding-bottom: 120px;
    
    /* Viewport Tracking Anchor */
    view-timeline-name: --teamTimeline;
    view-timeline-axis: block;
}

/* 3-Column Layout structure within your standard 1200px block wrapper */
.team-desktop-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 64px 117px; /* 64px vertical row distance, 40px horizontal column gap */
    width: 100%;
}

/* Individual Team Member Component Cards with Floating Entry Animations */
.team-profile-card {
    display: flex;
    flex-direction: column;
    
    /* Core Entrance Setup */
    animation: sectionCardReveal var(--motion-duration-long) var(--ease-premium-spring) both;
    animation-timeline: --teamTimeline;
}

/* Staggering columns for profile cards entries */
.team-profile-card:nth-child(1) { animation-range: entry 5% entry-crossing 45%; }
.team-profile-card:nth-child(2) { animation-range: entry 15% entry-crossing 55%; }
.team-profile-card:nth-child(3) { animation-range: entry 25% entry-crossing 65%; }

/* ARCHITECTURAL CLIPPED IMAGING PROFILE FRAME */
.team-image-frame {
    width: 100%;
    height: auto; /* 🎯 Let the container height adapt to the image */
    overflow: hidden;
    margin-bottom: 24px;
    margin-left: 0; /* ❌ Removed the -20px margin */
    background: transparent;
    clip-path: polygon(60px 0%, 100% 0%, 100% calc(100% - 40px), calc(100% - 60px) 100%, 0% 100%, 0% 40px);
}

.team-portrait-img {
    width: 100%;
    height: auto; 
    display: block;
    transition: transform 0.4s ease;
}

/* Subtle Hover Interactive Depth Indicator */
.team-profile-card:hover .team-portrait-img {
    transform: scale(1.04);
}

/* Text Content Details */
.team-meta-details {
    display: flex;
    flex-direction: column;
    padding-bottom: 16px;
    margin-left: 0; 
    border-bottom: 1.1px solid #000000;
    width: 100%; 
    box-sizing: border-box;
}

.team-member-name {
    color: var(--clr-dark-heading);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin-bottom: 8px;
}

.team-member-role {
    color: #555555;
    font-size: 14px;
    font-weight: 520;
    line-height: 1.4;
}

/* ==========================================================================
   11. PROJECTS SECTION COMPONENT (DESKTOP SYSTEM - 1440PX CANVAS)
   ========================================================================== */
.projects-viewport-section {
    background-color: #FFFFFF;
    padding-top: 99px;
    padding-bottom: 99px;
}

.projects-section-header {
    text-align: center;
    margin-bottom: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.projects-main-title {
    color: var(--clr-dark-heading);
    font-size: 50px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
}

.projects-header-lead {
    color: #666666;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.5;
    max-width: 820px;
}

/* Color Tray Setup */
.projects-color-tray {
    background-color: #BCD2D3;
    width: 100%;
    padding-top: 72px;
    padding-bottom: 72px;
    
    /* Viewport Tracking Anchor */
    view-timeline-name: --projectsTimeline;
    view-timeline-axis: block;
}

/* Outer layout containing buttons alongside the grid box */
.slider-outer-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%; /* Ensures it fills up the 1200px content space */
}

/* THE WINDOW CONTAINER (The viewport mask) */
.projects-slider-window {
    width: 100%;
    overflow-x: auto; /* Changed from hidden to allow smooth programmatic scroll */
    scroll-behavior: smooth;
    scrollbar-width: none; /* Hides scrollbar in Firefox */
    -ms-overflow-style: none; /* Hides scrollbar in IE/Edge */
}

.projects-slider-window::-webkit-scrollbar {
    display: none; /* Hides scrollbar in Chrome/Safari */
}

/* THE SLIDER TRACK TRAIN WITH ENTRANCE ANIMATION MAPPING */
.projects-slider-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc(600px - 16px); /* Forces exactly 2 cards wide per pane */
    gap: 32px;
    width: max-content; /* Permits the track train to expand past boundary limit without squeezing */
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
    
    /* Sleek full track reveal entry configuration */
    animation: sectionCardReveal 0.9s var(--ease-premium-spring) both;
    animation-timeline: --projectsTimeline;
    animation-range: entry 10% entry-crossing 50%;
}

/* Individual Content Display Cards */
.project-display-card {
    background-color: #FFFFFF;
    border-radius: 0px;
    padding: 24px;
    display: grid;
    grid-template-columns: 240px 1fr; /* Image left, copy content right */
    gap: 28px;
    align-items: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
    width: 603.56px;
}

/* ARCHITECTURAL PRE-MASK IMAGE CARDS */
.project-image-frame {
    width: 318px;
    height: 303px;
    overflow: hidden;
    background: transparent;
    clip-path: polygon(60px 0%, 100% 0%, 100% calc(100% - 40px), calc(100% - 60px) 100%, 0% 100%, 0% 40px);
}

.project-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.project-display-card:hover .project-card-img {
    transform: scale(1.04);
}

/* Copy Content Rules */
.project-info-block {
    display: flex;
    flex-direction: column;
    margin-left: 75px;
}

.project-tag {
    color: #000000;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
    margin-bottom: 18px;
}

.project-card-title {
    color: #0F2D2D; /* Deep corporate teal dark token */
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 30px;
    letter-spacing: -0.01em;
}

.project-card-body {
    color: #000000;
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 20px;
}

/* Meta Data Context Rows (Location, Date) */
.project-meta-data {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 35px;
}

.meta-item {
    display: flex;
    align-items: center;
    gap:4px;
    color: #154244;
    font-size: 14px;
    font-weight: 700;
}

.meta-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: #154244;
}

/* Action View Link Trigger */
.btn-project-link {
    background-color: #154244;
    color: #FFFFFF;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    height: 43px;
    padding-top: 13px;
    padding-bottom: 13px;
    padding-left: 18px;
    padding-right: 18px;
    border-radius: 0px;
    align-self: flex-start;
    transition: background-color 0.2s ease;
}

.btn-project-link:hover {
    background-color: #66DCA1;
}

/* SLIDER NAVIGATION BUTTONS */
.slider-nav-btn {
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #154244;
    color: #FFFFFF;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: background-color 0.2s ease, opacity 0.2s ease;
}

.slider-nav-btn:hover {
    background-color: #66DCA1;
}

/* Positioning buttons slightly outside / nested on row edge borders */
.prev-btn { left: 34px; }
.next-btn { right: 34px; }

/* Disabled State formatting */
.slider-nav-btn:disabled {
    background-color: #154244;
    cursor: not-allowed;
    opacity: 0.6;
}

/* ==========================================================================
   12. FREQUENTLY ASKED QUESTIONS COMPONENT (DESKTOP SPECIFIC - 1440PX RES)
   ========================================================================== */
.faq-viewport-section {
    background-color: #FFFFFF;
    padding-top: 99px;
    padding-bottom: 99px;
}

.faq-section-header {
    text-align: center;
    margin-bottom: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.faq-main-title {
    color: var(--clr-dark-heading);
    font-size: 50px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
}

.faq-header-lead {
    color: #666666;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.5;
    max-width: 1220px;
}

/* Background Tray Grid Area Wrapper */
.faq-color-tray {
    background-color: #BCD2D3;
    width: 100%;
    padding-top: 80px;
    padding-bottom: 120px;
    
    
    /* Viewport Tracking Anchor */
    view-timeline-name: --faqTimeline;
    view-timeline-axis: block;
}

/* Asymmetric Grid: Left holds 1.4x scale relative to standard sidebar dimensions */
.faq-dual-layout {
    display: grid;
    grid-template-columns: 1.45fr 1fr;
    gap: 81px;
    align-items: start;
}

/* Left Accordion Stack Framework with Entrance Animation Link */
.faq-accordion-stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: auto;
    
    /* Reveal Animation Hook */
    animation: sectionCardReveal var(--motion-duration-long) var(--ease-premium-spring) both;
    animation-timeline: --faqTimeline;
    animation-range: entry 5% entry-crossing 50%;
}

.faq-accordion-item {
    background-color: #FFFFFF;
    border-radius: 0px; /* Locked down straight design aesthetics */
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), 
                box-shadow 0.3s cubic-bezier(0.25, 1, 0.5, 1),
                border-color 0.3s ease;
    border: 1px solid transparent;
}

.faq-accordion-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(21, 66, 68, 0.08); /* Sophisticated deep teal shadow tint */
    border-color: rgba(21, 66, 68, 0.15);
}

/* Interactive Top Bar */
.faq-trigger-bar {
    width: 95%;
    background: transparent;
    border: none;
    outline: none;
    padding: 31px 31px;
    margin-left: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    cursor: pointer;
}

.faq-question-text {
    color: var(--clr-dark-heading);
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.01em;
    padding-right: 24px;
}

/* Transition the question text color when hovered or when active */
.faq-accordion-item:hover .faq-question-text,
.faq-accordion-item.is-active .faq-question-text {
    color: var(--clr-teal-bg);
}

/* Pure CSS Plus (+) / Minus (-) Indicator System */
.faq-status-icon {
    position: relative;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.faq-status-icon::before,
.faq-status-icon::after {
    content: '';
    position: absolute;
    background-color: var(--clr-dark-heading);
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Horizontal segment */
.faq-status-icon::before {
    top: 7px;
    left: 0;
    width: 100%;
    height: 3px;
}

/* Vertical segment */
.faq-status-icon::after {
    top: 0;
    left: 7px;
    width: 3px;
    height: 100%;
}

/* Turn the plus/minus icon into a bright mint green color on hover/active states */
.faq-accordion-item:hover .faq-status-icon::before,
.faq-accordion-item:hover .faq-status-icon::after,
.faq-accordion-item.is-active .faq-status-icon::before {
    background-color: #49b37e; /* High-contrast version of brand mint */
}

/* Active Transformations: Rotate vertical bar away to form smooth minus sign */
.faq-accordion-item.is-active .faq-status-icon::after {
    transform: rotate(90deg);
    opacity: 0;
}

.faq-accordion-item.is-active .faq-status-icon::before {
    transform: rotate(180deg);
}

/* Slide Expansion Panel Window */
.faq-panel-expand {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.faq-panel-content {
    padding: 0 43px 28px 43px;
}

.faq-panel-content p {
    color: #444444;
    font-size: 15px;
    line-height: 1.6;
}

/* Right Billboard Card Styling Layout with Asymmetric Entrance Motion Hook */
.faq-billboard-aside {
    width: 100%;
    
    /* Core Horizontal Entry Slip Animation */
    animation: sideSlideReveal var(--motion-duration-long) var(--ease-premium-spring) both;
    animation-timeline: --faqTimeline;
    animation-range: entry 15% entry-crossing 55%;
}

.faq-billboard-card {
    background-color: #FFFFFF;
    border-radius: 0px;
    padding: 48px 40px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.01);
}

.faq-billboard-icon-wrapper {
    width: 48px;
    height: 48px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.faq-chat-custom-icon {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Prevents stretching and preserves design dimensions */
}

.faq-billboard-title {
    color: var(--clr-dark-heading);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin-bottom: 16px;
}

.faq-billboard-text {
    color: #444444;
    font-size: 20px;
    line-height: 1.28;
    margin-bottom: 32px;
    max-width: 320px;
}

/* High Contrast CTA Interface Trigger Button */
.btn-faq-billboard-cta {
    background-color: var(--clr-teal-bg);
    color: #FFFFFF;
    text-decoration: none;
    font-size: 20px;
    font-weight: 700;
    padding: 20px 20px;
    width: 100%; /* Spans across card boundary layout framework */
    border-radius: 0px;
    display: inline-block;
    transition: background-color 0.2s ease;
}

.btn-faq-billboard-cta:hover {
    background-color: var(--clr-mint-accent);
}

/* ==========================================================================
   13. FINAL CALL TO ACTION BANNER (DESKTOP SPECIFIC)
   ========================================================================== */
.cta-banner-section {
    background-color: #FFFFFF;
    padding-top: 0px;
    padding-bottom: 99px;
    width: 100%;
}


/* ==========================================================================
   13. FINAL CALL TO ACTION BANNER (DESKTOP SPECIFIC)
   ========================================================================== */
.cta-banner-section {
    background-color: #FFFFFF;
    padding-top: 60px;
    padding-bottom: 100px;
    width: 100%;
}

/* Rounded grid tray container holding the brand gradient matrix */
.cta-gradient-card {
    width: 100%;
    /* Gradient moving seamlessly from mint to signature deep corporate teal */
    background: linear-gradient(90deg, #5EE2A3 0%, var(--clr-teal-bg) 100%);
    border-radius: 0px; 
    padding: 80px 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 10px 30px rgba(21, 66, 68, 0.05);
}

/* Centered layout alignment */
.cta-content-wrapper {
    max-width: 780px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cta-master-title {
    color: var(--clr-text-white);
    font-size: 42px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
    line-height: 1.2;
}

.cta-description-text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    margin-bottom: 36px;
    max-width: 700px;
}

/* High contrast white action container button */
.btn-banner-mail-cta {
    background-color: #FFFFFF;
    color: var(--clr-teal-bg);
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.05em; /* Cleaner tracking for uppercase presentation */
    padding: 16px 40px;
    border-radius: 0px; /* Perfect match for your primary buttons style setup */
    display: inline-block;
    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), 
                box-shadow 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Subtle sleek hover depth feedback */
.btn-banner-mail-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    background-color: #F9FBFB;
}

.btn-banner-mail-cta:active {
    transform: translateY(0);
}

/* ==========================================================================
   14. SITE FOOTER COMPONENT
   ========================================================================== */
.site-footer-wrapper {
    background-color: var(--clr-teal-bg); /* Deep corporate teal background */
    padding-top: 100px;
    padding-bottom: 60px;
    width: 100%;
}

/* 4-Column asymmetric metadata structure */
.footer-meta-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1.2fr 1.1fr;
    gap: 32px;
    align-items: start;
    margin-bottom: 70px;
}

.footer-grid-col p {
    color: var(--clr-text-white);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
}

/* Specific text alignment override for the physical address column */
.col-address p {
    text-align: right;
}

/* Inline horizontal links configuration */
.footer-inline-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 16px;
}

.footer-inline-links a,
.footer-interactive-link {
    color: var(--clr-text-white);
    text-decoration: none;
    font-size: 16px;
    font-weight: 400;
    transition: opacity 0.2s ease;
}

.footer-inline-links a:hover,
.footer-interactive-link:hover {
    opacity: 0.75;
}

/* Clean architectural horizontal rule */
.footer-structural-divider {
    border: none;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.4); /* Structured semi-transparent separator */
    margin: 0 0 50px 0;
    width: 100%;
}

/* Master branding structural anchor alignment */
.footer-branding-block {
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* Locks logo alignment down to the bottom baseline */
    width: 100%;
}

.footer-brand-anchor {
    display: flex;
    align-items: center;
    gap: 18px;
}

.footer-brand-icon {
    width: 54px;
    height: auto;
    display: block;
}

.footer-brand-wordmark {
    color: var(--clr-text-white);
    font-size: 42px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
    line-height: 1;
}

/* Brand Tagline Display Styles */
.footer-tagline-text {
    color: #5EE2A3; /* Bright brand mint text accent color */
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0;
    line-height: 1;
}

/* ==========================================================================
   FULL PROJECT DETAILS PAGE ISOLATED STYLES 
   ========================================================================== */

.portfolio-subpage-wrapper {
    background-color: #FFFFFF;
    padding-bottom: 99px;
    min-width: 100%;
}

.portfolio-intro-deck {
    padding-top: 80px;
    padding-bottom: 40px;
}

.portfolio-master-title {
    font-size: 48px;
    font-weight: 700;
    color: var(--clr-dark-heading, #111111);
    margin-bottom: 16px;
    text-align: center;
}

.portfolio-header-lead {
    font-size: 24px;
    color: #747272;
    max-width: 1200px;
    margin: 0 auto;
    line-height: 1.5;
    text-align: center;
}

/* Metadata Layout Header Split */
.project-spec-showcase {
    padding-top: 40px;
}

.project-spec-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    margin: 0 auto 48px auto;
}

.spec-meta-left {
    display: flex;
    flex-direction: column;
}

.spec-tag {
    font-size: 24px;
    font-weight: 700;
    color: #154244;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
}

.spec-title {
    font-size: 55px;
    font-weight: 800;
    color: #111111;
    margin-bottom: 12px;
}

.spec-logistics {
    display: flex;
    gap: 24px;
    padding-top: -60px;
    
}

.spec-meta-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 480px;
}
.spec-description-text {
    font-size: 20px;
    margin-top: 50px;
    line-height: 1.6;
    color: #000;
    text-align: right;
}

.media-toggle-tabs {
    display: flex;
    gap: 19px;
    margin-bottom: px;
    margin-left: 113px;
}


.tab-btn {
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 600;
    /* border: 1px solid #E0E0E0; */
    background: #FFFFFF;
    cursor: pointer;
    transition: all 0.3s ease;
}

.tab-btn.active-tab {
    background-color: #154244;
    color: #FFFFFF;
    border-color: #154244;
}

.spec-description-text {
    font-size: 16px;
    line-height: 1.3
    ;
    color: #333333;
    text-align: right;
}

/* ==========================================================================
   IMAGE LAYOUT GRID ASSEMBLY
   ========================================================================== */
.project-media-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 100%;
    margin: 0 auto 56px auto;
}

.project-media-card {
    width: 100%;
    aspect-ratio: 388 / 250;
    overflow: hidden;
    background-color: #F9F9F9;
}

.project-media-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.215, 0.610, 0.355, 1);
}


.project-media-card:hover img {
    transform: scale(1.04);
}

/* Hard constraints to prevent broken structural boxes */
.project-media-card.hidden-row 
{
    display: none !important;
}

/* Fluid reveal animations for the pagination step blocks */
.dynamic-append-card {
    opacity: 0;
    animation: layoutFadeIn 0.5s cubic-bezier(0.215, 0.610, 0.355, 1) both;
}

@keyframes layoutFadeIn {
    0% {
        opacity: 0;
        transform: translateY(24px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   ACTION BUTTON ELEMENT AND INACTIVE DISABLING
   ========================================================================== */
.gallery-action-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 40px;
}

.btn-gallery-load {
    background-color: #66DCA1;
    color: #113228;
    font-size: 16px;
    font-weight: 600;
    border: none;
    padding: 14px 40px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.215, 0.610, 0.355, 1);
}

.btn-gallery-load:hover {
    background-color: #3bc285;
    transform: translateY(-2px);
}

/* Inactive State Selector Overrides */
.btn-gallery-load.is-inactive,
.btn-gallery-load:disabled {
    background-color: #CBEFDF !important;
    color: #79A391 !important;
    cursor: not-allowed;
    transform: none !important;
}

/* Dynamic Animation Transitions */
.dynamic-append-card {
    opacity: 0;
    animation: subpageReveal 0.6s cubic-bezier(0.215, 0.610, 0.355, 1) both;
}

@keyframes subpageReveal {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

   /* ==========================================================================
   PREVIEW LIGHTBOX MODAL SYSTEM (FIXED SCALING & RESOLUTION)
   ========================================================================== */
.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.92);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.215, 0.610, 0.355, 1);
}

.lightbox-overlay.is-visible {
    opacity: 1;
    pointer-events: auto;
}

/* 🎯 THE FIX: Constrained wrapper to scale down the image display frame */
.lightbox-content {
    width: 100%;
    max-width: auto; /* Forces high-res images to stay at an elegant, scaled-down size */
    height: 980px;
    max-height: 70vh; /* Keeps vertical portrait frames comfortably inside the viewport */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
}

/* Dynamic Aspect-Ratio Layout Engine */
#lightbox-target-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Retains absolute true proportions for portrait/landscape */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
    user-select: none;
    transform: scale(0.96);
    transition: transform 0.4s cubic-bezier(0.215, 0.610, 0.355, 1);
}

.lightbox-overlay.is-visible #lightbox-target-img {
    transform: scale(1);
}

/* UI Interactive Actions UI Layout */
.lightbox-close {
    position: absolute;
    top: 40px;
    left: 40px;
    background: none;
    border: none;
    color: #FFFFFF;
    font-size: 28px;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.lightbox-close:hover {
    opacity: 1;
}

.lightbox-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #3bc285;
    border: none;
    color: #154244;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    font-size: 22px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.3s ease, transform 0.2s ease;
}

.lightbox-arrow:hover {
    background: #35986c;
}

/* Keeps arrows perfectly clear of the scaled content */
.arrow-left { 
    left: 40px; 
}

.arrow-right { 
    right: 40px; 
}

body.lightbox-open {
    overflow: hidden !important;
}

/* Styling state for disabled boundary arrows */
.lightbox-arrow.nav-locked {
    opacity: 0.2;
    cursor: not-allowed;
    background: nonegit;
    pointer-events: none; /* Disables all hovering and accidental click processing */
}

.project-media-card.hidden-row,
.project-media-grid.hidden-pane {
    display: none !important;
}

.dynamic-append-card {
    opacity: 0;
    animation: layoutFadeIn 0.5s cubic-bezier(0.215, 0.610, 0.355, 1) both;
}

@keyframes layoutFadeIn {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

.media-toggle-wrapper {
    display: flex;
    gap: 19px;
    margin: 9px 0 30px 0;
    margin-left: 124px;
    /* margin-bottom: ; */
}

.btn-toggle-tab {
    background: #caebdd;
    color: #0F2D2D;
    border: 0px solid rgba(255, 255, 255, 0.1);
    padding: 10px 24px;
    border-radius: 0px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-toggle-tab.is-active {
    background: #66DCA1 !important;
    color: #000000 !important;
    border-color: #34bd7f;
    font-weight: 600;
}



.btn-toggle-tab:hover {
    background-color: #66DCA1;
    transform: translateY(-1px);
}
.btn-toggle-tab.is-inactive {
    background: #66DCA1 !important;
    color: #000000 !important;
    border-color: #34bd7f;
    font-weight: 900;
}

.video-card video {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    border-radius: 0px;
    background-color: #000000;
    aspect-ratio: 3 / 2;
}

.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.93);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.215, 0.610, 0.355, 1);
}

.lightbox-overlay.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.lightbox-content {
    width: 100%;
    max-width: 960px;
    height: auto;
    max-height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
}

#lightbox-target-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.65);
    user-select: none;
    transform: scale(0.96);
    transition: transform 0.4s cubic-bezier(0.215, 0.610, 0.355, 1);
}

.lightbox-overlay.is-visible #lightbox-target-img {
    transform: scale(1);
}

.lightbox-close {
    position: absolute;
    top: 40px;
    left: 40px;
    background: none;
    border: none;
    color: #FFFFFF;
    font-size: 32px;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.3s ease;
    z-index: 10001;
}

.lightbox-close:hover { 
    opacity: 1; 
}

.lightbox-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #34bd7f;
    border: none;
    color: #154244;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    font-size: 22px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.3s ease, opacity 0.3s ease;
    z-index: 10000;
}

.lightbox-arrow:hover { 
    background: #caebdd; 
}

.arrow-left { 
    left: 40px; 
}

.arrow-right { 
    right: 40px; 
}

.lightbox-arrow.nav-locked {
    opacity: 0.15;
    cursor: not-allowed;
    background: transparent;
    pointer-events: none;
}

body.lightbox-open {
    overflow: hidden !important;
}

@media (max-width: 768px) {
    .lightbox-content {
        max-height: 60vh;
        padding: 0 10px;
    }
    .lightbox-arrow {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }
    .arrow-left { 
        left: 15px; 
    }
    .arrow-right { 
        right: 15px; 
    }
    .lightbox-close { 
        top: 25px; 
        left: 25px; 
        font-size: 26px; 
    }
}

.video-card {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.video-card video {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    border-radius: 0px;
    background-color: #000000;
    aspect-ratio: 3 / 2;
    transition: transform 0.5s cubic-bezier(0.215, 0.610, 0.355, 1);
}

.video-card:hover video {
    transform: scale(1.05);
}

.video-card::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    width: 56px;
    height: 56px;
    background-color: rgba(74, 210, 149, 0.9);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 24px;
    border-radius: 50%;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    transition: transform 0.3s cubic-bezier(0.215, 0.610, 0.355, 1), background-color 0.3s ease;
    z-index: 2;
}

.video-card:hover::after {
    transform: translate(-50%, -50%) scale(1.1);
    background-color: #FFFFFF;
}

#lightbox-target-video {
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.65);
    border-radius: 0px;
    outline: none;
    transform: scale(0.96);
    transition: transform 0.4s cubic-bezier(0.215, 0.610, 0.355, 1);
}

.lightbox-overlay.is-visible #lightbox-target-video {
    transform: scale(1);
}

/* 🎯 Lightbox Stage Viewport */
.lightbox-content {
    position: relative !important;
    overflow: hidden !important; /* Clips items outside the viewport during slide */
    width: 100% !important;
    max-width: 900px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

/* Base Wrapper Container */
#lightbox-target-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
    box-sizing: border-box !important;
    touch-action: pan-y; /* Prevents vertical scroll conflicts */
    user-select: none;
    -webkit-user-select: none;
}

/* Motion State Classes for Horizontal Slide */
.slide-transition {
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease-in-out !important;
    will-change: transform, opacity;
}

.slide-out-left {
    transform: translateX(-100%) !important;
    opacity: 0 !important;
}

.slide-out-right {
    transform: translateX(100%) !important;
    opacity: 0 !important;
}

.slide-in-left {
    transform: translateX(-100%) !important;
    opacity: 0 !important;
}

.slide-in-right {
    transform: translateX(100%) !important;
    opacity: 0 !important;
}

.slide-active {
    transform: translateX(0) !important;
    opacity: 1 !important;
}

/* Hide navigation arrows on mobile if you want touch-only controls */
@media screen and (max-width: 1200px) {
    .lightbox-arrow {
        display: none !important;
    }

    .lightbox-content {
        max-height: 60vh;
        padding: 0 10px;
    }
    .lightbox-arrow {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }
    .arrow-left { 
        left: 15px; 
    }
    .arrow-right { 
        right: 15px; 
    }
    .lightbox-close { 
        top: 25px; 
        left: 25px; 
        font-size: 26px; 
    }


.video-card {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.video-card video {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    border-radius: 8px;
    background-color: #000000;
    aspect-ratio: 3 / 2;
    transition: transform 0.5s cubic-bezier(0.215, 0.610, 0.355, 1);
}

.video-card:hover video {
    transform: scale(1.05);
}

.video-card::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    width: 56px;
    height: 56px;
    background-color: rgba(74, 210, 149, 0.9);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 24px;
    border-radius: 50%;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    transition: transform 0.3s cubic-bezier(0.215, 0.610, 0.355, 1), background-color 0.3s ease;
    z-index: 2;
}

.video-card:hover::after {
    transform: translate(-50%, -50%) scale(1.1);
    background-color: #FFFFFF;
}

#lightbox-target-video {
width: 100%;
    height: auto !important;
    max-width: 100%;
    max-height: 70vh !important;
    object-fit: contain;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.65);
    border-radius: 4px;
    outline: none;
    transform: scale(0.96);
    transition: transform 0.4s cubic-bezier(0.215, 0.610, 0.355, 1);
}

.lightbox-overlay.is-visible #lightbox-target-video {
    transform: scale(1);
}
/* ==========================================================================
   MOBILE UI OVERRIDE: HERO SECTION SPECIFICATIONS
   ========================================================================== */

    
    /* --- 1. SITE HEADER & MOBILE MENU TRIGGER --- */
    .site-header {
        height: 64px;
        background-color: var(--clr-teal-bg);
    }
    
    .site-container.header-inner {
        padding-left: 24px;
        padding-right: 24px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    /* Hide desktop-only components safely */
    .main-navigation, 
    .header-action {
        display: none !important;
    }

    .logo-mark {
    width: auto;
    height: 26px;
}

/* --- 1. SITE HEADER LAYOUT SANITIZATION --- */
    .site-header {
        height: 64px;
        background-color: var(--clr-teal-bg);
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1000;
    }

    /* Target the container housing your elements */
    .site-header .header-inner {
        padding-left: 24px;
        padding-right: 24px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;
        width: 100%;
    }

    /* FORCED MOBILE HIDING: Completely drops desktop structural components out of document flow */
    .site-header .main-navigation,
    .site-header .header-action {
        display: none !important;
    }

    /* 
    ==========================================================================
    Re-inject clean, explicit Hamburger element tracking on the right 
    ==========================================================================
    */
    .site-header .header-inner::after {
        content: '';
        width: 27px;
        height: 21px;
        display: block;
        cursor: pointer;
        z-index: 1001;
        background: linear-gradient(
            to bottom,
            var(--clr-text-white) 0%, var(--clr-text-white) 15%,
            transparent 15%, transparent 42.5%,
            var(--clr-text-white) 42.5%, var(--clr-text-white) 57.5%,
            transparent 57.5%, transparent 85%,
            var(--clr-text-white) 85%, var(--clr-text-white) 100%
        );
        transition: transform 0.2s ease, background 0.1s ease;
    }

    /* --- 2. THE ACTIVE FULLSCREEN DRAWER CONFIGURATION --- */
    /* When active, we re-inject the main navigation element with full viewport authority */
    body.mobile-menu-active .main-navigation {
        display: flex !important;
        flex-direction: column;
        justify-content: space-between; /* Pushes links up top, contact button to bottom */
        
        position: fixed;
        top: 64px; /* Rests precisely below header layout height boundary */
        left: 0;
        width: 100%;
        height: calc(100vh - 64px);
        background-color: var(--clr-teal-bg);
        z-index: 999;
        padding: 32px 24px 110px 24px; /* Generous bottom spacing for phone safety zones */
        box-sizing: border-box;
    }

    body.mobile-menu-active .nav-links-list {
        display: flex;
        flex-direction: column;
        width: 100%;
        list-style: none;
    }

    body.mobile-menu-active .nav-links-list li {
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    }

    /* The Link Line: Built as a sprawling structural block row wrapper asset */
    body.mobile-menu-active .nav-anchor {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 16px 0;
        margin-top: -30px;
        font-size: 19px;
        font-weight: 500;
        color: var(--clr-text-white);
        text-decoration: none;
        transition: color 0.2s ease;
    }

    /* --- ACTIVE STATE INTERACTIONS --- */
    /* Instant tint switch to your signature mint green when active or pressed */
    body.mobile-menu-active .nav-anchor.active-anchor,
    body.mobile-menu-active .nav-anchor:active {
        color: var(--clr-mint-accent) !important;
    }

    /* Right chevron indicator icon tracking */
    body.mobile-menu-active .nav-anchor::after {
        content: '';
        width: 8px;
        height: 8px;
        border-top: 2px solid rgba(255, 255, 255, 0.6);
        border-right: 2px solid rgba(255, 255, 255, 0.6);
        transform: rotate(45deg);
        transition: border-color 0.2s ease;
    }

    body.mobile-menu-active .nav-anchor.active-anchor::after {
        border-color: var(--clr-mint-accent);
    }

    /* --- 3. RE-INJECTING CONTACT BUTTON ON DRAWER FOOTER BASELINE --- */
    /* We build a dedicated button wrapper inside the main-navigation block for mobile */

    body.mobile-menu-active .header-action {
        display: flex !important;
        position: fixed;
        bottom: 162px; /* Matches your drawer's padding bottom spacing */
        left: 24px;
        right: 24px;
        z-index: 1000; /* Sits above main-navigation (z-index: 999) */
    }

    body.mobile-menu-active .header-action .btn-primary-cta {
        content: 'Contact Us';
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 54px;
        background-color: var(--clr-mint-accent);
        color: var(--clr-teal-bg);
        font-size: 20px;
        font-weight: 700;
        text-align: center;
        cursor: pointer;
        transition: transform 0.1s ease;
    }
    
    body.mobile-menu-active .header-action .btn-primary-cta:active {
        transform: scale(0.98); /* Tactile press state feedback on mobile devices */
    }



/* 2. POST-CLICK / FOCUS STATE (After the click is released or while active) */
body.mobile-menu-active .header-action .btn-primary-cta:focus,
body.mobile-menu-active .header-action .btn-primary-cta:visited {
    background-color: var(#50ca8f);          /* Maintains or alters post-click tint */
    outline: none;                                     /* Removes default mobile blue browser outline */
}

    /* --- 4. HAMBURGER TO CLOSE ICON STRUCTURAL TRANSITION --- */
    body.mobile-menu-active .header-inner::after {
        background: transparent; /* Drops center lines */
        transform: rotate(45deg);
        height: 24px;
        width: 24px;
        /* Custom layout execution of a clean, vector "✕" close button grid */
        background-image: 
            linear-gradient(to right, var(--clr-text-white) 0%, var(--clr-text-white) 100%),
            linear-gradient(to bottom, var(--clr-text-white) 0%, var(--clr-text-white) 100%);
        background-position: center center;
        background-size: 100% 2px, 2px 100%;
        background-repeat: no-repeat;
    }


    /* Inject the custom Hamburger icon on the right margin edge */
    .header-inner::after {
        content: '';
        width:27px;
        height: 21px;
        display: block;
        cursor: pointer;
        /* Dynamic 3-line pure CSS asset generation matching your frame */
        background: linear-gradient(
            to bottom,
            var(--clr-text-white) 0%, var(--clr-text-white) 15%,
            transparent 15%, transparent 42.5%,
            var(--clr-text-white) 42.5%, var(--clr-text-white) 57.5%,
            transparent 57.5%, transparent 85%,
            var(--clr-text-white) 85%, var(--clr-text-white) 100%
        );
    }

    /* --- 2. HERO COMPONENT TYPOGRAPHY & BOX MODEL --- */
    .hero-viewport-section {
        padding-top: 48px;
        padding-bottom: 64px; /* Room for the overlapping badge edge */
        background-color: #FFFFFF;
    }

    .hero-viewport-section .site-container {
        padding-left: 24px;
        padding-right: 24px;
        padding-top: 60px;
    }

    .hero-master-headline {
        font-size: 28px;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: -0.02em;
        text-align: center;
        color: var(--clr-dark-heading);
        margin-bottom: 16px;
        display: block; /* Allows natural text wrapping */
    }

    /* --- 3. HERO IMAGE FRAME & OVERLAPPING METRIC BADGE --- */
    .hero-inner-layout {
        position: relative;
        width: 100%;
    }

   .hero-asset-frame {
    position: relative;
    width: 100%;
    height: 25vh; /* Fluid percentage of screen height */
    min-height: 240px; /* Floor limit for tiny devices */
    max-height: 280px; /* Ceiling limit to keep hero content visible */
    border-radius: 0px;
    overflow: hidden;
}

/* IPAD & PORTRAIT TABLETS (601px to 1024px) */
@media (601px <= width <= 1200px) {
    .hero-asset-frame {
        min-height: 420px; /* Prevents frame from looking stubby on iPad */
        max-height: 500px;
    }
}

    .hero-main-display {
        width: 100%;
        height: 100%;
        border-radius: 0px;
        object-fit: cover;
        object-position: center center;
    }

    

    /* Absolute Bottom-Center Floating Logic matching your design layout */
    .metric-accent-badge {
        position: absolute;
        bottom: -28px; /* Pulled exactly halfway outside the lower bounds of the image */
        left: 50%;
        transform: translateX(-50%);
        right: auto;
        margin: 0 !important;
        
        background-color: var(--clr-mint-accent);
        width: calc(100% - 72px); /* Uniform inner side margins inside the container bounds */
        max-width: 196px;
        height: 64px;
        padding: 0 34px;
        
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.06);
        border-radius: 0px; /* Kept straight as per core design language tokens */
        z-index: 10;
    }

    .metric-num {
        font-size: 30px;
        font-weight: 800;
        color: var(--clr-text-white);
        letter-spacing: -0.02em;
        line-height: 1;
    }

    .metric-label-block {
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: left;
        line-height: 1.1;
    }

    .label-meta-top {
        font-size: 8px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        color: var(--clr-dark-meta);
    }

    .label-meta-bold {
        font-size: 16px;
        font-weight: 900;
        letter-spacing: -0.01em;
        color: var(--clr-dark-meta);
    }


  

  /* 
==========================================================================
1. SECTION VIEWPORT CONTAINER RESET 
==========================================================================
*/
.about-viewport-section {
    background-color: #FFFFFF !important;
    padding: 40px 0 !important;
    height: auto !important; /* Fixed: allows height to expand with content naturally */
    overflow: visible !important;
    display: block !important;
}

/* Locks layout securely within your preferred canvas bounds */
.about-viewport-section .site-container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    float: none !important;
    position: relative !important;
}

/* 2. HEADER TYPOGRAPHY CONFIGURATION */
.about-section-header {
    text-align: center !important;
    margin-bottom: 32px !important;
    width: 100% !important;
    float: none !important;
    position: relative !important;
}

.about-main-title {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #000000 !important;
    margin: 0 0 12px 0 !important;
    width: 100% !important;
}

.about-header-lead {
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #7A7A7A !important;
    margin: 0 !important;
    padding: 0 8px !important;
}

/* Strips desktop formatting to let sentences flow fluidly on mobile screens */
.about-header-lead br,
.concept-card-title br,
.concept-card-body br {
    display: none !important;
}

/* 3. BENTO RESET: Standardizes layout downward */
.about-bento-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important; 
    width: 100% !important;
    height: auto !important;
    float: none !important;
    position: relative !important;
    padding-bottom: 15px !important;
}

/* 4. MASTER CARD COMPONENT (.concept-feature-card) */
.concept-feature-card {
    background-color: #EBF1F1 !important;
    padding: 22px !important;
    border-radius: 0px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important; /* Fixed: Forces all flex children to stretch edge-to-edge */
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
    margin: 0 0 8px 0 !important;
    gap: 20px !important;
}

/* Image Wrapper Frame Container */
.concept-image-frame {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    /* height: auto !important; */
    aspect-ratio: 4 / 3 !important; 
    overflow: hidden !important;
    background: transparent !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    clip-path: polygon(60px 0%, 100% 0%, 100% calc(100% - 40px), calc(100% - 60px) 100%, 0% 100%, 0% 40px) !important;
}

/* 📐 D'NESTA SIGNATURE ASYMMETRIC PICTURE CLIP */
.concept-display-img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: cover !important;
}

.concept-content-block {
    width: 100% !important;
    padding-top: 0 !important;
    text-align: left !important;
    box-sizing: border-box !important;
}

.concept-card-title .title-row {
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: #000000 !important;
    display: block !important;
    margin: 0 0 16px 0 !important;
}

.concept-card-body {
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #333333 !important;
    margin: 0 0 24px 0 !important;
}

/* Flat Square Dark Pine Green CTA Button Link */
.concept-content-block .btn-secondary-cta {
    display: inline-block !important;
    background-color: #154244 !important;
    color: #FFFFFF !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 16px 28px !important;
    text-decoration: none !important;
    border-radius: 0px !important;
    text-align: center !important;
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* ACTIVE STATE (The Moment You Click/Tap) */
.concept-content-block .btn-secondary-cta:active {
    background-color: #66DCA1 !important; /* Accent mint background on click */
    transform: scale(0.98) !important;    /* Tactile press response */
}

   /* ==========================================================================
   5. METRICS INTERFACES MATRIX GRID (.metrics-grid-aside) - MOBILE
   ========================================================================== */
.metrics-grid-aside {
    display: flex !important;
    flex-wrap: wrap !important; 
    column-gap: 12px !important;      
    row-gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important; 
    min-height: 0 !important;
    max-height: none !important;
}

/* 2. BASE CARD STYLE DEFAULTS */
.metric-data-card,
.metric-data-card-1,
.metric-data-card-2,
.metric-data-card-3 {
    background-color: #EBF1F1 !important;
    padding: 16px 21px !important; 
    border-radius: 0px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    
    flex-grow: 0 !important;
    flex-shrink: 1 !important; /* 🎯 Allow shrinking if necessary on tiny screens */
    min-width: 0 !important;    
    box-sizing: border-box !important;
    min-height: 110px !important; 
    height: auto !important;
}

/* ROW 1 */
.metric-data-card {
    width: calc(53% - 6px) !important; 
}
.metric-data-card-1 {
    width: calc(47% - 6px) !important; 
}

/* ROW 2 */
.metric-data-card-2 {
    width: calc(58% - 6px) !important; /* Adjusted slightly to give card-3 more breathing room */
}
.metric-data-card-3 {
    width: calc(42% - 6px) !important; 
}

/* --- TYPOGRAPHY STABILITY OVERRIDES --- */
.metric-num-display {
    font-size: 32px !important; /* Scaled down slightly to fit 320px screens */
    font-weight: 800 !important;
    color: #0E383A !important;
    line-height: 1 !important;
    margin: 0 0 6px 0 !important;
    display: block !important;
}

.metric-label-display {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #000000 !important;
    line-height: 1.2 !important;
    display: block !important;
    white-space: normal !important; /* 🎯 FIX: Allows multi-line wrap on narrow screens */
    word-break: break-word !important; /* 🎯 FIX: Prevents overflow outside card bounds */
}

    /* ==========================================================================
   MOBILE UI RESPONSIVENESS: FOUNDATION SECTION (TEAM DESIGN STYLE MAPPING)
   ========================================================================== */
   /* 1. OUTER SECTION VIEWPORT CONTAINER */
    .foundation-viewport-section {
        background-color:#E6EFEE !important; 
        padding: 40px 0 !important;          
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;       
        display: block !important;
        padding-top: 400px;
    }

    .foundation-viewport-section .site-container {
        width: 100% !important;
        max-width: 100% !important;       
        padding-left: 22px !important;      
        padding-right: 22px !important;
        margin: 0 auto !important;          
        box-sizing: border-box !important;  
        float: none !important;
        position: relative !important;
    }

    /* 3. SECTION HEADER TYPOGRAPHY */
    .foundation-section-header {
       text-align: center !important;
        margin-bottom: 32px !important; 
        padding: 0 22px !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    .foundation-main-title {
        font-size: 28px !important;
        font-weight: 700 !important;
        color: #000000 !important;
        margin: 0 0 12px 0 !important;
        
    }

    .foundation-header-lead {
        font-size: 14px !important;
        line-height: 1.5 !important;
        color: #000000 !important;
        margin: 0 !important;
        max-width: 100% !important;
        
    }

    /* 4. THE ROW CARDS WRAPPER STACK STYLING */
    .foundation-rows-stack {
        
        display: flex !important;
        flex-direction: column !important;     /* Direct vertical layout stack */
        gap: 22px !important;                   /* Space layout gap between cards */
        width: 100% !important;
        max-width: 100% !important;
        padding-bottom: 10px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* 5. INDIVIDUAL ROW CARD OVERRIDES */
    .foundation-row-card {
        display: flex !important;
        flex-direction: column !important;   /* Force image to stack directly over text */
        background-color: #FFFFFF !important; /* Crisp white interior panel surface */
        width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
        box-sizing: border-box !important;
        
        /* Destroys desktop grid tracks completely */
        grid-template-columns: none !important; 
        
        /* Deactivates scroll-linked desktop timeline animations entirely */
        animation: none !important;
        view-timeline-name: none !important;
        animation-timeline: none !important;
    }

    /* 6. IMAGE FRAME & RESPONSIVE LOCK */
    .foundation-image-block {
        width: 100% !important;
        max-width: 100% !important;
        height: 240px !important; /* Clean, dedicated mobile height aspect ratio */
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    .foundation-row-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        transform: none !important; /* Prevents hover scale data leaking */
    }

    /* 7. CONTENT BLOCKS AND TYPOGRAPHY DETAILS */
    .foundation-content-block {
        width: 100% !important;
        max-width: 100% !important;
        padding: 24px 20px !important; /* Clean, even text breathing space */
        box-sizing: border-box !important;
        text-align: left !important;
    }

    .foundation-card-title {
        font-size: 22px !important;
        font-weight: 700 !important;
        color: #000000 !important;
        margin: 0 0 12px 0 !important;
    }

    .foundation-card-body {
        font-size: 14px !important;
        line-height: 1.5 !important;
        color: #333333 !important;
        margin: 0 !important;
    }

    .values-detailed-list li {
        font-size: 14px !important;
        line-height: 1.4 !important;
        color: #333333 !important;
    }

    /* ==========================================================================
   MOBILE UI RESPONSIVENESS: OUR SERVICES PORTABLE SWIPER
   ========================================================================== */
/* 1. VIEWPORT & CONTAINER ADJUSTMENTS */
   .services-viewport-section {
        background-color: #FFFFFF !important; /* Ensures the header background remains clean white */
        padding-top: 80px !important;
        padding-bottom: 0 !important;         /* Handled by the tray below */
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        display: block !important;
    }

    /* 2. THE TOP CONTAINER (Holds Header Text) */
    .services-viewport-section > .site-container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 22px !important;
        padding-right: 22px !important;
        box-sizing: border-box !important;
    }

    .services-section-header {
        text-align: center !important;
        margin-bottom: 32px !important;       /* The exact gap before the color tray begins */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .services-main-title {
        font-size: 28px !important;
        font-weight: 700 !important;
        margin-bottom: 12px !important;
    }

    .about-header-lead {
        font-size: 14px !important;
        line-height: 1.5 !important;
        color: #000 !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    .services-color-tray {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
    }

    /* Neutralize desktop container limits inside the color tray */
    .services-color-tray .site-container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 2. THE HORIZONTAL SWIPE TRACK
       Uses a sharp clip-path so cards disappear cleanly under the 22px left padding.
    */
    .services-desktop-grid {
        display: flex !important;
        position: relative !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        
        padding-left: 22px !important;
        padding-right: 0px !important;
        scroll-padding-left: 22px !important;
        
        gap: 16px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        
        /* Razor-sharp edge: cuts off any scrolled content before the 22px padding mark */
        clip-path: inset(0 0 0 22px) !important; 
        
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    .services-desktop-grid::-webkit-scrollbar {
        display: none !important;
    }

    /* Creates a trailing padding spacer on the far right of the scroll track */
    .services-desktop-grid::after {
        content: '' !important;
        flex: 0 0 22px !important;
        display: block !important;
    }

    /* 3. THE CARD MECHANICS (Perfect Mirror of your Desktop Logic) */
    .service-custom-card {
        flex: 0 0 min(78%, 320px)!important; /* Width is 78% of mobile viewport 
        */
        max-width: 320px !important;
        scroll-snap-align: start !important;
        padding: 30px 30px !important; /* Mobile-optimized card padding */
        
        /* Keep your exact desktop aspect-ratio and clip-path */
        aspect-ratio: auto !important; 
        clip-path: polygon(60px 0%, 100% 0%, 100% calc(100% - 40px), calc(100% - 60px) 100%, 0% 100%, 0% 40px) !important;
        
        /* Clear desktop hover transforms */
        transform: none !important;
        margin: 0 !important;
    }

    .services-desktop-grid .scroll-spacer {
        flex: 0 0 22px !important;
        width: 22px !important;
        min-width: 22px !important;
        height: 1px !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* When expanded by your JS, break the aspect-ratio exactly like on desktop */
    .service-custom-card.is-expanded-card {
        aspect-ratio: auto !important; /* Forces the card height to transition smoothly with the text wrapper */
    }

    /* 4. INNER CARD TEXT WRAPPER
       Maintains your desktop's exact cubic-bezier timing of 0.4s.
    */
    .service-expand-wrapper {
        max-height: 48px; /* No !important: allows JS inline styles to scale it */
        overflow: hidden !important;
        margin-bottom: 16px !important;
        
        /* Match your desktop timing and JS 400ms delay perfectly */
        transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
        will-change: max-height;

        /* 🎯 THE SMOOTHNESS FIX: Forces the browser to handle the animation on the GPU */
        -webkit-backface-visibility: hidden !important;
        backface-visibility: hidden !important;
        transform: translate3d(0, 0, 0) !important;
    }

    /* 5. TYPOGRAPHY & ASSETS */
    .service-vector {
        height: 55px !important; 
        width: auto !important;
        transform: none !important; 
    }

    .service-card-title {
        font-size: 22px !important;
        margin-bottom: 10px !important;
        margin-top: 6px;
    }

    .service-card-body-text {
       font-size: 15px !important;
        
        /* 🎯 THE RIGID LINE HEIGHT FIX: Use a fixed pixel-based height (13px * 1.45 ≈ 19px) */
        line-height: 20px !important; 
        
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;

        /* 🎯 PREVENTS MOTION BLUR: Keeps text sub-pixels from moving during rendering */
        -webkit-transform: translateZ(0) !important;
        transform: translateZ(0) !important;
    }

    .btn-service-toggle {
        font-size: 14px !important;
        margin-top: 12px !important;
    }

    .services-scroll-indicator {
        display: flex !important;
        justify-content: center;
        align-items: center;
        gap: 8px;
        margin-top: 24px;
        width: 100%;
    }

    /* 2. THE BASE DOT DESIGN */
    .indicator-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.4); /* Subdued light green/white against deep green */
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        cursor: pointer;
    }

    /* 3. THE ACTIVE DOT DESIGN (Turns full bright white and stretches slightly) */
    .indicator-dot.active {
        background-color: #154244;
        width: 18px; /* Subtle stretch effect to show active position */
        border-radius: 4px;
    }

    /* ==========================================================================
   TEAM SECTION - MOBILE MEDIA QUERY
   ========================================================================== */
   .team-viewport-section {
        padding-top: 80px !important;
        padding-bottom: 0 !important;
        width: 100% !important;
        overflow: hidden !important; /* Prevents horizontal page spilling */
    }
    .team-viewport-section > .site-container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 22px !important;
        padding-right: 22px !important;
        box-sizing: border-box !important;
    }


    /* 2. FORCE COLOR TRAY TO FILL THE MOBILE VIEWPORT EXCLUSIVELY */
    .team-color-tray {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
        width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* 3. SNAP CONTAINER TO THE PHONE GLASS EDGES */
    .team-color-tray .site-container {
        width: 100% !important;
        max-width: 100% !important; /* Completely overrides desktop constraints */
        padding-left: 22px !important; /* Safe margin from the left edge */
        padding-right: 22px !important; /* Safe margin from the right edge */
        margin: 0 auto !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* Centers the card deck within the phone borders */
    }

    /* 4. DEFINE CRISP CARD WIDTHS RELATIVE TO MOBILE VIEWPORT */
.team-desktop-grid {
    display: grid !important;
    /* Automatically creates as many 280px columns as fit, then stretches them proportionally */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 24px !important;
    width: 100% !important;
    max-width: 1200px !important; /* Removes 340px limit to allow iPad/Desktop width expansion */
    margin: 0 auto !important;
    padding: 0 22px !important;
    box-sizing: border-box !important;
}

    /* 5. PORTRAIT CARD DESIGN */
    .team-profile-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 16px 22px !important;
        transform: none !important;
        box-sizing: border-box !important;
    }
    
    .team-image-frame {
        width: 100% !important;
        aspect-ratio: 1 / 1 !important; 
        margin-bottom: 16px !important;
        clip-path: polygon(30px 0%, 100% 0%, 100% calc(100% - 20px), calc(100% - 30px) 100%, 0% 100%, 0% 20px) !important;
    }

    .team-portrait-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    
    .team-section-header {
        margin-bottom: 32px !important;
        padding: 0 22px !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    .team-main-title {
        font-size: 28px !important;
        margin-bottom: 12px !important;
    }

    .team-header-lead {
        font-size: 14px !important;
        line-height: 1.5 !important;
        width: 100% !important;
        color: #000 !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    .team-meta-details {
        padding-bottom: 12px !important;
    }

    .team-member-name {
        font-size: 16px !important;
        margin-bottom: 6px !important;
    }

    .team-member-role {
        font-size: 13px !important;
    }

   /* ==========================================================================
   PROJECTS SECTION (MOBILE & RESPONSIVE)
   ========================================================================== */

.projects-viewport-section {
    background-color: #FFFFFF !important;
    padding-top: 80px !important;
    padding-bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    display: block !important;
}

.projects-viewport-section > .site-container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
    box-sizing: border-box !important;
}

.projects-section-header {
    text-align: center !important;
    margin-bottom: 32px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.projects-main-title {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #000000 !important;
    margin: 0 0 12px 0 !important;
}

.projects-header-lead {
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #000000 !important;
    margin: 0 !important;
    max-width: 100% !important;
}

.projects-color-tray {
    background-color: #BCD2D3 !important; 
    padding-top: 40px !important;
    padding-bottom: 40px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.slider-outer-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 32px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* SLIDER CONTAINERS */
.projects-slider-window {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important; /* Clips card 2 sideways */
    position: relative !important;
    touch-action: pan-x pan-y !important; 
}

.projects-slider-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
    will-change: transform;
    
}

.project-display-card {
    flex: 0 0 100% !important; 
    min-width: 100% !important;
    max-width: 100% !important;
    background-color: #FFFFFF !important;
    padding: 22px !important;
    border-radius: 0px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 22px !important;
}

/* CARD INNER ELEMENTS */
.project-image-frame {
    display: block !important;
    width: 100% !important;
    height: 190px !important;
    overflow: hidden !important;
    margin: 0 !important;
    clip-path: polygon(60px 0%, 100% 0%, 100% calc(100% - 40px), calc(100% - 60px) 100%, 0% 100%, 0% 40px);
}

.project-card-img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: cover !important;
}

.project-info-block {
    width: 100% !important;
    text-align: left !important;
    margin-left: -2px;
}

.project-tag {
    font-size: 14px !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
}

.project-card-title {
    font-size: 20px !important;
    font-weight: 800 !important;
    margin-bottom: 12px !important;
}

.project-card-body {
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin-bottom: 20px !important;
}

.project-meta-data {
    display: flex !important;
    flex-direction: row !important;
    gap: 20px !important;
    margin-bottom: 20px !important;
}

.meta-item {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 12px !important;
}

.btn-project-link {
    display: inline-block !important;
    width: auto !important;
    padding: 12px 28px !important;
    font-size: 14px !important;
    border-radius: 0px !important;
    background-color: #154244 !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
}

.btn-project-link:active {
    background-color: #66DCA1 !important;
    transform: scale(0.98) !important;
}

/* NAVIGATION & DOTS */
.slider-nav-container {
    display: none !important;
}

.slider-dots-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 0px !important; /* Fixed empty px syntax */
    width: 100% !important;
}

.slider-dots-container .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(30, 62, 59, 0.3);
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    cursor: pointer;
}

.slider-dots-container .dot.active {
    width: 18px;
    border-radius: 20px;
    background-color: #154244;
}

.projects-slider-window {
    width: 100% !important;
    overflow-x: auto !important; /* Enables horizontal trackpad/touch scrolling */
    scroll-snap-type: x mandatory !important; /* Snaps perfectly card by card */
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important; /* Hides scrollbar on Firefox */
}

/* Hide scrollbar on Chrome, Safari, and Edge */
.projects-slider-window::-webkit-scrollbar {
    display: none !important;
}

.projects-slider-track {
    display: flex !important;
    width: 100% !important;
}

.project-display-card {
    flex: 0 0 100% !important;
    min-width: 100% !important;
    scroll-snap-align: start !important; /* Forces card to align to the window edge */
}

   /* ==========================================================================
FAQ SECTION (MOBILE & RESPONSIVE)
   ========================================================================== */

.faq-viewport-section {
    background-color: #FFFFFF !important;
    padding-top: 80px !important;
    padding-bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    display: block !important;
}

.faq-viewport-section > .site-container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
    box-sizing: border-box !important;
}

.faq-section-header {
    text-align: center !important;
    margin-bottom: 32px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.faq-main-title {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #000000 !important;
    margin: 0 0 12px 0 !important;
}

.faq-header-lead {
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #000000 !important;
    margin: 0 !important;
    max-width: 100% !important;
}

.faq-color-tray {
    background-color: #BCD2D3 !important; 
    padding-top: 40px !important;
    padding-bottom: 40px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.faq-dual-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    width: 100% !important;
    max-width: 100% !important; /* Overrides site-container constraints */
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Accordion Stack */
.faq-accordion-stack {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
}

.faq-accordion-item {
    width: 100% !important;
    background-color: #FFFFFF !important;
    border-radius: 0px !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
}

/* Trigger Bar Button */
.faq-trigger-bar {
    width: 100% !important;
    height: 58px;
    background: none !important;
    border: none !important;
    padding-left: 2px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    text-align: left !important;
    cursor: pointer !important;
    gap: 16px !important;
    box-sizing: border-box !important; /* Fixes padding overflow */
}

.faq-question-text {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #101010 !important;
    line-height: 1.2 !important;
}

/* Status Icon (+ / × indicator) */
.faq-status-icon {
    position: relative;
    width: 10px;
    height: 10px;
    display: inline-block;
    flex-shrink: 0;
    
}

/* Render CSS '+' icon */
.faq-status-icon::before,
.faq-status-icon::after {
    content: '';
    position: absolute;
    background-color: #101010;
    transition: transform 0.3s ease;
}

.faq-status-icon::before {
    top: 6px;
    left: 0;
    width: 14px;
    height: 1.5px;
}

.faq-status-icon::after {
    top: 0;
    left: 6px;
    width: 1.5px;
    height: 14px;
}

/* Rotate '+' into '×' when expanded */
.faq-accordion-item.active .faq-status-icon::after {
    transform: rotate(90deg);
}

.faq-accordion-item.active .faq-status-icon {
    transform: rotate(0deg);
}

/* Accordion Expand Panel */
.faq-panel-expand {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0, 1, 0, 1);
}

.faq-accordion-item.active .faq-panel-expand {
    max-height: 300px; /* Expands to accommodate content */
    transition: max-height 0.35s ease-in-out;
}

.faq-panel-content {
    padding: 0 20px 20px 18px !important;
}

.faq-panel-content p {
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    color: #666666 !important;
    margin: 0 !important;
}

/* Billboard CTA Card */
.faq-billboard-card {
    background-color: #FFFFFF !important;
    padding: 32px 24px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.faq-billboard-icon-wrapper {
    margin-bottom: 16px !important;
}

.faq-chat-custom-icon {
    width: 40px;
    height: auto;
    display: block;
}

.faq-billboard-title {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #101010 !important;
    line-height: 1.25 !important;
    margin-bottom: 12px !important;
}

.faq-billboard-text {
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #555555 !important;
    margin-bottom: 24px !important;
}

.btn-faq-billboard-cta {
    display: inline-block !important;
    background-color: #154244 !important;
    color: #FFFFFF !important;
    padding: 16px 28px !important;
    text-decoration: none !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}

.btn-faq-billboard-cta:active {
    background-color: #3bc285 !important;
    transform: scale(0.98) !important; 
}

/* ==========================================================================
   CTA BANNER SECTION STYLES
   ========================================================================== */

.cta-banner-section {
    width: 100% !important;
    max-width: 100% !important;
    padding: 80px 0 !important;
    
    background-color: #FFFFFF !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.cta-banner-section > .site-container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Gradient Container Card */
.cta-gradient-card {
    background: linear-gradient(135deg, #50C878 0%, #348E7B 35%, #185253 75%, #123D3F 100%) !important;
    padding: 40px 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Inner Centered Wrapper */
.cta-content-wrapper {
    max-width: 520px !important;
    margin: 0 auto !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* Section Title */
.cta-master-title {
    color: #FFFFFF !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    margin-bottom: 16px !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* Lead Paragraph */
.cta-description-text {
    color: rgba(255, 255, 255, 0.95) !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    margin: 0 0 28px 0 !important;
    font-weight: 400 !important;
}

/* Button Container */
.cta-action-block {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
}

/* Solid White Mail Button */
.btn-banner-mail-cta {
    display: inline-block !important;
    background-color: #FFFFFF !important;
    color: #154244 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
    padding: 16px 28px !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    transition: background-color 0.2s ease, transform 0.2s ease !important;
    border-radius: 0px !important;
    box-sizing: border-box !important;
}

.btn-banner-mail-cta:active {
    background-color: #66DCA1 !important;
    transform: scale(0.98) !important;
    color: #FFFFFF !important;
}

/* ==========================================================================
   FOOTER SECTION MOBILE STYLES
   ========================================================================== */

.site-footer-wrapper {
    background-color: #123D3F !important;
    color: rgba(255, 255, 255, 0.75) !important;
    padding: 40px 0 40px 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.site-footer-wrapper > .site-container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

/* Metadata Vertical Stack on Mobile */
.footer-meta-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 28px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 0px;
}

.footer-grid-col {
    text-align: left !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.footer-grid-col p {
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: rgba(255, 255, 255, 0.75) !important;
    margin: 0 !important;
    text-align: left !important;
}

/* Inline Links */
.footer-inline-links {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
}

.footer-inline-links a,
.footer-interactive-link {
    color: rgba(255, 255, 255, 0.75) !important;
    text-decoration: none !important;
    font-size: 14px !important;
    transition: color 0.2s ease !important;
}

.footer-inline-links a:hover,
.footer-interactive-link:hover {
    color: #50C878 !important;
}

/* Divider Line */
.footer-structural-divider {
    border: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
    margin: 32px 0 32px 0 !important;
    width: 100% !important;
}

/* Branding & Logo Block */
.footer-branding-block {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.footer-brand-anchor {
    width: 100% !important;
    max-width: 280px !important;
    margin-bottom: 12px !important;
}

.footer-brand-logo-img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

.footer-tagline-text {
    font-size: 13px !important;
    color: #50C878 !important;
    font-weight: 500 !important;
    margin: 0 !important;
    letter-spacing: 0.02em !important;
}

/* Fixed: Wrapped inside @media query and added missing dot (.) */
@media (min-width: 768px) {
    .footer-meta-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 24px !important;
    }

    .footer-brand-anchor {
        max-width: 360px !important;
    }
}

/* ==========================================================================
   MOBILE RESPONSIVE STYLES (PROJECTS BODY)
   ========================================================================== */

  /* Lock Viewport Boundary */
    html, body {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Container Overrides & Margins */
    .portfolio-subpage-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        padding-top: 80px !important; 
        padding-bottom: 60px !important;
    }

    .site-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
    }

   
    .portfolio-intro-deck {
        width: 100% !important;
        padding-top: 30px !important; 
        padding-bottom: 20px !important;
        text-align: center !important;
    }

    .portfolio-master-title {
        display: block !important;
        visibility: visible !important;
        font-size: 30px !important;
        font-weight: 700 !important;
        color: #111111 !important;
        margin-top: 0 !important;
        margin-bottom: 10px !important;
        text-align: center !important;
    }

    .portfolio-header-lead {
        font-size: 15px !important;
        line-height: 1.5 !important;
        color: #747272 !important;
        text-align: center !important;
        margin: 0 auto !important;
    }

    /* Project Spec Header */
    .project-spec-showcase {
        width: 100% !important;
        padding-top: 10px !important;
    }

    .project-spec-header {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        margin: 0 0 24px 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .spec-meta-left,
    .spec-meta-right {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .spec-tag {
        font-size: 14px !important;
        margin-bottom: 6px !important;
    }

    .spec-title {
        font-size: 26px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        margin-bottom: 12px !important;
    }

    .spec-logistics {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    .meta-item {
        font-size: 13px !important;
    }

    /* Toggle Buttons */
    .media-toggle-wrapper {
        display: flex !important;
        gap: 12px !important;
        margin: 14px 0 0 0 !important;
    }

    .btn-toggle-tab {
        padding: 8px 20px !important;
        font-size: 14px !important;
    }

    /* Description Text */
    .spec-description-text {
        font-size: 14px !important;
        line-height: 1.5 !important;
        margin-top: 20px !important;
        text-align: left !important;
        color: #000 !important;
    }

    /* Single Column Media Grid */
    .project-media-grid {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
        gap: 16px !important;
        width: 100% !important;
        margin: 0 0 32px 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .project-media-card {
        width: 100% !important;
        aspect-ratio: 388 / 250 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        border-radius: 0px !important;
    }

    .project-media-card img,
    .project-media-card video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 0px !important; /* Clears any image/video border-radius */
       -webkit-border-radius: 0px !important;
    }

    /* Action / Load More Button */
    .gallery-action-wrapper {
        width: 100% !important;
        padding: 0 !important;
        margin-top: 24px !important;
    }

    .btn-gallery-load {
        width: 100% !important;
        padding: 16px 0 !important;
        font-size: 15px !important;
        text-align: center !important;
    }


}