/* Shared blue palette: pale blue controls and deeper blue design details. */
:root{--accent:#C5E9F3;--aqua:#C5E9F3;--accent-strong:#328DA7;--accent-ink:#23647A;--accent-soft:#EAF6FA;--accent-hover:#ADDEEC}
body .button,body .button.light,body header .header-book,
body .visual-upgrade .visual-booking-hero .button.light,
body .visual-upgrade .visual-journal-hero .button.light{background:var(--accent);color:var(--forest)}
body .button:hover,body .button.light:hover,body header .header-book:hover,
body .visual-upgrade .visual-booking-hero .button.light:hover,
body .visual-upgrade .visual-journal-hero .button.light:hover{background:var(--accent-hover);color:var(--forest)}
body .announcement,body .announce{background:var(--accent);color:var(--forest)}
body em{color:var(--accent-ink)}
body :is(.hero,.sauna-hero,.massage-hero,.beauty-hero,.about-hero,.overview-hero,.faq-hero,.membership,.visit,.massage-options,.finish-dark,.sauna-final,.massage-final,.finish-final,.about-final,.beauty-final,.faq-final,.overview-final) :is(h1,h2,h3) em,
body .finish-hero:not(.visual-booking-hero):not(.visual-journal-hero) :is(h1,h2,h3) em{color:var(--accent)}
body :is(.hero,.sauna-hero,.massage-hero,.beauty-hero,.about-hero,.overview-hero,.faq-hero,.membership,.visit,.massage-options,.finish-dark,.sauna-final,.massage-final,.finish-final,.about-final,.beauty-final,.faq-final,.overview-final) .eyebrow{color:var(--accent)}
body .finish-hero:not(.visual-booking-hero):not(.visual-journal-hero) .eyebrow{color:var(--accent)}
body :is(.line-link,.text-link,.massage-text-link,.sauna-text-link,.beauty-text-link,.service-booking-link){border-bottom-color:var(--accent-strong)}
body header :is(nav a,.header-login):hover{color:var(--accent-ink);border-bottom-color:var(--accent-strong)}
body header nav a[aria-current]{text-decoration:underline;text-decoration-color:var(--accent-strong);text-decoration-thickness:2px;text-underline-offset:7px}
body .sauna-tabs button[aria-selected=true],body [role="tab"][aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:var(--forest)}
body .sauna-tabs button:hover{background:var(--accent-soft)}
body nav.mobile-quick-actions .mobile-book{background:var(--accent);color:var(--forest);border-color:var(--accent)}
body nav.mobile-quick-actions .mobile-call{border-color:var(--accent-ink)}
body .questions details[open]{border-color:var(--accent-ink)}
body :is(a,button,summary,[tabindex]):focus-visible{outline:2px solid var(--accent-ink);outline-offset:4px}
body :is(.hero,.sauna-hero,.massage-hero,.beauty-hero,.about-hero,.overview-hero,.faq-hero,.membership,.visit,.massage-options,.finish-dark,.sauna-final,.massage-final,.finish-final,.about-final,.beauty-final,.faq-final,.overview-final) :is(a,button,summary,[tabindex]):focus-visible{outline-color:var(--accent)}
::selection{background:var(--accent);color:var(--forest)}

/* Pale aqua replaces the former solid forest section surfaces. */
:root{--section-aqua:#E7F5F3;--section-ink:#304542}
html body #main :is(.hero,.membership,.visit,.finish-hero,.finish-dark,.finish-photo,.finish-final,.finish-article-header,.beauty-hero,.beauty-planning,.beauty-final,.massage-hero,.massage-options,.massage-final,.massage-couples figure,.about-hero,.about-connection,.about-owner-nameplate,.about-final,.services-hero,.services-community,.services-final,.sauna-hero,.sauna-room-intro figure,.sauna-cold-section,.sauna-final,.faq-final,.muse-content [id="memberships"]){background:var(--section-aqua);color:var(--section-ink)}
html body #main :is(.hero,.membership,.visit,.finish-hero,.finish-dark,.finish-photo,.finish-final,.finish-article-header,.beauty-hero,.beauty-planning,.beauty-final,.massage-hero,.massage-options,.massage-final,.massage-couples figure,.about-hero,.about-connection,.about-owner-nameplate,.about-final,.services-hero,.services-community,.services-final,.sauna-hero,.sauna-room-intro figure,.sauna-cold-section,.sauna-final,.faq-final,.muse-content [id="memberships"]) :is(h1,h2,h3,h4,p,li,span,a,div,figcaption,dt,dd,strong,small){color:var(--section-ink)}
html body #main :is(.hero,.membership,.visit,.finish-hero,.finish-dark,.finish-photo,.finish-final,.finish-article-header,.beauty-hero,.beauty-planning,.beauty-final,.massage-hero,.massage-options,.massage-final,.massage-couples figure,.about-hero,.about-connection,.about-owner-nameplate,.about-final,.services-hero,.services-community,.services-final,.sauna-hero,.sauna-room-intro figure,.sauna-cold-section,.sauna-final,.faq-final,.muse-content [id="memberships"]) :is(em,.eyebrow,.kicker){color:var(--accent-ink)}
html body #main :is(.hero,.membership,.visit,.finish-hero,.finish-dark,.finish-photo,.finish-final,.finish-article-header,.beauty-hero,.beauty-planning,.beauty-final,.massage-hero,.massage-options,.massage-final,.massage-couples figure,.about-hero,.about-connection,.about-owner-nameplate,.about-final,.services-hero,.services-community,.services-final,.sauna-hero,.sauna-room-intro figure,.sauna-cold-section,.sauna-final,.faq-final,.muse-content [id="memberships"]) :is(a,button,summary,[tabindex]):focus-visible{outline-color:var(--accent-ink)}
html body #main :is(.menu-table,.beauty-table-scroll,.massage-table-scroll,.sauna-comparison-table,.sauna-price-table,.finish-table-scroll,.home-sauna-table) :is(thead,thead th){background:var(--section-aqua);color:var(--section-ink)}
html body #main#main :is(.hero-image,.beauty-hero-photo,.massage-hero-photo,.about-hero-photo,.services-hero-photo,.sauna-hero-photo,.visual-support-hero-photo) :is(figcaption,figcaption *, .hero-image-caption,.hero-image-caption *),html body #main#main .finish-hero>figure :is(figcaption,figcaption *){color:var(--paper)}
html body #main#main .hero-image :is(.image-caption,.image-caption *){color:var(--paper)}

/* One shared filled CTA style, including the homepage's legacy .btn variants. */
html body :is(a.button.button,a.btn.btn),
html body #main :is(a.button.button,a.btn.btn){
  display:inline-flex;align-items:center;justify-content:center;gap:15px;
  min-height:46px;padding:14px 22px;box-sizing:border-box;
  background:var(--accent);color:var(--forest);border:1px solid var(--accent);
  border-radius:0;font-size:11px;font-weight:500;line-height:1.5;
  text-align:center;text-decoration:none;
  transition:background .2s,border-color .2s,transform .2s;
}
html body :is(a.button.button,a.btn.btn):hover,
html body #main :is(a.button.button,a.btn.btn):hover{
  background:var(--accent-hover);border-color:var(--accent-hover);
  color:var(--forest);text-decoration:none;transform:translateY(-2px);
}
html body :is(a.button.button,a.btn.btn):focus-visible{
  outline:2px solid var(--accent-ink);outline-offset:4px;
}
html body nav.mobile-quick-actions :is(.mobile-book,.mobile-call){
  background:var(--accent);color:var(--forest);border-color:var(--accent);
}
html body nav.mobile-quick-actions :is(.mobile-book,.mobile-call):hover{
  background:var(--accent-hover);border-color:var(--accent-hover);
}

/* Deeper blue gives the light palette definition without dark section fills. */
html body :is(.announcement,.announce){border-bottom:2px solid var(--accent-strong)}
html body #main#main :is(h1,h2,h3) em{color:var(--accent-strong)}
html body :is(.muse-content,.membership) :is(h1,h2,h3) em{color:var(--accent-strong)}
html body :is(a.button.button,a.btn.btn),
html body #main :is(a.button.button,a.btn.btn){border-color:var(--accent-strong)}
html body :is(a.button.button,a.btn.btn):hover,
html body #main :is(a.button.button,a.btn.btn):hover{border-color:var(--accent-strong)}
html body :is(.massage-style-grid>article,.about-value-grid>article,.sauna-inclusions li){border-top-color:var(--accent-strong)}
html body :is(.sauna-tabs button,[role="tab"])[aria-selected="true"]{background:var(--accent);color:var(--forest);border-color:var(--accent-strong);box-shadow:inset 0 -3px var(--accent-strong)}
html body nav.mobile-quick-actions :is(.mobile-book,.mobile-call){border-color:var(--accent-strong)}
html body :is(.line-link,.text-link,.massage-text-link,.sauna-text-link,.beauty-text-link,.about-text-link,.service-booking-link,.about-link-label,.sauna-offer-label){border-bottom-color:var(--accent-strong)}

/* Eucalyptus grounds the blue palette through quiet structural details. */
:root{--eucalyptus:#6F8F7B;--eucalyptus-ink:#486552;--eucalyptus-wash:#EDF2EE}
html body :is(.massage-style-grid>article,.massage-focus-grid>article,.massage-addon-grid article,.massage-steps article,.about-value-grid>article,.beauty-option-grid>article,.home-why-grid article,.sauna-inclusions li){border-top-color:var(--eucalyptus)}
html body :is(.massage-hero-facts,.sauna-hero-facts,.beauty-hero-facts,.massage-techniques li,.sauna-room-pricing,.about-visit-card,.massage-visit-details,.sauna-cold-facts,.feature-tags span,.muse-home .chips li){border-color:var(--eucalyptus)}
html body :is(.questions details,.questions details[open],.aeo-questions details){border-color:var(--eucalyptus)}
html body :is(.testimonial-slot.verified-review,.muse-content figure.quote){border-left-color:var(--eucalyptus)}
html body :is(.testimonial-slot,.testimonial-slot.verified-review){background:var(--eucalyptus-wash);border-color:var(--eucalyptus)}
html body .quote-mark{color:var(--eucalyptus)}
html body :is(.massage-number,.about-number,.finish-number,.beauty-option-number){color:var(--eucalyptus-ink)}
html body :is(.section,.about-section,.massage-detail-section,.sauna-detail-section,.beauty-detail-section,.muse-content section)>.eyebrow::before,
html body .muse-content section>.wrap>.kicker::before{
  content:"";display:inline-block;width:24px;height:2px;
  margin-right:10px;vertical-align:middle;background:var(--eucalyptus);
}

/* White buttons with black text and borders retain the shared sizing and shape. */
:root{--button-fill:#FFFFFF;--button-hover:#F3F3F3;--button-ink:#000000;--button-border:#000000}
html body :is(a.button.button,a.btn.btn),
html body #main :is(a.button.button,a.btn.btn),
html body nav.mobile-quick-actions :is(.mobile-book,.mobile-call){
  background:var(--button-fill);border-color:var(--button-border);color:var(--button-ink);
}
html body :is(a.button.button,a.btn.btn):hover,
html body #main :is(a.button.button,a.btn.btn):hover,
html body nav.mobile-quick-actions :is(.mobile-book,.mobile-call):hover{
  background:var(--button-hover);border-color:var(--button-border);color:var(--button-ink);
}
html body :is(.sauna-tabs button,[role="tab"])[aria-selected="true"]{
  background:var(--button-fill);border-color:var(--button-border);color:var(--button-ink);
  box-shadow:inset 0 -3px var(--button-border);
}

/* Soft sage announcement banner, paired with the eucalyptus details. */
html body :is(.announcement.announcement,.announce.announce){
  background:#DCE5D9;color:var(--section-ink);border-bottom:2px solid var(--eucalyptus);
}
html body :is(.announcement.announcement,.announce.announce) a{color:inherit}

/* More legible desktop header navigation, scaled to the available width. */
@media(min-width:901px){
  html body header{gap:clamp(12px,1.5vw,24px)}
  html body header>nav{font-size:clamp(11px,1.05vw,15px);gap:clamp(10px,1.35vw,22px)}
  html body header>nav a{white-space:nowrap}
  html body header .dropdown>.dropdown-toggle{font-size:15px}
  html body header .submenu{font-size:13px;line-height:1.7}
  html body header .header-login,
  html body header a.button.header-book{font-size:clamp(12px,1.05vw,15px)}
}
@media(min-width:901px) and (max-width:1100px){
  html body header .logo-brand{flex-basis:120px;width:120px}
  html body header a.button.header-book{padding:13px 16px}
}
@media(min-width:601px) and (max-width:900px){
  html body header .menu-toggle,
  html body header .header-login,
  html body header a.button.header-book{font-size:14px}
}

/* Collapsed header controls follow the same visual and keyboard order. */
@media(max-width:900px){
  html body header .header-login{margin-left:auto}
  html body header .menu-toggle{margin-left:0;flex-shrink:0}
}

/* Selected static hero image replaces the former video at every breakpoint. */
html body .hero-image>img.hero-heat-meets-cold{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
}

/* Service images and headings are separate, accessible links to their page. */
html body #services .service-image-link{display:block;overflow:hidden;flex-shrink:0}
html body #services .service-image-link>img{display:block;width:100%;object-fit:cover}
html body #services .service-heading-link{color:inherit;text-decoration:none}
html body #services .service-heading-link:hover{text-decoration:underline;text-underline-offset:5px}
html body #services .service-image-link:focus-visible{outline:2px solid var(--accent-ink);outline-offset:4px}

/* Focal points for the latest photographs of the actual center. */
img[data-center-photo]{object-position:center center}
.about-hero-photo img[data-center-photo="lounge"],
.services-hero-photo img[data-center-photo="lounge"]{object-position:60% center}
.beauty-hero-photo img[data-center-photo="hair-room"]{object-position:43% center}
.massage-hero-photo img[data-center-photo="bodywork-room"]{object-position:48% center}
.beauty-hero-photo img[data-center-photo="esthetic-room"]{object-position:56% center}
@media(max-width:800px){
  .beauty-hero-photo img[data-center-photo="hair-room"]{object-position:center 65%}
  .massage-hero-photo img[data-center-photo="bodywork-room"]{object-position:center 63%}
}

/* Events hero copy sits over a darkened photograph. */
html body #main#main .visual-events-hero>div:first-child,
html body #main#main .visual-events-hero>div:first-child :is(h1,p,span,a,div){color:#FFFFFF}
html body #main#main .visual-events-hero h1 em{color:var(--accent-strong)}
html body #main#main .visual-events-hero a.button.button{color:var(--button-ink)}
html body #main#main .visual-events-hero .finish-text-link{border-bottom-color:#FFFFFF}