/* ==========================================================================
   VESU CLINIC — design system
   White 50% · Deep red 40% · Gold 10%
   ========================================================================== */

:root {
  --wine-900: #3a060c;
  --wine-800: #5a0a12;
  --wine-700: #74101c;
  --wine-600: #8c1420;
  --wine-500: #a62432;
  --wine-050: #fdf3f3;

  --gold-700: #8a6a15;
  --gold-600: #a88220;
  --gold-500: #c9a227;
  --gold-400: #ddbb59;
  --gold-300: #e9d089;
  --gold-100: #f6ecd2;

  --ink: #1f1418;
  --ink-2: #574449;
  --ink-3: #8b787d;
  --line: #eee5e1;
  --line-2: #f6f1ee;
  --cream: #fcf8f6;
  --white: #fff;

  --grad-wine: linear-gradient(135deg, var(--wine-900) 0%, var(--wine-700) 48%, var(--wine-600) 100%);
  --grad-gold: linear-gradient(100deg, var(--gold-600), var(--gold-400) 46%, var(--gold-300) 72%, var(--gold-500));
  --hair: linear-gradient(90deg, transparent, var(--gold-400), transparent);
  --grad-soft: linear-gradient(180deg, #fff 0%, var(--cream) 100%);

  --sh-1: 0 1px 1px rgba(58, 6, 12, .03), 0 6px 22px rgba(58, 6, 12, .045);
  --sh-2: 0 1px 2px rgba(58, 6, 12, .04), 0 22px 60px rgba(58, 6, 12, .075);
  --sh-3: 0 40px 90px rgba(24, 4, 8, .22);

  /* quiet motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --slow: .9s;

  --r-sm: 10px;
  --r: 18px;
  --r-lg: 26px;
  --r-xl: 34px;

  --pad: clamp(16px, 4vw, 28px);
  --gap: clamp(16px, 2.4vw, 28px);
  --sec: clamp(52px, 7vw, 104px);
  --wrap: 1200px;

  --font-body: 'IBM Plex Sans Thai', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-head: 'Anuphan', 'IBM Plex Sans Thai', -apple-system, 'Segoe UI', sans-serif;

  --header-h: 68px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
body {
  font-family: var(--font-body);
  font-size: clamp(15px, .5vw + 13.8px, 16.5px);
  line-height: 1.78;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 2px; border-radius: 6px; }

h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; line-height: 1.3; letter-spacing: -.005em; }
h1 { font-size: clamp(30px, 4.4vw, 54px); font-weight: 600; }
h2 { font-size: clamp(25px, 3.1vw, 40px); }
h3 { font-size: clamp(19px, 1.7vw, 23px); }
h4 { font-size: clamp(17px, 1.2vw, 19px); }

.ic { flex: none; display: inline-block; vertical-align: -.22em; }
.wrap { width: min(100% - 2 * var(--pad), var(--wrap)); margin-inline: auto; }
.wrap-wide { width: min(100% - 2 * var(--pad), 1420px); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -999px; top: 0; z-index: 999; background: var(--wine-700); color: #fff; padding: 12px 18px; border-radius: 0 0 12px 0; }
.skip:focus { left: 0; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 26px; border-radius: 999px; font-weight: 500; font-size: .95rem; letter-spacing: .005em;
  line-height: 1.2; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  border: 1.5px solid transparent; white-space: nowrap; text-align: center;
}
.btn .ic { width: 19px; height: 19px; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--grad-wine); color: #fff; box-shadow: 0 10px 30px rgba(90, 10, 18, .18); }
.btn-primary:hover { box-shadow: 0 14px 36px rgba(90, 10, 18, .26); }
.btn-gold { background: var(--grad-gold); color: #3a2704; box-shadow: 0 10px 28px rgba(201, 162, 39, .22); }
.btn-line { background: #06c755; color: #fff; box-shadow: 0 10px 26px rgba(6, 199, 85, .2); }
.btn-ghost { border-color: rgba(255, 255, 255, .5); color: #fff; backdrop-filter: blur(6px); background: rgba(255, 255, 255, .08); }
.btn-ghost:hover { background: rgba(255, 255, 255, .18); }
.btn-outline { border-color: var(--line); color: var(--wine-700); background: #fff; }
.btn-outline:hover { border-color: var(--wine-600); background: var(--wine-050); }
.btn-sm { padding: 9px 17px; font-size: .875rem; }
.btn-lg { padding: 16px 32px; font-size: 1.03rem; }
.btn-block { width: 100%; }

/* ---------- promo bar ---------- */
.promobar {
  background: var(--grad-wine); color: #fff; font-size: .84rem; position: relative; z-index: 60;
}
.promobar__in { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 9px 40px; text-align: center; flex-wrap: wrap; }
.promobar a { display: inline-flex; align-items: center; gap: 8px; color: var(--gold-300); font-weight: 600; }
.promobar__x { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); opacity: .7; padding: 6px; }
.promobar__x:hover { opacity: 1; }
.promobar .ic { width: 17px; height: 17px; }

/* ---------- header ---------- */
.hdr {
  position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--line-2);
  transition: box-shadow .25s ease;
}
.hdr.is-stuck { box-shadow: 0 6px 26px rgba(58, 6, 12, .08); }
.hdr__in { display: flex; align-items: center; gap: 18px; min-height: var(--header-h); }
.brand { display: flex; align-items: center; gap: 11px; flex: none; }
.brand img { width: 42px; height: 42px; border-radius: 11px; object-fit: cover; box-shadow: var(--sh-1); }
.brand__tx { display: flex; flex-direction: column; line-height: 1.15; }
.brand__n { font-family: var(--font-head); font-weight: 700; font-size: 1.06rem; letter-spacing: .06em; color: var(--wine-800); }
.brand__s { font-size: .66rem; color: var(--ink-3); letter-spacing: .1em; text-transform: uppercase; }
.nav { display: none; margin-inline: auto; }
.nav ul { display: flex; align-items: center; gap: 4px; }
.nav a { display: block; padding: 9px 13px; border-radius: 999px; font-size: .93rem; font-weight: 500; color: var(--ink-2); transition: .18s; }
.nav a:hover { color: var(--wine-700); background: var(--wine-050); }
.nav a[aria-current] { color: var(--wine-700); font-weight: 600; background: var(--wine-050); }
.hdr__cta { display: none; align-items: center; gap: 10px; margin-left: auto; }
.hdr__phone { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--wine-700); font-size: .95rem; }
.burger { margin-left: auto; display: inline-flex; padding: 9px; border-radius: 12px; border: 1px solid var(--line); color: var(--wine-700); }
@media (min-width: 1040px) {
  .nav { display: block; }
  .burger { display: none; }
  .hdr__cta { display: flex; }
}

/* mobile drawer */
.drawer { position: fixed; inset: 0; z-index: 70; visibility: hidden; }
.drawer[open], .drawer.is-open { visibility: visible; }
.drawer__bg { position: absolute; inset: 0; background: rgba(31, 20, 24, .48); opacity: 0; transition: opacity .28s; }
.drawer__panel {
  position: absolute; right: 0; top: 0; bottom: 0; width: min(86vw, 360px); background: #fff;
  transform: translateX(100%); transition: transform .3s cubic-bezier(.4, 0, .2, 1); display: flex; flex-direction: column;
  padding: 18px; overflow-y: auto; box-shadow: var(--sh-3);
}
.drawer.is-open .drawer__bg { opacity: 1; }
.drawer.is-open .drawer__panel { transform: none; }
.drawer__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.drawer nav a { display: flex; align-items: center; justify-content: space-between; padding: 14px 12px; border-radius: 12px; font-weight: 500; border-bottom: 1px solid var(--line-2); }
.drawer nav a:hover { background: var(--wine-050); }
.drawer__foot { margin-top: auto; padding-top: 20px; display: grid; gap: 10px; }

/* ---------- hero ---------- */
.hero { position: relative; background: var(--grad-wine); color: #fff; overflow: hidden; }
/* full-bleed, full-height banner */
.hero--full {
  display: grid; align-items: stretch;
  /* an `auto` column would size to the flex track's max-content (5 x viewport) */
  grid-template-columns: minmax(0, 1fr);
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
}
.hero--full .hero__track { width: 100%; min-width: 0; align-items: stretch; }
.hero--full .hero__slide { display: grid; align-items: center; }
.hero--full .hero__grid { padding-block: clamp(40px, 5vw, 78px) clamp(66px, 6vw, 96px); }
.hero--full .hero__media .frame { max-width: 100%; }
.hero--full .hero__media img { max-height: 64svh; width: auto; max-width: 100%; margin-inline: auto; }
@media (max-width: 899px) {
  .hero--full .hero__media img { max-height: none; width: 100%; height: auto; }
  .hero--full .hero__media { margin-inline: auto; }
  .hero--full { min-height: calc(100svh - var(--header-h)); }
  .hero--full .hero__grid { padding-block: clamp(26px, 5vw, 40px) clamp(56px, 8vw, 72px); }
  .hero--cover .hero__grid { padding-block: 24px clamp(64px, 11vw, 88px); }
  .hero--cover .hero__btns { gap: 10px; }
  .hero--cover .hero__btns .btn { flex: 1 1 100%; }

}
@media (min-width: 600px) and (max-width: 899px) {
  .hero--full .hero__media { max-width: 430px; }
}
.hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(900px 460px at 88% 12%, rgba(233, 208, 137, .2), transparent 62%),
    radial-gradient(700px 420px at 6% 92%, rgba(255, 255, 255, .1), transparent 60%);
}
.hero__track { display: flex; transition: transform .8s var(--ease); will-change: transform; }

/* blurred duplicate of the poster, filling the whole screen behind it */
.hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.2); filter: blur(46px) saturate(135%); opacity: .6; }
.hero__bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(102deg, rgba(48, 5, 10, .93) 0%, rgba(52, 6, 11, .78) 34%, rgba(74, 9, 16, .42) 62%, rgba(96, 13, 22, .3) 100%),
    radial-gradient(900px 520px at 84% 14%, rgba(233, 208, 137, .16), transparent 62%);
}
@media (max-width: 899px) {
  .hero__bg::after { background: linear-gradient(180deg, rgba(58, 6, 12, .9) 0%, rgba(58, 6, 12, .74) 46%, rgba(90, 10, 18, .8) 100%); }
}
.hero__slide { position: relative; flex: 0 0 100%; min-width: 0; }
.hero__grid {
  display: grid; gap: clamp(20px, 3vw, 52px); align-items: center;
  padding: clamp(30px, 4.6vw, 62px) 0 clamp(52px, 5vw, 70px);
  position: relative; z-index: 2;
}
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 15px; border-radius: 999px;
  border: 1px solid rgba(233, 208, 137, .45); background: rgba(233, 208, 137, .1);
  color: var(--gold-300); font-size: .8rem; font-weight: 600; letter-spacing: .04em; margin-bottom: 16px;
}
.hero h1, .hero .h1 { font-size: clamp(27px, 4.2vw, 46px); line-height: 1.24; margin-bottom: 14px; font-family: var(--font-head); font-weight: 700; letter-spacing: -.01em; }
.hero h1 .accent, .hero .h1 .accent { background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__sub { font-size: clamp(15px, 1.15vw, 18px); color: rgba(255, 255, 255, .84); max-width: 46ch; margin-bottom: 22px; }
.hero__price { display: flex; align-items: baseline; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
.hero__price b { font-family: var(--font-head); font-size: clamp(30px, 3.8vw, 46px); background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__tag { padding: 5px 14px; border-radius: 999px; background: #fff; color: var(--wine-700); font-weight: 700; font-size: .85rem; }
.hero__btns { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__media { position: relative; max-width: 100%; min-width: 0; }
.hero__media .frame {
  border-radius: var(--r-lg); overflow: hidden; background: transparent;
  box-shadow: var(--sh-3); line-height: 0; display: inline-block; max-width: 100%;
}
.hero__media img { width: 100%; height: auto; display: block; }
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1.02fr .98fr; }
  .hero__media { max-width: 560px; margin-left: auto; text-align: center; }
}
.hero__ctrl { position: absolute; z-index: 3; top: 50%; transform: translateY(-50%); display: none; }
.hero__ctrl button {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .28); backdrop-filter: blur(6px); transition: .2s;
}
.hero__ctrl button:hover { background: rgba(255, 255, 255, .26); }
.hero__ctrl.prev { left: max(12px, calc((100vw - var(--wrap)) / 2 - 58px)); }
.hero__ctrl.next { right: max(12px, calc((100vw - var(--wrap)) / 2 - 58px)); }
@media (min-width: 1040px) { .hero__ctrl { display: block; } }
.hero__dots { position: absolute; z-index: 4; bottom: 26px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; }
.hero__scroll {
  position: absolute; z-index: 4; bottom: 54px; left: 50%; transform: translateX(-50%);
  display: none; flex-direction: column; align-items: center; gap: 6px;
  font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .5);
}
.hero__scroll i { display: block; width: 1px; height: 34px; background: linear-gradient(180deg, transparent, var(--gold-400)); }
@media (min-width: 1040px) and (min-height: 700px) { .hero--full .hero__scroll { display: flex; } }

/* ---- cover mode: the poster IS the banner, copy sits on top of it ---- */
.hero--cover .hero__bg img,
.hero--auto .hero__bg img { transform: none; filter: none; opacity: 1; }

.hero--cover .hero__bg::after,
.hero--auto .hero__bg::after {
  background:
    linear-gradient(180deg, rgba(36, 3, 8, .34) 0%, rgba(36, 3, 8, 0) 14%, rgba(36, 3, 8, 0) 52%, rgba(28, 2, 6, .38) 74%, rgba(22, 1, 4, .86) 92%, rgba(20, 1, 4, .95) 100%);
}
.hero--cover .hero__media,
.hero--auto .hero__media { display: none; }
.hero--cover .hero__slide,
.hero--auto .hero__slide { align-items: end; }

.hero--cover .hero__grid,
.hero--auto .hero__grid {
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: end; align-items: end;
  padding-block: clamp(30px, 6vw, 60px) clamp(66px, 8vw, 92px);
}
/* The poster carries its own headline, price and offer, so the page copy is
   kept for crawlers and screen readers but taken out of the visual layer —
   otherwise two sets of Thai headlines overlap and neither is readable. */
.hero--cover .hero__eyebrow, .hero--cover h1, .hero--cover .h1, .hero--cover .hero__sub, .hero--cover .hero__price,
.hero--auto .hero__eyebrow, .hero--auto h1, .hero--auto .h1, .hero--auto .hero__sub, .hero--auto .hero__price {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hero--cover .hero__btns, .hero--auto .hero__btns { justify-content: center; }
.hero--cover .hero__eyebrow,
.hero--auto .hero__eyebrow { background: rgba(24, 2, 6, .42); backdrop-filter: blur(4px); }
.hero--cover .hero__price,
.hero--auto .hero__price { margin-bottom: 20px; }

/* wide screens: a square poster would lose ~40% to a full-height crop, so the
   split layout keeps the artwork whole there */
@media (min-width: 900px) {
  .hero--auto .hero__bg img { transform: scale(1.2); filter: blur(46px) saturate(135%); opacity: .6; }
  .hero--auto .hero__bg::after {
    background:
      linear-gradient(102deg, rgba(48, 5, 10, .93) 0%, rgba(52, 6, 11, .78) 34%, rgba(74, 9, 16, .42) 62%, rgba(96, 13, 22, .3) 100%),
      radial-gradient(900px 520px at 84% 14%, rgba(233, 208, 137, .16), transparent 62%);
  }
  .hero--auto .hero__slide { align-items: center; }
  .hero--auto .hero__media { display: block; }
  .hero--auto .hero__grid {
    grid-template-columns: 1.02fr .98fr !important;
    align-content: center; align-items: center;
    padding-block: clamp(40px, 5vw, 78px) clamp(66px, 6vw, 96px);
  }
  /* the copy is only taken out of the visual layer while the poster carries it */
  .hero--auto .hero__eyebrow, .hero--auto h1, .hero--auto .h1,
  .hero--auto .hero__sub, .hero--auto .hero__price {
    position: static; width: auto; height: auto; padding: 0; margin: 0;
    overflow: visible; clip: auto; white-space: normal;
  }
  .hero--auto .hero__eyebrow { padding: 6px 15px; margin-bottom: 16px; border: 1px solid rgba(233, 208, 137, .45); }
  .hero--auto h1, .hero--auto .h1 { margin-bottom: 14px; }
  .hero--auto .hero__sub { display: block; margin-bottom: 22px; }
  .hero--auto .hero__price { margin-bottom: 24px; }
  .hero--auto h1, .hero--auto .h1 { text-shadow: none; }
  .hero--auto .hero__eyebrow { background: rgba(233, 208, 137, .1); backdrop-filter: none; }
  .hero--cover .hero__grid > div { max-width: 62%; }
}
.hero__dots button { width: 9px; height: 9px; border-radius: 999px; background: rgba(255, 255, 255, .38); transition: .25s; }
.hero__dots button[aria-current="true"] { width: 30px; background: var(--grad-gold); }

/* ---------- quick contact strip ---------- */
.quick { margin-top: calc(-1 * clamp(26px, 3vw, 40px)); position: relative; z-index: 5; }
.quick__grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 560px) { .quick__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
@media (min-width: 900px) { .quick__grid { grid-template-columns: repeat(4, 1fr); } }
.quick__card {
  display: flex; align-items: center; gap: 13px; padding: 16px 18px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-1); transition: .2s;
}
.quick__card:hover { transform: translateY(-2px); box-shadow: var(--sh-2); border-color: var(--gold-300); }
.quick__ico { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--wine-050); color: var(--wine-700); flex: none; }
.quick__t { font-size: .74rem; color: var(--ink-3); letter-spacing: .04em; }
.quick__v { font-weight: 700; font-size: .95rem; color: var(--ink); overflow-wrap: anywhere; }

/* ---------- sections ---------- */
.sec { padding-block: var(--sec); }
.sec--alt { background: var(--grad-soft); border-block: 1px solid var(--line-2); }
.sec--wine { background: var(--grad-wine); color: #fff; }
.sec--wine .sec__t { color: #fff; }
.sec--wine .sec__d { color: rgba(255, 255, 255, .78); }
.sec__head { text-align: center; max-width: 700px; margin: 0 auto clamp(30px, 4vw, 52px); }
.sec__head--left { text-align: left; margin-inline: 0; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; font-size: .74rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--gold-600); margin-bottom: 14px;
}
.eyebrow::before, .eyebrow::after { content: ''; width: 30px; height: 1px; background: var(--hair); }
.sec__head--left .eyebrow::before { display: none; }
.sec--wine .eyebrow { color: var(--gold-300); }
.sec__t { margin-bottom: 12px; }
.sec__d { color: var(--ink-2); font-size: 1.02rem; }

/* ---------- category cards ---------- */
.cats { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
@media (min-width: 1180px) { .cats--5 { grid-template-columns: repeat(5, 1fr); } .cats--4 { grid-template-columns: repeat(4, 1fr); } }
.cat {
  position: relative; padding: 26px 24px 24px; border-radius: var(--r-lg); background: #fff;
  border: 1px solid var(--line); box-shadow: var(--sh-1); transition: .25s; overflow: hidden; display: block;
}
.cat::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: var(--grad-gold); transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
.cat:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--gold-300); }
.cat:hover::before { transform: scaleX(1); }
.cat__ico { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: var(--grad-wine); color: var(--gold-300); margin-bottom: 16px; }
.cat h3 { margin-bottom: 7px; }
.cat p { color: var(--ink-2); font-size: .93rem; }
.cat__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-weight: 600; font-size: .9rem; color: var(--wine-700); }
.cat__more .ic { width: 17px; height: 17px; transition: transform .2s; }
.cat:hover .cat__more .ic { transform: translateX(4px); }

/* ---------- service cards ---------- */
.cards { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 262px), 1fr)); }
.card {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-1); transition: .25s;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--gold-300); }
/* 1 / 1.07 matches the clinic's 1312x1400 poster ratio, so covers fill edge to
   edge while cropping almost nothing off the artwork. */
.card__media { position: relative; aspect-ratio: 1 / 1.07; background: linear-gradient(160deg, var(--wine-050), var(--gold-100)); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .5s ease; }
.card:hover .card__media img { transform: scale(1.045); }
.card__media--empty { display: grid; place-items: center; color: var(--wine-600); opacity: .38; }
.card__media--empty .ic { width: 54px; height: 54px; }
.badge {
  position: absolute; top: 12px; left: 12px; z-index: 2; padding: 6px 13px; border-radius: 999px;
  background: var(--grad-wine); color: #fff; font-size: .78rem; font-weight: 700; box-shadow: 0 6px 16px rgba(58, 6, 12, .28);
}
.badge--gold { background: var(--grad-gold); color: #3a2704; }
.card__body { padding: 20px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.card__cat { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-600); font-weight: 700; margin-bottom: 7px; }
.card__t { font-size: 1.16rem; margin-bottom: 8px; }
.card__d { color: var(--ink-2); font-size: .92rem; margin-bottom: 16px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; line-clamp: 3; overflow: hidden; }
.card__foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-top: 14px; border-top: 1px dashed var(--line); }
.price { display: flex; flex-direction: column; line-height: 1.2; }
.price small { font-size: .72rem; color: var(--ink-3); }
.price b { font-family: var(--font-head); font-size: 1.42rem; color: var(--wine-700); white-space: nowrap; }
.price del { font-size: .8rem; color: var(--ink-3); }
.price span.unit { font-size: .85rem; font-weight: 500; color: var(--ink-2); }

/* ---------- promo strip ---------- */
.promos { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.promo {
  display: flex; gap: 15px; align-items: center; padding: 14px; border-radius: var(--r);
  background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-1); transition: .22s;
}
.promo:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--gold-300); }
.promo__img { width: 86px; height: 86px; flex: none; border-radius: 13px; overflow: hidden; background: linear-gradient(160deg, var(--wine-050), var(--gold-100)); display: grid; place-items: center; color: var(--wine-600); }
.promo__img img { width: 100%; height: 100%; object-fit: cover; }
.promo__t { font-weight: 700; font-size: 1rem; margin-bottom: 3px; }
.promo__d { font-size: .85rem; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-clamp: 2; overflow: hidden; }
.promo__p { margin-top: 6px; font-family: var(--font-head); font-weight: 700; color: var(--wine-700); }

/* ---------- reviews ---------- */
.rev-rail { display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 14px; scrollbar-width: thin; }
.rev-rail::-webkit-scrollbar { height: 6px; }
.rev-rail::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }
.rev {
  flex: 0 0 min(88vw, 380px); scroll-snap-align: start; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-1); display: flex; flex-direction: column;
}
.sec--wine .rev { border-color: rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .05); color: #fff; }
.rev__img { aspect-ratio: 1 / 1.07; background: linear-gradient(160deg, var(--wine-050), var(--gold-100)); }
.rev__img img { width: 100%; height: 100%; object-fit: cover; }
.rev__body { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.rev__q { font-size: .92rem; color: var(--ink-2); }
.sec--wine .rev__q { color: rgba(255, 255, 255, .82); }
.rev__by { margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--line); }
.sec--wine .rev__by { border-color: rgba(255, 255, 255, .18); }
.rev__n { font-weight: 700; }
.rev__r { font-size: .8rem; color: var(--ink-3); }
.sec--wine .rev__r { color: rgba(255, 255, 255, .6); }
.stars { display: flex; gap: 2px; color: var(--gold-500); }
.stars .ic { width: 16px; height: 16px; }
.stars .ic path { fill: currentColor; }
.sec--wine .stars { color: var(--gold-400); }
.rail-nav { display: flex; gap: 8px; justify-content: center; margin-top: 22px; }
.rail-nav button { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--wine-700); background: #fff; transition: .2s; }
.rail-nav button:hover { background: var(--wine-050); border-color: var(--wine-600); }
.sec--wine .rail-nav button { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .25); color: #fff; }

/* ---------- gallery ---------- */
.gal { columns: 2; column-gap: 14px; }
@media (min-width: 700px) { .gal { columns: 3; } }
@media (min-width: 1000px) { .gal { columns: 4; } }
.gal figure { break-inside: avoid; margin-bottom: 14px; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: #fff; box-shadow: var(--sh-1); cursor: zoom-in; transition: .22s; position: relative; }
.gal figure:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.gal img { width: 100%; }
.gal figcaption { padding: 11px 13px; font-size: .82rem; color: var(--ink-2); }
.gal-tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 26px; }
.chip { padding: 9px 18px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: .88rem; font-weight: 500; color: var(--ink-2); transition: .2s; }
.chip:hover { border-color: var(--wine-600); color: var(--wine-700); }
.chip[aria-pressed="true"], .chip.is-on { background: var(--grad-wine); color: #fff; border-color: transparent; }

/* lightbox */
.lb { position: fixed; inset: 0; z-index: 90; background: rgba(20, 8, 11, .93); display: none; place-items: center; padding: 20px; }
.lb.is-open { display: grid; }
.lb img { max-width: min(94vw, 1100px); max-height: 88vh; width: auto; border-radius: 12px; }
.lb__x, .lb__p, .lb__n { position: absolute; color: #fff; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); }
.lb__x { top: 18px; right: 18px; }
.lb__p { left: 14px; top: 50%; transform: translateY(-50%); }
.lb__n { right: 14px; top: 50%; transform: translateY(-50%); }
.lb__cap { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: rgba(255, 255, 255, .82); font-size: .9rem; padding-inline: 70px; }

/* ---------- why / stats ---------- */
.why { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.why__i { padding: 26px 24px; border-radius: var(--r-lg); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .14); transition: .22s; }
.why__i:hover { background: rgba(255, 255, 255, .1); transform: translateY(-4px); }
.why__ico { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; background: rgba(233, 208, 137, .14); color: var(--gold-300); margin-bottom: 15px; }
.why__i h3 { font-size: 1.1rem; margin-bottom: 7px; }
.why__i p { color: rgba(255, 255, 255, .74); font-size: .92rem; }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: clamp(30px, 4vw, 48px); }
@media (min-width: 760px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { text-align: center; padding: 22px 14px; border-radius: var(--r); background: rgba(255, 255, 255, .06); border: 1px solid rgba(233, 208, 137, .22); }
.stat b { display: block; font-family: var(--font-head); font-size: clamp(22px, 2.6vw, 32px); background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat span { font-size: .84rem; color: rgba(255, 255, 255, .72); }

/* ---------- map + hours ---------- */
.mapgrid { display: grid; gap: var(--gap); }
@media (min-width: 900px) { .mapgrid { grid-template-columns: 1fr 1fr; align-items: stretch; } }
.mapbox { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--sh-1); min-height: 340px; background: var(--cream); display: grid; }
.mapbox iframe { width: 100%; height: 100%; min-height: 340px; border: 0; }
.mapbox__ph { display: grid; place-items: center; text-align: center; padding: 40px 24px; color: var(--ink-3); gap: 12px; }
.infocard { padding: clamp(22px, 3vw, 34px); border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-1); }
.infolist { display: grid; gap: 16px; margin-top: 20px; }
.infolist li { display: flex; gap: 13px; align-items: flex-start; }
.infolist .ic { color: var(--wine-600); margin-top: 2px; }
.infolist b { display: block; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.hours { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 18px; }
.hours li { display: flex; justify-content: space-between; padding: 6px 0; font-size: .92rem; border-bottom: 1px dashed var(--line-2); }
.hours li:last-child { border: 0; }
.hours .closed { color: var(--ink-3); }
.notice { display: flex; gap: 10px; padding: 13px 15px; border-radius: 13px; background: var(--gold-100); border: 1px solid var(--gold-300); color: var(--gold-700); font-size: .87rem; align-items: flex-start; }

/* ---------- contact form ---------- */
.formgrid { display: grid; gap: var(--gap); }
@media (min-width: 900px) { .formgrid { grid-template-columns: .92fr 1.08fr; } }
.form { display: grid; gap: 15px; }
.field { display: grid; gap: 7px; }
.field label { font-size: .87rem; font-weight: 600; color: var(--ink-2); }
.field .req { color: var(--wine-600); }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 15px; border-radius: 13px; border: 1.5px solid var(--line);
  background: #fff; transition: .18s; font-size: .96rem;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--wine-600); outline: none; box-shadow: 0 0 0 4px rgba(140, 20, 32, .1); }
.field textarea { min-height: 120px; resize: vertical; }
.form__row { display: grid; gap: 15px; }
@media (min-width: 560px) { .form__row { grid-template-columns: 1fr 1fr; } }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .86rem; color: var(--ink-2); }
.check input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--wine-600); }
.hp { position: absolute; left: -9999px; opacity: 0; }
.form__msg { padding: 14px 16px; border-radius: 13px; font-size: .92rem; display: none; }
.form__msg.ok { display: block; background: #edf9f0; border: 1px solid #b7e3c3; color: #17663a; }
.form__msg.err { display: block; background: #fdf0f0; border: 1px solid #f0c2c2; color: #97262b; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 12px; max-width: 860px; margin-inline: auto; }
.faq details { border: 1px solid var(--line); border-radius: var(--r); background: #fff; overflow: hidden; box-shadow: var(--sh-1); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px; cursor: pointer; font-weight: 600; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { color: var(--wine-600); transition: transform .25s; }
.faq details[open] summary { color: var(--wine-700); }
.faq details[open] summary .ic { transform: rotate(180deg); }
.faq__a { padding: 0 20px 20px; color: var(--ink-2); font-size: .95rem; }

.svc-bar { display: grid; gap: 16px; margin-bottom: 28px; }
@media (min-width: 1000px) { .svc-bar { grid-template-columns: 1fr auto; align-items: center; } }
.svc-search { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 15px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; }
.svc-search .ic { color: var(--ink-3); }
.svc-search input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 7px 0; font-size: .93rem; background: none; }
.svc-search:focus-within { border-color: var(--wine-600); box-shadow: 0 0 0 4px rgba(140, 20, 32, .09); }

/* ---------- breadcrumbs ---------- */
.crumbs { padding: 14px 0; font-size: .85rem; color: var(--ink-3); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.crumbs a:hover { color: var(--wine-700); }
.crumbs .ic { width: 14px; height: 14px; opacity: .5; }

/* ---------- page hero ---------- */
.phero { background: var(--grad-wine); color: #fff; padding: clamp(38px, 5vw, 68px) 0 clamp(42px, 5vw, 72px); position: relative; overflow: hidden; }
.phero::after { content: ''; position: absolute; inset: 0; background: radial-gradient(700px 380px at 84% 10%, rgba(233, 208, 137, .18), transparent 60%); }
.phero > * { position: relative; z-index: 2; }
.phero p { color: rgba(255, 255, 255, .8); max-width: 62ch; margin-top: 12px; }
.phero .crumbs { color: rgba(255, 255, 255, .6); }
.phero .crumbs a:hover { color: var(--gold-300); }

/* ---------- service detail ---------- */
.sdetail { display: grid; gap: clamp(24px, 4vw, 52px); }
@media (min-width: 980px) { .sdetail { grid-template-columns: 1.15fr .85fr; align-items: start; } }
.sgal__main { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: linear-gradient(160deg, var(--wine-050), var(--gold-100)); box-shadow: var(--sh-1); }
.sgal__main img { width: 100%; }
.sgal__thumbs { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; padding-bottom: 6px; }
.sgal__thumbs button { width: 76px; height: 76px; flex: none; border-radius: 12px; overflow: hidden; border: 2px solid var(--line); background: #fff; transition: .2s; }
.sgal__thumbs button[aria-current="true"] { border-color: var(--wine-600); }
.sgal__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.sbuy { position: sticky; top: calc(var(--header-h) + 18px); padding: clamp(22px, 3vw, 30px); border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-2); }
.sbuy__price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 6px 0 4px; }
.sbuy__price b { font-family: var(--font-head); font-size: clamp(30px, 3.4vw, 40px); color: var(--wine-700); }
.sbuy__btns { display: grid; gap: 10px; margin-top: 20px; }
.bullets { display: grid; gap: 11px; margin: 18px 0; }
.bullets li { display: flex; gap: 11px; align-items: flex-start; font-size: .95rem; }
.bullets .ic { color: var(--gold-600); flex: none; margin-top: 2px; }
.prose { color: var(--ink-2); }
.prose p { margin-bottom: 15px; }
.prose h2, .prose h3 { color: var(--ink); margin: 26px 0 12px; }
.chipset { display: flex; flex-wrap: wrap; gap: 8px; }
.results { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); margin-top: 18px; }
.result-i { display: flex; gap: 11px; align-items: center; padding: 14px 16px; border-radius: 14px; background: var(--wine-050); border: 1px solid var(--line); font-size: .92rem; }
.result-i .ic { color: var(--wine-600); flex: none; }

/* ---------- CTA band ---------- */
.cta-band { background: var(--grad-wine); color: #fff; border-radius: var(--r-xl); padding: clamp(30px, 4.4vw, 56px); text-align: center; position: relative; overflow: hidden; }
.cta-band::after { content: ''; position: absolute; inset: 0; background: radial-gradient(600px 300px at 50% 0, rgba(233, 208, 137, .2), transparent 62%); }
.cta-band > * { position: relative; z-index: 2; }
.cta-band p { color: rgba(255, 255, 255, .82); max-width: 60ch; margin: 12px auto 24px; }
.cta-band .hero__btns { justify-content: center; }

/* ---------- footer ---------- */
.ftr { background: var(--wine-900); color: rgba(255, 255, 255, .72); padding-top: clamp(44px, 5vw, 70px); font-size: .92rem; }
.ftr__grid { display: grid; gap: clamp(26px, 3vw, 42px); padding-bottom: 40px; }
@media (min-width: 800px) { .ftr__grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; } }
.ftr h4 { color: #fff; font-size: 1rem; margin-bottom: 15px; }
.ftr a:hover { color: var(--gold-300); }
.ftr ul { display: grid; gap: 9px; }
.ftr__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; }
.ftr__brand img { width: 52px; height: 52px; border-radius: 13px; }
.ftr__brand b { color: #fff; font-family: var(--font-head); letter-spacing: .06em; font-size: 1.14rem; }
.socials { display: flex; gap: 10px; margin-top: 18px; }
.socials a { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); color: #fff; transition: .2s; }
.socials a:hover { background: var(--grad-gold); color: #3a2704; border-color: transparent; transform: translateY(-3px); }
.ftr__bot { border-top: 1px solid rgba(255, 255, 255, .12); padding: 20px 0 26px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: .83rem; color: rgba(255, 255, 255, .52); }
.ftr__dis { font-size: .8rem; color: rgba(255, 255, 255, .45); margin-top: 10px; max-width: 70ch; }

/* ---------- floating contact ---------- */
.fab { position: fixed; right: 16px; bottom: 16px; z-index: 45; display: grid; gap: 10px; }
.fab a, .fab button {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  box-shadow: var(--sh-2); transition: .2s; position: relative;
}
.fab a:hover, .fab button:hover { transform: translateY(-3px) scale(1.05); }
.fab .f-line { background: #06c755; }
.fab .f-tel { background: var(--grad-wine); }
.fab .f-top { background: #fff; color: var(--wine-700); border: 1px solid var(--line); opacity: 0; pointer-events: none; }
.fab .f-top.is-on { opacity: 1; pointer-events: auto; }
@media (max-width: 640px) {
  .fab { right: 12px; bottom: 12px; }
  body.has-fab { padding-bottom: 12px; }
}

/* ---------- empty-state helper (data not filled in yet) ---------- */
.todo {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px;
  background: var(--gold-100); border: 1px dashed var(--gold-400); color: var(--gold-700); font-size: .8rem;
}
.empty { padding: 44px 24px; text-align: center; color: var(--ink-3); border: 1px dashed var(--line); border-radius: var(--r-lg); background: var(--cream); }
.empty .ic { width: 42px; height: 42px; margin: 0 auto 12px; opacity: .5; }

/* ---------- utilities ---------- */
.grid-2 { display: grid; gap: var(--gap); }
@media (min-width: 860px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.center { text-align: center; }
.mt-l { margin-top: clamp(28px, 4vw, 48px); }
.hide { display: none !important; }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* ==========================================================================
   Quiet-luxury layer — trust, credibility and restrained motion
   ========================================================================== */

/* scroll progress hairline */
.progress {
  position: fixed; inset: 0 auto auto 0; height: 2px; width: 100%; z-index: 80;
  transform: scaleX(0); transform-origin: left; background: var(--grad-gold);
  transition: transform .12s linear; pointer-events: none;
}

/* soft grain on dark sections — keeps large wine areas from looking flat */
.sec--wine, .hero, .phero, .cta-band, .ftr {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E"),
    var(--grad-wine);
  background-blend-mode: overlay, normal;
}
.ftr { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E"), linear-gradient(180deg, var(--wine-900), #2c0409); }

/* ---------- trust bar ---------- */
.trust { border-block: 1px solid var(--line); background: var(--cream); }
.trust__grid { display: grid; gap: 1px; background: var(--line); }
@media (min-width: 620px) { .trust__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .trust__grid { grid-template-columns: repeat(4, 1fr); } }
.trust__i { display: flex; gap: 13px; align-items: flex-start; padding: 24px 22px; background: var(--cream); }
.trust__ico { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: none; border: 1px solid var(--gold-300); color: var(--gold-600); background: #fff; }
.trust__t { display: block; font-family: var(--font-head); font-weight: 600; font-size: .98rem; margin-bottom: 3px; }
.trust__d { display: block; font-size: .84rem; color: var(--ink-3); line-height: 1.6; }

/* ---------- process / steps ---------- */
.steps { display: grid; gap: var(--gap); counter-reset: st; }
@media (min-width: 780px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { position: relative; padding: 30px 22px 26px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; box-shadow: var(--sh-1); }
.step::before {
  counter-increment: st; content: '0' counter(st);
  position: absolute; top: -15px; left: 22px; padding: 4px 12px; border-radius: 999px;
  background: #fff; border: 1px solid var(--gold-300); color: var(--gold-600);
  font-family: var(--font-head); font-weight: 600; font-size: .82rem; letter-spacing: .08em;
}
.step h3 { font-size: 1.06rem; margin-bottom: 7px; }
.step p { font-size: .9rem; color: var(--ink-2); }
.steps--dark .step { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .14); }
.steps--dark .step::before { background: var(--wine-900); }
.steps--dark .step p { color: rgba(255, 255, 255, .72); }

/* ---------- standards ---------- */
.stds { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.std { display: flex; gap: 14px; align-items: flex-start; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; transition: border-color .3s var(--ease), transform .3s var(--ease); }
.std:hover { border-color: var(--gold-300); transform: translateY(-2px); }
.std .ic { color: var(--wine-600); flex: none; margin-top: 2px; }
.std b { display: block; font-family: var(--font-head); font-weight: 600; margin-bottom: 3px; }
.std span { font-size: .87rem; color: var(--ink-2); }

/* ---------- team ---------- */
.team { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.member { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: #fff; box-shadow: var(--sh-1); transition: .3s var(--ease); }
.member:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.member__img { aspect-ratio: 3 / 4; background: linear-gradient(160deg, var(--wine-050), var(--gold-100)); display: grid; place-items: center; color: var(--wine-600); }
.member__img img { width: 100%; height: 100%; object-fit: cover; }
.member__b { padding: 18px 20px 22px; }
.member__n { font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; }
.member__r { font-size: .82rem; color: var(--gold-600); letter-spacing: .04em; margin-bottom: 8px; }
.std b + span { display: block; }
.member__d { font-size: .87rem; color: var(--ink-2); }

/* ---------- licence strip ---------- */
.licence { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; justify-content: center; padding: 18px 0; font-size: .84rem; color: var(--ink-3); }
.licence span { display: inline-flex; align-items: center; gap: 8px; }
.licence .ic { color: var(--gold-600); }

/* ---------- animated counters ---------- */
.stat b { font-variant-numeric: tabular-nums; }

/* ---------- section divider hairline ---------- */
.hairline { height: 1px; background: var(--hair); opacity: .55; }

/* ---------- sticky mobile action bar ---------- */
.mbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 46; display: none;
  gap: 8px; padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .93); backdrop-filter: blur(14px);
  border-top: 1px solid var(--line); transform: translateY(110%); transition: transform .4s var(--ease);
}
.mbar.is-on { transform: none; }
.mbar .btn { flex: 1; padding: 12px 10px; font-size: .89rem; }
@media (max-width: 720px) {
  .mbar { display: flex; }
  body { padding-bottom: 64px; }
  .fab { bottom: 76px; }
  .fab .f-line, .fab .f-tel { display: none; }
}

/* ---------- quiet detail: link underline on prose ---------- */
.prose a { color: var(--wine-700); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--gold-300); }
.prose a:hover { text-decoration-color: var(--wine-600); }

/* ---------- legal pages ---------- */
.legal { max-width: 780px; margin-inline: auto; }
.legal h2 { font-size: clamp(20px, 2vw, 26px); margin: 32px 0 12px; }
.legal p, .legal li { color: var(--ink-2); }
.legal ul { display: grid; gap: 8px; margin: 12px 0 12px 4px; }
.legal ul li { position: relative; padding-left: 20px; }
.legal ul li::before { content: ''; position: absolute; left: 2px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-400); }

/* ==========================================================================
   Poster-first banner (narrow screens)
   The clinic's banners are square posters with the headline, price and offer
   baked into the artwork. Cropping one to a tall phone screen throws away half
   of it, and stacking it under a block of copy pushes it past the fold. So on
   narrow screens the poster simply *is* the banner: full bleed at its own
   aspect ratio, nothing cropped, nothing empty, call to action right beneath.
   ========================================================================== */
@media (max-width: 899px) {
  .hero--auto.hero--full { min-height: 0; }
  .hero--auto .hero__bg { display: none; }
  .hero--auto .hero__media { display: block; order: 1; max-width: 100%; }
  .hero--auto .hero__media .frame { border-radius: 0; box-shadow: none; display: block; }
  .hero--auto .hero__media img { width: 100%; height: auto; max-height: none; border-radius: 0; }
  .hero--auto .hero__slide { align-items: stretch; }
  .hero--auto .hero__grid {
    width: 100%; max-width: 100%; margin: 0; gap: 0;
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: start; align-items: start; padding: 0;
  }
  .hero--auto .hero__grid > div:first-child { order: 2; padding: 18px var(--pad) clamp(46px, 9vw, 62px); }
  .hero--auto .hero__btns { gap: 10px; }
  .hero--auto .hero__btns .btn { flex: 1 1 100%; }
  .hero--auto .hero__dots { bottom: 14px; }
  .hero--auto .hero__ctrl { display: none; }
}

/* ==========================================================================
   Refinement layer — quiet luxury
   The first pass outlined every element in a 1px box on flat white, so the
   page read as a stack of blocks. Depth now comes from soft light and space
   instead of outlines, dark sections float as panels rather than hard bands,
   and motion is slow enough to feel calm.
   ========================================================================== */

:root {
  --ivory: #fcfaf8;
  --ivory-2: #f7f1ed;
  --sh-soft: 0 2px 4px rgba(58, 6, 12, .02), 0 12px 28px rgba(58, 6, 12, .05), 0 32px 68px rgba(58, 6, 12, .045);
  --sh-lift: 0 3px 6px rgba(58, 6, 12, .03), 0 20px 44px rgba(58, 6, 12, .09), 0 46px 92px rgba(58, 6, 12, .07);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

body { background: var(--ivory); }

/* ---------- ambient light in every pale section ---------- */
.sec { position: relative; isolation: isolate; }
.sec:not(.sec--wine)::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(560px 400px at 10% 6%, rgba(201, 162, 39, .08), transparent 62%),
    radial-gradient(680px 500px at 92% 88%, rgba(140, 20, 32, .045), transparent 64%);
}
.sec--alt { background: linear-gradient(180deg, var(--ivory) 0%, var(--ivory-2) 52%, var(--ivory) 100%); border: 0; }

/* ---------- dark sections become floating panels ---------- */
.sec--wine {
  border-radius: clamp(22px, 3.4vw, 46px);
  margin-inline: clamp(10px, 2.2vw, 30px);
  overflow: hidden;
}

/* ---------- surfaces: light instead of outlines ---------- */
.card, .cat, .promo, .rev, .infocard, .member, .step, .quick__card, .faq details, .mapbox, .sgal__main, .std {
  border: 0;
  box-shadow: var(--sh-soft);
  background: #fff;
}
.card, .cat, .member, .rev { border-radius: clamp(18px, 1.6vw, 24px); }
.card:hover, .cat:hover, .member:hover, .promo:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-lift);
}
.card, .cat, .member, .promo, .quick__card, .std {
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), background .5s var(--ease-out);
}

/* category tiles: round gold-ringed marks, hairline that grows on hover */
.cat { padding: 30px 26px 28px; overflow: hidden; }
.cat::before { height: 2px; background: var(--grad-gold); transition: transform .6s var(--ease-out); }
.cat__ico {
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(160deg, var(--wine-050), #fff);
  border: 1px solid var(--gold-300); color: var(--wine-700);
  transition: background .5s var(--ease-out), color .5s var(--ease-out), border-color .5s var(--ease-out);
}
.cat:hover .cat__ico { background: var(--grad-wine); border-color: transparent; color: var(--gold-300); }

/* service cards */
.card__media { background: linear-gradient(165deg, var(--ivory-2), var(--gold-100)); }
.card__body { padding: 22px 22px 24px; }
.card__foot { border-top: 0; padding-top: 16px; position: relative; }
.card__foot::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
}
.card__t a { background-image: var(--grad-gold); background-repeat: no-repeat; background-size: 0 1.5px; background-position: 0 100%; transition: background-size .5s var(--ease-out); }
.card:hover .card__t a { background-size: 100% 1.5px; }

/* quick contact: pills, no outline */
.quick__card { border-radius: 999px; padding: 14px 22px; }
.quick__ico { border-radius: 50%; background: linear-gradient(160deg, var(--wine-050), var(--gold-100)); }

/* trust bar: air instead of table rules */
.trust { border: 0; background: transparent; padding-block: clamp(26px, 4vw, 48px); }
.trust__grid { background: transparent; gap: clamp(18px, 2.4vw, 40px); }
.trust__i { background: transparent; padding: 0; align-items: center; }
.trust__ico { width: 46px; height: 46px; box-shadow: var(--sh-soft); background: #fff; }
@media (min-width: 980px) {
  .trust__i + .trust__i { position: relative; }
  .trust__i + .trust__i::before {
    content: ''; position: absolute; left: calc(-1 * clamp(9px, 1.2vw, 20px)); top: 12%; bottom: 12%;
    width: 1px; background: linear-gradient(180deg, transparent, var(--line), transparent);
  }
}

/* process: numerals and a thread, not boxes */
.steps { position: relative; }
.step { background: transparent; box-shadow: none; padding: 0 18px 0 0; }
.step::before {
  position: static; display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0; margin-bottom: 16px; border-radius: 50%;
  background: #fff; box-shadow: var(--sh-soft); border: 1px solid var(--gold-300);
  font-size: .9rem;
}
@media (min-width: 780px) {
  .steps::before {
    content: ''; position: absolute; left: 23px; right: 23px; top: 23px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-300) 12%, var(--gold-300) 88%, transparent);
    z-index: -1;
  }
}
.steps--dark .step::before { background: var(--wine-900); }

/* standards: a quiet list */
.stds { gap: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.std { background: transparent; box-shadow: none; border-radius: 0; padding: 24px 26px 24px 0; position: relative; }
.std::after { content: ''; position: absolute; inset: auto 26px 0 0; height: 1px; background: var(--line); }
.std:hover { transform: none; background: transparent; }
.std:hover b { color: var(--wine-700); }
.std b { transition: color .4s var(--ease-out); }

/* reviews, promos, faq */
.promo { border-radius: 999px; padding: 12px 22px 12px 12px; }
.promo__img { border-radius: 50%; }
.faq details { border-radius: 18px; }
.faq summary { padding: 20px 24px; }
.rev__by { border-top: 0; position: relative; }
.rev__by::before { content: ''; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }
.sec--wine .rev { background: rgba(255, 255, 255, .06); box-shadow: none; backdrop-filter: blur(4px); }
.sec--wine .rev__by::before { background: linear-gradient(90deg, rgba(255, 255, 255, .3), transparent); }

/* section heads: more air, a drawn hairline */
.sec__head { margin-bottom: clamp(36px, 4.6vw, 64px); }
.sec__t { letter-spacing: -.015em; }
.eyebrow::before, .eyebrow::after { transition: width .9s var(--ease-out); }
.reveal.is-in .eyebrow::before, .reveal.is-in .eyebrow::after { width: 30px; }

/* gallery + map soften */
.gal figure { border: 0; box-shadow: var(--sh-soft); border-radius: 18px; }
.gal figure:hover { transform: translateY(-4px); box-shadow: var(--sh-lift); }
.mapbox { border-radius: clamp(18px, 1.8vw, 26px); }
.infocard { border-radius: clamp(18px, 1.8vw, 26px); }

/* footer sits flush again */
.ftr { margin-top: clamp(30px, 4vw, 56px); }

/* ---------- motion ---------- */
.reveal { transition: opacity 1.05s var(--ease-out), transform 1.05s var(--ease-out); transform: translateY(26px); }
.reveal-r { opacity: 0; transform: translateX(-26px); transition: opacity 1.05s var(--ease-out), transform 1.05s var(--ease-out); }
.reveal-r.is-in { opacity: 1; transform: none; }
.reveal-s { opacity: 0; transform: scale(.965); transition: opacity 1.05s var(--ease-out), transform 1.05s var(--ease-out); }
.reveal-s.is-in { opacity: 1; transform: none; }

/* the hero poster breathes very slowly */
@media (prefers-reduced-motion: no-preference) {
  .hero__slide[aria-hidden="false"] .hero__media img,
  .hero--auto .hero__media img { animation: breathe 26s ease-in-out infinite alternate; }
  @keyframes breathe { from { transform: scale(1); } to { transform: scale(1.035); } }
  .hero__bg img { animation: drift 40s ease-in-out infinite alternate; }
  @keyframes drift { from { transform: scale(1.18) translate3d(0, 0, 0); } to { transform: scale(1.26) translate3d(-1.5%, -1%, 0); } }
}

/* a slow shimmer travels the gold rules */
@media (prefers-reduced-motion: no-preference) {
  .hairline { position: relative; overflow: hidden; }
  .hairline::after {
    content: ''; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
    animation: sweep 7s ease-in-out infinite;
  }
  @keyframes sweep { 0%, 65% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
}

/* scrollbar */
@media (min-width: 900px) {
  * { scrollbar-width: thin; scrollbar-color: var(--gold-300) transparent; }
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-thumb { background: var(--gold-300); border-radius: 99px; border: 3px solid var(--ivory); }
  ::-webkit-scrollbar-track { background: transparent; }
}

/* parallax hook for the ambient light (set from JS) */
.sec:not(.sec--wine)::before { transform: translate3d(0, var(--par, 0px), 0); will-change: transform; }

/* ---------- compact card action ---------- */
.card__go {
  width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center;
  color: var(--wine-700); background: var(--wine-050);
  transition: background .45s var(--ease-out), color .45s var(--ease-out), transform .45s var(--ease-out);
}
.card__go .ic { transition: transform .45s var(--ease-out); }
.card:hover .card__go { background: var(--grad-wine); color: var(--gold-300); }
.card:hover .card__go .ic { transform: translateX(3px); }
.card__foot { align-items: center; flex-wrap: nowrap; gap: 14px; }
.price { min-width: 0; }

/* ---------- categories: an editorial bento, not five identical boxes ------- */
@media (min-width: 1000px) {
  .cats--5 { grid-template-columns: repeat(3, 1fr); }
  .cats--5 > :first-child { grid-column: span 2; display: grid; grid-template-columns: auto 1fr; gap: 0 26px; align-items: start; }
  .cats--5 > :first-child .cat__ico { grid-row: span 3; }
  .cats--5 > :first-child h3 { font-size: clamp(22px, 1.9vw, 28px); }
  .cats--5 > :first-child p { max-width: 44ch; }
}
.cats--5 > :first-child {
  background: var(--grad-wine); color: #fff;
  box-shadow: 0 20px 50px rgba(58, 6, 12, .22);
}
.cats--5 > :first-child p { color: rgba(255, 255, 255, .78); }
.cats--5 > :first-child .cat__more { color: var(--gold-300); }
.cats--5 > :first-child .cat__ico { background: rgba(233, 208, 137, .14); border-color: rgba(233, 208, 137, .4); color: var(--gold-300); }
.cats--5 > :first-child:hover .cat__ico { background: var(--grad-gold); color: #3a2704; }
.cat h3 { text-wrap: balance; }

/* circular crops cut the poster artwork awkwardly — keep a soft square */
.promo { border-radius: 20px; padding: 14px 20px 14px 14px; }
.promo__img { border-radius: 14px; width: 84px; height: 84px; }

/* ==========================================================================
   Phone sizing
   Type and controls were tuned on a desktop canvas and carried straight down,
   so on a 390px screen a single category card ran ~245px tall and the four
   contact cards ate most of a viewport. Everything below is scaled to the
   hand, not the desk.
   ========================================================================== */
@media (max-width: 899px) {
  :root { --sec: clamp(46px, 7vw, 104px); }
  h1 { font-size: clamp(26px, 6.4vw, 40px); }
  h2 { font-size: clamp(21px, 5.4vw, 34px); }
  h3 { font-size: clamp(17px, 4.4vw, 22px); }
  .sec__head { margin-bottom: clamp(26px, 5vw, 44px); }
  .sec__d { font-size: .95rem; }
  .eyebrow { font-size: .7rem; letter-spacing: .18em; margin-bottom: 11px; }
  .eyebrow::before, .eyebrow::after { width: 20px; }
  .btn { padding: 11px 20px; font-size: .9rem; }
  .btn .ic { width: 17px; height: 17px; }
  .btn-lg { padding: 13px 22px; font-size: .94rem; }
  .btn-sm { padding: 8px 14px; font-size: .82rem; }
}

@media (max-width: 620px) {
  /* contact pills: same information, two thirds of the height */
  .quick__card { padding: 11px 16px; gap: 11px; }
  .quick__ico { width: 38px; height: 38px; }
  .quick__ico .ic { width: 19px; height: 19px; }
  .quick__t { font-size: .69rem; }
  .quick__v { font-size: .89rem; }

  /* category cards go horizontal — icon beside the words, not above them */
  .cat { display: grid; grid-template-columns: 44px 1fr; gap: 2px 14px; align-items: start; padding: 16px 18px; }
  .cat__ico { grid-row: span 3; width: 44px; height: 44px; margin: 0; border-radius: 14px; }
  .cat__ico .ic { width: 21px; height: 21px; }
  .cat h3 { font-size: 1.02rem; margin-bottom: 3px; }
  .cat p { font-size: .85rem; line-height: 1.55; }
  .cat__more { margin-top: 9px; font-size: .85rem; }
  .cats { gap: 11px; }

  /* trust row */
  .trust__ico { width: 40px; height: 40px; }
  .trust__ico .ic { width: 17px; height: 17px; }
  .trust__t { font-size: .93rem; }
  .trust__d { font-size: .81rem; }
  .trust__grid { gap: 16px; }

  /* service cards */
  .card__body { padding: 16px 16px 18px; }
  .card__t { font-size: 1.04rem; }
  .card__d { font-size: .87rem; margin-bottom: 12px; }
  .card__cat { font-size: .69rem; }
  .price b { font-size: 1.26rem; }
  .card__go { width: 40px; height: 40px; }
  .card__go .ic { width: 17px; height: 17px; }
  .badge { font-size: .72rem; padding: 5px 11px; }

  /* promotions */
  .promo { padding: 11px 16px 11px 11px; gap: 12px; }
  .promo__img { width: 66px; height: 66px; }
  .promo__t { font-size: .93rem; }
  .promo__d { font-size: .8rem; }

  /* process + standards */
  .step::before { width: 40px; height: 40px; font-size: .82rem; margin-bottom: 12px; }
  .step h3 { font-size: 1rem; }
  .step p { font-size: .86rem; }
  .std { padding: 18px 18px 18px 0; }
  .std b { font-size: .96rem; }
  .std span { font-size: .84rem; }

  /* reviews + stats + faq */
  .rev { flex-basis: min(84vw, 320px); }
  .rev__body { padding: 16px; gap: 8px; }
  .rev__q { font-size: .87rem; }
  .stat { padding: 16px 10px; }
  .stat span { font-size: .78rem; }
  .why__i { padding: 20px 18px; }
  .why__ico { width: 44px; height: 44px; margin-bottom: 12px; }
  .why__i h3 { font-size: 1rem; }
  .why__i p { font-size: .86rem; }
  .faq summary { padding: 15px 16px; font-size: .93rem; }
  .faq__a { padding: 0 16px 16px; font-size: .89rem; }

  /* forms, cards, bands */
  .infocard { padding: 20px 18px; }
  .field input, .field select, .field textarea { padding: 11px 13px; font-size: .92rem; }
  .field label { font-size: .83rem; }
  .cta-band { padding: 28px 20px; border-radius: 24px; }
  .cta-band p { font-size: .92rem; margin-bottom: 20px; }

  /* the two things pinned to the screen */
  .mbar { padding: 7px 10px calc(7px + env(safe-area-inset-bottom)); gap: 7px; }
  .mbar .btn { padding: 10px 8px; font-size: .85rem; }
  body { padding-bottom: 58px; }
  .fab { bottom: 68px; right: 10px; }
  .fab a, .fab button { width: 46px; height: 46px; }
  .promobar__in { padding: 7px 34px; font-size: .78rem; }
  .hdr__in { min-height: 60px; }
  :root { --header-h: 60px; }
  .brand img { width: 38px; height: 38px; }
  .brand__n { font-size: .98rem; }
  .brand__s { font-size: .62rem; }
}

/* ==========================================================================
   Artwork-first layout
   Every frame now takes its aspect ratio from the image it holds, so a cover
   fit crops exactly nothing, and nothing is ever laid on top of the artwork.
   ========================================================================== */

/* the inline aspect-ratio on the element wins; this is only the fallback */
.card__media, .rev__img, .promo__img, .member__img {
  position: relative; overflow: hidden;
  background: linear-gradient(165deg, var(--ivory-2), var(--gold-100));
}
.card__media img, .rev__img img, .promo__img img, .member__img img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
}

/* badges moved off the artwork and into the card */
.card__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 9px; }
.card__cat { margin: 0; }
.badge--inline {
  position: static; display: inline-flex; align-items: center; gap: 5px;
  box-shadow: none; font-size: .72rem; padding: 4px 11px;
}

/* curtain wipe as each card arrives */
@media (prefers-reduced-motion: no-preference) {
  .card__media::after {
    content: ''; position: absolute; inset: 0; z-index: 2; background: var(--ivory);
    transform-origin: bottom; transition: transform 1.15s var(--ease-out) .08s;
  }
  .card.is-in .card__media::after { transform: scaleY(0); }
  .card:not(.reveal) .card__media::after { transform: scaleY(0); }
}

/* a light sweeps across the card on hover */
.card { position: relative; }
.card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 3; border-radius: inherit;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .38) 46%, transparent 62%);
  background-size: 260% 100%; background-position: 140% 0; opacity: 0;
  transition: background-position 1.1s var(--ease-out), opacity .4s;
}
.card:hover::after { opacity: 1; background-position: -40% 0; }

/* staggered columns give the grid an editorial rhythm */
@media (min-width: 1000px) {
  .cards > :nth-child(4n + 2) { margin-top: 30px; }
  .cards > :nth-child(4n + 4) { margin-top: 18px; }
}

/* ---------- ribbon of programme names ---------- */
.ribbon {
  overflow: hidden; padding: clamp(16px, 2.4vw, 26px) 0;
  border-block: 1px solid var(--line); background: var(--ivory);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ribbon__track { display: flex; width: max-content; }
.ribbon__run { display: flex; align-items: center; gap: 0; padding-right: 0; }
.ribbon__run span {
  font-family: var(--font-head); font-weight: 500; white-space: nowrap;
  font-size: clamp(15px, 1.5vw, 21px); color: var(--ink-2); letter-spacing: .01em;
}
.ribbon__run i {
  display: block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold-400); margin-inline: clamp(18px, 2.6vw, 34px); flex: none;
}
@media (prefers-reduced-motion: no-preference) {
  .ribbon__track { animation: slide 46s linear infinite; }
  .ribbon:hover .ribbon__track { animation-play-state: paused; }
  @keyframes slide { to { transform: translateX(-50%); } }
}

/* ==========================================================================
   Phone: see more at once
   ========================================================================== */
@media (max-width: 620px) {
  /* two programmes per row instead of one — the whole offer is visible sooner */
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
  .card__body { padding: 12px 12px 14px; }
  .card__t { font-size: .95rem; line-height: 1.35; }
  .card__d { font-size: .81rem; -webkit-line-clamp: 2; line-clamp: 2; margin-bottom: 10px; }
  .card__meta { gap: 6px; margin-bottom: 6px; }
  .card__cat { font-size: .64rem; letter-spacing: .06em; }
  .badge--inline { font-size: .66rem; padding: 3px 8px; }
  .card__foot { padding-top: 10px; gap: 8px; }
  .price b { font-size: 1.1rem; }
  .price small { font-size: .66rem; }
  .price del { font-size: .7rem; }
  .price span.unit { font-size: .74rem; }
  .card__go { width: 34px; height: 34px; }
  .card__go .ic { width: 15px; height: 15px; }

  /* promotions two-up as well */
  .promos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .promo { flex-direction: column; align-items: stretch; padding: 10px; gap: 9px; border-radius: 16px; }
  .promo__img { width: 100%; height: auto; border-radius: 12px; }
  .promo__t { font-size: .86rem; }
  .promo__d { font-size: .76rem; -webkit-line-clamp: 2; line-clamp: 2; }
  .promo__p { font-size: .95rem; }

  /* gallery gets a third column back */
  .gal { columns: 2; column-gap: 10px; }
  .gal figure { margin-bottom: 10px; border-radius: 14px; }
  .gal figcaption { padding: 8px 10px; font-size: .74rem; }

  /* standards two-up */
  .stds { grid-template-columns: 1fr; }
  .steps { gap: 14px; }

  .ribbon__run span { font-size: 14px; }
}

/* ==========================================================================
   Movement
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* section headings rise a touch later than the block they sit above */
  .sec__head .eyebrow { display: inline-flex; }
  .sec__t { transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }

  /* gold hairline draws itself under a hovered category */
  .cat { position: relative; }
  .cat::after {
    content: ''; position: absolute; left: 18px; right: 18px; bottom: 0; height: 1px;
    background: var(--grad-gold); transform: scaleX(0); transform-origin: left;
    transition: transform .7s var(--ease-out);
  }
  .cat:hover::after { transform: scaleX(1); }

  /* quick-contact pills settle in one after another */
  .quick__card { transition: transform .55s var(--ease-out), box-shadow .55s var(--ease-out); }
  .quick__card:active { transform: scale(.985); }

  /* the floating buttons breathe once when they appear */
  .fab a, .fab button { transition: transform .45s var(--ease-out), opacity .45s var(--ease-out), box-shadow .45s; }

  /* gallery tiles lift and brighten */
  .gal figure img { transition: transform .9s var(--ease-out), filter .9s var(--ease-out); }
  .gal figure:hover img { transform: scale(1.04); filter: saturate(1.06); }
}

/* ==========================================================================
   Phone controls, second pass
   Measured on a 390px viewport: the hero's calls to action were 358x46 blocks
   stacked two deep, and the four contact pills ran 78px each. Same functions,
   noticeably less of the screen.
   ========================================================================== */
@media (max-width: 620px) {
  .btn { padding: 10px 17px; font-size: .86rem; gap: 7px; }
  .btn .ic { width: 16px; height: 16px; }
  .btn-lg { padding: 11px 18px; font-size: .89rem; }
  .btn-sm { padding: 7px 12px; font-size: .78rem; }

  /* hero actions sit side by side instead of stacking full width */
  .hero__btns { gap: 8px; }
  .hero--auto .hero__btns .btn,
  .hero--cover .hero__btns .btn { flex: 1 1 0; min-width: 0; padding-inline: 10px; }
  .hero__btns .btn { font-size: .85rem; }

  /* contact pills two-up */
  .quick__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .quick__card { border-radius: 16px; padding: 10px 12px; gap: 9px; }
  .quick__ico { width: 32px; height: 32px; border-radius: 10px; }
  .quick__ico .ic { width: 16px; height: 16px; }
  .quick__t { font-size: .64rem; letter-spacing: 0; }
  .quick__v { font-size: .82rem; line-height: 1.3; }
  .quick { margin-top: calc(-1 * clamp(18px, 3vw, 26px)); }

  /* the two things pinned to the screen shrink too */
  .mbar .btn { padding: 9px 8px; font-size: .82rem; }
  .fab a, .fab button { width: 42px; height: 42px; }
  .fab a .ic, .fab button .ic { width: 19px; height: 19px; }
  .fab { gap: 8px; bottom: 62px; }
  body { padding-bottom: 54px; }

  /* CTA band + rail arrows */
  .rail-nav button { width: 36px; height: 36px; }
  .chip { padding: 7px 14px; font-size: .81rem; }
  .hdr__phone { font-size: .88rem; }
  .burger { padding: 7px; }
}