:root {
      --bg: #151c2b;
      --fg: #f5f7fb;
      --muted: rgba(255,255,255,0.78);
      --line: rgba(255,255,255,0.12);
      --panel-solid: #0d1119;
      --accent: #b9d955;
      --nav-height: 92px;

      --menu-font-size: 0.9rem;
      --hero-kicker-size: 0.78rem;
      --hero-title-size: clamp(2.8rem, 8vw, 6.4rem);
      --hero-text-size: clamp(1rem, 1rem, 1rem);
      --section-title-size: clamp(1.4rem, 1.4rem, 1.4rem);
      --section-text-size: .9rem;
      --footer-font-size: 0.75rem;
      --section-overlay-width: 760px;
      --fade-speed: 900ms;
    }

    * { box-sizing: border-box; }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: var(--nav-height);
    }

    body {
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
      background: var(--bg);
      color: var(--fg);
      overflow-x: hidden;
    }

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

    .top-bar {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      padding: 18px 34px;
      background: linear-gradient(to bottom, rgba(0,0,0,0.48), rgba(0,0,0,0.08));
      border-bottom: 0;
    }

    .logo-link {
      position: relative;
      z-index: 2;
      display: inline-flex;
      align-items: center;
      flex: 0 0 auto;
    }

    .logo-image {
      display: block;
      height: 54px;
      width: auto;
      object-fit: contain;
    }

    .services-list {
      width: fit-content;
      margin: 6px auto 0;
      padding-left: 22px;
      text-align: left;
      color: var(--muted);
      font-size: var(--section-text-size);
      line-height: 1.5;
    }

    .services-list li {
      padding-left: 4px;
    }

    .top-menu {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 34px;
      flex-wrap: wrap;
      margin: 0 auto;
      padding: 0;
    }

    .top-menu a {
      letter-spacing: 0.42em;
      text-transform: uppercase;
      font-family: "Helvetica Neue", Arial, sans-serif;
      font-size: var(--menu-font-size);
      color: rgba(255,255,255,0.92);
      transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s ease;
      position: relative;
      padding-bottom: 5px;
      white-space: nowrap;
    }

    .top-menu a::after {
      display: none;
    }

    .top-menu a:hover,
    .top-menu a.active {
      color: white;
      transform: translateY(-1px);
    }

    .nav-spacer {
      width: 120px;
      flex: 0 0 auto;
    }

    .video-stage {
      position: relative;
      min-height: 500vh;
      background: #000;
    }

    .video-stack {
      position: sticky;
      top: 0;
      height: 100vh;
      overflow: hidden;
      background: #000;
    }

    .video-layer {
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity var(--fade-speed) ease;
      pointer-events: none;
    }

    .video-layer.active {
      opacity: 1;
    }

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

    .video-layer::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(to bottom, rgba(0,0,0,0.48), rgba(0,0,0,0.20) 35%, rgba(0,0,0,0.62)),
        radial-gradient(circle at center, rgba(255,255,255,0.04), rgba(0,0,0,0.28) 65%);
      pointer-events: none;
    }

    .content-layer {
      position: absolute;
      inset: 0;
      z-index: 5;
      pointer-events: none;
    }

    .content-panel {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: calc(var(--nav-height) + 60px) 34px 80px;
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 650ms ease, transform 650ms ease;
      pointer-events: none;
    }

    .content-panel.active {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    .content-inner {
      width: min(var(--section-overlay-width), 100%);
      text-align: center;
    }

    .hero-kicker,
    .section-kicker {
      margin: 0 0 14px;
      color: rgba(255,255,255,0.82);
      text-transform: uppercase;
      letter-spacing: 0.35em;
      font-size: var(--hero-kicker-size);
    }

    .content-panel[data-panel="contact"] .section-kicker {
      color: var(--accent);
    }

    .content-panel h1,
    .content-panel h2 {
      margin: 0;
      font-size: var(--hero-title-size);
      line-height: 0.95;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      text-shadow: 0 12px 30px rgba(0,0,0,0.4);
    }

    .content-panel h2 {
      color: var(--accent);
      font-size: var(--section-title-size);
      letter-spacing: 0.16em;
      line-height: 1.02;
    }

    .content-panel p {
      margin: 18px auto 0;
      max-width: 820px;
      font-size: var(--hero-text-size);
      line-height: 1.6;
      color: var(--muted);
    }

    .content-panel.section-panel p {
      font-size: var(--section-text-size);
      max-width: 760px;
    }

    /* WORK PROJECT / IMDb POSTER STRIP */
    .work-inner {
      width: min(1200px, 100%);
      height: 100%;
      display: grid;
      grid-template-rows: 1fr auto;
      align-items: center;
    }

    .work-copy {
      width: min(760px, 100%);
      margin: 0 auto;
      align-self: end;
      text-align: center;
    }

    .project-strip {
      width: 100%;
      display: flex;
      justify-content: center;
      gap: 16px;
      margin-top: 28px;
      padding: 4px 4px 10px;
      overflow-x: auto;
      overscroll-behavior-x: contain;
      scrollbar-width: thin;
      pointer-events: auto;
    }

    .project-poster {
      position: relative;
      flex: 0 0 112px;
      color: white;
      text-align: left;
      transition: transform 220ms ease, opacity 220ms ease;
    }

    .project-poster:hover {
      transform: translateY(-7px);
    }

    .project-poster img {
      display: block;
      width: 112px;
      height: 168px;
      object-fit: cover;
      border-radius: 3px;
      border: 1px solid rgba(255,255,255,0.22);
      box-shadow: 0 12px 28px rgba(0,0,0,0.42);
      background: rgba(255,255,255,0.06);
    }

    .project-title {
      display: block;
      margin-top: 8px;
      overflow: hidden;
      color: rgba(255,255,255,0.86);
      font-size: 0.72rem;
      line-height: 1.25;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .imdb-badge {
      position: absolute;
      top: 7px;
      right: 7px;
      padding: 3px 5px;
      border-radius: 2px;
      background: #f5c518;
      color: #111;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 0.58rem;
      font-weight: 800;
      letter-spacing: 0.02em;
      line-height: 1;
      box-shadow: 0 3px 10px rgba(0,0,0,0.35);
    }

    .scroll-indicator {
      position: absolute;
      left: 50%;
      bottom: 28px;
      transform: translateX(-50%);
      z-index: 20;
      color: rgba(255,255,255,0.72);
      text-transform: uppercase;
      letter-spacing: 0.24em;
      font-size: 0.76rem;
      pointer-events: none;
    }

    .scroll-sections {
      position: absolute;
      inset: 0;
      z-index: 10;
      pointer-events: none;
    }

    .scroll-snap {
      height: 100vh;
      scroll-margin-top: 0;
    }

    .footer {
      padding: 40px 24px 60px;
      text-align: center;
      color: rgba(255,255,255,0.55);
      border-top: 1px solid var(--line);
      background: var(--panel-solid);
      font-size: var(--footer-font-size);
    }

    /* SUPERVISOR REELS */
    .reels-page {
      min-height: 100vh;
      background:
        radial-gradient(circle at top, rgba(142,197,255,0.12), transparent 40%),
        #000;
    }

    .reels-page .top-bar {
      background: linear-gradient(to bottom, rgba(0,0,0,0.88), rgba(0,0,0,0.48));
    }

    .reels-main {
      width: min(1100px, 100%);
      margin: 0 auto;
      padding: calc(var(--nav-height) + 70px) 34px 90px;
    }

    .reels-intro {
      margin-bottom: 64px;
      text-align: center;
    }

    .reels-intro h1 {
      margin: 0;
      color: var(--accent);
      font-size: clamp(2rem, 6vw, 4.6rem);
      line-height: 1;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      text-shadow: 0 12px 30px rgba(0,0,0,0.4);
    }

    .reels-intro p {
      margin: 18px auto 0;
      color: var(--muted);
      font-size: var(--hero-text-size);
      line-height: 1.6;
    }

    .reels-list {
      display: grid;
      gap: 60px;
    }

    .reel {
      text-align: center;
    }

    .reel h2 {
      margin: 0;
      color: var(--accent);
      font-size: var(--section-title-size);
      letter-spacing: 0.08em;
      line-height: 1.35;
    }

    .reel-description {
      margin: 10px auto 18px;
      max-width: 820px;
      color: var(--muted);
      font-size: var(--section-text-size);
      line-height: 1.6;
    }

    .reel h2 + video {
      margin-top: 18px;
    }

    .reel video {
      display: block;
      width: 100%;
      max-height: 75vh;
      margin-right: auto;
      margin-left: auto;
      border: 1px solid rgba(255,255,255,0.18);
      border-radius: 4px;
      background: #000;
      box-shadow: 0 18px 50px rgba(0,0,0,0.55);
    }

    @media (max-width: 980px) {
      :root {
        --nav-height: 92px;
        --menu-font-size: 0.82rem;
        --section-text-size: 0.95rem;
        --section-title-size: clamp(1.2rem, 3vw, 1.8rem);
      }

      .top-bar {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 18px 18px;
        gap: 18px;
      }

      .nav-spacer {
        display: none;
      }

      .top-menu {
        justify-content: flex-end;
        gap: 18px;
        flex-wrap: nowrap;
        overflow-x: auto;
        margin: 0;
        margin-left: auto;
        max-width: calc(100vw - 120px);
        scrollbar-width: none;
      }

      .top-menu::-webkit-scrollbar {
        display: none;
      }

      .logo-image {
        height: 46px;
      }

      .content-panel {
        padding: calc(var(--nav-height) + 40px) 22px 70px;
      }

      .reels-main {
        padding-right: 22px;
        padding-left: 22px;
      }
    }

    @media (max-width: 640px) {
      :root {
        --nav-height: 92px;
        --menu-font-size: 0.78rem;
        --hero-title-size: clamp(2.1rem, 10vw, 4rem);
        --hero-text-size: 0.98rem;
        --section-title-size: clamp(1.15rem, 6vw, 1.6rem);
        --section-text-size: 0.92rem;
        --footer-font-size: 0.88rem;
      }

      .top-bar {
        padding: 14px 14px;
      }

      .top-menu a {
        letter-spacing: 0.14em;
      }

      .logo-image {
        height: 40px;
      }

      .content-panel p {
        line-height: 1.55;
      }

      .reels-main {
        padding-top: calc(var(--nav-height) + 50px);
        padding-right: 14px;
        padding-bottom: 64px;
        padding-left: 14px;
      }

      .reels-intro {
        margin-bottom: 48px;
      }

      .reels-list {
        gap: 48px;
      }

      .work-inner {
        width: 100%;
      }

      .project-strip {
        justify-content: flex-start;
        gap: 12px;
      }

      .project-poster {
        flex-basis: 88px;
      }

      .project-poster img {
        width: 88px;
        height: 132px;
      }

      .project-title {
        max-width: 88px;
        font-size: 0.66rem;
      }
    }