:root { --header-offset: 150px; }
.skip-link { position: fixed; z-index: 200; left: 16px; top: -80px; padding: 12px 20px; color: white; background: #0d4638; font-weight: 700; }
.skip-link:focus { top: 10px; }
.site-header { background: #fff; backdrop-filter: none; }
.site-header .header-inner { min-height: 76px; }
.site-header .header-actions { margin-left: auto; border: 0; gap: 14px; }
.header-hours { display: grid; text-align: right; font-size: 14px; line-height: 1.6; }
.header-hours strong { font-size: 15px; color: var(--green-dark); }
.header-phone { font-size: 16px; }
.header-booking { border-radius: 4px; font-size: 16px; }
.site-header .site-directory { position: relative; display: flex; justify-content: space-between; gap: 0; width: min(1120px, calc(100% - 40px)); margin: 0 auto; border-top: 1px solid #d8e3dc; font-size: 16px; }
.directory-home { display: flex; align-items: center; min-height: 54px; padding: 8px 12px !important; }
.directory-group { position: relative; min-width: 0; }
.directory-group > summary { padding: 14px 12px; min-height: 54px; white-space: nowrap; cursor: pointer; color: var(--green-dark); font-weight: 700; line-height: 1.5; border-bottom: 3px solid transparent; }
.directory-group > summary::marker { color: #16775d; font-size: 11px; }
.directory-group[open] > summary,
.directory-group.is-current > summary { background: #edf5ef; border-color: #16775d; }
.directory-group[data-page="reservation.html"] > summary { color: #a84920; }
.directory-panel { position: absolute; z-index: 60; top: 100%; left: 0; min-width: 280px; padding: 12px 18px 18px; border: 1px solid #b6cec0; border-top: 3px solid #16775d; background: #fff; box-shadow: 0 8px 16px #12382a12; }
.directory-group:nth-last-child(-n+2) .directory-panel { left: auto; right: 0; }
.site-directory .directory-panel a { display: flex; align-items: center; min-height: 46px; padding: 9px 4px; color: #20392e; font-size: 15px; font-weight: 500; border-bottom: 1px solid #e0e8e2; }
.site-directory .directory-panel .directory-overview { margin-bottom: 4px; font-size: 17px; font-weight: 700; color: var(--green-dark); }
.site-directory .directory-panel a:hover,
.site-directory .directory-panel a:focus-visible { color: #0d4638; background: #eef5ee; text-decoration: underline; text-underline-offset: 4px; }
.site-header summary:focus-visible,
a:focus-visible,
summary:focus-visible { outline: 3px solid #a44a1f; outline-offset: 3px; }
.breadcrumbs { position: sticky; top: var(--sticky-header-height, 133px); z-index: 40; background: #f4f7f3; border-bottom: 1px solid #dce5dd; }
.breadcrumbs ol { display: flex; align-items: center; flex-wrap: wrap; gap: 0; padding-block: 8px; list-style: none; font-size: 15px; line-height: 1.6; }
.breadcrumbs li { display: flex; align-items: center; color: #304d3e; }
.breadcrumbs li + li::before { content: "/"; color: #65746a; padding: 0 14px; }
.breadcrumbs a { display: inline-flex; align-items: center; min-height: 36px; text-decoration: underline; text-underline-offset: 3px; }
.breadcrumbs [aria-current] { font-weight: 700; }
.breadcrumbs [data-breadcrumb-section] { color: #98611b; }
html:root main [id] { scroll-margin-top: var(--header-offset); }
.greeting-identity { top: var(--header-offset); }
.home-page-directory { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; width: min(1120px, calc(100% - 40px)); margin: 0 auto; padding: 18px 0; }
.home-page-directory a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 112px; padding: 12px; text-align: center; border: 1px solid var(--entry-border); border-left: 3px solid var(--entry-accent); border-radius: 4px; color: #123d32; background-color: var(--entry-surface); background-image: var(--entry-pattern); background-size: 100% auto; background-position: center 66%; background-repeat: no-repeat; background-blend-mode: multiply; font-size: 16px; font-weight: 700; line-height: 1.7; transition: border-color 160ms, box-shadow 160ms; }
.directory-leaf { --entry-surface: #e4eee1; --entry-border: #b4cbb3; --entry-accent: #397257; --entry-pattern: url("assets/bg-eucalyptus-sp-v2.webp"); }
.directory-flow { --entry-surface: #deedf2; --entry-border: #b3ced7; --entry-accent: #386d81; --entry-pattern: url("assets/bg-flow-sp-v2.webp"); }
.directory-paper { --entry-surface: #f5e2df; --entry-border: #dbbdb8; --entry-accent: #9d5c53; --entry-pattern: url("assets/bg-linen-pc-v3.webp"); }
.directory-weave { --entry-surface: #f5edcd; --entry-border: #d7c995; --entry-accent: #866c24; --entry-pattern: repeating-linear-gradient(0deg, #92752512 0 1px, transparent 1px 10px), repeating-linear-gradient(90deg, #92752512 0 1px, transparent 1px 10px); }
.home-directory-label { display: flex; flex-wrap: wrap; align-content: center; justify-content: center; min-height: 3.4em; }
.home-directory-label .directory-line { display: block; flex-basis: 100%; }
.home-directory-unit { display: inline-block; }
.home-directory-arrow { display: block; align-self: center; color: var(--entry-accent); font-size: 21px; line-height: 1; }
.home-page-directory a:focus-visible { outline: 3px solid #a44a1f; outline-offset: 3px; }
.home-page-directory a:active { box-shadow: inset 0 0 0 2px var(--entry-accent); }
@media (hover: hover) {
  .home-page-directory a:hover { border-color: var(--entry-accent); box-shadow: inset 0 0 0 1px var(--entry-accent); }
}
@media (prefers-reduced-motion: reduce) {
  .home-page-directory a { transition: none; }
}
.treatment-related { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 32px; padding-block: 18px; }
.treatment-related a { display: flex; align-items: center; min-height: 44px; font-weight: 700; color: #99441d; }
.footer-inner { align-items: start; gap: 30px; }
.footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 28px; }
.footer-links a { display: flex; align-items: center; min-height: 44px; font-size: 15px; white-space: normal; }
@media (min-width: 981px) and (max-width: 1140px) {
  .site-header .site-directory { font-size: 14px; }
  .directory-group > summary { padding-inline: 8px; }
}
@media (max-width: 980px) {
  :root { --header-offset: 92px; }
  .site-header .header-actions,
  .site-header .site-directory { display: none; }
  .site-header .header-inner { min-height: 72px; }
  .site-header .mobile-nav { height: var(--mobile-nav-height, calc(100dvh - 134px)); max-height: var(--mobile-nav-height, calc(100dvh - 134px)); padding: 12px 20px 22px; background: #fff; }
  .mobile-quick-links { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-bottom: 8px; }
  .mobile-nav .mobile-quick-links a { min-height: 46px; padding: 8px 4px; justify-content: center; font-size: 16px; color: #0d4638; background: #edf5ef; }
  .mobile-nav .mobile-quick-links .mobile-page-booking { color: #9c431a; background: #fff1e7; }
  .mobile-nav .mobile-home-link { min-height: 48px; padding: 8px 4px; font-size: 17px; border-bottom: 1px solid #d8e3dc; }
  .mobile-directory-group { border-bottom: 1px solid #d8e3dc; }
  .mobile-directory-group > summary { cursor: pointer; min-height: 56px; padding: 15px 4px; color: #0d4638; font-size: 17px; font-weight: 700; line-height: 1.5; }
  .mobile-directory-group > summary::marker { color: #16775d; font-size: 12px; }
  .mobile-directory-group.is-current > summary { background: #edf5ef; }
  .mobile-directory-links { padding: 0 8px 12px 22px; }
  .mobile-nav .mobile-directory-links a { min-height: 44px; padding: 10px 4px; font-size: 15px; font-weight: 500; color: #30473b; line-height: 1.6; border: 0; }
  .mobile-nav .mobile-directory-links .directory-overview { font-weight: 700; color: #0d4638; text-decoration: underline; text-underline-offset: 4px; }
  .mobile-nav .mobile-directory-links a[aria-current="location"] { color: #99441d; background: #fff1e7; }
  .mobile-nav .mobile-social-links { margin-top: 12px; }
  .breadcrumbs ol { font-size: 14px; padding-block: 5px; }
  .breadcrumbs li + li::before { padding: 0 8px; }
  .home-page-directory { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .home-page-directory a { min-height: 104px; padding: 12px; font-size: 15px; }
}
@media (max-width: 620px) {
  .site-header .header-inner .brand { min-width: 0; }
  .footer-links { column-gap: 18px; }
  .footer-links a { font-size: 14px; }
  .home-page-directory { width: calc(100% - 28px); }
  .home-page-directory a { padding-inline: 10px; }
}