:root{
    --bg:#0a0a0a;
    --panel:#151517;
    --line:#262629;
    --text:#f5f5f7;
    --muted:#9a9aa0;
    --accent:#f5f5f7;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:-apple-system,BlinkMacSystemFont,'Inter','Helvetica Neue',Arial,sans-serif;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit;text-decoration:none;}
  .container{max-width:1600px;margin:0 auto;padding:0 40px;}
  ::selection{background:#111113;color:#fff;}

  /* FIXED PAGE BACKGROUND — reel loops in place, fully visible, foreground scrolls over it */
  .site-bg{
    position:fixed;top:0;left:0;width:100vw;height:100vh;
    overflow:hidden;z-index:0;pointer-events:none;
    /* Still frame of the reel paints immediately so the hero is never blank
       while the Vimeo player boots up. The video fades in on top of it. */
    background:#0a0a0a url("https://i.vimeocdn.com/video/2140310648-c655fc6a1377eae346de3c98be65e9e892abeb6300ca2b463534d77368aaed5b-d_1280?region=us") center/cover no-repeat;
  }
  .site-bg iframe{
    position:absolute;top:50%;left:50%;
    width:100vw;height:56.25vw;
    min-height:100vh;min-width:177.78vh;
    transform:translate(-50%,-50%);
    pointer-events:none;border:0;
  }

  /* NAV */
  header{
    position:fixed;top:0;left:0;right:0;z-index:100;
    height:250px;
    background:linear-gradient(to bottom, rgba(10,10,10,0.75) 0%, rgba(10,10,10,0.6) 34%, rgba(10,10,10,0) 100%);
    backdrop-filter:blur(16px) saturate(150%);
    -webkit-backdrop-filter:blur(16px) saturate(150%);
    /* The mask is what removes the edge: it tapers the blur and the tint
       together, so the bar dissolves into the reel instead of stopping on a
       line. Dropping it brings the hard edge straight back. */
    -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 34%, transparent 100%);
    mask-image:linear-gradient(to bottom, #000 0%, #000 34%, transparent 100%);
    border-bottom:none;
    pointer-events:none;
  }
  nav{
    display:flex;justify-content:space-between;align-items:center;
    max-width:1600px;margin:0 auto;padding:14px 40px 26px;
    pointer-events:auto;
  }
  .logo{
    display:flex;align-items:center;position:relative;
    padding:6px 10px;border-radius:100px;
    line-height:0;
  }
  .logo img{
    height:54px;width:auto;display:block;
    /* Artwork is black-on-transparent; invert so it reads on the dark nav. */
    filter:invert(1);
  }
  /* Chromatic split via drop-shadow rather than masked pseudo-elements.
     drop-shadow with a zero blur radius casts a hard-edged coloured copy of
     the artwork using the PNG's own alpha channel, so the cyan and magenta
     ghosts take the exact shape of the monogram. This needs no second element,
     no mask, no blend mode - just the image that is already on screen - so
     there is nothing to silently fail. invert(1) stays first in the chain to
     keep the mark white; the shadows are applied to the inverted result. */
  .logo:hover img{animation:glitchLogo .825s cubic-bezier(.3,.1,.3,1) forwards;}
  @keyframes glitchLogo{
    0%{filter:invert(1);transform:translate(0,0);}
    12%{filter:invert(1) drop-shadow(-7px -3px 0 #00e9ff) drop-shadow(7px 3px 0 #ff2d6f);
        transform:translate(2px,-1px);}
    30%{filter:invert(1) drop-shadow(5px 2px 0 #00e9ff) drop-shadow(-5px -2px 0 #ff2d6f);
        transform:translate(-2px,1px);}
    52%{filter:invert(1) drop-shadow(-4px 3px 0 #00e9ff) drop-shadow(4px -3px 0 #ff2d6f);
        transform:translate(2px,1px);}
    74%{filter:invert(1) drop-shadow(3px -2px 0 #00e9ff) drop-shadow(-3px 2px 0 #ff2d6f);
        transform:translate(-1px,0);}
    100%{filter:invert(1);transform:translate(0,0);}
  }
  .navlinks{display:flex;gap:10px;}
  /* Chromatic-aberration glitch: cyan/magenta copies split off the label,
     jitter for a few frames, then snap back into register. */
  .navlinks a{
    position:relative;
    font-size:15px;color:var(--muted);
    padding:11px 19px;border-radius:100px;
    transition:color .25s ease, background .25s ease;
  }
  .navlinks a .txt{position:relative;z-index:2;display:block;}
  .navlinks a::before,
  .navlinks a::after{
    content:attr(data-text);
    position:absolute;left:19px;top:11px;
    z-index:1;opacity:0;pointer-events:none;
    mix-blend-mode:screen;
  }
  .navlinks a::before{color:#00e9ff;}
  .navlinks a::after{color:#ff2d6f;}
  .navlinks a:hover{color:#fff;background:rgba(255,255,255,0.07);}
  .navlinks a:hover::before{animation:glitchCyan .825s cubic-bezier(.3,.1,.3,1) forwards;}
  .navlinks a:hover::after{animation:glitchMag .825s cubic-bezier(.3,.1,.3,1) forwards;}
  @keyframes glitchCyan{
    0%{transform:translate(0,0);opacity:0;}
    15%{transform:translate(-3px,-1px);opacity:.95;}
    35%{transform:translate(2px,1px);opacity:.85;}
    55%{transform:translate(-2px,1px);opacity:.6;}
    75%{transform:translate(1px,-1px);opacity:.35;}
    100%{transform:translate(0,0);opacity:0;}
  }
  @keyframes glitchMag{
    0%{transform:translate(0,0);opacity:0;}
    15%{transform:translate(3px,1px);opacity:.95;}
    35%{transform:translate(-2px,-1px);opacity:.85;}
    55%{transform:translate(2px,-1px);opacity:.6;}
    75%{transform:translate(-1px,1px);opacity:.35;}
    100%{transform:translate(0,0);opacity:0;}
  }

  /* HERO */
  .hero{
    min-height:100vh;
    display:flex;flex-direction:column;justify-content:center;
    padding:150px 40px 100px;
    max-width:1600px;margin:0 auto;
    position:relative;z-index:2;
  }
  .hero-tag{
    font-size:13px;color:#fff;
    letter-spacing:0.3px;margin-bottom:26px;
    display:flex;align-items:center;gap:10px;
    text-shadow:0 1px 4px rgba(0,0,0,0.5);
  }
  .hero-tag .dot{width:7px;height:7px;border-radius:50%;background:#2ecc71;display:inline-block;box-shadow:0 0 8px rgba(46,204,113,0.5);}
  .hero h1{
    font-size:clamp(46px,7.8vw,132px);
    font-weight:800;
    letter-spacing:-4px;
    line-height:0.92;
    color:#fff;
    text-shadow:0 2px 20px rgba(0,0,0,0.35);
  }
  .hero .role{
    margin-top:30px;
    font-size:clamp(17px,2vw,24px);
    color:#f2f2f3;
    max-width:680px;
    font-weight:400;
    letter-spacing:-0.2px;
    text-shadow:0 1px 6px rgba(0,0,0,0.4);
  }
  .hero .role b{color:#fff;font-weight:700;}
  .hero-cta{margin-top:44px;display:flex;gap:14px;flex-wrap:wrap;}
  .btn{
    padding:15px 28px;
    border:1px solid #e6e6e9;
    color:#111113;
    font-size:13px;
    letter-spacing:0.2px;
    font-weight:600;
    border-radius:100px;
    transition:all .25s;
    background:#fff;
  }
  .btn.solid{background:#111113;color:#fff;border-color:#111113;}
  .btn:hover{border-color:#111113;}
  .btn.solid:hover{background:#333336;}

  /* SECTION HEADS */
  /* No hairline rules between sections — they butt against each other on the
     same base colour so the transitions read as continuous. */
  section{padding:120px 0;border-top:none;position:relative;z-index:2;background:var(--bg);}
  .sec-head{
    display:flex;justify-content:space-between;align-items:flex-end;
    margin-bottom:56px;gap:24px;flex-wrap:wrap;
  }
  .sec-head .tag{font-size:12px;color:var(--muted);letter-spacing:2px;text-transform:uppercase;margin-bottom:14px;font-weight:600;}
  .sec-head h2{
    font-size:clamp(32px,5vw,54px);
    font-weight:800;
    letter-spacing:-1.3px;
  }
  .sec-head .count{font-size:13px;color:var(--muted);}

  /* FILM GRID — posters float free of each other, macOS-style */
  .film-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
    gap:28px;
    background:transparent;
    border:0;
    /* Breathing room so the drop shadows aren't clipped by the container. */
    padding:6px 6px 10px;
  }
  .film-card{
    background:#111113;
    position:relative;
    overflow:hidden;
    aspect-ratio:3/4;
    display:flex;
    align-items:flex-end;
    border-radius:16px;
    /* Layered ambient + contact shadow, plus a hairline rim light on the top
       edge — the combination is what reads as "sitting above the page". */
    box-shadow:
      0 1px 2px rgba(0,0,0,0.5),
      0 6px 14px rgba(0,0,0,0.4),
      0 16px 32px rgba(0,0,0,0.34),
      inset 0 1px 0 rgba(255,255,255,0.16),
      inset 0 0 0 1px rgba(255,255,255,0.06);
    transition:transform .55s cubic-bezier(.2,.7,.2,1),
               box-shadow .55s cubic-bezier(.2,.7,.2,1);
    will-change:transform;
  }
  .film-card:hover{
    transform:translateY(-10px) scale(1.019);
    box-shadow:
      0 2px 3px rgba(0,0,0,0.5),
      0 12px 24px rgba(0,0,0,0.45),
      0 28px 52px rgba(0,0,0,0.45),
      inset 0 1px 0 rgba(255,255,255,0.28),
      inset 0 0 0 1px rgba(255,255,255,0.12);
  }
  .film-card img{
    position:absolute;inset:0;
    width:100%;height:100%;object-fit:cover;
    transition:transform .7s cubic-bezier(.2,.6,.2,1), filter .5s ease;
  }
  .film-card:hover img{transform:scale(1.07);filter:brightness(1.12) saturate(1.1);}
  /* Some poster art (Elemental, Encanto) carries its title right at the bottom
     of the artwork, which lands behind the description panel. These render at
     full width in their natural 2:3 ratio and sit raised off the card floor so
     the title clears the panel; the surplus crops off the top, so the card
     stays full-bleed with no letterboxing. */
  .film-card.poster-raise img{
    top:auto;right:auto;left:0;
    bottom:20%;
    width:100%;height:auto;
    /* Anchor the hover zoom to the bottom edge, otherwise scaling from the
       centre would push the title back down under the panel. */
    transform-origin:center bottom;
  }
  .film-card::before{
    content:"";
    position:absolute;left:0;right:0;bottom:0;
    height:55%;
    z-index:1;
    /* Gentle overall darkening toward the bottom of the poster. */
    background:linear-gradient(to top, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 100%);
    transition:opacity .4s ease;
  }
  /* Glass gloss — a fixed specular sheet across the upper-left of each poster,
     the way light sits on a physical card. Brightens slightly on hover. */
  .film-card::after{
    content:"";
    position:absolute;inset:0;
    z-index:3;pointer-events:none;
    background:
      linear-gradient(148deg,
        rgba(255,255,255,0.26) 0%,
        rgba(255,255,255,0.10) 16%,
        rgba(255,255,255,0.02) 33%,
        rgba(255,255,255,0) 48%),
      radial-gradient(130% 55% at 50% -12%,
        rgba(255,255,255,0.20) 0%,
        rgba(255,255,255,0) 65%);
    opacity:.9;
    transition:opacity .5s ease;
  }
  .film-card:hover::after{opacity:1;}
  .film-card.no-poster{background:linear-gradient(135deg,#1c1c1e,#0a0a0a);}
  .film-card-info{
    position:relative;z-index:2;width:100%;padding:19px 20px 20px;
    transform:translateY(0);
    transition:transform .45s cubic-bezier(.2,.7,.2,1);
  }
  .film-card:hover .film-card-info{transform:translateY(-4px);}
  /* Black panel behind the title text, on its own pseudo-element so the top edge
     can be feathered away without fading the text itself.
     bottom is pushed well past the card edge: the info block slides up 6px on
     hover, and if the panel stopped at bottom:0 that lift would peel it off the
     card and expose a hard horizontal edge. The overflow is clipped by the
     card's own overflow:hidden, so the extra height never shows. */
  .film-card-info::before{
    content:"";
    position:absolute;left:0;right:0;bottom:-22px;top:-30px;
    z-index:-1;
    background:rgba(0,0,0,0.82);
    -webkit-mask-image:linear-gradient(to top,
      #000 0%, #000 42%,
      rgba(0,0,0,0.72) 60%,
      rgba(0,0,0,0.36) 76%,
      rgba(0,0,0,0.12) 89%,
      transparent 100%);
    mask-image:linear-gradient(to top,
      #000 0%, #000 42%,
      rgba(0,0,0,0.72) 60%,
      rgba(0,0,0,0.36) 76%,
      rgba(0,0,0,0.12) 89%,
      transparent 100%);
  }
  .film-card .fyear{font-size:11px;color:#e5e5e5;letter-spacing:1px;margin-bottom:5px;font-weight:600;}
  .film-card h3{font-size:18px;font-weight:700;letter-spacing:-0.25px;line-height:1.25;color:#fff;}
  .film-card .fstudio{font-size:11.5px;color:#d0d0d0;margin-top:4px;line-height:1.35;transition:color .35s ease;}
  .film-card:hover .fstudio{color:#fff;}
  .film-card .faward{
    display:inline-block;margin-top:8px;
    font-size:9px;letter-spacing:0.8px;text-transform:uppercase;
    background:#fff;color:#111113;padding:3px 8px;border-radius:100px;font-weight:700;
  }
  .film-card .fstatus{
    display:inline-block;margin-top:8px;
    font-size:9px;letter-spacing:0.8px;text-transform:uppercase;
    background:rgba(255,255,255,0.12);color:#fff;padding:3px 8px;border-radius:100px;font-weight:700;
    border:1px solid rgba(255,255,255,0.3);
  }
  @media (max-width:900px){.film-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px;}}
  @media (max-width:560px){.film-grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:12px;}
   .film-card h3{font-size:13px;} .film-card .fstudio{font-size:9.5px;}}

  /* REEL */
  .reel-wrap{
    position:relative;padding-top:56.25%;
    background:#0a0a0a;
    border:1px solid var(--line);
    border-radius:4px;
    overflow:hidden;
  }
  .reel-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

  /* ABOUT */
  .about-grid{
    display:grid;
    grid-template-columns:420px 1fr;
    gap:64px;
  }
  .about-photo{
    aspect-ratio:1/1;
    overflow:hidden;
    border:none;
    background:transparent;
  }
  .about-photo img{width:100%;height:100%;object-fit:contain;display:block;}
  .about-text p{
    font-size:22px;
    font-weight:400;
    letter-spacing:-0.3px;
    color:#3a3a3d;
    margin-bottom:22px;
    max-width:680px;
  }
  .about-text p b{color:var(--text);font-weight:700;}
  .stat-row{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
    margin-top:48px;
  }
  .stat{background:#fff;padding:26px 22px;}
  .stat .n{font-size:32px;font-weight:800;letter-spacing:-1px;}
  .stat .l{font-size:11px;color:var(--muted);letter-spacing:1px;text-transform:uppercase;margin-top:8px;}
  @media (max-width:800px){
    .about-grid{grid-template-columns:1fr;}
    .about-photo{max-width:320px;}
    .stat-row{grid-template-columns:repeat(2,1fr);}
  }

  /* CONTACT */
  .contact h2{
    font-size:clamp(40px,7vw,88px);
    font-weight:800;
    letter-spacing:-2px;
    max-width:800px;
  }
  .contact .sub{margin-top:22px;color:var(--muted);font-size:21px;max-width:560px;letter-spacing:-0.2px;}

  footer{
    position:relative;
    /* The reel is a fixed layer at z-index 0 and every section paints opaque
       black over it. The footer had no background of its own, so it was the one
       transparent strip on the page and the reel showed through it at the very
       bottom. Matching the sections closes that gap. */
    z-index:2;
    background:#0a0a0a;
    padding:32px 40px;
    text-align:center;
    color:var(--muted);
    font-size:12px;
    border-top:none;
  }
  /* Hairline that dissolves at both ends rather than running edge to edge. */
  footer::before{
    content:"";
    position:absolute;top:0;left:12%;right:12%;
    height:1px;
    background:linear-gradient(to right,
      rgba(255,255,255,0) 0,
      rgba(255,255,255,0.13) 30%,
      rgba(255,255,255,0.13) 70%,
      rgba(255,255,255,0) 100%);
  }

  /* GRADUAL FADE FROM REEL INTO FILMS SECTION */
  #films{
    border-top:none;
    background:transparent;
  }
  /* The tint AND the blur both live on this masked layer. Masking is the key
     bit: a backdrop-filter applied straight to the section starts blurring at
     a hard boundary, which is what read as a line across the top. Fading the
     layer out with a mask ramps the blur in gradually instead.
     Content sits above it, so the text and posters stay perfectly sharp. */
  #films::before{
    content:"";
    position:absolute;inset:0;
    z-index:-1;pointer-events:none;
    background:linear-gradient(to bottom,
      rgba(10,10,10,0) 0,
      rgba(10,10,10,0.86) 520px,
      rgba(10,10,10,0.97) 80%,
      rgba(10,10,10,1) 100%);
    backdrop-filter:blur(28px) saturate(115%);
    -webkit-backdrop-filter:blur(28px) saturate(115%);
    -webkit-mask-image:linear-gradient(to bottom,
      rgba(0,0,0,0) 0, rgba(0,0,0,0.5) 240px, #000 520px);
    mask-image:linear-gradient(to bottom,
      rgba(0,0,0,0) 0, rgba(0,0,0,0.5) 240px, #000 520px);
  }


  /* LIQUID ART */
  .art-intro{
    font-size:18px;color:#c7c7cd;max-width:720px;margin:-24px 0 52px;
    letter-spacing:-0.1px;
  }
  .art-grid{
    display:grid;
    /* Fixed 4 up rather than auto-fill: auto-fill derives the count from a
       minimum width, so the number of columns drifts with the window. An
       explicit count keeps it at 4 across every desktop size. */
    grid-template-columns:repeat(4,1fr);
    gap:8px 6px;
  }
  .art-piece{position:relative;}
  .art-frame{
    position:relative;overflow:hidden;border-radius:9px;
    background:#000;
    box-shadow:
      0 1px 2px rgba(0,0,0,0.5),
      0 10px 26px rgba(0,0,0,0.42),
      inset 0 0 0 1px rgba(255,255,255,0.07);
    transition:transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease;
  }
  /* Reserve the height an image will occupy before it loads.
     Without this the lazy-loaded Lab photographs are 0px tall on first paint,
     the document is far shorter than its finished size, and an anchor click
     scrolls to a position that then slides away as the images arrive. */
  .art-frame img{aspect-ratio:1600/854;}
  .art-frame img{
    display:block;width:100%;height:auto;
    transition:transform .7s cubic-bezier(.2,.6,.2,1), filter .5s ease;
  }
  .art-piece:hover .art-frame{
    transform:translateY(-6px);
    box-shadow:
      0 2px 4px rgba(0,0,0,0.5),
      0 20px 44px rgba(0,0,0,0.5),
      inset 0 0 0 1px rgba(255,255,255,0.14);
  }
  .art-piece:hover .art-frame img{transform:scale(1.03);filter:brightness(1.06) saturate(1.05);}
  .art-cap{padding:9px 2px 0;}
  .art-cap .acoll{
    font-size:9px;letter-spacing:1.4px;text-transform:uppercase;
    color:var(--muted);font-weight:600;
  }
  .art-cap h3{font-size:14.5px;font-weight:700;letter-spacing:-0.2px;margin-top:4px;color:#fff;}
  .art-cap p{font-size:12.5px;color:#9a9aa0;margin-top:6px;max-width:52ch;line-height:1.5;}
  @media (max-width:1200px){.art-grid{grid-template-columns:repeat(3,1fr);}}
  @media (max-width:820px){.art-grid{grid-template-columns:repeat(2,1fr);gap:7px 6px;}}
  @media (max-width:430px){.art-grid{gap:5px 4px;}}

  /* Art sits on the same translucent treatment as the filmography. */
  #art{border-top:none;background:transparent;}
  /* Solid black throughout so nothing of the reel shows through behind the
     artwork. Matches the sections either side exactly, so the boundaries stay
     invisible. */
  #art::before{
    content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:#0a0a0a;
  }


  /* LIGHTBOX */
  .art-frame{
    display:block;width:100%;padding:0;border:0;cursor:zoom-in;
    font:inherit;color:inherit;text-align:left;
  }
  .art-frame:focus-visible{outline:2px solid #fff;outline-offset:4px;}
  .lb{
    position:fixed;inset:0;z-index:400;
    display:flex;align-items:center;justify-content:center;
    background:rgba(6,6,7,0.94);
    backdrop-filter:blur(22px) saturate(120%);
    -webkit-backdrop-filter:blur(22px) saturate(120%);
    opacity:0;visibility:hidden;
    transition:opacity .32s ease, visibility .32s;
  }
  .lb.open{opacity:1;visibility:visible;}
  .lb-stage{
    position:relative;
    max-width:min(1500px,92vw);
    width:100%;
    display:flex;flex-direction:column;align-items:center;
    transform:scale(.975);
    transition:transform .38s cubic-bezier(.2,.7,.2,1);
  }
  .lb.open .lb-stage{transform:scale(1);}
  .lb-img{
    display:block;max-width:100%;max-height:76vh;width:auto;height:auto;
    border-radius:10px;
    box-shadow:0 30px 90px rgba(0,0,0,0.7), inset 0 0 0 1px rgba(255,255,255,0.08);
    background:#000;
  }
  .lb-cap{width:100%;padding:18px 4px 0;text-align:left;}
  .lb-cap .acoll{font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:#8e8e95;font-weight:600;}
  .lb-cap h3{font-size:20px;font-weight:700;letter-spacing:-0.3px;margin-top:6px;color:#fff;}
  .lb-cap p{font-size:13px;color:#9a9aa0;margin-top:6px;max-width:70ch;line-height:1.5;}
  .lb-count{position:absolute;top:-34px;right:2px;font-size:11px;letter-spacing:1.4px;color:#7e7e86;}
  .lb-btn{
    position:absolute;top:50%;transform:translateY(-50%);
    width:54px;height:54px;border-radius:50%;
    background:rgba(255,255,255,0.07);
    border:1px solid rgba(255,255,255,0.16);
    color:#fff;font-size:22px;line-height:1;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:background .2s, transform .2s, border-color .2s;
    z-index:2;
  }
  .lb-btn:hover{background:rgba(255,255,255,0.16);border-color:rgba(255,255,255,0.32);}
  .lb-prev{left:-76px;}
  .lb-next{right:-76px;}
  .lb-prev:hover{transform:translateY(-50%) translateX(-3px);}
  .lb-next:hover{transform:translateY(-50%) translateX(3px);}
  .lb-close{
    position:fixed;top:26px;right:30px;
    width:46px;height:46px;border-radius:50%;
    background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.16);
    color:#fff;font-size:20px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:background .2s,border-color .2s;z-index:3;
  }
  .lb-close:hover{background:rgba(255,255,255,0.16);border-color:rgba(255,255,255,0.32);}
  @media (max-width:1150px){
    .lb-prev{left:8px;} .lb-next{right:8px;}
    .lb-btn{width:44px;height:44px;background:rgba(0,0,0,0.5);}
  }
  @media (max-width:600px){
    .lb-img{max-height:60vh;}
    .lb-cap h3{font-size:17px;} .lb-cap p{font-size:12px;}
  }






  /* HERO SOCIAL ICONS */
  .hero-social{
    display:flex;align-items:center;gap:22px;
    margin-top:30px;
  }
  .hero-social a{
    display:flex;align-items:center;justify-content:center;
    width:26px;height:26px;
    color:rgba(255,255,255,0.82);
    filter:drop-shadow(0 1px 3px rgba(0,0,0,0.55));
    transition:color .25s ease, transform .25s cubic-bezier(.34,1.4,.5,1);
  }
  .hero-social a:hover{color:#fff;transform:translateY(-3px) scale(1.12);}
  .hero-social a:focus-visible{outline:2px solid #fff;outline-offset:5px;border-radius:4px;}
  .hero-social svg{width:100%;height:100%;fill:currentColor;display:block;}
  @media (max-width:560px){.hero-social{gap:18px;} .hero-social a{width:23px;height:23px;}}


  /* HEADLINE GLITCH — same chromatic split as the nav, fired once when each
     heading scrolls into view. 0.66s, 20% slower than the nav's 0.55s. */
  .glitch{position:relative;}
  .glitch .gtxt{position:relative;z-index:2;}
  .glitch::before,
  .glitch::after{
    content:attr(data-text);
    position:absolute;left:0;top:0;width:100%;
    z-index:1;opacity:0;pointer-events:none;
    mix-blend-mode:screen;
    font:inherit;letter-spacing:inherit;line-height:inherit;
  }
  .glitch::before{color:#00e9ff;}
  .glitch::after{color:#ff2d6f;}
  .glitch.play::before{animation:glitchHeadCyan .66s cubic-bezier(.3,.1,.3,1) forwards;}
  .glitch.play::after{animation:glitchHeadMag .66s cubic-bezier(.3,.1,.3,1) forwards;}
  /* Offsets are a touch wider than the nav's, since the type is far larger. */
  @keyframes glitchHeadCyan{
    0%{transform:translate(0,0);opacity:0;}
    15%{transform:translate(-5px,-2px);opacity:.95;}
    35%{transform:translate(4px,2px);opacity:.85;}
    55%{transform:translate(-3px,2px);opacity:.6;}
    75%{transform:translate(2px,-2px);opacity:.35;}
    100%{transform:translate(0,0);opacity:0;}
  }
  @keyframes glitchHeadMag{
    0%{transform:translate(0,0);opacity:0;}
    15%{transform:translate(5px,2px);opacity:.95;}
    35%{transform:translate(-4px,-2px);opacity:.85;}
    55%{transform:translate(3px,-2px);opacity:.6;}
    75%{transform:translate(-2px,2px);opacity:.35;}
    100%{transform:translate(0,0);opacity:0;}
  }






  /* AURORA
     One layer per dark section, rather than a single sheet over the whole page.
     A child at z-index:-1 paints ABOVE its section's own black background but
     BELOW that section's content. So the colour lifts the black while never
     passing over the posters or over the chromatic fringes on the headings -
     an overlay on top would screen-blend those fringes into mush and kill the
     glitch. The hero deliberately gets no layer, which is what keeps the reel
     clean on the home screen without needing any scroll logic.
     mix-blend-mode:screen means it can only lift black, never darken art. */
  .aurora{
    position:absolute;inset:0;z-index:-1;pointer-events:none;
    /* overflow:hidden is load-bearing, not cosmetic. The blobs are positioned
       in % of the section and sized in vw, so in a short section like Contact
       the lowest one hangs hundreds of px below the section box. Absolutely
       positioned boxes count towards the document's scrollable area, which made
       the page scroll well past the footer into empty space with the fixed reel
       showing behind it. Clipping here stops the page at its real bottom.
       The blur is applied to the element after the clip, and filter spill is
       ink overflow rather than scrollable overflow, so the edges stay soft and
       no new scroll height is created. */
    overflow:hidden;
    filter:blur(90px);
    mix-blend-mode:screen;
    opacity:.42;
  }
  /* Blobs stay well inside the section box so nothing bleeds across a
     boundary and shows a seam. */
  .aurora i{position:absolute;display:block;border-radius:50%;}
  .aurora i:nth-child(1){width:46vw;height:46vw;left:-2%;top:10%;
    background:radial-gradient(circle,rgba(0,140,190,0.55),rgba(0,140,190,0) 70%);
    animation:aur1 58s ease-in-out infinite;}
  .aurora i:nth-child(2){width:52vw;height:52vw;left:50%;top:34%;
    background:radial-gradient(circle,rgba(150,40,140,0.42),rgba(150,40,140,0) 70%);
    animation:aur2 74s ease-in-out infinite;}
  .aurora i:nth-child(3){width:40vw;height:40vw;left:20%;top:58%;
    background:radial-gradient(circle,rgba(20,120,120,0.40),rgba(20,120,120,0) 70%);
    animation:aur3 66s ease-in-out infinite;}
  @keyframes aur1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(8vw,4vh) scale(1.15);}}
  @keyframes aur2{0%,100%{transform:translate(0,0) scale(1.1);}50%{transform:translate(-9vw,-4vh) scale(0.92);}}
  @keyframes aur3{0%,100%{transform:translate(0,0) scale(0.95);}50%{transform:translate(6vw,-5vh) scale(1.2);}}
  @media (prefers-reduced-motion: reduce){ .aurora i{animation:none;} }

  /* Respect users who've asked for less motion. */
  @media (prefers-reduced-motion: reduce){
    .film-card:hover{transform:none;}
    .film-card:hover img{transform:none;}
    .film-card:hover .film-card-info{transform:none;}
    .navlinks a:hover::before,
    .navlinks a:hover::after{animation:none;opacity:0;}
    .logo:hover img{animation:none;}
    *{transition-duration:.01ms !important;}
  }

  /* DARK ABOUT + CONTACT SECTIONS */
  #about, #contact{background:#0a0a0a;color:#fff;}
  #about .sec-head .tag, #contact .sub{color:#9a9aa0;}
  #about .sec-head h2, #contact h2{color:#fff;}
  #about .about-photo{background:transparent;border:none;}
  #about .about-text p{color:#c7c7cd;}
  #about .about-text p b{color:#fff;}
  #about .stat-row{background:#262629;border-color:#262629;}
  #about .stat{background:#111113;}
  #about .stat .n{color:#fff;}
  #about .stat .l{color:#9a9aa0;}

  /* Contact icons: the same set and behaviour as the row under the hero name,
     a little larger since here they are the only call to action on the page. */
  .contact-social{display:flex;align-items:center;gap:32px;margin-top:52px;}
  .contact-social a{
    display:flex;align-items:center;justify-content:center;
    width:30px;height:30px;
    color:rgba(255,255,255,0.8);
    transition:color .25s ease, transform .25s cubic-bezier(.34,1.4,.5,1);
  }
  .contact-social a:hover{color:#fff;transform:translateY(-3px) scale(1.12);}
  .contact-social a:focus-visible{outline:2px solid #fff;outline-offset:5px;border-radius:4px;}
  .contact-social svg{width:100%;height:100%;fill:currentColor;display:block;}
  @media (max-width:560px){.contact-social{gap:26px;} .contact-social a{width:27px;height:27px;}}

  /* ==========================================================================
     MOBILE
     Everything below sits inside a media or feature query, so the desktop
     layout above is left exactly as it is.
     ========================================================================== */

  /* iOS Safari does not count its collapsing toolbar in 100vh, so a full-height
     element is taller than the screen and the page shifts as you scroll. dvh
     tracks the visible viewport instead. Browsers without dvh keep the vh value
     above, so this is additive only. */
  @supports (height:100dvh){
    .site-bg{height:100dvh;}
    .hero{min-height:100dvh;}
  }

  @media (max-width:820px){
    /* Nothing is allowed to push the page sideways. */
    body{overflow-x:hidden;}

    /* Two rows. Six links plus the logo cannot fit across a phone in one line -
       they were overflowing the viewport, which is what made the page scroll
       sideways and look broken. */
    nav{flex-direction:column;align-items:center;gap:8px;padding:10px 14px 12px;}
    .logo{padding:2px 6px;}
    .logo img{height:36px;}
    .navlinks{flex-wrap:wrap;justify-content:center;gap:2px 4px;}
    .navlinks a{font-size:13px;padding:8px 11px;}
    /* The cyan/magenta copies are offset to match the link's padding box, so
       they have to move with it or the fringes sit away from the text. */
    .navlinks a::before,.navlinks a::after{left:11px;top:8px;}

    /* A 250px fade would cover a third of a phone screen. */
    header{height:170px;}

    .container{padding:0 20px;}
    section{padding:64px 0;}
    .hero{padding:132px 20px 70px;}
  }

  @media (max-width:560px){
    /* Cards are roughly 160px wide here, so 20px of padding crowded out the
       title it was meant to sit under. */
    .film-card-info{padding:12px 12px 13px;}
    .art-intro{font-size:16px;margin:-14px 0 34px;}
    .contact .sub{font-size:17px;}

    /* Fill rate matters far more on a phone GPU: five blurred aurora layers
       plus the section blur is the most expensive thing on the page. */
    .aurora{filter:blur(60px);}
    #films::before{backdrop-filter:blur(14px) saturate(115%);}

    /* Below ~380px the six links wrap onto a second row, so the nav stacks
       three rows deep. Give the hero headline more clearance than the 6px it
       would otherwise have, and lengthen the fade to match. */
    header{height:190px;}
    .hero{padding-top:150px;}
  }


/* Keep the expanded navigation readable on tablets and small laptops. */
.navlinks a{white-space:nowrap;}
.navlinks a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.07);}
@media (min-width:821px) and (max-width:1100px){
  nav{padding-left:20px;padding-right:20px;}
  .navlinks{gap:2px;}
  .navlinks a{padding:11px 10px;font-size:14px;}
  .navlinks a::before,.navlinks a::after{left:10px;}
}
.generalist-page{min-height:100vh;display:flex;flex-direction:column;}
.generalist-page main{flex:1;}
.generalist-page #generalist{padding:150px 0 80px;border-top:0;min-height:calc(100vh - 80px);}
.generalist-page .container{max-width:1600px;}
.generalist-page h1{font-size:clamp(30px,5vw,56px);letter-spacing:-1.5px;line-height:1.1;}
@media(max-width:820px){.generalist-page #generalist{padding:180px 0 60px;}}

.resume-download{margin-top:24px;text-align:left;font-size:clamp(28px,4.25vw,46px);font-weight:800;letter-spacing:-1.3px;}
.resume-download a{display:inline-block;padding:10px 0;color:var(--text);text-decoration:none;}
.resume-download a:hover{opacity:.8;}
.resume-download a:focus-visible{outline:2px solid currentColor;outline-offset:5px;}

/* Match the navigation's chromatic hover animation on the linked job titles. */
.hero .role-link{position:relative;display:inline-block;max-width:100%;color:inherit;text-decoration:none;vertical-align:bottom;}
.hero .role-link .txt{position:relative;z-index:2;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em;}
.hero .role-link::before,.hero .role-link::after{content:attr(data-text);position:absolute;inset:0;z-index:1;opacity:0;pointer-events:none;mix-blend-mode:screen;font:inherit;letter-spacing:inherit;line-height:inherit;}
.hero .role-link::before{color:#00e9ff;}
.hero .role-link::after{color:#ff2d6f;}
.hero .role-link:hover::before,.hero .role-link:focus-visible::before{animation:glitchCyan .825s cubic-bezier(.3,.1,.3,1) forwards;}
.hero .role-link:hover::after,.hero .role-link:focus-visible::after{animation:glitchMag .825s cubic-bezier(.3,.1,.3,1) forwards;}
@media(prefers-reduced-motion:reduce){
  .hero .role-link::before,.hero .role-link::after{animation:none !important;opacity:0;}
}