/* ==========================================================================
   Header, dropdown menus and footer.
   One stylesheet driving both desktop and mobile from the same markup.
   ========================================================================== */

/* The V2 design's nav: translucent white over a saturating blur, with a hairline
   rather than a shadow at rest. The blur is what lets a hero photograph read
   faintly through the bar as the page scrolls under it.

   backdrop-filter has no effect where it is unsupported, and the 0.9 alpha
   white is legible on its own in that case, so there is no fallback to write. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow var(--t-base) var(--ease);
}
.site-header.is-stuck { box-shadow: 0 2px 18px rgba(11, 59, 96, 0.1); }

/* The header runs edge to edge rather than inside the 1200px content
   container, so the logo sits in the top-left corner of the viewport and the
   CTA in the top-right at any monitor width. Page content stays capped at
   --container; only the header chrome is full-bleed. */
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  width: 100%;
  padding: 0 clamp(20px, 2.4vw, 40px);
  min-height: var(--header-h);
}

.site-header__logo { flex: 0 0 auto; }
/* 132px, down from 158px at Owen's request. The header height is set by
   --header-h (raised alongside this), so the smaller mark sits centred in clear
   whitespace above and beneath instead of filling the bar edge to edge; it does
   not reflow the bar. */
.site-header__logo img { width: 132px; height: auto; display: block; }

.primary-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1 1 auto;
  gap: 24px;
}

.primary-nav__list {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.primary-nav__item { position: relative; }

/* The design holds these back to 78% navy and brings them to full strength on
   hover, rather than switching them to pink. The item that owns the open panel
   is the only one that goes pink. */
.primary-nav__trigger,
.primary-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 12px 16px;
  border: 0;
  background: none;
  color: var(--navy);
  opacity: 0.78;
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.primary-nav__trigger:hover,
.primary-nav__link:hover { opacity: 1; text-decoration: none; }

.caret {
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--t-base) var(--ease);
}
/* The caret carries its menu's accent colour. */
.primary-nav__item[data-accent="pink"] .caret { color: var(--pink); }
.primary-nav__item[data-accent="teal"] .caret { color: var(--turquoise); }
.primary-nav__item[data-accent="arctic"] .caret { color: var(--arctic-deco); }

.is-open > .primary-nav__trigger { color: var(--pink); opacity: 1; }
.is-open > .primary-nav__trigger .caret { transform: rotate(-135deg) translateY(-2px); }

/* ---- Dropdown panel ------------------------------------------------------ */

/* The panel: a hairline border, a 12px radius and a long soft navy shadow.

   The V2 design put a 5px accent stripe down the left edge, pink on Solutions and
   turquoise on About. Both are gone at Owen's request, along with the tinted item
   titles they matched, so the panel is now plain: navy text on white, and the open
   trigger above it is what says which menu you are in. */
.mega {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 110;
  min-width: 340px;
  padding: 14px;
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  box-shadow: var(--shadow-mega);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
}
.mega[hidden] { display: none; }

.is-open > .mega {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* An invisible bridge across the gap between trigger and panel, so the pointer
   can travel down without leaving the hover area. Load-bearing now that the
   menu closes on mouse-out: without it, crossing the gap would fire mouseleave
   and fold the panel shut before the pointer reached it. */
.has-menu::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 10px;
}

.mega__list { margin: 0; padding: 0; list-style: none; }
.mega__list--2col { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; }

.mega__list a {
  display: block;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  color: var(--navy);
  transition: background-color var(--t-fast) var(--ease);
}
.mega__list a:hover { background: var(--bg-soft); text-decoration: none; }
/* The current page is marked by its fill alone. It used to also carry a 3px pink
   inset down its left edge, which is the same side-bar treatment Owen had removed
   from the panel itself, so it went with them. The fill still shows it, and the
   link keeps aria-current="page" either way. */
.mega__list a[aria-current="page"] { background: var(--bg-soft); }

/* Item titles are navy in every panel, per Owen: the design tinted them to the
   panel's accent, which made Solutions a column of pink and About a column of
   teal. The open trigger above the panel is what identifies it now, since the
   accent stripe is gone too. Navy on white is 10.4:1
   rather than the 4.3:1 the pink column was managing. */
.mega__label {
  display: block;
  color: var(--navy);
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.mega__caption {
  display: block;
  margin-top: 2px;
  color: var(--graphite);
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.35;
}

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

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 0 0 auto;
}

/* Pink in the design, so it reads as the account entry point rather than as
   another navigation item. */
.site-header__login {
  color: var(--pink);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.site-header__login:hover { color: var(--navy); }

/* The design runs the nav's own CTA tighter than a body button. */
.site-header__cta { white-space: nowrap; padding: 11px 20px; }

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

.site-header__burger {
  display: none;
  margin-left: auto;
  padding: 10px;
  border: 0;
  background: none;
  cursor: pointer;
}
.burger-bars { display: grid; gap: 5px; width: 26px; }
.burger-bars i {
  display: block;
  height: 2.5px;
  background: var(--navy);
  border-radius: 2px;
  transition: transform var(--t-base) var(--ease), opacity var(--t-fast);
}
[aria-expanded="true"] .burger-bars i:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
[aria-expanded="true"] .burger-bars i:nth-child(2) { opacity: 0; }
[aria-expanded="true"] .burger-bars i:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

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

@media (max-width: 900px) {
  .site-header__burger { display: block; }

  /* The nav drawer below is position:fixed and a descendant of the header. A
     backdrop-filter on the header makes it the containing block for fixed
     descendants, which collapses the drawer to the header's height and lets its
     items spill over the page. Drop the blur on mobile so the drawer fills the
     viewport; the 0.9-alpha white header background stands on its own. */
  .site-header { -webkit-backdrop-filter: none; backdrop-filter: none; }

  /* While the drawer is open the page is scroll-locked with overflow:hidden on
     the root (see body.nav-open below). That lock breaks the header's
     position:sticky: with no scroll container it falls back to its in-flow
     position and, if the drawer was opened part-way down the page, scrolls off
     the top of the viewport, leaving a strip of frozen page content peeking
     through the gap above the drawer. Pin the header to the viewport instead so
     the white logo bar is always at the top wherever the drawer is opened. The
     drawer starts at var(--header-h), so a fixed header at top:0 sits flush
     above it. Ancestors set no containing block for fixed children (body uses
     overflow:clip, the header's blur is dropped on mobile), so this pins to the
     viewport. */
  body.nav-open .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }

  .primary-nav {
    position: fixed;
    inset: var(--header-h) 0 0;
    display: block;
    padding: 20px var(--gutter) 48px;
    background: var(--white);
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--t-base) var(--ease), visibility var(--t-base);
  }
  body.nav-open .primary-nav { transform: translateX(0); visibility: visible; }
  /* Lock the page behind the open drawer. The scroll container is <html>
     (its overflow-x:hidden computes overflow to `hidden auto`), so locking the
     body alone does nothing — the page keeps scrolling under the drawer and the
     sticky header drifts. Lock the root too: the header stays put and only the
     drawer is interactive while it is open. */
  body.nav-open { overflow: hidden; }
  html:has(body.nav-open) { overflow: hidden; }

  .primary-nav__list { display: block; }
  .primary-nav__item { border-bottom: 1px solid var(--line); }

  .primary-nav__trigger,
  .primary-nav__link {
    width: 100%;
    justify-content: space-between;
    padding: 18px 4px;
    font-size: 1rem;
    opacity: 1;
  }

  /* In the drawer the panels are accordions in the flow, not overlays. */
  .mega {
    position: static;
    min-width: 0;
    padding: 0 0 12px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    display: none;
  }
  .is-open > .mega { display: block; }
  .mega__list--2col { grid-template-columns: 1fr; }
  .mega__list a { padding: 12px 14px; }

  .has-menu::after { display: none; }

  .site-header__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    margin-top: 28px;
  }
  .site-header__login { padding: 12px; text-align: center; }
  .site-header__cta { width: 100%; }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  padding: clamp(48px, 6vw, 80px) 0 32px;
  background: var(--navy);
  color: var(--white);
  font-size: 0.88rem;
}
.site-footer a { color: var(--white); }
.site-footer a:hover { color: var(--white); text-decoration: underline; }

.site-footer__top {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: clamp(28px, 4vw, 56px);
  padding-bottom: 40px;
}

.site-footer__brand img { width: 200px; margin-bottom: 20px; }
.site-footer__address { font-style: normal; line-height: 1.7; }

.site-footer h2 {
  margin-bottom: 16px;
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.site-footer ul { margin: 0; padding: 0; list-style: none; }
.site-footer li + li { margin-top: 10px; }

.site-footer__social {
  display: flex;
  gap: 12px;
  margin-top: 22px;
}
.site-footer__social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transition: background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.site-footer__social a:hover { background: var(--pink); border-color: var(--pink); }
.site-footer__social svg { width: 17px; height: 17px; fill: currentColor; }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.82rem;
  color: var(--white);
}
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 20px; }

@media (max-width: 900px) {
  .site-footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .site-footer__top { grid-template-columns: 1fr; }
}