/* Brand typography — from the brand kit (brandkit/Tipografia) */
    @font-face { font-family: 'Questrial'; src: url('fonts/Questrial-Regular.ttf') format('truetype'); font-display: swap; } /* Questrial (SIL OFL 1.1), see fonts/Questrial-OFL.txt */
    @font-face { font-family: 'Abhaya Libre'; src: url('fonts/AbhayaLibre-Regular.ttf') format('truetype'); font-weight: 300 400; font-display: swap; }
    @font-face { font-family: 'Abhaya Libre'; src: url('fonts/AbhayaLibre-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
    @font-face { font-family: 'Abhaya Libre'; src: url('fonts/AbhayaLibre-SemiBold.ttf') format('truetype'); font-weight: 600 700; font-display: swap; }

    /* ===================================================
       RESET & BASE
    =================================================== */
    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

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

    /* ===================================================
       DESIGN TOKENS
    =================================================== */
    :root {
      --black:       #0B0B0B;
      --surface:     #141414;
      --surface-2:   #1c1c1c;
      --white:       #F0EDE8;
      --muted:       #6E6B66;
      --muted-light: #9A9690;
      --accent:      #C4A882;
      --accent-dim:  rgba(196, 168, 130, 0.12);
      --rule:        rgba(196, 168, 130, 0.18);
      --rule-subtle: rgba(240, 237, 232, 0.08);

      --display: 'Questrial', 'Abhaya Libre', serif;
      --sans: 'Abhaya Libre', Georgia, serif;
      --red: #e10600;

      --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
      --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    }

    body {
      background: var(--black);
      color: var(--white);
      font-family: var(--sans);
      font-weight: 300;
      line-height: 1.7;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }

    img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

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

    button {
      font-family: var(--sans);
      cursor: pointer;
    }

    /* ===================================================
       NAVIGATION
    =================================================== */
    #nav {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 100;
      padding: 28px 48px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: padding 0.4s var(--ease-out), background 0.4s var(--ease-out);
    }

    #nav.scrolled {
      padding: 20px 48px;
      background: rgba(11, 11, 11, 0.70);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }

    .nav-logo {
      font-family: var(--display);
      font-size: 13px;
      font-weight: 400;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--white);
      transition: color 0.3s;
    }
    .nav-logo:hover { color: var(--accent); }

    .nav-links {
      display: flex;
      gap: 40px;
      list-style: none;
    }

    .nav-links a {
      font-size: 10px;
      font-weight: 400;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--muted-light);
      transition: color 0.3s;
    }
    .nav-links a:hover { color: var(--white); }

    /* Hamburger */
    .hamburger {
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 5px;
      background: none;
      border: none;
      padding: 4px;
      min-width: 44px;
      min-height: 44px;
      cursor: pointer;
      z-index: 200;
    }

    .hamburger span {
      display: block;
      width: 24px;
      height: 1px;
      background: var(--white);
      transition: transform 0.4s var(--ease-out), opacity 0.3s;
      transform-origin: center;
    }

    .hamburger.active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .hamburger.active span:nth-child(2) { opacity: 0; }
    .hamburger.active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

    /* Mobile overlay menu */
    .mobile-menu {
      display: none;
      position: fixed;
      inset: 0;
      background: var(--black);
      z-index: 150;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 32px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.4s var(--ease-out);
    }

    .mobile-menu.open {
      opacity: 1;
      pointer-events: all;
    }

    .mobile-menu a {
      font-family: var(--display);
      font-size: 44px;
      font-weight: 300;
      font-style: italic;
      color: var(--white);
      letter-spacing: 0.01em;
      transition: color 0.3s;
    }
    .mobile-menu a:hover { color: var(--accent); }

    .mobile-socials {
      display: flex;
      gap: 28px;
      margin-top: 16px;
    }

    .mobile-socials a {
      font-family: var(--sans);
      font-size: 10px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--muted);
      font-style: normal;
    }

    /* ===================================================
       HERO
    =================================================== */
    #hero {
      min-height: 100dvh;
      position: relative;
      overflow: hidden;
      padding: 0;
    }

    .hero-text {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: center;
      text-align: center;
      padding: 120px 56px 72px;
      position: relative;
      z-index: 2;
      min-height: 100dvh;
    }

    .hero-actor-label {
      font-family: var(--sans);
      font-size: 10px;
      font-weight: 400;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 32px;
      opacity: 0;
      animation: fadeUp 1s var(--ease-out) 0.2s forwards;
    }

    .hero-name {
      font-family: var(--display);
      font-style: italic;
      font-weight: 300;
      font-size: clamp(56px, 7vw, 104px);
      line-height: 0.95;
      letter-spacing: -0.02em;
      color: var(--white);
      opacity: 0;
      animation: fadeUp 1.1s var(--ease-out) 0.35s forwards;
    }

    .hero-sub {
      margin-top: 32px;
      font-family: var(--sans);
      font-size: 12px;
      font-weight: 300;
      letter-spacing: 0.12em;
      color: var(--muted-light);
      opacity: 0;
      animation: fadeUp 1s var(--ease-out) 0.6s forwards;
    }

    .hero-cta {
      display: inline-block;
      margin-top: 48px;
      border-radius: 999px;
      font-family: var(--sans);
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--black);
      background: var(--accent);
      border: 1px solid var(--accent);
      padding: 16px 32px;
      transition: background 0.3s, color 0.3s;
      opacity: 0;
      animation: fadeUp 1s var(--ease-out) 0.8s forwards;
      white-space: nowrap;
    }

    .hero-cta:hover {
      background: transparent;
      color: var(--accent);
    }

    .hero-cta:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 3px;
    }

    .hero-image {
      position: absolute;
      inset: 0;
      z-index: 0;
    }

    .hero-image img {
      object-position: center top;
      filter: saturate(0.88) contrast(1.04);
    }

    /* Gradient wash: dark bottom (centered text) fades to transparent top */
    .hero-image::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to top,
        rgba(11, 11, 11, 0.92) 0%,
        rgba(11, 11, 11, 0.55) 35%,
        transparent 65%
      );
      z-index: 1;
      pointer-events: none;
    }

    /* ===================================================
       SCROLL REVEAL SYSTEM
    =================================================== */
    .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out);
    }

    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .reveal-d1 { transition-delay: 0.08s; }
    .reveal-d2 { transition-delay: 0.16s; }
    .reveal-d3 { transition-delay: 0.24s; }
    .reveal-d4 { transition-delay: 0.32s; }

    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(20px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* ===================================================
       SHARED SECTION ELEMENTS
    =================================================== */
    section {
      padding: 112px 56px;
    }

    .section-inner {
      max-width: 1240px;
      margin: 0 auto;
    }

    .eyebrow {
      display: block;
      font-family: var(--sans);
      font-size: 10px;
      font-weight: 400;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 20px;
      text-align: center;
    }

    .section-title {
      text-align: center;
      font-family: var(--display);
      font-size: clamp(38px, 4.5vw, 64px);
      font-weight: 300;
      line-height: 1.0;
      letter-spacing: -0.01em;
      color: var(--white);
    }

    .rule {
      border: none;
      border-top: 1px solid var(--rule);
      margin: 0;
    }

    /* ===================================================
       REACH (analytics)
    =================================================== */
    #reach { border-top: 1px solid var(--rule); }
    .reach-nums {
      display: grid; grid-template-columns: repeat(4, 1fr);
      margin: 56px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
    }
    .reach-num { padding: 32px 24px; border-left: 1px solid var(--rule); text-align: center; }
    .reach-num:first-child { border-left: 0; }
    .reach-num b {
      display: block; font-family: var(--display); font-weight: 300;
      font-size: clamp(40px, 5vw, 72px); line-height: 1; color: var(--white);
    }
    .reach-num span {
      display: block; margin-top: 12px; font-size: 10px;
      letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted-light);
    }
    .reach-chart { width: 100%; height: auto; display: block; overflow: visible; }
    .reach-chart text { font-family: var(--sans); font-size: 12px; fill: var(--muted-light); letter-spacing: 0.1em; }
    .reach-chart .grid { stroke: var(--rule-subtle); }
    .reach-chart .area { fill: url(#reachFill); opacity: 0; transition: opacity 1.2s ease 1s; }
    .reach-chart .line {
      fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round;
      stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s var(--ease-in-out);
    }
    .reach-chart .dot { fill: var(--black); stroke: var(--accent); stroke-width: 2; opacity: 0; transition: opacity 0.4s ease; }
    .reach-chart .lbl { opacity: 0; transition: opacity 0.4s ease; fill: var(--white); }
    #reach.in-view .line { stroke-dashoffset: 0; }
    #reach.in-view .area, #reach.in-view .dot, #reach.in-view .lbl { opacity: 1; }
    .reach-chart .head { fill: var(--accent); opacity: 0; filter: drop-shadow(0 0 10px var(--accent)); }
    /* Scroll-scrub mode (desktop): stage pins, scroll position drives the chart */
    /* svh = smallest viewport: stays put when the mobile URL bar shows/hides (no jump) */
    #reach.scrub .reach-pin { height: 260vh; height: 260svh; }
    #reach.scrub .reach-stage {
      position: sticky; top: 0; height: 100vh; height: 100svh; padding-top: 72px;
      display: flex; flex-direction: column; justify-content: center;
    }
    #reach.scrub .section-title { font-size: clamp(32px, 7vh, 72px); }
    #reach.scrub .reach-nums { margin: 3vh 0; }
    #reach.scrub .reach-num { padding-top: 2.5vh; padding-bottom: 2.5vh; }
    #reach.scrub .reach-num b { font-size: clamp(32px, 6vh, 72px); }
    #reach.scrub .reach-chart { max-height: 38vh; }
    #reach.scrub .reach-chart * { transition: none; }
    #reach.scrub .reach-chart .area { opacity: 1; }
    #reach.scrub .reach-chart .dot, #reach.scrub .reach-chart .lbl {
      transform-box: fill-box; transform-origin: center; transform: scale(0.3);
      transition: opacity 0.3s ease, transform 0.5s var(--ease-out);
    }
    #reach.scrub .reach-chart .on { opacity: 1; transform: scale(1); }
    #reach.scrub .reach-chart .head { opacity: 1; }
    #reach.scrub.peak .reach-chart .head { animation: reachPulse 1.4s ease-in-out infinite; }
    @keyframes reachPulse { 50% { filter: drop-shadow(0 0 22px var(--accent)); } }
    .reach-marquee { overflow: hidden; margin-top: 56px; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
    .reach-track { display: flex; gap: 20px; width: max-content; animation: reachScroll 40s linear infinite; }
    .reach-marquee:hover .reach-track { animation-play-state: paused; }
    @keyframes reachScroll { to { transform: translateX(calc(-50% - 10px)); } }
    .reach-card {
      width: 260px; padding: 28px 24px; background: var(--surface);
      border: 1px solid var(--rule); flex: none;
    }
    .reach-card small { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); }
    .reach-card b { display: block; margin: 14px 0 6px; font-family: var(--display); font-weight: 300; font-size: 52px; line-height: 1; color: var(--white); }
    .reach-card span { font-size: 13px; color: var(--muted-light); }
    .reach-card em { display: block; margin-top: 14px; font-style: normal; font-size: 13px; color: var(--accent); }
    @media (max-width: 768px) {
      .reach-nums { grid-template-columns: 1fr 1fr; margin: 40px 0; }
      .reach-num:nth-child(3) { border-left: 0; }
      .reach-num:nth-child(n+3) { border-top: 1px solid var(--rule); }
      .reach-chart text { font-size: 18px; }
      .reach-card { width: 220px; }
      #reach.scrub .reach-pin { height: 220svh; }
      #reach.scrub .reach-stage { padding-top: 64px; }
      #reach.scrub .reach-nums { margin: 2.5svh 0; }
      #reach.scrub .reach-num { padding: 1.8svh 12px; }
      #reach.scrub .reach-num b { font-size: clamp(30px, 5svh, 44px); }
      #reach.scrub .reach-chart { max-height: none; }
    }
    @media (prefers-reduced-motion: reduce) {
      .reach-track { animation: none; }
      .reach-marquee { overflow-x: auto; }
      .reach-chart * { transition: none !important; }
    }

    /* ===================================================
       WORK
    =================================================== */
    #work {
      border-top: 1px solid var(--rule);
      padding-top: 112px;
      padding-bottom: 96px;
    }

    .work-header {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 32px;
      margin-bottom: 52px;
    }

    .tab-filters {
      display: flex;
      gap: 4px;
      padding: 4px;
      border: 1px solid var(--rule);
      border-radius: 999px;
    }

    .tab-btn {
      background: none;
      border: none;
      border-radius: 999px;
      color: var(--muted);
      font-family: var(--sans);
      font-size: 10px;
      font-weight: 400;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      padding: 14px 20px;
      min-height: 44px;
      transition: color 0.3s, background 0.3s;
      white-space: nowrap;
    }

    .tab-btn:hover { color: var(--white); }
    .tab-btn.active {
      background: var(--accent-dim);
      color: var(--accent);
    }

    /* ===================================================
       AWARDS
    =================================================== */
    #awards {
      border-top: 1px solid var(--rule);
    }

    #awards .section-inner > h2 {
      margin-bottom: 56px;
    }

    .awards-list {
      display: flex;
      flex-direction: column;
    }

    .award-row {
      display: grid;
      grid-template-columns: 80px 1fr 1.4fr auto;
      align-items: center;
      gap: 32px;
      padding: 28px 0;
      border-bottom: 1px solid var(--rule-subtle);
      transition: background 0.3s;
    }

    .award-row:first-child {
      border-top: 1px solid var(--rule-subtle);
    }

    .award-year {
      font-family: var(--display);
      font-size: 15px;
      color: var(--accent);
    }

    .award-title {
      font-family: var(--display);
      font-size: 20px;
      font-weight: 400;
      color: var(--white);
    }

    .award-source {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .award-festival {
      font-family: var(--sans);
      font-size: 13px;
      color: rgba(240, 237, 232, 0.75);
    }

    .award-film {
      font-family: var(--sans);
      font-size: 11px;
      color: var(--muted);
      font-style: italic;
    }

    .award-badge {
      font-family: var(--sans);
      font-size: 9px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      border: 1px solid;
      border-radius: 999px;
      padding: 6px 14px;
      white-space: nowrap;
    }

    .award-badge.winner {
      color: var(--accent);
      border-color: rgba(196, 168, 130, 0.4);
    }

    .award-badge.nominee {
      color: var(--muted);
      border-color: var(--rule-subtle);
    }

    /* ===================================================
       PRESS
    =================================================== */
    #press {
      border-top: 1px solid var(--rule);
      background: var(--surface);
      padding: 112px 56px;
    }

    #press .section-inner > h2 {
      margin-bottom: 56px;
    }

    .press-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1px;
      background: var(--rule);
    }

    .press-card {
      background: var(--surface);
      padding: 56px 52px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 36px;
      transition: background 0.3s;
    }

    .press-card:hover { background: var(--surface-2); }

    .press-pub {
      font-family: var(--sans);
      font-size: 10px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--accent);
    }

    .press-quote {
      font-family: var(--display);
      font-style: italic;
      font-size: 22px;
      font-weight: 300;
      line-height: 1.45;
      color: var(--white);
      flex: 1;
    }

    .press-link {
      font-family: var(--sans);
      font-size: 10px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--muted-light);
      display: inline-flex;
      align-items: center;
      gap: 10px;
      transition: color 0.3s;
    }

    .press-link .arrow {
      display: inline-block;
      transition: transform 0.3s var(--ease-out);
    }

    .press-link:hover { color: var(--white); }
    .press-link:hover .arrow { transform: translateX(4px); }

    /* ===================================================
       HEADSHOTS
    =================================================== */
    #headshots {
      border-top: 1px solid var(--rule);
    }

    #headshots .section-inner > .eyebrow { margin-bottom: 8px; }

    #headshots .section-inner > .section-title {
      margin-bottom: 52px;
    }

    .headshot-item {
      overflow: hidden;
      position: relative;
      background: var(--surface);
      aspect-ratio: 2 / 3;
    }

    .headshot-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      filter: saturate(0.88);
      transition: transform 0.7s var(--ease-out), filter 0.5s;
    }

    .headshot-item:hover img {
      transform: scale(1.03);
      filter: saturate(1);
    }

    /* Headshot carousel dots — mobile only */
    .headshots-dots {
      display: none;
    }

    @media (max-width: 768px) {
      #headshots {
        position: relative;
        padding-bottom: 0;
      }
      .headshots-dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        position: absolute;
        bottom: 20px;
        left: 0;
        right: 0;
        pointer-events: none;
      }
      .hs-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        border: none;
        background: rgba(255,255,255,0.45);
        padding: 0;
        cursor: pointer;
        pointer-events: all;
        transition: background 0.25s, transform 0.25s;
        position: relative;
      }
      .hs-dot::after {
        content: '';
        position: absolute;
        inset: -10px;
      }
      .hs-dot.active {
        background: var(--accent);
        transform: scale(1.35);
      }
      .hs-dot:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 3px;
      }
    }

    /* ===================================================
       DRAMATIC SPOTLIGHT
    =================================================== */
    #dramatic-spotlight {
      width: 100%;
      min-height: 100dvh;
      position: relative;
      overflow: hidden;
      border-top: 1px solid var(--rule);
      padding: 0;
    }

    #dramatic-spotlight img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 30%;
      filter: saturate(0.85) contrast(1.05);
      transition: filter 0.5s;
    }

    #dramatic-spotlight:hover img {
      filter: saturate(1) contrast(1.02);
    }

    .spotlight-overlay {
      position: absolute;
      inset: 0;
      z-index: 2;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: center;
      text-align: center;
      padding: 0 64px 88px;
      background: linear-gradient(
        to top,
        rgba(11, 11, 11, 0.82) 0%,
        rgba(11, 11, 11, 0.28) 42%,
        transparent 68%
      );
      pointer-events: none;
    }

    .spotlight-eyebrow {
      font-family: var(--sans);
      font-size: 10px;
      font-weight: 400;
      letter-spacing: 0.26em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 20px;
    }

    .spotlight-name {
      font-family: var(--display);
      font-style: italic;
      font-weight: 300;
      font-size: clamp(60px, 8vw, 108px);
      line-height: 0.91;
      letter-spacing: -0.02em;
      color: var(--white);
      margin-bottom: 28px;
    }

    .spotlight-tagline {
      font-family: var(--sans);
      font-size: 12px;
      font-weight: 300;
      letter-spacing: 0.13em;
      color: rgba(240, 237, 232, 0.52);
    }

    @media (max-width: 768px) {
      .spotlight-overlay { padding: 0 24px 72px; }
      .spotlight-name { font-size: clamp(48px, 13vw, 80px); }
    }

    /* ===================================================
       CONTACT
    =================================================== */
    #contact {
      border-top: 1px solid var(--rule);
    }

    #contact .section-inner > .eyebrow { margin-bottom: 8px; }

    #contact .section-inner > h2 {
      margin-bottom: 80px;
    }

    .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 112px;
    }

    .contact-info {
      display: flex;
      flex-direction: column;
      gap: 52px;
    }

    .contact-block-label {
      display: block;
      font-family: var(--sans);
      font-size: 10px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 10px;
    }

    .contact-email {
      font-family: var(--display);
      font-size: 22px;
      font-weight: 400;
      color: var(--white);
      transition: color 0.3s;
      word-break: break-all;
    }

    .contact-email:hover { color: var(--accent); }

    .social-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .social-item {
      display: flex;
      align-items: center;
      gap: 14px;
      font-family: var(--sans);
      font-size: 13px;
      font-weight: 300;
      color: var(--muted-light);
      transition: color 0.3s;
    }

    .social-item::before {
      content: '';
      display: block;
      width: 24px;
      height: 1px;
      background: var(--muted);
      flex-shrink: 0;
      transition: width 0.35s var(--ease-out), background 0.3s;
    }

    .social-item:hover { color: var(--white); }
    .social-item:hover::before {
      width: 40px;
      background: var(--accent);
    }

    /* Form */
    .contact-form {
      display: flex;
      flex-direction: column;
      gap: 28px;
    }

    .form-group {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .form-group label {
      font-family: var(--sans);
      font-size: 10px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--muted);
    }

    .form-group input,
    .form-group textarea {
      background: transparent;
      border: none;
      border-bottom: 1px solid var(--rule);
      color: var(--white);
      font-family: var(--sans);
      font-size: 15px;
      font-weight: 300;
      padding: 12px 0;
      outline: none;
      transition: border-color 0.3s;
      width: 100%;
    }

    .form-group input::placeholder,
    .form-group textarea::placeholder {
      color: var(--muted);
      font-size: 14px;
    }

    .form-group input:focus,
    .form-group textarea:focus {
      border-bottom-color: var(--accent);
    }

    .form-group textarea {
      resize: none;
      min-height: 110px;
      line-height: 1.6;
    }

    .form-submit {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      align-self: center;
      background: none;
      border: 1px solid var(--rule);
      border-radius: 999px;
      color: var(--white);
      font-family: var(--sans);
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      padding: 17px 36px;
      transition: border-color 0.3s, background 0.3s, color 0.3s;
      white-space: nowrap;
    }

    .form-submit:hover {
      border-color: var(--accent);
      background: var(--accent-dim);
      color: var(--accent);
    }

    .form-submit.sent {
      border-color: var(--accent);
      color: var(--accent);
      background: var(--accent-dim);
    }

    /* ===================================================
       FOOTER
    =================================================== */
    footer {
      border-top: 1px solid var(--rule);
      padding: 36px 56px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .footer-name {
      font-family: var(--display);
      font-size: 13px;
      font-weight: 400;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--muted);
    }

    .footer-copy {
      font-family: var(--sans);
      font-size: 11px;
      color: var(--muted);
      letter-spacing: 0.04em;
    }

    .footer-imdb a {
      font-family: var(--sans);
      font-size: 11px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--muted);
      transition: color 0.3s;
    }

    .footer-imdb a:hover { color: var(--accent); }

    /* ===================================================
       FILMOGRAPHY POSTER CAROUSEL
    =================================================== */
    .film-carousel-wrap {
      max-width: 1240px;
      margin: 0 auto;
      overflow-x: clip;
      overflow-y: visible;
      padding-block: 28px;
      -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
              mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
    }

    .film-carousel-track {
      display: flex;
      gap: 1px;
      background: var(--rule);
      width: max-content;
      will-change: transform;
      transform: translate3d(0, 0, 0);
    }

    .film-card {
      background: var(--black);
      position: relative;
      overflow: visible;
      flex-shrink: 0;
      width: clamp(180px, 22vw, 248px);
      transform-origin: center bottom;
      transition:
        transform 0.55s var(--ease-out),
        box-shadow 0.55s var(--ease-out);
      z-index: 1;
    }

    .film-card:hover {
      transform: scale(1.085);
      z-index: 9;
      box-shadow:
        0 28px 60px -10px rgba(0, 0, 0, 0.72),
        0 0 0 1px var(--accent);
      transition:
        transform 0.4s var(--ease-out),
        box-shadow 0.4s var(--ease-out);
    }

    @media (max-width: 768px) {
      .film-carousel-wrap {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        max-width: 100%;
        touch-action: pan-x;
        /* Break out of section's 24px side padding to go full-bleed */
        margin-inline: -24px;
        padding-inline: 20px;
        padding-block: 20px;
        -webkit-mask-image: none;
                mask-image: none;
      }
      .film-carousel-wrap::-webkit-scrollbar { display: none; }
      .film-carousel-track {
        transform: none !important;
        opacity: 1 !important;
        transition: none !important;
        gap: 12px;
        background: transparent;
      }
      .film-card {
        width: 72vw;
        flex-shrink: 0;
        scroll-snap-align: start;
      }
    }

    @media (max-width: 480px) {
      .film-carousel-wrap { padding-inline: 16px; margin-inline: -24px; }
      .film-card { width: 76vw; }
    }

    @media (prefers-reduced-motion: reduce) {
      .film-carousel-wrap {
        overflow-x: auto;
        overflow-y: visible;
        -webkit-mask-image: none;
                mask-image: none;
        scrollbar-width: none;
      }
      .film-carousel-wrap::-webkit-scrollbar { display: none; }
      .film-carousel-track {
        transform: none !important;
        scroll-snap-type: x mandatory;
      }
      .film-card { scroll-snap-align: start; }
    }

    /* Carousel Navigation */
    .work-controls {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .carousel-nav {
      display: flex;
      gap: 8px;
      flex-shrink: 0;
    }

    .carousel-btn {
      background: none;
      border: 1px solid var(--rule);
      border-radius: 50%;
      color: var(--muted-light);
      font-family: var(--sans);
      font-size: 15px;
      padding: 0;
      width: 44px;
      height: 44px;
      cursor: pointer;
      transition: color 0.3s, background 0.3s;
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }


    .carousel-btn:hover:not(:disabled) {
      color: var(--white);
      background: var(--accent-dim);
    }

    .carousel-btn:disabled {
      opacity: 0.28;
      cursor: default;
    }

    .film-card-poster {
      position: relative;
      aspect-ratio: 2 / 3;
      overflow: hidden;
      background: var(--surface);
    }

    .film-card-poster img {
      transition: transform 0.65s var(--ease-out), filter 0.45s;
      filter: saturate(0.78) brightness(0.9);
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .film-card:hover .film-card-poster img {
      filter: saturate(1.12) brightness(1.05);
    }

    .film-card-poster::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to top,
        rgba(11,11,11,0.95) 0%,
        rgba(11,11,11,0.55) 40%,
        transparent 70%
      );
      opacity: 0;
      transition: opacity 0.4s var(--ease-out);
      z-index: 1;
      pointer-events: none;
    }

    .film-card:hover .film-card-poster::after { opacity: 1; }

    .film-card-role-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 12px 14px;
      z-index: 2;
      opacity: 0;
      transform: translateY(5px);
      transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
    }

    .film-card:hover .film-card-role-overlay {
      opacity: 1;
      transform: translateY(0);
    }

    .film-role-text {
      font-family: var(--sans);
      font-size: 10px;
      font-style: italic;
      color: rgba(240,237,232,0.85);
      line-height: 1.4;
    }

    .film-card-body {
      padding: 12px 14px 14px;
      background: var(--black);
    }

    .film-card-type-badge {
      display: inline-block;
      font-family: var(--sans);
      font-size: 8px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 4px;
    }

    .film-card-title {
      font-family: var(--display);
      font-size: 14px;
      font-weight: 400;
      line-height: 1.25;
      color: var(--white);
      margin-bottom: 2px;
    }

    .film-card-year {
      font-family: var(--sans);
      font-size: 10px;
      color: var(--muted);
    }

    .film-no-poster {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--surface);
    }

    .film-no-poster-mark {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 7px;
      opacity: 0.22;
    }

    .film-no-poster-mark span {
      display: block;
      width: 32px;
      height: 1px;
      background: var(--accent);
    }

    .film-no-poster-mark p {
      font-family: var(--sans);
      font-size: 8px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--accent);
    }

    @media (max-width: 768px) {
      .film-card-title { font-size: 12px; }
      .film-card-body { padding: 10px 10px 12px; }
    }

    /* ===================================================
       REDUCED MOTION
    =================================================== */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
      }

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

      .hero-name,
      .hero-actor-label,
      .hero-sub,
      .hero-cta {
        opacity: 1;
        animation: none;
      }

    }

    /* ===================================================
       RESPONSIVE - TABLET 1024px
    =================================================== */
    @media (max-width: 1024px) {
      .award-row {
        grid-template-columns: 60px 1fr auto;
        grid-template-rows: auto auto;
      }

      .award-source {
        grid-column: 2 / 3;
        grid-row: 2;
      }
    }

    /* ===================================================
       RESPONSIVE - MOBILE 768px
    =================================================== */
    @media (max-width: 768px) {
      #nav {
        padding: 20px 24px;
      }

      #nav.scrolled {
        padding: 14px 24px;
      }

      .nav-links { display: none; }
      .hamburger { display: flex; }
      .mobile-menu { display: flex; }

      section {
        padding: 80px 24px;
      }

      #press { padding: 80px 24px; }
      #gallery { padding-bottom: 0; }

      footer {
        padding: 28px 24px;
        flex-direction: column;
        gap: 12px;
        text-align: center;
      }

      /* Hero: full-bleed on mobile, text overlays image */
      .hero-text {
        padding: 0 24px 72px;
        max-width: 100%;
        justify-content: flex-end;
      }

      /* Face centered on mobile */
      .hero-image img {
        object-position: 30% top;
      }

      #dramatic-spotlight img {
        object-position: 30% top;
        transform: scale(2.2);
        transform-origin: 88% 12%;
      }

      .hero-actor-label { margin-bottom: 20px; }

      .hero-name {
        font-size: clamp(52px, 13vw, 80px);
      }

      .hero-sub {
        margin-top: 20px;
      }

      .hero-cta {
        margin-top: 36px;
      }

      /* Work */
      .work-header { gap: 20px; }

      .work-controls {
        width: 100%;
        justify-content: space-between;
      }

      .tab-filters {
        overflow-x: auto;
        flex: 1;
      }

      /* Awards */
      .award-row {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        gap: 12px;
        padding: 24px 0;
      }

      .award-year { grid-column: 1; grid-row: 1; }
      .award-title { grid-column: 1; grid-row: 2; }
      .award-source { grid-column: 1; grid-row: 3; }
      .award-badge { grid-column: 2; grid-row: 1; align-self: start; }

      /* Press */
      .press-grid {
        grid-template-columns: 1fr;
      }

      .press-card { padding: 40px 28px; }

      /* Contact */
      .contact-grid {
        grid-template-columns: 1fr;
        gap: 64px;
      }

      .form-submit { align-self: stretch; }
    }

    /* ===================================================
       RESPONSIVE - SMALL 480px
    =================================================== */
    @media (max-width: 480px) {
      .hero-name { font-size: clamp(46px, 14vw, 64px); }
    }

    /* ===================================================
       2026 UPDATE — brand type, reel-first hero, NSI, news, press, gallery
    =================================================== */
    /* Brand display face has no italic: keep it upright everywhere */
    .hero-name, .mobile-menu a, .spotlight-name, .press-quote { font-style: normal; }
    .eyebrow, .nav-links a, .tab-btn, .press-pub, .press-link, .contact-block-label,
    .film-card-type-badge, .form-group label { font-size: 12px; }
    body { font-size: 17px; font-weight: 400; }

    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 10px;
      min-height: 48px; padding: 14px 28px; border-radius: 999px;
      font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
      border: 1px solid var(--accent); color: var(--black); background: var(--accent);
      transition: background 0.3s, color 0.3s, border-color 0.3s; white-space: nowrap; cursor: pointer;
    }
    .btn:hover { background: transparent; color: var(--accent); }
    .btn.ghost { background: transparent; color: var(--white); border-color: rgba(240,237,232,0.35); }
    .btn.ghost:hover { border-color: var(--accent); color: var(--accent); }
    .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
    .btn-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

    /* Nav */
    .nav-logo img { height: 26px; width: auto; display: block; object-fit: contain; }
    .nav-cta { min-height: 40px; padding: 10px 20px; font-size: 11px; }
    @media (max-width: 1100px) { .nav-links { gap: 24px; } }
    @media (max-width: 768px) { .nav-cta { display: none; } .nav-logo img { height: 22px; } }

    /* Hero: English reel is the first media people see */
    #hero .hero-image video { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9) contrast(1.05); }
    #hero .hero-image::before { background: linear-gradient(to top, rgba(11,11,11,0.95) 0%, rgba(11,11,11,0.55) 38%, rgba(11,11,11,0.15) 70%, rgba(11,11,11,0.45) 100%); }
    .hero-logo { width: min(640px, 86vw); height: auto; opacity: 0; animation: fadeUp 1.1s var(--ease-out) 0.35s forwards; }
    .hero-accolade {
      margin-top: 28px; font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--white);
      opacity: 0; animation: fadeUp 1s var(--ease-out) 0.6s forwards;
    }
    .hero-accolade b { color: var(--accent); font-weight: 600; }
    #hero .btn-row { margin-top: 36px; opacity: 0; animation: fadeUp 1s var(--ease-out) 0.8s forwards; }
    .hero-mute, .hero-pause {
      position: absolute; right: 24px; bottom: 24px; z-index: 3; width: 44px; height: 44px; border-radius: 50%;
      border: 1px solid rgba(240,237,232,0.35); background: rgba(11,11,11,0.4); color: var(--white); font-size: 16px;
    }
    @media (prefers-reduced-motion: reduce) { .hero-logo, .hero-accolade, #hero .btn-row { opacity: 1; animation: none; } }

    /* Laurel strip under the hero */
    .laurel-strip { padding: 28px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); overflow: hidden;
      mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
    .laurel-track { display: flex; gap: 56px; width: max-content; align-items: center; animation: laurelScroll 60s linear infinite; }
    .laurel-strip:hover .laurel-track { animation-play-state: paused; }
    .laurel-track img { height: 72px; width: auto; filter: brightness(0) invert(1); opacity: 0.85; }
    @keyframes laurelScroll { to { transform: translateX(calc(-50% - 28px)); } }
    @media (prefers-reduced-motion: reduce) { .laurel-track { animation: none; } .laurel-strip { overflow-x: auto; } }

    /* Reels */
    #reels { padding-top: 96px; }
    .reel-player { position: relative; aspect-ratio: 16 / 9; background: #000; margin: 40px auto 0; max-width: 1100px; border: 1px solid var(--rule); }
    .reel-player video, .reel-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: contain; background: #000; }
    .reel-select { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
    .reel-select label { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted-light); }
    .reel-select select {
      min-height: 48px; padding: 10px 44px 10px 20px; border-radius: 999px; border: 1px solid var(--rule);
      background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23C4A882' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 18px center;
      color: var(--white); font: 500 15px var(--sans); appearance: none; cursor: pointer;
    }
    .reel-select select:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

    /* NSI feature */
    #nsi { border-top: 1px solid var(--rule); background: radial-gradient(ellipse at 70% 0%, rgba(196,168,130,0.10), transparent 60%), var(--black); }
    .nsi-grid { display: grid; grid-template-columns: minmax(260px, 420px) 1fr; gap: 64px; align-items: center; }
    .nsi-poster { border: 1px solid var(--rule); box-shadow: 0 40px 80px -30px rgba(0,0,0,0.9); }
    .nsi-poster img { height: auto; }
    .nsi-copy .eyebrow, .nsi-copy .section-title { text-align: left; }
    .nsi-copy .section-title span { display: block; font-size: 0.5em; color: var(--muted-light); margin-top: 10px; }
    .nsi-copy p { margin-top: 24px; color: var(--muted-light); max-width: 58ch; }
    .nsi-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 36px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
    .nsi-stats div { padding: 22px 16px; border-left: 1px solid var(--rule); }
    .nsi-stats div:first-child { border-left: 0; padding-left: 0; }
    .nsi-stats b { display: block; font: 400 clamp(34px, 4vw, 52px)/1 var(--display); color: var(--white); }
    .nsi-stats span { display: block; margin-top: 8px; font-size: 13px; color: var(--muted-light); line-height: 1.4; }
    .nsi-copy .btn-row { justify-content: flex-start; }
    .nsi-stills button { aspect-ratio: 2 / 1; padding: 0; border: 0; background: var(--surface); cursor: zoom-in; }
    .nsi-stills img { transition: filter 0.4s; filter: saturate(0.85); }
    .nsi-stills button:hover img { filter: saturate(1.05); }
    @media (max-width: 900px) {
      .nsi-grid { grid-template-columns: 1fr; gap: 40px; }
      .nsi-poster { max-width: 360px; margin: 0 auto; }
      .nsi-stats { grid-template-columns: 1fr; }
      .nsi-stats div { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); }
      .nsi-stats div:first-child { border-top: 0; }
    }

    /* Awards (rebuilt) */
    .laurel-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 36px 28px; align-items: center; justify-items: center; margin: 56px 0 72px; }
    .laurel-wall figure { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
    .laurel-wall img { width: 100%; max-width: 170px; height: 96px; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.88; }
    .laurel-wall figure.top img { opacity: 1; filter: brightness(0) invert(1) drop-shadow(0 0 18px rgba(196,168,130,0.45)); }
    .awards-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 56px 72px; }
    .award-group h3 { font: 400 26px var(--display); color: var(--white); padding-bottom: 14px; border-bottom: 1px solid var(--rule); margin-bottom: 8px; }
    .award-group ul { list-style: none; }
    .award-group li { padding: 12px 0; border-bottom: 1px solid var(--rule-subtle); font-size: 16px; line-height: 1.45; color: var(--muted-light); }
    .award-group li b { color: var(--white); font-weight: 500; }
    .award-group li em { font-style: normal; color: var(--accent); }
    .award-group.wide { grid-column: 1 / -1; }
    @media (max-width: 768px) { .awards-cols { grid-template-columns: 1fr; } .laurel-wall { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; } }

    /* Recent news */
    #news { border-top: 1px solid var(--rule); }
    .news-list { display: flex; flex-direction: column; gap: 1px; background: var(--rule); margin-top: 56px; border: 1px solid var(--rule); }
    .news-item { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; padding: 48px; background: var(--black); align-items: center; }
    .news-item time { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }
    .news-item h3 { font: 400 clamp(26px, 3vw, 38px)/1.15 var(--display); color: var(--white); margin: 14px 0 16px; }
    .news-item p { color: var(--muted-light); }
    .news-item .press-link { margin-top: 24px; }
    .news-media { display: grid; grid-template-columns: 2fr 1fr; gap: 6px; }
    .news-media img { aspect-ratio: 4 / 5; }
    .news-media img:first-child { grid-row: span 2; aspect-ratio: auto; }
    .news-embed { display: flex; justify-content: center; }
    .news-embed .instagram-media { min-width: 280px !important; max-width: 420px !important; width: 100% !important; margin: 0 !important; }
    @media (max-width: 900px) { .news-item { grid-template-columns: 1fr; padding: 32px 20px; gap: 28px; } }

    /* Press clippings */
    .clip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 56px; }
    .clip { display: flex; flex-direction: column; background: var(--black); border: 1px solid var(--rule); transition: border-color 0.3s, transform 0.4s var(--ease-out); }
    .clip:hover { border-color: var(--accent); transform: translateY(-4px); }
    .clip-img { aspect-ratio: 4 / 3; overflow: hidden; background: #fff; }
    .clip-img img { object-position: top center; }
    .clip-body { padding: 22px 22px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
    .clip-body h3 { font: 400 20px/1.3 var(--display); color: var(--white); }
    .clip-body .press-link { margin-top: auto; padding-top: 8px; }
    .clip-quote { font-size: 15px; color: var(--muted-light); }
    .clip.text-only .clip-img { display: none; }
    @media (max-width: 1024px) { .clip-grid { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 640px) { .clip-grid { grid-template-columns: 1fr; } }

    /* Headshots: six looks, captioned */
    .headshot-item figcaption {
      position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 14px; font-size: 12px; letter-spacing: 0.18em;
      text-transform: uppercase; color: var(--white); background: linear-gradient(to top, rgba(11,11,11,0.85), transparent);
    }
    #headshots .btn-row { margin-top: 40px; }
    @media (max-width: 768px) { #headshots .btn-row { margin-bottom: 64px; } }

    /* Gallery */
    #gallery { border-top: 1px solid var(--rule); }
    #gallery .tab-filters { margin: 32px auto 40px; width: max-content; max-width: 100%; overflow-x: auto; }
    .masonry { columns: 4 240px; column-gap: 8px; }
    .masonry button { display: block; width: 100%; margin: 0 0 8px; padding: 0; border: 0; background: var(--surface); break-inside: avoid; cursor: zoom-in; overflow: hidden; }
    .masonry img { height: auto; transition: transform 0.6s var(--ease-out), filter 0.4s; filter: saturate(0.9); }
    .masonry button:hover img { transform: scale(1.03); filter: saturate(1.05); }
    .lightbox { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 94vh; margin: auto; }
    .lightbox::backdrop { background: rgba(5,5,5,0.94); }
    .lightbox img { max-width: 96vw; max-height: 86vh; width: auto; height: auto; object-fit: contain; }
    .lightbox p { text-align: center; color: var(--muted-light); font-size: 14px; margin-top: 10px; }
    .lightbox-close { position: fixed; top: 16px; right: 16px; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--rule); background: var(--black); color: var(--white); font-size: 22px; }

    /* Brands */
    #brands { border-top: 1px solid var(--rule); padding-bottom: 96px; }
    .brand-marquee { overflow: hidden; margin-top: 48px; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
    .brand-track { display: flex; width: max-content; animation: laurelScroll 40s linear infinite; }
    .brand-marquee:hover .brand-track { animation-play-state: paused; }
    .brand { flex: none; padding: 0 40px; border-left: 1px solid var(--rule); text-align: center; }
    .brand b { display: block; font: 400 clamp(28px, 3.4vw, 44px)/1.1 var(--display); color: var(--white); white-space: nowrap; }
    .brand span { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted-light); }
    @media (prefers-reduced-motion: reduce) { .brand-track { animation: none; } .brand-marquee { overflow-x: auto; } }

    /* Display face (Questrial) set in caps, keeping the brand's all-caps style */
    .section-title, .clip-body h3, .news-item h3, .award-group h3, .film-card-title, .brand b, .spotlight-name,
    .mobile-menu a, .footer-name { text-transform: uppercase; }
    .contact-email, .contact-phone { font-family: var(--sans); }
    .clip-img.fit img { object-fit: contain; object-position: center; }

    .mobile-menu { gap: 18px; }
    .mobile-menu a.mobile-link { font-size: clamp(26px, 7vw, 34px); }

    /* Contact extras */
    .contact-phone { font: 400 20px var(--display); color: var(--white); }
    .contact-phone:hover, .contact-email:hover { color: var(--accent); }
  

/* ===================================================
   CASTING REVISION — hero text, recognition, about, headshot downloads, form states
=================================================== */
.hero-title { font: 400 clamp(44px, 9vw, 112px)/1 var(--display); letter-spacing: 0.01em; opacity: 0; animation: fadeUp 1.1s var(--ease-out) 0.2s forwards; }
.hero-role { margin-top: 14px; font-size: 14px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--accent); opacity: 0; animation: fadeUp 1s var(--ease-out) 0.4s forwards; }
.hero-meta { margin-top: 22px; font-size: 16px; letter-spacing: 0.08em; color: var(--white); opacity: 0; animation: fadeUp 1s var(--ease-out) 0.6s forwards; }
/* v4.1 hero: fits the smallest viewport (svh) so the reel pill is on the first screen; pill > casting > résumé link */
#hero, #hero .hero-text { min-height: 100vh; min-height: 100svh; }
#hero .btn-row .btn { min-height: 52px; }
.hero-resume { flex-basis: 100%; display: inline-flex; align-items: center; justify-content: inherit; min-height: 44px; font-size: 14px; letter-spacing: 0.08em; color: var(--muted-light); text-decoration: underline; text-underline-offset: 4px; }
.hero-resume:hover, .hero-resume:focus-visible { color: var(--accent); }
#reels { scroll-margin-top: 80px; }
@media (max-width: 600px) { #hero .btn-row .btn { flex: 1 1 100%; max-width: 360px; } #hero .hero-text { padding-bottom: max(28px, env(safe-area-inset-bottom)); } }
@media (prefers-reduced-motion: reduce) { .hero-title, .hero-role, .hero-meta { opacity: 1; animation: none; } }

.cta-row { margin-top: 40px; }

/* Headshot downloads */
.headshot-item figcaption { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.headshot-item figcaption a { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); padding: 10px 0; min-height: 44px; display: inline-flex; align-items: center; }
.headshot-item figcaption a:hover, .headshot-item figcaption a:focus-visible { text-decoration: underline; }
#headshots .btn-row { margin-top: 40px; padding-inline: 24px; }
#headshots .btn-row .btn { white-space: normal; text-align: center; max-width: 100%; }

/* About */
.about-inner { max-width: 760px; text-align: left; }
.about-bio { font-size: 19px; line-height: 1.75; color: var(--white); margin-top: 24px; }
.about-more { margin-top: 20px; color: var(--muted-light); }
.about-more a, .about-bio a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* Selected recognition */
#recognition .section-title .title-sub, #awards .section-title .title-sub { display: block; font-size: 0.5em; color: var(--muted-light); margin-top: 8px; }
.rec-role { margin-top: 12px; color: var(--muted-light); text-align: center; }
.rec-honors, .rec-screenings { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 48px 40px; margin-top: 56px; }
.rec-item { display: flex; flex-direction: column; align-items: center; text-align: center; width: min(300px, 100%); }
.rec-item img { width: auto; height: 130px; max-width: 100%; object-fit: contain; }
.rec-item img.mono { filter: invert(1); }
.rec-item p { margin-top: 6px; }
.rec-result { margin-top: 20px !important; font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent); }
.rec-cat { font-size: 17px; color: var(--white); line-height: 1.35; }
.rec-fest { font-size: 15px; color: var(--muted-light); }
.rec-when { font-size: 14px; color: var(--muted-light); }
.rec-sub { margin: 72px 0 0; font: 400 12px var(--sans); letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted-light); text-align: center; }
.rec-screenings { margin-top: 28px; gap: 32px; }
.rec-item.small { width: min(240px, 100%); }
.rec-item.small img { height: 84px; }
.rec-item.small .rec-fest { margin-top: 14px; color: var(--white); }
.rec-item.small .rec-cat { font-size: 14px; color: var(--muted-light); }
.rec-all { margin-top: 56px; text-align: center; }
.btn-lg { padding: 20px 48px; font-size: 1rem; letter-spacing: .14em; }

/* Contact form states */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-status { min-height: 1.5em; margin-top: 14px; font-size: 15px; }
.form-status.ok { color: var(--accent); }
.form-status.err { color: #ff8a80; }
.form-status a { text-decoration: underline; }
.form-submit:disabled { opacity: 0.6; cursor: progress; }

/* Keyboard focus */
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Archive pages */
.archive { padding-top: 120px; min-height: 80vh; }
.archive .section-inner { text-align: left; }
.archive .section-title { text-align: left; margin-top: 8px; }
.arch-lead { margin-top: 16px; color: var(--muted-light); }
.arch-note { margin: 10px 0 0; font-size: 14px; color: var(--muted-light); }
.archive .awards-cols { margin-top: 56px; }
@media (max-width: 800px) { .awards-cols { grid-template-columns: 1fr; gap: 40px; } }

/* Selected screen work */
.sw-card { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; padding: 16px; background: var(--surface); border: 1px solid var(--rule); text-align: left; transition: border-color .3s, transform .4s var(--ease-out); }
a.sw-card:hover, a.sw-card:focus-visible { border-color: var(--accent); transform: translateY(-3px); }
.sw-poster { aspect-ratio: 2 / 3; background: var(--surface-2); overflow: hidden; }
.sw-poster img { width: 100%; height: 100%; object-fit: cover; }
.sw-fmt { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }
.sw-body h3 { font: 400 22px/1.15 var(--display); margin-top: 6px; }
.sw-role { margin-top: 6px; color: var(--white); font-size: 16px; }
.sw-line { color: var(--muted-light); font-size: 14px; line-height: 1.4; margin-top: 4px; }
.sw-body .press-link { display: inline-block; margin-top: 12px; }

/* Reel picker */
.reel-groups { max-width: 1100px; margin: 32px auto 0; display: grid; gap: 28px; text-align: left; }
.reel-group h3 { font: 400 12px var(--sans); letter-spacing: 0.25em; text-transform: uppercase; color: var(--muted-light); margin-bottom: 12px; }
.reel-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.reel-opt { display: flex; gap: 12px; align-items: center; padding: 8px; min-height: 64px; text-align: left; background: var(--surface); border: 1px solid var(--rule-subtle); color: var(--muted-light); font: inherit; cursor: pointer; }
.reel-opt img { width: 96px; height: 54px; flex: none; object-fit: cover; object-position: 50% 50%; background: var(--surface-2); }
.reel-opt b { display: block; color: var(--white); font-weight: 500; }
.reel-opt span { font-size: 14px; line-height: 1.3; }
.reel-opt:hover, .reel-opt.active { border-color: var(--accent); }
.reel-opt.active b { color: var(--accent); }
.reel-opt img.noimg { visibility: hidden; }
@media (max-width: 640px) {
  .reel-list { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .reel-opt { flex-direction: column; align-items: stretch; padding: 6px; }
  .reel-opt img { width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .reel-opt span { padding: 2px 4px 6px; font-size: 13px; }
}

/* Tap targets: at least 44px tall for standalone text links */
.press-link, .social-item, .footer-imdb a, .about-more a { display: inline-flex; align-items: center; min-height: 44px; }
.nav-logo { display: inline-flex; align-items: center; min-height: 44px; }
.rec-all, .archive .section-inner > p:first-child { line-height: 1; }
.footer-imdb a { padding: 0 4px; }

/* Hero media: a clear headshot on phones (no video download); silent loop on desktop */
.hero-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
@media (max-width: 768px) { #hero .hero-image::before { background: linear-gradient(to top, rgba(11,11,11,0.97) 0%, rgba(11,11,11,0.8) 34%, rgba(11,11,11,0.05) 62%, rgba(11,11,11,0.35) 100%); } }

/* Contrast: footer text was #6E6B66 on near-black (3.7:1) */
footer, footer a, .footer-name, .footer-copy, .footer-imdb a { color: var(--muted-light); }

/* Desktop hero: copy on the left, face on the right, so the name never covers the face */
@media (min-width: 900px) {
  #hero .hero-text { align-items: flex-start; text-align: left; justify-content: center; max-width: 52%; padding: 120px 0 96px 7vw; }
  #hero .hero-title { font-size: clamp(56px, 6.4vw, 104px); }
  #hero .btn-row { justify-content: flex-start; }
  #hero .hero-image { left: auto; width: 62%; -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 34%); mask-image: linear-gradient(to right, transparent 0%, #000 34%); }
  #hero .hero-image::before { background: linear-gradient(to top, rgba(11,11,11,0.55) 0%, transparent 40%); }
  .hero-still { object-position: 50% 14%; }
}

/* Media kit: Instagram Insights-style panel (patterns only: no Instagram logo, wordmark or fonts) */
.ig { --igbg:#000; --igcard:#121212; --igline:#262626; --igmute:#a8a8a8; --igblue:#0095f6; --iggreen:#2ecc71;
  margin-top: 40px; padding: 24px; background: var(--igbg); border: 1px solid var(--igline); border-radius: 22px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color: #fff; }
.ig-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding-bottom: 20px; }
.ig-id { display: flex; align-items: center; gap: 12px; }
.ig-id b { display: block; font-size: 16px; font-weight: 600; line-height: 1.2; }
.ig-id span:not(.ig-avatar) { font-size: 13px; color: var(--igmute); }
.ig-avatar { width: 52px; height: 52px; border-radius: 50%; padding: 2px; background: linear-gradient(45deg, #fcb045, #fd1d1d 50%, #833ab4); flex: none; }
.ig-avatar img { border-radius: 50%; border: 2px solid #000; object-position: 50% 20%; }
.ig-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.ig-pill { background: #262626; border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 600; }
.ig-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 14px; }
.ig-card { background: var(--igcard); border: 1px solid var(--igline); border-radius: 16px; padding: 20px; text-align: left; }
.ig-card h2 { font: 600 15px/1.2 inherit; font-family: inherit; margin: 0 0 14px; color: #fff; letter-spacing: 0; text-transform: none; }
.ig-big { font-size: clamp(44px, 7vw, 68px); font-weight: 700; line-height: 1; letter-spacing: -.02em; margin: 0; }
.ig-big.sm { font-size: 34px; margin-top: 4px; }
.ig-sub { margin: 8px 0 14px; color: var(--igmute); font-size: 14px; line-height: 1.4; }
.ig-delta { font-weight: 700; } .ig-delta.up { color: var(--iggreen); }
.ig-note { margin: 12px 0 0; font-size: 12px; color: var(--igmute); line-height: 1.45; }
.ig-donut-wrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.ig-donut { width: 112px; height: 112px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: conic-gradient(#fd1d1d 0 96%, #3a3a3a 96% 100%); position: relative; }
.ig-donut::before { content: ''; position: absolute; inset: 14px; border-radius: 50%; background: var(--igcard); }
.ig-donut span { position: relative; font-size: 22px; font-weight: 700; }
.ig-legend { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: 14px; }
.ig-legend li { display: flex; align-items: center; gap: 8px; } .ig-legend b { margin-left: auto; padding-left: 12px; }
.ig-legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } .ig-legend .d1 { background: #fd1d1d; } .ig-legend .d2 { background: #3a3a3a; }
.ig-chartcard { grid-column: 1 / -1; }
.ig-chart { width: 100%; height: auto; display: block; }
.ig-val { fill: #fff; font: 600 13px -apple-system, system-ui, sans-serif; }
.ig-axis { fill: #a8a8a8; font: 500 12px -apple-system, system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.ig-nodata { fill: #777; font: 500 11px -apple-system, system-ui, sans-serif; }
.ig-disclaimer { margin: 18px 4px 0; font-size: 12px; color: var(--igmute); }
.mk-h { font: 400 26px var(--display); margin: 72px 0 12px; text-align: left; }
.mk-list { padding-left: 20px; color: var(--muted-light); display: grid; gap: 8px; margin-bottom: 40px; text-align: left; }
@media (max-width: 800px) { .ig-grid { grid-template-columns: 1fr; } .ig { padding: 16px; } }
.archive .eyebrow { text-align: left; display: block; margin-top: 8px; }

/* Landing-page audience strip: quiet editorial style, static (no scroll animation) */
#audience .aud-sub { text-align: center; color: var(--muted-light); margin-top: 12px; }
.aud-nums { display: grid; grid-template-columns: repeat(4, 1fr); margin: 48px auto 0; max-width: 960px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.aud-nums div { padding: 28px 16px; text-align: center; border-left: 1px solid var(--rule); }
.aud-nums div:first-child { border-left: 0; }
.aud-nums b { display: block; font: 400 clamp(32px, 4vw, 52px)/1 var(--display); color: var(--white); }
.aud-nums span { display: block; margin-top: 10px; font-size: 13px; color: var(--muted-light); line-height: 1.4; }
.aud-chart { display: block; width: 100%; max-width: 960px; height: auto; margin: 40px auto 0; overflow: visible; }
.aud-chart .grid { stroke: var(--rule-subtle); }
.aud-chart .area { fill: url(#audFill); }
.aud-chart .line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; }
.aud-chart .line.gap { stroke-dasharray: 3 8; opacity: .6; }
.aud-chart .dot { fill: var(--black); stroke: var(--accent); stroke-width: 2.5; }
.aud-chart .lbl { fill: var(--white); font: 400 20px var(--display); }
.aud-chart .lbl.nodata { fill: var(--muted-light); font: 400 16px var(--sans); }
.aud-chart .mon text { fill: var(--muted-light); font: 400 14px var(--sans); letter-spacing: .18em; }
@media (max-width: 700px) {
  .aud-nums { grid-template-columns: repeat(2, 1fr); }
  .aud-nums div:nth-child(3) { border-left: 0; }
  .aud-nums div:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .aud-chart .lbl { font-size: 28px; } .aud-chart .lbl.nodata { font-size: 24px; } .aud-chart .mon text { font-size: 26px; letter-spacing: .04em; }
}
/* Scroll-driven state (only applied when JS runs and motion is allowed) */
#audience.anim .dot, #audience.anim .lbl[data-x] { opacity: 0; transition: opacity .35s; }
#audience.anim .dot.on, #audience.anim .lbl[data-x].on { opacity: 1; }

/* Locked stretch: the stage sticks to the viewport until the chart has finished drawing */
#audience.scrub { padding: 0; }
#audience.scrub .aud-pin { height: 185vh; }
#audience.scrub .aud-stage { position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; justify-content: center; padding-block: 72px 24px; box-sizing: border-box; }
#audience.scrub .aud-nums { margin-top: 28px; } #audience.scrub .aud-nums div { padding: 20px 12px; }
#audience.scrub .aud-chart { margin-top: 24px; max-height: 34vh; }
#audience.scrub .rec-all { margin-top: 16px; }
@media (max-width: 700px) { #audience.scrub .aud-nums div { padding: 14px 8px; } #audience.scrub .section-title { font-size: clamp(28px, 8vw, 40px); } #audience.scrub .aud-nums { margin-top: 20px; } }

/* Filmography cinema */
.cinema { position: relative; height: 100svh; background: #050505; }
.cinema canvas { width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y; }
.cinema-hint { flex-basis: 100%; font-size: 12px; letter-spacing: .08em; color: #8a857c; }
.cinema-bar { position: absolute; left: 0; right: 0; bottom: 0; padding-bottom: 16px !important; padding-top: 48px !important; background: linear-gradient(transparent, rgba(5,3,3,.85)); display: flex; gap: 12px; align-items: center; justify-content: center; padding: 0 16px; flex-wrap: wrap; text-align: center; }
.cinema-bar #cap { color: var(--white, #f2ede4); max-width: 60ch; }
@media (max-width: 600px) {
  .cinema-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-inline: 16px; }
  .cinema-bar #cap { grid-column: 1 / -1; grid-row: 1; max-width: none; font-size: 14px; }
  .cinema-bar #prev, .cinema-bar #next { grid-row: 2; min-height: 48px; padding: 0; font-size: 22px; }
  .cinema-bar .press-link, .cinema-bar .cinema-hint { grid-column: 1 / -1; }
  .cinema-hint { display: none; }
}
/* YouTube iframe posed in 3D behind the canvas; the canvas cuts a transparent hole where the screen is */
.cinema { isolation: isolate; }
.cinema .screen3d { position: absolute !important; inset: 0; z-index: -1; pointer-events: none; }
#loading { position: absolute; z-index: 2; display: grid; place-items: center; pointer-events: none; }
#loading[hidden] { display: none; }
#loading::after { content: ''; width: 44px; height: 44px; border-radius: 50%; border: 3px solid rgba(242, 237, 228, .2); border-top-color: #c9a36b; animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { #loading::after { animation-duration: 3s; } }

/* ===================================================
   OCT 2026 — brand name in display face, about photo, NSI poster + stills, gallery, shared contact
=================================================== */
.hero-title { text-transform: uppercase; font-size: clamp(36px, 6.4vw, 92px); line-height: 1.04; }
.title-link { color: inherit; text-decoration: none; transition: color 0.3s; }
.title-link:hover, .title-link:focus-visible { color: var(--accent); }
#recognition .nsi-grid { margin-bottom: 24px; }
#recognition .nsi-copy .rec-role { text-align: left; }
#recognition .nsi-copy .btn-row { margin-top: 28px; }
.nsi-poster a { display: block; }
.nsi-stills { margin-top: 28px; }
.clip-img.photo { background: var(--surface); }
.clip-img.photo img { object-position: center; }
.about-inner { max-width: 1100px; display: grid; grid-template-columns: minmax(240px, 420px) 1fr; gap: 64px; align-items: center; }
.about-photo img { height: auto; border: 1px solid var(--rule); }
.about-photo figcaption { margin-top: 8px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-light); }
@media (max-width: 900px) {
  .about-inner { grid-template-columns: 1fr; gap: 36px; }
  .about-photo { max-width: 380px; }
  #recognition .nsi-copy .eyebrow, #recognition .nsi-copy .section-title, #recognition .nsi-copy .rec-role { text-align: center; }
  #recognition .nsi-copy .btn-row { justify-content: center; }
}
.about-text .eyebrow, .about-text .section-title { text-align: left; }

/* ===== AFM update: scroll-only home page ===== */
/* Header: logo 2x, flag language picker */
.nav-logo img { width: 277px; height: auto; }
.nav-links { margin-left: auto; margin-right: 28px; }
.lang-flags { display: flex; gap: 2px; }
.lang-flags button { padding: 8px 5px; background: none; border: 0; border-bottom: 2px solid transparent; opacity: 0.55; transition: opacity 0.3s, border-color 0.3s; }
.lang-flags button:hover, .lang-flags button[aria-pressed="true"] { opacity: 1; }
.lang-flags button[aria-pressed="true"] { border-bottom-color: var(--accent); }
.lang-flags svg { display: block; width: 26px; height: 17px; border-radius: 2px; }
@media (max-width: 1180px) {
  .nav-links { display: none; }
  .hamburger { display: flex; margin-left: 12px; }
  .mobile-menu { display: flex; }
  .lang-flags { margin-left: auto; }
}
@media (max-width: 768px) { .nav-logo img { width: 200px; } #nav, #nav.scrolled { padding-left: 16px; padding-right: 16px; } }
@media (max-width: 420px) { .nav-logo img { width: 150px; } .lang-flags svg { width: 22px; height: 15px; } .lang-flags button { padding: 8px 4px; } }

/* Hero photo sequence */
#hero .hero-image img { position: absolute; inset: 0; opacity: 0; transition: opacity 0.7s ease; object-position: 50% 18%; }
#hero .hero-image img.on { opacity: 1; }
/* Pause/play: always visible; top-right under the header on phones so it never sits on the CTAs */
.hero-pause { cursor: pointer; background: rgba(0,0,0,0.28); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hero-pause > span { display: inline-flex; transition: opacity 150ms ease; }
@media (hover: none) { .hero-pause:hover:not(:focus-visible) { border-color: rgba(240,237,232,0.35); color: var(--white); } }
.hero-pause:hover, .hero-pause:focus-visible { border-color: var(--accent); color: var(--accent); }
.hero-pause:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 899px) { .hero-pause { top: 92px; right: 16px; bottom: auto; } }

/* Awards: all 8 in a 4 x 2 grid beside the poster */
.aw-layout { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 56px; align-items: center; }
.aw-main { text-align: center; }
.aw-grid { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px 24px; margin-top: 40px; }
.aw-grid .rec-item { width: auto; }
.aw-grid img { height: 80px; filter: brightness(0) invert(1); }
.aw-grid .rec-cat { margin-top: 14px; font-size: 15px; }
.aw-grid .rec-fest { font-size: 14px; }
.aw-grid .rec-when { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }
@media (max-width: 900px) {
  .aw-layout { grid-template-columns: 1fr; gap: 32px; }
  .aw-poster { max-width: 240px; margin: 0 auto; }
  .aw-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
  .aw-grid img { height: 64px; }
}

/* Screen work: cards are a rail (see Rails v4.2); every other credit listed as text */
.credits { columns: 4 220px; column-gap: 40px; margin-top: 28px; text-align: left; }
.credit-group { margin-bottom: 32px; }
.credit-group h4 { font: 400 12px var(--sans); letter-spacing: 0.25em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; break-after: avoid; }
.credit-group ul { list-style: none; }
.credit-group li { padding: 5px 0; line-height: 1.3; border-bottom: 1px solid var(--rule-subtle); break-inside: avoid; }
.credit-group b { display: block; color: var(--white); font-weight: 500; font-size: 15px; }
.credit-group li span { color: var(--muted-light); font-size: 13px; }
.credit-group a:hover b { color: var(--accent); }

/* Press: every clip on the page, Deadline first and twice as wide */
.press-all { grid-template-columns: repeat(4, 1fr); gap: 24px; }
.press-all .clip-body h3 { font-size: 18px; }
.clip.feature { grid-column: span 2; }
.clip.feature .clip-img { aspect-ratio: 16 / 9; }
.clip.feature .clip-body h3 { font-size: 26px; }
.masthead { font: 700 36px/1 'Times New Roman', Georgia, serif; letter-spacing: -0.01em; color: var(--white); }
@media (max-width: 1024px) { .press-all { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .credits { columns: 2; column-gap: 20px; } .credit-group b { font-size: 14px; } }
@media (max-width: 640px) { .press-all { grid-template-columns: 1fr; } .clip.feature { grid-column: auto; } }

/* === Readability (v4.2) === */
/* Small labels: 14px everywhere (were 10–12px); bigger type needs less tracking */
.eyebrow, .press-pub, .press-link, .contact-block-label, .form-group label, .form-submit, .tab-btn, .nav-cta,
.sw-fmt, .rec-sub, .reel-group h3, .credit-group h4, .aw-grid .rec-when, .rec-result, .about-photo figcaption,
.headshot-item figcaption, .headshot-item figcaption a, .mobile-socials a, .footer-imdb a { font-size: 0.875rem; letter-spacing: 0.12em; }
.nav-links a { font-size: 0.8125rem; letter-spacing: 0.12em; }
.btn { font-size: 0.875rem; letter-spacing: 0.12em; }
.credit-group li span, .aud-nums span, .nsi-stats span, .footer-copy, .footer-name,
.ig-note, .ig-disclaimer, .ig-id span:not(.ig-avatar), .ig-pill, .reel-opt span { font-size: 0.875rem; }
.social-item, .form-group input, .form-group textarea,
.form-group input::placeholder, .form-group textarea::placeholder { font-size: 1rem; }
.lightbox p { font-size: 1rem; }

@media (max-width: 640px) {
  body { line-height: 1.6; }
  .about-bio { font-size: 1.125rem; line-height: 1.6; }
  .btn, .form-submit { font-size: 1rem; letter-spacing: 0.08em; white-space: normal; text-align: center; }
  .hero-role { letter-spacing: 0.2em; }
  .headshot-item figcaption, .headshot-item figcaption a { letter-spacing: 0.08em; }
  /* Awards: the "8× Best Actor" label leads, the film title sits under it */
  #awards .eyebrow { font-size: clamp(28px, 8vw, 36px); letter-spacing: 0.06em; line-height: 1.15; }
  #awards .section-title { font-size: clamp(26px, 7.5vw, 30px); }
  #awards .section-title .title-sub { font-size: 1rem; }
  /* Chart labels are SVG units (viewBox 1000 wide): ~44 units ≈ 14px at a 320px-wide chart */
  .aud-chart .lbl { font-size: 44px; } .aud-chart .lbl.nodata { font-size: 40px; } .aud-chart .mon text { font-size: 44px; letter-spacing: 0; }
}

/* === Rails (v4.2) === */
/* Swipe rows: native horizontal scroll + snap. rail.js adds the count and prev/next buttons; without JS it is still a scrollable row. */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.rail { --rail-cols: 4; --rail-gap: 16px; margin-top: 40px; }
#headshots .rail { max-width: 1240px; margin-inline: auto; }
#recognition .rail { --rail-cols: 3; margin-top: 28px; }
.rail-head { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-bottom: 12px; }
.rail-head[hidden] { display: none; }
.rail-hint { display: none; margin-right: auto; font-size: 0.875rem; letter-spacing: 0.08em; color: var(--muted-light); }
.rail-count { font-size: 0.875rem; letter-spacing: 0.08em; color: var(--muted-light); font-variant-numeric: tabular-nums; }
.rail-btns { display: flex; gap: 8px; }
.rail-btn { width: 44px; height: 44px; display: inline-grid; place-items: center; padding: 0; border-radius: 50%; border: 1px solid var(--rule); background: none; color: var(--white); transition: border-color .3s, color .3s; }
.rail-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.rail-btn:disabled { opacity: 0.3; cursor: default; }
.rail .rail-track {
  display: flex; gap: var(--rail-gap); margin: 0; padding-block: 6px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  scrollbar-width: thin; scrollbar-color: var(--rule) transparent; background: none;
}
.rail .rail-track > * { flex: 0 0 calc((100% - (var(--rail-cols) - 1) * var(--rail-gap)) / var(--rail-cols)); min-width: 0; scroll-snap-align: start; }
.rail .rail-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
/* Press: every card the same size inside the rail */
.rail .clip.feature .clip-img { aspect-ratio: 4 / 3; }
.rail .clip.feature .clip-body h3 { font-size: 20px; }
/* Gallery rail tiles */
.gallery-rail button { padding: 0; border: 0; background: var(--surface); aspect-ratio: 4 / 5; overflow: hidden; cursor: zoom-in; }
.gallery-rail img { transition: transform 0.6s var(--ease-out); }
.gallery-rail button:hover img { transform: scale(1.03); }
@media (max-width: 1024px) {
  .rail { --rail-cols: 3; }
  #recognition .rail { --rail-cols: 2; }
}
@media (max-width: 768px) {
  .rail-hint { display: block; }
  /* One card plus a peek of the next; first card lines up with the 24px page gutter */
  .rail .rail-track { gap: 12px; margin-inline: -24px; padding-inline: 24px; scroll-padding-inline: 24px; scrollbar-width: none; }
  .rail .rail-track::-webkit-scrollbar { display: none; }
  .rail .rail-track > * { flex: 0 0 82%; max-width: 420px; }
}
@media (prefers-reduced-motion: reduce) { .rail .rail-track { scroll-behavior: auto; } }

/* === Checklist 2026-10-31 === */
/* Readable hierarchy: sub-heads (.rec-sub: More credits, Stills, gallery albums) big and bold; credit text ≥17px phone / 18px desktop; category heads bold */
.rec-sub { font: 700 clamp(20px, 5vw, 26px)/1.25 var(--sans); letter-spacing: 0.1em; color: var(--white); }
.credit-group h4 { font: 700 20px/1.3 var(--sans); letter-spacing: 0.08em; margin-bottom: 10px; }
.credit-group li { line-height: 1.5; padding: 7px 0; }
.credit-group b { font-size: 18px; }
.credit-group li span { font-size: 17px; }
.award-group li { font-size: 18px; line-height: 1.5; }
/* Remaining sub-14px labels */
.news-item time, .cinema-hint { font-size: 0.875rem; }
@media (max-width: 640px) {
  .credit-group h4 { font-size: 18px; }
  .credit-group b, .credit-group li span, .award-group li { font-size: 17px; }
}
/* Reels: "Reels" eyebrow and the group heads (Acting reels, Action & stage combat, Other skills) lead the section */
#reels .section-inner > .eyebrow { font-size: 19px; font-weight: 700; letter-spacing: 0.12em; }
.reel-group h3 { font: 700 clamp(22px, 5.6vw, 26px)/1.25 var(--sans); letter-spacing: 0.06em; color: var(--white); margin-bottom: 14px; }
/* Reel descriptions (kind · length): bigger and brighter. #CFCCC8 on the card's #141414 = 11.5:1 (WCAG AA needs 4.5:1) */
.reel-opt .reel-desc { display: block; margin-top: 2px; font-size: 17px; line-height: 1.35; color: #CFCCC8; }
@media (max-width: 640px) { .reel-opt .reel-desc { font-size: 16px; } }