/* ==========================================================================
   Header + Navigation
   ========================================================================== */

.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: var(--z-header);
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--duration-micro) var(--ease-response),
    border-color var(--duration-micro) var(--ease-response);
}

/* Permanent soft scrim behind the nav row — keeps logo/nav readable against
   whatever part of the hero photo sits behind it, before the scroll state
   solidifies the background. Fades out once .is-scrolled takes over.
   Held strong across most of the header's height (not faded by the row's
   vertical midpoint, where the nav text itself actually sits) since the
   photo's brightness varies left-to-right too — outer items like "Founder"
   and "Contact" sit nearer the frame edges, which can be brighter. */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 15, 18, 0.85) 0%, rgba(14, 15, 18, 0.8) 70%, rgba(14, 15, 18, 0) 100%);
  pointer-events: none;
  opacity: 1;
  transition: opacity var(--duration-micro) var(--ease-response);
}

.site-header.is-scrolled {
  background-color: rgba(14, 15, 18, 0.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--color-graphite-line);
}
.site-header.is-scrolled::before {
  opacity: 0;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-3);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* +13% over the previous 52px, per this round's 12-15% logo increase */
  width: 59px;
  height: 59px;
  border-radius: var(--radius-sm);
  /* Solid brass badge, not a tinted outline — a ~14%-opacity fill let the
     photo show through and read as faint at the top of the page before
     scrolling. A solid fill with an ink-colored mark is legible against
     any part of the photo, at rest, with no dependency on the scrim. */
  background-color: var(--color-brass);
  font-family: var(--font-serif);
  font-size: 1.85rem;
  color: var(--color-ink);
  flex-shrink: 0;
}

.brand-name {
  font-family: var(--font-sans);
  /* +13% over the previous 1.35rem */
  font-size: 1.53rem;
  font-weight: 600;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  color: var(--color-white);
  text-shadow: 0 1px 3px rgba(14, 15, 18, 0.85), 0 2px 14px rgba(14, 15, 18, 0.6);
}

.brand-name-accent {
  display: block;
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(14, 15, 18, 0.85), 0 2px 12px rgba(14, 15, 18, 0.55);
}

/* Desktop nav — hidden below 1200px, see breakpoint at bottom */
.nav-primary {
  display: none;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.nav-link {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  font-size: var(--text-nav);
  letter-spacing: var(--tracking-nav);
  color: var(--color-white);
  /* Two shadows, not one: a tight one for edge definition against bright
     areas (the outer items — Founder, Contact — sit nearer the frame
     edges, where the photo runs brighter) plus a soft one for glow. */
  text-shadow: 0 1px 3px rgba(14, 15, 18, 0.85), 0 2px 14px rgba(14, 15, 18, 0.6);
  padding-block: var(--space-1);
  transition: color var(--duration-micro) var(--ease-response);
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--color-brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-micro) var(--ease-response);
}
.nav-link:hover {
  color: var(--color-white);
}
.nav-link:hover::after {
  transform: scaleX(1);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Nav CTA — hidden below 1200px, mobile bottom bar covers that role instead.
   Self-contained rather than relying on .btn-secondary: a graphite-line
   border is legible on a solid ink surface but disappears against a busy
   photo, which is exactly why it read as "too faint" at rest. */
.nav-cta {
  display: none;
  white-space: nowrap;
  border: 1px solid rgba(176, 141, 76, 0.75);
  background-color: rgba(176, 141, 76, 0.1);
  color: var(--color-white);
  text-shadow: 0 1px 3px rgba(14, 15, 18, 0.85), 0 2px 14px rgba(14, 15, 18, 0.6);
}
.nav-cta:hover {
  background-color: var(--color-brass);
  border-color: var(--color-brass);
  color: var(--color-ink);
  text-shadow: none;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(176, 141, 76, 0.25);
}

.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--color-white);
}
.menu-toggle svg {
  width: 22px;
  height: 22px;
}

/* Mobile nav overlay */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background-color: var(--color-ink);
  display: flex;
  flex-direction: column;
  padding: var(--space-3) var(--margin-inline) var(--space-4);
}
.mobile-nav[hidden] {
  display: none;
}

.mobile-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mobile-nav-list {
  margin-top: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.mobile-nav-link {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  color: var(--color-white);
}

.mobile-nav-footer {
  margin-top: auto;
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-graphite-line);
  color: var(--color-slate);
}

@media (min-width: 1200px) {
  .nav-primary { display: block; }
  .nav-cta { display: inline-flex; }
  .menu-toggle { display: none; }
}

/* Sticky mobile/tablet CTA bar — stands in for .nav-cta below 1200px, where
   the header CTA is hidden in favor of the hamburger menu. Shown by default
   (works even with JS disabled); main.js hides it once #contact is in view. */
.mobile-cta-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--z-header);
  display: flex;
  padding: var(--space-2) var(--margin-inline);
  padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
  background-color: rgba(14, 15, 18, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--color-graphite-line);
}

.mobile-cta-bar-btn {
  width: 100%;
}

.mobile-cta-bar[hidden] {
  display: none;
}

@media (min-width: 1200px) {
  .mobile-cta-bar {
    display: none;
  }
}

/* Reserves room for the sticky bar so it never overlaps trailing text in
   whichever section the user happens to stop scrolling in — the bar only
   auto-hides once #contact itself is in view (see main.js), so anywhere
   above that, content needs this clearance. */
@media (max-width: 1199px) {
  .has-sticky-cta {
    padding-bottom: 96px;
  }
}