/* ==========================================================================
   Header — utility bar + primary nav + mobile menu
   States: default (transparent over hero) → .is-scrolled (solid, shadow,
   utility bar tucked away) → html[data-menu-open] (mobile panel visible).
   The mobile panel sits outside <header> because the header is transformed
   when scrolled, which would otherwise trap a position:fixed child.
   ========================================================================== */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  color: var(--color-inverse-text);
  transition: transform var(--dur-slow) var(--ease-out);
}

/* ---------- Utility bar ---------- */
.utility-bar {
  height: var(--utility-h);
  background: var(--color-inverse-bg-deep);
  border-bottom: var(--border-thin) solid var(--color-inverse-border);
  font-size: var(--text-2xs);
  line-height: var(--leading-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-inverse-muted);
}
.utility-bar__inner {
  height: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
}
.utility-bar__cred { display: flex; align-items: center; gap: var(--space-1); white-space: nowrap; }
.u-short { display: none; }
.utility-bar__cred .icon { color: var(--color-accent); }
.utility-bar__sep {
  width: var(--space-half); height: var(--space-half);
  border-radius: var(--radius-full);
  background: var(--steel-500);
  margin-inline: var(--space-1);
}
.utility-bar__contact { display: flex; align-items: center; gap: var(--space-3); }
.utility-bar__contact a {
  display: inline-flex; align-items: center; gap: var(--space-1);
  transition: color var(--dur-base) var(--ease-out);
}
.utility-bar__contact a:hover { color: var(--color-inverse-text); }
.utility-bar__contact .icon { width: 14px; height: 14px; }

/* ---------- Nav bar ---------- */
.nav-bar {
  position: relative;
  height: var(--nav-h);
  transition: height var(--dur-slow) var(--ease-out);
}
/* Solid backdrop lives on a pseudo-element so it can fade + cast a shadow
   independently of the content. */
.nav-bar::before {
  content: "";
  position: absolute; inset: 0;
  background: rgb(10 23 48 / 0.86);
  backdrop-filter: saturate(140%) blur(16px);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
  border-bottom: var(--border-thin) solid var(--color-inverse-border);
  box-shadow: 0 0 0 rgb(6 14 28 / 0);
  opacity: 0;
  transition:
    opacity var(--dur-slow) var(--ease-out),
    box-shadow var(--dur-slow) var(--ease-out);
}
.nav-bar__inner {
  position: relative;
  height: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
}

/* Scrolled state */
.site-header.is-scrolled { transform: translateY(calc(var(--utility-h) * -1)); }
.site-header.is-scrolled .nav-bar { height: var(--nav-h-compact); }
.site-header.is-scrolled .nav-bar::before {
  opacity: 1;
  box-shadow: var(--shadow-lg);
}

/* ---------- Brand ---------- */
.brand { display: inline-flex; align-items: center; gap: var(--space-2); }
.brand__mark {
  display: grid; place-items: center;
  width: var(--space-6); height: var(--space-6);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-family: var(--font-display);
  font-variation-settings: "wdth" 125;
  font-weight: var(--weight-black);
  font-size: var(--text-xs);
  letter-spacing: -0.01em;
  border-radius: var(--radius-sm);
  transition:
    width var(--dur-slow) var(--ease-out),
    height var(--dur-slow) var(--ease-out),
    box-shadow var(--dur-slow) var(--ease-out);
}
.brand:hover .brand__mark { box-shadow: var(--shadow-accent); }
.is-scrolled .brand__mark { width: var(--space-5); height: var(--space-5); }
.brand__text { display: flex; flex-direction: column; white-space: nowrap; }
.brand__name {
  font-family: var(--font-display);
  font-variation-settings: "wdth" var(--display-width);
  font-weight: var(--weight-bold);
  font-size: var(--text-md);
  line-height: var(--leading-xs);
  letter-spacing: -0.01em;
}
.brand__tag {
  font-size: var(--text-2xs);
  line-height: var(--leading-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-inverse-muted);
}

/* ---------- Primary nav ---------- */
.primary-nav { display: none; }
.primary-nav__list { display: flex; align-items: center; gap: var(--space-4); }
.primary-nav__link {
  position: relative;
  display: inline-block;
  padding-block: var(--space-1);
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  font-weight: var(--weight-medium);
  color: rgb(255 255 255 / 0.78);
  transition: color var(--dur-base) var(--ease-out);
}
.primary-nav__link::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: var(--border-thick);
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-slow) var(--ease-out);
}
.primary-nav__link:hover,
.primary-nav__link[aria-current="true"] { color: var(--color-inverse-text); }
.primary-nav__link:hover::after,
.primary-nav__link[aria-current="true"]::after { transform: scaleX(1); transform-origin: left; }

.nav-bar__actions { display: flex; align-items: center; gap: var(--space-1); }
.nav-bar__cta { display: none; }

/* ---------- Icon buttons (mobile) ---------- */
.icon-btn {
  display: grid; place-items: center;
  width: var(--space-6); height: var(--space-6);
  border-radius: var(--radius-md);
  border: var(--border-thin) solid var(--color-inverse-border);
  transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.icon-btn:hover { background: rgb(255 255 255 / 0.06); border-color: rgb(255 255 255 / 0.28); }

.menu-toggle__bars,
.menu-toggle__bars::before,
.menu-toggle__bars::after {
  display: block;
  width: 18px; height: var(--border-thick);
  background: currentColor;
  border-radius: var(--radius-full);
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.menu-toggle__bars { position: relative; }
.menu-toggle__bars::before,
.menu-toggle__bars::after { content: ""; position: absolute; left: 0; }
.menu-toggle__bars::before { transform: translateY(-6px); }
.menu-toggle__bars::after  { transform: translateY(6px); }
[data-menu-open] .menu-toggle__bars { background: transparent; }
[data-menu-open] .menu-toggle__bars::before { transform: rotate(45deg); background: var(--color-inverse-text); }
[data-menu-open] .menu-toggle__bars::after  { transform: rotate(-45deg); background: var(--color-inverse-text); }

/* ---------- Mobile menu panel ---------- */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-header) - 1);
  padding-top: calc(var(--utility-h) + var(--nav-h) + var(--space-3));
  padding-bottom: var(--space-4);
  background: var(--color-inverse-bg-deep);
  color: var(--color-inverse-text);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(var(--space-2) * -1));
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out),
    visibility 0s linear var(--dur-slow);
}
[data-scrolled] .mobile-menu { padding-top: calc(var(--nav-h-compact) + var(--space-3)); }
[data-menu-open] .mobile-menu {
  opacity: 1; visibility: visible; transform: none;
  transition-delay: 0s;
}
[data-menu-open] .nav-bar::before { opacity: 1; }

.mobile-menu__inner { display: flex; flex-direction: column; gap: var(--space-5); min-height: 100%; }
.mobile-menu__list { border-top: var(--border-thin) solid var(--color-inverse-border); }
.mobile-menu__link {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: var(--space-2);
  border-bottom: var(--border-thin) solid var(--color-inverse-border);
  font-family: var(--font-display);
  font-variation-settings: "wdth" var(--display-width);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xl);
  line-height: var(--leading-xl);
}
.mobile-menu__link .icon { color: var(--steel-400); transition: transform var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.mobile-menu__link:hover .icon { transform: translateX(var(--space-half)); color: var(--color-accent); }
.mobile-menu__contact { display: grid; gap: var(--space-1); color: var(--color-inverse-muted); font-size: var(--text-xs); line-height: var(--leading-xs); }
.mobile-menu__contact a { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-inverse-text); font-size: var(--text-sm); line-height: var(--leading-sm); }
.mobile-menu .btn { width: 100%; }

/* Staggered entrance for menu items */
.mobile-menu [data-stagger] {
  opacity: 0;
  transform: translateY(var(--space-1));
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
[data-menu-open] .mobile-menu [data-stagger] {
  opacity: 1; transform: none;
  transition-delay: calc(60ms * var(--i, 0) + 80ms);
}

/* ---------- Responsive ---------- */
@media (max-width: 767px) {
  .utility-bar__cred-extra,
  .utility-bar__contact-email { display: none; }
}
@media (max-width: 479px) {
  .utility-bar__contact,
  .u-long,
  .brand__tag { display: none; }
  .u-short { display: inline; }
}

@media (min-width: 1024px) {
  .primary-nav { display: block; }
  .nav-bar__cta { display: inline-flex; }
  .nav-bar__call,
  .menu-toggle,
  .mobile-menu { display: none; }
}