:root{
  --bg:#0a0a0a;
  --fg:#f4f4f4;
  --muted:#bdbdbd;
  --brand:#d3b268;
  --card:#141414;
  --line: #222;
  --max:1200px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;line-height:1.5}
img{max-width:100%;height:auto;border-radius:10px}
a{color:var(--fg);text-decoration:none}
a:hover{opacity:.85}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.narrow{max-width:800px;margin:0 auto}
.site-header{position:sticky;top:0;backdrop-filter:saturate(180%) blur(12px);background:color-mix(in oklab,var(--bg) 80%, transparent);border-bottom:1px solid var(--line);z-index:10}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 20px}
.logo{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;background:var(--brand);color:#111;font-weight:700;letter-spacing:.5px}
nav a{margin-left:18px;color:var(--muted);font-weight:600}
nav a:hover{color:var(--fg)}
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:center;padding:64px 20px;border-bottom:1px solid var(--line)}
.hero h1{font-size:clamp(32px,5vw,56px);line-height:1.1;margin:0 0 8px}
.kicker{color:var(--muted);margin:0 0 24px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:12px 18px;border-radius:10px;background:var(--fg);color:#111;font-weight:700}
.btn.outline{background:transparent;border:1px solid var(--line);color:var(--fg)}
.hero-shot img{box-shadow:0 10px 30px rgba(0,0,0,.35)}
.section{padding:56px 0;border-bottom:1px solid var(--line)}
.section.alt{background:var(--card)}
h2{font-size:clamp(22px,3vw,32px);margin:0 0 20px}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.credits{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.note{color:var(--muted);font-size:.95rem;margin-top:10px}
.contact{list-style:none;padding:0;display:grid;gap:6px}
.site-footer{padding:28px 0;color:var(--muted)}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:20px}
  .hero-shot{order:-1}
}