/* ==========================================================================
   Header / navigation
   Transparent over a media hero, solid paper once scrolled.
   ========================================================================== */

.topbar {
  background: var(--ink);
  color: rgba(255, 255, 255, .6);
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  position: relative;
  z-index: 60;
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 40px;
  padding-block: .35rem;
}

.topbar__note {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  letter-spacing: .02em;
}

.topbar__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brass-lite);
  flex: none;
  box-shadow: 0 0 0 3px rgba(180, 130, 58, .22);
}

.topbar__links { display: flex; gap: 1.6rem; align-items: center; }

.topbar a {
  color: rgba(255, 255, 255, .82);
  transition: color .25s var(--ease);
  white-space: nowrap;
}

.topbar a:hover { color: #fff; }

@media (max-width: 860px) {
  .topbar__note { display: none; }
  .topbar__inner { justify-content: center; }
  .topbar__links { gap: 1.1rem; font-size: 12px; }
}

/* --- Header ------------------------------------------------------------ */

.site-head {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  transition: background .35s var(--ease), border-color .35s var(--ease),
              box-shadow .35s var(--ease);
}

.site-head__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: var(--nav-h);
}

/* Over-hero (transparent) variant */
/* Sticky (not fixed) so the utility bar above can scroll away cleanly; the
   hero is pulled up underneath it by the same height. */
.site-head--over {
  background: transparent;
  border-color: transparent;
}

/* First section on the page slides up under the transparent header. */
.hero, .phero { margin-top: calc(-1 * var(--nav-h)); }

.site-head--over .brand__word,
.site-head--over .brand__tag,
.site-head--over .nav__link { color: #fff; }

.site-head--over .brand__mark { --mark-ink: #fff; }
.site-head--over .burger span { background: #fff; }

.site-head--over.is-stuck {
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-color: var(--line);
  box-shadow: 0 1px 20px rgba(10, 26, 40, .07);
}

.site-head--over.is-stuck .brand__word,
.site-head--over.is-stuck .nav__link { color: var(--ink); }

.site-head--over.is-stuck .brand__tag { color: var(--muted); }
.site-head--over.is-stuck .brand__mark { --mark-ink: var(--ink); }
.site-head--over.is-stuck .burger span { background: var(--ink); }

/* --- Brand ------------------------------------------------------------- */

.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  flex: none;
}

/* Mark: a vessel running right with its wake spreading astern — the same
   language as the dashed route legs on the coverage map. */
.brand__mark {
  --mark-ink: var(--ink);
  width: 36px;
  height: 36px;
  flex: none;
  overflow: visible;
}

.brand__mark .mk-a { fill: var(--mark-ink); }
.brand__mark .mk-b { fill: var(--brass); }

/* Transforming the paths individually forces the renderer to rasterise them
   into a layer, which is what made the mark look grainy. Fade the brass half
   instead — no geometry is moved, so the edges stay vector-sharp. */
.brand__mark { shape-rendering: geometricPrecision; }
.brand__mark .mk-b { transition: fill .35s var(--ease); }
.brand:hover .mk-b { fill: var(--brass-lite); }

.site-head--over:not(.is-stuck) .brand__mark .mk-b,
.foot__brand .brand__mark .mk-b { fill: var(--brass-lite); }

.brand__text { display: flex; flex-direction: column; line-height: 1; padding-top: 1px; }

.brand__word {
  font-family: var(--font-display);
  font-size: 1.34rem;
  font-weight: 800;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--ink);
  transition: color .35s var(--ease);
}

.brand__tag {
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 5px;
  transition: color .35s var(--ease);
}

/* --- Nav links --------------------------------------------------------- */

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2.4vw, 2.3rem);
  margin-left: auto;
}

.nav__link {
  position: relative;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink);
  padding-block: .4rem;
  transition: color .25s var(--ease);
  white-space: nowrap;
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s var(--ease);
}

.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

.nav__link[aria-current="page"] { color: var(--brass); }
.site-head--over .nav__link[aria-current="page"] { color: var(--brass-lite); }

.head__cta { flex: none; padding: .9em 1.5em; }

/* Solid, not outlined — this is the primary conversion point on every page. */
.site-head--over:not(.is-stuck) .head__cta {
  --btn-bg: #fff; --btn-fg: var(--ink); --btn-bd: #fff;
  --btn-sweep: var(--brass-lite); --btn-fg-hover: #0A1A28;
}

/* --- Burger ------------------------------------------------------------ */

.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  margin-left: auto;
}

.burger span {
  display: block;
  height: 1.5px;
  width: 24px;
  background: var(--ink);
  margin-inline: auto;
  transition: transform .35s var(--ease), opacity .2s var(--ease), background .35s var(--ease);
}

.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* --- Mobile drawer ------------------------------------------------------ */

.drawer {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--ink);
  color: #fff;
  padding: calc(var(--nav-h) + 2.5rem) var(--gutter) 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
  overflow-y: auto;
}

.drawer.is-open { opacity: 1; visibility: visible; transform: none; }

.drawer__nav { display: flex; flex-direction: column; }

.drawer__link {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: #fff;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.drawer__link span { color: rgba(255,255,255,.35); font-size: .8rem; font-family: var(--font-body); }
.drawer__link[aria-current="page"] { color: var(--brass-lite); }

.drawer__foot { margin-top: auto; display: grid; gap: 1rem; }
.drawer__foot a.contact-line { color: rgba(255,255,255,.75); font-size: var(--fs-small); }

@media (max-width: 1040px) {
  .nav, .head__cta { display: none; }
  .burger { display: flex; }
}