/* Site header: utility bar, main row, dropdown panels, phone menu.
   One header, identical markup on every page (see nav.js for behaviour). Colours
   come from the page's --dx-* tokens; the few fallbacks are for pages that
   don't define them. Panels open on aria-expanded, so nothing here needs JS to
   look right when closed. */
.nv { position: relative; z-index: 20; font-family: var(--dx-font-ui); }
.nv, .nv *, .nv *::before, .nv *::after { box-sizing: border-box; }
.nv a:focus-visible, .nv button:focus-visible { outline: 2px solid var(--dx-focus, var(--dx-brand)); outline-offset: 2px; }
.nv .nv-ut a:focus-visible { outline-color: #fff; }

/* skip link: off-screen until focused, then a pill at the top left */
.nv .nv-skip { position: absolute; z-index: 100; top: 8px; left: 12px; padding: 10px 18px; border-radius: 999px; background: var(--dx-brand); color: #fff; font: 600 14px/1.2 var(--dx-font-ui); text-decoration: none; transform: translateY(-200%); }
.nv .nv-skip:focus { transform: none; }
.nv .nv-skip:focus-visible { outline-color: #fff; box-shadow: 0 0 0 4px var(--dx-brand); }
main[tabindex="-1"]:focus { outline: none; }

/* utility bar */
.nv-ut { background: var(--dx-brand-deep); }
.nv-ut-in { max-width: 1280px; margin: 0 auto; padding: 10px 24px; display: flex; justify-content: flex-end; align-items: center; gap: 20px; }
.nv .nv-ut-in a, .nv .nv-ut-in span, .nv .nv-mutil a, .nv .nv-mutil span { flex: none; font-size: 11px; line-height: 1.3; color: rgba(255,255,255,0.8); text-decoration: none; }
.nv .nv-ut-in a:hover { color: #fff; }
.nv .nv-ut-in .nv-give { color: var(--dx-gold); }

/* main row */
.nv-rw { background: var(--dx-surface, #fff); border-bottom: 1px solid var(--dx-hairline); }
.nv-row { max-width: 1280px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.nv .nv-logo { display: flex; align-items: center; flex: none; text-decoration: none; border-radius: 6px; }
.nv-logo img { display: block; width: 262px; height: auto; max-width: min(56vw, 262px); }
.nv-actions { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.nv-nav { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; justify-content: flex-end; }
.nv .nv-i { height: 38px; display: inline-flex; align-items: center; gap: 6px; padding: 0 11px; border: 0; border-radius: 8px; background: none; color: var(--dx-ink-2); font: 400 14px/1 var(--dx-font-ui); text-decoration: none; white-space: nowrap; cursor: pointer; transition: color 0.15s, background 0.15s; }
.nv .nv-i:hover { color: var(--dx-ink); background: var(--dx-bg); }
.nv .nv-i[aria-current="page"] { color: var(--dx-ink); font-weight: 600; }
.nv .nv-book { height: 44px; display: inline-flex; align-items: center; padding: 0 20px; border-radius: 10px; background: var(--dx-brand); color: #fff; font: 600 14px var(--dx-font-ui); white-space: nowrap; text-decoration: none; transition: filter 0.15s, transform 0.15s; }
.nv-arr { margin-left: 0.35em; }
.nv .nv-book:hover { color: #fff; filter: brightness(1.15); transform: translateY(-1px); }

/* chevrons, drawn in CSS */
.nv [data-nav-trigger]::after, .nv .nv-acc-h::after { content: ""; flex: none; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: translateY(-2px) rotate(45deg); transition: transform 0.15s; }
.nv [aria-expanded="true"]::after { transform: translateY(1px) rotate(225deg); }

/* desktop dropdowns */
.nv-item { position: relative; }
.nv .nv-i[aria-expanded="true"] { background: var(--dx-bg); color: var(--dx-ink); }
.nv-panel { position: absolute; z-index: 30; left: 0; top: 100%; max-width: calc(100vw - 16px); padding: 10px; background: var(--dx-surface, #fff); border: 1px solid var(--dx-hairline); border-radius: 12px; box-shadow: 0 2px 4px rgba(0,59,113,0.10), 0 14px 32px rgba(12,60,141,0.16); animation: nv-pop 0.12s ease-out; }
/* keeps the pointer inside the item while it crosses the gap to the panel */
.nv-panel::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--gap, 0px) * -1); height: var(--gap, 0px); }
@keyframes nv-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.nv [aria-expanded="false"] + .nv-panel, .nv [aria-expanded="false"] + .nv-acc-p { display: none; }
.nv-w-lg { width: 560px; } .nv-w-md { width: 540px; } .nv-w-sm { width: 320px; }
.nv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.nv-grid.one { grid-template-columns: 1fr; }
.nv .nv-pi { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 8px; color: var(--dx-ink); text-decoration: none; }
.nv .nv-pi:hover, .nv .nv-pi:focus-visible { color: var(--dx-ink); background: var(--dx-bg); }
.nv .nv-pi[aria-current="page"] b { color: var(--dx-brand); }
.nv-sq { flex: none; width: 14px; height: 14px; margin-top: 3px; border-radius: 3px; }
.nv-sq-1002 { background: #02275a; } .nv-sq-1100 { background: #004aad; } .nv-sq-1400 { background: #b08a32; } .nv-sq-bf { background: #175239; }
.nv-pt b { display: block; font: 600 14px/1.3 var(--dx-font-ui); }
.nv-pt small { display: block; margin-top: 2px; font: 400 12.5px/1.4 var(--dx-font-ui); color: var(--dx-ink-2); }
.nv .nv-foot { display: flex; margin: 6px 2px 0; padding: 11px 12px 4px; border-top: 1px solid var(--dx-hairline); color: var(--dx-brand); font: 600 13.5px var(--dx-font-ui); text-decoration: none; }
.nv .nv-foot:hover { color: var(--dx-brand); text-decoration: underline; }

/* phone menu (hidden on desktop) */
.nv-menubtn { display: none; height: 44px; align-items: center; gap: 8px; padding: 0 14px; border: 1px solid var(--dx-line-strong, #B5C5DB); border-radius: 10px; background: var(--dx-surface, #fff); color: var(--dx-ink); font: 600 14px var(--dx-font-ui); cursor: pointer; }
.nv-menubtn i { width: 16px; height: 12px; background: linear-gradient(currentColor, currentColor) 0 0 / 100% 2px, linear-gradient(currentColor, currentColor) 0 50% / 100% 2px, linear-gradient(currentColor, currentColor) 0 100% / 100% 2px; background-repeat: no-repeat; }
.nv-menubtn[aria-expanded="true"] i { background: linear-gradient(45deg, transparent 42%, currentColor 42% 58%, transparent 58%), linear-gradient(-45deg, transparent 42%, currentColor 42% 58%, transparent 58%); }
.nv-menubtn .nv-lbl-close, .nv-menubtn[aria-expanded="true"] .nv-lbl-menu { display: none; }
.nv-menubtn[aria-expanded="true"] .nv-lbl-close { display: inline; }
.nv-mobile { display: none; background: var(--dx-surface, #fff); border-bottom: 1px solid var(--dx-hairline); padding: 4px 16px 14px; }
.nv .nv-acc-h { width: 100%; height: 50px; display: flex; align-items: center; justify-content: space-between; padding: 0; border: 0; border-bottom: 1px solid var(--dx-hairline); background: none; color: var(--dx-ink); font: 600 15.5px var(--dx-font-ui); text-align: left; cursor: pointer; }
.nv .nv-acc-h[aria-current="page"], .nv .nv-mlink[aria-current="page"] { color: var(--dx-brand); }
.nv-acc-p { padding: 4px 0 8px; border-bottom: 1px solid var(--dx-hairline); }
.nv .nv-acc-p .nv-pi { padding: 9px 6px; }
.nv .nv-mlink { display: flex; align-items: center; height: 50px; border-bottom: 1px solid var(--dx-hairline); color: var(--dx-ink); font: 600 15.5px var(--dx-font-ui); text-decoration: none; }
.nv-mutil { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 16px 0 4px; }
.nv .nv-mutil a, .nv .nv-mutil span { color: var(--dx-ink-2); font-size: 13px; }
.nv .nv-mutil .nv-give { color: var(--dx-brand); }

@media (max-width: 900px) {
  .nv-w-lg, .nv-w-md { width: 340px; }
  .nv-grid { grid-template-columns: 1fr; }
}
/* Menu layout below 1060px: the full nav row wraps to two lines before that (nav + logo + Book need ~1030px). Keep in step with nav.js. */
@media (max-width: 1060px) {
  .nv-ut { display: none; }
  .nv-row { padding: 12px 16px; gap: 8px; flex-wrap: nowrap; }
  .nv .nv-logo { flex: 0 1 220px; min-width: 150px; }
  .nv-logo img { width: 100%; }
  .nv-actions { display: contents; }
  .nv-nav { display: none; }
  .nv .nv-book { order: 2; margin-left: auto; padding: 0 12px; font-size: 12px; }
  .nv-arr { display: none; }
  .nv-menubtn { display: inline-flex; order: 3; padding: 0 12px; gap: 6px; }
  .nv.is-menu .nv-mobile { display: block; }
  .nv .nv-mutil a { display: inline-flex; align-items: center; min-height: 44px; }
}
/* 375px: wordmark stays at 150px+, so the two buttons tighten a little */
@media (max-width: 420px) {
  .nv-row { padding-left: 12px; padding-right: 12px; }
  .nv .nv-book { padding: 0 10px; }
  .nv-menubtn { padding: 0 10px; gap: 5px; }
}
@media (max-width: 380px) { .nv .nv-logo { min-width: 100px; } }
@media (prefers-reduced-motion: reduce) {
  .nv *, .nv *::before, .nv *::after { transition: none !important; animation: none !important; }
}

/* ---------- Cookie consent banner (behaviour: nav.js, "Cookie consent gate") ---------- */
html:not(.wde-consent-on) [data-wde-consent-reset] { display: none; }   /* no tracker on the page: no "Cookie preferences" link */
.wc-bar { position: fixed; z-index: 1000; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); background: var(--dx-navy-950, #001F4D); color: #fff; border-top: 1px solid rgba(255,255,255,0.18); box-shadow: 0 -6px 24px rgba(0,16,40,0.35); font: 400 14px/1.5 var(--dx-font-ui, system-ui, sans-serif); }
.wc-bar *, .wc-bar *::before, .wc-bar *::after { box-sizing: border-box; }
.wc-bar:focus { outline: none; }
.wc-bar p { flex: 1 1 280px; margin: 0; max-width: 720px; }
.wc-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.wc-btns button { min-width: 112px; height: 44px; padding: 0 22px; border: 2px solid #fff; border-radius: 10px; background: transparent; color: #fff; font: 600 14px var(--dx-font-ui, system-ui, sans-serif); cursor: pointer; transition: background 0.15s; }
.wc-btns button:hover { background: rgba(255,255,255,0.14); }
.wc-btns button:focus-visible { outline: 3px solid var(--dx-gold, #C8A951); outline-offset: 2px; }
@media (max-width: 480px) { .wc-btns { flex: 1 1 100%; } .wc-btns button { flex: 1 1 0; min-width: 0; } }
@media (prefers-reduced-motion: reduce) { .wc-btns button { transition: none; } }

/* ---------- Motion manager (behaviour: nav.js, "Motion manager") ---------- */
/* animation: none (not play-state) so one-shot entrance/intro animations show their finished state instead of freezing at opacity 0. */
html.wde-motion-paused, html.wde-motion-paused *, html.wde-motion-paused *::before, html.wde-motion-paused *::after { animation: none !important; transition-duration: 0s !important; scroll-behavior: auto !important; }
[data-wde-motion-toggle] .wm-off, html.wde-motion-paused [data-wde-motion-toggle] .wm-on { display: none; }
html.wde-motion-paused [data-wde-motion-toggle] .wm-off { display: inline; }