:root { --ink:#23211f; --paper:#f4f0e9; --sand:#d8c8b3; --olive:#747365; --line:rgba(35,33,31,.16); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial, Helvetica, sans-serif; }
a { color:inherit; text-decoration:none; }
img, video { display:block; width:100%; }
.nav { height:84px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(22px,5vw,76px); border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:12px; font-family:Georgia,serif; font-size:23px; }
.brand-logo { width:44px; height:44px; border-radius:50%; object-fit:cover; }
.nav-link { font-size:13px; letter-spacing:.08em; text-transform:uppercase; border-bottom:1px solid var(--ink); padding-bottom:4px; }
.hero { min-height:calc(100svh - 84px); display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(28px,5vw,84px); align-items:center; padding:clamp(40px,7vw,100px) clamp(22px,5vw,76px); }
.hero-copy { max-width:610px; }
.eyebrow { margin:0 0 20px; font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:#68665d; }
h1,h2 { margin:0; font-family:Georgia,'Times New Roman',serif; font-weight:400; letter-spacing:-.035em; line-height:.98; }
h1 { font-size:clamp(50px,6.8vw,104px); }
h2 { font-size:clamp(42px,5vw,72px); }
.intro { max-width:500px; margin:30px 0; font-size:clamp(17px,1.5vw,21px); line-height:1.55; color:#555149; }
.primary-button { display:inline-flex; padding:16px 22px; background:var(--ink); color:white; font-size:13px; letter-spacing:.05em; transition:transform .2s, background .2s; }
.primary-button:hover { transform:translateY(-2px); background:#4a463f; }
.hero-media { position:relative; min-height:650px; overflow:hidden; }
.hero-media img { position:absolute; inset:0; height:100%; object-fit:cover; }
.hero-badge { position:absolute; left:20px; right:20px; bottom:20px; display:flex; justify-content:space-between; gap:20px; align-items:center; padding:18px 20px; background:rgba(244,240,233,.9); backdrop-filter:blur(12px); }
.hero-badge strong { font-family:Georgia,serif; font-size:21px; font-weight:400; }
.hero-badge span { font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.statement { display:flex; justify-content:center; align-items:center; gap:clamp(16px,4vw,56px); padding:28px 20px; color:white; background:var(--olive); }
.statement p { margin:0; font-size:12px; letter-spacing:.1em; text-transform:uppercase; }
.statement span { width:4px; height:4px; border-radius:50%; background:var(--sand); }
.work { padding:clamp(72px,10vw,140px) clamp(22px,5vw,76px); }
.section-heading { display:grid; grid-template-columns:1fr 1.2fr; gap:24px 56px; align-items:end; margin-bottom:56px; }
.section-heading .eyebrow { align-self:start; }
.section-heading > p:last-child { grid-column:2; margin:0; max-width:470px; color:#656158; line-height:1.6; }
.feature-grid { display:grid; grid-template-columns:1.35fr 1fr 1fr; gap:18px; }
.video-card,.project-card { position:relative; height:clamp(560px,72vh,760px); min-height:0; overflow:hidden; background:#24211e; }
.video-card video,.project-card img { height:100%; object-fit:contain; transition:transform .7s ease; }
.video-card:hover video,.project-card:hover img,.gallery-card:hover img { transform:scale(1.025); }
.card-copy { position:absolute; left:0; right:0; bottom:0; padding:60px 22px 22px; color:white; background:linear-gradient(transparent,rgba(10,10,10,.74)); }
.card-copy span { font-size:10px; letter-spacing:.1em; text-transform:uppercase; }
.card-copy h3 { margin:7px 0 0; font:27px Georgia,serif; }
.gallery { display:grid; grid-template-columns:repeat(5,1fr); gap:18px; margin-top:72px; }
.gallery-card img { height:360px; object-fit:cover; transition:transform .7s ease; }
.gallery-card { overflow:hidden; }
.gallery-card div { padding-top:14px; }
.gallery-card h3 { margin:0; font:20px Georgia,serif; }
.gallery-card p { margin:6px 0 0; color:#716d65; font-size:12px; line-height:1.45; }
.contact { padding:clamp(80px,11vw,150px) 22px; text-align:center; color:white; background:#242321; }
.contact .eyebrow { color:#b8b2a8; }
.contact h2 { max-width:800px; margin:auto; }
.contact > p:not(.eyebrow) { max-width:550px; margin:28px auto 34px; color:#c9c4bb; line-height:1.6; }
.primary-button.light { background:var(--paper); color:var(--ink); }
footer { display:flex; justify-content:space-between; gap:20px; padding:28px clamp(22px,5vw,76px); font-size:12px; background:#242321; color:#aaa49b; border-top:1px solid rgba(255,255,255,.1); }
footer a { color:white; }
.footer-brand { display:flex; align-items:center; gap:10px; }
.footer-brand img { width:30px; height:30px; border-radius:50%; object-fit:cover; }
@media (max-width:900px) {
  .hero { grid-template-columns:1fr; }
  .hero-media { min-height:70svh; }
  .section-heading { grid-template-columns:1fr; }
  .section-heading > p:last-child { grid-column:auto; }
  .feature-grid { grid-template-columns:1fr 1fr; }
  .video-card { grid-column:1/-1; }
  .gallery { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px) {
  .nav { height:72px; }
  .hero { min-height:auto; padding-top:56px; }
  .hero-media { min-height:540px; }
  .hero-badge { align-items:flex-start; flex-direction:column; gap:8px; }
  .statement { justify-content:flex-start; overflow-x:auto; }
  .statement p { white-space:nowrap; }
  .feature-grid { grid-template-columns:1fr; }
  .video-card,.project-card { grid-column:auto; height:min(72svh,640px); }
  .gallery { grid-template-columns:1fr; gap:34px; margin-top:54px; }
  .gallery-card img { height:auto; max-height:640px; }
  footer { flex-direction:column; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none!important; } }