/* Cross-document page transition — eliminates white flash on navigation */
        @view-transition { navigation: auto; }
        ::view-transition-group(root) { animation-duration: 0.35s; }

        * { box-sizing: border-box; }
        p { margin: 0; }

        html { scroll-behavior: smooth; }

        body {
            background: transparent;
            color: #2D2A26;
            font-family: 'Inter', sans-serif;
            margin: 0;
            padding: 0;
            overflow-x: hidden;
        }

        /* Fixed viewport background layer — renders behind all content */
        #page-bg {
            position: fixed;
            inset: 0;
            z-index: -1;
            pointer-events: none;
            background: radial-gradient(ellipse at 80% 10%, #F2EBE3 0%, transparent 60%), linear-gradient(170deg, #FAF7F2 0%, #F2EBE3 55%, #EDE5D8 100%);
        }

        ::selection {
            background: #2D2A26;
            color: #FDFCFA;
        }

        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                transition-duration: 0.01ms !important;
                scroll-behavior: auto !important;
            }
        }

        /* ── Screen-reader only utility (ADA) ───────────────────────── */
        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0,0,0,0);
            white-space: nowrap;
            border: 0;
        }

        /* ── Skip navigation link (ADA) ─────────────────────────────── */
        .skip-link {
            position: absolute;
            top: -9999px;
            left: -9999px;
            z-index: 99999;
            background: #2D2A26;
            color: #FAF7F2;
            padding: 0.6rem 1.2rem;
            border-radius: 4px;
            font-size: 0.875rem;
            font-family: 'Inter', sans-serif;
            text-decoration: none;
            white-space: nowrap;
        }
        .skip-link:focus {
            top: 1rem;
            left: 1rem;
        }

        /* ── Global focus-visible styles (ADA) ──────────────────────── */
        :focus-visible {
            outline: 2px solid #E8A090;
            outline-offset: 3px;
            border-radius: 3px;
        }
        /* Override for elements where a tighter offset looks better */
        .hero-chip-cta:focus-visible {
            outline-offset: 4px;
        }
        #floating-nav a:focus-visible {
            outline-offset: 2px;
        }
        .cs-nav a:focus-visible {
            outline-offset: 4px;
        }

        /* Nav */
        .cs-nav {
            position: fixed;
            top: 0; left: 0; right: 0;
            z-index: 9999;
            padding: 1.25rem 1.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: rgba(250, 247, 242, 0.92);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border-bottom: 1px solid rgba(45, 42, 38, 0.06);
        }
        @media (min-width: 1024px) {
            .cs-nav { padding: 1.25rem 3rem; }
        }
        .cs-nav a {
            font-family: 'Inter', sans-serif;
            font-size: 0.75rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: #2D2A26;
            text-decoration: none;
            opacity: 0.7;
            transition: opacity 0.2s;
        }
        .cs-nav a:hover { opacity: 1; }
        .cs-nav-right { display: flex; gap: 1.5rem; align-items: center; }

        /* ── Mobile hamburger menu ───────────────────────────────────── */
        /* Hide desktop nav links on mobile, show hamburger */
        @media (max-width: 767px) {
            .cs-nav-right { display: none; }
        }

        .cs-hamburger-btn {
            display: none;
            background: none;
            border: none;
            color: #2D2A26;
            cursor: pointer;
            padding: 0.25rem;
        }
        @media (max-width: 767px) {
            .cs-hamburger-btn { display: flex; align-items: center; }
        }

        .cs-mobile-menu {
            position: fixed;
            inset: 0;
            z-index: 10000;
            background: url('lgf-design-portfolio_images/mobile menu background image_v5.png') center/cover no-repeat;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
        }
        .cs-mobile-menu.open {
            opacity: 1;
            visibility: visible;
        }

        .cs-mobile-menu-close {
            position: absolute;
            top: 1.25rem;
            right: 1.5rem;
            background: none;
            border: none;
            color: #2D2A26;
            cursor: pointer;
            padding: 0.5rem;
            transition: opacity 0.2s ease;
        }
        .cs-mobile-menu-close:hover { opacity: 0.6; }
        .cs-mobile-menu-close:focus-visible {
            outline: 2px solid #E8A090;
            outline-offset: 4px;
        }

        .cs-mobile-menu-nav {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2rem;
        }

        .cs-mobile-nav-link {
            font-family: 'Instrument Serif', serif;
            font-size: 3.75rem;
            font-weight: 400;
            font-style: italic;
            color: #2D2A26;
            text-decoration: none;
            padding: 0.5rem 1rem;
            transition: opacity 0.2s ease;
        }
        .cs-mobile-nav-link:hover { opacity: 0.6; }
        .cs-mobile-nav-link:focus-visible {
            outline: 2px solid #E8A090;
            outline-offset: 4px;
        }

        /* Only show on mobile */
        @media (min-width: 768px) {
            .cs-mobile-menu { display: none; }
        }

        /* Floating centered pill nav */
        #floating-nav {
            position: fixed;
            top: calc(4.5rem + 20px);
            right: 1.5rem;
            z-index: 9998;
            display: flex;
            align-items: center;
            gap: 0.1rem;
            border-radius: 999px;
            padding: 0.25rem 0.5rem;
            white-space: nowrap;
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            transition: background 0.4s ease, border-color 0.4s ease;
        }
        @media (min-width: 1024px) {
            #floating-nav { right: 3rem; }
        }

        /* On dark backgrounds (hero) — semi-transparent cream pill, dark text */
        #floating-nav.on-dark {
            background: rgba(250, 247, 242, 0.72);
            border: 1px solid rgba(250, 247, 242, 0.25);
        }
        #floating-nav.on-dark a {
            color: #2D2A26;
        }
        #floating-nav.on-dark a:hover { opacity: 0.6; }
        #floating-nav.on-dark a.active-section {
            color: #E8A090;
            background: rgba(45, 42, 38, 0.07);
        }
        #floating-nav.on-dark .nav-divider {
            background: rgba(45, 42, 38, 0.2);
        }

        /* On light backgrounds (cream sections) — subtle dark pill */
        #floating-nav.on-light {
            background: rgba(45, 42, 38, 0.07);
            border: 1px solid rgba(45, 42, 38, 0.15);
        }
        #floating-nav.on-light a {
            color: #2D2A26;
        }
        #floating-nav.on-light a:hover { opacity: 0.6; }
        #floating-nav.on-light a.active-section {
            color: #9E5B4A;
            font-weight: 600;
        }
        #floating-nav.on-light .nav-divider {
            background: rgba(45, 42, 38, 0.2);
        }

        /* On coral background (conclusion) — semi-transparent cream pill, dark text */
        #floating-nav.on-coral {
            background: rgba(250, 247, 242, 0.72);
            border: 1px solid rgba(250, 247, 242, 0.25);
        }
        #floating-nav.on-coral a {
            color: #2D2A26;
        }
        #floating-nav.on-coral a:hover { opacity: 0.6; }
        #floating-nav.on-coral a.active-section {
            color: #FAF7F2;
            font-weight: 600;
        }
        #floating-nav.on-coral .nav-divider {
            background: rgba(45, 42, 38, 0.2);
        }

        /* shared link styles */
        #floating-nav a {
            font-family: 'Inter', sans-serif;
            font-size: 0.6rem;
            letter-spacing: 0.09em;
            text-transform: uppercase;
            text-decoration: none;
            padding: 0.2rem 0.4rem;
            border-radius: 999px;
            transition: color 0.3s ease, background 0.3s ease, opacity 0.2s ease;
        }
        #floating-nav .nav-divider {
            width: 1px;
            height: 10px;
            flex-shrink: 0;
            margin: 0 0.1rem;
        }
        /* Mobile floating nav rules are in the mobile overrides block below */

        /* Scroll-expand image — GSAP will drive this */
        .scroll-expand {
            display: block;
            margin: 0 auto;
            max-width: 60%;
            border-radius: 16px;
            will-change: max-width, border-radius;
        }

        /* Reveal animation base states */
        .reveal {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 1.1s cubic-bezier(0.4, 0, 0.2, 1),
                        transform 1.1s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .reveal.visible {
            opacity: 1;
            transform: translateY(0);
        }
        .reveal-left {
            opacity: 0;
            transform: translateX(-30px);
            transition: opacity 1.0s cubic-bezier(0.4, 0, 0.2, 1),
                        transform 1.0s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .reveal-left.visible {
            opacity: 1;
            transform: translateX(0);
        }

        /* Delay helpers */
        .delay-1 { transition-delay: 0.1s; }
        .delay-2 { transition-delay: 0.2s; }
        .delay-3 { transition-delay: 0.3s; }
        .delay-4 { transition-delay: 0.4s; }
        .delay-5 { transition-delay: 0.5s; }

        /* Hero */
        #hero {
            position: relative;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background: transparent;
        }


        #hero-bg-img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            opacity: 0.08;
            z-index: 0;
        }

        /* Glassmorphism orbs — inside fixed #page-bg layer */
        .hero-orb {
            position: absolute;
            border-radius: 50%;
            pointer-events: none;
        }
        .hero-orb-1 {
            width: 60vw; height: 60vw;
            background: radial-gradient(circle, rgba(232, 160, 144, 0.35) 0%, transparent 68%);
            bottom: -20%; left: -15%;
            filter: blur(80px);
        }
        .hero-orb-2 {
            width: 50vw; height: 50vw;
            background: radial-gradient(circle, rgba(220, 200, 185, 0.4) 0%, transparent 68%);
            top: -15%; right: -12%;
            filter: blur(75px);
        }
        .hero-orb-3 {
            width: 45vw; height: 45vw;
            background: radial-gradient(circle, rgba(180, 200, 230, 0.4) 0%, transparent 68%);
            top: 10%; left: -8%;
            filter: blur(75px);
        }
        .hero-orb-4 {
            width: 35vw; height: 35vw;
            background: radial-gradient(circle, rgba(160, 190, 225, 0.3) 0%, transparent 65%);
            bottom: 5%; right: -5%;
            filter: blur(70px);
        }
        .hero-orb-5 {
            width: 40vw; height: 40vw;
            background: radial-gradient(circle, rgba(170, 210, 240, 0.35) 0%, transparent 68%);
            top: 30%; left: 15%;
            filter: blur(80px);
        }
        .hero-orb-6 {
            width: 30vw; height: 30vw;
            background: radial-gradient(circle, rgba(185, 215, 245, 0.3) 0%, transparent 65%);
            top: 55%; right: 20%;
            filter: blur(70px);
        }
        .hero-orb-7 {
            width: 25vw; height: 25vw;
            background: radial-gradient(circle, rgba(155, 195, 235, 0.28) 0%, transparent 65%);
            top: -5%; left: 35%;
            filter: blur(65px);
        }

        .hero-inner {
            position: relative;
            z-index: 2;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            padding: 4rem 3rem;
            width: 100%;
            max-width: 71.25rem;
            margin: 0 auto;
            background: rgba(250, 247, 242, 0.22);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            border: 1px solid rgba(255, 255, 255, 0.55);
            border-radius: 20px;
            box-shadow: 0 4px 32px rgba(180, 150, 130, 0.08), inset 0 1px 0 rgba(255,255,255,0.7);
        }

        .hero-eyebrow {
            font-size: 0.7rem;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: #E8A090;
            margin-bottom: 2rem;
            opacity: 0;
        }

        .hero-headline {
            font-family: 'Instrument Serif', serif;
            font-style: italic;
            font-size: clamp(3rem, 9vw, 8rem);
            line-height: 1.0;
            color: #2D2A26;
            margin: 0;
        }
        .hero-headline .word {
            display: inline-block;
            opacity: 0;
            transform: translateY(30px);
            margin-right: 0.22em;
        }

        .hero-tagline {
            margin-top: 1.75rem;
            font-size: clamp(0.9rem, 1.5vw, 1.1rem);
            color: #6B635A;
            max-width: 30rem;
            line-height: 1.6;
            min-height: 5.3rem;
            opacity: 0;
            transform: translateY(15px);
        }

        .hero-chips {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0;
            justify-content: center;
            margin-top: 2.5rem;
            opacity: 0;
        }
        .hero-chip {
            font-size: 0.75rem;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #6B635A;
        }
        .hero-chip + .hero-chip::before {
            content: '·';
            margin: 0 0.6rem;
            color: #9E9088;
        }
        /* "View Live Site" CTA — outlined button style */
        .hero-chip-cta {
            display: inline-flex;
            align-items: center;
            margin-left: 1rem;
            padding: 0.35rem 0.85rem;
            border: 1px solid rgba(45, 42, 38, 0.4);
            border-radius: 999px;
            color: #2D2A26 !important;
            text-decoration: none;
            transition: border-color 0.2s, color 0.2s, opacity 0.2s;
        }
        .hero-chip-cta::before { display: none; }
        .hero-chip-cta:hover {
            border-color: rgba(45, 42, 38, 0.7);
            color: #2D2A26 !important;
            opacity: 1;
        }

        .hero-scroll-hint {
            position: absolute;
            bottom: 2rem;
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.4rem;
            opacity: 0;
        }
        .hero-scroll-hint span {
            font-size: 0.65rem;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: #8B8178;
        }
        .scroll-line {
            width: 1px;
            height: 40px;
            background: rgba(45, 42, 38, 0.15);
            position: relative;
            overflow: hidden;
        }
        .scroll-line::after {
            content: '';
            position: absolute;
            top: -100%;
            left: 0;
            width: 100%;
            height: 100%;
            background: #E8A090;
            animation: scrollDrop 1.8s ease-in-out infinite;
        }
        @keyframes scrollDrop {
            0% { top: -100%; }
            100% { top: 100%; }
        }

        .hero-image-wrap {
            width: 100%;
            overflow: hidden;
            padding: 2rem 0;
        }

        /* Stats strip */
        #stats {
            background: transparent;
            border-top: 1px solid rgba(232, 160, 144, 0.4);
            box-shadow: 0 2px 6px rgba(0,0,0,0.03);
        }
        .stats-grid {
            display: grid;
            grid-template-columns: 1fr;
            max-width: 71.25rem;
            margin: 0 auto;
        }
        @media (min-width: 640px) {
            .stats-grid { grid-template-columns: repeat(3, 1fr); }
        }
        .stat-item {
            padding: 2.5rem 2rem;
            border-bottom: 1px solid rgba(45, 42, 38, 0.1);
        }
        @media (min-width: 640px) {
            .stat-item {
                border-bottom: none;
                border-right: 1px solid rgba(45, 42, 38, 0.1);
            }
            .stat-item:last-child { border-right: none; }
        }
        .stat-number {
            font-family: 'Instrument Serif', serif;
            font-size: clamp(1.8rem, 3vw, 2.5rem);
            line-height: 1.1;
            color: #2D2A26;
        }
        .stat-label {
            font-size: 0.7rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: #6B635A;
            margin-top: 0.4rem;
        }
        a.stat-item--link {
            text-decoration: none;
            transition: opacity var(--transition-base);
            display: block;
        }
        a.stat-item--link:hover { opacity: 0.65; }

        /* Section labels */
        .section-label {
            font-family: 'Instrument Serif', serif;
            font-size: clamp(0.85rem, 1.5vw, 1rem);
            color: #9E5B4A;
            letter-spacing: 0.05em;
        }

        /* Split layout */
        .split {
            display: grid;
            grid-template-columns: 1fr;
            gap: 2rem;
            max-width: 71.25rem;
            margin: 0 auto;
            padding: 4rem var(--padding-mobile);
        }
        @media (min-width: 768px) {
            .split {
                grid-template-columns: 1fr 2fr;
                gap: 4rem;
                padding: 5rem 3rem;
            }
        }
        @media (min-width: 1024px) {
            .split { padding: 6rem 3rem; }
        }

        .split-label { padding-top: 0.25rem; }

        /* Small uppercase section label — stage names, KPIs, Key Components, etc. */
        .sub-label {
            font-size: 0.7rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: #6B635A;
            margin-bottom: 0.75rem;
        }

        /* Body text */
        .body-text {
            font-size: 0.9375rem;
            line-height: 1.75;
            color: #2D2A26;
        }
        .body-text p + p { margin-top: 1.25em; }
        .coral-link {
            color: #9E5B4A;
            text-decoration: underline;
            text-underline-offset: 3px;
        }
        .coral-link:hover { opacity: 0.7; }

        /* ── Stats height token ──────────────────────────────────── */
        /* Used to size hero-image-section so stats are visible at bottom of Screen 2 */
        :root { --stats-h: 82px; }
        @media (max-width: 639px) { :root { --stats-h: 250px; } }

        /* ── Full-viewport sections ─────────────────────────────── */
        /* hero-image-section fills 100vh minus the stats strip height */
        #sticky-zone {
            background: transparent;
        }
        #hero-image-section {
            height: calc(100vh - var(--stats-h));
            height: calc(100dvh - var(--stats-h));
            background: transparent;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        /* scroll-margin-top handled in JS for precise sticky-header alignment */

        #objective {
            min-height: 100vh;
            min-height: 100dvh;
        }

        /* Left label — pinned by GSAP ScrollTrigger */
        .obj-split-label { align-self: start; }

        .obj-headline-wrap {
            max-width: 28rem;
            margin-bottom: 2rem;
        }

        /* Research section */
        #research { background: #FAF7F2; min-height: 100vh; min-height: 100dvh; }
        .research-inner {
            max-width: 71.25rem;
            margin: 0 auto;
            padding: 5rem var(--padding-mobile);
        }
        @media (min-width: 768px) {
            .research-inner { padding: 6rem 3rem; }
        }
        .research-header {
            text-align: center;
            position: sticky;
            top: 4.5rem;
            z-index: 100;
            background: #F0EBE3;
            padding: 1.5rem 2rem;
            box-shadow: 0 2px 6px rgba(0,0,0,0.03);
            margin-bottom: 4rem;
        }
        .subsection {
            margin-bottom: 4rem;
        }
        @media (min-width: 768px) {
            .subsection { margin-bottom: 5rem; }
        }
        .subsection-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 2rem;
            align-items: start;
        }
        @media (min-width: 768px) {
            .subsection-grid { grid-template-columns: 1fr 1fr; gap: 3rem; }
        }
        .subsection-title {
            font-family: 'Instrument Serif', serif;
            font-size: clamp(1.1rem, 2vw, 1.4rem);
            color: #2D2A26;
            margin-bottom: 1.25rem;
        }
        .insight-list {
            list-style: none;
            padding: 0;
            margin: 0 0 2rem;
            display: flex;
            flex-direction: column;
            gap: 0.85rem;
        }
        .insight-list li {
            font-size: 0.875rem;
            line-height: 1.65;
            color: #6B635A;
            padding-left: 1.25rem;
            position: relative;
        }
        .insight-list li::before {
            content: '—';
            position: absolute;
            left: 0;
            color: #E8A090;
            font-weight: 300;
        }

        /* Comparator chips */
        .chip-row {
            display: flex;
            flex-wrap: wrap;
            gap: 0.6rem;
            margin-bottom: 1.5rem;
        }
        .chip {
            display: inline-flex;
            align-items: center;
            padding: 0.35rem 0.9rem;
            border: 1px solid rgba(45, 42, 38, 0.2);
            border-radius: 999px;
            font-size: 0.8125rem;
            color: #2D2A26;
            background: #FAF7F2;
            font-weight: 500;
        }

        /* Parallax image wrapper */
        .parallax-img-wrap {
            overflow: hidden;
            border-radius: 5px;
        }
        .parallax-img {
            display: block;
            width: 100%;
            will-change: transform;
        }

        /* ── Marquee ─────────────────────────────────────────────────── */
        .method-marquee {
            overflow: hidden;
            padding: 1.1rem 0;
            background: rgba(255,255,255,0.25);
            backdrop-filter: blur(16px) saturate(180%);
            -webkit-backdrop-filter: blur(16px) saturate(180%);
            border-top: 1px solid rgba(255,255,255,0.5);
            border-bottom: 1px solid rgba(255,255,255,0.5);
            box-shadow: 0 4px 24px rgba(45,42,38,0.06);
        }
        .method-marquee-inner {
            display: flex;
            white-space: nowrap;
            animation: marquee-roll 28s linear infinite;
            will-change: transform;
        }
        @keyframes marquee-roll {
            from { transform: translateX(0); }
            to   { transform: translateX(-25%); }
        }
        .method-marquee-item {
            font-family: 'Inter', sans-serif;
            font-weight: 500;
            font-size: 0.7rem;
            color: #2D2A26;
            padding: 0 1.75rem;
            flex-shrink: 0;
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }
        .method-marquee-sep {
            color: #E8A090;
            flex-shrink: 0;
            font-size: 0.5rem;
            line-height: 1;
            align-self: center;
        }

        /* ── Full-bleed image ─────────────────────────────────────────── */
        .bleed-img { width: 100%; overflow: hidden; }
        .bleed-img img {
            width: 100%;
            height: 55vh;
            object-fit: cover;
            display: block;
        }

        /* ── Big stat callout ─────────────────────────────────────────── */
        .big-stat {
            max-width: 71.25rem;
            margin: 0 auto;
            padding: 4rem var(--padding-mobile);
            display: flex;
            flex-direction: column;
            gap: 1.25rem;
        }
        @media (min-width: 768px) { .big-stat { padding: 6rem 3rem; } }
        .big-stat-headline {
            font-family: 'Instrument Serif', serif;
            font-size: clamp(3rem, 5.5vw, 5.5rem);
            line-height: 1.0;
            color: #E8A090;
        }
        /* JS hook for count-up — no visual override */
        .big-stat-num { }
        .big-stat-label {
            font-family: 'Instrument Serif', serif;
            font-style: italic;
            font-size: clamp(1.5rem, 2.8vw, 2.25rem);
            line-height: 1.35;
            color: #2D2A26;
        }

        /* ── Research callout (shared layout for Competitive Matrix, Comparative Analysis) */
        .research-callout {
            display: grid;
            grid-template-columns: 1fr;
            gap: 3rem;
            max-width: 71.25rem;
            margin: 0 auto;
            padding: 4rem var(--padding-mobile);
            align-items: center;
        }
        @media (min-width: 768px) {
            .research-callout {
                grid-template-columns: 1fr 1fr;
                gap: 5rem;
                padding: 6rem 3rem;
            }
        }
        .research-callout-img {
            width: 100%;
            display: block;
            mix-blend-mode: multiply;
        }
        .research-callout-text {
            display: flex;
            flex-direction: column;
            gap: 0.4rem;
        }
        .research-callout-names {
            display: flex;
            flex-direction: column;
            gap: 0.1rem;
        }
        .research-callout-names span {
            font-family: 'Instrument Serif', serif;
            font-size: clamp(2rem, 5vw, 3.5rem);
            line-height: 1.1;
            color: #2D2A26;
        }

        /* ── User Interviews band (kept full-bleed) ───────────────────── */
        .insight-band { display: grid; grid-template-columns: 1fr; }
        @media (min-width: 768px) {
            .insight-band { grid-template-columns: 1fr 1fr; min-height: 50vh; }
            .insight-band--flip .insight-band-img { order: 2; }
            .insight-band--flip .insight-band-text { order: 1; }
        }
        .insight-band-img { overflow: hidden; min-height: 55vw; }
        @media (min-width: 768px) { .insight-band-img { min-height: unset; } }
        .insight-band-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .insight-band-text {
            padding: 3rem var(--padding-mobile);
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 1.5rem;
        }
        @media (min-width: 768px)  { .insight-band-text { padding: 4rem 3rem; } }
        @media (min-width: 1024px) { .insight-band-text { padding: 5rem 4rem; } }

        /* ── Define section ───────────────────────────────────────────── */
        #define { background: #FAF7F2; min-height: 100vh; min-height: 100dvh; }
        .define-bleed { width: 100vw; margin-left: calc(-50vw + 50%); overflow: hidden; background: #FAF7F2; }
        .define-bleed img { width: 100%; display: block; object-fit: cover; padding: 0; }
        .define-insights {
            max-width: 71.25rem;
            margin: 0 auto;
            padding: 3rem var(--padding-mobile) 6rem;
        }
        @media (min-width: 768px) { .define-insights { padding: 3rem 3rem 7rem; } }

        /* ── Design section ───────────────────────────────────────────── */
        #design { background: #FAF7F2; min-height: 100vh; min-height: 100dvh; }
        .design-content {
            max-width: 71.25rem;
            margin: 0 auto;
            padding: 0 var(--padding-mobile) 5rem;
        }
        @media (min-width: 768px) { .design-content { padding: 0 3rem 6rem; } }
        .image-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1.5rem;
            margin-top: 2rem;
        }
        @media (min-width: 640px) { .image-grid { grid-template-columns: 1fr 1fr; } }
        .image-caption {
            margin-top: 0.75rem;
            font-size: 0.8125rem;
            font-style: italic;
            color: #6B635A;
        }
        .design-bleed { width: 100%; overflow: hidden; margin-top: 3rem; }
        .design-bleed img { width: 100%; display: block; }
        @media (max-width: 600px) {
            .img-overlay-label { font-size: 0.55rem !important; padding: 0.25rem 0.5rem !important; left: 0.75rem !important; }
            .card-sort-outer { padding: 0 var(--padding-mobile) !important; }
            .card-sort-outer > div { padding-left: 0 !important; padding-right: 0 !important; }
            .card-sort-row { flex-wrap: wrap; }
            .card-sort-row > img,
            .card-sort-row > div { flex: 0 0 100% !important; min-width: 0 !important; }
        }
        @media (max-width: 767px) {
            #mobile-designs-img, #final-designs-img {
                max-width: 100% !important;
                margin: 0 auto !important;
            }
            .design-bleed { padding: 0 !important; }
        }

        /* ── Image row — stacks vertically on mobile ─────────────────── */
        .image-row { display: flex; gap: 1rem; }
        .image-row--top { align-items: flex-start; }
        @media (max-width: 767px) {
            .image-row { flex-direction: column; }
            /* Reset top-alignment on mobile so children stretch to full width */
            .image-row.image-row--top { align-items: stretch !important; }
        }

        /* ── Conclusion section ───────────────────────────────────────── */
        #conclusion {
            background: #FAF7F2;
            min-height: 100vh;
            min-height: 100dvh;
        }
        .conclusion-body {
            font-size: 1rem;
            line-height: 1.75;
            color: #2D2A26;
        }
        .conclusion-body p + p { margin-top: 1.25em; }
        .pull-quote {
            font-family: 'Instrument Serif', serif;
            font-style: italic;
            font-size: clamp(1.92rem, 3.6vw, 3rem);
            line-height: 1.45;
            color: #2D2A26;
            position: relative;
            padding-left: 1.1em;
        }
        .pull-quote::before {
            content: '\275D';
            position: absolute;
            left: 0;
            top: 0;
            font-family: 'Instrument Serif', serif;
            font-style: italic;
        }
        .pull-quote-source {
            display: block;
            margin-top: 1.25rem;
            font-size: 0.8125rem;
            font-family: 'Inter', sans-serif;
            font-style: normal;
            color: #6B635A;
            letter-spacing: 0.05em;
        }
        #pull-quote-wrap {
            position: sticky;
            top: calc(4.5rem + 9rem + 35px);
            max-width: 71.25rem;
            margin: 0 auto;
            padding: 4rem var(--padding-mobile) 1rem;
        }
        @media (min-width: 768px) {
            #pull-quote-wrap { padding: 4rem 110px 1rem 3rem; }
        }

        /* Footer */
        #cs-footer {
            background: #FAF7F2;
            border-top: 1px solid #E8A090;
            padding: 2rem 1.5rem;
        }
        @media (min-width: 768px) {
            #cs-footer { padding: 2rem 3rem; }
        }
        .footer-inner {
            max-width: 71.25rem;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 1rem;
        }
        .back-link {
            font-size: 0.8125rem;
            color: #2D2A26;
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 0.4rem;
            letter-spacing: 0.05em;
            transition: opacity 0.2s;
        }
        .back-link:hover { opacity: 0.6; }
        .footer-right {
            display: flex;
            align-items: center;
            gap: 1rem;
            font-size: 0.8125rem;
            color: #6B635A;
        }

        /* Section heading large */
        .section-heading {
            font-family: 'Instrument Serif', serif;
            font-size: clamp(2rem, 4vw, 3rem);
            color: #2D2A26;
            line-height: var(--leading-tight);
        }
        .section-heading.white { color: #FAF7F2; }

        /* Research sticky wrapper */
        .research-sticky-wrap {
            position: sticky;
            top: 4.5rem;
            z-index: 40;
            background: #FAF7F2;
            box-shadow: none;
            transition: box-shadow 250ms ease;
        }
        .research-sticky-wrap.is-stuck {
            box-shadow: 0 6px 24px rgba(45,42,38,0.07);
        }
        .research-sticky-wrap .split {
            padding-top: 1.5rem !important;
            padding-bottom: 1.5rem !important;
        }
        @media (min-width: 768px) {
            .research-sticky-wrap .split {
                padding-top: 2rem !important;
                padding-bottom: 2rem !important;
            }
        }
        .research-body-split {
            padding-top: 3rem !important;
        }
        .research-two-col {
            display: grid;
            grid-template-columns: 1fr;
            gap: 3rem;
            max-width: 71.25rem;
            margin: 0 auto;
            padding: 0 var(--padding-mobile) 6rem;
            align-items: start;
        }
        @media (min-width: 768px) {
            .research-two-col {
                grid-template-columns: 1fr 1fr;
                gap: 5rem;
                padding: 0 3rem 8rem;
            }
        }
        .research-stat-block {
            display: flex;
            flex-direction: column;
            gap: 1.25rem;
        }

        /* divider */
        .section-divider {
            height: 1px;
            background: rgba(45, 42, 38, 0.1);
            max-width: 71.25rem;
            margin: 0 auto;
        }

        /* content image */
        .content-img {
            display: block;
            width: 100%;
            border-radius: 5px;
        }

        /* ── Mobile overrides (≤600px) — DO NOT add desktop rules here ── */
        @media (max-width: 600px) {

            /* Stats strip hidden on mobile */
            #stats { display: none; }
            :root { --stats-h: 0px; }

            /* 0. Hero section — prevent any child from overflowing */
            #hero { overflow: hidden; }

            /* 0a. Hero bg image — more visible, shifted up, larger via scale */
            #hero-bg-img {
                opacity: 0.22;
                transform: scale(1.35);
                transform-origin: center 30%;
                object-position: center 20%;
            }

            /* 0b. Hero mockup — starts large, GSAP expands to 100% on scroll */
            .scroll-expand { max-width: 92%; }
            .hero-image-wrap { padding: 0.5rem 0 0 !important; }
            #hero-image-section { background: #FAF7F2 !important; height: 44dvh !important; min-height: 0 !important; }

            /* 0c. Hero inner panel — contained card, tighter padding */
            .hero-inner {
                width: calc(100% - 3.5rem);
                padding: 1.5rem 1.25rem;
            }

            /* 0c2. Tagline hidden via JS on mobile (see inline script) */

            /* 0d. VIEW LIVE SITE — own row, centered, same outlined style as desktop */
            .hero-chip-cta {
                flex-basis: 100%;
                justify-content: center;
                margin-left: 0;
                margin-top: 0.75rem;
            }

            /* 0e. Stats strip — force 3-column, smaller text/padding */
            .stats-grid { grid-template-columns: repeat(3, 1fr) !important; }
            .stat-item {
                padding: 1.25rem 0.5rem;
                border-bottom: none;
                border-right: 1px solid rgba(45, 42, 38, 0.1);
            }
            .stat-item:last-child { border-right: none; }
            .stat-number { font-size: 1.1rem; }
            .stat-label { font-size: 0.6rem; }

            /* 4-column stats grid override (must come after 3-col rule) */
            .stats-grid--4col { grid-template-columns: repeat(4, 1fr) !important; }
            .stats-grid--4col .stat-number { font-size: 0.85rem !important; }
            .stats-grid--4col .stat-label { font-size: 0.5rem !important; }
            .stats-grid--4col .stat-item { padding: 1rem 0.2rem !important; }

            /* Phone-sized screenshot columns — center and constrain on mobile */
            .phone-img-col {
                align-self: center !important;
                width: 50% !important;
                max-width: 200px !important;
                flex: none !important;
            }

            /* 1. Floating nav — full-bleed opaque bar, flush under top nav */
            #floating-nav {
                display: flex;
                flex-direction: row;
                top: 4.5rem;
                left: 0;
                right: 0;
                bottom: auto;
                transform: none;
                width: 100%;
                border-radius: 0 0 10px 10px;
                justify-content: center;
                gap: 0.4rem 0.5rem;
                padding: 0.4rem 1rem;
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;
                background: #FAF7F2 !important;
                border: none !important;
                box-shadow: 0 3px 10px rgba(45,42,38,0.08);
                flex-wrap: wrap;
            }
            #floating-nav a { font-size: 0.6rem; padding: 0.15rem 0.3rem; color: #2D2A26 !important; }
            /* Neutralise all .on-* — always opaque cream on mobile */
            #floating-nav.on-dark,
            #floating-nav.on-light,
            #floating-nav.on-coral {
                background: #FAF7F2 !important;
                border: none !important;
            }
            #floating-nav.on-dark a,
            #floating-nav.on-light a,
            #floating-nav.on-coral a { color: #2D2A26 !important; }
            #floating-nav a.active-section { color: #9E5B4A !important; font-weight: 600 !important; background: transparent !important; }

            /* 2. Section header (sticky) — clear floating nav + small gap, tighten padding */
            .research-sticky-wrap {
                top: calc(4.5rem + 1.75rem);
            }
            .research-sticky-wrap .split {
                padding-top: 0.75rem !important;
                padding-bottom: 0.75rem !important;
            }

            /* SCROLL hint — equidistant from hero panel bottom and viewport bottom */
            .hero-scroll-hint { bottom: 12dvh; }

            /* 3. Content section spacing — reduce large vertical gap */
            .split {
                padding-top: 2rem !important;
                padding-bottom: 2rem !important;
            }
            .research-callout {
                padding-top: 2rem !important;
                padding-bottom: 2rem !important;
            }
            .research-body-split {
                padding-top: 1rem !important;
            }

            /* 4. Pull quote — smaller text + less top padding */
            .pull-quote {
                font-size: 1.1rem;
                line-height: 1.5;
            }
            #pull-quote-wrap {
                padding-top: 1.5rem;
            }

            /* 5. Image label overlays — smaller on mobile */
            span[style*="top:0.75rem"][style*="left:0.75rem"] {
                font-size: 0.5rem !important;
                padding: 0.2rem 0.4rem !important;
            }

            /* 6. Moodboard + UI kit — stack vertically */
            .moodboard-row {
                flex-direction: column !important;
                padding: 2rem var(--padding-mobile) !important;
                gap: 1.5rem !important;
            }

            /* 7. Wireframes / mockups outer — use mobile padding */
            .design-section-outer {
                padding-left: var(--padding-mobile) !important;
                padding-right: var(--padding-mobile) !important;
            }

            /* 8. Mockup inner white box — less padding, images full-width */
            .mockup-box {
                padding: 1rem !important;
            }
            #mobile-designs-img,
            #final-designs-img {
                width: 100% !important;
            }
        }
    

        /* Mobile-only overrides that need their own block */
        @media screen and (max-width: 600px) {
            #hero-tagline { display: none; }
            #stats { display: none; }
        }