:root{
    --paper:#FAF7F0;
    --paper-2:#F1ECE0;
    --ink:#221E1F;
    --ink-soft:#54504f;
    --signal:#FEC908;
    --line:#E3DCC9;
    --white:#FFFFFF;
    --gap: clamp(20px, 4vw, 64px);
    --container: 1280px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{background:var(--paper); color:var(--ink); font-family:'Inter', sans-serif; font-size:16px; line-height:1.55; overflow-x:hidden;}
  img{max-width:100%; display:block;}
  a{color:inherit !important; text-decoration:none !important;}
  .wrap{max-width:var(--container); margin:0 auto; padding:0 var(--gap);}
  .eyebrow{font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); display:flex; align-items:center; gap:10px;}
  .eyebrow::before{content:""; width:18px; height:2px; background:var(--signal); display:inline-block;}
  h1,h2,h3{font-family:'Bebas Neue', sans-serif; text-transform:uppercase; letter-spacing:.01em; line-height:.94; font-weight:400;}
  h2{font-size:clamp(32px, 4.6vw, 52px);}
  @media (prefers-reduced-motion: reduce){*{animation:none !important; transition:none !important;}}

  /* ---------- NAV ---------- */
  header{position:sticky; top:0; z-index:50; background:rgba(250,247,240,.9); backdrop-filter:blur(8px); border-bottom:1px solid var(--line);}
  nav.wrap{display:flex; align-items:center; justify-content:space-between; height:76px; gap:20px;}
  .brand img{height:100px; width:auto;}
  .navlinks{display:flex; gap:clamp(12px,1.6vw,26px); align-items:center; flex-wrap:wrap;}
  .navlinks a{font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; position:relative; padding:4px 0; white-space:nowrap;}
  .navlinks a::after{content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--signal); transition:width .25s ease;}
  .navlinks a:hover::after{width:100%;}
  .navlinks a.cta{background:var(--ink); color:var(--white) !important; padding:9px 16px; border-radius:2px;}
  .navlinks a.cta::after{display:none;}
  .navlinks a.cta:hover{background:var(--signal); color:var(--ink) !important;}
  .burger{display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none;}
  .burger span{width:24px; height:2px; background:var(--ink); display:block;}

  /* ---------- HERO ---------- */
  .hero{position:relative; padding:56px 0 var(--gap); text-align:center;}
  .hero .kicker{font-family:'IBM Plex Mono', monospace; font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:16px;}
  .hero h1{font-size:clamp(40px, 8vw, 108px); max-width:980px; margin:0 auto 30px;}

  .reel-stage{position:relative; max-width:1040px; margin:0 auto; aspect-ratio:16/9; background:var(--ink); border-radius:4px; overflow:hidden; isolation:isolate;}
  .reel-stage .beam{position:absolute; top:-20%; left:-12%; width:75%; height:140%; background:linear-gradient(100deg, rgba(254,201,8,.85), rgba(254,201,8,0) 70%); clip-path: polygon(0% 38%, 62% 0%, 100% 50%, 62% 100%, 0% 62%); animation: beamMove 9s ease-in-out infinite; z-index:1; filter: blur(1px);}
  @keyframes beamMove{0%,100%{transform: translateX(0) rotate(0deg); opacity:.75;} 50%{transform: translateX(6%) rotate(2deg); opacity:1;}}
  .reel-stage .grain{position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px); background-size:3px 3px; z-index:2; opacity:.5; mix-blend-mode:overlay;}
  .reel-stage .content{position:relative; z-index:3; height:100%; width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--white); gap:16px;}
  .play-btn{width:74px; height:74px; border-radius:50%; border:2px solid var(--white); display:flex; align-items:center; justify-content:center; transition:transform .25s ease, background .25s ease; cursor:pointer;}
  .play-btn:hover{background:var(--signal); border-color:var(--signal); transform:scale(1.06);}
  .play-btn svg{fill:var(--white); margin-left:4px;}
  .play-btn:hover svg{fill:var(--ink);}
  .reel-stage .label{font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.75);}
  .reel-stage .timecode{position:absolute; bottom:16px; right:18px; font-family:'IBM Plex Mono', monospace; font-size:11px; color:rgba(255,255,255,.55); z-index:3;}

  .tagline-row{display:flex; align-items:center; justify-content:center; gap:14px; margin-top:36px; flex-wrap:wrap;}
  .tagline-row .tags{font-family:'IBM Plex Mono', monospace; font-size:14px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft);}
  .tagline-row .arrow{animation:bounce 1.8s ease-in-out infinite;}
  @keyframes bounce{0%,100%{transform:translateY(0);} 50%{transform:translateY(6px);}}

  section{padding:calc(var(--gap) * 1.5) 0;}
  .divider{height:1px; background:var(--line); max-width:var(--container); margin:0 auto;}
  .section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:26px; flex-wrap:wrap;}
  .section-head p{max-width:440px; color:var(--ink-soft); font-size:15px; padding-bottom:6px;}
  .section-head .index{font-family:'IBM Plex Mono', monospace; font-size:13px; color:var(--ink-soft);}

  /* ---------- MOSAIC (full-bleed works grid, used in every portfolio section) ---------- */
  .mosaic{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    max-width:var(--container);
    margin:0 auto;
    padding:0 var(--gap);
  }
  .tile{
    position:relative;
    aspect-ratio:4/2.6;
    overflow:hidden;
    cursor:pointer;
    background:#1c1815;
  }
  .tile img{
    position:absolute; inset:0;
    width:100%; height:100%; object-fit:cover;
    transition:transform .6s ease, filter .4s ease;
  }
  .tile.placeholder::before{
    content:""; position:absolute; top:-30%; left:-20%; width:70%; height:160%;
    background:linear-gradient(100deg, rgba(254,201,8,.35), rgba(254,201,8,0) 70%);
    clip-path: polygon(0% 40%, 60% 0%, 100% 50%, 62% 100%, 0% 62%);
    transition:transform .6s ease;
  }
  .tile:hover img{transform:scale(1.05); filter:brightness(.45);}
  .tile.placeholder:hover::before{transform:translateX(16%);}

  .tile .bar{
    position:absolute; left:0; right:0; bottom:0; z-index:2;
    padding:14px 16px;
    background:linear-gradient(to top, rgba(8,6,5,.85), rgba(8,6,5,0));
    transition:opacity .3s ease;
  }
  .tile .bar .name{
    font-family:'Bebas Neue', sans-serif; font-size:16px;
    color:#fff; line-height:1.1; letter-spacing:.01em;
  }
  .tile .bar .meta{
    display:block; margin-top:5px;
    font-family:'IBM Plex Mono', monospace; font-size:9.5px; letter-spacing:.06em;
    text-transform:uppercase; color:rgba(255,255,255,.55);
  }

  .tile .overlay{
    position:absolute; inset:0; z-index:3;
    background:rgba(10,8,6,0);
    display:flex; align-items:center; justify-content:center;
    padding:18px;
    opacity:0;
    transition:opacity .3s ease, background .3s ease;
  }
  .tile .overlay .desc{
    text-align:center; max-width:100%; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
    font-family:'Inter', sans-serif; font-size:12.5px; line-height:1.5; color:rgba(255,255,255,.92);
  }
  .tile .overlay .play-hint{
    margin:12px auto 0; width:36px; height:36px; border-radius:50%;
    border:1.5px solid rgba(255,255,255,.85);
    display:flex; align-items:center; justify-content:center;
  }
  .tile .overlay .play-hint svg{fill:#fff; width:10px; height:10px; margin-left:2px;}

  .tile:hover .bar{opacity:0;}
  .tile:hover .overlay{opacity:1; background:rgba(10,8,6,.55);}

  @media (max-width:1000px){.mosaic{grid-template-columns:repeat(2, 1fr);}}
  @media (max-width:560px){
    .mosaic{grid-template-columns:1fr;}
    .tile{aspect-ratio:16/10;}
    .tile .overlay{opacity:1; background:rgba(10,8,6,.35);}
    .tile .bar{opacity:1;}
  }

  .cat-intro{font-size:15px; color:var(--ink-soft); max-width:640px; margin:-6px 0 24px;}

  /* ---------- ABOUT ---------- */
  .about{background:var(--paper-2);}
  .about-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:var(--gap); align-items:start;}
  .about p{color:var(--ink-soft); font-size:16px; margin-bottom:16px; max-width:520px;}
  .about .ps{font-style:italic; color:var(--ink); border-left:2px solid var(--signal); padding-left:16px; margin-top:22px;}
  .about-reel{position:relative; aspect-ratio:16/9; background:var(--ink); border-radius:4px; overflow:hidden;}
  .about-reel .beam{position:absolute; top:-30%; left:-15%; width:80%; height:150%; background:linear-gradient(100deg, rgba(254,201,8,.7), rgba(254,201,8,0) 70%); clip-path: polygon(0% 38%, 62% 0%, 100% 50%, 62% 100%, 0% 62%);}
  .about-reel .content{position:relative; z-index:2; height:100%; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:12px; color:var(--white);}
  .about-reel .play-btn{width:56px; height:56px;}
  .about-reel .label{font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.75);}
  @media (max-width:860px){.about-grid{grid-template-columns:1fr;}}

  /* ---------- CONTACT / FOOTER ---------- */
  .contact{background:var(--ink); color:var(--paper); position:relative; overflow:hidden;}
  .contact .beam-bg{position:absolute; top:-30%; right:-10%; width:60%; height:160%; background:linear-gradient(120deg, rgba(254,201,8,.16), rgba(254,201,8,0) 65%); clip-path: polygon(0% 40%, 60% 0%, 100% 50%, 60% 100%, 0% 60%);}
  .contact .wrap{position:relative; z-index:2;}
  .contact h2{color:var(--white); font-size:clamp(34px,5.4vw,64px); margin-bottom:20px;}
  .contact-grid{display:grid; grid-template-columns:1.2fr 1fr; gap:var(--gap); padding-bottom:48px;}
  .contact-grid p{color:rgba(250,247,240,.65); max-width:420px; margin-bottom:26px;}
  .contact-btn{display:inline-flex; align-items:center; gap:10px; background:var(--signal); color:var(--ink) !important; padding:15px 26px; border-radius:2px; font-weight:700; text-transform:uppercase; font-size:13px; letter-spacing:.03em; transition:transform .2s ease;}
  .contact-btn:hover{transform:translateY(-2px);}
  .contact-meta{font-family:'IBM Plex Mono', monospace; font-size:14px; line-height:2.1;}
  .contact-meta a:hover{color:var(--signal) !important;}
  .contact-meta .label{color:rgba(250,247,240,.5); font-size:11px; text-transform:uppercase; letter-spacing:.1em; display:block;}
  footer .bottom{border-top:1px solid rgba(250,247,240,.15); padding:20px 0; display:flex; justify-content:space-between; align-items:center; font-family:'IBM Plex Mono', monospace; font-size:12px; color:rgba(250,247,240,.5); flex-wrap:wrap; gap:10px;}
  .socials{display:flex; gap:18px;}
  .socials a:hover{color:var(--signal) !important;}

  .reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
  .reveal.in{opacity:1; transform:translateY(0);}

  @media (max-width:900px){
    .navlinks{position:fixed; top:76px; left:0; right:0; background:var(--paper); flex-direction:column; align-items:flex-start; padding:20px var(--gap) 30px; border-bottom:1px solid var(--line); transform:translateY(-140%); transition:transform .3s ease; gap:14px;}
    .navlinks.open{transform:translateY(0);}
    .burger{display:flex;}
    .contact-grid{grid-template-columns:1fr;}
  }

  /* ---------- MODAL ---------- */
  .modal-backdrop{
    position:fixed; inset:0; background:rgba(15,12,10,.86);
    display:none; align-items:center; justify-content:center;
    z-index:300; padding:24px;
  }
  .modal-backdrop.open{display:flex;}
  .modal-box{width:100%; max-width:860px; background:#0e0c0b; border-radius:4px; overflow:hidden; position:relative;}
  .modal-close{
    position:absolute; top:14px; right:14px; z-index:2;
    width:38px; height:38px; border-radius:50%; border:1.5px solid rgba(255,255,255,.5);
    background:transparent; color:#fff; font-size:18px; line-height:1; cursor:pointer;
  }
  .modal-close:hover{background:var(--signal); border-color:var(--signal); color:#221E1F;}
  .modal-video-frame{position:relative; width:100%; aspect-ratio:16/9; background:#000;}
  .modal-video-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
  .modal-fallback{
    position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:14px; padding:40px; text-align:center;
  }
  .modal-fallback .label{font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--signal);}
  .modal-fallback .name{font-family:'Bebas Neue', sans-serif; font-size:clamp(26px,4vw,40px); color:#fff; line-height:1;}
  .modal-fallback p{color:rgba(255,255,255,.6); font-size:14px; max-width:360px;}
  .modal-fallback a{
    display:inline-flex; align-items:center; gap:8px;
    background:var(--signal); color:#221E1F; font-weight:700; text-transform:uppercase;
    font-size:13px; letter-spacing:.03em; padding:13px 24px; border-radius:2px; margin-top:6px;
  }