:root{
    --bg:#0B0D10;
    --bg-alt:#14171C;
    --bg-alt2:#1A1E24;
    --ink:#EDEDE6;
    --ink-dim:#9AA0A6;
    --ink-faint:#5B6169;
    --rec:#FF4433;
    --cue:#FFC857;
    --line:#2A2E35;
    --display: 'Bebas Neue', sans-serif;
    --body: 'Inter', sans-serif;
    --mono: 'IBM Plex Mono', monospace;
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
  }

  body{
    background:var(--bg);
    color:var(--ink);
    font-family:var(--body);
    line-height:1.5;
    overflow-x:hidden;
  }

  a{color:inherit;}
  ::selection{background:var(--rec); color:var(--bg);}

  a:focus-visible, button:focus-visible{
    outline:2px solid var(--cue);
    outline-offset:3px;
  }

  .wrap{
    max-width:1120px;
    margin:0 auto;
    padding:0 28px;
  }

  /* ---------- Scrub bar (top progress) ---------- */
  #scrubbar{
    position:fixed; top:0; left:0; right:0; height:3px;
    background:var(--bg-alt); z-index:200;
  }
  #scrubbar-fill{
    height:100%; width:0%;
    background:linear-gradient(90deg, var(--rec), var(--cue));
  }
  #scrubbar-head{
    position:absolute; top:-3px; left:0%;
    width:9px; height:9px; border-radius:50%;
    background:var(--cue);
    box-shadow:0 0 8px var(--cue);
    transform:translateX(-50%);
  }

  /* ---------- Timecode readout (fixed, side) ---------- */
  #timecode{
    position:fixed;
    bottom:18px; right:18px;
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:0.08em;
    color:var(--ink-dim);
    background:rgba(20,23,28,0.85);
    border:1px solid var(--line);
    padding:8px 12px;
    border-radius:3px;
    z-index:200;
    display:flex; align-items:center; gap:8px;
    backdrop-filter:blur(4px);
  }
  #timecode .dot{
    width:6px; height:6px; border-radius:50%;
    background:var(--rec);
    animation:blink 1.6s infinite;
  }
  @keyframes blink{ 0%,45%{opacity:1;} 50%,95%{opacity:.15;} 100%{opacity:1;} }
  @media (max-width: 640px){ #timecode{display:none;} }

  /* ---------- Nav ---------- */
  header{
    position:fixed; top:3px; left:0; right:0; z-index:150;
    background:rgba(11,13,16,0.72);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  nav.wrap{
    display:flex; align-items:center; justify-content:space-between;
    height:60px;
  }
  .brand{
    font-family:var(--display);
    font-size:22px; letter-spacing:0.04em;
    display:flex; align-items:center; gap:8px;
  }
  .brand .rec-tag{
    font-family:var(--mono); font-size:9px; letter-spacing:0.1em;
    color:var(--rec); border:1px solid var(--rec);
    padding:2px 6px; border-radius:2px;
  }
  nav ul{
    list-style:none; display:flex; gap:26px;
  }
  nav a{
    text-decoration:none; font-size:13px; color:var(--ink-dim);
    font-weight:500; letter-spacing:0.03em;
    transition:color .15s ease;
  }
  nav a:hover{ color:var(--ink); }
  @media (max-width: 780px){ nav ul{display:none;} }

  /* ---------- Hero ---------- */
  .hero{
    padding:150px 0 90px;
    position:relative;
  }
  .hero::before{
    content:"";
    position:absolute; inset:0;
    background-image:
      repeating-linear-gradient(180deg, rgba(255,255,255,0.018) 0px, rgba(255,255,255,0.018) 1px, transparent 1px, transparent 3px);
    pointer-events:none;
  }
  .player-frame{
    border:1px solid var(--line);
    background:var(--bg-alt);
    border-radius:6px;
    overflow:hidden;
  }
  .player-chrome{
    display:flex; align-items:center; justify-content:space-between;
    padding:9px 14px;
    border-bottom:1px solid var(--line);
    font-family:var(--mono); font-size:10px; color:var(--ink-faint);
    letter-spacing:0.06em;
  }
  .player-chrome .dots{ display:flex; gap:6px; }
  .player-chrome .dots span{
    width:8px; height:8px; border-radius:50%; background:var(--line);
  }
  .player-body{
    padding:60px 40px 46px;
    text-align:left;
  }
  .eyebrow{
    font-family:var(--mono);
    font-size:12px;
    color:var(--rec);
    letter-spacing:0.14em;
    margin-bottom:18px;
    display:flex; align-items:center; gap:10px;
  }
  .eyebrow::before{
    content:"";
    width:7px; height:7px; border-radius:50%;
    background:var(--rec);
  }
  h1.title{
    font-family:var(--display);
    font-size:clamp(52px, 9vw, 108px);
    line-height:0.92;
    letter-spacing:0.01em;
    color:var(--ink);
  }
  h1.title .accent{ color:var(--cue); }
  .roles{
    margin-top:22px;
    font-family:var(--mono);
    font-size:14px;
    color:var(--ink-dim);
    letter-spacing:0.02em;
  }
  .roles span:not(:last-child)::after{
    content:" / ";
    color:var(--ink-faint);
  }
  .hero-sub{
    margin-top:26px;
    max-width:560px;
    font-size:16.5px;
    color:var(--ink-dim);
    line-height:1.7;
  }
  .cta-row{
    margin-top:38px;
    display:flex; gap:14px; flex-wrap:wrap;
  }
  .btn{
    font-family:var(--body);
    font-weight:600;
    font-size:14px;
    padding:13px 24px;
    border-radius:4px;
    text-decoration:none;
    display:inline-flex; align-items:center; gap:8px;
    transition:transform .15s ease, background .15s ease, border-color .15s ease;
    border:1px solid transparent;
  }
  .btn:hover{ transform:translateY(-2px); }
  .btn-primary{ background:var(--rec); color:#0B0D10; }
  .btn-primary:hover{ background:#ff5c4d; }
  .btn-ghost{ border-color:var(--line); color:var(--ink); }
  .btn-ghost:hover{ border-color:var(--ink-dim); }

  /* scrub track under player */
  .scrub-track{
    margin-top:0;
    height:34px;
    border-top:1px solid var(--line);
    background:repeating-linear-gradient(90deg, var(--bg-alt2) 0 1px, transparent 1px 44px);
    position:relative;
    display:flex; align-items:center;
    padding-left:14px;
    font-family:var(--mono); font-size:10px; color:var(--ink-faint);
  }
  .scrub-track .playhead{
    position:absolute; top:0; bottom:0; width:2px; background:var(--cue);
    left:22%;
  }

  /* ---------- Section shell ---------- */
  section{ padding:86px 0; border-top:1px solid var(--line); }
  .sec-head{
    display:flex; align-items:baseline; gap:16px; margin-bottom:44px;
    flex-wrap:wrap;
  }
  .sec-tag{
    font-family:var(--mono); font-size:11px; color:var(--rec);
    letter-spacing:0.12em; border:1px solid var(--rec);
    padding:3px 8px; border-radius:2px;
  }
  .sec-title{
    font-family:var(--display);
    font-size:clamp(30px,4vw,46px);
    letter-spacing:0.01em;
  }
  .sec-desc{
    max-width:640px; color:var(--ink-dim); font-size:15px; margin-bottom:44px;
    margin-top:-24px;
  }

  /* ---------- Timeline tracks (Services) ---------- */
  .track{
    border:1px solid var(--line);
    border-radius:4px;
    margin-bottom:14px;
    background:var(--bg-alt);
    overflow:hidden;
  }
  .track-head{
    display:flex; align-items:center; gap:14px;
    padding:16px 20px;
    cursor:default;
  }
  .track-id{
    font-family:var(--mono); font-size:12px; color:var(--bg);
    background:var(--cue);
    padding:3px 8px; border-radius:2px;
    min-width:34px; text-align:center; font-weight:600;
  }
  .track-name{
    font-family:var(--display); font-size:22px; letter-spacing:0.02em;
  }
  .track-body{
    padding:0 20px 22px 20px;
    display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
    gap:10px 24px;
    color:var(--ink-dim); font-size:14px;
  }
  .track-body div{
    display:flex; gap:9px; align-items:flex-start;
  }
  .track-body div::before{
    content:"▸"; color:var(--rec); font-size:12px; margin-top:2px;
  }

  /* ---------- Workflow ---------- */
  .workflow{
    display:grid; grid-template-columns:repeat(5,1fr); gap:0;
    border:1px solid var(--line); border-radius:4px; overflow:hidden;
  }
  .wf-step{
    padding:26px 18px; border-right:1px solid var(--line);
    background:var(--bg-alt);
  }
  .wf-step:last-child{ border-right:none; }
  .wf-num{
    font-family:var(--mono); color:var(--cue); font-size:12px; margin-bottom:14px;
  }
  .wf-name{
    font-family:var(--display); font-size:19px; letter-spacing:0.02em; margin-bottom:8px;
  }
  .wf-desc{ font-size:13px; color:var(--ink-dim); line-height:1.55; }
  @media (max-width:900px){
    .workflow{ grid-template-columns:1fr 1fr; }
    .wf-step{ border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
  }
  @media (max-width:560px){ .workflow{ grid-template-columns:1fr; } }

  /* ---------- Experience ---------- */
  .job{
    display:grid; grid-template-columns:220px 1fr; gap:34px;
    padding:34px 0; border-bottom:1px solid var(--line);
  }
  .job:last-child{ border-bottom:none; }
  .job-meta .job-org{
    font-family:var(--display); font-size:24px; letter-spacing:0.02em; margin-bottom:6px;
  }
  .job-meta .job-role{ font-size:13px; color:var(--ink-dim); }
  .job-links{ display:flex; flex-direction:column; gap:4px; margin-top:12px; }
  .job-links a{
    font-family:var(--mono); font-size:11.5px; color:var(--ink-faint);
    text-decoration:none; border-bottom:1px solid transparent;
  }
  .job-links a:hover{ color:var(--cue); border-color:var(--cue); }
  .job-list{ color:var(--ink-dim); font-size:14.5px; }
  .job-list li{ margin-bottom:8px; list-style:none; padding-left:18px; position:relative; }
  .job-list li::before{
    content:"—"; position:absolute; left:0; color:var(--ink-faint);
  }
  .stat-row{
    display:flex; gap:28px; margin-top:16px; flex-wrap:wrap;
  }
  .stat{
    font-family:var(--mono); border-left:2px solid var(--cue); padding-left:12px;
  }
  .stat .num{ font-size:22px; color:var(--ink); display:block; }
  .stat .lbl{ font-size:10.5px; color:var(--ink-faint); letter-spacing:0.06em; }
  @media (max-width:700px){ .job{ grid-template-columns:1fr; } }

  /* ---------- Skills / Tools ---------- */
  .skill-cols{
    display:grid; grid-template-columns:repeat(3,1fr); gap:34px;
  }
  .skill-cols h4{
    font-family:var(--mono); font-size:11px; color:var(--rec);
    letter-spacing:0.1em; margin-bottom:16px; text-transform:uppercase;
  }
  .chips{ display:flex; flex-wrap:wrap; gap:8px; }
  .chip{
    font-size:12.5px; padding:7px 12px; border:1px solid var(--line);
    border-radius:20px; color:var(--ink-dim);
  }
  @media (max-width:760px){ .skill-cols{ grid-template-columns:1fr; } }

  /* ---------- Focus ---------- */
  .focus-grid{
    display:flex; flex-wrap:wrap; gap:10px;
  }
  .focus-chip{
    font-family:var(--mono); font-size:13px;
    border:1px solid var(--line); background:var(--bg-alt);
    padding:10px 16px; border-radius:3px; color:var(--ink);
  }

  /* ---------- Portfolio ---------- */
  .reel-kicker{
    font-family:var(--mono); font-size:11px; color:var(--ink-faint);
    letter-spacing:0.1em; margin:0 0 14px; text-transform:uppercase;
  }
  .reel-grid-wide{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:16px; margin-bottom:34px;
  }
  .reel-grid-tall{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
    gap:16px; max-width:620px;
  }
  .reel-card{
    border:1px solid var(--line);
    border-radius:5px;
    position:relative; overflow:hidden;
    text-decoration:none; color:inherit;
    display:block;
    background:var(--bg-alt);
    transition:border-color .15s ease, transform .15s ease;
  }
  .reel-card:hover{ border-color:var(--cue); transform:translateY(-3px); }
  .reel-card.wide{ aspect-ratio:16/9; }
  .reel-card.tall{ aspect-ratio:9/16; }
  .reel-card .rc-thumb{
    width:100%; height:100%; object-fit:cover; display:block;
    filter:saturate(0.9) brightness(0.85);
    transition:filter .15s ease, transform .3s ease;
  }
  .reel-card:hover .rc-thumb{ filter:saturate(1) brightness(0.65); transform:scale(1.03); }
  .reel-card .rc-overlay{
    position:absolute; inset:0;
    display:flex; flex-direction:column; justify-content:space-between;
    padding:12px;
    background:linear-gradient(180deg, rgba(11,13,16,0.55) 0%, transparent 26%, transparent 60%, rgba(11,13,16,0.85) 100%);
    pointer-events:none;
  }
  .reel-card .rc-top{
    display:flex; justify-content:space-between; font-family:var(--mono); font-size:10px; color:var(--ink);
  }
  .reel-card .rc-tag{
    font-size:12px; color:var(--ink); font-weight:600;
  }
  .rc-play{
    align-self:center; justify-self:center; margin:auto;
    width:46px; height:46px; border-radius:50%;
    background:rgba(11,13,16,0.55); border:1px solid rgba(237,237,230,0.4);
    display:flex; align-items:center; justify-content:center;
    color:var(--ink); font-size:14px;
    backdrop-filter:blur(2px);
    transition:background .15s ease, border-color .15s ease;
  }
  .reel-card:hover .rc-play{ background:var(--rec); border-color:var(--rec); }

  .portfolio-note{
    margin-top:26px; font-size:14px; color:var(--ink-dim);
  }
  .portfolio-note a{ color:var(--cue); text-decoration:none; border-bottom:1px solid rgba(255,200,87,0.4); }
  .portfolio-note a:hover{ border-color:var(--cue); }

  /* ---------- Contact / Footer ---------- */
  footer{
    padding:90px 0 50px;
    border-top:1px solid var(--line);
  }
  .cf-title{
    font-family:var(--display);
    font-size:clamp(38px,6vw,72px);
    line-height:0.98;
    max-width:760px;
  }
  .cf-title .accent{ color:var(--rec); }
  .cf-row{
    margin-top:36px;
    display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:28px;
  }
  .cf-links{ display:flex; flex-direction:column; gap:8px; font-family:var(--mono); font-size:13px; }
  .cf-links a{ text-decoration:none; color:var(--ink-dim); }
  .cf-links a:hover{ color:var(--cue); }
  .cf-avail{
    font-size:12px; color:var(--ink-faint); letter-spacing:0.04em;
    display:flex; gap:8px; align-items:center;
  }
  .cf-avail .dot{ width:6px; height:6px; border-radius:50%; background:var(--rec); animation:blink 1.6s infinite; }
  .foot-bottom{
    margin-top:60px; padding-top:20px; border-top:1px solid var(--line);
    display:flex; justify-content:space-between; font-size:11px; color:var(--ink-faint);
    font-family:var(--mono); flex-wrap:wrap; gap:10px;
  }