/* =========================================
   BASE & VARIABLES
   ========================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Prevent font scaling in landscape mode on WebKit browsers (iOS Safari) */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

ul, ol, li {
    font-size: inherit;
}

:root {
    /* Color System */
    --bg-primary: #FDFBF7;
    --bg-secondary: #FFF8E7;
    --accent-primary: #FF6B35;
    --accent-secondary: #00D4AA;
    --text-primary: #1A1A1A;
    --text-secondary: #666666;
    --text-tertiary: #999999;
    --highlight: #FFE66D;
    
    /* Typography System - Professional (Apple-inspired) */
    --base-size: 17px; /* Body text */
    --text-body: 17px;
    --text-small: 15px;
    --text-xs: 13px;

    /* Headings - Distinct & Clean hierarchy */
    --h1: 64px; /* Hero / Main Titles */
    --h2: 60px; /* Increased to match Slogan size (was 40px) */
    --h3: 28px; /* Subtitles */
    --h4: 24px; /* Card Titles / Small Headings - Updated to 24px based on majority usage */
    
    /* Leading (Line Height) */
    --leading-tight: 1.1;
    --leading-snug: 1.3;
    --leading-normal: 1.5;
    --leading-relaxed: 1.6;

    /* Tracking (Letter Spacing) */
    --tracking-tight: -0.02em;
    --tracking-normal: 0;
    --tracking-wide: 0.02em;
    
    /* Spacing System - 8pt Grid */
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 32px;
    --space-lg: 40px;
    --space-xl: 70px;
    /* Fluid Gutter: 16px (Mobile) -> 60px (Desktop) */
    --gutter: clamp(16px, 5vw, 60px); 
    --space-2xl: 100px;

    /* Case Tabs */
    --case-tab-gap: 2px;
    --case-tab-font: var(--text-small);
    --case-tab-pad-y: 6px;
    --case-tab-pad-x: 14px;
    --case-tab-radius: var(--media-radius);
    --case-tab-active-bg: #000;
    --case-tab-active-color: #fff;
    --case-tab-hover-bg: rgba(0,0,0,0.04);
    --case-tab-connector-w: 1px;
    --case-tab-connector-h: 56px;
    --case-tabs-gradient-w: 8vw;
    --case-tabs-gap-to-card: 8px;
    --case-tabs-inset: var(--gutter);
    /* Match hero-cta sizing for active tab */
    --case-tab-active-pad-y: 12px;
    --case-tab-active-pad-x: 20px;
    --case-tab-active-font: var(--text-body);
    --case-tab-active-radius: var(--media-radius);
    --case-tabs-trim: 15px;

    /* Media */
    --media-radius: clamp(24px, 4vw, 44px);
    --media-fit: cover;
}

/* Video Thumbnails Control */
.video-thumbnails-control {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 102; /* Higher than nav buttons (100) */
    display: flex;
    gap: 10px;
    pointer-events: auto;
}

.video-thumbnail-item {
    width: 80px;
    height: 28px;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    
    /* Apple Glass Border Effect for Unselected State */
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    
    transition: all 0.3s ease;
    background: #000;
    position: relative;
}

.video-thumbnail-item.active {
    border-color: #fff;
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.video-thumbnail-item:hover {
    border-color: #fff;
    transform: scale(1.05);
}

.video-thumbnail-item video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none; /* Let clicks pass to button */
    display: block;
    z-index: 1;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: var(--text-body);
    font-weight: 300; /* Light for slender body text */
    line-height: var(--leading-normal);
    -webkit-font-smoothing: antialiased;
    min-width: 320px;
    overflow-x: hidden; /* Prevent horizontal scroll from 100vw elements */
}

/* UNIFIED TYPOGRAPHY ENFORCEMENT (Global - All Screens) */
/* Enforce same font type and size (17px) for all body text, descriptions, and buttons */
p, 
.impact-body, 
.section-intro, 
.hero-overlay-description, 
.hero-description,
.video-description,
.footer-tagline,
.impact-metric dd,
.company-type,
.hero-cta-btn,
.footer-link,
.footer-contact-link,
button,
.btn,
a.btn,
.case-tab, /* Tabs are interactive elements like buttons */
.impact-list li {
    font-family: 'DM Sans', sans-serif !important;
    font-size: var(--text-body) !important; /* 17px */
    line-height: 1.5 !important;
}

html.page-home,
body.page-home {
    background-color: #000000;
    color-scheme: dark;
}

p strong, li strong {
    font-weight: 500;
}

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

ul { list-style: none; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4, h5, h6 { 
    /* Inherit font-family from body */
    font-weight: 200; /* Extra Light for Apple-like elegance */
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
}

/* Specific Heading Overrides */
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); font-weight: 700; }
h3 { font-size: var(--h3); line-height: var(--leading-snug); }
h4 { font-size: var(--h4); line-height: var(--leading-snug); letter-spacing: var(--tracking-normal); }

/* Utilities */
.container {
    max-width: 1400px;
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.section-content-wrapper {
    max-width: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
}

/* Expanded Container for Specific Sections */
.container-expanded {
    max-width: 100vw; /* Full viewport width */
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding: 0 var(--gutter); /* Maintain consistent padding */
    box-sizing: border-box;
}

.text-gradient {
    background: linear-gradient(135deg, #FFD406, #144EE3, #D980FA, #0CB8FF, #29E0B2, #FFD406);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientTextAnim 8s ease infinite;
}

/* Override for h2 to be black per user request */
h2.text-gradient, h2.section-title.text-gradient {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: #000000;
    color: #000000;
    animation: none;
}

/* New Skills Text Layout */
.skills-text-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin: 2rem 0;
    width: 100%;
}

.skill-column h3 {
    font-family: 'DM Sans', sans-serif;
    font-size: var(--text-body);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    color: var(--text-primary);
}

.skill-column p {
    font-family: 'DM Sans', sans-serif;
    font-size: var(--text-body);
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
}

@media (max-width: 768px) {
    .skills-text-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

.slogan-small {
    font-size: 0.4em; /* Reduced to 40% (-60%) */
    color: #000000;
    font-weight: 500;
    -webkit-text-fill-color: initial;
    text-fill-color: initial;
    background: none;
}

@keyframes gradientTextAnim {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* =========================================
   BACKGROUND MARQUEE (Huge Text)
   ========================================= */
.bg-marquee-container {
    position: fixed;
    top: 0; /* Changed from 50% to 0 to fill screen */
    left: 0;
    transform: none; /* Removed translateY */
    width: 100%;
    height: 100vh;
    z-index: 0; /* Behind everything */
    pointer-events: none;
    display: flex;
    flex-direction: column; /* Stack vertically */
    justify-content: flex-start; /* Start from top */
    align-items: flex-start;
    opacity: 0;
    transition: opacity 2s ease;
    overflow: hidden;
    padding-top: 0; /* Removed padding to be at the very top edge */
}

.bg-marquee-container.visible {
    opacity: 1;
}

.bg-marquee-row {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    line-height: 0.9; /* Tight line height */
    margin-bottom: -2vh; /* Overlap slightly for tight feel */
}

.bg-marquee-content {
    display: flex;
    /* Animation definition moved to specific rows */
}

/* Row 1: Creativity connects (Reverse) */
.bg-marquee-row.reverse .bg-marquee-content {
    animation: bgMarqueeReverse 80s linear infinite;
}

/* Row 2: Compelling narratives... (Normal) */
.bg-marquee-row.normal .bg-marquee-content {
    animation: bgMarquee 80s linear infinite;
}

.bg-marquee-text {
    font-family: 'DM Sans', sans-serif;
    font-size: 50vh; /* Increased to fill screen height (approx 45% height each with line-height) */
    font-weight: 100; /* Thin */
    color: rgba(0, 0, 0, 0.03); /* Very subtle */
    line-height: 0.9;
    white-space: nowrap;
    margin-right: 0.2em;
    text-transform: uppercase;
}

@keyframes bgMarquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes bgMarqueeReverse {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}


/* =========================================
   HEADER & MENU
   ========================================= */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: transform 0.4s ease;
    transform: translateY(-100%);
    background: #ffffff;
    color: var(--text-primary);
}

.header.visible {
    transform: translateY(0);
}

.header-gradient-bar {
    height: 4px;
    background: linear-gradient(90deg, #FFD406, #FF506A, #0CB8FF, #29E0B2, #9D26D0);
    display: none; /* Hidden per user request */
}

.marquee-track {
    display: flex;
    white-space: nowrap;
    overflow: hidden;
    padding: 4px 0;
    background: transparent;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    display: none; /* Hidden per user request */
}

.marquee-content {
    display: flex;
    white-space: nowrap;
    width: max-content;
    animation: marquee 120s linear infinite; /* Adjusted speed for longer content */
}

.marquee-item {
    font-size: 13.2px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-right: 30px;
    /* Animation removed from item */
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px var(--gutter);
}

.header-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0; /* Allow shrinking */
    /* REMOVED: flex: 1; - This caused the logo container to stretch and push elements apart if justify-content was affected */
    /* REMOVED: margin-right: 30px; - Replaced with flex-grow: 0 to keep it compact */
    flex-grow: 0; 
    margin-right: auto; /* Push Hamburger menu to the far right */
    max-width: calc(100% - 40px); /* Ensure space for hamburger */
}

.header-name {
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: var(--text-body);
    letter-spacing: 1px;
    white-space: nowrap;
    flex-shrink: 0; /* Always show name */
    color: var(--text-primary);

    /* Hover Gradient Effect (Left-to-Right Wipe) */
    background-image: linear-gradient(to right, transparent 50%, var(--text-primary) 50%), 
                      linear-gradient(135deg, #FFD406, #144EE3, #D980FA, #0CB8FF, #29E0B2, #FFD406);
    background-size: 200% 100%, 300% 300%;
    background-position: 100% 0%, 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: background-position 0.8s ease;
}

.header-name:hover {
    background-position: 0% 0%, 100% 50%;
}

.header-divider { color: var(--text-primary); flex-shrink: 0; }

.header-title {
    display: flex;
    gap: 6px;
    font-size: var(--text-body);
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.64px;
    white-space: nowrap;
    overflow: hidden;
    min-width: 0; /* Critical for flex child truncation */
    flex-shrink: 1; /* Default: allow shrink */
}

.header-title span {
    white-space: nowrap;
    overflow: hidden;
    /* text-overflow: ellipsis; Removed per user request (gradient overlay handles it) */
    display: block;
    min-width: 0;
    
    /* Smooth Transition for Text Swap */
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1;
    transform: translateY(0);
    will-change: transform, opacity;
}

.header-title span.is-exiting {
    opacity: 0;
    transform: translateY(-10px);
}

.header-title span.is-entering {
    opacity: 0;
    transform: translateY(10px);
    transition: none; /* Instant jump to start position */
}

.hamburger-btn {
    width: 21px;
    height: 14px;
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
    z-index: 2001;
}

/* Gradient Overlay for Menu Button (Small Screens Only) */
.hamburger-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    right: calc(-1 * var(--gutter)); /* Keep aligned to edge */
    transform: translateY(-50%);
    width: 90px; /* Fixed width regardless of screen dimensions */
    height: 300%;
    /* Gradient: Solid white at right (under button), fading to transparent */
    background: linear-gradient(to left, rgba(255,255,255,1) 45px, rgba(255,255,255,0));
    z-index: -1;
    pointer-events: none;
    opacity: 0; /* Hidden by default */
    transition: opacity 0.5s ease; /* Smooth transition */
}

@media (max-width: 360px) {
    .hamburger-btn::before {
        opacity: 1; /* Only display on screens <= 360px */
    }
}

.social-links-container {
    display: flex;
    gap: 14px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.social-links-container.is-stacked {
    flex-direction: column;
}

.social-btn {
    padding: 14px 26px;
    border: 1px solid rgba(0, 0, 0, 0.22);
    border-radius: 999px;
    text-transform: uppercase;
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-decoration: none;
    transition: all 0.25s ease;
    background: rgba(0, 0, 0, 0.02);
    color: var(--text-primary);
}

.social-btn:hover {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.32);
}

.social-btn.social-btn--black {
    background: #000;
    border-color: #000;
    color: #fff;
}

.social-btn.social-btn--black:hover {
    background: rgba(0, 0, 0, 0.86);
    border-color: rgba(0, 0, 0, 0.86);
}

.hamburger-line {
    display: block;
    width: 100%;
    height: 1.5px;
    background: var(--text-primary);
    margin-bottom: 4px;
    transition: 0.3s;
}

.hamburger-btn.active .hamburger-line:nth-child(1) { transform: rotate(45deg) translate(3px, 4px); }
.hamburger-btn.active .hamburger-line:nth-child(2) { opacity: 0; }
.hamburger-btn.active .hamburger-line:nth-child(3) { transform: rotate(-45deg) translate(3px, -4px); }

.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: var(--bg-primary);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.menu-overlay.active { opacity: 1; pointer-events: all; }

.menu-close-btn {
    position: absolute;
    top: 30px;
    right: var(--gutter);
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    line-height: 1;
    font-weight: 300;
    background: rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 999px;
    cursor: pointer;
    color: var(--text-primary);
    opacity: 0.8;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
}

.menu-close-btn:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.10);
    border-color: rgba(0, 0, 0, 0.26);
    transform: scale(1.05);
}

.menu-close-btn:active {
    transform: scale(0.98);
}

.menu-close-btn:focus-visible {
    outline: 2px solid rgba(0, 0, 0, 0.45);
    outline-offset: 3px;
}

.menu-list { text-align: center; font-weight: 600; }
.menu-item { overflow: hidden; margin-bottom: 10px; }

.menu-link {
    display: inline-block;
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(1.4rem, 2.8vw, 2.45rem); /* Reduced -30% from clamp(2rem, 4vw, 3.5rem) */
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    position: relative;
    background: linear-gradient(135deg, #FFE66D, #FFB6C1, #87CEEB, #98D8C8, #BB8FCE, #FFE66D);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    background-clip: text;
    transform: translateY(100%);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease;
}

.menu-overlay.active .menu-link { transform: translateY(0); }
.menu-overlay.active .menu-item:nth-child(1) .menu-link { transition-delay: 0.1s; }
.menu-overlay.active .menu-item:nth-child(2) .menu-link { transition-delay: 0.2s; }
.menu-overlay.active .menu-item:nth-child(3) .menu-link { transition-delay: 0.3s; }

.menu-link:hover {
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: gradientTextAnim 8s ease infinite;
}

@media (max-width: 400px) {
    .hero-name {
        font-size: clamp(1.6rem, 7vw, 2rem);
        letter-spacing: 0.18em;
    }
    .header-name {
        font-size: var(--text-small);
        letter-spacing: 0.8px;
    }
}

/* =========================================
   HERO & PARALLAX
   ========================================= */
.hero {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100vh; /* Native height */
    min-height: 100vh;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-bottom: 0; /* Removed bottom padding to strictly center content vertically */
    transition: opacity 0.5s ease, transform 0.5s ease;
    will-change: opacity, transform;
    overflow: hidden; /* Prevent horizontal scroll when video scales > 1 */
}

@media (max-width: 768px) {
    .hero {
        /* Add padding-bottom on mobile to prevent content from being cut off by browser toolbars */
        /* Removed padding-bottom here as we use svh on overlay instead */
    }
}

.hero-video-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 0;
    opacity: 1;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, opacity; /* Optimize for scale/fade animation */
}

.hero-bg-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: none;
    filter: blur(var(--hero-blur, 0px));
}

.hero-video-layer::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 80%;
    pointer-events: none;
    background: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
}

.hero-logo-anim {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.hero-overlay-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.hero-overlay-title .hero-name,
.hero-overlay-title .hero-title,
.hero-overlay-title .hero-title span {
    color: #ffffff !important;
}

.hero-overlay-title .hero-name--overlay {
    font-size: var(--fs-hero-name) !important;
    letter-spacing: 0.25em !important;
    margin-right: -0.3em;
}

.hero-overlay-title .hero-title--overlay {
    font-size: calc(var(--text-xs) * 0.7) !important;        /* Thu nhỏ ~30% so với 14px gốc */
    letter-spacing: calc(0.25em * 1.8) !important; /* Tăng tracking ~80% so với gốc */
}

.hero-content {
    position: relative;
    z-index: 1;
    display: none;
}

.hero--show-content .hero-video-layer {
    opacity: 1;
    pointer-events: auto;
}

.hero--show-content {
    background-color: transparent;
}

.hero--show-content .hero-content {
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
}

.hero--show-content .hero-name-wrapper,
.hero--show-content .hero-title-main {
    display: none;
}

.hero-overlay-layout {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh; /* Fallback */
    height: 100svh; /* Stable visible height */
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0 clamp(24px, 6vw, 80px) clamp(72px, 10vh, 140px);
    pointer-events: none; /* Let clicks pass through to video/bg */
}

.hero-overlay-left,
.hero-overlay-right,
.hero-cta {
    pointer-events: auto; /* Re-enable clicks for content */
}

.hero-overlay-left {
    max-width: 480px;
    text-align: left;
}

.hero-overlay-name {
    font-family: 'DM Sans', sans-serif;
    /* Deem Journal inspired: Large, tight, neo-grotesque style */
    font-size: clamp(3.5rem, 7vw, 6rem);
    font-weight: 400;
    letter-spacing: -0.04em;
    line-height: 0.95;
    text-transform: none; /* Changed from uppercase to none per user request */
    
    /* Hover Gradient Effect (Left-to-Right Wipe) */
    background-image: linear-gradient(to right, transparent 50%, #ffffff 50%), 
                      linear-gradient(135deg, #FFD406, #144EE3, #D980FA, #0CB8FF, #29E0B2, #FFD406);
    background-size: 200% 100%, 300% 300%;
    background-position: 100% 0%, 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #ffffff; /* Fallback */
    transition: background-position 0.8s ease;
    
    margin-bottom: 24px;
}

.hero-overlay-name:hover {
    background-position: 0% 0%, 100% 50%;
}

.hero-overlay-description {
    font-family: 'DM Sans', sans-serif;
    font-size: var(--text-small);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.84);
    font-weight: 500;
}

.hero-overlay-accent {
    color: #ffffff; /* Changed to white per user request */
}

.hero-overlay-right {
    display: flex;
    align-items: stretch;
    gap: 12px;
}

.hero-overlay-divider {
    display: none;
}

.hero-overlay-keywords {
    display: flex;
    flex-direction: column;
    font-family: 'Inter', sans-serif;
    font-size: calc(var(--h3) * 0.7);
    font-weight: 700;
    letter-spacing: normal;
    line-height: 1.21;
    color: #CCFF00;
    text-transform: uppercase;
    align-items: flex-start;
    text-align: left;
}

@media (max-width: 768px) {
    /* .hero height kept at 100vh (native) from main rule */

    .hero-overlay-layout {
        align-items: flex-start;
        justify-content: flex-end;
        flex-direction: column;
        /* Ensure bottom padding accounts for Home Indicator */
        padding: 0 24px max(96px, calc(env(safe-area-inset-bottom) + 64px)); 
        gap: 32px;
    }

    .hero-overlay-left {
        max-width: 100%;
        text-align: left;
    }

    .hero-overlay-name {
        /* font-size: 21px; Removed to allow main clamp size to work */
    }

    .hero-overlay-description {
        max-width: 320px;
    }

    .hero-overlay-right {
        align-items: stretch;
    }

    .hero-overlay-keywords {
        font-size: calc(var(--fs-hero-name) * 0.56);
    }
}

@media (max-width: 768px) and (orientation: landscape) {
    .hero-overlay-layout {
        align-items: flex-end;
        justify-content: space-between;
        flex-direction: row;
        padding: 0 32px clamp(28px, 7vh, 56px);
    }

    .hero-overlay-left {
        max-width: 360px;
        text-align: left;
    }

    .hero-overlay-description {
        max-width: 360px;
    }

    .hero-overlay-keywords {
        font-size: calc(var(--fs-hero-name) * 0.728);
        text-align: left;
        align-items: flex-start;
    }
}

.hero-name-wrapper {
    /* Removed animation: centerToTop */
    margin-bottom: 10px; /* Reduced from var(--space-sm)=16px (-40%) */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.animation-gallery {
    column-count: 3;
    column-gap: 16px;
    justify-content: center;
    margin: 0 auto;
    max-width: 1200px;
}
@media (max-width: 1024px) {
    .animation-gallery { column-count: 3; column-gap: 14px; }
}
@media (max-width: 900px) {
    .animation-gallery { column-count: 2; column-gap: 14px; }
}
@media (max-width: 768px) and (orientation: landscape) {
    .animation-gallery { column-count: 2; }
}
@media (max-width: 768px) and (orientation: portrait) {
    .animation-gallery {
        column-count: 1;
        column-gap: 12px;
    }
}
.animation-card {
    width: 100%;
    display: inline-block;
    margin: 0 0 16px;
    break-inside: avoid;
    aspect-ratio: var(--anim-ar, 16 / 9);
    position: relative;
    border-radius: var(--media-radius);
    overflow: hidden;
    background: #000;
    border: 6px solid #ffffff;
    box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}

#case-anim {
    position: relative;
}

#case-anim .anim-tab-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: rgba(0, 0, 0, 0.72);
    z-index: 30;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

#case-anim.is-loading .anim-tab-loading {
    opacity: 1;
    pointer-events: auto;
}

.anim-tab-spinner {
    width: 46px;
    height: 46px;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.28);
    border-top-color: rgba(255, 255, 255, 0.92);
    animation: animSpinPlain 0.9s linear infinite;
}

.anim-tab-label {
    font-family: 'Inter', sans-serif;
    font-size: var(--text-small);
    color: rgba(255, 255, 255, 0.88);
    letter-spacing: 0.02em;
}

.animation-card.is-buffering::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.58);
    z-index: 6;
}

.animation-card.is-buffering::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 46px;
    height: 46px;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.28);
    border-top-color: rgba(255, 255, 255, 0.92);
    transform: translate(-50%, -50%);
    z-index: 7;
    animation: animSpin 0.9s linear infinite;
}

.animation-modal.is-buffering .animation-modal-content::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.52);
    z-index: 3;
}

.animation-modal.is-buffering .animation-modal-content::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 46px;
    height: 46px;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.28);
    border-top-color: rgba(255, 255, 255, 0.92);
    transform: translate(-50%, -50%);
    z-index: 4;
    animation: animSpin 0.9s linear infinite;
    pointer-events: none;
}

@keyframes animSpin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes animSpinPlain {
    to { transform: rotate(360deg); }
}
.animation-thumb {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    background: #000;
}
.animation-inline-play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    border-radius: 999px;
    border: 1.5px solid rgba(255, 255, 255, 0.7);
    background: rgba(0, 0, 0, 0.45);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    z-index: 2;
    cursor: pointer;
}
.animation-inline-play::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-40%, -50%);
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 16px solid rgba(255, 255, 255, 0.9);
}
.animation-inline-fullscreen {
    position: absolute;
    top: auto;
    right: 10px;
    bottom: 10px;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    z-index: 5;
    cursor: pointer;
}
.animation-inline-fullscreen::before {
    content: "⤢";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -52%);
    color: rgba(255, 255, 255, 0.92);
    font-size: 22px;
    line-height: 1;
}
.animation-card.is-inline-playing .animation-inline-fullscreen {
    display: block;
}
.animation-card-title {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px 54px 12px 12px;
    border: none;
    background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0));
    color: rgba(255,255,255,0.92);
    font-size: var(--text-small);
    text-align: left;
    cursor: pointer;
    z-index: 2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-tap-highlight-color: transparent;
}
.animation-inline-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #000;
    object-fit: contain;
    object-position: center;
    z-index: 3;
}
.animation-card.is-inline-playing .animation-inline-play {
    opacity: 0;
    pointer-events: none;
}
.animation-modal {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 5000;
    z-index: 5000;
}
.animation-modal.open { display: block; }
.animation-modal-backdrop {
    position: absolute;
    inset: 0;
    background: #000;
}
.animation-modal-content {
    position: fixed;
    inset: 0;
    width: 100vw;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
    overscroll-behavior: contain;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.animation-modal-gesture {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: transparent;
    touch-action: pan-y;
}
.animation-modal-video {
    width: 100vw;
    height: auto;
    max-height: 100vh;
    border-radius: 0;
    background: #000;
    border: none;
    box-shadow: none;
    object-fit: contain;
    display: block;
}
.animation-modal-content video::-webkit-media-controls-panel {
    border-radius: 0;
}
.animation-modal-meta {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 14px 16px 22px;
    max-height: var(--meta-max, 42vh);
    overflow: auto;
    color: #fff;
    font-size: var(--text-small);
    opacity: 0.9;
    background: linear-gradient(to top, rgba(0,0,0,0.98) 0%, rgba(0,0,0,0.65) 55%, rgba(0,0,0,0) 100%);
    border: none;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    z-index: 4;
}
.animation-modal-title {
    font-size: var(--text-body);
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.animation-modal-desc {
    font-size: var(--text-small);
    opacity: 0.85;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.animation-modal-meta.is-expanded {
    max-height: var(--meta-max, 78vh);
    padding-top: 22px;
    background: linear-gradient(to top, rgba(0,0,0,0.98) 0%, rgba(0,0,0,0.78) 50%, rgba(0,0,0,0) 100%);
}
.animation-modal-meta.is-expanded .animation-modal-title,
.animation-modal-meta.is-expanded .animation-modal-desc {
    white-space: normal;
}
.animation-modal-close {
    position: fixed;
    top: 12px;
    left: 12px;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    color: transparent;
    font-size: 0;
    cursor: pointer;
    z-index: 6000;
}
.animation-modal-close::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%3E%3Cpath%20d%3D%27M7%207l10%2010M17%207L7%2017%27%20stroke%3D%27white%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 26px 26px;
}

.animation-modal-video::-webkit-media-controls {
    display: none !important;
}
.animation-modal-video::-webkit-media-controls-enclosure {
    display: none !important;
}
.animation-modal-video::-webkit-media-controls-panel {
    display: none !important;
}

body.animation-modal-open .header {
    display: none !important;
}
body.animation-modal-open .case-tabs-bleed,
body.animation-modal-open #case-tabs-bleed,
body.animation-modal-open .case-study-tabs,
body.animation-modal-open #case-tabs {
    display: none !important;
}

@keyframes centerToTop {
    0% { transform: translateY(12vh); }
    100% { transform: translateY(0); }
}

.intro-greeting {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: clamp(2rem, 6vw, 4.5rem);
    font-weight: 200;
    color: var(--text-secondary);
    margin-bottom: var(--space-xs);
    opacity: 0;
    animation: greetingSequence 1s ease 0.2s forwards;
}

.intro-greeting.finished { display: none; }

@keyframes greetingSequence {
    0% { opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; max-height: 100px; margin-bottom: var(--space-xs); transform: translateY(0); }
    100% { opacity: 0; max-height: 0; margin-bottom: 0; transform: translateY(-20px); }
}

.hero-name {
    font-family: 'Inter', sans-serif;
    font-size: clamp(2rem, 8vw, 2.5rem);
    font-weight: 600; 
    line-height: 0.95;
    letter-spacing: 0.25em;
    margin-right: -0.3em;
    color: #000000;
    opacity: 1; /* Changed from 0 to 1 */
    /* Removed animation: simpleFadeIn */
    white-space: nowrap;
}

@keyframes simpleFadeIn { to { opacity: 1; } }

.hero-title {
    /* Fluid Typography & Spacing - Unified Scale 320px -> 1920px */
    display: flex;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    font-family: 'Inter', sans-serif;
    
    /* Fixed Scale: 14px (All Screens) - Immutable per user request */
    font-size: var(--fs-hero-title) !important;
    
    font-weight: 600;
    
    /* Unified Color: Black */
    color: #000000 !important;
    
    text-transform: uppercase;
    
    /* Fixed Letter Spacing: 0.25em */
    letter-spacing: 0.25em !important;
    
    /* Fixed Margin Bottom: 20px */
    margin-bottom: 20px !important;
    
    opacity: 1;
    
    /* Layout & Centering */
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden;
    z-index: 10;
    text-align: center !important;
    margin-left: auto;
    margin-right: auto;
}

.hero-title span {
    white-space: nowrap;
    overflow: hidden;
    /* text-overflow: ellipsis; Removed per user request */
    display: block;
    min-width: 0;
}

.hero-slogan {
    font-family: 'Inter', sans-serif;
    font-size: clamp(3rem, 7vw, 8rem); /* Optimized for Desktop (approx 7vw, max 128px) */
    font-weight: 300;
    line-height: 1.02; /* Increased by 20% from 0.85 */
    max-width: 100%;
    margin: 0 auto calc(var(--space-xl) * 0.5);
    position: relative;
    padding: 0 var(--gutter);
    letter-spacing: -0.04em;
    color: #000000;
    will-change: transform;
    text-align: center; /* Ensure center alignment on all screens */
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    /* text-transform: uppercase; Removed per user request */
}

.hero-slogan strong {
    font-weight: 500;
}

.hero-slogan .text-gradient {
    font-weight: 800; /* Reduced from 900 */
}

/* Staggered and independent gradient animation for slogan words */
.hero-slogan .text-gradient:nth-of-type(1) {
    animation-delay: 0s;
    animation-duration: 8s;
}
.hero-slogan .text-gradient:nth-of-type(2) {
    animation-delay: -2.2s;
    animation-duration: 9.5s;
}
.hero-slogan .text-gradient:nth-of-type(3) {
    animation-delay: -5.1s;
    animation-duration: 7.2s;
}
.hero-slogan .text-gradient:nth-of-type(4) {
    animation-delay: -1.4s;
    animation-duration: 8.4s;
}

.hero-overlay-keywords .text-gradient:nth-of-type(1) {
    animation-delay: 0s;
    animation-duration: 7s;
}

.hero-overlay-keywords .text-gradient:nth-of-type(2) {
    animation-delay: -1.5s;
    animation-duration: 8.5s;
}

.hero-overlay-keywords .text-gradient:nth-of-type(3) {
    animation-delay: -3.2s;
    animation-duration: 6.8s;
}

.hero-overlay-keywords .text-gradient:nth-of-type(4) {
    animation-delay: -0.9s;
    animation-duration: 9s;
}

.hero-overlay-keywords .text-gradient {
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: #ffffff;
    color: #ffffff;
    animation: none;
}

.hero-overlay-keywords .text-gradient::before {
    content: "";
    width: 0.228em;
    height: 0.228em;
    border-radius: 999px;
    background: #00FF11;
    flex: 0 0 auto;
}

.slogan-inner {
    opacity: 1; /* Changed from 0 to 1 */
    /* Removed animation: slideUp */
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
    gap: 12px;
}

.slogan-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(0);
    transition: none;
    will-change: transform, opacity;
}

.slogan-word.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.slogan-dot {
    display: inline-block;
    opacity: 1;
}

.hero-slogan.is-support-visible .hero-description,
.hero-slogan.is-support-visible .hero-cta-btn {
    opacity: 1;
    transform: translateY(0);
}

.hero-slogan.is-scroll-driven .slogan-word,
.hero-slogan.is-scroll-driven .hero-description,
.hero-slogan.is-scroll-driven .hero-cta-btn {
    transition: none;
}

.hero-description {
    font-family: 'Inter', sans-serif;
    font-size: var(--text-body);
    max-width: 100%; /* Changed from 680px to 100% per user request */
    margin: var(--space-sm) auto 0; /* Reduced top margin */
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
    font-weight: 300; /* Changed from 400 to 300 (Light) */
    padding: 0; /* Removed var(--gutter) to match sibling width */
    text-align: center;
    position: relative;
    z-index: 2;
    opacity: 0;
    transform: translateY(20px);
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease;
    letter-spacing: normal; /* Reset inherited tracking from parent */
}

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

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* CTA Button (Apple Style Clone) */
.hero-cta-btn {
    display: inline-block;
    margin-top: var(--space-md);
    /* Apple Standard Properties */
    padding: 11px 21px; /* Exact Apple padding */
    border: none; /* No border for Apple primary buttons */
    border-radius: 980px; /* Apple's specific pill radius */
    background-color: #000000; /* User Request: Black background */
    color: #00D4AA; /* User Request: Bright Green (Teal) text */
    font-family: 'Inter', sans-serif;
    font-size: var(--text-body); /* Standard Apple Body size */
    font-weight: 400; /* Regular weight like 'Learn more' */
    text-transform: none; /* Apple buttons are Sentence case, not Uppercase */
    letter-spacing: -0.022em; /* Tight SF Pro spacing */
    line-height: 1.17648; /* Apple specific line-height */
    text-decoration: none;
    transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Apple easing */
    cursor: pointer;
    
    /* Animation similar to description */
    opacity: 0;
    transform: translateY(20px);
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease;
    position: relative;
    z-index: 2;
}

.hero-cta-btn:hover {
    background-color: #333333; /* Dark gray on hover */
    color: #29E0B2; /* Slightly brighter teal on hover */
    transform: none;
    box-shadow: none;
}

/* =========================================
   MAIN CONTENT
   ========================================= */
.main-content {
    background: #ffffff;
    width: 100%;
    /* max-width: 100%; Removed to respect container max-width */
    margin: 0 auto;
    padding: 0 var(--gutter) var(--space-xl);
    position: relative;
    z-index: 2;
    margin-top: 100vh;
    border-radius: 0;
    /* overflow: hidden; Removed to allow sticky positioning to work */
    transition: opacity 0.5s ease;
}

.main-content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0;
    background: transparent;
    pointer-events: none;
    z-index: 0;
}

.main-content.visible { opacity: 1; }

.section { margin-bottom: 120px; }
#showreel.section { margin-bottom: 60px; }

/* Video Wrapper (iframe container) */
.video-wrapper {
    margin-top: -1px; /* Pull up slightly to cover any sub-pixel white gap from parent */
    margin-bottom: 0 !important; /* Force remove bottom margin to stick to caption */
    position: relative;
    width: 100vw !important;
    max-width: 100vw !important;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    border-radius: 0 !important;
    background-color: #000 !important; /* Black background to show placeholder */
    outline: none;
    border: none;
    box-shadow: -2px 0 0 #000, 2px 0 0 #000; /* Fix sub-pixel white gap */
}

.video-wrapper iframe {
    display: block;
    vertical-align: bottom;
    z-index: 1; /* Ensure iframe is above background but below overlay */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none !important;
    outline: none !important;
}

.video-wrapper::after {
    display: none;
}

/* Video Gradient Overlay */
.video-gradient-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 150px; /* Fade area height */
    background: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 2; /* Ensure it overlays the iframe */
}

.video-gradient-overlay.visible {
    opacity: 1;
}

/* Video Caption Styles */
.video-caption-container {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Center align vertically */
    padding: 20px var(--gutter); /* Use gutter variable for consistent horizontal padding */
    margin-top: -1px; /* Remove gap with iframe/video wrapper */
    margin-bottom: 20px; /* Reduced from 50px to tighten space with next section */
    flex-wrap: wrap;
    gap: 15px;
    background: #000; /* Black background */
    width: 100vw; /* Full viewport width */
    margin-left: calc(-50vw + 50%); /* Pull left to edge */
    margin-right: calc(-50vw + 50%); /* Pull right to edge */
    box-sizing: border-box; /* Include padding in width */
    box-shadow: -2px 0 0 #000, 2px 0 0 #000; /* Fix sub-pixel white gap */
}

.video-label {
    font-family: 'DM Sans', sans-serif;
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff; /* White text */
}

.video-description {
    font-family: 'DM Sans', sans-serif;
    font-size: var(--text-small);
    color: rgba(255, 255, 255, 0.8); /* White text with opacity */
    max-width: 500px;
    line-height: 1.5;
    text-align: right;
}

/* Fix for white gradient appearing on video edges - Applied Globally */
.video-wrapper::before,
.video-wrapper::after,
.video-caption-container::before,
.video-caption-container::after {
    content: none !important;
    display: none !important;
    background: none !important;
    opacity: 0 !important;
}

#media-wrapper.video-wrapper::before {
    content: "" !important;
    display: block !important;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%) !important;
    opacity: 1 !important;
    pointer-events: none;
    z-index: 3;
}

@media (max-width: 768px) {
    .video-caption-container {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
    .video-description {
        text-align: left;
        max-width: 100%;
    }
}

.section-label {
    font-family: 'Inter', sans-serif;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
    background: #000000;
    /* backdrop-filter: blur(10px); Removed for solid black */
    /* -webkit-backdrop-filter: blur(10px); */
    color: #00D4AA;
    border: none;
    display: inline-block;
    padding: 4px 12px;
    border-radius: 4px;
    font-weight: 700;
    position: relative; /* Disabled sticky per user request */
    /* top: 80px; */
    z-index: 1; /* Reduced z-index */
    transition: all 0.3s ease;
}

.section-label.is-stuck, .recent-companies-label.is-stuck {
    /* Disabled stuck styles */
    /*
    background: rgba(242, 242, 242, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #000000;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    */
}
.section-title {
    font-size: var(--h2);
    font-weight: 400; /* Regular weight per user request */
    margin-top: 0; /* User Request: Reduce margin top to 0 */
    padding-top: 0; /* User Request: Reduce padding top to 0 */
    margin-bottom: 30px; /* Reduced from 60px (-50%) */
    line-height: 1.1; /* Tightened line spacing (-50% leading) */
}
#highlights-video .section-title {
    padding-top: 32px;
}
.section-intro {
    font-size: var(--text-small);
    line-height: 1.6;
    color: var(--text-secondary);
    width: 100%;
    max-width: 100%;
    margin-bottom: 40px;
    margin-top: -10px;
}

.section-intro strong {
    color: var(--text-primary);
    font-weight: 500;
}

/* Expertise */
.skills-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Changed from 4 to 2 columns */
    gap: 20px; /* Reduced gap to 20px to match companies-carousel */
    align-items: start;
    width: 100%; /* Ensure full width */
    margin: 0 auto; /* Center the grid */
}
.skill-category h3 {
    font-size: var(--h4); /* Increased size slightly */
    margin-bottom: 25px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
    
    /* Responsive Alignment Rule: Ensure consistent height */
    min-height: auto; /* Removed fixed height constraint */
    line-height: 1.4;
    display: block; /* Reset flex */
    
    /* Gradient Headline */
    background: linear-gradient(90deg, #333333, #666666);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.skill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: var(--text-body);
    color: var(--text-secondary);
    line-height: 1.6;
}
.skill-tag {
    background: #f4f4f4;
    padding: 6px 12px;
    border-radius: 8px;
    color: var(--text-secondary);
    transition: background 0.2s ease;
}
.skill-tag:hover {
    background: #e8e8e8;
}

/* Highlighted Category (Green -> Gradient) */
.skill-category.highlight-green .skill-tag {
    /* Animated Gradient Background (Green & Blue) */
    background: linear-gradient(135deg, #29E0B2, #0CB8FF, #29E0B2);
    background-size: 200% 200%;
    animation: gradientTextAnim 4s ease infinite;
    
    /* Flat Design: No Shadow, No Border */
    border: none;
    box-shadow: none;
    
    color: #ffffff; /* White text */
    font-weight: 500;
}

/* Randomize animation offsets for independent movement */
.skill-category.highlight-green .skill-tag:nth-child(1) { animation-delay: 0s; }
.skill-category.highlight-green .skill-tag:nth-child(2) { animation-delay: -1.5s; }
.skill-category.highlight-green .skill-tag:nth-child(3) { animation-delay: -3s; }
.skill-category.highlight-green .skill-tag:nth-child(4) { animation-delay: -4.5s; }
.skill-category.highlight-green .skill-tag:nth-child(5) { animation-delay: -6s; }
.skill-category.highlight-green .skill-tag:nth-child(6) { animation-delay: -7.5s; }

.skill-category.highlight-green .skill-tag:hover {
    /* Keep animation running, maybe adjust brightness? 
       For now, let's just let the animation do the work. 
       Or maybe slightly dim it?
    */
    opacity: 0.9;
}

/* Highlights */
.highlights-box {
    background: var(--bg-secondary);
    padding: 30px 60px 60px 60px; /* Reduced top padding from 60px */
    border-radius: 20px;
}
.highlights-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}
.highlight-item {
    font-size: var(--text-body);
    line-height: 1.6;
}

/* Companies */
.recent-companies {
    text-align: left;
}
.recent-companies-label {
    margin-bottom: 40px;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: #000000;
    /* backdrop-filter: blur(10px); */
    /* -webkit-backdrop-filter: blur(10px); */
    color: #00D4AA;
    border: none;
    display: inline-block;
    padding: 4px 12px;
    border-radius: 4px;
    font-weight: 700;
    position: relative; /* Disabled sticky per user request */
    /* top: 80px; */
    z-index: 1; /* Reduced z-index */
    transition: all 0.3s ease;
}
.companies-carousel {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    align-items: center;
    padding: 0;
    margin: 0;
    width: 100%; /* Ensure full width */
}
.company-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 0; /* Remove horizontal padding */
    position: relative;
    border-radius: 12px;
    width: 100%;
    transition: transform 0.3s ease;
    
    /* Gradient Border Trick using pseudo-element to support border-radius */
    background: transparent;
    border: 1px solid transparent; /* Reserve space */
}

/* Pseudo-element for gradient border */
.company-item::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px; 
    padding: 1px; /* Width of the border */
    /* Gradient: Top #eee, Center Transparent (Expanded gap), Bottom #eee */
    background: linear-gradient(to bottom, #eee 0%, rgba(238, 238, 238, 0) calc(50% - 30px), rgba(238, 238, 238, 0) calc(50% + 30px), #eee 100%); 
    -webkit-mask: 
       linear-gradient(#fff 0 0) content-box, 
       linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude; 
    pointer-events: none; /* Let clicks pass through */
}
.company-item:hover { transform: translateY(-5px); }
.company-logo { 
    margin-bottom: 10px;
    width: 100%; /* Full width of container */
    max-width: 100%; /* Ensure it fills available space */
    min-width: 140px; /* Minimum width set to 140px per user request */
    height: auto; /* Allow natural height based on width */
    object-fit: contain; /* Ensure logo is fully visible */
    object-position: center;
}
.company-type { 
    font-size: var(--text-small); 
    color: var(--text-tertiary); 
    text-transform: none; 
    display: block; /* Force new line */
    width: 100%; /* Ensure full width */
    max-width: 100px; /* Force wrap at space by constraining width */
    margin: 0 auto; /* Center alignment */
}
.company-role { 
    font-weight: 400; /* Regular per user request */
    font-size: var(--text-body); 
    margin-bottom: 10px;
    display: block; /* Ensure block level */
    width: 100%; /* Force new line */
    max-width: min-content; /* Force wrap at space tightly */
    margin-left: auto;
    margin-right: auto;
}

/* Experience */
.experience-item {
    border-bottom: 1px solid #eee;
    padding-bottom: 60px;
    margin-bottom: 60px;
}
.experience-item:last-child { border: none; }
.exp-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.exp-role { font-size: var(--h4); width: 100%; margin-bottom: 5px; }
.exp-company { font-weight: 500; color: var(--text-primary); }
.exp-date { color: var(--text-secondary); }
.exp-description { margin-bottom: 30px; max-width: 800px; color: var(--text-secondary); }
.exp-responsibilities { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.responsibility strong { color: var(--text-primary); font-weight: 500; }
.responsibility { color: var(--text-secondary); font-size: var(--text-small); }


/* Clients Grid */
.clients-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* Distribute items evenly */
    align-items: center; /* Vertically center */
    gap: 40px; /* Increased gap for cleaner look */
    padding: 0; /* Removed gutter padding as requested */
    width: 100%;
    max-width: 1400px; /* Limit max width to match container */
    margin: 0 auto 60px auto; /* Centered with bottom margin */
    box-sizing: border-box;
}

.client-logo-img {
    height: 70px; /* Restored to more prominent size */
    min-width: 100px; /* Minimum width to ensure visibility */
    width: auto;
    max-width: 150px; /* Constraint width to prevent overly wide logos */
    object-fit: contain;
    margin: 0;
    opacity: 0.6; /* Subtle opacity */
    filter: grayscale(100%); /* Default to grayscale */
    transition: all 0.3s ease; /* Transition for filter and transform */
}

.client-logo-img:hover {
    opacity: 1;
    filter: grayscale(0%);
}

/* Responsive adjustments - Reduced by 30% per user request */
@media (max-width: 768px) {
    .clients-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 3 columns on tablet */
        gap: 30px;
        align-items: center;
        justify-items: center;
        width: 100%;
        padding: 0;
    }

    .client-logo-img {
        height: 50px; /* Adjusted for tablet */
        width: auto;
        min-width: 80px;
        max-width: 120px;
        margin: 0;
    }
}

@media (max-width: 480px) and (orientation: portrait) {
    .clients-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on mobile */
        gap: 20px;
    }

    .client-logo-img {
        height: 40px; /* Adjusted for mobile */
        min-width: 90px;
        max-width: 100px;
    }
}

/* =========================================
   UI ELEMENTS
   ========================================= */
.scroll-indicator-link {
    position: fixed;
    bottom: 10px; /* Moved closer to bottom edge (was 30px) */
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    opacity: 0;
    animation: simpleFadeIn 1s ease 3.5s forwards;
    cursor: pointer;
    display: none; /* Hidden as per user request */
    flex-direction: column;
    align-items: center;
    color: var(--text-secondary);
    font-size: var(--small);
    gap: 8px;
}

.scroll-arrow {
    width: 24px;
    height: 24px;
    animation: arrowFloat 4s ease-in-out infinite;
}

@keyframes arrowFloat {
    0%, 25% { transform: translateY(0); } /* Wait phase (1s) */
    30% { transform: translateY(-7.5px); } /* Jump 1 up */
    35% { transform: translateY(0); } /* Jump 1 down */
    40% { transform: translateY(-7.5px); } /* Jump 2 up */
    45% { transform: translateY(0); } /* Jump 2 down */
    100% { transform: translateY(0); } /* Wait phase (remaining 2.2s) */
}

.bottom-gradient-overlay {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 54px; /* Reduced to 30% of original 180px per user request */
    background: linear-gradient(to top, var(--bg-primary) 20%, rgba(253, 251, 247, 0) 100%);
    z-index: 90;
    pointer-events: none;
    transition: opacity 1s ease;
    opacity: 1;
}

.bottom-gradient-overlay.bottom-gradient--dark {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 20%, rgba(0, 0, 0, 0) 100%);
}

.bottom-gradient-overlay.fade-out {
    opacity: 0;
    transition: opacity 1s ease 1.5s;
}

/* Hero Tags */
.hero-tags-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.hero-tag {
    display: inline-block;
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 50px;
    font-family: 'Inter', sans-serif;
    font-size: var(--text-small);
    font-weight: 500;
    color: var(--text-primary);
    transition: all 0.3s ease;
}

.hero-tag:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    transform: translateY(-2px);
}

/* Client Logo Images in Grid (Clean up old marquee styles) */
/* .client-logo-img rule is now defined above in .clients-grid section */

.client-logo-img:hover {
    transform: scale(1.1);
    filter: grayscale(0%); /* Ensure color shows on hover if we add grayscale later */
}

/* =========================================
   BUBBLE EFFECTS (REMOVED)
   ========================================= */

/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width: 768px), (max-height: 600px) {
    .hero {
        position: fixed;
        height: 100vh;
        min-height: 100vh;
        padding: 70px var(--gutter) 40px; /* Reduced from 80px */
        justify-content: center;
    }
    .main-content {
        margin-top: 100vh;
        padding-top: 0;
    }
}

/* Custom Highlights Box (Duplicated) - Pinterest Style Masonry */
.highlights-box-custom {
    background: transparent;
    padding: 30px 0 60px 0; /* Left/Right padding removed per user request */
    border-radius: 20px;
}

.impact-case {
    padding-top: 0; /* User Request: Remove top padding to eliminate gap with h2 */
}

.impact-card {
    position: relative;
    margin-top: 28px;
    border-radius: 24px;
    padding: 0; /* Removed padding for outline */
    background: transparent; /* Removed gradient outline */
}

.impact-card-inner {
    position: relative;
    z-index: 1;
    /* display: flex; Removed for tabs support */
    /* gap: 40px; Moved to .case-slide */
    
    /* Full width edge-to-edge override per user request */
    width: 100vw !important; /* Force full viewport width, overriding .case-slide */
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    max-width: 100vw !important; /* Prevent scrollbar issues */
    border-radius: 0; /* Remove rounded corners */
    border-left: none;
    border-right: none;
    
    /* Ensure content stays within the central column */
    /* Content constrained to layout grid, Background full width */
    padding-top: 0; /* Removed top padding for hero carousel */
    padding-bottom: 60px;
    padding-left: 0; 
    padding-right: 0;
    
    box-sizing: border-box; /* Explicitly ensure border-box */

    background: #ffffff;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px); /* Safari support */
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.12);
    border-top: none; /* Hide top border per user request */
    border-bottom: 1px solid rgba(255, 255, 255, 0.8);
}

@media (max-width: 768px) {
    .impact-card-inner {
        padding-left: 0;
        padding-right: 0;
    }
}

.impact-content-wrapper {
    display: flex;
    align-items: flex-start; /* Ensure children (including video) align to the top */
    position: relative; /* Ensure z-index works */
    z-index: 2; /* Content sits on top of sticky carousel */
    width: 100%;
    max-width: 100% !important; /* Full width to match Header/Fluid layout */
    margin: 0 auto !important;
    padding-top: 46px; /* Increased to 46px per user request */
    padding-left: var(--gutter) !important; /* Restore padding to match layout alignment */
    padding-right: var(--gutter) !important; /* Restore padding to match layout alignment */
    gap: 40px;
    background: #ffffff; /* Add background to cover image when scrolling */
}

/* =========================================
   CASE STUDY TABS
   ========================================= */
.case-tabs-bleed {
    width: 100vw;
    /* position: sticky;  DISABLED for future use */
    /* top: 54px; DISABLED for future use */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    transform: none;
    overflow-x: hidden;
    overflow-y: hidden; /* Changed from visible to hidden to clip children */
    margin-bottom: var(--case-tabs-gap-to-card);
    z-index: 1; /* Lower z-index to avoid overlapping video */
    /* Updated to vertical gradient: White (top) -> Transparent (bottom) */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    transition: box-shadow 0.3s ease;
    position: relative; /* Ensure absolute children are relative to this */
}

.case-tabs-bleed::before,
.case-tabs-bleed::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--case-tabs-gradient-w);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 1000; /* Ensure it stays above the tabs but within the container */
    height: 100%; /* Limit height to the container */
}

.case-tabs-bleed::before {
    left: 0;
    background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));
}

.case-tabs-bleed::after {
    right: 0;
    background: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0));
}

.case-tabs-bleed.show-left::before { opacity: 1; }
.case-tabs-bleed.show-right::after { opacity: 1; }
.case-tabs-bleed { padding-left: 0; padding-right: 0; }
/* .case-tabs-bleed.edge-left { padding-left: var(--case-tabs-inset); } REMOVED to prevent jumpy scroll */
/* .case-tabs-bleed.edge-right { padding-right: var(--case-tabs-inset); } REMOVED to prevent jumpy scroll */


.case-tabs-bleed.is-pinned {
    box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* Optional: add shadow when pinned */
}

.case-study-tabs {
    position: relative; /* Ensure stable offsetLeft calculation for JS centering */
    display: flex;
    justify-content: flex-start;
    gap: var(--case-tab-gap);
    margin-bottom: 0;
    /* border-bottom: 1px solid rgba(0,0,0,0.06); Removed outline per user request */
    /* Add static padding for inset effect */
    padding: 10px var(--case-tabs-inset) calc(var(--case-tab-connector-h) - var(--case-tabs-trim)) var(--case-tabs-inset); /* Added top padding */
    flex-wrap: nowrap;                 /* Keep tabs on one line */
    overflow-x: auto;                  /* Enable horizontal scroll when many tabs */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch; /* Smooth iOS scrolling */
    overscroll-behavior-x: contain;    /* Prevent viewport scroll chaining */
    scroll-behavior: auto !important;  /* Ensure JS animation takes full control without interference */
    scroll-snap-type: none !important; /* Disable snapping to prevent conflict with JS centering */
}

.case-tab {
    height: 150px; /* Fixed height as requested */
    min-width: 140px; /* Minimum width to fit content */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;

    background-color: #F7F7F7; /* Light gray background */
    border: none;
    font-family: 'Inter', sans-serif;
    font-size: var(--case-tab-font);
    font-weight: 600;
    letter-spacing: normal; /* Default letter spacing */
    color: #000;
    padding: 16px; /* Fixed padding */
    cursor: pointer;
    border-radius: var(--case-tab-radius);
    transition: all 0.2s ease;
    flex: 0 0 auto;                    /* Prevent flex shrinking for horizontal scroll */
    /* scroll-snap-align: center; REMOVED */
    -webkit-text-fill-color: #000;
}

.case-tab-thumb {
    height: 60px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    transition: transform 0.2s ease;
}

.case-tab.active .case-tab-thumb {
    transform: scale(1.1);
}

.case-tab--placeholder {
    background-color: #FFFFFF;
    animation: placeholderPulse 3s ease-in-out infinite alternate;
    cursor: default;
}
.case-tab--placeholder:hover {
    background-color: inherit;
    color: inherit;
}
.case-tab--placeholder .case-tab-text {
    gap: 2px;
}
.case-tab--placeholder .case-tab-line1,
.case-tab--placeholder .case-tab-line2 {
    font-style: italic;
    font-size: var(--text-xs);
    opacity: 0.75;
}
.case-tab-avatar {
    width: calc(36px * 1.2);
    height: calc(36px * 1.2);
    border-radius: 50%;
    display: inline-block;
    object-fit: cover;
    margin: 6px auto 0;
}
.case-tab--placeholder .dots {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-size: calc(var(--text-xs) * 1.4);
    letter-spacing: 2px;
}
.case-tab--placeholder .dot {
    display: inline-block;
    animation: dotBlink 0.9s ease-in-out infinite;
    opacity: 0.4;
}
.case-tab--placeholder .dot:nth-child(1) { animation-delay: 0s; }
.case-tab--placeholder .dot:nth-child(2) { animation-delay: 0.2s; }
.case-tab--placeholder .dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes placeholderPulse {
    0% { background-color: #FFFFFF; }
    100% { background-color: #EFEFEF; }
}
@keyframes dotBlink {
    0%, 100% { opacity: 0.2; transform: translateY(0) scale(1); }
    50% { opacity: 1; transform: translateY(-2px) scale(1.1); }
}

.case-tab-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: center;
    line-height: 1.2;
    z-index: 2;
    font-weight: inherit;
    color: inherit;
}

.case-tab-line1 {
    font-weight: 600;
}
.case-tab-line1.case-tab-line1--multiline {
    white-space: pre-line;
}

.case-tab-line2 {
    font-weight: 400;
}
.case-tab-line2.case-tab-line2--green {
    color: #2bb673 !important;
    -webkit-text-fill-color: #2bb673;
}

.case-tab:hover {
    background-color: #E5E5E5; /* Darker gray on hover */
    color: #000;
}

.case-tab.active {
    color: var(--case-tab-active-color);
    -webkit-text-fill-color: var(--case-tab-active-color);
    background: var(--case-tab-active-bg);
    font-weight: 600;
    position: relative; /* Enable absolute positioning for pseudo-element */
    padding: 16px; /* Maintain consistent padding */
    font-size: var(--case-tab-active-font);
    border-radius: var(--case-tab-active-radius);
}

/* Connecting line for active tab */
.case-tab.active::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: var(--case-tab-connector-w);
    height: calc(var(--case-tab-connector-h) - var(--case-tabs-trim));
    background: var(--case-tab-active-bg);
    opacity: 1; /* Changed to 100% opacity */
    top: 100%;
    pointer-events: none;
}

/* Optional: hide scrollbar for a cleaner look (still scrollable) */
.case-study-tabs::-webkit-scrollbar { display: none; }

.case-slide {
    display: none;
    width: 100%;
}

.impact-cta-box {
    background-color: #f3f4f6;
    color: #111827;
    padding: 24px;
    border-radius: 12px;
    margin-top: 32px;
    font-family: 'Inter', sans-serif;
    text-align: center;
}

.impact-cta-text {
    margin: 0 0 8px 0;
    font-weight: 600;
    font-size: 16px;
}

.impact-cta-contact {
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.impact-cta-link {
    color: #111827;
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid rgba(17, 24, 39, 0.35);
    transition: all 0.2s ease;
    padding-bottom: 2px;
}

.impact-cta-link:hover {
    border-bottom-color: rgba(17, 24, 39, 0.75);
    opacity: 0.85;
}

.impact-cta-separator {
    color: #111827;
    opacity: 0.6;
}

@media (max-width: 768px) {
    .impact-cta-box {
        padding: 20px;
    }
    .impact-cta-text {
        font-size: 15px;
    }
}

.case-slide.active {
    display: block;
    animation: slideFadeIn 0.4s ease forwards;
}

@keyframes slideFadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Mobile adjustments for slides */
@media (max-width: 768px) {
    .impact-content-wrapper {
        flex-direction: column;
        gap: 30px;
        max-width: 100%;
        margin: 0 !important;
        /* Restore padding for mobile */
        padding-left: var(--gutter) !important;
        padding-right: var(--gutter) !important;
    }
}

/* Tablet (1023px) specific adjustment: Ensure content fits */
@media (max-width: 768px) {
    .impact-heading {
        font-size: var(--h4); /* Reduce heading size slightly */
    }
    
    .impact-content-wrapper {
        gap: 24px; /* Reduce gap between columns */
        max-width: 100%;
        margin: 0 !important;
        /* Restore padding for tablet/mobile to prevent edge collision */
        padding-left: var(--gutter) !important;
        padding-right: var(--gutter) !important;
    }
    
    .impact-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* Stack metrics in 2 columns instead of 3 */
        gap: 12px;
    }
}

.impact-copy {
    flex: 1.2;
    min-width: 0;
}

.impact-media {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.impact-kicker {
    font-size: var(--text-small);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.impact-heading {
    font-size: var(--h3); /* Increased by 2 units from 28px */
    font-weight: 400; /* Regular weight per user request */
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: 14px;
    margin-top: 0; /* Ensure no top margin for alignment */
}

.impact-body {
    font-size: var(--text-body); /* Standardized to 17px */
    line-height: 1.5; /* Adjusted line-height */
    color: var(--text-secondary);
    max-width: 100%; /* Allow full width to match heading */
}

.impact-list {
    list-style: none;
    padding: 0;
    margin: 24px 0;
}

.impact-list li {
    font-size: var(--text-body);
    line-height: 1.5;
    color: var(--text-secondary);
    padding: 12px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* Faint gray line separator */
}

.impact-list li:last-child {
    border-bottom: none;
}

.impact-list li strong {
    color: #000000;
}

.impact-body strong {
    color: #003366; /* Highlight text Dark Blue */
}

.impact-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 24px;
}

.impact-metric dt {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--text-tertiary);
    margin-bottom: 6px;
}

.impact-metric dd {
    margin: 0;
    font-size: var(--text-small);
    color: var(--text-primary);
}

.impact-media-frame {
    border-radius: var(--media-radius); /* Apple-style continuous curve */
    overflow: hidden;
    background: #000;
    border: 6px solid #ffffff; /* Reduced -4px from 10px */
    box-shadow: 0 12px 24px rgba(0,0,0,0.15); /* Gentle drop shadow */
    position: relative;
}
.media-audio-toggle {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(0, 0, 0, 0.35);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    cursor: pointer;
    z-index: 5;
    padding: 0;
    display: grid;
    place-items: center;
    -webkit-appearance: none;
    appearance: none;
}
.media-audio-toggle svg {
    width: 20px;
    height: 20px;
    display: block;
}

.impact-media-frame.is-initial-audio .media-audio-toggle {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    border-radius: 999px;
    z-index: 6;
    background: rgba(0, 0, 0, 0.45);
    border: 1.5px solid rgba(255, 255, 255, 0.7);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.impact-media-frame.is-initial-audio .media-audio-toggle svg {
    width: 22px;
    height: 22px;
}

.media-play-toggle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    border-radius: 999px;
    border: 1.5px solid rgba(255, 255, 255, 0.7);
    background: rgba(0, 0, 0, 0.45);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    cursor: pointer;
    z-index: 6;
    padding: 0;
    display: grid;
    place-items: center;
    -webkit-appearance: none;
    appearance: none;
}
.media-play-toggle svg {
    width: 22px;
    height: 22px;
    display: block;
}
.impact-media-frame.is-playing .media-play-toggle {
    opacity: 0;
    pointer-events: none;
}
.impact-media-frame.is-initial-audio .media-play-toggle {
    display: none;
}

.impact-media-frame.is-looping::after {
    content: "";
    display: none;
}

.impact-media-frame.is-looping {
    filter: drop-shadow(0 12px 24px rgba(255, 0, 128, 0.45)) drop-shadow(0 0 36px rgba(255, 0, 128, 0.45));
    will-change: filter;
    animation: outerGlowPulse 1s ease-in-out infinite;
    transition: filter 0.4s ease;
}

@keyframes outerGlowPulse {
    0% { filter: drop-shadow(0 12px 24px rgba(255, 0, 128, 0.30)) drop-shadow(0 0 36px rgba(255, 0, 128, 0.30)); }
    50% { filter: drop-shadow(0 12px 24px rgba(255, 0, 128, 0.75)) drop-shadow(0 0 36px rgba(255, 0, 128, 0.75)); }
    100% { filter: drop-shadow(0 12px 24px rgba(255, 0, 128, 0.30)) drop-shadow(0 0 36px rgba(255, 0, 128, 0.30)); }
}

.impact-media-caption {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    display: none; /* Removed per user request */
}

.masonry-grid {
    column-count: 3;
    column-gap: 24px;
    width: 100%;
}

.masonry-item {
    break-inside: avoid;
    margin-bottom: 24px;
    background: #fff;
    border-radius: var(--media-radius); /* Unified Apple-style radius */
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.masonry-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.media-content {
    width: 100%;
    height: auto;
    display: block;
    object-fit: var(--media-fit);
}

.media-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.ratio-16-9 {
    aspect-ratio: 16 / 9;
}

/* Desktop/Big Screen Scale Reduction (-45% total: 70% * 0.85 = ~60%) */
/* Unified Grid Layout for Tablet & Desktop (min-width: 768px) */
@media (min-width: 768px) {
    .impact-content-wrapper {
        display: grid;
        grid-template-columns: 1fr 320px; /* Optimized for Tablet Portrait (768px) */
        gap: 32px; /* Reduced gap for better space efficiency on tablets */
        align-items: start;
    }

    .impact-copy {
        min-width: 0; /* Prevent grid blowout */
    }

    .impact-media {
        position: sticky;
        top: 100px; /* Stick to top with breathing room */
        height: fit-content;
        align-self: start;
        margin: 0;
        width: 100%;
        display: block; /* Reset flex */
    }

    .impact-media-frame.ratio-9-16 {
        width: 100%;
        margin: 0;
    }
}

/* Tablet Landscape (iPad Pro/Air) & Small Laptops */
@media (min-width: 769px) {
    .impact-content-wrapper {
        grid-template-columns: 1fr 360px; /* Slightly wider for Landscape */
        gap: 48px;
    }
}

/* Large Desktop Overrides */
@media (min-width: 1200px) {
    .impact-content-wrapper {
        grid-template-columns: 1fr 420px; /* Full width for Desktop */
        gap: 80px; /* Larger gap */
    }
    
    .impact-media {
        top: 120px;
    }
}

@media (min-width: 768px) {
    #case-anim .impact-content-wrapper {
        display: block;
    }
}

#case-anim .impact-body {
    margin-bottom: 24px;
}

/* Enhanced Body Content Styling */
.impact-subheading {
    font-size: var(--text-body);
    font-weight: 700;
    margin-top: 40px;
    margin-bottom: 12px;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: 'DM Sans', sans-serif !important;
}

.impact-body img,
.impact-inline-media {
    width: 100%;
    height: auto;
    border-radius: var(--media-radius); /* Unified Apple-style radius */
    margin: 32px 0;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    display: block;
}

.impact-body p {
    margin-bottom: 24px;
}

.ratio-9-16 {
    /* aspect-ratio: 9 / 16; Removed to allow flexible height */
    width: 100%;
}

.play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1.5px solid rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    pointer-events: none; /* Let click pass through to video/container */
    transition: all 0.3s ease; /* Smooth transition for all props */
}

/* Hover Effect on Container -> Scale Play Icon */
.video-container:hover .play-icon {
    transform: translate(-50%, -50%) scale(1.1);
    background: rgba(0, 0, 0, 0.6);
    border-color: rgba(255, 255, 255, 1);
}

/* Active State (Click) */
.video-container:active .play-icon {
    transform: translate(-50%, -50%) scale(0.95);
}

.play-icon::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 10px 18px; /* Triangle play icon */
    border-color: transparent transparent transparent #ffffff;
    margin-left: 4px; /* Optical center adjustment */
}

/* Hide play icon when playing */
.video-playing .play-icon {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
}

/* Video Navigation Buttons (Previous/Next) */
.video-nav-prev,
.video-nav-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: none;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 20;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease, transform 0.2s ease;
}

.video-nav-prev:hover,
.video-nav-next:hover {
    background: rgba(0, 0, 0, 0.7);
    transform: translateY(-50%) scale(1.1);
}

.video-nav-prev {
    left: 16px;
}

.video-nav-next {
    right: 16px;
}

/* Video Fade Transition (Grid Layout to fix height collapse) */
.video-slider-track.fade-track {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    height: 100%; /* Force full height */
    position: relative;
}

.video-slide.fade-transition {
    /* Stack all slides in the same grid cell */
    grid-area: 1 / 1;
    position: relative; /* Take up space in the grid flow */
    width: 100%;
    height: 100%; /* Force full height */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
    display: block !important;
    z-index: 1;
}

.video-slide.fade-transition .media-content {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.video-slide.fade-transition.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

.video-slider-track.fade-track.auto-ratio {
    display: block;
    height: auto;
}

.video-slider-track.fade-track.auto-ratio .video-slide.fade-transition {
    position: absolute;
    inset: 0;
    height: auto;
}

.video-slider-track.fade-track.auto-ratio .video-slide.fade-transition.active {
    position: relative;
    inset: auto;
}

.video-slider-track.fade-track.auto-ratio .video-slide.fade-transition .media-content {
    height: auto;
    object-fit: contain;
}

.item-caption {
    padding: 15px;
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--text-primary);
    border-top: 1px solid #f5f5f5;
}

@media (max-width: 768px) {
    .masonry-grid {
        column-count: 2;
    }
}

/* Removed legacy .impact-card-inner padding block to prevent double padding */

@media (max-width: 767px) {
    .impact-media {
        align-items: flex-start;
    }

    .impact-metrics {
        grid-template-columns: 1fr;
    }
}

/* Mobile Landscape Optimization & Square-ish Screens (min-width: 550px) */
@media (min-width: 550px) and (max-width: 767px) {
    /* "iPad Mini" (1024px) Simulation Mode */
    .impact-content-wrapper {
        display: flex !important;
        flex-direction: row !important; /* Force Row (Side-by-Side) */
        align-items: flex-start;
        gap: 24px; /* Scaled down gap (vs 48px on Desktop) */
        padding-top: 40px !important; /* Restore some top padding */
    }
    
    .impact-copy {
        width: 55%;
        flex: 1;
        min-width: 0;
    }
    
    .impact-media {
        width: 45%; /* Right column */
        flex: 0 0 45%;
        margin-top: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-end; /* Align media to right edge */
    }
    
    .impact-media-frame.ratio-9-16 {
        width: 100%;
        max-width: 100%;
        margin: 0;
        height: auto;
        overflow: visible;
        /* Restore border radius for "Tablet" feel */
        border-radius: var(--media-radius); 
    }
    
    .impact-media-frame.video-slider-container {
        width: 100%;
    }

    /* Headings & Text - Inherit Global 17px Body, adjust Heading */
    .impact-heading {
        font-size: var(--h4); /* Keep modest heading size */
        margin-bottom: 12px;
    }
    
    /* Metrics: 2 Columns (Simulating Desktop Grid) */
    .impact-metrics {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin-top: 16px;
    }
    
    /* Masonry Grid: 2 Columns (Simulating Tablet) */
    .masonry-grid {
        column-count: 2 !important;
        column-gap: 16px;
    }
    
    /* Ensure Case Study Tabs have proper spacing in this mode */
    .case-study-tabs {
        margin-bottom: 30px !important;
        padding-bottom: 12px !important; /* Reset padding (no connector needed for Side-by-Side?) */
    }
    /* Hide connector in side-by-side mode (usually desktop doesn't have it overlapping content) */
    .case-tab.active::after {
        display: none !important; 
    }
}

@media (max-width: 768px) {
    .highlights-box-custom { padding: 24px 0; }
    .masonry-grid { column-count: 1; }
    
    /* Fix video border radius on mobile */
    .impact-media-frame {
        /* border-radius handled by fluid variable */
        border-width: 4px; /* Slightly thinner border */
    }

    /* Adjust spacing for Case Study tabs */
    .case-study-tabs {
        margin-bottom: 30px; /* Add breathing room between tabs and content */
    }
}

@media (max-height: 600px) {
    .hero {
        justify-content: center; /* Changed from flex-start to center */
        padding-top: 20px;
        padding-bottom: 20px;
        min-height: auto;
    }
}

@media (max-width: 770px) {
    :root {
        /* Professional Mobile Type Scale */
        --h1: 40px;
        --h2: 45px; /* Increased ~40% from 32px per user request */
        --h3: 24px;
        --h4: 20px;
        --gutter: 24px;
        --space-xl: 50px;
    }
    .main-content {
        padding-top: 0;
    }
    .main-content::before {
        height: 0;
    }
    .hero {
        justify-content: center; /* Changed from flex-start to center per user request */
        padding-top: 0; /* Let flexbox handle centering */
        padding-bottom: 0; /* Equal top/bottom for perfect centering */
    }
    /* Move H1 and Span up by ~50px */
    .hero-name-wrapper, .hero-title {
        /* Removed 'top: -50px' to prevent layout issues in Landscape */
        position: relative;
    }
    
    /* .hero-name override removed for fixed scale */
    /* .hero-title override removed for fixed scale */
    .hero-slogan { 
        font-size: 14.3vw; /* Larger size for Mobile (max 770px) + 10% */
        margin-bottom: var(--space-md);
        line-height: 1.02;
        letter-spacing: -0.04em;
    }
    .companies-carousel {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        padding: 0;
        margin: 0;
    }
    .company-item { width: auto; }
    /* Mobile Logo Constraints */
    .company-logo {
        min-width: 120px; /* Slightly smaller for mobile to fit 2 columns */
        max-width: 100%;
    }
    .skills-grid { grid-template-columns: 1fr; gap: 20px; }
    .skill-category { width: 100%; }
    
    /* Contact buttons now use base style */

    /* Mobile Layout Adjustments */
    .highlights-box { padding: 24px; }
    .highlights-list { grid-template-columns: 1fr; }
    .exp-responsibilities { grid-template-columns: 1fr; }
    .exp-header { flex-direction: column; gap: 5px; }
    .exp-date { margin-bottom: 10px; }
    
    /* Image & Content Safety */
    img, video { max-width: 100%; height: auto; }
    /* .main-content { overflow-x: hidden; } Removed to fix sticky positioning */
}

@media (max-width: 370px) {
    .hero-slogan {
        font-size: clamp(2.2rem, 16.5vw, 16.5vw); /* Increased by 10% (15vw -> 16.5vw) */
        padding: 0 16px; /* Reduced padding to prevent overflow/shifting */
        width: 100%; /* Ensure it doesn't exceed viewport */
        box-sizing: border-box; /* Include padding in width calculation */
        margin-left: 0;
        margin-right: 0;
    }
}

@media screen and (orientation: landscape) and (max-height: 600px) {
    .hero {
        padding: 10px var(--gutter);
        justify-content: center;
        min-height: 100vh;
    }

    .main-content {
        padding-top: 0;
        padding-bottom: 40px;
    }
    
    .section { margin-bottom: 50px; }
    
    .companies-carousel {
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
    }
    
    .skills-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .masonry-grid {
        column-count: 3;
        column-gap: 16px;
    }

    .section-label,
    .recent-companies-label {
        font-size: calc(var(--text-xs) * 0.85);
        padding: 3px 10px;
    }

    .clients-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 15px;
        padding: 10px 0;
    }

    .client-logo-img {
        height: 50px;
        width: auto;
        max-width: 100%;
        margin: 0 auto;
    }
    
    .menu-link { font-size: var(--h4); }
    .menu-item { margin-bottom: 4px; }
    .menu-close-btn { top: 12px; right: 16px; font-size: 30px; width: 44px; height: 44px; }
}


/* =========================================
   UNIFIED HERO SCALE SYSTEM (Fluid Typography & Spacing)
   Refactored to replace patch-work media queries with systematic scaling
   ========================================= */

:root {
    /* Base Units */
    --scale-unit: 8px;
    
    /* Fluid Typography Scale (Mobile First -> Desktop) 
       Format: clamp(min-size, preferred-size, max-size)
    */
    /* H1: Name - Fixed Scale 26px (All Screens) - Immutable per user request */
    --fs-hero-name: 26px;
    
    /* Span: Title - Systemized to var(--text-xs) (13px) */
    --fs-hero-title: var(--text-xs);
    
    /* P: Description - Scale from 14px to 18px -> Adjusted for Mobile to match standard P */
    --fs-hero-desc: clamp(1rem, 1.5vw + 0.5rem, 1.125rem);
    
    /* Div: Slogan - Scale proportionally with P increase */
    /* Original base: 1.75rem. New base target: ~2rem to maintain hierarchy with larger P */
    --fs-hero-slogan: clamp(2rem, 4vw + 1rem, 6rem);
    
    /* A: CTA - Standardized Size (17px) for all screens */
    --fs-hero-cta: 17px;
    
    /* Fluid Spacing Scale */
    --gap-xs: clamp(4px, 1vw, 8px);
    --gap-sm: clamp(8px, 2vw, 16px);
    --gap-md: clamp(16px, 3vw, 32px);
    --gap-lg: clamp(24px, 4vw, 48px);
}

/* Container Refactor */
.hero {
    /* Use Flexbox with standardized gap logic */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: var(--gap-lg) var(--gutter);
    gap: 0 !important; /* Fixed gap to prevent fluid spacing issues */
    min-height: 100vh;
    width: 100%;
}

/* 1. H1 (Name) */
.hero-name-wrapper {
    margin-bottom: 6px !important; /* Fixed spacing */
    width: 100%;
    display: flex;
    justify-content: center;
}

.hero-name {
    font-size: var(--fs-hero-name) !important;
    line-height: 1.1;
    letter-spacing: 0.15em;
    margin: 0;
    /* Remove old overrides */
}

/* 2. Span (Title) */
.hero-title {
    font-size: var(--fs-hero-title) !important;
    margin-bottom: 40px !important; /* Increased to compensate for removed gap */
    letter-spacing: 0.25em !important;
    width: 100%;
    justify-content: center;
}

/* 3. Div (Slogan) */
.hero-slogan {
    font-size: var(--fs-hero-slogan) !important;
    line-height: 1.1;
    margin-bottom: var(--gap-sm);
    width: 100%;
    max-width: 1200px; /* Constraint for large screens */
    margin-left: auto;
    margin-right: auto;
}

/* 4. P (Description) */
    .hero-description {
        font-size: var(--text-body) !important; /* Unified with body text per user rule */
        line-height: 1.6;
        max-width: 100%; /* Changed from 600px to 100% to match slogan width */
        margin: 0 auto;
        padding: 0 var(--gap-md);
    }

/* 5. A (CTA) */
.hero-cta-btn {
    font-size: var(--text-body) !important; /* Enforce standard size */
    margin-top: var(--gap-md);
    padding: 16px 32px !important; /* Enforce standard padding */
}

/* Cleanup Legacy Mobile Overrides 
   (The new Fluid system handles these automatically, but we keep the structure clean) 
*/
/* 1. Mobile Portrait & Landscape (Expanded to include all mobile phones up to 480px) */
@media (max-width: 480px) {
    /* Handled by clamp(), slightly reduced gap for small screens */
    .hero { 
        gap: 8px !important; /* Tightened from 12px */
        padding-top: 20px !important; /* Reduced to minimal safe area */
        padding-bottom: 20px !important; /* Equal to top for centering */
        justify-content: center !important; /* Centered vertically per user request */
        min-height: 100vh;
    }
    
    /* Fine-tune H1 for small screens: reduce size and bottom margin by 30% 
       IMPORTANT: Explicitly setting pixel value (approx 24px * 0.7 = ~17px) to ensure visual change if calc() fails 
       Original Min was 1.5rem (24px). Target is ~17px.
    */
    .hero .hero-name-wrapper .hero-name {
        font-size: var(--h4) !important; /* Systemized from 1.45rem (~23px) to 24px */
    }
    .hero .hero-name-wrapper {
        margin-bottom: 0px !important; /* Reset to 0px to push H2 down by ~30% (from -3px) */
        width: 100% !important;
        justify-content: center !important;
    }

    /* Fine-tune Span (Title) - Handled by Global Fluid Style */
    /* .hero-title override removed to allow fluid scaling */
    
    /* Fine-tune P and Div Slogan relationship */
    .hero-description {
        font-size: var(--text-body) !important; /* Unified with body text per user rule */
        color: #000000 !important; /* Force black text */
        margin-top: 12px !important; /* Reduced from 32px to 12px for tighter grouping */
        width: 100% !important; /* Align with Slogan */
        max-width: 100% !important; /* UNIFIED MAX WIDTH: 100% to match slogan */
        padding-left: 0 !important; /* Ensure no extra padding */
        padding-right: 0 !important;
    }
    
    /* Increase spacing between Slogan Div and Description P by 30% + 30% = ~1.7 */
    .hero-slogan {
        margin-bottom: 8px !important;
        font-size: var(--h1) !important; /* Systemized from 4.33rem (~69px) to 64px */
        width: 100% !important;
        max-width: 100% !important;
        line-height: 1.2 !important;
    }

    /* Fix Inconsistent Spacing on Mobile (Blue/Red lines issue) - Restored Connector */
    .case-study-tabs {
        margin-bottom: 0px !important; /* Remove extra margin */
        padding-bottom: 41px !important; /* Restore padding for connector space (56px - 15px trim) */
    }
    
    .case-tab.active::after {
        display: block !important; /* Show connector line on mobile */
        height: 41px !important; /* Explicit height to match padding-bottom */
    }
    
    .impact-content-wrapper {
        padding-top: 20px !important; /* Keep reduced top padding for balance */
        gap: 20px !important;
    }

    .hero-overlay-keywords {
        font-size: calc(var(--fs-hero-name) * 0.56);
    }

    /* Mobile CTA: Apple Standard (Consistent 17px/Standard Padding) */
    .hero-cta-btn {
        font-size: var(--text-body) !important; /* Apple Mobile Standard */
        padding: 11px 21px !important; /* Apple Mobile Standard Padding */
        margin-top: 16px !important; /* Reduced from 24px */
    }

    /* FIX: Allow header title text to overflow naturally to the right (under gradient) */
    /* Target: Mobile & Tablet Portrait (320px - 768px) */
    .header-logo {
        max-width: none !important; /* Remove width constraint to allow children to overflow */
        margin-right: 0 !important; /* Let it take space, hamburger is absolute/fixed or separate? Check flex logic */
        /* Wait, if margin-right: 0, it pushes hamburger? No, justify-content: space-between handles it */
        /* But we want text to flow UNDER hamburger. Hamburger is usually z-indexed higher. */
    }

    .header-title {
        overflow: visible !important; /* Allow spill over */
        flex-shrink: 0 !important; /* Do not compress */
        max-width: none !important;
    }

    .header-title span {
        overflow: visible !important;
        text-overflow: clip !important;
    }

    /* Move H2 and Tabs up and separate from video */
    .impact-case .section-title {
        margin-top: -60px !important; /* Move H2 up significantly */
        margin-bottom: 8px !important; /* Keep tight spacing with tabs */
        position: relative;
        z-index: 5;
    }

    .case-tabs-bleed {
        margin-top: 0 !important; /* Reset to follow H2 naturally */
        margin-bottom: 40px !important; /* Add space below tabs to push video away */
        position: relative;
        z-index: 5;
    }
}

/* =========================================
   GLOBAL HEADER SAFETY RULE (User Request: "Fix toàn bộ")
   ========================================= */
/* Ensure text is NEVER truncated on any screen wider than 568px (Standard Mobile Landscape Min) */
/* This covers Tablets, Desktops, and odd-sized windows like 962px */
@media (min-width: 568px) {
    .header-title {
        flex-shrink: 0 !important;
        overflow: visible !important;
        max-width: none !important;
    }
    
    .header-title span {
        overflow: visible !important;
        text-overflow: clip !important;
    }
}

/* 3. Tablet Portrait (Standard 768px) & Desktop - Height Protected */
/* Added min-height: 601px to prevent conflict with Mobile Landscape (max-height: 600px) */
@media (min-width: 481px) and (min-height: 601px) {
    /* Apply spacing reduction (Reset to 0 for cleaner alignment per user request) */
    .hero-name-wrapper {
        margin-bottom: 6px !important; /* Fixed 6px spacing */
    }
    
    /* Apply spacing increase (+60%) between Slogan and Description for Tablet & Desktop */
    .hero-description {
        margin-top: 50px !important; /* Increased significantly from base ~16px-32px */
    }
    
    /* Apple Standard CTA for Tablet & Desktop */
    .hero-cta-btn {
        padding: 11px 21px !important; /* Standard Apple Padding */
        font-size: var(--text-body) !important; /* Standard Apple Size */
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .hero-slogan {
        max-width: 90%;
    }
}

/* 4. Tablet Landscape (Merged into Desktop) */
/* @media (min-width: 769px) and (max-width: 1024px) Removed to force Desktop view */

/* 5. Desktop Small (Standard 1280px) - Expanded to include Tablet Landscape */
@media (min-width: 769px) and (max-width: 1280px) {
    /* Handled by clamp() */
}

/* 6. Desktop Standard (Standard 1440px) */
@media (min-width: 1281px) and (max-width: 1440px) {
    /* Handled by clamp() */
}

/* 7. Desktop Large (Standard 1920px+) */
@media (min-width: 1441px) {
    .hero-slogan {
        max-width: 1200px;
    }
}

@media (max-width: 430px) {
   /* Minor tweaks only if fluid system breaks at extreme small sizes */
   .hero { padding-left: 16px; padding-right: 16px; }
}

.slogan-replacement {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

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

.slogan-new-text {
    /* Reset to body text style */
    opacity: 0; /* Start hidden for animation */
    animation: gentleSlideUp 2s ease-out forwards; /* Gentle entry */
    
    /* Match .section-intro style */
    font-size: var(--text-body); /* Standardized from 18px to 17px */
    line-height: 1.6;
    color: var(--text-secondary);
    
    padding: 0;
    margin: 0 0 20px 0;
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    letter-spacing: normal;
    text-align: center;
    position: relative;
    display: block;
}

/* Chat bubble tail removed */
.slogan-new-text::after {
    display: none;
}

.slogan-contact-info {
    display: flex;
    flex-direction: row; /* Horizontal layout */
    flex-wrap: wrap; /* Allow wrapping for responsive behavior */
    align-items: center;
    justify-content: center;
    gap: 15px;
    opacity: 0; /* Start hidden for animation */
    animation: gentleSlideUp 2s ease-out 0.8s forwards; /* Delayed gentle entry */
    width: 100%;
    margin: 0 auto;
}

.contact-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Inter', sans-serif;
    
    /* CTA / Contact standard */
    font-size: var(--text-body); /* Bằng body để đúng rule CTA */
    text-transform: uppercase;
    letter-spacing: 0.12em;
    background: #000000;
    color: #00D4AA;
    padding: 6px 14px;
    border-radius: 999px;
    font-weight: 600;
    border: none;
    line-height: 1.5; /* Explicitly set to match inherited body line-height of div */
    
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: none;
}

.contact-item:hover {
    transform: translateY(-2px);
    color: #ffffff; /* White on hover for contrast */
    background: #000000;
}

.contact-item img {
    width: 13px;
    height: 13px;
    display: block;
    opacity: 1;
    filter: brightness(0) invert(1); /* Make icons white to be visible on black */
    transition: all 0.3s ease;
}

/* Hover state for icons if needed */
.contact-item:hover img {
    opacity: 1;
}

/* =========================================
   FOOTER
   ========================================= */
.site-footer {
    margin-top: 0; /* Removed margin to prevent black gap */
    padding: 80px 0 30px 0; /* Increased top padding to compensate */
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    background: #000000;
    color: rgba(255, 255, 255, 0.78);
    font-family: 'Inter', sans-serif;
    position: relative;
    z-index: 2;
}

.footer-inner,
.footer-bottom-inner {
    background: #000000;
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
}

.footer-left {
    max-width: 360px;
}

.footer-brand {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: var(--text-body);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.footer-tagline {
    margin: 0;
    font-size: var(--text-small);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
}

.footer-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 16px;
}

.footer-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px 24px;
}

/* =========================================
   VIDEO WRAPPER STYLES (Replaced Iframe)
   ========================================= */
.video-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: var(--media-radius);
    margin-bottom: 24px;
    background-color: #000; /* Changed from #eee to #000 for consistency */
    /* Desktop: 21:9 Aspect Ratio */
    aspect-ratio: 21 / 9;
}

.expertise-video-player {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Mobile Portrait: Crop 20% left/right -> Increase Height */
@media (max-width: 768px) and (orientation: portrait) {
    .video-wrapper {
        /* 
           Only apply this crop effect on Mobile Portrait mode.
           To crop 20% from each side (total 40% width reduction relative to height),
           we need a taller aspect ratio.
           16:9 = 1.77
           Crop 20% each side means we only see the center 60% of the width.
           New Ratio = (16 * 0.6) / 9 = 9.6 / 9 = ~1.06 (Close to Square)
           Let's set a square-ish ratio to force the height to increase
           while object-fit: cover handles the cropping.
        */
        aspect-ratio: 1 / 1; 
    }
}

/* Mobile Landscape & Tablet & Desktop: Keep 21:9 ratio */
@media (max-width: 768px) and (orientation: landscape) {
    .video-wrapper {
        aspect-ratio: 21 / 9;
    }
}

/* =========================================
   SAVILLS VIDEO SLIDER (and all Video Sliders)
   ========================================= */
.video-slider-container {
    position: relative;
    width: 100%;
    /* Update: Full width, auto height based on video content */
    height: auto !important; 
    max-height: none !important;
    aspect-ratio: auto !important;
    overflow: hidden;
    background-color: #000;
    display: block; /* Changed from flex to block to allow natural height */
}

.video-slider-track {
    display: flex;
    width: 100%;
    height: auto; /* Allow track to take content height */
    transition: transform 0.5s ease-in-out;
}

.video-slide {
    flex: 0 0 100%;
    width: 100%;
    height: auto; /* Allow slide to take content height */
    position: relative;
    display: block;
}

.video-slide .media-content {
    width: 100%;
    height: auto; /* Let video determine height */
    object-fit: contain; /* Ensure full video is visible */
    display: block;
}

.footer-link {
    font-size: var(--text-small);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.78);
}

.footer-link:hover {
    color: #ffffff;
}

.footer-contact {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 16px;
}

.footer-contact-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-small);
    color: rgba(255, 255, 255, 0.78);
}

.footer-contact-item img {
    width: 14px;
    height: 14px;
    opacity: 0.95;
    filter: brightness(0) invert(1);
}

.footer-contact-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.footer-meta .footer-contact-link {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
}

.footer-meta--stack {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
}

.footer-meta-sub {
    font-size: 0.6em;
}

.footer-contact-link:hover {
    color: #ffffff;
    border-bottom-color: rgba(255, 255, 255, 0.35);
}

.footer-bottom {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-bottom-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    font-size: var(--text-xs);
}

.footer-meta {
    font-size: inherit;
    font-weight: 400;
    letter-spacing: 0.064em;
    color: rgba(255, 255, 255, 0.5);
}

.footer-bottom-inner .footer-contact-link {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
}

@media (max-width: 770px) {
    .footer-inner {
        flex-direction: column;
        gap: 24px;
    }

    .footer-right {
        align-items: flex-start;
    }

    .footer-nav {
        justify-content: flex-start;
    }

    .footer-contact {
        justify-content: flex-start;
    }

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

/* =========================================
   HEADER CONSISTENCY FIX
   ========================================= */
/* Reverted to base style to ensure fluid truncation on all screens (Mobile Uniformity) */
/* The base .header-title style (lines ~312) handles flex-shrink: 1 and overflow: hidden */
/* Hero CTA Button */
.hero-cta {
    position: relative;
    display: inline-block;
    margin-top: 32px;
    padding: 12px 32px;
    border: 1px solid transparent; /* Hide real border but keep layout space */
    border-radius: 999px;
    text-decoration: none;
    font-family: 'DM Sans', sans-serif; /* Updated to DM Sans per global request */
    font-size: var(--text-body);
    font-weight: 500;
    letter-spacing: 0.02em;
    cursor: pointer;
    z-index: 1;
    background: transparent;

    /* Text Gradient Logic (Same as .hero-overlay-name) */
    background-image: linear-gradient(to right, transparent 50%, #ffffff 50%), 
                      linear-gradient(135deg, #FFD406, #144EE3, #D980FA, #0CB8FF, #29E0B2, #FFD406);
    background-size: 200% 100%, 300% 300%;
    background-position: 100% 0%, 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #ffffff; /* Fallback */
    transition: background-position 0.8s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease;
}

.hero-cta.hero-cta-hidden {
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
}

/* Border Gradient Logic (Pseudo-element Mask Trick) */
.hero-cta::before {
    content: "";
    position: absolute;
    inset: -1px; /* Cover the 1px transparent border area */
    border-radius: 999px; 
    padding: 1px; /* Thickness of the visual border */
    
    background-image: linear-gradient(to right, transparent 50%, #ffffff 50%), 
                      linear-gradient(135deg, #FFD406, #144EE3, #D980FA, #0CB8FF, #29E0B2, #FFD406);
    background-size: 200% 100%, 300% 300%;
    background-position: 100% 0%, 0% 50%;
    
    /* Mask to create border shape */
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    
    transition: background-position 0.8s ease;
    pointer-events: none;
    z-index: -1; /* Behind text */
}

.hero-cta:hover {
    background-position: 0% 0%, 100% 50%;
    /* No background change needed as we rely on text/border gradients */
}

.hero-cta:hover::before {
    background-position: 0% 0%, 100% 50%;
}

/* Ensure CTA doesn't conflict on mobile */
@media (max-width: 768px) {
    .hero-cta {
        margin-top: 24px;
        padding: 10px 28px;
        font-size: var(--text-small);
    }
}
/* =========================================
   PAGE TITLES (SUBPAGES)
   ========================================= */
.page-title {
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(3.5rem, 7vw, 6rem); /* Matches .hero-overlay-name */
    font-weight: 400; /* Matches .hero-overlay-name */
    letter-spacing: -0.04em; /* Matches .hero-overlay-name */
    line-height: 0.95; /* Matches .hero-overlay-name */
    text-transform: none !important; /* Force no all-caps per user request */
    color: var(--text-primary);
    margin-bottom: var(--space-md);
    text-align: center; /* Subpages usually center title */
}

.page-subtitle {
    font-family: 'DM Sans', sans-serif;
    font-size: var(--h3);
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto 18px auto;
    text-align: center;
    line-height: 1.4;
    font-weight: 400;
}

/* =========================================
   PAGE CONTENT (SUBPAGES)
   ========================================= */
.page-content {
    padding: var(--space-xl) var(--gutter);
    padding-top: 140px; /* Increased to prevent header overlap */
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    opacity: 0;
    animation: fadeIn 1s ease forwards;
}

/* =========================================
   CAROUSEL STYLES
   ========================================= */
.impact-hero-carousel {
    position: sticky;
    top: 0;
    z-index: 1; /* Keep it below content if we want parallax, but above background */
    width: 100%;
    overflow: hidden;
    /* Maintain aspect ratio of 21:9 like the original image */
    aspect-ratio: 21 / 9;
}

.carousel-track {
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
}

.carousel-slide {
    min-width: 100%;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.8s ease-in-out; /* Smooth fade effect as fallback/base */
    z-index: 1;
}

.carousel-slide.active {
    opacity: 1;
    z-index: 2;
}

.carousel-slide img,
.carousel-slide video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center; /* Anchor to top, center horizontally */
    display: block;
}

/* Carousel Thumbnails Control */
.carousel-nav {
    position: absolute;
    top: 20px; /* Changed from bottom: 20px */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 102; /* Match video thumbnails */
    pointer-events: auto;
}

.carousel-thumbnail-item {
    width: 80px;
    height: 28px;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    
    /* Apple Glass Border Effect for Unselected State */
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    
    transition: all 0.3s ease;
    background: #000;
    position: relative;
    padding: 0;
}

.carousel-thumbnail-item.active {
    border-color: #fff;
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.carousel-thumbnail-item:hover {
    border-color: #fff;
    transform: scale(1.05);
}

.carousel-thumbnail-item video,
.carousel-thumbnail-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    display: block;
}

@media (max-width: 768px) {
    .impact-hero-carousel {
        /* Crop 30% from bottom for tablet/mobile: 
           Use height 70% and overflow hidden to cut off the bottom part.
           Or adjust aspect-ratio if supported.
           Since image is object-position: top, reducing container height crops bottom.
        */
        height: 70%; 
        aspect-ratio: auto; /* Reset aspect ratio to allow height override or adjust ratio */
        aspect-ratio: 21 / 6.3; /* 21 / 9 * 0.7 approx */
    }
}

@media (max-width: 768px) {
    .impact-hero-carousel {
        aspect-ratio: 3 / 2; /* Expand height ~20% more for mobile vertical */
        height: auto; /* Reset fixed height for mobile to use aspect ratio */
    }
}

/* Impact List Styles merged into main section */

/* Text Highlight Style - Alternative to Bold */
.text-highlight {
    color: #0f2d1e;
    font-weight: 600;
}

.case-slide .impact-body strong {
    color: #0f2d1e;
    font-weight: 600;
}

@media (max-width: 768px) {
    .case-tabs-bleed {
        top: 40px; /* Match smaller mobile header height */
    }
}

.social-btn.is-disabled {
    opacity: 0.35;
    filter: blur(0.9px);
    pointer-events: none;
    cursor: not-allowed;
}

.upload-notice-box {
    margin-top: 16px;
    padding: 16px 18px;
    border: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.03);
    text-align: left;
}

.upload-notice-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.upload-notice-avatar {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    object-fit: cover;
    border: 1px solid rgba(0, 0, 0, 0.16);
    background: rgba(0, 0, 0, 0.04);
    flex: 0 0 auto;
}

.upload-notice-content {
    min-width: 0;
}

.upload-notice-title {
    font-size: var(--text-small);
    font-weight: 600;
    color: rgba(0, 0, 0, 0.85);
    letter-spacing: 0.01em;
    margin-bottom: 8px;
}

.upload-notice-text {
    margin: 0;
    font-size: var(--text-small);
    color: rgba(0, 0, 0, 0.72);
    line-height: 1.45;
    font-weight: 400;
}

.upload-notice-text .upload-countdown {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.upload-notice-text .upload-eta {
    color: rgba(0, 0, 0, 0.55);
}

.lab-actions {
    margin-top: 10px;
    display: flex;
    justify-content: center;
}

.back-home-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    border-radius: 999px;
    border: 1px solid #000;
    background: #000;
    color: #fff;
    text-decoration: none;
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: all 0.25s ease;
}

.back-home-btn:hover {
    background: rgba(0, 0, 0, 0.86);
    border-color: rgba(0, 0, 0, 0.86);
}