:root{
    --bg: #0b0d0e;
    --panel: #14171a;
    --panel-2: #191d20;
    --text: #edeae2;
    --text-dim: #8f948f;
    --gold: #c9a227;
    --teal: #3a5866;
    --rec: #c1443c;
    --line: rgba(237,234,226,0.1);
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:'Work Sans', sans-serif;
    font-weight:300;
    overflow-x:hidden;
  }
  ::selection{background:var(--gold);color:var(--bg);}

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

  /* HUD timecode */
  .hud{
    position:fixed; top:24px; left:24px; z-index:100;
    display:flex; align-items:center; gap:10px;
    font-family:'IBM Plex Mono', monospace; font-size:13px; letter-spacing:1px;
    color:var(--text-dim);
    mix-blend-mode:difference;
  }
  .rec-dot{
    width:8px;height:8px;border-radius:50%;background:var(--rec);
    animation:pulse 1.6s infinite ease-in-out;
    box-shadow:0 0 8px var(--rec);
  }
  @keyframes pulse{
    0%,100%{opacity:1;}
    50%{opacity:0.25;}
  }
  #timecode{color:var(--text);}

  .hud-right{
    position:fixed; top:24px; right:24px; z-index:100;
    font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:2px;
    color:var(--text-dim); text-transform:uppercase;
    mix-blend-mode:difference;
  }

  nav.scroll-cta{
    position:fixed; bottom:28px; left:50%; transform:translateX(-50%);
    z-index:100; display:flex; flex-direction:column; align-items:center; gap:8px;
    font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:3px;
    color:var(--text-dim); text-transform:uppercase;
    opacity:0.8; transition:opacity 1.1s ease;
  }
  nav.scroll-cta.hidden{ opacity:0; pointer-events:none; }
  .scroll-line{
    width:1px; height:36px; background:linear-gradient(var(--gold), transparent);
    animation:scrolldown 1.8s infinite ease-in-out;
  }
  @keyframes scrolldown{
    0%{transform:scaleY(0); transform-origin:top;}
    50%{transform:scaleY(1); transform-origin:top;}
    50.1%{transform-origin:bottom;}
    100%{transform:scaleY(0); transform-origin:bottom;}
  }

  section{
    position:relative; width:100%;
    padding:140px 8vw;
  }

  /* HERO */
  .hero{
    min-height:100vh;
    display:flex; flex-direction:column; justify-content:center;
    padding-top:0; padding-bottom:0;
    position:relative;
  }
  .hero::before{
    content:"";
    position:absolute; left:0; right:0; bottom:-140px; height:280px;
    background:linear-gradient(to bottom, transparent, var(--panel) 50%, transparent);
    opacity:0.6; pointer-events:none;
  }
  .hero::after{
    content:"";
    position:absolute; inset:0;
    background: radial-gradient(ellipse at 30% 20%, rgba(58,88,102,0.18), transparent 60%),
                radial-gradient(ellipse at 80% 80%, rgba(201,162,39,0.08), transparent 55%);
    pointer-events:none;
  }
  .eyebrow{
    font-family:'IBM Plex Mono', monospace;
    font-size:12px; letter-spacing:4px; color:var(--gold);
    text-transform:uppercase; margin-bottom:24px;
    opacity:0; animation:fadeUp 1s 0.2s forwards;
  }
  h1.title{
    font-family:'Big Shoulders Display', sans-serif;
    font-weight:900;
    font-size:clamp(52px, 10vw, 138px);
    line-height:0.88;
    text-transform:uppercase;
    letter-spacing:-1px;
    max-width:1100px;
    opacity:0; animation:fadeUp 1s 0.4s forwards;
  }
  h1.title span{
    display:block; color:var(--text-dim); font-weight:600;
    font-size:0.42em; letter-spacing:2px; margin-top:6px;
  }
  .hero-bottom{
    display:flex; justify-content:space-between; align-items:flex-end;
    margin-top:64px; gap:40px; flex-wrap:wrap;
    opacity:0; animation:fadeUp 1s 0.7s forwards;
  }
  .bio-block{
    display:flex; gap:28px; max-width:600px; align-items:flex-start;
  }
  .photo-frame{
    width:120px; height:150px; flex-shrink:0;
    border:1px solid var(--line);
    background: linear-gradient(135deg, var(--panel), var(--panel-2));
    position:relative; overflow:hidden;
  }
  .photo-frame img{
    width:100%; height:100%; object-fit:cover; display:block;
  }
  .photo-frame::before, .photo-frame::after{
    content:""; position:absolute; width:10px; height:10px; z-index:2;
    border:1px solid var(--gold); opacity:0.8;
  }
  .photo-frame::before{ top:-1px; left:-1px; border-right:none; border-bottom:none;}
  .photo-frame::after{ bottom:-1px; right:-1px; border-left:none; border-top:none;}
  .bio-text{ font-size:15px; line-height:1.65; color:var(--text-dim); padding-top:2px; }
  .bio-text strong{ color:var(--text); font-weight:500; }

  .cta{
    font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:2px;
    text-transform:uppercase; color:var(--text); text-decoration:none;
    border:1px solid var(--line); padding:14px 22px;
    display:inline-flex; align-items:center; gap:10px;
    transition:all 0.35s ease; white-space:nowrap;
  }
  .cta:hover{ border-color:var(--gold); color:var(--gold); gap:16px; }

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

  /* SECTION LABELS (timecode style, not numbered list) */
  .section-label{
    display:flex; align-items:baseline; gap:16px; margin-bottom:56px;
  }
  .tc{
    font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--gold);
    letter-spacing:1px;
  }
  .section-title{
    font-family:'Big Shoulders Display', sans-serif;
    font-weight:700; font-size:clamp(30px,4vw,46px);
    text-transform:uppercase; letter-spacing:0.5px;
  }
  .section-rule{ flex:1; height:1px; background:var(--line); }

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

  /* EXPERTISE */
  .expertise-grid{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:1px; background:var(--line); border:1px solid var(--line);
  }
  .expertise-item{
    background:var(--bg); padding:36px 28px; transition:background 0.4s ease;
  }
  .expertise-item:hover{ background:var(--panel); }
  .expertise-item .tc{ display:block; margin-bottom:18px; }
  .expertise-item h3{
    font-family:'Big Shoulders Display', sans-serif; font-weight:700;
    font-size:22px; text-transform:uppercase; margin-bottom:10px; letter-spacing:0.5px;
  }
  .expertise-item p{ font-size:14px; color:var(--text-dim); line-height:1.6; }

  /* PORTFOLIO */
  .portfolio-block{ margin-bottom:120px; }
  .portfolio-block:last-child{ margin-bottom:0; }
  .grid{
    display:grid; grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));
    gap:20px;
  }
  .grid.wide{ grid-template-columns:repeat(auto-fill,minmax(min(360px,100%),1fr)); }
  .thumb{
    display:block; position:relative; aspect-ratio:16/9; overflow:hidden; cursor:pointer;
    background:linear-gradient(135deg, var(--panel) 0%, var(--panel-2) 60%, #1d2226 100%);
    color:inherit; text-decoration:none;
  }
  .thumb:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
  .thumb-img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  }
  .thumb::before{
    content:""; position:absolute; inset:0;
    background:
      repeating-linear-gradient(115deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 6px);
  }
  .thumb .play{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:44px; height:44px; border:1px solid rgba(237,234,226,0.4); border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    opacity:0.75; transition:all 0.4s ease;
  }
  .thumb .play::after{
    content:""; width:0; height:0; margin-left:3px;
    border-top:7px solid transparent; border-bottom:7px solid transparent;
    border-left:11px solid var(--text);
  }
  .thumb-overlay{
    position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
    padding:18px; background:linear-gradient(0deg, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.15) 65%, transparent 100%);
  }
  @media (hover:hover){
    .thumb:hover .play{ opacity:1; border-color:var(--gold); }
    .thumb:hover .play::after{ border-left-color:var(--gold); }
  }
  .thumb-overlay .proj-title{
    font-family:'Big Shoulders Display', sans-serif; font-weight:600; font-size:17px;
    text-transform:uppercase; letter-spacing:0.5px;
  }
  .thumb-overlay .proj-tag{
    font-family:'IBM Plex Mono', monospace; font-size:10px; color:var(--gold);
    letter-spacing:1px; margin-top:4px; display:block;
  }
  .subsection-heading{
    font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:2px;
    color:var(--text-dim); text-transform:uppercase; margin-bottom:24px;
  }

  /* CONTACT */
  .contact{
    display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:40px;
    padding-bottom:100px;
  }
  .contact h2{
    font-family:'Big Shoulders Display', sans-serif; font-weight:900;
    font-size:clamp(38px,6vw,72px); text-transform:uppercase; line-height:0.95; max-width:640px;
  }
  .contact-links{ display:flex; flex-direction:column; gap:10px; align-items:flex-end; }
  .contact-links a{
    font-family:'IBM Plex Mono', monospace; font-size:13px; color:var(--text-dim);
    text-decoration:none; letter-spacing:1px; transition:color 0.3s ease;
  }
  .contact-links a:hover{ color:var(--gold); }

  footer{
    padding:28px 8vw; border-top:1px solid var(--line);
    display:flex; justify-content:space-between; font-family:'IBM Plex Mono', monospace;
    font-size:11px; color:var(--text-dim); letter-spacing:1px; flex-wrap:wrap; gap:10px;
  }

  /* LIGHTBOX */
  .lightbox{
    position:fixed; inset:0; z-index:300;
    display:none; align-items:center; justify-content:center;
    background:rgba(6,7,8,0.92);
    padding:32px;
  }
  .lightbox.active{ display:flex; }
  .lightbox-inner{
    position:relative; width:100%; max-width:900px;
  }
  .lightbox-video{
    position:relative; width:100%; aspect-ratio:16/9;
    background:var(--panel); border:1px solid var(--line);
  }
  .lightbox.vertical .lightbox-inner{ max-width:400px; }
  .lightbox.vertical .lightbox-video{ aspect-ratio:9/16; }
  .lightbox-video iframe{
    position:absolute; inset:0; width:100%; height:100%; border:0;
  }
  .lightbox-close{
    position:absolute; top:-44px; right:0;
    width:36px; height:36px; border:1px solid var(--line); border-radius:50%;
    background:transparent; color:var(--text); font-size:22px; line-height:1;
    cursor:pointer; transition:all 0.3s ease;
  }
  .lightbox-close:hover, .lightbox-close:focus-visible{ border-color:var(--gold); color:var(--gold); }

  @media (max-width:640px){
    section{ padding:64px 6vw; }
    .hud-right{ display:none; }
    .hud{ font-size:11px; top:16px; left:16px; }
    .hero{ min-height:auto; justify-content:flex-start; padding-top:96px; padding-bottom:48px; }
    .hero-bottom{ flex-direction:column; align-items:flex-start; }
    .contact{ flex-direction:column; align-items:flex-start; }
    .contact-links{ align-items:flex-start; }
  }