/* Header: the contact line sits at the very top of the page and scrolls away with it;
   the menu bar is fixed, starts under the line and moves up to the top of the window */
.site-header, .site-header.is-scrolled { position: absolute !important; top: 0 !important; }
/* backdrop-filter on the header would make it the containing block of the fixed menu bar
   (the bar would scroll away with it); the glass blur moves onto the bar itself */
.site-header, .site-header.is-scrolled { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.site-header > .shell.nav { -webkit-backdrop-filter: blur(18px) saturate(1.1); backdrop-filter: blur(18px) saturate(1.1); }
.site-header .header-contact-bar,
.site-header.is-scrolled .header-contact-bar { opacity: 1 !important; visibility: visible !important; transform: none !important; }
.site-header > .shell.nav {
  position: fixed !important;
  z-index: 40;
  top: var(--nav-top, 46px) !important;
  left: 0; right: 0;
  /* Same grid as the page sections (.shell: 1320 px, 32 px side margins), so content lines up with the bar */
  width: min(100% - 64px, 1320px) !important;
  margin: 0 auto !important;
}
/* Legacy tablet rules must not turn the measured floating public bar relative. */
html body:is(.home,.an-interior) #site-header.site-header > .shell.nav {
  position: fixed !important; top: var(--nav-top, 46px) !important; margin-block: 0 !important;
}

/* One type step smaller: 13 px below 1440 px. */
.site-header .nav-links a { font-size: 13px !important; }
/* Wide screens: 14 px menu and a full-size logo. */
@media (min-width: 1440px) {
  .site-header .nav-links a { font-size: 14px !important; }
  /* full-size logo: in the narrower bar flexbox would otherwise shrink it */
  .site-header .brand { flex-shrink: 0 !important; }
  /* the 1320 px bar fits logo + menu + buttons with slightly tighter spacing */
  .site-header > .shell.nav { padding-inline: 32px !important; column-gap: 22px !important; }
}

/* The contact line lines up with the content of the menu bar: same width, same 3vw inner padding */
.site-header .header-contact-bar__inner {
  box-sizing: border-box;
  width: min(100% - 64px, 1320px) !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding-left: var(--bar-pad-left, 24px) !important;
  padding-right: var(--bar-pad-right, 24px) !important;
}
html body.ds-private #site-header .header-contact-bar { border-bottom: 0 !important; }
/* Private routes intentionally omit header.js; align their two shared boxes
   directly, including tablets whose legacy capsule used 3vw horizontal padding. */
@media (min-width: 768px) {
  html body.ds-private #site-header > .shell.nav,
  html body.ds-private #site-header .header-contact-bar__inner { padding-inline: 24px !important; }
}
/* Keep the single-line strip at 34px; longer public hours grow both boxes.
   header.js measures the real bar height. Private headers keep their geometry. */
html body:is(.home,.an-interior) #site-header.site-header .header-contact-bar {
  height: auto !important; min-height: 34px !important; max-height: none !important;
}
html body:is(.home,.an-interior) #site-header.site-header .header-contact-bar > .header-contact-bar__inner {
  height: auto !important; min-height: 34px !important; padding-block: 0 !important;
}

@media (max-width: 760px) {
  .site-header > .shell.nav { width: calc(100% - 32px) !important; }
  .site-header .header-contact-bar__inner { width: calc(100% - 32px) !important; }
}

/* One button shape for the whole site: a full pill, as on the first screen */
.site-header .button, .site-header .button--appointment,
main .button, main .button--coral, main .button--green, main button[type="submit"],
.hs .hs-btn, .sc-all,
html body .site-header .nav-tools a.button--appointment { border-radius: 999px !important; }

/* A lower bar (76 px instead of 102): the logo and buttons keep their size, only the air around them shrinks */
@media (min-width: 761px) {
  .site-header > .shell.nav { padding-block: 14px !important; }
}

/* Menu items: on hover the word grows a little and an underline draws from left to right */
@media (min-width: 761px) {
  .site-header .nav-links > a:not(.mobile-booking) {
    position: relative; display: inline-block; transform-origin: center bottom;
    transition: transform .3s cubic-bezier(.2,.7,.2,1), color .25s ease;
  }
  .site-header .nav-links > a:not(.mobile-booking)::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 1px; height: 1px;
    border-radius: 1px; background: currentColor;
    transform: scaleX(0); transform-origin: left center;
    transition: transform .4s cubic-bezier(.2,.7,.2,1);
  }
  .site-header .nav-links > a:not(.mobile-booking):is(:hover, :focus-visible) { transform: scale(1.06); }
  .site-header .nav-links > a:not(.mobile-booking):is(:hover, :focus-visible)::after { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .site-header .nav-links > a, .site-header .nav-links > a::after { transition: none !important; }
}

/* A little more air between menu items wherever the full menu is shown (22 px on large screens, 18 px at 1280) */
@media (min-width: 1181px) {
  .site-header .nav-links { column-gap: clamp(18px, 1.45vw, 22px) !important; }
}

/* BEGIN public-header-search-repair */
/* Public bars publish measurements; private mobile bars define the same variables in CSS.
   Private desktop bars retain top 46px and fit within 80px (230x518/2400 logo + 28px padding + 2px border). */
html body:is(.home,.an-interior,.ds-private) #site-header.site-header > #header-search-panel.search-panel {
  position: fixed !important;
  top: calc(var(--nav-top, 46px) + var(--nav-h, 80px) + 8px) !important;
  max-height: calc(100dvh - var(--nav-top, 46px) - var(--nav-h, 80px) - 20px) !important;
  overflow-y: auto;
}
/* END public-header-search-repair */

/* BEGIN finite tablet contact line 20261011 */
@media (min-width: 761px) and (max-width: 900px) {
  .site-header .header-contact-bar__label { white-space: nowrap !important; }
}
/* END finite tablet contact line 20261011 */