/* ============================================
   FONT FACE DECLARATIONS
   ============================================ */
@font-face {
    font-family: 'Euclid Circular B';
    src: url('fonts/Euclid/EuclidCircularB-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Euclid Circular B';
    src: url('fonts/Euclid/EuclidCircularB-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Euclid Circular B';
    src: url('fonts/Euclid/EuclidCircularB-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Euclid Circular B';
    src: url('fonts/Euclid/EuclidCircularB-Semibold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Euclid Circular B';
    src: url('fonts/Euclid/EuclidCircularB-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'PP Museum';
    src: url('fonts/PP-Museum/PPMuseum-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'PP Museum';
    src: url('fonts/PP-Museum/PPMuseum-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'PP Museum';
    src: url('fonts/PP-Museum/PPMuseum-Ultrabold.otf') format('opentype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* ============================================
   RESET AND BASE STYLES
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Reset header background - remove browser defaults */
header,
header::before,
header::after {
    background: rgba(0, 0, 0, 0) !important;
    background-color: rgba(0, 0, 0, 0) !important;
    background-image: none !important;
}

/* Ensure header has no background by default */
header.header {
    background: rgba(0, 0, 0, 0) !important;
    background-color: rgba(0, 0, 0, 0) !important;
}

:root {
    /* Color Palette */
    --color-black: #0A0A0C;
    --color-white: #FFFFFF;
    --color-light-grey: #E5E5F4;
    --color-grey: #7E7E89;
    --color-purple: #401999;
    
    /* Gradient Colors */
    --gradient-start: #E0EDFE;
    --gradient-end: #F4FCFE;
    
    /* Gradient Definitions */
    --gradient-horizontal: linear-gradient(90deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
    --gradient-vertical: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
    
    /* Legacy color variables (can be updated to use new palette) */
    --bg-color: #0A0A0C;
    --text-color: #FFFFFF;
    --text-color-light: #E5E5F4;
    --separator-color: #7E7E89;
    
    /* Grid System - 1440px breakpoint standard */
    --grid-breakpoint: 1440px;
    --grid-columns: 12;
    --grid-gutter: 20px;
    --grid-column-width: 102px; /* Standard column width for 1440px breakpoint */
    --grid-container-width: calc((var(--grid-columns) * var(--grid-column-width)) + ((var(--grid-columns) - 1) * var(--grid-gutter)));
    
    /* Responsive Breakpoints */
    --breakpoint-mobile: 767px;
    --breakpoint-tablet: 1024px;
    --breakpoint-desktop: 1440px;
}

body {
    font-family: 'PP Museum', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    font-weight: 300;
    background-color: var(--bg-color);
    color: var(--text-color);
    font-size: 21px;
    line-height: 32px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    cursor: none; /* Hide default cursor */
}

/* Text selection color */
::selection {
    background-color: #272733;
    color: var(--color-white);
}

::-moz-selection {
    background-color: #272733;
    color: var(--color-white);
}

/* ============================================
   XL BREAKPOINT (1440px+) - BASE STYLES
   All styles below are for XL screens and above.
   This is the default/base design.
   ============================================ */

/* ============================================
   SCROLL ANIMATIONS
   ============================================ */

/* Base animation state - elements start hidden and below */
.scroll-animate {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Animated state - when element comes into view */
.scroll-animate.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered animation for child elements (e.g., project cards) */
.scroll-animate-stagger > * {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scroll-animate-stagger.animate-in > * {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delay for child elements */
.scroll-animate-stagger.animate-in > *:nth-child(1) { transition-delay: 0.1s; }
.scroll-animate-stagger.animate-in > *:nth-child(2) { transition-delay: 0.2s; }
.scroll-animate-stagger.animate-in > *:nth-child(3) { transition-delay: 0.3s; }
.scroll-animate-stagger.animate-in > *:nth-child(4) { transition-delay: 0.4s; }
.scroll-animate-stagger.animate-in > *:nth-child(5) { transition-delay: 0.5s; }
.scroll-animate-stagger.animate-in > *:nth-child(6) { transition-delay: 0.6s; }

/* Hide default cursor on all links */
a, button, [role="button"] {
    cursor: none !important;
}

/* Reset html background to ensure no white shows through */
html {
    background-color: var(--bg-color) !important;
}

/* Force transparent header on all pages - reset browser defaults */
html body header,
html body header.header,
html body .header,
html body header.header * {
    background: rgba(0, 0, 0, 0) !important;
    background-color: rgba(0, 0, 0, 0) !important;
    background-image: none !important;
    -webkit-background-color: rgba(0, 0, 0, 0) !important;
    -moz-background-color: rgba(0, 0, 0, 0) !important;
}

/* ============================================
   TYPOGRAPHY CLASSES
   ============================================ */
.body {
    font-family: 'PP Museum', sans-serif;
    font-weight: 300;
    font-size: 21px;
    line-height: 32px;
    color: var(--color-black);
}

/* Info page - body text should be grey on dark background */
.intro-section .body {
    color: var(--color-grey);
}

.body-large {
    font-family: 'PP Museum', sans-serif;
    font-weight: 300;
    font-size: 24px;
    line-height: 36px;
    color: var(--color-grey);
}

.body-small {
    font-family: 'PP Museum', sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 16px;
    color: var(--color-black);
}

.body-medium {
    font-family: 'PP Museum', sans-serif;
    font-weight: 300;
    font-size: 18px;
    line-height: 18px;
    color: var(--color-black);
}

.job-title {
    font-family: 'PP Museum', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 18px;
    letter-spacing: 0;
}

.button-label {
    margin: 0;
    padding: 0;
    line-height: 1;
    font-family: 'Euclid Circular B', sans-serif;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.font-nav-header {
    font-family: 'Euclid Circular B', sans-serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 2px;
}

.section-heading {
    font-family: 'PP Museum', sans-serif;
    font-size: 18px;
    line-height: 18px;
    font-weight: 300;
    letter-spacing: 3px;
    margin-bottom: 32px;
    margin-left: 0;
    padding-left: 0;
    text-transform: uppercase;
    color: var(--color-grey);
}

.small-title {
    font-family: 'PP Museum', sans-serif;
    font-size: 18px;
    line-height: 18px;
    font-weight: 300;
    letter-spacing: 2px;
    margin-bottom: 0;
    margin-left: 0;
    padding-left: 0;
    text-transform: uppercase;
    color: var(--color-grey);
}

/* ============================================
   SPACING TOKEN UTILITIES
   Use padding-top to create spacing between elements
   ============================================ */
.spacing-token-xs { padding-top: var(--spacing-xs); }
.spacing-token-sm { padding-top: var(--spacing-sm); }
.spacing-token-md { padding-top: var(--spacing-md); }
.spacing-token-lg { padding-top: var(--spacing-lg); }
.spacing-token-xl { padding-top: var(--spacing-xl); }
.spacing-token-2xl { padding-top: var(--spacing-2xl); }
.spacing-token-3xl { padding-top: var(--spacing-3xl); }
.spacing-token-4xl { padding-top: var(--spacing-4xl); }
.spacing-token-5xl { padding-top: var(--spacing-5xl); }

/* Override spacing-token-2xl for first section after intro on new-app page */
main.case-main-new-app .case-intro + section.spacing-token-2xl,
.case-main-new-app .case-intro + section.spacing-token-2xl,
main.case-main-new-app .case-intro + .spacing-token-2xl,
.case-main-new-app .case-intro + .spacing-token-2xl {
    padding-top: 0 !important;
}

/* Legacy spacing utilities (kept for backward compatibility) */
.spacing-8 { margin: 8px; }
.spacing-12 { margin: 12px; }
.spacing-16 { margin: 16px; }
.spacing-20 { margin: 20px; }
.spacing-24 { margin: 24px; }
.spacing-32 { margin: 32px; }
.spacing-40 { margin: 40px; }
.spacing-52 { margin: 52px; }
.spacing-72 { margin: 72px; }
.spacing-96 { margin: 96px; }
.spacing-120 { margin: 120px; }
.spacing-150 { margin: 150px; }
.spacing-152 { margin: 152px; }
.spacing-200 { margin: 200px; }

.spacing-top-8 { margin-top: 8px; }
.spacing-top-12 { margin-top: 12px; }
.spacing-top-16 { margin-top: 16px; }
.spacing-top-20 { margin-top: 20px; }
.spacing-top-24 { margin-top: 24px; }
.spacing-top-32 { margin-top: 32px; }
.spacing-top-40 { margin-top: 40px; }
.spacing-top-52 { margin-top: 52px; }
.spacing-top-72 { margin-top: 72px; }
.spacing-top-96 { margin-top: 96px; }
.spacing-top-120 { margin-top: 120px; }
.spacing-top-152 { margin-top: 152px; }

.spacing-bottom-8 { margin-bottom: 8px; }
.spacing-bottom-12 { margin-bottom: 12px; }
.spacing-bottom-16 { margin-bottom: 16px; }
.spacing-bottom-20 { margin-bottom: 20px; }
.spacing-bottom-24 { margin-bottom: 24px; }
.spacing-bottom-32 { margin-bottom: 32px; }
.spacing-bottom-40 { margin-bottom: 40px; }
.spacing-bottom-52 { margin-bottom: 52px; }
.spacing-bottom-72 { margin-bottom: 72px; }
.spacing-bottom-96 { margin-bottom: 96px; }
.spacing-bottom-120 { margin-bottom: 120px; }
.spacing-bottom-152 { margin-bottom: 152px; }

.spacing-left-8 { margin-left: 8px; }
.spacing-left-12 { margin-left: 12px; }
.spacing-left-16 { margin-left: 16px; }
.spacing-left-20 { margin-left: 20px; }
.spacing-left-24 { margin-left: 24px; }
.spacing-left-32 { margin-left: 32px; }
.spacing-left-40 { margin-left: 40px; }
.spacing-left-52 { margin-left: 52px; }
.spacing-left-72 { margin-left: 72px; }
.spacing-left-96 { margin-left: 96px; }
.spacing-left-120 { margin-left: 120px; }
.spacing-left-152 { margin-left: 152px; }

.spacing-right-8 { margin-right: 8px; }
.spacing-right-12 { margin-right: 12px; }
.spacing-right-16 { margin-right: 16px; }
.spacing-right-20 { margin-right: 20px; }
.spacing-right-24 { margin-right: 24px; }
.spacing-right-32 { margin-right: 32px; }
.spacing-right-40 { margin-right: 40px; }
.spacing-right-52 { margin-right: 52px; }
.spacing-right-72 { margin-right: 72px; }
.spacing-right-96 { margin-right: 96px; }
.spacing-right-120 { margin-right: 120px; }
.spacing-right-152 { margin-right: 152px; }

.spacing-padding-8 { padding: 8px; }
.spacing-padding-12 { padding: 12px; }
.spacing-padding-16 { padding: 16px; }
.spacing-padding-20 { padding: 20px; }
.spacing-padding-24 { padding: 24px; }
.spacing-padding-32 { padding: 32px; }
.spacing-padding-40 { padding: 40px; }
.spacing-padding-52 { padding: 52px; }
.spacing-padding-72 { padding: 72px; }
.spacing-padding-96 { padding: 96px; }
.spacing-padding-120 { padding: 120px; }
.spacing-padding-152 { padding: 152px; }

/* ============================================
   GRID SYSTEM
   ============================================ */
.grid-container {
    width: var(--grid-breakpoint);
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), var(--grid-column-width));
    gap: var(--grid-gutter);
    position: relative;
}

.grid-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        repeating-linear-gradient(
            to right,
            rgba(255, 255, 255, 0.01) 0,
            rgba(255, 255, 255, 0.01) var(--grid-column-width),
            transparent var(--grid-column-width),
            transparent calc(var(--grid-column-width) + var(--grid-gutter))
        );
    pointer-events: none;
    z-index: -1;
    display: none; /* Hide grid on all pages */
}

/* Show grid on pages with show-grid class at 5% opacity */
.show-grid .grid-container::after {
    display: block;
    background-image: 
        repeating-linear-gradient(
            to right,
            rgba(0, 0, 0, 0.05) 0,
            rgba(0, 0, 0, 0.05) var(--grid-column-width),
            transparent var(--grid-column-width),
            transparent calc(var(--grid-column-width) + var(--grid-gutter))
        );
}

.grid-container > * {
    position: relative;
    z-index: 1;
    min-height: 20px;
}

.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

.main-content {
    width: var(--grid-breakpoint);
    max-width: 100%;
    margin: 0 auto;
    padding-top: 72px;
    padding-bottom: 0; /* remove extra spacing below main content */
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), var(--grid-column-width));
    gap: var(--grid-gutter);
    position: relative;
}

.main-content::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        repeating-linear-gradient(
            to right,
            rgba(255, 255, 255, 0.01) 0,
            rgba(255, 255, 255, 0.01) var(--grid-column-width),
            transparent var(--grid-column-width),
            transparent calc(var(--grid-column-width) + var(--grid-gutter))
        );
    pointer-events: none;
    z-index: -1;
    display: none; /* Hide grid on all pages */
}

/* Show grid on pages with show-grid class at 5% opacity */
.show-grid .main-content::after {
    display: block;
    background-image: 
        repeating-linear-gradient(
            to right,
            rgba(0, 0, 0, 0.05) 0,
            rgba(0, 0, 0, 0.05) var(--grid-column-width),
            transparent var(--grid-column-width),
            transparent calc(var(--grid-column-width) + var(--grid-gutter))
        );
}

/* Show grid on pages with show-grid-3 class at 3% opacity */
.show-grid-3 .main-content::after {
    display: block;
    background-image: 
        repeating-linear-gradient(
            to right,
            rgba(0, 0, 0, 0.03) 0,
            rgba(0, 0, 0, 0.03) var(--grid-column-width),
            transparent var(--grid-column-width),
            transparent calc(var(--grid-column-width) + var(--grid-gutter))
        );
}

.main-content > * {
    position: relative;
    z-index: 1;
    grid-column: 2 / 11;
    margin-left: 0;
    padding-left: 0;
}

/* ============================================
   HEADER & NAVIGATION
   ============================================ */
.header {
    height: 72px;
    display: flex;
    align-items: center;
    padding-top: 24px;
    position: relative; /* Default - will be overridden by video hero rules */
    z-index: 10; /* Ensure header is above hero */
    background: rgba(0, 0, 0, 0) !important;
    background-color: rgba(0, 0, 0, 0) !important;
    background-image: none !important;
}

/* Header overlapping video - keep it relative so it scrolls with content */
/* Header relative positioning for video hero pages - same as other pages */
body:has(.case-hero-video-wrapper) .header,
body.has-video-hero .header,
.header-overlay-video,
.case-hero-video-wrapper ~ .header,
header:has(+ .case-hero-video-wrapper),
body:has(.case-hero-video-wrapper) header.header,
body.has-video-hero header.header,
header.header.header-overlay-video {
    position: relative !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    z-index: 10 !important;
    mix-blend-mode: normal !important; /* Ensure header doesn't blend with video */
}

/* Ensure header grid-container and all children are transparent when overlaying video */
body:has(.case-hero-video-wrapper) .header .grid-container,
body.has-video-hero .header .grid-container,
.header-overlay-video .grid-container,
body:has(.case-hero-video-wrapper) .header *,
body.has-video-hero .header *,
.header-overlay-video * {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Force transparent header for video hero pages - override all other rules including home-theme white background */
body.home-theme.has-video-hero .header,
body.home-theme.has-video-hero .header *,
body.home-theme.has-video-hero header.header,
body.home-theme.has-video-hero header.header *,
body.home-theme:has(.case-hero-video-wrapper) .header,
body.home-theme:has(.case-hero-video-wrapper) .header *,
body.home-theme:has(.case-hero-video-wrapper) header.header,
body.home-theme:has(.case-hero-video-wrapper) header.header *,
body.home-theme.has-video-hero .header-overlay-video,
body.home-theme.has-video-hero .header-overlay-video *,
body.home-theme:has(.case-hero-video-wrapper) .header-overlay-video,
body.home-theme:has(.case-hero-video-wrapper) .header-overlay-video * {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    -webkit-background-color: transparent !important;
    -moz-background-color: transparent !important;
    opacity: 1 !important; /* Ensure header content is visible */
}

/* Override for header with overlay class - keep relative so it scrolls */
.header.header-overlay {
    position: relative !important;
    z-index: 10 !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* Force header-overlay to be relative - same as other pages */
.header.header-overlay,
header.header.header-overlay,
html body .header.header-overlay,
html body.home-theme .header.header-overlay {
    position: relative !important;
    margin: 0 !important;
    z-index: 10 !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* Override for header-overlay to ensure it's relative - must come after base .header rule */
html body .header.header-overlay,
html body.home-theme .header.header-overlay,
html body.home-theme:has(.case-hero-video-section) .header.header-overlay {
    position: relative !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* On case study pages with video hero, make header relative so it scrolls */
body.home-theme:has(.case-hero-video-section) .header,
body:has(.case-hero-video-section) .header,
.case-hero-video-section ~ .header,
.case-hero-video-section + .header,
header:has(+ .case-hero-video-section),
body.home-theme header.header:has(+ .case-hero-video-section),
body.home-theme .header:has(+ .case-hero-video-section) {
    position: relative !important;
    background: transparent !important;
    background-color: transparent !important;
    z-index: 10 !important;
}

/* Ensure header grid container doesn't have background on case study pages */
body.home-theme .header,
body.home-theme .header .grid-container,
body.home-theme .header *,
body.home-theme header.header,
body.home-theme header.header * {
    background: rgba(0, 0, 0, 0) !important;
    background-color: rgba(0, 0, 0, 0) !important;
    background-image: none !important;
}

.header .grid-container .logo {
    grid-column: 2 / 6;
}

.header .grid-container .nav {
    grid-column: 7 / 11;
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: flex-end;
}

.logo {
    color: var(--color-grey);
    text-decoration: none;
    transition: opacity 0.2s;
}

.logo:hover {
    opacity: 0.7;
}

.nav {
    display: flex;
    align-items: center;
    gap: 20px;
}

.nav-link {
    color: var(--color-white);
    text-decoration: none;
    transition: opacity 0.2s;
}

.nav-link:hover {
    opacity: 0.7;
}

.nav-link.active {
    opacity: 1;
}

.nav-separator {
    color: var(--color-white);
    font-size: 16px;
}

/* ============================================
   ICON SYSTEM
   ============================================ */
.icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: currentColor;
}

.icon svg {
    width: 24px;
    height: 24px;
}

[data-icon] {
    display: inline-block;
    vertical-align: middle;
}

[data-icon] svg {
    display: block;
    width: 24px;
    height: 24px;
}

.icon-xs {
    width: 16px;
    height: 16px;
}

.icon-sm {
    width: 20px;
    height: 20px;
}

.icon-md {
    width: 24px;
    height: 24px;
}

.icon-lg {
    width: 32px;
    height: 32px;
}

.icon-xl {
    width: 40px;
    height: 40px;
}

.icon-white {
    color: var(--color-white);
}

.icon-grey {
    color: var(--color-grey);
}

.icon-light-grey {
    color: var(--color-light-grey);
}

.icon-black {
    color: var(--color-black);
}

a .icon,
.icon-link {
    transition: opacity 0.2s, transform 0.2s;
}

a:hover .icon,
.icon-link:hover {
    opacity: 0.7;
}

.icon-text {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.icon-text .icon {
    flex-shrink: 0;
}

/* ============================================
   INTRODUCTION SECTION
   ============================================ */
.intro-section {
    margin-bottom: 72px;
    margin-left: 0;
    padding-left: 0;
    grid-column: 4 / 11;
}

.intro-section p {
    margin-bottom: 24px;
    margin-left: 0;
    padding-left: 0;
    max-width: none; /* Remove max-width constraint to allow text to span full column width */
}

.signature {
    margin-top: 40px;
    margin-bottom: 0;
    margin-left: 0;
    padding-left: 0;
}

.signature-name {
    margin-bottom: 8px;
}

.signature-title {
    margin-bottom: 52px;
}

.contact-links {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-left: 0;
    padding-left: 0;
    margin-bottom: 24px;
}

.contact-link-wrapper {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    white-space: nowrap;
}

.contact-link {
    color: var(--color-white);
    text-decoration: none;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: opacity 0.2s;
    white-space: nowrap;
}

/* Hide arrow icon from email contact links globally */
.contact-link span[data-icon="arrow"] {
    display: none !important;
}

a.contact-link:hover {
    opacity: 0.7;
}

.copy-link-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: var(--color-white);
    transition: opacity 0.2s;
    position: relative;
}

.copy-link-btn:hover {
    opacity: 0.7;
}

.copy-link-btn:active {
    opacity: 0.5;
}

.copied-indicator {
    color: var(--color-white);
    padding: 8px 16px;
    position: absolute;
    top: 50%;
    transform: translateY(-60%); /* start slightly above */
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 10;
    background-color: var(--bg-color);
}

.copied-indicator.show {
    opacity: 1;
    transform: translateY(-50%); /* settle centered vertically */
}

.copied-indicator.hiding {
    opacity: 0;
    transform: translateY(-60%); /* slide back up when hiding */
}


.arrow {
    font-size: 0.9rem;
}

/* ============================================
   EXPERTISE SECTION
   ============================================ */
.expertise-section {
    margin-bottom: 72px;
    margin-left: 0;
    padding-left: 0;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), var(--grid-column-width));
    gap: var(--grid-gutter);
}

.expertise-section .section-heading {
    grid-column: 2 / -1;
}

.expertise-list {
    list-style: none;
    max-width: 100%;
    margin-left: 0;
    padding-left: 0;
    grid-column: 1 / -1;
    display: contents;
}

.expertise-item {
    margin-left: 0;
    padding-left: 0;
    display: contents;
}

.expertise-title-container {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 8px;
    grid-column: 2 / 6;
}

.expertise-item:not(:last-child) .expertise-title-container {
    margin-bottom: 52px;
}

.expertise-item:last-child .expertise-title-container {
    margin-bottom: 8px;
}

.expertise-title-container .client {
    color: var(--text-color);
    font-weight: 400;
}

.expertise-title-container .expertise {
    color: var(--color-white);
    font-family: 'PP Museum', sans-serif;
    font-weight: 400;
    font-size: 21px;
    line-height: 32px;
}

.expertise-title-container .year {
    display: inline-block;
}

.expertise-copy-container {
    color: var(--color-grey);
    font-family: 'PP Museum', sans-serif;
    font-weight: 300;
    font-size: 21px;
    line-height: 32px;
    margin-left: 0;
    padding-left: 0;
    grid-column: 6 / 11;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================
   EXPERIENCE SECTION
   ============================================ */
.experience-section {
    margin-bottom: 72px;
    margin-left: 0;
    padding-left: 0;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), var(--grid-column-width));
    gap: var(--grid-gutter);
}

.experience-section .section-heading {
    grid-column: 2 / -1;
}

.experience-list {
    max-width: 1300px;
    margin-left: 0;
    padding-left: 0;
    grid-column: 1 / -1;
    display: contents;
}

.experience-item {
    display: contents;
}

.experience-item .client {
    font-family: 'PP Museum', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 18px;
    letter-spacing: 0;
    color: var(--color-white);
    grid-column: 2 / 4;
    padding-bottom: 24px;
}

.experience-item .job-title {
    font-family: 'PP Museum', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 18px;
    letter-spacing: 0;
    text-align: left;
    color: var(--color-grey);
    grid-column: 6 / 9;
    padding-bottom: 24px;
}

.experience-item .year {
    font-family: 'PP Museum', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 18px;
    letter-spacing: 0;
    text-align: right;
    color: var(--color-grey);
    grid-column: 10 / 11;
    padding-bottom: 24px;
}

.experience-item::after {
    content: '';
    grid-column: 2 / 11;
    height: 1px;
    background-color: var(--separator-color);
    margin-top: -24px;
    margin-bottom: 40px;
}

.experience-item:last-child::after {
    margin-bottom: 0;
}

/* ============================================
   EDUCATION SECTION
   ============================================ */
.education-section {
    margin-bottom: 0;
    margin-left: 0;
    padding-left: 0;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), var(--grid-column-width));
    gap: var(--grid-gutter);
}

.education-section .section-heading {
    grid-column: 2 / -1;
}

.education-list {
    max-width: 1300px;
    margin-left: 0;
    padding-left: 0;
    grid-column: 1 / -1;
    display: contents;
}

.education-item {
    display: contents;
}

.education-item .client {
    font-family: 'PP Museum', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 18px;
    letter-spacing: 0;
    color: var(--color-white);
    grid-column: 2 / 5;
    padding-bottom: 24px;
}

.education-item .job-title {
    font-family: 'PP Museum', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 18px;
    letter-spacing: 0;
    text-align: left;
    color: var(--color-grey);
    grid-column: 6 / 9;
    padding-bottom: 24px;
}

.education-item .year {
    font-family: 'PP Museum', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 18px;
    letter-spacing: 0;
    text-align: right;
    color: var(--color-grey);
    grid-column: 10 / 11;
    padding-bottom: 24px;
}

.education-item::after {
    content: '';
    grid-column: 2 / 11;
    height: 1px;
    background-color: var(--separator-color);
    margin-top: -24px;
    margin-bottom: 40px;
}

.education-item:last-child::after {
    margin-bottom: 0;
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
    margin-top: 0;
    padding: 0; /* spacing controlled by separator margin */
    margin-bottom: 0;
}


/* Footer on case study pages - constrain to columns 2-9 */
.case-main .footer {
    grid-column: 2 / 9;
}

.footer .grid-container {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), var(--grid-column-width));
    grid-template-rows: auto auto auto; /* top, separator, bottom */
    gap: var(--grid-gutter);
    row-gap: 0; /* spacing handled by separator padding */
}

/* Top Section */
.footer-top {
    grid-column: 1 / -1;
    grid-row: 1;
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), var(--grid-column-width));
    gap: var(--grid-gutter);
    margin: 0;
    padding: 0; /* ensure gap is controlled by row-gap */
    align-items: center;
    
}

.footer-top-left {
    grid-column: 2 / 6;
}

.footer-top-right {
    grid-column: 7 / 11;
    text-align: right;
}

/* Adjust footer columns for case study pages (footer spans 2-9, so adjust internal columns) */
.case-main .footer .grid-container {
    grid-template-columns: repeat(var(--grid-columns), var(--grid-column-width));
}

.case-main .footer .footer-top {
    grid-template-columns: repeat(var(--grid-columns), var(--grid-column-width));
}

.case-main .footer .footer-top-left {
    grid-column: 1 / 5; /* Columns 1-4 within footer (equivalent to 2-5 in main grid) */
}

.case-main .footer .footer-top-right {
    grid-column: 6 / 9; /* Columns 6-8 within footer (equivalent to 7-9 in main grid) */
}

.case-main .footer .footer-separator {
    grid-column: 1 / 9; /* Full width within footer (columns 1-8, equivalent to 2-9 in main grid) */
}

.case-main .footer .footer-bottom {
    grid-template-columns: repeat(var(--grid-columns), var(--grid-column-width));
}

.case-main .footer .footer-bottom-left {
    grid-column: 1 / 5; /* Columns 1-4 within footer (equivalent to 2-5 in main grid) */
}

.case-main .footer .footer-bottom-right {
    grid-column: 6 / 9; /* Columns 6-8 within footer (equivalent to 7-9 in main grid) */
}

/* Footer logo inherits the same style as header logo */
.footer-logo { color: inherit; }

.footer-location {
    color: var(--color-grey); /* make LONDON • 2025 grey */
    display: inline-flex;
    align-items: center;
    gap: 16px;
}

/* Separator */
.footer-separator {
    grid-column: 2 / 11;
    grid-row: 2;
    display: block;
    border: none;
    border-top: 1px solid var(--separator-color);
    margin: 20px 0 8px 0; /* 28px total spacing (20px above, 8px below) */
}


/* Strong override to ensure thin grey footer separator */
.footer hr.footer-separator {
    border: 0 !important;
    border-top: 1px solid var(--separator-color) !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 20px 0 8px 0 !important; /* 28px total spacing (20px above, 8px below) */
    background: none !important;
}

/* Bottom Section */
.footer-bottom {
    grid-column: 1 / -1;
    grid-row: 3;
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), var(--grid-column-width));
    gap: var(--grid-gutter);
    margin-bottom: 40px; /* Add consistent bottom spacing inside footer */
}

.footer-bottom-left {
    margin: 0;
    padding: 0;
    grid-column: 2 / 7;
}


.footer-bottom-right {
    margin: 0;
    padding: 0;
    grid-column: 7 / 11;
    text-align: right;
    justify-self: end;   /* align to the right within the grid */
    /* align vertically via parent align-items */
    display: flex;
    justify-content: flex-end;
}

.footer-cta {
    font-family: 'PP Museum', sans-serif;
    font-weight: 300;
    font-size: 18px;
    line-height: 18px; /* match font-size to reduce spacing */
    color: var(--color-white);
}

.footer-email-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
}

.footer-email {
    color: var(--color-white);
    text-decoration: none;
    transition: opacity 0.2s;
}

.footer-email:hover {
    opacity: 0.7;
}

.footer .copy-link-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: var(--color-white);
    transition: opacity 0.2s;
    position: relative;
}

.footer .copy-link-btn:hover {
    opacity: 0.7;
}

.footer .copy-link-btn:active {
    opacity: 0.5;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

/* XL Breakpoint (1440px+) - Grid Variables */
@media (min-width: 1440px) {
    :root {
        --grid-column-width: 102px;
        --grid-gutter: 20px;
    }
}

/* ============================================
   XL BREAKPOINT (1920px and above)
   Large desktop screens - fix one-pager layout
   ============================================ */
@media (min-width: 1920px) {
    /* One-pager case study pages: make content fill viewport height */
    /* Target pages with case-main but without sidebar (one-pagers: BT, BG, NATWEST, HOWSY, SEEDLEGALS) */
    html:has(body.home-theme:not(:has(.case-sub-nav-sidebar))) {
        height: 100%;
    }
    
    body.home-theme:not(:has(.case-sub-nav-sidebar)) {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }
    
    /* Main content stays at natural height */
    body.home-theme:not(:has(.case-sub-nav-sidebar)) .main-content.case-main {
        flex-shrink: 0;
        /* Grid display is already set */
    }
    
    /* Make spacing div grow to fill remaining space, pushing footer to bottom */
    body.home-theme:not(:has(.case-sub-nav-sidebar)) .spacing-72 {
        flex: 1 0 auto;
        min-height: 72px; /* Maintain minimum spacing */
    }
    
    /* Footer stays at bottom naturally with flexbox */
    body.home-theme:not(:has(.case-sub-nav-sidebar)) .footer {
        flex-shrink: 0;
    }
    
    /* Scale up grid system for larger screens */
    :root {
        --grid-breakpoint: 1920px; /* Scale up from 1440px to 1920px (33% larger) */
        --grid-column-width: 136px; /* Scale up from 102px (102 * 1.33 = 136px) */
        --grid-gutter: 27px; /* Scale up from 20px (20 * 1.33 = 27px) */
    }
    
    /* Scale up fonts for larger screens */
    body {
        font-size: 23px; /* Scale up from 21px (21 * 1.1 = 23px) */
        line-height: 35px; /* Scale up from 32px (32 * 1.1 = 35px) */
    }
    
    .body {
        font-size: 23px; /* Scale up body text */
        line-height: 35px;
    }
    
    .body-large {
        font-size: 26px; /* Scale up from 24px */
        line-height: 40px; /* Scale up from 36px */
    }
    
    .body-medium {
        font-size: 20px !important; /* Scale up from 18px */
        line-height: 20px !important;
    }
    
    /* Scale up case detail values (ROLE, FOCUS, YEAR values) */
    .case-detail-value.body-medium {
        font-size: 20px !important; /* Scale up from 18px */
        line-height: 20px !important;
    }
    
    .body-small {
        font-size: 18px; /* Scale up from 16px */
        line-height: 18px;
    }
    
    .project-title {
        font-size: 40px; /* Scale up from 36px */
    }
    
    .small-title {
        font-size: 20px !important; /* Scale up from 18px */
        line-height: 20px !important;
    }
    
    .section-heading {
        font-size: 20px; /* Scale up from 18px */
        line-height: 20px;
    }
    
    .job-title {
        font-size: 20px; /* Scale up from 18px */
        line-height: 20px;
    }
    
    .button-label,
    .cta-label {
        font-size: 18px !important; /* Scale up from 16px */
    }
    
    /* Scale up project link text specifically */
    .project-link.cta-label,
    .project-link.button-label {
        font-size: 18px !important; /* Scale up from 16px */
    }
    
    .font-nav-header {
        font-size: 18px; /* Scale up from 16px */
    }
    
    /* Scale up contact link (email) font size */
    .contact-link.button-label,
    .contact-link {
        font-size: 18px; /* Scale up from 0.9rem (approximately 16px) to 18px */
    }
    
    /* Scale up footer CTA text */
    .footer-cta {
        font-size: 20px !important; /* Scale up from 18px (18 * 1.1 = 20px) */
        line-height: 20px !important; /* Scale up from 18px */
    }
    
    /* Scale up project card heights by 30% then another 30% (420px * 1.3 * 1.3 = 710px) */
    .project-card-image,
    .project-image-natwest,
    .project-card-image-bt,
    .project-card-image-british-gas,
    .project-card-image-seedlegals,
    .project-card-image-howsy,
    .project-image-onmo {
        height: 710px !important;
    }
    
    /* Update ONMO link wrapper height to match */
    a.project-image-onmo,
    .project-image {
        height: 710px !important;
    }
    
    /* Update ONMO lottie container min-height to match */
    .project-image-onmo .lottie-container {
        min-height: 710px !important;
    }
    
    /* Make ONMO the same as others - remove max-width constraint */
    .project-image-onmo {
        max-width: none;
        justify-self: stretch;
    }
    
    /* Keep image sizes similar to desktop to show same amount of image (excluding ONMO) */
    /* BT has different dimensions, so adjust it separately */
    .project-card-image-bt {
        background-size: 62.37% auto, cover !important; /* Same as desktop - show less of image initially */
        background-position: center 43px, center !important; /* BT moved up 25px from others (43px instead of 68px) */
    }
    
    /* BG, Howsy, SeedLegals have equal top gap */
    .project-card-image-british-gas,
    .project-card-image-seedlegals,
    .project-card-image-howsy {
        background-size: 62.37% auto, cover !important; /* Same as desktop - show less of image initially */
        background-position: center 68px, center !important; /* Equal top gap for all - 68px from top */
    }
    
    .project-image-natwest {
        background-size: 64.26% auto, cover !important; /* 10% smaller than 71.4% (71.4% * 0.9 = 64.26%) */
    }
    
    .project-card-image-bt:hover {
        background-size: 68.6% auto, cover !important; /* Same hover zoom as desktop (62.37% * 1.1 = 68.6%) */
    }
    
    .project-image-natwest:hover {
        background-size: 70.7% auto, cover !important; /* 10% smaller than 78.54% (78.54% * 0.9 = 70.7%) */
    }
    
    .project-card-image-british-gas:hover,
    .project-card-image-seedlegals:hover,
    .project-card-image-howsy:hover {
        background-size: 68.6% auto, cover !important; /* Same hover zoom as desktop (62.37% * 1.1 = 68.6%) */
    }
    
    /* ONMO matches other project images */
    .project-image-onmo {
        max-width: none !important; /* Remove max-width constraint */
        justify-self: stretch !important; /* Full width like others */
    }
    
    /* ONMO Lottie animation - match BG image size */
    .project-image-onmo .lottie-container svg,
    .project-image-onmo .lottie-container canvas {
        width: 62.37% !important; /* Match BG image size */
        height: 62.37% !important;
        max-width: 100%;
        max-height: 62.37%;
        object-position: center 68px !important; /* Match BG positioning */
    }
    
    /* ONMO hover image - match BG image size */
    .project-image-onmo-hover {
        width: 62.37% !important; /* Match BG image size */
        object-position: center 68px !important; /* Match BG positioning */
    }
    
    /* Make gap after ONMO same as gap after separator (144px) */
    .more-projects-section {
        margin-top: 144px !important; /* Same as gap after separator before FEATURED title */
    }
    
    /* Double the gap before hero text on large screens */
    .main-content.home-main {
        padding-top: 144px !important; /* Double the top gap (72px * 2 = 144px) */
    }
    
    /* Match top spacing for info page */
    .main-content:not(.home-main) {
        padding-top: 144px !important; /* Same as homepage - double the top gap (72px * 2 = 144px) */
    }
    
    /* Double the gap after email link and linkedin */
    .contact-links {
        margin-bottom: 48px !important; /* Double from 24px to 48px */
    }
    
    /* Scale up expertise section fonts */
    .expertise-title-container .expertise {
        font-size: 23px !important; /* Scale up from 21px (21 * 1.1 = 23px) */
        line-height: 35px !important; /* Scale up from 32px (32 * 1.1 = 35px) */
    }
    
    .expertise-copy-container {
        font-size: 23px !important; /* Scale up from 21px (21 * 1.1 = 23px) */
        line-height: 35px !important; /* Scale up from 32px (32 * 1.1 = 35px) */
    }
    
    /* Scale up experience section fonts - match Expertise scaling (21px base → 23px) */
    .experience-item .client,
    .experience-item .job-title,
    .experience-item .year {
        font-size: 23px !important; /* Scale up to match Expertise (21px * 1.095 = 23px) */
        line-height: 35px !important; /* Match Expertise line-height */
    }
    
    /* Scale up education section fonts - match Expertise scaling (21px base → 23px) */
    .education-item .client,
    .education-item .job-title,
    .education-item .year {
        font-size: 23px !important; /* Scale up to match Expertise (21px * 1.095 = 23px) */
        line-height: 35px !important; /* Match Expertise line-height */
    }
    
    /* Make separator gaps equal on large screens */
    .home-intro .body:last-of-type {
        margin-bottom: 144px !important; /* Gap after text before separator */
    }
    
    .home-separator {
        margin-bottom: 0 !important; /* Remove margin-bottom, spacing comes from home-intro */
    }
    
    .home-intro {
        margin-bottom: 144px !important; /* Gap after separator before FEATURED title - same as gap before separator */
    }
    
    /* Double spacing between sections (e.g., OVERVIEW and RESPONSIBILITIES) - only for 1920px+ */
    /* Target small-title that comes after body paragraphs within the same section */
    /* Use higher specificity to override body margin rules */
    .case-content-section p.body + .small-title,
    .case-content-section .body + .small-title {
        margin-top: 64px !important; /* Double the spacing (32px * 2 = 64px) - override any existing margin-top */
    }
}

/* ============================================
   XXL BREAKPOINT (2560px and above)
   Very large desktop screens - scale up further
   ============================================ */
@media (min-width: 2560px) {
    :root {
        --grid-breakpoint: 2400px; /* Scale up further for very large screens */
        --grid-column-width: 170px; /* Scale up proportionally */
        --grid-gutter: 34px; /* Scale up proportionally */
    }
    
    /* Scale up font sizes further for very large screens */
    body {
        font-size: 25px; /* Scale up from 23px */
        line-height: 38px; /* Scale up from 35px */
    }
    
    .body {
        font-size: 25px; /* Scale up body text further */
        line-height: 38px;
    }
    
    .body-large {
        font-size: 28px; /* Scale up from 26px */
        line-height: 42px; /* Scale up from 40px */
    }
    
    .body-medium {
        font-size: 22px !important; /* Scale up from 20px */
        line-height: 22px !important;
    }
    
    /* Scale up case detail values (ROLE, FOCUS, YEAR values) further */
    .case-detail-value.body-medium {
        font-size: 22px !important; /* Scale up from 20px */
        line-height: 22px !important;
    }
    
    .body-small {
        font-size: 20px; /* Scale up from 18px */
        line-height: 20px;
    }
    
    .project-title {
        font-size: 44px; /* Scale up from 40px */
    }
    
    .small-title {
        font-size: 22px !important; /* Scale up from 20px */
        line-height: 22px !important;
    }
    
    .section-heading {
        font-size: 22px; /* Scale up from 20px */
        line-height: 22px;
    }
    
    .job-title {
        font-size: 22px; /* Scale up from 20px */
        line-height: 22px;
    }
    
    .button-label,
    .cta-label {
        font-size: 20px !important; /* Scale up from 18px */
    }
    
    /* Scale up project link text specifically */
    .project-link.cta-label,
    .project-link.button-label {
        font-size: 20px !important; /* Scale up from 18px */
    }
    
    .font-nav-header {
        font-size: 20px; /* Scale up from 18px */
    }
    
    /* Scale up contact link (email) font size further */
    .contact-link.button-label,
    .contact-link {
        font-size: 20px; /* Scale up from 18px to 20px */
    }
    
    /* Scale up footer CTA text further */
    .footer-cta {
        font-size: 22px !important; /* Scale up from 20px */
        line-height: 22px !important; /* Scale up from 20px */
    }
    
    /* Double the gap after email link and linkedin */
    .contact-links {
        margin-bottom: 48px !important; /* Double from 24px to 48px */
    }
    
    /* Scale up expertise section fonts further */
    .expertise-title-container .expertise {
        font-size: 25px !important; /* Scale up from 23px */
        line-height: 38px !important; /* Scale up from 35px */
    }
    
    .expertise-copy-container {
        font-size: 25px !important; /* Scale up from 23px */
        line-height: 38px !important; /* Scale up from 35px */
    }
    
    /* Scale up experience section fonts further - match Expertise scaling */
    .experience-item .client,
    .experience-item .job-title,
    .experience-item .year {
        font-size: 25px !important; /* Scale up to match Expertise (23px → 25px) */
        line-height: 38px !important; /* Match Expertise line-height */
    }
    
    /* Scale up education section fonts further - match Expertise scaling */
    .education-item .client,
    .education-item .job-title,
    .education-item .year {
        font-size: 25px !important; /* Scale up to match Expertise (23px → 25px) */
        line-height: 38px !important; /* Match Expertise line-height */
    }
}

/* ============================================
   DESKTOP BREAKPOINT (1024px - 1439px)
   Laptops and smaller desktop screens
   ============================================ */
@media (min-width: 1024px) and (max-width: 1439px) {
    /* Desktop inherits most XL styles, add specific overrides here if needed */
    /* Grid system can scale proportionally or maintain similar layout */
}

/* Footer logo color */
.footer .footer-logo {
    color: var(--color-grey);
}

/* Make 'LONDON' text grey */
.footer-location span:first-child {
    color: var(--color-grey);
}

/* Footer rows: remove margins so separator controls spacing */


.hero-image-placeholder {
    grid-column: 2 / 11;
    width: 100%;
    height: 420px; /* placeholder height; replace when images arrive */
    border: none; /* remove stroke around placeholder */
    border-radius: 0;
    background: rgba(255,255,255,0.02);
    display: block;
}

/* ============================================
   CASE STUDY – HERO
   ============================================ */
.case-hero {
    width: 100%;
    margin: 0;
    padding: 0;
    margin-top: -72px; /* Pull hero up to overlap with header */
    padding-top: 72px; /* Add padding to account for header height */
    /* Gradient background applied via .gradient-horizontal class */
}

/* Hero without overlap - for pages with static header and grid image */
.case-hero:has(.case-hero-inner-grid) {
    margin-top: 0;
    padding-top: 0;
    margin-bottom: 0;
}

.case-hero-inner {
    width: var(--grid-breakpoint);
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
    height: 636px; /* Exact height - no padding (540px + 96px) */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    /* Transparent so gradient from .case-hero shows through */
}

/* Video hero wrapper - full width, pull up to overlap header */
.case-hero-video-wrapper {
    width: 100%;
    margin: 0;
    padding: 0;
    margin-top: -72px; /* Pull video up to overlap with header */
    padding-top: 0; /* No padding - video will cover header area */
    position: relative;
    z-index: 1; /* Behind header but above body */
    background: transparent !important; /* Remove gradient background */
    background-color: transparent !important; /* Ensure no background shows */
    background-image: none !important; /* Remove any gradient images */
    overflow: hidden; /* Hide any overflow from video positioning */
}

/* Ensure video inner extends to cover header area */
.case-hero-video-wrapper .case-hero-inner-video {
    margin-top: -72px; /* Pull inner content up to cover header area */
    padding-top: 0; /* No padding - align to top */
    height: calc(100% + 72px); /* Extend height to cover header area */
    min-height: calc(860px + 72px); /* Ensure minimum height includes header area (860px video + 72px header) */
}

/* Video inside case-hero-inner should span full breakpoint width */
.case-hero-inner-video {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 860px !important; /* Video height set to 860px (960px - 100px) */
}

/* Experience Lab image - full page width, total height 640px (header + container) */
.case-hero-video-wrapper:has(.case-hero-image-experience-lab) {
    width: 100% !important;
}

.case-hero-video-wrapper:has(.case-hero-image-experience-lab) .case-hero-inner-video {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    height: calc(640px + 72px) !important; /* Extend to cover header area (640px container + 72px header overlap) */
    min-height: calc(640px + 72px) !important;
}

/* Results image - full page width, total height 640px (header + container) */
.case-hero-video-wrapper:has(.case-hero-image-results) {
    width: 100% !important;
}

.case-hero-video-wrapper:has(.case-hero-image-results) .case-hero-inner-video {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    height: calc(640px + 72px) !important; /* Extend to cover header area (640px container + 72px header overlap) */
    min-height: calc(640px + 72px) !important;
}

/* Design Ops image - full page width, total height 640px (header + container) */
.case-hero-video-wrapper:has(.case-hero-image-design-ops) {
    width: 100% !important;
}

.case-hero-video-wrapper:has(.case-hero-image-design-ops) .case-hero-inner-video {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    height: calc(640px + 72px) !important; /* Extend to cover header area (640px container + 72px header overlap) */
    min-height: calc(640px + 72px) !important;
}

.case-hero-inner-video .case-hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center; /* Center video on both x and y axes */
    position: absolute;
    top: 0; /* Align video container to top - no gap */
    left: 0;
    z-index: 0; /* Behind header content */
}

/* When hero contains grid image, use grid layout */
.case-hero-inner-grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), var(--grid-column-width));
    gap: var(--grid-gutter);
    align-items: center;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

.case-hero-image-grid {
    grid-column: 3 / 11; /* Span columns 3-11 */
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    max-height: 636px; /* Match hero inner height (540px + 96px) */
}

.case-hero-image {
    width: 100%;
    height: 100%; /* Fill the parent container */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    line-height: 0;
    background-color: transparent !important;
    /* background-image is set by specific classes like .case-hero-image-onmo, .case-hero-image-natwest, etc. */
    /* Transparent background-color so gradient from .case-hero shows through */
}

/* Placeholder – NatWest specific hero image can be added later */
.case-hero-image-natwest {
    /* Image only - gradient comes from parent .case-hero.gradient-horizontal */
    background-image: url('images/index/natwest-index.png');
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    transform: scale(0.805) translateY(-128px); /* 15% bigger than 0.7, start 128px above (160-32), will end 72px above */
    transform-origin: center center;
    background-color: transparent !important;
    /* Slide-up animation on page load */
    animation: slideUpFadeInNatwest 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    opacity: 0;
    /* Use absolute positioning within relative container to maintain size */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 636px; /* Original full height (540px + 96px) */
}

/* Slide-up animation keyframes for NatWest (includes scale) */
@keyframes slideUpFadeInNatwest {
    from {
        opacity: 0;
        transform: scale(0.805) translateY(-128px); /* Start 128px above container (160-32) */
    }
    to {
        opacity: 1;
        transform: scale(0.805) translateY(-72px); /* End 72px above container position */
    }
}

/* NatWest hero container - clip bottom 100px while keeping image at original size */
.case-hero:has(.case-hero-image-natwest) .case-hero-inner {
    height: 536px; /* Visible height - clips bottom 100px (440px + 96px) */
    overflow: hidden; /* Clip the bottom 100px */
    position: relative; /* Position context for absolute image */
}

/* Slide-up animation keyframes for Design Foundations (includes scale) */
@keyframes slideUpFadeInDesignFoundations {
    from {
        opacity: 0;
        transform: scale(1) translateY(-128px); /* Start 128px above container */
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(-72px); /* End 72px above container position */
    }
}

/* British Telecom hero image */
.case-hero-image-bt {
    /* Image only - gradient comes from parent .case-hero.gradient-horizontal */
    background-image: url('images/index/BT-index.png');
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: transparent !important;
    /* Slide-up animation on page load */
    animation: slideUpFadeIn 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    opacity: 0;
    /* Use absolute positioning within relative container to maintain size */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 636px; /* Original full height (540px + 96px) */
}

/* British Telecom hero container - clip bottom 100px while keeping image at original size */
.case-hero:has(.case-hero-image-bt) .case-hero-inner {
    height: 536px; /* Visible height - clips bottom 100px (440px + 96px) */
    overflow: hidden; /* Clip the bottom 100px */
    position: relative; /* Position context for absolute image */
}

/* British Gas hero image */
.case-hero-image-british-gas {
    /* Image only - gradient comes from parent .case-hero.gradient-horizontal */
    background-image: url('images/index/BG-index.png');
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: transparent !important;
    /* Slide-up animation on page load */
    animation: slideUpFadeIn 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    opacity: 0;
    /* Use absolute positioning within relative container to maintain size */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 636px; /* Original full height (540px + 96px) */
}

/* British Gas hero container - clip bottom 100px while keeping image at original size */
.case-hero:has(.case-hero-image-british-gas) .case-hero-inner {
    height: 536px; /* Visible height - clips bottom 100px (440px + 96px) */
    overflow: hidden; /* Clip the bottom 100px */
    position: relative; /* Position context for absolute image */
}

/* SeedLegals hero image */
.case-hero-image-seedlegals {
    /* Image only - gradient comes from parent .case-hero.gradient-horizontal */
    background-image: url('images/index/SL-index.png');
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: transparent !important;
    /* Slide-up animation on page load */
    animation: slideUpFadeIn 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    opacity: 0;
    transform: translateY(60px);
    /* Use absolute positioning within relative container to maintain size */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 636px; /* Original full height (540px + 96px) */
}

/* SeedLegals hero container - clip bottom 100px while keeping image at original size */
.case-hero:has(.case-hero-image-seedlegals) .case-hero-inner {
    height: 536px; /* Visible height - clips bottom 100px (440px + 96px) */
    overflow: hidden; /* Clip the bottom 100px */
    position: relative; /* Position context for absolute image */
}

/* Slide-up animation keyframes */
@keyframes slideUpFadeIn {
    from {
        opacity: 0;
        transform: translateY(60px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Howsy hero image */
.case-hero-image-howsy {
    /* Image only - gradient comes from parent .case-hero.gradient-horizontal */
    background-image: url('images/index/howsy-index.png');
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: transparent !important;
    /* Slide-up animation on page load */
    animation: slideUpFadeIn 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    opacity: 0;
    /* Use absolute positioning within relative container to maintain size */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 636px; /* Original full height (540px + 96px) */
}

/* Howsy hero container - clip bottom 100px while keeping image at original size */
.case-hero:has(.case-hero-image-howsy) .case-hero-inner {
    height: 536px; /* Visible height - clips bottom 100px (440px + 96px) */
    overflow: hidden; /* Clip the bottom 100px */
    position: relative; /* Position context for absolute image */
}

/* ONMO hero image */
.case-hero-image-onmo {
    /* Transparent - gradient comes from parent .case-hero.gradient-horizontal */
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    position: relative; /* For absolute positioning of Lottie container */
    min-height: 636px; /* Ensure container has height (540px + 96px) */
    overflow: visible; /* Don't clip the animation */
}

/* Lottie animation container for overview page hero */
.case-hero-image-onmo .lottie-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 636px; /* Match hero inner height (540px + 96px) */
    display: flex;
    align-items: center; /* Center vertically */
    justify-content: center;
    z-index: 1;
    pointer-events: none;
    opacity: 1 !important;
    visibility: visible !important;
    background: transparent; /* Debug: make sure it's not hidden */
}

.case-hero-image-onmo .lottie-container svg,
.case-hero-image-onmo .lottie-container canvas {
    width: 80% !important; /* 20% smaller than original 100% */
    height: 80% !important;
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
    object-position: center bottom;
    display: block !important;
    position: relative;
    transform: translateY(-100px); /* Move 100px up from center */
    z-index: 2;
    opacity: 1 !important;
    visibility: visible !important;
}

.case-hero-image-results {
    /* Results & Reflection page header image */
    /* Image only - gradient comes from parent .case-hero.gradient-horizontal */
    background-image: url('images/onmo/08-results-reflection/01-results-reflection.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: transparent !important;
    /* Full width and height to cover container */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Behind header content */
}

.case-hero-image-design-ops {
    /* Design Ops page header image */
    /* Image only - gradient comes from parent .case-hero.gradient-horizontal */
    background-image: url('images/onmo/07-design-ops/01-design-ops.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: transparent !important;
    /* Full width and height to cover container */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Behind header content */
}

.case-hero-image-design-foundations {
    /* Design Foundations page header image */
    /* Image only - gradient comes from parent .case-hero.gradient-horizontal */
    background-image: url('images/onmo/06-design-foundations/00-design-foundations-hero.png');
    background-size: 580px auto;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: transparent !important;
    transform: scale(1) translateY(-128px); /* 1x scale, start 128px above, will end 72px above */
    transform-origin: center center;
    /* Slide-up animation on page load */
    animation: slideUpFadeInDesignFoundations 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    opacity: 0;
    /* Use absolute positioning within relative container to maintain size */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 636px; /* Original full height (540px + 96px) */
}

.case-hero-image-new-web {
    /* Website Redesign page header image */
    /* Image only - gradient comes from parent .case-hero.gradient-horizontal */
    background-image: url('images/onmo/05-web/01-web-header.png');
    background-size: contain;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-color: transparent !important;
    transform: scale(0.805) translateY(-40px); /* 15% bigger than 0.7, start 40px above, will end 72px above */
    transform-origin: center bottom;
    /* Slide-up animation on page load (bottom to top, opposite of app redesign) */
    animation: slideUpFadeInNewWeb 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    opacity: 0;
    /* Use absolute positioning within relative container to maintain size */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 636px; /* Original full height (540px + 96px) */
}

.case-hero-image-experience-lab {
    /* Experience Lab page header image */
    /* Image only - gradient comes from parent .case-hero.gradient-horizontal */
    background-image: url('images/onmo/04-ux/00-UXlab-hero.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: transparent !important;
    /* Full width and height to cover container */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Behind header content */
}

.case-hero-image-new-app {
    /* App Redesign page header image */
    /* Image only - gradient comes from parent .case-hero.gradient-horizontal */
    background-image: url('images/onmo/03-app/onmo-app-header.png');
    background-size: contain;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-color: transparent !important;
    transform: scale(0.805) translateY(-128px); /* 15% bigger than 0.7, start 128px above (higher), will end 72px above (lower) */
    transform-origin: center center;
    /* Slide-down animation on page load (top to bottom) */
    animation: slideDownFadeInNewApp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    opacity: 0;
    /* Use absolute positioning within relative container to maintain size */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 636px; /* Original full height (540px + 96px) */
}

/* Slide-down animation keyframes for App Redesign (top to bottom, includes scale) */
@keyframes slideDownFadeInNewApp {
    from {
        opacity: 0;
        transform: scale(0.805) translateY(-128px); /* Start 128px above (higher position) */
    }
    to {
        opacity: 1;
        transform: scale(0.805) translateY(-72px); /* End 72px above (lower position, slides down) */
    }
}

/* Slide-up animation keyframes for Web Redesign (bottom to top, opposite of app redesign, includes scale) */
@keyframes slideUpFadeInNewWeb {
    from {
        opacity: 0;
        transform: scale(0.805) translateY(-40px); /* Start 40px above (lower position) */
    }
    to {
        opacity: 1;
        transform: scale(0.805) translateY(-72px); /* End 72px above (higher position, slides up) */
    }
}

/* App Redesign hero container - clip bottom 100px while keeping image at original size */
.case-hero:has(.case-hero-image-new-app) .case-hero-inner {
    height: 536px; /* Visible height - clips bottom 100px (440px + 96px) */
    overflow: hidden; /* Clip the bottom 100px */
    position: relative; /* Position context for absolute image */
}

/* Design Foundations hero container - clip bottom 100px while keeping image at original size */
.case-hero:has(.case-hero-image-design-foundations) .case-hero-inner {
    height: 536px; /* Visible height - clips bottom 100px (440px + 96px) */
    overflow: hidden; /* Clip the bottom 100px */
    position: relative; /* Position context for absolute image */
}

/* Web Redesign hero container - clip bottom 100px while keeping image at original size */
.case-hero:has(.case-hero-image-new-web) .case-hero-inner {
    height: 536px; /* Visible height - clips bottom 100px (440px + 96px) */
    overflow: hidden; /* Clip the bottom 100px */
    position: relative; /* Position context for absolute image */
}


/* Video hero section - full width, replaces gradient container */
.case-hero-video-section {
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    background-color: var(--color-black); /* Fallback background */
    margin-bottom: 0; /* No bottom margin */
}

/* When header overlays video, add padding-top to main content to account for header height */
body:has(.case-hero-video-section) .main-content {
    padding-top: 72px; /* Account for header height when it overlays video */
}

.case-hero-video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover; /* Fill the container while maintaining aspect ratio */
    margin: 0;
    padding: 0;
}

/* Header overlay on video - REMOVED - using rules above instead */

/* ============================================
   CASE STUDY – CONTENT
   ============================================ */
.case-main > * {
    grid-column: 2 / 9;
}

/* ============================================
   CONSISTENT SPACING SYSTEM
   ============================================ */
/* Define spacing tokens - Use these for consistent spacing between elements */
:root {
    /* Spacing Tokens */
    --spacing-xs: 8px;
    --spacing-sm: 20px;
    --spacing-md: 24px;
    --spacing-body-to-media: 32px; /* Spacing between body and image/video */
    --spacing-lg: 40px;
    --spacing-xl: 52px;
    --spacing-2xl: 72px;
    --spacing-3xl: 96px;
    --spacing-4xl: 120px;
    --spacing-5xl: 150px;
    
    /* Legacy spacing values (for backward compatibility) */
    --spacing-title-to-small-title: var(--spacing-md);
    --spacing-title-to-body: var(--spacing-xl);
    --spacing-small-title-to-body: var(--spacing-sm);
    --spacing-section-to-section: var(--spacing-2xl);
    --spacing-body-to-body: var(--spacing-md);
}

/* RESET: case-intro - Remove all automatic spacing for new token system */
.case-intro {
    margin: 0 !important; /* Reset all margins */
    padding: 0 !important; /* Reset all padding */
    margin-bottom: 0 !important; /* Reset margin-bottom - spacing will be controlled by new token system */
}

/* Case 1: Title directly followed by small-title (both in case-intro) - e.g. Rebranding, New App */
.case-intro .project-title + .small-title {
    margin-top: 0;
    padding-top: var(--spacing-title-to-small-title);
}

/* Case 2: Title in case-intro, small-title in separate section - e.g. Experience Lab */
/* RESET: Disabled automatic spacing - will be controlled by new token system */
/* Exclude Design Ops and Design Foundations - they have their own rules */
/*
.case-intro:has(+ .case-content-section .small-title):not(.case-intro-design-ops):not(.case-intro-design-foundations):not(.case-intro-new-web) {
    margin-bottom: var(--spacing-title-to-small-title) !important;
}

.case-intro + .case-content-section:has(.small-title) {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
*/

/* Design Ops page - Global ONMO rule: 40px spacing between title and first section */
.case-intro-design-ops:has(+ .case-content-section .small-title) {
    margin: 0 !important;
    padding: 0 !important;
    margin-bottom: var(--spacing-lg) !important; /* 40px - global ONMO rule */
}

.case-intro-design-ops + .case-content-section:has(.small-title) {
    margin: 0 !important;
    padding: 0 !important;
    padding-top: 0 !important; /* Spacing handled by intro margin-bottom */
}

/* Design Foundations page - Global ONMO rule: 40px spacing between title and first section */
.case-intro-design-foundations:has(+ .case-content-section .small-title) {
    margin: 0 !important;
    padding: 0 !important;
    margin-bottom: var(--spacing-lg) !important; /* 40px - global ONMO rule */
}

.case-intro-new-web:has(+ .case-content-section .small-title) {
    margin: 0 !important;
    padding: 0 !important;
    margin-bottom: var(--spacing-lg) !important; /* 40px - global ONMO rule */
}

.case-intro-design-foundations + .case-content-section:has(.small-title) {
    margin: 0 !important;
    padding: 0 !important;
    padding-top: 0 !important; /* Spacing handled by intro margin-bottom */
}

/* Case 3: Title in case-intro, body in separate section (no small-title) - e.g. Results */
/* RESET: Disabled automatic spacing - will be controlled by new token system */
/*
.case-intro:not(:has(.small-title)):has(+ .case-content-section .body):not(.case-intro-results):not(.case-intro-design-ops):not(.case-intro-design-foundations) {
    margin-bottom: var(--spacing-title-to-body) !important;
    padding-bottom: 0 !important;
}

.case-intro:has(+ .case-content-section .body):not(:has(+ .case-content-section .small-title)):not(.case-intro-results):not(.case-intro-design-ops):not(.case-intro-design-foundations) {
    margin-bottom: var(--spacing-title-to-body) !important;
    padding-bottom: 0 !important;
}

.case-intro:not(.case-intro-results):not(.case-intro-design-ops):not(.case-intro-design-foundations) + .case-content-section:has(.body):not(:has(.small-title)) {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
*/

/* Force reset any inherited margins/padding on project-title in case-intro */
.case-intro .project-title {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Nuclear option: Direct spacing control for Results page pattern */
.case-intro:not(:has(.small-title)) + .case-content-section:not(:has(.small-title)) {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Specific rule for Results page using class - REMOVED, handled by rules below */

/* When case-intro is followed by a gallery, use 20px gap */
.case-intro:has(+ .case-content-section .case-image-gallery) {
    margin-bottom: 20px;
}

/* Ensure gallery section after case-intro spans correctly */
.case-intro + .case-content-section:has(.case-image-gallery) {
    grid-column: 2 / 9 !important;
}

/* Gap between main title and small title in case-intro */
.case-intro .project-title + .small-title {
    margin-top: 0;
    padding-top: 24px;
}

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

/* Reusable case highlighted content section */
.case-highlighted-content {
    grid-column: 1 / -1 !important; /* span full width, override case-main > * rule */
    margin-bottom: 0 !important; /* Spacing controlled by spacing tokens */
    background: var(--gradient-horizontal);
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), var(--grid-column-width));
    gap: var(--grid-gutter);
    padding: 96px 0; /* vertical padding for the gradient area */
}

.case-highlighted-content > * {
    grid-column: 2 / 11; /* content spans columns 2-11 */
}

.case-highlighted-content .small-title {
    margin-bottom: 24px;
}

.case-highlighted-content .body {
    margin-bottom: 24px;
}

/* Center-Aligned Highlighted Content Section */
.case-highlighted-content-centered {
    grid-column: 1 / -1 !important; /* span full width, override case-main > * rule */
    margin-bottom: 0 !important; /* Spacing controlled by spacing tokens */
    background: var(--gradient-horizontal);
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), var(--grid-column-width));
    gap: var(--grid-gutter);
    padding: 60px 0 52px 0; /* vertical padding for the gradient area */
    text-align: center;
}

/* Spacing token for highlighted box - use margin-top since it spans full width */
.case-highlighted-content-centered.spacing-token-2xl {
    margin: 0 !important;
    margin-top: var(--spacing-2xl) !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    padding-top: 52px !important;
    padding-bottom: 52px !important;
}

/* When followed by another section, reduce top padding to match bottom (move padding to first child) */
.case-content-section.case-highlighted-content-centered.spacing-token-2xl:has(+ .case-content-section),
.case-content-section.case-highlighted-content.case-highlighted-content-centered.spacing-token-2xl:has(+ .case-content-section) {
    padding-top: 0 !important;
}

/* Add padding-top to first child when box is followed by another section to maintain internal spacing */
.case-content-section.case-highlighted-content-centered.spacing-token-2xl:has(+ .case-content-section) > *:first-child,
.case-content-section.case-highlighted-content.case-highlighted-content-centered.spacing-token-2xl:has(+ .case-content-section) > *:first-child,
main.case-main .case-content-section.case-highlighted-content-centered.spacing-token-2xl:has(+ .case-content-section) > *:first-child,
main.case-main .case-content-section.case-highlighted-content.case-highlighted-content-centered.spacing-token-2xl:has(+ .case-content-section) > *:first-child,
section.case-content-section.case-highlighted-content-centered.spacing-token-2xl:has(+ .case-content-section) > *:first-child,
section.case-content-section.case-highlighted-content.case-highlighted-content-centered.spacing-token-2xl:has(+ .case-content-section) > *:first-child {
    padding-top: 52px !important;
}

/* Spacing token for regular highlighted content box */
.case-highlighted-content.spacing-token-2xl {
    margin: 0 !important;
    margin-top: var(--spacing-2xl) !important;
    margin-bottom: var(--spacing-2xl) !important;
    padding: 0 !important;
    padding-top: 96px !important;
    padding-bottom: 96px !important;
}

/* When followed by another section, move padding to first and last child for even spacing */
.case-content-section.case-highlighted-content.spacing-token-2xl:has(+ .case-content-section),
section.case-highlighted-content.spacing-token-2xl:has(+ .case-content-section) {
    margin-bottom: 0 !important; /* Remove margin-bottom to prevent double spacing */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Add padding-top to first child when box is followed by another section */
.case-content-section.case-highlighted-content.spacing-token-2xl:has(+ .case-content-section) > *:first-child,
section.case-highlighted-content.spacing-token-2xl:has(+ .case-content-section) > *:first-child {
    padding-top: 96px !important;
}

/* Add padding-bottom to last child when box is followed by another section */
.case-content-section.case-highlighted-content.spacing-token-2xl:has(+ .case-content-section) > *:last-child,
section.case-highlighted-content.spacing-token-2xl:has(+ .case-content-section) > *:last-child {
    padding-bottom: 96px !important;
}

.case-highlighted-content-centered > * {
    grid-column: 2 / 11; /* content spans columns 2-11 */
    text-align: center;
    margin: 0 !important;
    padding: 0 !important;
}

.case-highlighted-content-centered .small-title {
    margin-bottom: 0 !important;
}

.case-highlighted-content-centered .body {
    margin-bottom: 0 !important;
}

/* Left-aligned highlighted content box */
.case-highlighted-content-left,
.case-content-section.case-highlighted-content-centered.case-highlighted-content-left {
    text-align: left !important;
}

.case-highlighted-content-centered .case-highlighted-contact-link {
    display: flex;
    justify-content: center;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
}

.case-highlighted-content-centered .contact-link {
    color: var(--color-black);
}

.case-highlighted-content-centered .copy-link-btn {
    color: var(--color-black);
}

/* Left-aligned highlighted content section */
.case-highlighted-content-left > * {
    text-align: left !important;
}

/* List styling for highlighted content section */
.case-highlighted-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.case-highlighted-list li {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 24px;
}

.case-highlighted-list li:last-child {
    margin-bottom: 0;
}

.case-list-arrow {
    flex-shrink: 0;
}

/* Side-by-side highlighted lists */
.case-highlighted-lists-side-by-side {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    width: 100%;
}

.case-highlighted-list-group {
    display: flex;
    flex-direction: column;
}

.case-highlighted-list-group .small-title {
    margin-bottom: 24px;
}

/* Regular case content section - RESET: Remove all margins and padding for new token system */
.case-content-section {
    margin: 0 !important; /* Remove all margins */
    padding: 0 !important; /* Reset all padding - spacing will be controlled by new token system */
    padding-top: 0 !important; /* Reset padding-top - no automatic spacing */
}

/* RESET: Overview page - Remove all margins and padding from all sections for clean slate */
.case-main-overview .case-content-section,
.case-main-overview .case-text-image-section {
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Reset highlighted content sections on overview page */
.case-main-overview .case-highlighted-content,
.case-main-overview .case-highlighted-content-centered {
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Reset case-intro on overview page */
.case-main-overview .case-intro {
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Reset spacing on structural elements within sections on overview page */
.case-main-overview .case-content-section .body,
.case-main-overview .case-content-section .body-large,
.case-main-overview .case-content-section .small-title,
.case-main-overview .case-text-image-section .body,
.case-main-overview .case-text-image-section .small-title,
.case-main-overview .case-highlighted-content .body,
.case-main-overview .case-highlighted-content .small-title,
.case-main-overview .case-highlighted-content-centered .body,
.case-main-overview .case-intro .body,
.case-main-overview .case-intro .small-title {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Restore standard spacing after intro title on overview page */
.case-main-overview .case-intro .project-title {
    margin-bottom: var(--spacing-title-to-body) !important; /* 52px standard spacing after title */
}

/* ============================================
   NATWEST PAGE - RESET SPACING
   ============================================ */

/* Reset all spacing on content sections on NatWest page */
.case-main-natwest .case-content-section,
.case-main-natwest .case-text-image-section {
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Reset case-intro on NatWest page */
.case-main-natwest .case-intro {
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Reset spacing on structural elements within sections on NatWest page */
.case-main-natwest .case-content-section .body,
.case-main-natwest .case-content-section .body-large,
.case-main-natwest .case-content-section .small-title,
.case-main-natwest .case-text-image-section .body,
.case-main-natwest .case-text-image-section .small-title,
.case-main-natwest .case-intro .body,
.case-main-natwest .case-intro .small-title {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Restore standard spacing after intro title on NatWest page */
.case-main-natwest .case-intro .project-title {
    margin-bottom: var(--spacing-title-to-body) !important; /* 52px standard spacing after title */
}

/* Add 32px spacing before small-title heading on NatWest page, but reduce if it's the first element */
.case-main-natwest .case-content-section .small-title {
    margin-top: 32px !important; /* 32px spacing before heading */
}

/* If small-title is the first element in content section, reduce spacing to match regular body spacing */
.case-main-natwest .case-content-section > .small-title:first-child {
    margin-top: 0 !important; /* No extra spacing if it's the first element */
}

/* Add 20px spacing before "Please get in touch" paragraph on NatWest page */
.case-main-natwest .case-content-section .case-responsibilities + p.body {
    margin-top: var(--spacing-sm) !important; /* 20px spacing before paragraph */
}

/* ============================================
   APP REDESIGN PAGE - RESET SPACING
   ============================================ */

/* Reset case-intro on new-app page */
.case-main-new-app .case-intro {
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Reset spacing on structural elements within sections on new-app page */
.case-main-new-app .case-content-section .body,
.case-main-new-app .case-content-section .body-large,
.case-main-new-app .case-content-section .small-title,
.case-main-new-app .case-text-image-section .body,
.case-main-new-app .case-text-image-section .small-title,
.case-main-new-app .case-highlighted-content .body,
.case-main-new-app .case-highlighted-content-centered .body,
.case-main-new-app .case-intro .body,
.case-main-new-app .case-intro .small-title {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Restore spacing for titles in highlighted content box on new-app page */
.case-main-new-app .case-highlighted-content .small-title {
    margin-bottom: var(--spacing-md) !important; /* 24px spacing after main title */
}

.case-main-new-app .case-highlighted-list-group .small-title {
    margin-bottom: var(--spacing-md) !important; /* 24px spacing after column titles (Objectives/Challenges) */
}

/* Standard spacing between body-large and following highlighted content box on new-app page */
/* Body-large has 40px padding-top, so box needs 32px margin-top to total 72px standard spacing */
main.case-main-new-app section.case-content-section:has(p.body-large:only-child) + section.case-content-section.case-highlighted-content-centered.spacing-token-2xl,
.case-main-new-app section.case-content-section:has(p.body-large:only-child) + section.case-content-section.case-highlighted-content-centered.spacing-token-2xl,
main.case-main-new-app section.case-content-section:has(p.body-large) + section.case-content-section.case-highlighted-content-centered.spacing-token-2xl,
.case-main-new-app section.case-content-section:has(p.body-large) + section.case-content-section.case-highlighted-content-centered.spacing-token-2xl {
    margin-top: 32px !important; /* 32px - to make total 72px with body-large's 40px (40px + 32px = 72px) */
    padding-top: 52px !important; /* Keep internal padding */
}

/* Ensure equal top and bottom padding for highlighted content box on new-app page */
main.case-main-new-app .case-content-section.case-highlighted-content-centered.spacing-token-2xl:not(:has(+ .case-content-section)),
.case-main-new-app .case-content-section.case-highlighted-content-centered.spacing-token-2xl:not(:has(+ .case-content-section)),
main.case-main-new-app .case-content-section.case-highlighted-content-centered.spacing-token-2xl:last-child,
.case-main-new-app .case-content-section.case-highlighted-content-centered.spacing-token-2xl:last-child {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
}

/* Restore standard spacing after intro title on new-app page - reduced for better spacing */
.case-main-new-app .case-intro .project-title {
    margin-bottom: var(--spacing-lg) !important; /* 40px spacing after title - reduced from 52px */
}

/* Remove spacing from first section after intro on new-app page - must be very specific */
main.case-main-new-app .case-intro + .case-content-section.spacing-token-2xl,
.case-main-new-app .case-intro + section.case-content-section.spacing-token-2xl,
.case-main-new-app .case-intro + .case-content-section.spacing-token-2xl,
main.case-main-new-app section.case-intro + section.case-content-section.spacing-token-2xl {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Override the spacing-token-2xl class directly for first section on new-app page */
main.case-main-new-app .case-intro + .spacing-token-2xl,
.case-main-new-app .case-intro + .spacing-token-2xl {
    padding-top: 0 !important;
}


/* Reset case-text-image-section globally */
.case-text-image-section {
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* RESET: Remove all automatic spacing rules - spacing will be controlled by new token system */
/* Global ONMO rule: 72px spacing between all sections (except first section after intro) - DISABLED FOR RESET */
/*
.case-content-section:not(.case-intro + .case-content-section):not(.spacing-token-xs):not(.spacing-token-sm):not(.spacing-token-md):not(.spacing-token-lg):not(.spacing-token-xl):not(.spacing-token-2xl):not(.spacing-token-3xl):not(.spacing-token-4xl):not(.spacing-token-5xl) {
    padding-top: var(--spacing-2xl) !important;
}
*/

/* First section after intro gets no top padding (spacing handled by intro rules) - DISABLED FOR RESET */
/*
.case-intro:not(.case-intro-results):not(.case-intro-design-ops):not(.case-intro-design-foundations) + .case-content-section:not(.spacing-token-xs):not(.spacing-token-sm):not(.spacing-token-md):not(.spacing-token-lg):not(.spacing-token-xl):not(.spacing-token-2xl):not(.spacing-token-3xl):not(.spacing-token-4xl):not(.spacing-token-5xl) {
    padding-top: 0 !important;
}
*/

/* Results page spacing tokens - must override base rule */
.case-intro-results + .case-content-section.spacing-token-lg,
main.case-main .case-intro-results + .case-content-section.spacing-token-lg,
body .case-intro-results + .case-content-section.spacing-token-lg {
    padding-top: 24px !important;
}

/* Results page - remove all automatic spacing for testing */
.case-intro-results {
    margin: 0 !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Design Ops page - base reset, spacing controlled by specific :has() rules */
.case-intro-design-ops {
    margin: 0 !important;
    padding: 0 !important;
    /* margin-bottom controlled by :has(+ .case-content-section .small-title) rule above */
}

/* Design Foundations page - base reset, spacing controlled by tokens */
.case-intro-design-foundations {
    margin: 0 !important;
    padding: 0 !important;
}

/* Design Foundations page - remove all margins/paddings from content elements (all sections, not just first) */
.case-intro-design-foundations ~ .case-content-section * {
    margin: 0 !important;
    padding: 0 !important;
}

/* Re-apply spacing between small-title and body on Design Foundations page - 20px always (all sections) */
.case-intro-design-foundations ~ .case-content-section .small-title + .body {
    margin: 0 !important;
    padding: 0 !important;
    margin-top: var(--spacing-sm) !important; /* 20px - always */
}

/* Re-apply spacing tokens to sections on Design Foundations page */
.case-intro-design-foundations + .case-content-section.spacing-token-xs { 
    margin: 0 !important;
    padding: 0 !important;
    padding-top: var(--spacing-xs) !important; 
}
.case-intro-design-foundations + .case-content-section.spacing-token-sm { 
    margin: 0 !important;
    padding: 0 !important;
    padding-top: var(--spacing-sm) !important; 
}
.case-intro-design-foundations + .case-content-section.spacing-token-md { 
    margin: 0 !important;
    padding: 0 !important;
    padding-top: var(--spacing-md) !important; 
}
.case-intro-design-foundations + .case-content-section.spacing-token-lg { 
    margin: 0 !important;
    padding: 0 !important;
    padding-top: var(--spacing-lg) !important; 
}
.case-intro-design-foundations + .case-content-section.spacing-token-xl { 
    margin: 0 !important;
    padding: 0 !important;
    padding-top: var(--spacing-xl) !important; 
}
.case-intro-design-foundations + .case-content-section.spacing-token-2xl { 
    margin: 0 !important;
    padding: 0 !important;
    padding-top: var(--spacing-2xl) !important; 
}
.case-intro-design-foundations + .case-content-section.spacing-token-3xl { 
    margin: 0 !important;
    padding: 0 !important;
    padding-top: var(--spacing-3xl) !important; 
}
.case-intro-design-foundations + .case-content-section.spacing-token-4xl { 
    margin: 0 !important;
    padding: 0 !important;
    padding-top: var(--spacing-4xl) !important; 
}
.case-intro-design-foundations + .case-content-section.spacing-token-5xl { 
    margin: 0 !important;
    padding: 0 !important;
    padding-top: var(--spacing-5xl) !important; 
}

/* Design Foundations page - first section after intro gets no top padding (spacing handled by intro rules) */
.case-intro-design-foundations + .case-content-section:not(.spacing-token-xs):not(.spacing-token-sm):not(.spacing-token-md):not(.spacing-token-lg):not(.spacing-token-xl):not(.spacing-token-2xl):not(.spacing-token-3xl):not(.spacing-token-4xl):not(.spacing-token-5xl) {
    margin: 0 !important;
    margin-bottom: 0 !important; /* Explicitly prevent any margin-bottom */
    padding: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Design Foundations page - subsequent sections use global 72px rule */
/* First section after intro gets spacing from intro margin-bottom (40px), so second section needs 72px */
/* However, to compensate for extra visual space, we reduce by 12px (72px - 12px = 60px) */
.case-intro-design-foundations + .case-content-section ~ .case-content-section:not(.spacing-token-xs):not(.spacing-token-sm):not(.spacing-token-md):not(.spacing-token-lg):not(.spacing-token-xl):not(.spacing-token-2xl):not(.spacing-token-3xl):not(.spacing-token-4xl):not(.spacing-token-5xl) {
    margin: 0 !important;
    margin-top: 0 !important; /* Explicitly prevent margin-top */
    padding: 0 !important;
    padding-top: 60px !important; /* 60px - reduced from 72px to compensate for extra visual space */
}

.case-intro-results + .case-content-section:not(.spacing-token-xs):not(.spacing-token-sm):not(.spacing-token-md):not(.spacing-token-lg):not(.spacing-token-xl):not(.spacing-token-2xl):not(.spacing-token-3xl):not(.spacing-token-4xl):not(.spacing-token-5xl) {
    margin: 0 !important;
    padding: 0 !important;
    padding-top: 0 !important;
}

/* Allow spacing tokens to override on Results page - must come after the reset */
.case-intro-results + .case-content-section.spacing-token-xs { 
    margin: 0 !important;
    padding: 0 !important;
    padding-top: var(--spacing-xs) !important; 
}
.case-intro-results + .case-content-section.spacing-token-sm { 
    margin: 0 !important;
    padding: 0 !important;
    padding-top: var(--spacing-sm) !important; 
}
.case-intro-results + .case-content-section.spacing-token-md { 
    margin: 0 !important;
    padding: 0 !important;
    padding-top: var(--spacing-md) !important; 
}
.case-intro-results + .case-content-section.spacing-token-lg { 
    margin: 0 !important;
    padding: 0 !important;
    padding-top: 24px !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.case-intro-results + .case-content-section.spacing-token-xl { 
    margin: 0 !important;
    padding: 0 !important;
    padding-top: var(--spacing-xl) !important; 
}
.case-intro-results + .case-content-section.spacing-token-2xl { 
    margin: 0 !important;
    padding: 0 !important;
    padding-top: var(--spacing-2xl) !important; 
}
.case-intro-results + .case-content-section.spacing-token-3xl { 
    margin: 0 !important;
    padding: 0 !important;
    padding-top: var(--spacing-3xl) !important; 
}
.case-intro-results + .case-content-section.spacing-token-4xl { 
    margin: 0 !important;
    padding: 0 !important;
    padding-top: var(--spacing-4xl) !important; 
}
.case-intro-results + .case-content-section.spacing-token-5xl { 
    margin: 0 !important;
    padding: 0 !important;
    padding-top: var(--spacing-5xl) !important; 
}

.case-intro-results .project-title {
    margin: 0 !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.case-intro-results + .case-content-section p.body {
    margin: 0 !important;
    padding: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 1.5em !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.case-intro-results + .case-content-section p.body:last-of-type {
    margin-bottom: 0 !important;
}

/* Design Ops page - remove all body spacing */
.case-intro-design-ops + .case-content-section p.body {
    margin: 0 !important;
    padding: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 1.5em !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.case-intro-design-ops + .case-content-section p.body:last-of-type {
    margin-bottom: 0 !important;
}

/* Design Ops page - first section after intro gets no top padding (spacing handled by intro rules) */
.case-intro-design-ops + .case-content-section:not(.spacing-token-xs):not(.spacing-token-sm):not(.spacing-token-md):not(.spacing-token-lg):not(.spacing-token-xl):not(.spacing-token-2xl):not(.spacing-token-3xl):not(.spacing-token-4xl):not(.spacing-token-5xl) {
    margin: 0 !important;
    padding: 0 !important;
    padding-top: 0 !important;
}

/* New Web page - first section after intro gets no top padding (spacing handled by intro rules) */
.case-intro-new-web + .case-content-section:not(.spacing-token-xs):not(.spacing-token-sm):not(.spacing-token-md):not(.spacing-token-lg):not(.spacing-token-xl):not(.spacing-token-2xl):not(.spacing-token-3xl):not(.spacing-token-4xl):not(.spacing-token-5xl) {
    margin: 0 !important;
    padding: 0 !important;
    padding-top: 0 !important;
}

/* Design Ops page - subsequent sections use global 72px rule */
.case-intro-design-ops + .case-content-section ~ .case-content-section:not(.spacing-token-xs):not(.spacing-token-sm):not(.spacing-token-md):not(.spacing-token-lg):not(.spacing-token-xl):not(.spacing-token-2xl):not(.spacing-token-3xl):not(.spacing-token-4xl):not(.spacing-token-5xl) {
    margin: 0 !important;
    padding: 0 !important;
    padding-top: var(--spacing-2xl) !important; /* 72px - global ONMO rule */
}

/* New Web page - subsequent sections use global 72px rule */
.case-intro-new-web + .case-content-section ~ .case-content-section:not(.spacing-token-xs):not(.spacing-token-sm):not(.spacing-token-md):not(.spacing-token-lg):not(.spacing-token-xl):not(.spacing-token-2xl):not(.spacing-token-3xl):not(.spacing-token-4xl):not(.spacing-token-5xl) {
    margin: 0 !important;
    padding: 0 !important;
    padding-top: var(--spacing-2xl) !important; /* 72px - global ONMO rule */
}

/* Design Ops page - remove all margins/paddings from content elements */
.case-intro-design-ops + .case-content-section * {
    margin: 0 !important;
    padding: 0 !important;
}

/* New Web page - remove all margins/paddings from content elements (all sections) */
/* Exception: paragraphs in first two sections need margin-bottom for spacing */
/* Only reset specific elements, not everything */
.case-intro-new-web ~ .case-content-section > .small-title,
.case-intro-new-web ~ .case-content-section > .body-large,
.case-intro-new-web ~ .case-content-section > .case-image,
.case-intro-new-web ~ .case-content-section > .separator,
.case-intro-new-web ~ .case-content-section > .case-highlighted-content,
.case-intro-new-web ~ .case-content-section > .case-highlighted-list {
    margin: 0 !important;
    padding: 0 !important;
}

/* Re-apply spacing between small-title and body on Design Ops page - 20px always */
.case-intro-design-ops + .case-content-section .small-title + .body {
    margin: 0 !important;
    padding: 0 !important;
    margin-top: var(--spacing-sm) !important; /* 20px - always */
}

/* Re-apply spacing between small-title and body on New Web page - 20px always */
.case-intro-new-web + .case-content-section .small-title + .body {
    margin: 0 !important;
    padding: 0 !important;
    margin-top: var(--spacing-sm) !important; /* 20px - always */
}

/* Add spacing between body paragraphs on New Web page - all sections */
/* Must override the general reset - use :not(:last-of-type) to exclude last paragraph */
.case-intro-new-web ~ .case-content-section p.body:not(:last-of-type) {
    margin-bottom: 1.5em !important;
}

/* Add spacing between body-large paragraphs on New Web page */
.case-intro-new-web ~ .case-content-section p.body-large:not(:last-of-type) {
    margin-bottom: 1.5em !important;
}

/* Re-apply spacing tokens to sections only */
.case-intro-design-ops + .case-content-section.spacing-token-xs { 
    margin: 0 !important;
    padding: 0 !important;
    padding-top: var(--spacing-xs) !important; 
}
.case-intro-design-ops + .case-content-section.spacing-token-sm { 
    margin: 0 !important;
    padding: 0 !important;
    padding-top: var(--spacing-sm) !important; 
}
.case-intro-design-ops + .case-content-section.spacing-token-md { 
    margin: 0 !important;
    padding: 0 !important;
    padding-top: var(--spacing-md) !important; 
}
.case-intro-design-ops + .case-content-section.spacing-token-lg { 
    margin: 0 !important;
    padding: 0 !important;
    padding-top: var(--spacing-lg) !important; 
}
.case-intro-design-ops + .case-content-section.spacing-token-xl { 
    margin: 0 !important;
    padding: 0 !important;
    padding-top: var(--spacing-xl) !important; 
}
.case-intro-design-ops + .case-content-section.spacing-token-2xl { 
    margin: 0 !important;
    padding: 0 !important;
    padding-top: var(--spacing-2xl) !important; 
}
.case-intro-design-ops + .case-content-section.spacing-token-3xl { 
    margin: 0 !important;
    padding: 0 !important;
    padding-top: var(--spacing-3xl) !important; 
}
.case-intro-design-ops + .case-content-section.spacing-token-4xl { 
    margin: 0 !important;
    padding: 0 !important;
    padding-top: var(--spacing-4xl) !important; 
}
.case-intro-design-ops + .case-content-section.spacing-token-5xl { 
    margin: 0 !important;
    padding: 0 !important;
    padding-top: var(--spacing-5xl) !important; 
}

/* Re-apply spacing tokens to sections on New Web page */
.case-intro-new-web + .case-content-section.spacing-token-xs { 
    margin: 0 !important;
    padding: 0 !important;
    padding-top: var(--spacing-xs) !important; 
}
.case-intro-new-web + .case-content-section.spacing-token-sm { 
    margin: 0 !important;
    padding: 0 !important;
    padding-top: var(--spacing-sm) !important; 
}
.case-intro-new-web + .case-content-section.spacing-token-md { 
    margin: 0 !important;
    padding: 0 !important;
    padding-top: var(--spacing-md) !important; 
}
.case-intro-new-web + .case-content-section.spacing-token-lg { 
    margin: 0 !important;
    padding: 0 !important;
    padding-top: var(--spacing-lg) !important; 
}
.case-intro-new-web + .case-content-section.spacing-token-xl { 
    margin: 0 !important;
    padding: 0 !important;
    padding-top: var(--spacing-xl) !important; 
}
.case-intro-new-web + .case-content-section.spacing-token-2xl { 
    margin: 0 !important;
    padding: 0 !important;
    padding-top: var(--spacing-2xl) !important; 
}
.case-intro-new-web + .case-content-section ~ .case-content-section.spacing-token-2xl,
.case-intro-new-web + .case-content-section ~ .case-content-section.case-highlighted-content-centered.spacing-token-2xl {
    margin: 0 !important;
    padding: 0 !important;
    padding-top: var(--spacing-2xl) !important;
}
.case-intro-new-web + .case-content-section.spacing-token-3xl { 
    margin: 0 !important;
    padding: 0 !important;
    padding-top: var(--spacing-3xl) !important; 
}
.case-intro-new-web + .case-content-section ~ .case-content-section.spacing-token-3xl {
    margin: 0 !important;
    padding: 0 !important;
    padding-top: var(--spacing-3xl) !important;
}
.case-intro-new-web + .case-content-section.spacing-token-4xl { 
    margin: 0 !important;
    padding: 0 !important;
    padding-top: var(--spacing-4xl) !important; 
}
.case-intro-new-web + .case-content-section.spacing-token-5xl { 
    margin: 0 !important;
    padding: 0 !important;
    padding-top: var(--spacing-5xl) !important; 
}

/* Sections with spacing tokens override automatic spacing */
.case-content-section.spacing-token-xs { 
    margin: 0 !important;
    padding: 0 !important;
    padding-top: var(--spacing-xs) !important; 
}
.case-content-section.spacing-token-sm { 
    margin: 0 !important;
    padding: 0 !important;
    padding-top: var(--spacing-sm) !important; 
}
.case-content-section.spacing-token-md { 
    margin: 0 !important;
    padding: 0 !important;
    padding-top: var(--spacing-md) !important; 
}
.case-content-section.spacing-token-lg { 
    margin: 0 !important;
    padding: 0 !important;
    padding-top: var(--spacing-lg) !important; 
}
.case-content-section.spacing-token-xl { 
    margin: 0 !important;
    padding: 0 !important;
    padding-top: var(--spacing-xl) !important; 
}
.case-content-section.spacing-token-2xl:not(.case-highlighted-content):not(.case-highlighted-content-centered):not(.case-content-section.case-highlighted-content-centered.spacing-token-2xl + .case-content-section) { 
    margin: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    padding-top: var(--spacing-2xl) !important; 
}

/* Override first section spacing on new-app page - must come after general rule */
main.case-main-new-app .case-intro + .case-content-section.spacing-token-2xl:not(.case-highlighted-content):not(.case-highlighted-content-centered),
.case-main-new-app .case-intro + .case-content-section.spacing-token-2xl:not(.case-highlighted-content):not(.case-highlighted-content-centered),
main.case-main-new-app section.case-intro + section.case-content-section.spacing-token-2xl:not(.case-highlighted-content):not(.case-highlighted-content-centered),
.case-main-new-app section.case-intro + section.case-content-section.spacing-token-2xl:not(.case-highlighted-content):not(.case-highlighted-content-centered) {
    padding-top: 0 !important;
}

/* Also override the base spacing-token-2xl class for first section */
main.case-main-new-app .case-intro + section.spacing-token-2xl,
.case-main-new-app .case-intro + section.spacing-token-2xl {
    padding-top: 0 !important;
}

/* Override spacing for body-large sections on overview page - must come after general rule */
main.case-main-overview section.case-content-section.spacing-token-2xl:has(p.body-large:only-child):not(.case-highlighted-content):not(.case-highlighted-content-centered),
.case-main-overview section.case-content-section.spacing-token-2xl:has(p.body-large:only-child):not(.case-highlighted-content):not(.case-highlighted-content-centered) {
    padding-top: var(--spacing-lg) !important; /* 40px - reduced spacing for body-large */
}

/* Standard spacing between body-large and following highlighted content box on overview page */
/* Body-large has 40px padding-top, so box needs 32px margin-top to total 72px standard spacing */
main.case-main-overview section.case-content-section:has(p.body-large:only-child) + section.case-content-section.case-highlighted-content-centered.spacing-token-2xl,
.case-main-overview section.case-content-section:has(p.body-large:only-child) + section.case-content-section.case-highlighted-content-centered.spacing-token-2xl {
    margin-top: 32px !important; /* 32px - to make total 72px with body-large's 40px (40px + 32px = 72px) */
    padding-top: 52px !important; /* Keep internal padding */
}

.case-content-section.case-highlighted-content-centered.spacing-token-2xl { 
    margin: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    padding-top: 52px !important; 
    padding-bottom: 52px !important;
}

/* Ensure equal top and bottom padding for highlighted content box on overview page */
main.case-main-overview .case-content-section.case-highlighted-content-centered.spacing-token-2xl:not(:has(+ .case-content-section)),
.case-main-overview .case-content-section.case-highlighted-content-centered.spacing-token-2xl:not(:has(+ .case-content-section)) {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
}

/* When box is last, ensure equal padding */
main.case-main-overview .case-content-section.case-highlighted-content-centered.spacing-token-2xl:last-child,
.case-main-overview .case-content-section.case-highlighted-content-centered.spacing-token-2xl:last-child,
main.case-main-overview .case-content-section.case-highlighted-content-centered.spacing-token-2xl:not(:has(+ .case-content-section)),
.case-main-overview .case-content-section.case-highlighted-content-centered.spacing-token-2xl:not(:has(+ .case-content-section)) {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
}

/* Remove padding-bottom from highlighted box when followed by another section to prevent double spacing */
.case-content-section.case-highlighted-content-centered.spacing-token-2xl:has(+ .case-content-section),
.case-content-section.case-highlighted-content.case-highlighted-content-centered.spacing-token-2xl:has(+ .case-content-section),
main.case-main .case-content-section.case-highlighted-content-centered.spacing-token-2xl:has(+ .case-content-section),
main.case-main .case-content-section.case-highlighted-content.case-highlighted-content-centered.spacing-token-2xl:has(+ .case-content-section) {
    padding-bottom: 0 !important;
}

/* Add padding-bottom to last child when box is followed by another section to maintain internal spacing */
/* More specific selector to override .case-highlighted-content-centered > * { padding: 0 } */
.case-content-section.case-highlighted-content-centered.spacing-token-2xl:has(+ .case-content-section) > *:last-child,
.case-content-section.case-highlighted-content.case-highlighted-content-centered.spacing-token-2xl:has(+ .case-content-section) > *:last-child,
main.case-main .case-content-section.case-highlighted-content-centered.spacing-token-2xl:has(+ .case-content-section) > *:last-child,
main.case-main .case-content-section.case-highlighted-content.case-highlighted-content-centered.spacing-token-2xl:has(+ .case-content-section) > *:last-child,
section.case-content-section.case-highlighted-content-centered.spacing-token-2xl:has(+ .case-content-section) > *:last-child,
section.case-content-section.case-highlighted-content.case-highlighted-content-centered.spacing-token-2xl:has(+ .case-content-section) > *:last-child {
    padding-bottom: 52px !important;
}


/* Regular highlighted content with spacing token - more specific selector */
.case-content-section.case-highlighted-content.spacing-token-2xl {
    margin: 0 !important;
    margin-top: var(--spacing-2xl) !important;
    margin-bottom: var(--spacing-2xl) !important;
    padding: 0 !important;
    padding-top: 96px !important;
    padding-bottom: 96px !important;
}
.case-content-section.spacing-token-3xl { padding-top: var(--spacing-3xl) !important; }
.case-content-section.spacing-token-4xl { padding-top: var(--spacing-4xl) !important; }
.case-content-section.spacing-token-5xl { padding-top: var(--spacing-5xl) !important; }

/* Spacing tokens for elements within case-content-section */
.case-content-section .spacing-token-3xl {
    margin-bottom: var(--spacing-3xl) !important;
}

/* Image sections following highlighted lists get smaller spacing */
.case-content-section:has(.case-highlighted-list) + .case-content-section:has(.case-image),
.case-content-section:has(.case-highlighted-list) + .case-content-section.case-image-section {
    padding-top: var(--spacing-sm) !important; /* 20px spacing */
}

/* When a gallery section is followed by body copy, use 8px gap */
.case-content-section:has(.case-image-gallery) {
    margin-bottom: 8px;
    grid-column: 2 / 9; /* Ensure gallery sections span columns 2-8 */
}

/* This rule is now handled by the ONMO Section Pattern - keeping for backward compatibility */
.case-content-section .small-title + .body {
    margin: 0 !important;
    padding: 0 !important;
    margin-top: var(--spacing-sm) !important; /* 20px - always */
}

/* Remove all body margins - spacing controlled by section padding-top */
.case-content-section .body {
    margin: 0 !important; /* Global ONMO rule: no margins, spacing via section padding */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.case-content-section .body:last-child {
    margin-bottom: 0 !important;
}

/* Explicitly reset paragraph margins within sections */
.case-content-section p.body {
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Add spacing between body paragraphs for line breaks */
.case-content-section p.body:not(:last-of-type) {
    margin-bottom: 1em !important; /* Reduced from 1.5em to match ONMO spacing */
}


/* Reset body-large margins - spacing controlled by section padding-top */
.case-content-section .body-large {
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

.case-content-section p.body-large {
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

/* Add spacing between body-large paragraphs for line breaks - more specific to override reset */
.case-content-section p.body-large:not(:last-of-type) {
    margin-bottom: 1.5em !important;
}

/* Results page - remove all body spacing */
.case-intro-results + .case-content-section .body {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Text with image section - consistent spacing */
.case-text-image-section {
    margin-bottom: 72px; /* Standard section gap */
}

.case-text-image-section:last-child {
    margin-bottom: 0; /* Remove margin from last section, spacing controlled by spacing div before footer */
}

/* Spacing after section title - spacing on following element */
.case-text-image-section .small-title + .body {
    margin-top: 20px;
}

.case-text-image-section .body {
    margin-bottom: 52px; /* 52px spacing between text and image */
}

/* Case study images */
.case-image {
    margin: 0 !important; /* Reset all margins - spacing controlled by element above */
    margin-top: 0 !important; /* Will be set by .body + .case-image rule */
    margin-bottom: 0 !important;
    padding: 0 !important;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

.case-image img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

.case-image video {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

.case-video-container {
    overflow: hidden; /* Mask video with rounded corners */
    position: relative;
    display: block;
    width: 100%; /* Full width by default - matches content column width */
    max-width: 100%;
    margin: 0; /* No auto margin for full width */
    border-radius: 65px; /* Rounded corners for video masking */
}

/* App redesign page videos should be 45% width (10% smaller than 50%) - but not side-by-side videos */
.case-main-new-app .case-content-section .case-video-container {
    width: 45%; /* 45% width - 10% smaller than previous 50% */
    max-width: 45%;
    margin: 0 auto; /* Center the container */
    border-radius: 0 !important; /* Remove rounded corners - videos are masked themselves */
    overflow: hidden !important; /* Keep overflow hidden for proper display, but no border-radius masking */
}

/* Web redesign page videos - remove rounded corners and mask top 6.5px (target by case-intro-new-web class) */
.case-intro-new-web ~ .case-content-section .case-video-container,
main:has(.case-intro-new-web) .case-content-section .case-video-container {
    border-radius: 0 !important; /* No rounded corners on web redesign page */
    overflow: hidden; /* Ensure masking works */
    clip-path: inset(6.5px 0 0 0); /* Hide top 6.5px of video */
}

.case-intro-new-web ~ .case-content-section .case-video-container video,
main:has(.case-intro-new-web) .case-content-section .case-video-container video {
    transform: translateY(-6.5px); /* Shift video up by 6.5px to hide top portion */
}

.case-video-container video {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* Before/After Slider - SAVED FOR LATER (see backups/before-after-slider-backup.md) */
/*
.case-before-after-slider {
    position: relative;
    overflow: hidden;
}

.before-after-container {
    position: relative;
    width: 100%;
    max-width: 100%;
}

.before-after-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    cursor: grab;
    user-select: none;
}

.before-after-wrapper:active {
    cursor: grabbing;
}

.before-after-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    pointer-events: none;
}

.before-image {
    position: relative;
    z-index: 1;
}

.after-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    clip-path: inset(0 50% 0 0);
    z-index: 2;
}

.before-after-handle {
    position: absolute;
    top: 0;
    left: 50%;
    width: 4px;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    transform: translateX(-50%);
    z-index: 3;
    cursor: ew-resize;
    display: flex;
    align-items: center;
    justify-content: center;
}

.handle-line {
    width: 2px;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.handle-circle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    color: var(--color-black);
}

.handle-circle svg {
    width: 24px;
    height: 24px;
}
*/

/* 1x sizing - display image at natural size */
.case-image-1x {
    width: auto;
    max-width: 100%;
}

.case-image-1x img {
    width: auto;
    max-width: 100%;
    height: auto;
}

/* Image section spanning columns 2-9 */
.case-image-section {
    grid-column: 2 / 10 !important;
    /* margin-top controlled by specific rules above */
}

/* Global ONMO rule: When image section follows a section with body text, use 20px spacing instead of default 52px */
.case-content-section:has(.body:last-child) + .case-content-section.case-image-section,
.case-content-section:has(.body-large:last-child) + .case-content-section.case-image-section {
    margin: 0 !important;
    padding: 0 !important;
    padding-top: var(--spacing-sm) !important; /* 20px - global ONMO rule */
}

/* Image section spanning 4 columns (left-aligned: columns 2-6) */
.case-image-section-4col {
    grid-column: 2 / 6 !important;
    margin: 0 !important;
    padding: 0 !important;
    /* Spacing controlled by rules above when following body sections */
}

/* 4-column image within a content section */
.case-content-section .case-image.case-image-4col {
    grid-column: 2 / 6 !important;
    max-width: 466px !important;
    width: 466px !important;
}

.case-content-section .case-image.case-image-4col img {
    width: 100% !important;
    max-width: 466px !important;
}

/* When 4-column image section follows a section with body text, use 20px spacing */
.case-content-section:has(.body:last-child) + .case-content-section.case-image-section-4col,
.case-content-section:has(.body-large:last-child) + .case-content-section.case-image-section-4col {
    padding-top: var(--spacing-sm) !important; /* 20px - global ONMO rule */
}

/* Two images side by side */
.case-images-side-by-side {
    display: flex;
    flex-direction: row;
    gap: 52px;
    width: 100%;
    align-items: flex-start; /* Align items to the top */
}

/* Ensure both video containers have the same height and align at top */
.case-images-side-by-side .case-image {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
}

/* Videos in side-by-side container should be 50% width (half size) - same as single videos */
.case-images-side-by-side .case-video-container {
    width: 100% !important; /* 100% of flex item = 50% of total width (same as single videos) */
    max-width: 100% !important;
    margin: 0 !important; /* Remove auto margin */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex !important; /* Use flex to align video */
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    vertical-align: top !important;
    position: relative !important;
    top: 0 !important;
    line-height: 0 !important; /* Remove line-height that could cause vertical offset */
    font-size: 0 !important; /* Remove font-size that could cause vertical offset */
    align-self: flex-start !important; /* Align to top in flex container */
    overflow: visible !important; /* Change back to visible */
}

/* Force both video containers to start at the exact same vertical position */
.case-images-side-by-side .case-image:first-child,
.case-images-side-by-side .case-image:last-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
    top: 0 !important;
}

.case-images-side-by-side .case-video-container:first-child,
.case-images-side-by-side .case-video-container:last-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
    top: 0 !important;
}

/* Ensure case-image wrapper in side-by-side container doesn't interfere */
.case-images-side-by-side .case-image {
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: visible !important; /* Change back to visible */
    vertical-align: top !important;
    display: flex !important; /* Use flex to align content */
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    flex: 1 1 0; /* Equal width, can shrink, no base size */
    min-width: 0; /* Allow flex item to shrink below content size */
    width: 100% !important;
}

/* Ensure both video containers in side-by-side layout are visible and have proper width */
.case-images-side-by-side .case-image .case-video-container {
    flex: 1 1 0 !important; /* Equal flex sizing */
    min-width: 0 !important; /* Allow shrinking */
    width: 100% !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-width: 100% !important;
    position: relative !important;
    top: 0 !important;
    line-height: 0 !important; /* Remove line-height that could cause vertical offset */
    font-size: 0 !important; /* Remove font-size that could cause vertical offset */
    align-self: flex-start !important; /* Align to top in flex container */
    height: auto !important; /* Let height be determined by content */
}

/* Ensure videos inside side-by-side containers are visible and aligned */
.case-images-side-by-side .case-video-container video {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    object-position: top center !important; /* Align video content to top */
    vertical-align: top !important;
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    line-height: 0 !important; /* Remove line-height that could cause vertical offset */
    font-size: 0 !important; /* Remove font-size that could cause vertical offset */
    border: none !important; /* Remove any default border */
    outline: none !important; /* Remove any default outline */
    transform: translateY(0) translateX(0) !important; /* Ensure no transform offset */
    align-self: flex-start !important; /* Align to top in flex container */
}

/* Force both videos to start at exact same position */
.case-images-side-by-side .case-video-container:first-child video,
.case-images-side-by-side .case-video-container:last-child video {
    margin-top: 0 !important;
    padding-top: 0 !important;
    top: 0 !important;
    transform: translateY(0) !important;
}

/* Hide fallback text in video elements that could cause vertical offset */
.case-images-side-by-side .case-video-container video::after {
    display: none !important;
    content: none !important;
}

/* Ensure any text nodes inside video containers don't cause offset */
.case-images-side-by-side .case-video-container {
    color: transparent !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
}

.case-images-side-by-side .case-video-container > *:not(video) {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
}

/* Image Gallery Component - Global reusable component */
.case-image-gallery {
    position: relative;
    width: 100%;
    margin-bottom: 0; /* Margin controlled by parent section */
}

.case-image-gallery-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* Fixed dimensions: 835x470 aspect ratio */
    aspect-ratio: 835 / 470;
    height: auto;
}

.case-image-gallery-slides {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Hide slides that are off-screen */
}

.case-image-gallery-slide {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0; /* Start invisible for fade-in */
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1); /* Subtle and snappy fade */
    visibility: hidden;
    pointer-events: none;
    will-change: opacity; /* Optimize animation performance */
}

.case-image-gallery-slide.active {
    opacity: 1 !important; /* Fade in to full opacity */
    position: relative !important; /* Use relative to maintain container height */
    visibility: visible !important;
    pointer-events: auto;
    z-index: 2; /* Active slide on top */
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1); /* Subtle and snappy fade */
    height: 100%; /* Maintain fixed height */
}

/* During transition, active slide becomes absolute so it can overlap with leaving slide */
.case-image-gallery-slide.active.transitioning {
    position: absolute !important; /* Allow overlap during transition */
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important; /* Subtle and snappy fade */
}

/* But active slide without transitioning should be relative to maintain height */
.case-image-gallery-slide.active:not(.transitioning) {
    position: relative !important;
}

/* When a slide is leaving, it should fade out */
.case-image-gallery-slide.leaving {
    position: absolute !important;
    opacity: 0 !important; /* Fade out */
    visibility: visible !important; /* Force visible during transition */
    z-index: 1; /* Leaving slide below active - new slide will appear on top */
    top: 0; /* Ensure it's positioned correctly */
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important; /* Subtle and snappy fade */
}

/* When both active and leaving, ensure smooth transition */
.case-image-gallery-slide.active.leaving {
    opacity: 0 !important; /* Fade out */
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important; /* Subtle and snappy fade */
    visibility: visible !important; /* Keep visible during transition */
    position: absolute !important; /* Must be absolute during transition */
}

/* Ensure slides without active or leaving class are hidden */
.case-image-gallery-slide:not(.active):not(.leaving) {
    opacity: 0;
    visibility: hidden;
}

.case-image-gallery-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.case-image-gallery-indicator {
    position: absolute;
    bottom: 24px;
    right: 24px;
    background-color: rgba(0, 0, 0, 0.7);
    color: var(--color-white);
    padding: 8px 16px;
    border-radius: 4px;
    font-family: 'PP Museum', sans-serif;
    font-size: 14px;
    line-height: 14px;
    font-weight: 300;
    letter-spacing: 1px;
    z-index: 10;
    pointer-events: none;
}

.case-image-gallery-indicator-current {
    font-weight: 400;
}

.case-image-gallery-indicator-separator {
    margin: 0 4px;
    opacity: 0.6;
}

.case-image-gallery-indicator-total {
    opacity: 0.8;
}

/* Case study tagline */
.case-tagline {
    margin-bottom: 24px;
}


/* Project details section */
.case-project-details {
    margin: 24px 0 52px 0; /* 52px spacing after separator, before title */
    padding: 24px 0;
    /* border-top removed */
    border-bottom: 1px solid var(--separator-color);
    display: grid;
    grid-template-columns: 2fr 2fr 1fr; /* ROLE and FOCUS equal space (2fr each), YEAR takes remaining (1fr) */
    gap: 24px;
}

.case-detail-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* All text left-aligned */
.case-project-details .case-detail-item {
    text-align: left;
}

/* Use section-heading for labels, override margin for horizontal layout */
.case-project-details .section-heading {
    margin-bottom: 0;
}

.case-detail-value {
    font-family: 'PP Museum', sans-serif;
    font-weight: 300;
    font-size: 21px;
    line-height: 32px;
    color: var(--text-color);
}

/* Override for body-small class */
.case-detail-value.body-small {
    font-size: 16px;
    line-height: 16px;
    color: var(--color-black);
}

/* Override for body-medium class */
.case-detail-value.body-medium {
    font-size: 18px;
    line-height: 18px;
    color: var(--color-black);
}
.home-theme .case-detail-value {
    color: var(--color-black);
}

.case-intro p.body:nth-of-type(2) {
    margin-bottom: 52px; /* 52px gap before Responsibilities heading */
}


/* Spacing after OVERVIEW heading - spacing on following element, not title */
.case-intro .small-title + .body {
    margin-top: var(--spacing-small-title-to-body);
}

.case-intro .section-heading {
    margin-top: 0 !important; /* Remove any default margin-top to ensure spacing comes from paragraph above */
    margin-bottom: 16px; /* 16px spacing between title and bullets */
}

.case-responsibilities {
    list-style: none;
    margin: 0 0 0 0; /* Spacing controlled by section spacing tokens */
    padding: 0;
}

.case-responsibilities li {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

.case-responsibilities li + li {
    margin-top: 8px;
}

.case-responsibilities .client {
    color: var(--text-color);
    font-weight: 400;
    flex-shrink: 0;
}

/* Generic separator line */
hr.separator {
    margin: 0;
    border: none;
    height: 1px;
    background-color: var(--separator-color);
}

/* Separator section with equal padding */
.case-content-section:has(.separator) {
    margin-top: 24px;
    margin-bottom: 24px;
}

.case-content-section .separator {
    margin: 0;
}

/* Body text after separator in same section */
.case-content-section .separator + .body {
    margin-top: 40px;
}

/* Image after body text in same section */
/* ============================================
   ONMO SECTION PATTERN - Spacing Tokens Only
   ============================================ */

/* Section Pattern Definition:
   - Section copy = Small title + body (in same section)
   - Section with media = Small title + body + image/video (in same section)
   
   Spacing Rules (using tokens only, no margins/paddings):
   - 20px between small title and body
   - 32px between body and image/video
*/

/* Global ONMO rule: 20px spacing between small-title and body (always) */
.case-content-section .small-title + .body {
    margin: 0 !important;
    padding: 0 !important;
    margin-top: var(--spacing-sm) !important; /* 20px - always */
}

/* Global ONMO rule: 20px spacing between body and list items when stacked together */
.case-content-section .body + .case-highlighted-list,
.case-content-section .case-highlighted-list + .body {
    margin: 0 !important;
    padding: 0 !important;
    margin-top: var(--spacing-sm) !important; /* 20px - always */
}

/* Global ONMO rule: 32px spacing between body/list and image/video (always) */
/* Lists and body are categorized together - same spacing rules apply */
.case-content-section .body + .case-image,
.case-content-section .body + video,
.case-content-section .body + .case-hero-video,
.case-content-section .case-highlighted-list + .case-image {
    margin: 0 !important;
    padding: 0 !important;
    margin-top: var(--spacing-body-to-media) !important; /* 32px - always */
}

/* Ensure body/list has no margin-bottom that would add extra spacing */
.case-content-section .body:has(+ .case-image),
.case-content-section .body:has(+ video),
.case-content-section .body:has(+ .case-hero-video),
.case-content-section .case-highlighted-list:has(+ .case-image) {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Image after small-title in same section (when no body between) - 32px spacing */
.case-content-section .small-title + .case-image:not(.body + .case-image) {
    margin: 0 !important;
    padding: 0 !important;
    margin-top: var(--spacing-body-to-media) !important; /* 32px - when image directly follows title */
}

/* Image after separator in same section - 32px spacing */
.case-content-section .separator + .case-image {
    margin: 0 !important;
    padding: 0 !important;
    margin-top: var(--spacing-body-to-media) !important; /* 32px */
}

/* Image after body-large in same section - 32px spacing */
.case-content-section .body-large + .case-image {
    margin: 0 !important;
    padding: 0 !important;
    margin-top: var(--spacing-body-to-media) !important; /* 32px */
}

/* Ensure elements before images have no margin-bottom */
.case-content-section .small-title:has(+ .case-image),
.case-content-section .separator:has(+ .case-image),
.case-content-section .body-large:has(+ .case-image) {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Spacing between image and following items within a section - 20px */
.case-content-section .case-image + *,
.case-content-section .case-image-gallery + *,
.case-content-section .case-images-side-by-side + * {
    margin-top: var(--spacing-sm) !important; /* 20px */
}

/* Ensure body paragraphs after images have spacing - more specific to override body reset rules */
.case-content-section .case-image + p.body,
.case-content-section .case-image + .body {
    margin-top: var(--spacing-sm) !important; /* 20px */
}

/* Ensure body paragraphs after image galleries have spacing - more specific to override body reset rules */
.case-content-section .case-image-gallery + p.body,
.case-content-section .case-image-gallery + .body {
    margin-top: var(--spacing-sm) !important; /* 20px */
    margin-bottom: 0 !important; /* Reset any default margin-bottom */
}

/* Ensure body paragraphs after side-by-side images have spacing - more specific to override body reset rules */
.case-content-section .case-images-side-by-side + p.body,
.case-content-section .case-images-side-by-side + .body {
    margin-top: var(--spacing-sm) !important; /* 20px */
    margin-bottom: 0 !important; /* Reset any default margin-bottom */
}

/* Spacing before bullet lists - 20px */
.case-content-section .body + .case-responsibilities,
.case-content-section p.body + .case-responsibilities,
.case-content-section p.body + ul.case-responsibilities {
    margin-top: var(--spacing-sm) !important; /* 20px */
}

/* Spacing after body-large before image gallery - 20px */
.case-content-section .body-large + .case-image-gallery,
.case-content-section p.body-large + .case-image-gallery {
    margin-top: var(--spacing-sm) !important; /* 20px */
}

/* Spacing after body paragraph before separator - 52px */
.case-content-section .body + .separator,
.case-content-section p.body + hr.separator,
.case-content-section p.body + .separator,
.case-content-section .body + hr.separator,
.case-content-section .body-large + .separator,
.case-content-section p.body-large + hr.separator {
    margin-top: 52px !important;
    margin-bottom: 0 !important;
}

/* Spacing after case-image before separator - 52px */
.case-content-section .case-image + .separator,
.case-content-section .case-image + hr.separator {
    margin-top: 52px !important;
    margin-bottom: 0 !important;
}

/* Spacing after body-large before separator - 20px */
.case-content-section .body-large + .separator,
.case-content-section p.body-large + hr.separator {
    margin-top: var(--spacing-sm) !important; /* 20px */
}

/* Spacing after body paragraphs before side-by-side images - 20px */
.case-content-section .body + .case-images-side-by-side,
.case-content-section p.body + .case-images-side-by-side {
    margin-top: var(--spacing-sm) !important; /* 20px */
}

/* Body-large before gallery - reduce spacing to gallery */
.case-content-section:has(.body-large:last-child) + .case-content-section:has(.case-image-gallery) {
    margin-top: 20px; /* Reduced from default 72px */
}

/* Reduce bottom margin on section containing body-large when followed by gallery */
.case-content-section:has(.body-large:last-child) {
    margin-bottom: 20px; /* Reduced spacing when body-large is last and followed by gallery */
}

/* Full width separator section */
.case-separator-full-width {
    grid-column: 2 / 11 !important;
}

.case-separator-full-width .separator {
    grid-column: 1 / -1;
}

/* ============================================
   CASE STUDY SUB NAVIGATION
   ============================================ */

/* Floating Sidebar Navigation */
.case-sub-nav-sidebar {
    position: fixed;
    /* top and right will be set dynamically via JavaScript */
    transform: none; /* Remove vertical centering */
    z-index: 1; /* Behind full-width content */
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    opacity: 0; /* Initially hidden */
    visibility: hidden;
}

/* When sidebar is absolute (aligned with title), position relative to body */
body {
    position: relative;
}

.case-sub-nav-sidebar.visible {
    opacity: 1;
    visibility: visible;
}

.case-sub-nav-sidebar.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.case-sub-nav-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
    pointer-events: auto;
}

.case-sub-nav-link {
    font-family: 'Euclid Circular B', sans-serif;
    font-size: 14px;
    line-height: 14px;
    font-weight: 400;
    letter-spacing: 1px;
    color: var(--color-grey);
    text-decoration: none;
    text-transform: uppercase;
    display: block;
    transition: color 0.2s, opacity 0.2s;
    white-space: nowrap;
    position: relative;
}

.case-sub-nav-link:hover {
    color: var(--color-black);
    opacity: 0.7;
}

.case-sub-nav-link.active {
    color: var(--color-black);
    font-weight: 400;
}

.case-sub-nav-link.active::before {
    content: '';
    position: absolute;
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 1px;
    background-color: var(--color-black);
}

/* ============================================
   BLACK SIDE NAVIGATION
   ============================================ */

.side-nav-black {
    position: fixed;
    /* top and right will be set dynamically via JavaScript */
    transform: none;
    z-index: 1;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    opacity: 0; /* Initially hidden */
    visibility: hidden;
    background-color: var(--color-black);
    padding: 40px;
}

.side-nav-black.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.side-nav-black.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.side-nav-black-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    pointer-events: auto;
}

.side-nav-black-link {
    font-family: 'Euclid Circular B', sans-serif;
    font-size: 16px;
    line-height: 16px;
    font-weight: 400;
    letter-spacing: 2px;
    color: var(--color-grey);
    text-decoration: none;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    transition: color 0.2s ease;
    white-space: nowrap;
    position: relative;
}

.side-nav-black-link:hover {
    color: var(--color-white);
}

.side-nav-black-link.active {
    color: var(--color-white);
}

.side-nav-black-chevron {
    width: 14px;
    height: 14px;
    display: none; /* Hidden by default */
    flex-shrink: 0;
    line-height: 14px;
}

.side-nav-black-link.active .side-nav-black-chevron {
    display: flex; /* Show chevron for active item */
    align-items: center;
    justify-content: center;
}

/* Hide white side nav on overview page when black nav is present */
body:has(.side-nav-black) .case-sub-nav-sidebar,
.case-sub-nav-sidebar:has(+ .side-nav-black) {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Bottom Navigation Menu - Vertical Layout */
.case-sub-nav-bottom-title-wrapper {
    width: var(--grid-breakpoint);
    max-width: 100%;
    margin: 72px auto 52px auto;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), var(--grid-column-width));
    gap: var(--grid-gutter);
}

.case-sub-nav-bottom-title {
    grid-column: 2 / 11;
    margin: 0;
    padding: 0;
    text-align: left;
    font-family: 'PP Museum', sans-serif;
    font-size: 18px;
    line-height: 18px;
    font-weight: 300;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-grey);
}

.case-sub-nav-bottom-container {
    width: 100%;
    background-color: var(--color-black);
    margin: 0;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-top: 0; /* Default - overridden by spacing tokens */
    display: block; /* Ensure block display */
    box-sizing: border-box; /* Include padding in width calculation */
}

/* When container is last child, ensure it extends to bottom */
.case-sub-nav-bottom-container:last-child {
    position: relative;
    overflow: visible;
}

/* Add pseudo-element that extends beyond viewport to cover any gap - use fixed positioning */
.case-sub-nav-bottom-container:last-child::after {
    content: '';
    position: fixed;
    bottom: -200vh;
    left: 0;
    width: 100vw;
    height: 200vh;
    background-color: var(--color-black);
    z-index: -999;
    pointer-events: none;
}



/* Image in dark container */
.case-image-dark-container {
    width: var(--grid-breakpoint);
    max-width: 100%;
    margin: 0 auto;
    padding: 72px 0;
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), var(--grid-column-width));
    gap: var(--grid-gutter);
}

.case-image-dark-wrapper {
    grid-column: 2 / 11;
}

.case-sub-nav-bottom {
    width: var(--grid-breakpoint);
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), var(--grid-column-width));
    gap: var(--grid-gutter);
}

.case-sub-nav-bottom-inner {
    grid-column: 2 / 11;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
}

/* Add separator and spacing between nav and footer within container */
.case-sub-nav-bottom-container nav + .footer {
    margin-top: 52px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.case-sub-nav-bottom-container .footer .footer-separator {
    border-top-color: rgba(255, 255, 255, 0.1); /* Semi-transparent white separator */
}

.case-sub-nav-bottom-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 86px;
    padding: 0 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    text-decoration: none;
    color: var(--color-white);
    transition: background-color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden; /* Mask arrow animation within column boundaries */
}

.case-sub-nav-bottom-item:last-child {
    border-bottom: none;
}

/* Global ONMO rule: spacing above footer nav - use margin-top instead */
.case-sub-nav-bottom-container.spacing-token-lg {
    margin-top: var(--spacing-2xl) !important; /* 72px */
    padding-top: 0 !important;
}

.case-sub-nav-bottom-container.spacing-token-3xl {
    margin-top: var(--spacing-3xl) !important; /* 96px */
    padding-top: 0 !important;
}

/* Ensure spacing applies even with high specificity - multiple selectors for maximum coverage */
main + .case-sub-nav-bottom-container.spacing-token-lg,
.case-main + .case-sub-nav-bottom-container.spacing-token-lg,
body .case-sub-nav-bottom-container.spacing-token-lg,
html body .case-sub-nav-bottom-container.spacing-token-lg,
div.case-sub-nav-bottom-container.spacing-token-lg {
    margin-top: var(--spacing-2xl) !important; /* 72px */
    padding-top: 0 !important;
}

main + .case-sub-nav-bottom-container.spacing-token-3xl,
.case-main + .case-sub-nav-bottom-container.spacing-token-3xl,
body .case-sub-nav-bottom-container.spacing-token-3xl,
html body .case-sub-nav-bottom-container.spacing-token-3xl,
div.case-sub-nav-bottom-container.spacing-token-3xl {
    margin-top: var(--spacing-3xl) !important; /* 96px */
    padding-top: 0 !important;
}

/* Inner container - spacing controlled by tokens */
.case-sub-nav-bottom-inner-results {
    padding-top: 0; /* Default - spacing controlled by spacing tokens */
}

/* Spacing tokens for inner container */
.case-sub-nav-bottom-inner-results.spacing-token-lg {
    padding-top: var(--spacing-lg) !important; /* 40px */
}

.case-sub-nav-bottom-inner-results.spacing-token-xl {
    padding-top: var(--spacing-xl) !important; /* 52px */
}

/* Header row container for "Continue viewing" and "BACK TO TOP" */
.case-sub-nav-bottom-header-results {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    width: 100%;
}

.case-sub-nav-bottom-title-results {
    margin: 0;
    padding: 0;
    font-family: 'PP Museum', sans-serif;
    font-size: 18px;
    line-height: 18px;
    font-weight: 300;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: transparent; /* Hide original text, show animated version */
    position: relative;
    overflow: hidden; /* Mask the scrolling text */
    display: inline-block;
    white-space: nowrap;
}

/* BACK TO TOP button */
.case-sub-nav-back-to-top {
    font-family: 'Euclid Circular B', sans-serif; /* Same font as nav items */
    font-size: 18px; /* Current size is good */
    line-height: 18px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-white); /* White color */
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 2px; /* Gap between label and arrow (reduced 50% from 4px) */
    margin-left: 0;
    padding-left: 0; /* Start with no left padding */
    height: 18px; /* Fixed height matching label height */
    overflow: hidden; /* Mask arrow animation from below */
    flex-direction: row; /* Label left, arrow right */
    transition: padding-left 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* On hover: add left padding to accommodate pushed label */
.case-sub-nav-back-to-top:hover {
    padding-left: 20px; /* Make room for label when pushed left (18px arrow + 2px gap) */
}

.case-sub-nav-back-to-top-text {
    transition: color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    color: var(--color-white);
    transform: translateX(0);
    order: 1; /* Label appears before arrow (on the left) */
}

/* Arrow icon for BACK TO TOP - slides in from bottom to top, positioned on right */
.case-sub-nav-back-to-top-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    top: 18px; /* Start position: below container (super short travel) */
    left: 0;
    width: 18px; /* Match container height */
    height: 18px; /* Match container height */
    opacity: 0;
    flex-shrink: 0;
    order: 2; /* Arrow appears after label (on the right) */
    transition: top 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s, 
                color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    color: var(--color-white);
}

/* On hover: arrow slides up from bottom, label pushed left */
.case-sub-nav-back-to-top:hover .case-sub-nav-back-to-top-icon {
    top: 0; /* Final position: aligned with label (super short travel - 18px) */
    opacity: 1;
    color: var(--color-white);
}

.case-sub-nav-back-to-top:hover .case-sub-nav-back-to-top-text {
    color: var(--color-white);
    transform: translateX(-20px); /* Push label left to make room for arrow (18px arrow + 2px gap) */
}

/* Container width will be set dynamically via JavaScript to text width + 52px */

/* Scrolling text container - content will be set dynamically via JavaScript */
.case-sub-nav-bottom-title-results::before {
    position: absolute;
    top: 0;
    left: 0;
    white-space: nowrap;
    animation: scrollText 2.662s linear infinite; /* Slowed by 10% (2.42s * 1.1 = 2.662s) */
    display: inline-block;
    color: var(--color-grey); /* Match the text color */
    font-weight: 300;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 18px;
    line-height: 18px;
    font-family: 'PP Museum', sans-serif;
}

/* Scrolling animation - moves from right to left */
@keyframes scrollText {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-100% / 6)); /* Move by one segment (6 instances total) */
    }
}

.case-sub-nav-bottom-separator-results {
    margin: 0;
    padding: 0;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
    height: 1px;
}

/* Active state: black background, white text and arrow - NO HOVER INTERACTIONS */
.case-sub-nav-bottom-item.active {
    background-color: var(--color-black);
    color: var(--color-white);
    pointer-events: none; /* Disable all interactions on active items */
    cursor: default;
}

.case-sub-nav-bottom-item.active .case-sub-nav-link-text::before {
    content: '—';
    display: inline-block;
    margin-right: 12px; /* Space between dash and text */
    color: var(--color-grey) !important; /* Grey dash to match grey text - ensure it overrides any other rules */
}

.case-sub-nav-bottom-item.active .case-sub-nav-link-text,
.case-sub-nav-bottom-item.active .case-sub-nav-link-go-top {
    color: var(--color-grey) !important; /* Grey color for active label - ensure it overrides any other rules */
}

/* Remove all hover effects from active items */
.case-sub-nav-bottom-item.active:hover {
    background-color: var(--color-black) !important; /* Keep black background */
    color: var(--color-white) !important;
}

.case-sub-nav-bottom-item.active:hover .case-sub-nav-link-text {
    display: block !important; /* Keep text visible, don't hide */
    margin-left: 0 !important; /* No margin shift */
    color: var(--color-grey) !important; /* Keep grey on hover */
}

.case-sub-nav-bottom-item.active:hover .case-sub-nav-link-text::before {
    color: var(--color-grey) !important; /* Keep dash grey on hover */
}

.case-sub-nav-bottom-item.active:hover .case-sub-nav-link-go-top {
    display: none !important; /* Never show "GO TO TOP" on active items */
}

.case-sub-nav-bottom-item.active:hover .case-sub-nav-link-icon {
    display: none !important; /* Never show arrow on active items */
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Hover state: gradient background, black text and arrow */
.case-sub-nav-bottom-item:hover {
    background: var(--gradient-horizontal);
    color: var(--color-black);
}

.case-sub-nav-bottom-item:hover .case-sub-nav-link-text,
.case-sub-nav-bottom-item:hover .case-sub-nav-link-go-top {
    color: var(--color-black);
}

.case-sub-nav-bottom-item .case-sub-nav-link-text {
    font-family: 'Euclid Circular B', sans-serif;
    font-size: 21px;
    line-height: 21px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-white);
    transition: color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                margin-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    margin-left: 0;
}

.case-sub-nav-bottom-item.active .case-sub-nav-link-text {
    font-weight: 500;
    color: var(--color-grey) !important; /* Grey color for active label - ensure it overrides any other rules */
}

.case-sub-nav-link-go-top {
    display: none;
    font-family: 'Euclid Circular B', sans-serif;
    font-size: 21px;
    line-height: 21px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-white);
    transition: color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                margin-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    margin-left: 0;
}

.case-sub-nav-bottom-item.active:hover .case-sub-nav-link-text {
    display: none;
}

.case-sub-nav-bottom-item.active:hover .case-sub-nav-link-go-top {
    display: inline-block;
    margin-left: 64px; /* 40px (arrow left) + 24px (arrow width) = 64px total, no gap */
}

.case-sub-nav-bottom-item .case-sub-nav-link-icon {
    display: inline-flex;
    align-items: center;
    position: absolute;
    left: -40px; /* Start position: hidden off-screen to the left */
    width: 24px;
    height: 24px;
    opacity: 0;
    overflow: hidden;
    /* Delay opacity transition so arrow only appears when it reaches column space (0px or beyond) */
    transition: left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.15s, 
                transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    color: var(--color-white);
}

/* Active state: white arrow, hidden by default */
.case-sub-nav-bottom-item.active .case-sub-nav-link-icon {
    left: -40px; /* Start position: hidden off-screen to the left */
    opacity: 0;
}

/* Hover state: black arrow, visible at final position on the left */
/* Opacity only becomes 1 when arrow reaches 0px or beyond (within column space) */
.case-sub-nav-bottom-item:hover .case-sub-nav-link-icon {
    left: 40px; /* Final position: 40px from left edge (just padding) */
    opacity: 1; /* Only visible when within column bounds */
    transform: rotate(0deg); /* Arrow pointing right (default) */
    color: var(--color-black);
}

/* Hover state: push label to the right when arrow appears */
.case-sub-nav-bottom-item:hover .case-sub-nav-link-text {
    margin-left: 64px; /* 40px (arrow left) + 24px (arrow width) = 64px total, no gap */
}

/* Active items have no hover interactions - removed all hover effects above */

/* Dark theme footer inside black container */
.case-footer-dark {
    background-color: transparent; /* Inherit black from container */
    margin-bottom: 0 !important; /* Remove default margin, spacing handled by container */
    padding-bottom: 0 !important; /* Match Info page footer - no padding at bottom */
}

/* More specific selector to ensure footer margin is removed when inside container */
footer.case-footer-dark,
.footer.case-footer-dark {
    margin-bottom: 0 !important;
}

/* Remove any bottom spacing when container is last element */
.case-sub-nav-bottom-container:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Ensure footer inside container has no bottom margin (override any default) */
.case-sub-nav-bottom-container:last-child .footer,
.case-sub-nav-bottom-container:last-child .case-footer-dark,
.case-sub-nav-bottom-container .footer.case-footer-dark {
    margin-bottom: 0 !important;
}

/* Reset html/body completely when container is last element */
html:has(.case-sub-nav-bottom-container:last-child) {
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
    overflow-x: hidden;
    background-color: var(--color-black) !important;
}

body:has(.case-sub-nav-bottom-container:last-child) {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden;
    background-color: var(--color-black) !important;
    height: auto !important;
}

/* Make container stick to bottom and extend beyond */
body:has(.case-sub-nav-bottom-container:last-child) .case-sub-nav-bottom-container:last-child {
    margin-top: auto;
    flex-shrink: 0;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    position: relative;
    min-height: fit-content;
}

/* Force container to extend to document bottom - ensure it covers any gap */
.case-sub-nav-bottom-container:last-child {
    min-height: calc(100vh - 100% + 100%);
    padding-bottom: 200px !important;
    margin-bottom: -200px !important;
}

/* Ensure script tag and any element after container doesn't create gap */
body:has(.case-sub-nav-bottom-container:last-child) > *:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Make sure container background covers everything below it */
body:has(.case-sub-nav-bottom-container:last-child) {
    background: linear-gradient(to bottom, var(--bg-color) 0%, var(--color-black) 100%);
    background-color: var(--color-black) !important;
}


.case-footer-dark .footer-separator {
    border-top-color: rgba(255, 255, 255, 0.1) !important; /* Semi-transparent white separator */
    margin-top: 20px !important;
    margin-bottom: 8px !important;
}

/* Make footer logo and location grey in dark theme */
.case-footer-dark .footer-logo,
.case-footer-dark .footer-logo.font-nav-header {
    color: var(--color-grey) !important;
}

.case-footer-dark .footer-location,
.case-footer-dark .footer-location.font-nav-header {
    color: var(--color-grey) !important;
}

.case-footer-dark .footer-location span {
    color: var(--color-grey) !important;
}

.case-footer-dark .footer-cta {
    color: var(--color-white) !important;
}

.case-footer-dark .contact-link,
.case-footer-dark .contact-link.button-label {
    color: var(--color-white) !important;
}

.case-footer-dark .copy-link-btn {
    color: var(--color-white) !important;
}

.case-footer-dark .contact-link span[data-icon],
.case-footer-dark .copy-link-btn span[data-icon] {
    color: var(--color-white) !important;
}

/* Hide footer on case study pages (pages with case study sub-navigation) - except when inside black container */
body:has(.case-sub-nav-bottom-container .footer) .case-main ~ .footer:not(.case-footer-dark),
body:has(.case-sub-nav-bottom) .footer:not(.case-footer-dark),
body:has(.case-sub-nav-bottom-hor) .footer:not(.case-footer-dark) {
    display: none;
}

/* Responsive: Hide sidebar on smaller screens */
@media (max-width: 1439px) {
    .case-sub-nav-sidebar {
        display: none;
    }
}

/* ============================================
   GRADIENT UTILITIES
   ============================================ */

/* Vertical-ish gradient (from lower-right to upper-left) */
.gradient-vertical {
    background: var(--gradient-vertical);
}

/* Horizontal gradient (left to right) from SVG */
.gradient-horizontal {
    background: var(--gradient-horizontal);
}

/* Remove gradient when it's a video wrapper - video should show through */
.gradient-horizontal.case-hero-video-wrapper,
.case-hero-video-wrapper.gradient-horizontal {
    background: transparent !important;
    background-image: none !important;
    background-color: transparent !important;
}

/* Ensure separators on the homepage are grey */
.home-theme hr.separator {
    background-color: var(--separator-color);
}

/* Homepage separators and spacing */
.home-separator {
    grid-column: 2 / 11;
    margin: 0;
    margin-bottom: 0; /* Spacing controlled by .home-intro margin-bottom */
    background-color: var(--separator-color); /* ensure grey */
}

/* ============================================
   HOMEPAGE LAYOUT
   ============================================ */
.home-main > * { grid-column: 2 / 11; }

.home-main > .home-intro {
    grid-column: 4 / 11 !important; /* End on same column as project images (column 11) */
}

/* Remove row gap on homepage to control spacing manually */
.main-content.home-main {
    row-gap: 0;
}

.home-intro {
    grid-column: 4 / 12; /* Span one more column (was 4 / 11, now 4 / 12) */
    margin-bottom: 96px; /* 96px gap before FLAGSHIP PROJECTS */
}

.home-intro .body {
    max-width: none; /* Remove max-width constraint to allow text to span full column width */
    margin-bottom: 32px; /* spacing between hero paragraphs */
}

/* Add 72px gap after last body paragraph before separator */
.home-intro .body:last-of-type {
    margin-bottom: 72px;
}


.projects-section {
    margin-top: 0; /* Gap comes from separator margin-bottom */
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), var(--grid-column-width));
    column-gap: var(--grid-gutter);
    row-gap: 0; /* vertical spacing controlled by margins, not grid gap */
}

.projects-section .section-heading,
.projects-section .small-title {
    grid-column: 2 / 11;
    margin-bottom: 52px; /* consistent spacing before project content */
}

/* ============================================
   ADDITIONAL PROJECTS SECTION
   ============================================ */
.more-projects-section {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), var(--grid-column-width));
    column-gap: var(--grid-gutter);
    row-gap: 0; /* vertical spacing controlled by margins, not grid gap */
    margin-top: 96px;
}

.more-projects-section .section-heading,
.more-projects-section .small-title {
    grid-column: 2 / 11;
    margin-bottom: 52px;
}

.project-card-grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), var(--grid-column-width));
    column-gap: var(--grid-gutter);
    row-gap: 96px; /* 96px gap between rows */
}

.project-card {
    /* All cards use same column span as BT: columns 2–5 (4 columns wide) */
    grid-column: 2 / 6;
    display: flex;
    flex-direction: column;
}

/* Right-hand cards span columns 7–10 (same width as left cards) */
.project-card:nth-child(2n) {
    grid-column: 7 / 11;
}

.project-card-image {
    width: 100%;
    height: 420px;
    margin-bottom: 32px;
    position: relative;
    cursor: none; /* Hide default cursor, will use custom */
    overflow: hidden;
    transition: background-size 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    /* Default background-size - will be overridden by specific classes */
    background-size: cover;
    background-position: center;
    display: block; /* Make links behave like block elements */
    text-decoration: none; /* Remove underline from links */
    background-repeat: no-repeat;
}

/* British Gas & SeedLegals images (use same gradient treatment as flagship) */
.project-card-image-british-gas {
    background-image:
        url('images/index/BG-index.png'),
        var(--gradient-horizontal);
    background-size: 62.37% auto, cover; /* Another 10% smaller (69.3% * 0.9 = 62.37%) */
    background-position: center 36px, center; /* Position image 36px from top */
    background-repeat: no-repeat, no-repeat;
    transition: background-size 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.project-card-image-seedlegals {
    background-image:
        url('images/index/SL-index.png'),
        var(--gradient-horizontal);
    background-size: 62.37% auto, cover; /* Another 10% smaller (69.3% * 0.9 = 62.37%) */
    background-position: center 36px, center; /* Position image 36px from top */
    background-repeat: no-repeat, no-repeat;
    transition: background-size 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Howsy image (for future use) */
.project-card-image-howsy {
    background-image:
        url('images/index/howsy-index.png'),
        var(--gradient-horizontal);
    background-size: 62.37% auto, cover; /* Another 10% smaller (69.3% * 0.9 = 62.37%) */
    background-position: center 36px, center; /* Position image 36px from top */
    background-repeat: no-repeat, no-repeat;
    transition: background-size 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Miscellaneous projects icon card */
.project-card-image-misc {
    /* Gradient background only - no icon in background */
    background-image: var(--gradient-horizontal);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
}

/* Icon as pseudo-element - centered, 3x bigger, black */
.project-card-image-misc::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 96px; /* 3x bigger (32px * 3 = 96px) */
    height: 96px;
    background-image: url('icons/Icons/Magic.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    filter: brightness(0); /* Make icon black */
    z-index: 2;
}

.project-row {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), var(--grid-column-width));
    gap: var(--grid-gutter);
    align-items: center;
    margin-bottom: 96px; /* 96px space between projects */
}

.project-row:last-child {
    margin-bottom: 0;
}

.project-image {
    grid-column: 2 / 7;
    height: 420px;
    text-decoration: none; /* Remove underline from link */
    display: block; /* Make link behave like block element */
}

/* Project-specific image backgrounds */
.project-image-onmo {
    height: 420px;
    width: 100%; /* Full width like other project cards */
    position: relative;
    cursor: none; /* Hide default cursor, will use custom */

    /* Gradient background only - Lottie animation will overlay */
    background-image: var(--gradient-horizontal);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

/* Lottie animation container */
.project-image-onmo .lottie-container {
    position: absolute;
    top: 0; /* Reset to top for desktop - centered vertically */
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center; /* Center vertically on desktop */
    justify-content: center; /* Center horizontally */
    z-index: 0 !important; /* Below hover overlay */
    min-height: 420px;
    pointer-events: none; /* Allow clicks to pass through to link */
    opacity: 1 !important;
    visibility: visible !important;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                opacity 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Fade out quickly (0.1s) */
}

/* Slide circle down and fade out on hover - opacity goes to 0 just before image finishes */
.project-image-onmo:hover .lottie-container {
    transform: translateY(100px); /* Slide down 100px */
    opacity: 0 !important; /* Fade out just before image finishes sliding */
}

.project-image-onmo .lottie-container svg,
.project-image-onmo .lottie-container canvas {
    width: 62.37% !important; /* Match BG image size - same as other project images */
    height: 62.37% !important;
    max-width: 100%;
    max-height: 62.37%;
    object-fit: contain;
    object-position: center 68px; /* Match BG positioning - 68px from top */
    display: block !important;
    position: relative;
    z-index: 0 !important; /* Below hover overlay */
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(-50px); /* Move up 50px from center for desktop */
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Shorter duration for snappier feel */
}

/* Slide circle down on hover - also move the SVG/canvas and fade out */
.project-image-onmo:hover .lottie-container svg,
.project-image-onmo:hover .lottie-container canvas {
    transform: translateY(50px); /* Slide down (from -50px to +50px = 100px total movement) */
    opacity: 0 !important; /* Fade out just before image finishes sliding */
}

/* Default cursor - adapts to background color */
.default-cursor {
    position: fixed;
    pointer-events: none;
    background-color: white;
    mix-blend-mode: normal;
    width: 36px; /* Use 3x base size for better Safari rendering (renders at higher resolution) */
    height: 36px;
    border-radius: 50%;
    z-index: 99999; /* Very high z-index to ensure it's above all content */
    opacity: 1 !important;
    display: block !important;
    visibility: visible !important;
    transform: translate3d(-50%, -50%, 0) scale(0.333) translateZ(0); /* Scale down to 12px (12/36 = 0.333) */
    -webkit-transform: translate3d(-50%, -50%, 0) scale(0.333) translateZ(0); /* Safari-specific with hardware acceleration */
    transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                background-color 0.1s ease;
    will-change: transform, opacity; /* Optimize for smooth transitions */
    -webkit-backface-visibility: hidden; /* Prevent pixelation in Safari */
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased; /* Better text rendering */
    -webkit-transform-style: preserve-3d; /* Better 3D rendering in Safari */
    transform-style: preserve-3d;
}

/* On home-theme pages (white background), use black cursor */
.home-theme .default-cursor {
    background-color: var(--color-black);
}

/* When cursor is over text on home page, keep it black */
.home-theme .default-cursor.over-text {
    background-color: var(--color-black);
}

/* On Info page and case study pages (black background), use white cursor */
body:not(.home-theme) .default-cursor {
    background-color: white !important;
}

/* On Info page, when over text, cursor is still white */
body:not(.home-theme) .default-cursor.over-text {
    background-color: white !important;
}

/* Ensure cursor stays white over footer section in case study navigation */
/* Force white cursor when hovering over footer in case study nav container */
body:not(.home-theme) .case-sub-nav-bottom-container .footer,
body:not(.home-theme) .case-sub-nav-bottom-container .case-footer-dark {
    isolation: isolate; /* Create a stacking context to ensure cursor stays white */
}

/* Force white cursor when over footer section or active items */
.default-cursor.over-footer {
    mix-blend-mode: normal !important;
    background-color: white !important;
}

/* Force white cursor on active navigation items (black background) */
.case-sub-nav-bottom-item.active {
    isolation: isolate; /* Create stacking context for cursor visibility */
}

.case-sub-nav-bottom-item.active:hover ~ *,
.case-sub-nav-bottom-item.active * {
    /* Ensure cursor stays white when hovering over active item or its children */
}

/* Force white cursor on header row (Continue viewing / Back to top) */
.case-sub-nav-bottom-header-results {
    isolation: isolate; /* Create stacking context for cursor visibility */
}

.case-sub-nav-bottom-header-results * {
    /* Ensure cursor stays white when hovering over header row or its children */
}

/* Also ensure all case study pages have white cursor by default */
body:not(.home-theme) .default-cursor {
    mix-blend-mode: normal !important;
    background-color: white !important;
}

/* mix-blend-mode: difference handles visibility on all backgrounds, so no override needed */

/* White project cursor on Info page */
body:not(.home-theme) .project-image-cursor {
    background-color: var(--color-white);
    color: var(--color-black); /* Black text on white circle */
}

/* Default cursor when hovering over project image - completely hide immediately */
.default-cursor.hovering {
    opacity: 0 !important;
    visibility: hidden !important;
    display: none !important; /* Completely remove from rendering to prevent white circle flash */
    transform: translate3d(-50%, -50%, 0) scale(1.39) translateZ(0); /* Scale to 50px (50/36 = 1.39) */
    -webkit-transform: translate3d(-50%, -50%, 0) scale(1.39) translateZ(0); /* Safari-specific */
}

/* Default cursor when hovering over links - doubles in size */
.default-cursor.on-link {
    transform: translate3d(-50%, -50%, 0) scale(0.667) translateZ(0); /* Scale to 24px (24/36 = 0.667) */
    -webkit-transform: translate3d(-50%, -50%, 0) scale(0.667) translateZ(0); /* Safari-specific */
}

/* Custom cursor for ONMO project image - "view" text in black circle */
.project-image-cursor {
    position: fixed;
    pointer-events: none;
    font-family: 'Euclid Circular B', sans-serif;
    font-size: 13px;
    color: transparent; /* Hide text initially */
    background-color: var(--color-black);
    width: 12px; /* Start at small size */
    height: 12px;
    border-radius: 50%;
    border: none !important; /* Remove any border */
    outline: none !important; /* Remove any outline */
    box-shadow: none !important; /* Remove any box shadow */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999; /* Higher than default cursor to ensure it shows on top */
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) translateZ(0); /* Force hardware acceleration */
    -webkit-transform: translate3d(-50%, -50%, 0) translateZ(0); /* Safari-specific */
    transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                color 0s 0.4s; /* Delay color transition until after circle expands */
    will-change: transform, opacity, width, height; /* Optimize for smooth transitions */
    -webkit-backface-visibility: hidden; /* Prevent pixelation in Safari */
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased; /* Better text rendering */
    -webkit-transform-style: preserve-3d; /* Better 3D rendering in Safari */
    transform-style: preserve-3d;
    overflow: hidden; /* Ensure text doesn't overflow during size change */
}

/* Project cursor when visible - grows to full size */
.project-image-cursor.visible {
    opacity: 1;
    width: 50px; /* Change actual size instead of scaling */
    height: 50px;
    font-size: 13px; /* Keep font size consistent */
    color: var(--color-white); /* Show text after circle expands (transition delay handles timing) */
    transform: translate3d(-50%, -50%, 0); /* Keep translate, no scale */
    -webkit-transform: translate3d(-50%, -50%, 0); /* Safari-specific */
    border: none !important; /* Ensure no border when visible */
    outline: none !important; /* Ensure no outline when visible */
    box-shadow: none !important; /* Ensure no box shadow when visible */
    transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                color 0.2s ease 0.4s; /* Fade in text after 0.4s (when circle finishes expanding) */
}

/* Show text after circle expansion completes (0.4s delay) */
.project-image-cursor.visible::after {
    content: 'View';
    position: absolute;
    font-family: 'Euclid Circular B', sans-serif;
    font-size: 13px;
    color: var(--color-white);
    opacity: 0;
    transition: opacity 0.2s ease 0.4s; /* Fade in after 0.4s (when circle finishes expanding) */
    pointer-events: none;
    white-space: nowrap;
}

.project-image-cursor.visible::after {
    opacity: 1; /* Show text after delay */
}

/* Second image for hover effect - positioned at bottom initially */
.project-image-onmo-hover {
    position: absolute;
    bottom: 0; /* Align to bottom of container */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%) translateY(50px); /* Center horizontally and start 50px below final position (reduced travel) */
    width: 62.37%; /* Match BG image size - same percentage as other project images */
    height: auto; /* Maintain aspect ratio */
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Match BG approach */
    object-position: center 68px; /* Match BG positioning - 68px from top */
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Faster opacity fade-in */
    pointer-events: none;
    z-index: 5 !important; /* Above Lottie, below overlay */
    opacity: 0; /* Start invisible, fade in as it slides up */
}

/* On hover, slide the image up to 25px from top - leaving space at the top */
.project-image-onmo:hover .project-image-onmo-hover {
    transform: translateX(-50%) translateY(25px); /* Center horizontally and stop 25px from top */
    opacity: 1; /* Fade in as it slides up */
}

/* Black overlay on hover - 55% opacity */
.project-image-onmo::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(10, 10, 12, 0.55); /* 55% opacity black */
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Shorter duration for snappier feel */
    pointer-events: none;
    z-index: 10 !important; /* Above Lottie animation and hover image */
}

.project-image-onmo:hover::before {
    opacity: 1;
}


.project-image-natwest {
    height: 420px;
    width: 100%;

    /* PNG on the same gradient as the BT placeholder */
    background-image:
        url('images/index/natwest-index.png'),
        var(--gradient-horizontal);
    /* Keep the full image visible and centered horizontally */
    background-size: 59.5% auto, cover; /* 15% smaller than 70% (70% * 0.85 = 59.5%) */
    background-position: center center, center;
    background-repeat: no-repeat, no-repeat;
    transition: background-size 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; /* Same easing as other project images */
}

/* British Telecom project image */
.project-card-image-bt {
    background-image:
        url('images/index/BT-index.png'),
        var(--gradient-horizontal);
    background-size: 62.37% auto, cover; /* Another 10% smaller (69.3% * 0.9 = 62.37%) */
    background-position: center 43px, center; /* Position image 43px from top (25px up from 68px) */
    background-repeat: no-repeat, no-repeat;
    transition: background-size 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ============================================
   PROJECT CARD IMAGE HOVER EFFECTS
   ============================================ */

/* Black overlay on hover - 55% opacity for all project card images */
.project-card-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(10, 10, 12, 0.55); /* 55% opacity black */
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    pointer-events: none;
    z-index: 1;
}

.project-card-image:hover::before {
    opacity: 1;
}

/* Miscellaneous - no hover effects at all */
.project-card-image-misc {
    cursor: default; /* Use default cursor instead of custom */
}

.project-card-image-misc::before {
    display: none; /* Remove overlay for misc */
}

/* Smooth zoom in on hover - stops at 110%, zooms out on hover end */
/* BT has different dimensions, so adjust it separately */
.project-card-image-bt {
    background-size: 62.37% auto, cover; /* Another 10% smaller (69.3% * 0.9 = 62.37%) */
    background-position: center 43px, center; /* BT moved up 25px from others (43px instead of 68px) */
}

/* BG, Howsy, SeedLegals have equal top gap */
.project-card-image-british-gas,
.project-card-image-seedlegals,
.project-card-image-howsy {
    background-size: 62.37% auto, cover; /* Another 10% smaller (69.3% * 0.9 = 62.37%) */
    background-position: center 68px, center; /* Equal top gap for all - 68px from top */
}

.project-image-natwest {
    background-size: 64.26% auto, cover; /* 10% smaller than 71.4% (71.4% * 0.9 = 64.26%) */
}

.project-card-image-bt:hover {
    background-size: 68.6% auto, cover !important; /* Zoom to 68.6% (62.37% * 1.1) and stop */
}

.project-image-natwest:hover {
    background-size: 70.7% auto, cover !important; /* 10% smaller than 78.54% (78.54% * 0.9 = 70.7%) */
}

.project-card-image-british-gas:hover,
.project-card-image-seedlegals:hover,
.project-card-image-howsy:hover {
    background-size: 68.6% auto, cover !important; /* Zoom to 68.6% (62.37% * 1.1) and stop */
}

/* Miscellaneous - no zoom effect, just overlay */
.project-card-image-misc {
    background-size: 100% 100%, cover;
}

.project-content {
    grid-column: 7 / 11;
}

.project-title {
    font-family: 'PP Museum', sans-serif;
    font-weight: 300;
    font-size: 36px;
    letter-spacing: 4px;
    color: var(--color-white);
    margin-bottom: 12px;
}

.project-meta {
    color: var(--color-grey);
    margin-bottom: 16px;
}

.project-desc { margin-bottom: 20px; }

.project-link {
    text-decoration: none;
    color: var(--color-white);
    display: inline-flex;
    align-items: center;
    gap: 0; /* we will animate icon width to create space */
    position: relative;
    overflow: hidden;
}

.project-link-icon {
    display: inline-block;
    width: 0; /* start hidden with no space taken */
    height: 24px;
    margin-right: 0;
    opacity: 0;
    overflow: hidden;
    transition: width 0.2s ease, margin-right 0.2s ease, opacity 0.2s ease; /* 0.2s timing */
}

.project-link-text {
    display: inline-block;
    transition: none;
}

.project-link:hover .project-link-icon,
.project-link:focus .project-link-icon {
    width: 24px;        /* reveal icon */
    margin-right: 12px; /* match email-link arrow spacing */
    opacity: 1;
}

/* No text translation needed; icon growth pushes text */

/* ============================================
   TEXT STYLES
   ============================================ */
.text-tags,
.project-tags {
    font-family: 'PP Museum', sans-serif;
    font-weight: 300; /* Light */
    font-size: 16px;
    line-height: 16px; /* no extra leading */
    letter-spacing: 2px;
    color: var(--color-grey);
}

/* New reusable project title style */
.project-title {
    font-family: 'PP Museum', sans-serif;
    font-weight: 300; /* Light */
    font-size: 36px;
    letter-spacing: 2px;
    color: var(--color-white);
    margin-bottom: 40px; /* consistent spacing after title */
}

/* Reusable project content roles */
.project-client { /* maps to title styling */
    font-family: 'PP Museum', sans-serif;
    font-weight: 300;
    font-size: 32px;
    line-height: 40px;
    color: var(--color-white);
    margin-bottom: 40px; /* 40px after client */
}

.project-tags { /* maps to meta styling */
    margin-bottom: 8px; /* 8px between tags and copy */
}

.project-copy { /* maps to body copy styling */
    margin-bottom: 52px; /* 52px before CTA */
}

/* ============================================
   HOMEPAGE LIGHT THEME
   ============================================ */
.home-theme {
    background-color: var(--color-white);
    color: var(--color-black);
}

/* Override: Header must be transparent on video hero pages even with home-theme white background */
.home-theme.has-video-hero .header,
.home-theme.has-video-hero header.header,
.home-theme:has(.case-hero-video-wrapper) .header,
.home-theme:has(.case-hero-video-wrapper) header.header,
.home-theme .header-overlay-video,
.home-theme header.header-overlay-video {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Make previously-white elements render black on the light homepage */
.home-theme .logo,
.home-theme .nav-link,
.home-theme .project-title,
.home-theme .project-client,
.home-theme .project-copy,
.home-theme .project-link,
.home-theme .footer-cta,
.home-theme .footer .copy-link-btn,
.home-theme .contact-link,
.home-theme .project-link-text {
    color: var(--color-black);
}

/* ============================================
   LIGHTBOX
   ============================================ */
.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    cursor: none; /* Hide default cursor */
}

.lightbox-overlay.active {
    display: flex;
    opacity: 1;
}

.lightbox-container {
    position: relative;
    width: calc(100vw - 200px); /* Full width minus 100px margin on each side */
    height: calc(100vh - 200px); /* Full height minus 100px margin on each side */
    max-width: none;
    max-height: none;
    display: flex;
    align-items: flex-start; /* Align to top */
    justify-content: flex-start; /* Align to left */
    cursor: none; /* Hide default cursor */
    overflow: hidden;
    touch-action: none;
    padding: 0; /* No padding, margins handled by width/height calc */
    margin: 100px; /* Equal 100px margins on all sides */
}

.lightbox-container:active {
    cursor: none; /* Hide cursor when dragging */
}

.lightbox-container img {
    max-width: 100%; /* Fit within container */
    max-height: 100%; /* Fit within container */
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    transition: transform 0.1s ease-out;
    transform-origin: top left; /* Start from top left corner */
    user-select: none;
    pointer-events: none;
}

.lightbox-drag-text {
    position: absolute;
    top: -40px;
    left: 0;
    color: var(--color-white);
    font-family: 'PP Museum', sans-serif;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 1px;
    opacity: 0.7;
}

.lightbox-controls {
    position: absolute;
    top: -40px;
    right: 0;
    display: flex;
    align-items: center;
    gap: 20px;
}

.lightbox-close {
    color: var(--color-white);
    font-size: 32px;
    font-weight: 300;
    cursor: pointer;
    line-height: 1;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
    user-select: none;
}

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

.lightbox-trigger {
    transition: opacity 0.2s ease;
    position: relative;
    cursor: none; /* Hide default cursor */
}

.lightbox-trigger:hover {
    opacity: 1; /* Keep full opacity, overlay will provide the darkening */
}

.case-image-lightbox {
    position: relative;
    cursor: none; /* Hide default cursor */
}

/* Black overlay on hover for lightbox - 50% opacity */
.case-image-lightbox::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(10, 10, 12, 0.5); /* 50% opacity black */
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
}

.case-image-lightbox:hover::before {
    opacity: 1;
}

.lightbox-hover-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--color-grey);
    font-family: 'PP Museum', sans-serif;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 1px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 2; /* Above the overlay */
    text-align: center;
    white-space: nowrap;
}

.case-image-lightbox:hover .lightbox-hover-text {
    opacity: 1;
}

/* Figma embed styles */
.case-image-figma {
    position: relative;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    border-radius: 0;
    background-color: var(--color-light-grey);
}

.figma-embed {
    width: 100%;
    height: 800px; /* Default height - adjust as needed */
    border: none;
    display: block;
    background-color: var(--color-light-grey);
}

/* Responsive Figma embed - moved to breakpoint sections below */

/* Ensure nav separator (dot) is visible on light homepage */
.home-theme .nav-separator {
    color: var(--color-black);
}

/* Header and Footer brand should be grey on homepage */
.home-theme .logo,
.home-theme .footer .footer-logo {
    color: var(--color-grey);
}

/* Ensure CTA arrow retains intended grey unless overridden inline */
.home-theme .project-link-icon { color: var(--color-grey); }

/* Make asterisks visible on light theme */
.home-theme .case-responsibilities .client {
    color: var(--color-black);
}

/* Keep grey tokens intact (already styled via classes) */
/* Separators remain grey via var(--separator-color) */

/* CTA label matches email link styling */
.cta-label {
    font-family: 'Euclid Circular B', sans-serif;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 400; /* Regular weight */
}

/* ============================================
   TABLET BREAKPOINT (768px - 1023px)
   Tablets and small laptops
   ============================================ */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Header adjustments */
    .header .grid-container .logo,
    .header .grid-container .nav {
        grid-column: 1 / -1;
    }
    
    .header .grid-container .nav {
        justify-content: flex-start;
        margin-top: 1rem;
    }

    /* Main content padding */
    .main-content {
        padding: 32px 24px;
    }

    /* Contact links */
    .contact-links {
        flex-direction: column !important;
        gap: 16px !important; /* Gap between email and LinkedIn */
        align-items: flex-start !important;
    }

    /* Experience and Education items */
    .experience-item,
    .education-item {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .experience-item .job-title,
    .experience-item .year,
    .education-item .job-title,
    .education-item .year {
        text-align: left;
    }

    /* Footer adjustments */
    .footer-top,
    .footer-bottom {
        grid-template-columns: 1fr;
    }

    .footer-top-left,
    .footer-top-right,
    .footer-bottom-left,
    .footer-bottom-right {
        grid-column: 1 / -1;
    }

    .footer-top-right,
    .footer-bottom-right {
        text-align: left;
        margin-top: 16px;
    }

    /* Case study navigation */
    .case-sub-nav-bottom-item {
        height: 86px;
        padding: 0 20px;
    }
    
    .case-sub-nav-bottom-item .case-sub-nav-link-text {
        font-size: 16px;
        line-height: 16px;
    }

    /* Figma embed */
    .figma-embed {
        height: 600px;
    }
}

/* ============================================
   MOBILE BREAKPOINT (max-width: 767px)
   All mobile styles scoped here - desktop (1440px) remains unchanged
   ============================================ */
@media (max-width: 767px) {
    
    /* Hide custom cursor on mobile */
    .default-cursor,
    .project-image-cursor {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
    
    /* Show default cursor on mobile */
    body {
        cursor: auto !important;
        overflow-x: hidden;
        max-width: 100vw;
    }
    
    html {
        overflow-x: hidden;
        max-width: 100vw;
    }
    
    /* Header - Logo and Nav in one row */
    .header .grid-container {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px;
        height: auto;
    }
    
    .header .grid-container .logo {
        grid-column: auto;
        font-size: 14px;
        letter-spacing: 1px;
        flex-shrink: 0;
        line-height: 1;
        display: flex;
        align-items: center;
    }
    
    .header .grid-container .nav {
        grid-column: auto;
        display: flex;
        align-items: center;
        gap: 12px;
        justify-content: flex-end;
        margin-top: 0;
        font-size: 14px;
        letter-spacing: 1px;
        flex-shrink: 0;
        line-height: 1;
    }
    
    /* Ensure nav links have same font size and alignment */
    .header .grid-container .nav .nav-link {
        font-size: 14px;
        letter-spacing: 1px;
        line-height: 1;
        display: flex;
        align-items: center;
    }
    
    /* Ensure nav separator is aligned */
    .header .grid-container .nav .nav-separator {
        line-height: 1;
        display: flex;
        align-items: center;
    }
    
    /* Grid system - single column on mobile */
    .grid-container {
        padding: 0 16px !important; /* Match global side padding */
    }
    
    /* Main content - 16px side padding on mobile */
    .main-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px 16px !important; /* 10px top/bottom, 16px left/right */
        display: block !important; /* Disable grid on mobile */
        grid-template-columns: none !important;
        grid-template-rows: none !important;
    }
    
    /* Override grid-column for all direct children */
    .main-content > * {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Home intro - full width on mobile */
    .home-intro {
        grid-column: 1 / -1 !important;
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }
    
    /* Make separator gaps equal above and below */
    .home-intro .body:last-of-type {
        margin-bottom: 32px !important; /* Space above separator */
    }
    
    .home-separator {
        margin-top: 0 !important; /* No extra margin-top, spacing comes from body margin-bottom */
        margin-bottom: 32px !important; /* Same space below separator as above */
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }
    
    /* Projects section - mobile */
    .projects-section {
        margin-top: 0 !important; /* No margin-top to prevent extra spacing after separator */
        margin-bottom: 96px !important; /* Same gap as between project cards */
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        grid-template-columns: none !important;
        padding-top: 0 !important; /* No padding-top */
    }
    
    /* Show section title on mobile - ensure no extra spacing after separator */
    .projects-section .small-title {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 0 !important; /* No margin-top to prevent extra spacing after separator */
        margin-bottom: 32px !important;
        padding-top: 0 !important; /* No padding-top */
        grid-column: 1 / -1 !important;
    }
    
    /* Project rows - stacked vertically (ONMO main project) */
    .project-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px;
        margin-bottom: 0 !important;
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Override desktop grid-column for project-row on mobile */
    .projects-section .project-row {
        grid-column: 1 / -1 !important;
    }
    
    .project-image {
        width: 100% !important;
        max-width: 100% !important;
        aspect-ratio: 1 / 1 !important; /* Square container - height equals width */
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        grid-column: 1 / -1 !important;
        order: 1 !important; /* Image first */
        box-sizing: border-box !important;
        object-fit: contain !important; /* Show full image without cropping */
        display: flex !important;
        align-items: flex-end !important; /* Align content to bottom */
        justify-content: center !important; /* Center horizontally */
        position: relative !important;
        pointer-events: none !important; /* Make images not tappable/interactive */
        cursor: default !important; /* Show default cursor */
    }
    
    /* ONMO container - center content on both axes */
    .project-image-onmo {
        align-items: center !important; /* Center vertically */
        justify-content: center !important; /* Center horizontally */
    }
    
    /* Override desktop grid-column for project-image on mobile */
    .projects-section .project-image {
        grid-column: 1 / -1 !important;
    }
    
    /* Lottie container sizing - make it fit and visible */
    .project-image .lottie-container {
        position: relative !important; /* Override absolute positioning on mobile */
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 200px;
        max-height: 50vh !important; /* Limit to 50% of viewport height */
        box-sizing: border-box !important;
        display: flex !important;
        align-items: flex-end !important; /* Align to bottom of container */
        justify-content: center !important; /* Center horizontally */
        visibility: visible !important;
        opacity: 1 !important;
        z-index: auto !important;
        pointer-events: auto !important;
    }
    
    /* ONMO lottie container - centered on both axes */
    .project-image-onmo .lottie-container {
        position: relative !important; /* Override absolute positioning on mobile */
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important; /* Fill container height */
        min-height: 0 !important;
        max-height: none !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important; /* Center vertically */
        justify-content: center !important; /* Center horizontally */
        visibility: visible !important;
        opacity: 1 !important;
        z-index: auto !important;
        pointer-events: auto !important;
    }
    
    /* Ensure Lottie SVG/canvas is visible and sized correctly - 20% smaller on mobile */
    .project-image .lottie-container svg,
    .project-image .lottie-container canvas {
        width: 80% !important; /* 20% smaller (100% - 20% = 80%) */
        max-width: 80% !important;
        height: 80% !important; /* Also reduce height by 20% */
        max-height: 40vh !important; /* Also reduce max-height proportionally */
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        transform: none !important; /* Remove transform on mobile */
        object-fit: contain !important;
        margin: 0 auto !important; /* Center the smaller circle */
    }
    
    /* ONMO SVG/canvas - centered on both axes */
    .project-image-onmo .lottie-container svg,
    .project-image-onmo .lottie-container canvas {
        width: 61.2% !important; /* 20% smaller than desktop 76.5% (76.5% * 0.8 = 61.2%) */
        height: 61.2% !important;
        max-width: 61.2% !important;
        max-height: 61.2% !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        transform: none !important; /* Remove translateY transform */
        object-fit: contain !important;
        margin: auto !important; /* Center on both axes */
        align-self: center !important; /* Center within flex container */
    }
    
    /* More specific override for ONMO to ensure it's centered on both axes */
    .project-image-onmo .lottie-container {
        position: relative !important; /* Override absolute */
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important; /* Fill full container height */
        min-height: 0 !important; /* Override min-height: 420px */
        max-height: none !important;
        display: flex !important;
        align-items: center !important; /* Center vertically */
        justify-content: center !important; /* Center horizontally */
        margin: 0 !important;
        align-self: center !important; /* Center within parent flex container */
    }
    
    .project-image-onmo .lottie-container svg,
    .project-image-onmo .lottie-container canvas {
        width: 80% !important; /* 20% smaller - override desktop 76.5% */
        height: 80% !important; /* 20% smaller - override desktop 76.5% */
        max-width: 80% !important;
        max-height: 80% !important;
        transform: none !important; /* Remove translateY transform */
        position: relative !important;
        margin: 0 auto !important;
    }
    
    /* Ensure project-image-onmo container is visible */
    .project-image-onmo {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        min-height: 200px;
        position: relative !important;
    }
    
    /* Ensure images don't overflow */
    img, .project-image, .project-card-image {
        max-width: 100%;
        width: 100%;
        height: auto;
        box-sizing: border-box;
    }
    
    .project-content {
        width: 100% !important;
        max-width: 100% !important;
        grid-column: 1 / -1 !important;
        order: 2 !important; /* Content after image */
        display: flex !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
        min-width: 0 !important;
    }
    
    /* Override desktop grid-column for project-content on mobile */
    .projects-section .project-content {
        grid-column: 1 / -1 !important;
    }
    
    /* Reorder project content: small title, tags, description, view project */
    .project-content .project-title {
        order: 1;
        font-family: 'PP Museum', sans-serif;
        font-size: 32px;
        line-height: 36px;
        font-weight: 400;
        letter-spacing: 0;
        text-transform: uppercase;
        color: var(--color-black) !important;
        margin-bottom: 16px;
        margin-top: 0;
        max-width: 100%;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    .project-content .project-tags {
        order: 2;
        margin-bottom: 16px;
        max-width: 100%;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    .project-content .project-copy,
    .project-content .body {
        order: 3;
        margin-bottom: 24px;
        max-width: 100% !important;
        width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        color: var(--color-black) !important;
        font-size: 18px;
        line-height: 28px;
        box-sizing: border-box !important;
        overflow: visible !important;
        hyphens: auto !important;
    }
    
    /* Ensure all text in project-content wraps */
    .project-content * {
        max-width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    .project-content .project-link {
        order: 4;
        max-width: 100%;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }
    
    /* More projects section - mobile */
    .more-projects-section {
        margin-top: 48px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        display: block !important;
        grid-template-columns: none !important;
        grid-column: 1 / -1 !important;
    }
    
    .more-projects-section .section-heading,
    .more-projects-section .small-title {
        grid-column: 1 / -1 !important;
        margin-bottom: 32px !important;
        width: 100% !important;
        max-width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        display: block !important;
    }
    
    /* Project cards - stacked vertically */
    .project-card-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 76px !important; /* 96px - 20px = 76px */
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        grid-template-columns: none !important;
    }
    
    .project-card {
        grid-column: 1 / -1 !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 0 !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Override nth-child grid positioning on mobile */
    .project-card:nth-child(2n),
    .project-card:nth-child(odd),
    .project-card:nth-child(even) {
        grid-column: 1 / -1 !important;
    }
    
    .project-card-image {
        width: 100%;
        max-width: 100%;
        aspect-ratio: 1 / 1 !important; /* Square container - height equals width */
        height: auto !important;
        min-height: 0 !important;
        margin-bottom: 24px;
        padding: 32px !important; /* 32px spacing from all sides */
        box-sizing: border-box !important;
        display: block !important;
        background-repeat: no-repeat, no-repeat !important;
        pointer-events: none !important; /* Make images not tappable/interactive */
        cursor: default !important; /* Show default cursor */
        order: 1; /* Image first */
    }
    
    /* Make project image links not clickable on mobile */
    a.project-card-image,
    a.project-image,
    a.project-image-onmo {
        pointer-events: none !important; /* Disable all pointer interactions */
        cursor: default !important; /* Show default cursor */
    }
    
    /* NatWest image - center align both axes and increase size by 10% on mobile */
    .project-image-natwest {
        background-size: 70.686% auto, cover !important; /* 10% larger (64.26% * 1.1 = 70.686%) */
        background-position: center center, center center !important; /* Center on both axes */
    }
    
    .project-image-natwest:hover {
        background-size: 77.77% auto, cover !important; /* 10% larger hover (70.7% * 1.1 = 77.77%) */
        background-position: center center, center center !important; /* Center on both axes */
    }
    
    /* BT image - pushed down with space at top on mobile */
    .project-card-image-bt {
        background-size: 62.37% auto, cover !important;
        background-position: center 40px, center center !important; /* 40px from top */
    }
    
    /* BG, SL, HOWSY images - pushed down with space at top on mobile */
    .project-card-image-british-gas {
        background-image: url('images/index/BG-index.png'), var(--gradient-horizontal) !important;
        background-size: 62.37% auto, cover !important;
        background-position: center 40px, center center !important; /* 40px from top */
    }
    
    .project-card-image-seedlegals {
        background-image: url('images/index/SL-index.png'), var(--gradient-horizontal) !important;
        background-size: 62.37% auto, cover !important;
        background-position: center 40px, center center !important; /* 40px from top */
    }
    
    .project-card-image-howsy {
        background-image: url('images/index/howsy-index.png'), var(--gradient-horizontal) !important;
        background-size: 62.37% auto, cover !important;
        background-position: center 40px, center center !important; /* 40px from top */
    }
    
    /* Remove all interactive states (hover, active, focus) from project images on mobile */
    .project-card-image-bt:hover,
    .project-card-image-bt:active,
    .project-card-image-bt:focus,
    .project-card-image-british-gas:hover,
    .project-card-image-british-gas:active,
    .project-card-image-british-gas:focus,
    .project-card-image-seedlegals:hover,
    .project-card-image-seedlegals:active,
    .project-card-image-seedlegals:focus,
    .project-card-image-howsy:hover,
    .project-card-image-howsy:active,
    .project-card-image-howsy:focus,
    .project-image-natwest:hover,
    .project-image-natwest:active,
    .project-image-natwest:focus,
    .project-image-onmo:hover,
    .project-image-onmo:active,
    .project-image-onmo:focus {
        background-size: inherit !important; /* Keep same size */
        transform: none !important; /* No transform */
        opacity: 1 !important; /* Keep fully visible */
    }
    
    .project-image-onmo:hover .lottie-container,
    .project-image-onmo:active .lottie-container,
    .project-image-onmo:focus .lottie-container {
        transform: none !important; /* No transform */
        opacity: 1 !important; /* Keep visible */
    }
    
    .project-card-content {
        width: 100%;
        max-width: 100%;
        order: 2; /* Content after image */
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
    }
    
    /* Reorder project card content: small title, tags, description, view project */
    .project-card-content .project-title {
        order: 1;
        font-family: 'PP Museum', sans-serif;
        font-size: 32px;
        line-height: 36px;
        font-weight: 400;
        letter-spacing: 0;
        text-transform: uppercase;
        color: var(--color-black) !important;
        margin-bottom: 16px;
        margin-top: 0;
        max-width: 100%;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    .project-card-content .project-tags {
        order: 2;
        margin-bottom: 16px;
        max-width: 100%;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    .project-card-content .project-copy {
        order: 3;
        margin-bottom: 24px;
        max-width: 100%;
        word-wrap: break-word;
        overflow-wrap: break-word;
        color: var(--color-black) !important;
        font-size: 18px;
        line-height: 28px;
    }
    
    .project-card-content .project-link {
        order: 4;
        max-width: 100%;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }
    
    /* Show arrow inline with text on mobile - always visible */
    .project-card-content .project-link-icon,
    .project-content .project-link-icon {
        display: inline-block !important;
        width: 24px !important;
        height: 24px !important;
        margin-right: 8px !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    .project-card-content .project-link-text,
    .project-content .project-link-text {
        display: inline-block;
    }
    
    /* Scale up body text for mobile */
    body {
        font-size: 23px !important; /* Scale up from 21px */
        line-height: 30px !important;
    }
    
    .body {
        font-size: 23px !important; /* Scale up from 21px */
        line-height: 30px !important;
    }
    
    .body-large {
        font-size: 26px !important; /* Scale up from 24px */
        line-height: 40px !important;
    }
    
    /* Scale up all body copies on info page for mobile */
    .intro-section .body,
    .intro-section p,
    .intro-section .body-large,
    .intro-section .body-medium,
    .intro-section .body-small {
        font-size: 23px !important; /* Scale up from 21px */
        line-height: 30px !important;
    }
    
    /* Scale up body-large on info page */
    .intro-section .body-large {
        font-size: 26px !important; /* Scale up from 24px */
        line-height: 40px !important;
    }
    
    /* Scale up expertise section text for mobile */
    .expertise-section .expertise-title-container .expertise,
    .expertise-title-container .expertise {
        font-size: 23px !important; /* Scale up from 21px */
        line-height: 30px !important;
    }
    
    .expertise-section .expertise-copy-container,
    .expertise-copy-container {
        font-size: 23px !important; /* Scale up from 21px */
        line-height: 30px !important;
    }
    
    /* Scale up experience section text for mobile */
    .experience-section .experience-item .client,
    .experience-section .experience-item .job-title,
    .experience-section .experience-item .year,
    .experience-item .client,
    .experience-item .job-title,
    .experience-item .year {
        font-size: 23px !important; /* Scale up from 18px */
        line-height: 30px !important;
    }
    
    /* Scale up education section text for mobile */
    .education-section .education-item .client,
    .education-section .education-item .job-title,
    .education-section .education-item .year,
    .education-item .client,
    .education-item .job-title,
    .education-item .year {
        font-size: 23px !important; /* Scale up from 18px */
        line-height: 30px !important;
    }
    
    .section-heading {
        font-size: 14px;
        line-height: 14px;
        letter-spacing: 2px;
        margin-bottom: 24px;
    }
    
    .small-title {
        font-size: 14px;
        line-height: 14px;
        letter-spacing: 1px;
    }
    
    .body {
        font-size: 23px !important; /* Scale up from 21px */
        line-height: 30px !important;
        max-width: 100%;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    .body-large {
        font-size: 26px !important; /* Scale up from 24px */
        line-height: 40px !important;
    }
    
    .body-medium {
        font-size: 23px !important; /* Scale up from 18px */
        line-height: 30px !important;
    }
    
    .body-small {
        font-size: 23px !important; /* Scale up from 16px */
        line-height: 30px !important;
    }
    
    /* Ensure all text content stays within bounds and wraps */
    p, .body, .body-large, .project-copy, .project-tags, .text-tags {
        max-width: 100% !important;
        width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        box-sizing: border-box !important;
        hyphens: auto;
        overflow: visible !important;
    }
    
    /* Ensure all headings wrap properly */
    h1, h2, h3, h4, h5, h6, .project-title, .small-title, .section-heading {
        max-width: 100% !important;
        width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }
    
    /* Ensure all containers allow text wrapping */
    .project-content, .project-card-content, .project-row, .project-card {
        min-width: 0 !important; /* Allow flex items to shrink below content size */
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Force text wrapping on all text elements */
    p, span, div, a, h1, h2, h3, h4, h5, h6, .body, .body-large, .project-copy, .project-tags, .text-tags {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
    }
    
    /* Ensure project cards are visible */
    .project-card {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Ensure project card content is visible and wraps */
    .project-card-content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    
    .project-title {
        font-size: 32px;
        line-height: 36px;
    }
    
    /* Case study mobile optimizations */
    .case-intro {
        margin-bottom: 32px;
    }
    
    .case-project-details {
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin-top: 24px;
    }
    
    .case-detail-item {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    
    .case-content-section {
        margin-bottom: 32px;
    }
    
    .case-image img {
        width: 100%;
        height: auto;
    }
    
    /* Case hero images - ensure they fit on mobile */
    .case-hero {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .case-hero-inner {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 200px;
        max-height: 50vh !important; /* Limit height to fit screen */
        padding: 0 10px !important; /* Add horizontal padding */
        box-sizing: border-box !important;
    }
    
    /* App redesign page main image - remove scale transform on mobile */
    .case-hero-image-new-app {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 50vh !important;
        transform: none !important; /* Remove scale transform on mobile */
        transform-origin: center center !important;
        background-size: contain !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        box-sizing: border-box !important;
    }
    
    /* All case hero images should fit on mobile */
    .case-hero-image {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 50vh !important;
        transform: none !important; /* Remove any transforms on mobile */
        background-size: contain !important;
        background-position: center center !important;
        box-sizing: border-box !important;
    }
    
    /* Info page sections - Expertise, Experience, Education */
    .expertise-section,
    .experience-section,
    .education-section {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important; /* Disable grid on mobile */
        grid-template-columns: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }
    
    .expertise-section .section-heading,
    .experience-section .section-heading,
    .education-section .section-heading {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 24px !important;
    }
    
    /* Expertise section - title followed by wrapped body */
    .expertise-list {
        display: block !important; /* Disable contents display */
        width: 100% !important;
        max-width: 100% !important;
        grid-column: 1 / -1 !important;
    }
    
    .expertise-item {
        display: block !important; /* Disable contents display */
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 32px !important;
    }
    
    .expertise-title-container {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
        margin-bottom: 12px !important;
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: 100% !important;
        flex-wrap: wrap !important;
    }
    
    .expertise-title-container .expertise {
        font-size: 18px !important;
        line-height: 24px !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    .expertise-copy-container {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: 100% !important;
        display: block !important; /* Remove line-clamp on mobile */
        -webkit-line-clamp: none !important;
        line-clamp: none !important;
        -webkit-box-orient: unset !important;
        overflow: visible !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        font-size: 16px !important;
        line-height: 24px !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* Experience section - make it fit on screen */
    .experience-list {
        display: block !important; /* Disable contents display */
        width: 100% !important;
        max-width: 100% !important;
        grid-column: 1 / -1 !important;
    }
    
    .experience-item {
        display: block !important; /* Disable contents display */
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 24px !important;
        padding-bottom: 24px !important;
        border-bottom: 1px solid var(--separator-color) !important;
    }
    
    .experience-item:last-child {
        border-bottom: none !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    
    .experience-item::after {
        display: none !important; /* Hide the grid-based separator */
    }
    
    .experience-item .client,
    .experience-item .job-title,
    .experience-item .year {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: 100% !important;
        text-align: left !important;
        padding-bottom: 8px !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        font-size: 16px !important;
        line-height: 24px !important;
    }
    
    .experience-item .client {
        font-weight: 400 !important;
        color: var(--color-white) !important;
    }
    
    .experience-item .job-title {
        color: var(--color-grey) !important;
    }
    
    .experience-item .year {
        color: var(--color-grey) !important;
    }
    
    /* Education section - make it fit on screen */
    .education-list {
        display: block !important; /* Disable contents display */
        width: 100% !important;
        max-width: 100% !important;
        grid-column: 1 / -1 !important;
    }
    
    .education-item {
        display: block !important; /* Disable contents display */
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 24px !important;
        padding-bottom: 24px !important;
        border-bottom: 1px solid var(--separator-color) !important;
    }
    
    .education-item:last-child {
        border-bottom: none !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    
    .education-item::after {
        display: none !important; /* Hide the grid-based separator */
    }
    
    .education-item .client,
    .education-item .job-title,
    .education-item .year {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: 100% !important;
        text-align: left !important;
        padding-bottom: 8px !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        font-size: 16px !important;
        line-height: 24px !important;
    }
    
    .education-item .client {
        font-weight: 400 !important;
        color: var(--color-white) !important;
    }
    
    .education-item .job-title {
        color: var(--color-grey) !important;
    }
    
    .education-item .year {
        color: var(--color-grey) !important;
    }
    
    /* Contact links on Info page - stack vertically with gap */
    .contact-links {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important; /* Gap between email and LinkedIn */
        align-items: flex-start !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 24px !important;
    }
    
    .contact-link-wrapper,
    .contact-link {
        width: auto !important;
        max-width: 100% !important;
    }
    
    /* Highlighted content boxes - ensure text wraps and fits on mobile */
    .case-highlighted-content,
    .case-highlighted-content-centered {
        width: 100% !important;
        max-width: 100% !important;
        padding: 32px 12px !important; /* 12px horizontal padding */
        display: block !important; /* Disable grid on mobile */
        grid-template-columns: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }
    
    .case-highlighted-content > *,
    .case-highlighted-content-centered > * {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Ensure all text in highlighted boxes wraps */
    .case-highlighted-content *,
    .case-highlighted-content-centered * {
        max-width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        box-sizing: border-box !important;
    }
    
    /* Highlighted lists - ensure they wrap */
    .case-highlighted-lists-side-by-side {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .case-highlighted-list-group {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .case-highlighted-list {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .case-highlighted-list li {
        width: 100% !important;
        max-width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        box-sizing: border-box !important;
    }
    
    .case-highlighted-list .body {
        max-width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
    }
    
    /* Case study footer navigation - match content padding (16px) */
    .case-sub-nav-bottom-container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 16px !important; /* Match content side padding (16px) */
        box-sizing: border-box !important;
        margin: 0 !important;
    }
    
    .case-sub-nav-bottom {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        grid-template-columns: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .case-sub-nav-bottom-inner {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        padding-top: 0 !important; /* Ensure no top padding on container */
        margin: 0 !important;
        margin-top: 0 !important; /* Ensure no top margin on container */
    }
    
    /* Ensure all nav items have equal spacing - no top/bottom margins */
    .case-sub-nav-bottom-item {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* Fix overview row spacing - ensure separator above has same bottom margin as separator below */
    .case-sub-nav-bottom-separator-results {
        margin-top: 0 !important; /* Remove top margin */
        margin-bottom: 0 !important; /* Remove bottom margin to match spacing below overview */
    }
    
    /* Ensure separator above overview row doesn't create extra space */
    .case-sub-nav-bottom-header-results + .case-sub-nav-bottom-separator-results {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* Ensure first nav item (overview) has no extra top spacing */
    .case-sub-nav-bottom-separator-results + .case-sub-nav-bottom-inner .case-sub-nav-bottom-item:first-child {
        margin-top: 0 !important;
    }
    
    /* Header - transparent background, doesn't overlay images - override ALL other rules with maximum specificity */
    html body .header,
    html body header.header,
    html body.home-theme .header,
    html body.home-theme header.header,
    body.home-theme .header,
    body.home-theme header.header,
    body .header,
    body header.header,
    .header,
    header.header {
        background-color: transparent !important;
        background: transparent !important;
        background-image: none !important;
        -webkit-background-color: transparent !important;
        -moz-background-color: transparent !important;
        z-index: 1 !important; /* Above images but not overlaying */
        position: relative !important;
        padding-top: 0 !important; /* Remove top padding on mobile to eliminate gap */
        margin-bottom: 0 !important; /* Ensure no margin below header */
    }
    
    /* Override any ::before or ::after pseudo-elements */
    html body .header::before,
    html body .header::after,
    html body header.header::before,
    html body header.header::after,
    body.home-theme .header::before,
    body.home-theme .header::after,
    .header::before,
    .header::after {
        background-color: transparent !important;
        background: transparent !important;
        background-image: none !important;
        display: none !important;
    }
    
    /* Ensure header grid-container is also transparent with maximum specificity */
    html body .header .grid-container,
    html body header.header .grid-container,
    html body.home-theme .header .grid-container,
    html body.home-theme header.header .grid-container,
    body.home-theme .header .grid-container,
    body.home-theme header.header .grid-container,
    body .header .grid-container,
    body header.header .grid-container,
    .header .grid-container,
    header.header .grid-container {
        background-color: transparent !important;
        background: transparent !important;
        background-image: none !important;
        -webkit-background-color: transparent !important;
        -moz-background-color: transparent !important;
    }
    
    /* Override any child elements that might have backgrounds */
    html body .header *,
    html body header.header *,
    html body.home-theme .header *,
    html body.home-theme header.header *,
    body.home-theme .header *,
    body.home-theme header.header *,
    body .header *,
    body header.header *,
    .header *,
    header.header * {
        background-color: transparent !important;
        background: transparent !important;
        background-image: none !important;
    }
    
    /* Case hero - simple styles matching working backup */
    .case-hero {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .case-hero-inner {
        width: 100% !important;
        max-width: 100% !important;
        height: 200px !important; /* Fixed height so absolute children are visible */
        min-height: 200px !important;
        max-height: 50vh !important; /* Limit height to fit screen */
        padding: 0 16px !important; /* Add horizontal padding (changed from 10px to 16px) */
        box-sizing: border-box !important;
        position: relative !important; /* Position context for absolute children */
    }
    
    /* App redesign - add bottom gap after image */
    .case-hero-inner:has(.case-hero-image-new-app) {
        height: 220px !important; /* 200px + 20px gap */
        min-height: 220px !important;
    }
    
    /* App redesign image - leave 20px gap at bottom */
    .case-hero-inner:has(.case-hero-image-new-app) .case-hero-image-new-app {
        height: calc(100% - 20px) !important; /* Leave 20px at bottom */
    }
    
    /* App redesign page main image - remove scale transform on mobile */
    .case-hero-image-new-app {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 50vh !important;
        transform: none !important; /* Remove scale transform on mobile */
        transform-origin: center center !important;
        background-size: contain !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        box-sizing: border-box !important;
    }
    
    /* All case hero images should fit on mobile */
    .case-hero-image {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 50vh !important;
        transform: none !important; /* Remove any transforms on mobile */
        background-size: contain !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        box-sizing: border-box !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Video wrapper pages - need special handling for full-width images and videos */
    .case-hero-video-wrapper {
        width: 100% !important;
        margin-top: 0 !important; /* Remove desktop negative margin on mobile */
        padding-top: 0 !important;
        position: relative !important;
        z-index: 0 !important; /* Below header */
    }
    
    .case-hero-video-wrapper .case-hero-inner-video {
        width: 100% !important;
        max-width: 100% !important;
        height: 200px !important; /* Fixed height so absolute children are visible */
        min-height: 200px !important;
        max-height: 50vh !important;
        margin-top: 0 !important; /* Remove desktop negative margin on mobile */
        padding: 0 16px !important; /* Side padding for images */
        box-sizing: border-box !important;
        position: relative !important; /* Position context for absolute children */
    }
    
    /* Video wrapper with actual video element - no side padding, full width, at top */
    .case-hero-video-wrapper:has(.case-hero-video) .case-hero-inner-video {
        padding: 0 !important; /* No padding for video - full width */
        overflow: hidden !important; /* Hide video overflow */
        margin-top: 0 !important; /* Ensure at top */
        padding-top: 0 !important;
    }
    
    /* Video element - ensure it's visible and positioned at absolute top */
    .case-hero-video-wrapper .case-hero-video {
        width: 100% !important;
        height: 100% !important; /* Fill parent container */
        object-fit: cover !important;
        object-position: center center !important;
        position: absolute !important; /* Absolute positioning like desktop */
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 0 !important; /* Below header */
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Video wrapper images - ensure they're visible and use desktop background-image */
    .case-hero-video-wrapper .case-hero-image {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important; /* Fill parent container */
        min-height: 200px !important;
        max-height: 50vh !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        background-size: cover !important; /* Keep cover for video-wrapper images */
        background-position: center center !important;
        background-repeat: no-repeat !important;
        box-sizing: border-box !important;
        position: absolute !important; /* Keep absolute like desktop */
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        /* Don't override background-image - inherit from desktop */
    }
    
    /* App redesign image - ensure it's visible */
    .case-hero-image-new-app {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important; /* Fill parent container */
        min-height: 200px !important;
        max-height: 50vh !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        background-size: contain !important; /* Use contain for non-video-wrapper images */
        background-position: center center !important;
        background-repeat: no-repeat !important;
        box-sizing: border-box !important;
        position: absolute !important; /* Keep absolute like desktop */
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important; /* Remove desktop transform on mobile */
        /* Don't override background-image - inherit from desktop */
    }
    
    /* Website redesign image - ensure it's visible */
    .case-hero-image-new-web {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important; /* Fill parent container */
        min-height: 200px !important;
        max-height: 50vh !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        background-size: contain !important; /* Use contain for non-video-wrapper images */
        background-position: center center !important;
        background-repeat: no-repeat !important;
        box-sizing: border-box !important;
        position: absolute !important; /* Keep absolute like desktop */
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important; /* Remove desktop transform on mobile */
        /* Don't override background-image - inherit from desktop */
    }
    
    /* Website redesign - add bottom gap after image */
    .case-hero-inner:has(.case-hero-image-new-web) {
        height: 220px !important; /* 200px + 20px gap */
        min-height: 220px !important;
    }
    
    /* Website redesign image - leave 20px gap at bottom */
    .case-hero-inner:has(.case-hero-image-new-web) .case-hero-image-new-web {
        height: calc(100% - 20px) !important; /* Leave 20px at bottom */
    }
    
    /* Design foundations image - ensure it's visible, 20% smaller with side gaps */
    .case-hero-image-design-foundations {
        width: 80% !important; /* 20% smaller (100% - 20% = 80%) */
        max-width: 80% !important;
        height: 100% !important; /* Fill parent container */
        min-height: 200px !important;
        max-height: 50vh !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        background-size: contain !important; /* Use contain for non-video-wrapper images */
        background-position: center center !important;
        background-repeat: no-repeat !important;
        box-sizing: border-box !important;
        position: absolute !important; /* Keep absolute like desktop */
        top: 0 !important;
        left: 50% !important; /* Center horizontally */
        transform: translateX(-50%) !important; /* Center horizontally */
        right: auto !important;
        /* Don't override background-image - inherit from desktop */
    }
    
    /* Design foundations - add bottom gap after image */
    .case-hero-inner:has(.case-hero-image-design-foundations) {
        height: 220px !important; /* 200px + 20px gap */
        min-height: 220px !important;
    }
    
    /* Design foundations image - leave 20px gap at bottom */
    .case-hero-inner:has(.case-hero-image-design-foundations) .case-hero-image-design-foundations {
        height: calc(100% - 20px) !important; /* Leave 20px at bottom */
    }
    
    /* Ensure header is above video-wrapper on mobile (only for video pages) */
    /* Regular pages keep z-index: 1 (set at line 7126) to not clip animations */
    body:has(.case-hero-video-wrapper) .header,
    body.home-theme:has(.case-hero-video-wrapper) .header {
        z-index: 10 !important; /* Above video */
        position: relative !important;
    }
    
    /* Header row container on mobile */
    .case-sub-nav-bottom-header-results {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 48px !important; /* 48px space after continue viewing before back to top (moved up 24px) */
        margin-bottom: 16px !important;
    }
    
    .case-sub-nav-bottom-title,
    .case-sub-nav-bottom-title-results {
        font-size: 14px !important; /* Smaller title */
        line-height: 14px !important;
        letter-spacing: 1px !important;
        margin-bottom: 0 !important; /* No margin, gap handled by parent */
    }
    
    .case-sub-nav-back-to-top {
        font-size: 14px !important;
        line-height: 14px !important;
        letter-spacing: 1px !important;
        margin-bottom: 8px !important; /* Bring back to top closer to separator below */
    }
    
    .case-sub-nav-bottom-separator {
        margin: 0 0 16px 0 !important; /* Remove top margin, back to top handles spacing */
    }
    
    /* Separator-results handled separately above to fix overview spacing */
    
    .case-sub-nav-bottom-item {
        height: 60px !important; /* Fixed height for all items */
        min-height: 60px !important; /* Ensure minimum height */
        max-height: 60px !important; /* Ensure maximum height */
        padding: 0 !important; /* No padding, margins handled by container */
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        overflow: visible !important; /* Allow arrows to be visible */
        gap: 8px !important; /* Space between text and arrow */
    }
    
    /* Ensure active/overview row has same height as others */
    .case-sub-nav-bottom-item.active {
        height: 60px !important;
        min-height: 60px !important;
        max-height: 60px !important;
    }
    
    /* Ensure active item dash doesn't affect height */
    .case-sub-nav-bottom-item.active .case-sub-nav-link-text::before {
        line-height: 16px !important; /* Match text line-height */
        vertical-align: middle !important;
    }
    
    .case-sub-nav-bottom-item .case-sub-nav-link-text {
        font-size: 16px !important; /* Bigger text */
        line-height: 16px !important;
        letter-spacing: 1px !important;
        font-weight: 500 !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        flex: 1 !important;
        min-width: 0 !important; /* Allow text to shrink */
    }
    
    .case-sub-nav-bottom-item .case-sub-nav-link-go-top {
        font-size: 16px !important;
        line-height: 16px !important;
        letter-spacing: 1px !important;
    }
    
    .case-sub-nav-bottom-item .case-sub-nav-link-icon {
        width: 20px !important; /* Bigger arrow to ensure visibility */
        height: 20px !important;
        flex-shrink: 0 !important; /* Don't shrink arrow */
        position: static !important; /* Remove absolute positioning */
        left: auto !important;
        opacity: 1 !important; /* Always visible on mobile */
        margin-left: 0 !important;
        display: inline-flex !important; /* Ensure it's visible */
        visibility: visible !important;
    }
    
    /* Hide arrow animation on mobile - just show static arrow */
    .case-sub-nav-bottom-item:hover .case-sub-nav-link-icon,
    .case-sub-nav-bottom-item .case-sub-nav-link-icon {
        left: auto !important;
        transform: none !important;
        margin-left: 0 !important;
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Remove hover gradient effect on mobile - keep links functional */
    .case-sub-nav-bottom-item:hover {
        background: transparent !important; /* No gradient on hover */
        background-color: transparent !important;
        background-image: none !important;
        color: inherit !important;
    }
    
    .case-sub-nav-bottom-item:hover .case-sub-nav-link-text {
        margin-left: 0 !important; /* No margin shift on mobile */
        color: inherit !important; /* Keep original text color */
    }
    
    .case-sub-nav-bottom-item:hover .case-sub-nav-link-go-top {
        color: inherit !important; /* Keep original text color */
    }
    
    .case-sub-nav-bottom-item.active:hover {
        background-color: var(--color-black) !important; /* Keep black background for active */
        color: inherit !important;
    }
    
    .case-sub-nav-bottom-item.active:hover .case-sub-nav-link-text {
        margin-left: 0 !important;
        color: var(--color-grey) !important; /* Keep grey for active */
    }
    
    .case-sub-nav-bottom-item.active:hover .case-sub-nav-link-icon {
        left: auto !important;
        transform: none !important;
        margin-left: 0 !important;
        position: static !important;
    }
    
    /* Footer mobile - stack all items vertically */
    .footer {
        padding: 32px 10px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .footer .grid-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important; /* 10px gap between all items */
        grid-template-columns: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .footer-top {
        display: flex !important;
        flex-direction: row !important; /* Logo and London on same row */
        justify-content: space-between !important;
        align-items: center !important;
        gap: 0 !important; /* No gap, spacing handled by parent */
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 12px 0 0 0 !important; /* 12px top padding before logo */
    }
    
    .footer-top-left {
        grid-column: auto !important;
        width: auto !important;
        max-width: none !important;
        text-align: left !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .footer-top-right {
        grid-column: auto !important;
        width: auto !important;
        max-width: none !important;
        text-align: right !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .footer-separator {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        margin: 10px 0 !important; /* 10px before and after */
        padding: 0 !important;
    }
    
    .footer-bottom {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important; /* 10px gap between items */
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: 100% !important;
        text-align: left !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .footer-bottom-left {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: 100% !important;
        text-align: left !important;
    }
    
    .footer-bottom-right {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: 100% !important;
        text-align: left !important; /* Email link aligned left */
        margin-top: 32px !important; /* 32px space above email link */
        display: flex !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
        padding: 0 0 12px 0 !important; /* 12px bottom padding after email link */
    }
    
    .footer-bottom-right .contact-link-wrapper {
        text-align: left !important;
        display: flex !important;
        justify-content: flex-start !important;
        align-items: center !important;
        width: auto !important;
        max-width: 100% !important;
    }
    
    .footer-bottom-right .contact-link {
        text-align: left !important;
        display: flex !important;
        justify-content: flex-start !important;
        align-items: center !important;
    }
    
    .footer-email-wrapper,
    .footer-email {
        text-align: left !important;
        justify-content: flex-start !important;
    }
    
    .footer-location {
        text-align: right !important; /* Right align London 2025 */
        width: auto !important;
        max-width: none !important;
    }
    
    /* Ensure footer-top-right content is right-aligned */
    .footer-top-right .footer-location {
        text-align: right !important;
        display: inline-flex !important;
    }
    
    /* Dark footer in container - match content padding */
    .case-sub-nav-bottom-container .footer.case-footer-dark {
        padding: 32px 0 !important; /* Remove side padding - container handles it */
    }
    
    .case-sub-nav-bottom-container .footer.case-footer-dark .grid-container {
        padding: 0 !important; /* Remove grid-container padding - container handles it */
    }
    
    /* Case footer dark - ensure same bottom spacing as Info/Index pages */
    .case-footer-dark {
        padding-bottom: 32px !important; /* Match regular footer bottom padding */
        background-color: transparent !important;
    }
    
    /* Case footer dark bottom right should have 12px bottom padding like regular footer */
    .case-footer-dark .footer-bottom-right {
        padding: 0 0 12px 0 !important; /* 12px bottom padding after email link - matches regular footer */
    }
    
    /* Ensure container extends to cover footer padding on mobile - match Info/Index spacing */
    .case-sub-nav-bottom-container:last-child {
        padding-bottom: 0 !important; /* Footer handles its own padding */
        margin-bottom: 0 !important;
    }
    
    /* Ensure no margin-bottom on footer inside container on mobile */
    .case-sub-nav-bottom-container .footer,
    .case-sub-nav-bottom-container .case-footer-dark {
        margin-bottom: 0 !important;
    }
    
    /* Spacing adjustments for mobile */
    .spacing-token-2xl {
        padding-top: 32px;
    }
    
    .spacing-token-3xl {
        padding-top: 48px;
    }
    
    .spacing-token-4xl {
        padding-top: 64px;
    }
    
    .spacing-token-5xl {
        padding-top: 80px;
    }

    /* Figma embed */
    .figma-embed {
        height: 500px;
    }
}