:root{--bg:#0b0b0c;--panel:#141416;--line:#26262a;--text:#e9e7e3;--muted:#8d8b87;--accent:#e0a458}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
.draft-banner{background:var(--accent);color:#111;text-align:center;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;padding:.35rem;font-weight:600}
.placeholder{background:repeating-linear-gradient(135deg,#151517 0 14px,#19191c 14px 28px);border:1px dashed #333;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;text-align:center;padding:1rem}
.hero{position:relative;min-height:min(88vh,860px);display:flex;align-items:flex-end;overflow:hidden}
.reel{position:absolute;inset:0}
.reel-placeholder img{width:100%;height:100%;object-fit:cover;object-position:60% 35%;filter:brightness(1.05) contrast(1.02)}
.reel-note{position:absolute;right:6vw;top:5vh;z-index:3;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);border:1px solid #444;padding:.35rem .7rem;background:rgba(0,0,0,.4)}
.reel-placeholder,#reel-frame,#reel-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
#reel-frame iframe{pointer-events:none;transform:scale(1.35)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(11,11,12,.92) 0%,rgba(11,11,12,.55) 22%,rgba(11,11,12,0) 50%),linear-gradient(to right,rgba(11,11,12,.45) 0%,rgba(11,11,12,0) 45%),rgba(11,11,12,.08);pointer-events:none}
.hero-text{position:relative;z-index:2;text-shadow:0 1px 14px rgba(0,0,0,.55);padding:0 6vw clamp(2.5rem,7vh,4.5rem);width:100%}
h1{font-size:clamp(2.6rem,8vw,6.5rem);font-weight:700;letter-spacing:-.03em;line-height:1}
.tagline{color:var(--accent);margin-top:.8rem;font-size:clamp(.95rem,2vw,1.2rem);letter-spacing:.04em}
.nav{margin-top:1.6rem;display:flex;flex-wrap:wrap;gap:1.4rem;font-size:.8rem;text-transform:uppercase;letter-spacing:.16em}
.nav a{text-decoration:none;color:#cfccc6}.nav a:hover{color:var(--text)}
.sound-toggle{position:absolute;z-index:3;right:6vw;top:5vh;background:rgba(0,0,0,.55);color:var(--text);border:1px solid var(--accent);padding:.55rem 1rem;font:inherit;font-size:.8rem;letter-spacing:.1em;cursor:pointer}
.section{padding:clamp(4rem,12vh,8rem) 6vw 0}
.section.narrow{max-width:900px}
h2{font-size:.8rem;text-transform:uppercase;letter-spacing:.22em;color:var(--accent);margin-bottom:2rem;font-weight:600}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem}
.grid{grid-template-columns:repeat(4,1fr)}
.tile img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 25%;background:var(--panel);filter:saturate(.9)}
.tile-wide{grid-column:1/-1}
.tile-wide img{aspect-ratio:2.39/1;object-position:50% 40%}
.tile figcaption{display:flex;justify-content:space-between;padding:.7rem 0;border-bottom:1px solid var(--line);font-size:.9rem}
.tile em{font-style:normal;color:var(--accent);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}
.bio{display:grid;grid-template-columns:minmax(0,340px) minmax(0,640px);gap:3.5rem;align-items:center}
.bio-photo{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:40% 30%;display:block}
#bio p{font-size:clamp(1.05rem,1.8vw,1.3rem);color:#d6d3cd}
.draft-note{display:inline-block;border:1px solid var(--accent);color:var(--accent);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;padding:.25rem .6rem;margin-bottom:1.4rem}
.credits{list-style:none}
.credits li{display:grid;grid-template-columns:1.3fr 1.5fr .6fr;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--line)}
.credits li span:nth-child(2){color:var(--muted)}.credits li span:last-child{text-align:right;color:var(--muted)}
.services{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.services li{background:var(--bg);padding:2.2rem 1.2rem;font-size:1.1rem;font-weight:500}
.contact .email{font-size:clamp(1.4rem,4vw,2.4rem);text-decoration:none;border-bottom:2px solid var(--accent)}
.contact p{margin-bottom:.8rem;color:var(--muted)}
.footer{margin-top:clamp(5rem,14vh,9rem);padding:3rem 6vw;border-top:1px solid var(--line);font-size:.85rem}
.also,.socials{display:flex;flex-wrap:wrap;gap:1.6rem;align-items:baseline;margin-bottom:1.4rem}
.also .label,.handle{text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;color:var(--accent)}
.footer a{text-decoration:none}.footer a:hover{color:var(--accent)}
.also small{display:block;color:var(--muted);font-size:.7rem;letter-spacing:.06em}
.copy{color:var(--muted);font-size:.75rem}
@media (max-width:900px){.grid{grid-template-columns:1fr 1fr}}
@media (max-width:760px){
 .bio{grid-template-columns:1fr;gap:2rem}
 .bio-photo{max-width:420px}
 .services{grid-template-columns:1fr 1fr}
 .credits li{grid-template-columns:1fr;gap:.15rem}
 .credits li span:last-child{text-align:left}
 .hero{min-height:min(78vh,700px)}
}
/* Role categories */
.tagline-sub{color:var(--text);opacity:.8;margin-top:.25rem;font-size:clamp(.85rem,1.6vw,1rem);letter-spacing:.14em;text-transform:uppercase}
.cat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;align-items:start}
.category{display:flex;flex-direction:column;gap:1.2rem}
.cat-head{min-height:11.5rem}
.cat-head h3{font-size:clamp(1.3rem,2.2vw,1.9rem);font-weight:600;letter-spacing:-.02em;line-height:1.15}
.category-dp .cat-head h3{color:var(--text)}
.cat-head p{color:var(--muted);margin-top:.6rem;font-size:.92rem}
.cat-num{display:block;color:var(--accent);font-size:.75rem;letter-spacing:.2em;margin-bottom:.5rem}
.category .tile img{aspect-ratio:4/5;object-position:50% 30%}
.category .tile-still img{aspect-ratio:2/1;object-position:50% 45%;filter:none}
.category .tile-wide img{aspect-ratio:4/3;object-position:50% 50%}
.services{grid-template-columns:repeat(3,1fr)}
.services-note{color:var(--muted);margin-top:1.2rem}
@media (max-width:760px){
 .cat-row{grid-template-columns:1fr;gap:3.5rem}
 .cat-head{min-height:0}
 .services{grid-template-columns:1fr}
}