:root{--bg:#0e0e0f;--bg2:#121213;--surface:#161617;--line:#262628;--text:#e8e5de;--mut:#8b8982;--dim:#5d5b56;--accent:#b9a77f;--bone:#ece8dd}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,sans-serif;font-weight:300;background:var(--bg);color:var(--text);line-height:1.75;overflow-x:hidden;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;letter-spacing:-.01em;line-height:1.08}
em{font-style:italic;color:var(--accent)}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:#0e0e0f}
.progress{position:fixed;top:0;left:0;height:1px;width:0;background:var(--accent);z-index:100}
.nav{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:26px 6vw;z-index:50;transition:.4s}
.nav.scrolled{background:rgba(14,14,15,.88);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);padding-block:18px}
.wordmark{font-family:'Cormorant Garamond',serif;font-size:1.45rem;font-weight:500;letter-spacing:.02em}
.wordmark span{color:var(--mut);font-size:.7em;letter-spacing:.2em;text-transform:uppercase;font-family:Inter;font-weight:400;margin-left:2px}
.nav nav{display:flex;gap:38px;align-items:center;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mut)}
.nav nav a{transition:.3s}.nav nav a:hover{color:var(--text)}
.nav-cta{color:var(--text)!important;border:1px solid var(--line);padding:10px 22px}.nav-cta:hover{border-color:var(--accent)}
.eyebrow{font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);margin-bottom:26px;font-weight:400}
.btn{display:inline-block;background:var(--bone);color:#0e0e0f;padding:16px 34px;border:1px solid var(--bone);font:400 .74rem Inter;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:.35s}
.btn:hover{background:transparent;color:var(--bone)}
.link{font-size:.8rem;letter-spacing:.08em;color:var(--text);border-bottom:1px solid var(--dim);padding-bottom:3px;transition:.3s;display:inline-block}
.link:hover{border-color:var(--accent);color:var(--accent)}
.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:6vw;align-items:center;min-height:100vh;padding:150px 6vw 90px;max-width:1360px;margin:auto}
h1{font-size:clamp(3.4rem,8.5vw,7.4rem);margin-bottom:34px}
.lead{color:var(--mut);max-width:520px;margin-bottom:46px;font-size:1.05rem}
.cta{display:flex;gap:34px;align-items:center;flex-wrap:wrap}
.card-wrap{perspective:1200px;display:grid;place-items:center}
.bcard{width:min(440px,100%);aspect-ratio:1.75;background:linear-gradient(145deg,#f1ede2,#e3ded0);color:#1a1916;padding:34px 38px;position:relative;box-shadow:0 1px 0 #fff inset,0 40px 80px -30px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.04);transform:rotate(-3deg) rotateY(-6deg);transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.bcard:hover{transform:rotate(0) rotateY(0) translateY(-6px)}
.bcard::after{content:"";position:absolute;inset:10px;border:1px solid rgba(26,25,22,.12);pointer-events:none}
.bcard-top{position:absolute;top:30px;right:36px}
.mono{display:grid;place-items:center;width:34px;height:34px;border:1px solid #1a1916;font-family:'Cormorant Garamond',serif;font-size:1.2rem;font-weight:600}
.bcard-body{height:100%;display:flex;flex-direction:column;justify-content:flex-end}
.bcard h2{font-size:1.9rem;font-weight:600;color:#1a1916;margin-bottom:2px}
.role{font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;color:#6b675c}
.bcard hr{border:0;border-top:1px solid rgba(26,25,22,.25);margin:16px 0 12px;width:44px}
.studio{font-size:.82rem;letter-spacing:.08em;font-weight:500}.small{font-size:.74rem;color:#6b675c}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));border-block:1px solid var(--line);max-width:none}
.facts div{padding:44px 6vw;border-right:1px solid var(--line)}.facts div:last-child{border:0}
.facts b{font:500 2.6rem 'Cormorant Garamond',serif;display:block;line-height:1;margin-bottom:8px}
.facts span{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mut)}
.section{padding:150px 6vw;max-width:1360px;margin:auto}
.section.alt{max-width:none;background:var(--bg2);border-block:1px solid var(--line)}
.section.alt .inner{max-width:1240px;margin:auto}
.sec-head{max-width:640px;margin-bottom:90px}
.sec-head h2{font-size:clamp(2.4rem,5vw,4rem);margin-bottom:22px}
.sec-head p:not(.eyebrow){color:var(--mut)}
.projects{display:flex;flex-direction:column;gap:160px}
.project{display:grid;grid-template-columns:1.5fr 1fr;gap:5vw;align-items:center}
.project.reverse{grid-template-columns:1fr 1.5fr}.project.reverse .shot{order:2}
.shot{position:relative;display:block;border:1px solid var(--line);padding:14px;background:var(--surface);transition:.5s}
.shot:hover{border-color:#3a3a3d;transform:translateY(-6px)}
.mock{overflow:hidden;background:#000;aspect-ratio:16/10;position:relative}
.mock iframe{position:absolute;top:0;left:0;width:1280px;height:800px;border:0;transform-origin:0 0;pointer-events:none}
.view{position:absolute;inset:14px;display:grid;place-items:center;background:rgba(14,14,15,.7);font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;opacity:0;transition:.4s}
.shot:hover .view{opacity:1}
.num{font:italic 400 1.3rem 'Cormorant Garamond',serif;color:var(--dim);display:block;margin-bottom:22px}
.tag{font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.info h3{font-size:2.8rem;margin-bottom:18px}
.info p:not(.tag){color:var(--mut);margin-bottom:22px}
.info ul{list-style:none;margin-bottom:30px;border-top:1px solid var(--line)}
.info li{font-size:.84rem;padding:10px 0;border-bottom:1px solid var(--line);color:var(--text)}
.rows{list-style:none;border-top:1px solid var(--line)}
.rows li{display:grid;grid-template-columns:70px 1fr 1.4fr;gap:30px;padding:34px 0;border-bottom:1px solid var(--line);align-items:baseline;transition:.4s}
.rows li:hover{padding-left:16px}.rows li:hover h4{color:var(--accent)}
.rows span{font:italic 1.1rem 'Cormorant Garamond',serif;color:var(--dim)}.rows h4{font-size:1.7rem;transition:.3s}.rows p{color:var(--mut);font-size:.94rem}
.steps{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0;border-top:1px solid var(--line)}
.steps li{padding:40px 34px 20px 0;border-right:1px solid var(--line);padding-left:34px}.steps li:first-child{padding-left:0}.steps li:last-child{border:0}
.steps b{font:italic 500 1.5rem 'Cormorant Garamond',serif;color:var(--accent)}
.steps h4{font-size:1.8rem;margin:14px 0 10px}.steps p{color:var(--mut);font-size:.92rem}
.about{display:grid;grid-template-columns:1fr 1.2fr;gap:8vw;align-items:start}
.about h2{font-size:clamp(2.6rem,5vw,4.2rem)}
.about p{color:var(--mut);margin-bottom:20px;font-size:1.02rem}
.contact{text-align:center}.contact .sec-head{margin-inline:auto}
.form{display:grid;gap:26px;max-width:560px;margin:auto;text-align:left}
.form label{display:grid;gap:8px;font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--mut)}
.form label span{text-transform:none;letter-spacing:0;color:var(--dim)}
.form input,.form textarea{background:transparent;border:0;border-bottom:1px solid var(--line);color:var(--text);padding:10px 0 12px;font:300 1rem Inter;letter-spacing:0;text-transform:none;border-radius:0;transition:.3s}
.form input:focus,.form textarea:focus{outline:0;border-color:var(--accent)}
.form .invalid{border-color:#a1565a}
.form .btn{justify-self:start;margin-top:10px}
.note{color:var(--accent);min-height:1.5em;font-size:.88rem}
.footer{display:flex;justify-content:space-between;padding:36px 6vw;border-top:1px solid var(--line);color:var(--dim);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.footer a:hover{color:var(--text)}
.reveal{opacity:0;transform:translateY(24px);transition:opacity 1s ease,transform 1s ease}.reveal.in{opacity:1;transform:none}
@media(max-width:900px){.hero,.project,.project.reverse,.about{grid-template-columns:1fr}.project.reverse .shot{order:0}.nav nav a:not(.nav-cta){display:none}.rows li{grid-template-columns:40px 1fr}.rows p{grid-column:2}.steps li{border-right:0;border-bottom:1px solid var(--line);padding-left:0}.projects{gap:110px}.section{padding-block:100px}.facts div{border-right:0;border-bottom:1px solid var(--line)}.bcard{transform:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.reveal{opacity:1;transform:none}}