/* ============================================================
   Riverside Medical Aesthetics
   Palette: chalk + deep river green + clay
   ============================================================ */

/* ------------------------------------------------------------
   Self-hosted webfonts.

   Served from our own origin rather than fonts.gstatic.com so that
   visiting the site does not disclose the visitor's IP address to a
   third party before the page has even rendered.

   Instrument Serif and Karla are both SIL Open Font License 1.1;
   see fonts/OFL.txt.
   ------------------------------------------------------------ */

@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrumentserif-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrumentserif-400-latinext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrumentserif-400italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrumentserif-400italic-latinext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Karla";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("../fonts/karla-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Karla";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("../fonts/karla-var-latinext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Colour */
  --bone:        #F5F2EB;
  --bone-deep:   #EBE6DB;
  --bone-line:   #DCD6C8;
  --ink:         #16211D;
  --forest:      #23392F;
  --moss:        #4A6A57;
  --sage:        #9FB3A3;
  --clay:        #C06B45;
  --clay-deep:   #A85834;
  /* Clay reads at 3.46:1 on bone — fine for large display type and fills,
     short of the 4.5:1 small text needs. This is the same hue, deep
     enough for labels, captions and links. */
  --clay-text:   #9C5230;
  --clay-soft:   #E8C4AE;
  --gold:        #A7967F;   /* the R monogram, sampled from the clinic's logo */
  --gold-light:  #BFA98C;   /* the same on dark backgrounds */

  --text:        var(--ink);
  --text-soft:   #4E5B54;
  /* Darkened from #8A968F, which sat at 2.75:1 on the bone ground — under
     the 4.5:1 minimum for body text, and the reason parts of the page
     read as washed out. This clears AA on both bone and bone-deep. */
  --text-light:  #5C6963;

  /* Type */
  --display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --body:    "Karla", "Segoe UI", sans-serif;

  /* Space */
  --wrap:   1200px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --sec-y:  clamp(5rem, 12vw, 9.5rem);

  /* Motion */
  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* An author `display` rule beats the browser's [hidden] styling, so anything
   given display:flex or similar would stay visible when hidden. Make the
   attribute win. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* `clip` rather than `hidden`: it stops sideways scroll from decorative
     overflow without creating a scroll container, so `position: sticky`
     still works inside (see .faq-head). */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--bone);
  color: var(--text);
  font-family: var(--body);
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  font-weight: 400;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3 { margin: 0; font-weight: 400; letter-spacing: -.01em; }
p  { margin: 0 0 1.1em; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
em { font-style: italic; }

:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Keep in-page anchor targets clear of the fixed header. */
section[id] { scroll-margin-top: clamp(4.5rem, 9vw, 6.5rem); }

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

.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 999;
  background: var(--ink); color: var(--bone);
  padding: .7rem 1.1rem; border-radius: 4px;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 1rem; }

/* ---------- Film grain ---------- */
.grain {
  position: fixed; inset: -50%;
  z-index: 9998;
  pointer-events: none;
  opacity: .3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

/* ============================================================
   Shared type
   ============================================================ */

.eyebrow, .section-tag, .side-label, .cm-label, .step-num,
.tags li, .ticker, .nav a, .btn, .plaque-label {
  font-family: var(--body);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .69rem;
  font-weight: 600;
}

.section-tag {
  display: block;
  color: var(--clay-text);
  margin-bottom: 1.4rem;
}
.section-tag.light { color: var(--clay-soft); }

.section-title {
  font-family: var(--display);
  font-size: clamp(2.4rem, 1.4rem + 4vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -.02em;
}
.section-title.light { color: var(--bone); }

.section-head { max-width: 46rem; margin-bottom: clamp(3rem, 6vw, 5rem); }

.section-intro {
  color: var(--text-soft);
  font-size: 1.08rem;
  max-width: 34rem;
  margin-top: 1.6rem;
}
/* On the dark bands the default ink-grey would be all but invisible. */
.section-intro.light { color: rgba(245, 242, 235, .74); }

.muted { color: var(--text-light); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1.05rem 1.9rem;
  border-radius: 100px;
  border: 1px solid transparent;
  transition: background .4s var(--ease), color .4s var(--ease),
              border-color .4s var(--ease), transform .4s var(--ease);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }

.btn-solid  { background: var(--ink); color: var(--bone); }
.btn-solid:hover { background: var(--clay); }

.btn-ghost  { border-color: var(--bone-line); color: var(--text); }
.btn-ghost:hover { border-color: var(--ink); background: var(--bone-deep); }

.btn-sm    { padding: .72rem 1.3rem; font-size: .66rem; }
.btn-block { width: 100%; margin-top: .6rem; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .55rem;
  color: var(--clay-text);
  font-weight: 600;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color .3s var(--ease), gap .3s var(--ease);
}
.link-arrow svg { width: 19px; height: 19px; }
.link-arrow:hover { border-color: currentColor; gap: .9rem; }

/* ============================================================
   Header
   ============================================================ */

.site-header {
  position: fixed; inset: 0 0 auto;
  z-index: 100;
  transition: background .45s var(--ease), border-color .45s var(--ease),
              backdrop-filter .45s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.stuck {
  background: rgba(245, 242, 235, .84);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom-color: var(--bone-line);
}

.header-inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: clamp(1rem, 2vw, 1.5rem) var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem;
}

/* The clinic's own logo: the R-and-wave monogram lifted from the badge,
   beside the wordmark set in type. The full circular badge is
   images/logo.png — its inner text is unreadable at header size, so only
   the monogram is used here and the name is carried by live text (which
   also means it is selectable and readable by screen readers). */
.brand { display: flex; align-items: center; gap: .65rem; color: var(--ink); }

.brand-mark {
  width: 40px;
  height: 40px;
  flex: none;
  object-fit: contain;
}

.brand-text { display: flex; flex-direction: column; line-height: 1; }

.brand-name {
  font-family: var(--display);
  font-size: 1.12rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  /* Letterspacing adds a trailing gap; pull it back so the block sits square. */
  margin-right: -.2em;
}

.brand-sub {
  font-size: .53rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .19em;
  color: var(--text-light);
  margin-top: .42rem;
  margin-right: -.19em;
}

.nav { display: flex; align-items: center; gap: clamp(1.3rem, 2.4vw, 2.3rem); }
.nav a:not(.btn) {
  color: var(--text-soft);
  position: relative;
  padding-block: .3rem;
  transition: color .3s var(--ease);
}
.nav a:not(.btn)::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--clay);
  transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease);
}
.nav a:not(.btn):hover { color: var(--ink); }
.nav a:not(.btn):hover::after,
.nav a.active::after { transform: scaleX(1); transform-origin: left; }
.nav a.active { color: var(--ink); }

.nav-toggle { display: none; width: 42px; height: 42px; position: relative; }
.nav-toggle span {
  position: absolute; left: 9px; width: 24px; height: 1.5px;
  background: var(--ink); border-radius: 2px;
  transition: transform .4s var(--ease), opacity .3s var(--ease);
}
.nav-toggle span:nth-child(1) { top: 17px; }
.nav-toggle span:nth-child(2) { top: 24px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

/* ============================================================
   Hero
   ============================================================ */

.hero {
  position: relative;
  padding: clamp(8rem, 16vw, 12rem) 0 clamp(4rem, 8vw, 7rem);
  overflow-x: clip; /* contains .hero-glow, which is deliberately oversized */
}

.hero-glow {
  position: absolute; top: -18%; right: -12%;
  width: min(85vw, 900px); aspect-ratio: 1;
  background: radial-gradient(circle at 50% 50%,
              rgba(159, 179, 163, .40) 0%,
              rgba(192, 107, 69, .13) 42%,
              transparent 68%);
  filter: blur(20px);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  /* The copy column carries a longer headline than it used to, so it takes a
     larger share. Below 88px the words "Medical aesthetics," fall onto one
     line here, which is what keeps the title to two lines. */
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.eyebrow { display: flex; align-items: center; gap: .6rem; color: var(--moss); margin-bottom: 1.8rem; }
.dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--clay); flex: none;
  animation: pulse 2.6s var(--ease) infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1;  transform: scale(1); }
  50%      { opacity: .35; transform: scale(.72); }
}

.hero-title {
  font-family: var(--display);
  font-size: clamp(2.6rem, 6.9vw, 5.5rem);
  line-height: .96;
  letter-spacing: -.028em;
  margin-bottom: 2rem;
}
.hero-title .line { display: block; }
.hero-title em { color: var(--clay); font-style: italic; }

.hero-lede {
  font-size: clamp(1.06rem, 1rem + .3vw, 1.22rem);
  color: var(--text-soft);
  max-width: 33rem;
  margin-bottom: 1.1rem;
}

/* The quieter second line — supporting, not competing with the lede. */
.hero-note {
  font-size: .97rem;
  color: var(--text-light);
  max-width: 31rem;
  margin-bottom: 2.4rem;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 3rem; }

.hero-trust {
  display: flex; flex-wrap: wrap;
  gap: .5rem 1.6rem;
  font-size: .82rem;
  color: var(--text-light);
  border-top: 1px solid var(--bone-line);
  padding-top: 1.5rem;
}
.hero-trust li { display: flex; align-items: center; gap: .5rem; }
.hero-trust li::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--sage); flex: none;
}

/* Hero figure */
.hero-figure { position: relative; }
.figure-frame {
  position: relative;
  border-radius: 220px 220px 14px 14px;
  overflow: hidden;
  aspect-ratio: 42 / 54;
  box-shadow: 0 40px 80px -40px rgba(22, 33, 29, .5),
              0 4px 16px rgba(22, 33, 29, .08);
}
.ripple { width: 100%; height: 100%; }
.rip { animation: ripple 7s var(--ease) infinite; transform-origin: 210px 300px; }
.rip:nth-child(2) { animation-delay: .5s; }
.rip:nth-child(3) { animation-delay: 1s; }
.rip:nth-child(4) { animation-delay: 1.5s; }
.rip:nth-child(5) { animation-delay: 2s; }
@keyframes ripple {
  0%, 100% { opacity: .30; transform: scale(1); }
  50%      { opacity: .70; transform: scale(1.045); }
}

.figure-plaque {
  position: absolute; left: -1.5rem; bottom: 2.4rem;
  background: var(--bone);
  border: 1px solid var(--bone-line);
  border-radius: 4px;
  padding: 1rem 1.3rem;
  display: flex; align-items: center; gap: .9rem;
  box-shadow: 0 18px 40px -22px rgba(22, 33, 29, .45);
}
.plaque-num {
  font-family: var(--display);
  font-size: 2.3rem; line-height: 1;
  color: var(--clay);
}
.plaque-label {
  font-size: .6rem; line-height: 1.6;
  letter-spacing: .13em;
  color: var(--text-soft);
}

/* ============================================================
   Ticker
   ============================================================ */

.ticker {
  border-block: 1px solid var(--bone-line);
  padding: 1.15rem 0;
  overflow: hidden;
  background: var(--bone-deep);
  color: var(--moss);
}
.ticker-track {
  display: flex; align-items: center; gap: 2.2rem;
  width: max-content;
  animation: slide 44s linear infinite;
}
.ticker .sep { color: var(--clay); font-size: .62rem; }
@keyframes slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   Statement
   ============================================================ */

.statement { padding: var(--sec-y) 0; }

.statement-body {
  font-family: var(--display);
  font-size: clamp(1.65rem, 1rem + 2.6vw, 3.1rem);
  line-height: 1.24;
  letter-spacing: -.018em;
  max-width: 30ch;
  margin-bottom: clamp(3.5rem, 7vw, 6rem);
}
.statement-body em { color: var(--clay); font-style: italic; }

.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  border-top: 1px solid var(--bone-line);
  padding-top: clamp(2rem, 4vw, 3rem);
}
.pillar-num {
  display: block;
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--clay);
  margin-bottom: .9rem;
}
.pillar h3 { font-size: 1.22rem; font-weight: 500; margin-bottom: .7rem; }
.pillar p  { color: var(--text-soft); font-size: .95rem; margin: 0; }

/* ============================================================
   Treatments
   ============================================================ */

.treatments { padding: 0 0 var(--sec-y); }

.treatment-list { border-top: 1px solid var(--bone-line); }

.treatment {
  position: relative;
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) 13rem;
  gap: clamp(1.5rem, 3vw, 3rem);
  padding: clamp(2.2rem, 4vw, 3.2rem) clamp(0rem, 2vw, 1.5rem);
  border-bottom: 1px solid var(--bone-line);
  transition: padding-inline .5s var(--ease);
}
.treatment::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, var(--bone-deep), transparent 78%);
  opacity: 0;
  transition: opacity .5s var(--ease);
  pointer-events: none;
}
.treatment:hover::before { opacity: 1; }
.treatment > * { position: relative; }

.treatment-num {
  font-family: var(--display);
  font-size: 1.4rem;
  color: var(--clay-text);
  padding-top: .25rem;
  transition: transform .5s var(--ease);
}
.treatment:hover .treatment-num { transform: translateY(-3px); }

.treatment-main h3 {
  font-family: var(--display);
  font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem);
  line-height: 1.1;
  margin-bottom: .85rem;
}
.treatment-main p { color: var(--text-soft); max-width: 44ch; margin-bottom: 1.3rem; }

/* An opening line that carries the idea before the detail arrives. */
.treatment-main p.treatment-lead {
  font-family: var(--display);
  font-size: clamp(1.12rem, 1rem + .5vw, 1.4rem);
  line-height: 1.35;
  color: var(--text);
  margin-bottom: .9rem;
}

.tags { display: flex; flex-wrap: wrap; gap: .45rem; }
.tags li {
  border: 1px solid var(--bone-line);
  border-radius: 100px;
  padding: .38rem .85rem;
  color: var(--moss);
  font-size: .62rem;
  background: rgba(245, 242, 235, .6);
}

.treatment-side {
  display: flex; flex-direction: column; align-items: flex-end; gap: .55rem;
  padding-top: .5rem;
  text-align: right;
}
.side-label {
  color: var(--moss);
  border: 1px solid var(--bone-line);
  border-radius: 100px;
  padding: .4rem .85rem;
  background: rgba(245, 242, 235, .6);
  font-size: .6rem;
  white-space: nowrap;
}
.side-note  { font-size: .82rem; color: var(--text-light); line-height: 1.55; max-width: 11rem; }

.notice {
  display: flex; gap: 1.1rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding: 1.5rem 1.8rem;
  background: var(--bone-deep);
  border-left: 2px solid var(--clay);
  border-radius: 0 6px 6px 0;
  max-width: 62rem;
}
.notice-icon { width: 22px; height: 22px; flex: none; color: var(--clay); margin-top: .2rem; }
.notice p { margin: 0; font-size: .92rem; color: var(--text-soft); }

/* ============================================================
   Results — the clinic's own before/after composites
   ============================================================ */

.results { padding: 0 0 var(--sec-y); }
/* Results has no top padding of its own — it used to follow a light section
   whose bottom padding did the work. Now it follows the dark "What to expect"
   band, whose padding is inside the dark block, so it needs its own. */
.approach + .results { padding-top: var(--sec-y); }

.results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(1.4rem, 3vw, 2.4rem);
}

.result-card { margin: 0; }

/* The supplied images are square-ish composites that already carry their own
   labels and logo, so they must never be cropped. A fixed square box with
   `contain` keeps the grid even whatever the exact dimensions, and the cream
   ground matches the artwork's own background. */
.result-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--bone);
  border: 1px solid var(--bone-line);
  border-radius: 6px;
  box-shadow: 0 22px 50px -36px rgba(22, 33, 29, .5);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.result-card:hover img {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -34px rgba(22, 33, 29, .55);
}

.result-card figcaption {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding-top: 1rem;
}
.result-treatment {
  font-family: var(--display);
  font-size: 1.3rem;
  color: var(--ink);
}
.result-detail {
  font-size: .82rem;
  color: var(--text-light);
}

/* ============================================================
   Feedback
   ============================================================ */

.feedback {
  background: var(--bone-deep);
  border-block: 1px solid var(--bone-line);
  padding: var(--sec-y) 0;
}

/* Loud banner for placeholder content that must not go live. */
.admin-flag {
  background: #FBF0E8;
  border: 1px dashed var(--clay);
  border-radius: 5px;
  padding: 1rem 1.2rem;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
  font-size: .88rem;
  line-height: 1.6;
  color: var(--clay-deep);
}
.admin-flag strong { display: block; margin-bottom: .25rem; }

.quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: clamp(1.2rem, 2.5vw, 2rem);
}

.quote {
  position: relative;
  margin: 0;
  background: var(--bone);
  border: 1px solid var(--bone-line);
  border-radius: 6px;
  padding: 3rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease),
              border-color .5s var(--ease);
}
.quote:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: 0 22px 44px -30px rgba(22, 33, 29, .45);
}

.quote-mark {
  position: absolute;
  top: .55rem; left: 1.5rem;
  font-family: var(--display);
  font-size: 4.2rem;
  line-height: 1;
  color: var(--gold);
  opacity: .38;
}

.quote blockquote { margin: 0; flex: 1; }
/* Set in the display face. A testimonial is the most persuasive thing on the
   page and was being set smaller than the paragraph explaining it. */
.quote blockquote p {
  margin: 0;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(1.25rem, 1.05rem + .7vw, 1.65rem);
  line-height: 1.34;
  letter-spacing: -.01em;
}

.quote figcaption {
  margin-top: 1.6rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--bone-line);
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.quote-name {
  font-weight: 600;
  font-size: .9rem;
  color: var(--ink);
}
.quote-meta {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--clay-text);
  font-weight: 600;
}

.feedback-cta {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: clamp(2rem, 4vw, 2.6rem);
  border-top: 1px solid var(--bone-line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.feedback-cta p {
  margin: 0;
  max-width: 38rem;
  color: var(--text-soft);
}
.feedback-cta .btn-ghost { background: var(--bone); }

/* ============================================================
   Approach — dark band
   ============================================================ */

.approach {
  background: var(--forest);
  color: var(--bone);
  padding: var(--sec-y) 0;
  position: relative;
  overflow: hidden;
}
.approach::after {
  content: ""; position: absolute;
  bottom: -45%; left: 50%; transform: translateX(-50%);
  width: 130%; aspect-ratio: 2.4;
  background: radial-gradient(ellipse at 50% 0%, rgba(192, 107, 69, .28), transparent 62%);
  pointer-events: none;
}
.approach .wrap { position: relative; z-index: 1; }

/* Fixed column counts rather than auto-fit: with four items, auto-fit can
   settle on three columns and leave an empty cell in the bordered grid. */
.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: rgba(245, 242, 235, .16);
  border: 1px solid rgba(245, 242, 235, .16);
}
.step {
  background: var(--forest);
  padding: clamp(1.8rem, 3vw, 2.6rem);
  transition: background .5s var(--ease);
}
.step:hover { background: #2A4437; }
.step-num { display: block; color: var(--clay-soft); margin-bottom: 1.6rem; }
.step h3 {
  font-family: var(--display);
  font-size: 1.65rem;
  margin-bottom: .7rem;
}
.step p { color: rgba(245, 242, 235, .68); font-size: .93rem; margin: 0; }

/* ============================================================
   Clinic
   ============================================================ */

.clinic { padding: var(--sec-y) 0; }

.clinic-grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}

.clinic-figure {
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 38 / 46;
  box-shadow: 0 30px 70px -40px rgba(22, 33, 29, .4);
}
.clinic-figure svg { width: 100%; height: 100%; }

.clinic-copy .section-title { margin-bottom: 1.8rem; }
.clinic-copy p { color: var(--text-soft); max-width: 40ch; }

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.8rem;
  margin: 2.6rem 0;
  padding-top: 2rem;
  border-top: 1px solid var(--bone-line);
}
.fact dt {
  text-transform: uppercase; letter-spacing: .16em;
  font-size: .64rem; font-weight: 600;
  color: var(--clay-text);
  margin-bottom: .7rem;
}
.fact dd { font-size: .95rem; line-height: 1.75; color: var(--text-soft); }

/* ============================================================
   FAQ
   ============================================================ */

.faq { padding: 0 0 var(--sec-y); }

.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.faq-head { position: sticky; top: 7rem; }

/* Closing nudge under the questions, spanning both columns of the grid.
   Someone who has read this far has not booked yet — this is the last plain
   invitation before the form itself. */
.faq-cta {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: clamp(1.8rem, 4vw, 2.8rem);
  background: var(--bone-deep);
  border: 1px solid var(--bone-line);
  border-left: 2px solid var(--clay);
  border-radius: 0 8px 8px 0;
  display: grid;
  gap: 1.2rem;
  align-items: center;
}
@media (min-width: 780px) {
  .faq-cta {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: clamp(2rem, 4vw, 3.5rem);
  }
  .faq-cta-title { grid-column: 1; }
  .faq-cta p     { grid-column: 1; }
  .faq-cta .btn  { grid-column: 2; grid-row: 1 / span 2; }
}

.faq-cta-title {
  font-family: var(--display);
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);
  line-height: 1.1;
  margin: 0;
}
.faq-cta p {
  margin: 0;
  color: var(--text-soft);
  max-width: 46ch;
}
.faq-cta .btn { justify-self: start; white-space: nowrap; }

.faq-list { border-top: 1px solid var(--bone-line); }
.faq-item { border-bottom: 1px solid var(--bone-line); }

.faq-q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 0;
  text-align: left;
  font-size: 1.06rem;
  font-weight: 500;
  transition: color .3s var(--ease);
}
.faq-q:hover { color: var(--clay); }

.faq-icon { position: relative; width: 15px; height: 15px; flex: none; }
.faq-icon::before, .faq-icon::after {
  content: ""; position: absolute; inset: 50% 0 auto;
  height: 1.5px; background: var(--clay); border-radius: 2px;
  transition: transform .45s var(--ease);
}
.faq-icon::after { transform: rotate(90deg); }
.faq-q[aria-expanded="true"] .faq-icon::after { transform: rotate(0deg); }

.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s var(--ease);
}
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a-inner { overflow: hidden; }
.faq-a-inner p {
  color: var(--text-soft);
  font-size: .96rem;
  max-width: 52ch;
  margin: 0;
  padding-bottom: 1.6rem;
}

/* ============================================================
   Contact — dark band
   ============================================================ */

.contact {
  background: var(--ink);
  color: var(--bone);
  padding: var(--sec-y) 0;
  position: relative;
  overflow: hidden;
}
.contact::before {
  content: ""; position: absolute;
  top: -30%; left: -10%;
  width: min(70vw, 720px); aspect-ratio: 1;
  background: radial-gradient(circle, rgba(192, 107, 69, .24), transparent 66%);
  pointer-events: none;
}
.contact-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.contact-title {
  font-family: var(--display);
  font-size: clamp(2.6rem, 1.4rem + 4.4vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  margin-bottom: 1.6rem;
}
.contact-title em { color: var(--clay-soft); font-style: italic; }

.contact-lede { color: rgba(245, 242, 235, .68); max-width: 32rem; margin-bottom: 3rem; }

.contact-methods { display: grid; gap: 1.5rem; }
.contact-methods li {
  border-top: 1px solid rgba(245, 242, 235, .16);
  padding-top: 1.1rem;
}
.cm-label { display: block; color: var(--clay-soft); margin-bottom: .5rem; }
.cm-value {
  font-family: var(--display);
  font-size: clamp(1.2rem, 1rem + .7vw, 1.6rem);
  line-height: 1.35;
  color: var(--bone);
  word-break: break-word;
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
a.cm-value:hover { color: var(--clay-soft); border-bottom-color: currentColor; }
.cm-social { display: flex; gap: .6rem; align-items: baseline; }
.cm-social span { color: rgba(245, 242, 235, .35); }
.cm-social a { border-bottom: 1px solid transparent; transition: border-color .3s var(--ease), color .3s var(--ease); }
.cm-social a:hover { color: var(--clay-soft); border-bottom-color: currentColor; }

/* ---------- Form ---------- */
.form-card {
  background: rgba(245, 242, 235, .045);
  border: 1px solid rgba(245, 242, 235, .14);
  border-radius: 8px;
  padding: clamp(1.6rem, 3.5vw, 2.6rem);
  backdrop-filter: blur(6px);
}

.field { margin-bottom: 1.15rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.field label {
  display: block;
  font-size: .68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .16em;
  color: rgba(245, 242, 235, .62);
  margin-bottom: .55rem;
}
.field .opt { text-transform: none; letter-spacing: .02em; color: rgba(245, 242, 235, .35); }

.field input, .field textarea, .field select {
  width: 100%;
  font: inherit;
  font-size: .97rem;
  color: var(--bone);
  background: rgba(245, 242, 235, .05);
  border: 1px solid rgba(245, 242, 235, .18);
  border-radius: 4px;
  padding: .85rem 1rem;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.field textarea { resize: vertical; min-height: 6.5rem; }
.field input::placeholder, .field textarea::placeholder { color: rgba(245, 242, 235, .32); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--clay-soft);
  background: rgba(245, 242, 235, .09);
}
.field input:user-invalid, .field textarea:user-invalid { border-color: #D98263; }

.select-wrap { position: relative; }
.field select { appearance: none; padding-right: 2.6rem; cursor: pointer; }
.field select option { background: var(--ink); color: var(--bone); }
.select-chev {
  position: absolute; right: 1rem; top: 50%;
  transform: translateY(-50%);
  width: 17px; height: 17px;
  color: var(--clay-soft);
  pointer-events: none;
}

/* Honeypot — off-screen rather than display:none, which some bots detect. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  margin: 1.4rem 0 .3rem;
}
.consent input {
  appearance: none;
  flex: none;
  width: 18px; height: 18px;
  margin-top: .15rem;
  border: 1px solid rgba(245, 242, 235, .35);
  border-radius: 3px;
  background: rgba(245, 242, 235, .05);
  cursor: pointer;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.consent input:checked {
  border-color: var(--clay);
  background-color: var(--clay);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 3 6-6.8' fill='none' stroke='%23F5F2EB' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
}
.consent input:focus-visible { outline: 2px solid var(--clay-soft); outline-offset: 2px; }
.consent label {
  font-size: .82rem;
  line-height: 1.6;
  color: rgba(245, 242, 235, .62);
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  margin: 0;
}
.consent a { color: var(--clay-soft); border-bottom: 1px solid currentColor; }

.form-card .btn-solid { background: var(--clay-text); color: var(--bone); }
.form-card .btn-solid:hover { background: var(--clay-deep); }

.form-foot {
  font-size: .8rem;
  color: rgba(245, 242, 235, .48);
  line-height: 1.6;
  margin: 1.2rem 0 0;
}
.form-foot.sent { color: var(--clay-soft); }

/* ============================================================
   Legal pages
   ============================================================ */

.legal { padding: clamp(8rem, 14vw, 11rem) 0 clamp(4rem, 8vw, 6rem); }
.legal-wrap { max-width: 46rem; }

.legal-title {
  font-family: var(--display);
  font-size: clamp(2.6rem, 1.6rem + 4vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  margin-bottom: .8rem;
}
.legal-meta {
  color: var(--text-light);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  margin-bottom: 2.6rem;
}

.legal-summary {
  background: var(--bone-deep);
  border-left: 2px solid var(--clay);
  border-radius: 0 6px 6px 0;
  padding: 1.5rem 1.8rem;
  margin-bottom: 3rem;
}
.legal-summary p { margin: 0; font-size: 1.05rem; }

.legal h2 {
  font-family: var(--display);
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
  margin: 2.8rem 0 .9rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--bone-line);
}
.legal h3 {
  font-family: var(--display);
  font-size: clamp(1.2rem, 1.05rem + .5vw, 1.45rem);
  margin: 2rem 0 .7rem;
  color: var(--ink);
}
.legal p { color: var(--text-soft); }
.legal a { color: var(--clay); border-bottom: 1px solid currentColor; }

.legal-list { margin: 0 0 1.1em; display: grid; gap: .5rem; }
.legal-list li {
  color: var(--text-soft);
  padding-left: 1.4rem;
  position: relative;
}
.legal-list li::before {
  content: ""; position: absolute; left: 0; top: .68em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--sage);
}

/* Inline "to be confirmed" values — deliberately loud so a missing phone
   number or postcode cannot quietly go live. Remove the <span> entirely
   once the real value is in. */
.tbc {
  display: inline-block;
  background: #FBF0E8;
  border: 1px dashed var(--clay);
  border-radius: 3px;
  padding: .02em .5em;
  color: var(--clay-deep);
  font-family: var(--body);
  font-size: .8em;
  font-weight: 600;
  letter-spacing: .04em;
  font-style: normal;
  white-space: nowrap;
}
/* Legible against the dark contact band and footer. */
.contact .tbc,
.site-footer .tbc {
  background: rgba(232, 196, 174, .13);
  border-color: var(--clay-soft);
  color: var(--clay-soft);
}

/* Editorial placeholders the clinic must resolve before publishing.
   Deliberately loud so they cannot go live unnoticed. */
.todo {
  background: #FBF0E8;
  border: 1px dashed var(--clay);
  border-radius: 5px;
  padding: 1rem 1.2rem;
  font-size: .9rem;
  color: var(--clay-deep) !important;
}

.legal-back { margin-top: 3.5rem; }

/* Header on interior pages has no scroll-spy underline behaviour. */
.nav-plain a:not(.btn)::after { display: none; }

/* ============================================================
   Footer
   ============================================================ */

.site-footer {
  background: var(--ink);
  color: rgba(245, 242, 235, .6);
  border-top: 1px solid rgba(245, 242, 235, .12);
  padding: clamp(3rem, 6vw, 4.5rem) 0 2.5rem;
  font-size: .85rem;
}
.footer-top {
  display: flex; flex-wrap: wrap; gap: 2rem;
  align-items: center; justify-content: space-between;
  padding-bottom: 2.5rem;
}
.brand-footer { color: var(--bone); }
/* The monogram is gold artwork, so it needs no recolouring on dark. */
.brand-footer .brand-sub { color: rgba(245, 242, 235, .45); }

.footer-nav { display: flex; flex-wrap: wrap; gap: 1.6rem; }
.footer-nav a { transition: color .3s var(--ease); }
.footer-nav a:hover { color: var(--clay-soft); }

.footer-disclaimer {
  border-top: 1px solid rgba(245, 242, 235, .12);
  padding-top: 2rem;
  max-width: 62rem;
  font-size: .8rem;
  color: rgba(245, 242, 235, .42);
}
.footer-disclaimer a {
  color: var(--clay-soft);
  border-bottom: 1px solid currentColor;
}

.footer-bottom {
  display: flex; flex-wrap: wrap; gap: .5rem 2rem;
  justify-content: space-between;
  border-top: 1px solid rgba(245, 242, 235, .12);
  padding-top: 1.6rem;
  font-size: .78rem;
  color: rgba(245, 242, 235, .42);
}
.footer-bottom p { margin: 0; }
.footer-bottom a:hover { color: var(--clay-soft); }

/* ============================================================
   Motion
   ============================================================ */

.reveal-load {
  opacity: 0;
  transform: translateY(22px);
  animation: rise .95s var(--ease) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes rise {
  to { opacity: 1; transform: none; }
}

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .85s var(--ease), transform .85s var(--ease);
  transition-delay: var(--d, 0ms);
}
.reveal.in { opacity: 1; transform: none; }

/* Stagger delays live here rather than in `style` attributes, so the
   Content-Security-Policy can set style-src 'self' without 'unsafe-inline'. */
.hero-copy .eyebrow             { --d: 0ms; }
.hero-title .line:nth-child(1)  { --d: 80ms; }
.hero-title .line:nth-child(2)  { --d: 180ms; }
.hero-figure                    { --d: 250ms; }
.hero-lede                      { --d: 300ms; }
.hero-note                      { --d: 380ms; }
.hero-actions                   { --d: 460ms; }
.hero-trust                     { --d: 540ms; }

.pillar:nth-child(2)            { --d: 90ms; }
.pillar:nth-child(3)            { --d: 180ms; }

.step:nth-child(2)              { --d: 80ms; }
.step:nth-child(3)              { --d: 160ms; }
.step:nth-child(4)              { --d: 240ms; }

.facts .fact:nth-child(2)       { --d: 80ms; }

.contact-methods li:nth-child(2) { --d: 70ms; }
.contact-methods li:nth-child(3) { --d: 140ms; }
.contact-methods li:nth-child(4) { --d: 210ms; }

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 980px) {
  .hero-inner   { grid-template-columns: 1fr; }
  .hero-figure  { max-width: 26rem; margin-inline: auto; order: -1; }
  .figure-frame { aspect-ratio: 5 / 4; border-radius: 200px 200px 14px 14px; }
  .figure-plaque{ left: auto; right: -.5rem; bottom: -1.5rem; }
  .clinic-grid, .faq-grid, .contact-grid { grid-template-columns: 1fr; }
  .clinic-figure { aspect-ratio: 16 / 7; }
  .faq-head { position: static; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .nav {
    position: fixed; inset: 0 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bone);
    border-bottom: 1px solid var(--bone-line);
    padding: 6rem var(--gutter) 2rem;
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: transform .55s var(--ease), opacity .4s var(--ease), visibility .55s;
    box-shadow: 0 30px 60px -30px rgba(22, 33, 29, .35);
  }
  .nav.open { transform: translateY(0); opacity: 1; visibility: visible; }
  .nav a:not(.btn) {
    font-size: 1.4rem;
    font-family: var(--display);
    text-transform: none;
    letter-spacing: -.01em;
    font-weight: 400;
    padding: 1rem 0;
    border-bottom: 1px solid var(--bone-line);
  }
  .nav a:not(.btn)::after { display: none; }
  .nav .btn { margin-top: 1.6rem; align-self: flex-start; }
  /* Keep the wordmark and toggle above the open menu panel. */
  .brand { position: relative; z-index: 2; }
  .nav-toggle { display: block; z-index: 2; }
  .site-header { background: rgba(245, 242, 235, .84); backdrop-filter: blur(14px); }

  .treatment {
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: 1rem 1.2rem;
  }
  .treatment-side {
    grid-column: 2;
    gap: .3rem;
    text-align: left;
    padding-top: .4rem;
  }

  .field-row { grid-template-columns: 1fr; gap: 0; }
  .footer-top { flex-direction: column; align-items: flex-start; }
  .steps { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 420px) {
  .figure-plaque { right: auto; left: 0; }
  .hero-actions .btn { width: 100%; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal, .reveal-load { opacity: 1; transform: none; }
  .ticker-track { animation: none; }
}

/* ---------- Print ---------- */
@media print {
  .grain, .site-header, .ticker, .hero-figure, .clinic-figure, .form-card { display: none; }
  body { background: #fff; color: #000; }
  .approach, .contact, .site-footer { background: #fff; color: #000; }
  .reveal, .reveal-load { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------
   Treatment sub-areas — the specific things treated within each
   category (bunny lines, masseter, platysmal bands, and so on).
   ------------------------------------------------------------ */
.areas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 1rem 1.8rem;
  margin-top: 1.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--bone-line);
}
.area dt {
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: .22rem;
}
.area dd {
  margin: 0;
  font-size: .84rem;
  line-height: 1.58;
  color: var(--text-light);
}

/* ============================================================
   Thank-you page
   ============================================================ */

.thanks {
  padding: clamp(9rem, 16vw, 13rem) 0 clamp(5rem, 10vw, 8rem);
  min-height: 70vh;
}
.thanks-wrap { max-width: 40rem; }

.thanks-mark {
  display: block;
  width: 62px; height: 62px;
  color: var(--clay);
  margin-bottom: 2rem;
}
.thanks-mark svg { width: 100%; height: 100%; }
/* Draw the tick on arrival rather than just fading it in. */
.thanks-mark path {
  stroke-dasharray: 34;
  stroke-dashoffset: 34;
  animation: tick .7s var(--ease) .25s forwards;
}
@keyframes tick { to { stroke-dashoffset: 0; } }

.thanks-title {
  font-family: var(--display);
  font-size: clamp(2.6rem, 1.5rem + 4.4vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  margin-bottom: 1.4rem;
}

.thanks-lede {
  font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem);
  color: var(--text-soft);
  margin-bottom: 2.4rem;
}

.thanks-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-bottom: 3.5rem;
}

.thanks-note {
  border-top: 1px solid var(--bone-line);
  padding-top: 2rem;
}
.thanks-note p {
  font-size: .92rem;
  color: var(--text-soft);
}
.thanks-privacy { margin: 0; }
.thanks-privacy a {
  color: var(--clay);
  border-bottom: 1px solid currentColor;
}

@media (max-width: 420px) {
  .thanks-actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .thanks-mark path { stroke-dashoffset: 0; animation: none; }
}

/* Failure state on the thank-you page. The icon path itself is swapped in JS —
   the CSS `d` property only works in Chrome. */
.thanks-mark.is-error { color: #A85834; }
.thanks-mark.is-error path { animation: none; stroke-dashoffset: 0; }

/* ============================================================
   Google review stars + aggregate
   ============================================================ */

.quote-stars {
  display: block;
  margin-bottom: .7rem;
  font-size: .82rem;
  letter-spacing: .1em;
  color: var(--gold);
  line-height: 1;
}
.quote-stars .star-empty { opacity: .28; }

.rating-summary {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 1.1rem 0 0;
  font-size: .92rem;
  color: var(--text-soft);
}
.rating-summary .quote-stars { margin: 0; font-size: .95rem; }
.rating-summary strong { color: var(--ink); font-size: 1.05rem; }

/* ============================================================
   Sticky booking bar — mobile only
   Most visitors arrive on a phone, scroll a long page, and would
   otherwise have to scroll back up to act. This keeps calling and
   booking one thumb-reach away without covering the content.
   ============================================================ */

.action-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: none;
  gap: .55rem;
  padding: .6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
  background: rgba(245, 242, 235, .93);
  backdrop-filter: blur(14px) saturate(1.4);
  border-top: 1px solid var(--bone-line);
  transform: translateY(110%);
  transition: transform .45s var(--ease);
}
.action-bar.up { transform: translateY(0); }

.action-bar .btn {
  flex: 1;
  padding: .95rem 1rem;
  font-size: .64rem;
}

@media (max-width: 760px) {
  .action-bar { display: flex; }
  /* Stop the bar covering the end of the page. */
  .site-footer { padding-bottom: 6rem; }
}

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

/* ============================================================
   Results lightbox — tap a before/after to see it full size
   ============================================================ */

.result-card button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(22, 33, 29, .92);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s var(--ease), visibility .35s;
}
.lightbox.open { opacity: 1; visibility: visible; }

.lightbox img {
  max-width: min(100%, 900px);
  max-height: 84vh;
  width: auto;
  border-radius: 6px;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .8);
  transform: scale(.97);
  transition: transform .35s var(--ease);
}
.lightbox.open img { transform: scale(1); }

.lightbox-caption {
  margin-top: 1rem;
  color: rgba(245, 242, 235, .75);
  font-size: .85rem;
  text-align: center;
}

.lightbox-close {
  position: absolute;
  top: clamp(.8rem, 3vw, 1.6rem);
  right: clamp(.8rem, 3vw, 1.6rem);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(245, 242, 235, .12);
  color: var(--bone);
  display: grid; place-items: center;
  transition: background .3s var(--ease);
}
.lightbox-close:hover { background: rgba(245, 242, 235, .22); }
.lightbox-close svg { width: 20px; height: 20px; }

@media (prefers-reduced-motion: reduce) {
  .lightbox, .lightbox img { transition: none; }
}

.lightbox-figure { margin: 0; display: grid; justify-items: center; }

/* Two short labels side by side — keep them on one line. */
.action-bar .btn { white-space: nowrap; letter-spacing: .12em; }

/* ============================================================
   Gallery page
   ============================================================ */

.gallery-page { padding: clamp(7rem, 13vw, 10rem) 0 clamp(4rem, 8vw, 6rem); }

.gallery-head {
  max-width: 44rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.gallery-title {
  font-family: var(--display);
  font-size: clamp(2.8rem, 1.6rem + 5vw, 5rem);
  line-height: 1;
  letter-spacing: -.025em;
  margin-bottom: 1.6rem;
}

.gallery-lede {
  font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem);
  color: var(--text-soft);
  max-width: 36rem;
}

.gallery-note {
  color: var(--text-light);
  font-size: .95rem;
  max-width: 36rem;
  border-left: 2px solid var(--bone-line);
  padding-left: 1.1rem;
  margin-bottom: 0;
}

/* Two across on desktop so each pair is big enough to actually read,
   one across on a phone. */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(1.5rem, 3.5vw, 2.8rem);
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

@media (min-width: 1100px) {
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Closing call to action ---------- */
.gallery-cta {
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--bone-line);
  max-width: 40rem;
}
.gallery-cta p {
  color: var(--text-soft);
  margin: 1.4rem 0 2rem;
}
.gallery-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
}

@media (max-width: 420px) {
  .gallery-cta-actions .btn { width: 100%; }
}

.section-more { margin: 1.4rem 0 0; }

/* ============================================================
   Admin panel — deliberately plainer than the public site.
   It is a tool, not a shop window.
   ============================================================ */

.admin { background: var(--bone-deep); }

.admin-header {
  background: var(--ink);
  color: var(--bone);
  padding: .9rem 0;
  position: sticky; top: 0; z-index: 50;
}
.admin-header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
}
.admin-header .brand { color: var(--bone); }
.admin-header .brand-sub { color: var(--gold-light); }
.admin-header-actions { display: flex; gap: .5rem; }
.admin-header .btn-ghost {
  border-color: rgba(245, 242, 235, .3);
  color: var(--bone);
}
.admin-header .btn-ghost:hover { background: rgba(245, 242, 235, .1); }

.admin-main { padding: clamp(2rem, 5vw, 3.5rem) var(--gutter) 6rem; max-width: 62rem; }

.admin-title {
  font-family: var(--display);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  line-height: 1.05;
  margin-bottom: .7rem;
}
.admin-lede { color: var(--text-soft); margin-bottom: 2rem; max-width: 40rem; }

/* ---------- Sign in ---------- */
.admin-gate { max-width: 26rem; }
.admin-gate-form { display: grid; gap: .6rem; }
.admin-gate-form label,
.admin-field label {
  font-size: .68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--text-light);
}
.admin-gate-form input,
.admin-field input {
  font: inherit;
  padding: .8rem 1rem;
  border: 1px solid var(--bone-line);
  border-radius: 5px;
  background: var(--bone);
}
.admin-gate-form input:focus,
.admin-field input:focus { outline: none; border-color: var(--clay); }
.admin-gate-form .btn { margin-top: .4rem; justify-self: start; }

.admin-error {
  margin-top: 1rem;
  color: var(--clay-deep);
  background: #FBF0E8;
  border: 1px solid var(--clay);
  border-radius: 5px;
  padding: .8rem 1rem;
  font-size: .9rem;
}

/* ---------- Cards ---------- */
.admin-card {
  background: var(--bone);
  border: 1px solid var(--bone-line);
  border-radius: 8px;
  padding: clamp(1.2rem, 3vw, 2rem);
  margin-bottom: 1.5rem;
}
.admin-card h2 {
  font-family: var(--display);
  font-size: 1.6rem;
  margin-bottom: .5rem;
}
.admin-hint { color: var(--text-soft); font-size: .92rem; margin-bottom: 1.4rem; }
.admin-count { color: var(--clay); font-weight: 600; }
.admin-empty { color: var(--text-light); font-size: .9rem; font-style: italic; margin: 0; }

.admin-upload { display: grid; gap: .9rem; margin-bottom: 1.2rem; }
.admin-field { display: grid; gap: .35rem; }
.admin-field .opt { text-transform: none; letter-spacing: normal; }
.admin-upload .btn { justify-self: start; }

.admin-consent {
  background: #FBF0E8;
  border-left: 2px solid var(--clay);
  border-radius: 0 5px 5px 0;
  padding: .9rem 1.1rem;
  font-size: .86rem;
  line-height: 1.6;
  color: var(--clay-deep);
}
.admin-consent strong { display: block; margin-bottom: .2rem; }

.admin-status { font-size: .88rem; color: var(--text-soft); margin: .8rem 0 0; }
.admin-status.is-error { color: var(--clay-deep); }

/* ---------- Gallery items ---------- */
.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1rem;
}
.admin-item {
  border: 1px solid var(--bone-line);
  border-radius: 6px;
  overflow: hidden;
  background: var(--bone);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.admin-item.is-featured {
  border-color: var(--clay);
  box-shadow: 0 0 0 1px var(--clay);
}
.admin-item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--bone-deep);
}
.admin-item-body { padding: .7rem; display: grid; gap: .45rem; }
.admin-item-body input {
  font: inherit;
  font-size: .85rem;
  padding: .45rem .6rem;
  border: 1px solid var(--bone-line);
  border-radius: 4px;
  background: var(--bone);
  width: 100%;
}
.admin-item-treatment { font-weight: 600; }
.admin-item-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; margin-top: .2rem;
}
.admin-check {
  display: flex; align-items: center; gap: .4rem;
  font-size: .8rem; cursor: pointer;
}
.admin-delete {
  font-size: .78rem;
  color: var(--clay-deep);
  border-bottom: 1px solid transparent;
}
.admin-delete:hover { border-bottom-color: currentColor; }

/* ---------- Reviews ---------- */
.admin-reviews { display: grid; gap: .7rem; }
.admin-review {
  display: flex; gap: .8rem; align-items: flex-start;
  border: 1px solid var(--bone-line);
  border-radius: 6px;
  padding: .9rem 1rem;
  cursor: pointer;
  transition: border-color .3s var(--ease);
}
.admin-review.is-featured { border-color: var(--clay); box-shadow: 0 0 0 1px var(--clay); }
.admin-review input { margin-top: .25rem; flex: none; }
.admin-review-text { margin: 0 0 .3rem; font-size: .92rem; }
.admin-review-who { margin: 0; font-size: .78rem; color: var(--text-light); }

/* ---------- Save ---------- */
.admin-save {
  position: sticky; bottom: 0;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: var(--bone-deep);
  border-top: 1px solid var(--bone-line);
  padding: 1rem 0;
}
.admin-save .admin-status { margin: 0; }

/* ---------- About ---------- */
.about { padding: var(--sec-y) 0; border-top: 1px solid var(--bone-line); }

/* Two columns on a wide screen: the heading holds its own beside the prose
   rather than sitting on top of a very long measure. */
.about-inner {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (min-width: 900px) {
  .about-inner { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
  .about-head { position: sticky; top: 7rem; }
}

.about-head { position: relative; }

/* The monogram, very faint and very large, sitting behind the heading. This
   was the one section with no visual anchor of its own — every other block
   has numbers, cards, photographs or a dark ground to hold it. */
.about-head::before {
  content: "";
  position: absolute;
  left: -12%;
  top: -34%;
  width: 19rem;
  aspect-ratio: 1;
  background: url("../images/logo-mark.png") center / contain no-repeat;
  opacity: .13;
  pointer-events: none;
  z-index: 0;
}
.about-head > * { position: relative; z-index: 1; }

.about-head .section-title { margin-bottom: 0; }
.about-head .section-title em { color: var(--clay); font-style: italic; }

.about-body p {
  color: var(--text-soft);
  max-width: 46ch;
  margin-bottom: 1.15rem;
}
.about-body p:last-child { margin-bottom: 0; }

/* The closing promise carries the weight of the section — set it apart. */
.about-body p:last-child {
  color: var(--text);
  border-left: 2px solid var(--clay);
  padding-left: 1.15rem;
  margin-top: 1.9rem;
}

/* ---------- Gallery grouped by treatment category ---------- */
.gallery-group { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.gallery-group:last-of-type { margin-bottom: 0; }

.gallery-group-title {
  font-family: var(--display);
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);
  line-height: 1.1;
  margin-bottom: 1.4rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--bone-line);
}

/* Hiding a group must beat the grid/margin rules above. */
.gallery-group[hidden] { display: none !important; }

/* ---------- Filter dropdown above the gallery ---------- */
.gallery-filter {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--bone-line);
}

.gallery-filter-label {
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-light);
  flex: none;
}

.gallery-filter-wrap { flex: 0 1 22rem; }

.gallery-filter select {
  font: inherit;
  font-size: .95rem;
  width: 100%;
  appearance: none;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--bone-line);
  border-radius: 4px;
  padding: .7rem 2.6rem .7rem 1rem;
  cursor: pointer;
  transition: border-color .3s var(--ease);
}
.gallery-filter select:hover { border-color: var(--gold); }
.gallery-filter select:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 2px;
}
.gallery-filter .select-chev { color: var(--gold); }

@media (max-width: 480px) {
  .gallery-filter { flex-direction: column; align-items: stretch; gap: .55rem; }
  .gallery-filter-wrap { flex: 1 1 auto; }
}

/* ---------- Category dropdown in the admin ---------- */
.admin-field .select-wrap { position: relative; }
.admin-field select,
.admin-item-category {
  font: inherit;
  width: 100%;
  appearance: none;
  padding: .8rem 2.4rem .8rem 1rem;
  border: 1px solid var(--bone-line);
  border-radius: 5px;
  background: var(--bone);
  cursor: pointer;
}
.admin-field select:focus,
.admin-item-category:focus { outline: none; border-color: var(--clay); }
.admin-field .select-chev {
  position: absolute; right: 1rem; top: 50%;
  transform: translateY(-50%);
  width: 17px; height: 17px;
  color: var(--text-light);
  pointer-events: none;
}
.admin-item-category {
  font-size: .82rem;
  padding: .45rem .6rem;
  background-image: none;
}