:root {
  --bg:#080808; --text:#f2f0eb; --muted:#8e8e8e; --line:#272727;
  --max:1400px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Arial,sans-serif;font-weight:300}
a{color:inherit;text-decoration:none}
.nav{position:fixed;top:0;left:0;width:100%;height:80px;display:flex;align-items:center;justify-content:space-between;padding:0 4vw;z-index:10;mix-blend-mode:difference;color:white}
.logo{font-size:20px;letter-spacing:-1px}
.nav nav{display:flex;gap:34px;font-size:10px;letter-spacing:2px}
.hero{height:100vh;min-height:650px;position:relative;display:flex;align-items:flex-end;overflow:hidden}
.hero-media{position:absolute;inset:0;background:radial-gradient(circle at 60% 30%,#51453c 0,#171513 38%,#050505 75%)}
.hero-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#777;letter-spacing:4px;font-size:11px}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.58),transparent 65%),linear-gradient(0deg,rgba(0,0,0,.72),transparent 55%)}
.hero-content{position:relative;z-index:2;margin:0 4vw 12vh}
.eyebrow{font-size:10px;letter-spacing:3px;color:#aaa;margin:0 0 18px}
h1{font-size:clamp(52px,8vw,122px);font-weight:300;letter-spacing:.06em;line-height:.9;margin:0}
.role{font-size:11px;letter-spacing:4px;margin:24px 0 0;color:#ccc}
.showreel{position:absolute;left:54vw;bottom:13vh;font-size:10px;letter-spacing:2px;display:flex;gap:12px;align-items:center}
.showreel span{border:1px solid #aaa;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:9px}
.scroll{position:absolute;left:4vw;bottom:30px;font-size:8px;letter-spacing:3px;color:#aaa;display:flex;gap:15px;align-items:center}
.scroll i{height:42px;width:1px;background:#aaa;display:block}
.section{max-width:var(--max);margin:auto;padding:120px 4vw;border-top:1px solid var(--line)}
.section-heading{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:48px}
.section-heading>div{display:flex;align-items:center;gap:24px}
.number{font-size:9px;letter-spacing:3px;color:#777}
h2{font-size:20px;font-weight:400;letter-spacing:7px;margin:0}
.section-heading>a{font-size:9px;letter-spacing:2px;color:#aaa}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 18px}
.project-image{height:360px;position:relative;background:#222;overflow:hidden;transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .6s}
.project:nth-child(2) .project-image,.project:nth-child(5) .project-image{height:430px}
.project:hover .project-image{transform:scale(.985);filter:brightness(1.15)}
.project-image span{position:absolute;inset:0;display:grid;place-items:center;opacity:0;font-size:9px;letter-spacing:3px;transition:.4s}
.project:hover .project-image span{opacity:1}
.image-1{background:linear-gradient(135deg,#6d4e3c,#171313 50%,#080808)}
.image-2{background:linear-gradient(155deg,#1c2930,#687276 40%,#0a0a0a)}
.image-3{background:linear-gradient(140deg,#b28e64,#26221e 46%,#090909)}
.image-4{background:linear-gradient(135deg,#102f58,#080b13 55%,#1d1550)}
.image-5{background:linear-gradient(135deg,#7c7062,#282623 48%,#080808)}
.image-6{background:linear-gradient(145deg,#5c4738,#1d1714 50%,#080808)}
.project-info{display:flex;justify-content:space-between;padding-top:14px}
.project-info strong{font-size:10px;font-weight:400;letter-spacing:2px}
.project-info small{font-size:8px;letter-spacing:1.5px;color:#777}
.about{display:grid;grid-template-columns:1fr 1fr;gap:8vw}
.about-photo{min-height:620px;background:linear-gradient(135deg,#111,#34302b 48%,#090909)}
.about-copy{padding-top:10px}
.simple{justify-content:flex-start;gap:24px;margin-bottom:45px}
.simple h2{font-size:18px}
.lead{font-size:20px;line-height:1.6;max-width:680px}
.about-copy p:not(.lead),.contact-copy p:not(.lead){color:#929292;line-height:1.8;font-size:13px;max-width:600px}
.text-link{display:inline-block;margin-top:35px;font-size:9px;letter-spacing:2px;border-bottom:1px solid #777;padding-bottom:8px}
.skills{border-left:1px solid var(--line);margin-top:70px;padding-left:25px;display:flex;flex-direction:column;gap:12px;font-size:9px;letter-spacing:2px;color:#888}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:10vw;min-height:620px}
.email{display:inline-block;margin-top:30px;font-size:14px;border-bottom:1px solid #555;padding-bottom:8px}
.contact-form{display:flex;flex-direction:column;gap:0;padding-top:20px}
.contact-form input,.contact-form textarea{background:none;border:0;border-bottom:1px solid var(--line);padding:18px 0;color:white;font:inherit;font-size:11px;letter-spacing:1px;outline:none;resize:vertical}
.contact-form input:focus,.contact-form textarea:focus{border-color:#888}
.contact-form button{margin-top:28px;background:none;border:0;color:white;text-align:left;padding:0;font:inherit;font-size:9px;letter-spacing:3px;cursor:pointer}
.contact-form button span{margin-left:15px}
footer{border-top:1px solid var(--line);padding:28px 4vw;display:flex;align-items:center;justify-content:space-between;color:#666;font-size:8px;letter-spacing:1px}
footer div{display:flex;gap:20px}
@media(max-width:800px){
  .nav{height:65px;padding:0 6vw}.nav nav{gap:16px;font-size:8px}
  .hero{min-height:650px}.hero-content{margin:0 6vw 13vh}.showreel{left:6vw;bottom:6vh}
  .section{padding:85px 6vw}.grid{grid-template-columns:1fr;gap:45px}
  .project-image,.project:nth-child(2) .project-image,.project:nth-child(5) .project-image{height:62vw;min-height:280px}
  .about,.contact{grid-template-columns:1fr;gap:55px}.about-photo{min-height:430px}
  .section-heading{align-items:flex-start}.section-heading>a{display:none}
  .project-info{flex-direction:column;gap:7px}
  h2{font-size:16px;letter-spacing:5px}
  footer{flex-wrap:wrap;gap:15px}
}
.reveal{opacity:0;transform:translateY(25px);transition:opacity .8s ease,transform .8s ease}
.reveal.visible{opacity:1;transform:none}