@import url('./utilities.css');

:root {
    /* Colors */
    --color-bg-primary: #c3fe0c;
    /* Chartreuse Background */
    --color-accent: #090d1b;
    /* Dark Navy Accent */
    --color-text-primary: #090d1b;
    /* Dark text for chartreuse bg */
    --color-text-secondary: #090d1b;
    /* Dark text */
    --color-card-bg: #f7fbf8;
    /* Off-white for card */
    --color-card-text: #090d1b;
    /* Dark text for card */
    --color-dark-section: #1e1e1e;
    /* Node 26:333 Background */
    --color-light-text: #ffffff;
    /* Text on dark section */

    /* Fonts */
    --font-heading: 'Unbounded', sans-serif;
    --font-body: 'Outfit', sans-serif;
    /* Substitution for Roobert */

    /* Typography Scale */
    --text-xs: 14px;
    --text-sm: 16px;
    --text-base: 18px;
    --text-lg: 20px;
    --text-xl: 24px;
    --text-2xl: 30px;
    --text-3xl: 36px;
    --text-4xl: 40px;
    --text-5xl: 50px;
    --text-6xl: 60px;

    /* Spacing */
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 32px;
    --spacing-xl: 64px;

    /* Global Footer Variables (Default Dark) */
    --footer-bg: #1e1e1e;
    --footer-divider: #898989;
    --footer-divider-opacity: 0.3;
    --footer-name-color: #898989;
    --footer-text-color: #f7fbf8;
    --footer-link-hover: #e0e0e0;
}


/* FORCE DESKTOP FOOTER FIX (High Specificity - Top Injection) */
@media (min-width: 1025px) {
    .site-footer {
        background-color: var(--footer-bg) !important;
        position: relative !important;
        z-index: 99 !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding-bottom: 48px !important;
        box-sizing: border-box !important;
    }

    .footer-divider {
        width: 100% !important;
        height: 1px !important;
        background-color: var(--footer-divider) !important;
        opacity: var(--footer-divider-opacity) !important;
        margin-bottom: 48px !important;
        display: block !important;
    }

    .site-footer .footer-content {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding-left: 96px !important;
        padding-right: 96px !important;
        gap: 0 !important;
        width: 100% !important;
        max-width: 1440px !important;
        box-sizing: border-box !important;
    }

    .site-footer .footer-contact {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        width: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        gap: 8px !important;
    }

    .site-footer .footer-links {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 72px !important;
        width: auto !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .footer-link,
    .footer-link-social,
    .footer-email {
        display: inline-block !important;
        padding-left: 0 !important;
        width: auto !important;
        color: var(--footer-text-color) !important;
        font-family: var(--font-body) !important;
        font-size: 24px !important;
        text-decoration: none !important;
        line-height: 1.35 !important;
        position: relative !important;
        padding-bottom: 2px !important;
        transition: color 0.3s ease !important;
    }

    .footer-link:hover,
    .footer-link-social:hover,
    .footer-email:hover {
        color: var(--footer-link-hover) !important;
    }

    .footer-link::after,
    .footer-link-social::after,
    .footer-email::after {
        content: '' !important;
        position: absolute !important;
        bottom: -2px !important;
        left: 0 !important;
        width: 100% !important;
        height: 1.5px !important;
        background-color: var(--footer-link-hover) !important;
        transform: scaleX(0) !important;
        transform-origin: right !important;
        transition: transform 0.45s cubic-bezier(0.19, 1, 0.22, 1) !important;
    }

    .footer-link:hover::after,
    .footer-link-social:hover::after,
    .footer-email:hover::after {
        transform: scaleX(1) !important;
        transform-origin: left !important;
    }

    .footer-name {
        color: var(--footer-name-color) !important;
        font-family: var(--font-body) !important;
        font-size: 24px !important;
        line-height: 1.24 !important;
        margin: 0 !important;
    }

    .footer-email {
        line-height: 1.24 !important;
    }

    .link-arrow {
        display: none !important;
    }
}

* {
    box-sizing: border-box;
}

#webgl-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* Reach the dark section edge (~1400px coverage) while being an absolute background */
    height: 1400px; 
    z-index: 0;
    pointer-events: none;
    transition: opacity 1s cubic-bezier(0.27, 0, 0.51, 1);
    opacity: 1; 
}

@media (max-width: 1024px) {
    #webgl-container {
        height: 1200px;
    }
}

@media (max-width: 767px) {
    #webgl-container {
        height: 1200px;
    }
}

/* Spacer to maintain the exact design heights previously set for the hero frame */
.hero-spacer {
    width: 100%;
    height: 700px;
    position: relative;
    z-index: 10;
}

@media (max-width: 1024px) {
    .hero-spacer {
        height: 500px;
    }
}

@media (max-width: 767px) {
    .hero-spacer {
        height: 450px;
    }
}

html {
    scroll-behavior: smooth;
    background-color: #1e1e1e;
    transition: background-color 0.8s cubic-bezier(0.27, 0, 0.51, 1);
}

body {
    transition: background-color 0.8s cubic-bezier(0.27, 0, 0.51, 1);
}

/* 
   Home Page: Top overscroll is chartreuse, bottom is dark green 
*/
body.home-page {
    background-color: #c3fe0c !important;
}

#page-transition-curtain {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 10000;
    pointer-events: none;
    transform: translateX(-100%);
    background-color: #c3fe0c;
}

/* LaHaus Page: All-white overscroll */
html:has(.designops-page) {
    background-color: #f7fbf8 !important;
}

/* On mobile, override with pure white so no tinted gap appears */
@media (max-width: 767px) {
    html:has(.designops-page) {
        background-color: #ffffff !important;
    }
}

body {
    margin: 0;
    -webkit-overflow-scrolling: touch;
    /* Ensure smooth momentum scroll */
}

.main-container {
    width: 100%;
    overflow-x: hidden;
    /* Constrain horizontal overflow only on the wrapper */
    position: relative;
}

body.designops-page {
    background-color: #f7fbf8 !important;
}

/* Main container */
.main-container {
    background-color: transparent !important;
    position: relative;
    z-index: 1;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* Body Background Logic:
   Top (Hero): Green (#c3fe0c) to back the WebGL and Text.
   Bottom (Rest): Dark (#1e1e1e) to prevent green bleed in footer gap.
*/
body {
    margin: 0;
    padding: 0;
    font-family: var(--font-body);
    /* Gradient REMOVED: Body is solid Green (#c3fe0c) for Section 1 background */
    background-color: var(--color-bg-primary);
    background-image: none;
    /* background: linear-gradient(...) removed */
    color: #090d1b;
    width: 100vw;
    overflow-x: hidden;
    position: relative;
    /* Ensure body is a positioning context if needed */
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    cursor: none;
    /* Custom cursor */
}

a {
    text-decoration: none;
    color: inherit;
    cursor: none;
    /* Custom cursor override */
}

/* Custom Cursor (Dot) */
#cursor-reticle {
    width: 8px;
    height: 8px;
    background-color: #ffffff;
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 10000;
    transform: translate(-50%, -50%);
    mix-blend-mode: difference;
    transition: transform 0.25s cubic-bezier(0.19, 1, 0.22, 1);
}

/* Hide custom cursor on touch devices */
@media (hover: none) and (pointer: coarse) {
    #cursor-reticle {
        display: none !important;
    }
}

/* #webgl-container second definition removed — consolidated above */

/* Consistently define .main-container as full width */
.main-container {
    position: relative;
    width: 100%;
    /* max-width: 1440px moved to individual sections to allow full-width backgrounds */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease-in-out;
}

/* Global Header & Overlay Nav */
.header-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 8px;
    /* updated from 16px to 8px */
    box-sizing: border-box;
    z-index: 100;
}

.header-pill {
    background-color: #eeeff3;
    border-radius: 5px;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.3);
    height: 80px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
    box-sizing: border-box;
}

.brand {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}

.nuxx-logo-img {
    width: 100%;
    height: 100%;
    display: block;
}

.header-nav-desktop {
    display: flex;
    gap: 64px;
    align-items: center;
}

.nav-link {
    font-family: 'Roobert', var(--font-body);
    font-weight: 600;
    font-size: 18px;
    line-height: 1.35;
    color: #1e1e1e;
    text-decoration: none;
    position: relative;
    padding-bottom: 2px;
    transition: color 0.3s ease;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 1.5px;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.45s cubic-bezier(0.19, 1, 0.22, 1);
}

.nav-link:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.nav-link:hover {
    color: #000;
}

.mobile-menu-toggle {
    display: none;
    background: transparent;
    border: none;
    flex-direction: column;
    gap: 8px;
    cursor: pointer;
    padding: 0;
}

.menu-line {
    width: 26px;
    height: 3px;
    background-color: #1e1e1e;
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #1e1e1e;
    z-index: 200;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Center links vertically */
    box-sizing: border-box;
    transform: translateY(-100%);
    transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
    overflow: hidden;
    /* Prevent overflow/scrolling */
}

.mobile-menu-overlay.active {
    transform: translateY(0);
}

.mobile-menu-close {
    position: absolute;
    top: 32px;
    right: 32px;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 201;
}

.close-line {
    position: absolute;
    width: 25px;
    height: 3px;
    background-color: #eeeff3;
}

.close-line.line-1 {
    transform: rotate(45deg);
}

.close-line.line-2 {
    transform: rotate(-45deg);
}

.mobile-nav-links {
    display: flex;
    flex-direction: column;
    padding: 0 40px;
}

.mobile-nav-item {
    font-family: 'Roobert', sans-serif;
    font-size: 50px;
    line-height: 1.35;
    color: #eeeff3;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    padding: 0;
    margin: 0;
}

.mobile-nav-item .nav-arrow {
    flex-shrink: 0;
}

.nav-divider {
    height: 1px;
    width: 100%;
    background-color: rgba(238, 239, 243, 0.2);
    margin-top: 24px;
    margin-bottom: 24px;
}

/* Hero Section - Restored and Refined */
.hero-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    margin: 92px auto 0 auto;
    padding-bottom: 96px;
    box-sizing: border-box;
    position: relative;
    z-index: 10;
    overflow: visible !important;
}

.hero-intro {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 32px;
    margin: 0 0 0 0; /* Margin removed to allow container flow */
}

.hero-intro-left {
    display: flex;
    flex-direction: column;
    gap: 0; 
    flex-shrink: 0;

    width: 331px;
}

.hero-name {
    font-family: 'Roobert', var(--font-body);
    font-weight: 600; /* SemiBold */
    font-size: 22px;
    line-height: 1.44;
    color: #1e1e1e;
    margin: 0 0 4px 0; /* Applied 4px bottom margin from mobile standard */

}

.hero-location {
    font-family: 'Roobert', var(--font-body);
    font-weight: 500; /* Medium */
    font-size: 22px;
    line-height: 1.4;
    color: #6f6f6f;
    margin: 0;
}

.hero-intro-right {
    flex: 0 1 670px; /* Allows the description to shrink gracefully after the gap hits 32px */
    max-width: 670px;
}

.hero-main-description {
    font-family: 'Roobert', var(--font-body);
    font-weight: 500; /* Medium */
    font-size: 22px;
    line-height: 1.68;
    color: #1e1e1e;
    margin: 0;
}

/* About Me Card - REBUILT for FIGMA PRECISION (Desktop, Tablet, Mobile) */
.about-card {
    background-color: #1e1e1e !important;
    border-radius: 10px !important;
    margin: -146px auto 96px auto !important; /* Overlap by 146px to match Figma, 96px bottom gap */
    display: flex !important;
    flex-direction: row-reverse !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 56px 14px 56px !important;
    gap: 56px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    position: relative !important;
    min-height: 424px !important;
    z-index: 20 !important;
}

/* --- END ABOUT ME CARD FINALIZED IMPLEMENTATION --- */

.about-card-visuals {
    flex: 0 1 538px !important; /* Allow shrink for 1224px container */
    height: 394px !important; /* Fixed height from Figma */
    max-width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
}

.about-card-content-wrapper {
    flex: 0 1 616px !important; /* Allow shrink for 1224px container */
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 56px !important;
    align-items: flex-start !important;
}

.about-card-title {
    font-family: 'Roobert', var(--font-body) !important;
    font-weight: 400 !important; /* Regular in Figma code */
    font-size: 34px !important;
    line-height: 1.4 !important; /* 47.6px from Figma */
    color: #f7fbf8 !important;
    margin: 0 !important;
    text-align: left !important;
}

.about-card-title .strikethrough {
    text-decoration: line-through !important;
    text-decoration-thickness: 1px !important;
}

.about-cta-pill {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 442px !important;
    height: 64px !important;
    border: 2px solid #ffffff !important; /* border-2 in Figma code */
    border-radius: 100px !important;
    padding: 0 40px !important;
    box-sizing: border-box !important;
    color: #ffffff !important;
    font-family: 'Roobert', var(--font-body) !important;
    font-weight: 500 !important;
    font-size: 20px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.about-cta-pill:hover {
    background-color: #ffffff !important;
    color: #1e1e1e !important;
}

.cta-icon-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: rotate(90deg) !important;
    pointer-events: none !important;
}

.vector-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important; /* Best to show the whole graphic clearly */
}

/* Tablet - Artboard 744px */
@media (max-width: 1024px) {
    .about-card {
        flex-direction: column !important;
        padding: 89px 48px 57px 48px !important;
        gap: 57px !important;
        width: 100% !important;
        max-width: none !important; 
        min-height: auto !important;
        margin-top: 120px !important;
        margin-bottom: 96px !important;
    }

    .about-card-visuals {
        flex: 0 1 auto !important;
        width: 100% !important;
        max-width: 526px !important;
        order: 1 !important; /* Visuals TOP */
        margin-bottom: 0 !important;
    }

    .about-card-content-wrapper {
        flex: 0 1 auto !important;
        max-width: 584px !important;
        width: 100% !important;
        align-items: flex-start !important;
        order: 2 !important; /* Content BOTTOM */
        gap: 56px !important;
    }

    .about-card-title {
        font-size: 34px !important;
        text-align: left !important; /* Aligned left in Tablet content frame */
    }

    .about-cta-pill {
        width: 100% !important;
        max-width: 584px !important;
        height: 72px !important;
    }
}

/* Mobile - Artboard 390px */
@media (max-width: 767px) {
    .about-card {
        padding: 24px 24px 48px 24px !important;
        gap: 20px !important; /* Set exact bottom gap to 20px */
        width: 100% !important;
        max-width: none !important;
        min-height: auto !important;
        margin-top: 100px !important;
        margin-bottom: 88px !important;
    }

    .about-card-visuals {
        width: 100% !important;
        max-width: none !important;
        height: auto !important; /* Removed fixed height to eliminate internal gaps and use the exact 20px gap below */
    }

    .about-card-content-wrapper {
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
        gap: 51px !important;
    }

    .about-card-title {
        font-size: 24px !important;
        line-height: 37px !important; /* ~154% */
    }

    .about-cta-pill {
        width: 100% !important;
        max-width: none !important;
        height: 64px !important;
        font-size: 16px !important;
        padding: 0 25px !important;
    }
}

@media (max-width: 1250px) and (min-width: 1025px) {
    /* Removed intermediate desktop overrides */
}

.about-card-visuals img {
    display: block;
}

@media (max-width: 1024px) {
    .hero-section {
        padding-top: 400px;
        padding-left: 32px;
        padding-right: 32px;
    }

    .hero-intro {
        flex-direction: column;
        gap: 32px;
        margin-bottom: 120px;
    }

    .hero-intro-right {
        max-width: 100%;
    }

/* Removed tablet overrides */
}

@media (max-width: 767px) {
    .hero-section {
        padding-top: 0;
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 96px;
        position: relative;
    }

    .hero-intro {
        position: relative;
        width: 100%;
        height: auto;
        padding: 32px 24px;
        margin-bottom: 0;
        display: flex;
        flex-direction: column;
        gap: 32px;
        box-sizing: border-box;
    }

    .hero-intro-left {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 4px; 
    }

    .hero-name {
        font-size: 22px;
        line-height: 1.44;
        font-weight: 600;
        color: #1e1e1e;
    }

    .hero-location {
        font-size: 22px;
        line-height: 1.4;
        font-weight: 500;
        color: #6f6f6f;
    }

    .hero-intro-right {
        width: 100%;
        max-width: none;
        margin-top: 0;
    }

    .hero-main-description {
        font-size: 18px;
        line-height: 1.77;
        font-weight: 500;
        color: #1e1e1e;
    }

/* Removed mobile overrides */
}

.about-cta-pill:hover {
    background-color: #f7fbf8;
    color: #090d1b;
}

/* Consolidated with main CTA block */

/* If svg is down arrow, -90 makes it right. */

.interaction-indicator {
    /* Styles for the anchor button on the right of hero text */
    /* Node 52:635 - 20% Size Reduction */
    width: 44px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Match SVG size */
    border-radius: 22px;
    /* Optional: Ensure circular hit area matches SVG */
    cursor: pointer;
    transition: transform 0.3s ease;
    animation: pulse-scale 3s infinite ease-in-out;
    padding: 0;
    border: none;
    background: none;
    align-self: flex-end;
}

.action-icon {
    width: 16px;
    height: 16px;
    transform: rotate(0deg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.anchor-icon-desktop {
    display: block;
}

.anchor-icon-mobile {
    display: none;
}

@keyframes bob-down {

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

    50% {
        transform: translateY(4px);
    }
}

@keyframes swipe-hint {
    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(-4px);
    }

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

@keyframes pulse-swipe {

    0%,
    100% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }
}

.interaction-indicator:hover {
    transform: scale(1.1);
    animation-play-state: paused;
}

.interaction-indicator:hover .anchor-arrow {
    animation: bob-down 1s infinite ease-in-out;
    transform-origin: center;
}

/* Variant: Outlined (Project launch platform) */
.card-outlined {
    background-color: transparent;
    border: 1px solid #898989;
}

.card-outlined .action-title {
    color: #f7fbf8;
    /* White text */
}

.card-outlined .action-icon {
    color: #f7fbf8;
}

.card-outlined:hover {
    border-color: #f7fbf8;
    background-color: rgba(255, 255, 255, 0.05);
}

/* Variant: Filled (Design operations) */
.card-filled {
    background-color: #f7fbf8;
    border: 1px solid #ffffff;
}

.card-filled .action-title {
    color: #090d1b;
    /* Dark text */
}

.card-filled .action-icon {
    color: #090d1b;
}

.card-filled:hover {
    background-color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* ... existing styles ... */

/* Dark Section Wrapper (Work Highlights + Footer) */
.dark-section-wrapper {
    background-color: var(--color-dark-section);
    width: 100%;
    position: relative;
    z-index: 2;
}

/* Work Highlights Section */
.work-highlights {
    background-color: #1e1e1e;
    position: relative;
    padding-bottom: 104px;
    z-index: 10;
}

/* Section Title */
.work-section-title {
    width: 100%;
    box-sizing: border-box;
    padding-top: 128px;
    padding-bottom: 128px;
    /* padding-left removed since content-wrapper handles side gaps */

    font-family: 'Roobert', var(--font-body);
    font-weight: 400;
    font-size: 40px;
    line-height: 64px;
    color: #f7fbf8;
}

/* Case Study Card (Global) */
.case-study-card {
    width: 100%;
    max-width: 1440px;
    /* Use 1440px container for alignment context */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    /* Cards need to align with title (pl-94px) but are 1224px wide */
    /* So we can structure the content to match */
    padding-left: 96px;
    /* Align content start */
    padding-right: 96px;
    /* Though card is only 1224px */
    box-sizing: border-box;
    gap: 40px;
    margin-bottom: 192px;
    /* Updated gap to 192px per user request */
}

/* 1. Image */
.card-image {
    width: 100%;
    max-width: 1224px;
    height: auto;
    aspect-ratio: 1224 / 720;
    background-color: #d9d9d9;
    border-radius: 10px;
    object-fit: cover;
}

/* 2. Content Row */
.card-content-row {
    display: flex;
    gap: clamp(24px, 20vw - 160px, 120px);
    /* Aggressive fluid gap for tablet transition */
    align-items: flex-start;
    width: 100%;
    max-width: 1224px;
}

/* Left Column */
.card-left-col {
    width: clamp(240px, 39.6vw - 165px, 405px);
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Reduced by 50% from 12px per user request */
    flex-shrink: 0;
}

.case-title {
    font-family: var(--font-heading);
    /* Unbounded */
    font-weight: 400;
    font-size: 40px;
    line-height: 50px;
    color: #f7fbf8;
    margin: 0;
    font-family: 'Unbounded', sans-serif;
}

.case-subtitle {
    font-family: 'Roobert', var(--font-body);
    font-weight: 500;
    font-size: 16px;
    line-height: 32px;
    color: #898989;
    margin: 0;
}

/* Right Column */
.card-right-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 48px;
    /* Default gap */
}

.case-description {
    font-family: 'Roobert', var(--font-body);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.77;
    /* ~32px */
    color: #f7fbf8;
    margin: 0;
    min-height: 110px;
    /* Align with Figma */
    max-width: 100%;
}

/* Actions */
.case-actions {
    display: flex;
    gap: clamp(16px, 2vw, 32px);
    /* Fluid gap */
    flex-wrap: nowrap;
    /* Keep side-by-side on desktop */
}

.action-btn {
    width: 100%;
    max-width: 354px;
    height: 72px;
    border: 1px solid #898989;
    border-radius: 6px;
    padding: 16px 32px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 40px;
    text-decoration: none;
    transition: all 0.2s ease;
    background: transparent;
    box-sizing: border-box;
}

.action-text-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
    flex: 1;
    overflow: hidden;
}

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

.action-text-top {
    font-family: 'Roobert', var(--font-body);
    font-weight: 500;
    font-size: 18px;
    line-height: 1.2;
    color: #f7fbf8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.action-text-bottom {
    font-family: 'Roobert', var(--font-body);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.2;
    color: #898989;
}

.action-arrow {
    flex-shrink: 0;
    width: 16px;
    height: 14px;
    display: block;
}

.action-arrow svg {
    display: block;
    width: 100%;
    height: 100%;
    color: inherit;
}

/* Mobile Responsiveness */
@media (max-width: 640px) {
    .work-section-title {
        /* Node 119:61 */
        padding-top: 48px;
        padding-bottom: 40px;
        padding-left: 0;
        text-align: center;
        margin: 0;
        font-size: 30px;
        line-height: 64px;
    }

    .case-study-card {
        padding-left: 0;
        padding-right: 0;
        width: 100%;
        max-width: 100%;
        gap: 24px;
        margin-bottom: 64px;
    }

    .card-image {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
        /* Node 119:62 */
        border-radius: 8px;
    }

    .card-content-row {
        width: 100%;
        padding-left: 24px;
        padding-right: 24px;
        box-sizing: border-box;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    /* Left Column Mobile */
    .card-left-col {
        width: 100%;
        gap: 8px;
    }

    .case-title {
        font-size: 24px;
        /* Adjust for mobile */
        line-height: 1.2;
    }

    /* Right Column Mobile */
    .case-description {
        font-size: 16px;
        min-height: auto;
    }

    .case-actions {
        flex-direction: column;
        width: 100%;
        gap: 8px;
    }

    .action-btn {
        width: 100%;
        max-width: 100%;
    }

    /* Redundant Mobile About Card styles removed to allow primary implementation at line 837 to take precedence */
}

.tag:hover {
    background-color: var(--color-card-text);
    color: var(--color-card-bg);
}




/* Section Title */
.work-section-title {
    width: 100%;
    max-width: 1440px;
    /* Container max width */
    margin: 0 auto;
    /* Spacing from Figma 119:59 */
    padding-top: 160px;
    padding-bottom: 88px;
    padding-left: 96px;
    box-sizing: border-box;

    font-family: 'Roobert', var(--font-body);
    font-weight: 400;
    font-size: 40px;
    line-height: 64px;
    color: #f7fbf8;
}

/* Case Study Card (Global) */
.case-study-card {
    width: 100%;
    max-width: 1440px;
    /* Use 1440px container for alignment context */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    /* Cards need to align with title (pl-94px) but are 1224px wide */
    /* So we can structure the content to match */
    padding-left: 96px;
    /* Align content start */
    padding-right: 96px;
    /* Though card is only 1224px */
    box-sizing: border-box;
    gap: 40px;
    margin-bottom: 192px;
    /* Updated gap to 192px per user request */
}

/* 1. Image */
.card-image {
    width: 100%;
    max-width: 1224px;
    height: 720px;
    background-color: #d9d9d9;
    border-radius: 10px;
    object-fit: cover;
}

/* 2. Content Row */
.card-content-row {
    display: flex;
    gap: clamp(24px, 20vw - 160px, 120px);
    align-items: flex-start;
    width: 100%;
    max-width: 1224px;
}

/* Left Column */
.card-left-col {
    width: clamp(240px, 39.6vw - 165px, 405px);
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

.case-title {
    font-family: var(--font-heading);
    /* Unbounded */
    font-weight: 400;
    font-size: 40px;
    line-height: 50px;
    color: #f7fbf8;
    margin: 0;
    font-family: 'Unbounded', sans-serif;
}

.case-subtitle {
    font-family: 'Roobert', var(--font-body);
    font-weight: 500;
    font-size: 16px;
    line-height: 32px;
    color: #898989;
    margin: 0;
}

/* Right Column */
.card-right-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 48px;
    /* Default gap */
}

.case-description {
    font-family: 'Roobert', var(--font-body);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.77;
    /* ~32px */
    color: #f7fbf8;
    margin: 0;
    min-height: 110px;
    /* Align with Figma */
    max-width: 100%;
}

/* Actions */
.case-actions {
    display: flex;
    gap: clamp(16px, 2vw, 32px);
    flex-wrap: nowrap;
}

.action-btn {
    width: 100%;
    max-width: 354px;
    height: 72px;
    border: 1px solid #898989;
    border-radius: 6px;
    padding: 16px 32px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 40px;
    text-decoration: none;
    transition: all 0.2s ease;
    background: transparent;
    box-sizing: border-box;
}

.action-text-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
    flex: 1;
    overflow: hidden;
}

.action-btn:hover {
    background: #f7fbf8;
    border-color: #f7fbf8;
}

.action-btn:hover .action-text-top,
.action-btn:hover .action-text-bottom {
    color: #1e1e1e;
}

.action-text-top {
    font-family: 'Roobert', var(--font-body);
    font-weight: 500;
    font-size: 18px;
    line-height: 1.2;
    color: #f7fbf8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.action-text-bottom {
    font-family: 'Roobert', var(--font-body);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.2;
    color: #898989;
}

.action-arrow {
    flex-shrink: 0;
    width: 16px;
    height: 14px;
    display: block;
}

.action-arrow svg {
    display: block;
    width: 100%;
    height: 100%;
    color: #F7FBF8;
}

.action-btn:hover .action-arrow svg {
    color: #1E1E1E;
}

/* Mobile Responsiveness */
@media (max-width: 640px) {
    .work-section-title {
        /* Node 119:61 */
        padding-top: 48px;
        padding-bottom: 40px;
        padding-left: 24px;
        padding-right: 24px;
        text-align: center;
        margin: 0;
        font-size: 30px;
        line-height: 64px;
    }

    .case-study-card {
        padding-left: 0;
        padding-right: 0;
        width: 100%;
        max-width: 100%;
        gap: 24px;
        margin-bottom: 136px;
    }

    .card-image {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
        /* Node 119:62 */
        border-radius: 8px;
    }

    .card-content-row {
        width: 100%;
        padding-left: 24px;
        padding-right: 24px;
        box-sizing: border-box;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    /* Left Column Mobile */
    .card-left-col {
        width: 100%;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px;
    }

    .case-title {
        font-size: 24px;
        /* Adjust for mobile */
        line-height: 1.2;
    }

    /* Right Column Mobile */
    .case-description {
        font-size: 16px;
        min-height: auto;
    }

    .case-actions {
        flex-direction: column;
        width: 100%;
        gap: 8px;
        align-items: flex-start;
    }

    .action-btn {
        width: 100% !important;
        max-width: 100%;
    }
}

/* Specific threshold for CTAs taking 100% below 670px */
@media (max-width: 670px) {
    .action-btn {
        width: 100% !important;
        max-width: 100%;
    }
}

/* Responsive */
/* Tablet Responsive Design (max-width: 1024px) */
@media (max-width: 1024px) {
    .header-wrapper {
        padding: 8px;
    }

    .header-pill {
        height: 64px;
        padding: 0 16px;
    }

    .brand {
        width: 40px;
        height: 40px;
    }

    .header-nav-desktop {
        display: none;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    /* Responsive Hero Section */
    .hero-section {
        margin-top: 80px;
        padding: 48px 32px 96px 32px;
    }

    .hero-intro {
        flex-direction: column;
        gap: 40px;
        margin-bottom: 0; /* Margin removed for container flow */
    }

    .hero-intro-right {
        max-width: 100%;
    }

    /* Conflict Resolution: Removed redundant tabletish about-card styles */
    .hero-top-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 40px;
    }

    .interaction-indicator {
        align-self: center;
        margin-top: 40px;
    }

    /* Tablet Sellos Overrides */
    .about-sellos {
        position: relative;
        right: auto;
        top: auto;
        transform: none;
        width: 388px;
        height: 388px;
        margin: 0 auto 48px auto;
        order: -1;
    }

    /* Conflict Resolution: Removed redundant mobile about-card styles causing clumping */

    /* Work Highlights */
    /* Work Highlights and Footer Wrapper */
    .dark-section-wrapper {
        width: 100%;
        padding: 0;
        margin: 0;
    }

    .work-section-title {
        padding-left: 32px;
        padding-right: 32px;
        padding-top: 96px;
        padding-bottom: 88px;
    }

    .case-study-card {
        padding-left: 32px;
        padding-right: 32px;
        max-width: 100%;
        margin-bottom: 120px;
        /* Updated per user request */
        gap: 40px;
    }

    .card-image {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
    }

    .card-content-row {
        flex-direction: column;
        width: 100%;
        gap: 40px;
    }

    .card-left-col {
        width: 100%;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 8px !important;
    }

    .case-actions {
        width: 100%;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 24px;
    }

    .action-btn {
        width: 100%;
        max-width: 354px;
    }

    /* Tablet Footer (Horizontal) */
    .site-footer {
        background-color: var(--footer-bg) !important;
        width: 100% !important;
        padding: 56px 0 96px 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 0 !important;
    }

    .site-footer .footer-divider {
        width: 100% !important;
        height: 1px !important;
        background-color: var(--footer-divider) !important;
        opacity: var(--footer-divider-opacity) !important;
        margin-bottom: 96px !important;
    }

    .site-footer .footer-content {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0 48px !important;
        gap: 0 !important;
        width: 100% !important;
        max-width: 1440px !important;
        box-sizing: border-box !important;
    }

    .site-footer .footer-contact {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    .site-footer .footer-links {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 48px !important;
    }

    .site-footer .footer-name {
        font-size: 24px !important;
        color: var(--footer-name-color) !important;
        margin: 0 !important;
    }

    .site-footer .footer-email {
        font-size: 24px !important;
        color: var(--footer-text-color) !important;
        margin: 0 !important;
        text-decoration: none !important;
    }

    .footer-link,
    .footer-link-social {
        font-size: 24px !important;
        display: flex !important;
        align-items: center !important;
        color: var(--footer-text-color) !important;
        text-decoration: none !important;
    }

    .link-arrow {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 21px !important;
        height: 21px !important;
        margin-right: 16px !important;
    }

    .link-arrow svg {
        width: 100% !important;
        height: auto !important;
    }

    .site-footer .footer-links .link-arrow {
        transform: rotate(-45deg) !important;
    }
}

/* Mobile Footer (Vertical) */
@media (max-width: 767px) {
    .case-actions {
        flex-direction: column !important;
        gap: 16px !important;
        width: 100% !important;
    }

    .action-btn {
        width: 100% !important;
        max-width: 100% !important;
    }

    .site-footer {
        background-color: var(--footer-bg) !important;
        width: 100% !important;
        padding: 56px 0 96px 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0 !important;
    }

    .site-footer .footer-divider {
        width: 100% !important;
        margin-bottom: 96px !important;
        background-color: var(--footer-divider) !important;
        opacity: var(--footer-divider-opacity) !important;
    }

    .site-footer .footer-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0 !important;
        width: 100% !important;
        padding: 0 24px !important;
        box-sizing: border-box !important;
    }

    .site-footer .footer-contact {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
        gap: 0 !important;
        margin-bottom: 72px !important;
        width: 100% !important;
    }

    .site-footer .footer-name {
        font-size: 24px !important;
        color: var(--footer-name-color) !important;
        margin-bottom: 8px !important;
        text-align: left !important;
    }

    .site-footer .footer-email {
        font-size: 24px !important;
        color: var(--footer-text-color) !important;
        margin-bottom: 0 !important;
        text-align: left !important;
    }

    .site-footer .footer-links {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 32px !important;
        width: 100% !important;
    }

    /* Force 8px gap for About Me card on mobile */
    .hero-section {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

/* Removed mobile refined overrides */
}

/* Mobile Reponsive Design (max-width: 768px) */
@media (max-width: 640px) {

    /* Header & Nav */
    .header-wrapper {
        padding: 8px;
    }

/* Mobile Nav Toggle Overrides if needed, but they are handled in global block */




    /* Footer Styles */



    /* New Footer Styles */

    /* Footer Styles - Standardized in consolidated block above */
}

/* --- About Me Page Styles --- */
.about-page {
    /* Footer Variables Override */
    --footer-bg: #f7fbf8;
    --footer-divider: #090d1b;
    --footer-divider-opacity: 0.2;
    --footer-name-color: #898989;
    --footer-text-color: #090d1b;
    --footer-link-hover: #0d1327;
    background-color: #f7fbf8 !important;
    color: #090d1b;
}

/* Override body background to be light */
.about-page .main-container {
    background-color: transparent !important;
}

/* Ensure WebGL is hidden when not on home-page through CSS as fallback */
body:not(.home-page) #webgl-container {
    opacity: 0;
    pointer-events: none;
}

/* Make sure nuxx logo is black in about page */
.about-page .nuxx-logo-img {
    filter: invert(1);
    /* Assuming original is white */
}

/* About Hero */
.about-hero-section {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* Force specific 160px visual gap strictly from the bottom edge of the header for Desktop */
@media (min-width: 1025px) {
    .about-hero-section {
        margin-top: 88px; /* Clears the 80px fixed header + 8px wrapper padding */
        padding-top: 160px !important; /* The requested 160px gap */
    }
}

.about-hero-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 88px;
    margin-top: 56px;
}

@media (min-width: 1025px) {
    .about-hero-content {
        margin-top: 0 !important; /* Neutralizes old margins so gap is perfectly accurate */
    }
}

.about-title-col {
    flex-shrink: 0;
}

.about-title-large {
    font-family: 'Unbounded', sans-serif;
    font-weight: 400;
    font-size: 50px;
    line-height: 64px;
    margin: 0;
    color: #090d1b;
}

.about-desc-col {
    display: flex;
    flex-direction: column;
    gap: 48px;
    max-width: 737px;
}

.about-lead {
    font-family: 'Roobert', var(--font-body);
    font-weight: 500;
    font-size: 30px;
    line-height: 40px;
    margin: 0;
    color: #090d1b;
}

.about-body p {
    font-family: 'Roobert', var(--font-body);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.77;
    margin: 0 0 32px 0;
    color: #090d1b;
}

.about-body p:last-child {
    margin-bottom: 0;
}

/* Professional Path Section */
.professional-path-section {
    padding-bottom: 104px;
    width: 100%;
    box-sizing: border-box;
}

.professional-path-title {
    font-family: 'Unbounded', sans-serif;
    font-weight: 400;
    font-size: 45px;
    line-height: 64px;
    margin: 0 0 32px 0;
}

.path-divider-thick {
    width: 100%;
    height: 4px;
    background-color: #0d1327;
    margin-bottom: 8px;
}

.path-divider-thin {
    width: 100%;
    height: 1px;
    background-color: #0d1327;
    margin: 8px 0;
    opacity: 0.2;
}

/* Experience Items */
.experience-list {
    display: flex;
    flex-direction: column;
}

.experience-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 0;
    min-height: 140px;
    box-sizing: border-box;
}

.experience-left {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 878px;
}

.location-pill {
    background-color: #c3fe0c;
    color: #090d1b;
    font-family: 'Roobert', var(--font-body);
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    padding: 0 8px;
    border-radius: 3.09px;
    letter-spacing: 1.28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    height: 24px;
    text-transform: uppercase;
}

.experience-role {
    font-family: 'Roobert', var(--font-body);
    font-weight: 600;
    font-size: 30px;
    line-height: 1.2;
    margin: 0;
    color: #090d1b;
}

.experience-desc {
    font-family: 'Roobert', var(--font-body);
    font-weight: 400;
    font-size: 20px;
    line-height: 32px;
    margin: 0;
    color: #0d1327;
}

.experience-right {
    display: flex;
    align-items: center;
}

.experience-date {
    font-family: 'Roobert', var(--font-body);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 1.28px;
    color: #090d1b;
    text-transform: uppercase;
    text-align: right;
}

/* Custom Header for About Page */

.about-page .header-pill {
    background-color: #1e1e1e !important;
}

.about-page .header-nav-desktop .nav-link,
.designops-page .header-nav-desktop .nav-link {
    color: #f7fbf8 !important;
}

.about-page .header-nav-desktop .nav-link:hover,
.designops-page .header-nav-desktop .nav-link:hover {
    color: #ffffff !important;
}

.about-page .nuxx-logo-img,
.designops-page .nuxx-logo-img {
    filter: invert(1) brightness(100) !important;
}

/* About Footer - Standardized */

/* Menu toggle lines in mobile for about and designops page */
.about-page .mobile-menu-toggle .menu-line,
.designops-page .mobile-menu-toggle .menu-line {
    background-color: #f7fbf8 !important;
}

/* Responsive adjustments for Tablet/Mobile */
@media (max-width: 1024px) {
    .about-hero-content {
        flex-direction: column;
        gap: 40px;
        margin-top: 40px;
    }

    .about-desc-col {
        max-width: 100%;
    }

    /* Side paddings handled by .content-wrapper */


    .experience-item {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 24px;
        padding: 32px 0;
    }

    .experience-right {
        align-self: flex-start;
    }

    .experience-date {
        text-align: left;
    }
}

@media (max-width: 640px) {
    .about-hero-section {
        padding-top: 104px;
    }

    .about-title-large {
        font-size: 40px;
        line-height: 52px;
    }

    .about-lead {
        font-size: 24px;
        line-height: 36px;
    }

    .about-body p {
        font-size: 18px;
    }

    /* Side paddings handled by .content-wrapper */


    .professional-path-title {
        font-size: 30px;
        line-height: 40px;
        margin-bottom: 24px;
    }

    .experience-role {
        font-size: 24px;
    }

    .experience-desc {
        font-size: 18px;
        line-height: 28px;
    }

    .experience-item {
        padding: 24px 0;
    }
}

/* ========================================================================= */
/* LAHAUS DESIGN OPS PAGE STYLES                                            */
/* ========================================================================= */

.designops-page {
    background-color: #f7fbf8 !important;
    color: #0d1327;
}

.designops-page .header-pill {
    background-color: #1e1e1e;
    /* Dark header for this page */
}

.header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Back Button */
.back-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 30px;
    background: transparent;
    border: none;
    cursor: none;
    transition: transform 0.2s ease;
}

.back-button:hover {
    transform: scale(1.1);
}

.light-text {
    color: #eeeff3 !important;
}

.bg-light {
    background-color: #f7fbf8 !important;
}

.designops-page .ops-hero-section {
    padding-top: 192px;
    padding-bottom: 88px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    padding-left: 96px;
    padding-right: 96px;
    max-width: 1440px;
    margin: 0 auto;
}

.ops-hero-title {
    font-family: 'Roobert', var(--font-body);
    font-weight: 500;
    font-size: 55px;
    /* Desktop size */
    line-height: 1.17;
    margin: 0 auto;
    max-width: 924px;
    text-align: center;
}

.ops-hero-subtitle {
    font-family: 'Roobert', var(--font-body);
    font-weight: 400;
    font-size: 22px;
    line-height: 32px;
    margin: 0 auto;
    max-width: 593px;
    color: #0d1327;
    text-align: center;
}

/* Internal Visual/Legend */
.ops-visual-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
    padding: 0 96px;
    /* Desktop side padding */
}

.ops-image-container {
    width: 100%;
    max-width: 1000px;
    /* Constrain wide diagram */
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
}

.ops-main-diagram {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.desktop-img {
    display: block;
}

.mobile-img {
    display: none;
}

.ops-legend {
    display: flex;
    flex-direction: row;
    gap: 80px;
    /* Space between legend items */
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 40px 0;
}

.legend-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
}

.legend-dot {
    width: 39px;
    height: 39px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.dot-leads {
    background-color: #F07777;
}

.dot-designers {
    background-color: #F5C568;
}

.dot-coe {
    background-color: #686EF5;
}

.legend-text {
    font-family: 'Roobert', var(--font-body);
    font-weight: 500;
    font-size: 20px;
    color: #0d1327;
}

/* Description Text Section */
.designops-page .ops-description-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 1440px;
    margin: 0 auto;
    padding: 104px 96px 56px 96px;
    text-align: left;
    gap: 24px;
}

.ops-desc-title,
.ops-desc-text {
    max-width: 728px;
    margin: 0;
}

.ops-desc-title {
    font-family: 'Roobert', var(--font-body);
    font-weight: 500;
    font-size: 30px;
    line-height: 40px;
    margin: 0;
    width: 100%;
}

.ops-desc-text {
    font-family: 'Roobert', var(--font-body);
    font-weight: 400;
    font-size: 20px;
    line-height: 32px;
    margin: 0;
    width: 100%;
}

/* Background divider wrapper for bottom sections */
.ops-bg-wrapper {
    position: relative;
    padding-top: 48px;
    /* Add some padding before title */
    background-color: #ffffff;
    border-top: 1px solid #1E1E1E;
    width: 100%;
    /* To overlay webgl if any */
}

.ops-header-title {
    max-width: 1440px;
    margin: 0 auto;
    padding: 144px 96px 64px 96px;
    display: flex;
    justify-content: flex-start;
}

.ops-highlights-title {
    padding: 80px 96px 40px 96px;
    /* Aligned with Outcome Group (94px) */
    width: 100%;
}

.ops-section-main-title {
    max-width: 1158px;
    width: 100%;
}

.ops-section-main-title {
    font-family: 'Roobert', var(--font-body);
    font-weight: 500;
    font-size: 50px;
    line-height: 58px;
    color: #0d1327;
    margin: 0;
}

/* Stats Section */
.designops-page .ops-stats-section {
    max-width: 1440px;
    margin: 0 auto;
    padding: 32px 96px 136px 96px;
    /* Desktop padding */
    display: flex;
    flex-direction: row;
    gap: 80px;
    justify-content: flex-start;
}

.stats-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

.ops-heading {
    font-family: 'Unbounded', sans-serif;
    font-weight: 400;
    font-size: 22px;
    margin: 0;
    line-height: 50px;
}

.stats-boxes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 16px 24px;
    /* Row Gap / Col Gap */
}

.stats-col-single {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.stat-box {
    background-color: white;
    display: flex;
    align-items: flex-start;
    position: relative;
    padding: 16px 8px 16px 16px;
    /* Consistent inner padding */
    border: 1px solid rgba(13, 19, 39, 0.5);
    border-radius: 4px;
    transition: all 0.3s ease-in-out;
}

/* Specific Box widths for desktop */
.box-product.box-wide {
    width: 250px;
}

.box-product.box-half {
    width: 200px;
}

.box-company.box-full {
    width: 320px;
}

.stat-label {
    font-family: 'Roobert', var(--font-body);
    font-size: 18px;
    line-height: 23px;
    color: #0d1327;
    margin-left: 0;
    white-space: nowrap;
}


/* Outcome Groups */
.ops-outcome-group {
    max-width: 1440px;
    margin: 0 auto;
    padding: 64px 96px 88px 96px;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease-in-out;
}

.ops-outcome-group:last-of-type {
    padding-bottom: 152px;
}

.ops-outcome-header {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    margin-bottom: 0px;
}

.ops-outcome-title {
    font-family: 'Roobert', var(--font-body);
    font-weight: 700;
    font-size: 26px;
    line-height: 50px;
    margin: 0;
    color: #0d1327;
}

.ops-outcome-divider {
    height: 3px;
    background-color: #0d1327;
    /* Fallback line color */
    width: 100%;
    margin-top: 8px;
    margin-bottom: 48px;
}

.bg-gradient-blue {
    background: linear-gradient(90deg, #686ef5 0%, #88c5f8 100%);
}

.bg-gradient-purple {
    background: linear-gradient(90deg, #a958fa 0%, #d88ffa 100%);
}

.ops-outcome-grid {
    display: flex;
    flex-direction: row;
    gap: 120px;
    /* Space between the two columns */
    padding: 0;
    /* Flush left with the title and headers */
}

.ops-outcome-col {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.outcome-item {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 48px;
    padding: 0;
}

.outcome-item.mb-0 {
    margin-bottom: 0;
}

.outcome-item-title {
    font-family: 'Roobert', var(--font-body);
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
    margin: 0;
}

.outcome-item-desc {
    font-family: 'Roobert', var(--font-body);
    font-weight: 400;
    font-size: 20px;
    line-height: 32px;
    margin: 0;
}

.outcome-note {
    font-family: 'Roobert', var(--font-body);
    font-weight: 600;
    font-size: 14px;
    line-height: 28px;
    margin: 0;
    margin-top: 16px;
}

.desktop-only {
    display: inline;
}

/* Override Footer */
.designops-footer .footer-divider {
    background-color: #1e1e1e !important;
}

.designops-footer {
    background-color: #f7fbf8 !important;
    /* Footer bg matches page */
}

/* text-dark classes for footer */
.text-dark {
    color: #1e1e1e !important;
    position: relative !important;
    padding-bottom: 2px !important;
    transition: color 0.3s ease !important;
}

.text-dark:hover {
    color: #000 !important;
}

.text-dark::after {
    content: '' !important;
    position: absolute !important;
    bottom: -2px !important;
    left: 0 !important;
    width: 100% !important;
    height: 1.5px !important;
    background-color: #1e1e1e !important;
    transform: scaleX(0) !important;
    transform-origin: right !important;
    transition: transform 0.45s cubic-bezier(0.19, 1, 0.22, 1) !important;
}

.text-dark:hover::after {
    transform: scaleX(1) !important;
    transform-origin: left !important;
}

/* Responsive Adjustments */

@media (max-width: 1024px) {

    /* Tablet Adjustments for LaHaus Design Ops */

    /* 1. Hero Section */
    .designops-page .ops-hero-section {
        padding-left: 32px;
        padding-right: 32px;
        align-items: center;
        text-align: center;
        padding-top: 176px;
        /* Based on pt-75 but including header space */
        padding-bottom: 64px;
        gap: 40px;
    }

    .designops-page .ops-hero-title {
        font-size: 55px;
        /* Sizing from Node 501:512 */
        line-height: 1.17;
        text-align: center;
        max-width: 100%;
        margin: 0 auto;
    }

    .designops-page .ops-hero-subtitle {
        text-align: center;
        max-width: 568px;
        margin: 0 auto;
    }

    /* Highlights Title Layout */
    .designops-page .ops-header-title {
        padding: 64px 32px 32px 32px;
    }

    .designops-page .ops-highlights-title {
        padding: 112px 104px 64px 32px;
        width: 100%;
        text-align: left;
    }

    .designops-page .ops-section-main-title {
        font-size: 50px;
        line-height: 58px;
        text-align: left;
        width: 100%;
    }

    .ops-hero-subtitle {
        font-size: 22px;
        /* Sizing from Node 501:513 */
    }

    /* 2. Visual Section (Legend Circles) */
    .ops-legend {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 24px;
        justify-content: center;
        padding-top: 16px;
        padding-bottom: 32px;
    }

    /* 3. Description Section */
    .ops-description-section {
        padding: 48px 32px 64px 32px;
    }

    /* 4. Stats Section (Product / Company) */
    .ops-stats-section {
        padding: 40px 32px 136px 32px;
        flex-direction: column;
        align-items: flex-start;
        gap: 0px;
    }

    .stats-col {
        width: 100%;
        gap: 0;
    }

    .ops-heading {
        margin-bottom: 24px;
        width: 100%;
    }

    /* Product Grid: Row on Tablet, wrapping as needed */
    .stats-boxes {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
        gap: 16px 16px;
        margin-bottom: 32px;
    }

    .box-product.box-wide {
        width: auto;
        min-width: 192px;
    }

    .box-product.box-half {
        width: auto;
        min-width: 128px;
    }

    /* Company Column: Horizontal on Tablet, stacked on Mobile */
    .stats-col-single {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 16px 16px;
        width: 100%;
    }

    .box-company.box-full {
        width: auto;
        min-width: 272px;
        height: auto;
    }

    .designops-page .stat-label {
        white-space: nowrap;
    }

    /* 5. Outcomes Section */
    .ops-outcome-group {
        padding: 64px 32px 88px 32px;
        /* Tablet margin offsets */
    }

    .ops-outcome-header {
        margin-bottom: 0px;
    }

    .ops-outcome-grid {
        flex-direction: column;
        gap: 64px;
    }

    .desktop-only {
        display: none;
    }

    /* 6. Footer Adjustments — designops tablet fix */
    /* Same fix as mobile: the 56px padding-top from the global .site-footer tablet
       rule creates a gray/tinted band between the white ops-bg-wrapper and the
       footer divider. We remove it and set the background to pure white to match. */
    .designops-footer {
        --footer-bg: #ffffff !important;
        --footer-text-color: #1e1e1e !important;
        --footer-name-color: #898989 !important;
        --footer-divider: #1e1e1e !important;
        --footer-divider-opacity: 0.2 !important;
        --footer-link-hover: #000 !important;
        background-color: #ffffff !important;
        padding-top: 0 !important;
    }

    .designops-footer .footer-name {
        color: #898989 !important;
    }

    .designops-footer .footer-email,
    .designops-footer .footer-link,
    .designops-footer .footer-link-social {
        color: #1e1e1e !important;
    }

    .designops-footer .footer-divider {
        background-color: #1e1e1e !important;
        opacity: 0.2 !important;
    }

}

@media (max-width: 767px) {

    /* Mobile styles overrides */
    .designops-page .ops-hero-section {
        padding-top: 136px;
        padding-bottom: 64px;
        padding-left: 24px;
        padding-right: 24px;
        align-items: center;
        text-align: center;
        gap: 32px;
    }

    .designops-page .ops-hero-title {
        font-size: 30px;
        line-height: 1.19;
        text-align: center;
        max-width: 100%;
        margin: 0 auto;
    }

    .designops-page .ops-hero-subtitle {
        font-size: 24px;
        line-height: 1.5;
        text-align: center;
        max-width: 100%;
        margin: 0 auto;
    }

    .ops-visual-section {
        padding: 0 8px;
        /* Mobile edge padding */
    }

    .desktop-img {
        display: none;
    }

    .mobile-img {
        display: block;
        width: 100%;
    }

    .ops-visual-section .ops-image-container {
        margin-bottom: 0;
    }

    .ops-legend {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 16px 24px;
        align-items: flex-start;
        justify-content: center;
        padding: 24px 8px 56px 8px;
        width: 100%;
    }

    .legend-dot {
        width: 24px;
        height: 24px;
    }

    .legend-text {
        font-size: 16px;
    }

    .designops-page .ops-description-section {
        padding: 48px 24px 64px 24px;
        align-items: flex-start;
        text-align: left;
        gap: 40px;
    }

    .designops-page .ops-desc-title {
        font-size: 24px;
        line-height: 1.5;
        max-width: 100%;
        margin: 0;
    }

    .designops-page .ops-desc-text {
        font-size: 18px;
        line-height: 1.77;
        max-width: 100%;
        margin: 0;
    }

    .designops-page .ops-header-title {
        padding: 64px 24px 32px 24px;
    }

    .designops-page .ops-highlights-title {
        padding: 80px 24px 48px 24px;
        text-align: left;
    }

    .designops-page .ops-section-main-title {
        font-size: 30px;
        line-height: 1.19;
        text-align: left;
        width: 100%;
        margin: 0;
    }

    .designops-page .ops-stats-section {
        padding: 64px 24px 80px 24px;
        flex-direction: column;
        gap: 40px;
        align-items: flex-start;
        text-align: left;
    }

    .designops-page .stats-col {
        width: 100%;
        gap: 0;
        align-items: flex-start;
    }

    .designops-page .ops-heading {
        margin-bottom: 24px;
        text-align: left;
        line-height: 1.2;
    }

    .designops-page .stats-boxes {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
        gap: 16px 16px;
        justify-content: flex-start;
    }

    .designops-page .stats-col-single {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 16px 16px;
        align-items: flex-start;
    }

    .designops-page .box-product.box-wide {
        width: max-content;
        min-width: 192px;
        box-sizing: border-box;
        justify-content: flex-start;
    }

    .designops-page .box-product.box-half {
        width: max-content;
        min-width: 128px;
        box-sizing: border-box;
        justify-content: flex-start;
    }

    .designops-page .box-company.box-full {
        width: 100%;
        max-width: 272px;
        box-sizing: border-box;
        justify-content: flex-start;
    }

    .designops-page .stat-box {
        padding: 16px 16px 16px 16px;
    }

    .designops-page .stat-label {
        font-size: 18px;
        margin-left: 0;
        white-space: nowrap;
        text-align: left;
    }

    .ops-outcome-group {
        padding: 64px 24px 88px 24px;
    }

    .ops-outcome-group:last-of-type {
        padding-bottom: 128px;
    }

    .ops-outcome-header {
        margin-left: -24px;
        margin-right: -24px;
        width: calc(100% + 48px);
        margin-bottom: 0px;
    }

    .ops-outcome-title {
        padding-left: 24px;
    }

    .ops-outcome-grid {
        padding: 0;
    }

    .outcome-col-title {
        font-size: 30px;
    }

    .outcome-item-desc {
        font-size: 18px;
        line-height: 1.77;
    }

    /* Fix: The main container is transparent, letting the body background
       (#f7fbf8) show through the gap after the white ops-bg-wrapper ends.
       Setting the main container to white on mobile makes the entire background
       uniform, eliminating the visible color boundary above the footer divider. */
    body.designops-page {
        background-color: #ffffff !important;
    }

    body.designops-page main.ops-main,
    .designops-page .ops-main {
        background-color: #ffffff !important;
    }

    .designops-page .ops-bg-wrapper {
        flex-grow: 1;
        padding-bottom: 0 !important;
    }

    .designops-footer {
        margin-top: 0 !important;
    }
}


/* --- PROJECT LAUHAUS PAGE --- */
html:has(.lauhaus-page) {
    background-color: #f7fbf8 !important;
}

body.lauhaus-page {
    /* Footer Variables Override */
    --footer-bg: #0c775e;
    --footer-divider: #f7fbf8;
    --footer-divider-opacity: 1;
    --footer-name-color: rgba(247, 251, 248, 0.7);
    --footer-text-color: #f7fbf8;
    --footer-link-hover: #e0e0e0;
    background-color: #f7fbf8 !important;
}

.lauhaus-main {
    background-color: transparent !important;
}

/* Base utilities for the page */
.lauhaus-page .width-clamped {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding-left: 96px;
    padding-right: 96px;
    box-sizing: border-box;
}

/* Header Overrides */
.lauhaus-page .header-pill {
    background-color: #1e1e1e !important;
}

.lauhaus-page .header-nav-desktop .nav-link {
    color: #f7fbf8 !important;
}

.lauhaus-page .header-nav-desktop .nav-link:hover {
    color: #ffffff !important;
}

.lauhaus-page .nuxx-logo-img {
    filter: invert(1) brightness(100) !important;
}

/* Typography styles */
.lauhaus-page .section-heading-w {
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 400;
    line-height: 50px;
    color: #f7fbf8;
    margin: 0;
}

.desktop-heading-line {
    width: 100%;
    height: 2px;
    background-color: #f7fbf8;
    margin-top: 40px;
    margin-bottom: 64px;
}

.mobile-heading-line {
    display: none;
}

/* Hero Section */
.lauhaus-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 208px;
    padding-bottom: 64px;
    width: 100%;
    box-sizing: border-box;
}

.lauhaus-hero-title {
    font-family: 'Roobert', var(--font-body);
    font-weight: 400;
    font-size: 60px;
    line-height: 1.17;
    color: #0d1327;
    text-align: center;
    max-width: 925px;
    margin: 0 auto 96px auto;
    /* visual gap to image */
    padding: 0 24px;
}

.lauhaus-hero-img-wrapper {
    width: 100%;
    max-width: 1056px;
    /* 1588 - 267*2 gives 1054px, approx 1056px */
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 8px;
}

.hero-image-lg {
    width: 100%;
    height: auto;
    display: block;
}

.lauhaus-hero-caption {
    font-family: 'Roobert', var(--font-body);
    font-weight: 500;
    font-size: 14px;
    color: #0d1327;
    margin: 16px 0 0 0;
    letter-spacing: 0.14px;
    width: 100%;
    max-width: 1056px;
    text-align: left;
}

/* Opportunity Section */
.lauhaus-opp {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 120px 200px 160px 200px;
    /* desktop padding */
    box-sizing: border-box;
    color: #0d1327;
}

.opp-intro {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 72px;
    margin-bottom: 120px;
}

.opp-title {
    font-family: var(--font-heading);
    font-size: 30px;
    font-weight: 400;
    line-height: 40px;
    margin: 0;
    width: 327px;
    flex-shrink: 0;
}

.opp-text {
    font-family: 'Roobert', var(--font-body);
    font-size: 20px;
    line-height: 32px;
    max-width: 648px;
}

.opp-text p {
    margin: 0 0 32px 0;
}

.opp-text p:last-child {
    margin-bottom: 0;
}

.opp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 64px;
    column-gap: 144px;
}

.opp-item {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.opp-item-title {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 500;
    line-height: 30px;
    margin: 0;
}

.opp-item-desc {
    font-family: 'Roobert', var(--font-body);
    font-size: 20px;
    line-height: 32px;
    margin: 0;
}

/* Green Background area for PLP */
.lauhaus-green-bg {
    background-color: #0c775e;
    width: 100%;
    position: relative;
    color: #f7fbf8;
    padding-bottom: 240px;
}

.lauhaus-plp {
    padding-top: 160px;
    padding-bottom: 144px;
}

.plp-header {
    display: flex;
    flex-direction: row;
    gap: 48px;
    margin-bottom: 120px;
    padding-left: 120px;
    /* matching 213px absolute - 94px container pad */
}

.plp-title {
    font-family: var(--font-heading);
    font-size: 50px;
    font-weight: 400;
    line-height: 64px;
    width: 355px;
    flex-shrink: 0;
    margin: 0;
    text-transform: lowercase;
}

.plp-title::first-letter {
    text-transform: capitalize;
}

.plp-text {
    font-family: 'Roobert', var(--font-body);
    font-size: 20px;
    line-height: 32px;
    max-width: 641px;
}

.plp-text p {
    margin: 0;
}

.plp-screens {
    display: flex;
    flex-direction: row;
    gap: 64px;
}

.plp-screen {
    flex: 1;
    min-width: 0;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.lauhaus-discovery {
    padding-top: 64px;
}

.stats-grid {
    display: flex;
    flex-direction: row;
    gap: 72px;
    margin-top: 40px;
    margin-bottom: 112px;
}

.stat-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.stat-title {
    font-family: var(--font-heading);
    font-size: 30px;
    font-weight: 400;
    line-height: 40px;
    margin: 0;
}

.stat-desc {
    font-family: 'Roobert', var(--font-body);
    font-size: 18px;
    line-height: 1.77;
    margin: 0;
}

.journey-section {
    padding-top: 64px;
}

.journey-title {
    font-family: 'Roobert', var(--font-body);
    font-size: 18px;
    font-weight: 400;
    margin: 0;
}

.journey-block {
    display: flex;
    flex-direction: column;
}

.journey-block.block-1 {
    display: flex;
    flex-direction: column;
    margin-top: 144px;
    margin-bottom: 0;
}

.journey-img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    display: block;
}

.journey-img-lg {
    width: 100%;
    height: auto;
    border-radius: 10px;
    display: block;
    margin-top: 32px;
}

.journey-caption {
    font-family: 'Roobert', var(--font-body);
    font-size: 18px;
    margin: 0 0 32px 0;
    line-height: 28px;
}

.journey-main-container {
    display: grid;
    grid-template-columns: 577fr 806fr;
    grid-template-rows: auto 1fr auto;
    column-gap: 1.214%;
    /* 17px / 1400px */
    row-gap: 0;
    margin-top: 64px;
    width: 100%;
    align-items: start;
}

.journey-main-container .journey-block {
    display: contents;
}

.matrix-title {
    grid-column: 1;
    grid-row: 1;
    padding-top: 80px !important;
}

.storyboard-title {
    grid-column: 2;
    grid-row: 1;
    padding-top: 80px !important;
}

.matrix-img-wrapper {
    grid-column: 1;
    grid-row: 2;
    align-self: end;
}

.storyboard-img-wrapper {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
}

.journey-grid-title {
    font-family: 'Roobert', var(--font-body);
    font-size: 18px;
    font-weight: 400;
    margin: 0 0 32px 0;
    color: #f7fbf8;
}


.journey-img-container {
    height: auto;
    width: 100%;
}

.journey-img-container img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
}

.journey-conclusion {
    font-family: 'Roobert', var(--font-body);
    font-size: 18px;
    line-height: 1.77;
    max-width: 508px;
    margin: 48px 0 0 0;
    color: #f7fbf8;
    grid-column: 1 / span 2;
    grid-row: 3;
}

.lauhaus-divider {
    height: 16px;
    background-image: url('assets/common/background-pattern.svg');
    background-size: cover;
    background-repeat: repeat-x;
    margin: 112px auto;
}

.lauhaus-impact {
    padding-top: 184px;
    padding-bottom: 0;
}

.lauhaus-impact .stats-grid {
    margin-bottom: 0;
}
.lauhaus-showcase {
    padding-top: 144px;
    position: relative;
}

.showcase-main-title {
    font-family: 'Roobert', var(--font-body);
    font-size: 30px;
    font-weight: 500;
    margin: 0 0 64px 0;
}

.showcase-title-md {
    font-family: 'Roobert', var(--font-body);
    font-size: 30px;
    font-weight: 500;
    margin: 0 0 64px 0;
}

.showcase-hero-img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 120px;
}

.showcase-split {
    display: flex;
    flex-direction: row;
    gap: 3.05%;
    /* Scaled Gap (42px) */
    margin-bottom: 120px;
    width: 100%;
}

.showcase-left {
    width: 50.29%;
    flex: none;
    min-width: 0;
}

.screens-row {
    display: flex;
    flex-direction: row;
    gap: 6.54%;
    /* Scaled Gap (42px inside group) */
    width: 100%;
}

.screens-row img {
    width: 46.73%;
    flex: none;
    min-width: 0;
    height: auto;
}

.showcase-right {
    width: 46.66%;
    flex: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.showcase-half-img {
    width: 100%;
    height: auto;
    border-radius: 10px 10px 0 0;
}

.screens-grid,
.plp-screens {
    display: flex;
    flex-direction: row;
    gap: 32px;
}

.screens-grid img,
.plp-screen {
    flex: 1;
    min-width: 0;
    width: 100%;
    height: auto;
}

/* Lauhaus Footer - Standardized */

.lauhaus-page .mobile-nav-item .nav-arrow path {
    stroke: #eeeff3 !important;
}

/* RESPONSIVE STYLES for Project Lauhaus */
@media screen and (max-width: 1024px) {
    .lauhaus-page .width-clamped {
        padding-left: 32px;
        padding-right: 32px;
    }

    .lauhaus-hero {
        padding: 160px 32px 104px 32px;
        align-items: center;
    }

    .lauhaus-hero-title {
        font-size: 45px;
        line-height: 1.16;
        max-width: 649px;
        margin-bottom: 88px;
        text-align: center;
        padding: 0;
    }

    .lauhaus-hero-img-wrapper {
        max-width: 100%;
        margin-bottom: 8px;
    }

    .lauhaus-hero-caption {
        max-width: 100%;
        margin-top: 8px;
        padding: 0;
    }

    .lauhaus-opp {
        padding: 0 32px 128px 32px;
        color: #0d1327;
    }

    .opp-intro {
        flex-direction: row;
        gap: 24px;
        margin-bottom: 88px;
    }

    .opp-title {
        width: 280px;
        flex-shrink: 0;
        font-size: 30px;
        line-height: 40px;
    }

    .opp-text {
        flex: 1;
        max-width: 648px;
        font-size: 20px;
        line-height: 32px;
    }

    .opp-text p {
        margin-bottom: 24px;
    }

    .opp-grid {
        display: flex;
        flex-direction: column;
        gap: 64px;
    }

    .opp-item {
        gap: 8px;
    }

    .opp-item-title {
        font-size: 20px;
        line-height: 44px;
        font-weight: 500;
    }

    .opp-item-desc {
        font-size: 20px;
        line-height: 32px;
    }

    .lauhaus-page .lauhaus-plp {
        padding-top: 128px;
        padding-bottom: 80px;
    }

    .plp-header {
        flex-direction: column;
        padding-left: 0;
        gap: 24px;
    }

    .stats-grid {
        flex-direction: column;
        gap: 64px;
        margin-bottom: 0 !important;
    }

    .stat-col {
        width: 100%;
        gap: 24px;
    }

    .stat-title {
        font-size: 30px;
        line-height: 40px;
    }

    .stat-desc {
        font-size: 18px;
        line-height: 1.77;
    }

    .journey-main-container {
        flex-direction: column;
        gap: 0;
    }

    .showcase-split {
        flex-direction: column;
    }

    .plp-screens-container {
        position: relative;
        width: calc(100% + 64px);
        margin-left: -32px;
        margin-right: -32px;
    }

    .screens-grid,
    .plp-screens {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 24px;
        padding-left: 32px;
        padding-right: 32px;
        padding-bottom: 24px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .screens-grid::-webkit-scrollbar,
    .plp-screens::-webkit-scrollbar {
        display: none;
    }

    .screens-grid>img,
    .plp-screens>.plp-screen {
        scroll-snap-align: center;
        flex: 0 0 247px;
        width: 247px;
        height: auto;
        border-radius: 10px;
    }

    /* Target Journey Section specifically on tablet */
    .journey-section {
        display: flex;
        flex-direction: column;
        padding-top: 144px;
        gap: 0;
    }

    .journey-title {
        font-size: 18px !important;
        line-height: 28px !important;
        margin-top: 0;
        padding-top: 0;
        padding-bottom: 32px;
    }

    .journey-img-lg {
        margin-top: 0;
        margin-bottom: 40px;
    }

    .journey-block {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .journey-block.block-1 {
        margin-top: 104px;
        margin-bottom: 0;
    }

    .journey-caption {
        font-size: 18px !important;
        line-height: 28px !important;
        margin-top: 0;
        padding-top: 0;
        padding-bottom: 32px;
        margin-bottom: 0;
    }

    .journey-img.margin-t {
        margin-bottom: 32px;
        margin-top: 0;
    }

    .journey-main-container {
        display: flex;
        flex-direction: column;
        gap: 0;
        margin-top: 0;
    }

    .journey-main-container .journey-block {
        display: flex;
        flex-direction: column;
    }

    .journey-block.block-2 {
        margin-top: 104px;
    }

    .matrix-title {
        padding-top: 0 !important;
    }

    .journey-grid-title {
        font-size: 18px !important;
        line-height: 28px !important;
        padding-top: 0;
        margin-top: 0;
        margin-bottom: 32px;
    }

    .storyboard-title {
        padding-top: 104px !important;
        padding-bottom: 32px !important;
    }

    .matrix-img-wrapper {
        margin-bottom: 32px;
    }

    .journey-conclusion {
        font-size: 18px !important;
        line-height: 1.77 !important;
        max-width: 563px;
        margin-top: 0;
        margin-bottom: 0;
    }

    /* Specific Tablet Slider behavior for mobile-slider class */
    .mobile-slider-wrapper {
        position: relative;
        width: calc(100% + 64px);
        /* Account for 32px padding */
        margin-left: -32px;
        margin-right: -32px;
    }

    .mobile-slider,
    .plp-screens,
    .screens-grid,
    .screens-row {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 24px;
        padding-left: 32px !important;
        padding-right: 0 !important;
        padding-bottom: 24px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .mobile-slider::-webkit-scrollbar {
        display: none;
    }

    .mobile-slider>img,
    .mobile-slider>div {
        scroll-snap-align: center;
        flex: 0 0 247px;
        width: 247px;
        height: auto;
        object-fit: cover;
        border-radius: 10px;
    }

    /* Ensure swipe indicators are visible and centered on tablet */
    .lauhaus-page .swipe-indicator.mobile-only {
        display: flex !important;
        justify-content: center;
        margin-top: 24px;
        margin-left: auto;
        margin-right: auto;
        width: fit-content;
    }
}

/* Tablet Specific Showcase Slider */
@media (min-width: 769px) and (max-width: 1024px) {
    .showcase-split {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 40px;
        padding-bottom: 80px;
        align-items: flex-start;
        /* More space for indicator */
        width: calc(100% + 64px);
        margin-left: -32px;
        padding-left: 32px;
        padding-right: 32px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .showcase-split::-webkit-scrollbar {
        display: none;
    }

    .showcase-left {
        width: 680px;
        flex: 0 0 680px;
        scroll-snap-align: center;
    }

    .showcase-left img {
        height: 670px;
        object-fit: cover;
        border-radius: 10px;
    }

    .showcase-right,
    .showcase-right .mobile-slider-wrapper,
    .showcase-right .mobile-slider {
        display: contents;
    }

    .showcase-right .mobile-slider>img {
        width: 300px;
        height: 637px;
        flex: 0 0 300px;
        scroll-snap-align: center;
        object-fit: cover;
        border-radius: 10px;
    }

    /* Absolute swipe indicator for tablet slider */
    .showcase-slider-wrapper {
        position: relative;
    }

    .showcase-slider-wrapper .swipe-indicator {
        position: absolute;
        bottom: 24px;
        left: 50%;
        transform: translateX(-50%);
        display: flex !important;
        margin: 0;
        z-index: 20;
        color: #F7FBF8 !important;
        animation: pulse-swipe 2s infinite ease-in-out;
    }
}

/* Base Desktop Helpers */
.mobile-only {
    display: none !important;
}

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

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

.desktop-only {
    display: block !important;
}

@media screen and (max-width: 1024px) {
    .desktop-only {
        display: none !important;
    }

    .tablet-only {
        display: block !important;
    }

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

    .lauhaus-page .mobile-slider-wrapper {
        position: relative;
        width: auto !important;
        margin-left: -32px !important;
        margin-right: -32px !important;
    }

    .swipe-indicator {
        position: relative;
        display: none;
        /* Shown via .mobile-tablet-only */
        align-items: center;
        justify-content: center;
        gap: 8px;
        color: #F7FBF8;
        font-family: 'Roobert', var(--font-body);
        font-size: 14px;
        font-weight: 500;
        pointer-events: none;
        animation: pulse-swipe 2s infinite ease-in-out;
        z-index: 10;
        margin: 24px auto 0 auto;
    }

    .swipe-indicator svg {
        animation: swipe-hint 2s infinite ease-in-out;
    }
}

@media screen and (max-width: 767px) {
    .tablet-only {
        display: none !important;
    }

    .mobile-slider-wrapper {
        width: auto;
        margin-left: -24px;
        margin-right: -24px;
    }

    .mobile-slider {
        padding-left: 48px !important;
        padding-right: 48px !important;
        scroll-padding-inline-start: 48px;
    }

    /* Reset Showcase Slider 2 components on mobile */
    .showcase-split {
        display: block !important;
        margin-bottom: 0 !important;
    }

    .showcase-right {
        display: block !important;
        width: 100% !important;
    }

    .showcase-right .mobile-slider-wrapper {
        display: block !important;
        position: relative !important;
        width: auto !important;
        margin-left: -24px !important;
        margin-right: -24px !important;
    }

    .showcase-right .mobile-slider {
        display: flex !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
        scroll-padding-inline-start: 24px !important;
    }

    .showcase-right .mobile-slider>img {
        width: 80vw !important;
        flex: 0 0 auto !important;
        height: auto !important;
    }
}

@media screen and (max-width: 767px) {
    /* Side padding handled by .content-wrapper utilities */

    .lauhaus-hero {
        padding: 152px 0 40px 0;
        align-items: flex-start;
    }

    .lauhaus-hero-title {
        font-size: 30px;
        line-height: 1.19;
        text-align: left;
        padding: 0 24px;
        margin-bottom: 64px;
        margin-left: 0;
    }

    .hidden-mobile-sm {
        display: none !important;
    }

    .lauhaus-hero-img-wrapper {
        border-radius: 0;
        height: 368px;
        width: 100%;
        max-width: 100%;
        margin-bottom: 0;
        aspect-ratio: auto;
    }

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

    .lauhaus-hero-caption {
        padding: 8px 104px 8px 24px;
        margin-top: 0;
        font-size: 14px;
        line-height: 1.4;
        letter-spacing: 0.14px;
        align-self: flex-start;
        max-width: 100%;
    }

    .lauhaus-opp {
        padding: 72px 24px 0 24px !important;
    }

    .opp-grid {
        display: flex;
        flex-direction: column;
        gap: 64px;
        margin-top: 56px;
    }

    .opp-item {
        width: 100%;
    }

    .opp-intro {
        flex-direction: column;
        gap: 24px;
        margin-bottom: 0 !important;
    }

    .lauhaus-opp {
        margin-bottom: 0 !important;
        padding-bottom: 128px !important;
    }

    .opp-title {
        width: auto;
    }

    .plp-title {
        font-size: 40px;
        line-height: 52px;
        width: auto;
    }

    /* Paps handled by .section-gap-lg utilities */

    .plp-header {
        margin-bottom: 0 !important;
        gap: 40px !important;
    }

    .plp-description-bottom {
        margin-bottom: 56px !important;
    }

    .stats-grid {
        margin-bottom: 0 !important;
    }

    /* Gaps handled by .section-gap-xl utilities */


    .lauhaus-green-bg {
        padding-bottom: 0 !important;
    }

    .showcase-hero-img {
        margin-bottom: 64px;
    }

    .showcase-main-title,
    .showcase-title-md {
        font-family: 'Roobert', var(--font-body);
        font-size: 26px;
        line-height: 35px;
        font-weight: 400;
        margin-bottom: 32px;
    }

    /* Mobile specific helpers */
    .hidden-mobile {
        display: none !important;
    }

    .mobile-only {
        display: block !important;
    }

    .swipe-indicator.mobile-only,
    .swipe-indicator.mobile-tablet-only {
        display: flex !important;
    }

    .showcase-slider-wrapper .swipe-indicator {
        margin-bottom: 112px;
    }

    .mobile-slider-wrapper {
        position: relative;
        width: auto !important;
        margin-left: -24px !important;
        margin-right: -24px !important;
    }

    .showcase-bottom .swipe-indicator {
        margin-bottom: 112px;
    }

    .mobile-slider {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -ms-overflow-style: none;
        scrollbar-width: none;
        width: 100%;
        cursor: grab;
        padding-bottom: 24px;
        scroll-snap-type: x mandatory;
        scroll-padding-inline-start: 24px !important;
        gap: 16px !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
        padding-bottom: 24px !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Firefox */
    }

    .mobile-slider::-webkit-scrollbar {
        display: none;
        /* Chrome/Safari */
    }

    .mobile-slider>img,
    .mobile-slider>div {
        scroll-snap-align: center;
        flex: 0 0 auto !important;
        flex-shrink: 0;
        width: 80vw !important;
        height: auto;
        object-fit: cover;
        border-radius: 10px;
    }

    /* Footer Styles - Handled by standardized global rules */

    /* Target Journey Section specifically on mobile */
    .mobile-heading-line {
        display: block;
        width: 100%;
        margin: 8px 0 32px 0;
        border: none;
        border-top: 1px solid #f7fbf8;
    }

    .journey-section {
        display: flex;
        flex-direction: column;
        padding: 0 8px 0 8px !important;
        gap: 0 !important;
        margin-left: -24px !important;
        margin-right: -24px !important;
        width: calc(100% + 48px) !important;
        box-sizing: border-box !important;
    }

    .journey-main-container {
        display: flex;
        flex-direction: column;
        gap: 0 !important;
        margin-top: 0 !important;
        width: 100%;
    }

    .journey-title {
        text-align: left !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .journey-caption {
        margin-top: 0 !important;
        margin-bottom: 40px !important;
        line-height: 28px !important;
        color: #f7fbf8 !important;
        font-size: 18px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .journey-grid-title {
        width: 100% !important;
        margin-bottom: 40px !important;
        font-size: 18px !important;
        line-height: 28px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
    }

    .journey-block {
        display: flex !important;
        flex-direction: column !important;
        gap: 32px !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .journey-block.block-1 {
        margin-top: 184px !important;
        margin-bottom: 0 !important;
    }

    .journey-block.block-2 {
        gap: 32px !important;
        margin-top: 72px !important;
        margin-bottom: 0 !important;
    }

    .journey-block.block-3 {
        margin-top: 72px !important;
        margin-bottom: 0 !important;
    }

    .journey-img-mobile-step3 {
        aspect-ratio: 374 / 495 !important;
        height: auto !important;
        width: 100% !important;
        object-fit: cover !important;
        object-position: 59% center !important;
        border-radius: 10px !important;
    }

    .journey-block {
        display: flex !important;
        flex-direction: column !important;
    }

    .journey-main-container .block-2,
    .journey-section .block-3 {
        width: 100% !important;
    }

    .matrix-img-content {
        aspect-ratio: 1161 / 1103 !important;
        height: auto !important;
        width: 100% !important;
        object-fit: cover !important;
        border-radius: 10px !important;
    }

    .storyboard-img-mobile {
        aspect-ratio: 374 / 495 !important;
        height: auto !important;
        width: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        border-radius: 10px !important;
    }

    .storyboard-title {
        padding-top: 0 !important;
    }

    .journey-caption {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        line-height: 28px !important;
        color: #f7fbf8 !important;
        font-size: 18px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .journey-grid-title {
        width: 100% !important;
        margin-bottom: 0 !important;
        font-size: 18px !important;
        line-height: 28px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
    }

    .journey-img-container img {
        width: 100% !important;
        display: block;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
        border-radius: 10px !important;
    }

    .journey-conclusion {
        padding-left: 16px !important;
        padding-right: 16px !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        box-sizing: border-box !important;
    }

    .matrix-img-wrapper,
    .storyboard-img-wrapper {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}

/* ==========================================================================
   FINCAS CASE STUDY STYLES (Blocks 1 & 2)
   Mobile-First, 8px Grid System
   ========================================================================== */

/* Base Page Overrides */
html:has(.fincas-page) {
    background-color: #F7FBF8 !important;
    /* Match background context for scrolling momentum */
}

.fincas-page {
    /* Footer Variables Override */
    --footer-bg: #146A56;
    --footer-divider: #f7fbf8;
    --footer-divider-opacity: 1;
    --footer-name-color: rgba(247, 251, 248, 0.7);
    --footer-text-color: #f7fbf8;
    --footer-link-hover: #e0e0e0;
    background-color: #F7FBF8;
    color: #0d1327;
}

.fincas-container {
    background-color: transparent !important;
}

/* Header Overrides */
.fincas-page .header-pill {
    background-color: #1e1e1e !important;
}

.fincas-page .header-nav-desktop .nav-link {
    color: #f7fbf8 !important;
}

.fincas-page .header-nav-desktop .nav-link:hover {
    color: #ffffff !important;
}

.fincas-page .nuxx-logo-img {
    filter: invert(1) brightness(100) !important;
}


/* BLOCK 1: Hero Section */
.fincas-hero {
    display: flex;
    flex-direction: column;
    gap: 72px;
    padding: 160px 24px 8px 24px;
    /* 72px visual gap + 88px header offset */
    width: 100%;
    box-sizing: border-box;
    align-items: center;
}

.fincas-hero-title-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
}

.fincas-hero-title {
    font-family: 'Roobert', var(--font-body);
    font-weight: 500;
    /* Medium */
    font-size: 30px;
    line-height: 1.33;
    color: #0d1327;
    margin: 0;
    width: 100%;
    /* Max-width on mobile was artificially restricted; removed to allow full use of available space */
    max-width: 100%;
}

.fincas-hero-image-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100vw;
    margin-left: -24px;
    margin-right: -24px;
}

.fincas-hero-image-container {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: 0;
    overflow: hidden;
}

.fincas-hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    border-radius: 0;
}

.fincas-hero-caption {
    font-family: 'Roobert', var(--font-body);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: 0.14px;
    color: #0d1327;
    margin: 0;
    text-align: left;
    width: 100%;
    padding-left: 24px;
    padding-right: 24px;
}

/* BLOCK 2: Overview Section */
.fincas-overview {
    display: flex;
    flex-direction: column;
    gap: 57px;
    /* Approximately 7x8px */
    padding: 70px 24px 88px 24px;
    width: 100%;
    box-sizing: border-box;
    align-items: flex-start;
}

.fincas-overview-title {
    font-family: 'Unbounded', sans-serif;
    font-weight: 400;
    /* Regular */
    font-size: 30px;
    line-height: 30px;
    color: #0d1327;
    margin: 0;
    width: 100%;
}

.fincas-overview-content {
    font-family: 'Roobert', var(--font-body);
    font-weight: 400;
    font-size: 20px;
    line-height: 32px;
    color: #0d1327;
    margin: 0;
    width: 100%;
}

.fincas-overview-content p {
    margin: 0;
}

.spacer-block {
    height: 35px;
    /* Simulating line-height spacing block from Figma */
    width: 100%;
}

.semibold {
    font-weight: 600;
    /* SemiBold mapped to Roobert 600 */
}

/* BLOCK 3: Stats Section */
.fincas-stats {
    display: flex;
    flex-direction: column;
    gap: 88px;
    /* High margin between columns on mobile */
    padding: 8px 24px 96px 24px;
    width: 100%;
    box-sizing: border-box;
}

.fincas-stats-col {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.fincas-col-header {
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* spacing between title and colored line */
    margin-bottom: 56px;
    /* High spacing below line, mapping to Figma's 57px offset via 8px grid rounding */
}

.fincas-col-title {
    font-family: 'Unbounded', var(--font-heading);
    font-weight: 500;
    font-size: 30px;
    line-height: 1.43;
    color: #0d1327;
    margin: 0;
}

.fincas-col-line {
    width: 100%;
    height: 4px;
    border-radius: 2px;
}

.line-green {
    background-color: #2A9F67;
}

.line-blue {
    background-color: #75BDFF;
}

.line-yellow {
    background-color: #FBD26B;
}

.fincas-stat-item {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-bottom: 56px;
    margin-bottom: 56px;
    border-bottom: 1px solid #0d1327;
}

/* Remove border and bottom margin from the last item in a column */
.fincas-stat-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.fincas-stat-number {
    font-family: 'Roobert', var(--font-body);
    font-weight: 500;
    font-size: 36px;
    line-height: 1;
    /* Match visual tightness of Figma */
    color: #0d1327;
    margin: 0;
}

/* The small text modifier (e.g., '2eq tons' next to '7.4B CO') */
.text-small {
    font-size: 24px;
}

.fincas-stat-desc {
    font-family: 'Roobert', var(--font-body);
    font-weight: 500;
    font-size: 20px;
    line-height: 1.6;
    /* 32px line height / 20px font-size */
    color: #0d1327;
    margin: 0;
}

/* BLOCK 4: Brand Gallery */
.fincas-brand-gallery {
    width: 100%;
    background-color: #f0f2e9;
    padding: 96px 0 111px 0;
    /* Vertical Mobile padding from node 829:8468 (top updated to 96px per user spec) */
    box-sizing: border-box;
}

.fincas-brand-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 24px;
    /* Horizontal mobile padding mapped exactly to block 3 */
    box-sizing: border-box;
}

.fincas-brand-title {
    font-family: 'Unbounded', var(--font-heading);
    font-weight: 400;
    font-size: 30px;
    line-height: 1;
    color: #0d1327;
    /* Changed from #16503e based on mobile spec */
    margin: 0 0 72px 0;
    /* 72px bottom margin to map to node 829:8468 spacing to the logo */
    text-align: center;
    /* Explicitly requested */
}

.fincas-logo-container {
    width: calc(100% + 32px);
    margin-left: -16px;
    margin-right: -16px;
    height: auto;
    border-radius: 10px;
    overflow: hidden;
}

.fincas-gallery-grid {
    display: flex;
    flex-direction: column;
    margin-top: 36px;
    /* Break out of the 24px parent padding to leave exactly 8px of edge gap */
    margin-left: -16px;
    margin-right: -16px;
    width: calc(100% + 32px);
    gap: 36px;
}

.fincas-gallery-pair {
    display: flex;
    flex-direction: column;
    gap: 36px;
    width: 100%;
}

.fincas-brand-image {
    width: 100%;
    height: auto;
    border-radius: 10px;
    object-fit: cover;
    display: block;
    /* prevents inline gap */
}

/* Icon grid hidden on mobile */
.fincas-icon-grid.desktop-only {
    display: none;
}

/* ==========================================================================
   FINCAS BLOCK 5: INSETTING PLATFORM (Mobile First)
   ========================================================================== */
.fincas-insetting {
    background-color: #146a56;
    color: #f7fbf8;
    overflow: hidden;
    /* For breaking out horizontal sliders if needed */
}

.insetting-intro {
    padding: 104px 24px 0 24px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.insetting-title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 40px;
    line-height: 1.3;
    font-weight: 400;
}

.insetting-desc {
    margin: 0;
    font-family: 'Roobert', sans-serif;
    font-size: 20px;
    line-height: 1.6;
}

.insetting-values-header {
    padding: 112px 24px 0 24px;
    display: block;
}

.iv-tag {
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 400;
    line-height: 50px;
    color: #f7fbf8;
    margin: 0;
}

.iv-line {
    width: 100%;
    height: 2px;
    background-color: #f7fbf8;
    margin-top: 40px;
    margin-bottom: 64px;
}

.insetting-values-grid {
    padding: 0 24px 112px 24px;
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 64px;
}

/* iv-item handled by utility */

.iv-title {
    font-family: var(--font-heading);
    font-size: 30px;
    line-height: 40px;
    font-weight: 400;
    margin: 0;
}

.iv-desc {
    font-family: 'Roobert', sans-serif;
    font-size: 18px;
    line-height: 1.77;
    margin: 0;
}

/* Sliders */
.insetting-slider {
    display: flex;
    flex-direction: row;
    gap: 24px;
    padding: 88px 24px 0 24px;
    overflow-x: auto;
    /* Edge bleed */
    width: 100%;
}

.slider-2 {
    padding-top: 0;
}

/* Hide scrollbar for elegant sliders */
.insetting-slider::-webkit-scrollbar {
    display: none;
}

.insetting-slider {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.is-img {
    width: 284px;
    height: 600px;
    flex-shrink: 0;
    object-fit: cover;
}

.insetting-hero-image {
    padding: 8px 8px 0 8px;
    display: none;
    /* Hidden on mobile per user request */
}

.ihi-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
}

/* insetting-disruptive handled by utility */

/* id-intro handled by utility */

.id-main-title {
    font-family: var(--font-heading);
    font-size: 30px;
    line-height: 1.33;
    font-weight: 400;
    margin: 0;
}

/* id-grid handled by utility */

/* id-item handled by utility */

.id-title {
    font-family: var(--font-heading);
    font-size: 30px;
    line-height: 1.33;
    font-weight: 400;
    margin: 0;
}

.id-desc {
    font-family: 'Roobert', sans-serif;
    font-size: 18px;
    line-height: 1.77;
    margin: 0;
}

/* Base rules for insetting sections removed as they are now handled by utilities */

.ic-img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 11px;
    /* Precisely matching Figma 10.937px */
}

/* Impact matrix handled by utility */

.impact-intro {
    /* Layout and gap handled by utility classes in HTML */
    padding-bottom: 0;
}

.impact-title {
    font-family: var(--font-heading);
    font-size: 30px;
    line-height: 1.54;
    font-weight: 400;
    margin: 0;
}

.impact-subtitle {
    font-family: var(--font-body);
    font-size: 20px;
    line-height: 32px;
    margin: 0;
}

.impact-matrix {
    /* Layout and gap handled by utility classes in HTML */
    align-items: flex-start;
}

.im-item {
    /* Layout and gap handled by utility classes in HTML */
    width: 100%;
    max-width: 342px;
}

.im-text {
    font-family: var(--font-body);
    font-size: 20px;
    line-height: 32px;
    font-weight: 500;
}

.im-icon {
    height: 80px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
    max-width: 100%;
}

/* ==========================================================================
   FINCAS RESPONSIVE MEDIA QUERIES (Tablet & Mobile Specifics)
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
    .fincas-hero {
        padding: 160px 32px 0 32px;
        /* Offset for tablet */
    }

    .fincas-hero-title-wrapper {
        justify-content: center;
    }

    .fincas-hero-title {
        font-size: 48px;
        line-height: 1.17;
        text-align: center;
        max-width: 800px;
    }

    .fincas-hero-image-wrapper {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .fincas-hero-image-container {
        aspect-ratio: auto;
        border-radius: 10px;
    }

    .fincas-hero-image {
        border-radius: 10px;
    }

    /* Tablet Overview (Aligns perfectly with the 32px padded hero image above) */
    .fincas-overview {
        padding-left: 32px;
        padding-right: 32px;
    }

    /* Tablet Stats */
    .fincas-stats {
        padding-left: 32px;
        padding-right: 32px;
        padding-bottom: 112px;
        /* Explicit distance to the Block 4 background edge below it */
    }

    /* Tablet Brand Gallery */
    .fincas-brand-gallery {
        /* Top padding set to 112px per user spec */
        padding: 112px 0 152px 0;
    }

    .fincas-brand-container {
        padding: 0 32px;
    }

    .fincas-brand-title {
        font-size: 40px;
        line-height: 1.28;
        text-align: left;
        /* Explicitly overrides the mobile centered text */
        margin-bottom: 4px;
        /* Container has 84px gap, 84px + 4px = 88px gap to the logo */
    }

    .fincas-logo-container {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .fincas-brand-container {
        gap: 84px;
    }

    .fincas-gallery-grid {
        margin-left: 0;
        /* Resets the mobile breakout margins */
        margin-right: 0;
        width: 100%;
        gap: 88px;
    }

    .fincas-gallery-pair {
        flex-direction: row;
        gap: 25px;
    }

    .fincas-brand-image {
        flex: 1;
        min-width: 1px;
    }

    .fincas-desktop-icons-container.desktop-only {
        width: 100%;
        display: block;
    }

    /* Block 5 Tablet Overrides */
    .fincas-insetting {
        padding: 0;
    }

    .insetting-intro {
        padding: 120px 129px 0 32px;
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    .insetting-title {
        font-size: 50px;
        /* Tablet spec */
        line-height: 64px;
    }

    .insetting-desc {
        line-height: 32px;
    }

    .insetting-values-header {
        padding: 112px 32px 0 32px;
    }

    .insetting-values-grid {
        padding: 0 32px 112px 32px;
        flex-direction: column;
        gap: 64px;
    }

    .iv-item {
        gap: 24px;
    }

    .insetting-slider {
        padding: 104px 32px 0 32px;
    }

    .fincas-page .mobile-slider-wrapper {
        margin-left: 32px !important;
        margin-right: -32px !important;
        width: auto !important;
    }

    .fincas-page .mobile-slider,
    .fincas-page .insetting-slider {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .swipe-indicator.mobile-tablet-only {
        display: flex !important;
        justify-content: center;
        margin-left: auto;
        margin-right: auto;
    }

    .insetting-hero-image {
        padding: 8px 32px 0 32px;
        display: block;
        /* Desktop specs */
    }

    .insetting-disruptive {
        background-color: var(--fincas-viridian);
        color: #f7fbf8;
        padding: 120px 64px 0 64px;
    }

    .id-intro {
        padding: 0 0 48px 0;
        text-align: left;
    }

    .id-main-title {
        font-size: 50px;
        line-height: 64px;
        margin: 0;
    }

    .id-grid {
        display: flex;
        flex-direction: column;
        gap: 64px;
        padding: 0 0 0 0;
    }

    .id-item {
        max-width: 616px;
    }

    .id-title {
        font-size: 30px;
        line-height: 40px;
        margin-bottom: 0;
        /* Reset margin to use id-item gap */
    }

    .id-desc {
        font-size: 18px;
        line-height: 1.77;
    }

    .insetting-collage {
        padding: 120px 32px 88px 32px;
    }

    .insetting-impact {
        padding: 8px 32px 143px 32px;
        gap: 0;
        /* Managed by intro padding or matrix margin */
    }

    .impact-intro {
        gap: 24px;
        padding-bottom: 80px;
    }

    .impact-title {
        font-size: 30px;
        line-height: 48px;
    }

    .impact-matrix {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 74px;
        column-gap: 20px;
        place-items: start;
    }

    .im-item {
        display: flex;
        flex-direction: column-reverse;
        align-items: flex-start;
        text-align: left;
        gap: 27px;
        width: 100%;
        max-width: 330px;
    }
}

/* ==========================================================================
   FINCAS RESPONSIVE MEDIA QUERIES (Desktop)
   ========================================================================== */
@media (min-width: 1024px) {

    /* Desktop Hero */
    .fincas-hero {
        padding: 200px 48px 0 48px;
        /* 112px visual gap + 88px header offset */
        gap: 112px;
        max-width: 1440px;
        margin: 0 auto;
    }

    .fincas-hero-title {
        font-size: 60px;
        line-height: 1.17;
        text-align: center;
        max-width: 895px;
    }

    .fincas-hero-image-wrapper {
        width: 100%;
        max-width: 1056px;
        gap: 17px;
        margin-left: 0;
        margin-right: 0;
    }

    .fincas-hero-image-container {
        height: auto;
        aspect-ratio: auto;
        border-radius: 10px;
    }

    .fincas-hero-image {
        border-radius: 10px;
    }

    .fincas-hero-title-wrapper {
        justify-content: center;
    }

    .fincas-hero-title {
        font-size: 60px;
        line-height: 1.17;
        text-align: center;
        max-width: 895px;
    }

    .fincas-hero-image-wrapper {
        width: 100%;
        max-width: 1056px;
        gap: 17px;
        margin-left: 0;
        margin-right: 0;
    }

    .fincas-hero-image-container {
        height: auto;
        border-radius: 10px;
    }

    .fincas-hero-image {
        border-radius: 10px;
    }

    .fincas-hero-caption {
        text-align: left;
    }

    /* Desktop Overview */
    .fincas-overview {
        flex-direction: row;
        gap: 68px;
        padding: 96px 48px 120px 48px;
        max-width: 1065px;
        /* Centers the 969px inner content with 48px padding boundaries */
        margin: 0 auto;
        justify-content: center;
    }

    .fincas-overview-title {
        width: 213px;
        line-height: 30px;
        flex-shrink: 0;
    }

    .fincas-overview-content {
        max-width: 688px;
    }

    /* Desktop Stats */
    .fincas-stats {
        flex-direction: row;
        gap: 25px;
        padding: 16px 96px 152px 96px;
        max-width: 1440px;
        margin: 0 auto;
    }

    .fincas-stats-col {
        flex: 1;
        /* Distribute the 3 columns equally */
        max-width: 451px;
        /* Matching Figma column widths of ~450/451px */
    }

    .fincas-col-header {
        margin-bottom: 57px;
        /* Matches desktop gap mapping */
    }

    .fincas-stat-item {
        padding-bottom: 53px;
        margin-bottom: 57px;
    }

    /* Desktop Block 4: Brand Gallery */
    .fincas-brand-gallery {
        padding: 165px 0 152px 0;
    }

    .fincas-brand-title {
        font-size: 50px;
        line-height: 1.28;
        /* 64px / 50px */
        text-align: left;
        margin-bottom: 4px;
        /* Container has 84px gap, 84px + 4px = 88px gap to the logo */
    }

    .fincas-logo-container {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .fincas-brand-container {
        padding: 0 96px;
        /* Explicitly synced with Block 3 stats left/right padding */
        gap: 84px;
    }

    .fincas-gallery-grid {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        gap: 88px;
    }

    .fincas-gallery-pair {
        flex-direction: row;
        gap: 25px;
    }

    .fincas-brand-image {
        flex: 1;
        /* Makes images take equal width */
        min-width: 1px;
    }

    .fincas-desktop-icons-container.desktop-only {
        width: 100%;
        display: block;
        /* Overrides any display: none for mobile */
    }

    .fincas-desktop-icons-img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 10px;
    }

    /* Block 5 Desktop Overrides */
    .insetting-intro {
        padding: 104px 94px 0 94px;
        max-width: 1440px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 32px;
    }

    .insetting-title {
        font-size: 50px;
        line-height: 1.28;
        max-width: 600px;
    }

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

    .insetting-desc {
        max-width: 580px;
    }

    .insetting-values-header {
        padding: 112px 96px 0 96px;
        max-width: 1440px;
        margin: 0 auto;
    }

    .insetting-values-grid {
        flex-direction: row;
        gap: 72px;
        padding: 0 96px 112px 96px;
        max-width: 1440px;
        margin: 0 auto;
    }

    .iv-item {
        flex: 1;
        gap: 32px;
    }

    .insetting-slider {
        padding: 88px 96px 0 96px;
        flex-wrap: wrap;
        /* Convert slider to grid on massive screens depending on width */
        justify-content: space-between;
        /* To stretch nicely */
        overflow: visible;
        /* Disable slider effect */
        max-width: 1440px;
        margin: 0 auto;
        gap: 24px;
    }

    .is-img {
        width: calc(25% - 18px);
        /* 4 columns on 1440px */
        height: auto;
    }

    .insetting-hero-image {
        padding: 8px 96px 0 96px;
        display: block;
        max-width: 1440px;
        margin: 0 auto;
    }

    .insetting-disruptive {
        padding: 120px 92px 120px 92px;
        display: flex;
        flex-direction: column;
        gap: 0;
        max-width: 1440px;
        margin: 0 auto;
    }

    .id-grid {
        gap: 72px;
        /* Synced with .insetting-values-grid */
    }

    .id-item {
        gap: 32px;
        /* Synced with .iv-item */
    }

    .insetting-disruptive .id-intro {
        padding-bottom: 48px;
    }

    .id-main-title {
        font-size: 50px;
        line-height: 1.28;
    }

    .id-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 144px;
        row-gap: 73px;
    }

    .id-item {
        gap: 32px;
    }

    .insetting-collage {
        padding: 16px 94px 144px 94px;
        max-width: 1440px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 112px;
    }

    .ic-top {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 25px;
    }

    .ic-img {
        flex: 1;
        /* Match widths on top row */
    }

    .insetting-impact {
        padding: 16px 94px 127px 94px;
        max-width: 1440px;
        margin: 0 auto;
    }

    .impact-intro {
        gap: 53px;
        padding-bottom: 80px;
    }

    .impact-title {
        font-size: 50px;
        line-height: 64px;
    }

    .impact-subtitle {
        font-size: 30px;
        line-height: 40px;
    }

    .impact-matrix {
        display: flex;
        flex-direction: row;
        gap: 58px;
        justify-content: space-between;
    }

    .im-item {
        flex: 1;
        flex-direction: column-reverse;
        text-align: left;
        align-items: flex-start;
        justify-content: flex-end;
        max-width: 306px;
    }
}

/* Fincas Footer Overrides - Colors handled by variables */

.fincas-page .footer-email:hover,
.fincas-page .footer-link:hover,
.fincas-page .footer-link-social:hover {
    color: #e0e0e0 !important;
}


/* 4. Mobile Overrides for Fincas Sliders */
@media screen and (max-width: 767px) {
    .fincas-page .mobile-slider-wrapper {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }

    .fincas-page .mobile-slider {
        padding-left: 24px !important;
        padding-right: 24px !important;
        scroll-padding-inline-start: 24px !important;
    }

    .fincas-page .mobile-slider > img {
        width: 284px !important;
        flex: 0 0 284px !important;
    }
}
/* 5. Mobile Intro Container Final Adjustments (Figma Node 1048:1118) */
@media screen and (max-width: 767px) {
    .hero-section {
        margin-top: 80px !important;
        padding-top: 0 !important;
    }
    .hero-intro {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: auto !important;
        padding: 32px 24px 8px 24px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 32px !important;
        box-sizing: border-box !important;
        z-index: 10 !important;
    }
    .hero-intro-left {
        gap: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .hero-name {
        font-family: 'Roobert', sans-serif !important;
        font-weight: 600 !important;
        font-size: 22px !important;
        line-height: 1.44 !important;
        color: #1e1e1e !important;
        margin: 0 !important;
    }
    .hero-location {
        font-family: 'Roobert', sans-serif !important;
        font-weight: 500 !important;
        font-size: 22px !important;
        line-height: 1.4 !important;
        color: #6f6f6f !important;
        margin: 0 !important;
    }
    .hero-main-description {
        font-family: 'Roobert', sans-serif !important;
        font-weight: 500 !important;
        font-size: 18px !important;
        line-height: 1.77 !important;
        color: #1e1e1e !important;
        margin: 0 !important;
    }
}

    /* Removed mobile overlap override */


/* 7. Final Gap Adjustments for Desktop and Tablet */
@media screen and (min-width: 1025px) {
    .hero-intro {
        margin: 0 0 737px 0 !important; /* Unified left alignment at 96px */
    }
    .hero-name {
        margin-bottom: 4px !important; /* Unified with mobile standard */
    }
    .hero-intro-left {
        gap: 0 !important;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .hero-intro {
        margin-bottom: 584.62px !important; /* Final adjustment to hit 850px gap at 1024px width */
    }
    .hero-name {
        margin-bottom: 4px !important; /* Unified with mobile standard */
    }
    .hero-intro-left {
        gap: 0 !important;
    }
    .hero-section {
        margin-top: 80px !important;
        padding-top: 48px !important;
    }
}

/* 8. Mobile Case Study Card Alignment & Spacing (Final Override) */
@media screen and (max-width: 767px) {
    .case-study-card {
        padding-left: 0 !important;
        padding-right: 0 !important;
        gap: 24px !important;
    }

    .card-content-row {
        padding-left: 24px !important;
        padding-right: 24px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 24px !important;
    }

    .card-left-col {
        width: 100% !important;
        align-items: flex-start !important;
        text-align: left !important;
    }

    .card-right-col {
        width: 100% !important;
        align-items: flex-start !important;
    }

    .case-description {
        text-align: left !important;
        width: 100% !important;
    }

    .case-actions {
        width: 100% !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    .action-btn {
        width: 100% !important;
        max-width: 100% !important;
        justify-content: space-between !important;
    }
}

/* 9. Mobile Case Study Image Spacing (Final Override) */
@media screen and (max-width: 767px) {
    .case-study-card {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    
    .card-image {
        width: 100% !important;
        border-radius: 8px !important; /* Ensuring corners look good with the gap */
    }
}

/* 10. Missing Animations */
@keyframes pulse-scale {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes bob-down {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(4px); }
}

/* 11. Interaction Indicator Placement (Desktop, Tablet, Mobile) */
.hero-section {
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding-bottom: 48px !important; /* Space for the indicator */
}

.interaction-indicator {
    position: relative !important;
    align-self: center !important;
    margin-top: auto !important;
    margin-bottom: 0 !important;
    z-index: 101 !important;
}

/* Tablet Overrides */
@media screen and (max-width: 1024px) {
    .hero-section {
        min-height: 100vh !important;
        padding-bottom: 32px !important;
        padding-top: 120px !important; /* Adjust for fixed header */
        margin-top: 0 !important;
    }
    
    .hero-intro {
        margin-bottom: 0 !important;
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }
}

/* Mobile Overrides */
@media screen and (max-width: 767px) {
    .hero-section {
        min-height: 100vh !important;
        padding-top: 80px !important;
        padding-bottom: 24px !important;
    }
    
    .hero-intro {
        position: relative !important; /* Reset from absolute if applied */
        padding: 0 24px !important;
        margin-top: 40px !important;
    }
}

/* 12. Unifying Scroll Helper Position (Desktop & Tablet) */
@media screen and (min-width: 768px) {
    .hero-section {
        min-height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        padding-bottom: 48px !important;
        padding-top: 92px !important; /* Standardized top margin */
        box-sizing: border-box !important;
        margin-top: 0 !important;
    }

    .hero-intro {
        flex: 1 !important;
        display: flex !important;
        flex-direction: row !important; /* Keep desktop row layout */
        justify-content: space-between !important;
        align-items: center !important; /* Vertically center text in the remaining space */
        margin-bottom: 0 !important;
        width: 100% !important;
        max-width: 1224px !important;
    }

    .interaction-indicator {
        position: absolute !important;
        bottom: 48px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin: 0 !important;
        display: flex !important;
    }
}

/* 13. Unifying Scroll Helper Position (Desktop & Tablet) - Clean Override */
@media screen and (min-width: 768px) {
    .hero-section {
        min-height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        padding-bottom: 64px !important;
        padding-top: 56px !important;
        box-sizing: border-box !important;
        margin-top: 80px !important;
        padding-left: 96px !important;
        padding-right: 96px !important;
    }

    .hero-intro {
        flex: 1 !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin: 0 auto !important;
        width: 100% !important;
        max-width: 1224px !important;
    }

    .interaction-indicator {
        position: absolute !important;
        bottom: 64px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin: 0 !important;
        display: flex !important;
        z-index: 100 !important;
    }
}

/* 14. Scroll Helper Placement (100px gap above About Card) */
.hero-section {
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding-top: 92px !important;
    padding-bottom: 96px !important;
    box-sizing: border-box !important;
}

.hero-intro {
    margin: 0 auto auto auto !important; /* Push down the lower elements */
    width: 100% !important;
    max-width: 1224px !important;
}

.interaction-indicator {
    position: relative !important;
    left: auto !important;
    transform: none !important;
    margin: 0 auto 100px auto !important; /* THE EXACT 100PX GAP */
    display: flex !important;
    z-index: 100 !important;
}

/* Removed desktop max-width override */


/* Tablet & Mobile Consistency */
@media screen and (max-width: 1024px) {
    .hero-section {
        padding-top: 80px !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
    
    .hero-intro {
        margin-top: 40px !important;
        flex-direction: column !important;
        gap: 32px !important;
    }

    .interaction-indicator {
        margin-bottom: 100px !important;
    }
}

/* 15. GUARANTEED FOLD VISIBILITY FOR SCROLL HELPER */
.hero-section {
    position: relative !important;
    height: 100vh !important; /* Forces exact viewport height */
    height: 100dvh !important; /* Dynamic view height for mobile browsers */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; /* Centers intro text in the remaining space */
    padding-top: 80px !important;
    padding-bottom: 120px !important; /* Safe zone for the absolute helper */
    box-sizing: border-box !important;
    margin: 0 !important;
}

.hero-intro {
    width: 100% !important;
    max-width: 1224px !important;
    margin: 0 auto !important;
}

.interaction-indicator {
    position: absolute !important;
    bottom: 32px !important; /* Pinned 32px from the bottom of the phone screen */
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    z-index: 100 !important;
    display: flex !important;
}

/* Removed late overrides */

/* 16. Restoring Hero Text Gaps & Alignment */
.hero-intro {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 32px !important;
    width: 100% !important;
    max-width: 1224px !important;
    margin: 0 auto !important;
}

@media screen and (max-width: 1024px) {
    .hero-intro {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 32px !important;
    }
}

.hero-intro-left {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important; /* Space between name and location */
    width: 331px !important;
    flex-shrink: 0 !important;
}

.hero-intro-right {
    flex: 0 1 670px !important;
    max-width: 670px !important;
}

/* Ensure mobile specific overrides don't break horizontal gap on larger mobile */
@media screen and (max-width: 767px) {
    .hero-intro-left, .hero-intro-right {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* 17. Final Spacing Adjustments for Hero Text Top Gap (Desktop) */
@media screen and (min-width: 1025px) {
    .hero-section {
        padding-top: 112px !important; /* Fixed Header 80px + 32px requested gap */
        justify-content: flex-start !important;
        align-items: center !important;
    }

    .hero-intro {
        margin-top: 0 !important; /* Remove any existing margin */
        padding-top: 0 !important;
    }
}

/* 18. THE 128PX TOP GAP & DESKTOP CENTERING */
.hero-section {
    padding-top: 208px !important; /* 80px fixed header + 128px requested gap */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* Horizontally center hero content */
    min-height: 100vh !important;
    box-sizing: border-box !important;
    justify-content: flex-start !important; /* Anchor text to the top gap */
}

@media screen and (min-width: 1025px) {
    .hero-intro {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important; /* Maintain 2-column layout */
        align-items: flex-start !important; /* Align texts to each other's top */
        width: 100% !important;
        max-width: 1224px !important;
        margin: 0 auto !important; /* CENTERED CONTAINER */
    }
}

/* Ensure tablet & mobile also have the 128px gap */
@media screen and (max-width: 1024px) {
    .hero-section {
        padding-top: 208px !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    .hero-intro {
        display: flex !important;
        flex-direction: column !important;
        gap: 32px !important;
        margin: 0 auto !important;
        width: 100% !important;
    }
}

/* 19. FINAL OVERRIDE: 72PX TOP GAP (152PX TOTAL) ACROSS ALL BREAKPOINTS */
.hero-section {
    padding-top: 152px !important; /* 80px header + 72px gap */
}

@media screen and (max-width: 1024px) {
    .hero-section {
        padding-top: 152px !important;
    }
}

/* 20. ENSURING HORIZONTAL CENTERING & 72PX GAP */
.hero-section {
    padding-top: 152px !important; /* Header 80 + Gap 72 */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* Horizontal center */
    padding-left: 0 !important;
    padding-right: 0 !important;
}

@media screen and (min-width: 1025px) {
    .hero-intro {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important; /* Now vertically center relative to each other */
        width: 100% !important;
        max-width: 1224px !important;
        margin: 0 auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* 19. REFINED 72PX TOP GAP (80px Header + 72px Gap = 152px) */
.hero-section {
    padding-top: 152px !important; 
    transition: padding-top 0.3s ease;
}

@media screen and (max-width: 1024px) {
    .hero-section {
        padding-top: 152px !important;
    }
}

@media screen and (max-width: 767px) {
    .hero-section {
        padding-top: 152px !important;
    }
}

/* 20. Corrected 72px Gap (88px Header Total + 72px = 160px) & Horizontal Centering */
.hero-section {
    padding-top: 160px !important; /* Fixed: 8px wrapper padding + 80px pill + 72px gap */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* Centers the Intro container */
    text-align: center !important; /* Ensuring text centering if requested */
}

.hero-intro {
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 1224px !important;
    display: flex !important;
    justify-content: center !important; /* Group them in the center */
    gap: 144px !important; /* Standard wide gap while being centered */
    text-align: left !important; /* Keep text aligned left within centered blocks */
}

@media screen and (max-width: 1024px) {
    .hero-intro {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 32px !important;
    }
    
    .hero-intro-left, .hero-intro-right {
        width: 100% !important;
        max-width: 600px !important; /* Constrain for readability when centered */
    }
}


/* 22. PERFECT ALIGNMENT FIX (Aligning Hero and Projects) */
@media screen and (min-width: 1025px) {
    .hero-section, 
    .case-section-title,
    .case-study-card {
        max-width: 1224px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        left: 0 !important;
        transform: none !important;
    }

    .hero-section {
        padding-top: 152px !important; /* 80px + 72px gap */
        align-items: center !important;
    }

    .hero-intro, 
    .work-section-title,
    .case-study-card {
        width: 100% !important;
        max-width: 1224px !important;
        margin: 0 !important;
        display: flex !important;
        justify-content: space-between !important; /* Force edges to the 1224px boundaries */
        gap: 0 !important; /* space-between handles the gap */
    }
}

/* Ensure projects also follow the 1224px center at desktop */
@media screen and (min-width: 1025px) {
    .case-study-card {
        gap: 48px !important;
    }
    
    .card-image, .card-content-row, .case-actions {
        width: 100% !important;
        max-width: 1224px !important;
    }
}

/* 23. DEFINITIVE ALIGNMENT HARMONY (Desktop) */
@media screen and (min-width: 1025px) {
    /* 1. Reset all parent section paddings that could cause offsets */
    .hero-section, 
    .dark-section-wrapper,
    .work-highlights {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        max-width: none !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* 2. Unified Width & Centering for content blocks */
    .hero-intro, 
    .work-section-title, 
    .case-study-card {
        width: 100% !important;
        max-width: 1224px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* 3. Force hero text blocks to hit the 1224px edges */
    .hero-intro {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
    }

    /* removed about-card padding override */
}

/* 24. ULTIMATE HERO GAP & CENTERING (72px Precision) */

/* Desktop & General */
.hero-section {
    padding-top: 160px !important; /* Calc: Header Wrap 8px + Pill 80px + Gap 72px = 160px */
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding-left: 48px !important; /* Safety minimum */
    padding-right: 48px !important;
    box-sizing: border-box !important;
}

.hero-intro {
    width: 100% !important;
    max-width: 1224px !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    text-align: left !important;
}

/* Tablet & Mobile Header Height Change */
@media screen and (max-width: 1024px) {
    .hero-section {
        padding-top: 144px !important; /* Calc: Header Wrap 8px + Pill 64px + Gap 72px = 144px */
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
    
    .hero-intro {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 32px !important;
    }
    
    .hero-intro-left, .hero-intro-right {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* 25. VERTICAL STABILITY (Anchoring Top Text) */
.hero-section {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important; /* FORCES TOP ALIGNMENT: Stops vertical jumping on resize */
    padding-top: 160px !important; /* Math: 88px (Header + Wrap) + 72px (Gap) */
    position: relative !important;
}

@media screen and (max-width: 1024px) {
    .hero-section {
        padding-top: 144px !important; /* Math: 72px (Header + Wrap) + 72px (Gap) */
    }
}

/* 26. HERO FULL VIEWPORT HEIGHT (Ensures indicator at fold bottom) */
.hero-section {
    min-height: 100vh !important;
    min-height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important; /* FIXED POSITION from the top header */
}

/* 27. FINAL HERO RESOLUTION - UNIFYING 72PX GAP & HORIZONTAL CENTERING */
.hero-section {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* GLOBAL HORIZONTAL CENTERING */
    justify-content: flex-start !important; /* GLOBAL VERTICAL STABILITY (Anchored Top) */
    min-height: 100vh !important;
    background: none !important;
    box-sizing: border-box !important;
}

/* DESKTOP (88px Header + 72px Gap = 160px Total Padding) */
@media screen and (min-width: 1025px) {
    .hero-section {
        padding-top: 160px !important;
    }
    
    .hero-intro {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        width: 100% !important;
        max-width: 1224px !important;
        margin: 0 auto !important;
    }
}

/* TABLET & MOBILE (72px Header + 72px Gap = 144px Total Padding) */
@media screen and (max-width: 1024px) {
    .hero-section {
        padding-top: 144px !important;
    }
    
    .hero-intro {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* Center text blocks horizontally when stacked */
        text-align: center !important;
        gap: 32px !important;
        width: 100% !important;
        max-width: 670px !important; /* Constrain description width for better look */
        margin: 0 auto !important;
    }
}

/* 28. TOTAL VERTICAL STACK STABILITY (Unifying all breakpoints) */
.hero-section {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important; /* ALWAYS ANCHORED TO TOP */
    align-items: center !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    box-sizing: border-box !important;
    position: relative !important;
}

/* Precise Top Gap (Accounting for Header height differences) */
@media screen and (min-width: 1025px) {
    .hero-section {
        padding-top: 160px !important; /* 88px Header + 72px Gap */
    }
}

@media screen and (max-width: 1024px) {
    .hero-section {
        padding-top: 144px !important; /* 72px Header + 72px Gap */
    }
}

/* Ensure the intro container doesn't have any centering margins */
.hero-intro {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Keep indicator at the bottom fold without pushing top text */
.interaction-indicator {
    position: absolute !important;
    bottom: 32px !important;
}

/* 29. THE ABSOLUTE ANCHOR FIX (Tablet & Mobile) */
@media screen and (max-width: 1024px) {
    .hero-section {
        justify-content: flex-start !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .hero-intro {
        flex: none !important; /* CRITICAL: Stops the container from stretching to fill the screen */
        height: auto !important; /* CRITICAL: Keeps name and description together at the top */
        justify-content: flex-start !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Ensure children don't push each other away */
    .hero-intro-left, .hero-intro-right {
        flex: none !important;
        margin: 0 !important;
    }
}

/* 30. MOBILE & TABLET LEFT ALIGNMENT (Hero Text) */
@media screen and (max-width: 1024px) {
    .hero-section {
        align-items: flex-start !important; /* Align the container to the left boundary */
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    .hero-intro {
        align-items: flex-start !important; /* Left align stacked blocks */
        text-align: left !important; /* Left align individual text lines */
        margin-left: 0 !important; /* Remove centering margin */
        max-width: 100% !important;
    }
}

/* 31. PRECISE SIDE GAPS (Tablet: 32px, Mobile: 24px) */

/* Base Hero Section structure for all breakpoints */
.hero-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important; 
    box-sizing: border-box !important;
}

.hero-intro {
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* TABLET BREAKPOINT (768px to 1024px) */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .hero-section {
        padding-left: 32px !important;
        padding-right: 32px !important;
    }
    
    .hero-intro {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* MOBILE BREAKPOINT (Up to 767px) */
@media screen and (max-width: 767px) {
    .hero-section {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
    
    .hero-intro {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* Ensure centering on Desktop remains at 1224px max width */
@media screen and (min-width: 1025px) {
    .hero-section {
        align-items: center !important;
    }
    .hero-intro {
        max-width: 1224px !important;
        margin: 0 auto !important;
    }
}

/* 32. FLUID DESKTOP SAFETY GAPS (32px Minimum side gap) */
@media screen and (min-width: 1025px) {
    .hero-section, 
    .work-highlights {
        padding-left: 32px !important;
        padding-right: 32px !important;
        box-sizing: border-box !important;
    }

    /* Keep the internal content width limited but allow the padding to protect the edges */
    .hero-intro, 
    .work-section-title,
    .case-study-card {
        width: 100% !important;
        max-width: 1224px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* Specific fix for Case Study Cards to ensure they don't lose the 32px buffer */
@media screen and (min-width: 1025px) {
    .case-study-card {
        padding-left: 0 !important; /* Content centered by its own max-width logic */
        padding-right: 0 !important;
    }
}

/* 33. GLOBAL SIDE BUFFER (32px Desktop Safety + 32px Tablet Unified) */

/* Apply to all major landing page sections */
@media screen and (min-width: 768px) {
    .hero-section,
    .work-highlights {
        padding-left: 32px !important;
        padding-right: 32px !important;
        box-sizing: border-box !important;
    }

    /* Keep content centered but protected by the 32px padding */
    .hero-intro, 
    .work-section-title,
    .case-study-card {
        width: 100% !important;
        max-width: 1224px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* Maintain the 24px Mobile override for consistency */
@media screen and (max-width: 767px) {
    .hero-section,
    .work-highlights {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}

/* 34. DESKTOP PROTECTION (32px Minimum Gap Before Breakpoint) */
@media screen and (min-width: 1025px) {
    .hero-intro, 
    .work-section-title,
    .case-study-card {
        width: calc(100% - 64px) !important; /* Forces 32px safety gap on both sides */
        max-width: 1224px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* 36. BREAKPOINT-SPECIFIC HORIZONTAL GAPS (CLEAN RESET) */

/* 1. Desktop Breakpoint (1025px and up) */
@media screen and (min-width: 1025px) {
    .hero-section, 
    .dark-section-wrapper,
    .work-highlights {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .hero-section {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: center !important; 
    }

    .hero-intro, 
    .about-card, 
    .work-section-title,
    .case-study-card {
        width: calc(100% - 64px) !important; 
        max-width: 1224px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: left !important;
    }

    .hero-intro {
        margin-bottom: 0 !important; 
    }

    .interaction-indicator {
        display: flex !important;
        position: relative !important; 
        margin: 40px auto 48px auto !important; /* Reduced top margin to fix mobile position */
        align-self: center !important;
        left: auto !important; 
        right: auto !important;
        transform: none !important; 
        z-index: 101 !important;
    }

    .case-study-card {
        margin-bottom: 160px !important;
    }
}

/* 2. Tablet Breakpoint (768px to 1024px) */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .hero-section,
    .about-section,
    .work-highlights {
        padding-left: 32px !important; /* The 32px Tablet gap */
        padding-right: 32px !important;
    }

    .hero-intro, 
    .about-card,
    .work-section-title,
    .case-study-card {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* 3. Mobile Breakpoint (767px and below) */
@media screen and (max-width: 767px) {
    .hero-section {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    .work-highlights {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .about-section {
        padding-left: 8px !important; /* Specific 8px gap for About Card */
        padding-right: 8px !important;
    }

    .hero-intro, 
    .about-card,
    .work-section-title,
    .case-study-card {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Portfolio Cases Mobile Gaps */
    .work-section-title {
        padding-left: 24px !important;
        padding-right: 24px !important;
        box-sizing: border-box !important;
    }

    .case-study-card {
        padding-left: 0 !important;
        padding-right: 0 !important;
        gap: 24px !important; /* Gap between image and text */
    }

    .card-image {
        width: calc(100% - 16px) !important;
        margin-left: 8px !important;
        margin-right: 8px !important;
        border-radius: 8px !important;
    }

    .card-content-row {
        padding-left: 24px !important;
        padding-right: 24px !important;
        box-sizing: border-box !important;
    }
}

/* 38. PROJECT MASTER STABILITY GUARD */
/* 
   THE HERO SECTION AND INTERACTION INDICATOR LAYOUTS ARE FINAL.
   DO NOT MODIFY THE VERTICAL STACKING, CENTERING, OR MARGINS 
   IN THE HERO OR ABOUT CARD WITHOUT CONSULTING THE STABILITY RECORD.
   VERIFIED STATE: HERO (100VH), INDICATOR (CENTERED, RELATIVE), ABOUT (OVERLAP: -146PX).
*/

/* 39. DESIGN OPS FOOTER — MOBILE FIX */
/* 
   The global site-footer mobile rule uses var(--footer-text-color) which defaults 
   to white (from the dark homepage theme). The designops-footer has a white background,
   making white text invisible. This block overrides those colors ONLY on mobile.
*/
@media (max-width: 767px) {
    .designops-footer {
        --footer-bg: #ffffff !important;
        --footer-divider: #1e1e1e !important;
        --footer-divider-opacity: 0.2 !important;
        --footer-name-color: #898989 !important;
        --footer-text-color: #1e1e1e !important;
        --footer-link-hover: #000 !important;
        background-color: #ffffff !important;
        /* Remove top padding so the divider line connects directly
           to the white content section above — no visible gap */
        padding-top: 0 !important;
    }

    .designops-footer .footer-name {
        color: #898989 !important;
    }

    .designops-footer .footer-email,
    .designops-footer .footer-link,
    .designops-footer .footer-link-social {
        color: #1e1e1e !important;
    }

    .designops-footer .footer-email:hover,
    .designops-footer .footer-link:hover,
    .designops-footer .footer-link-social:hover {
        color: #000 !important;
    }

    .designops-footer .footer-divider {
        background-color: #1e1e1e !important;
        opacity: 0.2 !important;
    }
}

/* --- Universal Scroll Indicator Styles --- */
.interaction-indicator {
    /* Base styles were already positioned, simply adding the wheel animation */
    /* Remove original button pulse animation for the cleaner Mouse UX */
    animation: none !important;
}

.scroll-wheel-anim {
    animation: scrollMouseWheel 2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
    transform-origin: center;
}

@keyframes scrollMouseWheel {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    30% {
        transform: translateY(10px);
        opacity: 0;
    }
    31% {
        transform: translateY(-8px);
        opacity: 0;
    }
    50% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}