/* ==========================================================================
   Bangs Prime Skin Aesthetics — Design System
   Playfair Display + Manrope. Palette: #FAF8F5 ivory · #E9E3DD greige ·
   #8C715B taupe · #2C2C2C ink.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&family=Noto+Sans+KR:wght@400;500;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700&display=swap');

:root {
  /* Warm neutral base — Playfair/Manrope brand system */
  --ivory: #faf8f5;
  --cream: #e9e3dd;
  --surface: #ffffff;
  --ink: #2c2c2c;
  --ink-soft: #565049;
  --ink-faint: #8a8178;
  --line: #e4ddd4;
  --line-soft: #efeae4;

  /* Brand accents — warm taupe / brown */
  --gold: #8c715b;
  --gold-deep: #6f5946;
  --gold-soft: #c3ad9a;
  --gold-tint: #e7dccf;
  --forest: #383533;
  --forest-deep: #2c2c2c;
  --blush: #e7dccf;
  --blush-deep: #a07e68;
  --rose: #a8695a;
  /* Offer-group flag — Special Offers and Package Promos are the two
     colour-coded filter pills. Between them they partition every promo, so
     they read as the top-level split, above the per-treatment pills. The
     token keeps its original --package name. */
  --package: #fdd89f;
  --package-deep: #eecb95;
  /* Info affordance — the "i" after a service name in a promo description.
     Deliberately outside the gold/blush palette so it reads as interactive
     rather than decorative. */
  --info: #f0821e;
  --info-deep: #d66c0e;

  /* Shadows (neutral warm) */
  --shadow-sm: 0 1px 2px rgba(44, 44, 44, 0.08);
  --shadow-md: 0 8px 24px -8px rgba(44, 44, 44, 0.16);
  --shadow-lg: 0 24px 48px -16px rgba(44, 44, 44, 0.24);
  --shadow-gold: 0 10px 30px -10px rgba(140, 113, 91, 0.42);

  /* Type — Playfair Display (display) + Manrope (body) */
  --font-display: 'Playfair Display', 'Iowan Old Style', 'Palatino Linotype', serif;
  --font-script: 'Playfair Display', Georgia, serif;
  --font-korean: 'Noto Sans KR', -apple-system, 'Malgun Gothic', sans-serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Layout */
  --container: 1240px;
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 28px;
  --nav-h: 84px;
  /* Header and footer logo share this. The -0.0952 offset paired with it comes
     from the PNG's own transparent left padding (36 of 378px tall). */
  --logo-h: 66px;
}

@media (prefers-color-scheme: dark) {
  :root { color-scheme: light; }
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
body {
  font-family: var(--font-body);
  background: var(--ivory);
  color: var(--ink);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
  /* The mobile nav panel is parked just past the right edge while closed, which
     otherwise lets the page be swiped sideways into it. `clip`, not `hidden`:
     hidden would make body a scroll container and break the sticky header. */
  overflow-x: clip;
}
img, picture, video { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; line-height: 1.12; text-wrap: balance; letter-spacing: -0.01em; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; border-radius: 4px; }

/* ---- Skip link ---- */
.skip-link {
  position: fixed; top: -60px; left: 16px; z-index: 1000;
  background: var(--forest); color: var(--ivory);
  padding: 12px 20px; border-radius: var(--radius-sm);
  transition: top 0.25s ease;
  font-weight: 600;
}
.skip-link:focus { top: 16px; }

/* ---- Layout helpers ---- */
.container { max-width: var(--container); margin-inline: auto; padding-inline: clamp(20px, 5vw, 48px); }
.section { padding-block: clamp(64px, 9vw, 128px); }
.section--tight { padding-block: clamp(48px, 6vw, 80px); }
.section--alt { background: var(--cream); }
.section--dark { background: var(--forest); color: var(--ivory); }
.section--dark h2, .section--dark h3 { color: var(--ivory); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-weight: 600; font-size: 0.78rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-deep);
  margin-bottom: 14px;
}
.eyebrow::before { content: ''; width: 26px; height: 1px; background: var(--gold-deep); }
.section--dark .eyebrow { color: var(--gold-soft); }
.section--dark .eyebrow::before { background: var(--gold-soft); }

h1 { font-size: clamp(2.6rem, 5.2vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); }
h4 { font-size: 1.1rem; font-weight: 400; }
.italic-accent { font-style: italic; font-weight: 400; color: var(--gold-deep); }
.lede { font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--ink-soft); max-width: 62ch; }
/* The reset zeroes every margin and headings carry none, so a .lede sat flush
   against the heading above it. 27 instances had been patched by hand with an
   inline margin-top:18px; this makes that gap systematic at the same value.
   Inline styles still win, so the hand-patched ones are unaffected. */
:is(h1, h2, h3) + .lede { margin-top: 18px; }
.section-head { max-width: 720px; margin-bottom: clamp(36px, 5vw, 60px); }
.section-head.center { margin-inline: auto; text-align: center; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 30px; border-radius: 999px; font-weight: 600; font-size: 0.95rem;
  transition: transform 0.22s cubic-bezier(.2,.8,.2,1), box-shadow 0.22s ease, background 0.22s ease, color 0.22s ease, border-color .22s ease;
  white-space: nowrap; cursor: pointer;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--gold-deep); color: var(--ivory); box-shadow: var(--shadow-gold); }
.btn-primary:hover { background: var(--gold); transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(173,129,56,.55); }
.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.btn-ghost:hover { border-color: var(--gold-deep); color: var(--gold-deep); transform: translateY(-2px); }
.section--dark .btn-ghost { border-color: rgba(250,246,239,.35); color: var(--ivory); }
.section--dark .btn-ghost:hover { border-color: var(--gold-soft); color: var(--gold-soft); }
.btn-light { background: var(--ivory); color: var(--forest-deep); }
.btn-light:hover { background: var(--gold-tint); transform: translateY(-2px); }
.btn-text { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--gold-deep); padding-bottom: 2px; border-bottom: 1.5px solid transparent; }
.btn-text:hover { border-color: var(--gold-deep); gap: 12px; }
.btn-text svg { transition: transform .22s ease; }
.btn-text:hover svg { transform: translateX(3px); }

/* ---- Header / Nav ---- */
.site-header {
  position: sticky; top: 0; z-index: 500;
  background: rgba(250, 246, 239, 0.86);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.site-header.is-scrolled { border-color: var(--line); box-shadow: 0 6px 24px -18px rgba(45,33,15,.4); }
.nav-row { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); gap: 24px; }
.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
/* The logo PNG is 814x378 but its artwork only spans x=36-718, so it carries
   36px (4.42%) of transparent padding down its left edge - enough to make the
   wordmark look indented. Pulling it back by that same share of the rendered
   height optically aligns it with the text below. Derived, not eyeballed:
   36 / 378 = 0.0952 of whatever height the logo is given. */
.brand img { height: var(--logo-h); width: auto; margin-left: calc(var(--logo-h) * -0.0952); }
.brand-fallback { font-family: var(--font-display); font-size: 1.4rem; }

.nav-primary { display: flex; align-items: center; gap: 2px; }
.nav-primary > li { position: relative; }
.nav-link {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 16px; font-weight: 500; font-size: .9rem; color: var(--ink);
  border-radius: 999px; transition: background .2s ease, color .2s ease;
}
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--gold-deep); background: var(--gold-tint); }
.nav-link .chev { width: 9px; height: 9px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-top: -3px; transition: transform .2s ease; }
.has-dropdown:hover .chev, .has-dropdown:focus-within .chev { transform: rotate(225deg); margin-top: 3px; }
/* Built by initMobileNav; only ever shown in the mobile panel. */
.nav-sub-toggle { display: none; }

.dropdown {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(6px);
  min-width: 240px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); padding: 10px; opacity: 0; visibility: hidden;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.dropdown a { display: block; padding: 10px 14px; border-radius: var(--radius-sm); font-size: 0.92rem; color: var(--ink-soft); }
.dropdown a:hover { background: var(--cream); color: var(--gold-deep); }

.nav-actions { display: flex; align-items: center; gap: 14px; }
.nav-toggle { display: none; flex-direction: column; gap: 5px; padding: 8px; }
.nav-toggle span { width: 24px; height: 2px; background: var(--ink); transition: transform .25s ease, opacity .25s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 980px) {
  /* Fixed slide-in panel. NB: .site-header has backdrop-filter, which makes it the
     containing block for this fixed child — so a viewport-relative height is required
     (top/bottom alone collapse it to the header's height). */
  .nav-primary { position: fixed; inset: var(--nav-h) 0 0 0; height: calc(100vh - var(--nav-h)); height: calc(100dvh - var(--nav-h));
    background: var(--ivory); flex-direction: column; align-items: stretch;
    padding: 18px; gap: 6px; overflow-y: auto; transform: translateX(100%);
    /* Hidden while parked off-canvas, so its 34 links stay out of the tab order
       and the accessibility tree until the menu is actually opened. The
       visibility switch is delayed on close so the slide-out still animates. */
    visibility: hidden; transition: transform .3s ease, visibility 0s linear .3s; }
  .nav-primary.is-open { transform: translateX(0); visibility: visible; transition: transform .3s ease, visibility 0s; }
  .nav-link { padding: 16px 18px; font-size: 1.05rem; border-radius: var(--radius-sm); }
  /* Split row: the label navigates to its own section page, the chevron button
     beside it opens the submenu. Two separate targets, so neither action can
     swallow the other. */
  .has-dropdown { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 2px; }
  .has-dropdown > .nav-link { grid-column: 1; }
  .has-dropdown > .nav-link .chev { display: none; }
  .nav-sub-toggle { grid-column: 2; display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: var(--radius-sm); color: var(--ink); cursor: pointer; }
  .nav-sub-toggle:hover { color: var(--gold-deep); background: var(--gold-tint); }
  .nav-sub-toggle .chev { width: 9px; height: 9px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-top: -3px; transition: transform .2s ease; }
  /* only the open state rotates it - not hover/focus, which the desktop rule does */
  .has-dropdown:hover .nav-sub-toggle .chev, .has-dropdown:focus-within .nav-sub-toggle .chev { transform: rotate(45deg); margin-top: -3px; }
  .has-dropdown.is-open .nav-sub-toggle .chev { transform: rotate(225deg); margin-top: 3px; }
  .dropdown { grid-column: 1 / -1; }
  .dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; display: none; margin-left: 12px; }
  /* neutralise the desktop hover/focus transform (translateX(-50%)) that shoves the static submenu off-screen */
  .has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown { transform: none; }
  .has-dropdown.is-open .dropdown { display: block; }
  /* backdrop-filter makes .site-header the containing block for the fixed nav
     panel, so body's overflow-x can't reach it - clip here instead. `clip` on
     one axis leaves the other visible, so the panel (and the dropdowns) still
     extend down the page normally. */
  .site-header { overflow-x: clip; }
  .nav-toggle { display: flex; }
  .nav-actions .btn-book-nav { padding-inline: 18px; font-size: .85rem; }
}
@media (max-width: 520px) {
  /* Keep the full "Book An Appointment" label, just compact it to fit beside the
     toggle. The logo + button + toggle previously overran a 375px screen by
     ~33px, pushing the hamburger off the right edge, so the row gap and the
     toggle's own padding come in alongside the button. */
  .nav-row { gap: 10px; }
  .nav-actions { gap: 6px; }
  .nav-actions .btn-book-nav { padding-inline: 10px; font-size: .66rem; }
  .nav-toggle { padding: 6px 2px 6px 6px; }
}
@media (min-width: 981px) { .nav-primary { display: flex !important; } }

/* ---- Hero (full-bleed cinematic media, editorial headline, stat rail) ---- */
.hero { position: relative; min-height: 94dvh; display: flex; overflow: hidden; color: var(--ivory); }
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img, .hero__video { width: 100%; height: 100%; object-fit: cover; object-position: center 32%; }
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(30,26,18,.5) 0%, rgba(30,26,18,.32) 34%, rgba(23,22,14,.9) 100%),
              linear-gradient(90deg, rgba(20,22,15,.6) 0%, rgba(20,22,15,.12) 58%);
}
.hero__content {
  position: relative; z-index: 1; width: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-block: clamp(120px, 16vw, 172px) clamp(40px, 5vw, 64px);
}
.hero__inner { max-width: 720px; }
.hero__badge {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(250,246,239,.12); border: 1px solid rgba(250,246,239,.3);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--ivory); font-weight: 600; font-size: .8rem; letter-spacing: .02em;
  padding: 9px 18px; border-radius: 999px; margin-bottom: 24px;
}
.hero__badge svg { color: var(--gold-soft); }
.hero h1 { color: var(--ivory); margin-bottom: 6px; }
.hero h1 em { font-style: italic; color: var(--gold-soft); }
.hero__kr { font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: rgba(250,246,239,.7); margin-block: 14px 20px; }
.hero__sub { font-size: 1.1rem; color: rgba(250,246,239,.85); max-width: 46ch; margin-bottom: 30px; }
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero .btn-ghost { color: var(--ivory); border-color: rgba(250,246,239,.5); }
.hero .btn-ghost:hover { color: var(--gold-soft); border-color: var(--gold-soft); }

/* Stat rail pinned to the bottom of the hero, Function-style dividers */
.hero__stats {
  display: grid; grid-template-columns: repeat(4, 1fr); align-items: start;
  margin-top: clamp(36px, 6vw, 64px);
  padding-top: 22px; border-top: 1px solid rgba(250,246,239,.22); margin-bottom: 0;
}
.hero__stat { min-width: 0; padding-inline: clamp(14px, 2.2vw, 32px); border-left: 1px solid rgba(250,246,239,.22); }
.hero__stat:first-child { padding-left: 0; border-left: none; }
.hero__stat-num { font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.05; color: var(--ivory); }
.hero__stat-label { font-size: .84rem; color: rgba(250,246,239,.72); margin-top: 2px; }

/* Treatment-category rail variant */
.hero__cats .hero__stat a {
  font-family: var(--font-display); font-size: clamp(1rem, 1.5vw, 1.35rem); line-height: 1.15;
  color: var(--ivory); display: inline-block; transition: color .2s ease; text-wrap: balance;
}
.hero__cats .hero__stat a:hover { color: var(--gold-soft); }
.hero__cats .hero__stat-label { display: block; margin-top: 6px; }

@media (max-width: 780px) {
  .hero__stats { grid-template-columns: 1fr 1fr; row-gap: 22px; }
  .hero__stat { border-left: none; padding-left: 0; }
  .hero__stat:nth-child(2n) { border-left: 1px solid rgba(250,246,239,.22); padding-left: clamp(14px, 4vw, 20px); }
}

/* ---- Steps ("Booking is easy" — Function "Testing is easy" pattern) ---- */
.steps-head { text-align: center; margin-bottom: clamp(40px, 5vw, 64px); }
.steps-head h2 { font-size: clamp(2.2rem, 4.4vw, 3.5rem); }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.step-card {
  display: flex; flex-direction: column; text-align: center;
  background: var(--cream); border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  padding: clamp(28px, 3vw, 40px);
}
.step-card__num { font-family: var(--font-display); font-style: italic; font-size: 1.5rem; color: var(--gold-deep); margin-bottom: 12px; }
.step-card h3 { margin-bottom: 10px; }
.step-card p { color: var(--ink-soft); font-size: .95rem; margin-bottom: 26px; max-width: 30ch; margin-inline: auto; }
.step-card__ui { margin-top: auto; }

.step-ui { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-md); padding: 16px; box-shadow: var(--shadow-sm); text-align: left; }
.step-ui__label { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; color: var(--ink-faint); margin-bottom: 12px; }

.slot-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.slot-grid span { text-align: center; font-size: .82rem; font-weight: 600; padding: 9px 4px; border-radius: 9px; background: var(--cream); color: var(--ink-soft); }
.slot-grid .is-active { background: var(--gold-deep); color: var(--ivory); box-shadow: var(--shadow-gold); }

.meter { display: grid; grid-template-columns: 66px 1fr; align-items: center; gap: 10px; margin-bottom: 11px; }
.meter:last-child { margin-bottom: 0; }
.meter__name { font-size: .78rem; font-weight: 600; color: var(--ink-soft); }
.meter__track { height: 8px; background: var(--cream); border-radius: 999px; overflow: hidden; }
.meter__track i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-soft), var(--gold-deep)); border-radius: 999px; }

.plan-row { display: flex; align-items: center; gap: 11px; padding: 10px; border-radius: 11px; background: var(--cream); margin-bottom: 8px; }
.plan-row:last-child { margin-bottom: 0; }
.plan-ic { flex-shrink: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 9px; background: var(--gold-tint); color: var(--gold-deep); font-size: .95rem; }
.plan-row__text b { display: block; font-size: .84rem; color: var(--ink); }
.plan-row__text small { display: block; font-size: .72rem; color: var(--ink-faint); }

.steps-cta { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: clamp(36px, 5vw, 56px); }

@media (max-width: 860px) {
  .steps-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
}

/* ---- Page banner (interior pages) ---- */
.page-banner { --banner-pb: clamp(56px, 8vw, 80px); position: relative; padding-block: clamp(120px, 16vw, 168px) var(--banner-pb); overflow: hidden; }
.page-banner__bg { position: absolute; inset: 0; z-index: 0; background: radial-gradient(1200px 500px at 15% -10%, var(--gold-tint), transparent 60%), var(--cream); }
.page-banner__content { position: relative; z-index: 1; }
/* Scroll-linked blur along the bottom edge of every section (background, art
   and copy alike). --blur-out / --blur-in are driven from main.js by how far that section
   has scrolled off the top; the mask keeps the middle sharp and ramps the
   effect in only near the bottom edge, so headings never go soft while you are
   reading them. The class is added from main.js, so no markup changes anywhere.
   The band is a fixed-height strip rather than inset:0 — a 1600px section would
   otherwise composite a 1600px layer to show a couple of hundred px of blur. */
.scroll-blur { position: relative; }
/* ::after = the bottom edge, softening as the section leaves upward.
   ::before = the top edge, softening as the section arrives from below.
   The two masks are mirrors, so a boundary blurs the same on the way in as on
   the way out; each is driven by its own variable and gated by its own class,
   because a section can be arriving and leaving at different moments. */
.scroll-blur::after,
.scroll-blur::before {
  content: '';
  position: absolute; left: 0; right: 0;
  height: clamp(180px, 32vh, 400px);
  z-index: 2;
  pointer-events: none;
}
.scroll-blur::after {
  bottom: 0;
  -webkit-backdrop-filter: blur(var(--blur-out, 0px));
  backdrop-filter: blur(var(--blur-out, 0px));
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.45) 45%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.45) 45%, #000 100%);
}
.scroll-blur::before {
  top: 0;
  -webkit-backdrop-filter: blur(var(--blur-in, 0px));
  backdrop-filter: blur(var(--blur-in, 0px));
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.45) 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.45) 55%, transparent 100%);
}
/* No compositing layer at all until that half is actually running */
.scroll-blur:not(.is-blurring-out)::after { display: none; }
.scroll-blur:not(.is-blurring-in)::before { display: none; }
/* Pickers — the Treatment Guide tab bar and the Promos filter pills — sit right
   at the top of their section, so the arriving band lands squarely on them and
   softens the labels while you are trying to choose one. Those bands opt out;
   the leaving band still applies (it never reaches either row anyway). */
.scroll-blur:has(.tab-list)::before,
.scroll-blur:has(.jump-to)::before { display: none; }

/* Fixed block padding on the tab section, instead of .section's responsive
   clamp(64px, 9vw, 128px) — the tab bar wants the same breathing room at every
   width. Scoped with :has() so every other .section keeps the clamp. */
.section:has(.tab-list) { padding-block: 70px; }
@media (prefers-reduced-motion: reduce) {
  .scroll-blur::after,
  .scroll-blur::before { display: none; }
}
/* Separators are their own .breadcrumb__sep items, never literal " / " text.
   A literal slash sitting next to a link gets bundled into one anonymous flex
   item with the label, so `gap` applies before the slash but not after it —
   which read as 8px on one side and a 2.7px word-space on the other. */
.breadcrumb { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: .85rem; color: var(--ink-faint); margin-bottom: 18px; }
.breadcrumb__sep { color: var(--ink-faint); opacity: .7; user-select: none; }
.breadcrumb a:hover { color: var(--gold-deep); }

/* ---- "Ignored by most. Treated by us." looping marquee ---- */
.tested { position: relative; overflow: hidden; min-height: clamp(440px, 52vw, 620px); display: flex; flex-direction: column; justify-content: center; color: var(--ivory); background: var(--forest-deep); }
.tested__bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center 28%; }
.tested__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(38,42,38,.62) 0%, rgba(30,34,30,.5) 42%, rgba(24,28,24,.72) 100%); }
.tested__title { position: relative; z-index: 2; text-align: center; color: var(--ivory); font-size: clamp(1.9rem, 4vw, 3.2rem); padding-inline: 20px; margin-bottom: clamp(28px, 5vw, 52px); text-shadow: 0 2px 30px rgba(0,0,0,.35); }
.tested__title em { color: var(--ivory); }

.tested__marquee { position: relative; z-index: 2; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.tested__track { display: flex; gap: 16px; width: max-content; padding-inline: 8px; animation: tested-scroll 48s linear infinite; }
.tested__marquee:hover .tested__track { animation-play-state: paused; }
.tested.is-paused .tested__track { animation-play-state: paused; }
@keyframes tested-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .tested__track { animation: none; } }

.tested-card { position: relative; flex: 0 0 clamp(238px, 25vw, 296px); padding: 20px 22px; border-radius: var(--radius-md); background: rgba(18,20,16,.34); border: 1px solid rgba(255,255,255,.18); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.tested-card h3 { color: var(--ivory); font-size: 1.15rem; margin-bottom: 6px; padding-right: 54px; }
.tested-card p { color: rgba(250,246,239,.8); font-size: .82rem; line-height: 1.4; margin-bottom: 16px; max-width: 30ch; }
.tested-card__tag { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 600; color: rgba(250,246,239,.88); }
.tested-card__tag svg { color: var(--gold-soft); }
.tested-card__spark { position: absolute; right: 18px; top: 22px; color: rgba(250,246,239,.7); }

.tested__pause { position: absolute; z-index: 3; right: clamp(16px, 3vw, 30px); bottom: clamp(16px, 3vw, 26px); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--ivory); background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.32); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .2s ease; }
.tested__pause:hover { background: rgba(255,255,255,.28); }
.tested__pause .ic-play { display: none; }
.tested.is-paused .tested__pause .ic-pause { display: none; }
.tested.is-paused .tested__pause .ic-play { display: block; }

/* ---- Promos: jump-to tag nav + per-tag image gallery ---- */
.jump-to { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.jump-to__label { font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); margin-right: 4px; }
.jump-pill { display: inline-flex; align-items: center; padding: 9px 18px; border: 1.5px solid var(--line); border-radius: 999px; font-size: .88rem; font-weight: 600; color: var(--ink); background: var(--surface); transition: background .2s ease, border-color .2s ease, color .2s ease; }
.jump-pill:hover { border-color: var(--gold-deep); color: var(--gold-deep); }
.jump-pill.is-active { background: var(--forest-deep); border-color: var(--forest-deep); color: var(--ivory); }
/* The two offer-group pills (Special Offers, Package Promos) share one colour
   flag. Resting + hover only: the active state deliberately keeps the shared
   forest-deep fill, so "selected" looks identical on every pill. The hover
   colour is pinned to --ink because the inherited --gold-deep scores only
   2.9:1 on this background (vs 10.5:1). */
.jump-pill:is([data-filter="special-offers"], [data-filter="package-promos"], [data-filter="rejuran-line"]) { background: var(--package); border-color: var(--package); }
.jump-pill:is([data-filter="special-offers"], [data-filter="package-promos"], [data-filter="rejuran-line"]):hover { background: var(--package-deep); border-color: var(--package-deep); color: var(--ink); }
.jump-pill:is([data-filter="special-offers"], [data-filter="package-promos"], [data-filter="rejuran-line"]).is-active { background: var(--forest-deep); border-color: var(--forest-deep); color: var(--ivory); }

.promo-tag { padding-block: clamp(36px, 5vw, 60px); }
.promo-tag--alt { background: var(--cream); }
.promo-tag__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.promo-tag h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.promo-tag__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 22px); }
.promo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 22px); margin-top: clamp(28px, 4vw, 44px); }
.promo-shot { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: var(--radius-md); overflow: hidden; background: var(--cream); border: 1px solid var(--line-soft); box-shadow: var(--shadow-sm); }
.promo-shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.promo-shot:hover img { transform: scale(1.02); }
@media (max-width: 600px) {
  .promo-grid { grid-template-columns: 1fr; }
  /* The tile fills the screen on a phone, so the category chips sit on top of
     the promo artwork and cover it. The filter pills above already say which
     category you are looking at. Two classes, not one: the base
     .promo-shot__tags rule sets display:flex and sits later in the file, so an
     equal-specificity rule here would lose to it. */
  .promo-shot .promo-shot__tags { display: none; }
  .jump-to { gap: 7px; }
  .jump-to__label { font-size: .66rem; margin-right: 2px; }
  .jump-pill { padding: 6px 13px; font-size: .78rem; border-width: 1px; }
}
.promo-shot__tags {
  /* one chip per tag, centred along the top edge of the tile. Wraps onto a
     second row instead of truncating — a tile can carry up to four tags. */
  position: absolute; top: 12px; left: 12px; right: 12px; z-index: 1;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px;
}
.promo-shot__tag {
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 4px 10px 2px 10px; border-radius: 999px;
  font-size: .54rem; font-weight: 700; letter-spacing: .02em; color: #fff;
  background: rgba(30, 26, 18, .42); border: 1px solid rgba(255, 255, 255, .35);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
/* The offer-group chip (Special Offers or Package Promos — every tile has
   exactly one, and it leads the row) carries the flag colour on its border,
   matching its filter pill. Each chip has its own data-tag, so only that chip
   is marked — the tile's treatment chips keep the standard border. */
.promo-shot__tag:is([data-tag="special-offers"], [data-tag="package-promos"], [data-tag="rejuran-line"]) { border-color: var(--package); }
.promo-shot { cursor: pointer; }

/* Promo detail drawer — right-side panel (desktop) / full screen (mobile) */
.promo-drawer { position: fixed; inset: 0; z-index: 950; display: flex; justify-content: flex-end; visibility: hidden; }
.promo-drawer__scrim { position: absolute; inset: 0; background: rgba(24, 20, 12, .5); opacity: 0; transition: opacity .3s ease; }
.promo-drawer__panel { position: relative; width: clamp(440px, 50vw, 860px); height: 100%; background: var(--surface); box-shadow: -20px 0 60px -20px rgba(30, 26, 18, .45); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.promo-drawer.is-open { visibility: visible; }
.promo-drawer.is-open .promo-drawer__scrim { opacity: 1; }
.promo-drawer.is-open .promo-drawer__panel { transform: translateX(0); }
.promo-drawer__close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--ink); background: rgba(255, 255, 255, .9); border: 1px solid var(--line-soft); box-shadow: var(--shadow-sm); }
.promo-drawer__close:hover { background: var(--cream); }
.promo-drawer__scroll { flex: 1; overflow-y: auto; }
.promo-drawer__img { width: 100%; max-height: 58vh; object-fit: contain; background: var(--cream); display: block; }
.promo-drawer__body { padding: clamp(22px, 4vw, 32px); }
.promo-drawer__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.promo-drawer__tags span { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-deep); background: var(--gold-tint); padding: 5px 12px; border-radius: 999px; }
.promo-drawer__title { font-size: clamp(1.4rem, 3vw, 1.75rem); margin-bottom: 12px; }
.promo-drawer__desc { color: var(--ink-soft); font-size: .95rem; margin-bottom: 20px; }
.promo-drawer__foot { position: relative; padding: clamp(16px, 3vw, 22px) clamp(22px, 4vw, 32px); border-top: 1px solid var(--line); background: var(--surface); text-align: center; }
/* Scroll cue: floats just above the Book button, over the end of the list, and
   only while there is still something below the fold. Anchored to the foot so
   it does not scroll away with the content it is pointing at. */
.promo-drawer__hint {
  position: absolute; bottom: calc(100% + 12px); left: 50%;
  transform: translateX(-50%);
  width: 34px; height: 46px;
  display: grid; place-items: center;
  border-radius: 999px;
  color: var(--gold-deep);
  background: rgba(255, 255, 255, .88);
  box-shadow: var(--shadow-md);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
  pointer-events: none;
}
.promo-drawer__hint svg { width: 17px; height: 26px; display: block; }
.promo-drawer__hint.is-visible { opacity: 1; visibility: visible; animation: hint-bob 1.9s ease-in-out infinite; }
@keyframes hint-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-5px); }
}
@media (prefers-reduced-motion: reduce) { .promo-drawer__hint.is-visible { animation: none; } }
/* Text header (replaces the image) + promo detail card */
.promo-drawer__head { flex-shrink: 0; background: var(--cream); padding: clamp(30px, 5vw, 46px) clamp(22px, 4vw, 32px) clamp(24px, 4vw, 34px); border-bottom: 1px solid var(--line); }
.promo-drawer__eyebrow { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 10px; }
.promo-drawer__cat { font-size: clamp(1.6rem, 4vw, 2.2rem); line-height: 1.1; color: var(--ink); }
/* Category subtitle, sits on the line under the drawer title. */
.promo-drawer__sub { margin-top: 8px; font-size: .95rem; line-height: 1.5; color: var(--ink-soft); max-width: 46ch; }
/* Two aligned columns: each left item shares a row with its right counterpart */
/* Card type scale is set flat, not clamped — the sizes below are the client's
   own spec off the annotated card. row-gap and the desc's leading are both
   halved from what they were (4.2px, and 1.5 line-height = .5em of extra
   leading), so the tighter block keeps its proportions at the smaller size. */
.promo-card { display: grid; grid-template-columns: 1fr auto; column-gap: clamp(16px, 3vw, 36px); row-gap: 2.1px; align-items: baseline; margin-bottom: 24px; }
.promo-card__name { grid-area: 1 / 1; font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; line-height: 1.05; color: var(--ink); }
.promo-card__amt  { grid-area: 1 / 2; justify-self: end; font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; line-height: 1.05; color: var(--ink); white-space: nowrap; }
.promo-card__sub  { grid-area: 2 / 1; font-family: var(--font-script); font-style: italic; font-size: 1rem; color: var(--ink-soft); }
.promo-card__badge{ grid-area: 2 / 2; justify-self: end; color: #d9574d; font-weight: 400; font-size: 1rem; letter-spacing: .02em; }
.promo-card__desc { grid-area: 3 / 1; color: var(--ink-soft); font-size: .8rem; line-height: 1.25; }
.promo-card__orig { grid-area: 3 / 2; justify-self: end; font-size: .8rem; color: var(--ink-faint); white-space: nowrap; }
.promo-card__orig s { color: #c86a5c; }

/* Info icon after a service name in a card description. Sized in em so it
   tracks the .8rem description type, and nudged up a hair to sit optically on
   the text baseline rather than hanging below it. */
.svc-info {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;                       /* never let a flex parent squash it */
  width: .9em; height: .9em; margin: 0 .1em; padding: 0; border: 0;
  background: none; color: var(--info); cursor: pointer;
  vertical-align: -.09em; border-radius: 50%;
  transition: color .2s ease, transform .2s ease;
}
.svc-info svg { width: 100%; height: 100%; display: block; overflow: visible; }
/* On a card title the type is much larger (1.4rem display face), so the icon
   is scaled down relative to it — otherwise it reads as a bullet, not a hint. */
.promo-card__name .svc-info { width: .58em; height: .58em; margin-left: .18em; vertical-align: .06em; }
/* Drawer heading is larger again (~2rem display face) — scale down further so
   the icon stays a hint beside the title rather than competing with it. */
.promo-drawer__cat .svc-info { width: .42em; height: .42em; margin-left: .2em; vertical-align: .14em; }
.svc-info:hover { color: var(--info-deep); transform: scale(1.12); }
.svc-info:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }

/* Service info modal — above the promo drawer (950) and its lifted tile (960) */
.svc-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; visibility: hidden; }
.svc-modal__scrim { position: absolute; inset: 0; background: rgba(24, 20, 12, .55); opacity: 0; transition: opacity .25s ease; }
.svc-modal__panel {
  position: relative; width: min(420px, calc(100vw - 48px)); max-height: 80vh; overflow-y: auto;
  background: var(--surface); border-radius: var(--radius-md); box-shadow: 0 24px 60px -18px rgba(30, 26, 18, .5);
  padding: 30px 28px 26px; transform: translateY(10px) scale(.98); opacity: 0;
  transition: transform .28s cubic-bezier(.2, .8, .2, 1), opacity .28s ease;
}
.svc-modal.is-open { visibility: visible; }
.svc-modal.is-open .svc-modal__scrim { opacity: 1; }
.svc-modal.is-open .svc-modal__panel { transform: none; opacity: 1; }
.svc-modal__close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--ink-soft); cursor: pointer; }
.svc-modal__close:hover { background: var(--cream); color: var(--ink); }
.svc-modal__title { font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; line-height: 1.15; color: var(--ink); margin: 0 28px 10px 0; }
.svc-modal__text { font-size: .92rem; line-height: 1.6; color: var(--ink-soft); margin: 0; }
.svc-modal__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: .84rem; font-weight: 600; color: var(--gold-deep); text-decoration: none; }
.svc-modal__more:hover { color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .svc-modal__panel, .svc-modal__scrim, .svc-info { transition: none; }
}
/* Description inline links: subtle thin underline, inherits text colour */
.promo-card__desc a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--line); transition: text-decoration-color .2s ease, color .2s ease; }
.promo-card__desc a:hover { text-decoration-color: currentColor; color: var(--ink); }
/* Price, discount + original as links: retain the existing design, just clickable */
a.promo-card__amt, a.promo-card__orig, a.promo-card__badge { text-decoration: none; cursor: pointer; }
a.promo-card__amt:hover, a.promo-card__orig:hover, a.promo-card__badge:hover { opacity: .82; }
a.promo-card__badge { color: #d9574d; }
.promo-drawer__list .promo-card { margin-bottom: 0; }
.promo-drawer__list .promo-card + .promo-card { margin-top: 28.1px; padding-top: 28.1px; border-top: 1px solid var(--line); }
/* The panel opens on the side OPPOSITE the tile you clicked, and that tile is
   lifted clear of the scrim — so the artwork stays visible, undimmed, next to
   the prices it belongs to. Desktop only: below 640px the panel is full width,
   so there is no free side to preview into and nothing to lift above. */
@media (min-width: 641px) {
  .promo-drawer--left { justify-content: flex-start; }
  .promo-drawer--left .promo-drawer__panel {
    transform: translateX(-100%);
    box-shadow: 20px 0 60px -20px rgba(30, 26, 18, .45);
  }
  .promo-drawer--left.is-open .promo-drawer__panel { transform: translateX(0); }
  /* .promo-drawer is z-index 950; the tile has to clear it to escape the scrim.
     Safe because the panel is always on the other side of the screen. */
  .promo-shot.is-previewing {
    z-index: 960;
    box-shadow: 0 0 0 2px var(--gold-deep), var(--shadow-lg);
  }
}
@media (max-width: 640px) { .promo-drawer { justify-content: stretch; } .promo-drawer__panel { width: 100%; } .promo-drawer__img { max-height: 46vh; } }
@media (prefers-reduced-motion: reduce) { .promo-drawer__panel, .promo-drawer__scrim { transition: none; } }

/* ---- Treatment Guide banner figure (crossfades with the active tab) ---- */
.tg-banner { display: grid; grid-template-columns: minmax(0, 1fr) clamp(240px, 32vw, 420px); gap: clamp(24px, 4vw, 56px); align-items: end; }
/* Banner with the copy on the left and a single static image on the right.
   Text children flow down column 1; the figure spans every row in column 2, so
   no extra wrapper div is needed around the existing banner copy. */
.page-banner__content--split { display: grid; grid-template-columns: minmax(0, 1fr) clamp(240px, 30vw, 400px); gap: clamp(24px, 4vw, 56px); align-items: end; }
.page-banner__content--split > * { grid-column: 1; }
.page-banner__content--split > .banner-figure { grid-column: 2; grid-row: 1 / -1; align-self: end; }

/* The banner art is a transparent PNG cut-out of a model, so it gets no card
   treatment — no panel background, no rounded corners, no shadow. The negative
   bottom margin cancels .page-banner's own bottom padding so the subject stands
   on the section's bottom edge; .page-banner already clips its overflow.
   4/5 matches the source artwork (840x1050), so nothing is letterboxed. */
.banner-figure, .tg-figure { width: 100%; aspect-ratio: 4 / 5; margin-bottom: calc(-1 * var(--banner-pb)); }
.banner-figure img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; display: block; }

.tg-figure { position: relative; }
.tg-figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom; opacity: 0; transition: opacity .6s ease; }
.tg-figure img.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .tg-figure img { transition: none; } }
@media (max-width: 820px) {
  .tg-banner { grid-template-columns: 1fr; }
  .page-banner__content--split { grid-template-columns: 1fr; }
  .page-banner__content--split > .banner-figure { grid-column: 1; grid-row: auto; }
  .banner-figure, .tg-figure { max-width: 300px; margin-top: 6px; margin-inline: auto; }
}

/* ---- Guarantee / trust pillars ---- */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.pillar { background: var(--surface); padding: clamp(28px, 3vw, 44px) clamp(24px, 3vw, 36px); }
.pillar:nth-child(2) { background: var(--forest); color: var(--ivory); }
.pillar:nth-child(2) h3 { color: var(--ivory); }
.pillar:nth-child(2) .pillar__num { color: var(--gold-soft); }
.pillar__num { font-family: var(--font-display); font-style: italic; font-size: 2.2rem; color: var(--gold-soft); opacity: .8; display: block; margin-bottom: 14px; }
.pillar:nth-child(1) .pillar__num, .pillar:nth-child(3) .pillar__num { color: var(--gold-deep); opacity: 1; }
.pillar h3 { margin-bottom: 10px; }
/* About: intro text + photo — stacks (text, then photo) on tablet/mobile */
.about-split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
@media (max-width: 860px) {
  .about-split { grid-template-columns: 1fr; gap: 28px; }
  .about-split img { height: auto; max-height: 360px; }
}
.pillar p { color: var(--ink-soft); font-size: .96rem; }
.pillar:nth-child(2) p { color: rgba(250,246,239,.78); }
@media (max-width: 820px) { .pillars { grid-template-columns: 1fr; } }

/* ---- Category / treatment grid (asymmetric, not 3-equal) ---- */
.category-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px; }
.category-card {
  position: relative; grid-column: span 3; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--surface); border: 1px solid var(--line-soft); padding: clamp(28px, 3vw, 40px);
  display: flex; flex-direction: column; min-height: 300px; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.category-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--gold-soft); }
.category-card:nth-child(1) { grid-column: span 4; }
.category-card:nth-child(2) { grid-column: span 2; background: var(--forest); color: var(--ivory); border-color: var(--forest); }
.category-card:nth-child(2) h3, .category-card:nth-child(2) .btn-text { color: var(--ivory); }
.category-card:nth-child(2) p { color: rgba(250,246,239,.78); }
.category-card:nth-child(3) { grid-column: span 2; }
.category-card:nth-child(4) { grid-column: span 4; }
.category-card__index { font-family: var(--font-display); font-style: italic; font-size: 1rem; color: var(--gold-deep); margin-bottom: auto; padding-bottom: 20px; }
.category-card:nth-child(2) .category-card__index { color: var(--gold-soft); }
.category-card h3 { margin-bottom: 10px; }
.category-card p { color: var(--ink-soft); font-size: .95rem; margin-bottom: 20px; }
@media (max-width: 900px) {
  .category-grid { grid-template-columns: 1fr; }
  .category-card, .category-card:nth-child(1), .category-card:nth-child(2), .category-card:nth-child(3), .category-card:nth-child(4) { grid-column: 1 / -1; }
}

/* ---- Treatment catalog cards ---- */
.tab-list { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 40px; border-bottom: 1px solid var(--line); padding-bottom: 0; }
.tab-btn {
  padding: 12px 22px; font-weight: 600; font-size: .92rem; color: var(--ink-soft);
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .2s ease, border-color .2s ease;
}
.tab-btn:hover { color: var(--gold-deep); }
.tab-btn[aria-selected="true"] { color: var(--forest-deep); border-color: var(--gold-deep); }
.tab-panel { display: none; }
.tab-panel.is-active { display: block; animation: fadeUp .4s ease both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.treat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; align-items: stretch; }
.treat-card { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-md); padding: 26px; display: flex; flex-direction: column; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.treat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--gold-soft); }
.treat-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.treat-card h4 { font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; }
.treat-card__badge { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--gold-deep); background: var(--gold-tint); padding: 5px 10px; border-radius: 999px; white-space: nowrap; }
/* Content packs from the top of the card down - description, then chips
   wrapping onto as many lines as they need. The slack is left above the foot,
   which is pinned by its own margin-top:auto, so the description must NOT
   grow (that is what used to shove the chips to the bottom of the card). */
.treat-card p { color: var(--ink-soft); font-size: .92rem; flex-grow: 0; margin-bottom: 18px; }
/* Sub-services listed on a card, from the price list. Which ones appear
   depends on the tab: a sub-service shows only under its own categories, so
   the same card can list different items in different tabs. */
.treat-card__subs { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.treat-card__subs li { font-size: .74rem; line-height: 1.35; color: var(--ink-soft); background: var(--ivory); border: 1px solid var(--line-soft); border-radius: 999px; padding: 4px 10px; }
/* Card title and chips link through to the service page. No underline by
   request - the colour shift on hover carries the affordance instead. */
.treat-card h4 a, .treat-card__subs a { color: inherit; text-decoration: none; }
.treat-card h4 a:hover, .treat-card h4 a:focus-visible { color: var(--gold-deep); }
.treat-card__subs a { display: block; }
.treat-card__subs li:hover { border-color: var(--gold-soft); background: var(--gold-tint); }
.treat-card__subs li:hover a { color: var(--gold-deep); }
/* Prices are not shown in the guide, so the Book action sits centred. */
.treat-card__foot { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: auto; padding-top: 16px; border-top: 1px dashed var(--line); }
.treat-card__price { font-weight: 600; color: var(--forest-deep); font-size: .92rem; }
.treat-card__price .ph { color: var(--ink-faint); font-weight: 500; }

/* ---- Doctor cards ---- */
.doctor { display: grid; grid-template-columns: 260px 1fr; gap: clamp(28px, 4vw, 56px); padding-block: clamp(40px, 6vw, 64px); border-bottom: 1px solid var(--line); align-items: start; }
.doctor:last-of-type { border-bottom: none; }
.doctor:nth-child(even) { direction: rtl; }
.doctor:nth-child(even) > * { direction: ltr; }
.doctor__avatar {
  width: 100%; aspect-ratio: 4/5; border-radius: var(--radius-lg); background: var(--cream);
  display: flex; align-items: center; justify-content: center; color: var(--gold-soft); font-family: var(--font-display); font-style: italic;
  font-size: 3.4rem; box-shadow: var(--shadow-md); position: relative; overflow: hidden;
}
.doctor__avatar::after { display: none; }
.doctor__avatar img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; }
/* Index "About the doctors" teaser — group banner photo */
.doctor-banner { margin-top: clamp(28px, 4vw, 44px); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.doctor-banner img { width: 100%; height: auto; display: block; }
.doctor__quote { font-family: var(--font-display); font-style: italic; font-size: 1.25rem; color: var(--forest-deep); margin-block: 6px 16px; line-height: 1.4; }
.doctor__cred { font-family: var(--font-body); color: var(--gold-deep); font-weight: 600; font-size: .92rem; margin-bottom: 4px; }
.doctor__title { color: var(--ink-faint); font-size: .9rem; margin-bottom: 16px; }
.doctor__bio { color: var(--ink-soft); margin-bottom: 18px; max-width: 62ch; }
.doctor__edu { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.doctor__edu li { position: relative; padding-left: 20px; color: var(--ink-soft); font-size: .9rem; }
.doctor__edu li::before { content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-deep); }
@media (max-width: 760px) { .doctor, .doctor:nth-child(even) { grid-template-columns: 1fr; direction: ltr; } .doctor__avatar { max-width: 220px; } }

/* ---- Machine / tech zig-zag ---- */
.machine { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; padding-block: clamp(48px, 7vw, 88px); border-bottom: 1px solid var(--line); }
.machine:last-of-type { border-bottom: none; }
.machine:nth-child(even) .machine__visual { order: 2; }
/* Machine photos use the same card treatment as the doctor portraits:
   portrait 4/5, flat --cream panel, rounded, soft shadow. Capped at 360px so
   the panel keeps the height it had before and the rows stay balanced. */
.machine__visual {
  width: 100%; max-width: 360px; margin-inline: auto;
  aspect-ratio: 4/5; border-radius: var(--radius-lg); background: var(--cream);
  box-shadow: var(--shadow-md); position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
/* contain, not cover: these are product shots, so the whole device has to stay
   in frame (the portraits can crop because a torso can). 80% leaves an even
   margin of panel showing around the machine - the parent centres it. */
.machine__visual img { position: relative; z-index: 1; width: 80%; height: 80%; object-fit: contain; display: block; }
.machine__name { color: var(--gold-deep); font-weight: 600; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px; }
.machine__desc { color: var(--ink-soft); margin-block: 14px 20px; }
.machine__benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
.machine__benefits li { position: relative; padding-left: 22px; font-size: .92rem; color: var(--ink-soft); }
.machine__benefits li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--gold-deep); font-weight: 700; }
@media (max-width: 760px) {
  .machine, .machine:nth-child(even) .machine__visual { grid-template-columns: 1fr; order: 0; }
  .machine__benefits { grid-template-columns: 1fr; }
}

/* ---- Gallery strip ---- */
.gallery-strip { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 12px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.gallery-strip::-webkit-scrollbar { height: 6px; }
.gallery-strip::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.gallery-strip img { flex: 0 0 auto; width: 220px; height: 320px; object-fit: cover; border-radius: var(--radius-md); scroll-snap-align: start; box-shadow: var(--shadow-sm); transition: transform .3s ease; }
.gallery-strip img:hover { transform: scale(1.03); }

/* ---- Why-choose-us (replaces unfilled testimonials) ---- */
.trust-band { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.trust-band__item { padding: 30px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--line-soft); }
.trust-band__quote { font-family: var(--font-display); font-style: italic; font-size: 1.3rem; color: var(--forest-deep); margin-bottom: 14px; }
.trust-band__item p:last-child { color: var(--ink-soft); font-size: .92rem; }
@media (max-width: 820px) { .trust-band { grid-template-columns: 1fr; } }

/* ---- Promo card ---- */
.promo-hero {
  position: relative; border-radius: var(--radius-lg); overflow: hidden; padding: clamp(40px, 6vw, 72px);
  background: radial-gradient(1000px 400px at 80% -20%, rgba(140,113,91,.5), transparent 60%), linear-gradient(155deg, var(--forest-deep), var(--forest));
  color: var(--ivory); box-shadow: var(--shadow-lg);
}
.promo-hero__badge { display: inline-flex; align-items: center; gap: 8px; background: var(--gold-deep); color: var(--ivory); font-weight: 700; padding: 8px 18px; border-radius: 999px; font-size: .85rem; margin-bottom: 20px; }
.promo-hero h2 { color: var(--ivory); margin-bottom: 14px; }
.promo-hero__valid { color: var(--gold-soft); font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; margin-top: 22px; }
.promo-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-block: 26px; }
.promo-items li { background: rgba(250,246,239,.08); border: 1px solid rgba(250,246,239,.18); border-radius: var(--radius-sm); padding: 14px 16px; font-size: .92rem; }

/* ---- Location / booking cards ---- */
.branch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.branch-card { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: clamp(26px, 3vw, 38px); }
.branch-card h3 { margin-bottom: 4px; }
.branch-card__hours { color: var(--gold-deep); font-weight: 600; font-size: .88rem; margin-bottom: 18px; }
.branch-card address { font-style: normal; color: var(--ink-soft); margin-bottom: 20px; }
.branch-card__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.branch-card iframe { width: 100%; border-radius: var(--radius-md); border: 1px solid var(--line-soft); margin-top: 20px; aspect-ratio: 16/9; }
@media (max-width: 820px) { .branch-grid { grid-template-columns: 1fr; } }

/* ---- Form ---- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: .85rem; font-weight: 600; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  padding: 13px 16px; font-size: .95rem; transition: border-color .2s ease, box-shadow .2s ease;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold-deep); box-shadow: 0 0 0 4px var(--gold-tint); outline: none; }
.field textarea { resize: vertical; min-height: 110px; }
.field small { color: var(--ink-faint); font-size: .78rem; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--rose); }
.field__error { color: var(--rose); font-size: .8rem; display: none; }
.field.has-error .field__error { display: block; }
.form-note { background: var(--gold-tint); border: 1px solid var(--gold-soft); border-radius: var(--radius-sm); padding: 14px 18px; font-size: .88rem; color: var(--gold-deep); margin-bottom: 24px; }
.form-status { margin-top: 18px; padding: 14px 18px; border-radius: var(--radius-sm); font-size: .92rem; display: none; }
.form-status.is-success { display: block; background: #e7f0e5; color: #2f4a2a; border: 1px solid #b9d4b2; }
.form-status.is-error { display: block; background: #f6e6e3; color: #7a3223; border: 1px solid #e3b3a6; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }

/* ---- CTA band ---- */
.cta-band { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; border-radius: var(--radius-lg); padding: clamp(32px, 4vw, 52px); background: linear-gradient(120deg, var(--gold-tint), var(--cream)); }

/* ---- Footer ---- */
.site-footer { background: var(--forest-deep); color: rgba(250,246,239,.85); padding-block: 72px 28px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 56px; }
/* Same height and same left correction as the header logo. */
.footer-brand img { height: var(--logo-h); width: auto; margin-left: calc(var(--logo-h) * -0.0952); margin-bottom: 16px; filter: brightness(0) invert(1); }
.footer-brand p { color: rgba(250,246,239,.6); font-size: .9rem; max-width: 34ch; margin-bottom: 20px; }
/* Email sits in the brand column, directly above the social icons. */
.footer-email { margin-bottom: 18px; }
.footer-email a { font-size: .9rem; color: rgba(250,246,239,.72); transition: color .2s ease; }
.footer-email a:hover { color: var(--gold-soft); }
.footer-social { display: flex; gap: 10px; }
.footer-social a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(250,246,239,.25); display: flex; align-items: center; justify-content: center; transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.footer-social a:hover { background: var(--gold-deep); border-color: var(--gold-deep); transform: translateY(-3px); }
.footer-social svg { width: 16px; height: 16px; fill: currentColor; }
.footer-col h4 { color: var(--gold-soft); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; margin-bottom: 18px; }
.footer-col ul { display: flex; flex-direction: column; gap: 11px; font-size: .9rem; }
.footer-col a, .footer-col address { font-size: .9rem; color: rgba(250,246,239,.72); font-style: normal; transition: color .2s ease; }
.footer-col a:hover { color: var(--gold-soft); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 26px; border-top: 1px solid rgba(250,246,239,.14); font-size: .82rem; color: rgba(250,246,239,.55); }
.footer-bottom nav { display: flex; gap: 20px; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---- Scroll reveal ---- */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
[data-reveal-group] > * { transition-delay: calc(var(--i, 0) * 90ms); }

/* ---- Promo modal ---- */
.promo-modal {
  position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(24, 20, 12, 0.55); backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease;
}
.promo-modal.is-open { opacity: 1; visibility: visible; }
.promo-modal__panel {
  position: relative; max-width: 480px; width: 100%; background: var(--surface); border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 44px); box-shadow: var(--shadow-lg); text-align: center;
  transform: translateY(16px) scale(.98); transition: transform .3s ease;
  background-image: radial-gradient(600px 260px at 50% -20%, var(--gold-tint), transparent 60%);
}
.promo-modal.is-open .promo-modal__panel { transform: translateY(0) scale(1); }
.promo-modal__close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--ink-faint); transition: background .2s ease, color .2s ease; }
.promo-modal__close:hover { background: var(--cream); color: var(--ink); }
.promo-modal__badge { display: inline-block; font-weight: 700; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-deep); background: var(--gold-tint); padding: 6px 14px; border-radius: 999px; margin-bottom: 16px; }
.promo-modal ul { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-block: 18px; }
.promo-modal li { font-size: .82rem; background: var(--cream); border: 1px solid var(--line-soft); padding: 7px 12px; border-radius: 999px; color: var(--ink-soft); }
.promo-modal__discount { font-family: var(--font-display); font-size: 3rem; color: var(--gold-deep); margin-block: 8px; }
.promo-modal__valid { font-size: .78rem; color: var(--ink-faint); letter-spacing: .06em; text-transform: uppercase; margin-top: 18px; }

/* ---- Misc ---- */
.divider-flourish { display: flex; align-items: center; gap: 14px; color: var(--gold-deep); margin-bottom: 18px; }
.divider-flourish::before, .divider-flourish::after { content: ''; height: 1px; width: 40px; background: var(--gold-deep); opacity: .5; }
.tag { display: inline-block; font-family: var(--font-body); padding: 5px 12px; border-radius: 999px; background: var(--blush); color: var(--rose); font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.back-link { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-faint); font-size: .88rem; margin-bottom: 18px; }
.back-link:hover { color: var(--gold-deep); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Signature Services: logo wall (img1-style grid) ---- */
.logo-wall {
  display: grid; grid-template-columns: repeat(5, 1fr);
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
  background: var(--surface); box-shadow: var(--shadow-md);
}
.logo-cell {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; text-align: center; padding: 34px 18px; min-height: 158px;
  color: var(--ink); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  transition: background .25s ease, transform .25s ease;
}
.logo-cell:hover { background: var(--cream); }
.logo-cell:nth-child(5n) { border-right: none; }
.logo-cell__mark { width: 34px; height: 34px; color: var(--gold-deep); flex-shrink: 0; }
.logo-cell:hover .logo-cell__mark { color: var(--gold); }
.logo-cell__name { font-weight: 700; font-size: 1.02rem; letter-spacing: .01em; line-height: 1.2; }
.logo-cell__logo { height: 81px; width: auto; max-width: 100%; object-fit: contain; display: block; transition: transform .25s ease; }
.logo-cell:hover .logo-cell__logo { transform: scale(1.03); }
/* Deusaderm has no logo: match the logo box height so its tag aligns with the row */
.logo-cell__word { height: 81px; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 400; font-size: 1.9rem; line-height: 1; color: var(--ink); }
.logo-cell__tag { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faint); font-weight: 600; }
.logo-cell__arrow { position: absolute; top: 14px; right: 14px; opacity: 0; color: var(--gold-deep); transition: opacity .25s ease, transform .25s ease; }
.logo-cell:hover .logo-cell__arrow { opacity: 1; transform: translate(2px, -2px); }
@media (max-width: 960px) {
  .logo-wall { grid-template-columns: repeat(3, 1fr); }
  .logo-cell:nth-child(5n) { border-right: 1px solid var(--line); }
  .logo-cell:nth-child(3n) { border-right: none; }
}
@media (max-width: 560px) {
  .logo-wall { grid-template-columns: repeat(2, 1fr); }
  .logo-cell:nth-child(3n), .logo-cell:nth-child(5n) { border-right: 1px solid var(--line); }
  .logo-cell:nth-child(2n) { border-right: none; }
  .logo-cell { min-height: 138px; padding: 26px 12px; }
}

/* ---- Signature Services: detail sections ---- */
.svc-detail {
  display: grid; grid-template-columns: 340px 1fr; gap: clamp(24px, 4vw, 48px);
  padding: clamp(26px, 3.5vw, 44px); border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  background: var(--surface); margin-bottom: 22px; scroll-margin-top: calc(var(--nav-h) + 20px);
}
.svc-detail__aside { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.svc-detail__mark { width: 46px; height: 46px; color: var(--gold-deep); margin-bottom: 16px; }
.svc-detail__logo { height: 120px; width: auto; max-width: 100%; object-fit: contain; align-self: center; margin-bottom: 18px; display: block; }
/* Signature Services banner heading: the brand logo replaces the wordmark, but
   it stays inside the <h1> with the service name as alt text, so each page keeps
   exactly one top-level heading and its accessible name is unchanged. */
.svc-hero__logo { line-height: 0; }
.svc-hero__logo img {
  height: clamp(96px, 12.75vw, 186px);   /* 50% up from 64/8.5vw/124 */
  width: auto;
  max-width: min(100%, 660px);
  object-fit: contain;
  object-position: left center;
  display: block;
}
.svc-detail__tag { align-self: center; display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--gold-deep); background: var(--gold-tint); padding: 6px 12px; border-radius: 999px; margin-bottom: 0; }
.svc-detail h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: 10px; }
.svc-detail__price { margin-top: auto; padding-top: 16px; }
.svc-detail__price .amt { font-family: var(--font-display); font-size: 1.5rem; color: var(--forest-deep); display: block; }
.svc-detail__price .note { font-size: .8rem; color: var(--ink-faint); }
.svc-detail__body p.lede { margin-bottom: 20px; }
.svc-benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; margin-bottom: 24px; }
.svc-benefits li { position: relative; padding-left: 24px; font-size: .93rem; color: var(--ink-soft); }
.svc-benefits li::before { content: ''; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold-deep); }
.svc-detail__actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
/* "Full details" keeps no underline on hover - the arrow slide is the cue.
   Scoped to .svc-detail so .btn-text elsewhere on the site is unaffected. */
.svc-detail__actions .btn-text:hover { border-color: transparent; }
@media (max-width: 760px) {
  .svc-detail { grid-template-columns: 1fr; gap: 20px; }
  .svc-detail__price { margin-top: 0; padding-top: 0; }
  .svc-benefits { grid-template-columns: 1fr; }
}

/* ---- Single service page ---- */
.svc-hero__meta { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 26px; }

.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .info-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .info-grid { grid-template-columns: 1fr; } }
.info-card { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-md); padding: 26px 24px; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.info-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--gold-soft); }
.info-card__ic { width: 30px; height: 30px; color: var(--gold-deep); margin-bottom: 14px; }
.info-card h3 { font-size: 1.25rem; letter-spacing: 0.02em; line-height: 1.25; margin-bottom: 8px; }
.info-card p { color: var(--ink-soft); font-size: .93rem; }
.section--alt .info-card { background: var(--surface); }

.faq { max-width: 840px; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary { cursor: pointer; list-style: none; padding: 20px 0; font-weight: 600; font-size: 1.02rem; color: var(--ink); display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: '+'; font-family: var(--font-body); font-size: 1.5rem; font-weight: 400; color: var(--gold-deep); line-height: 1; flex-shrink: 0; transition: transform .2s ease; }
.faq__item[open] summary::after { content: '\2212'; }
.faq__item summary:hover { color: var(--gold-deep); }
.faq__item p { color: var(--ink-soft); font-size: .95rem; padding-bottom: 22px; margin-top: -2px; max-width: 74ch; }

/* ---- Facial collection cards + session-package toggle ---- */
/* Two cards per row: at full width the service name and its price sat ~880px
   apart, which is too far to pair by eye, and these lists run long (60 cards on
   Advanced Laser Therapy). Collapses to one column at 1100px, below which each
   card gets too narrow for the package table. */
.facial-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;
  /* Each card keeps its own height. Without this they stretch to match the
     tallest in the row, so opening one card's package table left its neighbour
     as a tall, mostly empty box. */
  align-items: start; }
@media (max-width: 1100px) { .facial-list { grid-template-columns: 1fr; } }
/* The card is the grid and every text element is placed on it directly, so the
   two columns line up row by row: the amount sits on the service-name row and
   the unit on the description row. The three wrappers keep their markup but
   contribute no box of their own. */
.facial-card { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: clamp(22px, 3vw, 34px); transition: border-color .25s ease, box-shadow .25s ease;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: start;
  /* Keep the rows packed at their natural size. .facial-list already stops
     cards stretching, but if a card is ever given extra height this prevents
     the tag/name/description/button being prised apart to share it. */
  align-content: start; }
.facial-card:hover { border-color: var(--gold-soft); box-shadow: var(--shadow-md); }
.facial-card__head,
.facial-card__info,
.facial-card__price { display: contents; }
.facial-card__cat { grid-column: 1; grid-row: 1; display: inline-block; justify-self: start; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-deep); background: var(--gold-tint); padding: 5px 12px; border-radius: 999px; margin-bottom: 12px; }
/* Two lines reserved so a wrapping service name does not make its card taller
   than the rest (12 names wrap; line-height comes from the h1-h4 rule). */
.facial-card h3 { grid-column: 1; grid-row: 2; font-size: clamp(1.3rem, 2vw, 1.6rem); min-height: calc(2 * 1.12em); margin-bottom: 8px; }
/* Three lines reserved - the longest description on the site. Cards no longer
   stretch to match their row (see .facial-list), so height comes purely from
   content, and reserving the maximum is what keeps collapsed cards level. */
.facial-card__desc { grid-column: 1; grid-row: 3; color: var(--ink-soft); font-size: .95rem; max-width: 54ch; min-height: calc(3 * 1.6em); }
/* The amount mirrors the h3 beside it and the unit mirrors the description, so
   each pair shares a row, a baseline and a type style - only the alignment
   differs. Keep these two in step with the h3/__desc rules above. */
.facial-card__price .amt { grid-column: 2; grid-row: 2; text-align: right; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.12; letter-spacing: -0.01em; }
.facial-card__price .per { grid-column: 2; grid-row: 3; text-align: right; color: var(--ink-soft); font-size: .95rem; white-space: nowrap; }

/* Spans both columns: the price only occupies row 1, so the package table is
   free to use the card's full width instead of being boxed into the text
   column with the price column's width left empty beside it. */
.facial-pkg { grid-column: 1 / -1; grid-row: 4; margin-top: 22px; }
/* Cards with no package disclosure reserve the same block of space, so every
   card ends up the same height. The value mirrors the summary button exactly:
   its line box (.9rem x 1.6) plus its 11px top and bottom padding. */
.facial-card:not(:has(.facial-pkg))::after { content: ''; grid-column: 1 / -1; grid-row: 4; margin-top: 22px; height: calc(.9rem * 1.6 + 22px); }
.facial-pkg > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-weight: 600; font-size: .9rem; color: var(--ivory);
  background: var(--gold-deep); padding: 11px 22px; border-radius: 999px; box-shadow: var(--shadow-gold);
  transition: background .2s ease, transform .2s ease;
}
.facial-pkg > summary::-webkit-details-marker { display: none; }
.facial-pkg > summary:hover { background: var(--gold); transform: translateY(-1px); }
.facial-pkg > summary::after { content: ''; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-top: -3px; transition: transform .2s ease; }
.facial-pkg[open] > summary { margin-bottom: 20px; }
.facial-pkg[open] > summary::after { transform: rotate(-135deg); margin-top: 3px; }

.pkg-table-wrap { overflow-x: auto; border: 1px solid var(--line-soft); border-radius: var(--radius-md); }
/* 480px was set when these tables had a leading Package column. They have four
   columns now and measure 471px natural / 366px min-content, so 400px keeps
   them comfortable while fitting the two-column card layout. */
.pkg-table { width: 100%; min-width: 400px; border-collapse: collapse; font-size: .92rem; }
.pkg-table thead th { text-align: left; font-family: var(--font-body); font-weight: 700; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); background: var(--cream); padding: 12px 16px; border-bottom: 1px solid var(--line); }
.pkg-table td { padding: 13px 16px; border-bottom: 1px solid var(--line-soft); color: var(--ink-soft); }
.pkg-table tbody tr:last-child td { border-bottom: none; }
.pkg-table tbody tr:hover td { background: var(--ivory); }
.pkg-table td:first-child { font-weight: 600; color: var(--ink); }
.pkg-table .pkg-now { font-weight: 700; color: var(--forest-deep); }
.pkg-table s { color: var(--ink-faint); margin-left: 6px; }
/* On a phone the card is far narrower than the table's 400px floor, so the
   Price column fell off the right edge. Drop the floor and tighten the type and
   cell padding until all four columns fit the card, and stack the struck
   original under the promo price instead of beside it. */
@media (max-width: 620px) {
  .pkg-table { min-width: 0; font-size: .8rem; }
  .pkg-table thead th { padding: 9px 8px; font-size: .6rem; letter-spacing: .03em; }
  .pkg-table td { padding: 10px 8px; }
  .pkg-table s { margin-left: 0; display: block; }
}

@media (max-width: 560px) {
  /* One column: tag, name, description, amount, unit, package. The amount and
     unit can no longer sit beside their counterparts, so they stack under the
     description and align left with everything else. */
  .facial-card { grid-template-columns: 1fr; }
  .facial-card__price .amt { grid-column: 1; grid-row: 4; text-align: left; margin-top: 12px; }
  .facial-card__price .per { grid-column: 1; grid-row: 5; text-align: left; }
  .facial-pkg { grid-row: 6; }
  .facial-card:not(:has(.facial-pkg))::after { grid-row: 6; }
}

/* ---- About Us chapter index ----
   A book-style table of contents linking the three About Us pages. Deliberately
   full-width rows rather than a 3-up grid: about.html already carries .pillars
   and .trust-band, and a third card block would read as repetition. Built to be
   reusable on doctors.html and technology.html — move .is-current to match. */
.chapters { border-top: 1px solid var(--line); }
.chapter {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(20px, 4vw, 48px);
  padding: clamp(26px, 3.4vw, 40px) clamp(4px, 1.5vw, 20px);
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
  transition: padding-inline-start .45s cubic-bezier(.2,.8,.2,1);
}
/* Gold wash wiping in from the left, behind the text */
.chapter::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--gold-tint), transparent 65%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease;
}
.chapter:hover::before,
.chapter:focus-visible::before { opacity: .55; }
.chapter:hover,
.chapter:focus-visible { padding-inline-start: clamp(14px, 2.5vw, 34px); }
.chapter:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: -3px; }

.chapter__num {
  position: relative; z-index: 1;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  line-height: 1;
  color: var(--gold-soft);
  transition: color .45s ease;
}
.chapter:hover .chapter__num { color: var(--gold-deep); }

.chapter__body { position: relative; z-index: 1; display: block; }
.chapter__title {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  line-height: 1.15;
  color: var(--forest-deep);
}
.chapter__desc {
  display: block;
  max-width: 62ch;
  margin-top: 8px;
  color: var(--ink-soft);
  font-size: .94rem;
}
.chapter__here {
  font-family: var(--font-body);
  font-size: .68rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold-deep);
  background: var(--surface);
  border: 1px solid var(--gold-soft);
  border-radius: 999px;
  padding: 4px 10px;
}
/* Arrow cue drawn in CSS — no icon asset needed */
.chapter__cue {
  position: relative; z-index: 1;
  flex: none;
  width: 40px; height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: grid; place-items: center;
  transition: border-color .45s ease, background-color .45s ease, transform .45s cubic-bezier(.2,.8,.2,1);
}
.chapter__cue::after {
  content: '';
  width: 9px; height: 9px;
  border-top: 1.5px solid var(--gold-deep);
  border-right: 1.5px solid var(--gold-deep);
  transform: rotate(45deg) translate(-1px, 1px);
  transition: border-color .45s ease;
}
.chapter:hover .chapter__cue { border-color: var(--gold-deep); background: var(--gold-deep); transform: translateX(6px); }
.chapter:hover .chapter__cue::after { border-color: var(--ivory); }

/* The page you are already on — still a link, but visibly settled.
   The fill has to invert on --alt sections: .section--alt is itself --cream,
   so a cream row there would be invisible. */
.chapter.is-current { background: var(--cream); }
.section--alt .chapter.is-current { background: var(--ivory); }
.chapter.is-current .chapter__num { color: var(--gold-deep); }
.chapter.is-current .chapter__cue { opacity: .35; }
.chapter.is-current:hover .chapter__cue { transform: none; }

@media (max-width: 640px) {
  .chapter { grid-template-columns: auto 1fr; gap: 14px 18px; align-items: start; }
  .chapter__num { font-size: 1.5rem; padding-top: 2px; }
  .chapter__cue { display: none; }
}

/* ---- Italic accent voice (Arapey Italic) ----
   The decorative accent words and quotes use Arapey's true italic serif. */
.italic-accent,
.hero h1 em {
  font-family: var(--font-script);
  font-style: italic;
  font-weight: 400;
}
.pillar__num,
.category-card__index,
.chapter__num,
.step-card__num,
.doctor__avatar,
.doctor__quote,
.trust-band__quote {
  font-family: var(--font-script);
  font-style: italic;
}
/* Korean hero line uses a proper Korean serif */
.hero__kr { font-family: var(--font-korean); font-style: italic; }