/* =========================================================================
   mockup-header.css
   -------------------------------------------------------------------------
   Pairs with: assets/includes/mockup-header.php
   Link in header2-links.php AFTER main-design.css:
       <link href="assets/css/mockup-header.css" rel="stylesheet">

   ---- WHY THE TEXT WAS INVISIBLE -------------------------------------------
   --nav-color is declared TWICE in the repo:
       main.css   :root                          --nav-color: #212529
       style.css  :root,[data-bs-theme=light]     --nav-color: #fff
   style.css loads second, so var(--nav-color) resolves to WHITE — white
   text on a white pill. Every nav label disappeared.

   This file therefore uses only tokens with a single definition, and states
   the repo's own hex as the fallback on each. The contested names are
   avoided entirely:
       AVOIDED  --nav-color (#212529 vs #fff)
       AVOIDED  --default-color (#212121 / #212529 / #555 / #ffffff)
       AVOIDED  --surface-color, --background-color (redefined per section)
       SAFE     --accent-color, --heading-color, --inverse-color,
                --bs-dark-blue, --nav-dropdown-color,
                --nav-dropdown-hover-color, --nav-dropdown-background-color,
                --heading-font, --nav-font
   ---------------------------------------------------------------------------

   FONTS are 100% repository: Nunito via var(--nav-font) and
   var(--heading-font) everywhere.

   LAYOUT is still the mockup's: 1020px pill, 999px radius,
   400 / 260 / 780px panels, .17s transitions.

   BEHAVIOUR is the repo's: desktop opens on hover/focus-within (CSS only);
   mobile runs on main.js (.mobile-nav-active, .active, .dropdown-active);
   slide-on-scroll comes from the script at the foot of mockup-header.php.

   ---- BREAKPOINTS ----------------------------------------------------------
   Realigned to the repo's own Bootstrap 5 grid. The repo runs 111 @media
   blocks, 74% of them on these values:
       1199.98px  xl   <- the header goes mobile HERE, matching main.css's
                          d-xl-none on .mobile-nav-toggle. Was 1080px, which
                          matched nothing and left the pill crowded through
                          the 1080-1200 band.
        991.98px  lg   (29 blocks repo-wide, the busiest)
        767.98px  md   (25 blocks)
        575.98px  sm   (14 blocks)
   Nothing above 1200px changed. Every desktop value is untouched.
   ========================================================================= */

.nav-shell {
  /* single-definition tokens, with the repo's hex as fallback */
  --hd-accent: var(--accent-color, #053ac3);
  --hd-accent-alt: var(--bs-primary, #1972fa);
  --hd-ink: var(--heading-color, #2d465e);
  --hd-dark: var(--bs-dark-blue, #242b78);
  --hd-mute: var(--inverse-color, #494b5b);
  --hd-panel-bg: var(--nav-dropdown-background-color, #ffffff);
  --hd-panel-text: var(--nav-dropdown-color, #212529);
  --hd-panel-hover: var(--nav-dropdown-hover-color, #053ac3);

  /* literal, because --nav-color / --default-color are contested (see above) */
  --hd-text: #212529;

  --hd-item-gap: 8px; /* space between nav items */
  --hd-logo-gap: 32px; /* logo -> first nav item; 4x the item gap */
  --hd-logo-h: 38px; /* header logo height       */
  --hd-line: rgba(33, 37, 41, 0.1);
  --hd-tint: rgba(5, 58, 195, 0.06);
  --hd-shadow:
    0 2px 6px rgba(33, 37, 41, 0.06), 0 18px 50px rgba(33, 37, 41, 0.1);
  --hd-panel-shadow:
    0 3px 8px rgba(33, 37, 41, 0.05), 0 24px 60px rgba(33, 37, 41, 0.16);

  /* a visible default for anything that inherits */
  color: var(--hd-text);
  font-family: var(--nav-font, "Nunito", sans-serif);
}

/* base rules the nav needs, confined to it */
.nav-shell * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.nav-shell a {
  text-decoration: none;
}
.nav-shell :focus-visible {
  outline: 3px solid var(--hd-accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- shell.  #header beats Bootstrap's .fixed-top top:0 ---------- */
#header.nav-shell {
  position: fixed;
  top: 14px;
  left: 0;
  right: 0;
  z-index: 1040;
  padding: 0 16px;
  background: none;
  box-shadow: none;
  transition:
    top 0.25s ease,
    transform 0.3s ease;
}
.scrolled #header.nav-shell {
  top: 8px;
}

/* Slide-away state, toggled by the script at the bottom of mockup-header.php.
   -100% clears the pill, the extra 24px clears its shadow. */
#header.nav-shell.hdr-hidden {
  transform: translateY(calc(-100% - 24px));
}
/* NEVER transform the shell while the mobile sheet is open. A non-none
   transform makes #header the containing block for position:fixed
   descendants, and .mobile-nav-active .nav-links IS position:fixed — the
   sheet would collapse into the pill. Same trap as backdrop-filter. */
.mobile-nav-active #header.nav-shell,
.mobile-nav-active #header.nav-shell.hdr-hidden {
  transform: none;
}

/* ---------- the pill ---------- */
.nav-shell .nav {
  /* max-width: 1020px; */
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: var(--hd-shadow);
  border-radius: 999px;
  padding: 8px 12px 8px 18px;
  flex-wrap: nowrap;
  transition: background 0.25s ease;
}
.scrolled .nav-shell .nav {
  background: rgba(255, 255, 255, 0.96);
}

.nav-shell .brand {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: none;
}
/* --hd-logo-h is the only place to change the logo size.
   The pill has 8px vertical padding, and the tallest other item in it is
   the "Book a demo" button (~42px), so the pill height is unaffected until
   the logo passes ~42px — beyond that the whole bar grows taller. */
.nav-shell .brand-logo {
  height: var(--hd-logo-h);
  width: auto;
  /* max-width: 220px;
  display: block; */
  max-width: 160px;
  object-fit: contain; /* prevents distortion */
}

/* ---------- top-level links ---------- */
/* --hd-item-gap is the space between top-level nav items. The mockup had
   2px, which read as no gap at all once the items were stretched. Tune here
   and every item moves together. */
.nav-shell .nav-links {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--hd-item-gap);
  /* margin-left: 16px; */
  margin-left: var(--hd-logo-gap);
  align-self: stretch;
}
.nav-shell .nav-plain,
.nav-shell .nav-trigger {
  font-family: var(--nav-font, "Nunito", sans-serif);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--hd-text);
  padding: 0.5rem 0.7rem;
  border-radius: 999px;
  background: none;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
  transition:
    color 0.15s ease,
    background 0.15s ease;
}
.nav-shell .nav-plain:hover,
.nav-shell .nav-trigger:hover,
.nav-shell .nav-item:hover > .nav-trigger,
.nav-shell .nav-item:focus-within > .nav-trigger,
.nav-shell .nav-trigger.active {
  color: var(--hd-accent);
  background: rgba(33, 37, 41, 0.06);
}

/* Stretch each item to the pill's content height. Without this the item is
   only as tall as its trigger, so "top:100%" landed ~12px higher than it does
   for the .wide panel — which is why Industries had a gap and the others did
   not. Stretched, the distance from item bottom to pill outer edge is exactly
   8px padding + 1px border = 9px, on every item. */
.nav-shell .nav-item {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
}
.nav-shell .nav-item.wide {
  position: static;
}
/* .nav-shell .toggle-dropdown {
  font-size: 11px;
  line-height: 1;
  color: inherit;
  transition: transform 0.18s ease;
} */
.nav-shell .hd-caret {
  font-size: 11px;
  line-height: 1;
  color: inherit;
  transition: transform 0.18s ease;
}
/* .nav-shell .nav-item:hover > .nav-trigger .toggle-dropdown,
.nav-shell .nav-item:focus-within > .nav-trigger .toggle-dropdown,
.nav-shell .nav-trigger.active .toggle-dropdown {
  transform: rotate(180deg);
} */

.nav-shell .nav-item:hover > .nav-trigger .hd-caret,
.nav-shell .nav-item:focus-within > .nav-trigger .hd-caret,
.nav-shell .nav-trigger.active .hd-caret {
  transform: rotate(180deg);
}

/* ---------- panels ---------- */
.nav-shell .panel {
  /* --hd-gap is the visible distance between the pill edge and the panel.
     Normal panels measure from the nav-item (9px inside the pill edge), so
     they need 9px more than the gap. .panel-wide measures from #header
     itself, i.e. already at the pill edge, so it uses the gap as-is. */
  --hd-gap: 12px;
  --hd-offset: calc(var(--hd-gap) + 9px);
  position: absolute;
  top: 100%;
  margin-top: var(--hd-offset);
  z-index: 70;
  /* Opaque literal, and NO backdrop-filter. The mockup blurred the backdrop
     here, but with a solid white fill the blur contributes nothing visible
     while still forcing a composited layer + a containing block — which is
     what let the hero headline read through the dropdown. Solid fill only. */
  background-color: #ffffff;
  border: 1px solid var(--hd-line);
  border-radius: 22px;
  box-shadow: var(--hd-panel-shadow);
  padding: 14px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity 0.17s ease,
    transform 0.17s ease,
    visibility 0.17s;
}
.nav-shell .nav-item:hover > .panel,
.nav-shell .nav-item:focus-within > .panel {
  opacity: 1;
  visibility: visible;
  transform: none;
}
/* invisible bridge so the cursor can cross the gap to the panel */
.nav-shell .panel::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--hd-offset));
  left: 0;
  right: 0;
  height: var(--hd-offset);
}
.nav-shell .panel-narrow {
  left: -10px;
  width: 400px;
}
.nav-shell .panel-list {
  left: -10px;
  width: 260px;
}
.nav-shell .panel-wide {
  --hd-offset: var(--hd-gap);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: 780px;
  max-width: calc(100vw - 60px);
}
.nav-shell .nav-item.wide:hover > .panel-wide,
.nav-shell .nav-item.wide:focus-within > .panel-wide {
  transform: translateX(-50%);
}

/* ---------------------------------------------------------------------
   WRAPPING. The nav carries class="navmenu" so main.js can find it, which
   drags in main.css's rule:
       .navmenu a, .navmenu a:focus { display:flex; white-space:nowrap; ... }
   white-space INHERITS, so every <a> in a panel and every <span> inside it
   stopped wrapping — that is why the product descriptions ran off the
   right edge of the panel. Re-assert normal wrapping on the panel subtree.
   .p-tag keeps nowrap: those labels must never break.
   --------------------------------------------------------------------- */
/* main.css's .navmenu a rule also fires as ".navmenu a:focus", which scores
   (0,2,1) and therefore OUT-RANKS a plain ".nav-shell .p-item" (0,2,0).
   The moment a panel link took focus it flipped back to display:flex with
   justify-content:space-between and padding:18px 15px — which is why one
   item's title, tag and description suddenly re-arranged. Every panel <a>
   rule below is repeated for :hover/:focus/:active so its own layout holds
   in all four states. */
.nav-shell .panel,
.nav-shell .panel a,
.nav-shell .panel a:hover,
.nav-shell .panel a:focus,
.nav-shell .panel a:active,
.nav-shell .panel span,
.nav-shell .panel div {
  white-space: normal;
}
.nav-shell .panel a:focus,
.nav-shell .panel a:hover {
  align-items: initial;
  justify-content: initial;
}

.nav-shell .p-item,
.nav-shell .p-item:hover,
.nav-shell .p-item:focus,
.nav-shell .p-item:active {
  display: block;
  padding: 12px 14px;
  border-radius: 14px;
  min-width: 0;
  white-space: normal;
  transition: background 0.14s ease;
}
.nav-shell .p-item:hover {
  background: var(--hd-tint);
}
.nav-shell .p-title {
  font-family: var(--heading-font, "Nunito", sans-serif);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  color: var(--hd-ink);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  min-width: 0;
  overflow-wrap: break-word;
}
.nav-shell .p-desc {
  display: block;
  margin-top: 4px;
  font-family: var(--nav-font, "Nunito", sans-serif);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--hd-mute);
  min-width: 0;
  overflow-wrap: break-word;
}
.nav-shell .p-tag {
  font-family: var(--nav-font, "Nunito", sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(5, 58, 195, 0.1);
  color: var(--hd-accent);
  white-space: nowrap;
  flex: none;
}
.nav-shell .p-tag.soon {
  background: rgba(25, 114, 250, 0.12);
  color: var(--hd-accent-alt);
}
.nav-shell .p-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.nav-shell .p-head {
  font-family: var(--nav-font, "Nunito", sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hd-mute);
  padding: 8px 14px 6px;
}
.nav-shell .p-link,
.nav-shell .p-link:hover,
.nav-shell .p-link:focus,
.nav-shell .p-link:active {
  display: block;
  padding: 9px 14px;
  border-radius: 11px;
  font-family: var(--nav-font, "Nunito", sans-serif);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--hd-panel-text);
  transition:
    color 0.14s ease,
    background 0.14s ease;
}
.nav-shell .p-link:hover {
  background: var(--hd-tint);
  color: var(--hd-panel-hover);
}
.nav-shell .p-link.sub {
  padding-left: 28px;
  font-size: 15px;
  color: var(--hd-mute);
}
.nav-shell .p-foot {
  margin-top: 6px;
  padding: 8px 14px 2px;
  border-top: 1px solid var(--hd-line);
  display: flex;
  align-items: center;
  gap: 20px;
  font-family: var(--nav-font, "Nunito", sans-serif);
  font-size: 14px;
  font-weight: 700;
}
/* These are <a> inside .navmenu, so main.css's ".navmenu a" was giving them
   padding:10px 20px — which is what made the two links sit in tall boxes.
   Colour alone was overridden before; the padding was not. Repeated for
   :hover/:focus/:active so ".navmenu a:focus" (0,2,1) cannot reclaim them. */
.nav-shell .p-foot a,
.nav-shell .p-foot a:hover,
.nav-shell .p-foot a:focus,
.nav-shell .p-foot a:active {
  padding: 2px 0;
  color: var(--hd-accent);
  line-height: 1.3;
}
.nav-shell .p-foot a:hover {
  color: var(--hd-ink);
}

/* ---------- right-hand buttons ---------- */
.nav-shell .nav-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}
.nav-shell .signin {
  font-family: var(--nav-font, "Nunito", sans-serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--hd-ink);
  padding: 0.5rem 0.8rem;
  border-radius: 999px;
  white-space: nowrap;
  transition:
    color 0.15s ease,
    background 0.15s ease;
}
.nav-shell .signin:hover {
  color: var(--hd-accent);
  background: rgba(33, 37, 41, 0.05);
}
.nav-shell .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--heading-font, "Nunito", sans-serif);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  padding: 0.7rem 1.25rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    color 0.18s ease;
}

/* "Book a demo" — matched to main.css's own header button:
       .header .btn-getstarted       { background: var(--accent-color);
                                       color: var(--contrast-color);
                                       transition: 0.3s; }
       .header .btn-getstarted:hover { background: color-mix(in srgb,
                                       var(--accent-color), transparent 15%); }
   Those are gated on .header, which this nav deliberately does not carry
   (it would pull in main.css's 15 .header rules and undo the pill), so the
   same values are restated here. The mockup's lift + shadow are gone: the
   repo hover changes the background only. */
.nav-shell .btn-dark {
  background: var(--hd-accent);
  color: #ffffff;
  transition:
    background 0.3s ease,
    color 0.3s ease;
}
/* Solid first, so browsers without color-mix() still get a hover state. */
.nav-shell .btn-dark:hover,
.nav-shell .btn-dark:focus-visible {
  background: #2f5ed0;
  background: color-mix(in srgb, var(--hd-accent), transparent 15%);
  color: #ffffff;
}

.nav-shell .btn-ghost {
  background: rgba(255, 255, 255, 0.7);
  border-color: var(--hd-line);
  color: var(--hd-ink);
}
.nav-shell .btn-ghost:hover {
  background: #ffffff;
  color: var(--hd-accent);
}

/* hidden on desktop */
.nav-shell .mobile-nav-toggle {
  display: none;
}
.nav-shell .nav-mobile-cta {
  display: none;
}

/* =========================================================================
   xl — 1199.98px : THE HEADER GOES MOBILE
   Matches main.css's d-xl-none on .mobile-nav-toggle, i.e. the repo's own
   definition of "the header is mobile now". Previously 1080px, which left
   the pill crowded from 1080-1200 and matched nothing in the repo.

   CRITICAL: backdrop-filter is removed from .nav here. It creates a
   containing block for positioned descendants, so the fixed sheet would
   resolve against the 54px pill instead of the viewport and vanish.
   ========================================================================= */
@media (max-width: 1199.98px) {
  #header.nav-shell {
    top: 10px;
    padding: 0 12px;
  }
  .scrolled #header.nav-shell {
    top: 6px;
  }

  .nav-shell .nav {
    padding: 8px 10px 8px 14px;
    background: #ffffff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .nav-shell {
    --hd-logo-h: 32px;
  }

  .nav-shell .mobile-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-left: auto;
    flex: none;
    border-radius: 50%;
    cursor: pointer;
    background: var(--hd-accent);
    color: #ffffff;
    font-size: 20px;
  }

  /* main.css has:
       .mobile-nav-active .mobile-nav-toggle {
         position:absolute; top:10px; right:24px; font-size:26px; z-index:9999 }
     which yanks the button out of the pill and pins it to #header, landing
     it half outside the pill's right edge. This header keeps the button in
     flow, so those properties are put back. (0,3,0) beats main.css's (0,2,0). */
  .mobile-nav-active .nav-shell .mobile-nav-toggle {
    position: static;
    top: auto;
    right: auto;
    margin-right: 0;
    font-size: 20px;
    width: 38px;
    height: 38px;
    z-index: auto;
  }

  .nav-shell .nav-right {
    display: none;
  }

  /* the sheet.  main.js puts .mobile-nav-active on <body> */
  .nav-shell .nav-links {
    display: none;
  }
  .mobile-nav-active .nav-shell .nav-links {
    display: block;
    position: fixed;
    inset: 74px 16px 16px 16px;
    margin: 0;
    padding: 14px 10px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background-color: #ffffff;
    border: 1px solid var(--hd-line);
    border-radius: 22px;
    box-shadow: var(--hd-panel-shadow);
    z-index: 1041;
  }
  .mobile-nav-active {
    overflow: hidden;
  }

  .nav-shell .nav-item {
    position: static;
    display: block;
    align-self: auto;
  }
  .nav-shell .nav-links {
    align-self: auto;
  }
  .nav-shell .nav-trigger,
  .nav-shell .nav-plain {
    width: 100%;
    justify-content: space-between;
    font-size: 17px;
    font-weight: 600;
    padding: 12px 16px;
    border-radius: 14px;
    color: var(--hd-ink);
  }
  /* .nav-shell .toggle-dropdown {
    width: 28px;
    height: 28px;
    flex: none;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
  } */
  .nav-shell .hd-caret {
    width: 28px;
    height: 28px;
    flex: none;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
  }

  /* Below 1200px a tap leaves the <button> focused, so :focus-within stays
     true after the panel closes and the caret stayed rotated on the last
     trigger touched. On mobile only .active drives rotation — the script
     owns that, and it clears it correctly. */
  .nav-shell .nav-item:hover > .nav-trigger .hd-caret,
  .nav-shell .nav-item:focus-within > .nav-trigger .hd-caret {
    transform: none;
  }
  .nav-shell .nav-item .nav-trigger.active .hd-caret {
    transform: rotate(180deg);
  }

  /* panels go flat and inline; main.js adds .dropdown-active */
  .nav-shell .panel,
  .nav-shell .panel-narrow,
  .nav-shell .panel-list,
  .nav-shell .panel-wide {
    position: static;
    width: auto;
    max-width: none;
    left: auto;
    transform: none;
    margin: 2px 0 6px;
    padding: 4px 0 6px 10px;
    display: none;
    opacity: 1;
    visibility: visible;
    border: 0;
    border-radius: 14px;
    box-shadow: none;
    background: rgba(33, 37, 41, 0.03);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition: none;
  }

  /* The desktop centring rules are (0,5,0), and media queries add no
     specificity, so the "transform: none" above (0,2,0) loses to them.
     Tapping Industries fires :focus-within and the mega panel got
     translateX(-50%) — shifted half off the sheet's left edge, which is
     why its content looked missing. Restated here so the reset holds. */
  .nav-shell .nav-item:hover > .panel,
  .nav-shell .nav-item:focus-within > .panel,
  .nav-shell .nav-item.wide:hover > .panel-wide,
  .nav-shell .nav-item.wide:focus-within > .panel-wide {
    transform: none;
    left: auto;
  }

  .nav-shell .panel.dropdown-active {
    display: block;
  }
  .nav-shell .panel::before {
    display: none;
  }
  .nav-shell .p-cols {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .nav-shell .p-item {
    padding: 10px 14px;
  }
  .nav-shell .p-desc {
    display: none;
  } /* too tall once stacked */
  .nav-shell .p-head {
    padding: 10px 14px 2px;
  }
  .nav-shell .p-foot {
    margin-top: 4px;
    padding: 8px 14px 2px;
  }
  .nav-shell .p-link {
    font-size: 15px;
  }

  .nav-shell .nav-mobile-cta {
    display: flex;
    gap: 8px;
    padding: 14px 16px 4px;
    border-top: 1px solid var(--hd-line);
    margin-top: 8px;
  }
  .nav-shell .nav-mobile-cta .btn {
    flex: 1;
  }
}

/* =========================================================================
   md — 767.98px : tablet down
   ========================================================================= */
@media (max-width: 767.98px) {
  #header.nav-shell {
    padding: 0 10px;
  }
  .nav-shell {
    --hd-logo-h: 30px;
  }
  .nav-shell .nav {
    padding: 7px 8px 7px 12px;
  }
  .mobile-nav-active .nav-shell .nav-links {
    inset: 68px 12px 12px 12px;
  }
  .nav-shell .nav-trigger,
  .nav-shell .nav-plain {
    font-size: 16px;
    padding: 11px 14px;
  }
  .nav-shell .p-link {
    padding: 9px 14px;
  }
}

/* =========================================================================
   sm — 575.98px : phone
   The two sheet CTAs sat side by side with no wrap, which overflowed at
   320px. They stack here instead.
   ========================================================================= */
@media (max-width: 575.98px) {
  #header.nav-shell {
    top: 8px;
    padding: 0 8px;
  }
  .scrolled #header.nav-shell {
    top: 4px;
  }
  .nav-shell {
    --hd-logo-h: 28px;
  }
  .nav-shell .brand-logo {
    max-width: 150px;
  }
  .nav-shell .nav {
    padding: 6px 6px 6px 10px;
    gap: 6px;
  }
  .nav-shell .mobile-nav-toggle {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }

  /* keep the phone size when the sheet is open too */
  .mobile-nav-active .nav-shell .mobile-nav-toggle {
    font-size: 18px;
    width: 36px;
    height: 36px;
  }

  .mobile-nav-active .nav-shell .nav-links {
    inset: 60px 10px 10px 10px;
    padding: 10px 6px;
    border-radius: 18px;
  }
  .nav-shell .nav-trigger,
  .nav-shell .nav-plain {
    font-size: 15px;
    padding: 10px 12px;
  }
  .nav-shell .p-item,
  .nav-shell .p-link {
    padding: 9px 12px;
  }
  .nav-shell .p-title {
    font-size: 15px;
  }
  .nav-shell .nav-mobile-cta {
    flex-wrap: wrap;
    padding: 12px 12px 4px;
  }
  .nav-shell .nav-mobile-cta .btn {
    flex: 1 1 100%;
  }
}

/* Safari <18 / Firefox with backdrop-filter off: solid, not washed out */
@supports not (
  (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
  .nav-shell .nav,
  .nav-shell .panel {
    background: #ffffff;
  }
}

@media (prefers-reduced-motion: reduce) {
  #header.nav-shell {
    transition: none;
  }

  .nav-shell * {
    animation: none !important;
    transition: none !important;
  }
}