:root { --ink:#12100f; --paper:#eee9df; --red:#e63725; --muted:#817b71; --line:rgba(18,16,15,.2); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Manrope, sans-serif; }
a { color:inherit; }
img { display:block; width:100%; }
.nav { height:82px; padding:0 4vw; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); position:relative; z-index:5; }
.logo { font:500 16px Unbounded,sans-serif; text-decoration:none; letter-spacing:-.5px; }
.logo span { color:var(--red); }
.nav nav { display:flex; gap:32px; }
.nav nav a { text-decoration:none; font-size:13px; transition:opacity .2s; }
.nav nav a:hover { opacity:.55; }
.nav-cta { padding:10px 0; text-decoration:none; font-size:13px; border-bottom:1px solid; }
.hero { min-height:calc(100vh - 82px); padding:6vw 4vw 4vw; display:grid; grid-template-columns:1.08fr .72fr; gap:8vw; position:relative; overflow:hidden; }
.hero-copy { align-self:center; padding-bottom:4vw; }
.eyebrow { margin:0 0 28px; text-transform:uppercase; letter-spacing:.19em; font-size:11px; font-weight:600; }
h1,h2 { font-family:Unbounded,sans-serif; font-weight:500; letter-spacing:-.055em; margin:0; line-height:.94; }
h1 { font-size:clamp(56px,8.2vw,132px); white-space:nowrap; }
h1 em,h2 em { font-family:Georgia,serif; font-weight:400; color:var(--red); }
.lead { max-width:510px; font-size:clamp(17px,1.55vw,23px); line-height:1.55; margin:38px 0; }
.hero-actions { display:flex; gap:30px; align-items:center; }
.button { display:inline-flex; justify-content:space-between; align-items:center; min-width:220px; padding:18px 20px; text-decoration:none; font-size:13px; font-weight:600; transition:transform .2s, background .2s; }
.button:hover { transform:translateY(-3px); }
.button-primary { background:var(--red); color:white; }
.text-link { font-size:13px; text-decoration:none; border-bottom:1px solid; padding-bottom:4px; }
.hero-visual { align-self:center; position:relative; max-width:500px; justify-self:end; }
.hero-visual img { aspect-ratio:3/4; object-fit:cover; filter:saturate(.75) contrast(1.05); }
.photo-note { margin:10px 0 0; font-size:11px; text-transform:uppercase; letter-spacing:.12em; }
.stamp { width:112px; height:112px; border-radius:50%; background:var(--red); color:#fff; display:grid; place-content:center; text-align:center; font:500 11px/1.5 Unbounded; letter-spacing:.08em; position:absolute; left:-55px; top:13%; z-index:2; transform:rotate(-10deg); }
.hero-index { position:absolute; right:4vw; bottom:2vw; font-size:11px; }
.manifesto { padding:9vw 4vw; background:var(--ink); color:var(--paper); text-align:center; }
.manifesto p { margin:0; font:500 clamp(28px,4.5vw,72px)/1.15 Unbounded; letter-spacing:-.055em; }
.manifesto .outline { color:transparent; -webkit-text-stroke:1px var(--red); }
.works { padding:9vw 4vw; }
.section-head { display:flex; justify-content:space-between; align-items:end; margin-bottom:5vw; }
.section-head h2,.process h2 { font-size:clamp(40px,6vw,90px); }
.section-head>p { max-width:360px; color:var(--muted); line-height:1.55; }
.gallery { display:grid; grid-template-columns:repeat(3,1fr); grid-auto-flow:dense; gap:18px; }
.work { margin:0; overflow:hidden; }
.work img { height:34vw; min-height:360px; object-fit:cover; transition:transform .65s cubic-bezier(.2,.7,.2,1); }
.work:hover img { transform:scale(1.025); }
.work-tall { grid-row:span 2; }
.work-tall img { height:calc(68vw + 58px); }
.work-wide { grid-column:span 2; }
.work figcaption { padding:12px 0 20px; display:flex; gap:20px; font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.work figcaption span { color:var(--red); }
.process { padding:9vw 4vw; border-top:1px solid var(--line); display:grid; grid-template-columns:.8fr 1fr; gap:10vw; }
.steps { list-style:none; margin:0; padding:0; }
.steps li { padding:26px 0; border-top:1px solid var(--line); display:grid; grid-template-columns:60px 1fr; gap:18px; }
.steps li:last-child { border-bottom:1px solid var(--line); }
.steps>li>span { color:var(--red); font:500 12px Unbounded; }
.steps h3 { font:500 20px Unbounded; margin:0 0 10px; }
.steps p { margin:0; color:var(--muted); line-height:1.55; max-width:520px; }
.contact { min-height:80vh; padding:10vw 4vw 4vw; background:var(--red); color:white; display:flex; flex-direction:column; justify-content:center; }
.contact h2 { font-size:clamp(48px,8vw,124px); margin-bottom:60px; }
.contact h2 em { color:var(--ink); }
.button-light { background:white; color:var(--ink); align-self:flex-start; }
.contact-meta { margin-top:auto; padding-top:9vw; display:flex; gap:8vw; }
.contact-meta a { text-decoration:none; font-size:14px; line-height:1.6; }
footer { background:var(--ink); color:var(--paper); padding:24px 4vw; display:flex; justify-content:space-between; font-size:11px; text-transform:uppercase; letter-spacing:.1em; }
footer a { text-decoration:none; }
.reveal { opacity:0; transform:translateY(24px); transition:opacity .7s, transform .7s; }
.reveal.visible { opacity:1; transform:none; }
@media (max-width:800px) {
  .nav nav { display:none; }
  .hero { grid-template-columns:1fr; padding-top:18vw; gap:12vw; }
  h1 { white-space:normal; font-size:clamp(50px,15vw,86px); }
  .hero-visual { width:84%; justify-self:end; }
  .stamp { left:-42px; width:90px; height:90px; font-size:9px; }
  .hero-index { display:none; }
  .manifesto { padding:20vw 5vw; }
  .section-head { display:block; }
  .section-head>p { margin-top:24px; }
  .gallery { grid-template-columns:1fr 1fr; }
  .work-tall,.work-wide { grid-row:auto; grid-column:auto; }
  .work img,.work-tall img { height:64vw; min-height:0; }
  .process { grid-template-columns:1fr; gap:14vw; padding-block:18vw; }
  .contact { min-height:90vh; padding-top:18vw; }
  .contact-meta { flex-direction:column; gap:24px; }
}
@media (max-width:520px) {
  .nav { height:70px; }
  .nav-cta { font-size:11px; }
  .logo { font-size:13px; }
  .hero { min-height:auto; padding-bottom:16vw; }
  .hero-actions { align-items:flex-start; flex-direction:column; }
  .gallery { gap:9px; }
  .work figcaption { font-size:9px; gap:7px; }
  .contact h2 { margin-bottom:40px; }
}
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.work img{transition:none} }