/* Massage 1 Thai Spa: "Bright" (client direction, 2026-10-27)
   Anton's brief: white grounds, the live site's fresh clean look and the Hydrate Facial flyer as references, his exact
   logo, soft peach/coral tones (no rust), light typography, the spa's own photos and film given room.
   Tokens first, then chrome, then one block per homepage section (each ports to one WP block). */

@font-face {
  font-family: "Marcellus";
  src: url("../fonts/marcellus-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+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Urbanist";
  src: url("../fonts/urbanist-latin.woff2") format("woff2");
  font-weight: 300 700; 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+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Urbanist";
  src: url("../fonts/urbanist-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+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* grounds: white first, the flyer's warm white and a peach blush for the few bands that need separating */
  --m1-white: #ffffff;
  --m1-shell: #fbf6f2;          /* the Hydrate Facial flyer's ground */
  --m1-blush: #fdeee6;          /* offers strip */

  /* ink, warm rather than black */
  --m1-ink: #2e2724;            /* headings, 14.6:1 on white */
  --m1-text: #5b514c;           /* body, 7.6:1 on white, 7.1:1 on shell */
  --m1-text-soft: #786c66;      /* secondary, 5.1:1 on white, 4.7:1 on shell */

  /* the logo's tones */
  --m1-coral: #e7835b;          /* brand coral: button fills, pins, rules (ink text on it 5.5:1) */
  --m1-peach: #e9967a;          /* brand peach: hover fill */
  --m1-coral-text: #dc6650;     /* the logo's salmon coral as LARGE text only (24px+, or 19px+ bold): 3.5:1 white, 3.2:1 shell, 3.1:1 blush */
  --m1-rule-peach: #f2b8a0;     /* the coral rule under the logo's lettering */
  --m1-rule: rgba(46, 39, 36, .12);
  --m1-focus: #b9532e;          /* focus ring only, 4.9:1 on white */

  /* type */
  --m1-display: "Marcellus", Georgia, serif;
  --m1-sans: "Urbanist", "Segoe UI", system-ui, sans-serif;
  --m1-step--1: .875rem;
  --m1-step-0: 1.0625rem;
  --m1-step-1: 1.3rem;
  --m1-step-2: clamp(1.4rem, 1.15rem + .8vw, 1.75rem);
  --m1-step-3: clamp(1.9rem, 1.35rem + 1.9vw, 2.75rem);
  --m1-step-4: clamp(2.45rem, 1.5rem + 2.7vw, 4.1rem);

  /* space and layout */
  --m1-gutter: clamp(16px, 4vw, 56px);
  --m1-max: 1240px;
  --m1-section: clamp(72px, 9vw, 136px);
  --m1-radius: 6px;
  --m1-radius-pill: 999px;
  --m1-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --m1-header-h: 112px;
  --m1-svcnav-h: 62px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--m1-header-h) + var(--m1-svcnav-h) + 8px);
  scrollbar-color: var(--m1-peach) var(--m1-shell); }
body { margin: 0; background: var(--m1-white); color: var(--m1-text); font: 400 var(--m1-step-0)/1.7 var(--m1-sans);
  -webkit-font-smoothing: antialiased; caret-color: var(--m1-coral); }
img, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { margin: 0; font-family: var(--m1-display); font-weight: 400; line-height: 1.15; color: var(--m1-ink); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-underline-offset: .24em; text-decoration-thickness: 1px; }
::selection { background: #fbd6c4; color: var(--m1-ink); }
:focus-visible { outline: 2px solid var(--m1-focus); outline-offset: 3px; border-radius: 4px; }
.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; }
figure { margin: 0; }

/* ---------- buttons: the flyer's coral pill; ink text because white on the brand coral is 2.7:1 (the live site does the same) ---------- */
.m1-btn { display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 48px; padding: .8em 2em;
  border-radius: var(--m1-radius-pill); border: 1.5px solid transparent; font: 600 .875rem/1 var(--m1-sans); letter-spacing: .14em;
  text-transform: uppercase; text-decoration: none; white-space: nowrap; 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--coral { background: var(--m1-coral); color: var(--m1-ink); }
.m1-btn--coral:hover { background: var(--m1-peach); }
.m1-btn--line { border-color: var(--m1-coral); color: var(--m1-ink); background: var(--m1-white); letter-spacing: .06em; text-transform: none;
  font-size: 1rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.m1-btn--line:hover { background: var(--m1-blush); }
.m1-btn--line svg { color: var(--m1-coral); }
.m1-btn--lg { min-height: 56px; padding-inline: 2.3em; }
.m1-btn svg { width: 20px; height: 20px; flex: none; }
.m1-btn--block { width: 100%; }

/* text link: ink words on a coral underline that thickens on hover */
.m1-link { color: var(--m1-ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--m1-coral); text-decoration-thickness: 2px;
  text-underline-offset: .3em; transition: text-decoration-thickness .2s var(--m1-ease), text-underline-offset .2s var(--m1-ease); }
.m1-link:hover { text-decoration-thickness: 3px; text-underline-offset: .22em; }

/* ---------- header ---------- */
.m1-header { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(1.1) blur(8px); -webkit-backdrop-filter: saturate(1.1) blur(8px); border-bottom: 1px solid transparent;
  transition: border-color .3s var(--m1-ease), box-shadow .3s var(--m1-ease); }
.m1-header.is-stuck { border-bottom-color: var(--m1-rule); box-shadow: 0 6px 24px -18px rgba(46, 39, 36, .35); }
.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), 1400px); margin-inline: auto; }
.m1-brand { display: block; flex: none; text-decoration: none; }
.m1-brand img { height: 96px; width: auto; }   /* the lockup's lettering reads at about 11px caps */
.m1-nav { margin-left: auto; }
.m1-nav ul { display: flex; gap: clamp(16px, 1.7vw, 30px); list-style: none; margin: 0; padding: 0; }
.m1-nav a { display: block; padding: 10px 0; font-size: .8rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--m1-ink); text-decoration: none; white-space: nowrap;
  background: linear-gradient(var(--m1-coral), var(--m1-coral)) left calc(100% - 4px) / 0 1.5px no-repeat; transition: background-size .3s var(--m1-ease); }
.m1-nav a:hover { background-size: 100% 1.5px; }
.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-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: var(--m1-ink);
  font: 500 .8rem var(--m1-sans); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.m1-burger svg { width: 24px; height: 24px; }

@media (max-width: 1240px) {
  .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: 84px; --m1-svcnav-h: 54px; }
  .m1-header__actions .m1-btn { display: none; }
  .m1-header__row { gap: 10px; }
  .m1-header__actions { gap: 2px; }
  .m1-brand img { height: 72px; }
}

/* ---------- mobile drawer (studio standard, _reference/mobile-menu-pattern.md), re-skinned white ---------- */
.m1-scrim { position: fixed; inset: 0; z-index: 70; background: rgba(46, 39, 36, .38); 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-white); color: var(--m1-ink); box-shadow: -18px 0 48px -24px rgba(46, 39, 36, .35);
  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: 10px var(--m1-gutter); border-bottom: 1px solid var(--m1-rule); }
.m1-mobile__head img { height: 52px; width: auto; }
.m1-mobile__close { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: transparent; color: var(--m1-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 var(--m1-rule); font-size: 1.125rem; font-weight: 500; 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(46, 39, 36, .07); font-size: 1.0625rem;
  color: var(--m1-text); 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: 6px; } .m1-mobile__head img { height: 44px; } .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) 28px; gap: 8px; } .m1-mobile .m1-mobile__more { font-size: .88rem; } }
.m1-mobile__foot { display: grid; gap: 14px; padding: 20px var(--m1-gutter) 40px; background: var(--m1-shell); border-top: 1px solid var(--m1-rule); }
.m1-mobile__tel { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 1.4rem; font-weight: 500; 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-text); text-align: center; }
.m1-mobile__more a { color: var(--m1-ink); }

/* ---------- hero: copy on white, the spa's own film full bleed to the right, fading into white ---------- */
/* Order for every hero here: tagline, H1, BOOK NOW, then the intro and hours, so the primary action is inside the
   first screen on every device (../CLAUDE.md, "Hero CTA above the fold").
   The film starts just past the copy column and runs to the screen edge at full hero height. Its left edge fades
   into the white ground (a mask, not an overlay), so every word sits on pure white and nothing darkens the film.
   Sized from the text column, the box is about the source's own 1080px at 1440 to 1920, so it is never upscaled. */
.m1-hero { --m1-copy-w: 34rem; --m1-col-edge: max((100vw - var(--m1-max)) / 2, var(--m1-gutter));
  position: relative; isolation: isolate; overflow: hidden; overflow: clip; background: var(--m1-white); }
.m1-hero__grid { display: grid; align-items: center; min-height: min(calc(100svh - var(--m1-header-h)), 900px);
  padding-block: clamp(32px, 4vw, 64px) clamp(48px, 5vw, 88px); }
.m1-hero__copy { position: relative; max-width: var(--m1-copy-w); }
.m1-hero__film { position: absolute; z-index: -1; inset: 0 0 0 calc(var(--m1-col-edge) + var(--m1-copy-w) + 1.5rem);
  background: var(--m1-shell) url("../img/hero-film-poster.webp") 34% 40% / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .6) 3vw, #000 7vw);
          mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .6) 3vw, #000 7vw); }
.m1-hero__film video { width: 100%; height: 100%; object-fit: cover; object-position: 34% 40%; }
.m1-tagline { font-family: var(--m1-display); font-size: var(--m1-step-1); line-height: 1.3; color: var(--m1-text); }
/* the tagline joins the H1 as the brand line, never a label above it */
.m1-tagline { margin-bottom: 14px; }
.m1-hero h1 { font-size: var(--m1-step-4); line-height: 1.06; letter-spacing: -.005em; max-width: 14ch; }
.m1-h1-line { display: block; }
.m1-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(26px, 2.6vw, 36px); }
.m1-hero__intro { margin-top: clamp(26px, 2.6vw, 34px); max-width: 30em; font-size: 1.125rem; line-height: 1.7; }
.m1-hours { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 1rem; font-weight: 500; color: var(--m1-ink); }
.m1-hours svg { width: 20px; height: 20px; flex: none; color: var(--m1-coral); }

/* one authored moment: the film surfaces out of the white as the page opens, the copy settles in beside it */
@media (prefers-reduced-motion: no-preference) {
  .m1-hero__film { animation: m1-surface 1.6s var(--m1-ease) both; }
  .m1-hero__film video { animation: m1-settle 2.6s var(--m1-ease) both; }
  .m1-hero__copy > * { animation: m1-rise 1s var(--m1-ease) both; }
  .m1-hero__copy > :nth-child(2) { animation-delay: .06s; } .m1-hero__copy > :nth-child(3) { animation-delay: .12s; }
  .m1-hero__copy > :nth-child(n+4) { animation-delay: .2s; }
  @keyframes m1-surface { from { opacity: 0; filter: blur(10px); } to { opacity: 1; filter: none; } }
  @keyframes m1-settle { from { transform: scale(1.06); } to { transform: none; } }
  @keyframes m1-rise { from { opacity: .001; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}

/* landscape tablets and small laptops: a narrower copy column, so the film keeps most of the width */
@media (min-width: 900px) and (max-width: 1239px) { .m1-hero { --m1-copy-w: 30rem; } }

/* phones and upright tablets: the film is a full-width band at the top whose foot fades into the white,
   sized from the visible height (svh) so BOOK NOW still lands in the first screen; the copy follows */
@media (max-width: 899px), (max-width: 1239px) and (orientation: portrait) {
  .m1-hero__grid { display: block; min-height: 0; padding-block: 0 64px; }
  .m1-hero__film { position: relative; inset: auto; z-index: auto; width: 100vw; margin-left: calc(50% - 50vw);
    height: clamp(180px, 35svh, 460px); background-position: 40% 28%;
    -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent);
            mask-image: linear-gradient(180deg, #000 72%, transparent); }
  .m1-hero__film video { object-position: 40% 28%; }
  .m1-hero__copy { max-width: 40rem; margin-top: 4px; }
  .m1-tagline { font-size: 1.08rem; margin-bottom: 10px; }
  .m1-hero h1 { font-size: clamp(2rem, 1.2rem + 4.2vw, 3rem); max-width: 16ch; }
  .m1-hero__actions { margin-top: 20px; gap: 10px; }
  .m1-hero__intro { margin-top: 24px; font-size: 1.0625rem; }
}
@media (max-width: 480px) {
  .m1-hero__actions .m1-btn { width: 100%; min-height: 52px; }
}
/* phones held sideways (about 340px of visible height): back to copy left, film right */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1239px) {
  :root { --m1-header-h: 64px; }
  .m1-header__row { min-height: 64px; }
  .m1-brand img { height: 50px; }
  .m1-hero { --m1-copy-w: 22rem; }
  .m1-hero__copy { max-width: var(--m1-copy-w); margin-top: 0; }
  .m1-hero__intro { margin-top: 16px; font-size: .95rem; }
  .m1-hero__grid { display: grid; min-height: calc(100svh - var(--m1-header-h)); padding-block: 12px 32px; }
  .m1-hero__film { position: absolute; z-index: -1; width: auto; height: auto; margin: 0; inset: 0 0 0 calc(var(--m1-col-edge) + var(--m1-copy-w) + 1rem);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12vw); mask-image: linear-gradient(90deg, transparent 0, #000 12vw); }
  .m1-tagline { font-size: .95rem; margin-bottom: 6px; }
  .m1-hero h1 { font-size: clamp(1.6rem, 1rem + 2.4vw, 2.1rem); }
  .m1-hero__actions { margin-top: 14px; }
  .m1-hero__actions .m1-btn { width: auto; min-height: 48px; padding-inline: 1.4em; }
}

/* ---------- 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. */
.m1-svcnav { position: sticky; top: var(--m1-header-h); z-index: 30; background: rgba(255, 255, 255, .97); border-block: 1px solid var(--m1-rule); }
.m1-svcnav__inner { display: flex; justify-content: center; width: min(100% - 2 * var(--m1-gutter), 1000px); margin-inline: auto; }
.m1-svcnav a { position: relative; display: flex; align-items: center; min-height: var(--m1-svcnav-h); padding: 0 clamp(14px, 3vw, 40px);
  font-family: var(--m1-display); font-size: var(--m1-step-2); line-height: 1; text-decoration: none; color: var(--m1-text-soft);
  transition: color .25s var(--m1-ease); white-space: nowrap; }
.m1-svcnav a::after { content: ""; position: absolute; left: clamp(14px, 3vw, 40px); right: clamp(14px, 3vw, 40px); bottom: -1px; height: 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-ink); }
.m1-svcnav a[aria-current="true"]::after { transform: none; }

.m1-svc { padding-block: clamp(64px, 7vw, 112px) var(--m1-section); }
.m1-svc--shell { background: var(--m1-shell); }
.m1-svc__split { width: min(100% - 2 * var(--m1-gutter), var(--m1-max)); margin-inline: auto; display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .74fr); gap: clamp(40px, 6vw, 104px); align-items: start; }
@media (max-width: 900px) { .m1-svc__split { grid-template-columns: 1fr; } }

/* photographs: clean and square-ish, a 6px corner, no frames, no borders, nothing laid over them */
.m1-photo img, .m1-photopair img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--m1-radius); }
.m1-photo--sticky { position: sticky; top: calc(var(--m1-header-h) + var(--m1-svcnav-h) + 32px); }
.m1-svc .m1-photo:not(.m1-photo--end) img { aspect-ratio: 4 / 5; object-position: 62% 50%; }
.m1-photopair { display: grid; gap: 16px; }
.m1-photopair img:first-child { aspect-ratio: 3 / 2; }
.m1-photopair img:last-child { aspect-ratio: 4 / 3; object-position: 50% 40%; }
@media (max-width: 900px) {
  .m1-photo--sticky { position: static; order: -1; }
  .m1-svc .m1-photo:not(.m1-photo--end) img { aspect-ratio: 3 / 2; }
  .m1-photopair { grid-template-columns: 1.4fr 1fr; gap: 10px; }
  .m1-photopair img:first-child, .m1-photopair img:last-child { aspect-ratio: auto; height: clamp(180px, 42vw, 340px); }
}

/* add-ons: the list beside the stones it offers */
.m1-addons { margin-top: clamp(72px, 8vw, 120px); align-items: end; }
.m1-photo--end img { aspect-ratio: 4 / 5; }
@media (max-width: 900px) { .m1-photo--end img { aspect-ratio: 3 / 2; } }

/* spa suites: the suite itself across the measure, the couple beside the menu */
.m1-svc--suites { padding-top: clamp(64px, 7vw, 112px); }
.m1-suitehero { width: min(100% - 2 * var(--m1-gutter), var(--m1-max)); margin: 0 auto clamp(48px, 5vw, 80px); }
.m1-suitehero img { width: 100%; height: clamp(260px, 44vw, 600px); object-fit: cover; object-position: 50% 62%; border-radius: var(--m1-radius); }
.m1-suitecouple { align-self: start; margin-top: 8px; }
.m1-suitecouple img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 40% 50%; border-radius: var(--m1-radius); }
@media (max-width: 900px) { .m1-suitecouple { width: min(100%, 420px); justify-self: center; } }

.m1-panel__head { display: grid; gap: 12px; margin-bottom: clamp(28px, 3vw, 40px); }
.m1-panel__head h2, .m1-subhead { font-size: var(--m1-step-3); max-width: 20ch; }
.m1-panel__head p { max-width: 42em; }
.m1-panel__head .m1-note { font-family: var(--m1-display); font-size: var(--m1-step-1); color: var(--m1-ink); }
.m1-subhead { margin-bottom: clamp(24px, 3vw, 36px); }

/* the price list: name column + fixed 60 / 90 / 120 columns, light hairlines, coral prices */
.m1-list { --cols: 3; --col: clamp(4.4rem, 7.5vw, 6.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-bottom: 12px; border-bottom: 1.5px solid var(--m1-rule-peach); }
.m1-list__cols .m1-list__title { font-family: var(--m1-display); font-size: var(--m1-step-1); color: var(--m1-ink); line-height: 1.2; }
.m1-list__cols span { text-align: center; font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--m1-text-soft); }
.m1-item { padding: 22px 0 24px; border-bottom: 1px solid var(--m1-rule); }
.m1-item h3 { font-size: var(--m1-step-1); line-height: 1.25; }
.m1-price { text-align: center; font-size: 1.5rem; font-weight: 400; line-height: 1.1; color: var(--m1-coral-text); font-variant-numeric: tabular-nums lining-nums; }
.m1-price--none { color: var(--m1-text-soft); }
/* descriptions run the full list width under their row: the prices sit on the name line only, and a full measure
   keeps six massages from turning into six narrow towers of text */
.m1-item p { margin-top: 10px; max-width: 46em; font-size: 1rem; line-height: 1.7; }
.m1-item__where { display: block; margin-top: 8px; font-size: .9375rem; font-weight: 500; color: var(--m1-ink); }
.m1-list__after { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px 24px; padding-top: 22px; }
.m1-list__after em { font-family: var(--m1-display); font-style: normal; color: var(--m1-ink); }

@media (max-width: 640px) {
  .m1-list { --col: 3.9rem; }
  .m1-list__cols span { font-size: .75rem; letter-spacing: .04em; }
  .m1-item__line { column-gap: 4px; }
  .m1-item h3 { font-size: 1.15rem; }
  .m1-price { font-size: 1.2rem; font-weight: 700; }   /* 19.2px bold: still large text for the 3.9:1 coral */
  .m1-item p { max-width: none; }
  .m1-svcnav a { font-size: 1.15rem; padding: 0 12px; }
  .m1-svcnav a::after { left: 12px; right: 12px; }
}

/* "Plan Your Escape": styled text, never a heading, marked by the logo's own flower between two peach hairlines */
.m1-escape { display: grid; justify-items: center; gap: 16px; width: min(100% - 2 * var(--m1-gutter), 760px);
  margin: clamp(72px, 8vw, 120px) auto 0; text-align: center; }
.m1-escape__mark { display: flex; align-items: center; gap: 16px; width: 12rem; }
.m1-escape__mark::before, .m1-escape__mark::after { content: ""; flex: 1; height: 1px; background: var(--m1-rule-peach); }
.m1-escape__mark img { width: auto; height: 38px; flex: none; }
.m1-escape p { font-family: var(--m1-display); font-size: var(--m1-step-2); line-height: 1.35; color: var(--m1-ink); }
.m1-escape p em { display: block; font-style: normal; color: var(--m1-coral-text); font-size: 1.12em; }
.m1-escape .m1-btn { margin-top: 6px; }

/* ---------- gallery: Anton's photographs and one silent loop on white, no copy ---------- */
.m1-gallery { padding-block: 0 var(--m1-section); }
.m1-svc--suites + .m1-gallery, .m1-services + .m1-gallery { padding-top: 0; }
.m1-gallery__grid { width: min(100% - 2 * var(--m1-gutter), var(--m1-max)); margin-inline: auto; display: grid;
  grid-template-columns: 1fr 1.45fr 1fr; grid-template-rows: clamp(190px, 21vw, 300px) clamp(190px, 21vw, 300px); gap: clamp(10px, 1.2vw, 16px); }
.m1-gallery__cell { overflow: hidden; border-radius: var(--m1-radius); background: var(--m1-shell); }
.m1-gallery__cell img, .m1-gallery__cell video { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--m1-ease); }
@media (hover: hover) { .m1-gallery__cell:hover img { transform: scale(1.035); } }
.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 { 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; }
}

/* ---------- promo strip (offers, styled text) ---------- */
.m1-offers { background: var(--m1-blush); }
.m1-offers__grid { display: grid; grid-template-columns: 1fr 1fr; }
.m1-offer { padding: clamp(40px, 5vw, 64px) clamp(0px, 4vw, 56px); }
.m1-offer:first-child { padding-left: 0; }
.m1-offer + .m1-offer { border-left: 1px solid var(--m1-rule-peach); }
.m1-offer__title { font-family: var(--m1-display); font-size: clamp(1.5rem, 1.3rem + .6vw, 1.75rem); line-height: 1.35; color: var(--m1-ink); }   /* 24px floor: its coral words stay large text */
.m1-offer__title strong { font-weight: 400; color: var(--m1-coral-text); }
.m1-offer p + p { margin-top: 10px; }
.m1-offer__call { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 1.125rem; font-weight: 500; color: var(--m1-ink);
  font-variant-numeric: tabular-nums; text-decoration-color: var(--m1-coral); }
.m1-offer__call svg { width: 20px; height: 20px; color: var(--m1-coral); }
.m1-offer ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.m1-offer ul a { color: var(--m1-ink); font-weight: 500; text-decoration-color: var(--m1-coral); }
@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 var(--m1-rule-peach); }
}

/* ---------- section heads ---------- */
.m1-section { padding-block: var(--m1-section); }
.m1-section__head { display: grid; justify-items: center; text-align: center; margin-bottom: clamp(36px, 4vw, 60px); }
.m1-section__head h2 { font-size: var(--m1-step-3); }
.m1-section__head h2::after { content: ""; display: block; width: 56px; height: 1.5px; margin: 22px auto 0; background: var(--m1-rule-peach); }

/* reviews: Trustindex mounts here */
.m1-reviews__slot { min-height: 220px; display: grid; place-items: center; border-radius: var(--m1-radius);
  color: var(--m1-text-soft); font-style: italic; background: var(--m1-shell); }
.m1-reviews .m1-escape { width: auto; }

/* ---------- locations: the flyer's three-spa row ---------- */
.m1-locations { background: var(--m1-shell); }
.m1-places { display: grid; grid-template-columns: repeat(3, 1fr); }
.m1-place { position: relative; display: grid; justify-items: center; align-content: start; padding: 8px clamp(20px, 3vw, 44px) 12px; text-align: center; }
.m1-place + .m1-place { border-left: 1px solid var(--m1-rule-peach); }
.m1-place__pin { width: 28px; height: 28px; margin-bottom: 16px; color: var(--m1-coral); }
.m1-place h3 { font-family: var(--m1-sans); font-size: .95rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; line-height: 1.5; }
.m1-place h3 a { text-decoration: none; background: linear-gradient(var(--m1-coral), var(--m1-coral)) left 100% / 0 1.5px no-repeat; transition: background-size .35s var(--m1-ease); }
.m1-place h3 a:hover { background-size: 100% 1.5px; }
.m1-place h3 a::after { content: ""; position: absolute; inset: 0; }
.m1-place address { margin-top: 10px; font-style: normal; max-width: 18em; }
.m1-place__tel { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 1.375rem; font-weight: 500;
  color: var(--m1-ink); font-variant-numeric: tabular-nums; text-decoration: none; }
.m1-place__tel svg { width: 20px; height: 20px; color: var(--m1-coral); }
.m1-place__tel:hover { text-decoration: underline; text-decoration-color: var(--m1-coral); }
.m1-place__note { margin-top: 10px; font-family: var(--m1-display); color: var(--m1-ink); }
@media (max-width: 860px) {
  .m1-places { grid-template-columns: 1fr; }
  .m1-place { padding: 32px 0; }
  .m1-place + .m1-place { border-left: 0; border-top: 1px solid var(--m1-rule-peach); }
}

/* ---------- contact ---------- */
.m1-contact { padding-block: var(--m1-section); }
.m1-contact__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 104px); }
.m1-contact h2 { font-size: var(--m1-step-3); margin-bottom: 20px; }
.m1-contact h4 { font-size: var(--m1-step-1); margin-bottom: 18px; }
.m1-form { display: grid; gap: 22px; }
.m1-field { display: grid; gap: 4px; }
.m1-field label { font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--m1-text-soft); }
.m1-field input { width: 100%; min-height: 48px; padding: 8px 2px; border: 0; border-bottom: 1px solid rgba(46, 39, 36, .28); border-radius: 0;
  background: transparent; color: var(--m1-ink); font: 400 1.125rem var(--m1-sans); caret-color: var(--m1-coral); transition: border-color .25s var(--m1-ease); }
.m1-field input:hover { border-bottom-color: var(--m1-text-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: #c23a22; }
.m1-field__err { min-height: 1.2em; font-size: .9rem; color: #b3321b; }
.m1-form .m1-btn { justify-self: start; min-width: 11rem; }
.m1-form__status { font-style: italic; color: var(--m1-text); }
.m1-contact__info { display: grid; gap: 24px; align-content: start; }
.m1-contact__info strong { display: block; font-weight: 600; color: var(--m1-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-ink); font-weight: 500; font-variant-numeric: tabular-nums; text-decoration-color: var(--m1-coral); }
.m1-contact__hours { padding-top: 24px; border-top: 1px solid var(--m1-rule); }
.m1-contact__hours h4 { margin-bottom: 6px; }
.m1-contact__close { grid-column: 1 / -1; margin-top: clamp(16px, 2vw, 32px); padding-top: clamp(32px, 3vw, 44px); border-top: 1px solid var(--m1-rule-peach);
  font-family: var(--m1-display); font-size: var(--m1-step-2); text-align: center; color: var(--m1-ink); }
@media (max-width: 860px) { .m1-contact__grid { grid-template-columns: 1fr; } }

/* ---------- connect / footer ---------- */
.m1-connect { padding-block: 0 clamp(56px, 6vw, 88px); }
.m1-connect__grid { display: grid; grid-template-columns: auto 1fr; gap: clamp(32px, 6vw, 96px); align-items: start;
  padding-top: clamp(48px, 5vw, 72px); border-top: 1px solid var(--m1-rule); }
.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-peach); border-radius: 50%; color: var(--m1-ink);
  transition: background-color .25s var(--m1-ease), border-color .25s var(--m1-ease); }
.m1-social a:hover { background: var(--m1-coral); border-color: var(--m1-coral); }
.m1-social svg { width: 20px; height: 20px; }
.m1-footer { padding-block: 32px 48px; background: var(--m1-shell); }
.m1-footer .m1-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; }
.m1-footer .m1-brand img { height: 88px; }
.m1-footer nav ul { display: flex; flex-wrap: wrap; gap: 6px 24px; list-style: none; margin: 0; padding: 0; font-size: .8rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; }
.m1-footer nav a { color: var(--m1-ink); text-decoration: none; }
.m1-footer nav a:hover { text-decoration: underline; text-decoration-color: var(--m1-coral); }
@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-family: var(--m1-sans); font-style: normal; font-size: .72em; }
.m1-gate-box { margin-top: 16px; padding: 14px 16px; border: 1px dashed #b26a00; border-radius: var(--m1-radius); background: rgba(255, 196, 0, .08); color: #6b3d00; font-size: .95rem; }
html.is-presenting .m1-gate, html.is-presenting .m1-gate-box, html.is-presenting .m1-gated { display: none; }
/* a gated block that holds a whole column (Latest Articles): presentation hides it with its heading */

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