.nav-pages { display:flex; align-items:center; gap:36px; }
.nav-pages a { display:inline-flex; align-items:center; min-height:46px; padding-block:12px; }
.nav-pages a:hover { text-decoration:underline; text-underline-offset:6px; }
.navbar-spacer { height:108px; flex-shrink:0; }
.hero > .site-header.nav-floating {
  position:fixed; z-index:100; top:0; left:50%; transform:translateX(-50%);
  width:min(1600px, calc(100% - 80px)); margin:0;
  transition:width .4s ease, padding .4s ease, top .4s ease;
}
.nav-floating .wordmark, .nav-floating .nav-pages, .nav-floating .nav-booking {
  transition:background-color .3s ease, color .3s ease, padding .4s ease, border-radius .4s ease, box-shadow .3s ease;
}
.hero > .site-header.nav-compact { width: min(640px, calc(100% - 40px)); top:16px; padding-block:0; gap:12px; justify-content:center; }
.nav-compact .wordmark, .nav-compact .nav-pages { background:var(--cream); color:var(--ink); border-radius:999px; box-shadow:0 2px 12px #15171c14; }
.nav-compact .wordmark { padding:12px 20px; }
.nav-compact .nav-pages { padding:0 22px; gap:24px; }
.nav-compact .main-navigation { gap:12px; }
.nav-compact .nav-booking { background:var(--sheen-blue); color:var(--night); border-radius:999px; margin:0; white-space:nowrap; }
.nav-compact .nav-booking:hover { background:var(--light); }
@media (max-width:760px) {
  .navbar-spacer { height:92px; }
  .hero > .site-header.nav-floating { width:calc(100% - 40px); }
  .hero > .site-header.nav-compact { top:12px; }
  .nav-pages { gap:25px; flex-wrap:wrap; }
  .nav-compact .menu-toggle { background:var(--cream); color:var(--ink); border-color:transparent; border-radius:999px; }
  .nav-floating.menu-open { background:var(--night); border-radius:24px; padding:16px; }
  .nav-compact.menu-open .main-navigation { padding-bottom:0; gap:12px; }
  .nav-compact.menu-open .nav-pages { width:100%; justify-content:space-between; gap:12px; padding-inline:18px; }
  .nav-compact.menu-open .nav-booking { width:100%; }
}
@media(prefers-reduced-motion:reduce) {
  .hero > .site-header.nav-floating, .nav-floating .wordmark, .nav-floating .nav-pages, .nav-floating .nav-booking { transition:none; }
}

/* Shared capsule geometry and section-aware contrast. */
.nav-compact { --nav-surface:var(--cream); --nav-text:var(--night); }
.nav-compact.nav-on-cream { --nav-surface:var(--night); --nav-text:var(--cream); }
.nav-compact .wordmark, .nav-compact .nav-pages, .nav-compact .nav-booking {
  height:52px; min-height:52px; display:flex; align-items:center; flex-shrink:0;
}
.nav-compact .wordmark, .nav-compact .nav-pages, .nav-compact .menu-toggle {
  background:var(--nav-surface); color:var(--nav-text);
}
.nav-compact .wordmark { padding-block:0; }
.nav-compact .main-navigation { flex:0 0 auto; gap:12px; }
.nav-compact .nav-booking { margin-left:0; }
@media(max-width:760px) {
  .hero > .site-header.nav-compact { justify-content:space-between; }
  .nav-compact .menu-toggle { height:52px; }
  .nav-compact.menu-open { background:var(--nav-surface); }
  .nav-compact.menu-open .main-navigation { flex-basis:100%; }
}

/* Leave 28px between the floating capsules and anchored content. */
html { scroll-padding-top:96px; }

/* One continuous desktop layout avoids the previous flex alignment jump. */
@media(min-width:761px) {
  .site-header .mobile-wordmark { display:none; }
  .site-header .main-navigation { width:100%; justify-content:space-between; gap:12px; }
  .site-header .nav-pages { height:52px; padding:0 20px; gap:24px; border-radius:999px; }
  .site-header .nav-pages .nav-wordmark { padding:0; min-height:0; height:auto; background:transparent; box-shadow:none; color:inherit; }
  .site-header .nav-booking { height:52px; min-height:52px; border-radius:999px; margin-left:0; }
  .hero > .site-header.nav-floating { justify-content:center; gap:12px; padding-block:24px; }
  .hero > .site-header.nav-compact { width:min(640px, calc(100% - 40px)); padding-block:0; }
}
@media(max-width:760px) { .site-header .nav-pages .nav-wordmark { display:none; } }
@media(prefers-reduced-motion:no-preference) {
  .hero > .site-header.nav-floating {
    transition:width .75s cubic-bezier(.22,1,.36,1), padding .75s cubic-bezier(.22,1,.36,1), top .75s cubic-bezier(.22,1,.36,1);
  }
  .nav-floating .wordmark, .nav-floating .nav-pages, .nav-floating .nav-booking {
    transition:background-color .55s ease, color .55s ease, box-shadow .55s ease;
  }
}

/* In the hero the brand stays left and the links join the right-hand CTA.
   The same flex structure contracts into the compact capsule on scroll. */
@media(min-width:761px) {
  .site-header .main-navigation { justify-content:flex-start; }
  .site-header .nav-pages { flex:1 1 auto; min-width:0; }
  .site-header .nav-pages .nav-wordmark { margin-right:auto; }
}

/* Room for the four offer links while retaining the separate booking CTA. */
@media(min-width:761px) {
  .hero > .site-header.nav-compact { width:min(960px, calc(100% - 40px)); }
}
@media(min-width:761px) and (max-width:1000px) {
  .site-header .nav-pages { gap:14px; padding-inline:14px; }
  .site-header .main-navigation { font-size:12px; }
  .site-header .nav-booking { padding-inline:14px; }
}
@media(max-width:760px) {
  .nav-compact.menu-open .nav-pages { height:auto; min-height:52px; flex-wrap:wrap; justify-content:flex-start; padding-block:8px; }
}

/* Reveal the two navigation actions only after the header contracts. */
.site-header:not(.nav-compact) .nav-pages > [data-quote],
.site-header:not(.nav-compact) .nav-booking { display:none; }
.site-header.nav-compact .nav-pages > [data-quote] {
  border:1px solid #000; border-radius:999px; padding:8px 14px;
  min-height:40px; white-space:nowrap;
}

.site-header.nav-compact .nav-pages > [data-quote] { background:var(--night); color:var(--cream); }

.site-header.nav-compact.nav-on-cream .nav-pages > [data-quote] { background:var(--cream); color:var(--night); }

/* Native disclosure menus remain usable without JavaScript. */
.nav-dropdown { position:relative; flex-shrink:0; }
.nav-dropdown summary { display:flex; align-items:center; gap:7px; min-height:46px; cursor:pointer; list-style:none; white-space:nowrap; }
.nav-dropdown summary::-webkit-details-marker { display:none; }
.nav-dropdown summary::after { content:""; width:6px; height:6px; border-right:1px solid currentColor; border-bottom:1px solid currentColor; transform:translateY(-2px) rotate(45deg); }
.nav-dropdown[open] summary::after { transform:translateY(1px) rotate(225deg); }
.nav-submenu { position:absolute; top:100%; left:0; z-index:110; width:max-content; max-width:calc(100vw - 40px); padding:10px; border:1px solid #98aaff35; border-radius:16px; background:var(--nav-surface,var(--cream)); color:var(--nav-text,var(--night)); box-shadow:0 12px 32px #0002; }
.nav-pages .nav-submenu a { display:flex; min-height:44px; padding:10px 14px; border-radius:8px; white-space:normal; }
.nav-submenu a:hover, .nav-submenu a:focus-visible { background:#98aaff28; text-decoration:none; }
.nav-dropdown summary:focus-visible { outline:2px solid #98aaff; outline-offset:4px; border-radius:5px; }
@media(max-width:760px) {
  .nav-dropdown { max-width:100%; }
  .nav-dropdown[open] { flex-basis:100%; }
  .nav-submenu { position:static; width:100%; margin-bottom:8px; box-shadow:none; }
}