:root {
  --bg:#0b0f14;
  --ink:#e6f0ea;
  --glass:#0f131a;
  --stroke:#1f2630;
  --accent:#7ed495;
  --maxw:1100px;
  --nav-gap:1.2rem;
}

/* BASE */
html, body { background:var(--bg); color:var(--ink); font-family:Inter,system-ui,Arial,sans-serif; margin:0; padding:0; }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 20px; }
a { color:var(--accent); text-decoration:none; }

/* HEADER */
.site-header { background:#0a0f0c; border-bottom:1px solid var(--stroke); }
.site-header .wrap {
  display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 20px;
  position:relative; /* ensures mobile menu anchors to header */
}
.site-header .brand { display:flex; align-items:center; gap:10px; color:var(--ink); }
.logo { height:28px; width:auto; }

.nav { display:flex; flex-wrap:nowrap; gap:var(--nav-gap); white-space:nowrap; justify-content:flex-end; }
.nav a { flex-shrink:0; font-size:1rem; padding:6px 8px; border-radius:8px; color:#cfe9dc; }
.nav a:hover { background:#101612; }

/* Shrink spacing on mid widths */
@media (max-width: 960px){ :root{--nav-gap:0.9rem} .nav a{font-size:0.9rem; padding:4px 6px} }
@media (max-width: 820px){ :root{--nav-gap:0.6rem} .nav a{font-size:0.85rem; padding:3px 5px} }

/* HERO */
.hero{ position:relative; width:100%; min-height:260px; display:flex; align-items:flex-end; justify-content:flex-start; }
.hero figure{ position:absolute; inset:0; margin:0; }
.hero figure img{ width:100%; height:100%; object-fit:cover; object-position:center 30%; }
.hero .overlay{ position:absolute; inset:0; background:rgba(0,0,0,0.45); }
.hero .content{ position:relative; padding:3rem 2rem; max-width:600px; z-index:1; }
.hero .content h1{ margin:0.2rem 0; font-size:clamp(2rem, 4vw, 3rem); }
.hero .content .eyebrow{ font-weight:600; text-transform:uppercase; font-size:0.9rem; letter-spacing:.05em; opacity:0.9; }

/* FOOTER */
.site-footer { background:#0a0f0c; border-top:1px solid var(--stroke); margin-top:24px; }
.site-footer .wrap { display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; padding:14px 20px; }
.footer-icon{ height:36px; width:auto; opacity:.95; }
.foot-nav{ display:flex; flex-wrap:wrap; gap:10px; }
.foot-nav a{ color:#cfe9dc; text-decoration:none; padding:4px 8px; border-radius:8px; }
.foot-nav a:hover{ background:#101612; }

/* HAMBURGER — visible by default; hidden only on wide screens */
.nav-toggle{ display:flex; flex-direction:column; justify-content:center; gap:4px; background:transparent; border:0; cursor:pointer; }
.nav-toggle .bar{ width:24px; height:2px; background:var(--ink); }

/* Mobile dropdown */
@media (max-width: 760px){
  .site-header .nav{
    display:none; flex-direction:column; position:absolute; top:60px; right:20px;
    background:#0a0f0c; border:1px solid var(--stroke); border-radius:10px; padding:10px; z-index:999;
  }
  .site-header .nav.open{ display:flex; }
}

/* Hide the hamburger on larger screens */
@media (min-width: 761px){
  .nav-toggle{ display:none; }
}
/* Ensure hero images fill and center, across all pages */
header.hero { position: relative; width: 100%; }
header.hero figure { position: absolute; inset: 0; margin: 0; width: 100%; }
header.hero figure img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }