/*
Theme Name: MI-NO-KA Theme
Theme URI: https://mi-no-ka.studio
Author: Milan Nowoitnick Kampfer
Author URI: https://mi-no-ka.studio
Description: portfolio theme for MI-NO-KA
Version: 1.0
Text Domain: minoka
*/

/* ==========================================================================
   Font Face — Geist Mono (local)
   ========================================================================== */
@font-face {
    font-family: 'Geist Mono';
    src: url('fonts/Geist_Sans_Mono_Pixel/GeistMono[wght].woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Geist Mono';
    src: url('fonts/Geist_Sans_Mono_Pixel/GeistMono-Italic[wght].woff2') format('woff2');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}


/* ==========================================================================
   Font Face — Source Serif 4 (variable, local)
   ========================================================================== */
@font-face {
    font-family: 'Source Serif 4';
    src: url('fonts/Source_Serif_4/source-serif-4-variable.woff2') format('woff2');
    font-weight: 200 400 900;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   Font Face — Bebas Neue (local)
   ========================================================================== */
@font-face {
    font-family: 'Bebas Neue';
    src: url('fonts/Bebas Neue/bebas-neue-v16-latin-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   Breakpoints
   ----------------------------------------------------------------------------
   This theme uses three width breakpoints. CSS can't yet use custom properties
   in @media queries, so these are documentation values — write the raw px in
   each @media rule, but only ever pick from this set:

     480px   small phone
     768px   tablet portrait / large phone
    1024px   tablet landscape / small laptop
    1440px   large desktop (reserved — no rules use it yet)

   Plus feature queries when meaningful:
     (hover: hover) and (pointer: fine)
     (prefers-reduced-motion: reduce)

   Any new rule outside this set should be challenged in review.
   ========================================================================== */

/* ==========================================================================
   Variables
   ========================================================================== */
:root {
    /* Colors */
    --color-primary: #151515;
    --color-secondary: #FFFFFF;
    --color-grid: #E5E5E5;
    --color-dark: #1C1C1C;
    --color-surface: #F0EFEF;
    --color-accent: #4caf50;

    /* Borders */
    --border-thin: 0.5px solid rgba(28, 28, 28, 0.2);
    --border-thin-light: 0.5px solid rgba(255, 255, 255, 0.2);

    /* Fonts */
    --font-heading: 'Bebas Neue', sans-serif;
    --font-body: 'Source Serif 4', serif;
    --font-mono: 'Geist Mono', monospace;

    /* Typography */
    --opsz-copy: 30;
    --size-label: 13px;

    /* Spacing */
    --container-padding: 16px;
    --spacing-unit: 8px;

    /* Layout */
    --header-height: 72px;

    /* Easing */
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-gravity: cubic-bezier(0.16, 1, 0.3, 1);   /* Strong decel — body committing to a landing */
    --ease-in-out: cubic-bezier(0.37, 0, 0.63, 1);   /* Refined sine — not aggressive */
    --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ==========================================================================
   Reset & Base
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-body);
    font-weight: 400;
    font-variation-settings: 'opsz' var(--opsz-copy);
    line-height: 1.5;
    background-color: var(--color-secondary);
    color: var(--color-primary);
    -webkit-font-smoothing: antialiased;
    /* clip instead of hidden: CSS spec forces overflow-y to computed 'auto' whenever
       overflow-x is hidden (and overflow-y is visible), making body a scroll container.
       On iOS Safari this breaks position:sticky (sticks to body, not the window).
       overflow-x:clip does NOT trigger that coercion, so body is never a scroll container. */
    overflow-x: clip;
    /* isolation: isolate; — REMOVED: this trapped the fixed header's mix-blend-mode:difference
       inside the body stacking context, preventing it from blending against the page background */
    cursor: none; /* Global custom cursor (dot) */
}

/* Hide cursor on all interactive elements to prevent default system cursor */
a, button, input, select, textarea, label {
    cursor: none !important;
}

/* Kinetic Hero Text */
.hero-text {
    width: 100%;
    margin: 0;
    position: relative;
    z-index: 2;
    text-align: center;
    color: white;
    mix-blend-mode: difference;
    cursor: none; /* Hide default cursor on text */
    line-height: 0.9;
}

/* Mobile: one full-width mask per word */
.hero-text > .hero-word-reveal {
    display: block;
    overflow: hidden;
}

/* Desktop: inline mask per word, inside the single fit-text line */
.hero-line-desktop .hero-word-reveal {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
}

.hero-word-inner {
    display: block;
}

/* Desktop: em-based gap between the two words — ~50% wider than a natural space character.
   Scales with font-size so fit-text measures it correctly during sizing. */
.hero-word-gap {
    display: inline-block;
    width: 0.45em;
}

/* Desktop: single-line hero title */
.hero-line-desktop {
    display: flex;
    justify-content: center;
    align-items: baseline;
    white-space: nowrap;
    overflow: visible;
    line-height: inherit;
}

/* Mobile stacked words — hidden on desktop (.hero-text scope raises specificity above .fit-text-vw) */
.hero-text .hero-word {
    display: none;
    white-space: nowrap;
    overflow: visible;
    line-height: inherit;
}

.hero-text .char {
    display: inline-block;
    will-change: transform;
    /* Optional: prevent selection while interacting */
    user-select: none; 
    -webkit-user-select: none;
}

/* Custom Hero Cursor (now Global) */
.custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    pointer-events: none;
    z-index: 2147483647; /* Ensure it is on top of Header (which also has max int z-index) */
    
    /* Default: White Dot with Difference Blend Mode */
    background-color: #FFFFFF;
    border-radius: 50%;
    mix-blend-mode: difference;
    
    /* Center pivot */
    margin-left: -5px;
    margin-top: -5px;
    
    transition: width 0.3s var(--ease-out), height 0.3s var(--ease-out), background-color 0.3s var(--ease-out), clip-path 0.3s var(--ease-out), margin 0.3s var(--ease-out), transform 0.1s var(--ease-out);
}

/* State: Dot (Default) - Explicit class for JS logic */
.custom-cursor.cursor-dot {
    width: 10px;
    height: 10px;
    background-color: #FFFFFF;
    border-radius: 50%;
    mix-blend-mode: difference;
    clip-path: none;
    margin-left: -5px;
    margin-top: -5px;
}

/* State: Arrow (Hero Section) */
.custom-cursor.cursor-arrow {
    width: 20px;
    height: 20px;
    background-color: var(--color-secondary); /* White */
    mix-blend-mode: normal; /* No difference mode for arrow */
    border-radius: 0;
    clip-path: polygon(50% 0%, 0% 100%, 50% 80%, 100% 100%);
    margin-left: -10px;
    margin-top: -10px;
}

/* State: Hover (Interactive Red Dot) */
.custom-cursor.cursor-hover {
    width: 12px;
    height: 12px;
    background-color: #FF0000; /* Red */
    mix-blend-mode: normal;
    border-radius: 50%;
    clip-path: none;
    margin-left: -6px;
    margin-top: -6px;
}

/* State: View (Gallery thumbnail hover) */
.custom-cursor.cursor-view {
    width: 60px;
    height: 60px;
    background-color: #FFFFFF;
    mix-blend-mode: difference;
    border-radius: 50%;
    clip-path: none;
    margin-left: -30px;
    margin-top: -30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-cursor.cursor-view .cursor-view-label {
    font-family: var(--font-heading);
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #000000;
    mix-blend-mode: normal;
    pointer-events: none;
    line-height: 1;
}

/* State: Text Reveal (Next Case) */
.custom-cursor.text-reveal {
    /* Use Hover style as base (red dot) */
    width: 12px;
    height: 12px;
    background-color: #FF0000;
    mix-blend-mode: normal; /* Container normal */
    border-radius: 50%;
    margin-left: -6px;
    margin-top: -6px;
}

/* Independent Text Element for Blend Mode */
#custom-cursor-text {
    /* display: none; Removed to allow measurement and visibility */
    position: fixed;
    top: 0;
    left: 0;
    /* Offset relative to cursor center */
    margin-left: 20px; /* Text starts 20px right of dot */
    margin-top: -0.5em; /* Center vertically based on font size */
    
    font-family: var(--font-mono); 
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    
    color: #FFFFFF;
    mix-blend-mode: difference;
    pointer-events: none;
    z-index: 2147483647; /* Same as cursor */
    
    opacity: 0;
    transition: opacity 0.2s var(--ease-out);
}

#custom-cursor-text.visible {
    opacity: 1;
}

/* Independent Image Element */
#custom-cursor-img {
    position: fixed;
    top: 0;
    left: 0;
    /* Offset relative to cursor center */
    /* 20px (text start) + text width + 15px (gap) */
    margin-left: calc(35px + var(--cursor-text-width, 0px));
    margin-top: -40px; /* Center 80px height */

    width: 120px; /* Double scale 60 -> 120 */
    height: 80px; /* Double scale 40 -> 80 */
    background-size: cover;
    background-position: center;
    background-color: #333; /* Fallback */

    pointer-events: none;
    z-index: 2147483647;
    mix-blend-mode: normal; /* Normal for image */

    opacity: 0;
    transition: opacity 0.2s var(--ease-out);
}

#custom-cursor-img.visible {
    opacity: 1;
}

/* Scrub Word Reveal Styles */
[scrub-each-word] .word {
    opacity: 1;
    display: inline-block;
}

/* Availability Indicator */
.hero-availability {
    position: absolute;
    bottom: 0;
    left: var(--container-padding);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 2rem; /* Add some spacing from bottom */
    font-family: 'Geist Mono', monospace;
    font-size: 0.8rem; /* Adjust as needed */
    line-height: 1.2;
    color: var(--color-secondary);
}

.availability-dot {
    width: 12px;
    height: 12px;
    background-color: #00FF00; /* Neon Green */
    border-radius: 50%;
}

.availability-text {
    text-transform: lowercase; /* As per visual reference if needed, or keep normal */
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 400;
    margin: 0 0 1rem;
    line-height: 0.87;
    text-transform: uppercase;
}

p {
    font-size: 1rem;
    margin: 0 0 1.5rem;
    line-height: 1.3;
}

b, strong {
    font-weight: 400;
}

/* ==========================================================================
   Hero Section
   ========================================================================== */
.hero-section {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    z-index: 0;
    overflow: hidden;
    cursor: none; /* Hide default cursor */
}

.hero-scroll-label {
    position: fixed;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Geist Mono', monospace;
    font-size: 12px;
    text-align: center;
    z-index: 2;
    color: var(--color-secondary); /* white — readable on dark hero background */
    pointer-events: none;
    opacity: 0;
}

.hero-fluid-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    padding-left: 0;
    padding-top: 6.5rem; /* offset by header so flex-centering aligns with video center */
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    background-color: var(--color-secondary);
    color: var(--color-primary);
    opacity: 1;
    transition: opacity 0.3s var(--ease-out);
}

/* Static CSS grid removed */
.hero-fluid-wrapper::before {
    display: none;
}

.hero-content {
    /* Full viewport width — hero text spans 100vw, overhangs the video by 16px on each side */
    width: 100vw;
    margin: 0 auto;
    padding: 0;
    pointer-events: auto;
    position: relative;
    z-index: 2;
}

.hero-portrait {
    position: absolute;
    top: 6.5rem;                        /* clear fixed header (2×2.5rem padding + ~20px logo) */
    left: var(--container-padding);
    right: var(--container-padding);
    bottom: 0;
    width: auto;
    height: auto;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
    border-radius: 4px 4px 0 0;
    opacity: 1;
}

.hero-portrait::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    pointer-events: none;
}

/* Suppress Safari's native play-button overlay on all videos */
video::-webkit-media-controls,
video::-webkit-media-controls-start-playback-button,
video::-webkit-media-controls-play-button,
video::-webkit-media-controls-panel {
    display: none !important;
    opacity: 0 !important;
}

#hero-video {
    width: 102%;
    height: 98%;
    display: block;
    object-fit: cover;
}

.video-placeholder {
    aspect-ratio: 1/1;
    position: absolute;
    bottom: 0;
    right: 8.333vw;
    width: 25vw;
    z-index: 0;
    opacity: 0;
}

/* About Section */
.about-section {
    background-color: #FAFAFA;
    color: var(--color-primary);
    padding: 18vh 0 0;
    position: relative;
    z-index: 10;
    /* NO overflow:clip — it clips position:fixed pinned children (carousel) */
}

/* Rounded top corners via pseudo-element — doesn't clip fixed children */
.about-section::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    height: 24px;
    background: #FAFAFA;
    border-radius: 12px 12px 0 0;
    z-index: 1;
}

.about-section.section-background {
    background-color: #FAFAFA;
}

.about-sticky-wrap {
    display: block;
    position: relative;
}

.about-section .container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-column-gap: 0;
    position: sticky;
    top: 25vh;
    z-index: 5;
    align-self: start;
    pointer-events: none; /* let events pass through to carousel beneath */
}

.about-text {
    grid-column: 3 / 11;
    max-width: 100%;
    padding-bottom: 60vh;
    font-family: var(--font-body);
    font-size: clamp(1rem, 3vw, 36px);  /* reduced by ~1rem */
    font-weight: 400;
    color: #000000;
    letter-spacing: 0;
    pointer-events: none; /* padding area must not block carousel beneath */
}

.about-text p {
    font-size: inherit;
    line-height: 1.1;
    margin: 0;
    pointer-events: auto; /* re-enable on the actual visible text only */
}

.cases-section {
    padding-top: 5vh;
    background-color: #ffffff;
    position: relative;
    z-index: 11;
}

.cases-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 1rem;
}

.case-link {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    --color-grid: #E5E5E5;
    margin-bottom: 16px;
}

.case-thumbnail {
    background-color: #f0f0f0;
    aspect-ratio: 1/1;
    margin-bottom: 0;
    overflow: hidden;
    position: relative;
}



.cases-headline {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: start;
}

/* Selected Works headline */
.cases-headline h2 {
    margin: 0;
    font-size: clamp(2rem, 5vw, 4rem);
    line-height: 0.85;
}

/* Case label: top of card, above thumbnail */
.case-header {
    display: flex;
    align-items: center;
    border-bottom: var(--border-thin);
}

.case-label {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0;
    color: var(--color-primary);
    text-transform: uppercase;
}

a {
    color: inherit;
    text-decoration: none;
    transition: opacity 200ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    a:hover {
        opacity: 0.7;
    }
}

/* Case thumbnail images */
.case-thumbnail img,
.case-thumbnail video,
.works-case-thumb img,
.works-case-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* No transform transition here — parallax sets inline transform which overrides CSS hover.
       JS disables transition on parallax images; non-parallax media (video) inherits cleanly. */
}

@media (hover: hover) and (pointer: fine) {
    /* Hover zoom: only applies to video thumbs (no parallax) and non-JS fallback.
       On images with parallax running, JS handles scale via inline transform. */
    .case-item:hover .case-thumbnail video,
    .works-case-card:hover .works-case-thumb video {
        transform: scale(1.1);
        transition: transform 500ms var(--ease-gravity);
    }
}

/* Prevent global a:hover opacity from dimming the whole card */
.case-item .case-link:hover,
.works-case-card .case-link:hover,
.scale-carousel__item:hover {
    opacity: 1;
}

/* Active states on all pressable card elements */
.case-link:active,
.works-case-link:active,
.works-case-card:active {
    opacity: 0.85;
}

.case-placeholder-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.case-no-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ddd;
}

/* ==========================================================================
   Works Typography (Huge, 100vw)
   ========================================================================== */
.works-typography-container {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    overflow: hidden;
    margin-bottom: -3vw;
    display: none;
}

/* Base class for elements that JS auto-sizes to 100vw width */
.fit-text-vw {
    white-space: nowrap;
    display: block;
    width: 100%;
    text-align: center;
    overflow: visible;
}

.works-huge-text {
    font-size: 25vw;
    line-height: 0.75;
    letter-spacing: -0.05em;
    color: #FFFFFF;
    margin: 0;
    pointer-events: none;
    transform: translateX(-1vw) translateY(11%);
}

.works-o {
    font-family: var(--font-body);
    font-weight: 400;
    font-variation-settings: 'wght' 400, 'opsz' 60;
}


/* ==========================================================================
   View All (inside cases section)
   ========================================================================== */
.view-all-wrapper {
    padding: 0 0 20vh;
    text-align: center;
}

.view-all-link {
    font-family: var(--font-heading);
    line-height: 0.85;
    color: var(--color-primary);
    text-transform: uppercase;
    font-weight: 400;
    text-decoration: none;
    display: block;
    width: 100%;
    text-align: center;
    white-space: nowrap;
    overflow: visible;
}

.view-all-link:hover {
    opacity: 1;
}

.view-all-link .nav-text-wrapper {
    overflow: hidden;
    line-height: 1.2;
}

.view-all-link .nav-text,
.view-all-link .nav-text.second {
    color: var(--color-primary);
}

/* ==========================================================================
   Let's Connect Section
   ========================================================================== */
.connect-section {
    padding: 10vh 0 0 0;
    background-color: var(--color-secondary);
    position: relative;
    z-index: 12;
    min-height: clamp(700px, 100vh, 1100px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.connect-section > .container {
    margin-bottom: 10vh; /* Guaranteed min gap below text */
    flex-shrink: 0;
}

.connect-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    column-gap: 1rem;
    align-items: stretch;
    position: relative;
    z-index: 2;
    pointer-events: none;
}

/* Re-enable pointer events on actual content so pills behind stay draggable in empty grid space */
.connect-headline,
.btn-pill-arrow,
.connect-service-title,
.connect-service-items,
.connect-service-desc {
    pointer-events: auto;
}

/* Left: headline at top, CTA at bottom */
.connect-left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2rem 0;
}

.connect-headline {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 4.5vw, 64px);
    line-height: 0.85;
    color: var(--color-primary);
    margin: 0;
    text-transform: uppercase;
}

/* Animated pill button */
.btn-pill-arrow {
    position: relative;
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    height: 48px;
    padding: 4px 56px 4px 24px;
    border-radius: 999px;
    background: var(--color-primary);
    color: var(--color-secondary);
    text-decoration: none;
    overflow: hidden;
    transition: padding 0.5s var(--ease-gravity);
    cursor: pointer;
}

.btn-pill-arrow:hover {
    padding: 4px 24px 4px 56px;
    opacity: 1;
}

.btn-pill-label {
    position: relative;
    z-index: 1;
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
    transition: none;
}

.btn-pill-icon {
    position: absolute;
    right: 4px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-secondary);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: right 0.5s var(--ease-gravity), transform 0.5s var(--ease-gravity);
    flex-shrink: 0;
}

.btn-pill-arrow:hover .btn-pill-icon {
    right: calc(100% - 44px);
    transform: rotate(45deg);
}

/* Right: service groups stacked */
.connect-right {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    padding: 2rem 0;
}

.connect-service-group {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.connect-service-title {
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    text-transform: none;
}

/* 2-col sub-layout: services | description */
.connect-service-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8rem;
}

.connect-service-items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-content: flex-start;
    margin: 0;
}

.connect-service-pill {
    display: inline-block;
    padding: 0.4em 1em;
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.1;
    color: rgba(21, 21, 21, 0.7);
    color: color-mix(in srgb, var(--color-primary) 70%, transparent);
    background-color: var(--color-surface);
    border: none;
    border-radius: 999px;
    white-space: nowrap;
    box-sizing: border-box;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    will-change: transform;
}

.connect-service-pill-mask {
    display: inline-flex;
    overflow: hidden;
    max-width: 100%;
    padding: 2px;
    margin: -2px;
}

.connect-service-desc {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.3;
    margin: 0;
    color: var(--color-primary);
}

/* Physics Pills Stage */
.pills-physics {
    position: relative;
    width: 100%;
    flex-grow: 1;
    min-height: 40vh;
    z-index: 1;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

.pills-physics-stage {
    position: absolute;
    inset: 0;
}

.physics-pill {
    display: inline-block;
    padding: 1.1rem 2.4rem;
    font-family: var(--font-mono);
    font-size: 36px;
    font-weight: 500;
    line-height: 1.1;
    color: var(--color-primary);
    border: 1.5px solid var(--color-primary);
    border-radius: 999px;
    white-space: nowrap;
    cursor: grab;
    box-sizing: border-box;
    pointer-events: auto;
}

.pills-physics-stage.is-ready .physics-pill {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate3d(-9999px, -9999px, 0);
    will-change: transform;
}

.physics-pill:active {
    cursor: grabbing;
}

/* Responsive Connect — pills downscale on tablet, downscale further on mobile.
   Was 3 discrete tiers at 1200/900/760; consolidated to 2 tiers at 1024/768. */
@media (max-width: 1024px) {
    .connect-section {
        min-height: auto;
    }
    .pills-physics {
        min-height: 55vh;
        min-height: 55dvh;
    }
    .physics-pill {
        font-size: 28px;
        padding: 0.85rem 1.85rem;
    }
}

@media (max-width: 768px) {
    .connect-section {
        min-height: auto;
    }
    .pills-physics {
        min-height: 80vh; /* fallback */
        min-height: 80dvh; /* reserved space for pill pile */
    }
    .physics-pill {
        font-size: 24px;
        padding: 0.7rem 1.5rem;
    }

    .connect-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .connect-left {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        min-height: auto;
        gap: 2rem;
        padding-bottom: 3rem;
        border-bottom: var(--border-thin);
    }
    .connect-service-cols {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .connect-service-items {
        gap: 0.25rem;
    }
    .connect-service-pill {
        font-size: 0.7rem;
        padding: 0.3em 0.6em;
    }
    .connect-right {
        border-top: none;
    }
    .works-huge-text {
        font-size: 35vw !important;
    }
    .cases-section {
        margin-top: -10vh;
    }

    /* Hero: sticky section acts as scroll spacer; wrapper stays fixed like desktop */
    .hero-section {
        position: sticky;
        top: 0;
        height: 100svh;
    }

    /* Wrapper remains fixed so video truly covers 100% viewport */
    .hero-fluid-wrapper {
        position: fixed;
        inset: 0;
        padding-left: 0;
        align-items: center;
        justify-content: center;
        opacity: 1;
    }

    .hero-text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 1rem;
        height: 100%;
        margin: 0;
        width: 100%;
        text-align: center;
    }

    /* Portrait fills fixed wrapper — visible from start, no scroll animation */
    /* Portrait: within content width, symmetric spacing top and bottom */
    .hero-portrait {
        position: absolute;
        top: 6.5rem;
        left: var(--container-padding);
        right: var(--container-padding);
        bottom: 6.5rem;
        width: auto;
        height: auto;
        transform: none;
        opacity: 1;
        border-radius: 2px;
    }

    /* Hero content: matches video bounds exactly so justify-content:center is true to the video */
    .hero-content {
        position: absolute;
        top: 6.5rem;
        left: calc(var(--container-padding) - 2px);
        right: calc(var(--container-padding) - 2px);
        bottom: 6.5rem;
        width: auto;
        padding: 0;
        margin: 0;
    }

    .video-placeholder {
        display: none; /* Not needed on mobile */
    }

    #hero-video {
        height: 100%;
    }

    /* Availability indicator: keep visible above portrait */
    .hero-availability {
        z-index: 2;
    }

    /* Mobile: hide desktop single-line, show stacked words */
    .hero-line-desktop { display: none; }

    .hero-text .hero-word {
        display: block;
        width: 100%;
        text-align: left !important;
        mix-blend-mode: difference;
    }

    .hero-text > .hero-word-reveal:nth-child(2) {
        transform: translateX(-2px);
    }

    .hero-text > .hero-word-reveal:last-child {
        margin-top: 1rem;
        transform: translateX(2px);
    }

    .hero-text > .hero-word-reveal:last-child .hero-word {
        text-align: right !important;
    }

    /* ── About Section ── */
    .about-section,
    .about-section.section-background {
        background-image: none;
    }

    .about-text {
        font-size: clamp(1.5rem, 3.5vw, 3rem);
        line-height: 1;
        padding: 0;
        grid-column: 1 / -1;
    }

    /* ── Cases Grid — single column ── */
    .cases-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        top: 0;
        margin-bottom: 0;
    }

    .cases-headline {
        aspect-ratio: unset;
    }

    .cases-headline h2 {
        font-size: clamp(1.8rem, 8vw, 3rem);
    }

    .case-thumbnail {
        aspect-ratio: 4 / 3;
    }

    /* ── VIEW ALL ── */
    .view-all-wrapper {
        
    }

    /* ── Overflow prevention ── */
    .works-typography-container {
        width: 100%;
        margin-left: 0;
        overflow: hidden;
    }

    #page {
        /* overflow: visible is required to keep position:sticky working on mobile descendants.
           horizontal clipping is handled globally by body { overflow-x: clip; } */
        overflow: visible;
    }


    /* ── Hide custom cursor on mobile (touch) ── */
    .custom-cursor,
    #custom-cursor-text,
    #custom-cursor-img {
        display: none !important;
    }

    body,
    .hero-section,
    .hero-section * {
        cursor: auto !important;
    }

}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ==========================================================================
   Grid Background
   ========================================================================== */
.grid-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 0; /* JS or layout will set this or we use 100% and a container */
    width: 100%;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
    
    /* 12 columns by default (Desktop/Tablet) */
    background-image: repeating-linear-gradient(
        90deg,
        transparent,
        transparent calc(100% / 12 - 1px),
        rgba(229, 229, 229, 0.3) calc(100% / 12 - 1px),
        rgba(229, 229, 229, 0.3) calc(100% / 12)
    );
    
    /* Fade out effect at the bottom */
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 80%, rgba(0,0,0,0) 100%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 80%, rgba(0,0,0,0) 100%);
}

/* ==========================================================================
   Layout Components
   ========================================================================== */
.container {
    width: 100%;
    padding: 0 var(--container-padding);
    position: relative;
    height: 100%;
}

header.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    display: flex;
    align-items: center;
    z-index: 2147483647; /* Absolute Max Z-Index */
    pointer-events: none; /* Let clicks pass through the empty header area */
    mix-blend-mode: difference;
    color: white; /* Inherited by children */
}

/* Navbar Blur Backdrop - exclusively on Works page */
#navbar-blur-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(var(--header-height) * 1.95); /* ~140px — fade zone above content */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: 2147483646; /* One level below the header */
    pointer-events: none;
    
    /* Smooth fade out for the blur so it doesn't have a harsh cut-off edge */
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
}

body.page-template-page-works #navbar-blur-backdrop {
    display: block;
}

/* Header Grid Layout - 12 Column Grid */
.header-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0;
    align-items: center;
    align-self: center;  /* Don't stretch to fill the flex parent's full height */
    height: auto;        /* Only as tall as the content — pointer-events only covers content */
    width: 100%;
    padding: 0 var(--container-padding);
    pointer-events: auto;
    /* position: relative; */ /* REMOVED: Creates stacking context, isolates blend mode */
    z-index: 2147483647;
}

/* Logo */
.site-branding {
    grid-column: 1 / 2;
}


.site-logo a.logo-navlink {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 400;
    text-transform: uppercase;
    /* color: white; */ /* Inherited from header */
    /* mix-blend-mode: difference; */ /* Applied to header */
    text-decoration: none;
    display: inline-block;
    line-height: 1.2;
    position: relative;
    /* z-index: 10000; */ /* REMOVED: Creates stacking context, inherits from header */
    white-space: nowrap; /* Keep on one line if possible */
    pointer-events: auto;
}

.site-logo a.logo-navlink:hover {
    opacity: 1;
}

/* Name Display (now inside .nav-center) */
.site-name {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    color: white;
    white-space: nowrap;
    margin-right: 48px; /* 16px gap + 48px = 64px total before email */
}

.name-line {
    display: block;
}

/* Nav Center: Name + Email + Available for hire – absolutely centered in header */
.nav-center {
    grid-column: 1 / -1;        /* span all columns */
    position: absolute;         /* lift out of flow so it doesn't push siblings */
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: flex;
    align-items: center;
    gap: 16px;
    pointer-events: auto;
}

.nav-email {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 400;
    color: white;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.3s var(--ease-out);
}


.nav-hire-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    color: white;
    background: rgba(28, 28, 28, 0.3);
    border: none;
    border-radius: 100px;
    padding: 0.2rem 1rem;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out), transform 120ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .nav-hire-btn:hover {
        background: #fff;
        color: var(--color-dark);
    }
}

.nav-hire-btn:active {
    transform: scale(0.96);
}

/* Cloned background for hire button (placed in footer outside mix-blend-mode) */
#hire-btn-bg-clone {
    position: fixed;
    background: transparent;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border-radius: 100px;
    z-index: 2147483646; /* Just below header */
    pointer-events: none;
    transition: transform 0.2s var(--ease-out), opacity 0.3s var(--ease-out);
}

.hire-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: transparent; /* Hidden — clone renders outside header blend mode */
    display: inline-block;
    flex-shrink: 0;
}

/* True green dot positioned outside the header's mix-blend-mode context */
#hire-dot-clone {
    position: fixed;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--color-accent);
    z-index: 2147483647;
    pointer-events: none;
    transition: opacity 0.3s var(--ease-out);
}

/* ==========================================================================
   Contact Page
   ========================================================================== */

/* Hide #primary before GSAP slide-in runs (backup for the inline style on #primary) */
body.page-contact {
    overflow-x: hidden;
}
body.page-contact #primary {
    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;
}

.contact-page {
    padding-top: 6rem;
    padding-bottom: 6rem;
    min-height: 100vh;
}

.contact-layout {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4rem;
    align-items: stretch;
}

.contact-heading {
    font-size: clamp(2rem, 5vw, 4rem);
    color: var(--color-primary);
    margin-bottom: 3rem;
}

/* ── Chat Container ── */
.chat-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 22rem);
    min-height: 500px;
    max-height: 800px;
    border: 1px solid rgba(28, 28, 28, 0.1);
    border-radius: 8px;
    background: #fafafa;
    overflow: hidden;
}

.chat-messages {
    flex: 1 1 0;
    overflow-y: auto;
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    scroll-behavior: smooth;
}

/* Scrollbar */
.chat-messages::-webkit-scrollbar {
    width: 4px;
}
.chat-messages::-webkit-scrollbar-track {
    background: transparent;
}
.chat-messages::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.12);
    border-radius: 4px;
}

/* ── Chat Rows ── */
.chat-row {
    display: flex;
    align-items: flex-end;
    gap: 0.65rem;
    max-width: 85%;
}

.chat-row--milan {
    align-self: flex-start;
}

.chat-row--user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

/* ── Avatar ── */
.chat-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: #e0e0e0;
}

.chat-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
}

/* ── Bubbles ── */
.chat-bubble {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.45;
    padding: 0.7rem 1rem;
    max-width: 100%;
    word-wrap: break-word;
}

.chat-bubble--milan {
    background: #333333;
    color: #ffffff;
    border-radius: 8px 8px 8px 2px;
}

.chat-bubble--user {
    background: #f4f4f4;
    color: #000000;
    border-radius: 8px 8px 2px 8px;
}

/* Editable user bubbles */
.chat-bubble--editable {
    transition: background-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .chat-bubble--editable:hover {
        background: #ebebeb;
        box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
        cursor: pointer;
    }
}

/* ── Typing Indicator ── */
.chat-typing {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0.8rem 1rem;
    background: #333333;
    border-radius: 8px 8px 8px 2px;
    height: 42px;
}

.chat-typing span {
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    animation: chat-dot-bounce 1.2s ease-in-out infinite;
}

.chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.chat-typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes chat-dot-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
    30% { transform: translateY(-4px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .chat-typing span {
        animation: none;
        opacity: 0.7;
    }
}

/* ── Budget Pills (in-chat) ── */
.chat-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.25rem 0 0.25rem 2.7rem; /* align with bubble start (avatar + gap) */
}

.chat-pill {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 400;
    color: var(--color-primary);
    background: transparent;
    border: 1px solid rgba(28, 28, 28, 0.2);
    border-radius: 8px;
    padding: 0.45rem 1.1rem;
    transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out), border-color 200ms var(--ease-out);
    white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
    .chat-pill:hover {
        background: var(--color-primary);
        color: #ffffff;
        border-color: var(--color-primary);
    }
}

/* ── Input Bar ── */
.chat-input-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid rgba(28, 28, 28, 0.08);
    background: #ffffff;
}

.chat-input {
    flex: 1;
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--color-primary);
    background: transparent;
    border: none;
    outline: none;
    padding: 0.5rem 0;
}

.chat-input::placeholder {
    color: rgba(28, 28, 28, 0.35);
}

.chat-send-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    /* WCAG 2.5.8: 44×44 minimum tap target */
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: none;
    background: var(--color-primary);
    color: var(--color-secondary);
    flex-shrink: 0;
    transition: transform 200ms var(--ease-out), opacity 200ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .chat-send-btn:hover {
        transform: scale(1.08);
    }
}

.chat-send-btn:active {
    transform: scale(0.95);
}

/* ── Bubble entrance animation ── */
.chat-row--enter {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 350ms var(--ease-out), transform 350ms var(--ease-out);
}

.chat-row--visible {
    opacity: 1;
    transform: translateY(0);
}

/* Pills also animate in */
.chat-pills.chat-row--enter {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out);
}

.chat-pills.chat-row--visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .chat-row--enter {
        transition: none;
        opacity: 1;
        transform: none;
    }
    .chat-pills.chat-row--enter {
        transition: none;
        opacity: 1;
        transform: none;
    }
}

/* Contact-page entry animation: the slide-in is driven by GSAP in navigation.js.
   Starting state hides the main element so GSAP can fromTo it. The reduced-motion
   query and the <noscript> override in header.php reveal it for users who can't
   or don't run the animation — without those, the page is permanently invisible. */
.contact-entry-hidden {
    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .contact-entry-hidden {
        transform: none;
        opacity: 1;
        visibility: visible;
    }
}

/* ── Submit Button (kept for legacy — now hidden) ── */
button.btn-pill-arrow {
    border: none;
    margin-top: 1rem;
}

.contact-status {
    font-family: var(--font-mono);
    font-size: 13px;
    min-height: 1.2em;
}

.contact-status.success { color: #2a7a2a; }
.contact-status.error   { color: #c0392b; }

/* Right Column: Portrait */
.contact-image-col {
    position: sticky;
    top: 10rem;
    overflow: hidden;
    align-self: start;
}

.contact-portrait {
    display: block;
    height: 100%;
    width: auto;
}

/* Contact Page — Mobile */
@media (max-width: 768px) {
    .contact-page {
        padding-top: 6rem;
        padding-bottom: 3rem;
    }

    .contact-heading {
        font-size: clamp(1.3rem, 4.5vw, 1.8rem);
        margin-bottom: 2rem;
    }

    .contact-layout {
        grid-template-columns: 1fr;
        gap: 0;
    }

    /* Portrait hidden on mobile */
    .contact-image-col {
        display: none;
    }

    .chat-container {
        height: calc(100vh - 12rem);
        min-height: 400px;
        max-height: 550px;
        border-radius: 12px;
    }

    .chat-pill {
        padding: 0.6rem 1.1rem;
        font-size: 15px;
    }

    .chat-input {
        font-size: 16px; /* Prevent iOS auto-zoom */
    }
}

/* ==========================================================================
   Footer (New Design)
   ========================================================================== */
/* ==========================================================================
   Footer (New Design)
   ========================================================================== */
/* Footer reveal: content sits above fixed footer */
#page {
    position: relative;
    z-index: 2;
    background-color: var(--color-secondary);
    margin-bottom: 100vh; /* scroll space to reveal footer */
}

/* About page: dark bg on #page to match body */
body.page-template-page-about #page {
    background-color: var(--color-dark);
}

/* About Page: Connect Service Pills (Dark Mode) */
body.page-template-page-about .connect-service-pill {
    background-color: rgba(255, 255, 255, 0.08); /* Dark mode background */
    color: color-mix(in srgb, var(--color-secondary) 70%, transparent); /* 70% white */
    border: none;
}

footer.site-footer {
    padding: 0;
    margin-top: 0;
    background-color: var(--color-primary);
    color: #FFFFFF;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1;
    overflow: hidden;
    height: 100vh; /* Full viewport height */
    display: flex;
    flex-direction: column;
}

.footer-layout {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    position: relative; /* Needed for footer-legal-bar absolute positioning */
    padding: 2.5rem var(--container-padding) 0; /* Match header horizontal padding */
}

/* Footer Top Section — Grid Layout */
.footer-top {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 0;
    align-items: end;
    width: 100%;
    position: relative;
    z-index: 1;
}

/* Heading: spans full width, each line fills 100% of content width via fit-text */
.footer-intro {
    grid-column: 1 / -1;
    grid-row: 1;
    text-align: left;
}

.footer-heading {
    font-family: var(--font-heading);
    font-size: clamp(6rem, 15vw, 24rem);
    line-height: 0.85;
    margin: 0;
    color: #FFFFFF;
}

.footer-heading-reveal {
    display: block;
    overflow: hidden;
}

.footer-heading-line {
    display: block;
    white-space: nowrap;
    overflow: visible;
    line-height: inherit;
    text-align: left; /* override .fit-text-vw text-align: center */
    will-change: transform;
}

/* Stagger Mask Heading Reveal Utilities */
.stagger-mask-reveal {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
}

.stagger-mask-inner {
    display: inline-block;
    will-change: transform;
}

/* Contact links: overlaid on grid row 2, horizontal, aligned to bottom of heading (MEET YOU level) */
.footer-contact {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    flex-direction: row;
    gap: 2rem;
    align-self: end;
    margin-top: 1rem;
}


/* Shared Link Style (Matches Navigation) */
.footer-link-style {
    font-family: var(--font-heading); /* Match Nav: Bebas Neue */
    font-size: 20px;
    font-weight: 400;
    text-transform: uppercase;
    color: #FFFFFF;
    text-decoration: none;
    line-height: 1.2;
    display: inline-block;
    transition: opacity 0.3s var(--ease-out);
}

/* Hover Interaction (Opacity) - Overridden by JS Roll Animation if present */
a.footer-link-style:hover {
    opacity: 1; /* Disable simple fade, let JS handle roll effect */
}

/* Non-link text should not fade but look identical */
span.footer-link-style {
    cursor: default; /* Text cursor or default? Request says "word not a link" */
    pointer-events: none; /* If it shouldn't be interactive */
}

/* Footer Bottom (Massive Brand — hidden on desktop, shown on mobile) */
.footer-bottom {
    display: none;
}

/* Legal bar overlaid on top of the big branding text */
.footer-legal-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.75rem 3.5rem;
    padding: 1.5rem 2rem;
    z-index: 2;
}

.footer-legal-link,
.footer-copyright {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    color: #FFFFFF;
    opacity: 0.7;
    text-decoration: none;
}

.footer-huge-brand {
    font-family: var(--font-heading);
    color: #FFF;
    opacity: 0;
    margin: 0;
    pointer-events: none;
    font-weight: 400;
    display: block;
    line-height: 0.85;
}

/* Shared base for footer brand words (desktop: inline in one span; mobile: block via media query) */
.footer-huge-word,
.footer-brand-desktop {
    font-family: inherit;
    font-weight: inherit;
    color: inherit;
    white-space: nowrap;
    overflow: visible;
    line-height: inherit;
}

.footer-brand-desktop { display: block; }  /* visible on desktop */
.footer-brand-mobile  { display: none;  }  /* hidden on desktop */

/* Responsive Footer */
@media (max-width: 768px) {
    #page {
        margin-bottom: 100svh;
    }

    footer.site-footer {
        height: 100svh;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .footer-layout {
        padding: 2.5rem var(--container-padding) 0;
    }

    /* Scale heading down so it doesn't overflow on narrow screens */
    .footer-heading {
        font-size: clamp(6rem, 12vw, 10rem);
    }
}
.section-background {
    background-color: var(--color-secondary); /* White base for opacity */
    position: relative;
    z-index: 10;
}

@media (max-width: 768px) {
    /* Responsive: Fewer columns on mobile (4 columns) */
    .grid-background,
    .section-background {
        background-image: repeating-linear-gradient(
            90deg,
            transparent,
            transparent calc(100% / 4 - 1px),
            rgba(229, 229, 229, 0.3) calc(100% / 4 - 1px),
            rgba(229, 229, 229, 0.3) calc(100% / 4)
        );
    }
}

.text-center { text-align: center; }
.text-right { text-align: right; }
.d-flex { display: flex; }
.justify-between { justify-content: space-between; }
.align-center { align-items: center; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 768px) {
    .grid-background {
        background-image: repeating-linear-gradient(
            90deg,
            transparent,
            transparent calc(100% / 4 - 1px), /* Fewer lines on mobile */
            rgba(229, 229, 229, 0.3) calc(100% / 4 - 1px),
            rgba(229, 229, 229, 0.3) calc(100% / 4)
        );
    }
}

/* ==========================================================================
   Navigation
   ========================================================================== */

/* Desktop: fixed overlay in top-right, blends like the header */
.main-navigation {
    position: fixed;
    top: 0;
    right: 0;
    height: var(--header-height); /* Matches header height — keeps nav links on the same row */
    z-index: 2147483647;
    mix-blend-mode: difference;
    color: white;
    pointer-events: none;
    padding: 0 var(--container-padding);
    display: flex;
    align-items: center;
}

/* Menu Container */
.main-navigation .menu-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 64px;
    align-items: center;
}

.main-navigation .menu-item {
    flex-shrink: 0;
}

/* "Home" link only shown inside the mobile bottom-sheet overlay (per Figma) */
.menu-item-mobile-only {
    display: none;
}

/* Overlay footer + handle — desktop hidden (mobile-only sheet chrome) */
.nav-overlay-footer,
.nav-overlay-handle {
    display: none;
}

/* Close button — desktop hidden */
.menu-close {
    display: none;
}

/* Submenu toggle button — mobile overlay only */
.submenu-toggle {
    display: none;
}

/* Language Toggle (DE/EN) */
.menu-item-lang {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 400;
    text-transform: uppercase;
    white-space: nowrap;
}

.menu-item-lang .lang-active {
    opacity: 1;
}

.menu-item-lang .lang-link {
    opacity: 0.4;
    transition: opacity 0.3s var(--ease-out);
}

.menu-item-lang .lang-link:hover {
    opacity: 1;
}

.menu-item-lang .lang-sep {
    opacity: 0.4;
    margin: 0 2px;
}

/* Base Link Styles */
.main-navigation a {
    font-family: var(--font-heading); /* "font like headline" */
    font-size: 20px;
    font-weight: 400;
    text-transform: uppercase; /* Match headline case */
    text-decoration: none;
    /* color: white; */ /* Inherited from header */
    /* mix-blend-mode: difference; */ /* Applied to header */
    position: relative;
    display: inline-block;
    /* z-index: 10000; */ /* REMOVED: Creates stacking context, inherits from header */
    white-space: nowrap;
    pointer-events: auto; /* Enable interaction despite parent pointer-events: none */
}

/* Remove default opacity hover from base a, let GSAP handle it or keep it subtle */
.main-navigation a:hover {
    opacity: 1; /* Disable default fade if we use roll effect */
}

/* Roll Animation Structure */
.nav-text-wrapper {
    position: relative;
    display: inline-block;
    overflow: hidden; /* Clip hover animation */
    vertical-align: top; /* Ensure alignment */
}

.nav-text {
    display: block;
    white-space: nowrap;
    color: white; /* Explicit color for both text layers */
    /* mix-blend-mode: difference; */ /* REMOVED: Move to container level */
}

.nav-text.second {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%; /* Ensure it matches */
    color: white; /* Explicitly set color for blend mode */
}

/* Works Dropdown Submenu */
.menu-item-works {
    position: relative;
    pointer-events: auto; /* Ensure LI can receive hover for submenu trigger */
}

.menu-item-works .submenu {
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    list-style: none;
    margin: 0;
    padding-top: 8px; /* padding keeps hover zone connected — margin would create a gap */
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.25s var(--ease-out), visibility 0.25s var(--ease-out), transform 0.25s var(--ease-gravity);
    pointer-events: none;
    z-index: 1000;
    /* Override .main-navigation ul flex row */
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: flex-end;
}

.menu-item-works:hover .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.submenu li {
    margin: 0;
    padding: 0;
    pointer-events: auto;
}

.submenu a {
    display: block;
    padding: 4px 0;
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 400;
    text-transform: uppercase;
    color: white; /* Inverted to dark via header mix-blend-mode: difference */
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.2;
    pointer-events: auto;
    transition: opacity 0.2s var(--ease-out);
}

.submenu a:hover {
    opacity: 1;
}

/* Character level styling (from JS split) */
.nav-text .char {
    display: inline-block;
}

/* Hamburger Menu Toggle (Hidden on Desktop) */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    /* WCAG 2.5.8: 12px padding around the 22×20 hamburger-box gives a 46×44 tap target */
    padding: 12px;
    z-index: 20000; /* Above overlay */
    position: relative;
    color: var(--color-primary);
    /* mix-blend-mode: difference; */
}

.hamburger-box {
    width: 22px;
    height: 20px;
    display: inline-flex;
    align-items: stretch;
    gap: 5px;
}

.burger-bar {
    display: block;
    width: 3px;
    flex: 0 0 3px;
    background-color: #FFFFFF; /* White — appears black under header's mix-blend-mode: difference */
    border-radius: 0;
    transition: opacity 0.15s var(--ease-out), transform 0.15s var(--ease-out);
}

/* Open state: fade middle bar, cross outer bars into a 45° X */
.menu-toggle[aria-expanded="true"] .burger-bar:nth-child(1) {
    transform: translateX(8px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .burger-bar:nth-child(2) {
    opacity: 0;
}
.menu-toggle[aria-expanded="true"] .burger-bar:nth-child(3) {
    transform: translateX(-8px) rotate(-45deg);
}

/* Mobile Responsive */
@media (max-width: 1024px) { /* Mobile menu cutoff — switches at iPad-landscape and below */
    /* Hide scroll label when hire button moves to floating pill */
    .hero-scroll-label {
        display: none;
    }

    /* Flexbox header: logo and hamburger are absolutely inset, name naturally centers */
    .header-grid {
        display: flex;
        justify-content: center;
        position: relative;
    }

    .site-branding {
        position: absolute;
        left: var(--container-padding);
        top: 50%;
        transform: translateY(-50%);
    }

    .menu-toggle {
        position: absolute;
        right: calc(var(--container-padding) - 12px); /* -12px cancels button's own padding so hamburger-box aligns to content edge */
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-right: 0;
    }

    /* Nav-center: the only flex item, centers automatically */
    .nav-center {
        position: static;
        left: auto;
        transform: none;
        justify-content: center;
        align-items: center;
    }

    /* Show name in header on mobile */
    .site-name {
        display: block;
        margin-right: 0;
        text-align: left;
    }

    /* Hide email in header on mobile — it's in the nav overlay footer */
    .nav-email {
        display: none;
    }

    /* Mobile: bottom-anchored frosted-glass sheet (Figma: Mobile/Overlay).
       touch-action: none disables native pan/zoom on the sheet so the page
       behind doesn't scroll when the user gestures on top of the overlay
       (drag-to-close is handled explicitly via pointer events in JS). */
    .main-navigation {
        position: fixed;
        inset: auto 0 0 0;
        /* Lift the sheet above the mobile browser's bottom toolbar.
           bottom:0 anchors to the LAYOUT viewport (behind the toolbar), so the
           footer was hidden. (100vh - 100dvh) equals the currently-visible
           bottom chrome height: 0 when hidden, = bar height when shown. */
        bottom: calc(100vh - 100dvh);
        width: 100%;
        mix-blend-mode: normal;
        background-color: rgba(28, 28, 28, 0.55);
        /* backdrop-filter only applied when .toggled — see below.
           Compositing a blur on a fixed element every frame janks scroll,
           even while the sheet is off-screen. */
        color: #fff;
        z-index: 9000;
        transform: translateY(100%);
        transition: transform 220ms cubic-bezier(0.4, 0, 1, 1);
        padding: 0;
        display: flex;
        flex-direction: column;
        pointer-events: auto;
        overflow: hidden;
        /* dvh = dynamic viewport height: excludes the mobile browser's
           address/tool bars so the whole sheet (incl. footer) sits in view.
           vh fallback for older browsers. */
        max-height: 90vh;
        max-height: 90dvh;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        touch-action: none;
        overscroll-behavior: contain;
    }

    .main-navigation.toggled {
        transform: translateY(0);
        transition: transform 350ms var(--ease-drawer);
        backdrop-filter: blur(28px) saturate(140%);
        -webkit-backdrop-filter: blur(28px) saturate(140%);
    }

    /* Close button hidden — hamburger toggles, tap-outside also closes */
    .menu-close {
        display: none;
    }

    .main-navigation .menu-container {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        flex: 1;
        padding: 0;
        min-height: 0;
        gap: 0;
        align-items: stretch;
        width: 100%;
    }

    /* Top centered handle line (Figma: Line 1) */
    .nav-overlay-handle {
        display: block;
        width: 102px;
        height: 1px;
        margin: 16px auto 0;
        background-color: rgba(255, 255, 255, 0.35);
        flex-shrink: 0;
    }

    /* Primary nav row: HOME · ABOUT · WORKS ▾ — wrapping flex row.
       The submenu is a sibling flex item with flex-basis:100% so it breaks
       to its own row underneath, in normal flow (pushes footer down). */
    .main-navigation .menu {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 12px 28px;
        padding: 32px var(--container-padding) 16px;
        width: 100%;
    }

    .main-navigation .menu > .menu-item {
        flex-shrink: 0;
    }

    .menu-item-mobile-only {
        display: inline-flex;
        align-items: center;
    }

    /* Primary nav links: Bebas Neue uppercase, white.
       WCAG 2.5.8: padding expands the tap area to ≥44px without changing visible font size. */
    .main-navigation .menu .menu-item a {
        font-size: 20px;
        color: #fff;
        line-height: 1.2;
        padding: 12px 8px;
        display: inline-block;
    }

    /* display:contents lets the inner .works-trigger and .submenu become direct
       flex children of .menu — required so the submenu can wrap to its own row. */
    .menu-item-works {
        display: contents;
    }

    .works-trigger {
        display: inline-flex;
        align-items: center;
        column-gap: 6px;
    }

    /* Works submenu: in normal flex flow, full-row width.
       overflow: hidden + max-height clips the row when closed; opacity is not
       part of the animation — the text is always fully opaque, just clipped. */
    .main-navigation .submenu {
        display: flex;
        flex-basis: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 8px 24px;
        margin: 0;
        padding: 0;
        list-style: none;
        position: static;
        min-width: 0;
        transform: translateY(-6px);
        max-height: 0;
        opacity: 1;
        visibility: visible;
        overflow: hidden;
        pointer-events: none;
        /* Closing: ease-out (fast start, gentle settle) so the row begins
           shrinking immediately — no perceived delay. */
        transition: max-height 300ms cubic-bezier(0.33, 1, 0.68, 1),
                    transform 300ms cubic-bezier(0.33, 1, 0.68, 1),
                    padding-top 300ms cubic-bezier(0.33, 1, 0.68, 1);
    }

    .main-navigation .submenu.is-open {
        max-height: 80px;
        transform: translateY(0);
        padding-top: 8px;
        pointer-events: auto;
        /* Opening: sine-in-out — soft on both ends. The slow start happens
           while the row is still empty, so it doesn't read as a delay. */
        transition: max-height 300ms cubic-bezier(0.45, 0, 0.55, 1),
                    transform 300ms cubic-bezier(0.45, 0, 0.55, 1),
                    padding-top 300ms cubic-bezier(0.45, 0, 0.55, 1);
    }

    .main-navigation .submenu a {
        font-size: 20px;
        color: rgba(255, 255, 255, 0.7);
        line-height: 1.2;
        padding: 10px 8px;
        display: inline-block;
    }

    /* Submenu toggle button — chevron next to "Works" */
    .submenu-toggle {
        background: none;
        border: none;
        color: #fff;
        font-size: 14px;
        padding: 0;
        cursor: pointer;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        vertical-align: middle;
        /* Closing chevron: same ease-out as the row */
        transition: transform 300ms cubic-bezier(0.33, 1, 0.68, 1);
    }

    .submenu-toggle.is-open {
        transform: rotate(180deg);
        /* Opening chevron: sine-in-out, matching the row */
        transition: transform 300ms cubic-bezier(0.45, 0, 0.55, 1);
    }

    /* Hire button hidden from header on mobile */
    .nav-hire-btn {
        display: none;
    }

    /* Hide cloned hire bg/dot on mobile */
    #hire-btn-bg-clone,
    #hire-dot-clone {
        display: none !important;
    }

    /* Overlay footer — vertical stack of full-width sections separated by dividers */
    .nav-overlay-footer {
        display: flex;
        flex-direction: column;
        gap: 0;
        margin-top: 0;
        padding-top: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }

    /* Email + socials rows: full-width, centered, divider on bottom.
       Geist Mono per the design. Scoped to .main-navigation to out-specify
       the desktop `.main-navigation a { font-family: heading; uppercase }` rule. */
    .main-navigation .nav-overlay-email,
    .main-navigation .nav-overlay-socials {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 72px;
        padding: 20px var(--container-padding);
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        font-family: var(--font-mono);
        font-weight: 400;
        font-size: 13px;
        color: #fff;
        text-decoration: none;
        text-transform: none;
        letter-spacing: 0;
    }

    .main-navigation .nav-overlay-email {
        opacity: 0.9;
    }

    .main-navigation .nav-overlay-socials {
        gap: 28px;
    }

    .main-navigation .nav-overlay-social {
        font-family: var(--font-mono);
        font-size: 13px;
        color: #fff;
        text-decoration: none;
        text-transform: none;
        letter-spacing: 0;
    }

    /* Hire button: inline pill with white outline, self-centered in the footer column.
       The socials row above provides the section divider. */
    .main-navigation .nav-overlay-hire {
        align-self: center;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        margin: 24px 0 28px;
        padding: 14px 26px;
        font-family: var(--font-mono);
        font-weight: 500;
        font-size: 14px;
        color: #fff;
        text-decoration: none;
        text-transform: none;
        letter-spacing: 0;
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.85);
        border-radius: 100px;
        min-height: 0;
    }

    .nav-overlay-hire-dot {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background-color: var(--color-accent);
        display: inline-block;
        flex-shrink: 0;
    }

    /* Legal links not present in Figma overlay design — hidden on mobile */
    .nav-overlay-legal {
        display: none;
    }
}

/* Very small screens (320–375px): hide email to prevent nav-center overflow */
@media (max-width: 480px) {
    .nav-email {
        display: none;
    }
}


/* ==========================================================================
   Mobile Sticky Hire Bar
   ========================================================================== */
.mobile-hire-bar {
    display: none; /* desktop: hidden */
}

@media (max-width: 1024px) { /* Match mobile menu cutoff */
    /* Hide on pages other than front, about, and single cases */
    body:not(.home):not(.page-template-page-about):not(.single-cases) .mobile-hire-bar {
        display: none !important;
    }

    .mobile-hire-bar {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        position: fixed;
        bottom: calc(2svh + env(safe-area-inset-bottom, 0px));
        left: 50%;
        transform: translateX(-50%) translateZ(0);
        width: auto;
        white-space: nowrap;
        padding: 0.875rem 1.5rem;
        background: rgba(80, 80, 80, 0.45);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        color: #fff;
        font-family: var(--font-mono);
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 0.04em;
        text-decoration: none;
        border-radius: 100px;
        min-height: 48px;
        z-index: 8000; /* Below nav overlay (9000) */
        pointer-events: auto;
        will-change: transform;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        transition: background 200ms var(--ease-out), transform 120ms var(--ease-out);
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-hire-bar:active {
        transform: translateX(-50%) scale(0.96) translateZ(0);
    }

    .mobile-hire-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background-color: var(--color-accent);
        display: inline-block;
        flex-shrink: 0;
    }
}
/* ==========================================================================
   Single Case Study (Redesign)
   ========================================================================== */

/* Case back arrow */
.case-back-arrow {
    position: relative;
    margin-bottom: 2rem;
    color: var(--color-primary);
    text-decoration: none;
    z-index: 10;
    display: flex;
    align-items: center;
}

.case-back-arrow:hover {
    opacity: 1;
}

.case-back-arrow .nav-text-wrapper {
    display: block;
    width: 64px;
    height: 64px;
    overflow: hidden;
    position: relative;
    color: var(--color-primary);
}

.case-back-arrow .nav-text {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    width: 100%;
    height: 100%;
}

.case-back-arrow .nav-text.second {
    position: absolute;
    top: 100%;
    left: 0;
    color: var(--color-primary);
}

/* Split Hero Section */
.case-hero-split {
    display: flex;
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
    background-color: #FFFFFF; /* Left side is white */
}

.case-hero-text {
    flex: 0 0 calc(50vw - 262px);
    width: calc(50vw - 262px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Align to bottom */
    /* Align Left with Container: max(2rem, (100vw - 1512px)/2 + 2rem) */
    padding: 0 2rem 60px var(--container-padding); /* Align with MI NO KA in header */
    position: relative;
    z-index: 2;
    background-color: #FFFFFF; /* Ensure text sits on white */
}

.case-hero-media {
    flex: 0 0 calc(50vw + 262px);
    width: calc(50vw + 262px);
    height: 100%;
    position: relative;
    background-color: #555; /* Fallback dark */
    overflow: hidden;
}

.hero-img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.8s var(--ease-gravity);
}

.case-hero-media:hover .hero-img-cover {
    transform: scale(1.05);
}


.hero-text-inner {
    max-width: 500px;
}

.case-index {
    font-family: var(--font-heading);
    font-size: 0.9rem; /* Smaller, cleaner index */
    margin-bottom: 2rem;
    opacity: 1;
    letter-spacing: 0.05em;
}

.case-hero-title {
    font-family: var(--font-heading);
    font-size: clamp(3.5rem, 6vw, 6rem);
    line-height: 0.82;
    text-transform: uppercase;
    margin: 0 0 2rem;
    margin-left: -0.04em; /* Optical alignment for Bebas Neue glyph bearing */
    letter-spacing: -0.01em;
    color: var(--color-primary);
}

.case-hero-tagline {
    font-family: var(--font-body); /* Match block content (Source Serif 4) */
    font-size: 18px; /* Match block content size */
    line-height: 1.4;
    color: var(--color-primary);
    opacity: 1; /* Match block content opacity */
    max-width: 450px; /* Keep some constraint for readability, similar to block info */
    margin-top: 1rem;
}

.hero-scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 4rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    z-index: 3;
    opacity: 0.5;
    color: var(--color-primary);
}

/* Main Content Layout */
/* Main Content Layout */
.case-content-section {
    width: 100%;
    padding-top: 0; /* Moved padding to columns for sticky control */
}

.case-content-container {
    padding-top: 0;
    padding-bottom: 8rem;
    background-color: transparent; /* Background handled by wrapper */
    min-height: 100vh; /* Ensure track for sticky */
}

.case-content-grid {
    display: grid;
    grid-template-columns: calc(50vw + 262px - var(--container-padding)) 1fr; /* Exact alignment: passes header button by 1rem */
    column-gap: 2rem;
    position: relative;
    min-height: 100vh;
    width: 100%;
}

/* Left: Gallery Stack */
.case-col-visuals {
    padding-right: 0; 
}

.case-gallery-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* Gap between images */
    padding-bottom: 1rem; /* Align last image bottom with meta table bottom */
}

.gallery-item {
    margin: 0 auto;
    width: 100%;
    aspect-ratio: 5 / 4;
    /* Enforce block display */
    display: block;
    overflow: hidden; /* Required for parallax image scale clipping */
}

.gallery-item img,
.gallery-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Constrained items (max_width set in backend): show full image, no crop */
.gallery-item--constrained {
    aspect-ratio: unset;
    overflow: visible;
}

.gallery-item--constrained img,
.gallery-item--constrained video {
    height: auto;
    object-fit: unset;
}

/* Right: Sticky Info */
/* Right: Sticky Info */
.case-col-info {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding-top: 6rem; /* Visually 10rem from top edge */
    padding-bottom: 1.5rem; /* Give a bit more room at the bottom */
    padding-left: 0;
    overflow: hidden; /* Not scrollable */
    gap: 1rem; /* Minimum spacing between elements */
}

.case-info-sticky {
    display: contents; /* Pass layout control to parent (.case-col-info) */
}

/* Text Blocks */
.case-text-blocks {
    display: contents; /* Makes text blocks flex items of case-col-info */
}

.text-block {
    margin-bottom: auto; /* Takes up extra space dynamically, shrinks when text is long */
}

.text-block:last-child {
    margin-bottom: 0; /* Let case-meta-table's margin-top: auto handle this space */
}

.block-label {
    font-family: var(--font-mono);
    font-weight: 700; /* User requested "black label" (block label) to be Mono Bold */
    font-size: var(--size-label);
    text-transform: capitalize;
    margin-bottom: 0.5rem;
    color: var(--color-primary);
    opacity: 1;
}

.block-content {
    font-family: var(--font-body); /* Source Serif 4 */
    font-size: 18px; /* User requested 18px Serif */
    font-weight: 400;
    line-height: 1.3;
    color: var(--color-primary);
}

.block-content p {
    margin-bottom: 0; /* Remove fixed margin to allow flex auto margins to control spacing */
}

/* Meta Table */
.case-meta-table {
    /* border-top removed */
    margin-bottom: 0;
    margin-top: auto; /* Push to bottom of flex container */
    padding-top: 1rem;
}

.meta-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 2px 2px;
    border-bottom: var(--border-thin);
    font-family: var(--font-heading); /* Default to Heading for row */
    font-size: 16px;

}


.meta-label {
    opacity: 1;
    text-transform: uppercase;
    font-weight: 400; 
    font-family: var(--font-heading); 
    font-size: 16px; 
}

.meta-value {
    text-transform: uppercase;
    text-align: right;
    max-width: 100%;
    font-weight: 400;
    font-family: var(--font-heading); /* Same styling as label */
    font-size: 16px;
}

/* Reference Link */
.btn-external {
    text-align: right;
    max-width: 100%;
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 400;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-primary); /* Ensure link inherits text color properly */
}

.btn-external:hover {
    opacity: 0.6;
}

/* Footer Navigation */
.case-navigation-footer {
    border-top: none;
    padding: 0;
    width: 100%;
    height: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
}


.next-case-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    padding: 0 var(--container-padding);
    container-type: inline-size; /* Enable container queries for child font sizing */
}

.next-label {
    font-family: var(--font-mono);
    font-size: 2rem;
    font-weight: 700;
    display: none; /* Hidden as requested */
    margin-top: 2rem; /* Was bottom, now top */
    margin-bottom: 8rem;
    text-transform: lowercase; /* match "lanced" style in visual */
    opacity: 1;
    color: #000;
}

.next-title {
    font-family: 'Bebas Neue', sans-serif; /* Explicitly Bebas */
    font-size: 19cqi; /* 19% of container width (approx 9 chars: NEXT CASE) */
    line-height: 0.8;
    margin: 0;
    color: #000;
    text-transform: uppercase;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    white-space: nowrap; /* Keep on one line if possible */
    text-transform: uppercase;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    white-space: nowrap; /* Keep on one line if possible */
    transform-origin: center;
    /* Ensure no color transition */
    color: #000;
}

.next-case-link:hover {
    opacity: 1 !important;
    color: inherit !important;
    background: transparent !important;
}

.next-case-link:hover .next-title {
    opacity: 1 !important;
    color: #000 !important;
}

/* Ensure wrapper inherits size */
.next-title .nav-text-wrapper {
    font-size: inherit;
    line-height: inherit;
}

/* Force color to be black/inherit for the footer link, overriding global white */
.next-title .nav-text,
.next-title .nav-text.second {
    color: #000 !important;
}




/* ===== Single Case — Tablet (≤1024px) ===== */
@media (max-width: 1024px) {
    /* Hero: stack vertically */
    .case-hero-split {
        flex-direction: column;
        height: auto;
    }

    .case-hero-text {
        width: 100%;
        padding: 7rem 2rem 3rem;
        min-height: auto;
        justify-content: flex-start;
    }

    .case-hero-media {
        width: 100%;
        height: 56vw;
        min-height: 260px;
    }

    /* Content: single column — info first, then gallery */
    .case-content-grid {
        grid-template-columns: 1fr;
    }

    .case-col-info {
        order: 1;
        position: static;     /* Remove desktop sticky */
        height: auto;         /* Remove fixed viewport height */
        overflow: visible;    /* Restore overflow */
        padding-top: 2rem;
        padding-bottom: 0;
        gap: 0;               /* Reset flex gap */
    }

    .case-text-blocks {
        display: block;       /* Revert contents */
        margin-bottom: 1.5rem;
    }

    .text-block {
        margin-bottom: 1.5rem;  /* Revert auto */
    }
    
    .text-block:last-child {
        margin-bottom: 1.5rem;  /* Revert zero margin */
    }

    .block-content p {
        margin-bottom: 1.5rem;  /* Restore block content margin */
    }

    .case-col-visuals {
        order: 2;
    }

    .case-gallery-stack {
        padding-top: 2rem;
    }

    .case-meta-table {
        margin-top: 2rem;     /* Replace auto — only works in fixed-height flex */
    }
}

/* ===== Single Case — Mobile (≤768px) ===== */
@media (max-width: 768px) {
    /* Hero: image on top, text below */
    .case-hero-media {
        order: -1;
        height: 50vh;
        min-height: 220px;
    }

    .case-hero-text {
        padding: 2rem 1.5rem 2.5rem;
    }

    .case-back-arrow {
        margin-bottom: 1rem;
    }

    .case-hero-title {
        font-size: clamp(2.5rem, 10vw, 4rem);
        margin-bottom: 1rem;
    }

    .case-hero-tagline {
        font-size: 16px;
        max-width: 100%;
    }

    .hero-text-inner {
        max-width: 100%;
    }

    /* Content: single-column, info first then gallery */
    .case-content-container {
        padding-bottom: 2rem;
    }

    .case-col-info {
        padding-top: 1rem;
        padding-bottom: 2rem;
    }

    .case-gallery-stack {
        padding-top: 0;
        gap: 0.75rem;
    }

    .block-label {
        font-size: 0.8rem;
    }

    .text-block {
        margin-bottom: 1.5rem;
    }

    .case-meta-table {
        margin-top: 1.5rem;
    }

    .btn-external {
        display: flex;
        width: 100%;
        justify-content: space-between;
        margin-top: 1.5rem;
        padding-bottom: 0.4rem;
    }

    /* Navigation footer */
    .case-navigation-footer {
        overflow: hidden;
    }

    .next-title {
        font-size: 14cqi;
    }

    .next-label {
        font-size: 1.2rem;
        margin-bottom: 4rem;
    }
}

/* ==========================================================================
   WORKS PAGES (page-works.php)
   ========================================================================== */

/* Spacer to push content below fixed header */
.works-header-spacer {
    height: 7rem;
}

/* ==========================================================================
   Works Pages — Complete Styles
   ========================================================================== */

/* --------------------------------------------------------------------------
   Bottom Navigation (Fixed Pill)
   -------------------------------------------------------------------------- */

.works-nav-blend {
    display: contents;
}

.works-nav {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    border-radius: 100px;
    padding: 0.875rem 1.5rem;
    border: none;
    background: rgba(80, 80, 80, 0.45);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    color: white;
}

/* Blur clone no longer needed — backdrop-filter is on .works-nav directly */
#works-nav-blur-clone {
    display: none;
}

.works-nav-glass { display: none; }
.works-nav::before { display: none; }
.works-nav::after  { display: none; }

.works-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.works-nav-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.works-nav-link {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    color: white;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
}

.works-nav-text {
    color: white;
}

.works-nav-link:hover {
    opacity: 1;
}

.works-nav-dot {
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--color-accent);
    opacity: 0;
    transition: opacity 0.25s var(--ease-out);
    flex-shrink: 0;
}

.works-nav-item.is-active .works-nav-dot {
    opacity: 1; /* Retains layout opacity logic */
}


/* --------------------------------------------------------------------------
   Works Section Shared
   -------------------------------------------------------------------------- */

.works-section {
    padding-bottom: 4rem; /* Space for bottom nav */
    background-color: #FFFFFF; /* Solid white — required for header mix-blend-mode: difference to work correctly */
}

/* --------------------------------------------------------------------------
   Works Page Title (left-aligned h1)
   -------------------------------------------------------------------------- */

.works-page-title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 400;
    text-transform: uppercase;
    line-height: 0.78;
    color: var(--color-primary);
    margin: 0;
    overflow: visible;
    text-align: center;
    display: none;
}

/* --------------------------------------------------------------------------
   Works Cases Grid (Design section — 2-col, label above image)
   -------------------------------------------------------------------------- */

.works-cases-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 6rem;
}

.works-case-card {
    list-style: none;
}

.works-case-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.works-case-label {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0;
    color: var(--color-primary);
    padding: 1rem 0;
    border-bottom: var(--border-thin);
    display: flex;
    align-items: center;
}

.works-case-thumb {
    aspect-ratio: 5 / 4;
    overflow: hidden;
    background: rgba(0,0,0,0.03);
    position: relative;
}

.works-case-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Hover zoom for video only — images use JS parallax (inline transform) */
.works-case-card:hover .works-case-thumb video {
    transform: scale(1.1);
    transition: transform 500ms var(--ease-gravity);
}

.works-empty {
    font-family: var(--font-mono);
    font-size: 14px;
    opacity: 0.5;
    padding: 4rem 0;
}

/* --------------------------------------------------------------------------
   Works Info Sections (Clients, Publications, Collaboration)
   -------------------------------------------------------------------------- */

.works-info-section {
    padding-top: 6rem;
}

.works-info-heading {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 400;
    text-transform: uppercase;
    color: var(--color-primary);
    margin: 0;
    letter-spacing: -0.01em;
    padding: 1rem 0;
    border-bottom: var(--border-thin);
}

.works-info-row {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 2rem;
    padding: 1.5rem 0;
    border-bottom: var(--border-thin);
}

.works-info-label {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0;
    color: var(--color-primary);
    padding-top: 2px;
}

.works-info-text {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   Works Photo Grid (Visual Storytelling section)
   -------------------------------------------------------------------------- */

.works-photo-section {
    margin-bottom: 3rem;
}

/* Matches .case-header exactly: label text → border-bottom line → content below */
.works-photo-label {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0;
    line-height: 1.6;
    color: var(--color-primary);
    border-bottom: var(--border-thin);
    display: flex;
    align-items: center;
    margin: 0 0 1rem 0;
}

.works-photo-grid {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.5rem;
    /* Hide scrollbar for cleaner look */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.works-photo-grid::-webkit-scrollbar {
    display: none;
}

/* Multi-row grid variant (rows > 1 in admin) */
.works-photo-grid--wrap {
    flex-wrap: wrap;
    max-height: var(--grid-max-height);
    overflow: hidden;
}

/* Hidden inline SVG filter container */
.works-glass-svg {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.works-photo-item {
    flex: 0 0 auto;
    height: clamp(280px, 55vw, 415px);
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.04);
    position: relative;
    scroll-snap-align: start;
    cursor: pointer;
}

.works-photo-item img {
    height: 100%;
    width: auto;
    object-fit: cover;
    display: block;
}

.works-photo-item:hover::after {
    opacity: 0;
}

/* --------------------------------------------------------------------------
   Works Movement Section
   -------------------------------------------------------------------------- */

.works-movement-hero {
    width: 100vw;
    height: 100vh;
    left: 50%;
    transform: translateX(-50%);
    margin-top: -7rem;
    margin-bottom: 4rem;
    position: relative;
    overflow: hidden;
}

.works-movement-hero-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 0 0 8px 8px;
}

.works-movement-body {
    max-width: 800px;
    padding: 4rem 0;
    margin-left: auto;
}

.works-movement-body p {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-primary);
    margin: 0;
}

/* --------------------------------------------------------------------------
   Works Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .works-cases-grid {
        grid-template-columns: repeat(2, 1fr);
    }



    .works-info-row {
        grid-template-columns: 120px 1fr;
    }
}

@media (max-width: 768px) {
    .works-nav {
        bottom: 16px;
        padding: 0.875rem 1.5rem;
    }

    .works-nav-list {
        gap: 1rem;
    }

    .works-nav-link {
        font-size: 11px;
    }

    .works-cases-grid {
        grid-template-columns: 1fr;
    }



    .works-info-row {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .works-page-title {
        font-size: clamp(2.5rem, 8vw, 4rem);
    }

    /* Photo grid: reduce item height so images don't dominate the full viewport */
    .works-photo-item {
        height: 260px;
    }

    /* Movement hero: reduce from 100vh to something more comfortable on mobile */
    .works-movement-hero {
        height: 60svh;
        margin-top: -4rem;
    }

    /* Movement body: reset right-alignment (no effect at 100% width, but cleaner) */
    .works-movement-body {
        padding: 2.5rem 0;
    }
}

/* ==========================================================================
   About Page
   ========================================================================== */
body.page-template-page-about {
    background-color: var(--color-dark);
}

/* Hide or dim grid background on About page */
body.page-template-page-about .grid-background {
    opacity: 0.05;
}

/* Ensure header stays fixed on About page.
   translateZ(0) instead of none: promotes the header to its own GPU compositing layer,
   which prevents the iOS Safari "fixed scrolls with page" bug that occurs when sibling
   fixed elements use backdrop-filter (hire bar) or when page content uses filter+transform
   (mobile portrait). GSAP's clearProps still works — it removes the inline transform
   and the CSS translateZ(0) takes over, keeping the header correctly positioned. */
body.page-template-page-about .site-header {
    background-color: transparent;
    transform: translateZ(0) !important;
    top: 0 !important;
    position: fixed !important;
    will-change: transform;
}

/* Mobile: mix-blend-mode:difference is not needed on the dark about-page background
   (color:white already gives correct white text). Removing it reduces compositing
   complexity, further helping iOS Safari keep the header fixed during scroll. */
@media (max-width: 1024px) {
    body.page-template-page-about .site-header {
        mix-blend-mode: normal;
    }
}

.about-page-wrapper {
    padding-top: 24vh;
    padding-bottom: 20vh;
    background-color: transparent;
    color: var(--color-secondary); /* Light text */
    min-height: 100vh;
}

.about-grid-container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: calc(100vw / 12);
    width: 100%;
    padding: 0 var(--container-padding); /* Match site .container width */
}

/* Base row layout for sections */
.about-section-row {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 16px; /* 16px horizontal gap between the two divider lines */
}

/* Divider lines: two separate segments per column */
.about-col-left {
    border-top: var(--border-thin-light);
}
.about-col-right {
    border-top: var(--border-thin-light);
}

/* Left Label Column */
.about-col-left {
    grid-column: 1 / 5;
    padding-top: 16px; /* 16px gap between divider line and label */
    padding-bottom: 2rem;
}

/* Right Content Column */
.about-col-right {
    grid-column: 5 / 13;
    padding-top: 16px; /* 16px gap between divider line and content */
    padding-bottom: 2rem;
}

/* Tools Marquee — constrained to .about-col-right width */
.tools-marquee {
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.tools-marquee-track {
    display: flex;
    width: max-content;
    animation: tools-marquee-scroll 60s linear infinite;
}

.tools-marquee-set {
    display: flex;
    align-items: center;
    gap: 3rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-right: 3rem;
    flex-shrink: 0;
}

.tools-marquee-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem; /* spacing between paired icon + wordmark within one brand */
    height: 44px;
    color: var(--color-secondary); /* drives currentColor SVGs to render white */
}

.tools-marquee-logo {
    height: 100%;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    opacity: 0.85;
    transition: opacity 0.2s ease;
}

.tools-marquee-logo:hover {
    opacity: 1;
}

.tools-marquee-wordmark {
    font-family: var(--font-mono);
    font-size: 16px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-secondary);
    opacity: 0.85;
    white-space: nowrap;
}

.tools-marquee:hover .tools-marquee-track {
    animation-play-state: paused;
}

@keyframes tools-marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (max-width: 768px) {
    .tools-marquee-set {
        gap: 3rem;
        padding-right: 3rem;
    }
    .tools-marquee-item {
        height: 56px;
    }
    .tools-marquee-logo {
        max-width: 120px;
    }
    .tools-marquee-wordmark {
        font-size: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tools-marquee-track {
        animation: none;
    }
}

/* Intro section: fills remaining viewport height */
.intro-section {
    min-height: calc(100vh - 7rem - 24vh); /* Subtract header spacer + wrapper padding */
}

.intro-section .about-col-left {
    display: flex;
    flex-direction: column;
    padding-bottom: 1rem; /* Portrait bottom 1rem from viewport bottom */
}

.intro-section .about-portrait-wrapper {
    margin-top: auto; /* Push portrait to bottom */
}

/* Body text section: sits below divider */
.about-body-section .about-col-right {
    padding-top: 16px;
}


/* Spacing between Collaboration, Experience, Education blocks */
.collaboration-section,
.experience-section,
.education-section {
   
}

/* Labels (INTRODUCTION, COLLABORATION, etc.) */
.about-label {
    font-family: var(--font-heading); /* Bebas Neue */
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 2.16px;
    line-height: 1.3;
    margin: 0;
    color: var(--color-secondary);
}

/* Section 1: Intro Text */
.about-intro-text {
    font-family: var(--font-body);
    font-size: clamp(2rem, 3.5vw, 42px);
    font-weight: 400;
    line-height: 1.3; /* Figma: 130% */
    margin: 0; /* No bottom margin — flex space-between handles spacing */
    text-transform: none; /* Override default heading uppercase */
}

.about-body-text {
    width: 100%; /* Full right column width, same as headline */
}

.about-body-text p {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

/* About Core Animation */
.about-animation-container {
    width: calc(100% + 60px);
    margin-left: -30px;
    max-width: none;
    aspect-ratio: 1 / 1;
    position: relative;
    font-size: clamp(0.875rem, 1.5vw + 0.5rem, 1rem); /* Tags scale from 14px mobile to 16px desktop */
}

#about-core-animation {
    width: 100%;
    height: 100%;
    display: block;
}

/* Section 1: Portrait */
.about-portrait-wrapper {
    width: 100%;
    max-width: 200px;
    overflow: hidden;
}

.about-portrait {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%); /* Optional based on design */
}

/* Section 2: Collaboration List */
.about-list-grid {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.about-list-item {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.about-list-title {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 1.1rem;
}

.about-list-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.5;
}

/* Sections 3 & 4: Timeline Lists */
.about-timeline-list {
    display: flex;
    flex-direction: column;
}

.about-timeline-item {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr; /* Year | Company | Role */
    gap: 2rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    font-family: var(--font-body);
    font-size: 1rem;
}

.about-timeline-item:last-child {
    border-bottom: none;
}

.timeline-year {
    font-family: var(--font-mono);
    font-size: 0.9rem;
}

/* Mobile portrait — hidden on desktop, shown on mobile */
.about-portrait-mobile-wrap {
    display: none;
}

/* ==========================================================================
   About Page - Responsive (Mobile / Tablet ≤ 1024px)
   ========================================================================== */
@media (max-width: 1024px) {

    /* Wrapper: Figma puts the intro label 256px from the top of the frame.
       The shared .works-header-spacer above already adds 7rem (112px),
       so we need 144px more on the wrapper to land at 256px total. */
    .about-page-wrapper {
        padding-top: 144px;
        padding-bottom: 0;
    }

    /* Container: collapse the desktop 12-col grid so children flow as a
       normal block. Without this, the 12-col grid + column-gap is still
       active and any child without `grid-column: 1 / -1` (e.g. the mobile
       portrait wrap) gets squeezed into a single 1/12 column. */
    .about-page-wrapper .container.about-grid-container {
        display: block;
        padding: 0;
        column-gap: 0;
    }

    /* All section rows collapse to single flex column */
    .about-section-row {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding-top: 0;
        padding-bottom: 0;
    }

    /* Strip desktop grid columns and top borders from both columns */
    .about-col-left,
    .about-col-right {
        grid-column: unset;
        border-top: none;
        padding-top: 0;
        padding-bottom: 0;
    }

    /* ----------------------------------------------------------------
       Intro section
       ---------------------------------------------------------------- */
    .intro-section {
        min-height: auto;
        padding: 0 16px;
    }

    .intro-section .about-col-left {
        display: flex;
        flex-direction: column;
    }

    /* Label gets a bottom divider as section header */
    .intro-section .about-label {
        border-bottom: var(--border-thin-light);
        padding: 16px 0;
    }

    /* Hide desktop portrait — mobile portrait element takes over */
    .intro-section .about-portrait-wrapper {
        display: none;
    }

    .intro-section .about-col-right {
        padding: 32px 0;
    }

    .about-intro-text {
        font-size: 36px;
        line-height: 1.3;
        margin: 0;
    }

    /* Mobile portrait: shown between headline and body text.
       Figma wraps intro / portrait / body in a flex column with gap:64px,
       and the portrait sits inside a 358px-wide centered box flush right —
       which equals page-right minus 16px in absolute terms. */
    .about-portrait-mobile-wrap {
        display: flex;
        justify-content: flex-end;
        padding-right: 16px;
        margin-top: 64px;
    }

    .about-portrait-mobile-img {
        display: block;
        width: 59.23%; /* 231 / 390 */
        max-width: 231px;
        height: auto;
        aspect-ratio: 231 / 341;
        object-fit: cover;
        /* translateZ(0) promotes this element to its own GPU compositing layer.
           Without it, filter+transform on a scroll-layer element can prevent iOS Safari
           from using its fixed-overlay compositing path, making fixed elements scroll. */
        transform: scaleX(-1) translateZ(0);
        filter: grayscale(100%);
        will-change: transform;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    /* ----------------------------------------------------------------
       Body text section
       ---------------------------------------------------------------- */
    .about-body-section {
        padding: 0 16px;
        padding-bottom: 0;
        margin-top: 64px; /* Figma: 64px gap between portrait and body text */
    }

    .about-body-section .about-col-left {
        border-bottom: var(--border-thin-light);
    }

    .about-body-section .about-label {
        padding: 16px 0;
    }

    .about-body-section .about-col-right {
        border-top: var(--border-thin-light);
        padding-top: 32px;
        padding-bottom: 32px;
    }

    .about-body-text p {
        font-size: 18px;
        line-height: 1.3;
        margin-bottom: 1.5rem;
    }

    /* ----------------------------------------------------------------
       Collaboration / Experience / Education sections
       ---------------------------------------------------------------- */
    .collaboration-section,
    .experience-section,
    .education-section,
    .tools-section {
        margin-top: 128px;
        padding: 0 16px;
    }

    /* Section label col becomes a full-width header with bottom divider */
    .collaboration-section .about-col-left,
    .experience-section .about-col-left,
    .education-section .about-col-left,
    .tools-section .about-col-left {
        border-bottom: var(--border-thin-light);
    }

    .collaboration-section .about-label,
    .experience-section .about-label,
    .education-section .about-label,
    .tools-section .about-label {
        padding: 16px 0;
    }

    /* Collab: list wrapper provides the 32px gap from section divider.
       Experience/Education: each timeline item already has padding-top:32px,
       so col-right must NOT add an extra 32 — that would stack to 64. */
    .collaboration-section .about-col-right {
        padding-top: 32px;
    }

    /* ----------------------------------------------------------------
       Collaboration list items
       Figma 1:59 has gap:32 between items + each item pb:32 + border-b,
       so the next item's title starts 32px below the previous divider. */
    .about-list-grid {
        gap: 32px;
    }

    .about-list-item {
        gap: 32px;
        padding-bottom: 32px;
        border-bottom: var(--border-thin-light);
    }

    .about-list-title {
        font-size: 18px;
        line-height: 1.3;
    }

    .about-list-row {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .about-list-left,
    .about-list-right {
        font-family: var(--font-body);
        font-size: 18px;
        line-height: 1.3;
    }

    /* ----------------------------------------------------------------
       Timeline items (Experience & Education)
       ---------------------------------------------------------------- */
    .about-timeline-item {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 32px 0;
        border-bottom: var(--border-thin-light);
    }

    /* Keep bottom border on last item on mobile (Figma has it) */
    .about-timeline-item:last-child {
        border-bottom: var(--border-thin-light);
    }

    .timeline-year,
    .timeline-company,
    .timeline-role {
        font-family: var(--font-body);
        font-size: 18px;
        line-height: 1.3;
        font-weight: 400;
    }
}

/* ==========================================================================
   Case Login Gate
   ========================================================================== */

/* Prevent scrolling when the gate is active */
body.has-case-gate {
    overflow: hidden;
}

/* Blur the case content behind the overlay */
body.has-case-gate .single-case-article {
    filter: blur(6px);
    pointer-events: none;
    user-select: none;
}

/* Full-screen overlay backdrop */
.case-login-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    padding: 2rem;
}

/* Modal card — glassmorphic like .works-nav */
.case-login-modal {
    background: rgba(80, 80, 80, 0.45);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    color: white;
    width: 100%;
    max-width: 460px;
    padding: 2rem 2rem;
    border-radius: 10px;
}

/* Eyebrow — contact-page .form-label style */
.login-modal-eyebrow {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 1rem;
}

/* Title */
.login-modal-title {
    font-family: var(--font-heading);
    font-size: 3.5rem;
    line-height: 0.95;
    text-transform: uppercase;
    margin: 0 0 2rem;
    color: white;
}

/* Password field — contact-page .form-label + .form-input style */
.case-login-modal .login-password {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.login-password-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.case-login-modal label {
    display: block;
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.5);
}

.case-login-modal input[type="password"] {
    display: block;
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.75rem 2.5rem 0.75rem 0;
    font-family: var(--font-body);
    font-size: 18px;
    color: white;
    outline: none;
    border-radius: 0;
    transition: border-color 0.3s ease;
}

.case-login-modal input[type="password"]::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.case-login-modal input[type="password"]:focus {
    border-bottom-color: white;
}

/* Toggle visibility button */
.login-toggle-pw {
    position: absolute;
    right: 0;
    bottom: 0.75rem;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.45);
    line-height: 0;
    transition: color 0.2s ease;
}

.login-toggle-pw:hover {
    color: white;
}

/* Show eye-open by default, eye-closed hidden */
.pw-icon--show { display: block; }
.pw-icon--hide { display: none; }

/* When toggled to text type, swap icons */
.login-password-wrapper.is-visible .pw-icon--show { display: none; }
.login-password-wrapper.is-visible .pw-icon--hide { display: block; }

/* When visible: strip the input chrome — just plain white text */
.login-password-wrapper.is-visible input[type="text"] {
    border-bottom-color: transparent;
    letter-spacing: normal;
}

/* Submit — btn-pill-arrow primary style */
.case-login-modal .login-submit {
    margin-top: 2rem;
}

.login-unlock-btn {
    width: 100%;
    justify-content: center;
    border: none;
    margin-bottom: 1rem;
}

/* Back button — eyebrow type, 50% opacity, centers under unlock */
.login-modal-back {
    display: block;
    width: 100%;
    padding: 0;
    background: transparent;
    border: none;
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    cursor: pointer;
    transition: color 0.2s var(--ease-out);
}

.login-modal-back:hover {
    color: #fff;
}

/* Status feedback via eyebrow repurpose */
.case-login-modal .login-status {
    font-family: var(--font-mono);
    font-size: 14px;
    margin-top: 1.5rem;
    transition: color 0.3s ease;
}

@media (max-width: 480px) {
    .case-login-modal {
        padding: 2.5rem 1.5rem;
    }
    .login-modal-title {
        font-size: 2.5rem;
    }
}

/* ==========================================================================
   Lightbox — Visual Storytelling
   ========================================================================== */

/* Clickable photo items */
.lightbox-trigger {
    cursor: pointer;
}

/* Prevent body scroll while lightbox is open */
body.lightbox-open {
    overflow: hidden;
}

/* Overlay container */
.minoka-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2147483647; /* Must be >= header z-index to render on top */
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s var(--ease-out), visibility 0s linear 0.35s;
}

.minoka-lightbox.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.35s var(--ease-gravity);
}

/* Force custom cursor to solid white when lightbox is open */
body.lightbox-open #custom-cursor,
body.lightbox-open #custom-cursor.cursor-dot,
body.lightbox-open #custom-cursor.cursor-hover,
body.lightbox-open #custom-cursor.cursor-arrow {
    mix-blend-mode: normal !important;
    background-color: #FFFFFF !important;
}

.lightbox-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.94);
    cursor: pointer;
}

/* Inner layout */
.lightbox-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 20px 20px 0;
}

/* Close button */
.lightbox-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    padding: 10px;
    z-index: 2;
    line-height: 0;
    transition: color 0.2s var(--ease-out);
}

.lightbox-close:hover {
    color: #fff;
}

/* Image area */
.lightbox-media {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 40px 80px;
    min-height: 0;
}

.lightbox-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    transition: opacity 0.15s var(--ease-out);
}

.lightbox-img.is-transitioning {
    opacity: 0;
}

/* Info bar */
.lightbox-info-bar {
    flex-shrink: 0;
    padding: 16px 80px 24px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    color: rgba(255, 255, 255, 0.9);
    border-top: 0.5px solid rgba(255, 255, 255, 0.2);
    min-height: 56px;
}

.lightbox-info-text {
    flex: 1;
    min-width: 0;
}

.lightbox-title {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 4px 0;
    color: #fff;
}

.lightbox-subtitle {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 13px;
    margin: 0 0 6px 0;
    opacity: 0.65;
}

.lightbox-info {
    font-family: var(--font-body);
    font-size: 12px;
    line-height: 1.55;
    margin: 0;
    opacity: 0.45;
    max-width: 600px;
}

.lightbox-counter {
    font-family: var(--font-mono);
    font-size: 11px;
    opacity: 0.35;
    white-space: nowrap;
    align-self: flex-start;
    padding-top: 4px;
}

/* Navigation arrows */
.lightbox-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    padding: 20px 14px;
    z-index: 2;
    line-height: 0;
    transition: color 0.2s var(--ease-out);
}

.lightbox-arrow:hover {
    color: rgba(255, 255, 255, 0.95);
}

.lightbox-prev { left: 8px; }
.lightbox-next { right: 8px; }

/* Responsive */
@media (max-width: 768px) {
    .lightbox-media {
        padding: 32px 52px;
    }

    .lightbox-info-bar {
        padding: 12px 16px 20px;
        flex-direction: column;
        gap: 0.5rem;
    }

    .lightbox-counter {
        align-self: auto;
    }

    .lightbox-arrow {
        padding: 16px 8px;
    }

    .lightbox-title {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .lightbox-media {
        padding: 20px 40px;
    }
}

/* ==========================================================================
   Scale Carousel — pinned horizontal carousel, items scale small→big L→R
   ========================================================================== */
/* ==========================================================================
   Works Header (Above Carousel)
   ========================================================================== */
.about-works-header {
    position: absolute;
    /* top set dynamically via JS to align with biggest image */
    left: var(--container-padding);
    display: flex;
    gap: 2rem;
    align-items: baseline;
    z-index: 20;
    pointer-events: auto;
    overflow: hidden;
    padding-bottom: 0.2em;
}

.about-works-subtitle,
.about-works-view-all {
    display: inline-block;
    will-change: transform;
}

.about-works-subtitle {
    font-family: var(--font-heading);
    font-size: 1rem;
    color: var(--color-primary);
    opacity: 0.3;
    text-transform: uppercase;
    margin: 0;
    letter-spacing: 0.02em;
}

.about-works-view-all {
    font-family: var(--font-heading);
    font-size: 1rem;
    color: var(--color-primary);
    text-transform: uppercase;
    text-decoration: none;
    margin: 0;
}

.about-works-view-all:hover {
    opacity: 1 !important;
}

.about-works-view-all .nav-text,
.about-works-view-all .nav-text.second {
    color: var(--color-primary);
}

@media (max-width: 768px) {
    .about-works-header {
        left: 50%;
        transform: translateX(-50%);
        gap: 1rem;
    }
}

.scale-carousel {
    position: relative;
    width: 100%;
    margin-top: 20vh;
    /* height set by JS = window.innerHeight + scrollDistance */
}

.scale-carousel__pin {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
}

.scale-carousel__viewport {
    position: absolute;
    inset: 0;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    cursor: none; /* let custom cursor system handle it */
    touch-action: none;
    user-select: none;
}

.scale-carousel__track {
    position: relative;
    height: 0;
    width: 100%;
}

.scale-carousel__item {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0; /* set by JS */
    transform-origin: center bottom;
    will-change: transform;
    text-decoration: none;
    color: inherit;
}

.scale-carousel__media {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #111;
    /* 4px at scaleMax (1.55) => base 2.58px; CSS transform scales radius proportionally */
    border-radius: 2.58px 2.58px 0 0;
}

.scale-carousel__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}

.scale-carousel__label {
    position: absolute;
    left: 8px;
    top: 8px;
    overflow: hidden; /* mask for stagger reveal */
    pointer-events: none;
    font-family: var(--font-mono, monospace);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    mix-blend-mode: difference;
    white-space: nowrap;
}

.scale-carousel__label-inner {
    display: inline-block;
    will-change: transform;
}

@media (max-width: 768px) {
    .scale-carousel__viewport {
        /* pan-y lets the browser handle vertical scroll (drives ScrollTrigger)
           while JS pointer events still fire for horizontal drag.
           Must come after the global touch-action:none rule to win the cascade. */
        touch-action: pan-y;
        cursor: auto;
    }

    /* Make about text container relative and block on mobile to allow the text inside to stick to its own height + content runway */
    .about-section .container {
        display: block;
        position: relative;
        top: auto;
        height: auto; /* Override height: 100% to let it collapse naturally to content */
        padding-bottom: 0; /* Runway is handled by ::after to avoid content-box sticky issues */
    }

    /* Create the sticky runway/spacer using a pseudo-element inside the container.
       This ensures the parent's content box is taller than the sticky text, allowing position:sticky to function. */
    .about-section .container::after {
        content: '';
        display: block;
        height: 100vh; /* Sticky runway/spacer height */
    }

    /* Make about text sticky at top: 40vh on mobile, getting pushed up when the runway ends */
    .about-text {
        position: -webkit-sticky;
        position: sticky;
        top: 40vh;
        padding: 0;
        align-self: start; /* Prevent grid stretch to allow sticky flow */
    }

    .about-line-mask {
        display: block;
        overflow: hidden;
        padding-bottom: 0.25em;
        margin-bottom: -0.25em;
    }

    .about-line-inner {
        display: block;
        will-change: transform;
    }

    /* Setup 70vh height and bottom pinning for the carousel on mobile */
    .scale-carousel__pin {
        height: 70vh;
        top: 30vh;
    }

    .scale-carousel {
        margin-top: 40vh;
    }
}

/* ==========================================================================
   Archive Pages — Cases & Photography
   Scoped via body classes so they only apply on the respective archive pages
   (front-page reuses .cases-grid etc. with different rules above).
   ========================================================================== */

/* Shared archive header */
.post-type-archive-cases .container,
.post-type-archive-photography .container {
    padding-top: 8rem;
}

.archive-page-header {
    margin-bottom: 5rem;
}

.post-type-archive-photography .archive-page-header {
    margin-bottom: 8rem;
}

.archive-page-title {
    font-size: 5rem;
    line-height: 0.9;
    margin: 0;
}

.archive-description {
    max-width: 600px;
    margin-top: 2rem;
    font-size: 1.25rem;
}

.archive-pagination {
    margin-top: 4rem;
    border-top: 1px solid var(--color-grid);
    padding-top: 2rem;
}

.post-type-archive-photography .archive-pagination {
    margin-top: 8rem;
}

/* Cases archive grid (12-col, dynamic span set inline per item) */
.post-type-archive-cases .cases-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 2rem;
}

.post-type-archive-cases .case-item {
    margin-bottom: 4rem;
}

.post-type-archive-cases .case-link {
    display: block;
    position: relative;
    overflow: hidden;
}

.post-type-archive-cases .case-thumbnail {
    background-color: #f0f0f0;
    aspect-ratio: 16 / 9;
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.post-type-archive-cases .case-thumbnail img,
.post-type-archive-cases .case-thumbnail video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-type-archive-cases .case-thumbnail img {
    transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}

@media (hover: hover) and (pointer: fine) {
    .post-type-archive-cases .case-item:hover .case-thumbnail img {
        transform: scale(1.05);
    }
}

.post-type-archive-cases .case-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: none;
}

.post-type-archive-cases .case-title {
    margin: 0;
    font-size: 2.5rem;
    text-transform: uppercase;
}

.post-type-archive-cases .case-client {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    margin-top: 0.25rem;
    opacity: 0.5;
}

.post-type-archive-cases .case-arrow {
    font-size: 2rem;
}

.case-no-thumbnail {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eee;
    font-family: var(--font-heading);
}

/* Photography archive grid */
.post-type-archive-photography .photography-masonry {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6rem;
}

.post-type-archive-photography .photo-project {
    margin-bottom: 4rem;
}

.post-type-archive-photography .photo-link {
    display: block;
}

.post-type-archive-photography .photo-media {
    margin-bottom: 2rem;
    background: #f9f9f9;
}

.post-type-archive-photography .photo-media img {
    width: 100%;
    height: auto;
    display: block;
    filter: grayscale(100%);
    transition: filter 0.5s ease;
}

@media (hover: hover) and (pointer: fine) {
    .post-type-archive-photography .photo-project:hover .photo-media img {
        filter: grayscale(0%);
    }
}

.post-type-archive-photography .photo-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.post-type-archive-photography .photo-title {
    margin: 0;
    font-size: 2.5rem;
    text-transform: uppercase;
}

.photo-series-label {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    opacity: 0.4;
}

/* Mobile — both archives collapse to single column */
@media (max-width: 768px) {
    .post-type-archive-cases .container,
    .post-type-archive-photography .container {
        padding-top: 6rem;
    }

    .archive-page-header,
    .post-type-archive-photography .archive-page-header {
        margin-bottom: 3rem;
    }

    .archive-page-title {
        font-size: clamp(2.5rem, 12vw, 4rem);
    }

    .archive-description {
        font-size: 1rem;
        margin-top: 1.5rem;
    }

    /* Cases: collapse 12-col grid to single column, neutralize inline grid-column span */
    .post-type-archive-cases .cases-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .post-type-archive-cases .case-item {
        grid-column: 1 / -1 !important;
        margin-bottom: 2.5rem;
    }

    .post-type-archive-cases .case-title {
        font-size: clamp(1.75rem, 7vw, 2.25rem);
    }

    .post-type-archive-cases .case-arrow {
        font-size: 1.5rem;
    }

    /* Photography: single column, kill stagger offset */
    .post-type-archive-photography .photography-masonry {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .post-type-archive-photography .photo-project {
        margin-top: 0 !important;
        margin-bottom: 2.5rem;
    }

    .post-type-archive-photography .photo-title {
        font-size: clamp(1.75rem, 7vw, 2.25rem);
    }

    .post-type-archive-photography .archive-pagination,
    .archive-pagination {
        margin-top: 3rem;
    }
}