/* ============================================================================
   Stripe-style navigation (the site's only nav)
   ----------------------------------------------------------------------------
   This file adds the .stripe-* selectors plus a handful of `.stripe-flyout`-
   scoped re-declarations of the shared dropdown card rules (defined against
   `.nav-menu` in styles.css) so they reach the morphing overlay. The overlay
   MORPHS (size + position + cross-fade) between triggers, the way Stripe's
   global nav does.
   ========================================================================== */

/* Stripe is the only nav — always visible. */
.stripe-site-header {
  display: block;
}

/* ============================================================================
   Header shell — mirrors .site-header / .nav-shell
   ========================================================================== */
.stripe-site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  transition: box-shadow 220ms ease, background 220ms ease;
}

.stripe-nav {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  min-height: 76px;
  padding: 0 max(22px, calc((100vw - var(--container)) / 2));
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.82);
  color: var(--ink);
  backdrop-filter: blur(14px);
  transition: min-height 300ms cubic-bezier(0.4, 0, 0.2, 1), background 220ms ease, box-shadow 220ms ease;
}

.stripe-site-header.is-scrolled .stripe-nav {
  min-height: 60px;
  background: rgba(255, 255, 255, 0.94);
  /* Layered 3D float shadow (mirrors .site-header.is-scrolled .nav-shell). */
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.65) inset,
    0 4px 10px rgba(7, 25, 34, 0.08),
    0 12px 24px rgba(7, 25, 34, 0.12),
    0 24px 48px rgba(7, 25, 34, 0.14);
  backdrop-filter: blur(20px);
}

/* On desktop the panel is transparent to layout — its children (menu, cta,
   flyout) flow straight into the nav grid. On mobile it becomes the drawer. */
.stripe-nav-panel {
  display: contents;
}

/* The scroll wrapper, drawer header and scrim exist only for the mobile
   off-canvas drawer. On desktop the wrapper is transparent to the nav grid
   (display: contents) and the chrome/scrim are removed entirely. */
.stripe-nav-scroll,
.stripe-drawer-foot {
  display: contents;
}

.stripe-drawer-head,
.stripe-nav-scrim {
  display: none;
}

.stripe-nav-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* Plain links + dropdown triggers share one pill style (= .nav-menu a) */
.stripe-nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 42px;
  padding: 0 14px;
  border: 0;
  background: transparent;
  color: #243945;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1;
  border-radius: 999px;
}

.stripe-nav-trigger {
  padding: 0 8px 0 14px;
}

/* Accent pill that flags the dedicated Packages page — reads as a button in the
   menu while keeping the nav's pill geometry. Coloured from the theme tokens. */
.stripe-nav-pill {
  gap: 6px;
  padding: 0 16px;
  color: var(--navy, #1a0088);
  background: color-mix(in srgb, var(--coral, #ff5e32) 12%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--coral, #ff5e32) 32%, transparent);
}
.stripe-nav-pill i,
.stripe-nav-pill svg {
  width: 15px;
  height: 15px;
  color: var(--coral, #ff5e32);
}
.stripe-nav-pill:hover {
  background: var(--coral, #ff5e32);
  color: #ffffff;
}
.stripe-nav-pill:hover i,
.stripe-nav-pill:hover svg {
  color: #ffffff;
}
.stripe-nav-pill.is-active {
  background: var(--coral, #ff5e32);
  color: #ffffff;
}
.stripe-nav-pill.is-active i,
.stripe-nav-pill.is-active svg {
  color: #ffffff;
}
/* The pill carries its own fill, so suppress the shared underline indicator. */
.stripe-nav-pill::after {
  display: none;
}

.stripe-nav-link::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 7px;
  height: 2px;
  transform: scaleX(0);
  transform-origin: center;
  background: var(--coral);
  transition: transform 180ms ease;
}

.stripe-nav-trigger::after {
  right: 22px;
}

.stripe-nav-link:hover::after,
.stripe-nav-link.is-active::after,
.stripe-nav-trigger[aria-expanded="true"]::after,
.stripe-nav-trigger.has-active::after {
  transform: scaleX(1);
}

.stripe-nav-trigger.has-active {
  color: var(--teal-dark);
}

.stripe-nav-trigger .nav-trigger-chevron {
  width: 14px;
  height: 14px;
  transition: transform 200ms ease;
}

.stripe-nav-trigger[aria-expanded="true"] .nav-trigger-chevron {
  transform: rotate(180deg);
}

/* ============================================================================
   The shared morphing overlay
   ========================================================================== */
.stripe-flyout {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 0;
  z-index: 80;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 200ms ease, transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 240ms;
  visibility: hidden;
}

.stripe-flyout.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
  transition: opacity 200ms ease, transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0s;
}

/* Caret that points up at the active trigger */
.stripe-flyout-arrow {
  position: absolute;
  top: 6px;
  left: 0;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  background: var(--theme-surface-solid, #ffffff);
  border-top: 1px solid var(--theme-border, rgba(19, 37, 47, 0.1));
  border-left: 1px solid var(--theme-border, rgba(19, 37, 47, 0.1));
  border-top-left-radius: 2px;
  transform: translateX(0) rotate(45deg);
  transition: transform 360ms cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 1;
}

/* The card that grows / shrinks / slides. This is what makes the morph read. */
.stripe-flyout-bg {
  position: absolute;
  top: 12px;
  left: 0;
  width: 360px;
  height: 200px;
  background: var(--theme-surface-solid, #ffffff);
  border: 1px solid var(--theme-border, rgba(19, 37, 47, 0.1));
  border-radius: 8px;
  box-shadow:
    0 28px 70px rgba(7, 25, 34, 0.16),
    0 10px 24px rgba(7, 25, 34, 0.08);
  overflow: hidden;
  transform: translateX(0);
  transition:
    transform 360ms cubic-bezier(0.25, 1, 0.5, 1),
    width 360ms cubic-bezier(0.25, 1, 0.5, 1),
    height 360ms cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform, width, height;
}

/* While the overlay is first appearing (or there is no morph yet) we snap the
   geometry instead of animating it from a stale position. */
.stripe-flyout.is-snapping .stripe-flyout-bg,
.stripe-flyout.is-snapping .stripe-flyout-arrow {
  transition: none !important;
}

.stripe-flyout-viewport {
  position: relative;
  width: 100%;
  height: 100%;
}

.stripe-flyout-section {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateX(0);
  transition: opacity 220ms ease, transform 360ms cubic-bezier(0.25, 1, 0.5, 1);
}

.stripe-flyout-section.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* Designed widths — identical to the classic .nav-dropdown* widths */
.stripe-flyout-section[data-stripe-section="destinations"] {
  width: min(940px, calc(100vw - 32px));
}

.stripe-flyout-section[data-stripe-section="courses"] {
  width: min(560px, calc(100vw - 32px));
}

.stripe-flyout-section[data-stripe-section="services"] {
  width: min(340px, calc(100vw - 32px));
}

/* ============================================================================
   Re-declare the .nav-menu-scoped card rules for the overlay
   (styles.css scopes these under `.nav-menu`, which the overlay is not inside)
   ========================================================================== */
.stripe-flyout .course-menu-card {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 20px;
  gap: 10px;
  align-items: center;
  min-width: 0;
  height: 100%;
  min-height: 0;
  padding: 11px 10px;
  border: 1px solid rgba(19, 37, 47, 0.09);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--ink);
  text-align: left;
  transition:
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.stripe-flyout button.course-menu-card {
  width: 100%;
  font: inherit;
  cursor: pointer;
}

.stripe-flyout .course-menu-card::after {
  display: none;
}

.stripe-flyout .course-menu-card:hover {
  border-color: rgba(13, 122, 120, 0.24);
  background: #f5fbfa;
  color: var(--teal-dark);
  box-shadow: 0 12px 24px rgba(7, 25, 34, 0.08);
  transform: translateY(-1px);
}

.stripe-flyout .course-menu-card--mbbs {
  overflow: hidden;
  border-color: rgba(199, 146, 74, 0.52);
  background:
    radial-gradient(circle at 90% 12%, rgba(255, 255, 255, 0.72), transparent 34%),
    linear-gradient(135deg, #fff7d8 0%, #f5d98c 48%, #efbd58 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 10px 22px rgba(124, 83, 25, 0.14);
}

.stripe-flyout .course-menu-card--mbbs::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.42) 0%, transparent 32%, rgba(171, 105, 20, 0.12) 100%);
}

.stripe-flyout .course-menu-card--mbbs > * {
  position: relative;
  z-index: 1;
}

.stripe-flyout .course-menu-card--mbbs .course-icon--mbbs {
  --ci-bg: rgba(255, 255, 255, 0.66);
  --ci-fg: #8b560f;
  border-color: rgba(139, 86, 15, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.stripe-flyout .course-menu-card--mbbs .course-menu-copy strong {
  color: #6e4210;
}

.stripe-flyout .course-menu-card--mbbs .course-menu-copy small {
  color: #8b631f;
}

.stripe-flyout .course-menu-card--mbbs .course-menu-arrow {
  color: #8b560f;
  background: rgba(255, 255, 255, 0.34);
}

.stripe-flyout .course-menu-card--mbbs:hover {
  border-color: rgba(199, 146, 74, 0.52);
  background:
    radial-gradient(circle at 90% 12%, rgba(255, 255, 255, 0.78), transparent 34%),
    linear-gradient(135deg, #fff0b8 0%, #f0c969 48%, #dda03a 100%);
  color: #7c5319;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 14px 28px rgba(124, 83, 25, 0.18);
}

.stripe-flyout .course-menu-card--mbbs:hover .course-menu-copy strong {
  color: #5f380b;
}

.stripe-flyout .course-menu-card--mbbs:hover .course-menu-copy small {
  color: #744f17;
}

.stripe-flyout .course-menu-card--mbbs:hover .course-menu-arrow {
  background: #8b560f;
  color: #ffffff;
}

/* ---- "Study Abroad" nested menu — reveals as a SECOND COLUMN in the card ----
   Instead of a detached floating box, hovering Study Abroad expands the single
   overlay card to the right and slots the sub-items in as a clean, top-aligned
   second column sharing the same surface (a thin divider separates them). The
   card width/height/top are set by JS so it fits exactly — no dead space.
   At ≤920px it falls back to the classic inline accordion (styles.css); the
   921–960px override below keeps the column style (global flips at ≤960px). */
@media (min-width: 921px) {
  /* Anchor the column to the services card, not the (bottom) trigger row */
  .stripe-flyout-section[data-stripe-section="services"] .submenu-wrap {
    position: static;
  }

  .stripe-flyout .course-submenu {
    position: absolute;
    top: 52px;          /* JS aligns this with the first service item */
    left: 100%;         /* starts just past the left column */
    z-index: 2;
    display: grid;
    gap: 8px;
    width: 248px;
    margin: 0;
    padding: 0 0 0 18px;
    border: 0;
    border-left: 1px solid var(--theme-border, rgba(19, 37, 47, 0.12));
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    max-height: none;
    overflow: visible;
    opacity: 0;
    visibility: hidden;
    transform: translateX(8px);
    pointer-events: none;
    transition: opacity 200ms ease, transform 260ms cubic-bezier(0.25, 1, 0.5, 1), visibility 0s linear 220ms;
  }

  .stripe-flyout .course-submenu::after {
    display: none; /* no detached panel → no hover bridge needed */
  }

  .stripe-flyout .submenu-wrap.is-col-open .course-submenu,
  .stripe-flyout .submenu-wrap:focus-within .course-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto;
    transition: opacity 200ms ease, transform 260ms cubic-bezier(0.25, 1, 0.5, 1), visibility 0s;
  }

  /* Highlight Study Abroad while its column is open, like a selected tab */
  .stripe-flyout .submenu-wrap.is-col-open .course-menu-card.has-submenu,
  .stripe-flyout .submenu-wrap:focus-within .course-menu-card.has-submenu {
    border-color: rgba(13, 122, 120, 0.24);
    background: #f5fbfa;
  }

  /* Flip the chevron while the column is expanded */
  .stripe-flyout .submenu-wrap.is-col-open .course-menu-card.has-submenu .course-menu-arrow,
  .stripe-flyout .submenu-wrap:focus-within .course-menu-card.has-submenu .course-menu-arrow {
    transform: rotate(180deg);
  }
}

/* Mobile accordion: flip the chevron when Study Abroad is expanded */
.stripe-flyout .submenu-wrap.is-open .course-menu-card.has-submenu .course-menu-arrow {
  transform: rotate(180deg);
}

/* ============================================================================
   Theme-awareness — mirrors the html[data-color-theme] nav overrides
   ========================================================================== */
html[data-color-theme] .stripe-nav,
html[data-color-theme] .stripe-site-header.is-scrolled .stripe-nav {
  background: var(--theme-nav-bg);
  border-bottom-color: var(--theme-border-soft);
  box-shadow: 0 18px 50px rgba(47, 10, 88, 0.1);
}

/* Themed: stronger layered 3D float once scrolled. */
html[data-color-theme] .stripe-site-header.is-scrolled .stripe-nav {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 4px 10px rgba(26, 0, 136, 0.08),
    0 12px 24px rgba(26, 0, 136, 0.12),
    0 24px 48px rgba(47, 10, 88, 0.16);
}

html[data-color-theme] .stripe-nav-link,
html[data-color-theme] .stripe-nav-trigger {
  color: var(--navy);
}

html[data-color-theme] .stripe-flyout-bg,
html[data-color-theme] .stripe-flyout-arrow {
  border-color: var(--theme-border);
  background: var(--theme-surface-solid);
}

html[data-color-theme] .stripe-flyout-bg {
  box-shadow: var(--shadow);
}

html[data-color-theme] .stripe-flyout .course-menu-card {
  border-color: var(--theme-border);
  background: color-mix(in srgb, var(--theme-surface-solid) 86%, transparent);
}

html[data-color-theme] .stripe-flyout .course-menu-card:hover {
  border-color: color-mix(in srgb, var(--teal) 32%, transparent);
  background: var(--aqua);
}

html[data-color-theme] .stripe-flyout .course-menu-card--mbbs {
  border-color: rgba(199, 146, 74, 0.58);
  background:
    radial-gradient(circle at 90% 12%, rgba(255, 255, 255, 0.72), transparent 34%),
    linear-gradient(135deg, #fff7d8 0%, #f5d98c 48%, #efbd58 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 10px 22px rgba(124, 83, 25, 0.14);
}

html[data-color-theme] .stripe-flyout .course-menu-card--mbbs:hover {
  border-color: rgba(199, 146, 74, 0.68);
  background:
    radial-gradient(circle at 90% 12%, rgba(255, 255, 255, 0.78), transparent 34%),
    linear-gradient(135deg, #fff0b8 0%, #f0c969 48%, #dda03a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 14px 28px rgba(124, 83, 25, 0.18);
}

/* ============================================================================
   Mobile (≤920px) — premium right-side, full-height off-canvas drawer
   ----------------------------------------------------------------------------
   The nav panel becomes a fixed drawer that slides in from the right edge at
   full viewport height, over a blurred scrim. Layout inside the drawer:
     • a header (brand + circular close button),
     • a scrollable body (links + inline accordion sections),
     • a pinned Contact CTA footer.
   ========================================================================== */
@media (max-width: 920px) {
  /* Lock the page behind the open drawer. */
  body.stripe-nav-open {
    overflow: hidden;
  }

  .stripe-nav {
    grid-template-columns: 1fr auto;
    min-height: 68px;
    padding: 0 20px;
    gap: 10px;
  }

  /* A backdrop-filter makes its element the containing block for every
     position:fixed descendant — which would trap the drawer + scrim inside the
     ~68px nav bar instead of the viewport. Drop the blur on mobile (in both the
     resting and is-scrolled states) so the fixed drawer resolves against the
     viewport. The themed nav background is ~0.9 opaque, so the blur is
     imperceptible here anyway. */
  .stripe-nav,
  .stripe-site-header.is-scrolled .stripe-nav {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* ---- Dim + blur scrim ---------------------------------------------------- */
  .stripe-nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 110;
    background: rgba(12, 9, 35, 0.46);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 340ms ease, visibility 0s linear 340ms;
  }

  .stripe-nav-open .stripe-nav-scrim {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 340ms ease, visibility 0s;
  }

  /* ---- The drawer ---------------------------------------------------------- */
  .stripe-nav-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 120;
    display: flex;
    flex-direction: column;
    width: min(400px, 90vw);
    height: 100dvh;
    background: var(--theme-surface-solid, #ffffff);
    border-left: 1px solid var(--theme-border, var(--line));
    box-shadow: -28px 0 64px rgba(7, 8, 30, 0.30);
    transform: translateX(100%);
    visibility: hidden;
    pointer-events: none;
    overscroll-behavior: contain;
    transition:
      transform 440ms cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s linear 440ms;
  }

  .stripe-nav-open .stripe-nav-panel {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
    transition: transform 440ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
  }

  /* The drawer carries its own close button, so retire the hamburger while the
     drawer is open — it otherwise sits above the panel (z-index: 130 > 120) and
     shows a duplicate "X". */
  .stripe-nav-open .stripe-nav-toggle {
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease;
  }

  /* Make the hamburger a clearly-bounded button: on the cream nav a white
     circle with a faint border reads as empty space, so taps on the circle
     (but off the icon lines) feel like "clicking outside it". A firmer border,
     soft shadow and larger glyph make the whole tap target obviously the
     button. */
  .stripe-nav-toggle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--navy) 20%, transparent);
    background: var(--theme-surface-solid, #fff);
    color: var(--navy);
    box-shadow: 0 4px 12px rgba(26, 0, 136, 0.10);
    transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
  }

  .stripe-nav-toggle svg,
  .stripe-nav-toggle i {
    width: 23px;
    height: 23px;
    stroke-width: 2.4;
  }

  .stripe-nav-toggle:active {
    transform: scale(0.92);
    background: color-mix(in srgb, var(--navy) 6%, var(--theme-surface-solid));
  }

  /* ---- Drawer header (brand + close) --------------------------------------- */
  .stripe-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex: 0 0 auto;
    padding: 17px 18px 16px;
    border-bottom: 1px solid var(--theme-border-soft, var(--line));
    background:
      linear-gradient(180deg,
        color-mix(in srgb, var(--aqua) 34%, var(--theme-surface-solid)) 0%,
        var(--theme-surface-solid) 100%);
  }

  .stripe-drawer-brand {
    text-decoration: none;
  }

  .stripe-drawer-brand .brand-mark {
    height: 34px;
  }

  .stripe-drawer-brand .brand-wordmark strong {
    font-size: 1rem;
    font-weight: 800;
    color: var(--navy);
    letter-spacing: -0.01em;
  }

  .stripe-drawer-brand .brand-wordmark small {
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .stripe-drawer-close {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border: 1px solid var(--theme-border, var(--line));
    border-radius: 50%;
    background: var(--theme-surface-solid, #fff);
    color: var(--navy);
    cursor: pointer;
    transition: background 200ms ease, color 200ms ease,
      border-color 200ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .stripe-drawer-close:hover,
  .stripe-drawer-close:focus-visible {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
    transform: rotate(90deg);
    outline: none;
  }

  .stripe-drawer-close svg {
    width: 20px;
    height: 20px;
    stroke-width: 2.2;
  }

  /* ---- Scrollable body ----------------------------------------------------- */
  .stripe-nav-scroll {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 14px 16px 20px;
  }

  /* Full-width single-column list. Without an explicit track the grid auto-
     sizes to content and the inherited justify-content:center floats the items
     in the middle — set a 1fr track so every row fills the drawer. */
  .stripe-nav-menu {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  /* Links + accordion triggers: full-width rows with comfortable tap height. */
  .stripe-nav-link {
    position: relative;
    justify-content: space-between;
    width: 100%;
    min-height: 54px;
    padding: 0 14px;
    border-radius: 12px;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--navy);
    transition: background 160ms ease, color 160ms ease;
  }

  .stripe-nav-link::after {
    display: none;
  }

  /* A little air before the expandable categories. */
  .stripe-nav-menu button.stripe-nav-trigger:first-of-type {
    margin-top: 8px;
  }

  /* Neutral wash on press / while a category is expanded. */
  .stripe-nav-link:active,
  .stripe-nav-link:hover,
  .stripe-nav-trigger[aria-expanded="true"] {
    background: color-mix(in srgb, var(--navy) 6%, transparent);
  }

  /* Current page / current section — soft coral pill + a left accent tab. */
  .stripe-nav-link.is-active,
  .stripe-nav-trigger.has-active {
    background: color-mix(in srgb, var(--coral) 12%, transparent);
    color: var(--navy);
  }

  .stripe-nav-link.is-active::before,
  .stripe-nav-trigger.has-active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 22px;
    transform: translateY(-50%);
    border-radius: 0 4px 4px 0;
    background: var(--coral);
  }

  .stripe-nav-trigger .nav-trigger-chevron {
    width: 18px;
    height: 18px;
    color: var(--muted);
  }

  .stripe-nav-trigger[aria-expanded="true"] .nav-trigger-chevron,
  .stripe-nav-trigger.has-active .nav-trigger-chevron {
    color: var(--teal-dark);
  }

  /* ---- Inline accordion (the shared overlay collapses in-flow) ------------- */
  .stripe-flyout {
    position: static;
    height: auto;
    margin-top: 4px;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    transition: none;
  }

  .stripe-flyout-arrow {
    display: none;
  }

  .stripe-flyout-bg {
    position: static;
    width: 100% !important;
    height: auto !important;
    transform: none !important;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    overflow: visible;
    transition: none;
  }

  html[data-color-theme] .stripe-flyout-bg {
    box-shadow: none;
  }

  .stripe-flyout-viewport {
    height: auto;
  }

  .stripe-flyout-section {
    position: static;
    width: 100% !important;
    opacity: 1;
    transform: none;
    transition: none;
    display: none;
  }

  .stripe-flyout-section.is-active {
    display: block;
    animation: stripeDrawerReveal 320ms cubic-bezier(0.22, 1, 0.36, 1);
  }

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

  /* Section content sits in a soft inset card so it reads as the expanded
     panel of the trigger above it. */
  .stripe-flyout .nav-dropdown-shell {
    grid-template-columns: 1fr;
    border: 1px solid var(--theme-border, var(--line));
    border-radius: 14px;
    overflow: hidden;
    background: color-mix(in srgb, var(--aqua) 24%, var(--theme-surface-solid));
  }

  .stripe-flyout .nav-dropdown-main {
    padding: 14px;
    border-right: 0;
  }

  .stripe-flyout .nav-dropdown-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  /* ---- Pinned Contact CTA footer ------------------------------------------- */
  .stripe-drawer-foot {
    display: flex;
    flex: 0 0 auto;
    padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--theme-border-soft, var(--line));
    background: var(--theme-surface-solid, #ffffff);
  }

  .stripe-nav-cta {
    display: inline-flex;
    width: 100%;
    min-height: 52px;
  }
}

/* Respect reduced-motion: the drawer/scrim appear without the slide/rotate. */
@media (max-width: 920px) and (prefers-reduced-motion: reduce) {
  .stripe-nav-panel,
  .stripe-nav-open .stripe-nav-panel {
    transition: visibility 0s;
  }

  .stripe-nav-scrim,
  .stripe-nav-open .stripe-nav-scrim {
    transition: visibility 0s, opacity 0s;
  }

  .stripe-flyout-section.is-active {
    animation: none;
  }

  .stripe-drawer-close:hover,
  .stripe-drawer-close:focus-visible {
    transform: none;
  }
}