/* Shared site nav. Ported from the redesign concept so both the remake and
   the redesign branch run the same component. Tokens are namespaced additions
   -- none of these names exist in the live styles.css, so nothing is clobbered. */
:root {
  --nav-light: #f4f8fb;
  --nav-deep: #0a1930;
  --nav-brand-deep: #008fb1;
  --nav-ice: #7debff;
  --nav-mist: #e4ecf7;
  --nav-r-lg: 18px;
  --nav-r-md: 14px;
  --nav-r-sm: 10px;
  --nav-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* gentler both-ends curve for the surface/colour cross-fade */
  --nav-fade: cubic-bezier(0.42, 0, 0.28, 1);
}

/* One sans across the site: the nav rides the shared Figtree token (declared
   in styles.css, loaded before this file on every page). */
.h-nav, .h-menu {
  font-family: var(--font-sans, "Figtree", ui-sans-serif, system-ui, sans-serif);
  letter-spacing: 0.005em;
}

.h-nav *, .h-menu * { box-sizing: border-box; }
.h-nav a, .h-menu a { text-decoration: none; color: inherit; }

/* three-column services panel */
.h-mega-cols.cols-3 { grid-template-columns: repeat(3, 1fr); }

/* the page needs room for the fixed bar */
body { padding-top: 0; }

/* ---------- Nav: solid white, hides on scroll-down ---------- */
.h-nav {
  overflow: clip;
  position: fixed;
  /* the page runs under the iPhone status bar (viewport-fit=cover), so the
     bar keeps its distance from the notch */
  top: calc(clamp(12px, 4.5vh, 44px) + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  width: min(1460px, calc(100% - clamp(18px, 3vw, 40px)));
  background: #fff;
  border: 1px solid rgba(10, 25, 48, 0.16);
  border-radius: var(--nav-r-lg);
  color: var(--navy);
  transition: transform 620ms var(--nav-ease);
}

.h-nav.hidden {
  transform: translate(-50%, calc(-100% - 96px));
  pointer-events: none;
}

.h-nav-bar {
  width: 100%;
  max-width: 1460px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  padding: 15px clamp(16px, 2vw, 26px);
  transition: padding 320ms var(--nav-ease);
}

.h-nav-logo { justify-self: start; display: block; }
.h-nav-logo img { display: block; width: auto; transition: height 320ms var(--nav-ease); }
.h-nav-logo { position: relative; display: block; line-height: 0; }
.h-nav-logo .logo-full { height: 42px; transition: opacity 300ms var(--nav-ease); }
.h-nav-logo .logo-white { display: none; }


.h-links {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 2px;
  font-size: 15.5px;
  font-weight: 600;
  color: inherit;
}

.h-pill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: var(--nav-r-sm);
  background: var(--nav-light);
  opacity: 0;
  pointer-events: none;
  transition: transform 300ms var(--nav-ease), width 300ms var(--nav-ease), opacity 160ms linear;
}

.h-pill.on { opacity: 1; }



.h-links a,
.h-links button {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 15px;
  border: 0;
  border-radius: var(--nav-r-sm);
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: color 150ms var(--nav-ease);
}

.h-links a:hover,
.h-links button:hover,
.h-links [data-menu].active { color: var(--nav-brand-deep); }



.h-links .chev {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 280ms var(--nav-ease);
}

.h-links [data-menu].active .chev { transform: rotate(225deg) translateY(-1px); }

.h-nav-side { position: relative; justify-self: end; display: flex; align-items: center; gap: 8px; }

.h-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  border: 0;
  border-radius: var(--nav-r-sm);
  background: transparent;
  color: var(--navy);
  font: inherit;
  font-size: 15.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 160ms var(--nav-ease), color 160ms var(--nav-ease);
}

/* The button sits outside .h-links, so the sliding pill never reaches it. It
   gets its own bubble instead, growing from the centre the way the CTA's does
   — in the nav's light tone, so it reads as a nav item and not a second CTA. */
.h-contact-btn { position: relative; overflow: hidden; isolation: isolate; }

.h-contact-btn::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: 150%;
  aspect-ratio: 1;
  border-radius: 999px;
  background: var(--nav-light);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 440ms var(--nav-ease);
}

.h-contact-btn:hover::before,
.h-contact-btn.active::before { transform: translate(-50%, -50%) scale(1); }

.h-contact-btn:hover, .h-contact-btn.active { color: var(--nav-brand-deep); }

.h-contact[hidden] { display: none; }

.h-contact {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  width: 320px;
  padding: 10px;
  background: #fff;
  border: 1px solid rgba(10, 25, 48, 0.12);
  border-radius: var(--nav-r-md);
  box-shadow: 0 24px 60px rgba(5, 13, 28, 0.22);
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  transform-origin: 90% top;
  transition: opacity 220ms var(--nav-ease), transform 260ms var(--nav-ease);
  z-index: 95;
}

.h-contact.open { opacity: 1; transform: none; }

.h-contact .head { margin: 6px 10px 10px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }

.h-contact a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: var(--nav-r-sm);
  transition: background 150ms var(--nav-ease);
}

/* One bubble slides between the rows rather than each row lighting its own
   background, so the hover reads as a single object following the pointer —
   the same idea as the pill across the main links. */
.h-cbubble {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: var(--nav-r-sm);
  background: var(--nav-light);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition: transform 300ms var(--nav-ease),
              width 300ms var(--nav-ease),
              height 300ms var(--nav-ease),
              opacity 160ms linear;
}

.h-cbubble.on { opacity: 1; }
.h-contact a { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .h-cbubble { transition: opacity 160ms linear; }
}
.h-contact a .ic { color: var(--nav-brand-deep); width: 22px; height: 22px; }
.h-contact a b { display: block; color: var(--navy); font-size: 15px; font-weight: 600; }
.h-contact a span { display: block; color: var(--muted); font-size: 13px; }

/* One shared press/hover: bubble grows from the centre, lift, press */
.h-cta,
.h-lead button,
.h-talk {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 220ms var(--nav-ease), transform 220ms var(--nav-ease), border-color 260ms var(--nav-ease);
}

.h-cta::before,
.h-lead button::before,
.h-talk::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: 155%;
  aspect-ratio: 1;
  border-radius: 999px;
  background: var(--brand);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 460ms var(--nav-ease);
}

.h-cta:hover::before,
.h-lead button:hover::before,
.h-talk:hover::before { transform: translate(-50%, -50%) scale(1); }

.h-cta:hover,
.h-lead button:hover,
.h-talk:hover {
  color: var(--nav-deep);
  transform: translateY(-3px);
  /* the growing bubble is clipped to the padding box, so without this the
     border kept showing the dark fill while everything inside went blue */
  border-color: var(--brand);
}

.h-cta:active,
.h-lead button:active,
.h-talk:active { transform: translateY(-1px) scale(0.97); }

/* Book a call: faint gradient rim + gradient letters */
.h-cta {
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  color: #fff;
  background-image:
    linear-gradient(var(--nav-deep), var(--nav-deep)),
    linear-gradient(115deg, rgba(0, 188, 228, 0.42), rgba(125, 235, 255, 0.10) 45%, rgba(0, 188, 228, 0.34));
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

.h-cta .lbl {
  background: linear-gradient(100deg, #ffffff 22%, #e2f6ff 52%, #ffffff 84%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: -webkit-text-fill-color 220ms var(--nav-ease);
}

.h-cta:hover .lbl { -webkit-text-fill-color: var(--nav-deep); }

.h-burger {
  color: inherit;
  display: none;
  width: 42px;
  height: 42px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.h-burger span {
  display: block;
  width: 22px;
  height: 2.5px;
  margin: 4px auto;
  background: currentColor;
}

/* While the sheet is open the three bars fold into an X, in two beats:
   the outer bars slide onto the middle one, then rotate. Closing unwinds
   in the same order. The transitions for this live on the
   .h-nav .h-burger span rules further down, merged with the colour fade
   that rule already owns -- transition is one property, so a lone
   declaration here would be thrown away wholesale. */
.h-burger[aria-expanded="true"] span:nth-child(1) { translate: 0 6.5px; rotate: 45deg; }
.h-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.h-burger[aria-expanded="true"] span:nth-child(3) { translate: 0 -6.5px; rotate: -45deg; }




/* mega: height animated by JS, chevron synced */
.h-mega {
  overflow: clip;
  height: 0;
  visibility: hidden;
  border-radius: 0 0 var(--nav-r-lg) var(--nav-r-lg);
  transition: height 420ms var(--nav-ease), visibility 0s 420ms;
}

.h-mega { background: linear-gradient(#fff 0, var(--nav-light) 34px); }

.h-mega.open {
  visibility: visible;
  transition: height 420ms var(--nav-ease);
}

.h-mega-inner {
  padding: 26px clamp(18px, 2vw, 28px) 30px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 240ms var(--nav-ease) 90ms, transform 280ms var(--nav-ease) 90ms;
}

.h-mega.open .h-mega-inner { opacity: 1; transform: none; }

.h-mega-panel { display: none; }

.h-mega-panel.active {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 34px;
}

html.js .h-mega-panel.active { animation: panelIn 300ms var(--nav-ease); }

@keyframes panelIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.h-mega-cols { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 26px; align-content: start; }

/* Padded to the same 12px the links below carry, so the label lines up with
   their text rather than the edge of the panel. */
.h-mega-title {
  grid-column: 1 / -1;
  margin: 0 0 4px;
  padding-left: 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.h-mega-links { display: flex; flex-direction: column; }

.h-mega-links a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 11px 12px;
  border-radius: var(--nav-r-sm);
  transition: background 150ms var(--nav-ease);
}

/* One bubble slides between the panel's links, across columns as well as
   down them, the same way it does in the contact drawer - rather than each
   link lighting its own background where the pointer happens to land. */
.h-mbubble {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: var(--nav-r-sm);
  background: var(--nav-light);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition: transform 300ms var(--nav-ease),
              width 300ms var(--nav-ease),
              height 300ms var(--nav-ease),
              opacity 160ms linear;
}

.h-mbubble.on { opacity: 1; }
.h-mega-links a { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .h-mbubble { transition: opacity 160ms linear; }
}
.h-mega-links a b { color: var(--navy); font-size: 15.5px; font-weight: 600; }
.h-mega-links a span { color: var(--muted); font-size: 13px; }

.h-mega-links a.h-switch-link b { color: var(--nav-brand-deep); }

/* ---------- Featured insight card ----------
   The editorial slot on the right of each mega panel. Static fallback markup
   ships in the page; site-nav.js swaps in the active featured Resource when
   one exists. Light card on the white panel -- the old near-black promo lost
   its own heading into its background. */
.h-mega-insight {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 22px 24px;
  background: var(--nav-light);
  border: 1px solid rgba(10, 25, 48, 0.08);
  border-radius: var(--nav-r-md);
  transition: border-color 180ms var(--nav-ease), transform 180ms var(--nav-ease);
}

.h-mega-insight:hover { border-color: rgba(10, 25, 48, 0.2); transform: translateY(-1px); }

.h-insight-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
}

.h-insight-tag {
  color: var(--nav-brand-deep);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.h-insight-title {
  color: var(--navy);
  font-family: var(--font-display, "Figtree", sans-serif);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.h-insight-excerpt {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.h-insight-meta { color: var(--muted); font-size: 12.5px; }

.h-insight-go {
  margin-top: auto;
  padding-top: 6px;
  color: var(--nav-brand-deep);
  font-size: 13.5px;
  font-weight: 600;
}

.h-insight-go .arr { display: inline-block; transition: transform 180ms var(--nav-ease); }
.h-mega-insight:hover .h-insight-go .arr { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .h-mega-insight, .h-insight-go .arr { transition: none; }
  .h-mega-insight:hover { transform: none; }
}

.h-menu[hidden] { display: none; }

.h-menu {
  position: fixed;
  top: calc(84px + env(safe-area-inset-top, 0px));
  left: 16px;
  right: 16px;
  z-index: 89;
  display: flex;
  flex-direction: column;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--nav-r-lg);
  box-shadow: 0 20px 50px rgba(5, 13, 28, 0.3);
}

.h-menu a { padding: 14px 16px; border-radius: var(--nav-r-sm); color: var(--navy); font-weight: 600; }
.h-menu a:hover { background: var(--nav-light); }



/* ---------- Nav responsive ---------- */
@media (max-width: 980px) {
  .h-links, .h-nav-side .h-cta, .h-contact-btn { display: none; }
  .h-burger { display: block; }
  .h-nav { top: calc(10px + env(safe-area-inset-top, 0px)); }
  .h-nav-bar { grid-template-columns: auto 1fr auto; padding: 10px 14px; }
  .h-nav-logo .logo-full { height: 34px; }
  .h-mega { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .h-nav, .h-nav-bar, .h-nav-logo img, .h-mega, .h-pill, .h-contact, .h-burger span { transition: none; }
  .h-mega-panel.active { animation: none; }
}

/* ---------- Remake: dark translucent bar that turns white on use ----------
   Default is a smoked-glass bar with the white logo, as on the original site.
   Hover, keyboard focus or an open mega menu flips the whole thing to white
   and returns the logo and the CTA to their normal colours. */
.h-nav {
  /* Barely any fill of its own. brightness() in the backdrop filter is what
     makes it adapt: a bright backdrop gets pulled down hard, a dark one is
     already dark so it barely moves -- so the bar reads darker over sky and
     almost clear over buildings, with no JS sampling the video. */
  background: rgba(10, 25, 48, 0.05);
  -webkit-backdrop-filter: blur(18px) brightness(0.92) saturate(1.05);
  backdrop-filter: blur(18px) brightness(0.92) saturate(1.05);
  border-color: transparent;
  color: #fff;
  transition: transform 620ms var(--nav-ease),
              background 640ms var(--nav-fade),
              -webkit-backdrop-filter 640ms var(--nav-fade),
              backdrop-filter 640ms var(--nav-fade),
              box-shadow 520ms var(--nav-ease), color 520ms var(--nav-ease),
              border-color 560ms var(--nav-fade);
}

/* give the mark some air on its left */
/* nudged right for air, and down a touch so the DALI&CO lockup optically
   centres rather than the whole block including the strapline */
.h-nav-logo {
  margin-left: clamp(8px, 1.4vw, 24px);
}

.h-nav-logo .logo-full {
  transition: filter 260ms var(--nav-ease);
  filter: brightness(0) invert(1);
  transition: filter 260ms var(--nav-ease);
}

.h-nav .h-contact-btn { color: inherit; }
.h-nav .h-pill { background: rgba(255, 255, 255, 0.16); }

/* the CTA has to invert too, or it vanishes into the dark bar */
.h-nav .h-cta { background: #fff; color: var(--nav-deep); }
.h-nav .h-cta .lbl { -webkit-text-fill-color: var(--nav-deep); }
.h-nav .h-burger span { background: #fff; }

/* ---- interacted: solid white ---- */
.h-nav.closing,
.h-nav:has(.h-links:hover),
.h-nav:has(:focus-visible),
.h-nav:has(.h-mega.open),
.h-nav:has(.h-contact.open),
.h-nav:has(.h-contact-btn:hover) {
  background: #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-color: rgba(10, 25, 48, 0.07);
  color: var(--navy);
}

.h-nav.closing .logo-full,
.h-nav:has(.h-links:hover) .logo-full,
.h-nav:has(:focus-visible) .logo-full,
.h-nav:has(.h-mega.open) .logo-full,
.h-nav:has(.h-contact.open) .logo-full,
.h-nav:has(.h-contact-btn:hover) .logo-full { filter: none; }
.h-nav:has(.h-contact.open) .h-cta,
.h-nav:has(.h-contact-btn:hover) .h-cta { background: var(--nav-deep); color: #fff; }
.h-nav:has(.h-contact.open) .h-cta .lbl,
.h-nav:has(.h-contact-btn:hover) .h-cta .lbl { -webkit-text-fill-color: #fff; }

.h-nav.closing .h-pill,
.h-nav:has(.h-links:hover) .h-pill,
.h-nav:has(:focus-visible) .h-pill,
.h-nav:has(.h-mega.open) .h-pill { background: var(--nav-light); }

.h-nav.closing .h-cta,
.h-nav:has(.h-links:hover) .h-cta,
.h-nav:has(:focus-visible) .h-cta,
.h-nav:has(.h-mega.open) .h-cta { background: var(--nav-deep); color: #fff; }
.h-nav.closing .h-cta .lbl,
.h-nav:has(.h-links:hover) .h-cta .lbl,
.h-nav:has(:focus-visible) .h-cta .lbl,
.h-nav:has(.h-mega.open) .h-cta .lbl { -webkit-text-fill-color: #fff; }

.h-nav.closing .h-burger span,
.h-nav:has(.h-links:hover) .h-burger span,
.h-nav:has(:focus-visible) .h-burger span,
.h-nav:has(.h-mega.open) .h-burger span { background: var(--navy); }

@media (prefers-reduced-motion: reduce) {
  .h-nav, .h-nav-logo .logo-full { transition: none; }
}

/* ---------- Nav surface by scroll position ---------- */
/* The width is always present and only the colour changes, so the bar never
   resizes as the hairline arrives — a transition on border-width would nudge
   everything inside it by a pixel. */
.h-nav { border: 1px solid transparent; }

/* All the way at the top: fully clear -- but never while a panel is open or
   closing, or this would beat the white state simply by sitting later in the
   file at the same specificity. */
.h-nav.at-top:not(.closing):not(:has(.h-links:hover)):not(:has(:focus-visible)):not(:has(.h-mega.open)):not(:has(.h-contact.open)) {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* past the hero, or any page without one: solid white */
.h-nav.past-hero {
  background: #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: var(--navy);
  /* no shadow, but a hairline so the white bar has a discernible edge against
     a white page */
  border-color: rgba(10, 25, 48, 0.07);
}

/* Pages with no media hero start on plain white, so at rest the hairline
   melts into the page. The frame returns the moment the visitor scrolls,
   points at the bar, tabs into it, or opens any menu. Logo and labels stay
   navy throughout: this only touches the border. */
.h-nav.flat-top { transition: transform 620ms var(--nav-ease), border-color 240ms ease; }

.h-nav.flat-top:not(:hover):not(.closing):not(:has(:focus-visible)):not(:has(.h-mega.open)):not(:has(.h-contact.open)):not(:has(.h-burger[aria-expanded="true"])) {
  border-color: transparent;
}

.h-nav.past-hero .logo-full { filter: none; }
.h-nav.past-hero .h-pill { background: var(--nav-light); }
.h-nav.past-hero .h-cta { background: var(--nav-deep); color: #fff; }
.h-nav.past-hero .h-cta .lbl { -webkit-text-fill-color: #fff; }
.h-nav.past-hero .h-burger span { background: var(--navy); }


/* ---------- Link text over the video ----------
   difference blending cannot reach the page here: backdrop-filter on .h-nav
   makes it a stacking context, so the labels would only ever blend against the
   bar's own near-empty background, which is why they stayed white over the
   bright buildings. A halo is the reliable fix -- it holds the letters against
   glass, sky and dark alike. */
.h-nav:not(.past-hero) .h-links,
.h-nav:not(.past-hero) .h-links a,
.h-nav:not(.past-hero) .h-links button,
.h-nav:not(.past-hero) .h-contact-btn {
  color: #fff;
}

/* whenever the bar is opaque white the labels go navy and lose the halo */
.h-nav.closing .h-links,
.h-nav.closing .h-links a,
.h-nav.closing .h-links button,
.h-nav.closing .h-contact-btn,
.h-nav.past-hero .h-links,
.h-nav.past-hero .h-contact-btn,
.h-nav:has(.h-links:hover) .h-links,
.h-nav:has(.h-links:hover) .h-contact-btn,
.h-nav:has(:focus-visible) .h-links,
.h-nav:has(:focus-visible) .h-contact-btn,
.h-nav:has(.h-mega.open) .h-links,
.h-nav:has(.h-mega.open) .h-contact-btn,
.h-nav:has(.h-contact.open) .h-links,
.h-nav:has(.h-contact.open) .h-contact-btn,
.h-nav.past-hero .h-links a, .h-nav.past-hero .h-links button,
.h-nav:has(.h-links:hover) .h-links a, .h-nav:has(.h-links:hover) .h-links button,
.h-nav:has(:focus-visible) .h-links a, .h-nav:has(:focus-visible) .h-links button,
.h-nav:has(.h-mega.open) .h-links a, .h-nav:has(.h-mega.open) .h-links button,
.h-nav:has(.h-contact.open) .h-links a, .h-nav:has(.h-contact.open) .h-links button,
.h-nav:has(.h-contact.open) .h-contact-btn,
.h-nav:has(.h-contact-btn:hover) .h-links a, .h-nav:has(.h-contact-btn:hover) .h-links button,
.h-nav:has(.h-contact-btn:hover) .h-contact-btn {
  color: var(--navy);
  text-shadow: none;
  mix-blend-mode: normal;
}


/* Asymmetric: going white is near-instant, the return to glass is the slow
   one. Applies to the bar and everything riding on it. */
.h-nav.closing,
.h-nav:has(.h-links:hover),
.h-nav:has(:focus-visible),
.h-nav:has(.h-mega.open),
.h-nav:has(.h-contact.open),
.h-nav:has(.h-links:hover) .h-links a,
.h-nav:has(.h-links:hover) .h-links button,
.h-nav:has(.h-links:hover) .h-contact-btn,
.h-nav:has(.h-mega.open) .h-links a,
.h-nav:has(.h-mega.open) .h-links button,
.h-nav:has(.h-mega.open) .h-contact-btn,
.h-nav:has(:focus-visible) .h-links a,
.h-nav:has(:focus-visible) .h-links button,
.h-nav:has(.h-links:hover) .logo-full,
.h-nav:has(.h-mega.open) .logo-full,
.h-nav:has(:focus-visible) .logo-full,
.h-nav:has(.h-contact.open) .logo-full,
.h-nav:has(.h-links:hover) .h-cta,
.h-nav:has(.h-mega.open) .h-cta,
.h-nav:has(:focus-visible) .h-cta,
.h-nav:has(.h-links:hover) .h-cta .lbl,
.h-nav:has(.h-mega.open) .h-cta .lbl,
.h-nav:has(.h-links:hover) .h-burger span,
.h-nav:has(.h-mega.open) .h-burger span,
.h-nav:has(.h-contact-btn:hover),
.h-nav:has(.h-contact.open),
.h-nav:has(.h-contact-btn:hover) .h-links a,
.h-nav:has(.h-contact-btn:hover) .h-links button,
.h-nav:has(.h-contact-btn:hover) .h-contact-btn,
.h-nav:has(.h-contact.open) .h-links a,
.h-nav:has(.h-contact.open) .h-links button,
.h-nav:has(.h-contact.open) .h-contact-btn,
.h-nav:has(.h-contact-btn:hover) .logo-full,
.h-nav:has(.h-contact.open) .logo-full,
.h-nav:has(.h-contact-btn:hover) .h-cta,
.h-nav:has(.h-contact.open) .h-cta,
.h-nav:has(.h-contact-btn:hover) .h-cta .lbl,
.h-nav:has(.h-contact.open) .h-cta .lbl {
  transition-duration: 110ms;
  transition-delay: 0s;
}

/* ---------- Halo strength driven by what is actually behind the bar ----------
   --nav-halo is set from JS by sampling the video. It stays at 0 over ordinary
   sky, where the labels read fine on their own, and only climbs as the backdrop
   approaches white. */
.h-nav:not(.past-hero) .h-links,
.h-nav:not(.past-hero) .h-links a,
.h-nav:not(.past-hero) .h-links button,
.h-nav:not(.past-hero) .h-contact-btn {
  /* same shadow the hero copy uses, plus an extra push when the backdrop
     goes genuinely white (--nav-halo is sampled from the video) */
  transition: color 640ms var(--nav-fade);
}

.h-nav:not(.past-hero) .h-cta {
  transition: background 640ms var(--nav-fade),
              color 640ms var(--nav-fade),
              box-shadow 220ms linear;
}


/* the delayed surface transition would otherwise play on page load, showing
   glass for the first second before settling to clear */
.h-nav.no-anim,
.h-nav.no-anim .logo-full { transition: none !important; }


/* ---------- Keep the contents in step with the surface ----------
   The bar fades over 380ms but the labels and logo were flipping back to
   white in 150ms, so mid-fade you got white text on a still-white bar and
   the whole thing read as a blank slab. Everything now runs on the same
   clock, and the switch to white waits until the surface has mostly gone. */
.h-nav .h-links a,
.h-nav .h-links button,
.h-nav .h-contact-btn {
  transition: color 640ms var(--nav-fade);
}

.h-nav-logo .logo-full {
  transition: filter 640ms var(--nav-fade);
}

.h-nav .h-cta,
.h-nav .h-cta .lbl {
  transition: background 640ms var(--nav-fade),
              color 640ms var(--nav-fade),
              -webkit-text-fill-color 640ms var(--nav-fade);
}

/* the burger bars keep that colour fade AND the burger-to-X morph:
   closed state = unwinding, so rotate leads and the slide apart waits */
.h-nav .h-burger span {
  transition: background 640ms var(--nav-fade),
              color 640ms var(--nav-fade),
              rotate 190ms var(--nav-ease),
              translate 190ms var(--nav-ease) 150ms,
              opacity 150ms ease 150ms;
}

/* opening = the reverse beat: slide together first, then fold */
.h-nav .h-burger[aria-expanded="true"] span {
  transition: background 640ms var(--nav-fade),
              color 640ms var(--nav-fade),
              translate 190ms var(--nav-ease),
              rotate 190ms var(--nav-ease) 150ms,
              opacity 150ms ease;
}

/* going white must stay immediate -- only the return is held back */
.h-nav:has(.h-links:hover) .h-links a,
.h-nav:has(.h-links:hover) .h-links button,
.h-nav:has(.h-links:hover) .h-contact-btn,
.h-nav:has(.h-mega.open) .h-links a,
.h-nav:has(.h-mega.open) .h-links button,
.h-nav:has(.h-mega.open) .h-contact-btn,
.h-nav:has(.h-links:hover) .logo-full,
.h-nav:has(.h-mega.open) .logo-full,
.h-nav:has(.h-links:hover) .h-cta,
.h-nav:has(.h-mega.open) .h-cta,
.h-nav.past-hero .h-links a,
.h-nav.past-hero .h-links button,
.h-nav.past-hero .h-contact-btn,
.h-nav.past-hero .logo-full {
  transition-delay: 0s;
}


/* The contact dropdown hangs below the bar, but .h-nav clips its overflow so
   the mega menu can animate its height. Let it escape while it is open --
   the mega is always closed at that point, so nothing else leaks. */
.h-nav:has(.h-contact.open) { overflow: visible; }


/* ---------- Contact panel as an extension of the bar ----------
   Flush to the nav's underside, square across the top and the same white,
   so there is no seam or second surface -- it reads as the bar extending. */
.h-contact {
  top: calc(100% + 15px);
  right: clamp(16px, 2vw, 26px);
  border: 0;
  border-radius: 0 0 var(--nav-r-md) var(--nav-r-md);
  background: #fff;
  box-shadow: 0 30px 46px -14px rgba(5, 13, 28, 0.22);
  transform-origin: top right;
}

.h-contact.open { transform: none; }

/* chevron turns like the mega-menu ones */
.h-contact-btn .chev { transition: transform 280ms var(--nav-ease); }
.h-contact-btn.active .chev { transform: rotate(225deg) translateY(-1px); }

/* and it takes the same hover treatment as the rest of the bar.
   The fill is left to the growing bubble on ::before — a flat background here
   would sit on top of it and put the plain highlight straight back. */
.h-nav .h-contact-btn:hover,
.h-nav .h-contact-btn.active { background: transparent; color: var(--nav-brand-deep); }
.h-nav:not(.past-hero):not(:has(.h-contact.open)):not(:has(.h-links:hover)) .h-contact-btn:hover {
  background: transparent;
  color: #fff;
}


/* The chevron rules were scoped to .h-links, so Contact's arrow rendered as
   an unstyled empty span. Give it the same mark. */
.h-contact-btn .chev {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 280ms var(--nav-ease);
}

.h-contact-btn.active .chev { transform: rotate(225deg) translateY(-1px); }

/* Keep the clip open until the panel has finished fading, or removing .open
   snaps overflow back to clip and the panel vanishes mid-animation. */
.h-nav:has(.h-contact:not([hidden])) { overflow: visible; }


/* ---------- Contact opens as a drawer, exactly like the mega menus ----------
   The mega animates height over 420ms; this now does the same rather than
   fading, so both menus open and close with one motion and one speed. */
.h-contact {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
  opacity: 1;
  transform: none;
  transition: max-height 420ms var(--nav-ease),
              padding 420ms var(--nav-ease);
}

.h-contact.open {
  max-height: 460px;
  padding-top: 10px;
  padding-bottom: 10px;
  opacity: 1;
  transform: none;
}


/* The bar was landing on #fefefe: the backdrop filter was still running under
   the white on some of the interacted states, so a trace of the video came
   through. Pin every white state to pure #ffffff with no filter. */
.h-nav.closing,
.h-nav:has(.h-links:hover),
.h-nav:has(:focus-visible),
.h-nav:has(.h-mega.open),
.h-nav:has(.h-contact.open),
.h-nav:has(.h-contact-btn:hover),
.h-nav.past-hero {
  background-color: #ffffff;
  background-image: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.h-contact,
.h-mega { background-color: #ffffff; }
.h-mega { background-image: none; }


/* The panel's drop shadow was still washing a fraction over the bar above it.
   Cast it from a pseudo-element clipped to below the panel's top edge. */
.h-contact { box-shadow: none; }

.h-contact::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 30px 46px -14px rgba(5, 13, 28, 0.22);
  clip-path: inset(0 -60px -60px -60px);
  pointer-events: none;
  z-index: -1;
}

/* The Learn label doubles as the way into the hub: an arrow slides out of it
   on hover, and the box shrinks to the words so only the text is a target. */
.h-mega-title-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  transition: color 150ms var(--nav-ease);
}

.h-mega-title-link .arr {
  color: var(--nav-brand-deep);
  opacity: 0;
  transform: translateX(-5px);
  transition: opacity 180ms var(--nav-ease), transform 180ms var(--nav-ease);
}

.h-mega-title-link:hover { color: var(--nav-brand-deep); }

.h-mega-title-link:hover .arr,
.h-mega-title-link:focus-visible .arr { opacity: 1; transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
  .h-mega-title-link,
  .h-mega-title-link .arr { transition: none; }
  /* placed after the .h-nav .h-burger span transitions so it wins the tie */
  .h-nav .h-burger span { transition: none; }
}