/* Visual polish layer (26 Oct 2026). Loads after every other theme stylesheet. Deliberately restrained: real
   photography and brand shapes (the drop, the logo wave) instead of generic effects, depth only where it
   explains something, hover motion only on things you can click, and one narrative scroll moment (the
   offer staircase). polish.js adds .sd-step-in for that moment, the promo-code copy state and html.sd-scrolled.
   No copy or section order changes. */

:root{
  --sd-ease:cubic-bezier(.22,1,.36,1);
  --sd-shadow-rest:0 0 0 1px rgba(14,75,79,.07),0 1px 2px rgba(14,75,79,.05),0 10px 28px -16px rgba(14,75,79,.18);
  --sd-shadow-lift:0 0 0 1px rgba(14,75,79,.1),0 2px 6px rgba(14,75,79,.06),0 26px 44px -22px rgba(14,75,79,.36);
  --sd-wave-top:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 18' preserveAspectRatio='none'%3E%3Cpath d='M0 9C30 0 60 0 90 9s60 9 90 0v9H0z'/%3E%3C/svg%3E");
  --sd-wave-bottom:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 18' preserveAspectRatio='none'%3E%3Cpath d='M0 9c30 9 60 9 90 0s60-9 90 0V0H0z'/%3E%3C/svg%3E");
}
html[data-theme=dark]{
  --sd-shadow-rest:0 0 0 1px rgba(247,247,242,.1),0 12px 30px -16px rgba(0,0,0,.55);
  --sd-shadow-lift:0 0 0 1px rgba(212,243,107,.3),0 24px 46px -20px rgba(0,0,0,.7);
}

/* Type finish */
:is(.sd-why-card,.sd-journey-card,.sd-plan,.sd-seo-explore-card,.sd-biz-card,.sd-biz-hub-card) p,.sd-section-head h2+p{text-wrap:pretty}
.sd-plan-price strong,.sd-journey-card h3,.drop-card-price{font-variant-numeric:tabular-nums}
.sd-section-head .sd-eyebrow,.sd-standards-copy .sd-eyebrow{color:var(--teal);font-weight:600}
html[data-theme=dark] :is(.sd-section-head,.sd-standards-copy) .sd-eyebrow{color:var(--sd-accent)}

/* Cards: tinted layered shadows instead of grey borders. Only cards that are links lift on hover. */
:is(.sd-why-card,.sd-journey-card,.sd-plan,.sd-seo-explore-card,.sd-biz-card,.sd-biz-hub-card){border-color:transparent;box-shadow:var(--sd-shadow-rest)}
:is(.sd-seo-explore-card,.sd-biz-hub-card){transition:transform .45s var(--sd-ease),box-shadow .45s var(--sd-ease)}
@media(hover:hover) and (pointer:fine){:is(.sd-seo-explore-card,.sd-biz-hub-card):hover{transform:translateY(-4px);box-shadow:var(--sd-shadow-lift)}}
.sd-why-card .sd-icon-badge,.sd-journey-card:not(.is-highlight) .sd-icon-badge{background:linear-gradient(145deg,#eef5f1,#dce9e3);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(14,75,79,.06)}
html[data-theme=dark] :is(.sd-why-card,.sd-journey-card:not(.is-highlight)) .sd-icon-badge{background:var(--sd-raised);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}

/* Why SpaDrop: on wide screens a bento (2+1+1 / 1+1+2). The first card ("certified therapists") carries a real
   photo of a therapist with the mat, towels and oils ready; the last one ("safe and private") a quiet lime wash. */
@media(min-width:1100px){
  .sd-why-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
  .sd-why-card:nth-child(1),.sd-why-card:nth-child(6){grid-column:span 2}
}
.sd-why-card:nth-child(1){position:relative;min-height:300px;display:flex;flex-direction:column;justify-content:flex-end;padding-top:190px;color:#fff;background:linear-gradient(180deg,rgba(13,75,74,0) 22%,rgba(13,75,74,.86) 55%,#0d4b4a 72%),url("why-card.webp?v=3") center 18%/cover no-repeat,#0d4b4a}
.sd-why-card:nth-child(1) h3{color:#fff}
.sd-why-card:nth-child(1) p{color:#d6e6e0}
.sd-why-card:nth-child(1) .sd-icon-badge{background:var(--lime);color:var(--teal);box-shadow:none}
@media(min-width:1100px){
  .sd-why-card:nth-child(1){padding-top:30px;background:linear-gradient(90deg,#0d4b4a 0%,#0d4b4a 34%,rgba(13,75,74,.7) 52%,rgba(13,75,74,0) 78%),url("why-card.webp?v=3") 72% 30%/cover no-repeat,#0d4b4a}
  .sd-why-card:nth-child(1)>*{max-width:52%}
}
.sd-why-card:nth-child(6){background:linear-gradient(120deg,rgba(212,243,107,.34),rgba(212,243,107,.06) 62%),var(--white)}
html[data-theme=dark] .sd-why-card:nth-child(1) .sd-icon-badge{background:var(--sd-accent);color:#0b2e2d}
html[data-theme=dark] .sd-why-card:nth-child(6){background:linear-gradient(120deg,rgba(212,243,107,.12),transparent 62%),var(--white)}

/* Journey: outlined step numbers; the first offer keeps one still brand drop in its corner */
.sd-journey-card{position:relative;overflow:hidden}
.sd-journey-card>*{position:relative;z-index:1}
.sd-journey-card:not(.is-highlight) .sd-journey-number{color:transparent;-webkit-text-stroke:1.5px #c6d4ce}
html[data-theme=dark] .sd-journey-card:not(.is-highlight) .sd-journey-number{-webkit-text-stroke-color:#ffffff40}
.sd-journey-card.is-highlight{box-shadow:0 0 0 1px rgba(14,75,79,.08),0 22px 44px -26px rgba(96,128,20,.6)}
.sd-journey-card.is-highlight::after{content:"";position:absolute;z-index:0;right:-46px;bottom:-46px;width:150px;aspect-ratio:1;border-radius:50% 0 50% 50%;transform:rotate(-45deg);background:rgba(14,75,79,.08);pointer-events:none}
/* "The more you relax, the more you get": on wide screens the four offers climb like a staircase. polish.js
   lets them step up into place, in order, the first time the row scrolls into view. */
@media(min-width:1100px){
  .sd-journey-card:nth-child(1){margin-top:60px}
  .sd-journey-card:nth-child(2){margin-top:40px}
  .sd-journey-card:nth-child(3){margin-top:20px}
  .sd-journey-grid.sd-steps-wait .sd-journey-card{opacity:0;transform:translateY(28px)}
  .sd-journey-grid.sd-steps-in .sd-journey-card{opacity:1;transform:none;transition:opacity .5s var(--sd-ease),transform .7s var(--sd-ease)}
  .sd-journey-grid.sd-steps-in .sd-journey-card:nth-child(2){transition-delay:.1s}
  .sd-journey-grid.sd-steps-in .sd-journey-card:nth-child(3){transition-delay:.2s}
  .sd-journey-grid.sd-steps-in .sd-journey-card:nth-child(4){transition-delay:.3s}
}

/* Promo codes read as tickets; polish.js makes the plain ones copy on click */
.sd-code:not(.sd-code--tag){padding:6px 16px;background:rgba(255,255,255,.55);-webkit-mask:radial-gradient(circle 6px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 6px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat;mask:radial-gradient(circle 6px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 6px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat}
.sd-journey-card:not(.is-highlight) .sd-code:not(.sd-code--tag){background:rgba(212,243,107,.16)}
html[data-theme=dark] .sd-code:not(.sd-code--tag){background:rgba(212,243,107,.08)}
.sd-code[data-copy]{cursor:copy;transition:transform .15s var(--sd-ease),background-color .2s var(--sd-ease)}
@media(hover:hover) and (pointer:fine){.sd-code[data-copy]:hover{background:#fff}}
.sd-code[data-copy]:active{transform:scale(.96)}
.sd-code[data-copy]:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.sd-code[data-copy]::after{content:attr(data-copy-hint);margin-left:8px;font-size:11px;font-weight:500;opacity:.6}
.sd-code[data-copied]::after{content:"✓ " attr(data-copied);opacity:1;color:var(--teal)}
html[data-theme=dark] .sd-code[data-copied]::after{color:var(--sd-accent)}
html[data-theme=dark] .sd-journey-card.is-highlight .sd-code[data-copied]::after{color:#0b2e2d}

/* Standards: the photo sits on an offset lime card */
.sd-standards-figure{position:relative;isolation:isolate}
.sd-standards-figure::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:32px;background:var(--lime);transform:translate(16px,16px) rotate(2deg)}
.sd-standards-art{box-shadow:0 30px 60px -30px rgba(14,75,79,.55)}
html[data-theme=dark] .sd-standards-figure::before{background:#2f6b68}

/* Relax Club: a lime hairline marks the recommended plan */
.sd-plan--relax{box-shadow:0 0 0 1px rgba(212,243,107,.38),0 30px 60px -30px rgba(14,75,79,.7)}

/* How it works: wave edges cut from the logo's wave, steps get lime number discs */
.how-band{
  padding-block:clamp(52px,6vw,72px);
  -webkit-mask:var(--sd-wave-top) top left/180px 18px repeat-x,linear-gradient(#000 0 0) 0 17px/100% calc(100% - 34px) no-repeat,var(--sd-wave-bottom) bottom left/180px 18px repeat-x;
  mask:var(--sd-wave-top) top left/180px 18px repeat-x,linear-gradient(#000 0 0) 0 17px/100% calc(100% - 34px) no-repeat,var(--sd-wave-bottom) bottom left/180px 18px repeat-x
}
.how-band .step-number{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:rgba(212,243,107,.14);color:var(--lime);font-weight:700;box-shadow:inset 0 0 0 1px rgba(212,243,107,.35)}

/* Reviews: one large lime quote mark per story */
.review-story{position:relative}
.review-story::before{content:"\201C";position:absolute;top:-18px;right:6px;font-size:110px;line-height:1;font-family:Georgia,serif;color:var(--lime);opacity:.5;pointer-events:none}
html[data-theme=dark] .review-story::before{opacity:.22}

/* FAQ: the open question gets a lime edge and its answer fades in (feedback for the disclosure) */
:is(.sd-faq-item,.faq-item) summary{transition:color .2s var(--sd-ease)}
@media(hover:hover) and (pointer:fine){:is(.sd-faq-item,.faq-item) summary:hover{color:var(--teal)}html[data-theme=dark] :is(.sd-faq-item,.faq-item) summary:hover{color:var(--sd-accent)}.sd-faq-topics a:hover{background:var(--lime);border-color:var(--lime);color:var(--ink)}}
:is(.sd-faq-item,.faq-item)[open]{background:linear-gradient(90deg,rgba(212,243,107,.16),transparent 75%);box-shadow:inset 3px 0 0 var(--lime)}
:is(.sd-faq-item,.faq-item)[open]>summary,:is(.sd-faq-item,.faq-item)[open]>:not(summary){padding-left:14px}
:is(.sd-faq-item,.faq-item)[open]>:not(summary){animation:sd-answer-in .35s var(--sd-ease)}
@keyframes sd-answer-in{from{opacity:0;transform:translateY(-4px)}}

/* Menu photos (the cards are links): a slow push-in on hover */
.drop-media :is(img,video){transition:transform 1s var(--sd-ease)}
@media(hover:hover) and (pointer:fine){.drop-card:hover .drop-media :is(img,video){transform:scale(1.04)}}

/* Buttons: press feedback only */
:is(.button,.sd-biz-btn,.sd-plan-cta):active{transform:scale(.97)}
:is(.button,.sd-biz-btn,.sd-plan-cta){transition:transform .15s var(--sd-ease),background-color .2s var(--sd-ease),border-color .2s var(--sd-ease),color .2s var(--sd-ease)}

/* Header gains depth once the page scrolls (it tells you the page moved under it) */
.site-header{transition:box-shadow .3s var(--sd-ease)}
html.sd-scrolled .site-header{box-shadow:0 1px 0 rgba(14,75,79,.06),0 12px 32px -20px rgba(11,46,45,.4)}
html[data-theme=dark].sd-scrolled .site-header{box-shadow:0 1px 0 rgba(247,247,242,.08),0 12px 32px -18px rgba(0,0,0,.7)}

@media(prefers-reduced-motion:reduce){
  .sd-journey-grid.sd-steps-wait .sd-journey-card{opacity:1;transform:none}
  .sd-journey-grid.sd-steps-in .sd-journey-card,.drop-media :is(img,video),:is(.sd-seo-explore-card,.sd-biz-hub-card),.sd-code[data-copy]{transition:none}
  :is(.sd-seo-explore-card,.sd-biz-hub-card):hover,.drop-card:hover .drop-media :is(img,video),.sd-code[data-copy]:active,:is(.button,.sd-biz-btn,.sd-plan-cta):active{transform:none}
  :is(.sd-faq-item,.faq-item)[open]>:not(summary){animation:none}
}

/* Menu page: every treatment clip is shot 9:16, so the card shows it whole instead of cropping it to a landscape
   strip (heads and clients were cut off). From 760px the clip stands beside the copy at its own ratio; on phones
   it fills the card width at 9:16. */
@media(min-width:760px){
  .editorial-catalogue{grid-template-columns:1fr}
  .catalogue-card{display:grid;grid-template-columns:min(34%,260px) minmax(0,1fr)}
  .catalogue-media{aspect-ratio:9/16;height:100%}
  .catalogue-media :is(img,video){object-position:center}
  .catalogue-copy{display:flex;flex-direction:column;padding:30px 32px 26px}
  .catalogue-copy>p{min-height:0;max-width:52ch}
  .catalogue-duration{margin-bottom:22px}
  .catalogue-bottom{margin-top:auto}
}
@media(min-width:1100px){
  .editorial-catalogue{grid-template-columns:repeat(2,minmax(0,1fr))}
  .catalogue-card{grid-template-columns:40% minmax(0,1fr)}
  .catalogue-copy{padding:26px 26px 22px}
}
@media(max-width:759px){
  .catalogue-media{aspect-ratio:9/16}
  .catalogue-media :is(img,video){object-position:center}
}

/* Booking: the chosen treatment's photo shows its whole 9:16 frame beside its name instead of a cropped banner
   (the banner showed about a fifth of the frame). */
.booking-selected-service{display:grid;grid-template-columns:clamp(110px,20vw,180px) minmax(0,1fr);gap:22px;align-items:center}
.booking-selected-service>img,.booking-selected-service>img[src*="/foot-loop-poster.webp"]{width:100%;height:auto;aspect-ratio:9/16;object-position:center;border-radius:16px}
.booking-selected-service h3{margin-top:0}
@media(max-width:540px){.booking-selected-service{gap:16px}.booking-selected-service>img{border-radius:12px}}

/* Hero floating cards: the photos keep their whole 9:16 frame; the cards are narrower so the composition keeps
   roughly its old height. */
.ref-card{width:clamp(84px,11vw,168px)}
.ref-card-media{height:auto;aspect-ratio:9/16}
.ref-card-media :is(img,video),.ref-card--left-2 .ref-card-media img,.ref-card--right-2 .ref-card-media img{object-position:center}
@media(max-width:600px){.ref-card{width:74px}}

/* Treatment pages: the clip/photo frame follows the 9:16 footage instead of a 7:5 crop (about 40% of the frame
   showed), capped in width so it never runs taller than the screen. */
.sd-seo-media-frame{aspect-ratio:9/16;width:min(100%,360px,calc(78vh * 9 / 16))}
.sd-seo-media-frame :is(img,video){object-position:center}
/* One column on phones: centre the frame (Safari's shorter vh made it narrower and it sat left). */
@media(max-width:900px){.sd-seo-media-frame{margin-inline:auto}}
/* A tap on the menu button focuses the menu itself (tabindex -1), which needs no ring; the keyboard still lands on the first row. */
.main-nav:focus{outline:none}


/* Menu page hero (Manu, 26 Oct 2026): a full-width hero with the uniform clip behind centred copy. pages.js
   renders the markup; the clip lazy-plays like the card clips, and its poster stands in under reduced motion. */
.editorial-head.editorial-head--hero{position:relative;isolation:isolate;display:grid;align-items:center;min-height:clamp(440px,74vh,720px);margin:0 0 12px;padding:0;overflow:hidden;color:#fff;background:#0d4b4a}
.editorial-hero-media{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.editorial-head--hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(9,40,39,.42),rgba(9,40,39,.58) 50%,rgba(9,40,39,.8))}
.editorial-hero-inner{display:flex;flex-direction:column;align-items:center;min-height:inherit;padding-block:24px 64px;text-align:center}
.editorial-head--hero .editorial-breadcrumb{align-self:flex-start;color:rgba(255,255,255,.78)}
.editorial-head--hero .editorial-breadcrumb span{color:rgba(255,255,255,.5)}
.editorial-hero-copy{margin:auto;max-width:900px}
.editorial-head--hero .editorial-eyebrow{margin:0 auto 18px;color:var(--lime);font-size:14px;font-weight:600;text-shadow:0 1px 10px rgba(9,40,39,.8)}
.editorial-head--hero .editorial-title{margin:0 auto;max-width:none;color:#fff;font-size:clamp(44px,7vw,96px);line-height:1.1;letter-spacing:-.03em;text-wrap:balance}
.editorial-head--hero .editorial-description{margin:22px auto 0;max-width:620px;color:rgba(255,255,255,.88);font-size:clamp(16px,1.6vw,19px);line-height:1.75}
html[data-theme=dark] .editorial-head--hero :is(.editorial-description,.editorial-breadcrumb){color:rgba(255,255,255,.85)}
html[data-theme=dark] .editorial-head--hero .editorial-eyebrow{color:var(--sd-accent)}

/* For Business hub: the same full-screen hero clip (business-pages.php), copy centred in white over a teal veil. */
.sd-biz-hero.sd-biz-hero--hub{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;min-height:calc(100vh - var(--sd-header-h,72px));min-height:calc(100svh - var(--sd-header-h,72px));margin:0;padding:64px 0;overflow:hidden;background:#0d4b4a;color:#fff;text-align:center}
.sd-biz-hero-photo{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
@media(prefers-reduced-motion:reduce){.sd-biz-hero-photo{display:none}.sd-biz-hero.sd-biz-hero--hub{background:#0d4b4a url("page-business-loop-poster.webp?v=20261027") 63% center/cover}}
.sd-biz-hero--hub::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(9,40,39,.42),rgba(9,40,39,.58) 50%,rgba(9,40,39,.8))}
.sd-biz-hero--hub .sd-biz-hero-copy{max-width:960px}
.sd-biz-hero--hub .sd-biz-kicker{color:var(--lime,#d4f36b)}
.sd-biz-hero--hub .sd-biz-title{color:#fff;font-size:clamp(40px,6.4vw,88px);text-wrap:balance}
.sd-biz-hero--hub .sd-biz-lead{margin-inline:auto;color:rgba(255,255,255,.88)}
/* Phones see a narrow slice of the 16:9 photos: keep each one's person in that slice. */
@media(max-width:759px){
  .editorial-hero-media--services{object-position:30% center}
  .editorial-hero-media--how{object-position:42% center}
  .editorial-hero-media--faq{object-position:32% center}
  .editorial-hero-media--contact{object-position:40% center}
  .sd-biz-hero-photo{object-position:63% center}
}

/* Menu hero: full screen under the header (polish.js measures it), and one load moment. The slogan's words rise
   from behind their own line in turn, then the keyword line and the description fade in. The word boxes carry
   extra room above and below so Thai tone marks and vowels are never clipped. */
.editorial-head.editorial-head--hero{min-height:calc(100vh - var(--sd-header-h,var(--sd-hdr-h,72px)));min-height:calc(100svh - var(--sd-header-h,var(--sd-hdr-h,72px)))}
.editorial-head--hero .sd-word{display:inline-block;overflow:hidden;padding:.24em .02em .16em;margin:-.24em -.02em -.16em;vertical-align:bottom}
.editorial-head--hero.sd-hero-anim .sd-word>span{display:inline-block;animation:sd-word-rise 1s var(--sd-ease) both;animation-delay:calc(.25s + var(--i) * .12s)}
.editorial-head--hero.sd-hero-anim .editorial-eyebrow{animation:sd-hero-fade .8s var(--sd-ease) .1s both}
.editorial-head--hero.sd-hero-anim .editorial-description{animation:sd-hero-fade .9s var(--sd-ease) both;animation-delay:calc(.55s + var(--sd-words,2) * .12s)}
@keyframes sd-word-rise{from{transform:translateY(115%)}}
@keyframes sd-hero-fade{from{opacity:0;transform:translateY(14px)}}
@media(prefers-reduced-motion:reduce){.editorial-head--hero.sd-hero-anim :is(.sd-word>span,.editorial-eyebrow,.editorial-description){animation:none}}

/* Members (Paul, 26 Oct 2026, after RLAX): the header greets a signed-in customer by name, and "My bookings" shows
   upcoming bookings and history in tabs with RLAX-style cards. Markup: app.js userMenu() / renderBookings(). */
.header-user{position:relative}
.header-user>summary{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:4px 14px 4px 4px;border-radius:999px;background:#e3f0e6;color:var(--teal);font-size:13px;font-weight:600;cursor:pointer;list-style:none;white-space:nowrap}
.header-user>summary::-webkit-details-marker{display:none}
.header-user>summary::after{content:"";width:6px;height:6px;margin-left:2px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.header-user-avatar{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--teal);color:#fff;font-size:13px}
.header-user-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:40;min-width:190px;padding:6px;border-radius:14px;background:var(--white);box-shadow:0 0 0 1px rgba(14,75,79,.08),0 18px 40px -18px rgba(11,46,45,.45)}
.header-user-menu :is(a,button){display:block;width:100%;padding:10px 12px;border:0;border-radius:10px;background:none;color:var(--ink);font:inherit;font-size:14px;text-align:left;text-decoration:none;cursor:pointer}
.header-user-menu :is(a,button):hover{background:var(--mint)}
.header-user>summary:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
html[data-theme=dark] .header-user>summary{background:rgba(212,243,107,.14);color:var(--sd-accent)}
html[data-theme=dark] .header-user-avatar{background:var(--sd-accent);color:#0b2e2d}
@media(max-width:800px){.header-user-name{display:none}.header-user>summary{padding:4px}.header-user>summary::after{display:none}}

.account-layout--member .account-bookings{order:-1}
@media(min-width:980px){.account-layout.account-layout--member{grid-template-columns:minmax(0,1fr) 320px;align-items:start}}
.sd-bk-prep{display:flex;align-items:center;gap:16px;margin:0 0 20px;padding:16px 18px;border-radius:20px;background:#0d4b4a;color:#fff;text-decoration:none}
.sd-bk-prep-icon{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;border-radius:50%;background:var(--lime);color:#0b2e2d;font-size:14px}
.sd-bk-prep-copy{display:grid;gap:2px;min-width:0}
.sd-bk-prep-copy strong{font-size:16px}
.sd-bk-prep-copy small{font-size:13px;color:#cfe0da;line-height:1.5}
.sd-bk-prep-cta{margin-left:auto;flex-shrink:0;padding:9px 18px;border-radius:999px;background:#fff;color:#0b2e2d;font-size:13px;font-weight:600}
@media(max-width:600px){.sd-bk-prep{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:start}.sd-bk-prep-cta{grid-column:2;justify-self:start;margin:6px 0 0}}
.sd-bk-tabs{display:inline-flex;gap:4px;margin:4px 0 18px;padding:4px;border-radius:999px;background:var(--mint)}
.sd-bk-tabs button{padding:9px 16px;border:0;border-radius:999px;background:none;color:var(--ink);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.sd-bk-tabs button[aria-selected=true]{background:#0d4b4a;color:#fff}
.sd-bk-count{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-left:4px;padding:0 6px;border-radius:999px;background:rgba(14,75,79,.1);font-size:12px}
.sd-bk-tabs button[aria-selected=true] .sd-bk-count{background:rgba(255,255,255,.2)}
.sd-bk-list{display:grid;gap:14px}
.sd-bk-card{padding:18px 20px;border-radius:18px;background:var(--white);box-shadow:0 0 0 1px rgba(14,75,79,.09),0 10px 26px -18px rgba(14,75,79,.3)}
.sd-bk-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sd-bk-status{padding:3px 10px;border-radius:999px;background:#e3f0e6;color:#0d4b4a;font-size:12px;font-weight:600}
.sd-bk-status.status-awaiting_payment{background:#fff3d6;color:#7a5200}
.sd-bk-status.status-cancelled{background:#f1f1ef;color:#6b6b66}
.sd-bk-number{font-size:12px;color:var(--muted)}
.sd-bk-price{margin-left:auto;font-size:17px;color:var(--teal);font-variant-numeric:tabular-nums}
.sd-bk-title{margin:12px 0 4px;font-size:19px;line-height:1.4;font-weight:700;color:var(--ink)}
.sd-bk-when{display:flex;align-items:center;gap:8px;margin:0;font-size:14px;color:var(--muted)}
.sd-bk-when svg{width:16px;height:16px;flex-shrink:0}
.sd-bk-guests{margin:6px 0 0;font-size:13px;color:var(--muted)}
/* Paul (30 Oct 2026): unpaid bookings say they leave after 24 hours and can be removed. */
.sd-bk-expires{margin:8px 0 0;font-size:13px;color:var(--muted)}
.sd-bk-remove{color:var(--muted)}
.sd-bk-remove:hover,.sd-bk-remove:focus-visible{color:#b42318}
html[data-theme=dark] .sd-bk-remove:hover,html[data-theme=dark] .sd-bk-remove:focus-visible{color:#ff9a8f}
.sd-bk-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.sd-bk-therapist{display:flex;align-items:center;gap:10px;min-width:0}
.sd-bk-therapist small{display:block;font-size:12px;color:var(--muted)}
.sd-bk-therapist strong{font-size:14px;color:var(--ink)}
.sd-bk-avatar{display:grid;place-items:center;flex-shrink:0;width:40px;height:40px;border-radius:50%;background:var(--mint);color:var(--teal);font-weight:700}
.sd-bk-actions{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.sd-bk-empty{padding:28px 0;color:var(--muted);text-align:center}
html[data-theme=dark] .sd-bk-status{background:rgba(212,243,107,.12);color:var(--sd-accent)}
html[data-theme=dark] .sd-bk-tabs button[aria-selected=true]{background:var(--sd-accent);color:#0b2e2d}
.sd-bk-avatar svg{width:20px;height:20px}
/* Therapist faces (Paul, 4 Nov 2026): the assigned therapist's photo on the booking card and in the booking details. */
.sd-bk-face{flex-shrink:0;width:56px;height:56px;border-radius:50%;object-fit:cover;background:var(--mint);box-shadow:0 0 0 2px #fff,0 0 0 3px var(--line)}
.sd-bk-face+.sd-bk-face{margin-left:-18px}
.sd-bk-therapist .sd-bk-face-facts{margin-top:2px;font-size:12.5px;line-height:1.45}
.sd-face-cards{display:flex;flex-wrap:wrap;gap:14px;margin:6px 0 18px}
.sd-face-card{display:flex;align-items:center;gap:14px;margin:0}
.sd-face-card img{width:96px;height:96px;border-radius:50%;object-fit:cover;background:var(--mint)}
.sd-face-card strong{display:block;font-size:17px}
.sd-face-card small{display:block;margin-top:2px;color:var(--muted);font-size:13px;line-height:1.5}
html[data-theme=dark] .sd-bk-face{box-shadow:0 0 0 2px #0b2e2d,0 0 0 3px #2b5552}

/* The 2×2 menu tiles swap in diagonal pairs as you scroll (treatments.js cross(), phones and desktop). The resting pair
   fades to its colour cover (teal or lime with an icon, the pack's icon-tile look) and pauses; the open pair shows its clip. */
.drop-cover{display:none}
.drop-bento.is-crossing .drop-cover{display:block;position:absolute;inset:0;z-index:-1;opacity:0;transform:scale(1.04);transition:opacity 1s var(--sd-ease),transform 1.2s var(--sd-ease);pointer-events:none}
.drop-bento.is-crossing .drop-card.is-closed .drop-cover{opacity:1;transform:none}
.drop-cover-teal .drop-cover{background:var(--drop-teal,#0e4b4f);color:#fff}
.drop-cover-lime .drop-cover{background:var(--drop-lime,#c9e86f);color:var(--drop-teal,#0e4b4f)}
.drop-cover-icon{position:absolute;top:18px;left:18px;width:40px;height:40px}
.drop-cover-icon svg{width:100%;height:100%}
.drop-bento.is-crossing .drop-card :is(.drop-card-title,.drop-card-title a,.drop-card-text,.drop-card-price,.drop-card-price strong){transition:color .8s var(--sd-ease)}
.drop-bento.is-crossing .drop-cover-lime.is-closed :is(.drop-card-title,.drop-card-title a,.drop-card-text,.drop-card-price,.drop-card-price strong){color:var(--drop-lime-ink,#163b3a);text-shadow:none}
.drop-bento.is-crossing .drop-cover-teal.is-closed .drop-arrow{background:var(--drop-lime,#c9e86f);color:var(--drop-teal,#0e4b4f)}
.drop-bento.is-crossing .drop-cover-lime.is-closed .drop-arrow{background:var(--drop-teal,#0e4b4f);color:#fff}
.drop-bento.is-crossing .drop-card .drop-arrow{transition:background-color .8s var(--sd-ease),color .8s var(--sd-ease)}
@media(prefers-reduced-motion:reduce){.drop-bento.is-crossing .drop-cover{transition:none}}

/* Desktop tiles take the phone proportion (3:4) so more of each 9:16 clip shows; the feature card spans both rows. */
@media(min-width:1024px){
  .drop-bento[data-layout=bento]:not([data-drop-filtered]){grid-template-rows:auto auto}
  .drop-bento[data-layout=bento]:not([data-drop-filtered]) .drop-card:not(.drop-card--feature){aspect-ratio:3/4;min-height:0}
  .drop-bento[data-layout=bento]:not([data-drop-filtered]) .drop-card.drop-card--feature{min-height:0}
}

/* Mood filter results show each matching clip whole (Manu, 27 Oct: heads were cut off). Phones and tablets: 9:16
   tiles side by side. Desktop: the clip at 9:16 on the left of a white card with the copy beside it, like the menu page. */
.drop-bento[data-drop-filtered]{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto;align-items:start}
.drop-bento[data-drop-filtered] .drop-card.drop-card--photo{grid-column:auto;min-height:0;aspect-ratio:9/16}
@media(max-width:699px){
  .drop-bento[data-drop-filtered] .drop-card-body{padding:14px}
  .drop-bento[data-drop-filtered] .drop-card--feature .drop-card-title{font-size:20px}
  .drop-bento[data-drop-filtered] .drop-card--feature :is(.drop-card-text,.drop-card-meta){font-size:13px}
  .drop-bento[data-drop-filtered] .drop-badge{top:12px;left:12px;font-size:12px;padding:4px 11px}
  .drop-bento[data-drop-filtered] .drop-book{min-height:40px;margin:2px 14px 14px;padding:0 16px;font-size:14px}
}
@media(min-width:1024px){
  .drop-bento[data-drop-filtered]{--clip-w:clamp(200px,18vw,260px)}
  .drop-bento[data-drop-filtered] .drop-card.drop-card--photo{aspect-ratio:auto;min-height:calc(var(--clip-w) * 16 / 9);justify-content:center;background:#fff;color:var(--drop-ink);box-shadow:inset 0 0 0 1px var(--drop-line)}
  .drop-bento[data-drop-filtered] .drop-card--photo .drop-media{right:auto;width:var(--clip-w);z-index:0}
  .drop-bento[data-drop-filtered] .drop-card--photo .drop-media:after{display:none}
  .drop-bento[data-drop-filtered] .drop-card--feature .drop-card-title{font-size:34px}
  .drop-bento[data-drop-filtered] .drop-card--photo .drop-card-body{padding:28px 28px 28px calc(var(--clip-w) + 32px);text-shadow:none}
  .drop-bento[data-drop-filtered] .drop-card--photo:not(.drop-card--feature) .drop-card-body{padding-bottom:96px}
  .drop-bento[data-drop-filtered] .drop-card--photo .drop-book{margin:0 28px 28px calc(var(--clip-w) + 32px);background:var(--drop-teal);color:#fff}
  .drop-bento[data-drop-filtered] .drop-card--photo .drop-arrow{background:var(--drop-teal);color:#fff}
  html[data-theme=dark] .drop-bento[data-drop-filtered] .drop-card.drop-card--photo{background:var(--sd-surface);color:var(--sd-text);box-shadow:inset 0 0 0 1px var(--sd-line)}
  html[data-theme=dark] .drop-bento[data-drop-filtered] .drop-card--photo :is(.drop-arrow,.drop-book){background:var(--sd-accent);color:#0b2e2d}
}

/* The menu section slides up over the sticky home hero (reference.css: margin-top:-80svh, z-index:20). When a mood filter
   makes it shorter than that overlap, the next sections rose into the hero's box and the hero painted over them. Keep
   every later section stacked above the hero too. */
.reference-home .premium-services~section{position:relative;z-index:20}

/* Scratch cards (polish.js): a covered code shows a foil strip in place of the code; the dialog holds the canvas foil. */
.sd-code.is-scratch strong{color:transparent;border-radius:5px;background:linear-gradient(115deg,#a3b7b1,#eef3f1 42%,#bfcdc9 55%,#f6f9f8 70%,#a5b8b2);-webkit-user-select:none;user-select:none}
.sd-code.is-scratch,.sd-journey-card.has-scratch{cursor:pointer}
html.sd-scratch-open{overflow:hidden}
.sd-scratch{width:min(440px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);margin:auto;padding:0;border:0;background:transparent;overflow:visible;color:var(--teal,#0e4b4f)}
.sd-scratch::backdrop{background:rgba(8,32,30,.56);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.sd-scratch-card{position:relative;padding:28px 24px 24px;border-radius:28px;background:#fff;box-shadow:0 34px 80px -30px rgba(4,24,22,.6)}
.sd-scratch-card.is-highlight{background:var(--lime,#d4f36b)}
.sd-scratch-close{position:absolute;top:14px;right:14px;width:44px;height:44px;border:0;border-radius:50%;background:rgba(14,75,79,.09);cursor:pointer}
.sd-scratch-close::before,.sd-scratch-close::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:2px;margin:-1px 0 0 -8px;border-radius:2px;background:currentColor;transform:rotate(45deg)}
.sd-scratch-close::after{transform:rotate(-45deg)}
.sd-scratch-close:focus-visible,.sd-scratch-skip:focus-visible,.sd-scratch-copy:focus-visible{outline:2px solid var(--teal,#0e4b4f);outline-offset:3px}
.sd-scratch-name{margin:0;padding-right:52px;font-size:15px;font-weight:600}
.sd-scratch-title{margin:4px 0 0;padding-right:40px;font-size:clamp(26px,7vw,32px);line-height:1.2;color:inherit}
.sd-scratch-ticket{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;height:96px;margin-top:22px;border:2px dashed currentColor;border-radius:16px;background:rgba(255,255,255,.62)}
.sd-scratch-label{font-size:15px;opacity:.75}
.sd-scratch-code{font-size:clamp(26px,8vw,34px);font-weight:700;letter-spacing:.04em}
.sd-scratch-foil{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);border-radius:11px;touch-action:none;cursor:pointer;transition:opacity .45s var(--sd-ease)}
.sd-scratch-foil.is-gone{opacity:0;pointer-events:none}
.sd-scratch-burst{position:absolute;left:50%;top:50%;pointer-events:none}
.sd-scratch-burst i{position:absolute;width:9px;height:9px;margin:-4.5px;border-radius:50%;box-shadow:0 0 0 1px rgba(14,75,79,.12);animation:sd-burst .75s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes sd-burst{from{transform:rotate(var(--a)) translateX(0) scale(1);opacity:1}to{transform:rotate(var(--a)) translateX(var(--d)) scale(.35);opacity:0}}
.sd-scratch-ticket.is-revealed .sd-scratch-code{animation:sd-code-pop .5s var(--sd-ease)}
@keyframes sd-code-pop{0%{transform:scale(.86)}60%{transform:scale(1.06)}100%{transform:none}}
.sd-scratch-status{min-height:1.5em;margin:12px 0 0;font-size:14px;line-height:1.5}
.sd-scratch-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:14px}
.sd-scratch-skip{min-height:44px;padding:0 4px;border:0;background:none;color:inherit;font:inherit;font-size:15px;font-weight:600;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.sd-scratch-copy{display:inline-flex;align-items:center;min-height:48px;padding:0 24px;border:0;border-radius:999px;background:var(--teal,#0e4b4f);color:#fff;font:inherit;font-size:16px;font-weight:600;cursor:pointer}
.sd-scratch-skip[hidden],.sd-scratch-copy[hidden]{display:none}
.sd-scratch-how{margin:12px 0 0;font-size:13px;line-height:1.5;opacity:.8}
.sd-scratch-how:empty{display:none}
html[data-theme=dark] .sd-scratch-card:not(.is-highlight){background:var(--sd-surface);color:var(--sd-text)}
html[data-theme=dark] .sd-scratch-card:not(.is-highlight) .sd-scratch-ticket{background:rgba(212,243,107,.06);color:var(--sd-accent)}
html[data-theme=dark] .sd-scratch-card:not(.is-highlight) .sd-scratch-copy{background:var(--sd-accent);color:#0b2e2d}
html[data-theme=dark] .sd-scratch-card.is-highlight{background:var(--sd-accent);color:#0b2e2d}
@media(prefers-reduced-motion:no-preference){.sd-scratch[open]::backdrop{animation:sd-scratch-fade .3s ease}}
@keyframes sd-scratch-fade{from{opacity:0}}
@media(prefers-reduced-motion:reduce){.sd-scratch-foil{transition:none}.sd-scratch-ticket.is-revealed .sd-scratch-code{animation:none}}

/* SMS codes (Manu, 27 Oct 2026): the ThaiBulkSMS reference under the number, and the email/phone switch link. */
.auth-form .auth-email-address+.auth-code-ref{margin:-18px 0 22px;color:#5d6d63;font-size:13px}
.auth-form .auth-channel-switch{justify-content:center}
html[data-theme=dark] .auth-form .auth-code-ref{color:var(--sd-muted,#a9b8b0)}

/* Booking step 1: treatments as portrait photo cards (Manu, 27-28 Oct 2026). 4:5 stills keep both faces in frame;
   two a row on phones, and the whole menu in two rows of five once the panel is wide enough (no scrolling, no orphan card). */
.booking-service-tabs{display:flex;gap:28px;margin:4px 0 20px;border-bottom:1px solid #e1e9df}
.booking-service-tabs button{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 0 12px;background:none;border:0;font:inherit;font-size:16px;font-weight:500;color:#6b7c73;cursor:pointer}
.booking-service-tabs button[aria-pressed=true]{color:#0e4b4f}
.booking-service-tabs button[aria-pressed=true]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:#0e4b4f}
.booking-service-tabs button:focus-visible{outline:2px solid #2f7470;outline-offset:3px;border-radius:4px}
.booking-service-save{font-size:11px;font-weight:600;line-height:1;padding:5px 9px;border-radius:999px;background:#b4de54;color:#0a3a39}
.booking-service-wrap{container-type:inline-size;margin:0 0 30px}
.booking-service-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px}
@container (min-width:520px){.booking-service-grid[data-count="3"],.booking-service-grid[data-count="6"]{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container (min-width:640px){.booking-service-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 16px}}
@container (min-width:700px){.booking-service-grid:is([data-count="5"],[data-count="9"],[data-count="10"]){grid-template-columns:repeat(5,minmax(0,1fr))}.booking-service-grid[data-count="6"]{grid-template-columns:repeat(3,minmax(0,1fr))}}
.booking-service-card{display:flex;flex-direction:column;align-items:stretch;min-width:0;margin:0;padding:0;background:none;border:0;text-align:left;font:inherit;color:inherit;cursor:pointer}
.booking-service-media{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;border-radius:16px;background:#eef3ec;box-shadow:0 0 0 0 #0e4b4f;transition:box-shadow .2s ease}
.booking-service-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.booking-service-card:hover .booking-service-media img{transform:scale(1.04)}
.booking-service-card.is-selected .booking-service-media{box-shadow:0 0 0 2px #fff,0 0 0 4px #0e4b4f,0 12px 26px rgba(14,75,79,.18)}
.booking-service-card.is-selected .booking-service-media::before{content:"";position:absolute;bottom:10px;right:10px;z-index:1;width:28px;height:28px;border-radius:50%;background:#0e4b4f;box-shadow:0 2px 8px #0a2a2a40}
.booking-service-card.is-selected .booking-service-media::after{content:"";position:absolute;bottom:21px;right:19px;z-index:2;width:10px;height:6px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg)}
.booking-service-card:focus-visible{outline:none}
.booking-service-card:focus-visible .booking-service-media{box-shadow:0 0 0 3px #fff,0 0 0 5px #2f7470}
.booking-service-name{margin-top:11px;font-size:15px;font-weight:600;line-height:1.35;color:#10302e;overflow-wrap:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.booking-service-price{margin-top:3px;font-size:14px;color:#46625a}
.booking-service-card.is-selected .booking-service-name{color:#0e4b4f}
/* One badge on one card: the treatment most people book. Badge and tick sit low so faces stay clear. */
.booking-service-badge{position:absolute;left:10px;bottom:10px;z-index:1;padding:5px 10px;border-radius:999px;background:#b4de54;color:#0a3a39;font-size:12px;font-weight:600;line-height:1.2;box-shadow:0 2px 8px rgba(10,42,42,.16)}
.booking-picked{scroll-margin-top:calc(var(--sd-header-h,72px) + 16px);margin-bottom:26px;padding:20px 0 0;border-top:1px solid #e1e9df}
.booking-picked h3{margin:0 0 6px;font-size:19px;color:#10302e}
.booking-picked p{margin:0;color:#56706a;font-size:14px;line-height:1.65;max-width:62ch}
@media(max-width:480px){.booking-service-name{font-size:14px}.booking-service-price{font-size:13px}.booking-service-tabs{gap:22px}}
@media(prefers-reduced-motion:reduce){.booking-service-media,.booking-service-media img{transition:none}.booking-service-card:hover .booking-service-media img{transform:none}}
html[data-theme=dark] .booking-service-tabs{border-color:var(--sd-line,#2c3b39)}
html[data-theme=dark] .booking-service-tabs button{color:var(--sd-faint,#9fb0a8)}
html[data-theme=dark] .booking-service-tabs button[aria-pressed=true]{color:var(--sd-text,#f1f4f0)}
html[data-theme=dark] .booking-service-tabs button[aria-pressed=true]::after,html[data-theme=dark] .booking-service-card.is-selected .booking-service-media::before{background:var(--sd-accent,#d4f36b)}
html[data-theme=dark] .booking-service-card.is-selected .booking-service-media::after{border-color:#0b2e2d}
html[data-theme=dark] .booking-service-card.is-selected .booking-service-media{box-shadow:0 0 0 3px var(--sd-accent,#d4f36b)}
html[data-theme=dark] :is(.booking-service-name,.booking-picked h3){color:var(--sd-text,#f1f4f0)}
html[data-theme=dark] :is(.booking-service-price,.booking-picked p){color:var(--sd-muted,#b8c6bf)}
html[data-theme=dark] .booking-picked{border-color:var(--sd-line,#2c3b39)}

/* Chill / Relax Club membership (Paul's screens, Manu 27 Oct 2026): plans page and My membership. */
.sd-member{padding-top:clamp(28px,6vw,64px);padding-bottom:clamp(40px,7vw,88px)}
.sd-member--plans{text-align:center;max-width:1040px}
.sd-member-eyebrow{margin:0 0 8px;font-size:14px;font-weight:600;color:#0e4b4f}
.sd-member h1{margin:0 0 12px;font-size:clamp(34px,5.4vw,56px);line-height:1.08;letter-spacing:-.02em;color:#10302e}
.sd-member-lead{max-width:52ch;margin:0 auto 34px;color:#56706a;font-size:16px;line-height:1.7}
.sd-mplans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;text-align:left;align-items:stretch}
@media(max-width:760px){.sd-mplans{grid-template-columns:minmax(0,1fr)}}
.sd-mplan{display:flex;flex-direction:column;padding:32px clamp(22px,3vw,36px) 26px;border:1px solid #e3e9e2;border-radius:24px;background:#fff;box-shadow:0 18px 50px #0a2a2a0d}
.sd-mplan header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sd-mplan h2{margin:0;font-size:30px;letter-spacing:-.01em;color:#10302e}
.sd-mplan-badge{padding:7px 14px;border-radius:999px;background:#e8f3a6;color:#10302e;font-size:13px;font-weight:600}
.sd-mplan-sub{margin:10px 0 18px;color:#4d655f;font-size:15px}
.sd-mplan-price{display:flex;align-items:baseline;gap:8px;margin:0 0 20px}
.sd-mplan-price strong{font-size:clamp(46px,6vw,58px);line-height:1;letter-spacing:-.03em;color:#10302e}
.sd-mplan-price span{color:#56706a;font-size:16px}
.sd-mplan ul{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:12px;flex:1}
.sd-mplan li{display:flex;align-items:flex-start;gap:12px;font-size:15px;line-height:1.5;color:#1f3a36}
.sd-mplan li svg{flex:0 0 22px;width:22px;height:22px;padding:4px;border-radius:50%;background:#e8f3a6;color:#0e4b4f}
.sd-mplan li s{color:#7b8c86}
.sd-mplan-cta{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:56px;padding:12px 22px;border:0;border-radius:999px;background:#0e4b4f;color:#fff;font:inherit;font-size:16px;font-weight:600;text-decoration:none;cursor:pointer;transition:filter .15s,transform .15s}
.sd-mplan-cta:hover{filter:brightness(1.12)}
.sd-mplan-cta:active{transform:translateY(1px)}
.sd-mplan-cta:disabled{opacity:.6;cursor:progress}
.sd-mplan-cta:focus-visible,.sd-member-outline:focus-visible,.sd-member-ghost:focus-visible,.sd-member-link:focus-visible{outline:2px solid #2f7470;outline-offset:3px}
.sd-mplan-note{margin:12px 0 0;text-align:center;color:#566967;font-size:13px}
.sd-mplan--featured{background:#123f3f;border-color:#123f3f;color:#eaf2ee;box-shadow:0 24px 60px #0a2a2a33}
.sd-mplan--featured h2{color:#e2ee8c}
.sd-mplan--featured :is(.sd-mplan-sub,.sd-mplan-price span,.sd-mplan-note,li s){color:#b7cbc4}
.sd-mplan--featured :is(.sd-mplan-price strong,li){color:#fff}
.sd-mplan--featured li svg{background:#e2ee8c;color:#123f3f}
.sd-mplan--featured .sd-mplan-cta{background:#e8f3a6;color:#10302e}
.sd-member-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;list-style:none;margin:30px 0 14px;padding:0;color:#3f5d55;font-size:14px}
.sd-member-trust li::before{content:"✓";margin-right:7px;color:#0e4b4f;font-weight:700}
.sd-member-promptpay{margin:0 0 22px;color:#56706a;font-size:14px}
.sd-member-promptpay a{color:#0e4b4f;font-weight:600}
.sd-member-fine{max-width:78ch;margin:0 auto;padding-top:20px;border-top:1px solid #e3e9e2;color:#566967;font-size:12.5px;line-height:1.75}
/* My membership */
.sd-member--mine h1{font-size:clamp(30px,4vw,42px);margin-bottom:22px}
.sd-member-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,340px);gap:22px;align-items:start}
@media(max-width:900px){.sd-member-grid{grid-template-columns:minmax(0,1fr)}}
.sd-member-main{display:grid;gap:18px}
.sd-member-hero{padding:28px clamp(20px,3vw,32px);border-radius:24px;background:#123f3f;color:#eaf2ee}
.sd-member-hero header{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.sd-member-hero h2{margin:0;font-size:22px;color:#e2ee8c}
.sd-member-hero header span{color:#b7cbc4;font-size:13px}
.sd-member-count{display:flex;align-items:baseline;gap:12px;margin:22px 0 6px}
.sd-member-count strong{font-size:64px;line-height:1;color:#fff}
.sd-member-count span{font-size:19px;color:#fff}
.sd-member-sub{margin:0 0 18px;color:#b7cbc4;font-size:14px}
.sd-member-bar{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px;margin-bottom:12px}
.sd-member-bar span{height:8px;border-radius:8px;background:#e2ee8c}
.sd-member-bar .is-used{background:#5e7d77}
.sd-member-bar .is-booked{background:#9db8b0}
.sd-member-legend{display:flex;flex-wrap:wrap;gap:6px 18px;list-style:none;margin:0 0 16px;padding:0;font-size:13px;color:#d6e3de}
.sd-member-legend li::before{content:"";display:inline-block;width:8px;height:8px;margin-right:7px;border-radius:50%;background:#e2ee8c}
.sd-member-legend .is-used::before{background:#5e7d77}
.sd-member-legend .is-booked::before{background:#9db8b0}
.sd-member-roll{margin:0 0 20px;padding:11px 14px;border-radius:12px;background:#ffffff14;color:#d6e3de;font-size:13px;line-height:1.6}
.sd-member-actions{display:flex;flex-wrap:wrap;gap:10px}
.sd-member-actions .sd-mplan-cta{width:auto;min-height:48px;background:#e8f3a6;color:#10302e}
.sd-member-ghost{min-height:48px;padding:10px 20px;border:1px solid #ffffff59;border-radius:999px;background:transparent;color:#fff;font:inherit;font-weight:500;cursor:pointer}
.sd-member-card{padding:24px clamp(18px,3vw,28px);border:1px solid #e3e9e2;border-radius:22px;background:#fff}
.sd-member-card h2{margin:0 0 6px;font-size:18px;color:#10302e}
.sd-member-muted{margin:0;color:#6b7c73;font-size:14px;line-height:1.65}
.sd-slot{display:flex;align-items:center;gap:14px;margin-top:16px}
.sd-slot-avatar{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#eef3ec;color:#0e4b4f;font-weight:600}
.sd-slot strong{display:block;color:#10302e}
.sd-slot small{color:#6b7c73}
.sd-slot-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
.sd-slot-form label{display:grid;gap:6px;font-size:13px;color:#3f5d55}
.sd-slot-form select{min-height:44px;padding:8px 10px;border:1px solid #d9e4d4;border-radius:10px;background:#fff;font:inherit;color:#10302e}
.sd-slot-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px}
@media(max-width:520px){.sd-slot-form{grid-template-columns:minmax(0,1fr)}}
.sd-member-sessions{list-style:none;margin:10px 0 0;padding:0}
.sd-member-sessions li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;border-top:1px solid #eef2ec}
.sd-member-sessions strong{display:block;color:#10302e;font-size:15px}
.sd-member-sessions small{color:#6b7c73}
.sd-member-badge{flex:0 0 auto;padding:5px 12px;border-radius:999px;border:1px solid #d9e4d4;font-size:12px;color:#3f5d55}
.sd-member-badge.is-booked{background:#eef3ec;border-color:#eef3ec;color:#0e4b4f}
.sd-member-badge.is-cancelled{color:#9a5b4f}
.sd-member-details{background:#f6f8f5}
.sd-member-details dl{margin:14px 0 16px;display:grid;gap:10px}
.sd-member-details dl div{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.sd-member-details dt{color:#6b7c73}
.sd-member-details dd{margin:0;color:#10302e;text-align:right}
.sd-member-outline{display:block;width:100%;min-height:46px;margin-top:10px;border:1px solid #0e4b4f;border-radius:999px;background:transparent;color:#0e4b4f;font:inherit;font-weight:500;cursor:pointer}
.sd-member-link{display:block;margin:14px auto 0;border:0;background:none;color:#46625a;font:inherit;font-size:14px;text-decoration:underline;cursor:pointer;min-height:44px}
/* Header chip and the booking review choice */
.sd-member-chip{display:inline-flex;align-items:center;min-height:34px;padding:4px 12px;border-radius:999px;background:#123f3f;color:#e2ee8c;font-size:12.5px;font-weight:600;text-decoration:none;white-space:nowrap}
@media(max-width:700px){.sd-member-chip{display:none}}
.sd-member-use{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;margin:16px 0 4px;padding:16px 18px;border:2px solid #d9e4d4;border-radius:16px;background:#fff;text-align:left;font:inherit;color:inherit;cursor:pointer}
.sd-member-use strong{display:block;color:#10302e}
.sd-member-use small{color:#56706a}
.sd-member-use i{flex:0 0 44px;height:26px;border-radius:999px;background:#d9e4d4;position:relative;transition:background .2s}
.sd-member-use i::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s}
.sd-member-use.is-on{border-color:#0e4b4f;background:#f4f8f1}
.sd-member-use.is-on i{background:#0e4b4f}
.sd-member-use.is-on i::after{transform:translateX(18px)}
.sd-member-hint{margin:14px 0 0;color:#6b7c73;font-size:13px}
@media(prefers-reduced-motion:reduce){.sd-mplan-cta,.sd-member-use i,.sd-member-use i::after{transition:none}}
html[data-theme=dark] :is(.sd-mplan,.sd-member-card,.sd-member-use){background:var(--sd-surface,#14201f);border-color:var(--sd-line,#2c3b39)}
html[data-theme=dark] .sd-member-details{background:#ffffff08}
html[data-theme=dark] :is(.sd-member h1,.sd-mplan h2,.sd-mplan-price strong,.sd-mplan li,.sd-member-card h2,.sd-slot strong,.sd-member-sessions strong,.sd-member-details dd,.sd-member-use strong){color:var(--sd-text,#f1f4f0)}
html[data-theme=dark] :is(.sd-member-lead,.sd-mplan-sub,.sd-mplan-price span,.sd-mplan-note,.sd-member-muted,.sd-member-details dt,.sd-member-fine,.sd-member-trust,.sd-member-promptpay,.sd-member-use small){color:var(--sd-muted,#b8c6bf)}
html[data-theme=dark] .sd-mplan--featured,html[data-theme=dark] .sd-member-hero{background:#0b3433;border-color:#0b3433}
html[data-theme=dark] :is(.sd-member-outline){border-color:var(--sd-accent,#d4f36b);color:var(--sd-accent,#d4f36b)}
html[data-theme=dark] .booking-service-card.is-selected .booking-service-name{color:var(--sd-accent,#d4f36b)}
/* Member zone on My account (Paul via Manu, 28 Oct 2026): the Drop Card is the stamp card itself, ten slots with the two
   reward slots marked, and ready rewards as tear-off coupons; Relax Club sessions left sit beside it for members. */
.sd-mz{display:grid;gap:16px;margin:0 0 22px}
.sd-mz:empty{display:none}
@media(min-width:900px){.sd-mz{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start}.sd-mz>.sd-dc{grid-row:1/span 4}}
/* Drop Card (Paul's new design page 1, 29 Oct 2026): dark teal card, ten drops with the 3/6/10 rewards, lime progress. */
.sd-dc{padding:24px;border-radius:24px;background:linear-gradient(160deg,#0e4b4f,#0b3b3e);color:#eaf3ee}
.sd-dc-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.sd-dc h2{margin:0;font-size:24px;line-height:1.2;color:#fff}
.sd-dc-hello{margin:4px 0 0;font-size:14px;line-height:1.5;color:#b9d3cc}
.sd-dc-count{margin:0;display:grid;grid-template-columns:auto auto;align-items:baseline;column-gap:4px;color:#b9d3cc;font-size:15px;white-space:nowrap;text-align:right}
.sd-dc-count strong{font-size:48px;line-height:1;color:#b4de54;font-weight:600}
.sd-dc-count small{grid-column:1/-1;font-size:12px}
.sd-dc-next{display:flex;align-items:center;gap:10px;margin:18px 0 0;padding:12px 14px;border-radius:14px;border:1px solid rgba(180,222,84,.45);background:rgba(180,222,84,.12);font-size:15px;font-weight:500;line-height:1.45;color:#fff}
.sd-dc-gift{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:9px;background:#b4de54;color:#0b3b3e}
.sd-dc-gift svg{width:18px;height:18px}
.sd-dc-track{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px 8px}
.sd-dc-drop{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;color:rgba(255,255,255,.42)}
.sd-dc-shape{width:34px;height:40px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-dasharray:2.2 2.2}
.sd-dc-drop.is-on{color:#fff}
.sd-dc-drop.is-on .sd-dc-shape{fill:#fff;stroke:none}
.sd-dc-drop.is-on::after{content:"";position:absolute;top:24px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#b4de54}
.sd-dc-drop.is-reward{color:#b4de54}
.sd-dc-drop.is-reward .sd-dc-shape{stroke-dasharray:none;stroke-width:1.6}
.sd-dc-drop.is-reward.is-on .sd-dc-shape{fill:#b4de54}
.sd-dc-drop.is-reward.is-on::after{display:none}
.sd-dc-star{position:absolute;top:19px;left:0;right:0;text-align:center;font-size:12px;line-height:1;color:#b4de54}
.sd-dc-drop.is-reward.is-on .sd-dc-star{color:#0b3b3e}
.sd-dc-drop small{font-size:11px;line-height:1.25;text-align:center;color:#d6e9a0}
.sd-dc-bar{display:block;width:100%;height:6px;margin:16px 0 0;border:0;border-radius:99px;background:rgba(255,255,255,.14);color:#b4de54;-webkit-appearance:none;appearance:none;overflow:hidden}
.sd-dc-bar::-webkit-progress-bar{background:rgba(255,255,255,.14);border-radius:99px}
.sd-dc-bar::-webkit-progress-value{background:#b4de54;border-radius:99px}
.sd-dc-bar::-moz-progress-bar{background:#b4de54;border-radius:99px}
.sd-dc-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 12px;margin-top:14px;font-size:13px;color:#b9d3cc}
.sd-dc-rules summary{cursor:pointer;list-style:none;color:#fff;font-weight:500;border-radius:6px}
.sd-dc-rules summary::-webkit-details-marker{display:none}
.sd-dc-rules summary::after{content:" \203A"}
.sd-dc-rules summary:focus-visible{outline:2px solid #b4de54;outline-offset:3px}
.sd-dc-rules[open]{flex-basis:100%}
.sd-dc-rules ul{margin:10px 0 0;padding-left:18px;display:grid;gap:6px;line-height:1.55;color:#d7e7e1}
.sd-dc-unlocked{display:grid;justify-items:center;gap:6px;text-align:center}
.sd-dc-burst{display:grid;place-items:center;width:76px;height:76px;margin-top:24px;border-radius:50%;background:#b4de54;color:#0b3b3e;box-shadow:0 0 0 12px rgba(180,222,84,.16),0 0 0 26px rgba(180,222,84,.07)}
.sd-dc-burst svg{width:34px;height:34px}
.sd-dc-kicker{margin:30px 0 0;font-size:13px;font-weight:600;color:#b4de54}
html:not([lang|=th]) .sd-dc-kicker{font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.sd-dc-unlocked h2{font-size:26px}
.sd-dc-unlocked p:last-child{margin:0;max-width:34ch;font-size:15px;line-height:1.55;color:#d7e7e1}
.sd-dc-actions{display:grid;gap:10px;margin-top:18px}
.sd-dc-actions .button{width:100%;justify-content:center}
.sd-dc .sd-dc-use{background:#b4de54;border-color:#b4de54;color:#0b3b3e}
.sd-dc .sd-dc-later{background:transparent;border:1px solid rgba(255,255,255,.55);color:#fff}
.sd-dc-valid{margin:12px 0 0;text-align:center;font-size:12px;line-height:1.5;color:#b9d3cc}
.sd-dc-panel{padding:20px 22px;border-radius:20px;background:#fff;border:1px solid #dfe7da;color:#13302e}
.sd-dc-panel h3{margin:0 0 6px;font-size:16px}
.sd-dc-rewards,.sd-dc-ways{list-style:none;margin:0;padding:0}
.sd-dc-reward,.sd-dc-way{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0;border-bottom:1px dashed #dfe7da;font-size:14px;line-height:1.45}
.sd-dc-reward:last-child,.sd-dc-way:last-child{border-bottom:0}
.sd-dc-reward strong,.sd-dc-way strong{white-space:nowrap}
.sd-dc-reward.is-ready strong{color:#3f6f0a}
.sd-dc-reward.is-expired{color:#6b7774}
.sd-dc-reward.is-next strong{font-weight:500;color:#5f6b68}
.sd-dc-panel .sd-dc-birthday{margin-top:8px;padding:4px 0;border:0;background:none;color:#0e4b4f;font:inherit;font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.sd-dc-ref{margin-top:14px;padding-top:14px;border-top:1px solid #dfe7da}
.sd-dc-ref-title{margin:0;font-weight:600}
.sd-dc-ref-text{margin:4px 0 10px;font-size:13px;line-height:1.55;color:#5f6b68}
.sd-dc-ref-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px}
.sd-dc-ref-row .input{min-width:0;font-size:13px}
.sd-dc-panel .sd-dc-line{background:#06c755;border-color:#06c755;color:#fff}
.sd-mz-member{padding:20px;border-radius:20px;background:#eef4e8;color:#13302e}
.sd-mz-member h2{margin:0 0 8px;font-size:17px}
.sd-mz-member p{margin:0;display:flex;align-items:baseline;gap:6px;font-size:14px;color:#5f6b68}
.sd-mz-member strong{font-size:34px;line-height:1.1;color:#0e4b4f}
.sd-mz-member .text-link{margin-top:10px;color:#0e4b4f}
html[data-theme=dark] .sd-mz-member{background:rgba(255,255,255,.05);color:var(--sd-text,#f1f4f0)}
html[data-theme=dark] .sd-mz-member strong{color:var(--sd-accent,#d4f36b)}
.summary-bonus{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;background:#eef4e8;color:#3f6b10;font-size:12px;font-weight:600}
@media(max-width:480px){.sd-dc{padding:20px 18px}.sd-dc-shape{width:30px;height:36px}.sd-dc-drop.is-on::after{top:21px}.sd-dc-star{top:17px}.sd-dc-ref-row{grid-template-columns:1fr 1fr}.sd-dc-ref-row .input{grid-column:1/-1}}
html[data-theme=dark] .sd-dc-panel{background:var(--sd-surface,#103b3b);border-color:var(--sd-line,#2b5552);color:var(--sd-text,#f1f4f0)}
html[data-theme=dark] :is(.sd-dc-reward,.sd-dc-way,.sd-dc-ref){border-color:var(--sd-line,#2b5552)}
html[data-theme=dark] :is(.sd-dc-reward.is-ready strong,.sd-dc-panel .sd-dc-birthday){color:var(--sd-accent,#d4f36b)}
html[data-theme=dark] :is(.sd-dc-ref-text,.sd-dc-reward.is-next strong,.sd-dc-reward.is-expired){color:#a9c2bb}
/* Business pages, second look (Manu, 28 Oct 2026: "not pretty yet"). The sub-bar drops its second logo (the site header
   already has one); the hub hero puts the copy in a solid teal column on the left so the video's faces stay clear;
   the three segment cards lead with their own photo. */
.sd-biz-subnav .sd-biz-crumb-home{display:none}
.sd-biz-subnav .sd-biz-crumb-label a{font-size:16px;font-weight:600;color:var(--teal,#0e4b4f)}
@media(min-width:900px){
  .sd-biz-hero.sd-biz-hero--hub{min-height:min(78vh,720px);place-items:center start;text-align:left}
  .sd-biz-hero--hub::after{background:linear-gradient(90deg,#0b3b3a 0%,#0b3b3a 34%,rgba(11,59,58,.72) 50%,rgba(11,59,58,.1) 72%,rgba(11,59,58,0) 100%)}
  .sd-biz-hero--hub .sd-biz-hero-copy{max-width:560px;margin-left:max(24px,calc((100vw - 1200px)/2))}
  .sd-biz-hero--hub .sd-biz-title{font-size:clamp(44px,5vw,72px);line-height:1.08}
  .sd-biz-hero--hub .sd-biz-lead{margin-inline:0;max-width:46ch}
  .sd-biz-hero-photo{object-position:78% center}
}
@media(max-width:899px){
  .sd-biz-hero.sd-biz-hero--hub{place-items:end start;text-align:left;padding-bottom:36px}
  .sd-biz-hero--hub::after{background:linear-gradient(180deg,rgba(11,59,58,0) 0%,rgba(11,59,58,.25) 35%,rgba(11,59,58,.9) 68%,#0b3b3a 100%)}
  .sd-biz-hero--hub .sd-biz-lead{margin-inline:0}
}
.sd-biz-hub-card{overflow:hidden;padding-top:0}
.sd-biz-hub-photo{display:block;width:calc(100% + 56px);max-width:none;margin:0 -28px 4px;aspect-ratio:3/2;object-fit:cover}
.sd-biz-hub-card .sd-biz-visual-icon{margin-top:-32px;position:relative;z-index:1;box-shadow:0 0 0 4px var(--biz-card,#fff)}
.sd-biz-hub-card h3{font-size:23px}
/* Mobile menu: a solid panel. The header already has its own backdrop-filter, so the menu's blur never reached the page and the page text showed through. */
@media(max-width:800px){html body .main-nav{background:#fbfdf3;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 22px 40px rgba(11,46,45,.16)}html[data-theme=dark] body .main-nav{background:#0b2e2d}}
/* Booking map: "use my current location" button above the map. */
.sd-map-locate{margin:0 0 10px}.sd-map-locate-button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 16px;font-size:14px}.sd-map-locate-button:before{content:"";width:18px;height:18px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v3m0 14v3M2 12h3m14 0h3'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v3m0 14v3M2 12h3m14 0h3'/%3E%3C/svg%3E") center/contain no-repeat}.sd-map-locate-button:disabled{opacity:.6;cursor:progress}
/* Booking choices (duration, guests): every option has a visible border so it reads as a card to tap; the chosen one gets a teal outline. */
html body .large-choice{border:1.5px solid #a9bca4;background:#fff;box-shadow:0 1px 3px rgba(11,46,45,.06)}
html body .large-choice.selected{border-color:#0e4b4f;background:#eef5e6;box-shadow:inset 0 0 0 1px #0e4b4f}
@media(hover:hover){html body .large-choice:not(.selected):hover{border-color:#5f8576}}
html[data-theme=dark] body .large-choice{border-color:#4d7a6e;background:var(--sd-surface);box-shadow:none}
html[data-theme=dark] body .large-choice.selected{border-color:#d4f36b;background:var(--sd-raised);box-shadow:inset 0 0 0 1px #d4f36b}
/* Dark mode: the membership eyebrow and LINE link kept their light-theme teal on dark teal (contrast 1.5). */
html[data-theme=dark] body .sd-member-eyebrow,html[data-theme=dark] body .sd-member a:not(.button){color:var(--sd-accent,#d4f36b)}
/* My SpaDrop (Paul's screens, 2026-10-28): greeting, summary chips, pill tabs, bookings beside history. */
.sd-my{padding:30px 0 64px}
.sd-my-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 24px;margin-bottom:22px}
.sd-my-kicker{margin:0 0 4px;font-size:13px;font-weight:500;color:#5d6b64}
.sd-my-head h1{margin:0;font-size:clamp(30px,4vw,42px);line-height:1.15;font-weight:600;color:#123b3a;letter-spacing:-.01em}
.sd-my-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;min-width:min(100%,560px)}
.sd-my-chip{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:58px;padding:10px 14px;border:1px solid #dfe7da;border-radius:14px;background:#fff;color:#123b3a;text-align:left;font:inherit;cursor:pointer;box-shadow:0 1px 3px rgba(11,46,45,.05)}
.sd-my-chip small{font-size:12px;color:#5d6b64}.sd-my-chip strong{font-size:14px;font-weight:600;line-height:1.35}
.sd-my-chip:hover{border-color:#9fb59b}
.sd-my-tabs{display:flex;gap:6px;width:max-content;max-width:100%;overflow-x:auto;padding:6px;margin-bottom:22px;border:1px solid #dfe7da;border-radius:999px;background:#fff;scrollbar-width:none}
.sd-my-tabs::-webkit-scrollbar{display:none}
.sd-my-tabs [role=tab]{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 18px;border:0;border-radius:999px;background:transparent;color:#123b3a;font:inherit;font-size:15px;font-weight:500;white-space:nowrap;cursor:pointer}
.sd-my-tabs [role=tab][aria-selected=true]{background:#0e4b4f;color:#fff}
.sd-my-badge{padding:2px 8px;border-radius:999px;background:#e4f5b6;color:#123b3a;font-size:12px;font-weight:600}
.sd-my-panel[hidden]{display:none}
.sd-my-panel>.sd-bk-prep{margin-bottom:22px}
.sd-my-grid{display:grid;gap:28px;align-items:start}
.sd-my-history{padding:22px;border:1px solid #dfe7da;border-radius:18px;background:#fff}
.sd-my-history h2,.sd-my-upcoming h2{display:flex;align-items:center;gap:8px;margin:0 0 14px;font-size:22px;font-weight:600}
.sd-my-history .sd-bk-list{gap:0}.sd-my-history .sd-bk-card{padding:16px 0;border:0;border-top:1px solid #e6ece2;border-radius:0;box-shadow:none;background:transparent}
.sd-my-history .sd-bk-card:first-child{border-top:0;padding-top:0}
@media(min-width:960px){.sd-my-grid{grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr)}}
.sd-my-plan,.sd-my-plan-card,.sd-my-details{padding:26px;border:1px solid #dfe7da;border-radius:18px;background:#fff}
.sd-my-plan h2{margin:0 0 10px;font-size:30px;font-weight:600}
.sd-my-plan-left{display:flex;align-items:baseline;gap:10px;margin:0 0 6px}.sd-my-plan-left strong{font-size:44px;line-height:1;color:#0e4b4f}
.sd-my-plan-meta{margin:4px 0;color:#5d6b64;font-size:14px}
.sd-my-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.sd-my-plans-head h2{margin:0 0 6px;font-size:26px;font-weight:600}.sd-my-plans-head p{margin:0 0 18px;max-width:60ch;color:#5d6b64}
.sd-my-plans{display:grid;gap:16px}@media(min-width:760px){.sd-my-plans{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sd-my-plan-card h3{margin:0 0 4px;font-size:24px}.sd-my-plan-price{margin:12px 0 2px}.sd-my-plan-price strong{font-size:30px;color:#0e4b4f}.sd-my-plan-card .button{margin-top:16px;width:100%}
.sd-my-fine{margin-top:14px;font-size:13px;color:#5d6b64}
.sd-my-details{max-width:620px}.sd-my-details h2{margin:0 0 6px;font-size:24px}
@media(max-width:640px){.sd-my{padding-top:22px}.sd-my-chips{gap:8px}.sd-my-chip{padding:9px 10px;min-height:54px}.sd-my-chip strong{font-size:13px}.sd-my-tabs{width:100%}.sd-my-tabs [role=tab]{padding:8px 14px;font-size:14px}.sd-my-history,.sd-my-plan,.sd-my-plan-card,.sd-my-details{padding:18px}}
html[data-theme=dark] body :is(.sd-my-chip,.sd-my-tabs,.sd-my-history,.sd-my-plan,.sd-my-plan-card,.sd-my-details){background:var(--sd-surface,#103b3b);border-color:var(--sd-line,#2b5552);color:var(--sd-text,#f1f4f0)}
html[data-theme=dark] body :is(.sd-my-head h1,.sd-my-tabs [role=tab],.sd-my-plan-left strong,.sd-my-plan-price strong){color:var(--sd-text,#f1f4f0)}
html[data-theme=dark] body :is(.sd-my-kicker,.sd-my-chip small,.sd-my-plan-meta,.sd-my-plans-head p,.sd-my-fine){color:var(--sd-muted,#b8c6bf)}
html[data-theme=dark] body .sd-my-tabs [role=tab][aria-selected=true]{background:#d4f36b;color:#0b2e2d}
.sd-my .sd-bk-count:empty{display:none}

/* ข้อมูลของฉัน extras (Paul's brief, 29 Oct 2026): address and birthday take the full row of the two-column form. */
.account-profile-form .profile-wide,.account-profile-form .profile-birthday{grid-column:1/-1}
.account-profile-form textarea.input{min-height:72px;resize:vertical}
.profile-birthday{margin:0;padding:0;border:0;min-width:0}
.profile-birthday legend{padding:0;margin-bottom:6px}
.profile-birthday-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,1.2fr);gap:10px}
.profile-birthday-saved{margin:0;line-height:1.6}

/* Header (Paul's brief, 29 Oct 2026): "SpaDrop ของฉัน" with an orange dot for unpaid bookings, a sign-in button, the
   phone menu extras (account row, FAQ · Contact · languages, Book now) and a sticky "Book now" bar under 800px. */
.header-user>summary{position:relative}
.header-user-dot{position:absolute;top:3px;left:29px;width:10px;height:10px;border-radius:50%;background:#f28b2c;box-shadow:0 0 0 2px #fff}
.header-user-menu{min-width:240px}
.header-user-top{display:flex;align-items:center;gap:10px;margin-bottom:4px;padding:10px 12px 12px;border-bottom:1px solid var(--line)}
.header-user-top strong{display:block;font-size:15px;line-height:1.3;color:var(--ink)}
.header-user-top small{display:block;font-size:12px;line-height:1.4;color:var(--muted)}
.header-user-menu a[data-account-tab]{display:flex;justify-content:space-between;align-items:center;gap:12px}
.header-user-menu a[data-account-tab] small{font-size:12px;font-weight:600;color:var(--teal);white-space:nowrap}
.header-user-menu a[data-account-tab=bookings] small{color:#b4570b}
.header-user-menu button[data-action=logout]{margin-top:4px;border-top:1px solid var(--line);border-radius:0 0 10px 10px}
.header-signin{white-space:nowrap}
.nav-extra,.sd-sticky-book{display:none}
@media(max-width:800px){
  .header-signin{display:none}
  .nav-extra{display:grid;gap:10px;margin-top:8px;padding-top:14px;border-top:1px solid var(--line)}
  .nav-extra .nav-account{display:flex;align-items:center;gap:10px;font-weight:600}
  .nav-extra .nav-small{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:13px;color:var(--muted)}
  .nav-extra .nav-small a{padding-block:6px;font-size:13px;font-weight:500}
  .nav-extra .nav-book{width:100%;justify-content:center;color:#fff}
  .sd-sticky-book{position:fixed;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));z-index:70;display:flex;align-items:center;justify-content:center;min-height:52px;border-radius:999px;background:var(--teal);color:#fff;font-size:16px;font-weight:600;text-decoration:none;box-shadow:0 14px 30px -12px rgba(11,46,45,.55)}
  .sd-sticky-book:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
  body:has(.sd-sticky-book){padding-bottom:76px}
  body:has(.sd-sticky-book) .sd-chat{bottom:calc(max(12px,env(safe-area-inset-bottom)) + 64px)}
  body:has(.sd-sticky-book) .sd-chat.is-open{bottom:max(12px,env(safe-area-inset-bottom))}
  body:has(.sd-chat.is-open) .sd-sticky-book{display:none}
  .site-header:has(.main-nav.open)+.sd-sticky-book,.server-site-header:has(.server-mobile-menu[open])+.sd-sticky-book{display:none}
}
html[data-theme=dark] .sd-sticky-book{background:var(--sd-accent,#d4f36b);color:#0b2e2d}
html[data-theme=dark] .header-user-dot{box-shadow:0 0 0 2px #0b2e2d}
html[data-theme=dark] .header-user-top{border-color:var(--sd-line,#2b5552)}
html[data-theme=dark] .header-user-top strong{color:var(--sd-text,#f1f4f0)}
html[data-theme=dark] .header-user-menu a[data-account-tab] small{color:var(--sd-accent,#d4f36b)}
html[data-theme=dark] .header-user-menu button[data-action=logout]{border-color:var(--sd-line,#2b5552)}

/* Membership tab (Paul's brief, 29 Oct 2026): rolled-over sessions, and the Relax Club offer for Chill members. */
.sd-my-carried{margin:6px 0 0;font-size:14px;line-height:1.5;color:var(--teal);font-weight:500}
.sd-my-upsell{margin-top:14px;padding:18px 20px;border-radius:18px;background:#eef4e8;color:#13302e}
.sd-my-upsell h3{margin:0 0 4px;font-size:17px}
.sd-my-upsell p{margin:0 0 8px;font-size:14px;line-height:1.55;color:#4d5c58}
.sd-my-upsell .text-link{color:#0e4b4f;font-weight:600}
html[data-theme=dark] .sd-my-carried{color:var(--sd-accent,#d4f36b)}
html[data-theme=dark] .sd-my-upsell{background:rgba(255,255,255,.05);color:var(--sd-text,#f1f4f0)}
html[data-theme=dark] .sd-my-upsell p{color:#a9c2bb}
html[data-theme=dark] .sd-my-upsell .text-link{color:var(--sd-accent,#d4f36b)}
/* Slow phones showed empty photo frames while the pictures downloaded (Manu, 29 Oct 2026): a soft brand tint fills the frame until the photo paints. */
img[loading="lazy"][src*=".webp"]{background:#e6efec}
html[data-theme="dark"] img[loading="lazy"][src*=".webp"]{background:#123f3e}
/* Paul (29 Oct 2026): a perk can carry a quiet second line, e.g. Relax Club "(90 → 120 min)". */
.sd-mplan .sd-mplan-sub{display:block;margin-top:2px;font-size:.88em}
/* Service areas menu item (Paul's Location Mockup v3): a small lime NEW pill after the label. */
.nav-areas{white-space:nowrap}
.nav-new{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;background:#b4de54;color:#0e4b4f;font-size:10px;font-weight:700;line-height:1.5;vertical-align:2px}
/* Locations phase 1 (Paul's Location Mockup v3, 30 Oct 2026; inc/locations.php, assets/waitlist.js). */
.sd-areas{margin:6px 0 22px}
.sd-areas-title{margin:0 0 12px;font-size:clamp(20px,3vw,26px);font-weight:700;line-height:1.25;color:#0e4b4f}
.sd-area-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.sd-area-chip{padding:7px 14px;border:1px solid #d5e2dc;border-radius:999px;background:#fff;color:#0e4b4f;font-size:14px;line-height:1.3}
.sd-areas-check{margin:12px 0 0;font-size:14px;color:#5b6b64}
.sd-areas-check a{color:#0e4b4f;font-weight:600}
.sd-waitlist-form{display:grid;gap:10px;margin-top:14px}
.sd-waitlist-form select,.sd-waitlist-form input[name="contact"]{width:100%;min-height:48px;padding:0 14px;border:1px solid #cfdcd6;border-radius:12px;background:#fff;color:#16302f;font:inherit;font-size:16px}
.sd-waitlist-form .button{width:100%;justify-content:center;min-height:48px}
.sd-waitlist-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sd-waitlist-status{margin:0;min-height:1em;font-size:14px;font-weight:600}
.sd-waitlist-status.is-done{color:#2f7a1f}.sd-waitlist-status.is-error{color:#b42318}
.sd-waitlist-privacy{margin:0;font-size:12px;color:#566967}
.sd-waitlist--areas{margin:16px 0 0;padding:20px;border-radius:18px;background:linear-gradient(160deg,#105357,#0a3639);color:#fff}
.sd-waitlist--areas .sd-waitlist-soon{margin:0;color:#b4de54;font-size:13px;font-weight:700;letter-spacing:.04em}
.sd-waitlist--areas .sd-waitlist-names{margin:4px 0 0;font-size:20px;font-weight:700;line-height:1.3}
.sd-waitlist--areas .sd-waitlist-status.is-done{color:#d6f08b}.sd-waitlist--areas .sd-waitlist-status.is-error{color:#ffb4ab}
.sd-waitlist--areas .sd-waitlist-privacy{color:#a9c7be}
.sd-waitlist--home{padding:0 0 56px}
.sd-waitlist-card{max-width:720px;margin:0 auto;padding:26px 22px;border:1px solid var(--line,#e3ebe7);border-radius:26px;background:linear-gradient(180deg,#f6faf3,#fff)}
.sd-waitlist-card h2{margin:4px 0 14px;font-size:clamp(24px,4vw,34px);line-height:1.2;color:#0e4b4f}
.sd-waitlist-cities{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
.sd-waitlist-cities li{padding:14px 10px;border:1.5px dashed #b4de54;border-radius:14px;background:#fff;text-align:center;font-weight:700;color:#0e4b4f}
.sd-waitlist-lead{margin:14px 0 0;color:#4f615a;line-height:1.6}
@media(min-width:720px){.sd-waitlist-cities{grid-template-columns:repeat(4,minmax(0,1fr))}.sd-waitlist-card .sd-waitlist-form{grid-template-columns:1fr 1.4fr auto;align-items:start}.sd-waitlist-card .sd-waitlist-form .button{width:auto;padding-inline:22px}.sd-waitlist-card .sd-waitlist-status,.sd-waitlist-card .sd-waitlist-privacy{grid-column:1/-1}}
html[data-theme=dark] .sd-area-chip{background:#103b3b;border-color:#2b5552;color:#e7f3ee}
html[data-theme=dark] .sd-areas-title,html[data-theme=dark] .sd-waitlist-card h2,html[data-theme=dark] .sd-areas-check a{color:#e7f3ee}
html[data-theme=dark] .sd-waitlist-card{background:#103b3b;border-color:#2b5552}
html[data-theme=dark] .sd-waitlist-cities li{background:#0b2f31;color:#e7f3ee}
html[data-theme=dark] .sd-waitlist-lead{color:#b8cec7}
/* Review flow (Paul's PDF, 30 Oct 2026): the invite on a finished booking and the rating dialog (app.js reviewBlock/openReview). */
.sd-bk-review{display:grid;justify-items:center;gap:8px;margin:14px 0 0;padding:16px;border-radius:16px;background:#fff;border:1px solid #e3ebe7;text-align:center}
.sd-bk-review-q{margin:0;font-weight:700;color:#16302f}
.sd-bk-stars-row,.sd-rate-stars{display:flex;justify-content:center;gap:6px}
.sd-bk-star,.sd-rate-star{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;color:#0e4b4f}
.sd-bk-star svg,.sd-rate-star svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
.sd-bk-star:hover svg,.sd-rate-star.is-on svg{fill:#0e4b4f}
.sd-bk-star:focus-visible,.sd-rate-star:focus-visible,.sd-rate-tag:focus-visible{outline:3px solid #b4de54;outline-offset:2px}
.sd-bk-review small{color:#6b7a73}
.sd-bk-review.is-done{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;text-align:left;gap:6px 12px}
.sd-bk-stars{color:#0e4b4f;letter-spacing:2px}
.sd-bk-review-tags{flex:1;min-width:140px;color:#4f615a;font-size:14px}
.sd-rate h2{margin:0 0 14px}
.sd-rate-who{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;background:#f1f6ee}
.sd-rate-who small{display:block;color:#6b7a73}
.sd-rate-stars{margin:18px 0 0}
.sd-rate-star{width:52px;height:52px}.sd-rate-star svg{width:38px;height:38px}
.sd-rate-word{min-height:1.4em;margin:4px 0 12px;text-align:center;font-weight:700;color:#0e4b4f}
.sd-rate-label{display:block;margin:12px 0 8px;font-weight:700;color:#16302f}
.sd-rate-tags{display:flex;flex-wrap:wrap;gap:8px}
.sd-rate-tag{min-height:40px;padding:0 14px;border:1px solid #cfdcd6;border-radius:999px;background:#fff;color:#16302f;font:inherit;font-size:14px;cursor:pointer}
.sd-rate-tag[aria-pressed="true"]{background:#0e4b4f;border-color:#0e4b4f;color:#fff}
.sd-rate textarea{width:100%;padding:12px;border:1px solid #cfdcd6;border-radius:12px;font:inherit;font-size:16px;resize:vertical}
.sd-rate-same{display:flex;align-items:center;gap:10px;margin:14px 0 0;font-weight:600}
.sd-rate-same input{width:20px;height:20px;accent-color:#0e4b4f}
.sd-rate-error{min-height:1em;margin:10px 0 0;color:#b42318;font-weight:600}
.sd-rate-submit,.sd-rate .button{width:100%;justify-content:center;margin-top:10px}
html[data-theme=dark] .sd-bk-review{background:#103b3b;border-color:#2b5552}
html[data-theme=dark] .sd-bk-review-q,html[data-theme=dark] .sd-rate-label{color:#e7f3ee}
html[data-theme=dark] .sd-bk-star,html[data-theme=dark] .sd-rate-star,html[data-theme=dark] .sd-bk-stars{color:#b4de54}
html[data-theme=dark] .sd-bk-star:hover svg,html[data-theme=dark] .sd-rate-star.is-on svg{fill:#b4de54}
html[data-theme=dark] .sd-rate-who{background:#0b2f31}
html[data-theme=dark] .sd-rate-tag{background:#103b3b;border-color:#2b5552;color:#e7f3ee}
html[data-theme=dark] .sd-rate-tag[aria-pressed="true"]{background:#b4de54;border-color:#b4de54;color:#0e4b4f}
/* Keyword pages style every <p>; the area title and the dark waitlist card keep their own colours and spacing. */
.sd-areas p.sd-areas-title{color:#0e4b4f}
.sd-waitlist.sd-waitlist--areas p{margin:0;color:#fff}
.sd-waitlist.sd-waitlist--areas p.sd-waitlist-soon{color:#b4de54}
.sd-waitlist.sd-waitlist--areas p.sd-waitlist-names{margin-top:4px;color:#fff}
.sd-waitlist.sd-waitlist--areas p.sd-waitlist-privacy{color:#a9c7be}
.sd-waitlist.sd-waitlist--areas p.sd-waitlist-status.is-done{color:#d6f08b}
.sd-waitlist.sd-waitlist--areas p.sd-waitlist-status.is-error{color:#ffb4ab}
.sd-waitlist-form .button-lime{background:#b4de54;border-color:#b4de54;color:#0e4b4f;font-weight:700}
html[data-theme=dark] .sd-areas p.sd-areas-title{color:#e7f3ee}

/* Glass header (Manu, 31 Oct 2026): frosted over the page, and on scroll it lifts into a smaller capsule so more of the
   clip shows. #site-header keeps its full height the whole time, so shrinking never moves the page, and the empty part of
   that slot lets clicks through. */
:root{--sd-hdr-h:87px;--sd-hdr-sm:62px}
@media(max-width:800px){:root{--sd-hdr-h:75px;--sd-hdr-sm:58px}}
@media(max-width:540px){:root{--sd-hdr-h:68px;--sd-hdr-sm:54px}}
.spadrop-site #site-header{height:var(--sd-hdr-h);pointer-events:none}
.spadrop-site #site-header>*{pointer-events:auto}
body .site-header,body.home .site-header,body.is-auth-page .site-header{pointer-events:auto;max-width:100%;margin-inline:auto;background:linear-gradient(180deg,rgba(255,255,255,.74),rgba(255,255,255,.6));border:0;border-radius:0;box-shadow:inset 0 -1px 0 rgba(255,255,255,.5);-webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);transition:max-width .4s var(--sd-ease),transform .4s var(--sd-ease),border-radius .4s var(--sd-ease),box-shadow .4s var(--sd-ease)}
.site-header .header-row{transition:min-height .4s var(--sd-ease),width .4s var(--sd-ease)}
.site-header .brand img{transform-origin:left center;transition:transform .4s var(--sd-ease)}
html.sd-scrolled .site-header{transform:translateY(8px);max-width:min(1180px,calc(100% - 24px));border-radius:999px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),inset 0 1px 0 rgba(255,255,255,.8),0 14px 34px -18px rgba(11,46,45,.5)}
html.sd-scrolled .site-header .header-row{min-height:var(--sd-hdr-sm);width:calc(100% - 36px)}
html.sd-scrolled .site-header .brand img{transform:scale(.84)}
html.sd-scrolled .site-header .header-actions .button{min-height:42px}
@media(max-width:540px){html.sd-scrolled .site-header .header-row{width:calc(100% - 20px)}html.sd-scrolled .site-header .header-actions .button{min-height:38px}}
@media(max-width:400px){html.sd-scrolled .site-header{max-width:calc(100% - 12px)}html.sd-scrolled .site-header .header-row{width:calc(100% - 12px)}}
html[data-theme=dark] body .site-header,html[data-theme=dark] body.home .site-header,html[data-theme=dark] body.is-auth-page .site-header{background:linear-gradient(180deg,rgba(11,46,45,.74),rgba(11,46,45,.6));box-shadow:inset 0 -1px 0 rgba(247,247,242,.08)}
html[data-theme=dark].sd-scrolled body .site-header,html[data-theme=dark].sd-scrolled body.home .site-header{box-shadow:inset 0 0 0 1px rgba(247,247,242,.12),0 14px 34px -18px rgba(0,0,0,.7)}
@media(min-width:801px){html[data-theme=dark] body .main-nav{background:transparent;box-shadow:none}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){body .site-header,body.home .site-header{background:rgba(255,255,255,.96)}}
@media(prefers-reduced-motion:reduce){.site-header,.site-header .header-row,.site-header .brand img{transition:none}}
/* The home clip runs up behind the header. The hero stays where it was; only its backdrop and clip extend above it. */
body.home #main{margin-top:calc(-1 * var(--sd-hdr-h))}
body.home :is(.reference-home,.spadrop-server-content){padding-top:var(--sd-hdr-h)}
.ref-hero{overflow:visible;clip-path:inset(calc(-1 * var(--sd-hdr-h)) 0 0 0)}
.ref-hero .ref-backdrop{top:calc(-1 * var(--sd-hdr-h))}

/* The wide cards play their own clip (Manu, 31 Oct 2026). Phones: the clip whole on top. Wider: the card's left side. */
.drop-card--wide{flex-wrap:wrap;gap:0 12px;padding:0;overflow:hidden}
.drop-wide-media{position:relative;flex:0 0 100%;aspect-ratio:16/9;margin:0;overflow:hidden;background:var(--drop-teal)}
.drop-wide-media :is(img,video){position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:36% center}
.drop-card--wide .drop-card-body{padding:16px 0 18px 18px}
.drop-card--wide .drop-arrow{margin-right:18px}
@media(min-width:700px){
  /* Same photo card as the grid above, text on the picture. 16:9 is the clip's own shape, so the whole frame shows and nothing zooms. */
  .drop-card--wide{display:block;aspect-ratio:16/9;min-height:0;padding:0;border:0;background:#183b3b;box-shadow:none;color:#fff}
  .drop-wide-media{position:absolute;inset:0;aspect-ratio:auto}
  .drop-wide-media :is(img,video){object-position:center}
  .drop-wide-media:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,28,26,0) 38%,rgba(9,28,26,.5) 66%,rgba(9,28,26,.88) 100%)}
  .drop-card--wide .drop-card-body{position:absolute;left:28px;right:104px;bottom:24px;padding:0}
  .drop-card--wide :is(.drop-card-title,.drop-card-title a,.drop-card-kicker,.drop-card-kicker a,.drop-card-meta,.drop-card-meta strong,.drop-package-dot){color:#fff}
  .drop-card--wide .drop-card-title{line-height:1.25}
  .drop-card--wide .drop-arrow{position:absolute;top:auto;right:24px;bottom:24px;margin:0;width:56px;height:56px;background:#fff;color:var(--drop-teal,#0e4b4f)}
  html[data-theme=dark] .drop-card--wide{background:#183b3b;color:#fff}
  html[data-theme=dark] .drop-card--wide .drop-card-meta strong{color:#fff}
}

/* English labels are the longest: between the desktop nav and the phone menu the row ran up to 107px past the screen. */
@media(min-width:801px) and (max-width:1023px){
  html:lang(en) .header-row{width:calc(100% - 32px);gap:12px}
  html:lang(en).sd-scrolled .site-header .header-row{width:calc(100% - 20px)}
  html:lang(en) .brand img{width:100px}
  html:lang(en) .main-nav{gap:8px;font-size:12.5px}
  html:lang(en) .main-nav .nav-new{display:none}
  html:lang(en) .header-actions{gap:6px}
  html:lang(en) .header-actions .button{padding-inline:10px}
}
/* The Massages arrow made the row longer again: English just above that range, Thai and Chinese at its narrow end. */
@media(min-width:1024px) and (max-width:1099px){
  html:lang(en) .header-row{width:calc(100% - 32px);gap:12px}
  html:lang(en).sd-scrolled .site-header .header-row{width:calc(100% - 20px)}
  html:lang(en) .main-nav{gap:10px}
  html:lang(en) .header-actions{gap:8px}
}
@media(min-width:801px) and (max-width:829px){
  html:lang(en) .header-row{gap:8px}
  html:lang(en) .main-nav{gap:6px}
}
@media(min-width:1200px) and (max-width:1259px){
  html:lang(en) .header-row{gap:18px}
}
@media(min-width:801px) and (max-width:879px){
  html:not(:lang(en)) .header-row{width:calc(100% - 28px);gap:10px}
  html:not(:lang(en)).sd-scrolled .site-header .header-row{width:calc(100% - 20px)}
  html:not(:lang(en)) .brand img{width:100px}
  html:not(:lang(en)) .main-nav{gap:8px}
  html:not(:lang(en)) .header-actions{gap:6px}
  html:not(:lang(en)) .header-actions .button{padding-inline:10px}
}
.header-actions .button{white-space:nowrap}
/* Signed in, the avatar takes the room of the Book now pill; on a phone the bottom bar books. */
@media(max-width:480px){.header-actions:has(.header-user) .button-primary{display:none}}
@media(max-width:400px){.header-actions{gap:3px}.header-actions .button{min-width:0;padding-inline:9px;font-size:13px}}
@media(max-width:359px){.header-actions .button{padding-inline:7px;font-size:12px}}
@media(min-width:801px) and (max-width:1299px){.header-user-name{display:none}}

/* UX audit, 2 Nov 2026. */
.field-error{margin:6px 0 0;color:#b3261e;font-size:13.5px;line-height:1.4}
.input[aria-invalid="true"]{border-color:#b3261e;box-shadow:0 0 0 1px #b3261e}
html[data-theme=dark] .field-error{color:#ffb4ab}
html[data-theme=dark] .sd-biz-subnav .sd-biz-crumb-label a{color:var(--sd-accent,#d4f36b)}
html[data-theme=dark] .sd-waitlist-privacy{color:#b9cdc6}
.sd-notfound{padding-block:72px;text-align:center}
.sd-notfound .button-row{justify-content:center}
@media(max-width:800px){
  .main-nav.open{max-height:calc(100dvh - 90px);overflow-y:auto;overscroll-behavior:contain}
  /* Lock the page behind the open menu on <html> only: overflow on <body> would make it the sticky header's scroll box and
     send the header and its menu back to the top of the page (Paul's phone recording, 9 Nov 2026). */
  html:has(.main-nav.open){overflow:hidden}
  html{scroll-padding-bottom:88px}
  .sd-sticky-book{transition:opacity .2s ease,transform .2s ease,visibility .2s}
  html.sd-cta-seen .sd-sticky-book{opacity:0;visibility:hidden;transform:translateY(16px);pointer-events:none}
  html.sd-cta-seen body:has(.sd-sticky-book) .sd-chat:not(.is-open){bottom:max(12px,env(safe-area-inset-bottom))}
  .quick-field select{font-size:16px;min-height:44px}
  html body .header-actions .button.button-small,html body .header-actions .button,html.sd-scrolled .site-header .header-actions .button{min-height:44px}
  html body main .button,html body main .button.button-small{min-height:44px}
  html body .catalogue-duration .catalogue-durations button{min-height:44px}
  .sd-gift-why-link,.editorial-breadcrumb,main a.text-link{display:inline-flex;align-items:center;min-height:44px}
}
@media(max-width:800px) and (max-height:720px){html.sd-cta-seen .sd-chat:not(.is-open){visibility:hidden}}
@media(max-height:480px){.sd-chat:not(.is-open) .sd-chat-launcher{width:44px;height:44px}}
select.input,.sd-waitlist select{appearance:none;-webkit-appearance:none;min-height:50px;padding-right:38px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23566967' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.booking-next-hint{margin:14px 0 0;color:#566967;font-size:14px;text-align:right}
.dark-footer-bottom{padding-right:84px}
.ref-control label,.ref-control-label{color:#4f5e4c}
.ref-description{color:#4f5b59}
.editorial-head--hero .editorial-breadcrumb{color:#fff;text-shadow:0 1px 8px rgba(9,40,39,.9)}
.editorial-head--hero .editorial-breadcrumb span{color:rgba(255,255,255,.8)}
.editorial-head--hero .editorial-eyebrow{padding:2px 12px;border-radius:999px;background:rgba(9,40,39,.55)}
html[data-theme=dark] .contact-item>span{color:#b9cdc6}
html[data-theme=dark] .booking-next-hint{color:#b9cdc6}
@media(max-width:800px){#toast{bottom:96px}}

/* Membership menu (Paul, 2 Nov 2026): uses the Massages dropdown; rows carry an icon and a price line on wide screens. */
@media(min-width:801px){.main-nav .nav-massages-panel.nav-member-panel,.server-site-header .nav-massages-panel.nav-member-panel{width:372px;min-width:372px}}
.main-nav .nav-member-panel a.nav-member-row,.server-mobile-menu .nav-member-panel a.nav-member-row{gap:14px;padding:10px 12px;border-radius:12px;font-weight:400;white-space:normal}
.nav-member-icon{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:12px;background:#eef3e6;color:var(--teal)}
.nav-member-text{display:grid;gap:2px;min-width:0}
.nav-member-text strong{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--ink)}
.nav-member-text small{color:var(--muted);font-size:13px;line-height:1.35}
.nav-member-badge{white-space:nowrap;padding:2px 8px;border-radius:999px;background:#dff0a8;color:#0b2e2d;font-size:11px;font-style:normal;font-weight:700;line-height:1.5}
.nav-member-short{display:none;margin-left:auto;color:var(--muted);font-size:13px;white-space:nowrap}
.main-nav .nav-member-panel a.nav-member-card,.server-mobile-menu .nav-member-panel a.nav-member-card{background:#f1f6e9}
.nav-member-card .nav-member-icon{background:#fff}
.sd-mplan{scroll-margin-top:110px}
.sd-mplan.is-target{outline:3px solid var(--lime);outline-offset:3px}
html[data-theme=dark] .nav-member-icon{background:rgba(212,243,107,.14);color:var(--sd-accent,#d4f36b)}
html[data-theme=dark] .nav-member-text strong{color:#fff}
html[data-theme=dark] .main-nav .nav-member-panel a.nav-member-card{background:rgba(212,243,107,.1)}
@media(max-width:800px){
  .nav-member-icon,.nav-member-text small{display:none}
  .nav-member-short{display:inline}
  .nav-extra .nav-book{position:sticky;bottom:0;z-index:2}
}


/* Membership plan pages (Paul's membership pages mockup, 7 Nov 2026): /membership/#relax-club, #chill, #compare. */
.sd-mpage{--mp-bg:#f2f5ec;--mp-ink:var(--ink);--mp-muted:var(--muted);--mp-card:#fff;--mp-line:#e1e7dd;--mp-icon:#eef3e6}
.sd-mpage--relax{--mp-bg:#1f4442;--mp-ink:#fff;--mp-muted:#c7dad6;--mp-card:rgba(255,255,255,.07);--mp-line:rgba(255,255,255,.14);--mp-icon:rgba(255,255,255,.1)}
.sd-mpage-hero{background:var(--mp-bg);color:var(--mp-ink);overflow:hidden}
.sd-mpage-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:40px;min-height:560px}
.sd-mpage-copy{padding:56px 0}
.sd-mpage-badge{display:inline-block;padding:4px 12px;border-radius:999px;background:var(--lime);color:var(--ink);font-size:12px;font-weight:700;letter-spacing:.02em}
.sd-mpage--chill .sd-mpage-badge{background:#e3ead8}
.sd-mpage-eyebrow{margin:14px 0 6px;font-size:15px;font-weight:600;color:var(--teal)}
.sd-mpage--relax .sd-mpage-eyebrow{color:var(--lime)}
.sd-mpage h1{font-size:clamp(36px,4.4vw,58px);line-height:1.08;font-weight:700;letter-spacing:-.03em}
.sd-mpage-price{display:flex;align-items:stretch;gap:24px;width:max-content;max-width:100%;margin-top:26px;padding:22px 26px;border:1px solid var(--mp-line);border-radius:20px;background:var(--mp-card)}
.sd-mpage--chill .sd-mpage-price{background:#fff}
.sd-mpage-price>div{display:grid;align-content:center;gap:4px}
.sd-mpage-price>div+div{padding-left:24px;border-left:1px solid var(--mp-line)}
.sd-mpage-price p{display:flex;align-items:baseline;gap:6px}
.sd-mpage-price>div:first-child strong{font-size:clamp(38px,4vw,50px);line-height:1;font-weight:700;letter-spacing:-.03em}
.sd-mpage-price>div+div strong{font-size:24px;font-weight:700;color:var(--teal)}
.sd-mpage--relax .sd-mpage-price>div+div strong{color:var(--lime)}
.sd-mpage-price small{font-size:13px;color:var(--mp-muted)}
.sd-mpage-price b{font-size:13px;font-weight:700}
.sd-mpage--relax .sd-mpage-price b{color:var(--lime)}
.sd-mpage-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:26px}
.sd-mpage-cta .button{min-height:56px;padding-inline:34px;font-weight:600}
.sd-mpage-cta span{font-size:13px;color:var(--mp-muted)}
.sd-mpage-photo{align-self:stretch;margin:0 calc(50% - 50vw) 0 0;min-height:420px}
.sd-mpage-photo img{width:100%;height:100%;object-fit:cover;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%);mask-image:linear-gradient(90deg,transparent 0,#000 22%)}
.sd-mpage--relax .sd-mpage-photo img{opacity:.85}
.sd-mpage-body,.sd-mpage-tail{padding-top:64px}
.sd-mpage--relax .sd-mpage-body{max-width:none;width:auto;padding:64px max(40px,calc((100vw - var(--width))/2)) 56px;background:var(--mp-bg);color:var(--mp-ink)}
.sd-mpage h2{font-size:clamp(26px,2.6vw,34px);margin-bottom:24px}
.sd-mpage-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.sd-mpage-card{padding:22px;border:1px solid var(--mp-line);border-radius:18px;background:var(--mp-card)}
.sd-mpage-icon{display:grid;place-items:center;width:44px;height:44px;margin-bottom:22px;border-radius:12px;background:var(--mp-icon);color:var(--teal)}
.sd-mpage--relax .sd-mpage-icon{color:#e7f3ee}
.sd-mpage-card h3{font-size:17px;margin-bottom:6px}
.sd-mpage-card p{font-size:14px;color:var(--mp-muted)}
.sd-mpage-tail{padding-bottom:64px}
.sd-mpage-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0 0 30px;padding:0;list-style:none}
.sd-mpage-steps li{display:flex;gap:14px}
.sd-mpage-step{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;background:var(--teal);color:#fff;font-weight:600}
.sd-mpage-steps h3{font-size:17px;margin-bottom:4px}
.sd-mpage-steps p,.sd-mpage-tail .sd-mpage-maths p{font-size:14px;color:var(--muted)}
.sd-mpage-maths{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 28px;border-radius:20px;background:#f2f5ec}
.sd-mpage-up{border:1px solid #d9eaa0;background:#f7fbe9}
.sd-mpage-maths h3{font-size:19px;margin-bottom:4px}
.sd-mpage-maths .button{flex:none}
.sd-mpage-fine{margin-top:22px;font-size:13px;color:var(--muted)}
.sd-mpage--compare{padding:60px 0 70px;text-align:center}
.sd-mpage--compare .sd-mpage-eyebrow{margin-top:0}
.sd-mpage-lead{max-width:640px;margin:14px auto 0;color:var(--muted);font-size:17px}
.sd-mpage-table{max-width:1120px;margin:36px auto 0;overflow-x:auto;border-radius:24px;background:#fff;box-shadow:0 24px 60px -36px #0b2e2d55}
.sd-mpage-table table{width:100%;min-width:640px;border-collapse:collapse;text-align:center}
.sd-mpage-table th,.sd-mpage-table td{padding:15px 18px;border-bottom:1px solid #edf0eb;font-size:15px}
.sd-mpage-table thead th{padding-top:26px;font-size:19px;font-weight:700;vertical-align:bottom}
.sd-mpage-table thead small{display:block;margin-top:2px;font-size:13px;font-weight:400;color:var(--muted)}
.sd-mpage-table tbody th{text-align:left;font-weight:400}
.sd-mpage-table tbody td{font-weight:600}
.sd-mpage-table .is-best{background:#1f4442;color:#fff;border-bottom-color:rgba(255,255,255,.12)}
.sd-mpage-table thead .is-best{color:var(--lime)}
.sd-mpage-table thead .is-best small{color:#c7dad6}
.sd-mpage-table thead .is-best .sd-mpage-badge{display:table;margin:0 auto 6px;font-size:11px}
.sd-mpage-table tfoot td{border-bottom:0;padding:20px 18px 26px}
.sd-mpage-yes{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#e8f1d8;color:var(--teal)}
.sd-mpage-yes svg{width:14px;height:14px}
.is-best .sd-mpage-yes{background:var(--lime);color:var(--ink)}
.sd-mpage--compare .sd-mpage-fine{line-height:1.8}
@media(max-width:900px){
  .sd-mpage-hero-grid{grid-template-columns:1fr;gap:0;min-height:0}
  .sd-mpage-copy{padding:40px 0 28px}
  .sd-mpage-photo{order:-1;margin:0 calc(50% - 50vw);min-height:0;height:260px}
  .sd-mpage-photo img{-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(180deg,#000 70%,transparent)}
  .sd-mpage-grid,.sd-mpage-steps{grid-template-columns:1fr}
  .sd-mpage-price{width:auto;padding:18px}
  .sd-mpage-price>div+div{padding-left:18px}
  .sd-mpage-maths{flex-direction:column;align-items:flex-start}
  .sd-mpage--relax .sd-mpage-body{padding:48px 20px 40px}
}
html[data-theme=dark] .sd-mpage--chill{--mp-bg:#123534;--mp-ink:#fff;--mp-muted:#c7dad6;--mp-card:rgba(255,255,255,.06);--mp-line:rgba(255,255,255,.14);--mp-icon:rgba(255,255,255,.1)}
html[data-theme=dark] .sd-mpage--chill .sd-mpage-price{background:rgba(255,255,255,.06)}
html[data-theme=dark] .sd-mpage-maths{background:rgba(255,255,255,.06)}
html[data-theme=dark] .sd-mpage-table{background:#123534}
html[data-theme=dark] .sd-mpage-table th,html[data-theme=dark] .sd-mpage-table td{border-bottom-color:rgba(255,255,255,.1)}
html[data-theme=dark] .sd-mpage-table .is-best{background:#0b2928}
@media(max-width:520px){.sd-mpage-price{flex-direction:column;gap:14px;width:100%}.sd-mpage-price>div+div{padding:14px 0 0;border-left:0;border-top:1px solid var(--mp-line)}.sd-mpage-price span,.sd-mpage-price b{white-space:nowrap}}

/* Compare plans on phones (Manu, 7 Nov 2026: the table scrolled sideways and hid the row names and Relax Club).
   Below 760px each row becomes a full-width row name above the three plan values, so everything fits the screen. */
@media(max-width:760px){
  .sd-mpage--compare{padding-top:36px}
  .sd-mpage-table{overflow:visible;margin-top:24px;border-radius:20px}
  .sd-mpage-table table,.sd-mpage-table thead,.sd-mpage-table tbody,.sd-mpage-table tfoot{display:block;min-width:0}
  .sd-mpage-table tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .sd-mpage-table thead td:first-child,.sd-mpage-table tfoot td:first-child{display:none}
  .sd-mpage-table th,.sd-mpage-table td{min-width:0;padding:10px 6px;font-size:14px;overflow-wrap:anywhere}
  .sd-mpage-table thead th{padding:18px 6px 12px;font-size:16px;line-height:1.2}
  .sd-mpage-table thead th small{font-size:12px}
  .sd-mpage-table thead .is-best{border-radius:20px 20px 0 0}
  .sd-mpage-table tbody th{grid-column:1/-1;padding:12px 12px 2px;border-bottom:0;background:#f6f8f3;color:var(--muted);font-size:13px;text-align:center}
  .sd-mpage-table tbody td{background:#f6f8f3;padding-top:4px}
  .sd-mpage-table tbody td.is-best{background:#1f4442}
  .sd-mpage-table tbody tr:nth-child(odd) th,.sd-mpage-table tbody tr:nth-child(odd) td:not(.is-best){background:#fff}
  .sd-mpage-table tfoot td{padding:14px 4px 18px}
  .sd-mpage-table tfoot .button{width:100%;min-height:44px;padding:8px 6px;font-size:13px;line-height:1.25;white-space:normal}
  html[data-theme=dark] .sd-mpage-table tbody th,html[data-theme=dark] .sd-mpage-table tbody td:not(.is-best){background:#16403e}
  html[data-theme=dark] .sd-mpage-table tbody tr:nth-child(odd) th,html[data-theme=dark] .sd-mpage-table tbody tr:nth-child(odd) td:not(.is-best){background:#123534}
}
/* Plan photos (premium-hero.webp, 1536x1024): keep therapist and guest in frame at every width. */
.sd-mpage-photo img{object-position:62% 40%}
@media(max-width:900px){.sd-mpage-photo{height:clamp(220px,62vw,360px)}.sd-mpage-photo img{object-position:60% 18%}}
/* The photo bleeds exactly to the right edge of the screen: the container gutter is (100vw - container width) / 2. */
@media(min-width:901px){.sd-mpage-photo{margin-right:calc((100vw - min(var(--width),100vw - 80px)) / -2)}}
/* The photo fills its cell without setting the hero height (photo-thai is portrait and made the hero ~1000px tall). */
.sd-mpage-photo{position:relative;min-height:0}
.sd-mpage-photo img{position:absolute;inset:0;width:100%;height:100%}
@media(min-width:901px){.sd-mpage-hero-grid{min-height:540px}}
.sd-mpage-price p{white-space:nowrap}
/* Video crops (8 Nov 2026), measured, not eyeballed: MediaPipe found the therapist's face in 8 frames of every clip, and
   each position below keeps the face inside every video box the site renders at 320-1440 px (worst case 92-100%).
   The 7 Nov left shift was wrong: these faces sit at 38-55% of the frame width. */
@media (max-width:600px) and (orientation:portrait){html body .ref-clip :is(img,video){object-position:44% center}.editorial-hero-media.editorial-hero-media--services{object-position:50% center}.editorial-hero-media.editorial-hero-media--how{object-position:48% center}.editorial-hero-media.editorial-hero-media--contact{object-position:50% center}.editorial-hero-media.editorial-hero-media--faq{object-position:42% center}}
@media (orientation:landscape) and (max-height:500px){.editorial-hero-media.editorial-hero-media--faq{object-position:50% 10%}.editorial-hero-media.editorial-hero-media--services{object-position:50% 26%}}
@media (max-width:1100px){.drop-media video{object-position:50% 20%}}
@media (max-width:900px){.sd-biz-visual-video{object-position:50% 15%}}