/* ============================================
   ACTOR PORTFOLIO - AYUSH KUMAR
   Design System & CSS Variables
   ============================================ */

:root {
    /* Color Palette */
    --color-bg-primary: #0b0a0c;
    --color-bg-secondary: #15141a;
    --color-text-primary: #f5f3ee;
    --color-text-secondary: #b5aca1;
    --color-accent: #d8b06a;
    --color-accent-hover: #f0d69a;
    --color-accent-dark: #a67c39;
    --color-accent-glow: rgba(216, 176, 106, 0.5);
    --color-border: #2b2720;
    --color-bg-deep: #050506;
    --color-success: #4ade80;

    /* Typography */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-display: 'Cinzel', 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 2rem;
    --font-size-3xl: 2.5rem;
    --font-size-4xl: 3.5rem;

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-2xl: 4rem;
    --spacing-3xl: 6rem;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 300ms ease;
    --transition-slow: 500ms ease;

    /* Border Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 1rem;

    /* Measured height of the sticky header: 24px x2 nav-container padding +
       38.4px logo line + 19.2px tagline line + 1px bottom border. The mobile
       drawer hangs off it and anchor targets clear it. */
    --header-h: 106.6px;

    /* Height reserved for the fixed mobile CTA bar. Same 92px the <=768px block
       already reserves as body padding-bottom; the drawer has to clear it too,
       because that bar is z-index 200 and the drawer is 100. */
    --cta-h: 92px;

    /* Z-Index */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal: 300;
}

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

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

html {
    scroll-behavior: smooth;
    /* clip (not hidden) prevents horizontal scroll without breaking the sticky header */
    overflow-x: clip;
}

/* Anchor landings used to be computed in JS as `target.offsetTop - 80`, but the
   header measures 105.6px above 480px wide, so every nav click parked the
   section heading 26px behind it. Declared here instead: the browser applies it
   to hash navigation, in-page anchors, focus scrolling and restoration alike,
   and `prefers-reduced-motion` still turns the smooth part off below. */
section[id],
#main {
    scroll-margin-top: 120px;
}

body {
    font-family: var(--font-primary);
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
    line-height: 1.6;
    font-size: var(--font-size-base);
    overflow-x: clip;
}

/* Visible keyboard-focus affordance across all interactive elements */
:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 2px;
}
:focus:not(:focus-visible) {
    outline: none;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

/* ============================================
   HEADER & NAVIGATION
   ============================================ */

.header {
    position: sticky;
    top: 0;
    background-color: rgba(11, 10, 12, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-border);
    z-index: var(--z-sticky);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing-md) var(--spacing-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo h1 {
    font-family: var(--font-display);
    font-size: var(--font-size-xl);
    font-weight: 700;
    letter-spacing: 1px;
}

.logo .tagline {
    font-size: var(--font-size-xs);
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.nav-links {
    display: flex;
    gap: var(--spacing-lg);
    align-items: center;
}

.nav-links a {
    text-decoration: none;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    transition: color var(--transition-fast);
    /* Bare inline anchors measured 22px tall, under WCAG 2.5.8's 24px pointer
       minimum. 44px is safe here: the header's height is set by the 48px logo
       block (28.8px wordmark + 19.2px tagline), so a 44px nav link stays
       inside it and --header-h / scroll-margin-top are unaffected. */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.nav-links a:hover {
    color: var(--color-accent);
}

.nav-links .cta-nav {
    background-color: var(--color-accent);
    color: var(--color-bg-primary);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-md);
    font-weight: 600;
}

.nav-links .cta-nav:hover {
    background-color: var(--color-accent-hover);
    color: var(--color-bg-primary);
}

.nav-links .nav-highlight {
    color: var(--color-accent);
    font-weight: 600;
}

.nav-links .nav-highlight:hover {
    color: var(--color-accent-hover);
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    padding: 12px 20px;
    background: var(--color-accent);
    color: #0b0a0c;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 6px 0;
}

.skip-link:focus {
    left: 0;
}

/* B4: the skip link parks focus on <main> without drawing a box around the page */
main:focus {
    outline: none;
}

.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    gap: 4px;
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
    margin-right: -10px;
}

.mobile-menu-toggle span {
    width: 24px;
    height: 2px;
    background-color: var(--color-text-primary);
    transition: all var(--transition-fast);
}

/* Opened by .is-open, which is only defined inside the mobile breakpoint,
   so widening the window past 768px always closes the drawer.

   The drawer used to sit in flow inside the sticky header with no height cap:
   at 375px it computed to ~620px on top of the 80px nav row, so the last links
   - Contact included - fell off the bottom of a small phone and opening the
   menu shoved the whole page down by its full height. Now it is a fixed,
   scrollable panel hanging off the header, as on the Ayanova build. */
.mobile-nav {
    display: none;
    flex-direction: column;
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    z-index: var(--z-dropdown);
    padding: var(--spacing-md) var(--spacing-lg);
    padding-bottom: max(var(--spacing-md), env(safe-area-inset-bottom));
    background-color: rgba(11, 10, 12, 0.97);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-border);
    gap: var(--spacing-sm);
    /* Stop above the fixed CTA bar, not at the bottom of the viewport. The bar
       outranks the drawer on z-index, so a drawer running the full height had
       its last ~86px - Contact included - painted over on any phone shorter
       than about 780px. Measured covered on 360x640, 375x667 and 414x736. */
    max-height: calc(100svh - var(--header-h) - var(--cta-h));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.mobile-nav a {
    text-decoration: none;
    color: var(--color-text-secondary);
    padding: var(--spacing-sm) 0;
}

.mobile-nav a:hover {
    color: var(--color-accent);
}

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

.hero {
    position: relative;
    overflow: hidden;
    padding: var(--spacing-3xl) var(--spacing-lg);
    background: linear-gradient(135deg, #17131b 0%, #0b0a0c 55%, #0a0a0d 100%);
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-3xl);
    align-items: center;
}

.hero-text {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.hero-name {
    font-family: var(--font-display);
    font-size: clamp(3.2rem, 8vw, 5.5rem);
    font-weight: 800;
    letter-spacing: 2px;
    line-height: 1.05;
    text-shadow: 0 2px 40px rgba(216, 176, 106, 0.25);
}

.hero-positioning {
    font-size: var(--font-size-xl);
    color: var(--color-accent);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.hero-meta {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.hero-meta span {
    padding: var(--spacing-xs) var(--spacing-md);
    background-color: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}

.hero-sub {
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    letter-spacing: 0.5px;
    margin-top: calc(-1 * var(--spacing-xs));
}

.hero-tagline {
    font-size: var(--font-size-lg);
    line-height: 1.6;
    color: var(--color-text-secondary);
    max-width: 540px;
}

.hero-tagline strong {
    color: var(--color-text-primary);
}

.hero-languages {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
}

.hero-languages strong {
    color: var(--color-text-primary);
}

.hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.hero-image {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Warm spotlight glow behind the portrait */
.hero-image::before {
    content: "";
    position: absolute;
    width: 118%;
    height: 88%;
    top: 6%;
    left: -9%;
    background: radial-gradient(circle at 50% 42%, var(--color-accent-glow), transparent 62%);
    filter: blur(46px);
    opacity: 0.7;
    z-index: 0;
    pointer-events: none;
}

.hero-image-frame {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 440px;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid rgba(216, 176, 106, 0.55);
    box-shadow:
        0 30px 70px -20px rgba(0, 0, 0, 0.85),
        0 0 0 1px rgba(216, 176, 106, 0.18),
        inset 0 0 0 6px rgba(15, 15, 15, 0.55);
}

.hero-image-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    animation: hero-kenburns 18s ease-in-out infinite alternate;
}

/* Cinematic scrim — grades the frame top and bottom */
.hero-image-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(to top, rgba(10, 10, 12, 0.55) 0%, transparent 28%),
        linear-gradient(to bottom, rgba(10, 10, 12, 0.35) 0%, transparent 22%);
}

@keyframes hero-kenburns {
    0%   { transform: scale(1) translateY(0); }
    100% { transform: scale(1.08) translateY(-1.5%); }
}

.hero-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--color-bg-secondary), var(--color-border));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

/* ============================================
   BUTTON STYLES
   ============================================ */

.btn {
    display: inline-block;
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-md);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: 600;
    transition: all var(--transition-fast);
    border: 2px solid transparent;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
}

.btn-primary {
    background-image: linear-gradient(135deg, #f3dca0 0%, var(--color-accent) 45%, var(--color-accent-dark) 100%);
    color: var(--color-bg-primary);
    box-shadow: 0 6px 22px -6px rgba(216, 176, 106, 0.5);
    letter-spacing: 0.4px;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 34px -8px rgba(216, 176, 106, 0.65), 0 0 0 1px rgba(255, 246, 232, 0.35) inset;
}

.btn-secondary {
    background-color: transparent;
    color: var(--color-accent);
    border: 2px solid var(--color-accent);
}

.btn-secondary:hover {
    background-color: var(--color-accent);
    color: var(--color-bg-primary);
    transform: translateY(-2px);
}

.btn-sample,
.btn-contact,
.btn-mini {
    background-color: transparent;
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
    /* --spacing-xs is 8px, which made these 40px tall - under the 44px touch
       minimum everywhere at or above 481px. (Below 481 the .btn override swaps
       in --spacing-sm and they clear it, which is why phones looked fine.)
       10px is the smallest value that reaches 44. */
    padding: 10px var(--spacing-md);
    font-size: var(--font-size-sm);
}

.btn-sample:hover,
.btn-contact:hover,
.btn-mini:hover {
    background-color: var(--color-accent);
    color: var(--color-bg-primary);
}

/* ============================================
   SECTIONS - ABOUT, TRAINING, EXPERIENCE
   ============================================ */

section {
    padding: var(--spacing-2xl) var(--spacing-lg);
}

section h3 {
    font-family: var(--font-display);
    font-size: var(--font-size-3xl);
    font-weight: 700;
    margin-bottom: var(--spacing-xl);
    text-align: center;
    letter-spacing: 0.5px;
}

/* ABOUT */
.about {
    background-color: var(--color-bg-secondary);
}

.about-content {
    display: grid;
    grid-template-columns: 0.85fr 1.4fr 0.75fr;
    gap: var(--spacing-2xl);
    align-items: start;
}

.about-portrait {
    margin: 0;
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 3 / 4;
    border: 1px solid rgba(216, 176, 106, 0.4);
    box-shadow: 0 24px 60px -22px rgba(0, 0, 0, 0.85);
}

.about-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.about-text p {
    margin-bottom: var(--spacing-lg);
    color: var(--color-text-secondary);
    line-height: 1.8;
}

.about-meta {
    display: grid;
    gap: var(--spacing-lg);
}

.stat {
    background-color: var(--color-bg-primary);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--color-accent);
}

.stat strong {
    color: var(--color-text-primary);
    font-size: var(--font-size-lg);
}

.stat p {
    color: var(--color-text-secondary);
    margin-top: var(--spacing-xs);
}

/* TRAINING */
.training {
    background-color: var(--color-bg-primary);
}

.training-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2xl);
}

.training-item {
    background-color: var(--color-bg-secondary);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    transition: all var(--transition-normal);
}

.training-item:hover {
    border-color: var(--color-accent);
    box-shadow: 0 4px 20px rgba(216, 176, 106, 0.1);
}

.training-item h4 {
    color: var(--color-accent);
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-sm);
}

.training-item p {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

/* TRAINING FEATURE PHOTO (certificate) */
.training-feature {
    max-width: 440px;
    margin: 0 auto var(--spacing-2xl);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
    position: relative;
    box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.9), 0 0 50px -25px var(--color-accent-glow);
}

.training-feature img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Wider treatment for the landscape workshop batch photo */
.training-group {
    max-width: 640px;
}

.training-feature figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: var(--spacing-lg) var(--spacing-sm) var(--spacing-sm);
    font-family: var(--font-display);
    font-size: var(--font-size-sm);
    font-weight: 600;
    letter-spacing: 1px;
    color: #fff;
    text-align: center;
    background: linear-gradient(to top, rgba(10, 10, 12, 0.92), transparent);
}

/* SHARED THE SCREEN WITH */
.collabs {
    background: var(--color-bg-primary);
}

.collabs h3 {
    margin-bottom: var(--spacing-sm);
}

.collabs .section-intro {
    margin-bottom: var(--spacing-xl);
}

.collab-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-md);
}

.collab-chip {
    padding: 0.7rem 1.4rem;
    border: 1px solid var(--color-border);
    border-radius: 100px;
    font-family: var(--font-display);
    font-size: var(--font-size-base);
    letter-spacing: 0.5px;
    color: var(--color-text-primary);
    background: var(--color-bg-secondary);
    transition: color var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-normal);
}

/* No :hover here on purpose - .collab-chip is a plain <span>, not a link, and a
   border/glow/lift on hover promised a click that does not exist. */

/* SHOWREEL LIGHTBOX */
.reel-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
    background: rgba(6, 6, 8, 0.92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.reel-modal.is-open {
    opacity: 1;
    visibility: visible;
}

.reel-modal-frame {
    position: relative;
    width: 100%;
    max-width: 1000px;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
    box-shadow: 0 40px 120px -20px rgba(0, 0, 0, 0.9), 0 0 80px -30px var(--color-accent-glow);
    transform: scale(0.96);
    transition: transform 0.3s ease;
}

.reel-modal.is-open .reel-modal-frame {
    transform: scale(1);
}

.reel-modal-embed,
.reel-modal-embed iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
}

.reel-modal-close {
    position: absolute;
    top: 18px;
    right: 24px;
    z-index: 1;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(20, 20, 24, 0.85);
    color: var(--color-accent);
    border: 1px solid var(--color-border);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.reel-modal-close:hover {
    border-color: var(--color-accent);
    color: #fff;
}

@media (max-width: 600px) {
    .reel-modal-close { top: 10px; right: 12px; }
}

/* IMAGE LIGHTBOX — full-screen photo viewer */
.img-modal {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4vmin;
    background: rgba(5, 5, 6, 0.94);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    cursor: zoom-out;
}

.img-modal.is-open {
    opacity: 1;
    visibility: visible;
}

.img-modal-frame {
    margin: 0;
    max-width: 94vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    transform: scale(0.96);
    transition: transform 0.3s ease;
}

.img-modal.is-open .img-modal-frame {
    transform: scale(1);
}

.img-modal-pic {
    max-width: 94vw;
    max-height: 82vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-md);
    box-shadow: 0 30px 90px -25px rgba(0, 0, 0, 0.95);
    cursor: default;
}

.img-modal-caption {
    font-family: var(--font-display);
    font-size: var(--font-size-sm);
    letter-spacing: 1px;
    color: var(--color-accent);
    text-align: center;
}

.img-modal-close {
    position: absolute;
    top: 18px;
    right: 24px;
    z-index: 1;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: rgba(20, 20, 24, 0.85);
    color: var(--color-text-secondary);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.img-modal-close:hover {
    border-color: var(--color-accent);
    color: #fff;
}

@media (max-width: 600px) {
    .img-modal-close { top: 10px; right: 12px; }
}

/* Signal that photos are clickable to enlarge */
.still-card,
.training-feature,
.hero-image-frame,
.coverflow-slide.is-active {
    cursor: zoom-in;
}

/* WORKING STILLS — ON SET */
.stills {
    background:
        radial-gradient(circle at 50% 0%, rgba(216, 176, 106, 0.05), transparent 55%),
        var(--color-bg-secondary);
}

.stills h3 {
    margin-bottom: var(--spacing-sm);
}

.stills .section-intro {
    margin-bottom: var(--spacing-2xl);
}

.stills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 300px));
    justify-content: center;
    gap: var(--spacing-lg);
}

.still-card {
    position: relative;
    margin: 0;
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
    background-color: var(--color-bg-primary);
    transition: transform var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.still-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.still-card figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: var(--spacing-lg) var(--spacing-sm) var(--spacing-sm);
    font-family: var(--font-display);
    font-size: var(--font-size-base);
    font-weight: 600;
    letter-spacing: 1px;
    color: #fff;
    background: linear-gradient(to top, rgba(10, 10, 12, 0.92), transparent);
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.still-card:hover {
    border-color: var(--color-accent);
    box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.9), 0 0 50px -25px var(--color-accent-glow);
}

.still-card:hover figcaption {
    opacity: 1;
}

/* EXPERIENCE */
.experience {
    background-color: var(--color-bg-secondary);
}

.experience-category {
    margin-bottom: var(--spacing-2xl);
}

.experience-category h4 {
    font-size: var(--font-size-xl);
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
}

.experience-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
}

.experience-item {
    background-color: var(--color-bg-primary);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    transition: all var(--transition-normal);
}

.experience-item:hover {
    border-color: var(--color-accent);
    box-shadow: 0 4px 20px rgba(216, 176, 106, 0.1);
}

.experience-item h5 {
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-xs);
}

.role-type {
    color: var(--color-accent);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.experience-item .btn-sample {
    margin-top: var(--spacing-md);
}

/* ============================================
   PORTFOLIO GALLERY — LOOKS & RANGE
   ============================================ */

.gallery {
    background:
        radial-gradient(circle at 50% 0%, rgba(216, 176, 106, 0.06), transparent 60%),
        var(--color-bg-primary);
    position: relative;
}

.gallery h3 {
    margin-bottom: var(--spacing-sm);
}

.gallery .section-intro {
    margin-bottom: var(--spacing-2xl);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--spacing-lg);
}

.gallery-item {
    position: relative;
    margin: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
    background-color: var(--color-bg-secondary);
    aspect-ratio: 3 / 4;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
    isolation: isolate;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform var(--transition-slow);
}

.gallery-item:hover {
    border-color: var(--color-accent);
    box-shadow: 0 18px 50px -12px rgba(216, 176, 106, 0.4);
}

.gallery-item:hover img {
    transform: scale(1.05);
}

.gallery-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: var(--spacing-lg) var(--spacing-sm) var(--spacing-sm);
    background: linear-gradient(to top, rgba(15, 15, 15, 0.92), transparent);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    z-index: 2;
}

/* Language tag pill on showreel cards */
.lang-pill {
    display: inline-block;
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-accent);
    background: rgba(216, 176, 106, 0.14);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    margin-left: var(--spacing-xs);
    vertical-align: middle;
}

.video-card .btn-mini {
    margin: 0 var(--spacing-lg) var(--spacing-lg);
}

/* ============================================
   VIDEOS SECTION
   ============================================ */

.videos {
    background-color: var(--color-bg-primary);
}

.video-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
}

.video-card {
    background-color: var(--color-bg-secondary);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
    transition: all var(--transition-normal);
}

.video-card:hover {
    border-color: var(--color-accent);
    box-shadow: 0 8px 30px rgba(216, 176, 106, 0.15);
    transform: translateY(-4px);
}

.video-embed {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    background: #000;
}

.video-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.video-card h4 {
    font-size: var(--font-size-lg);
    padding: var(--spacing-lg) var(--spacing-lg) 0;
    color: var(--color-text-primary);
}

.video-card p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    padding: var(--spacing-sm) var(--spacing-lg) var(--spacing-lg);
}

/* ============================================
   WORK SAMPLES SECTION
   ============================================ */

.samples {
    background-color: var(--color-bg-secondary);
}

.samples-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-2xl);
}

.sample-card {
    background-color: var(--color-bg-primary);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    transition: all var(--transition-normal);
}

.sample-card:hover {
    border-color: var(--color-accent);
    box-shadow: 0 8px 30px rgba(216, 176, 106, 0.15);
    transform: translateY(-4px);
}

.sample-header {
    flex-grow: 1;
}

.sample-header h4 {
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-xs);
}

.sample-type {
    color: var(--color-accent);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.sample-description {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

/* ============================================
   LANGUAGES SECTION
   ============================================ */

.languages {
    background-color: var(--color-bg-primary);
}

.section-intro {
    text-align: center;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-xl);
    font-size: var(--font-size-lg);
}

.languages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-2xl);
}

.language-item {
    background-color: var(--color-bg-secondary);
    padding: var(--spacing-2xl);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    text-align: center;
    transition: all var(--transition-normal);
}

.language-item:hover {
    border-color: var(--color-accent);
    box-shadow: 0 8px 30px rgba(216, 176, 106, 0.15);
}

.language-item h4 {
    font-size: var(--font-size-xl);
    color: var(--color-accent);
    margin-bottom: var(--spacing-sm);
}

.language-item p {
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-md);
}

/* ============================================
   CONTACT SECTION
   ============================================ */

.contact {
    background-color: var(--color-bg-secondary);
}

.contact-availability {
    text-align: center;
    color: var(--color-accent);
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin-bottom: var(--spacing-2xl);
}

.section-fineprint {
    margin-top: var(--spacing-xl);
    text-align: center;
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    line-height: 1.6;
}

.contact-grid {
    display: grid;
    /* The floor must hold the widest nowrap .btn plus the card's 2x64px
       padding: "Call 9705161810" measures 198.4px, so 198.4 + 128 = 326.4.
       A 280px floor (chosen because it divided the 1136px container evenly)
       left only 152px of content box and the button ran past it - measured
       31.4px over at 769px and 47.4px over at 1050px, where auto-fit had just
       added a third column. html/body use overflow-x: clip and the spill stays
       inside the grid box, so neither a document-level overflow check nor the
       grid's own scrollWidth reveals it; only comparing each button against
       its card's real content box does. Column counts at the common widths are
       unchanged (3-up at >=1180, 2-up at 830-1170); the bands that used to
       overflow now drop a column instead of clipping. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 328px), 1fr));
    gap: var(--spacing-lg);
}

.contact-card {
    background-color: var(--color-bg-primary);
    padding: var(--spacing-2xl);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    text-align: center;
    transition: all var(--transition-normal);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.contact-card:hover {
    border-color: var(--color-accent);
    box-shadow: 0 8px 30px rgba(216, 176, 106, 0.15);
}

.contact-card h4 {
    color: var(--color-accent);
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-md);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.contact-card p {
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-md);
}

.phone-numbers {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.btn-contact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
}

/* ============================================
   STICKY MOBILE CTA
   ============================================ */

.mobile-cta-sticky {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(15, 15, 15, 0.98);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--color-border);
    padding: var(--spacing-md);
    z-index: var(--z-sticky);
    gap: var(--spacing-sm);
    justify-content: space-around;
}

.mobile-cta-sticky .btn-contact {
    flex: 1;
}

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

.footer {
    background-color: #000;
    border-top: 1px solid var(--color-border);
    padding: var(--spacing-2xl) var(--spacing-lg);
    margin-top: var(--spacing-2xl);
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto var(--spacing-2xl);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2xl);
}

.footer-brand h4 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-sm);
}

.footer-brand p {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-xs);
}

.footer-positioning {
    color: var(--color-accent);
    font-weight: 600;
}

.footer-contact {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.footer-contact strong {
    color: var(--color-text-primary);
}

.footer-contact a {
    color: var(--color-accent);
    text-decoration: none;
    /* Bare inline anchors measured 17px tall - the worst touch target on the
       site. inline-flex + min-height gives them a real 44px hit area without
       changing the text's position. */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.footer-contact a:hover {
    text-decoration: underline;
}

.footer-bottom {
    text-align: center;
    border-top: 1px solid var(--color-border);
    padding-top: var(--spacing-lg);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

/* ============================================
   HERO "AS SEEN IN" BRAND STRIP
   ============================================ */

.hero-brands {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-border);
}

.hero-brands-label {
    display: block;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-md);
}

.hero-brands-logos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    align-items: center;
}

.brand-chip {
    font-size: var(--font-size-base);
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background-color: rgba(255, 255, 255, 0.03);
    transition: all var(--transition-normal);
    cursor: default;
}


/* Brands were each rendered in their own saturated colour (orange, red, blue,
   purple...), which read as a rack of stickers against the gold palette. The
   brand is carried by its NAME; the styling belongs to this site. */
.brand-chip {
    color: var(--color-accent);
}


/* ============================================
   SECTION EYEBROW LABEL
   ============================================ */

.section-eyebrow {
    display: block;
    text-align: center;
    font-size: var(--font-size-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--color-accent);
    margin-bottom: var(--spacing-sm);
}

/* ============================================
   BRAND CAMPAIGNS - SHOWPIECE SECTION
   ============================================ */

.campaigns {
    background:
        radial-gradient(circle at 50% 0%, rgba(216, 176, 106, 0.06), transparent 60%),
        var(--color-bg-primary);
    position: relative;
}

.campaigns h3 {
    margin-bottom: var(--spacing-sm);
}

.campaigns .section-intro {
    margin-bottom: var(--spacing-2xl);
}

.campaigns-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: var(--spacing-2xl);
}

.campaign-card {
    --brand: var(--color-accent);
    position: relative;
    background-color: var(--color-bg-secondary);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
    isolation: isolate;
}

/* Brand-colored top accent bar */
.campaign-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--brand);
    z-index: 2;
}

.campaign-card:hover {
    transform: translateY(-6px);
    border-color: var(--brand);
    box-shadow: 0 18px 50px -12px color-mix(in srgb, var(--brand) 55%, transparent);
}

.campaign-media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #000;
}

.campaign-media iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Vertical Short player — centered 9:16 frame so the thumbnail sits right */
.campaign-media--vertical {
    aspect-ratio: 9 / 16;
    width: 64%;
    max-width: 300px;
    max-height: 530px;
    margin: var(--spacing-lg) auto 0;
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--brand) 45%, transparent);
}

.campaign-body {
    padding: var(--spacing-lg);
    position: relative;
}

.campaign-tag {
    display: inline-block;
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: color-mix(in srgb, var(--brand), white 38%);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--brand) 16%, transparent);
    margin-bottom: var(--spacing-sm);
}

.campaign-brand {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--color-text-primary);
    line-height: 1.1;
}

.campaign-desc {
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* ============================================
   REACTBITS-PORTED EFFECTS (vanilla)
   ============================================ */

/* --- Aurora animated hero background --- */
.hero-aurora {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.hero-aurora::before,
.hero-aurora::after {
    content: "";
    position: absolute;
    width: 65vw;
    height: 65vw;
    max-width: 820px;
    max-height: 820px;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.15;
}

.hero-aurora::before {
    background: radial-gradient(circle, #d8b06a, transparent 60%);
    top: -12%;
    left: -8%;
    animation: aurora-a 16s ease-in-out infinite alternate;
}

.hero-aurora::after {
    background: radial-gradient(circle, #8a5a2b, transparent 60%);
    bottom: -18%;
    right: -8%;
    animation: aurora-b 20s ease-in-out infinite alternate;
}

@keyframes aurora-a {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(14vw, 8vh) scale(1.25); }
}

@keyframes aurora-b {
    0%   { transform: translate(0, 0) scale(1.1); }
    100% { transform: translate(-12vw, -6vh) scale(0.85); }
}

/* --- Shiny / Gradient Text on the hero name --- */
.gradient-shine {
    background: linear-gradient(100deg, #f3ead9 0%, #d8b06a 25%, #fff6e8 50%, #d8b06a 75%, #f3ead9 100%);
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: shine-move 6s linear infinite;
}

@keyframes shine-move {
    to { background-position: 220% center; }
}

/* --- Spotlight Card (cursor-follow glow) --- */
.campaign-card,
.contact-card {
    position: relative;
}

.campaign-card::after,
.contact-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.35s ease;
    background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
                rgba(216, 176, 106, 0.16), transparent 60%);
}

.campaign-card:hover::after,
.contact-card:hover::after {
    opacity: 1;
}

/* --- Star Border (animated gradient border on CTA) --- */
@property --sb-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

.star-border {
    position: relative;
    isolation: isolate;
}

.star-border::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 2px;
    border-radius: inherit;
    background: conic-gradient(from var(--sb-angle),
                transparent 0%, var(--color-accent) 18%, #fff6e8 25%,
                var(--color-accent) 32%, transparent 50%, transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
    animation: sb-spin 3.5s linear infinite;
    z-index: -1;
}

@keyframes sb-spin {
    to { --sb-angle: 360deg; }
}

/* The email address is a 24-char label and .btn is white-space: nowrap, so
   between ~560px and 767px - where the contact grid is two-up on 213-296px
   cards - the button ran up to 124px past its card and overflow-x: clip cut
   the address off. Let this one label wrap instead of shrinking it. */
.btn-email {
    min-height: 44px;
    align-items: center;
    justify-content: center;
    white-space: normal;
    overflow-wrap: anywhere;
    max-width: 100%;
    line-height: 1.4;
}

/* --- Inline SVG icons (replace emoji) --- */
.btn-icon {
    width: 1.05em;
    height: 1.05em;
    flex-shrink: 0;
    vertical-align: -0.16em;
    margin-right: 0.5em;
    fill: currentColor;
}

.dock-icon {
    width: 26px;
    height: 26px;
    fill: currentColor;
}

/* --- Always-visible floating contact dock (desktop) --- */
.contact-dock {
    position: fixed;
    right: 22px;
    bottom: 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    z-index: 300;
}

.dock-btn {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    transition: transform 0.2s ease;
    position: relative;
}

.dock-btn:hover {
    transform: scale(1.1);
}

/* The dock used to be four unrelated brand colours - WhatsApp green, an
   Instagram gradient, IMDb yellow - stacked against a gold palette. Now one
   dark/gold system: the primary action stays filled, the rest are quiet until
   hovered. Recognition comes from the glyph, not the brand colour. */
.dock-btn {
    background: color-mix(in srgb, var(--color-bg-secondary) 88%, transparent);
    color: var(--color-accent);
    border: 1px solid var(--color-border);
    backdrop-filter: blur(8px);
    transition: transform 0.2s ease, border-color 0.2s ease,
                background-color 0.2s ease, color 0.2s ease;
}

.dock-btn:hover,
.dock-btn:focus-visible {
    color: var(--color-accent-hover);
    border-color: color-mix(in srgb, var(--color-accent) 55%, transparent);
    background: color-mix(in srgb, var(--color-accent) 12%, var(--color-bg-secondary));
}

/* One primary action, per the single-CTA rule. */
.dock-call {
    background: var(--color-accent);
    color: var(--color-bg-primary);
    border-color: var(--color-accent);
    animation: dock-pulse 2.4s infinite;
}

.dock-call:hover,
.dock-call:focus-visible {
    background: var(--color-accent-hover);
    color: var(--color-bg-primary);
    border-color: var(--color-accent-hover);
}

/* IMDb badge in Screen Work */
.imdb-cta {
    margin-bottom: var(--spacing-xl);
}

.imdb-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.15rem;
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--color-accent) 45%, transparent);
    color: var(--color-accent);
    font-weight: 600;
    border-radius: 6px;
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 14px rgba(245, 197, 24, 0.25);
}

.imdb-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(245, 197, 24, 0.4);
}

.imdb-badge .btn-icon {
    width: 18px;
    height: 18px;
    color: #000;
}

.dock-btn::after {
    content: attr(data-label);
    position: absolute;
    right: 70px;
    white-space: nowrap;
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    padding: 7px 13px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: 600;
    border: 1px solid var(--color-border);
    opacity: 0;
    pointer-events: none;
    transform: translateX(6px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.dock-btn:hover::after {
    opacity: 1;
    transform: translateX(0);
}

@keyframes dock-pulse {
    0%   { box-shadow: 0 8px 24px rgba(0,0,0,0.45), 0 0 0 0 rgba(216, 176, 106, 0.5); }
    70%  { box-shadow: 0 8px 24px rgba(0,0,0,0.45), 0 0 0 16px rgba(216, 176, 106, 0); }
    100% { box-shadow: 0 8px 24px rgba(0,0,0,0.45), 0 0 0 0 rgba(216, 176, 106, 0); }
}

/* --- Click Spark --- */
.spark {
    position: fixed;
    width: 4px;
    height: 4px;
    border-radius: 2px;
    background: var(--color-accent);
    pointer-events: none;
    z-index: 9999;
    animation: spark-fly 0.5s ease-out forwards;
}

@keyframes spark-fly {
    to {
        transform: translate(var(--dx), var(--dy)) scale(0.2);
        opacity: 0;
    }
}

/* ============================================
   HERO PARTICLES (gold dust field)
   ============================================ */
.hero-particles {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* ============================================
   HERO NAME — blur/rise entrance + shine sweep
   ============================================ */
.hero-name.name-reveal {
    animation: name-in 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s both,
               shine-move 6s linear infinite;
}

@keyframes name-in {
    from { opacity: 0; transform: translateY(18px); filter: blur(14px); }
    to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* ============================================
   ROTATING TEXT — cycling role words
   ============================================ */
.rotating-text {
    display: inline-flex;
    align-items: baseline;
    position: relative;
    color: var(--color-accent);
    font-weight: 700;
}

.rotating-text-word {
    display: inline-block;
    white-space: nowrap;
    animation: rot-in 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.rotating-text-word.out {
    animation: rot-out 0.45s cubic-bezier(0.4, 0, 1, 1) forwards;
}

@keyframes rot-in {
    from { opacity: 0; transform: translateY(0.55em) rotateX(-70deg); }
    to   { opacity: 1; transform: translateY(0) rotateX(0); }
}

@keyframes rot-out {
    from { opacity: 1; transform: translateY(0) rotateX(0); }
    to   { opacity: 0; transform: translateY(-0.55em) rotateX(70deg); }
}

/* ============================================
   CINEMATIC PHOTO REEL — infinite marquee
   ============================================ */
.reel-strip {
    padding: 0;
    overflow: hidden;
    background: var(--color-bg-deep);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.reel-track {
    display: flex;
    width: max-content;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    animation: reel-scroll 40s linear infinite;
}

.reel-strip:hover .reel-track {
    animation-play-state: paused;
}

.reel-item {
    position: relative;
    flex: 0 0 auto;
    width: 168px;
    height: 224px;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--color-border);
    filter: grayscale(0.35) brightness(0.85);
    transition: filter var(--transition-normal), transform var(--transition-normal);
}

/* No :hover here on purpose - the reel strip is decorative and aria-hidden, so
   lighting a frame up under the cursor advertised a target that is not one. */

.reel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.reel-tag {
    position: absolute;
    left: 8px;
    bottom: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-accent);
    background: rgba(10, 10, 12, 0.7);
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    backdrop-filter: blur(4px);
}

@keyframes reel-scroll {
    to { transform: translateX(-50%); }
}

/* ============================================
   COVERFLOW CAROUSEL (Looks & Range)
   ============================================ */
.coverflow {
    position: relative;
    height: 500px;
    perspective: 1600px;
    margin-top: var(--spacing-lg);
    touch-action: pan-y;
    user-select: none;
    overflow: hidden;
}

.coverflow-stage {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

.coverflow-slide {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 400px;
    margin: -200px 0 0 -150px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid rgba(216, 176, 106, 0.35);
    background: var(--color-bg-secondary);
    box-shadow: 0 30px 70px -25px rgba(0, 0, 0, 0.9);
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease, filter 0.6s ease;
    cursor: pointer;
    will-change: transform;
}

/* Each slide also carries .glare, which sets position:relative at equal
   specificity but LATER in this file — it would otherwise override the
   absolute stacking above and collapse the 3D carousel into normal flow
   (slides scatter vertically and the active one falls outside the clipped
   container). Keep coverflow slides absolutely positioned. */
.coverflow-slide.glare {
    position: absolute;
}

.coverflow-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    pointer-events: none;
}

.coverflow-slide figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: var(--spacing-lg) var(--spacing-sm) var(--spacing-sm);
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    font-weight: 600;
    letter-spacing: 1px;
    color: #fff;
    background: linear-gradient(to top, rgba(10, 10, 12, 0.9), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.coverflow-slide.is-active figcaption {
    opacity: 1;
}

.coverflow-slide.is-active {
    border-color: var(--color-accent);
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.95), 0 0 60px -20px var(--color-accent-glow);
}

.coverflow-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid rgba(216, 176, 106, 0.5);
    background: rgba(15, 15, 15, 0.7);
    color: var(--color-accent);
    cursor: pointer;
    backdrop-filter: blur(6px);
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.coverflow-arrow::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 11px;
    height: 11px;
    border-top: 2px solid currentColor;
    border-left: 2px solid currentColor;
}

.coverflow-prev { left: 2%; }
.coverflow-next { right: 2%; }
.coverflow-prev::before { transform: translate(-30%, -50%) rotate(-45deg); }
.coverflow-next::before { transform: translate(-70%, -50%) rotate(135deg); }

.coverflow-arrow:hover {
    background: var(--color-accent);
    color: var(--color-bg-primary);
    transform: translateY(-50%) scale(1.08);
}

.coverflow-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4px;
    display: flex;
    justify-content: center;
    gap: 4px;
    z-index: 20;
}

.coverflow-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    /* 40x40 was under the 44px touch minimum; the drawn dot is ::before, so
       growing the button only grows the hit area. */
    width: 44px;
    height: 44px;
    border: none;
    padding: 0;
    background: transparent;
    cursor: pointer;
}

.coverflow-dot::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    /* var(--color-border) (#2b2720) was 1.33:1 on #0b0a0c; #6e6655 is 3.48:1 */
    background: #6e6655;
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.coverflow-dot.is-active::before {
    background: var(--color-accent);
    transform: scale(1.3);
}

/* ============================================
   GLARE HOVER — light sweep across images
   ============================================ */
.glare {
    position: relative;
    overflow: hidden;
}

.glare::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 4;
    background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%),
                rgba(255, 246, 232, 0.28), transparent 42%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.glare:hover::after {
    opacity: 1;
}

/* --- 3D Tilt (TiltedCard) --- */
.tilt {
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1) !important;
    transform-style: preserve-3d;
    will-change: transform;
}

/* --- Cinematic film grain + vignette overlays --- */
.cinema-vignette {
    position: fixed;
    inset: 0;
    z-index: 100;
    pointer-events: none;
    background:
        radial-gradient(125% 125% at 50% 36%, transparent 48%, rgba(0, 0, 0, 0.62) 100%),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0%, transparent 12%, transparent 88%, rgba(0, 0, 0, 0.35) 100%);
}

.cinema-grain {
    position: fixed;
    inset: 0;
    z-index: 101;
    pointer-events: none;
    opacity: 0.06;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================
   CINEMATIC INTRO — fade from black
   ============================================ */


/* JS early-skip (interaction) — fade out immediately, cancel the timed animation */

/* Returning within the same session — no replay */









/* ============================================
   HERO SCROLL CUE
   ============================================ */

.hero-scroll-cue {
    position: absolute;
    left: 50%;
    bottom: var(--spacing-lg);
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Was 65x39, just under the 44px touch minimum. */
    min-height: 44px;
    gap: 8px;
    text-decoration: none;
    color: var(--color-text-secondary);
    opacity: 0.8;
    transition: color var(--transition-fast), opacity var(--transition-fast);
}

.hero-scroll-cue:hover {
    color: var(--color-accent);
    opacity: 1;
}

.hero-scroll-text {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 3px;
}

.hero-scroll-chevron {
    width: 12px;
    height: 12px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    animation: scroll-bob 1.8s ease-in-out infinite;
}

@keyframes scroll-bob {
    0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.5; }
    50%      { transform: rotate(45deg) translate(3px, 3px); opacity: 1; }
}

/* ============================================
   REFINED SECTION EYEBROW — gold underline
   ============================================ */

.section-eyebrow {
    position: relative;
    padding-bottom: var(--spacing-xs);
}

.section-eyebrow::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 46px;
    height: 2px;
    background: linear-gradient(to right, transparent, var(--color-accent), transparent);
}

/* Gold hairline dividers between major sections */
.campaigns,
.gallery,
.contact {
    border-top: 1px solid transparent;
    border-image: linear-gradient(to right, transparent, rgba(216, 176, 106, 0.35), transparent) 1;
}

@media (prefers-reduced-motion: reduce) {
    .hero-aurora::before,
    .hero-aurora::after,
    .gradient-shine,
    .hero-name.name-reveal,
    .star-border::before,
    .dock-call,
    .hero-image-frame img,
    .hero-scroll-chevron,
        .hero-name.name-reveal { opacity: 1; filter: none; transform: none; }
    .gradient-shine {
        background-position: 50% center;
    }
            .tilt {
        transform: none !important;
    }
    .reel-track { animation: none; }
    .split-text .split-char { opacity: 1; transform: none; animation: none; }
    .rotating-text-word { animation: none; }
    html { scroll-behavior: auto; }
        /* These three were declared above this block and so survived it: a 0.6s
       carousel slide transition, and two hover lifts. */
    .coverflow-slide { transition: none; }
    .campaign-card:hover { transform: none; }
    .dock-btn:hover { transform: none; }
}

/* ============================================
   SCROLL REVEAL ANIMATION
   ============================================ */

/* Scoped to .js (set by an inline script in <head>) so that with JavaScript
   disabled every .reveal element stays visible instead of blanking the page. */
.js .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    will-change: opacity, transform;
}

.js .reveal.visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .js .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

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

/* The old tablet override (repeat(3, 1fr)) overflowed its own container at
   1024px - three 1fr tracks floored at min-content summed to 931px inside an
   896px grid, pushing the third card 35px past the right edge. auto-fit in the
   base rule wraps correctly at every width, so no tablet override is needed. */

@media (max-width: 768px) {
    :root {
        --font-size-4xl: 2.5rem;
        --font-size-3xl: 2rem;
        --font-size-2xl: 1.5rem;
        --spacing-3xl: 3rem;
        --spacing-2xl: 2rem;
    }

    .nav-links {
        display: none;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .mobile-nav.is-open {
        display: flex;
    }

    .hero {
        padding: var(--spacing-2xl) var(--spacing-lg);
        min-height: auto;
    }

    /* MOBILE HERO ORDER (JD's call, 2026-08-25)
       Measured at 390x844: the headshot did not appear until 1,209px down -
       365px into screen two - because the name, a rotating role line, a 4-line
       paragraph, three meta chips and three CTAs all came first. For a casting
       director the face IS the product, so it moves into the first screen with
       one action beside it. Nothing is removed; the role line, paragraph, chips
       and the other two CTAs simply move below the fold.

       .hero-text and .hero-ctas become display:contents so their children
       become grid items and can be ordered individually. .hero-text only ever
       carried a flex gap, which the grid gap now supplies. */
    .hero-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .hero-text,
    .hero-ctas {
        display: contents;
    }

    .hero-name          { order: 1; }
    .hero-sub           { order: 2; }
    .hero-image         { order: 3; }
    .hero-ctas .star-border { order: 4; }   /* Contact for Casting - the one action up top */
    .hero-positioning   { order: 5; }
    .hero-tagline       { order: 6; }
    .hero-ctas .btn-primary { order: 7; }
    .hero-ctas .btn-secondary:not(.star-border) { order: 8; }
    .hero-meta          { order: 9; }
    .hero-brands        { order: 10; }

    .hero-image-frame {
        max-width: min(440px, 78vw);
    }

    .about-content {
        grid-template-columns: 1fr;
    }

    .about-portrait {
        max-width: 320px;
        margin: 0 auto;
    }

    .coverflow {
        height: 420px;
    }

    .coverflow-slide {
        width: 220px;
        height: 300px;
        margin: -150px 0 0 -110px;
    }

    .coverflow-arrow {
        width: 46px;
        height: 46px;
    }

    .reel-item {
        width: 128px;
        height: 172px;
    }

    .training-list {
        grid-template-columns: 1fr;
    }

    .experience-list {
        grid-template-columns: 1fr;
    }

    .footer-content {
        grid-template-columns: 1fr;
    }

    .contact-grid {
        /* A 200px floor produced 213-296px cards between ~560-767px, too
           narrow for a nowrap .btn: "Call 9705161810" is 198px and ran 51px
           past its card at 600px, clipped by overflow-x. The floor must hold
           the widest button plus 2x32px card padding = 262px, so two-up only
           happens where a card can actually contain its button. */
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 264px), 1fr));
    }

    .mobile-cta-sticky {
        display: flex;
        padding-bottom: max(var(--spacing-lg), env(safe-area-inset-bottom));
    }

    /* Reserve space so the fixed CTA bar never covers the footer / last content */
    body {
        padding-bottom: 92px;
    }

    /* Desktop dock hidden on mobile — sticky bar handles contact */
    .contact-dock {
        display: none;
    }

    
    section {
        padding: var(--spacing-2xl) var(--spacing-lg);
    }
}

@media (max-width: 480px) {
    :root {
        /* 16px x2 padding + 28.8px logo line + 19.2px tagline + 1px border */
        --header-h: 81px;
        --font-size-4xl: 2rem;
        --font-size-3xl: 1.5rem;
        --font-size-xl: 1rem;
        --spacing-3xl: 2rem;
        --spacing-2xl: 1.5rem;
        --spacing-lg: 1rem;
    }

    .container {
        padding: 0 var(--spacing-md);
    }

    .nav-container {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    /* Header is 80px here, not 105.6px */
    section[id],
    #main {
        scroll-margin-top: 92px;
    }

    .logo h1 {
        font-size: var(--font-size-lg);
    }

    .hero-name {
        font-size: var(--font-size-2xl);
    }

    .hero-positioning {
        font-size: var(--font-size-base);
    }

    .hero-meta {
        flex-direction: column;
    }

    .hero-meta span {
        width: 100%;
        text-align: center;
    }

    .video-grid,
    .samples-grid,
    .languages-grid,
    .campaigns-grid {
        grid-template-columns: 1fr;
    }

    .campaign-brand {
        font-size: var(--font-size-xl);
    }

    .mobile-cta-sticky {
        /* The shorthand used to reset the bottom inset set at <=768px back to a
           flat 16px, dropping the buttons into the home-indicator gesture strip
           on any iPhone with one. Keep the inset in the shorthand. */
        padding: var(--spacing-sm) var(--spacing-sm)
                 max(var(--spacing-sm), env(safe-area-inset-bottom));
        gap: var(--spacing-sm);
    }

    .btn {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: var(--font-size-xs);
    }

    section h3 {
        font-size: var(--font-size-2xl);
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    .header,
    .mobile-cta-sticky,
    .btn {
        display: none;
    }

    section {
        page-break-inside: avoid;
    }
}

/* About: "credited as" note */
.about-aka { color: var(--text-muted, #b9b2a6); font-weight: 400; font-size: 0.92em; }

/* ── Social icon rows — added 2026-07-19 (Ayush's social handles) ── */
.social-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-xs);
}
.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    transition: color .25s ease, border-color .25s ease, background-color .25s ease, transform .25s ease;
}
.social-link svg {
    width: 20px;
    height: 20px;
}
.social-link:hover,
.social-link:focus-visible {
    color: var(--color-accent);
    border-color: var(--color-accent);
    background-color: rgba(216, 176, 106, 0.08);
    transform: translateY(-2px);
}
.footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: var(--spacing-sm);
}
.footer-social .social-link {
    /* Was 38x38, under the 44px minimum touch target. Keep the smaller drawn
       circle but pad the hit area back out to 44x44. */
    width: 38px;
    height: 38px;
    padding: 3px;
    box-sizing: content-box;
}
.footer-social .social-link svg {
    width: 17px;
    height: 17px;
}

/* Advertisement credits line on brand campaign cards */
.campaign-credits {
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    letter-spacing: .02em;
    line-height: 1.5;
}
.campaign-credits strong {
    color: var(--color-text-primary);
    font-weight: 600;
}

/* Short analytics notice in the footer. GA4 was firing with no disclosure at all,
   which is the notice gap DPDP targets. Kept to one plain sentence. */
.footer-privacy {
    margin-top: 6px;
    font-size: 0.72rem;
    color: var(--color-text-muted, #b5aca1);
    opacity: 0.75;
    max-width: 60ch;
}

/* ============================================================
   CLICK-TO-PLAY VIDEO FACADES
   The page used to mount 10 live players on load - 8 YouTube, 2 Drive - each
   pulling its own player bundle. It made the page heavy enough to lock the
   main thread. Now a poster loads instead and the real iframe is created only
   when someone actually asks for the video.
   ============================================================ */

.video-facade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: var(--color-bg-deep);
    cursor: pointer;
    display: block;
    overflow: hidden;
}

.video-facade img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 600ms cubic-bezier(.22,.61,.36,1), opacity 300ms ease;
    opacity: 0.92;
}

/* A scrim instead of a flat opacity drop: keeps the frame bright where the
   image is interesting and darkens only behind the play button and the card
   edge, so the gold reads at any poster brightness. */
.video-facade::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(38% 38% at 50% 50%, rgba(0, 0, 0, 0.42), transparent 70%),
        linear-gradient(to top, rgba(11, 10, 12, 0.55), transparent 45%);
    pointer-events: none;
    transition: opacity 300ms ease;
}

.video-facade:hover::after,
.video-facade:focus-visible::after {
    opacity: 0.7;
}

.video-facade:hover img,
.video-facade:focus-visible img {
    transform: scale(1.04);
    opacity: 1;
}

/* Drive files have no public poster frame, so give them the palette instead
   of a broken image. */
.video-facade--noposter {
    background:
        radial-gradient(120% 120% at 50% 0%, rgba(216, 176, 106, 0.14), transparent 60%),
        var(--color-bg-secondary);
}

.video-facade-play {
    position: absolute;
    z-index: 1; /* above the ::after scrim */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 62px;
    height: 62px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-bg-primary);
    background: var(--color-accent);
    /* Ring first: measured 1.15:1 against the brightest poster, so the gold
       needs its own boundary rather than relying on the frame behind it. */
    box-shadow: 0 0 0 2px var(--color-bg-primary), 0 10px 30px rgba(0, 0, 0, 0.5);
    transition: transform 200ms ease, background-color 200ms ease;
    padding-left: 3px; /* optically centre the triangle */
}

.video-facade:hover .video-facade-play,
.video-facade:focus-visible .video-facade-play {
    background: var(--color-accent-hover);
    transform: translate(-50%, -50%) scale(1.08);
}

/* An inset gold outline measured 1.07-2.03:1 against the brighter posters, so
   the ring was effectively invisible on exactly the frames it had to survive.
   Same double-ring trick the play button above already uses: a dark band
   separates the gold from whatever the poster is doing underneath. */
.video-facade:focus-visible {
    outline: none;
    box-shadow:
        inset 0 0 0 2px var(--color-bg-primary),
        inset 0 0 0 4px var(--color-accent);
}

/* The iframe the facade is swapped for. */
.video-embed iframe,
.campaign-media iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Tapping play used to replace the poster with the iframe immediately, so for
   the 300ms-3s the player takes to boot the viewer watched a black rectangle
   with no indication anything had happened. The poster now stays put behind a
   loading ring and the frame fades in over it once it has actually loaded. */
.video-facade-frame {
    z-index: 3;
    opacity: 0;
    transition: opacity 260ms ease;
}

.video-facade-frame.is-ready {
    opacity: 1;
}

.video-facade.is-loading {
    cursor: progress;
}

.video-facade.is-loading::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    width: 86px;
    height: 86px;
    margin: -43px 0 0 -43px;
    border-radius: 50%;
    border: 2px solid rgba(216, 176, 106, 0.28);
    border-top-color: var(--color-accent);
    animation: facade-spin 900ms linear infinite;
    pointer-events: none;
}

.video-facade.is-loading .video-facade-play {
    animation: facade-pulse 1.2s ease-in-out infinite;
}

@keyframes facade-spin {
    to { transform: rotate(360deg); }
}

@keyframes facade-pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.09); }
}

@media (prefers-reduced-motion: reduce) {
    .video-facade img,
    .video-facade-play {
        transition: none;
    }
    .video-facade:hover img {
        transform: none;
    }
    /* Still mark the wait, just hold the ring still rather than spin it. */
    .video-facade.is-loading::before {
        animation: none;
        border-color: var(--color-accent);
        opacity: 0.55;
    }
    .video-facade.is-loading .video-facade-play {
        animation: none;
    }
    .video-facade-frame {
        transition: none;
    }
}

/* ============================================================
   MOBILE WEIGHT — measured, not guessed
   At 390x860 the page was 27.6 screens tall and the 18-still grid was 8.9 of
   them (7,640px in a single 295px column), pushing Contact to screen 25.6.
   A casting director deciding in under a minute should not have to scroll a
   third of the page past one gallery.
   ============================================================ */

/* Two-up on phones: a still is a supporting detail, not a hero image. */
@media (max-width: 768px) {
    .stills-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--spacing-sm);
    }

    /* Show six, reveal the rest on request. */
    .stills-grid.is-collapsed > .still-card:nth-child(n + 7) {
        display: none;
    }
}

.stills-toggle {
    display: none;
    margin: var(--spacing-lg) auto 0;
    padding: 0.85rem 1.6rem;
    min-height: 44px;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-accent);
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: border-color var(--transition-normal), color var(--transition-normal),
                background-color var(--transition-normal);
}

.stills-toggle:hover,
.stills-toggle:focus-visible {
    color: var(--color-accent-hover);
    border-color: color-mix(in srgb, var(--color-accent) 50%, transparent);
    background: color-mix(in srgb, var(--color-accent) 8%, transparent);
}

@media (max-width: 768px) {
    /* Only offer the toggle where the grid is actually clipped. */
    .stills-toggle {
        display: block;
    }
}

/* ============================================================
   PRESSED STATE
   There was no :active rule anywhere in this file. On touch there is no hover
   either, so a tap on any control gave zero feedback until the page itself
   changed - and on the slow paths (a video booting, a section scrolling) that
   is long enough to read as "nothing happened" and get tapped again.

   Declared last on purpose: several of these carry a :hover transform at the
   same specificity earlier in the file (.dock-btn scales to 1.1, .coverflow-arrow
   and .social-link lift), and a pointer that is pressing is also hovering, so
   the pressed state has to be the later rule to win. No transition on the way
   down either - the press should read as instant, and the release animates back
   through whatever transition the resting rule already declares.
   ============================================================ */
.btn:active,
.dock-btn:active,
.coverflow-arrow:active,
.coverflow-dot:active,
.social-link:active,
.video-facade:active,
.stills-toggle:active,
{
    transform: translateY(1px) scale(0.985);
    filter: brightness(0.92);
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    .btn:active,
    .dock-btn:active,
    .coverflow-arrow:active,
    .coverflow-dot:active,
    .social-link:active,
    .video-facade:active,
    .stills-toggle:active,
    {
        transform: none;
        filter: brightness(0.92);
    }
}