/* ============================================
   NICK MASON CONSTRUCTION - Main Stylesheet
   ============================================ */

:root {
    /* Colors */
    --color-bg: #f5f4f1;
    --color-text: #1a1a1a;
    --color-text-muted: #5a5a5a;
    --color-accent: #3d3d3d;
    
    /* Typography */
    --font-display: 'Barlow Condensed', sans-serif;
    --font-serif: 'Cormorant Garamond', serif;
    --font-body: 'IBM Plex Sans', sans-serif;
    
    /* Spacing */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 2rem;
    --space-lg: 4rem;
    --space-xl: 8rem;
    
    /* Transitions */
    --transition-smooth: 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    --transition-fast: 0.3s ease;
}

/* ============================================
   PAGE TRANSITIONS
   ============================================ */

body {
    opacity: 1;
    transition: opacity 0.6s ease;
}

body.fade-out {
    opacity: 0;
}

/* Parallax effect for gallery images */
.parallax-img {
    will-change: transform;
    transition: transform 0.1s ease-out;
}

/* ============================================
   RESET & BASE
   ============================================ */

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-weight: 300;
    background-color: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
    overflow-x: hidden;
}

img, video {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

/* ============================================
   NAVIGATION
   ============================================ */

nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: var(--space-md) var(--space-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: transparent;
}

/* Nav light state - white text/logo for over images/video */
nav.nav-light .logo-main,
nav.nav-light .logo-sub,
nav.nav-light .nav-links a {
    color: white;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

nav.nav-light .logo-svg {
    filter: invert(1) drop-shadow(0 1px 3px rgba(0,0,0,0.3));
}

/* Nav dark state - black text/logo for over white background */
nav.nav-dark .logo-main,
nav.nav-dark .logo-sub,
nav.nav-dark .nav-links a {
    color: var(--color-text);
    text-shadow: none;
}

nav.nav-dark .logo-svg {
    filter: none;
}

/* Logo */
.logo {
    display: flex;
    align-items: center;
    line-height: 1;
}

.logo-svg {
    height: 48px;
    width: auto;
    transition: filter 0.3s ease;
}

/* Keep text logo styles as fallback */
.logo-main {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

.logo-sub {
    font-family: var(--font-serif);
    font-size: 0.68rem;
    font-weight: 400;
    letter-spacing: 0.155em;
    text-transform: uppercase;
    margin-top: 3px;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

.nav-links {
    display: flex;
    gap: var(--space-md);
    list-style: none;
}

.nav-links a {
    font-family: var(--font-display);
    font-size: 1.18rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: opacity var(--transition-fast), color 0.3s ease, text-shadow 0.3s ease;
}

.nav-links a:hover {
    opacity: 0.6;
}

/* ============================================
   HERO SECTION
   ============================================ */

.hero {
    height: 100vh;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.hero-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.15) 0%,
        rgba(0,0,0,0) 30%,
        rgba(0,0,0,0) 60%,
        rgba(0,0,0,0.3) 100%
    );
    pointer-events: none;
}

.hero-content {
    position: absolute;
    left: var(--space-lg);
    bottom: var(--space-lg);
    z-index: 2;
    color: #fff;
}

.hero-kicker {
    font-family: var(--font-serif);
    font-size: 0.95rem;
    font-style: italic;
    font-weight: 300;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-xs);
    text-shadow: 0 1px 5px rgba(0,0,0,0.35);
}

.hero-title {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 0.95;
    text-transform: uppercase;
    text-shadow: 0 1px 6px rgba(0,0,0,0.35);
}

/* ============================================
   HOMEPAGE MAGAZINE SPREADS
   (rebuilt from the client's edited Keynote layout — each spread
    reproduces one slide: positions/sizes are slide-relative %.)
   ============================================ */

.home-page {
    background-color: #f8f7f4;
}

/* Behind the body during crossfade jumps (About / back to top) so the
   fade dips to paper, not browser white. */
html.home-document {
    background-color: #f8f7f4;
}

html.home-document {
    scroll-snap-type: y mandatory;
    scroll-padding-top: 0;
}

html.home-document.page-turn-enabled {
    scroll-behavior: auto;
    scroll-snap-type: none;
}

/* Comparison mode (?scroll=free): normal long-page scrolling, no snap.
   Set by js/main.js pageTurnScroll before it bails out. */
html.home-document.free-scroll {
    scroll-snap-type: none;
}

.home-page .home-hero {
    min-height: 600px;
    height: var(--hero-h, 100svh);
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.home-page .home-hero .hero-overlay {
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.18) 0%,
        rgba(0,0,0,0.02) 36%,
        rgba(0,0,0,0) 60%,
        rgba(0,0,0,0.16) 100%
    );
}

.image-scroll {
    background-color: #f8f7f4;
}

.magazine-spread {
    min-height: 600px;
    height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #f8f7f4;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.spread-contained.magazine-spread {
    padding: 96px clamp(1rem, 3vw, 2.5rem) 28px;
}

.spread-fullbleed.magazine-spread,
.spread-overlay.magazine-spread {
    padding: 0;
}

.spread-canvas {
    position: relative;
}

/* Contained spreads sit in a 16:9 stage (matches the deck slide) that
   fits the viewport below the nav, so frame %s map 1:1 to the slide. */
.spread-contained .spread-canvas {
    aspect-ratio: 16 / 9;
    height: min(calc(100svh - 124px), calc(96vw * 9 / 16));
    width: auto;
}

.spread-fullbleed .spread-canvas,
.spread-overlay .spread-canvas {
    width: 100vw;
    height: 100svh;
}

.mag-frame {
    position: absolute;
    margin: 0;
    overflow: hidden;
    background: #ebeae5;
    z-index: 1;
}

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

.home-page .about-section-home,
.home-page .crew-strip-about,
.home-page footer {
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

html.home-document.page-turn-enabled .home-page .home-hero,
html.home-document.page-turn-enabled .magazine-spread,
html.home-document.page-turn-enabled .home-page .about-section-home,
html.home-document.page-turn-enabled .home-page .crew-strip-about,
html.home-document.page-turn-enabled .home-page footer {
    scroll-snap-align: none;
    scroll-snap-stop: normal;
}

/* Full-width TALL plate: image fills viewport width at its natural ratio
   (taller than the screen) so it reveals slowly as you scroll through it. */
.spread-tall.magazine-spread {
    display: block;
    height: auto;
    min-height: 100svh;
    padding: 0;
    overflow: visible;
}

.spread-tall .spread-canvas {
    width: 100vw;
    height: auto;
}

.spread-tall .mag-frame {
    position: relative;
    inset: auto;
    left: auto;
    top: auto;
    width: 100vw;
    height: auto;
    background: #f8f7f4;
}

.spread-tall .mag-frame img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* ---- per-spread frame geometry (generated) ---- */
.fr-pool-pair-0 {
    left: 16.00%;
    top: 7.33%;
    width: 32.01%;
    height: 78.96%;
    z-index: 1;
}
.fr-pool-pair-1 {
    left: 52.09%;
    top: 12.37%;
    width: 32.01%;
    height: 78.96%;
    z-index: 2;
}
.fr-drone-0 {
    left: 14.58%;
    top: 7.33%;
    width: 70.95%;
    height: 84.00%;
    z-index: 1;
}
.fr-marina-pair-0 {
    left: 12.21%;
    top: 7.33%;
    width: 30.27%;
    height: 84.00%;
    z-index: 1;
}
.fr-marina-pair-1 {
    left: 47.02%;
    top: 24.97%;
    width: 40.87%;
    height: 48.38%;
    z-index: 2;
}
.fr-bench-0 {
    left: 31.13%;
    top: 7.33%;
    width: 37.84%;
    height: 84.00%;
    z-index: 1;
}
.fr-palm-0 {
    inset: 0;
}
.fr-pool-hero-0 {
    left: 33.75%;
    top: 6.67%;
    width: 32.59%;
    height: 86.67%;
    z-index: 1;
}
.fr-skylight-0 {
    left: 12.21%;
    top: 7.33%;
    width: 75.68%;
    height: 84.00%;
    z-index: 1;
}
.fr-marina-two-0 {
    left: 0.00%;
    top: 0.00%;
    width: 50.05%;
    height: 100.00%;
    z-index: 1;
}
.fr-marina-two-1 {
    left: 50.05%;
    top: 0.00%;
    width: 50.05%;
    height: 100.00%;
    z-index: 2;
}
.fr-bath-pair-0 {
    left: 21.77%;
    top: 7.33%;
    width: 25.83%;
    height: 75.60%;
    z-index: 1;
}
.fr-bath-pair-1 {
    left: 52.51%;
    top: 15.73%;
    width: 25.83%;
    height: 75.60%;
    z-index: 2;
}
.fr-wood-shadow-0 {
    left: 14.64%;
    top: 7.33%;
    width: 70.82%;
    height: 84.00%;
    z-index: 1;
}
.fr-sauna-0 {
    left: 8.90%;
    top: 7.33%;
    width: 82.30%;
    height: 84.00%;
    z-index: 1;
}
.fr-avocado-sauna-0 {
    inset: 0;
    z-index: 1;
}
.fr-avocado-sauna-1 {
    left: 43.19%;
    top: 17.41%;
    width: 38.41%;
    height: 60.48%;
    z-index: 2;
}
.fr-avocado-sauna-2 {
    left: 18.50%;
    top: 11.53%;
    width: 20.58%;
    height: 75.60%;
    z-index: 3;
}
.fr-ocean-window-0 {
    left: 14.64%;
    top: 7.33%;
    width: 70.82%;
    height: 84.00%;
    z-index: 1;
}
.fr-dark-pair-0 {
    left: 14.58%;
    top: 7.33%;
    width: 24.12%;
    height: 84.00%;
    z-index: 1;
}
.fr-dark-pair-1 {
    left: 42.96%;
    top: 25.81%;
    width: 42.57%;
    height: 47.04%;
    z-index: 2;
}
.fr-facade-dog-0 {
    left: 9.85%;
    top: 7.33%;
    width: 56.29%;
    height: 78.12%;
    z-index: 1;
}
.fr-facade-dog-1 {
    left: 58.09%;
    top: 49.33%;
    width: 28.95%;
    height: 33.60%;
    z-index: 2;
}
.fr-guest-fire-0 {
    left: 20.25%;
    top: 7.33%;
    width: 28.38%;
    height: 84.00%;
    z-index: 1;
}
.fr-guest-fire-1 {
    left: 53.60%;
    top: 32.53%;
    width: 25.54%;
    height: 37.80%;
    z-index: 2;
}
.fr-rock-video-0 {
    inset: 0;
}
.fr-living-0 {
    left: 14.64%;
    top: 7.33%;
    width: 70.82%;
    height: 84.00%;
    z-index: 1;
}
.fr-living-tall-0 {
    left: 33.78%;
    top: 6.67%;
    width: 32.53%;
    height: 86.67%;
    z-index: 1;
}
.fr-ceiling-cove-0 {
    left: 7.48%;
    top: 7.33%;
    width: 85.14%;
    height: 84.00%;
    z-index: 1;
}
.fr-pendant-dog-0 {
    left: 12.21%;
    top: 7.33%;
    width: 49.95%;
    height: 73.92%;
    z-index: 1;
}
.fr-pendant-dog-1 {
    left: 54.59%;
    top: 49.33%;
    width: 31.79%;
    height: 38.64%;
    z-index: 2;
}
.fr-el-bath-0 {
    left: 18.50%;
    top: 12.37%;
    width: 28.81%;
    height: 75.60%;
    z-index: 1;
}
.fr-el-bath-1 {
    left: 52.79%;
    top: 7.33%;
    width: 28.81%;
    height: 75.60%;
    z-index: 2;
}
.fr-floor-shadow-0 {
    left: 14.64%;
    top: 7.33%;
    width: 70.82%;
    height: 84.00%;
    z-index: 1;
}
.fr-details-0 {
    left: 4.13%;
    top: 12.26%;
    width: 44.08%;
    height: 74.14%;
    z-index: 1;
}
.fr-details-1 {
    left: 51.89%;
    top: 12.26%;
    width: 44.08%;
    height: 74.14%;
    z-index: 2;
}
.fr-detail-pair-0 {
    left: 7.25%;
    top: 10.52%;
    width: 27.78%;
    height: 73.88%;
    z-index: 1;
}
.fr-detail-pair-1 {
    left: 45.62%;
    top: 27.40%;
    width: 36.53%;
    height: 45.21%;
    z-index: 2;
}
.fr-imag-0 {
    inset: 0;
    z-index: 1;
}
.fr-imag-1 {
    left: 15.40%;
    top: 18.56%;
    width: 23.62%;
    height: 62.88%;
    z-index: 2;
}
.fr-bath-foot-0 {
    left: 27.38%;
    top: 24.74%;
    width: 42.85%;
    height: 50.52%;
    z-index: 1;
}
.fr-pomar-hero-0 {
    inset: 0;
}
.fr-pergola-0 {
    left: 14.59%;
    top: 7.33%;
    width: 70.91%;
    height: 84.00%;
    z-index: 1;
}
.fr-garden-pair-0 {
    left: 18.50%;
    top: 7.33%;
    width: 27.43%;
    height: 84.00%;
    z-index: 1;
}
.fr-garden-pair-1 {
    left: 48.68%;
    top: 25.81%;
    width: 35.66%;
    height: 47.04%;
    z-index: 2;
}
.fr-hedge-0 {
    left: 8.01%;
    top: 7.33%;
    width: 84.09%;
    height: 84.00%;
    z-index: 1;
}
.fr-materials-0 {
    left: 30.86%;
    top: 7.33%;
    width: 38.39%;
    height: 42.00%;
    z-index: 1;
}
.fr-materials-1 {
    left: 30.86%;
    top: 49.33%;
    width: 38.39%;
    height: 42.00%;
    z-index: 2;
}
.fr-pond-0 {
    inset: 0;
}
.fr-coastline-0 {
    left: 4.88%;
    top: 8.00%;
    width: 70.95%;
    height: 84.00%;
    z-index: 1;
}
.fr-coastline-1 {
    left: 64.36%;
    top: 15.02%;
    width: 26.12%;
    height: 69.97%;
    z-index: 2;
}
.fr-closer-dog-0 {
    left: 13.85%;
    top: 11.29%;
    width: 69.90%;
    height: 77.42%;
    z-index: 1;
}
.fr-closer-ocean-0 {
    inset: 0;
}

/* ---- About (home) ---- */
.home-page .about-section-home {
    height: 100svh;
    min-height: 640px;
    max-width: 1320px;
    padding: clamp(6rem, 13vh, 8rem) clamp(2rem, 6vw, 5rem) clamp(2rem, 6vh, 4rem);
    column-gap: clamp(3rem, 5vw, 5.5rem);
    align-items: center;
    align-content: center;
    scroll-margin-top: 0;
}


/* ============================================
   PROJECTS GRID - Masonry Style
   ============================================ */

.projects-section {
    padding: 0;
}

.project-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 4px;
}

.project-item {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4/3;
}

.project-item.tall {
    grid-row: span 2;
    aspect-ratio: auto;
}

.project-link {
    display: block;
    width: 100%;
    height: 100%;
}

.project-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-smooth);
}

.project-item:hover img {
    transform: scale(1.02);
}

/* Project info overlay on hover */
.project-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-lg) var(--space-md);
    background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
    opacity: 0;
    transform: translateY(10px);
    transition: all var(--transition-smooth);
}

.project-item:hover .project-info {
    opacity: 1;
    transform: translateY(0);
}

.project-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: white;
    margin-bottom: var(--space-xs);
}

.project-location {
    font-family: var(--font-serif);
    font-size: 0.9rem;
    font-weight: 300;
    font-style: italic;
    letter-spacing: 0.05em;
    color: rgba(255,255,255,0.8);
}

/* Mobile: single column, title overlay always visible (no hover on touch).
   Walker-Warner style — title + location anchored bottom-left on the
   image in white type, no gradient band. Text-shadow carries legibility. */
@media (max-width: 767px) {
    .project-grid {
        grid-template-columns: 1fr;
    }

    .project-item.tall {
        grid-row: auto;
        aspect-ratio: 3/4;
    }

    /* Caption always visible — inherit desktop's absolute bottom-left
       positioning, strip the hover-only gradient and animation. */
    .project-info {
        opacity: 1;
        transform: none;
        background: none;
        padding: var(--space-md);
    }

    /* Text-shadow replaces the gradient for legibility over variable imagery */
    .project-title {
        text-shadow: 0 1px 6px rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.35);
    }

    .project-location {
        text-shadow: 0 1px 5px rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.35);
    }
}

/* ============================================
   QUOTE SECTION
   ============================================ */

.quote-section {
    padding: var(--space-xl) var(--space-lg);
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

.quote-text {
    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    font-weight: 300;
    font-style: italic;
    line-height: 1.4;
    margin-bottom: var(--space-md);
}

.quote-attribution {
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* ============================================
   ABOUT SECTION
   ============================================ */

.about-section {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-lg) var(--space-lg) var(--space-xl);
    scroll-margin-top: 80px;
}

@media (min-width: 768px) {
    .about-section {
        grid-template-columns: 1.35fr 1fr;
        align-items: center;
    }
}

.about-image {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.about-image img {
    width: 100%;
    height: auto;
    position: relative;
    left: 28px;
    top: 13px;
    transform: scale(0.94);
    transform-origin: top left;
}

.about-content {
    padding: var(--space-md) 0;
}

.section-label {
    font-family: var(--font-serif);
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: var(--space-sm);
    display: block;
}

.about-headline {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1.1;
    margin-bottom: var(--space-md);
}

.about-text {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 300;
    color: var(--color-text-muted);
    max-width: 500px;
    margin-bottom: var(--space-sm);
    line-height: 1.7;
}

/* Contact info within about section */
.about-contact {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid rgba(0,0,0,0.1);
}

.about-section-home {
    padding-top: var(--space-xl);
}

.about-section-home .about-image {
    justify-content: center;
    align-items: center;
}

.about-section-home .about-image img {
    left: 0;
    top: 0;
    transform: none;
    width: auto;
    max-width: 100%;
    height: min(61svh, 560px);
    aspect-ratio: auto;
    object-fit: contain;
    background: transparent;
    mix-blend-mode: multiply;
}

.about-contact-item h4 {
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: var(--space-xs);
}

.about-contact-item p,
.about-contact-item a {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 300;
    color: var(--color-text-muted);
    line-height: 1.8;
}

.about-contact-item a:hover {
    color: var(--color-text);
}

@media (max-width: 767px) {
    .about-contact {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
}

@media (min-width: 768px) and (max-width: 1100px) {
    .magazine-spread {
        padding-left: clamp(2rem, 5vw, 4rem);
        padding-right: clamp(2rem, 5vw, 4rem);
    }

    .spread-canvas {
        width: min(920px, 84vw);
    }
}

@media (max-width: 767px) {
    .hero-content {
        left: var(--space-md);
        right: var(--space-md);
        bottom: var(--space-md);
    }

    .hero-title {
        font-size: 2rem;
        letter-spacing: 0.11em;
    }

    .hero-kicker {
        font-size: 0.85rem;
    }

    .magazine-spread {
        height: auto;
        min-height: auto;
        padding: 4.5rem 1.25rem 1rem;
    }

    .spread-canvas,
    .spread-pool-intro .spread-canvas,
    .spread-garden .spread-canvas,
    .spread-bench .spread-canvas,
    .spread-la-marina-cluster .spread-canvas,
    .spread-pool-pair .spread-canvas,
    .spread-video-wide .spread-canvas,
    .spread-pool-hero .spread-canvas,
    .spread-skylight .spread-canvas,
    .spread-ceiling-dog .spread-canvas,
    .spread-el-monte-trio .spread-canvas,
    .spread-el-monte-small .spread-canvas,
    .spread-interiors .spread-canvas,
    .spread-el-monte .spread-canvas,
    .spread-bird .spread-canvas,
    .spread-wood-wall .spread-canvas,
    .spread-materials .spread-canvas,
    .spread-bath-trio .spread-canvas,
    .spread-pond .spread-canvas,
    .spread-quiet-room .spread-canvas,
    .spread-dog-close .spread-canvas {
        width: 100%;
        height: auto;
        display: grid;
        gap: 0.65rem;
    }

    .mag-frame,
    .pool-intro-a,
    .garden-a,
    .garden-b,
    .garden-c,
    .bench-a,
    .marina-a,
    .marina-b,
    .marina-c,
    .pool-pair-a,
    .pool-pair-b,
    .video-wide-a,
    .pool-intro-a,
    .pool-hero-a,
    .skylight-a,
    .ceiling-a,
    .ceiling-b,
    .ceiling-c,
    .el-monte-trio-a,
    .el-monte-trio-b,
    .el-monte-trio-c,
    .small-grid-a,
    .small-grid-d,
    .interiors-a,
    .interiors-b,
    .interiors-c,
    .elmonte-a,
    .elmonte-b,
    .elmonte-c,
    .bird-a,
    .wood-wall-a,
    .wood-wall-b,
    .wood-wall-c,
    .pomar-hero-a,
    .materials-a,
    .materials-b,
    .bath-a,
    .bath-b,
    .bath-c,
    .pond-a,
    .pond-b,
    .quiet-a,
    .quiet-b,
    .dog-close-a,
    .dog-close-b {
        position: relative;
        inset: auto;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        width: 100%;
        height: auto;
    }

    .mag-frame {
        aspect-ratio: 4 / 3;
    }

    .bench-a,
    .garden-a,
    .marina-a,
    .ceiling-b,
    .materials-a,
    .materials-b,
    .bath-a,
    .bath-b,
    .bath-c {
        aspect-ratio: 4 / 5;
    }

    .video-wide-a,
    .pool-hero-a,
    .skylight-a,
    .living-large-a,
    .pomar-hero-a,
    .dog-close-b {
        aspect-ratio: 16 / 10;
    }

    /* Must match the specificity of `.home-page .about-section-home`
       (styles.css desktop rule) or the desktop 100svh height wins and
       the section overflows into the crew strip on phones. */
    .home-page .about-section-home {
        padding-top: calc(var(--space-lg) + 2rem);
        min-height: auto;
        height: auto;
    }

    .about-section-home .about-image img {
        height: auto;
    }
}

@media (max-width: 767px) {
    .magazine-spread {
        height: auto;
        min-height: auto;
        padding: 4.5rem 1.25rem 1rem;
    }

    .magazine-spread .spread-canvas {
        width: 100%;
        height: auto;
        display: grid;
        gap: 0.65rem;
    }

    .magazine-spread .mag-frame {
        position: relative;
        inset: auto;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        width: 100%;
        height: auto;
        z-index: 1;
    }

    .magazine-spread .mag-frame {
        aspect-ratio: 4 / 3;
    }

    .spread-el-monte-trio .mag-frame,
    .spread-bench .mag-frame,
    .spread-la-marina-cluster .marina-a,
    .spread-pool-pair .mag-frame,
    .spread-el-monte-bath .mag-frame,
    .spread-bath-trio .mag-frame,
    .spread-interior-trio .mag-frame,
    .spread-la-marina-two .mag-frame,
    .spread-stone-pair .mag-frame {
        aspect-ratio: 4 / 5;
    }

    .spread-video-wide .mag-frame,
    .spread-pool-hero .mag-frame,
    .spread-skylight .mag-frame,
    .spread-la-marina-sauna .mag-frame,
    .spread-pomar-hero .mag-frame,
    .spread-ceiling-cove .mag-frame,
    .spread-dog-close .dog-close-b {
        aspect-ratio: 16 / 10;
    }
}

@media (max-width: 767px) {
    .spread-pool-hero.magazine-spread {
        display: block;
        height: auto;
        min-height: 100svh;
        padding: 0;
        overflow: visible;
    }

    .spread-pool-hero .spread-canvas {
        display: block;
        width: 100vw;
        height: auto;
    }

    .spread-pool-hero .pool-hero-frame {
        position: relative;
        inset: auto;
        width: 100vw;
        height: auto;
        aspect-ratio: 1603 / 2400;
        overflow: visible;
    }

    .spread-pool-hero .pool-hero-frame img {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        max-width: none;
        transform: none;
        object-fit: cover;
        object-position: center top;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.home-document {
        scroll-behavior: auto;
        scroll-snap-type: y proximity;
    }
}

/* ============================================
   FOOTER
   ============================================ */

footer {
    padding: var(--space-lg) var(--space-lg);
    text-align: center;
}

.footer-copyright {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 300;
    color: var(--color-text-muted);
    letter-spacing: 0.02em;
}

/* ============================================
   PROJECT PAGE
   ============================================ */

/* Project Hero - video with minimal title */
.project-hero {
    height: 100vh;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.project-hero-content {
    position: absolute;
    bottom: var(--space-lg);
    left: var(--space-lg);
    z-index: 10;
    color: white;
}

/* Smaller, more minimal title */
.project-hero-title {
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 4px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.project-hero-location {
    font-family: var(--font-serif);
    font-size: clamp(0.8rem, 1.5vw, 1rem);
    font-weight: 300;
    font-style: italic;
    letter-spacing: 0.08em;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* Nav slides up/down based on scroll direction (all pages) */
nav {
    transform: translateY(0);
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

nav.nav-hidden {
    transform: translateY(-100%);
}

/* Project Gallery - Walker Warner inspired */
.project-gallery {
    background: var(--color-bg);
    padding: var(--space-xl) 0;
    max-width: 100%;
    margin: 0 auto;
}

/* Gallery text blocks */
.gallery-text {
    padding: var(--space-lg) 0;
    max-width: 800px;
}

.gallery-text.centered {
    margin: 0 auto;
    text-align: center;
}

.gallery-text.right {
    margin-left: auto;
    margin-right: 0;
    text-align: left;
    max-width: 600px;
    padding-right: var(--space-lg);
}

.gallery-description {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    font-weight: 300;
    line-height: 1.7;
    color: var(--color-text);
}

/* Gallery quote blocks */
.gallery-quote {
    padding: 5rem 0;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.gallery-quote blockquote {
    font-family: var(--font-serif);
    font-size: clamp(1.3rem, 2.5vw, 1.8rem);
    font-weight: 300;
    font-style: italic;
    line-height: 1.5;
    color: var(--color-text);
    margin-bottom: var(--space-md);
}

.gallery-quote cite {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
}

/* Gallery images */
.gallery-item {
    margin: 0;
}

.gallery-item img {
    width: 100%;
    height: auto;
    display: block;
}

.gallery-item.full {
    width: 100%;
    margin: 5rem 0;
    padding: 0;
}

/* Narrower full-width for breathing room */
.gallery-item.full.inset {
    width: 85%;
    margin-left: auto;
    margin-right: auto;
}

.gallery-video video {
    width: 100%;
    height: auto;
    display: block;
}

/* Overlapping image pairs - the key Walker Warner effect */
.gallery-overlap {
    display: flex;
    align-items: flex-start;
    margin: 5rem 0;
    padding: 0 6%;
}

.gallery-overlap .overlap-left {
    width: 55%;
    margin-top: 80px;
    margin-right: -10%;
    position: relative;
    z-index: 1;
}

.gallery-overlap .overlap-right {
    width: 55%;
    position: relative;
    z-index: 2;
}

/* Live-media: video layered full-cover over a still image (Walker Warner "live photo" effect) */
.live-media {
    position: relative;
    overflow: hidden;
}

.live-media > img {
    display: block;
    width: 100%;
    height: auto;
}

.live-media > .live-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

/* Layered backdrop: full-width background image with two smaller "card" images overlaid */
.layered-backdrop {
    position: relative;
    overflow: hidden;
}

.layered-backdrop > img:first-child {
    display: block;
    width: 100%;
    height: auto;
}

.layered-backdrop .layered-card {
    position: absolute;
    pointer-events: none;
}

.layered-backdrop .card-left {
    top: 22%;
    left: 6%;
    width: 52%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.layered-backdrop .card-right {
    top: 10%;
    right: 6%;
    width: 28%;
    height: auto;
    aspect-ratio: 2 / 3;
    object-fit: cover;
}

@media (max-width: 767px) {
    .layered-backdrop .card-left {
        width: 55%;
        top: 35%;
        left: 4%;
    }
    .layered-backdrop .card-right {
        width: 38%;
        top: 6%;
        right: 4%;
    }
}

/* Live-inset: small video positioned as inset overlay on a still image */
.live-inset {
    position: relative;
}

.live-inset > img {
    display: block;
    width: 100%;
    height: auto;
}

.live-inset > .live-inset-video {
    position: absolute;
    bottom: 7%;
    right: 6%;
    width: 38%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    pointer-events: none;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}

/* Inverted live-inset: video as base, still photo as inset overlay */
.live-inset > .live-inset-base {
    display: block;
    width: 100%;
    height: auto;
}

.live-inset > .live-inset-photo {
    position: absolute;
    bottom: 8%;
    right: 6%;
    width: 35%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    pointer-events: none;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.28);
}

/* Feature-wide overlap: small top-left image + larger lower-right video */
.gallery-overlap.feature-wide {
    align-items: flex-start;
}

.gallery-overlap.feature-wide .feature-small {
    width: 25%;
    margin-right: -5%;
    margin-top: 0;
    position: relative;
    z-index: 2;
}

.gallery-overlap.feature-wide .feature-large {
    width: 75%;
    margin-top: 90px;
    position: relative;
    z-index: 1;
}

.gallery-overlap.feature-wide .feature-large video,
.gallery-overlap.feature-wide .feature-large img {
    display: block;
    width: 100%;
    height: auto;
}

/* Give the tile-shadow study enough weight to balance the ceiling plate. */
.gallery-overlap.feature-wide.light-study .feature-small {
    width: 36%;
    margin-right: -7%;
}

.gallery-overlap.feature-wide.light-study .feature-large {
    width: 71%;
}

/* Editorial canvases restored from the earlier portfolio composition. */
.editorial-composition {
    width: calc(100% - clamp(2.5rem, 5vw, 7rem));
    margin: clamp(5rem, 14vh, 11rem) auto;
}

.editorial-canvas {
    position: relative;
    width: 100%;
}

.editorial-frame {
    position: absolute;
    margin: 0;
    overflow: hidden;
    background: #ebeae5;
}

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

/* Aerial anchor: broad site context with a close film inset. */
.composition-aerial .editorial-canvas {
    aspect-ratio: 1.55 / 1;
}

.composition-aerial .aerial-wide {
    left: 0;
    top: 0;
    width: 82%;
    height: 100%;
}

.composition-aerial .aerial-inset {
    right: 0;
    top: 10%;
    width: 28%;
    height: 80%;
    z-index: 2;
}

/* Material study: a compact sample board with one clear photographic anchor. */
.composition-materials .editorial-canvas {
    aspect-ratio: 1.6 / 1;
}

.composition-materials .material-hook {
    left: 0;
    top: 0;
    width: 62%;
    height: 65%;
    z-index: 2;
}

.composition-materials .material-live {
    right: 0;
    top: 0;
    width: 36%;
    height: 100%;
    z-index: 1;
}

.composition-materials .material-gravel {
    left: 0;
    top: 67%;
    width: 30%;
    height: 33%;
    z-index: 2;
}

.composition-materials .material-stone {
    left: 32%;
    top: 67%;
    width: 30%;
    height: 33%;
    z-index: 2;
}

/* Film diptych: a wide dusk view tempers the tall palm crop. */
.composition-film .editorial-canvas {
    aspect-ratio: 2 / 1;
}

.composition-film .film-wide {
    left: 0;
    top: 18%;
    width: 62%;
    height: 64%;
}

.composition-film .film-tall {
    right: 0;
    top: 0;
    width: 42%;
    height: 100%;
    z-index: 2;
}

.composition-pond .editorial-canvas {
    aspect-ratio: 2.4 / 1;
}

.composition-pond .pond-still {
    inset: 0 auto 0 0;
    width: 64%;
}

.composition-pond .pond-live {
    inset: 0 0 0 auto;
    width: 34%;
}

.composition-cedar {
    width: 100%;
}

.composition-cedar .editorial-canvas {
    aspect-ratio: 1.6 / 1;
}

.composition-cedar .cedar-live {
    inset: 0;
}

.composition-cedar .cedar-live::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.18);
    pointer-events: none;
}

.composition-cedar .cedar-avocados {
    left: 18%;
    top: 13%;
    width: 21%;
    height: 69%;
    z-index: 2;
}

.composition-cedar .cedar-sauna {
    left: 43.5%;
    top: 19%;
    width: 39%;
    height: 55%;
    z-index: 2;
}

.editorial-sequence {
    margin: clamp(5rem, 14vh, 11rem) 0;
}

.editorial-sequence .editorial-composition {
    margin-top: 0;
    margin-bottom: 0;
}

.composition-evening .editorial-canvas {
    aspect-ratio: 1.08 / 1;
}

.composition-evening .evening-fire { left: 0; top: 0; width: 21.9%; height: 36%; }
.composition-evening .evening-bloom { left: 22.75%; top: 0; width: 18.75%; height: 36%; }
.composition-evening .evening-shadow { left: 42.4%; top: 0; width: 18.75%; height: 36%; }
.composition-evening .evening-dining { left: 63.75%; top: 2%; width: 36.25%; height: 72%; }
.composition-evening .evening-doorway { left: 0; top: 40%; width: 61%; height: 60%; }
.composition-evening .evening-garden { left: 63.75%; top: 76%; width: 36.25%; height: 24%; z-index: 3; }

.composition-quiet {
    margin-top: clamp(3rem, 6vh, 5rem) !important;
}

.composition-quiet .editorial-canvas {
    aspect-ratio: 1.55 / 1;
}

.composition-quiet .quiet-footprints { left: 0; top: 18%; width: 62%; height: 64%; z-index: 1; }
.composition-quiet .quiet-reading { right: 0; top: 0; width: 45%; height: 100%; z-index: 2; }

/* Feature-wide variant: large on left, small on right offset down-and-out */
.gallery-overlap.feature-wide.large-left {
    align-items: flex-end;
}

.gallery-overlap.feature-wide.large-left .feature-large {
    width: 70%;
    margin-top: 0;
    margin-bottom: 80px;
}

.gallery-overlap.feature-wide.large-left .feature-small {
    width: 38%;
    margin-right: 0;
    margin-left: -12%;
    margin-top: 0;
}

.gallery-overlap.feature-wide.large-left.living-pair .feature-small {
    width: 32%;
    margin-left: -7%;
}

/* Feature-wide variant: two portrait images — smaller proportions to keep section height sane */
.gallery-overlap.feature-wide.tall-pair .feature-small {
    width: 22%;
    margin-top: 40px;
}

.gallery-overlap.feature-wide.tall-pair .feature-large {
    width: 55%;
    margin-top: 130px;
}

/* Reversed overlap - right image lower */
.gallery-overlap.reverse .overlap-left {
    margin-top: 0;
    z-index: 2;
}

.gallery-overlap.reverse .overlap-right {
    margin-top: 80px;
    z-index: 1;
}

/* Three-image row */
.gallery-trio {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4px;
    margin: 5rem 0;
    padding: 0 10%;
}

.gallery-trio .gallery-item {
    overflow: hidden;
}

.gallery-trio .gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Center-wide trio: middle column is 1.5x the flanking columns,
   with real gaps and natural aspect ratios (no cover-crop) */
.gallery-trio.center-wide {
    grid-template-columns: 2fr 3fr 2fr;
    gap: 2rem;
    align-items: center;
}

.gallery-trio.center-wide .gallery-item img {
    height: auto;
    object-fit: contain;
}

/* Two-image side by side (no overlap) */
.gallery-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin: 5rem 0;
    padding: 0 3%;
}

/* Asymmetric pair — wide left, narrow right */
.gallery-pair.wide-left {
    grid-template-columns: 1.8fr 1fr;
}

/* Asymmetric pair — narrow left, wide right */
.gallery-pair.wide-right {
    grid-template-columns: 1fr 1.8fr;
}

.gallery-pair .gallery-item {
    overflow: hidden;
}

.gallery-pair .gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 767px) {
    .gallery-trio,
    .gallery-trio.center-wide {
        grid-template-columns: 1fr;
        gap: var(--space-md);
        margin: var(--space-md) 0;
        align-items: stretch;
    }

    .gallery-trio.center-wide .gallery-item img {
        width: 100%;
        height: auto;
    }

    .gallery-pair,
    .gallery-pair.wide-left,
    .gallery-pair.wide-right {
        grid-template-columns: 1fr;
        gap: var(--space-md);
        margin: var(--space-md) 0;
    }

    .editorial-composition,
    .composition-cedar {
        width: auto;
        margin: var(--space-md);
    }

    .editorial-sequence {
        margin: var(--space-md) 0;
    }

    .editorial-sequence .editorial-composition,
    .composition-quiet {
        margin: var(--space-md) !important;
    }

    .editorial-canvas {
        display: grid;
        gap: var(--space-md);
        aspect-ratio: auto !important;
    }

    .editorial-canvas .editorial-frame {
        position: static;
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
    }

    .composition-cedar .cedar-live {
        aspect-ratio: 16 / 10;
    }

    .composition-aerial .aerial-inset,
    .composition-quiet .quiet-reading {
        aspect-ratio: 2 / 3;
    }

    .composition-materials .material-live {
        aspect-ratio: 16 / 10;
    }

    .composition-film .film-wide,
    .composition-film .film-tall,
    .composition-quiet .quiet-footprints {
        aspect-ratio: 3 / 2;
    }

    .gallery-overlap.feature-wide.light-study .feature-small,
    .gallery-overlap.feature-wide.light-study .feature-large,
    .gallery-overlap.feature-wide.large-left.living-pair .feature-small {
        width: 100%;
        margin: 0;
    }

    .gallery-collage {
        padding-bottom: 0 !important;
        position: static !important;
        display: flex;
        flex-direction: column;
        gap: var(--space-md);
        margin: var(--space-md) 0 !important;
    }

    .gallery-collage figure {
        position: static !important;
        width: 100% !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
    }
}

/* Fixed back arrow */
.back-arrow-fixed {
    position: fixed;
    left: var(--space-lg);
    top: 50%;
    transform: translateY(-50%);
    z-index: 99;
    opacity: 0.5;
    transition: opacity var(--transition-fast), color var(--transition-fast);
    padding: var(--space-sm);
    background: none;
    border: none;
    cursor: pointer;
}

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

.back-arrow-fixed svg {
    display: block;
}

/* Light state - white arrow over images/video */
.back-arrow-fixed.arrow-light {
    color: white;
}

/* Dark state - black arrow over white background */
.back-arrow-fixed.arrow-dark {
    color: var(--color-text);
}

/* Hide on mobile */
@media (max-width: 1024px) {
    .back-arrow-fixed {
        display: none;
    }
}

/* Back to work link */
.project-nav-section {
    padding: var(--space-lg) var(--space-lg) var(--space-xl);
    text-align: center;
}

.back-to-work {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    transition: color var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

.back-to-work:hover {
    color: var(--color-text);
}

.back-arrow {
    transition: transform var(--transition-fast);
}

.back-to-work:hover .back-arrow {
    transform: translateX(-4px);
}

/* Project page mobile */
@media (max-width: 767px) {
    .project-hero-content {
        left: var(--space-md);
        bottom: var(--space-md);
    }

    .project-gallery {
        padding: var(--space-lg) 0;
    }

    .gallery-overlap,
    .gallery-trio,
    .gallery-pair {
        padding: 0 var(--space-md) !important;
    }

    .gallery-quote {
        padding-left: var(--space-md);
        padding-right: var(--space-md);
    }

    .gallery-text {
        padding: var(--space-lg) 0;
    }

    .gallery-text.right {
        padding-right: 0;
        max-width: 100%;
    }

    .gallery-quote {
        padding: var(--space-lg) 0;
    }

    .gallery-overlap,
    .gallery-overlap.feature-wide,
    .gallery-overlap.feature-wide.large-left,
    .gallery-overlap.feature-wide.tall-pair,
    .gallery-overlap.reverse {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-md);
        margin: var(--space-md) 0;
    }

    .gallery-overlap .overlap-left,
    .gallery-overlap .overlap-right,
    .gallery-overlap.reverse .overlap-left,
    .gallery-overlap.reverse .overlap-right,
    .gallery-overlap.feature-wide .feature-small,
    .gallery-overlap.feature-wide .feature-large,
    .gallery-overlap.feature-wide.large-left .feature-small,
    .gallery-overlap.feature-wide.large-left .feature-large,
    .gallery-overlap.feature-wide.tall-pair .feature-small,
    .gallery-overlap.feature-wide.tall-pair .feature-large {
        width: 100%;
        margin: 0;
    }

    .project-nav-section {
        padding: var(--space-md) var(--space-md) var(--space-lg);
    }
}

/* ============================================
   MOBILE ADJUSTMENTS
   ============================================ */

@media (max-width: 767px) {
    nav {
        padding: var(--space-sm) var(--space-md);
    }
    
    .logo-svg {
        height: 30px;
    }

    .logo-main {
        font-size: 1.2rem;
    }

    .logo-sub {
        font-size: 0.55rem;
    }
    
    .nav-links {
        gap: var(--space-sm);
    }
    
    .nav-links a {
        font-size: 0.8rem;
    }
    
    .about-section {
        padding: var(--space-lg) var(--space-md);
    }

    .about-image img {
        position: static;
        left: 0;
        top: 0;
        transform: none;
    }

    footer {
        padding: var(--space-lg) var(--space-md);
    }
}

/* ============================================
   CREW MARQUEE STRIP (landing page)
   JS-driven auto-scroll with native overflow-x
   and arrow-button manual advance.
   ============================================ */

.crew-strip {
    padding: var(--space-lg) 0 var(--space-xl);
    overflow: hidden;
}

/* Variant: sits directly under the About section as its own band,
   subtly darker warm grey to create separation (Walker Warner-inspired) */
.crew-strip.crew-strip-about {
    background-color: #ebeae5;
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
}

.crew-strip-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    text-align: center;
    color: var(--color-text-muted);
    margin: 0 0 var(--space-lg);
}

@media (max-width: 767px) {
    .crew-strip-title {
        font-size: 0.9rem;
        letter-spacing: 0.2em;
        margin-bottom: var(--space-md);
    }
}

/* Stage wraps viewport + arrow buttons */
.crew-strip-stage {
    position: relative;
}

.crew-strip-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
}

.crew-strip-viewport::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.crew-strip-track {
    display: flex;
    gap: 1rem;
    width: max-content;
}

.crew-strip-track img {
    height: 340px;
    width: auto;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
    user-select: none;
    -webkit-user-drag: none;
}

/* Arrow navigation buttons — minimal, match project-page back-arrow */
.crew-strip-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    padding: var(--space-sm);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text);
    opacity: 0.5;
    transition: opacity var(--transition-fast);
}

.crew-strip-nav:hover {
    opacity: 1;
}

.crew-strip-nav svg {
    display: block;
}

.crew-strip-prev { left: var(--space-md); }
.crew-strip-next { right: var(--space-md); }

@media (max-width: 767px) {
    .crew-strip-track img { height: 220px; }
    .crew-strip-prev { left: 4px; }
    .crew-strip-next { right: 4px; }
}

/* ============================================
   MOBILE: stability fixes for scroll jitter
   ============================================
   1. Hero height is pinned via a --hero-h custom property that JS sets
      to window.innerHeight (in px) at load + orientationchange. This
      bypasses viewport-unit re-interpretation during URL-bar collapse
      animations on Chromium mobile (Brave/Chrome Android) which was
      causing the object-fit:cover video to visibly scale up during
      scroll. Falls back to 100svh for no-JS. 100svh alone fixed iOS
      Safari but not Chromium — the pixel lock fixes both.
   2. `contain: layout paint` isolates the hero from scroll-driven
      layout shifts elsewhere on the page.
   3. Explicit object-position + will-change:auto on the video so no
      browser promotes it to its own compositor layer (promoted video
      layers re-rasterize during scroll, which reads as scaling).
   4. Disable the parallax transform + transition on mobile — touch
      scroll fires too many events and the 100ms ease lags behind the
      finger, which reads as jitter. The JS handler also early-returns
      on mobile (see per-page parallax scripts) to avoid the cost of
      getBoundingClientRect loops.
   5. Drop the project-grid img hover transition on mobile — there's no
      hover on touch, but the transition still forces a composite on
      every repaint.
   ============================================ */
@media (max-width: 767px) {
    .hero,
    .project-hero {
        height: var(--hero-h, 100svh);
        min-height: var(--hero-h, 100svh);
        max-height: var(--hero-h, 100svh);
        contain: layout paint;
    }

    .hero-media {
        object-position: center center;
        will-change: auto;
        transform: none;
        backface-visibility: visible;
    }

    .parallax-img {
        transition: none;
        transform: none !important;
        will-change: auto;
    }

    .project-item img {
        transition: none;
    }
}

/* ============================================
   ACCESSIBILITY: focus-visible + reduced-motion
   ============================================ */

/* Visible keyboard focus rings on interactive elements. :focus-visible
   only lights up on keyboard focus (not mouse click), so pointer users
   never see these; keyboard/AT users always do. */
.nav-links a:focus-visible,
.project-link:focus-visible,
.crew-strip-nav:focus-visible,
.back-arrow-fixed:focus-visible,
.back-to-work:focus-visible,
.about-contact a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
    opacity: 1;
}

/* Project-grid links use white-on-image, so mirror that for the ring. */
.project-link:focus-visible {
    outline-color: #fff;
}

/* Respect OS-level reduced motion:
   - disable smooth scroll
   - disable all named transitions
   - disable parallax + project-grid hover scale
   - disable page fade (snaps into place instead)
   Autoplay videos are opted out at the JS layer (see js/main.js). */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    body { transition: none; }

    nav,
    .parallax-img,
    .project-item img,
    .project-info,
    .back-arrow,
    .back-arrow-fixed,
    .back-to-work,
    .logo-main,
    .logo-sub,
    .logo-svg,
    .nav-links a,
    .crew-strip-nav {
        transition: none !important;
    }

    .project-item:hover img {
        transform: none;
    }
}