/* Massage 1 Thai Spa: "Lacquer and Coral"
   Lai rod nam (Thai stencil on lacquer) worked in Anton's coral instead of gold.
   Tokens first, then chrome, then one block per homepage section (each ports to one WP block). */

@font-face {
  font-family: "Tiro";
  src: url("../fonts/tiro-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Tiro";
  src: url("../fonts/tiro-latin-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Metric-matched fallback so the swap does not shove the hero */
@font-face {
  font-family: "Tiro Fallback";
  src: local("Georgia");
  size-adjust: 96%; ascent-override: 92%; descent-override: 28%;
}

:root {
  /* ground and ink */
  --m1-paper: #f5f7f7;          /* lacquered paper, the live site's near-white */
  --m1-paper-2: #eceff0;
  --m1-ink: #0b0b0a;            /* black lacquer */
  --m1-ink-2: #161616;
  --m1-ink-soft: #3a3d3e;       /* secondary text on paper, 10.6:1 */
  --m1-rule: rgba(11, 11, 10, .16);

  /* coral, Anton's brand pair */
  --m1-coral: #e7835b;          /* prices, ornament, actions on lacquer (7.2:1 on ink) */
  --m1-peach: #e9967a;
  --m1-coral-ink: #a8492a;      /* coral text and fills on paper, white text 5.6:1, on paper 5.3:1 */
  --m1-coral-wash: #fbe7dd;     /* the promo strip ground */

  /* on lacquer */
  --m1-on-ink: #f5f7f7;
  --m1-on-ink-soft: #c9c4bf;    /* 11.6:1 on ink */
  --m1-rule-ink: rgba(245, 247, 247, .22);

  /* type */
  --m1-serif: "Tiro", "Tiro Fallback", Georgia, serif;
  --m1-step--1: .875rem;
  --m1-step-0: 1.0625rem;
  --m1-step-1: 1.25rem;
  --m1-step-2: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);
  --m1-step-3: clamp(1.9rem, 1.3rem + 2vw, 2.85rem);
  --m1-step-4: clamp(2.3rem, 1.5rem + 1.9vw, 3.15rem);  /* the comp's 88px at 2688 is ~47px at 1440 */

  /* space and layout */
  --m1-gutter: clamp(16px, 4vw, 56px);
  --m1-max: 1320px;
  --m1-section: clamp(64px, 8vw, 120px);
  --m1-radius-pill: 999px;
  --m1-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --m1-header-h: 84px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--m1-header-h) + 64px);
  scrollbar-color: var(--m1-coral) var(--m1-paper-2); }
body { margin: 0; background: var(--m1-paper); color: var(--m1-ink); font: 400 var(--m1-step-0)/1.6 var(--m1-serif);
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; caret-color: var(--m1-coral-ink); }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: 1.12; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
::selection { background: var(--m1-coral); color: var(--m1-ink); }
:focus-visible { outline: 2px solid var(--m1-coral-ink); outline-offset: 3px; border-radius: 4px; }
.m1-ink :focus-visible, .m1-contact :focus-visible, .m1-mobile :focus-visible { outline-color: var(--m1-coral); }
.m1-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.m1-wrap { width: min(100% - 2 * var(--m1-gutter), var(--m1-max)); margin-inline: auto; }
.m1-no-scroll, .m1-no-scroll body { overflow: hidden; overscroll-behavior: none; }

/* ---------- buttons ---------- */
.m1-btn { display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 48px; padding: .7em 1.9em;
  border-radius: var(--m1-radius-pill); border: 1px solid transparent; font: 400 1rem/1 var(--m1-serif); text-decoration: none;
  cursor: pointer; transition: background-color .25s var(--m1-ease), color .25s var(--m1-ease), border-color .25s var(--m1-ease), transform .25s var(--m1-ease); }
.m1-btn:active { transform: translateY(1px); }
.m1-btn--primary { background: var(--m1-coral-ink); color: #fff; }
.m1-btn--primary:hover { background: #8f3c21; }
.m1-btn--caps { letter-spacing: .16em; text-transform: uppercase; font-size: .95rem; padding-inline: 2.4em; }
.m1-btn--line { border-color: var(--m1-coral-ink); color: var(--m1-ink); background: transparent; }
.m1-btn--line:hover { background: var(--m1-coral-wash); }
.m1-btn--line svg { color: var(--m1-coral-ink); }
.m1-btn--coral { background: var(--m1-coral); color: var(--m1-ink); }
.m1-btn--coral:hover { background: var(--m1-peach); }
.m1-btn svg { width: 20px; height: 20px; flex: none; }
.m1-btn--block { width: 100%; }

.m1-link { color: var(--m1-coral-ink); text-decoration: underline; text-decoration-color: currentColor; }
.m1-link::after { content: ""; display: inline-block; width: .55em; height: .55em; margin-left: .45em; border-top: 1px solid; border-right: 1px solid;
  transform: translateY(-.08em) rotate(45deg); transition: transform .25s var(--m1-ease); }
.m1-link:hover::after { transform: translate(.2em, -.08em) rotate(45deg); }
.m1-ink .m1-link { color: var(--m1-coral); }

/* ---------- header ---------- */
.m1-header { position: sticky; top: 0; z-index: 40; background: rgba(245, 247, 247, .94); background: color-mix(in srgb, var(--m1-paper) 94%, transparent);
  backdrop-filter: saturate(1.2) blur(8px); -webkit-backdrop-filter: saturate(1.2) blur(8px); border-bottom: 1px solid transparent;
  transition: border-color .3s var(--m1-ease); }
.m1-header.is-stuck { border-bottom-color: var(--m1-rule); }
.m1-header__row { display: flex; align-items: center; gap: clamp(16px, 2vw, 36px); min-height: var(--m1-header-h);
  width: min(100% - 2 * var(--m1-gutter), 1480px); margin-inline: auto; }
.m1-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.m1-brand img { width: 48px; height: 48px; }
.m1-brand span { font-size: 1.32rem; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; line-height: 1; padding-top: .12em; }
.m1-nav { margin-left: auto; }
.m1-nav ul { display: flex; gap: clamp(14px, 1.6vw, 30px); list-style: none; margin: 0; padding: 0; }
.m1-nav a { display: block; padding: 10px 0; font-size: .97rem; letter-spacing: .02em; text-decoration: none; white-space: nowrap;
  background: linear-gradient(var(--m1-coral), var(--m1-coral)) left calc(100% - 4px) / 0 1px no-repeat; transition: background-size .3s var(--m1-ease); }
.m1-nav a:hover { background-size: 100% 1px; }
.m1-header__actions { display: flex; align-items: center; gap: 14px; flex: none; }
.m1-header__tel { display: none; place-items: center; width: 44px; height: 44px; color: var(--m1-coral-ink); border-radius: 50%; }
.m1-header__tel svg { width: 22px; height: 22px; }
.m1-burger { display: none; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; border: 0; background: transparent; color: inherit;
  font: 400 1.05rem var(--m1-serif); cursor: pointer; }
.m1-burger svg { width: 24px; height: 24px; }

@media (max-width: 1260px) {
  .m1-nav { display: none; }
  .m1-burger, .m1-header__tel { display: flex; }
  .m1-header__actions { margin-left: auto; }
}
@media (max-width: 640px) {
  :root { --m1-header-h: 68px; }
  .m1-header__actions .m1-btn { display: none; }
  .m1-header__row { gap: 10px; }
  .m1-header__actions { gap: 2px; }
  .m1-brand { gap: 8px; }
  .m1-brand img { width: 38px; height: 38px; }
  .m1-brand span { font-size: .92rem; letter-spacing: .05em; }
}
/* narrow phones: the wordmark stacks on two lines so logo + phone + labelled Menu fit without a sideways scroll */
@media (max-width: 400px) { .m1-header .m1-brand span { white-space: normal; max-width: 6.2em; font-size: .86rem; line-height: 1.08; letter-spacing: .06em; } }

/* ---------- mobile drawer (studio standard, _reference/mobile-menu-pattern.md) ---------- */
.m1-scrim { position: fixed; inset: 0; z-index: 70; background: rgba(11, 11, 10, .55); opacity: 0; transition: opacity .3s var(--m1-ease); }
.m1-scrim.is-open { opacity: 1; }
.m1-mobile { position: fixed; inset: 0 0 0 auto; z-index: 80; width: min(88vw, 380px); display: flex; flex-direction: column;
  background: var(--m1-ink) url("../img/frieze-tile.webp") left bottom / auto 34px repeat-x; color: var(--m1-on-ink);
  transform: translateX(100%); visibility: hidden; transition: transform .35s var(--m1-ease), visibility 0s linear .35s; }
.m1-mobile.is-open { transform: none; visibility: visible; transition: transform .35s var(--m1-ease), visibility 0s; }
.m1-mobile__head { display: flex; align-items: center; justify-content: space-between; padding: 14px var(--m1-gutter); border-bottom: 1px solid var(--m1-rule-ink); }
.m1-mobile__head img { width: 40px; height: 40px; }
.m1-mobile__close { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: transparent; color: var(--m1-on-ink); cursor: pointer; }
.m1-mobile__close svg { width: 24px; height: 24px; }
.m1-mobile__nav { flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 6px var(--m1-gutter); }
.m1-mobile__link { display: block; padding: 15px 0; border-bottom: 1px solid rgba(245, 247, 247, .1); font-size: 1.125rem; text-decoration: none; }
.m1-mobile__group > summary { display: flex; justify-content: space-between; align-items: center; list-style: none; cursor: pointer; }
.m1-mobile__group > summary::-webkit-details-marker { display: none; }
.m1-mobile__group > summary svg { width: 18px; height: 18px; color: var(--m1-coral); transition: transform .25s var(--m1-ease); }
.m1-mobile__group[open] > summary svg { transform: rotate(180deg); }
.m1-mobile__sublink { display: block; padding: 12px 0 12px 16px; border-bottom: 1px solid rgba(245, 247, 247, .06); font-size: 1.0625rem;
  color: var(--m1-on-ink-soft); text-decoration: none; }
/* short screens (Safari's visible area on small iPhones): tighter rows so all eight links and the booking foot fit */
@media (max-height: 760px) { .m1-mobile__head { padding-block: 8px; } .m1-mobile__link { padding: 9px 0; font-size: 1.06rem; } .m1-mobile__sublink { padding: 8px 0 8px 16px; } .m1-mobile .m1-mobile__foot { padding: 10px var(--m1-gutter) 40px; gap: 8px; } .m1-mobile .m1-mobile__more { font-size: .88rem; } }
.m1-mobile__foot { display: grid; gap: 14px; padding: 20px var(--m1-gutter) 56px; }
.m1-mobile__tel { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 1.35rem; text-decoration: none; font-variant-numeric: tabular-nums; }
.m1-mobile__tel svg { width: 20px; height: 20px; color: var(--m1-coral); }
.m1-mobile__more { font-size: .95rem; color: var(--m1-on-ink-soft); text-align: center; }
.m1-mobile__more a { color: var(--m1-on-ink); }

/* ---------- hero ---------- */
/* A real Thai stretch leads: copy on black lacquer at left, Anton's photograph filling the right and
   feathered into the lacquer so no word ever sits on a face; the stencil frieze drops into the price band. */
.m1-hero { --m1-copy-w: 35rem; --m1-copy-edge: calc(max((100vw - 1320px) / 2, var(--m1-gutter)) + var(--m1-copy-w));
  position: relative; isolation: isolate; overflow: hidden; overflow: clip; display: grid; align-items: center;
  min-height: clamp(560px, calc(100svh - var(--m1-header-h) - 24px), 860px); background: var(--m1-ink); color: var(--m1-on-ink); }
.m1-hero__media { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: calc(var(--m1-copy-edge) - 1.5rem); z-index: -2;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%); mask-image: linear-gradient(90deg, transparent 0, #000 12%); }
.m1-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 22% 42%; }
.m1-hero::before { content: ""; position: absolute; inset: auto 0 0 0; height: 30%; z-index: -1; pointer-events: none;
  background: linear-gradient(0deg, rgba(11, 11, 10, .7) 0%, rgba(11, 11, 10, 0) 100%); }
.m1-hero__grid { padding-block: clamp(40px, 4.5vw, 80px) clamp(80px, 7vw, 120px); }
.m1-hero__copy { position: relative; max-width: var(--m1-copy-w); display: flex; flex-direction: column; align-items: flex-start; }
/* the copy doc's own order, and the rule for every hero here: tagline, H1, then BOOK NOW, then the intro and hours,
   so the primary action is inside the first screen on every device (see ../CLAUDE.md, "Hero CTA above the fold") */
.m1-hero__actions { order: 1; }
.m1-hero__intro { order: 2; }
.m1-hours { order: 3; }
.m1-tagline { font-style: italic; font-size: var(--m1-step-1); letter-spacing: .02em; color: var(--m1-peach); }
.m1-tagline-rule { display: flex; align-items: center; gap: 8px; width: 11.5rem; margin: 14px 0 24px; color: var(--m1-coral); }
.m1-tagline-rule::before, .m1-tagline-rule::after { content: ""; flex: 1; height: 1px; background: currentColor; }
.m1-tagline-rule svg { width: 22px; height: 14px; flex: none; }
.m1-hero h1 { font-size: clamp(2.5rem, 1.4rem + 2.5vw, 3.9rem); line-height: 1.04; letter-spacing: -.012em; max-width: 17ch; text-wrap: balance; }
.m1-h1-line { display: block; }
.m1-hero__intro { margin-top: 28px; max-width: 36em; font-size: 1.125rem; line-height: 1.62; color: var(--m1-on-ink-soft); }
.m1-hours { display: flex; align-items: center; gap: 12px; margin-top: 18px; font-size: 1.125rem; }
.m1-hours svg { width: 22px; height: 26px; flex: none; color: var(--m1-coral); }
.m1-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.m1-hero__actions .m1-btn { min-height: 56px; }
.m1-btn--ghost { border-color: rgba(245, 247, 247, .6); color: var(--m1-on-ink); background: rgba(11, 11, 10, .25); font-size: 1.08rem; font-variant-numeric: tabular-nums; }
.m1-btn--ghost:hover { background: rgba(245, 247, 247, .12); border-color: var(--m1-on-ink); }
.m1-btn--ghost svg { color: var(--m1-coral); }

/* one authored moment: the room settles into place as the page opens */
@media (prefers-reduced-motion: no-preference) {
  .m1-hero__media img { animation: m1-settle 2.6s var(--m1-ease) both; }
  .m1-hero__copy > * { animation: m1-rise 1.1s var(--m1-ease) both; }
  .m1-hero__copy > :nth-child(2) { animation-delay: .08s; } .m1-hero__copy > :nth-child(3) { animation-delay: .14s; }
  .m1-hero__copy > :nth-child(n+4) { animation-delay: .22s; }
  @keyframes m1-settle { from { transform: scale(1.07); filter: brightness(.7); } to { transform: none; filter: none; } }
  @keyframes m1-rise { from { opacity: .001; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}

/* tablets and phones: the photo is its own block (subject never under the copy), the headline overlaps its foot */
/* 1280 to 1439: a narrower copy column so the photo pane keeps both faces */
@media (min-width: 1280px) and (max-width: 1439px) { .m1-hero { --m1-copy-w: 32rem; } .m1-hero h1 { font-size: 3.3rem; } }
@media (max-width: 1279px) {
  .m1-hero { display: block; min-height: 0; }
  /* photo height follows the visible screen (svh = with browser toolbars showing), so Book now always lands in the first screen */
  .m1-hero__media { position: relative; inset: auto; height: clamp(150px, 36svh, 520px); width: 100%; -webkit-mask-image: none; mask-image: none; }
  .m1-hero__media img { object-position: 52% 40%; }
  .m1-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--m1-ink) 0%, rgba(11, 11, 10, .6) 12%, rgba(11, 11, 10, 0) 30%); }
  .m1-hero::before { display: none; }
  .m1-hero__grid { margin-top: -1.5rem; position: relative; padding-block: 0 88px; }
  .m1-hero h1 { font-size: clamp(2.2rem, 1.2rem + 4.4vw, 3rem); }
}
}

/* the flame: the logo's kranok flame as a stencil, a real Thai stretch in its heart, beside the massage menu on lacquer */
.m1-panel__head--flame { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: clamp(24px, 4vw, 56px); }
.m1-panel__head--flame > div { display: grid; gap: 10px; }
.m1-flame { position: relative; width: clamp(170px, 20vw, 260px); aspect-ratio: 1200 / 1350; margin: 0; }
@media (max-width: 640px) { .m1-panel__head--flame { grid-template-columns: 1fr; } .m1-flame { width: min(64vw, 240px); justify-self: center; order: -1; margin-bottom: 8px; } }
.m1-flame__photo { position: absolute; inset: 0; -webkit-mask: url("../img/flame-hole-mask.png") center / 100% 100% no-repeat;
  mask: url("../img/flame-hole-mask.png") center / 100% 100% no-repeat; }
/* placed for the real photo: therapist left, client right, both seated; the therapist's face sits in the widest part of the opening */
.m1-flame__photo img { position: absolute; left: 14%; top: 23%; width: 92%; height: auto; max-width: none; }
.m1-flame__frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.m1-flame figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* the frieze closes the hero and drops into the lacquer */
.m1-frieze { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: clamp(38px, 3.6vw, 62px);
  background: url("../img/frieze-tile.webp") left bottom / auto 100% repeat-x; }

/* the flame stencils in as it scrolls into view (browsers without scroll timelines show it finished) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .m1-flame__frame { animation: m1-stencil linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; }
    @keyframes m1-stencil { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
  }
}

@media (max-width: 640px) {
  .m1-hero__media { height: clamp(150px, 32svh, 340px); }
  /* copy starts below the photo on phones: the short photo is too bright under an overlapping tagline */
  .m1-hero__grid { margin-top: 0; padding-top: 12px; }
  .m1-tagline { font-size: clamp(.86rem, .55rem + 1.45vw, 1.05rem); letter-spacing: .01em; }
  .m1-tagline-rule { margin: 10px 0 16px; }
}
@media (max-width: 480px) {
  .m1-hero__actions .m1-btn { width: 100%; }
}
/* phones held sideways (about 340px of visible height): a compact header and the split layout, photo right,
   so BOOK NOW still lands in the first screen */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1279px) {
  :root { --m1-header-h: 60px; }
  .m1-header__row { min-height: 60px; }
  .m1-hero { display: grid; align-items: start; }
  .m1-hero__media { position: absolute; top: 0; right: 0; bottom: 0; left: 50%; height: auto; width: auto;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%); mask-image: linear-gradient(90deg, transparent 0, #000 18%); }
  .m1-hero__media::after { display: none; }
  .m1-hero__media img { object-position: 58% 38%; }
  .m1-hero__grid { margin-top: 0; padding-block: 16px 64px; }
  .m1-hero__copy { max-width: 50%; }
  .m1-tagline { font-size: .95rem; }
  .m1-tagline-rule { margin: 8px 0 10px; }
  .m1-hero h1 { font-size: clamp(1.6rem, 1rem + 2.4vw, 2.1rem); }
  .m1-hero__actions { margin-top: 16px; gap: 10px; }
  .m1-hero__actions .m1-btn { width: auto; min-height: 48px; padding-inline: 1.4em; }
}

/* ---------- lacquer band ---------- */
.m1-ink { position: relative; background: var(--m1-ink); color: var(--m1-on-ink); isolation: isolate; }
.m1-ornament { position: absolute; top: clamp(70px, 7vw, 110px); z-index: -1; width: clamp(150px, 15vw, 270px); pointer-events: none; }
.m1-ornament--l { left: 0; }
.m1-ornament--r { right: 0; }
@media (max-width: 1100px) { .m1-ornament { display: none; } }

/* ---------- services: Massages / Facials / Spa Suites ----------
   The three tabs are a sticky bar over three stacked sections, so every H2, price and photo is on the page
   (nothing hidden behind a tab) and the bar still tells you where you are and jumps between them. */
.m1-svcnav { position: sticky; top: var(--m1-header-h); z-index: 30; background: var(--m1-ink); border-bottom: 1px solid var(--m1-rule-ink); }
.m1-svcnav__inner { display: flex; justify-content: center; width: min(100% - 2 * var(--m1-gutter), 1000px); margin-inline: auto; }
.m1-svcnav a { position: relative; padding: 14px clamp(14px, 3vw, 40px) 16px; font-size: var(--m1-step-2); line-height: 1.1; text-decoration: none; color: var(--m1-on-ink-soft);
  transition: color .25s var(--m1-ease); white-space: nowrap; }
.m1-svcnav a + a::before { content: ""; position: absolute; left: 0; top: 28%; height: 44%; width: 1px; background: var(--m1-rule-ink); }
.m1-svcnav a::after { content: ""; position: absolute; left: clamp(14px, 3vw, 40px); right: clamp(14px, 3vw, 40px); bottom: 6px; height: 3px; border-radius: 2px;
  background: var(--m1-coral); transform: scaleX(0); transition: transform .35s var(--m1-ease); }
.m1-svcnav a:hover, .m1-svcnav a[aria-current="true"] { color: var(--m1-on-ink); }
.m1-svcnav a[aria-current="true"]::after { transform: none; }
.m1-svc { padding-block: clamp(56px, 6vw, 96px) var(--m1-section); }
.m1-svc__inner { width: min(100% - 2 * var(--m1-gutter), 1000px); margin-inline: auto; }
.m1-svc__split { width: min(100% - 2 * var(--m1-gutter), 1180px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .72fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
@media (max-width: 900px) { .m1-svc__split { grid-template-columns: 1fr; } }

/* facials on paper: the same ruled menu, re-inked for a light ground */
.m1-svc--paper { background: var(--m1-paper); color: var(--m1-ink); }
.m1-svc--paper .m1-panel__head p { color: var(--m1-ink-soft); }
.m1-svc--paper .m1-list__cols { border-bottom-color: var(--m1-ink); }
.m1-svc--paper .m1-list__cols .m1-list__title svg { color: var(--m1-coral-ink); }
.m1-svc--paper .m1-item { border-bottom-color: var(--m1-rule); }
.m1-svc--paper .m1-price { color: var(--m1-coral-ink); }
.m1-svc--paper .m1-item p { color: var(--m1-ink-soft); }
.m1-svc--paper .m1-escape { width: min(100% - 2 * var(--m1-gutter), 1000px); margin-inline: auto; }
.m1-photostack { position: sticky; top: calc(var(--m1-header-h) + 88px); display: grid; grid-template-columns: 1fr .62fr; grid-template-rows: auto auto; gap: 12px; }
.m1-photostack img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
.m1-photostack__a { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
.m1-photostack__b { grid-column: 2; aspect-ratio: 4 / 5; margin-top: -22%; border: 6px solid var(--m1-paper); border-radius: 6px; }
@media (max-width: 900px) { .m1-photostack { position: static; order: -1; } }

/* spa suites: the suite itself at full width, the couple beside the menu */
.m1-svc--suites { padding-top: 0; }
.m1-suitehero { margin: 0 0 clamp(48px, 5vw, 80px); }
.m1-suitehero img { width: 100%; height: clamp(280px, 46vw, 620px); object-fit: cover; object-position: 50% 62%; }
.m1-suitecouple { margin: 6px 0 0; }
.m1-suitecouple img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 40% 50%; border-radius: 220px 220px 4px 4px; }
@media (max-width: 900px) { .m1-suitecouple img { aspect-ratio: 3 / 2; border-radius: 4px; } }

/* add-ons: the list beside the stones it offers */
.m1-addons { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .5fr); gap: clamp(28px, 4vw, 56px); align-items: end; }
.m1-addons__photo { margin: 0 0 4px; }
.m1-addons__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; }
.m1-addons .m1-list { --col: clamp(4.6rem, 8vw, 6.5rem); }
@media (max-width: 900px) { .m1-addons { grid-template-columns: 1fr; } .m1-addons__photo img { aspect-ratio: 3 / 2; } }

/* gallery band: Anton's photographs and one silent loop, no copy */
.m1-gallery { display: grid; grid-template-columns: 1.05fr 1.5fr 1fr; grid-template-rows: clamp(200px, 22vw, 330px) clamp(200px, 22vw, 330px); gap: 4px; background: var(--m1-ink); padding: 4px; }
.m1-gallery__cell { margin: 0; overflow: hidden; background: var(--m1-ink-2); }
.m1-gallery__cell img, .m1-gallery__cell video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--m1-ease); }
@media (hover: hover) { .m1-gallery__cell:hover img { transform: scale(1.04); } }
.m1-gallery__cell--video { grid-row: 1 / 3; }
.m1-gallery__cell--room { grid-column: 2; grid-row: 1; }
.m1-gallery__cell--oils { grid-column: 3; grid-row: 1; }
.m1-gallery__cell--neck { grid-column: 3; grid-row: 2; }
.m1-gallery__cell--thai { grid-column: 2; grid-row: 2; }
.m1-gallery__cell--room img { object-position: 60% 60%; }
@media (max-width: 760px) {
  .m1-gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 300px 170px 170px; }
  .m1-gallery__cell--video { grid-column: 1; grid-row: 1 / 3; }
  .m1-gallery__cell--room { grid-column: 2; grid-row: 1; }
  .m1-gallery__cell--oils { grid-column: 2; grid-row: 2; }
  .m1-gallery__cell--thai { grid-column: 1; grid-row: 3; }
  .m1-gallery__cell--neck { grid-column: 2; grid-row: 3; }
}

.m1-panel__head { display: grid; gap: 10px; margin-bottom: 26px; }
.m1-panel__head h2 { font-size: var(--m1-step-3); }
.m1-panel__head p { color: var(--m1-on-ink-soft); max-width: 44em; }
.m1-panel__head .m1-note { color: var(--m1-peach); font-style: italic; }

/* ruled list: name column + fixed 60 / 90 / 120 columns */
.m1-list { --cols: 3; --col: clamp(4.6rem, 10vw, 8.5rem); }
.m1-list--one { --cols: 1; }
.m1-list__cols, .m1-item__line { display: grid; grid-template-columns: minmax(0, 1fr) repeat(var(--cols), var(--col)); align-items: baseline; column-gap: 8px; }
.m1-list__cols { padding: 0 0 12px 38px; border-bottom: 1px solid var(--m1-on-ink); }
.m1-list__cols .m1-list__title { line-height: 1.12; display: flex; align-items: center; gap: 12px; margin-left: -38px; font-size: var(--m1-step-2); }
.m1-list__cols .m1-list__title svg { width: 22px; height: 26px; color: var(--m1-coral); flex: none; }
.m1-list__cols span { text-align: center; font-size: var(--m1-step--1); letter-spacing: .14em; text-transform: uppercase; }
.m1-item { padding: 18px 0 20px 38px; border-bottom: 1px solid var(--m1-rule-ink); }
.m1-item h3 { font-size: var(--m1-step-1); line-height: 1.25; }
.m1-price { text-align: center; color: var(--m1-coral); font-size: var(--m1-step-1); font-variant-numeric: tabular-nums lining-nums; }
.m1-price--none { color: var(--m1-on-ink-soft); }
/* descriptions stay in the name column, clear of the price columns (on phones they run full width below the row) */
.m1-item p { margin-top: 8px; max-width: min(46em, calc(100% - var(--cols) * (var(--col) + 8px) - 24px)); font-size: 1rem; line-height: 1.6; color: var(--m1-on-ink-soft); }
@media (max-width: 640px) { .m1-item p { max-width: none; } }
.m1-item__where { display: block; margin-top: 6px; color: var(--m1-peach); font-style: italic; }
.m1-list__after { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px 24px; padding: 20px 0 0 38px; }
.m1-list__after em { color: var(--m1-on-ink-soft); }
.m1-list + .m1-list { margin-top: clamp(48px, 5vw, 72px); }
.m1-subhead { margin: clamp(56px, 6vw, 88px) 0 22px; font-size: var(--m1-step-3); }

@media (max-width: 640px) {
  .m1-list { --col: 3.9rem; }
  .m1-list__cols, .m1-item, .m1-list__after { padding-left: 0; }
  .m1-list__cols .m1-list__title { margin-left: 0; font-size: 1.3rem; }
  .m1-list__cols .m1-list__title svg { display: none; }
  .m1-list__cols span { font-size: .72rem; letter-spacing: .08em; }
  .m1-price { font-size: 1.06rem; }
  .m1-item__line { column-gap: 4px; }
  .m1-svcnav a { font-size: 1.1rem; padding: 13px 12px 15px; }
  .m1-svcnav a::after { left: 12px; right: 12px; }
}

/* "Plan Your Escape" CTA band: styled text, never a heading */
.m1-escape { display: grid; justify-items: center; gap: 14px; margin-top: clamp(48px, 5vw, 72px); text-align: center; }
.m1-escape__mark { display: flex; align-items: center; gap: 10px; width: 9rem; color: var(--m1-coral); }
.m1-escape__mark::before, .m1-escape__mark::after { content: ""; flex: 1; height: 1px; background: currentColor; }
.m1-escape__mark svg { width: 22px; height: 14px; flex: none; }
.m1-escape p { font-size: var(--m1-step-2); line-height: 1.3; }
.m1-escape p em { display: block; color: var(--m1-coral); }
.m1-escape--paper p em { color: var(--m1-coral-ink); }
.m1-escape--paper .m1-escape__mark { color: var(--m1-coral-ink); }

/* ---------- promo strip (offers, styled text) ---------- */
.m1-offers { background: var(--m1-coral-wash); border-bottom: 1px solid rgba(168, 73, 42, .18); }
.m1-offers__grid { display: grid; grid-template-columns: 1fr 1fr; }
.m1-offer { padding: clamp(32px, 4vw, 52px) clamp(0px, 3vw, 48px); }
.m1-offer:first-child { padding-left: 0; }
.m1-offer + .m1-offer { border-left: 1px solid rgba(168, 73, 42, .25); }
.m1-offer__title { font-size: var(--m1-step-2); line-height: 1.32; }
.m1-offer__title strong { font-weight: 400; color: var(--m1-coral-ink); }
.m1-offer p + p { margin-top: 10px; }
.m1-offer__call { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.m1-offer__call svg { width: 20px; height: 20px; color: var(--m1-coral-ink); }
.m1-offer ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 4px; }
.m1-offer ul a { color: var(--m1-ink); }
@media (max-width: 820px) {
  .m1-offers__grid { grid-template-columns: 1fr; }
  .m1-offer, .m1-offer:first-child { padding-inline: 0; }
  .m1-offer + .m1-offer { border-left: 0; border-top: 1px solid rgba(168, 73, 42, .25); }
}

/* ---------- section heads on paper ---------- */
.m1-section { padding-block: var(--m1-section); }
.m1-section__head { display: grid; justify-items: center; gap: 16px; text-align: center; margin-bottom: clamp(36px, 4vw, 60px); }
.m1-section__head h2 { font-size: var(--m1-step-3); }
.m1-section__head .m1-flame-mark { width: 26px; height: 30px; color: var(--m1-coral-ink); }

/* reviews: Trustindex mounts here */
.m1-reviews__slot { min-height: 220px; display: grid; place-items: center; border: 1px dashed rgba(168, 73, 42, .45); border-radius: 6px;
  color: var(--m1-coral-ink); font-style: italic; background: rgba(231, 131, 91, .04); }
.m1-reviews .m1-escape { margin-top: clamp(56px, 6vw, 88px); }

/* ---------- locations ---------- */
.m1-locations { position: relative; border-top: 1px solid var(--m1-rule); overflow: hidden; overflow: clip; isolation: isolate; }
.m1-locations .m1-ornament { top: auto; bottom: 0; width: clamp(120px, 11vw, 190px); }
.m1-places { display: grid; grid-template-columns: repeat(3, 1fr); }
.m1-place { position: relative; padding: 8px clamp(20px, 3vw, 44px) 12px; }
.m1-place + .m1-place { border-left: 1px solid var(--m1-rule); }
.m1-place__no { display: block; width: 26px; height: 30px; margin-bottom: 18px; color: var(--m1-coral-ink); }
.m1-place h3 { font-size: var(--m1-step-2); line-height: 1.15; }
.m1-place h3 a { text-decoration: none; background: linear-gradient(var(--m1-coral), var(--m1-coral)) left 100% / 0 1px no-repeat; transition: background-size .35s var(--m1-ease); }
.m1-place h3 a:hover { background-size: 100% 1px; }
.m1-place h3 a::after { content: ""; position: absolute; inset: 0; }
.m1-place address { margin-top: 14px; font-style: normal; color: var(--m1-ink-soft); }
.m1-place__tel { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 1.3rem;
  font-variant-numeric: tabular-nums; text-decoration: none; }
.m1-place__tel svg { width: 20px; height: 20px; color: var(--m1-coral-ink); }
.m1-place__tel:hover { text-decoration: underline; }
.m1-place__note { margin-top: 12px; font-style: italic; color: var(--m1-coral-ink); }
@media (max-width: 860px) {
  .m1-places { grid-template-columns: 1fr; }
  .m1-place { padding: 28px 0; }
  .m1-place + .m1-place { border-left: 0; border-top: 1px solid var(--m1-rule); }
}

/* ---------- contact (lacquer) ---------- */
.m1-contact { padding-block: var(--m1-section); overflow: hidden; overflow: clip; }
.m1-contact__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 100px); }
.m1-contact h2 { font-size: var(--m1-step-3); margin-bottom: 28px; }
.m1-contact h4 { font-size: var(--m1-step-2); margin-bottom: 18px; }
.m1-form { display: grid; gap: 22px; }
.m1-field { display: grid; gap: 6px; }
.m1-field label { font-size: var(--m1-step--1); letter-spacing: .14em; text-transform: uppercase; color: var(--m1-on-ink-soft); }
.m1-field input { width: 100%; min-height: 48px; padding: 8px 2px; border: 0; border-bottom: 1px solid var(--m1-rule-ink); border-radius: 0;
  background: transparent; color: var(--m1-on-ink); font: 400 1.125rem var(--m1-serif); caret-color: var(--m1-coral); transition: border-color .25s var(--m1-ease); }
.m1-field input:hover { border-bottom-color: var(--m1-on-ink-soft); }
.m1-field input:focus { outline: none; border-bottom-color: var(--m1-coral); box-shadow: 0 1px 0 var(--m1-coral); }
.m1-field input:user-invalid { border-bottom-color: #ff9b85; }
.m1-field__err { min-height: 1.2em; font-size: .9rem; color: #ffb3a3; }
.m1-form .m1-btn { justify-self: start; min-width: 11rem; }
.m1-form__status { font-style: italic; color: var(--m1-peach); }
.m1-contact__info { display: grid; gap: 22px; align-content: start; color: var(--m1-on-ink-soft); }
.m1-contact__info strong { display: block; font-weight: 400; color: var(--m1-on-ink); margin-bottom: 6px; }
.m1-contact__info ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.m1-contact__info a { color: var(--m1-on-ink); font-variant-numeric: tabular-nums; }
.m1-contact__hours { padding-top: 22px; border-top: 1px solid var(--m1-rule-ink); }
.m1-contact__hours h4 { margin-bottom: 8px; }
.m1-contact__close { grid-column: 1 / -1; margin-top: clamp(24px, 3vw, 40px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--m1-rule-ink);
  font-size: var(--m1-step-2); text-align: center; color: var(--m1-on-ink); }
@media (max-width: 860px) { .m1-contact__grid { grid-template-columns: 1fr; } }
.m1-contact .m1-frieze-flip { position: absolute; left: 0; right: 0; top: 0; height: 34px; transform: scaleY(-1); opacity: .9;
  background: url("../img/frieze-tile.webp") left bottom / auto 100% repeat-x; }

/* ---------- connect / footer ---------- */
.m1-connect { padding-block: clamp(56px, 6vw, 88px) clamp(40px, 4vw, 56px); }
.m1-connect__grid { display: grid; grid-template-columns: auto 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.m1-connect h2 { font-size: var(--m1-step-2); margin-bottom: 18px; }
.m1-social { display: flex; gap: 12px; list-style: none; margin: 0; padding: 0; }
.m1-social a { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--m1-rule); border-radius: 50%; color: var(--m1-ink);
  transition: background-color .25s var(--m1-ease), color .25s var(--m1-ease), border-color .25s var(--m1-ease); }
.m1-social a:hover { background: var(--m1-coral-ink); border-color: var(--m1-coral-ink); color: #fff; }
.m1-social svg { width: 20px; height: 20px; }
.m1-articles h3 { font-size: var(--m1-step-1); margin-bottom: 14px; }
.m1-footer { position: relative; padding-block: 28px 64px; border-top: 1px solid var(--m1-rule); }
.m1-footer::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30px; background: url("../img/frieze-tile.webp") left bottom / auto 100% repeat-x; }
.m1-footer .m1-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.m1-footer .m1-brand span { font-size: 1.05rem; }
.m1-footer nav ul { display: flex; flex-wrap: wrap; gap: 6px 22px; list-style: none; margin: 0; padding: 0; font-size: .95rem; }
.m1-footer nav a { text-decoration: none; }
.m1-footer nav a:hover { text-decoration: underline; }
@media (max-width: 760px) { .m1-connect__grid { grid-template-columns: 1fr; } }

/* ---------- pre-publish gates (deleted at launch) ---------- */
.m1-gate { display: inline; padding: 0 .3em; border: 1px dashed #b26a00; border-radius: 3px; background: rgba(255, 196, 0, .12); color: #6b3d00;
  font-style: normal; font-size: .82em; }
.m1-ink .m1-gate, .m1-ink .m1-gate-box { border-color: #ffc861; background: rgba(255, 200, 97, .1); color: #ffd98f; }
.m1-gate-box { margin-top: 16px; padding: 14px 16px; border: 1px dashed #b26a00; border-radius: 6px; background: rgba(255, 196, 0, .08); color: #6b3d00; font-size: .95rem; }
html.is-presenting .m1-gate, html.is-presenting .m1-gate-box { display: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* transitions off, not shortened: a .01ms "all" transition on every element made children briefly inherit the drawer's
     hidden visibility, so focus() could not land in the menu (found in WebKit, 2026-10-24) */
  *, *::before, *::after { transition: none !important; animation: none !important; }
}