/* =========================================================
   HEADER / NAV
   ========================================================= */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-header);
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: linear-gradient(to bottom, rgba(20,20,15,0.85), rgba(20,20,15,0));
  transition: height var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              backdrop-filter var(--dur-base) var(--ease-out);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled{
  height: var(--header-h-scrolled);
  background: rgba(20,20,15,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--color-border);
}
.site-header .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  /* Unlike page-content sections, the header must not be capped at the
     1240px content max-width: it should visually use the full viewport,
     with only a modest fixed side gutter, so it doesn't look artificially
     contracted toward the center on wide monitors (1440px, 1920px+). */
  max-width: none;
  padding: 0 var(--space-8);
}

.brand{ display: flex; align-items: center; flex-shrink: 0; }
/* Header uses the isotype only (hexagon "S"), at every viewport width: the
   full imagotipo with wordmark already has its moment center-stage in the
   hero, so the header stays compact. */
.brand-logo--iso{
  display: block;
  height: 72px;
  width: auto;
  transition: height var(--dur-base) var(--ease-out);
}
.site-header.is-scrolled .brand-logo--iso{ height: 56px; }

/* CSS fallback monogram (used if PNG assets fail to load) */
.monogram-fallback{
  display: none;
  align-items: center;
  gap: var(--space-3);
}
.monogram-fallback.is-active{ display: flex; }
.monogram-hex{
  width: 40px; height: 40px;
  position: relative;
  flex-shrink: 0;
}
.monogram-hex svg{ width: 100%; height: 100%; }
.monogram-wordmark{
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: 0.22em;
  font-size: 13px;
  text-transform: uppercase;
  color: var(--color-text);
  line-height: 1.3;
}
.monogram-wordmark span{ display: block; font-size: 9px; color: var(--gold-500); letter-spacing: 0.3em; }

.main-nav{ display: none; }
@media (min-width: 1200px){
  .main-nav{
    display: flex;
    align-items: center;
    /* Grows to fill the space between the logo and the CTA button, then
       spreads its own links evenly across that width instead of staying a
       tight left-hung cluster with a big empty gap before the button. */
    flex: 1 1 auto;
    justify-content: space-between;
    gap: var(--space-4);
    margin: 0 var(--space-8);
  }
  .main-nav a{
    font-family: var(--font-display);
    font-size: 17px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-dim);
    position: relative;
    padding: var(--space-2) 0;
    transition: color var(--dur-fast) var(--ease-out);
  }
  .main-nav a::after{
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 1px;
    background: var(--gold-gradient);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur-base) var(--ease-out);
  }
  .main-nav a:hover{ color: var(--color-text); }
  .main-nav a:hover::after{ transform: scaleX(1); }
  .main-nav a.is-active{ color: var(--gold-300); }
  .main-nav a.is-active::after{ transform: scaleX(1); }
}

.header-actions{ display: flex; align-items: center; gap: var(--space-4); }
.header-actions .btn-primary{ margin-left: var(--space-6); }
.header-actions .btn{
  display: none;
  min-height: 46px;
  padding: 0 var(--space-6);
  font-size: 13px;
}
@media (min-width: 1200px){
  .header-actions .btn{ display: inline-flex; }
}

.nav-toggle{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--color-text);
}
@media (min-width: 1200px){ .nav-toggle{ display: none; } }
.nav-toggle svg{ width: 20px; height: 20px; }
.nav-toggle .icon-close{ display: none; }
.nav-toggle.is-open .icon-open{ display: none; }
.nav-toggle.is-open .icon-close{ display: block; }

/* Mobile nav drawer */
.mobile-nav{
  position: fixed;
  inset: 0;
  z-index: var(--z-mobile-nav);
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  padding: var(--space-8) var(--space-5) var(--space-6);
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-in-out);
  visibility: hidden;
}
.mobile-nav.is-open{
  transform: translateX(0);
  visibility: visible;
}
@media (min-width: 1200px){ .mobile-nav{ display: none; } }
.mobile-nav-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-9);
}
.mobile-nav-links{
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.mobile-nav-links a{
  font-family: var(--font-display);
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.mobile-nav-links a.is-active{ color: var(--gold-300); }
.mobile-nav.is-open .mobile-nav-links a{ opacity: 1; transform: translateY(0); }
.mobile-nav.is-open .mobile-nav-links a:nth-child(1){ transition-delay: 80ms; }
.mobile-nav.is-open .mobile-nav-links a:nth-child(2){ transition-delay: 140ms; }
.mobile-nav.is-open .mobile-nav-links a:nth-child(3){ transition-delay: 200ms; }
.mobile-nav.is-open .mobile-nav-links a:nth-child(4){ transition-delay: 260ms; }
.mobile-nav.is-open .mobile-nav-links a:nth-child(5){ transition-delay: 320ms; }
.mobile-nav.is-open .mobile-nav-links a:nth-child(6){ transition-delay: 380ms; }
.mobile-nav-actions{
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-top: var(--space-8);
}
.mobile-nav-meta{
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: 13px;
  color: var(--color-text-mute);
}
body.nav-lock{ overflow: hidden; }