:root { --ink:#0b0b0b; --white:#fff; --line:#e3e3e3; --soft:#a8a8a8; --impact: Impact, "Anton", "Arial Narrow", sans-serif; --sans: "Manrope", system-ui, sans-serif; }
* { box-sizing:border-box; margin:0; }
body { font-family:var(--sans); background:var(--ink); color:var(--white); line-height:1.6; }
body.home { background:#000; }
a { color:inherit; text-decoration:none; }

/* White nav bar */
.topbar { position:fixed; top:0; left:0; right:0; z-index:30; height:60px; padding:0 8px; display:grid; grid-template-columns:52px 1fr 52px; align-items:center; background:#fff; color:var(--ink); border-bottom:1px solid var(--line); }
.logo { justify-self:center; text-align:center; font-family:var(--impact); line-height:1; display:flex; flex-direction:column; }
.logo b { font-weight:400; font-size:1.35rem; letter-spacing:.02em; }
.logo i { font-style:normal; font-size:.68rem; letter-spacing:.42em; margin-right:-.42em; }
.person { display:grid; place-items:center; width:44px; height:44px; justify-self:end; }

/* 3 bars -> X */
.burger { width:44px; height:44px; border:0; background:none; cursor:pointer; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:6px; color:var(--ink); }
.burger span { display:block; width:24px; height:2.5px; background:currentColor; border-radius:2px; transition:transform .35s ease, opacity .25s ease, width .3s ease; }
.burger.open span:nth-child(1) { transform:translateY(8.5px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity:0; width:0; }
.burger.open span:nth-child(3) { transform:translateY(-8.5px) rotate(-45deg); }

/* Side menu */
.drawer { position:fixed; top:60px; bottom:0; left:0; width:78%; max-width:380px; z-index:25; background:#fff; color:var(--ink); padding:28px 24px; display:flex; flex-direction:column; gap:6px; transform:translateX(-100%); transition:transform .4s cubic-bezier(.2,.7,.2,1); }
.drawer.open { transform:none; }
.drawer a { font-family:var(--impact); font-size:2.4rem; line-height:1.25; text-transform:uppercase; }
.drawer a.here { text-decoration:underline; text-underline-offset:6px; }
.scrim { position:fixed; inset:60px 0 0 0; z-index:20; background:rgba(0,0,0,.55); opacity:0; pointer-events:none; transition:opacity .35s; }
.scrim.open { opacity:1; pointer-events:auto; }

/* Home: full-width scrolling image */
.hero { position:relative; margin-top:60px; }
.hero img { display:block; width:100%; height:auto; }
.hero::after { content:""; position:absolute; inset:0; background:rgba(0,0,0,.28); pointer-events:none; }
.hero-title { position:fixed; top:calc(50% + 30px); left:0; right:0; transform:translateY(-50%); z-index:2; text-align:center; padding:0 22px; pointer-events:none; font-family:var(--impact); font-weight:400; text-transform:uppercase; font-size:clamp(2.2rem, 10vw, 4rem); line-height:1.05; text-shadow:0 2px 16px rgba(0,0,0,.7); }
.hero-cta { font-family:var(--impact); position:absolute; bottom:60px; left:50%; transform:translateX(-50%); z-index:2; margin-top:0; white-space:nowrap; }
.btn { display:inline-block; margin-top:18px; padding:13px 24px; border:2px solid #fff; background:#fff; color:var(--ink); font:600 1rem var(--sans); border-radius:0; cursor:pointer; transition:background .2s, color .2s; }
.btn:hover { background:transparent; color:#fff; }

/* Gallery + Contact (plain black) */
.wrap { max-width:760px; margin:0 auto; padding:92px 18px 60px; }
h2 { font-family:var(--impact); font-weight:400; font-size:2.4rem; letter-spacing:.02em; margin-bottom:18px; }
h2.sub { margin-top:44px; }
.lead { color:var(--soft); margin-bottom:18px; }

.grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.tile { border:0; padding:0; cursor:pointer; background:#151515; aspect-ratio:3/4; overflow:hidden; }
.tile img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s; }
.tile:hover img { transform:scale(1.04); }
.tile:nth-child(5) { grid-column:1 / -1; aspect-ratio:4/3; }

.contact-list { display:grid; gap:10px; }
.contact { display:flex; justify-content:space-between; align-items:center; padding:18px 20px; border:1px solid #333; transition:background .2s, color .2s; }
.contact:hover { background:#fff; color:var(--ink); }
.contact span { color:var(--soft); }
.contact:hover span { color:#444; }

.form { display:grid; gap:14px; }
label { display:grid; gap:6px; font-weight:600; font-size:.92rem; }
input, select, textarea { font:400 1rem var(--sans); padding:12px; background:#151515; color:#fff; border:1px solid #333; border-radius:0; width:100%; }
input::placeholder, textarea::placeholder { color:#777; }
input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible, .burger:focus-visible, .tile:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.topbar .burger:focus-visible, .topbar a:focus-visible { outline-color:#000; }
.form .btn { margin-top:4px; }
.error { color:#ff7b72; min-height:1.2em; font-size:.9rem; }

.lightbox { position:fixed; inset:0; z-index:50; background:rgba(0,0,0,.95); display:none; align-items:center; justify-content:center; padding:20px; }
.lightbox.open { display:flex; }
.lightbox img { max-width:100%; max-height:92vh; }
.lightbox button { position:absolute; top:12px; right:18px; background:none; border:0; color:#fff; font-size:2.6rem; cursor:pointer; }

@media (min-width:720px) { .grid { grid-template-columns:repeat(3,1fr); } .tile:nth-child(5) { grid-column:auto; aspect-ratio:3/4; } .hero img { max-height:none; } }
@media (prefers-reduced-motion:reduce) { * { transition:none !important; } }