/* ============================================================
   TOKENS — single source of truth for all values
   ============================================================ */
:root {
  /* Colors */
  --c-bg:         #0F0D0B;
  --c-fg:         #F0EEE8;
  --c-fg-dim:     #EDE8E0;
  --c-accent:     #1D9E75;
  --c-accent-hi:  #9FE1CB;
  --c-accent-md:  #5DCAA5;
  --c-accent-dk:  #04342C;

  /* Typography */
  --font-sans:    'Space Grotesk', sans-serif;
  --font-mono:    'Space Mono', monospace;

  /* Borders */
  --border:       1px solid rgba(240,238,232,0.07);
  --border-faint: 1px solid rgba(240,238,232,0.05);

  /* Layout */
  --max-w:        1200px;
  --pad-x:        40px;
  --pad-x-sm:     24px;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0;}
a{color:inherit;text-decoration:none;}
body{font-family:var(--font-sans);background:var(--c-bg);color:var(--c-fg);min-height:100vh;}

/* ============================================================
   TEXTURES
   ============================================================ */
.grain{position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.vignette{position:fixed;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 50% 0%,transparent 40%,rgba(8,6,4,.55) 100%);}
.scanlines{position:fixed;inset:0;pointer-events:none;z-index:-1;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,.04) 3px,rgba(0,0,0,.04) 4px);}
.warm-bar{position:fixed;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--c-accent) 30%,var(--c-accent-hi) 60%,transparent);opacity:.5;z-index:5;}
.content{position:relative;z-index:3;}

/* ============================================================
   TYPOGRAPHY — monospace family declared once for all mono elements
   ============================================================ */
.nl,.na,
.bc,.bc-sep,.bc-cur,
.pl,.pt2,.pc,
.cl,.cd,
.ft-client,.ft-dur,
.t-num,.t-meta,.t-tag,.t-dur,
.vt-meta,.vt-tag,
.vp-label,.video-client,
.avail-txt,
.projects-label,.project-client,.project-tag,.project-collab,
.regie-img-tag,
.mode-btn,.tl-filter,
.carousel-loading,.logo-card,
.tag{font-family:var(--font-mono);}

/* Accent / dim modifiers — used on spans inside headings across all pages */
.acc{color:var(--c-accent);}
.dim{color:rgba(240,238,232,0.15);}

/* ============================================================
   NAV
   ============================================================ */
nav{display:flex;justify-content:space-between;align-items:center;padding:14px var(--pad-x);border-bottom:var(--border);}
.nl{font-size:18px;font-weight:700;letter-spacing:0.05em;color:var(--c-fg);text-decoration:none;}
.nl span{color:var(--c-accent);}
.nr{display:flex;gap:24px;align-items:center;}
.na{font-size:10px;text-transform:uppercase;letter-spacing:0.12em;color:rgba(240,238,232,0.38);text-decoration:none;transition:color .15s;}
.na:hover{color:rgba(240,238,232,0.7);}
.nc{font-size:12px;font-weight:600;background:var(--c-accent);color:var(--c-accent-dk);padding:9px 20px;border-radius:4px;border:none;cursor:pointer;letter-spacing:0.02em;text-decoration:none;}
.nc:hover{background:var(--c-accent-md);}

/* Dropdown */
.nav-drop{position:relative;}
.nav-drop > .na::after{content:'▾';margin-left:5px;font-size:8px;opacity:.5;display:inline-block;transition:transform .2s;}
.nav-drop:hover > .na{color:rgba(240,238,232,0.7);}
.nav-drop:hover > .na::after{transform:rotate(180deg);}
.nav-drop-menu{
  position:absolute;top:calc(100% + 14px);left:50%;
  transform:translateX(-50%) translateY(-6px);
  background:#1A1714;border:var(--border);border-radius:6px;
  padding:6px;min-width:180px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s,transform .18s,visibility .18s;
  z-index:100;
}
/* Invisible bridge that fills the gap between trigger and menu */
.nav-drop-menu::before{
  content:'';position:absolute;top:-14px;left:0;right:0;height:14px;
}
.nav-drop:hover .nav-drop-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);}
.nav-drop-item{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:9px 12px;border-radius:4px;text-decoration:none;
  transition:background .12s;
}
.nav-drop-item:hover{background:rgba(240,238,232,0.06);}
.nav-drop-item-label{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:0.12em;color:rgba(240,238,232,0.6);}
.nav-drop-item:hover .nav-drop-item-label{color:var(--c-fg);}
.nav-drop-item-tag{font-family:var(--font-mono);font-size:8px;text-transform:uppercase;letter-spacing:0.08em;color:rgba(240,238,232,0.2);}
.nav-drop-sep{height:1px;background:rgba(240,238,232,0.06);margin:4px 0;}

/* ============================================================
   BUTTONS
   ============================================================ */
.ap{font-size:14px;font-weight:600;background:var(--c-fg-dim);color:var(--c-bg);padding:13px 28px;border-radius:4px;border:none;cursor:pointer;letter-spacing:-0.01em;text-decoration:none;display:inline-block;}
.ap:hover{background:#fff;}
.as{font-size:14px;font-weight:400;background:transparent;color:var(--c-fg);padding:13px 28px;border-radius:4px;border:1px solid rgba(240,238,232,0.16);cursor:pointer;text-decoration:none;display:inline-block;}
.as:hover{border-color:rgba(240,238,232,0.4);}

/* ============================================================
   BADGES & TAGS — shared base, with per-context overrides
   ============================================================ */
/* Base: track tags and project tags are identical */
.t-tag,.vt-tag,.project-tag{
  font-size:9px;text-transform:uppercase;letter-spacing:0.08em;
  padding:4px 8px;border:1px solid rgba(240,238,232,0.1);border-radius:2px;
  color:rgba(240,238,232,0.3);
}
/* Hero pills — slightly larger variant */
.tag{
  font-size:10px;text-transform:uppercase;letter-spacing:0.1em;
  padding:5px 10px;border:1px solid rgba(240,238,232,0.12);border-radius:3px;
  color:rgba(240,238,232,0.35);text-decoration:none;
}
/* Active / accent states */
.tag.on{border-color:rgba(29,158,117,0.6);color:var(--c-accent-md);}
/* Clickable tags */
a.tag{transition:border-color .2s,box-shadow .2s,transform .2s,color .2s;}
a.tag::after{content:'↗';font-size:8px;margin-left:5px;opacity:0.45;display:inline-block;transition:opacity .2s;}
a.tag:hover{transform:translateY(-2px);border-color:rgba(29,158,117,0.9);box-shadow:0 0 10px rgba(29,158,117,0.25);color:var(--c-accent);}
a.tag:hover::after{opacity:0.9;}
.track.active .t-tag,.vtrack.active .vt-tag{border-color:rgba(29,158,117,0.4);color:var(--c-accent-md);}

/* ============================================================
   BREADCRUMB — subpages only
   ============================================================ */
.breadcrumb{padding:22px var(--pad-x) 0;display:flex;align-items:center;gap:8px;}
.bc{font-size:10px;text-transform:uppercase;letter-spacing:0.12em;color:rgba(240,238,232,0.22);text-decoration:none;transition:color .15s;}
.bc:hover{color:rgba(240,238,232,0.5);}
.bc-sep{font-size:10px;color:rgba(240,238,232,0.12);}
.bc-cur{font-size:10px;text-transform:uppercase;letter-spacing:0.12em;color:var(--c-accent);}

/* ============================================================
   PAGE HEADER — reusable on all service subpages
   ============================================================ */
.page-header{padding:48px var(--pad-x) 64px;max-width:var(--max-w);margin:0 auto;display:grid;grid-template-columns:1fr auto;align-items:end;gap:40px;border-bottom:var(--border);}
.ph-title{font-size:clamp(48px,7vw,88px);font-weight:700;line-height:.95;letter-spacing:-0.04em;}
.ph-right{display:flex;flex-direction:column;align-items:flex-end;gap:20px;padding-bottom:6px;}
.ph-sub{font-size:14px;font-weight:300;color:rgba(240,238,232,0.4);line-height:1.7;max-width:200px;text-align:right;}
.avail{display:flex;align-items:center;gap:7px;}
.avail-dot{width:5px;height:5px;border-radius:50%;background:var(--c-accent);animation:pulse 2.5s ease-in-out infinite;}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(29,158,117,0.5);}50%{box-shadow:0 0 0 5px rgba(29,158,117,0);}}
.avail-txt{font-size:9px;text-transform:uppercase;letter-spacing:0.12em;color:rgba(240,238,232,0.3);}

/* ============================================================
   SPECS STRIP — reusable on all service subpages
   ============================================================ */
.specs-strip{border-top:var(--border);max-width:var(--max-w);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);padding:0 var(--pad-x);}
.spec{padding:32px 0;border-right:var(--border);}
.spec:last-child{border-right:none;}
.spec:not(:first-child){padding-left:32px;}
.spec-label{font-size:9px;text-transform:uppercase;letter-spacing:0.12em;color:rgba(240,238,232,0.2);margin-bottom:10px;}
.spec-val{font-size:15px;font-weight:500;color:var(--c-fg-dim);line-height:1.4;}
.spec-sub{font-size:11px;color:rgba(240,238,232,0.28);margin-top:5px;line-height:1.5;}

/* ============================================================
   CTA BLOCK — reusable on all service subpages
   ============================================================ */
.cta{border-top:var(--border);max-width:var(--max-w);margin:0 auto;padding:64px var(--pad-x);display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;}
.cta-copy h2{font-size:clamp(24px,3.5vw,44px);font-weight:700;letter-spacing:-0.03em;line-height:1;margin-bottom:10px;}
.cta-copy p{font-size:14px;color:rgba(240,238,232,0.35);max-width:380px;line-height:1.65;}
.cta-btns{display:flex;gap:10px;flex-wrap:wrap;flex-shrink:0;}

/* ============================================================
   HOME — HERO
   ============================================================ */
.hero{display:grid;grid-template-columns:minmax(0,55%) minmax(0,45%);gap:48px;align-items:start;padding:72px var(--pad-x) 48px;max-width:var(--max-w);margin:0 auto;}
.hero-copy{min-width:0;}
.hero-image{position:relative;overflow:hidden;border-radius:24px;background:#111;}
.hero-image::after{content:'';position:absolute;inset:0;background:rgba(58,124,90,0.18);mix-blend-mode:color;pointer-events:none;border-radius:inherit;z-index:1;}
.hero-image img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(50%) contrast(1.05) brightness(0.88);}
.hero-image__overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,13,11,0.95) 0%,rgba(15,13,11,0.75) 25%,rgba(15,13,11,0.2) 55%,transparent 100%);pointer-events:none;z-index:2;}
.tag-row{display:flex;gap:8px;margin-bottom:40px;flex-wrap:wrap;}
h1{font-size:clamp(44px,7vw,80px);font-weight:700;line-height:1;letter-spacing:-0.03em;color:var(--c-fg);margin-bottom:32px;}
h1 a{text-decoration:none;transition:color .18s;}
.sub{font-size:16px;font-weight:300;color:rgba(240,238,232,0.5);line-height:1.65;max-width:520px;margin-bottom:48px;}
.sub b{color:var(--c-fg-dim);font-weight:500;}
.actions{display:flex;gap:12px;margin-bottom:64px;flex-wrap:wrap;}

/* ============================================================
   HOME — PLAYER
   ============================================================ */
.bottom{display:grid;grid-template-columns:1fr 1fr;border-top:var(--border);max-width:var(--max-w);margin:0 auto;padding:0 var(--pad-x);}
.player{padding:28px var(--pad-x) 28px 0;border-right:var(--border);display:flex;flex-direction:column;}
.player-cta{flex:1;display:flex;align-items:center;}
.pl{font-size:10px;text-transform:uppercase;letter-spacing:0.12em;color:rgba(240,238,232,0.28);margin-bottom:16px;}
.pt{font-size:14px;font-weight:500;color:var(--c-fg-dim);margin-bottom:3px;}
.pc{font-size:12px;color:rgba(240,238,232,0.3);margin-bottom:18px;}
.pcontrols{display:flex;align-items:center;gap:12px;}
.pbtn{width:36px;height:36px;border-radius:3px;background:var(--c-accent);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s;}
.pbtn:hover{background:var(--c-accent-md);}
.picon{width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:11px solid var(--c-accent-dk);margin-left:2px;}
.ppause{display:none;gap:3px;}
.ppbar{width:3px;height:12px;background:var(--c-accent-dk);border-radius:1px;}
.wv{flex:1;height:32px;display:flex;align-items:center;gap:2px;cursor:pointer;}
.wb{border-radius:1px;background:rgba(240,238,232,0.1);transition:background 0.1s;}
.wb.a{background:var(--c-accent);}
.pt2{font-size:11px;color:rgba(240,238,232,0.3);min-width:30px;text-align:right;}

/* ============================================================
   HOME — CLIENT LIST
   ============================================================ */
.clients{padding:28px 0 28px var(--pad-x);}
.cl{font-size:10px;text-transform:uppercase;letter-spacing:0.12em;color:rgba(240,238,232,0.28);margin-bottom:20px;}
.ci{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 0;border-bottom:var(--border-faint);}
.ci:last-child{border-bottom:none;}

.cn{font-size:13px;font-weight:500;color:var(--c-fg-dim);}
.cd{font-size:11px;text-transform:uppercase;letter-spacing:0.08em;color:rgba(240,238,232,0.3);}
.dot{width:5px;height:5px;border-radius:50%;background:var(--c-accent);}

/* ============================================================
   HOME — PARTNER CAROUSEL
   ============================================================ */
.partner-carousel{padding:48px var(--pad-x) 64px;max-width:var(--max-w);margin:0 auto;}
.carousel-header{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:0px;}
.carousel-copy{font-size:13px;color:rgba(240,238,232,0.55);max-width:520px;line-height:1.6;}
.carousel-view{overflow-x:hidden;overflow-y:visible;position:relative;padding:8px 0;}
.carousel-track{display:flex;width:max-content;align-items:center;animation:carousel-slide 40s linear infinite;}
.carousel-track .logo-card,.carousel-track .carousel-loading{flex-shrink:0;margin-right:18px;}
.carousel-track:hover{animation-play-state:paused;}
.carousel-loading{min-width:170px;height:96px;display:flex;align-items:center;justify-content:center;color:rgba(240,238,232,0.6);font-size:13px;}
.logo-card{min-width:170px;height:96px;display:flex;align-items:center;justify-content:center;border-radius:14px;background:rgba(29,158,117,0.14);color:var(--c-fg-dim);font-weight:700;letter-spacing:0.08em;text-transform:uppercase;box-shadow:0 0 0 1px rgba(240,238,232,0.08);transition:transform .3s,filter .3s,background .3s,color .3s;filter:grayscale(1) contrast(0.95);cursor:pointer;}
.logo-card:hover{transform:translateY(-4px);filter:none;background:var(--brand-bg);color:var(--brand-color);}
.logo-card svg{height:32px;width:auto;max-width:110px;overflow:visible;}
.logo-card svg *{fill:currentColor;stroke:currentColor;}
.logo--a{--brand-bg:#EDE8E0;--brand-color:#0F0D0B;}
.logo--b{--brand-bg:#1D9E75;--brand-color:#04342C;}
.logo--c{--brand-bg:#FACC15;--brand-color:#111827;}
.logo--d{--brand-bg:#E11D48;--brand-color:#ffffff;}
.logo--e{--brand-bg:#2563EB;--brand-color:#ffffff;}
.logo--f{--brand-bg:#8B5CF6;--brand-color:#ffffff;}
.logo--g{--brand-bg:#F97316;--brand-color:#111827;}
.logo--h{--brand-bg:#0EA5E9;--brand-color:#ffffff;}
@keyframes carousel-slide{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}

/* ============================================================
   VOICEOVER — MODE TOGGLE + TAB FILTERS
   ============================================================ */
.portfolio{max-width:var(--max-w);margin:0 auto;padding:0 var(--pad-x);}
.portfolio-header{display:flex;justify-content:space-between;align-items:center;padding:40px 0 0;}
.mode-toggle{display:flex;background:rgba(240,238,232,0.05);border:1px solid rgba(240,238,232,0.08);border-radius:4px;padding:3px;gap:2px;}
.mode-btn{font-size:10px;text-transform:uppercase;letter-spacing:0.1em;padding:8px 16px;border-radius:2px;border:none;cursor:pointer;background:transparent;color:rgba(240,238,232,0.35);transition:all .2s;}
.mode-btn.on{background:var(--c-accent);color:var(--c-accent-dk);}
.mode-btn:not(.on):hover{color:rgba(240,238,232,0.65);}
.tl-filters{display:flex;border-bottom:var(--border);}
.tl-filter{font-size:10px;text-transform:uppercase;letter-spacing:0.1em;padding:12px 16px;background:transparent;border:none;border-bottom:2px solid transparent;color:rgba(240,238,232,0.28);cursor:pointer;margin-bottom:-1px;transition:all .15s;}
.tl-filter:hover{color:rgba(240,238,232,0.6);}
.tl-filter.on{color:var(--c-accent-md);border-bottom-color:var(--c-accent);}
.panel{transition:opacity .25s;}
.panel.hidden{display:none;}

/* ============================================================
   VOICEOVER — FEATURED AUDIO PLAYER
   ============================================================ */
.ft-player{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;padding:28px 0;border-bottom:var(--border);margin-top:28px;}
.ft-play{width:52px;height:52px;border-radius:4px;background:var(--c-accent);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s;}
.ft-play:hover{background:var(--c-accent-md);}
.ft-play-icon{width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:14px solid var(--c-accent-dk);margin-left:3px;}
.ft-pause{display:none;gap:4px;align-items:center;}
.ft-pause-bar{width:4px;height:16px;background:var(--c-accent-dk);border-radius:1px;}
.ft-player.playing .ft-play-icon{display:none;}
.ft-player.playing .ft-pause{display:flex;}
.ft-title{font-size:22px;font-weight:700;letter-spacing:-0.02em;color:var(--c-fg);margin-bottom:4px;}
.ft-client{font-size:10px;text-transform:uppercase;letter-spacing:0.1em;color:rgba(240,238,232,0.28);margin-bottom:16px;}
.ft-waveform{display:flex;align-items:center;gap:2px;height:36px;cursor:pointer;width:100%;overflow:hidden;}
.ft-wbar{width:3px;flex-shrink:0;border-radius:1px;background:rgba(240,238,232,0.08);transition:background .1s;}
.ft-player.playing .ft-wbar.filled{background:var(--c-accent);}
.ft-player.playing .ft-wbar.active{background:var(--c-accent-hi);}
.ft-dur{font-size:12px;color:rgba(240,238,232,0.25);white-space:nowrap;}

/* ============================================================
   VOICEOVER — AUDIO TRACK LIST
   ============================================================ */
.track{display:grid;grid-template-columns:28px 1fr auto auto;align-items:center;gap:20px;padding:18px 0;border-bottom:var(--border-faint);cursor:pointer;transition:opacity .15s;}
.track:hover{opacity:.7;}
.track.hidden{display:none;}
.t-num{font-size:11px;color:rgba(240,238,232,0.2);text-align:right;}
.t-title{font-size:14px;font-weight:500;color:var(--c-fg-dim);margin-bottom:2px;}
.t-meta{font-size:10px;color:rgba(240,238,232,0.25);}
.t-dur{font-size:11px;color:rgba(240,238,232,0.22);min-width:32px;text-align:right;}
.track.active .t-num{color:var(--c-accent);}
.track.active .t-title{color:var(--c-fg);}

/* ============================================================
   VOICEOVER — VIDEO PANEL
   ============================================================ */
.video-featured{margin-top:28px;border-bottom:var(--border);padding-bottom:28px;}
.video-embed{position:relative;width:100%;aspect-ratio:16/9;background:#111;border-radius:6px;overflow:hidden;margin-bottom:16px;}
.video-embed iframe,.video-embed video{position:absolute;inset:0;width:100%;height:100%;border:none;}
.video-embed-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;cursor:pointer;}
.vp-thumb{position:absolute;inset:0;background:linear-gradient(135deg,#111 0%,#1a1a14 100%);}
.vp-thumb-lines{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent,transparent 60px,rgba(29,158,117,0.03) 60px,rgba(29,158,117,0.03) 61px);}
.vp-play{width:60px;height:60px;border-radius:50%;border:1.5px solid rgba(240,238,232,0.3);display:flex;align-items:center;justify-content:center;position:relative;z-index:1;transition:all .2s;background:rgba(15,13,11,0.6);}
.vp-play:hover{border-color:var(--c-accent);background:rgba(29,158,117,0.15);}
.vp-play-icon{width:0;height:0;border-top:9px solid transparent;border-bottom:9px solid transparent;border-left:16px solid rgba(240,238,232,0.7);margin-left:4px;}
.vp-label{font-size:9px;text-transform:uppercase;letter-spacing:0.12em;color:rgba(240,238,232,0.3);position:relative;z-index:1;}
.video-title{font-size:20px;font-weight:700;letter-spacing:-0.02em;color:var(--c-fg);margin-bottom:4px;}
.video-client{font-size:10px;text-transform:uppercase;letter-spacing:0.1em;color:rgba(240,238,232,0.28);}
.video-list{padding-bottom:48px;}
.vtrack{display:grid;grid-template-columns:80px 1fr auto;align-items:center;gap:16px;padding:14px 0;border-bottom:var(--border-faint);cursor:pointer;transition:opacity .15s;}
.vtrack:hover{opacity:.7;}
.vtrack.hidden{display:none;}
.vtrack.active .vt-title{color:var(--c-fg);}
.vt-thumb{width:80px;height:48px;background:#1a1a14;border-radius:3px;overflow:hidden;position:relative;flex-shrink:0;}
.vt-thumb-bg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.vt-mini-play{width:20px;height:20px;border-radius:50%;border:1px solid rgba(240,238,232,0.2);display:flex;align-items:center;justify-content:center;}
.vt-mini-icon{width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:7px solid rgba(240,238,232,0.4);margin-left:1px;}
.vtrack.active .vt-mini-play{border-color:var(--c-accent);}
.vtrack.active .vt-mini-icon{border-left-color:var(--c-accent);}
.vt-title{font-size:13px;font-weight:500;color:rgba(240,238,232,0.7);margin-bottom:3px;line-height:1.3;}
.vt-meta{font-size:10px;color:rgba(240,238,232,0.22);}

/* ============================================================
   REGIE — HERO VISUAL
   ============================================================ */
.regie-visual{max-width:var(--max-w);margin:0 auto;padding:40px var(--pad-x) 0;}
.regie-img-wrap{position:relative;border-radius:10px;overflow:hidden;height:460px;}
.regie-img-wrap img{width:100%;height:100%;object-fit:cover;object-position:center 30%;filter:grayscale(35%) contrast(1.05) brightness(0.82);}
.regie-img-wrap::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(15,13,11,0.75) 0%,rgba(15,13,11,0.15) 55%,transparent 100%);pointer-events:none;}
.regie-img-cap{position:absolute;bottom:24px;left:28px;z-index:1;}
.regie-img-tag{font-size:9px;text-transform:uppercase;letter-spacing:0.12em;color:rgba(240,238,232,0.35);}

/* ============================================================
   REGIE — PROJECT LIST
   ============================================================ */
.projects{max-width:var(--max-w);margin:0 auto;padding:0 var(--pad-x);}
.projects-label{font-size:10px;text-transform:uppercase;letter-spacing:0.12em;color:rgba(240,238,232,0.28);display:block;border-bottom:var(--border);}
.projects-label span{display:block;padding:40px 0 16px;}
.project{display:grid;grid-template-columns:1fr auto;align-items:start;gap:24px;padding:28px 0;border-bottom:var(--border);}
.project-client{font-size:9px;text-transform:uppercase;letter-spacing:0.12em;color:var(--c-accent);margin-bottom:8px;}
.project-title{font-size:18px;font-weight:700;letter-spacing:-0.02em;color:var(--c-fg);margin-bottom:10px;line-height:1.15;}
.project-desc{font-size:13px;font-weight:300;color:rgba(240,238,232,0.42);line-height:1.7;max-width:560px;}
.project-collab{font-size:9px;color:rgba(240,238,232,0.2);margin-top:8px;font-style:italic;}
.project-aside{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex-shrink:0;padding-top:4px;}

/* ============================================================
   REGIE — ATMOSPHERIC STRIP
   ============================================================ */
.visual-strip{overflow:hidden;height:280px;position:relative;}
.visual-strip img{width:100%;height:100%;object-fit:cover;object-position:center 45%;filter:grayscale(45%) contrast(1.08) brightness(0.7);}
.visual-strip::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,13,11,0.7) 0%,rgba(15,13,11,0.2) 50%,rgba(15,13,11,0.6) 100%);}

/* ============================================================
   OVER — BIO INTRO
   ============================================================ */
.about-intro{max-width:var(--max-w);margin:0 auto;padding:56px var(--pad-x) 0;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;}
.about-photo-wrap{border-radius:10px;overflow:hidden;aspect-ratio:3/4;max-height:520px;}
.about-photo-wrap img{width:100%;height:100%;object-fit:cover;object-position:center top;filter:grayscale(35%) contrast(1.05) brightness(0.85);}
.about-bio{display:flex;flex-direction:column;gap:20px;padding-top:8px;}
.about-bio-label{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:0.14em;color:var(--c-accent);margin-bottom:4px;}
.about-bio-text{font-size:15px;font-weight:300;color:rgba(240,238,232,0.55);line-height:1.75;}
.about-bio-text em{font-style:normal;color:rgba(240,238,232,0.7);}
.about-bio-cta{margin-top:12px;align-self:flex-start;}

/* ============================================================
   OVER — CLIENTS STRIP
   ============================================================ */
.about-clients{max-width:var(--max-w);margin:0 auto;padding:48px var(--pad-x);border-top:var(--border);border-bottom:var(--border);}
.about-clients-label{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:0.14em;color:rgba(240,238,232,0.22);margin-bottom:20px;}
.about-clients-list{display:flex;flex-wrap:wrap;align-items:center;gap:12px 0;}
.about-client-name{font-size:14px;font-weight:500;color:rgba(240,238,232,0.45);}
.about-client-sep{font-size:12px;color:rgba(240,238,232,0.12);margin:0 12px;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:767px){
  /* Nav */
  nav{padding:18px var(--pad-x-sm);}
  .nr .na{display:none;}
  .nav-drop{display:none;}

  /* Hero */
  .hero{display:block;padding:48px var(--pad-x-sm) 0;}
  .hero-image{display:none;}

  /* Home bottom grid */
  .bottom{grid-template-columns:1fr;padding:0 var(--pad-x-sm);}
  .player{border-right:none;border-bottom:var(--border);padding:28px 0;}
  .clients{padding:28px 0;}

  /* Subpage layout */
  .breadcrumb,.portfolio,.projects,.specs-strip,.cta,.regie-visual{padding-left:var(--pad-x-sm);padding-right:var(--pad-x-sm);}
  .page-header{padding:40px var(--pad-x-sm) 48px;grid-template-columns:1fr;}
  .ph-right{align-items:flex-start;}
  .ph-sub{text-align:left;max-width:100%;}

  /* Specs */
  .specs-strip{grid-template-columns:1fr 1fr;}
  .spec{padding:24px 0;}
  .spec:nth-child(odd){padding-right:20px;border-right:var(--border);}
  .spec:nth-child(even){padding-left:20px;border-right:none;}

  /* CTA */
  .cta{padding:40px var(--pad-x-sm);flex-direction:column;align-items:flex-start;}

  /* Video tracks */
  .vtrack{grid-template-columns:64px 1fr auto;}
  .vt-thumb{width:64px;height:40px;}

  /* Regie */
  .regie-img-wrap{height:280px;}
  .project{grid-template-columns:1fr;gap:12px;}
  .project-aside{flex-direction:row;align-items:center;}
  .visual-strip{height:180px;}

  /* Over */
  .about-intro{grid-template-columns:1fr;gap:32px;padding:40px var(--pad-x-sm) 0;}
  .about-photo-wrap{aspect-ratio:4/3;max-height:280px;}
  .about-clients{padding:32px var(--pad-x-sm);}
}