/* ==========================================================
   Pearl Med Spa — "The split stage"
   Half the screen is the studio at 45 Rideau Street, Unit 401,
   held still; the other half is a calm column you read.
   Type: Imbue (display) + Albert Sans (text)
   Colour: the brand's pearl, graphite and deep teal
   ========================================================== */

:root {
  /* Colour roles */
  --paper: #F2EFEA;        /* lightest tone of the studio's slatted walls */
  --paper-2: #E7E2DA;      /* one tone step down, for a second surface */
  --ink: #1D2225;
  --ink-2: #4A5054;        /* secondary notes only */
  --accent: #1F6E78;       /* turquoise for links and small marks, dark enough to read on paper */
  --accent-strong: #155760;
  --button: #6FC3C8;       /* light turquoise of the logo's wave, with dark text */
  --button-hover: #58B5BB;
  --field: #A6DADC;        /* a whole chapter in light turquoise */
  --on-field: #1D2225;
  --on-field-2: #3A4448;
  --night: #E6E8E9;        /* the footer, a pearl grey-white */

  /* Type */
  --display: "Imbue", "Didot", "Bodoni 72", serif;
  --text: "Albert Sans", "Helvetica Neue", Arial, sans-serif;
  --brand: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif; /* the name "Pearl Med Spa" */
  --step-small: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2.25rem, 1.4rem + 3.2vw, 4.25rem);

  /* Space */
  --margin: clamp(1.25rem, 4.2vw, 4.5rem);
  --section: clamp(5.5rem, 10vw, 11rem);
  --measure: 44ch;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 220ms;
  --t-reveal: 800ms;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 24px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: var(--step-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--accent); color: var(--paper); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.on-field :focus-visible, .site-foot :focus-visible { outline-color: var(--on-field); }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 10px 16px; text-decoration: none;
}
.skip:focus { top: 12px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Type ---------- */
.display, h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  font-optical-sizing: auto;
  letter-spacing: -0.01em;
  line-height: 0.98;
  text-wrap: balance;
}
h2 { font-size: var(--step-head); max-width: 16ch; }
h3 { font-size: var(--step-lead); line-height: 1.15; letter-spacing: 0; }
.lead { font-size: var(--step-lead); line-height: 1.4; max-width: 30ch; text-wrap: pretty; }
p, li, dd { max-width: var(--measure); text-wrap: pretty; }
.note { font-size: var(--step-small); color: var(--ink-2); max-width: 52ch; }
.on-field .note { color: var(--on-field-2); }

.prose > * + * { margin-top: 1em; }

.link {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.22em;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  transition: text-decoration-color var(--t-hover) ease, color var(--t-hover) ease;
}
.on-field .link { color: var(--on-field); }
@media (hover: hover) and (pointer: fine) {
  .link:hover { text-decoration-color: currentColor; }
}

/* ---------- Buttons: square, flat, one fill ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 52px;
  padding: 0.85em 1.6em;
  background: var(--button);
  color: var(--ink);
  border: 0;
  border-radius: 0;
  font-family: var(--text);
  font-size: var(--step-body);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease;
}
.button:active { transform: scale(0.97); }
.button--light { background: #fff; color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .button:hover { background: var(--button-hover); }
  .button--light:hover { background: var(--paper); }
}
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }

/* ==========================================================
   The stage: a fixed photograph beside a scrolling column
   ========================================================== */
.stage {
  display: grid;
  grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  align-items: start;
}
.stage--flip { grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); }
.stage--flip .stage__photo { order: 2; }

.stage__photo {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  background: var(--paper-2);
}
.stage__photo > img,
.stage__photo > video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 900ms var(--ease-soft);
}
.stage__photo > .is-on { opacity: 1; }
.stage__photo > :first-child { opacity: 1; }
.js .stage__photo > :first-child:not(.is-on) { opacity: 0; }
.stage__photo figcaption {
  position: absolute; left: 20px; bottom: 18px; right: 20px; z-index: 2;
  font-size: var(--step-small); color: #fff;
  text-shadow: 0 1px 8px rgba(0,0,0,0.55);
  max-width: 40ch;
}

.stage__read {
  padding: 0 var(--margin) var(--section);
  min-width: 0;
}
.stage__read > section { padding-top: var(--section); }
.stage__read > section:first-of-type { padding-top: clamp(4rem, 9vh, 7rem); }
.stage__read h2 { margin-bottom: 0.55em; }

/* Phone copy of a section's photo, made by site.js */
.phone-photo { display: none; }

/* ---------- Header (sits at the top of the reading column) ---------- */
.site-head {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding-top: 22px;
  position: relative; z-index: 20;
}
.wordmark {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none;
  font-family: var(--display); font-size: 1.5rem; line-height: 1; letter-spacing: 0;
  white-space: nowrap;
}
.wordmark img { width: 40px; height: auto; }
.nav { display: flex; align-items: center; gap: clamp(16px, 2vw, 30px); }
.nav > a:not(.button), .nav__trigger {
  font-size: var(--step-small); font-weight: 500;
  text-decoration: none;
  background: none; border: 0; padding: 12px 0; cursor: pointer;
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.35em;
  transition: text-decoration-color var(--t-hover) ease;
}
.nav > a:not(.button)[aria-current="page"] { text-decoration-color: var(--accent); }
@media (hover: hover) and (pointer: fine) {
  .nav > a:not(.button):hover, .nav__trigger:hover { text-decoration-color: currentColor; }
}
.nav .button { min-height: 44px; padding: 0.6em 1.2em; font-size: var(--step-small); }
.nav__trigger { display: inline-flex; align-items: center; gap: 6px; }
.nav__trigger svg { width: 10px; transition: transform var(--t-ui) var(--ease-out); }
.nav__trigger[aria-expanded="true"] svg { transform: rotate(180deg); }

.has-menu { position: relative; }
.menu {
  position: absolute; top: calc(100% + 6px); left: -24px;
  width: 300px;
  background: var(--paper);
  padding: 18px 24px 22px;
  box-shadow: 0 18px 50px rgba(29, 34, 37, 0.16);  /* it floats */
  transform-origin: top left;
  opacity: 0; visibility: hidden;
  transform: translateY(-4px) scale(0.98);
  transition: opacity 140ms ease, transform 140ms ease, visibility 0s linear 140ms;
}
.menu.is-open {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity var(--t-ui) var(--ease-out), transform var(--t-ui) var(--ease-out), visibility 0s;
}
.menu p { font-size: var(--step-small); color: var(--ink-2); margin: 10px 0 4px; }
.menu p:first-child { margin-top: 0; }
.menu a {
  display: block; padding: 7px 0; text-decoration: none;
  font-family: var(--display); font-size: 1.375rem; line-height: 1.1;
  transition: color var(--t-hover) ease;
}
@media (hover: hover) and (pointer: fine) { .menu a:hover { color: var(--accent); } }

.menu-toggle { display: none; }

/* Phone sheet */
.sheet {
  position: fixed; inset: 0; z-index: 90;
  background: var(--paper);
  padding: 22px var(--margin) 32px;
  display: flex; flex-direction: column;
  overflow-y: auto;
  opacity: 0; visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms;
}
.sheet.is-open {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out), visibility 0s;
}
.sheet__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; }
.sheet__close { background: none; border: 0; padding: 12px 0; font-size: var(--step-body); font-weight: 500; cursor: pointer; }
.sheet nav a {
  display: block; text-decoration: none; padding: 6px 0;
  font-family: var(--display); font-size: 2rem; line-height: 1.05;
}
.sheet nav p { font-size: var(--step-small); color: var(--ink-2); margin: 22px 0 4px; }
.sheet .button { margin-top: 32px; align-self: flex-start; }

/* ==========================================================
   Home: hero
   ========================================================== */
.hero-name {
  margin-top: clamp(3rem, 12vh, 9rem);
}
.hero-name h1 { line-height: 0.82; }
.hero-name .big {
  display: block;
  font-size: clamp(6.5rem, 25vw, 24rem);
  text-transform: uppercase;
  letter-spacing: -0.015em;
  margin-left: -0.04em;
}
.hero-name .small {
  display: block;
  font-size: var(--step-head);
  line-height: 1;
  margin-top: 0.12em;
}
.hero-name .lead { margin-top: 1.4rem; max-width: 34ch; }
.hero-name .actions { margin-top: 2rem; }

/* ==========================================================
   The live thing: the concern picker
   ========================================================== */
.picker__choices { display: flex; flex-wrap: wrap; gap: 10px; margin: 1.6rem 0 2rem; }
.choice {
  min-height: 46px;
  padding: 0.55em 1.05em;
  background: var(--paper-2);
  border: 0; border-radius: 999px;
  font-size: var(--step-small); font-weight: 500;
  cursor: pointer;
  transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.choice:active { transform: scale(0.96); }
.choice[aria-pressed="true"] { background: var(--button); color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .choice:not([aria-pressed="true"]):hover { background: #DDD7CD; }
}

.answer {
  background: var(--paper-2);
  padding: clamp(24px, 3vw, 40px);
}
.answer + .answer { margin-top: 12px; }
.js .answer { display: none; }
.js .answer.is-on { display: block; animation: answer-in 420ms var(--ease-out); }
@keyframes answer-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.answer h3 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); line-height: 1; }
.answer .for { font-size: var(--step-small); color: var(--ink-2); margin-bottom: 0.6rem; }
.answer p { margin-top: 0.9rem; }
.answer .facts { display: flex; flex-wrap: wrap; gap: 6px 28px; margin-top: 1.1rem; font-weight: 500; }
.answer .facts s { color: var(--ink-2); font-weight: 400; }
.answer .actions { margin-top: 1.6rem; }

/* ==========================================================
   Full-width chapters that break the split
   ========================================================== */
.chapter { padding: var(--section) var(--margin); }
.on-field { background: var(--field); color: var(--on-field); }
.on-paper-2 { background: var(--paper-2); }

.chapter__head {
  display: grid;
  grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  gap: 0 var(--margin);
  align-items: end;
  margin-bottom: clamp(3rem, 6vw, 6rem);
}
.chapter__head h2 { margin: 0; }
.chapter__head p { padding-left: var(--margin); }

/* Offers: price lines with a picture that answers the pointer */
.offers {
  display: grid;
  grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  gap: 0 var(--margin);
  align-items: start;
}
.offers__frame {
  position: sticky; top: 8vh;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--accent-strong);
}
.offers__frame img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  transition: opacity 500ms var(--ease-soft);
}
.offers__frame img.is-on { opacity: 1; }
.offers__list { padding-left: var(--margin); }
.offer {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 24px;
  align-items: baseline;
  padding: clamp(22px, 2.6vw, 36px) 0;
  text-decoration: none;
  transition: opacity var(--t-hover) ease;
}
.offer + .offer { margin-top: 6px; }
.offer h3 { font-size: var(--step-head); line-height: 0.95; }
.offer .price { font-family: var(--display); font-size: var(--step-head); line-height: 0.95; white-space: nowrap; }
.offer .was { grid-column: 2; justify-self: end; color: var(--on-field-2); font-size: var(--step-small); }
.offer .what { grid-column: 1; grid-row: 2; color: var(--on-field-2); max-width: 38ch; }
.offer .more {
  grid-column: 1 / -1; margin-top: 10px;
  font-size: var(--step-small); font-weight: 500;
  text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 0.07em;
}
.offer img.phone-only { display: none; }
@media (hover: hover) and (pointer: fine) {
  .offers__list:hover .offer:not(:hover) { opacity: 0.45; }
}
.offers__list .note { margin-top: 2.4rem; }

/* ---------- Ordered steps (no numerals: order is position) ---------- */
.steps { margin-top: 2rem; }
.steps li { padding: 1.35rem 0; max-width: none; }
.steps li + li { margin-top: 2px; }
.steps h3 { margin-bottom: 0.35rem; }
.steps p { color: var(--ink); }
.steps--bands li { background: var(--paper-2); padding: 1.4rem 1.6rem; }

/* ---------- Big list of treatments, photo answers the pointer ---------- */
.treat-list { margin-top: 2rem; }
.treat-list + .group { margin-top: 3rem; }
.group { font-size: var(--step-small); color: var(--ink-2); margin-top: 2.5rem; }
.treat-list a {
  display: block;
  padding: 0.9rem 0;
  text-decoration: none;
  transition: opacity var(--t-hover) ease;
}
.treat-list .name {
  display: block;
  font-family: var(--display);
  font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.75rem);
  line-height: 0.98;
}
.treat-list .what { display: block; color: var(--ink-2); margin-top: 0.35rem; max-width: 44ch; }
.treat-list .arrow { display: inline-block; transition: transform var(--t-ui) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .treat-list:hover a:not(:hover) { opacity: 0.4; }
  .treat-list a:hover .arrow { transform: translateX(6px); }
}

/* ---------- Quotes ---------- */
.quotes { margin-top: 1.5rem; display: grid; }
.quote { grid-area: 1 / 1; }
.quote blockquote p {
  font-family: var(--display);
  font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.25rem);
  line-height: 1.3;
  max-width: 24ch;
}
.quote figcaption { margin-top: 1rem; font-size: var(--step-small); color: var(--ink-2); }
.js .quotes .quote {
  opacity: 0; visibility: hidden; transform: translateY(8px); filter: blur(3px);
  transition: opacity 450ms ease, transform 600ms var(--ease-out), filter 450ms ease, visibility 0s linear 450ms;
}
.js .quotes .quote.is-on {
  opacity: 1; visibility: visible; transform: none; filter: none;
  transition: opacity 600ms ease 140ms, transform 700ms var(--ease-out) 140ms, filter 600ms ease 140ms, visibility 0s;
}
.quotes__nav { display: none; gap: 4px; margin-top: 1.4rem; }
.js .quotes__nav { display: flex; }
.quotes__nav button {
  width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center;
}
.quotes__nav button::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: #C9C3B8;
  transition: background-color var(--t-hover) ease, transform var(--t-ui) var(--ease-out);
}
.quotes__nav button[aria-current="true"]::before { background: var(--accent); transform: scale(1.25); }
.quote-row { display: grid; gap: 2rem; margin-top: 2rem; }
.quote-row blockquote p { font-family: var(--display); font-size: var(--step-lead); line-height: 1.35; max-width: 32ch; }
.quote-row figcaption { margin-top: 0.6rem; font-size: var(--step-small); color: var(--ink-2); }

/* ---------- Visit chapter ---------- */
.visit {
  display: grid;
  grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
  gap: var(--margin);
  align-items: stretch;
}
.visit h2 { font-size: clamp(3rem, 1.5rem + 5.4vw, 7.5rem); max-width: 11ch; line-height: 0.92; margin-bottom: 0.4em; }
.visit__facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem var(--margin);
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
}
.visit__facts dt { font-size: var(--step-small); color: var(--ink-2); margin-bottom: 0.3rem; }
.on-field .visit__facts dt { color: var(--on-field-2); }
.visit__facts dd { margin: 0; }
.visit__facts a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .visit__facts a:hover { text-decoration: underline; text-underline-offset: 0.2em; } }
.visit__photo { position: relative; overflow: hidden; min-height: 520px; }
.visit__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Footer: the name returns ---------- */
.site-foot {
  background: var(--night); color: var(--on-field);
  padding: clamp(4rem, 8vw, 7rem) var(--margin) 28px;
}
.site-foot__cols {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem var(--margin);
  font-size: var(--step-small);
}
.site-foot__cols p { color: #535B5F; margin-bottom: 0.5rem; }
.site-foot__cols li { padding: 3px 0; }
.site-foot__cols a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .site-foot__cols a:hover { text-decoration: underline; text-underline-offset: 0.2em; } }
.site-foot__name {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(4.5rem, 15.4vw, 22rem);
  line-height: 0.8; letter-spacing: -0.01em;
  margin: clamp(3.5rem, 8vw, 7rem) 0 1.5rem -0.03em;
  white-space: nowrap;
}
.site-foot__legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 32px;
  font-size: var(--step-small); color: #535B5F;
}
.site-foot__legal p { max-width: 80ch; }

/* ==========================================================
   Inner pages
   ========================================================== */
.page-title { margin-top: clamp(3rem, 12vh, 8rem); }
.page-title .back { font-size: var(--step-small); font-weight: 500; text-decoration: none; display: inline-block; padding: 10px 0; margin-bottom: 1.2rem; }
.page-title .back span { display: inline-block; transition: transform var(--t-ui) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .page-title .back:hover span { transform: translateX(-4px); } }
.page-title h1 { font-size: clamp(3.25rem, 1.6rem + 5.6vw, 7.25rem); line-height: 0.92; max-width: 12ch; }
.page-title .lead { margin-top: 1.4rem; }
.page-title .actions { margin-top: 2rem; }

.price-tag {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px;
  margin-top: 2rem; padding: 1.2rem 1.4rem;
  background: var(--field); color: var(--on-field);
  max-width: 30rem;
}
.price-tag strong { font-family: var(--display); font-weight: 400; font-size: 2.75rem; line-height: 1; }
.price-tag s { color: var(--on-field-2); }
.price-tag span { color: var(--on-field-2); font-size: var(--step-small); flex-basis: 100%; }

/* Two-column lists (concerns, areas) */
.pairs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 2.5rem; margin-top: 2rem; }
.pairs h3 { margin-bottom: 0.4rem; }
.pairs p { font-size: var(--step-body); }

/* Care: before/after, full-width tone step */
.care { display: grid; grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); gap: var(--margin); }
.care__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem var(--margin); }
.care h3 { font-size: clamp(1.75rem, 1.3rem + 1.2vw, 2.5rem); margin-bottom: 1rem; }
.care li { padding: 0.55rem 0 0.55rem 1.3rem; position: relative; }
.care li::before {
  content: ""; position: absolute; left: 0; top: 1.15em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}

/* FAQ */
.faq { margin-top: 1.5rem; }
.faq details { background: var(--paper-2); interpolate-size: allow-keywords; }
.faq details + details { margin-top: 6px; }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 1.1rem 1.3rem;
  font-weight: 500;
  transition: color var(--t-hover) ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none;
  font-size: 1.6rem; line-height: 1; font-weight: 400;
  color: var(--accent);
  transition: transform var(--t-ui) var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(45deg); }
@media (hover: hover) and (pointer: fine) { .faq summary:hover { color: var(--accent); } }
.faq details::details-content {
  block-size: 0; overflow: hidden;
  transition: block-size 260ms var(--ease-out), content-visibility 260ms allow-discrete;
}
.faq details[open]::details-content { block-size: auto; }
.faq details p { padding: 0 1.3rem 1.3rem; max-width: 56ch; }

/* Inline media in the reading column */
.inline-media { margin-top: 2.2rem; background: var(--paper-2); }
.inline-media video, .inline-media img { width: 100%; height: auto; }
.inline-media figcaption { font-size: var(--step-small); color: var(--ink-2); padding: 0.8rem 0 0; background: var(--paper); }

/* Closing call on inner pages */
.closing {
  display: grid; grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
  gap: var(--margin); align-items: end;
}
.closing h2 { font-size: clamp(2.75rem, 1.5rem + 4.4vw, 6rem); max-width: 13ch; line-height: 0.95; margin: 0; }
.closing .lead { max-width: 30ch; }
.closing .actions { margin-top: 1.6rem; }

/* Stats on About */
.figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin-top: 2.5rem; }
.figures div { background: var(--paper-2); padding: 1.4rem; }
.figures strong { display: block; font-family: var(--display); font-weight: 400; font-size: clamp(2.5rem, 1.8rem + 2vw, 3.5rem); line-height: 1; }
.figures span { display: block; margin-top: 0.5rem; font-size: var(--step-small); }

/* Booking form */
.form { display: grid; gap: 1.2rem; margin-top: 2rem; max-width: 40rem; }
.form .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.form label { display: block; font-size: var(--step-small); font-weight: 500; margin-bottom: 0.4rem; }
.form input, .form select, .form textarea {
  width: 100%; min-height: 52px;
  padding: 0.75rem 0.9rem;
  background: var(--paper);
  border: 1px solid #B9B2A6;
  border-radius: 0;
  transition: border-color var(--t-hover) ease;
}
.form textarea { min-height: 120px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--accent); }
.form .consent { display: flex; gap: 12px; align-items: flex-start; font-size: var(--step-small); }
.form .consent input { width: 22px; min-height: 22px; height: 22px; margin-top: 2px; flex: none; accent-color: var(--accent); }
.form .consent label { font-weight: 400; margin: 0; }
.form .button { justify-self: start; }
.form-status { font-size: var(--step-small); min-height: 1.5em; }

.contact-lines { margin-top: 1.6rem; display: grid; gap: 0.4rem; }
.contact-lines a { text-decoration: none; font-weight: 500; }

/* ==========================================================
   Motion layer
   ========================================================== */
.lines .line { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.lines [data-line] { display: block; }

@media (prefers-reduced-motion: no-preference) {
  /* Signature: the name rises out of its own baseline */
  .js .lines [data-line] {
    transform: translateY(105%);
    animation: line-up 1000ms var(--ease-out) forwards;
    animation-delay: calc(var(--i, 0) * 120ms + 150ms);
  }
  .js [data-rise] {
    opacity: 0; transform: translateY(18px);
    animation: rise var(--t-reveal) var(--ease-out) forwards;
    animation-delay: calc(var(--i, 0) * 90ms + 420ms);
  }
  /* The first photograph opens like a shutter, then drifts */
  .js .stage--hero .stage__photo {
    clip-path: inset(0 0 100% 0);
    animation: shutter 1200ms var(--ease-in-out) 100ms forwards;
  }
  .stage--hero .stage__photo > :first-child { animation: drift 24s var(--ease-soft) both; }

  /* Section parts arrive in reading order */
  .js [data-reveal] > * {
    opacity: 0; transform: translateY(22px);
    transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out);
  }
  .js [data-reveal].is-in > * { opacity: 1; transform: none; }
  .js [data-reveal].is-in > :nth-child(2) { transition-delay: 70ms; }
  .js [data-reveal].is-in > :nth-child(3) { transition-delay: 140ms; }
  .js [data-reveal].is-in > :nth-child(4) { transition-delay: 210ms; }
  .js [data-reveal].is-in > :nth-child(5) { transition-delay: 280ms; }
  .js [data-reveal].is-in > :nth-child(n+6) { transition-delay: 340ms; }

  /* Lists arrive row by row */
  .js [data-rows] > * {
    opacity: 0; transform: translateY(16px);
    transition: opacity 600ms var(--ease-out), transform 800ms var(--ease-out);
    transition-delay: calc(var(--r, 0) * 70ms);
  }
  .js [data-rows].is-in > * { opacity: 1; transform: none; }

  /* Pictures open from a mask */
  .js [data-shutter] { clip-path: inset(0 0 100% 0); transition: clip-path 1100ms var(--ease-in-out); }
  .js [data-shutter].is-in { clip-path: inset(0); }
}
@keyframes line-up { to { transform: none; } }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes shutter { to { clip-path: inset(0); } }
@keyframes drift { from { opacity: 0.85; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .stage__photo > img, .stage__photo > video, .offers__frame img { transition-duration: 300ms; transform: none !important; }
}

/* ==========================================================
   Tablet and phone: a second composition
   ========================================================== */
@media (max-width: 1100px) {
  .nav > a.optional { display: none; }
}

@media (max-width: 860px) {
  :root { --section: clamp(4.5rem, 16vw, 6.5rem); }

  .stage, .stage--flip { grid-template-columns: 1fr; }
  .stage--flip .stage__photo { order: 0; }
  .stage__photo { position: relative; height: 50svh; min-height: 320px; }
  .stage:not(.stage--hero) .stage__photo { height: 52svh; }
  .stage__photo > :not(:first-child) { display: none; }
  .stage__photo > :first-child, .js .stage__photo > :first-child:not(.is-on) { opacity: 1; }
  .phone-photo { display: block; margin: 0 calc(var(--margin) * -1) 2rem; aspect-ratio: 4 / 5; overflow: hidden; }
  .phone-photo img, .phone-photo video { width: 100%; height: 100%; object-fit: cover; }

  /* On the phone the header sits above the photograph */
  .stage--hero { display: flex; flex-direction: column; align-items: stretch; }
  .stage--hero .stage__read { display: contents; }
  .stage--hero .site-head { order: -1; padding: 14px var(--margin); background: var(--paper); }
  .stage--hero .stage__read > section { padding-inline: var(--margin); }
  .stage--hero .stage__read > section:last-child { padding-bottom: var(--section); }

  .nav > a:not(.button), .nav .has-menu { display: none; }
  .menu-toggle {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px;
    background: none; border: 0; font-weight: 500; font-size: var(--step-body); cursor: pointer;
  }
  .nav .button { min-height: 44px; }

  .hero-name { margin-top: 2.2rem; }
  .hero-name .big { font-size: 31vw; }
  .page-title { margin-top: 2.2rem; }

  .chapter__head, .offers, .visit, .care, .closing { grid-template-columns: 1fr; }
  .chapter__head p, .offers__list { padding-left: 0; }
  .chapter__head p { margin-top: 1rem; }
  .offers__frame { display: none; }
  .offer { grid-template-columns: 1fr auto; padding: 1.4rem 0; }
  .offer img.phone-only { display: block; grid-column: 1 / -1; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; margin-bottom: 1rem; }
  .offer + .offer { margin-top: 1.5rem; }

  .visit__photo { min-height: 0; aspect-ratio: 4 / 5; margin-inline: calc(var(--margin) * -1); }
  .care__cols, .pairs, .form .row { grid-template-columns: 1fr; }
  .figures { grid-template-columns: 1fr; }
  .site-foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-foot__name { font-size: 17.4vw; }
}

@media (max-width: 420px) {
  .wordmark span { font-size: 1.25rem; }
  .wordmark img { width: 34px; }
  .nav { gap: 14px; }
  .nav .button { padding: 0.5em 0.9em; }
}

/* ---------- Additions for inner pages ---------- */
.pairs--wide { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem var(--margin); margin-top: 0; }
.pairs--wide h3 { font-size: clamp(1.75rem, 1.3rem + 1.2vw, 2.5rem); }
.benefits { display: grid; gap: 1.6rem; margin-top: 2rem; }
.benefits h3 { margin-bottom: 0.3rem; }
.chapter--split { display: grid; grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); gap: var(--margin); align-items: start; }
.chapter--split .prose { padding-left: var(--margin); }
.diagram { background: #FAF8F5; margin-top: 2rem; }
@media (max-width: 1100px) { .pairs--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .pairs--wide, .chapter--split { grid-template-columns: 1fr; }
  .chapter--split .prose { padding-left: 0; margin-top: 1rem; }
}

/* ==========================================================
   The name "Pearl Med Spa": a clean grotesk in the logo's
   brushed silver, for the header wordmark and the home hero
   ========================================================== */
:root {
  --silver-ink: #4A5155;   /* solid fallback, 7:1 on paper */
  --silver-sheen: linear-gradient(100deg, #3E4549 0%, #6E767B 38%, #8B9398 50%, #5C6368 64%, #3A4145 100%);
  --aqua: #1F6E78;         /* the logo's wave, deepened so text stays legible */
}
.wordmark span,
.hero-name h1 [data-line] {
  font-family: var(--brand);
  color: var(--silver-ink);
}
.wordmark span { font-weight: 500; font-size: 1.3rem; letter-spacing: 0.02em; }
.hero-name .big {
  font-size: clamp(5rem, 16vw, 22rem); /* the grotesk runs wider than Imbue */
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 0.86;
}
.hero-name .small { font-weight: 400; letter-spacing: -0.01em; font-size: clamp(1.75rem, 1.1rem + 2.4vw, 3.25rem); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .wordmark span,
  .hero-name h1 [data-line] {
    background: var(--silver-sheen);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
}
@media (max-width: 860px) { .hero-name .big { font-size: 29vw; } }
@media (max-width: 420px) { .wordmark span { font-size: 1.15rem; } }

/* ==========================================================
   New-client prices on pearl and silver instead of teal
   ========================================================== */
.on-pearl {
  background: linear-gradient(165deg, #F4F5F5 0%, #E3E7E9 45%, #D3D9DC 100%);
  color: var(--ink);
}
.on-pearl .offers__frame { background: #C9D0D4; }
.on-pearl .offer .price { color: var(--aqua); }
.on-pearl .offer .was,
.on-pearl .offer .what,
.on-pearl .note { color: #3F4549; }
.on-pearl .offer .more { color: var(--aqua); }
.on-pearl .offer + .offer { border-top: 1px solid rgba(29, 34, 37, 0.14); margin-top: 0; }
@media (max-width: 860px) {
  /* Phone: picture on top, then name and price, then the details */
  .offer img.phone-only { grid-row: 1; }
  .offer h3 { grid-column: 1; grid-row: 2; }
  .offer .price { grid-column: 2; grid-row: 2; }
  .offer .what { grid-row: 3; }
  .offer .was { grid-row: 3; align-self: start; }
  .offer .more { grid-row: 4; }
}

/* A video in the stage, shown whole rather than cropped, on a plain
   pearl background */
.stage__photo--film { background: var(--paper-2); }
.stage__photo--film > video { object-fit: contain; z-index: 1; }
@media (max-width: 860px) {
  .stage__photo--film { height: auto; min-height: 0; aspect-ratio: 16 / 9; }
  .stage:not(.stage--hero) .stage__photo--film { height: auto; }
}

/* Slideshow: a few pictures that take turns, each shown whole on its own peach ground */
.slides {
  position: relative; margin-top: 2.2rem;
  aspect-ratio: 2 / 3; max-height: 88vh;
  background: #F6DCCD; cursor: pointer; overflow: hidden;
}
.slides img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; padding: clamp(14px, 2.4vw, 32px) clamp(14px, 2.4vw, 32px) 52px;
  opacity: 0; transition: opacity 900ms var(--ease-soft);
}
.slides img:first-child, .js .slides img.is-shown { opacity: 1; }
.js .slides img:first-child:not(.is-shown) { opacity: 0; }
.slides__nav {
  position: absolute; left: 0; right: 0; bottom: 12px; z-index: 2;
  display: flex; justify-content: center; gap: 6px;
}
.slides__nav button {
  width: 32px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center;
}
.slides__nav button::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: rgba(29, 34, 37, 0.25);
  transition: background-color var(--t-hover) ease, transform var(--t-hover) ease;
}
.slides__nav button[aria-current="true"]::before { background: var(--accent); transform: scale(1.2); }
@media (max-width: 860px) { .slides { margin-inline: calc(var(--margin) * -1); max-height: none; } }

/* Concern pages: a photo above each solution */
.pairs--wide .pair-photo {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
  margin-bottom: 1.25rem;
}

/* Concerns menu: face concerns and body concerns side by side */
.menu--concerns { left: auto; right: -24px; width: 580px; column-count: 2; column-gap: 40px; transform-origin: top right; }
.menu--concerns p:nth-of-type(2) { break-before: column; margin-top: 0; }
.menu--concerns p { break-after: avoid; }
.menu--concerns a { break-inside: avoid; }

/* Pause buttons for things that move on their own */
.pause {
  width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.85); color: var(--ink);
}
.pause::before { /* two bars */
  content: ""; width: 10px; height: 12px;
  border-left: 3px solid currentColor; border-right: 3px solid currentColor;
}
.pause[aria-pressed="true"]::before { /* a triangle */
  width: 0; height: 0; margin-left: 3px;
  border-style: solid; border-width: 7px 0 7px 11px;
  border-color: transparent transparent transparent currentColor;
}
.pause:hover { background: #fff; }
.stage__photo > .pause, .phone-photo > .pause, video ~ .pause {
  position: absolute; right: 14px; bottom: 14px; z-index: 3;
}
.stage__photo:not(.is-film) > .pause { display: none; }
.phone-photo { position: relative; }
.quotes__nav .pause, .slides__nav .pause { margin-left: 6px; background: none; width: 44px; height: 44px; }
.slides__nav .pause { width: 32px; height: 32px; }

/* Privacy and accessibility pages */
.legal ul, .plain-list { list-style: disc; padding-left: 1.2em; }
.legal li + li, .plain-list li + li { margin-top: 0.4em; }
.plain-list { margin-top: 1rem; }
.legal h3 { margin-top: 2rem; }
.legal h3:first-child { margin-top: 0; }
.quotes__nav .pause::before, .slides__nav .pause::before { width: 10px; height: 12px; border-radius: 0; background: none; transform: none; }
.quotes__nav .pause[aria-pressed="true"]::before, .slides__nav .pause[aria-pressed="true"]::before { width: 0; height: 0; }

/* ==========================================================
   New-client offers, a card over the top of the home photo
   ========================================================== */
.promo { margin-top: 2.4rem; display: grid; gap: 5px; max-width: 22rem; padding: 10px; background: #fff; box-shadow: 0 10px 34px rgba(29, 34, 37, 0.16); }
.promo__title { font-family: var(--text); line-height: 1.3; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); font-weight: 400; margin-bottom: 4px; }
.promo__item {
  display: grid; grid-template-columns: 46px 1fr; gap: 10px; align-items: center;
  padding: 5px; background: var(--paper); color: var(--ink); text-decoration: none;
}
.promo__item img { width: 46px; height: 46px; object-fit: cover; }
.promo__item strong { display: block; font-weight: 400; font-size: 0.9rem; }
.promo__item s { display: block; margin-top: 1px; font-size: 0.78rem; color: var(--ink-2); }
.promo__actions { display: flex; gap: 5px; margin-top: 4px; }
.promo__actions .button { flex: 1; text-align: center; padding: 0.55rem 0.8rem; min-height: 0; font-size: 0.9rem; }
.promo__close { border: 1px solid #c9c4bc; background: #fff; color: var(--ink); padding: 0 0.9rem; font: inherit; font-size: 0.9rem; cursor: pointer; }
.promo[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) {
  .promo__item:hover strong { color: var(--accent); }
  .promo__close:hover { background: var(--paper); }
}
@media (min-width: 861px) {
  .stage--hero { position: relative; }
  .promo { position: absolute; z-index: 5; top: 24px; left: 24px; width: min(19rem, calc(45% - 48px)); margin: 0; }
}