:root{
  --bg: #0b0d0f;
  --panel: #101317;
  --text: #f3f6fb;
  --muted: #b4becc;
  --accent: #8b0000;    /* deep elegant red */
  --accent-2: #c34a36;  /* warm hover */
  --ring: 0 0 0 3px color-mix(in oklab, var(--accent) 35%, transparent);
}
*{ box-sizing:border-box; }
html{ color-scheme: dark; }
body{
  margin:0; font: 500 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  background: radial-gradient(1200px 600px at 70% -100px, #0f172a 10%, var(--bg) 50%, #0a0c0f 80%) fixed;
  color: var(--text);
}
.skip-link{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus{ left:1rem; top:1rem; width:auto; height:auto; padding:.5rem .75rem; background:#fff; color:#000; border-radius:.25rem; }
.container{ width:min(1100px, 92%); margin-inline:auto; }
/* Header */
.site-header{ position:sticky; top:0; z-index:50; backdrop-filter: blur(6px); background: color-mix(in oklab, var(--panel), transparent 35%); border-bottom:1px solid color-mix(in oklab, #ffffff, transparent 90%);}
.nav{ display:flex; gap:1rem; align-items:center; justify-content:space-between; padding:.7rem 0; }
.brand{ display:flex; gap:.6rem; align-items:center; text-decoration:none; color:var(--text); }
.brand span{ font-weight:850; font-size:1.2rem; letter-spacing:.2px; }
.brand img{ height:44px; width:auto; }
.menu{ display:flex; gap:.5rem; align-items:center; list-style:none; padding:0; margin:0; }
.menu a{ padding:.5rem .8rem; text-decoration:none; color:var(--text); border-radius:.5rem; }
.menu a:hover{ background: color-mix(in oklab, var(--panel), transparent 30%); }
.btn{ display:inline-block; padding:.75rem 1rem; border-radius:.75rem; text-decoration:none; color:var(--text); font-weight:700; }
.btn.primary{ background: linear-gradient(180deg, color-mix(in oklab, var(--accent), #fff 8%), var(--accent)); border:none; }
.btn.primary:hover{ background: linear-gradient(180deg, color-mix(in oklab, var(--accent), #fff 15%), var(--accent)); }
.btn.ghost{ border:1px solid color-mix(in oklab, var(--accent), #fff 10%); background:transparent;}
.btn.ghost:hover{ border-color: var(--accent); color: var(--accent); }
.nav-toggle{ display:none; }
/* Hero */
.hero{ position:relative; min-height:76vh; display:grid; align-items:end; }
.hero-media{ position:absolute; inset:0; z-index:-1; overflow:hidden; }
.hero-media img{ width:100%; height:100%; object-fit:cover; filter: saturate(1.05) contrast(1.08) brightness(.72); }
.hero-gradient{ position:absolute; inset:0; background:radial-gradient(800px 300px at 20% 20%, color-mix(in oklab, var(--accent), transparent 55%), transparent 40%), linear-gradient(180deg, rgba(0,0,0,.3), rgba(0,0,0,.65) 55%, rgba(0,0,0,.85)); }
.hero-content{ padding: min(8vh,6rem) 0 4rem; }
.hero h1{ font-size: clamp(2rem, 4vw + 1rem, 4rem); line-height:1.1; letter-spacing:-.02em; margin:0 0 .8rem; font-weight:900; }
.accent{ color: var(--accent); text-shadow: 0 2px 18px color-mix(in oklab, var(--accent), transparent 70%); }
.hero p{ margin:0 0 1.2rem; color: var(--muted); max-width: 60ch; }
.cta-row{ display:flex; gap:.75rem; flex-wrap:wrap; }
/* Trust chips */
.trust{ display:flex; gap:.75rem 1rem; flex-wrap:wrap; list-style:none; padding:0; margin:1.25rem 0 0; }
.trust li{ padding:.35rem .6rem; border-radius:999px; background: color-mix(in oklab, var(--panel), transparent 30%); border:1px solid color-mix(in oklab, #fff, transparent 90%); color: var(--muted); font-size:.95rem; }
/* Sections */
.section-header{ text-align:center; margin: 3rem 0 1.6rem; }
.eyebrow{ text-transform:uppercase; letter-spacing:.18em; font-size:.8rem; color: var(--muted); }
.lede{ color:var(--muted); }
.grid.cards{ display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem; }
.card{ background: linear-gradient(180deg, color-mix(in oklab, var(--panel), #fff 2%), var(--panel)); border:1px solid color-mix(in oklab, #fff, transparent 88%); padding:1.0rem; border-radius:.9rem; min-height: 140px; }
.card h3{ margin:.2rem 0 .4rem; letter-spacing:.2px; }
.card p{ color: var(--muted); }
/* Work / Masonry */
.masonry{ columns: 3 250px; column-gap: 1rem; }
.tile{ break-inside: avoid; margin:0 0 1rem; overflow:hidden; border-radius:.8rem; border:1px solid color-mix(in oklab, #fff, transparent 88%); background: var(--panel); }
.tile img{ width:100%; display:block; }
/* About */
.about-wrap{ display:grid; grid-template-columns: 2fr 1fr; gap:1.25rem; align-items:start; }
.ticks{ list-style: none; padding:0; margin:0; }
.ticks li{ margin:.35rem 0; padding-left:1.4rem; position:relative; }
.ticks li::before{ content:"✓"; position:absolute; left:0; color: var(--accent);}
/* Contact */
.form{ background: linear-gradient(180deg, color-mix(in oklab, var(--panel), #fff 3%), var(--panel)); border:1px solid color-mix(in oklab, #fff, transparent 86%); padding:1.1rem; border-radius:1rem; }
.form label{ display:block; margin: .75rem 0; }
.form label span{ display:block; font-size:.95rem; color: var(--muted); margin-bottom:.25rem; }
.form input, .form textarea{{ width:100%; padding:.8rem 1rem; border-radius:.6rem; border:1px solid color-mix(in oklab, #fff, transparent 85%); background:#0e1116; color:var(--text); }}
.form input:focus, .form textarea:focus{{ outline: none; box-shadow: var(--ring); border-color: var(--accent); }}
.form .row{{ display:flex; gap:.8rem; }}
.form .row.end{{ justify-content:flex-end; align-items:center; }}
/* Footer */
.site-footer{ border-top:1px solid color-mix(in oklab, #fff, transparent 90%); background: #0a0c10; margin-top:3rem; }
.foot{ display:flex; align-items:center; gap:1rem; justify-content:space-between; padding:1.25rem 0; flex-wrap:wrap; }
.brand-row{ display:flex; gap:.6rem; align-items:center; }
.small{ color: var(--muted); font-size:.9rem; }
/* Reveal */
.reveal{ opacity:0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }
/* Responsive */
@media (max-width: 900px){ .grid.cards{ grid-template-columns: 1fr 1fr; } .about-wrap{ grid-template-columns: 1fr; } }
@media (max-width: 720px){
  .menu{ display:none; }
  .nav-toggle{ display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .8rem; border-radius:.5rem; background:transparent; border:1px solid color-mix(in oklab, #fff, transparent 88%); color:var(--text); }
  .menu.open{ display:flex; position:absolute; right:1rem; top:60px; flex-direction:column; background: var(--panel); padding:.6rem; border-radius:.6rem; border:1px solid color-mix(in oklab, #fff, transparent 86%); }
  .form .row{ flex-direction:column; }
  .hero{ min-height:72vh; }
}