/* ===== Home after the map (R3-HOME). Tokens/classes from base.css (DESIGN-SYSTEM.md, FIXLIST S1); no shared-layer overrides. ===== */
.h-arr, .h-svc, .h-suite, .h-book { position: relative; z-index: 3; overflow-x: clip; }
/* carried over from site.css (no longer linked on Home) */
main { display: block; }
.rs-map { margin-top: 0; }

/* ---- A. Arrival (light), 12 cols / 32 px gutters: text + detail cols 1-4, lobby picture cols 6-12 ---- */
.h-arr { padding: 80px 0; }
.h-arr__grid { column-gap: 32px; align-items: start; }
.h-arr__txt { grid-column: 1 / span 4; }
.h-arr__t { margin: 0; }
.h-arr__lede { margin: 24px 0 0; }
.h-arr__fig2 { width: 220px; margin: 24px 0 0; }
.h-arr__fig2 .fig__media { width: 220px; height: 160px; }
.h-arr__fig { grid-column: 6 / span 7; margin: 0; }
.h-arr__fig .fig__media { aspect-ratio: 4 / 3; }
.h-arr__fig figcaption { letter-spacing: 0; text-transform: none; font-size: 13px; line-height: 18px; }
.h-arr__fig2 figcaption { letter-spacing: 0; text-transform: none; font-size: 13px; line-height: 18px; }
.h-plan { position: fixed; z-index: 60; right: 40px; bottom: 40px; width: 148px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--ink); color: var(--chalk); font: 500 15px/1 var(--font-sans); text-decoration: none; border-radius: 0; opacity: 0; visibility: hidden; transition: opacity .25s linear, visibility 0s .25s; }
.h-plan.is-on { opacity: 1; visibility: visible; transition: opacity .25s linear; }
.h-plan:hover { background: var(--chalk); color: var(--ink); }
.h-plan:focus-visible { outline: 2px solid var(--chalk); outline-offset: 3px; }

/* ---- B. Service (dark): spa clip full bleed with a local bottom gradient (35 %) and its name; list cols 1-9 + 4:5 swap picture cols 10-12 ---- */
.h-svc { padding: 0 0 14vh; }
.h-svc__stage { position: relative; height: 78vh; min-height: 460px; }
.h-svc__media { position: absolute; inset: 0; overflow: hidden; background: var(--ink); }
.h-svc__img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); will-change: transform; }
/* S6: the upper 65 % of the clip keeps its exposure; ink 0 -> 78 % across the bottom 35 % only */
.h-svc .scrim-b { position: absolute; left: 0; right: 0; bottom: 0; top: auto; height: 35%; pointer-events: none; background: linear-gradient(to top, rgba(23, 17, 13, .78) 0%, rgba(23, 17, 13, 0) 100%); }
.h-svc__over { position: absolute; left: 0; right: 0; bottom: 0; padding-bottom: 40px; }
.h-svc__cap { grid-column: 1 / span 8; color: var(--chalk); text-shadow: 0 1px 3px rgba(23, 17, 13, .55); }
.h-svc__name { margin: 0; font-family: var(--font-display); font-style: normal; color: var(--chalk); }
.h-svc__hours { margin: 12px 0 0; font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-variant-numeric: lining-nums tabular-nums; color: var(--chalk); }
.h-svc__intro { padding-top: var(--sp-tight); }
.h-svc__t { grid-column: 1 / span 9; margin: 0 0 40px; color: var(--chalk); }
.h-svc__body { align-items: start; }
.h-svc__list { grid-column: 1 / -1; }
.h-svc__body { column-gap: 24px; }
.h-svc__rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; border-top: 1px solid var(--rule); padding-top: 24px; }
.h-svc__rules > li { display: block; padding: 0; border: 0; }
.h-svc__rules .rules__t { margin: 0; font-family: var(--font-sans); font-weight: 500; font-size: 20px; line-height: 26px; letter-spacing: 0; }
.h-svc__rules .rules__d { margin: 12px 0 0; font-size: 16px; line-height: 24px; color: var(--chalk-2); }
.h-svc__act { margin: 40px 0 0; }

/* ---- C. The Suite (light): 16:10 cols 1-8, 3:2 plunge pool cols 10-12; Bodoni room name below; price group (label, figure, button) right ---- */
.h-suite { padding: var(--sp-tight) 0 14vh; }
.h-suite__grid { align-items: start; }
.h-suite__big { grid-column: 1 / span 8; grid-row: 1 / span 2; margin: 0; }
.h-suite__small { grid-column: 10 / span 3; grid-row: 1; margin: 6vh 0 0; }
.h-suite__small .fig__media { overflow: hidden; }
.h-suite__small .fig__media > .h-suite__crop { position: absolute; width: 250%; height: 250%; max-width: none; left: -120%; top: -105%; object-fit: cover; }
.h-suite__small figcaption { letter-spacing: 0; text-transform: none; font-size: 13px; line-height: 18px; }
.h-suite__rate { font-size: 13px; line-height: 18px; color: var(--ink-2); max-width: 22ch; margin-top: 12px !important; }
.h-suite__t { grid-column: 1 / span 7; grid-row: 3; margin: 40px 0 0; font-family: var(--font-display); font-style: normal; }
.h-suite__lede { grid-column: 1 / span 5; grid-row: 4; margin: 20px 0 0; max-width: 30em; }
.h-suite__price { grid-column: 10 / span 3; grid-row: 2; align-self: end; display: flex; flex-direction: column; align-items: flex-start; margin: 0; }
.h-suite__price p { margin: 0; }
.h-suite__lab { font-family: var(--font-sans); font-size: 13px; line-height: 18px; color: var(--stone); }
.h-suite__fig { margin-top: 6px !important; font-family: var(--font-sans); font-weight: 500; font-size: 32px; line-height: 38px; letter-spacing: -.01em; font-variant-numeric: lining-nums tabular-nums; }
.h-suite__btn { margin-top: 20px; }

/* ---- D. Booking band (data-theme="pool", base.css): labelled form on the 12-col grid, rule-only fields ---- */
.h-book { padding: var(--sp-tight) 0; }
.h-book__form { align-items: end; row-gap: 0; }
.h-book__t { grid-column: 1 / -1; margin: 0 0 40px; color: var(--chalk); }
.h-book__f { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; cursor: pointer; }
.h-book__f--in { grid-column: 1 / span 4; }
.h-book__f--out { grid-column: 5 / span 4; }
.h-book__f--g { grid-column: 9 / span 2; }
.h-book__lab { font-family: var(--font-sans); font-weight: 500; font-size: 12px; line-height: 17px; color: var(--chalk); }
.h-book__f input, .h-book__f select { position: relative; display: block; width: 100%; height: 48px; margin: 0; padding: 0 2px; font: 500 18px/24px var(--font-sans); color: var(--chalk);
  background: transparent; border: 0; border-bottom: 1px solid var(--chalk); border-radius: 0; -webkit-appearance: none; appearance: none; color-scheme: dark; font-variant-numeric: lining-nums proportional-nums; cursor: pointer; }
.h-book__f input::-webkit-datetime-edit { padding: 0; }
/* the picker indicator covers the whole field, so a click anywhere opens the native date picker (plus showPicker() in index.html) */
.h-book__f input::-webkit-calendar-picker-indicator { opacity: 0; position: absolute; inset: 0; width: auto; height: auto; margin: 0; padding: 0; cursor: pointer; }
.h-book__f select { padding-right: 18px; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23F3EEE4' stroke-width='1.2'/%3E%3C/svg%3E") right 2px center / 10px 6px no-repeat; }
.h-book__f select option { color: var(--ink); background: var(--chalk); }
.h-book__f input:focus, .h-book__f select:focus { outline: none; box-shadow: inset 0 -2px 0 var(--chalk); }
.h-book__f input:focus-visible, .h-book__f select:focus-visible { outline: 2px solid var(--chalk); outline-offset: 3px; }
.h-book__go { grid-column: 11 / span 2; justify-self: stretch; min-height: 48px; }
.h-book__note { grid-column: 1 / -1; margin: 20px 0 0; font-family: var(--font-sans); font-size: 13px; line-height: 18px; color: var(--chalk-2, var(--chalk)); }

/* ---- 1280 and below: the button needs a little more room ---- */
@media (max-width: 1100px) {
  .h-book__f--in { grid-column: 1 / span 4; } .h-book__f--out { grid-column: 5 / span 3; } .h-book__f--g { grid-column: 8 / span 2; }
  .h-book__go { grid-column: 10 / span 3; }
}

/* ---- phones / small: single column, nothing clipped ---- */
@media (max-width: 800px) {
  .h-arr { padding-top: 80px; }
  .h-arr__txt, .h-arr__fig, .h-svc__cap, .h-svc__t, .h-svc__list, .h-suite__big, .h-suite__small, .h-suite__t, .h-suite__lede, .h-suite__price,
  .h-book__f--in, .h-book__f--out, .h-book__f--g, .h-book__go, .h-book__note { grid-column: 1 / -1; grid-row: auto; }
  .h-arr__fig { margin-top: 28px; }
  .h-plan { right: 16px; bottom: 16px; }
  .h-svc__rules { grid-template-columns: 1fr; }
  .h-svc__stage { height: 64vh; min-height: 360px; }
  .h-svc__over { padding-bottom: 24px; }
  .h-svc__intro { padding-top: 48px; }
  .h-suite__small { margin-top: 24px; width: 70%; justify-self: end; }
  .h-suite__t { margin-top: 24px; }
  .h-suite__price { margin-top: 24px; }
  .h-book__f { margin-bottom: 20px; }
  .h-book__go { justify-self: start; }
}