/* site.css — the public site, patterned on GlowLink: a floating white header
   card over full-bleed photography, near-zero decoration, hairline rules,
   generous whitespace and big display headings. The palette and type are
   TPSC's own — yellow, aqua, deep teal, Marcellus and Montserrat.
   Prefix .st- */

:root {
  --st-header-h: 74px;
  --st-bar-h: 36px;
  --st-gutter: 40px;
  --st-shell: 1320px;
}
@media (max-width: 900px) { :root { --st-gutter: 16px; --st-header-h: 62px; } }

.st-page { display: block; }
.st-shell { width: min(var(--st-shell), 100%); max-width: var(--st-shell); margin: 0 auto; padding: 0 var(--st-gutter); }
.st-shell-narrow { width: min(880px, 100%); margin: 0 auto; padding: 0 var(--st-gutter); }
.st-section { padding: clamp(56px, 7vw, 104px) 0; }
.st-section-tight { padding: clamp(34px, 4vw, 56px) 0; }

/* ---------------------------------------------------------------- chrome */

.st-chrome { position: sticky; top: 0; z-index: 60; padding: 0 var(--st-gutter); }
.st-chrome-in { max-width: var(--st-shell); margin: 0 auto; }

.st-announce {
  background: var(--brand-dark); color: #fff; min-height: var(--st-bar-h);
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 12.5px; letter-spacing: .06em; text-align: center; padding: 8px 44px 8px 14px;
  border-radius: 0 0 3px 3px; position: relative;
}
.st-announce a { border-bottom: 1px solid rgba(255, 255, 255, .5); }
.st-announce > span, .st-announce > a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-announce svg { width: 15px; height: 15px; color: var(--yellow); flex: none; }
.st-announce-x {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: rgba(255, 255, 255, .7); cursor: pointer;
  width: 34px; height: 34px; display: grid; place-items: center;
}
.st-announce-x svg { width: 14px; height: 14px; color: inherit; }

/* The masthead is a card that floats over the hero photograph. */
.st-masthead {
  background: var(--surface); border-radius: 0 0 var(--radius) var(--radius);
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center;
  gap: 16px; padding: 0 22px; min-height: var(--st-header-h);
  box-shadow: 0 18px 40px -34px rgba(7, 51, 62, .5);
}

/* --- Dynamic island (test) -------------------------------------------------
   At the top of a page the masthead is the flush card the site was built on.
   Once the reader scrolls, the announcement collapses and the card lifts off
   the top edge and narrows. Geometry changes once instead of animating layout
   on every frame while the reader scrolls. */
.st-announce {
  overflow: hidden; max-height: 90px; visibility: visible;
}
.st-masthead {
  border: 1px solid transparent;
}

body.st-island .st-chrome { padding-top: 12px; }
body.st-island .st-chrome-in { max-width: min(var(--st-shell), 1080px); }
/* Collapsed, it must leave the tab order too — max-height alone keeps the
   dismiss button focusable behind the island. */
body.st-island .st-announce {
  max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; min-height: 0;
  visibility: hidden;
}
/* The resting card centre-locks the wordmark with a 1fr auto 1fr grid, which
   needs room for twice the nav. The island is narrower than that, so it moves
   the wordmark to the head of the bar and lets the links take the middle. */
@media (min-width: 901px) {
  body.st-island .st-masthead { grid-template-columns: auto 1fr auto; }
  body.st-island .st-logo { order: -1; }
  body.st-island .st-nav { justify-content: center; gap: 20px; }
}
body.st-island .st-masthead {
  border-radius: var(--pill); min-height: 58px; padding: 0 12px 0 26px;
  background: var(--surface);
  border-color: color-mix(in srgb, var(--ink) 10%, transparent);
  box-shadow: 0 22px 45px -24px rgba(7, 51, 62, .45);
}

@media (prefers-reduced-motion: reduce) {
  .st-chrome, .st-chrome-in, .st-announce, .st-masthead { transition: none; }
}

.st-nav { display: flex; align-items: center; gap: 22px; }
.st-nav-link {
  position: relative; font-size: 13.5px; letter-spacing: .02em; padding: 6px 0; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--ink);
}
.st-nav-link::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
  background: currentColor; transition: right .28s var(--ease);
}
.st-nav-link:hover::after, .st-nav-link.on::after { right: 0; }
.st-nav-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--yellow-deep); }

.st-logo {
  font-family: var(--font-display); font-size: clamp(19px, 2vw, 25px); font-weight: 800;
  letter-spacing: .02em; white-space: nowrap; text-align: center; line-height: 1;
  display: inline-flex; align-items: baseline; gap: 1px; justify-self: center;
}
/* TP carries the neon turquoise, SC the neon yellow. On the dark footer the full
   neon is used; on white the turquoise is deepened a step so it still reads. */
.st-logo .tp { font-family: var(--font-body); font-weight: 800; color: var(--aqua-deep); letter-spacing: -.01em; }
.st-logo .sc { font-family: var(--font-body); font-weight: 800; color: var(--yellow-deep); letter-spacing: -.01em; }
.st-logo.on-dark .tp { color: var(--aqua); }
.st-logo.on-dark .sc { color: var(--yellow); }

.st-chrome-right { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; }
.st-iconbtn {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: none; border: 0; cursor: pointer; color: var(--ink); flex: none;
}
.st-iconbtn:hover { background: var(--aqua-tint); }
.st-iconbtn svg { width: 19px; height: 19px; }
.st-msg-btn { position: relative; }
.st-msg-dot {
  position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink-faint); border: 2px solid var(--surface);
}
.st-msg-dot.on { background: var(--ok); }
/* Plain text, not a filled button. The yellow block read as a neon box sitting
   in the masthead; the word alone is enough beside the wordmark, and the same
   treatment already applied on phones. */
.st-book-btn {
  background: none; border: 0; box-shadow: none; color: var(--ink);
  border-radius: 0; padding: 10px 6px; font-size: 13px; letter-spacing: .04em;
}
.st-book-btn:hover, .st-book-btn:focus-visible {
  background: none; color: var(--aqua-text); transform: none; box-shadow: none;
}
.st-burger { display: none; }
.st-spacer { height: calc(var(--st-header-h) + var(--st-bar-h)); }

@media (max-width: 1180px) {
  .st-nav { display: none; }
  .st-burger { display: grid; }
  .st-masthead, body.st-island .st-masthead { grid-template-columns: minmax(0, 1fr) auto; padding: 0 10px; }
  .st-logo { justify-self: start; }
}
@media (max-width: 560px) {
  /* Booking and chat already have full-size targets in the bottom navigation.
     Keep room for the wordmark, basket and menu on narrow phones. */
  .st-book-btn, .st-msg-btn { display: none; }
  .st-announce { font-size: 11.5px; letter-spacing: .02em; padding: 7px 38px 7px 12px; min-height: 32px; }
  /* Preserve an inset around the wordmark without shrinking touch targets. */
  .st-masthead { padding: 0 8px 0 18px; gap: 6px; }
  body.st-island .st-chrome { padding-top: 8px; }
  body.st-island .st-masthead { min-height: 52px; padding: 0 6px 0 16px; }
  .st-chrome-right { gap: 0; }
  .st-logo { font-size: 18px; }
}

/* Full-screen menu, the way GlowLink's mobile sheet works. */
.st-menu {
  position: fixed; inset: 0; z-index: 91; background: var(--surface);
  padding: 22px var(--st-gutter) calc(32px + env(safe-area-inset-bottom)); overflow-y: auto; display: flex; flex-direction: column;
  overscroll-behavior: contain;
}
.st-menu-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; flex: none; }
.st-menu nav, .st-menu-foot { width: min(560px, 100%); margin-inline: auto; flex: none; }
.st-menu nav a, .st-menu button.st-menu-item {
  display: block; width: 100%; text-align: left; font-family: var(--font-display); font-size: 25px;
  padding: 15px 0; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); cursor: pointer;
}
/* The footer CTAs are real buttons, not menu rows — keep them flat and squared,
   with no glow behind the fill. */
.st-menu-foot .btn { border-radius: 2px; box-shadow: none; }
.st-menu-foot { margin-top: auto; padding-top: 26px; display: grid; gap: 10px; }
@media (orientation: landscape) and (max-height: 560px) and (min-width: 620px) {
  .st-menu { padding-top: 16px; }
  .st-menu-head { margin-bottom: 12px; }
  .st-menu nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
  .st-menu nav a, .st-menu button.st-menu-item { font-size: 21px; padding: 10px 0; }
  .st-menu-foot { padding-top: 18px; }
}

/* ------------------------------------------------------------------ hero */

.st-hero { position: relative; margin-top: calc(-1 * (var(--st-header-h) + var(--st-bar-h))); }
/* With no announcement the chrome is the masthead alone, so everything measured
   against the pair has to drop the bar's height with it. */
body.st-no-announce .st-hero { margin-top: calc(-1 * var(--st-header-h)); }
body.st-no-announce .st-spacer { height: var(--st-header-h); }
body.st-no-announce .st-hero-slide { padding-top: calc(var(--st-header-h) + 20px); }
/* The hero is pulled up under the floating masthead, so its content needs the
   card's height back as clearance or the first line hides behind it. */
.st-hero-slide {
  position: relative; min-height: min(94vh, 880px); min-height: min(94svh, 880px); display: flex; align-items: flex-end;
  padding: calc(var(--st-header-h) + var(--st-bar-h) + 20px) 0 clamp(48px, 6vw, 92px);
}
@media (max-width: 700px) {
  /* The dots live at the bottom of the slide, so the copy has to stop above
     them or the rating chip and the dots share the same line. */
  .st-hero-slide { min-height: min(82vh, 700px); min-height: min(82svh, 700px); padding-bottom: 60px; }
  /* A phone crops the wide hero photograph to about a third of its width, so a
     slide whose subject sits right has to hold that edge. */
  .st-hero-slide.focus-right .st-hero-media img { object-position: 92% 50%; }
  .st-hero-body .lede { font-size: .98rem; }
  .st-hero-ctas .btn { width: 100%; }
}
.st-hero-media { position: absolute; inset: 0; overflow: hidden; }
.st-hero-media img { width: 100%; height: 100%; object-fit: cover; }
/* A left-weighted wash so the headline holds whatever the photograph does. */
.st-hero-media::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(4, 34, 42, .78) 0%, rgba(4, 34, 42, .52) 40%, rgba(4, 34, 42, .1) 74%, rgba(4, 34, 42, 0) 100%),
    linear-gradient(180deg, rgba(4, 34, 42, .5) 0%, rgba(4, 34, 42, 0) 34%, rgba(4, 34, 42, .5) 100%);
}
@media (max-width: 860px) {
  .st-hero-media::after {
    background: linear-gradient(180deg, rgba(4, 34, 42, .58) 0%, rgba(4, 34, 42, .25) 32%, rgba(4, 34, 42, .8) 100%);
  }
}
.st-hero-body { position: relative; color: #fff; max-width: 860px; min-width: 0; }
.st-hero-body h1 { color: #fff; text-shadow: 0 2px 30px rgba(0, 0, 0, .25); font-size: clamp(2.6rem, 6vw, 4.7rem); }
@media (max-width: 700px) {
  .st-hero-body h1 { font-size: clamp(2rem, 9.2vw, 3.1rem); }
}
@media (orientation: landscape) and (max-height: 560px) and (max-width: 1180px) {
  .st-hero-slide { min-height: max(420px, 94svh); padding-bottom: 58px; }
  .st-hero-body h1 { font-size: clamp(1.9rem, 4vw, 3rem); }
  .st-hero-body.stack > * + * { margin-top: 16px; }
  .st-hero-ctas .btn { width: auto; flex: 0 1 auto; }
}
/* The opening word in the wordmark's two neon tones, over the hero photo. */
.st-hero-mark.aqua { color: var(--aqua); }
.st-hero-mark.yellow { color: var(--yellow); }
.st-hero-script { font-family: var(--font-script); color: var(--yellow); font-size: 1.22em; line-height: .9; }
.st-hero-body p { color: rgba(255, 255, 255, .88); max-width: 52ch; }
.st-hero-eyebrow { color: rgba(255, 255, 255, .82); }
.st-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.st-hero-ctas .btn { display: grid; place-items: center; }
.st-hero-ctas .btn > span { min-width: 0; overflow-wrap: anywhere; }
.st-hero .btn { border-radius: 2px; }
.st-hero-machine { background: var(--brand-dark); align-items: center; }
.st-hero-machine-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center; gap: clamp(24px, 5vw, 64px);
}
.st-hero-machine-photo {
  min-width: 0; height: clamp(400px, 70svh, 660px);
  background: none; border: 0; border-radius: 0; padding: 0;
}
.st-hero-machine-photo img { object-fit: contain !important; }
@media (min-width: 1321px) {
  .st-hero-machine-grid { padding-left: 72px; padding-right: 72px; }
}
@media (max-width: 700px) {
  .st-hero-machine-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .st-hero-machine-photo { order: -1; height: clamp(300px, 95vw, 440px); }
}

.st-hook {
  display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 8px;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px; backdrop-filter: blur(8px); color: #fff; font-size: 13px; cursor: pointer; max-width: 100%;
}
.st-hook .tag-new, .st-hook svg { flex: none; }
.st-hook .tag-new { font-size: 10px; }
.st-hook-text { min-width: 0; overflow-wrap: anywhere; transition: opacity .4s var(--ease); }
.st-hook-text:not(.in) { opacity: 0; }

.st-hero-dots { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; gap: 9px; z-index: 3; }
@media (max-width: 700px) { .st-hero-dots { bottom: 14px; } }
.st-hero-dot {
  width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .45);
  border: 0; cursor: pointer; transition: background .25s, width .25s;
  /* The dot stays small; the box you can actually tap does not. */
  padding: 0; box-sizing: content-box; background-clip: content-box;
  border-top: 9px solid transparent; border-bottom: 9px solid transparent;
  border-left: 7px solid transparent; border-right: 7px solid transparent;
}
.st-hero-dot.on { background: #fff; width: 24px; border-radius: 4px; background-clip: content-box; }
.st-hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 44px; height: 44px; border-radius: 0; border: 0; cursor: pointer;
  background: none; display: grid; place-items: center; color: rgba(255, 255, 255, .55);
  transition: color .2s var(--ease);
}
.st-hero-arrow svg { width: 17px; height: 17px; }
.st-hero-arrow:hover, .st-hero-arrow:focus-visible { background: none; color: #fff; }
.st-hero-arrow.prev { left: 16px; } .st-hero-arrow.next { right: 16px; }
@media (max-width: 1320px) { .st-hero-arrow { display: none; } }

/* The search bar sits on the hero, squared off like GlowLink's inputs. */
.st-hero-search {
  display: flex; align-items: center; gap: 10px; background: var(--surface);
  border-radius: 2px; padding: 6px 6px 6px 16px; max-width: 520px;
}
.st-hero-search .input { border: 0; background: none; min-height: 42px; padding: 0; flex: 1 1 0; }
.st-hero-search .input:focus { box-shadow: none; }
.st-hero-search svg { width: 18px; height: 18px; color: var(--ink-faint); flex: none; }
.st-hero-search .btn { border-radius: 2px; flex: none; }

.st-stats { display: flex; flex-wrap: wrap; gap: 34px; }
.st-stat { display: flex; flex-direction: column; gap: 3px; color: #fff; }
.st-stat-v { font-family: var(--font-display); font-size: 1.45rem; display: inline-flex; align-items: center; gap: 6px; }
.st-stat-v svg { width: 15px; height: 15px; fill: var(--yellow); stroke: none; }
.st-stat-k { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }

/* --------------------------------------------------------------- marquee */

.st-marquee { overflow: hidden; border-block: 1px solid var(--line); padding: 15px 0; background: var(--surface); }
.st-marquee-track { display: flex; gap: 36px; white-space: nowrap; overflow-x: auto; padding-inline: var(--st-gutter); }
.st-marquee-track span { font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); }

/* ---------------------------------------------------- section heads, rails */

.st-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 30px; }
.st-head h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.22; margin-bottom: 0; }
.st-head > * { min-width: 0; }
.st-head .eyebrow { margin-bottom: 12px; }
.st-more { font-size: 13px; letter-spacing: .04em; border-bottom: 1px solid currentColor; padding-bottom: 2px; white-space: nowrap; }

.st-rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 1fr);
  gap: 26px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px;
}
.st-rail > * { scroll-snap-align: start; min-width: 0; }
@media (max-width: 640px) { .st-rail { grid-auto-columns: 76%; gap: 14px; } }

/* Treatment card, on GlowLink's product-card geometry. */
.st-card { position: relative; cursor: pointer; display: flex; flex-direction: column; color: inherit; min-width: 0; }
.st-card-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-sm); background: var(--aqua-tint); flex: none; }
.st-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.st-card:hover .st-card-media img { transform: scale(1.045); }
.st-card-machine .st-card-media { background: var(--surface); }
/* Photos.el supplies an inline cover default; equipment must remain whole. */
.st-card-machine .st-card-media img { object-fit: contain !important; padding: 18px; }
/* The transparent Doublo asset should sit directly on the page, without a
   colored tile or a hover zoom that trims the ends of the device. */
.st-card-machine .st-card-media:has(img[data-photo="machine_m_hifu"]) { background: none; border-radius: 0; }
.st-card-machine .st-card-media img[data-photo="machine_m_hifu"] { padding: 0; transform: none; }
.st-card-badges { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; z-index: 2; }
.st-card-badges .tag { max-width: 100%; white-space: normal; overflow-wrap: anywhere; padding: 6px 12px; line-height: 1.5; }
.st-card-cta {
  position: absolute; left: 11px; right: 11px; bottom: 11px; z-index: 2;
  opacity: 0; transform: translateY(7px); transition: .28s var(--ease);
}
.st-card:hover .st-card-cta, .st-card:focus-within .st-card-cta { opacity: 1; transform: none; }
@media (hover: none) { .st-card-cta { opacity: 1; transform: none; } }
.st-card-cta .btn { width: 100%; border-radius: 2px; }
.st-card-body { padding: 18px 2px 0; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.st-card-title { font-size: 15.5px; line-height: 1.5; margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.st-card-sub { font-size: 12.5px; line-height: 1.6; color: var(--ink-faint); margin: 0; }
.st-card-price { font-size: 15px; font-variant-numeric: tabular-nums; display: flex; flex-wrap: wrap; gap: 9px; align-items: baseline; padding-top: 4px; margin-top: auto; }
.st-card-package .st-card-body { padding-top: 22px; gap: 12px; }

.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(238px, 100%), 1fr)); gap: 26px 22px; }

/* --------------------------------------------------------- editorial blocks */

.st-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 0; }
.st-split > * { min-width: 0; }
.st-split.reverse .st-split-media { order: 2; }
.st-split-media { aspect-ratio: 4 / 3.6; overflow: hidden; }
.st-split-media img { width: 100%; height: 100%; object-fit: cover; }
.st-split-body { padding: clamp(28px, 5vw, 84px); max-width: 640px; }
@media (max-width: 860px) {
  .st-split { grid-template-columns: 1fr; }
  .st-split.reverse .st-split-media { order: 0; }
  .st-split-body { padding: 32px var(--st-gutter) 46px; }
}

.st-band { background: var(--brand-dark); color: #fff; }
.st-band h2, .st-band .display-l, .st-band .display-m { color: #fff; }
.st-band p, .st-band .lede { color: rgba(255, 255, 255, .74); }
.st-band .eyebrow { color: rgba(255, 255, 255, .62); }
.st-band .btn-outline { border-color: rgba(255, 255, 255, .7); color: #fff; }
.st-band .btn-outline:hover { background: #fff; color: var(--brand-dark); }

.st-booking-grid {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: center; gap: clamp(28px, 5vw, 64px);
}
.st-booking-body, .st-booking-actions { display: grid; min-width: 0; }
.st-booking-body { gap: 18px; }
.st-booking-body > * { margin: 0; min-width: 0; }
.st-booking-body h2 { line-height: 1.22; overflow-wrap: anywhere; }
.st-booking-body .lede { max-width: 48ch; line-height: 1.65; }
.st-booking-actions { gap: 14px; width: min(100%, 440px); justify-self: end; }
.st-booking-actions > * { margin: 0; min-width: 0; }
.st-booking-actions .btn { width: 100%; border-radius: 2px; padding-inline: 20px; line-height: 1.45; }
.st-booking-actions .st-more {
  color: rgba(255, 255, 255, .8); justify-self: start; white-space: normal;
  line-height: 1.6; margin-top: 4px;
}
@media (max-width: 760px) {
  .st-booking-grid { grid-template-columns: 1fr; gap: 28px; }
  .st-booking-actions { width: 100%; justify-self: stretch; }
}

.st-quote { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.4rem, 2.6vw, 2.1rem); line-height: 1.42; max-width: 24ch; letter-spacing: -.01em; }
.st-quote + div { display: grid; gap: 6px; }

.st-tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.st-tiles > * { aspect-ratio: 1; overflow: hidden; display: block; }
.st-tiles img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.st-tiles > *:hover img { transform: scale(1.06); }
@media (max-width: 860px) { .st-tiles { grid-template-columns: repeat(3, 1fr); } }

/* Category tiles: photograph with the name laid over it. */
.st-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
@media (max-width: 1100px) { .st-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) { .st-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.st-cat { position: relative; aspect-ratio: 4 / 5; overflow: hidden; display: block; color: #fff; }
.st-cat img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.st-cat:hover img { transform: scale(1.05); }
.st-cat::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 34, 42, .1) 40%, rgba(4, 34, 42, .8) 100%); }
.st-cat-name {
  position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 2;
  font-family: var(--font-display); font-size: 1.15rem; line-height: 1.35;
}

.st-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.st-chips .chip { max-width: 100%; white-space: normal; line-height: 1.5; padding-block: 8px; }

/* Menu list: hairline rows, prices right, the way an editorial menu reads. */
.st-menu-list { border-top: 1px solid var(--line); }
.st-menu-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 20px;
  padding: 20px 4px; border-bottom: 1px solid var(--line); cursor: pointer; color: inherit;
}
.st-menu-row:hover { background: var(--aqua-tint); }
.st-menu-row > div:first-child { display: grid; gap: 7px; }
.st-menu-row-name { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; font-size: 1rem; line-height: 1.5; overflow-wrap: anywhere; }
.st-menu-row-name > span:first-child { min-width: 0; }
.st-menu-row-name .tag { flex: none; }
.st-menu-row-meta { font-size: 12.5px; color: var(--ink-faint); }
.st-menu-row-price { font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 620px) {
  .st-menu-row { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
  .st-menu-row svg { display: none; }
}

.st-pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 40px; }
.st-pillar-n { font-family: var(--font-display); font-size: 2.4rem; color: var(--aqua-text); line-height: 1; }
.st-pillars .stack > * + * { margin-top: 14px; }
.st-pillars h3 { line-height: 1.35; margin-bottom: 0; }

.st-news { display: flex; gap: 10px; flex-wrap: wrap; max-width: 460px; }
.st-news .input { border-radius: 2px; flex: 1 1 220px; }
.st-news .btn { border-radius: 2px; }

.st-faq { border-top: 1px solid var(--line); }
.st-faq .acc { border-bottom: 1px solid var(--line); border-top: 0; }

.st-map { aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.st-map iframe { width: 100%; height: 100%; border: 0; display: block; }

.st-page-hero { background: var(--aqua-tint); padding: clamp(46px, 6vw, 84px) 0 clamp(30px, 4vw, 48px); }
.st-page-hero h1 { overflow-wrap: anywhere; }
.st-page-hero .stack { display: grid; gap: 16px; }
.st-page-hero .stack > * { margin: 0; min-width: 0; }
.st-contact-block .row { align-items: flex-start; }
.st-contact-block .row > svg { flex: none; margin-top: 4px; }
.st-contact-block .row > a, .st-contact-block .row > span { line-height: 1.65; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- footer */

.st-footer { background: var(--brand-dark); color: rgba(255, 255, 255, .72); padding: clamp(48px, 6vw, 80px) 0 0; }
.st-footer a { color: rgba(255, 255, 255, .72); }
.st-footer a:hover { color: #fff; }
.st-foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 40px; padding-bottom: 44px; }
.st-foot-grid > * { min-width: 0; }
.st-footer li, .st-footer li a { overflow-wrap: anywhere; }
.st-footer h4 { color: #fff; font-family: var(--font-body); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 18px; font-weight: 600; }
.st-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: 14px; line-height: 1.65; }
.st-foot-social { display: flex; flex-wrap: wrap; gap: 8px; }
.st-foot-social a { width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .1); display: grid; place-items: center; color: #fff; }
.st-foot-social a:hover { background: var(--aqua); color: var(--brand-dark); }
.st-foot-bottom {
  border-top: 1px solid rgba(255, 255, 255, .12); padding: 20px 0; display: flex;
  justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; font-size: 12.5px;
}
@media (max-width: 620px) {
  /* Side by side these read as one run-on line; stacked they are two facts. */
  .st-foot-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
}
@media (max-width: 860px) { .st-foot-grid { grid-template-columns: 1fr 1fr; gap: 30px; } }
@media (max-width: 520px) { .st-foot-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------- phone chrome */

.st-fab {
  position: fixed; right: 20px; bottom: 22px; z-index: 55; display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 20px; border-radius: 999px; background: var(--brand-dark); color: #fff;
  box-shadow: 0 14px 34px rgba(7, 51, 62, .32); border: 0; cursor: pointer; font-size: 14px; font-weight: 600;
}
.st-fab svg { width: 20px; height: 20px; }
.st-fab.mini { padding: 14px; }
.st-fab.mini span { display: none; }

.st-tabbar {
  /* Equal columns, not space-around: "Treatments" is far wider than the other
     labels, which pushed the raised Book button ~21px right of centre. */
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 58; display: none;
  grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center;
  background: var(--surface);
  border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
.st-tab { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 3px; padding: 6px 2px; font-size: clamp(9px, 2.5vw, 10.5px); font-weight: 600; color: var(--ink-soft); background: none; border: 0; cursor: pointer; position: relative; min-width: 0; width: 100%; }
.st-tab > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-tab svg { width: 21px; height: 21px; }
.st-tab.on { color: var(--aqua-text); }
.st-tab-book { margin-top: -22px; }
.st-tab-book i { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--yellow); color: var(--brand-dark); box-shadow: 0 8px 20px rgba(245, 217, 22, .45); }
.st-tab-book i svg { width: 24px; height: 24px; }
.st-tab-dot { position: absolute; top: 4px; right: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }

@media (max-width: 900px) {
  .st-tabbar { display: grid; }
  .st-fab { display: none; }
  /* Clear the tab bar, the Book button that rides above it, and the home
     indicator — otherwise the last footer lines sit underneath all three. */
  body.st-has-tabbar .st-footer { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
  body.st-has-tabbar .st-page, body.st-has-tabbar .sh-page, body.st-has-tabbar .tr-page { padding-bottom: 0; }
}

.st-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 91; background: var(--surface);
  max-width: 560px; margin-inline: auto; max-height: 90vh; max-height: 90dvh; overflow-y: auto; overscroll-behavior: contain;
  border-radius: 22px 22px 0 0; padding: 12px 18px calc(22px + env(safe-area-inset-bottom)); box-shadow: var(--shadow-lg);
}
.st-sheet .grab { width: 44px; height: 5px; border-radius: 3px; background: var(--line); margin: 0 auto 16px; }
.st-sheet a, .st-sheet button { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 13px 6px; border: 0; background: none; color: var(--ink); font-size: 15px; border-bottom: 1px solid var(--line); cursor: pointer; }

.st-search-form { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 2px; padding: 4px 4px 4px 14px; }
.st-search-form .input { border: 0; background: none; flex: 1 1 0; }
.st-search-form .btn, .st-search-form > svg { flex: none; }
.st-search-group { margin-top: 34px; }

/* Paused public products: readable status without adding a wider nav item. */
.st-nav-link.st-products-paused {
  display: inline-grid; gap: 2px; border: 0; background: none;
  font-family: inherit; text-align: left; line-height: 1.35;
  color: var(--ink-soft); cursor: default; opacity: 1;
}
.st-nav-link.st-products-paused::after { display: none; }
.st-coming-soon { font-family: var(--font-body); font-size: 10px; line-height: 1.4; letter-spacing: .02em; }
.st-menu button.st-products-paused, .st-sheet button.st-products-paused {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  color: var(--ink-soft); cursor: default; opacity: 1;
}
.st-menu .st-coming-soon, .st-sheet .st-coming-soon { font-size: 12px; flex: none; }
.st-foot-paused { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; opacity: .75; }

/* Phone layouts keep a single header allowance and consistent reading rhythm. */
@media (max-width: 900px) {
  /* Sticky chrome already occupies a row in normal flow. */
  body .st-spacer { height: 0 !important; }
  .st-tabbar { column-gap: 4px; }
  .st-tab { min-height: 48px; gap: 5px; }
  .st-tab-book i { box-shadow: none; }
}
@media (max-width: 620px) {
  .st-page-hero { padding: 36px 0 32px; }
  .st-page-hero h1 { font-size: clamp(1.75rem, 7.5vw, 2.2rem); line-height: 1.2; }
  .st-page-hero .lede, .tr-head .lede { font-size: 1rem; line-height: 1.65; }
  .st-section { padding-block: 44px; }
  .st-footer ul { gap: 8px; }
  .st-footer li > a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 8px; }
  .st-foot-paused { min-height: 44px; }
  .st-foot-grid { gap: 32px; }
  .st-sheet a, .st-sheet button { min-height: 48px; gap: 14px; line-height: 1.5; }
  .st-sheet svg { flex: none; }
  .st-sheet button.st-products-paused { padding-left: 37px; }
  .st-search-form { flex-wrap: wrap; }
  .st-search-form .input { min-width: 0; }
  .st-search-form .btn { min-height: 44px; }
}

@media (max-width: 360px) {
  .st-tabbar { column-gap: 2px; padding-inline: 2px; }
  .st-tab { font-size: 8.5px; padding-inline: 0; }
}

@media (orientation: landscape) and (max-height: 560px) and (max-width: 900px) {
  .st-tabbar { padding-top: 4px; padding-bottom: calc(4px + env(safe-area-inset-bottom)); }
  .st-tab { min-height: 48px; padding-block: 2px; gap: 3px; }
  .st-tab-book { margin-top: 0; }
  .st-tab-book i { width: 32px; height: 32px; }
  .st-tab-book i svg { width: 21px; height: 21px; }
}

/* Booking stays distinct from the footer, with room around every action. */
.st-booking-band {
  background: var(--aqua-tint); color: var(--ink);
  border-block: 1px solid var(--line); padding-block: clamp(56px, 7vw, 88px);
}
.st-booking-band h2, .st-booking-band .display-l { color: var(--ink); }
.st-booking-band p, .st-booking-band .lede { color: var(--ink-soft); }
.st-booking-band .eyebrow { color: var(--aqua-text); }
.st-booking-band .btn-outline { border-color: var(--ink-soft); color: var(--ink); }
.st-booking-band .btn-outline:hover { background: var(--surface); color: var(--ink); }
.st-booking-band .st-booking-actions { gap: 16px; }
.st-booking-band .st-more { color: var(--aqua-text); min-height: 44px; padding-block: 8px; }
@media (max-width: 620px) {
  .st-booking-band .st-booking-grid { gap: 30px; }
  .st-booking-band .st-booking-body h2 { font-size: clamp(1.6rem, 6.7vw, 2rem); }
  .st-booking-band .lede { font-size: 1rem; }
}