/* =============================================================================
   360 School Trips — header / primary navigation
   Namespaced .nv-* so nothing here collides with the legacy theme styles.
   Markup: topmenu.php · data: nav_data.php · behaviour: js/header360.js
   ========================================================================== */

:root {
  --nv-ink:        #0B1220;
  --nv-text:       #16202F;
  --nv-muted:      #5B6779;
  --nv-soft:       #6B7280;   /* 4.8:1 on white — small uppercase labels must pass AA */
  --nv-line:       #E7EAF0;
  --nv-line-soft:  #F0F2F7;
  --nv-surface:    #FFFFFF;
  --nv-tint:       #F5F2FC;
  --nv-accent:     #6D28A8;
  --nv-accent-dk:  #58207F;
  --nv-green:      #6AAE3C;
  --nv-radius:     12px;
  --nv-radius-sm:  9px;
  --nv-bar-h:      76px;
  --nv-bar-h-sm:   64px;
  --nv-util-h:     36px;
  --nv-ease:       cubic-bezier(.4, 0, .2, 1);
  --nv-shadow:     0 1px 2px rgba(11,18,32,.04), 0 24px 48px -26px rgba(11,18,32,.35);
  --nv-font:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* -----------------------------------------------------------------------------
   1. Neutralise the legacy theme header chrome
   -------------------------------------------------------------------------- */
#header .header-inner,
#header .header-logo,
#header .header-tool-bar,
#header .header-nav,
#toggle,
.header-navbar {
  display: none !important;
}

/* The old inner-page band was a 240px stock photo holding nothing. It is now a
   light strip exactly tall enough to clear the fixed header plus a breadcrumb
   row, so pages lead with their own title card. */
#header.header-title.fleet,
#header.header-title.drivers,
#header.header-title.locations,
#header.header-title.about,
#header.header-title.testimonials,
#header.header-title.news,
#header.header-title.contact {
  /* Soft brand lavender — light, but distinct from both the white bar above
     and the near-white page background below. */
  background: linear-gradient(180deg, #F5F2FC 0%, #F1EDF9 100%) !important;
  border-bottom: 1px solid #E4DEF2;
}
#header.triangle.header-title,
#header.classic.header-title { height: 168px; }   /* 112 header + 56 crumbs */

/* Let the breadcrumb strip position against #header rather than #banner.
   Only inner pages — the home page keeps #banner relative for the carousel. */
#header.header-title #banner { position: static; }

.nv-crumbs {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 56px;
  display: flex;
  align-items: center;
  font-family: var(--nv-font);
}
.nv-crumbs__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 28px;
  list-style: none;
}
.nv-crumb {
  display: inline-flex;
  align-items: center;
  color: var(--nv-muted);
  font: 500 13px/1.4 var(--nv-font);
  white-space: nowrap;
}
.nv-crumb + .nv-crumb::before {
  content: "";
  width: 5px; height: 5px;
  margin: 0 10px 0 4px;
  border-top: 1.5px solid #C3C9D4;
  border-right: 1.5px solid #C3C9D4;
  transform: rotate(45deg);
}
.nv-crumb a {
  color: var(--nv-muted);
  text-decoration: none;
  transition: color .16s var(--nv-ease);
}
.nv-crumb a:hover,
.nv-crumb a:focus { color: var(--nv-accent); text-decoration: none; }
.nv-crumb[aria-current="page"] { color: var(--nv-text); font-weight: 600; }
.nv-crumbs a:focus-visible { outline: 2px solid var(--nv-accent); outline-offset: 3px; border-radius: 4px; }

/* -----------------------------------------------------------------------------
   2. Shell
   -------------------------------------------------------------------------- */
.nv,
.nv-drawer,
.nv-scrim { font-family: var(--nv-font); }

.nv *,
.nv-drawer * { box-sizing: border-box; }

.nv {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9000;
  background: var(--nv-surface);
  color: var(--nv-text);
  -webkit-font-smoothing: antialiased;
}

.nv-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.nv-skip {
  position: absolute;
  top: -60px; left: 16px;
  z-index: 9500;
  padding: 10px 16px;
  background: var(--nv-accent);
  color: #fff;
  font: 600 14px/1 var(--nv-font);
  border-radius: 0 0 10px 10px;
  transition: top .18s var(--nv-ease);
}
.nv-skip:focus { top: 0; color: #fff; text-decoration: none; }

#nv-content { display: block; height: 0; }

/* -----------------------------------------------------------------------------
   3. Utility strip
   -------------------------------------------------------------------------- */
.nv-util {
  height: var(--nv-util-h);
  overflow: hidden;
  background: var(--nv-ink);
  color: rgba(255,255,255,.68);
  font-size: 12.5px;
  letter-spacing: .01em;
  transition: height .28s var(--nv-ease), opacity .2s var(--nv-ease);
}
.nv-util__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: var(--nv-util-h);
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 28px;
}
.nv-util__license { margin: 0; white-space: nowrap; }
.nv-util__license .fa { margin-right: 6px; color: var(--nv-green); }
.nv-util__right { display: flex; align-items: center; gap: 14px; }
.nv-util__link,
.nv-util__social {
  color: rgba(255,255,255,.68);
  text-decoration: none;
  transition: color .16s var(--nv-ease);
}
.nv-util__link:hover,
.nv-util__link:focus,
.nv-util__social:hover,
.nv-util__social:focus { color: #fff; text-decoration: none; }
.nv-util__link .fa { margin-right: 6px; opacity: .8; }
.nv-util__social { font-size: 14px; width: 22px; text-align: center; }
.nv-util__divider { width: 1px; height: 14px; background: rgba(255,255,255,.18); }

/* -----------------------------------------------------------------------------
   4. Main bar
   -------------------------------------------------------------------------- */
.nv-bar {
  height: var(--nv-bar-h);
  background: var(--nv-surface);
  border-bottom: 1px solid var(--nv-line);
  transition: height .28s var(--nv-ease), box-shadow .28s var(--nv-ease);
}
.nv-bar__inner {
  position: relative;          /* containing block for the full-width mega panels */
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 28px;
}

.nv-logo { flex: none; display: block; line-height: 0; }
.nv-logo img {
  height: 46px; width: auto; display: block;
  transition: height .28s var(--nv-ease);
}

.nv-nav { margin-left: 26px; }
.nv-menu {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0; padding: 0;
  list-style: none;
}
.nv-menu__item { position: relative; margin: 0; }
/* Mega items opt out of being a containing block so their panel can centre on
   the page rather than on the trigger. Compact dropdowns stay item-anchored. */
.nv-menu__item--mega { position: static; }

.nv-menu__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border: 0;
  background: none;
  border-radius: var(--nv-radius-sm);
  color: var(--nv-text);
  font: 600 14.5px/1.2 var(--nv-font);
  letter-spacing: .005em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color .16s var(--nv-ease), background-color .16s var(--nv-ease);
}
.nv-menu__link:hover,
.nv-menu__link:focus { color: var(--nv-accent); background: var(--nv-tint); text-decoration: none; }
.nv-menu__link.is-current { color: var(--nv-accent); }
.nv-menu__link.is-current::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 2px;
  height: 2px; border-radius: 2px;
  background: var(--nv-accent);
}
.nv-menu__item.is-open > .nv-menu__trigger { color: var(--nv-accent); background: var(--nv-tint); }

.nv-chevron {
  width: 12px; height: 12px;
  flex: none;
  opacity: .6;
  transition: transform .22s var(--nv-ease), opacity .16s var(--nv-ease);
}
.nv-menu__item.is-open .nv-chevron { transform: rotate(180deg); opacity: 1; }

/* Actions --------------------------------------------------------------- */
.nv-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}
.nv-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--nv-text);
  font: 600 14px/1 var(--nv-font);
  text-decoration: none;
  white-space: nowrap;
  transition: color .16s var(--nv-ease);
}
.nv-phone .fa { color: var(--nv-accent); font-size: 13px; }
.nv-phone:hover, .nv-phone:focus { color: var(--nv-accent); text-decoration: none; }

.nv-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 20px;
  border-radius: 10px;
  background: var(--nv-accent);
  color: #fff !important;
  font: 600 14.5px/1 var(--nv-font);
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(11,18,32,.08);
  transition: background-color .18s var(--nv-ease), transform .18s var(--nv-ease), box-shadow .18s var(--nv-ease);
}
.nv-cta:hover, .nv-cta:focus {
  background: var(--nv-accent-dk);
  color: #fff !important;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -6px rgba(109,40,168,.55);
}
.nv-cta:active { transform: translateY(0); }
.nv-cta--block { width: 100%; height: 48px; font-size: 15px; }

.nv-icon-btn,
.nv-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  padding: 0;
  border: 1px solid var(--nv-line);
  border-radius: 10px;
  background: #fff;
  color: var(--nv-text);
  cursor: pointer;
  transition: background-color .16s var(--nv-ease), border-color .16s var(--nv-ease);
}
.nv-icon-btn:hover, .nv-burger:hover { background: var(--nv-tint); border-color: #DED6F0; text-decoration: none; }
.nv-icon-btn { color: var(--nv-accent); font-size: 16px; }

.nv-burger__box { position: relative; display: block; width: 20px; height: 14px; }
.nv-burger__bars,
.nv-burger__bars::before,
.nv-burger__bars::after {
  position: absolute;
  left: 0;
  width: 20px; height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .26s var(--nv-ease), opacity .18s var(--nv-ease), top .26s var(--nv-ease);
}
.nv-burger__bars { top: 6px; }
.nv-burger__bars::before { content: ""; top: -6px; }
.nv-burger__bars::after  { content: ""; top: 6px; }
.nv-burger[aria-expanded="true"] .nv-burger__bars { transform: rotate(45deg); }
.nv-burger[aria-expanded="true"] .nv-burger__bars::before { top: 0; opacity: 0; }
.nv-burger[aria-expanded="true"] .nv-burger__bars::after  { top: 0; transform: rotate(-90deg); }

/* Scrolled state --------------------------------------------------------- */
.nv.is-stuck .nv-util { height: 0; opacity: 0; }
.nv.is-stuck .nv-bar { height: var(--nv-bar-h-sm); box-shadow: 0 6px 24px -14px rgba(11,18,32,.35); }
.nv.is-stuck .nv-logo img { height: 38px; }

/* -----------------------------------------------------------------------------
   5. Dropdown + mega panels
   -------------------------------------------------------------------------- */
.nv-panel {
  position: absolute;
  top: calc(100% + 10px);
  z-index: 20;
  background: var(--nv-surface);
  border: 1px solid var(--nv-line);
  border-radius: var(--nv-radius);
  box-shadow: var(--nv-shadow);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .18s var(--nv-ease), transform .18s var(--nv-ease);
}
.nv-panel[hidden] { display: none; }
.nv-panel.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* Invisible bridge so the pointer can travel from trigger to panel. */
.nv-panel::before {
  content: "";
  position: absolute;
  top: -12px; left: 0; right: 0;
  height: 12px;
}

.nv-panel--menu { left: 0; min-width: 316px; }
.nv-panel--menu .nv-panel__inner { padding: 10px; }

.nv-panel--mega {
  left: 50%;
  width: min(1180px, calc(100vw - 40px));
  transform: translate(-50%, -6px);
}
.nv-panel--mega.is-open { transform: translate(-50%, 0); }
.nv-panel--mega .nv-panel__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 296px;
  gap: 30px;
  padding: 26px 28px;
}

.nv-cols { display: grid; gap: 26px; }
.nv-cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nv-cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nv-cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.nv-col__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  padding: 0 10px 10px;
  border-bottom: 1px solid var(--nv-line-soft);
  color: var(--nv-soft);
  font: 700 11px/1.3 var(--nv-font);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.nv-col__title .fa { color: var(--nv-accent); font-size: 12px; opacity: .85; }

.nv-list { margin: 0; padding: 0; list-style: none; }
.nv-item { margin: 0; }

.nv-link {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--nv-radius-sm);
  color: var(--nv-text);
  text-decoration: none;
  transition: background-color .16s var(--nv-ease), color .16s var(--nv-ease);
}
.nv-link:hover,
.nv-link:focus { background: var(--nv-tint); color: var(--nv-accent); text-decoration: none; }
.nv-link.is-current { background: var(--nv-tint); color: var(--nv-accent); }
.nv-link__text { display: block; min-width: 0; }
.nv-link__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px; height: 34px;
  border-radius: 9px;
  background: var(--nv-tint);
  color: var(--nv-accent);
  font-size: 14px;
}

.nv-item__label {
  display: block;
  font: 500 14px/1.45 var(--nv-font);
  color: inherit;
}
.nv-desc,
.nv-meta {
  display: block;
  margin-top: 2px;
  color: var(--nv-muted);
  font: 400 12.5px/1.45 var(--nv-font);
}
.nv-link:hover .nv-desc,
.nv-link:hover .nv-meta { color: var(--nv-muted); }

.nv-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #E7F4E2;         /* tinted pill: dark green on light green reads
                                  at ~8:1, where white-on-green failed AA */
  color: #1B5E20;
  font: 700 10px/1.6 var(--nv-font);
  letter-spacing: .06em;
  text-transform: uppercase;
  vertical-align: 1px;
}

/* Place with trip-length options */
.nv-item--group { padding: 7px 10px; }
.nv-item--group .nv-item__label { font-weight: 600; }
.nv-variants { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.nv-variant {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid var(--nv-line);
  border-radius: 999px;
  color: var(--nv-muted);
  font: 500 12px/1.5 var(--nv-font);
  text-decoration: none;
  transition: all .16s var(--nv-ease);
}
.nv-variant:hover,
.nv-variant:focus {
  border-color: var(--nv-accent);
  background: var(--nv-tint);
  color: var(--nv-accent);
  text-decoration: none;
}
.nv-variant.is-current { border-color: var(--nv-accent); background: var(--nv-accent); color: #fff; }

.nv-item--note {
  display: flex;
  flex-direction: column;   /* stacked so "Coming soon" never wraps awkwardly */
  align-items: flex-start;
  gap: 4px;
  padding: 8px 10px;
}
.nv-item--note .nv-item__label { color: var(--nv-soft); }
.nv-note {
  padding: 1px 8px;
  border: 1px dashed var(--nv-line);
  border-radius: 999px;
  color: var(--nv-soft);
  font: 500 11.5px/1.6 var(--nv-font);
}

/* Featured card ---------------------------------------------------------- */
.nv-feature {
  display: block;
  overflow: hidden;
  border: 1px solid var(--nv-line);
  border-radius: var(--nv-radius);
  background: #fff;
  text-decoration: none;
  transition: border-color .18s var(--nv-ease), box-shadow .18s var(--nv-ease), transform .18s var(--nv-ease);
}
.nv-feature:hover,
.nv-feature:focus {
  border-color: #DED6F0;
  box-shadow: 0 14px 30px -18px rgba(11,18,32,.4);
  transform: translateY(-2px);
  text-decoration: none;
}
.nv-feature__media { display: block; height: 132px; overflow: hidden; background: var(--nv-tint); }
.nv-feature__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nv-feature__body { display: block; padding: 14px 16px 16px; }
.nv-feature__eyebrow {
  display: block;
  color: var(--nv-accent);
  font: 700 10.5px/1.4 var(--nv-font);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.nv-feature__title {
  display: block;
  margin-top: 6px;
  color: var(--nv-text);
  font: 600 15px/1.35 var(--nv-font);
}
.nv-feature__text {
  display: block;
  margin-top: 6px;
  color: var(--nv-muted);
  font: 400 12.5px/1.55 var(--nv-font);
}
.nv-feature__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  color: var(--nv-accent);
  font: 600 13px/1 var(--nv-font);
}
.nv-feature:hover .nv-feature__cta .fa { transform: translateX(3px); }
.nv-feature__cta .fa { transition: transform .18s var(--nv-ease); }

/* -----------------------------------------------------------------------------
   6. Mobile drawer
   -------------------------------------------------------------------------- */
.nv-scrim {
  position: fixed;
  inset: 0;
  z-index: 9100;
  background: rgba(11,18,32,.55);
  opacity: 0;
  transition: opacity .28s var(--nv-ease);
}
.nv-scrim[hidden] { display: none; }
.nv-scrim.is-open { opacity: 1; }

.nv-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 9200;
  display: flex;
  flex-direction: column;
  width: min(420px, 90vw);
  background: #fff;
  box-shadow: -24px 0 60px -30px rgba(11,18,32,.6);
  transform: translateX(100%);
  transition: transform .3s var(--nv-ease);
}
.nv-drawer[hidden] { display: none; }
.nv-drawer.is-open { transform: translateX(0); }

.nv-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  height: 72px;
  padding: 0 16px 0 20px;
  border-bottom: 1px solid var(--nv-line);
}
.nv-drawer__logo img { height: 38px; width: auto; display: block; }
.nv-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  padding: 0;
  border: 1px solid var(--nv-line);
  border-radius: 10px;
  background: #fff;
  color: var(--nv-text);
  cursor: pointer;
  transition: background-color .16s var(--nv-ease);
}
.nv-drawer__close:hover { background: var(--nv-tint); }
.nv-drawer__close svg { width: 20px; height: 20px; }

.nv-drawer__nav {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 8px 12px 16px;
}
.nv-acc { margin: 0; padding: 0; list-style: none; }
.nv-acc__row { margin: 0; border-bottom: 1px solid var(--nv-line-soft); }
.nv-acc__row:last-child { border-bottom: 0; }

.nv-acc__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 14px 10px;
  border: 0;
  background: none;
  color: var(--nv-text);
  font: 600 16px/1.3 var(--nv-font);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  border-radius: 10px;
  transition: background-color .16s var(--nv-ease), color .16s var(--nv-ease);
}
.nv-acc__link:hover,
.nv-acc__link:focus { background: var(--nv-tint); color: var(--nv-accent); text-decoration: none; }
.nv-acc__link.is-current { color: var(--nv-accent); }
.nv-acc__trigger[aria-expanded="true"] { color: var(--nv-accent); }
.nv-acc__trigger[aria-expanded="true"] .nv-chevron { transform: rotate(180deg); }
.nv-acc__link .nv-chevron { width: 14px; height: 14px; }

.nv-acc__panel {
  overflow: hidden;
  padding: 0 4px 12px;
  transition: height .26s var(--nv-ease);
}
.nv-acc__panel[hidden] { display: none; }
.nv-acc__group {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 6px;
  padding: 0 8px;
  color: var(--nv-soft);
  font: 700 11px/1.4 var(--nv-font);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.nv-acc__group .fa { color: var(--nv-accent); }
.nv-acc__panel .nv-link { padding: 11px 10px; }
.nv-acc__panel .nv-item__label { font-size: 15px; }
.nv-acc__panel .nv-item--group { padding: 10px; }
.nv-acc__panel .nv-variant { padding: 6px 14px; font-size: 13px; }

.nv-acc__feature {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 14px 8px 4px;
  padding: 10px 16px;
  border: 1px solid var(--nv-line);
  border-radius: 999px;
  color: var(--nv-accent);
  font: 600 13.5px/1 var(--nv-font);
  text-decoration: none;
}
.nv-acc__feature:hover { background: var(--nv-tint); text-decoration: none; color: var(--nv-accent); }

.nv-drawer__foot {
  flex: none;
  padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--nv-line);
  background: #FBFAFE;
}
.nv-drawer__contact {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  color: var(--nv-text);
  font: 500 14.5px/1 var(--nv-font);
  text-decoration: none;
}
.nv-drawer__contact .fa { color: var(--nv-accent); width: 16px; text-align: center; }
.nv-drawer__contact:hover { color: var(--nv-accent); text-decoration: none; }
.nv-drawer__license {
  margin: 14px 0 0;
  color: var(--nv-soft);
  font: 400 12px/1.5 var(--nv-font);
}

/* Touch targets — everything tappable inside the drawer clears 44px.
   These sit above the breakpoint overrides on specificity, not source order. */
.nv-drawer__foot .nv-cta--block { height: 50px; font-size: 15px; }
.nv-drawer__logo { display: inline-flex; align-items: center; min-height: 44px; }
.nv-drawer__contact { min-height: 44px; margin-top: 2px; }
.nv-acc__feature { min-height: 44px; }
.nv-acc__panel .nv-variant {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
}

/* -----------------------------------------------------------------------------
   7. Focus, motion, page offset
   -------------------------------------------------------------------------- */
.nv a:focus-visible,
.nv button:focus-visible,
.nv-drawer a:focus-visible,
.nv-drawer button:focus-visible,
.nv-skip:focus-visible {
  outline: 2px solid var(--nv-accent);
  outline-offset: 2px;
  border-radius: 8px;
}
.nv a:focus:not(:focus-visible),
.nv button:focus:not(:focus-visible) { outline: none; }

body.nv-locked { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .nv *, .nv-drawer *, .nv-scrim { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .nv-feature:hover { transform: none; }
}

/* -----------------------------------------------------------------------------
   8. Breakpoints
   -------------------------------------------------------------------------- */

/* Laptop: tighten spacing before anything wraps */
@media (max-width: 1280px) {
  .nv-bar__inner, .nv-util__inner { padding: 0 20px; }
  .nv-nav { margin-left: 14px; }
  .nv-menu__link { padding: 9px 11px; font-size: 14px; }
  .nv-actions { gap: 10px; }
}

@media (max-width: 1150px) {
  .nv-phone span { display: none; }
  .nv-phone { padding: 0 4px; }
  .nv-panel--mega .nv-panel__inner { grid-template-columns: minmax(0, 1fr) 260px; gap: 22px; }
  .nv-cols { gap: 18px; }
}

/* Tablet + mobile: drawer navigation */
@media (max-width: 1023px) {
  .nv-nav,
  .nv-phone { display: none; }
  .nv-burger { display: inline-flex; }
  .nv-icon-btn--phone { display: inline-flex; }
  .nv-bar { height: var(--nv-bar-h-sm); }
  .nv-bar__inner { gap: 12px; }
  .nv-logo img { height: 40px; }
  .nv.is-stuck .nv-logo img { height: 36px; }
  #header.triangle.header-title,
  #header.classic.header-title { height: 116px; }   /* 64 header + 52 crumbs */
  .nv-crumbs { height: 52px; }
  .nv-crumbs__inner { padding: 0 20px; }
}

@media (max-width: 767px) {
  .nv-util { display: none; }
  .nv-bar__inner, .nv-util__inner { padding: 0 16px; }
  .nv-cta { height: 40px; padding: 0 15px; font-size: 13.5px; }
  .nv-logo img { height: 36px; }
  #header.triangle.header-title,
  #header.classic.header-title { height: 112px; }   /* 64 header + 48 crumbs */
  .nv-crumbs { height: 48px; }
  .nv-crumbs__inner { padding: 0 16px; flex-wrap: nowrap; }
  /* Keep only the last two levels on phones — no wrap, no overflow */
  .nv-crumb:nth-last-child(n+3) { display: none; }
  .nv-crumb:nth-last-child(2)::before { display: none; }
  .nv-crumb[aria-current="page"] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
}

/* Small phones: the drawer carries the CTA, so the bar keeps only the essentials */
@media (max-width: 479px) {
  .nv-bar__inner { padding: 0 12px; gap: 8px; }
  .nv-bar .nv-cta { display: none; }   /* the drawer footer keeps its own CTA */
  .nv-logo img { height: 32px; }
  .nv-icon-btn, .nv-burger { width: 44px; height: 44px; }
  .nv-drawer { width: 100vw; }
  .nv-drawer__head { height: 64px; }
}