/* ==========================================================================
   HEADER — Marine Inspection AI
   Apple-style frosted glass bar pill fixed over the page. Clear, light and
   see-through at the top; once the page scrolls it frosts up slightly
   more and gains a crisp hairline edge + soft shadow. Text stays deep
   marine in every state — the pane is always light.
   ========================================================================== */

:root {
  --mia-bar-top: 12px;
  --mia-bar-inset: clamp(10px, 1.4vw, 22px);
}

.mia-header {
  position: fixed;
  z-index: 100;
  top: var(--mia-bar-top);
  left: var(--mia-bar-inset);
  right: var(--mia-bar-inset);
  border-radius: 999px;
  /* clear glass — mostly the page showing through, lifted by a thin
     layer of white so text keeps contrast */
  background: rgba(255, 255, 255, 0.52);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),      /* specular top edge */
    0 0 0 1px rgba(255, 255, 255, 0.55),         /* bright outer rim */
    0 0 0 1.5px rgba(7, 55, 99, 0.06),           /* hairline that defines the pane */
    0 8px 28px rgba(7, 55, 99, 0.08);
  transition:
    background 0.45s ease,
    box-shadow 0.45s ease;
  /* every page: the bar drops in right away so the nav is always there */
  animation: mia-header-drop 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* home page only (it's the only page with #hero-root): hold the drop until
   the hero text (INSPECTION … AI 2026) is done */
body:has(#hero-root) .mia-header {
  animation: mia-header-drop 0.9s cubic-bezier(0.16, 1, 0.3, 1) 5.1s both;
}

@keyframes mia-header-drop {
  from { opacity: 0; transform: translateY(-100%); }
  to   { opacity: 1; transform: translateY(0); }
}

/* page scrim behind the open phone drawer (created by header.js at body
   level). Desktop never uses it. */
.mia-scrim { display: none; }

/* faint top-to-bottom light falloff — what makes it read as a pane of
   glass with a light source above it rather than a flat white shape */
.mia-header::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.45) 0%,
    rgba(255, 255, 255, 0.08) 45%,
    rgba(255, 255, 255, 0) 100%
  );
}

.mia-header--scrolled,
.mia-header--open {
  /* a touch more frost once content is moving underneath */
  background: rgba(255, 255, 255, 0.66);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 0 0 1px rgba(255, 255, 255, 0.7),
    0 0 0 1.5px rgba(7, 55, 99, 0.08),
    0 12px 36px rgba(7, 55, 99, 0.12);
}

/* no backdrop-filter support → fall back to a near-solid pane for contrast */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mia-header,
  .mia-header--scrolled,
  .mia-header--open {
    background: rgba(255, 255, 255, 0.96);
  }
  .mia-header__links {
    background: rgba(6, 30, 53, 0.95) !important;
  }
}

.mia-header__inner {
  width: 100%;
  padding: 0 clamp(20px, 2.4vw, 34px);
  height: 64px;
  /* 1fr | auto | 1fr keeps the link group locked to the true screen centre,
     regardless of how wide the brand or the signup button are */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.mia-header__brand { justify-self: start; }
.mia-header__actions { justify-self: end; }

/* ---------------- brand ---------------- */

.mia-header__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex-shrink: 0;
}

.mia-header__logo {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: block;
  user-select: none;
  box-shadow: 0 2px 10px rgba(2, 20, 40, 0.35);
  transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.mia-header__brand:hover .mia-header__logo { transform: scale(1.06); }

.mia-header__wordmark {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 0.02em;
  /* deep marine — readable on the light glass in every state */
  color: #073763;
  white-space: nowrap;
  transition: color 0.45s ease;
}

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

.mia-header__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.8vw, 44px);
}

.mia-header__link {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.02em;
  text-decoration: none;
  /* deep marine — readable on the light glass in every state */
  color: #073763;
  transition: opacity 0.25s ease, color 0.45s ease;
  opacity: 0.95;
}

.mia-header__link:hover { opacity: 1; }

/* "you are here" — the current page's link (or its section trigger)
   stays lit with a small underline bar */
.mia-header__link.is-current {
  position: relative;
  opacity: 1;
  font-weight: 600;
}

.mia-header__link.is-current::before {
  content: '';
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: -9px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, #1b6bb5, #6fc3f5);
  box-shadow: 0 1px 6px rgba(88, 172, 235, 0.55);
}

/* the pane is light in every state, so text stays deep marine — no flip */
.mia-header--scrolled .mia-header__link,
.mia-header--open .mia-header__link { color: #073763; }

/* ---------------- signup (pill) ---------------- */

.mia-header__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.mia-header__signup {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: #ffffff;
  background: linear-gradient(135deg, #0b4a8a, #1b6bb5);
  padding: 9px 22px;
  border-radius: 980px;                 /* Apple's "always a pill" radius */
  box-shadow: 0 2px 14px rgba(2, 20, 40, 0.25);
  transition:
    background 0.25s ease,
    transform 0.25s cubic-bezier(0.25, 0.1, 0.25, 1),
    box-shadow 0.25s ease;
}

.mia-header__signup:hover {
  background: linear-gradient(135deg, #0d5399, #2279c7);
  transform: scale(1.04);
  box-shadow: 0 4px 22px rgba(2, 20, 40, 0.35);
}

.mia-header__signup:active { transform: scale(0.98); }

/* Log in — quiet glass pill beside Sign up (desktop) */
.mia-header__login {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: #073763;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(7, 55, 99, 0.14);
  padding: 8px 20px;
  border-radius: 980px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.mia-header__login:hover {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(7, 55, 99, 0.24);
  transform: scale(1.04);
}

.mia-header__login:active { transform: scale(0.98); }

/* the in-menu copy of the signup pill only exists on mobile */
.mia-header__menu-signup-item { display: none; }

/* ---------------- burger (mobile only) ---------------- */

.mia-header__burger {
  display: none;
  position: relative;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.mia-header__burger-bar {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 1.5px;
  background: #073763;
  border-radius: 1px;
  transform: translate(-50%, -50%) translateY(-4px);
  transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.mia-header__burger-bar:nth-child(2) {
  transform: translate(-50%, -50%) translateY(4px);
}

.mia-header--scrolled .mia-header__burger-bar,
.mia-header--open .mia-header__burger-bar { background: #073763; }

.mia-header--open .mia-header__burger-bar:nth-child(1) {
  transform: translate(-50%, -50%) rotate(45deg);
}

.mia-header--open .mia-header__burger-bar:nth-child(2) {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* ==========================================================================
   MOBILE — links collapse into a full-width frosted sheet under the bar
   ========================================================================== */

@media (max-width: 880px) {

  /* phones: a normal full-width bar flush with the top and both edges —
     the floating pill is a desktop thing. The hero reads --mia-bar-top
     for its clearance, so it follows automatically. */
  :root {
    --mia-bar-top: 0px;
    --mia-bar-inset: 0px;
  }

  .mia-header,
  .mia-header--scrolled,
  .mia-header--open {
    border-radius: 0;
    /* clearer glass on phones — the page shows through, the blur does the work */
    background: rgba(255, 255, 255, 0.3);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    backdrop-filter: blur(28px) saturate(180%);
    box-shadow:
      inset 0 -1px 0 rgba(255, 255, 255, 0.6),     /* bright inner bottom edge */
      0 1px 0 rgba(7, 55, 99, 0.08),               /* hairline under the bar */
      0 8px 24px rgba(7, 55, 99, 0.08);
    /* hide / show uses `translate` so it stacks with the drop-in animation's
       transform instead of fighting it */
    transition:
      background 0.45s ease,
      box-shadow 0.45s ease,
      translate 0.38s cubic-bezier(0.32, 0.72, 0, 1);
  }

  .mia-header--scrolled,
  .mia-header--open { background: rgba(255, 255, 255, 0.42); }

  /* at the very top of the page the bar is invisible — it's just part of
     the hero. The glass (tint, blur, edge) fades in once the page scrolls.
     blur(0px) rather than `none` so the backdrop-filter interpolates. */
  .mia-header:not(.mia-header--scrolled):not(.mia-header--open) {
    background: rgba(255, 255, 255, 0);
    -webkit-backdrop-filter: blur(0px) saturate(100%);
    backdrop-filter: blur(0px) saturate(100%);
    box-shadow: none;
  }

  .mia-header:not(.mia-header--scrolled):not(.mia-header--open)::before { opacity: 0; }

  .mia-header::before { transition: opacity 0.45s ease; }

  .mia-header,
  .mia-header--scrolled,
  .mia-header--open {
    transition:
      background 0.45s ease,
      box-shadow 0.45s ease,
      -webkit-backdrop-filter 0.45s ease,
      backdrop-filter 0.45s ease,
      translate 0.38s cubic-bezier(0.32, 0.72, 0, 1);
  }

  /* while the drawer is out the bar itself disappears — no glass, no
     edge, no brand — so all that's on screen is the drawer over the
     blurred page. (Dropping the backdrop-filter here is also what keeps
     Chromium from mis-compositing the drawer, which is a child of the bar.) */
  .mia-header--open {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(255, 255, 255, 0);
    box-shadow: none;
  }
  .mia-header--open::before { opacity: 0; }

  .mia-header__brand {
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  .mia-header--open .mia-header__brand {
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
  }

  /* the close control rides inside the drawer's top-right corner, white
     on the dark glass; it fades in once the drawer has landed */
  .mia-header--open .mia-header__burger {
    position: fixed;
    top: 14px;
    left: calc(min(320px, 84vw) - 58px);
    z-index: 3;
    animation: mia-x-in 0.3s ease 0.25s both;
  }
  .mia-header--open .mia-header__burger-bar { background: #ffffff; }

  @keyframes mia-x-in {
    from { opacity: 0; transform: scale(0.6); }
    to   { opacity: 1; transform: none; }
  }

  /* scrolling down: tuck the bar away; scrolling up brings it back */
  .mia-header--hidden { translate: 0 -110%; }

  .mia-header::before {
    border-radius: 0;
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.28) 0%,
      rgba(255, 255, 255, 0.05) 50%,
      rgba(255, 255, 255, 0) 100%
    );
  }

  .mia-header__burger { display: block; }
  .mia-header__cta-desktop { display: none; }   /* pills live in the drawer on phones */

  .mia-header__wordmark { font-size: 15px; }

  .mia-header__menu-signup-item {
    display: block;
    margin-top: auto;          /* pins Sign up to the bottom of the drawer */
    padding-top: 26px;
    border-bottom: 0 !important;
  }

  .mia-header__signup--menu {
    display: block;
    text-align: center;
    font-size: 16px;
    padding: 13px 22px;
  }

  /* links leave the flow below, so the desktop grid collapses to two ends */
  .mia-header__inner {
    display: flex;
    justify-content: space-between;
  }

  /* scrim behind the drawer: dims AND blurs the whole page (backdrop-filter
     works here because the scrim sits at body level, under the header's
     z-index). Tap it to close (header.js). blur(0px) → blur(n) so the
     filter interpolates instead of snapping. */
  .mia-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 99;                         /* under the bar + drawer (100), over the page */
    background: rgba(2, 14, 28, 0.38);
    -webkit-backdrop-filter: blur(0px) saturate(100%);
    backdrop-filter: blur(0px) saturate(100%);
    opacity: 0;
    pointer-events: none;
    transition:
      opacity 0.45s ease,
      -webkit-backdrop-filter 0.45s ease,
      backdrop-filter 0.45s ease;
  }

  .mia-scrim.is-on {
    opacity: 1;
    pointer-events: auto;
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
  }

  /* left-side glass drawer */
  .mia-header__links {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    width: min(320px, 84vw);
    height: 100dvh;
    margin: 0;
    padding: calc(64px + 22px) 26px 34px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    overflow-y: auto;
    /* deep marine glass — opaque enough to read over any page, since a
       child backdrop-filter inside the blurred bar can't blur the page
       content beneath the bar's own box in Chromium */
    background: linear-gradient(
      to right,
      rgba(8, 34, 60, 0.92),
      rgba(10, 42, 72, 0.86)
    );
    -webkit-backdrop-filter: blur(30px) saturate(200%);
    backdrop-filter: blur(30px) saturate(200%);
    border-radius: 0 24px 24px 0;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.18),   /* specular top edge */
      inset -1px 0 0 rgba(255, 255, 255, 0.1),   /* lit right rim */
      24px 0 60px rgba(2, 20, 40, 0.45);         /* throw onto the page */

    visibility: hidden;
    transform: translateX(-104%);
    transition:
      transform 0.5s cubic-bezier(0.32, 0.72, 0, 1),
      visibility 0s linear 0.5s;
  }

  .mia-header--open .mia-header__links {
    visibility: visible;
    transform: translateX(0);
    transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
  }

  .mia-header__links li {
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .mia-header__links li:last-child { border-bottom: 0; }

  .mia-header__link {
    display: block;
    padding: 15px 0;
    font-size: 17px;
    /* drawer sits on dark glass — links are always white inside it */
    color: #ffffff;
    text-shadow: 0 1px 4px rgba(2, 24, 48, 0.55);
  }

  /* colour-only override so it outranks the desktop "stay marine when the
     menu is open" rule without touching layout or the cyan current state */
  .mia-header--open .mia-header__links .mia-header__link:not(.is-current) { color: #ffffff; }

  /* staggered reveal — items trail the drawer in from the left */
  .mia-header__links li {
    opacity: 0;
    transform: translateX(-14px);
    transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
  }

  .mia-header--open .mia-header__links li {
    opacity: 1;
    transform: translateX(0);
  }

  .mia-header--open .mia-header__links li:nth-child(1) { transition-delay: 0.10s; }
  .mia-header--open .mia-header__links li:nth-child(2) { transition-delay: 0.15s; }
  .mia-header--open .mia-header__links li:nth-child(3) { transition-delay: 0.20s; }
  .mia-header--open .mia-header__links li:nth-child(4) { transition-delay: 0.25s; }
  .mia-header--open .mia-header__links li:nth-child(5) { transition-delay: 0.30s; }
  .mia-header--open .mia-header__links li:nth-child(6) { transition-delay: 0.35s; }
}

/* ==========================================================================
   DROPDOWNS — one shared glass panel under the bar.
   The panel doesn't close/reopen between triggers: it GLIDES — x / width /
   height morph with a springy bezier while the menu lists crossfade,
   so moving Features → Industries → Resources feels like one live surface.
   Opening pops in with a slight overshoot (Apple-style bounce).
   ========================================================================== */

/* trigger links — plain text on desktop (no chevron); the chevron only
   appears inside the mobile drawer, where rows become accordions */
.mia-header__link--dd {
  position: relative;
  z-index: 1;                 /* text rides above the pill */
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mia-header__link--dd[aria-expanded="true"] { opacity: 1; }

/* ---- the drop: one glass pill behind the open trigger ----
   header.js positions it with --pill-x / --pill-w (measured inside the
   links row). It fades + swells in on first open, glides with the same
   springy curve as the panel when the cursor moves between triggers,
   and shrinks + fades away on close. */
/* desktop only — on phones the links row is the fixed side drawer and must
   keep its own positioning */
@media (min-width: 881px) {
  .mia-header__links { position: relative; }
}

.mia-header__pill {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 0;
  width: var(--pill-w, 80px);
  height: 42px;
  margin: -21px 0 0 -18px;    /* 18px of air either side of the text */
  padding: 0 18px;            /* content-box: width = text + 2×18px */
  box-sizing: content-box;
  border-radius: 999px;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(205, 227, 246, 0.75) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),           /* specular top edge */
    inset 0 0 0 1px rgba(255, 255, 255, 0.6),       /* bright rim */
    0 0 0 1px rgba(27, 107, 181, 0.2),              /* hairline */
    0 6px 18px rgba(7, 55, 99, 0.16);               /* lift */
  opacity: 0;
  transform: translate3d(var(--pill-x, 0px), 0, 0) scale(0.8);
  transition:
    transform 0.55s cubic-bezier(0.3, 1.25, 0.5, 1),
    width 0.55s cubic-bezier(0.3, 1.25, 0.5, 1),
    opacity 0.22s ease;
}

.mia-header__pill::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  top: 2px;
  height: 45%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
  opacity: 0.9;
  pointer-events: none;
}

.mia-header__pill--show {
  opacity: 1;
  transform: translate3d(var(--pill-x, 0px), 0, 0) scale(1);
  transition:
    transform 0.55s cubic-bezier(0.3, 1.25, 0.5, 1),
    width 0.55s cubic-bezier(0.3, 1.25, 0.5, 1),
    opacity 0.28s ease;
}

/* fresh open: land on the trigger instantly, then only the fade/swell plays */
.mia-header__pill--snap {
  transition: opacity 0.28s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.mia-header__pill--snap:not(.mia-header__pill--show) { transition: none !important; }

/* ---- the floating panel ---- */

/* Lives at body level, not inside the header — a parent backdrop-filter
   (the scrolled bar) would otherwise break the panel's own glass blur.
   header.js reparents it to <body> on init. */
.mia-dd {
  position: fixed;
  top: calc(var(--mia-bar-top) + 64px); /* bar offset + bar height */
  left: var(--mia-bar-inset);           /* --dd-x is measured from the bar's left edge */
  z-index: 99;                          /* just under the bar */
  width: var(--dd-w, 260px);
  padding-top: 10px;                    /* invisible hover bridge bar → panel */
  transform: translate3d(var(--dd-x, 0px), 0, 0);
  visibility: hidden;
  pointer-events: none;
  /* the glide between triggers — springy, slightly overdamped */
  transition:
    transform 0.5s cubic-bezier(0.3, 1.25, 0.5, 1),
    width 0.5s cubic-bezier(0.3, 1.25, 0.5, 1),
    visibility 0s linear 0.3s;
}

.mia-dd--open {
  visibility: visible;
  pointer-events: auto;
  transition:
    transform 0.5s cubic-bezier(0.3, 1.25, 0.5, 1),
    width 0.5s cubic-bezier(0.3, 1.25, 0.5, 1);
}

/* pointer notch — a small glass triangle on the panel's top edge, centred
   under the open trigger (--dd-ax, set by header.js). It glides with the
   panel when the cursor moves between triggers. */
.mia-dd::before {
  content: '';
  position: absolute;
  top: 1px;                               /* sits in the 10px hover bridge */
  left: var(--dd-ax, 50%);
  width: 20px;
  height: 10px;
  transform: translateX(-50%);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.88));
  filter: drop-shadow(0 -1px 0 rgba(7, 55, 99, 0.1));
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transition:
    left 0.5s cubic-bezier(0.3, 1.25, 0.5, 1),
    opacity 0.2s ease;
}

.mia-dd--open::before { opacity: 1; transition: left 0.5s cubic-bezier(0.3, 1.25, 0.5, 1), opacity 0.26s ease 0.08s; }

/* while positioning for a fresh open, jump instantly — no slide from the
   panel's previous parking spot (header.js toggles this around setVars) */
.mia-dd--snap,
.mia-dd--snap::before,
.mia-dd--snap .mia-dd__panel { transition: none !important; }

.mia-dd__panel {
  position: relative;
  width: 100%;
  height: var(--dd-h, 200px);
  overflow: hidden;
  border-radius: 22px;
  transform-origin: top center;

  /* Apple-style white frosted glass — the same pane as the nav bar, so
     bar + drop + panel read as one material; the page shows through softly */
  background: linear-gradient(
    105deg,
    rgba(255, 255, 255, 0.86) 0%,
    rgba(255, 255, 255, 0.7) 52%,
    rgba(236, 244, 252, 0.68) 100%
  );
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  backdrop-filter: blur(40px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),                 /* specular top edge */
    inset 0 0 0 1px rgba(255, 255, 255, 0.7),             /* bright rim */
    0 0 0 1px rgba(7, 55, 99, 0.08),                      /* hairline */
    0 30px 70px rgba(7, 55, 99, 0.18),
    0 8px 22px rgba(7, 55, 99, 0.08);

  /* closed: tucked up + shrunk, ready to spring open */
  opacity: 0;
  transform: scale(0.88) translateY(-14px);
  transition:
    opacity 0.2s ease,
    transform 0.28s ease,
    height 0.5s cubic-bezier(0.3, 1.25, 0.5, 1),
    background 0.45s ease,
    box-shadow 0.45s ease;
}

.mia-dd--open .mia-dd__panel {
  opacity: 1;
  transform: scale(1) translateY(0);
  /* the bounce: overshoot bezier on the way in */
  transition:
    opacity 0.26s ease,
    transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
    height 0.5s cubic-bezier(0.3, 1.25, 0.5, 1),
    background 0.45s ease,
    box-shadow 0.45s ease;
}

/* light sheen across the glass — same diagonal streak the bar carries,
   plus a soft top-corner bloom, like light hitting the pane from above */
.mia-dd__panel::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 85% at 14% 0%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(
      115deg,
      rgba(255, 255, 255, 0.12) 0%,
      rgba(255, 255, 255, 0.04) 32%,
      rgba(255, 255, 255, 0) 58%,
      rgba(255, 255, 255, 0.08) 100%
    );
}

/* ---- menu lists (stacked, crossfaded) ---- */

.mia-dd__menu {
  position: absolute;
  top: 0;
  left: 0;
  width: max-content;
  min-width: 232px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.22s ease,
    transform 0.5s cubic-bezier(0.3, 1.25, 0.5, 1);
}

.mia-dd__menu--active {
  opacity: 1;
  pointer-events: auto;
}

.mia-dd__item {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  color: #073763;
  padding: 11px 16px;
  border-radius: 13px;
  transition:
    background 0.18s ease,
    box-shadow 0.18s ease,
    color 0.45s ease,
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* macOS-menu style rounded highlight + a nudge to the right —
   the highlight is itself a tiny glass chip: rim + specular edge */
.mia-dd__item:hover {
  background: rgba(27, 107, 181, 0.09);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 0 0 1px rgba(27, 107, 181, 0.1);
  transform: translateX(3px);
}

.mia-dd__item:active { transform: translateX(3px) scale(0.97); }

/* "you are here" — the current page's item wears a pale-blue glass chip
   with a luminous rim and a small glowing accent bar on the left */
.mia-dd__item.is-current {
  position: relative;
  padding-left: 27px;
  color: #073763;
  font-weight: 600;
  background: linear-gradient(
    120deg,
    rgba(27, 107, 181, 0.16),
    rgba(88, 172, 235, 0.14) 55%,
    rgba(111, 195, 245, 0.12)
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 0 0 1px rgba(27, 107, 181, 0.14),
    0 6px 18px rgba(7, 55, 99, 0.1);
}

/* the accent — a soft glowing pill, not a hard bar */
.mia-dd__item.is-current::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 50%;
  width: 4px;
  height: 55%;
  transform: translateY(-50%);
  border-radius: 4px;
  background: linear-gradient(180deg, #1b6bb5, #6fc3f5);
  box-shadow: 0 0 10px rgba(88, 172, 235, 0.7);
}

.mia-dd__item.is-current:hover {
  background: linear-gradient(
    120deg,
    rgba(27, 107, 181, 0.22),
    rgba(88, 172, 235, 0.18) 55%,
    rgba(111, 195, 245, 0.16)
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 0 0 1px rgba(27, 107, 181, 0.18),
    0 8px 22px rgba(7, 55, 99, 0.12);
}

/* ---- preview pane (right side) — the hovered item's image lives here ---- */

.mia-dd {
  /* panel = menu column + this pane; header.js reads the var for sizing */
  --dd-pv-w: 320px;
  --dd-pv-min-h: 240px;
  /* how far the photo reaches back toward the menu before dissolving —
     fills the glass band between list and image so there is no seam */
  --dd-pv-melt: 90px;
}

/* flush against the panel's right edge — the panel's own overflow clip
   rounds its corners, and the left edge dissolves into the glass.
   The pane extends --dd-pv-melt past its nominal width so the photo's
   fade begins under the menu column's edge instead of at a hard line. */
.mia-dd__preview {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: calc(var(--dd-pv-w) + var(--dd-pv-melt));
  margin: 0;
  overflow: hidden;
  pointer-events: none;      /* it now overlaps the menu column's edge */
  opacity: 0;
  transform: translateX(10px);
  transition:
    opacity 0.3s ease,
    transform 0.5s cubic-bezier(0.3, 1.25, 0.5, 1);
}

.mia-dd--open .mia-dd__preview {
  opacity: 1;
  transform: translateX(0);
}

/* two stacked layers crossfade; the incoming one settles from a slight zoom.
   The mask melts the photo into the panel so it reads as part of the glass */
.mia-dd__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* long, even melt: invisible while still under the menu column, then a
     slow ramp to full — no perceptible start line against the glass */
  -webkit-mask-image: linear-gradient(to right,
    transparent 0%, rgba(0, 0, 0, 0.06) 22%, rgba(0, 0, 0, 0.5) 46%, #000 68%);
  mask-image: linear-gradient(to right,
    transparent 0%, rgba(0, 0, 0, 0.06) 22%, rgba(0, 0, 0, 0.5) 46%, #000 68%);
  opacity: 0;
  transform: scale(1.08);
  transition:
    opacity 0.45s ease,
    transform 0.9s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.mia-dd__img--show {
  opacity: 0.92;               /* a hint of glass shows through the photo */
  transform: scale(1);
}

/* soft marine veil over the photo so the centred text always reads —
   masked with the same left melt as the photo, otherwise its tint would
   snap on at the pane's left boundary and draw a vertical seam */
.mia-dd__preview::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    80% 70% at 62% 50%,
    rgba(4, 24, 44, 0.44) 0%,
    rgba(4, 24, 44, 0.22) 60%,
    rgba(4, 24, 44, 0.05) 100%
  );
  -webkit-mask-image: linear-gradient(to right,
    transparent 0%, rgba(0, 0, 0, 0.06) 22%, rgba(0, 0, 0, 0.5) 46%, #000 68%);
  mask-image: linear-gradient(to right,
    transparent 0%, rgba(0, 0, 0, 0.06) 22%, rgba(0, 0, 0, 0.5) 46%, #000 68%);
}

/* centred all-caps title + one-line brief — pinned to the pane's nominal
   right-side width, so the melt extension doesn't drag the text leftward
   into the dissolve zone */
.mia-dd__caption {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--dd-pv-w);
  z-index: 2;
  margin: 0;
  padding: 18px 26px 18px 44px;   /* extra left inset clears the melt zone */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  text-align: center;
  pointer-events: none;
}

.mia-dd__cap-title {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 0 1px 8px rgba(2, 24, 48, 0.75), 0 2px 22px rgba(2, 24, 48, 0.5);
}

.mia-dd__cap-desc {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.03em;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 6px rgba(2, 24, 48, 0.7);
  max-width: 220px;
}

/* text drifts up + fades each time the hovered item changes */
.mia-dd__caption--in {
  animation: mia-cap-in 0.45s cubic-bezier(0.25, 0.1, 0.25, 1) both;
}

@keyframes mia-cap-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* no backdrop-filter support → solid marine panel for contrast */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mia-dd__panel {
    background: linear-gradient(160deg, rgba(9, 48, 84, 0.97), rgba(6, 30, 53, 0.97));
  }
}

/* subnav lists only exist inside the mobile drawer (cloned by header.js) */
.mia-header__subnav {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 880px) {

  /* the floating panel is a desktop thing */
  .mia-dd { display: none; }

  .mia-header__pill { display: none; }

  /* in the drawer, parent rows become accordions: label left, chevron right */
  .mia-header__link--dd {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .mia-header__link--dd::after {
    content: '';
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    margin-top: -3px;
    transform: rotate(45deg);
    opacity: 0.6;
    transition:
      transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
      margin-top 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
      opacity 0.25s ease;
  }

  .mia-header__item--dd.is-open > .mia-header__link--dd::after {
    transform: rotate(225deg);
    margin-top: 3px;
    opacity: 1;
  }

  .mia-header__subnav {
    display: block;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-6px);
    transition:
      max-height 0.42s cubic-bezier(0.32, 0.72, 0, 1),
      opacity 0.28s ease,
      transform 0.42s cubic-bezier(0.32, 0.72, 0, 1);
  }

  .mia-header__item--dd.is-open .mia-header__subnav {
    max-height: var(--sub-h, 420px);   /* measured by header.js — no jump */
    opacity: 1;
    transform: none;
    transition:
      max-height 0.48s cubic-bezier(0.32, 0.72, 0, 1),
      opacity 0.3s ease 0.05s,
      transform 0.48s cubic-bezier(0.32, 0.72, 0, 1);
  }

  /* sub-rows trail in one after another as the section unfolds */
  .mia-header__links .mia-header__subnav li {
    width: 100%;
    border-bottom: 0;
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
  }

  .mia-header__item--dd.is-open .mia-header__subnav li {
    opacity: 1;
    transform: none;
  }

  .mia-header__item--dd.is-open .mia-header__subnav li:nth-child(1) { transition-delay: 0.06s; }
  .mia-header__item--dd.is-open .mia-header__subnav li:nth-child(2) { transition-delay: 0.10s; }
  .mia-header__item--dd.is-open .mia-header__subnav li:nth-child(3) { transition-delay: 0.14s; }
  .mia-header__item--dd.is-open .mia-header__subnav li:nth-child(4) { transition-delay: 0.18s; }
  .mia-header__item--dd.is-open .mia-header__subnav li:nth-child(5) { transition-delay: 0.22s; }
  .mia-header__item--dd.is-open .mia-header__subnav li:nth-child(6) { transition-delay: 0.26s; }

  .mia-header__sublink {
    display: block;
    padding: 11px 0 11px 18px;
    font-family: 'Outfit', 'Inter', sans-serif;
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 0.02em;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.82);
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    transition: color 0.2s ease, padding-left 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  }

  .mia-header__sublink:hover,
  .mia-header__sublink:active {
    color: #ffffff;
    padding-left: 22px;
  }

  /* "you are here" in the drawer — cyan tint + left accent bar; the desktop
     underline bar doesn't fit the stacked rows, so it's hidden here */
  .mia-header__link.is-current::before { display: none; }

  /* the section that holds the current page: cyan label + a small glowing
     dot before it, same cue as the desktop trigger's lit state */
  .mia-header__link.is-current {
    color: #7ad0ff;
    font-weight: 600;
  }

  .mia-header__link--dd.is-current::before {
    content: '';
    display: block;
    position: static;
    width: 6px;
    height: 6px;
    margin-right: 10px;
    border-radius: 50%;
    background: linear-gradient(180deg, #cfeaff, #5aa9e8);
    box-shadow: 0 0 10px rgba(140, 205, 255, 0.9);
    order: -1;
  }

  .mia-header__link--dd.is-current { justify-content: flex-start; }
  .mia-header__link--dd.is-current::after { margin-left: auto; }

  /* the current page itself: the same glass chip + accent bar as the PC
     dropdown — rounded, lit rim, glowing bar on the left */
  .mia-header__sublink.is-current {
    position: relative;
    margin: 6px 0;
    padding: 11px 14px 11px 26px;
    border-top: 0;
    border-radius: 12px;
    color: #ffffff;
    font-weight: 600;
    background: linear-gradient(
      120deg,
      rgba(28, 99, 168, 0.55),
      rgba(58, 138, 205, 0.38) 60%,
      rgba(90, 169, 232, 0.3)
    );
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.35),
      inset 0 0 0 1px rgba(160, 214, 255, 0.22),
      0 6px 18px rgba(3, 27, 54, 0.3);
  }

  .mia-header__sublink.is-current::before {
    content: '';
    position: absolute;
    left: 11px;
    top: 50%;
    width: 4px;
    height: 55%;
    transform: translateY(-50%);
    border-radius: 4px;
    background: linear-gradient(180deg, #cfeaff, #5aa9e8);
    box-shadow: 0 0 10px rgba(140, 205, 255, 0.85);
  }

  .mia-header__sublink.is-current + li,
  .mia-header__sublink.is-current:hover { padding-left: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .mia-header { animation: none; }
  .mia-header,
  .mia-header__logo,
  .mia-header__signup,
  .mia-header__burger-bar,
  .mia-header__links,
  .mia-header__links li,
  .mia-header__link--dd::after,
  .mia-header__pill,
  .mia-dd,
  .mia-dd__panel,
  .mia-dd__menu,
  .mia-dd__item,
  .mia-dd__preview,
  .mia-dd__img,
  .mia-header__subnav,
  .mia-scrim,
  .mia-header__brand { transition: none; }
  .mia-dd__caption--in,
  .mia-header--open .mia-header__burger { animation: none; }
}