/* ============================================================================
   บุปผาคลินิก · Bubpha Clinic — Editorial stylesheet
   Quiet luxury. Predominantly white; pink comes from the photographs, not the
   interface. Compositions, not cards. Type as the second voice after image.
   Reference feel: Aesop / Frama / Kinfolk / a boutique hotel.
   ========================================================================== */

:root {
  /* Neutrals do the heavy lifting — ~90% of the page */
  --paper:      #FFFFFF;
  --porcelain:  #FDFBFB;
  --ink:        #3A2B30;   /* primary text, warm near-black, never pure */
  --ink-soft:   #5A4A4F;
  --muted:      #8A7C81;
  --line:       #ECE6E8;   /* hairline */

  /* Pink is an accent only — small doses */
  --blush:      #F8F0F2;
  --rose:       #B76A81;
  --rose-strong:#9B4E66;   /* AA on white */
  --accent:     #C77489;

  /* Bubpha charm palette — used sparingly, page stays predominantly white */
  --milk:       #FFFDFC;
  --powder:     #F7E3EA;   /* soft wash */
  --blush-mid:  #E8A7B8;   /* motif / accents */
  --strawberry: #C94F78;   /* tiny details only */
  --gold:       #B99562;   /* champagne-gold hairlines & numerals */
  --btn:        #C1476E;   /* brighter, cheerful CTA (AA on white) */
  --btn-hover:  #A23C5D;

  --shell: 1240px;
  --gutter: clamp(22px, 6vw, 88px);

  --serif: "Noto Serif Thai", Georgia, "Times New Roman", serif;
  --sans:  "IBM Plex Sans Thai", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
  --pad-section: clamp(56px, 7.5vw, 108px);
}

/* ---- base ---------------------------------------------------------------- */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img,iframe{ display:block; max-width:100%; }
a{ color: var(--rose-strong); text-decoration: none; }
a:hover{ text-decoration: none; }

.shell{ width:100%; max-width: var(--shell); margin-inline:auto; padding-inline: var(--gutter); }

/* ---- a11y ---------------------------------------------------------------- */
.skip-link{ position:absolute; left:-999px; top:0; z-index:200; background:var(--ink); color:#fff; padding:12px 18px; }
.skip-link:focus{ left:0; }
:focus-visible{ outline:2px solid var(--rose-strong); outline-offset:3px; }

/* ---- type system --------------------------------------------------------- */
.kicker{
  display:inline-flex; align-items:center; gap:12px;
  margin:0 0 1.4rem; padding:0;
  font-family: var(--sans); font-weight:600; font-size:.72rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--rose-strong);
}
.kicker::before{ content:""; width:26px; height:1px; background:var(--accent); opacity:.7; }

.display{
  font-family: var(--serif); font-weight:600; color:var(--ink);
  font-size: clamp(1.8rem, 4.6vw, 3rem); line-height:1.42; letter-spacing:.004em;
  margin:0;
}
.display-lg{ font-size: clamp(2.5rem, 8vw, 4.4rem); line-height:1.3; font-weight:500; }

.lede{ color:var(--muted); font-size:1.02rem; line-height:1.7; font-style:italic; margin:1.4rem 0 0; }
.statement{
  font-family: var(--serif); font-weight:400; color:var(--ink-soft);
  font-size: clamp(1.25rem, 2.6vw, 1.85rem); line-height:1.6; margin:.6rem 0 0; max-width: 22ch;
}

/* ---- buttons / links ----------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--sans); font-weight:600; font-size:.98rem; line-height:1.2;
  min-height:52px; padding:15px 30px; border-radius:999px; border:1.5px solid transparent;
  cursor:pointer; transition: background-color .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease);
}
.btn-sm{ min-height:42px; padding:11px 20px; font-size:.9rem; }
.btn-primary{ background:var(--btn); color:#fff; }
.btn-primary:hover{ background:var(--btn-hover); transform:translateY(-1px); }
.btn-line{ background:var(--btn); color:#fff; }
.btn-line:hover{ background:var(--btn-hover); }

.link-arrow{ font-family:var(--sans); font-weight:600; font-size:.98rem; color:var(--ink); }
.link-arrow span{ display:inline-block; transition:transform .25s var(--ease); color:var(--rose-strong); }
.link-arrow:hover span{ transform:translateX(4px); }

/* ============================ HEADER ============================ */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.86); backdrop-filter:saturate(140%) blur(9px);
  border-bottom:1px solid transparent; transition:border-color .3s var(--ease);
}
.site-header.scrolled{ border-bottom-color:var(--line); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; min-height:72px; gap:16px; }

.wordmark{ display:flex; align-items:center; gap:11px; }
.wordmark:hover{ text-decoration:none; }
.wordmark-logo{ width:40px; height:40px; border-radius:50%; object-fit:cover; flex:none;
  box-shadow:0 2px 10px -5px rgba(155,78,102,.5); }
.wordmark-text{ display:flex; flex-direction:column; line-height:1; }
.wordmark-th{ font-family:var(--serif); font-weight:600; font-size:1.2rem; color:var(--ink); }
.wordmark-en{ font-size:.54rem; letter-spacing:.3em; color:var(--rose-strong); margin-top:5px; }

.nav-desktop{ display:none; gap:clamp(22px,2.6vw,40px); }
.nav-desktop a{ color:var(--ink); font-weight:500; font-size:.95rem; position:relative; }
.nav-desktop a::after{ content:""; position:absolute; left:0; bottom:-6px; height:1px; width:0; background:var(--accent); transition:width .28s var(--ease); }
.nav-desktop a:hover::after{ width:100%; }

.header-actions{ display:flex; align-items:center; gap:10px; }
.menu-toggle{ display:inline-flex; flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px; padding:0 10px; background:transparent; border:1px solid var(--line); border-radius:10px; cursor:pointer; }
.menu-toggle span{ height:1.4px; background:var(--ink); transition:transform .25s var(--ease); }
.menu-toggle[aria-expanded="true"] span:first-child{ transform:translateY(3.2px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child{ transform:translateY(-3.2px) rotate(-45deg); }
.mobile-menu{ display:flex; flex-direction:column; gap:2px; padding:6px var(--gutter) 22px; border-top:1px solid var(--line); background:var(--paper); }
.mobile-menu a{ padding:13px 2px; color:var(--ink); font-weight:500; border-bottom:1px solid var(--line); }
.mobile-menu a:last-child{ border-bottom:0; margin-top:12px; }
.mobile-menu[hidden]{ display:none; }

/* ============================ HERO ============================ */
.hero{
  display:grid; grid-template-columns:1fr; gap:clamp(32px,5vw,40px);
  padding-top: clamp(48px, 8vw, 104px); padding-bottom: var(--pad-section);
  align-items:center;
}
.hero-text{ max-width:34ch; }
.hero .display{ margin-top:.2rem; }
.hero-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:22px; margin-top:2.2rem; }
.hero-portrait{ margin:0; }
.hero-portrait img{ width:100%; height:auto; border-radius:2px; }

/* ============================ OUR SPACE ============================ */
.space{ display:grid; grid-template-columns:1fr; gap:clamp(22px,4vw,44px); padding-bottom:var(--pad-section); align-items:center; }
.space-figure{ margin:0; }
.space-figure img{ width:100%; height:auto; border-radius:2px; }
.space-caption{ max-width:32ch; }
/* mobile: caption above the image so it breaks up back-to-back photos */
@media (max-width:819px){ .space-caption{ order:-1; } }
@media (min-width:820px){
  .space{ grid-template-columns:1.15fr .85fr; column-gap:clamp(40px,6vw,88px); }
}

/* ============================ PHILOSOPHY ============================ */
.philosophy{
  display:grid; grid-template-columns:1fr; gap:clamp(26px,4vw,44px);
  padding-block: var(--pad-section);
  border-top:1px solid var(--line);
}
.phil-body{ max-width:46ch; }
.phil-body p{ color:var(--muted); margin:0 0 1.2rem; }
.phil-mark{ font-family:var(--serif); font-style:italic; color:var(--ink-soft) !important; font-size:1.15rem; margin-top:1.6rem !important; }
.phil-detail{ margin:0; }
.phil-detail img{ width:100%; height:auto; }
@media (min-width:860px){
  .philosophy{ grid-template-columns: 1.1fr .9fr; grid-template-areas: "head body" "detail body"; column-gap:clamp(48px,7vw,110px); align-items:start; }
  .phil-text{ grid-area:head; }
  .phil-body{ grid-area:body; padding-top:.6rem; }
  .phil-detail{ grid-area:detail; max-width:none; margin-top:clamp(28px,4vw,52px); }
  .phil-detail img{ height:clamp(240px,22vw,340px); object-fit:cover; }
}

/* ============================ MOMENTS STRIP ============================ */
.moments{ padding-bottom: var(--pad-section); }
.moments-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(8px,1.2vw,16px); }
.moments-grid figure{ margin:0; overflow:hidden; }
.moments-grid img{ width:100%; aspect-ratio:1/1; object-fit:cover; transition:transform .6s var(--ease); }
.moments-grid figure:hover img{ transform:scale(1.03); }

/* ============================ TREATMENTS ============================ */
.treatments{ padding-block: var(--pad-section); border-top:1px solid var(--line); }
.treat-head{ max-width:34ch; margin-bottom:clamp(40px,6vw,86px); }
.treat-rows{ display:flex; flex-direction:column; gap:clamp(52px,8vw,128px); }

.treat-row{ display:grid; grid-template-columns:1fr; gap:clamp(22px,3vw,40px); align-items:center; }
.treat-figure{ margin:0; overflow:hidden; }
.treat-figure img{ width:100%; height:auto; object-fit:cover; transition:transform .6s var(--ease); }
.treat-row:hover .treat-figure img{ transform:scale(1.02); }
.treat-no{ font-family:var(--serif); font-size:.95rem; letter-spacing:.15em; color:var(--accent); }
.treat-title{ font-family:var(--serif); font-weight:600; font-size:clamp(1.5rem,3vw,2.05rem); color:var(--ink); margin:.5rem 0 .1rem; }
.treat-en{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--rose-strong); margin:0 0 1rem; }
.treat-desc{ color:var(--muted); margin:0 0 1.4rem; max-width:40ch; }
.treat-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.treat-list li{ padding:11px 0; border-top:1px solid var(--line); color:var(--ink-soft); font-weight:500; font-size:.98rem; }
.treat-list li:last-child{ border-bottom:1px solid var(--line); }
.treat-note{ margin:clamp(48px,7vw,96px) auto 0; max-width:56ch; text-align:center; color:var(--muted); font-size:.9rem; }

@media (min-width:800px){
  .treat-row{ grid-template-columns: 1fr 1fr; column-gap:clamp(44px,6vw,96px); }
  .treat-row.is-flipped .treat-figure{ order:2; }
  .treat-copy{ max-width:38ch; }
}

/* ============================ BEFORE / AFTER REVEAL ============================ */
.reveal-sec{ padding-block: var(--pad-section); border-top:1px solid var(--line); }
.reveal-head{ max-width:44ch; margin-bottom:clamp(26px,3.5vw,44px); }
.reveal-note{ color:var(--muted); font-size:.92rem; margin:.7rem 0 0; }

/* three stacked "photo piles" — after peeks out beneath before; tap/scroll swaps */
.stacks{ display:grid; grid-template-columns:repeat(2,1fr); column-gap:clamp(14px,4vw,24px); row-gap:clamp(30px,7vw,44px); align-items:start; }
@media (min-width:760px){
  .stacks{ grid-template-columns:repeat(4,1fr); column-gap:clamp(12px,2vw,28px); }
}
.stack{
  position:relative; width:100%; max-width:300px; aspect-ratio:300/430;
  margin-inline:auto; cursor:pointer; outline:none;
}
.stack-card{
  position:absolute; top:6%; left:50%; width:80%; margin:0;
  background:#fff; padding:8px 8px 0; border:1px solid var(--line);
  box-shadow:0 16px 34px -18px rgba(58,43,48,.55);
  transition:transform .7s var(--ease), box-shadow .7s var(--ease);
  will-change:transform;
}
.stack-card img{ width:100%; height:auto; display:block; }
.stack-card figcaption{
  text-align:center; font-size:.82rem; font-weight:600; letter-spacing:.02em;
  color:var(--rose-strong); padding:8px 0 10px;
}
/* default order */
.stack-card.is-top{   transform:translateX(-50%) rotate(-2.6deg); z-index:2; }
.stack-card.is-under{ transform:translateX(-34%) translateY(24px) rotate(4.2deg); z-index:1; }
.stack:focus-visible{ box-shadow:0 0 0 3px var(--blush); border-radius:4px; }

@media (prefers-reduced-motion: reduce){ .stack-card{ transition:none; } }

/* ============================ INSTAGRAM ============================ */
.instagram{ padding-block: var(--pad-section); background:var(--porcelain); border-top:1px solid var(--line); }
.ig-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:clamp(28px,4vw,52px); }
.ig-head-link{ padding-bottom:.4rem; }
.ig-grid{ list-style:none; margin:0; padding-inline:var(--gutter); display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(10px,1.4vw,20px); }
.ig-tile{ position:relative; overflow:hidden; aspect-ratio:1/1; background:var(--blush); }
.ig-tile a{ display:block; width:100%; height:100%; }
.ig-tile img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.ig-tile:hover img{ transform:scale(1.04); }
.ig-badge{ position:absolute; top:10px; right:10px; width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.85); color:var(--rose-strong); display:grid; place-items:center; font-size:.72rem; }
@media (min-width:720px){ .ig-grid{ grid-template-columns:repeat(3,1fr); } }

/* ============================ VISIT ============================ */
.visit{ display:grid; grid-template-columns:1fr; gap:clamp(36px,5vw,72px); padding-block:var(--pad-section); border-top:1px solid var(--line); align-items:start; }
.visit-lines{ margin:1.6rem 0 2rem; }
.visit-line-lg{ font-family:var(--serif); font-size:clamp(1.15rem,2vw,1.4rem); color:var(--ink); line-height:1.6; margin:0 0 1rem; }
.visit-line{ color:var(--muted); margin:0 0 .5rem; }
.pending{ display:block; margin-top:6px; font-size:.8rem; color:var(--muted); }
.visit-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:22px; margin-bottom:2.2rem; }
.visit-meta{ margin:0; display:grid; gap:0; }
.visit-meta > div{ display:grid; grid-template-columns:88px 1fr; gap:12px; padding:12px 0; border-top:1px solid var(--line); }
.visit-meta > div:last-child{ border-bottom:1px solid var(--line); }
.visit-meta dt{ color:var(--rose-strong); font-weight:600; font-size:.86rem; }
.visit-meta dd{ margin:0; color:var(--ink); }

.visit-media{ display:flex; flex-direction:column; gap:14px; }
.visit-figure{ margin:0; }
.visit-figure img{ width:100%; height:auto; }
.visit-map{ position:relative; z-index:2; width:min(76%,300px); height:clamp(200px,24vw,250px);
  margin-top:-66px; margin-left:20px; border:5px solid var(--milk); border-radius:2px;
  box-shadow:0 20px 44px -20px rgba(68,50,56,.5); background:var(--blush); }
.map-fallback{ display:grid; place-items:center; width:100%; height:100%; color:var(--rose-strong); font-weight:600; }
/* keep Leaflet controls below the sticky header */
.leaflet-top, .leaflet-bottom{ z-index:20; }
@media (min-width:860px){ .visit{ grid-template-columns:1fr 1fr; column-gap:clamp(48px,7vw,110px); } }

/* ============================ FOOTER ============================ */
.site-footer{ border-top:1px solid var(--line); padding-block:clamp(52px,7vw,88px) 108px; }
.footer-inner{ display:grid; gap:clamp(28px,4vw,44px); }
.footer-name{ font-family:var(--serif); font-size:1.5rem; margin:0; color:var(--ink); }
.footer-line{ font-family:var(--serif); font-style:italic; color:var(--muted); margin:6px 0 0; }
.footer-cols{ display:grid; grid-template-columns:1fr; gap:26px; }
.footer-col{ display:flex; flex-direction:column; gap:8px; }
.footer-col a{ color:var(--ink); font-size:.94rem; }
.footer-col a:hover{ color:var(--rose-strong); }
.footer-label{ font-size:.74rem; letter-spacing:.04em; color:var(--rose-strong); margin:0 0 4px; }
.footer-muted{ color:var(--muted); font-size:.92rem; margin:0; line-height:1.7; }
.disclaimer{ color:var(--muted); font-size:.8rem; line-height:1.7; max-width:76ch; margin:8px 0 0; padding-top:clamp(20px,3vw,28px); border-top:1px solid var(--line); }
.copyright{ color:var(--muted); font-size:.82rem; margin:0; }
@media (min-width:680px){ .footer-cols{ grid-template-columns:repeat(3,1fr); } }

/* ============================ STICKY MOBILE BAR ============================ */
.sticky-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  display:grid; grid-template-columns:repeat(3,1fr);
  background:rgba(255,255,255,.97); backdrop-filter:blur(8px); border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom,0); transition:transform .35s var(--ease);
}
.sticky-bar.hidden{ transform:translateY(120%); }
.sticky-item{ display:flex; align-items:center; justify-content:center; min-height:56px; padding:10px; color:var(--ink); font-size:.9rem; font-weight:600; letter-spacing:.02em; }
.sticky-item:hover{ background:var(--blush); }
.sticky-item + .sticky-item{ border-left:1px solid var(--line); }

/* ============================ MOTION ============================ */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .treat-figure img, .ig-tile img, .btn, .link-arrow span{ transition:none !important; }
}

/* ============================ RESPONSIVE (large) ============================ */
@media (min-width:900px){
  .nav-desktop{ display:flex; }
  .menu-toggle, .mobile-menu{ display:none; }
  .sticky-bar{ display:none; }
  .hero{ grid-template-columns:1.05fr .95fr; }
  .hero-portrait{ justify-self:end; max-width:460px; }
}
@media (min-width:1120px){
  .hero-portrait{ max-width:500px; }
}

/* ============================ ROUNDED · SOFTENED · FEMININE ============================ */
:root{ --round:18px; --round-sm:12px; }

.hero-portrait img,
.space-figure img,
.phil-detail img,
.visit-figure img,
.treat-figure,
.treat-figure img{ border-radius:var(--round); }
.treat-figure{ overflow:hidden; }

.ig-tile{ border-radius:var(--round-sm); }
.stack-card{ border-radius:var(--round-sm); }
.visit-map{ border-radius:var(--round); overflow:hidden; }

/* softer, pink-tinted depth */
.service-card, .treat-figure, .stack-card, .visit-figure img, .space-figure img, .hero-portrait img{
  box-shadow:0 20px 44px -26px rgba(173,93,117,.42);
}

/* the philosophy detail reads as a real photo now */
.phil-detail img{ width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; }
@media (min-width:860px){ .phil-detail img{ height:auto; } }

/* ---- Treatment menu (Name — description, no prices) ---- */
.menu-block{
  margin-top:clamp(46px,7vw,88px);
  background:linear-gradient(160deg,#FCF3F5,#F6E7EC);
  border:1px solid var(--line); border-radius:24px;
  padding:clamp(26px,4vw,54px);
}
.menu-list{ list-style:none; margin:1.5rem 0 0; padding:0; }
.menu-list li{
  display:grid; grid-template-columns:1fr; gap:3px;
  padding:16px 2px; border-top:1px solid rgba(173,93,117,.16);
}
.menu-list li:last-child{ border-bottom:1px solid rgba(173,93,117,.16); }
.menu-name{ font-family:var(--serif); font-weight:600; font-size:1.12rem; color:var(--ink); }
.menu-name em{ font-style:normal; font-family:var(--sans); font-size:.68rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--rose-strong); margin-left:9px; }
.menu-desc{ color:var(--ink-soft); font-size:.97rem; line-height:1.65; }
@media (min-width:720px){
  .menu-list li{ grid-template-columns:minmax(210px,.85fr) 1.15fr; gap:28px; align-items:baseline; }
}

/* ---- Google reviews ---- */
.reviews{ padding-block:var(--pad-section); border-top:1px solid var(--line); }
.reviews-head{ max-width:44ch; margin-bottom:clamp(28px,4vw,48px); }
.reviews-rating{ margin:1rem 0 0; color:var(--ink-soft); font-size:1rem; }
.reviews-rating .stars{ color:var(--rose); letter-spacing:2px; margin-right:6px; }
.reviews-rating strong{ color:var(--ink); font-weight:600; }
.review-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:clamp(16px,2.4vw,24px); }
.review-card{
  display:flex; flex-direction:column; gap:12px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--round);
  padding:clamp(22px,3vw,30px); box-shadow:0 20px 44px -30px rgba(173,93,117,.4);
}
.review-card .stars{ color:var(--rose); letter-spacing:3px; font-size:.95rem; }
.review-text{ font-family:var(--serif); font-size:1.05rem; line-height:1.72; color:var(--ink); margin:0; }
.review-by{ margin:auto 0 0; font-size:.86rem; font-weight:600; color:var(--ink-soft); }
.review-by span{ color:var(--muted); font-weight:400; }
.reviews-cta{ margin-top:clamp(26px,4vw,40px); }
@media (min-width:760px){ .review-grid{ grid-template-columns:repeat(3,1fr); } }

/* ============================ BUBPHA CHARM LAYER ============================ */
/* --- butterfly motif = real logo art (bfly.png) --- */
.bh{ display:inline-block; height:1.2em; width:auto; vertical-align:-0.3em; }
.kicker .bh{ height:1.5em; margin-left:8px; vertical-align:-0.5em; }

/* --- script accent (echoes the flowing clinic sign) — decorative only --- */
.script{ font-family:"Dancing Script", var(--serif); font-weight:600; letter-spacing:.01em; }

/* --- motif divider between sections --- */
.bh-divider{ display:flex; align-items:center; justify-content:center; gap:18px; padding-block:clamp(10px,2.5vw,26px); }
.bh-divider::before, .bh-divider::after{ content:""; height:1px; width:min(140px,24vw); background:var(--gold); opacity:.45; }
.bh-divider .bh{ width:22px; height:22px; color:var(--blush-mid); }

/* --- magazine-style photo caption (pill annotation) --- */
.figcap{ position:absolute; z-index:2; display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,253,252,.92); color:var(--ink-soft); border:1px solid var(--line);
  font-size:.72rem; font-weight:500; letter-spacing:.02em; padding:6px 13px; border-radius:999px;
  box-shadow:0 8px 20px -12px rgba(68,50,56,.4); }
.figcap .bh{ width:.95em; height:.95em; color:var(--strawberry); }
.figcap .script{ font-size:1.02rem; }

/* --- hero flourish --- */
.hero-portrait{ position:relative; }
.hero-portrait .figcap{ left:-8px; bottom:22px; }
.hero-bh{ position:absolute; top:6px; right:-6px; width:40px; height:40px; color:var(--blush-mid); transform:rotate(8deg); }
.kicker .bh--hero{ color:var(--blush-mid); }
.hl-blush{ background:linear-gradient(transparent 62%, var(--powder) 62%); padding:0 .06em; }

/* --- photo captions anchor --- */
.space-figure, .phil-detail{ position:relative; }
.space-figure .figcap, .phil-detail .figcap{ left:14px; bottom:14px; }

/* --- treatment editorial-row numbers in blush circles --- */
.treat-no{ display:inline-grid; place-items:center; width:44px; height:44px; border-radius:50%;
  background:var(--powder); color:var(--gold); font-family:var(--serif); font-size:1rem; letter-spacing:0; }

/* --- treatment menu -> beauty menu --- */
.menu-list{ counter-reset:menu; }
.menu-list li{ counter-increment:menu; position:relative; transition:background-color .3s var(--ease); border-radius:12px; padding-inline:14px; }
.menu-list li:hover{ background:linear-gradient(100deg, var(--powder), transparent 80%); }
.menu-name::before{ content:counter(menu, decimal-leading-zero); font-family:var(--serif); font-size:.82em; color:var(--gold); margin-right:12px; }
.menu-name{ display:inline-flex; align-items:baseline; }

/* --- before/after: tactile stacked prints --- */
.stack-card{ transition:transform .34s var(--ease), box-shadow .34s var(--ease); }
.stack-card figcaption{ position:absolute; left:12px; bottom:12px; margin:0; padding:5px 14px 6px;
  background:rgba(255,253,252,.94); border:1px solid var(--line); border-radius:999px;
  font-family:var(--serif); font-weight:600; font-size:.9rem; letter-spacing:0; color:var(--rose-strong);
  transform:rotate(-3deg); box-shadow:0 6px 16px -10px rgba(68,50,56,.5); }
.stack-after figcaption{ color:var(--strawberry); }
.bh-badge{ position:absolute; top:10px; right:10px; width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center; background:rgba(255,253,252,.95); box-shadow:0 6px 16px -8px rgba(68,50,56,.5);
  opacity:0; transform:scale(.6); transition:opacity .3s var(--ease), transform .3s var(--ease); }
.bh-badge .bh{ height:20px; width:auto; }
.stack-after.is-top .bh-badge{ opacity:1; transform:scale(1); }
/* mobile: let the before/after label hang off the print's bottom-left so it clears the face */
@media (max-width:759px){
  .stack-card figcaption{ left:-14px; bottom:-6px; }
}

/* --- affectionate reviews --- */
.reviews-rating .stars, .review-card .stars{ color:var(--gold); }
.review-card{ position:relative; overflow:hidden; }
.review-card::before{ content:"\201C"; position:absolute; top:-6px; right:14px; font-family:var(--serif);
  font-size:4.4rem; line-height:1; color:var(--powder); pointer-events:none; }
.review-by .bh{ height:1.2em; width:auto; margin-left:6px; vertical-align:-0.28em; }
@media (min-width:760px){
  .review-grid > li:nth-child(2){ transform:translateY(26px); }
}

/* --- curated Instagram section --- */
.insta{ padding-block:var(--pad-section); background:var(--milk); border-top:1px solid var(--line); }
.insta-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:14px; margin-bottom:clamp(24px,3.5vw,44px); }
.insta-head .display .script{ color:var(--rose-strong); }
.insta-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(10px,1.4vw,16px); }
.insta-grid li{ position:relative; overflow:hidden; border-radius:8px; aspect-ratio:1/1; }
.insta-grid li a{ display:block; width:100%; height:100%; }
.insta-grid img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease); }
.insta-grid li:hover img{ transform:scale(1.05); }
.insta-grid li a::after{ content:""; position:absolute; inset:0; background:rgba(155,78,102,0); transition:background-color .35s var(--ease); }
.insta-grid li:hover a::after{ background:rgba(155,78,102,.12); }
.insta-grid .r-round{ border-radius:24px; }
.insta-reel{ position:absolute; top:10px; right:11px; z-index:2; color:#fff; filter:drop-shadow(0 1px 2px rgba(0,0,0,.45)); font-size:.95rem; }
.insta-follow{ display:inline-flex; align-items:center; gap:8px; }
.insta-follow .bh{ color:var(--blush-mid); width:1.1em; height:1.1em; }
@media (min-width:720px){
  .insta-grid{ grid-template-columns:repeat(4,1fr); grid-auto-rows:200px; }
  .insta-grid li{ aspect-ratio:auto; height:100%; }
  .insta-grid .r-tall{ grid-row:span 2; }
}
@media (prefers-reduced-motion: reduce){
  .stack-card, .bh-badge, .insta-grid img{ transition:none !important; }
}

/* ============================ LANGUAGE SWITCH ============================ */
.lang-switch{ display:inline-flex; align-items:center; gap:9px; }
.lang-opt{ font-family:var(--sans); font-weight:600; font-size:.82rem; letter-spacing:.05em;
  color:var(--muted); text-decoration:none; padding:4px 3px; border-radius:6px; }
.lang-opt:hover{ color:var(--ink); text-decoration:none; }
.lang-opt.is-active{ color:var(--rose-strong); text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1.5px; }
.lang-sep{ color:var(--line); font-size:.8rem; }
.lang-opt:focus-visible{ outline:2px solid var(--rose-strong); outline-offset:2px; }
.lang-switch--mobile{ display:flex; gap:14px; padding:8px 2px 16px; margin-bottom:6px; border-bottom:1px solid var(--line); }
.lang-switch--mobile .lang-opt{ font-size:.98rem; padding:6px 2px; }

/* ---- reviews: original-Thai reveal (English page) ---- */
.rev-trans-label{ display:block; margin-top:.5rem; font-size:.7rem; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); }
.rev-orig{ display:none; margin-top:.5rem; font-family:var(--serif); font-size:.98rem; line-height:1.7; color:var(--ink-soft); }
.review-card.show-orig .rev-orig{ display:block; }
.rev-toggle{ margin-top:.5rem; background:none; border:0; padding:0; cursor:pointer;
  font-family:var(--sans); font-size:.8rem; font-weight:600; color:var(--rose-strong); align-self:flex-start; }
.rev-toggle:hover{ text-decoration:underline; }
.rev-toggle:focus-visible{ outline:2px solid var(--rose-strong); outline-offset:2px; border-radius:4px; }

/* ---- mobile header declutter: drop the redundant booking button ----
   (booking stays one tap away via the sticky bar and the in-menu button) */
@media (max-width:899px){
  .header-actions .btn-line{ display:none; }
  .header-inner{ gap:12px; }
}
.wordmark-th{ white-space:nowrap; }