/* ============================================================
   PortoClinic Aesthetics — v1 stylesheet
   Hand-coded. No framework, no build step.
   Design tokens are defined once here and used everywhere.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */

:root {
  /* Ink — navy, sampled from the mark */
  --ink:          #14274f;
  --ink-deep:     #0e1b38;
  --ink-soft:     #37425e;
  --slate:        #6a7085;
  --slate-light:  #8d92a3;

  /* Ground — warm paper, so the navy never reads corporate */
  --porcelain:    #fcfaf7;
  --bone:         #f3eee6;
  --linen:        #e7e0d4;
  --hairline:     #ded6c8;

  /* Accent — the bridge */
  --gold:         #c2a54a;
  --gold-deep:    #9c7f2c;
  --gold-pale:    #eadfc4;

  /* Type */
  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans:  "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Fluid type scale.
     --t-xs was 0.78rem (12.5px) and --t-sm was 0.9rem (14.4px). Both were too
     small on a phone, and --t-xs is used in 23 places — including the deposit
     amounts on /book/, which are the last thing that should be hard to read.
     Raised to 14px and 15.2px. Anything below ~14px on a handset is a strain
     for anyone over about forty, which is a good part of who books here. */
  --t-xs:   0.875rem;
  --t-sm:   0.95rem;
  --t-base: 1.0625rem;
  --t-md:   clamp(1.125rem, 0.35vw + 1.05rem, 1.28rem);
  --t-lg:   clamp(1.4rem,  0.8vw + 1.2rem,  1.75rem);
  --t-xl:   clamp(1.85rem, 1.6vw + 1.4rem, 2.6rem);
  --t-2xl:  clamp(2.3rem,  2.8vw + 1.5rem, 3.5rem);
  --t-3xl:  clamp(2.9rem,  5.2vw + 1.2rem, 5.4rem);

  /* Space */
  --gutter:    clamp(1.25rem, 5vw, 3rem);
  --section-y: clamp(4.25rem, 9vw, 8.5rem);
  --wrap:      74rem;
  --measure:   38rem;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- 2. RESET ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--porcelain);
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.72;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--ink);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 0.55em;
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

/* No underlines. They were removed on request — in lists and price tables the
   line is redundant, because everything in the column is obviously a link.

   The catch: links are the same colour as body text (--ink), so removing the
   underline everywhere would make links inside paragraphs completely invisible.
   And "you can tell by hovering" does not hold on a phone, where there is no
   hover — which is where most of these patients are.

   So prose links (below) get colour and weight instead of a line, and the
   underline comes back on hover and on keyboard focus. */
a {
  color: var(--ink);
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}
a:hover { color: var(--gold-deep); text-decoration: underline; }
a:focus-visible { text-decoration: underline; }

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

::selection { background: var(--gold-pale); color: var(--ink); }

/* ---------- 3. LAYOUT PRIMITIVES ---------- */

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

.section { padding-block: var(--section-y); }
.section--bone { background: var(--bone); }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--porcelain);
  padding: 0.75rem 1.25rem;
  z-index: 200;
}
.skip-link:focus { left: 0; }

.eyebrow {
  font-family: var(--sans);
  font-size: var(--t-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate);
  font-weight: 600;
  margin: 0 0 1.4rem;
}
.eyebrow--accent { color: var(--ink); }

.lede {
  font-size: var(--t-md);
  line-height: 1.62;
  color: var(--ink-soft);
  max-width: var(--measure);
}

.rule {
  height: 1px;
  background: var(--hairline);
  border: 0;
  margin: 0;
}

/* The arch — a quiet echo of the bridge in the mark.
   Used once or twice per page as a section divider. Never decorated further. */
.arch {
  --arch-w: clamp(11rem, 26vw, 17rem);
  display: block;
  width: var(--arch-w);
  aspect-ratio: 260 / 62;
  margin: clamp(3rem, 6vw, 4.5rem) auto 0;
  border: 0;
  opacity: 0.75;
  background: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 62' fill='none' stroke='%23c2a54a' stroke-width='1.2'%3E%3Cpath d='M2 12h256'/%3E%3Cpath d='M2 9h18M240 9h18' stroke-width='2.6'/%3E%3Cpath d='M34 60V12M226 60V12' stroke-width='1'/%3E%3Cpath d='M34 60C34 -6 226 -6 226 60'/%3E%3Cpath d='M46 60C46 6 214 6 214 60' stroke-width='0.8' opacity='0.6'/%3E%3C/svg%3E");
}
.arch--dark { opacity: 0.9; }

/* ---------- 4. BUTTONS ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.75rem;
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 999px;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
  cursor: pointer;
}

.btn--primary {
  background: var(--ink);
  color: var(--porcelain);
}
.btn--primary:hover { background: var(--gold-deep); color: var(--porcelain); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--hairline);
}
.btn--ghost:hover { border-color: var(--ink); background: transparent; color: var(--ink); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2.25rem;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 0.35rem;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.link-arrow::after { content: "\2192"; transition: transform 0.3s var(--ease); }
.link-arrow:hover { color: var(--ink); border-color: var(--gold); }
.link-arrow:hover::after { transform: translateX(4px); }

/* ---------- 5. HEADER ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(252, 250, 247, 0.9);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease);
}
.site-header.is-stuck { border-bottom-color: var(--hairline); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.75rem;
}

/* Logo lockup. The typeset wordmark below is the fallback;
   when the real mark is in place, .brand-logo carries it. */
.brand-logo { display: block; }
.brand-logo img {
  display: block;
  width: auto;
  height: clamp(2.1rem, 3.6vw, 2.7rem);
}
.site-footer .brand-logo img { height: 2.9rem; }
.cta-band .brand-logo img,
.brand-logo--reverse img { height: 3.2rem; }

.wordmark {
  display: inline-flex;
  flex-direction: column;
  text-decoration: none;
  line-height: 1;
}
.wordmark__name {
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.wordmark__sub {
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--slate);
  margin-top: 0.42rem;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: none;
  border: 0;
  padding: 0.5rem 0;
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
}
.nav-toggle__bars { display: block; width: 22px; height: 9px; position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: var(--ink);
  transition: transform 0.3s var(--ease);
}
.nav-toggle__bars::before { top: 0; }
.nav-toggle__bars::after { bottom: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-4px) rotate(-45deg); }

.site-nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--porcelain);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 1.25rem var(--gutter) 2rem;
}
.site-nav.is-open { display: block; }

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav li + li { border-top: 1px solid var(--linen); }
/* :not(.btn) matters. Without it this rule also hits the "Book a consultation"
   button in the mobile drawer — and because `.site-nav a` outranks
   `.btn--primary` on specificity, it repainted the label in --ink on an --ink
   background. A navy pill with no text on it, on the one control the whole
   site is trying to get people to press. */
.site-nav a:not(.btn) {
  display: block;
  padding: 0.85rem 0;
  text-decoration: none;
  color: var(--ink);
  font-size: var(--t-md);
  font-family: var(--serif);
}
/* Same exclusion, same reason — on tap this would have painted the label
   gold-deep on the gold-deep hover background. Invisible again. */
.site-nav a:not(.btn):hover { color: var(--gold-deep); }

/* Booking CTA inside the mobile drawer — the header button is desktop-only */
.site-nav .nav-cta {
  display: block;
  margin-top: 1.75rem;
}
.site-nav .nav-cta .btn { width: 100%; }

.header-cta { display: none; }

@media (min-width: 62rem) {
  .nav-toggle { display: none; }
  .site-nav {
    display: block;
    position: static;
    background: none;
    border: 0;
    padding: 0;
  }
  .site-nav ul { display: flex; gap: clamp(1.1rem, 2.2vw, 2.1rem); align-items: center; }
  .site-nav li + li { border-top: 0; }
  .site-nav a:not(.btn) {
    padding: 0;
    font-family: var(--sans);
    font-size: var(--t-sm);
    letter-spacing: 0.02em;
  }
  .header-cta { display: inline-flex; }
  .site-nav .nav-cta { display: none; }
  .btn--sm { padding: 0.7rem 1.35rem; font-size: var(--t-xs); }
}

/* ---------- 6. HERO ---------- */

.hero {
  position: relative;
  padding-block: clamp(4rem, 11vw, 8.5rem) clamp(3rem, 7vw, 5.5rem);
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  inset: auto -20% -55% 45%;
  height: 90%;
  background:
    radial-gradient(closest-side at 50% 50%, rgba(234, 223, 196, 0.75), rgba(234, 223, 196, 0) 72%);
  pointer-events: none;
  z-index: -1;
}

.hero h1 {
  font-size: var(--t-3xl);
  font-weight: 300;
  max-width: 15ch;
  letter-spacing: -0.028em;
  margin-bottom: 0.5em;
}
.hero h1 em {
  font-style: italic;
  color: var(--gold-deep);
}

.hero__lede { max-width: 34rem; }

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  margin-top: clamp(2.75rem, 6vw, 4.25rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--hairline);
  font-size: var(--t-sm);
  color: var(--slate);
}
.hero__meta span { display: inline-flex; align-items: center; gap: 0.55rem; }
.hero__meta span::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
}

/* ---------- 7. PILLARS ---------- */

.pillars {
  display: grid;
  gap: clamp(2.25rem, 5vw, 3.5rem);
}
@media (min-width: 48rem) {
  .pillars { grid-template-columns: repeat(3, 1fr); }
}

.pillar__num {
  font-family: var(--serif);
  font-size: var(--t-sm);
  color: var(--ink);
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: 1.1rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--hairline);
}
.pillar h3 { font-size: var(--t-lg); margin-bottom: 0.65em; }
.pillar p { font-size: var(--t-sm); line-height: 1.75; color: var(--slate); }

/* ---------- 8. SPLIT (text + placeholder) ---------- */

.split {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: center;
}
@media (min-width: 56rem) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--reverse .split__media { order: -1; }
}
.split__body h2 { font-size: var(--t-xl); }
.split__body .lede { margin-bottom: 1.4em; }

/* ---------- 9. PHOTO PLACEHOLDERS ----------
   Every future photograph has a designed slot.
   Pure CSS gradients — no image requests, no AI faces.
   Replace .ph with <img> at the asset pass; keep the ratio.       */

.ph {
  position: relative;
  border-radius: 2px;
  background-color: var(--bone);
  background-image:
    radial-gradient(120% 90% at 18% 12%, rgba(233, 214, 196, 0.95), rgba(233, 214, 196, 0) 60%),
    radial-gradient(90% 80% at 88% 82%, rgba(168, 92, 60, 0.16), rgba(168, 92, 60, 0) 65%),
    linear-gradient(148deg, rgba(255, 255, 255, 0.7), rgba(230, 222, 211, 0.55));
  overflow: hidden;
  isolation: isolate;
}
.ph::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  opacity: 0.35;
  pointer-events: none;
}
/* A .ph is a photo frame. When it is empty it shows the tinted placeholder
   defined above; when it holds an <img> the image fills the frame and the
   placeholder never shows through. Same class either way, so slots can be
   filled one at a time without touching the layout. */
.ph img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ph--portrait { aspect-ratio: 4 / 5; }
.ph--landscape { aspect-ratio: 4 / 3; }
.ph--wide { aspect-ratio: 16 / 9; }
.ph--square { aspect-ratio: 1 / 1; }

.ph__label {
  position: absolute;
  left: 1rem;
  bottom: 0.9rem;
  z-index: 2;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--slate-light);
}

/* ---------- 10. TREATMENTS ---------- */

.treatments-grid {
  display: grid;
  gap: 1px;
  background: var(--hairline);
  border-block: 1px solid var(--hairline);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 44rem) { .treatments-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .treatments-grid { grid-template-columns: repeat(3, 1fr); } }

.tcard {
  background: var(--porcelain);
  padding: clamp(1.85rem, 3.5vw, 2.6rem);
  display: flex;
  flex-direction: column;
  transition: background-color 0.4s var(--ease);
}
.tcard:hover { background: var(--bone); }
.tcard h3 {
  font-size: var(--t-lg);
  margin-bottom: 0.5em;
}
.tcard h3 a { color: inherit; text-decoration: none; }
.tcard h3 a::after { content: ""; position: absolute; inset: 0; }
.tcard { position: relative; }
.tcard p { font-size: var(--t-sm); color: var(--slate); line-height: 1.7; }
.tcard__areas {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  color: var(--slate-light);
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.7rem;
}
.tcard__areas li { position: relative; z-index: 2; }
.tcard__areas a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--linen); padding-bottom: 2px; }
.tcard__areas a:hover { color: var(--ink); border-color: var(--gold); }
.tcard__foot {
  margin-top: auto;
  padding-top: 1.6rem;
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
}

/* ---------- 11. PROCESS ---------- */

.steps {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  counter-reset: step;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
@media (min-width: 52rem) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { padding-top: 1.5rem; border-top: 1px solid var(--hairline); }
.step::before {
  counter-increment: step;
  content: "0" counter(step);
  font-family: var(--serif);
  font-size: var(--t-sm);
  color: var(--ink);
  display: block;
  margin-bottom: 0.9rem;
}
.step h3 { font-size: var(--t-md); margin-bottom: 0.5em; }
.step p { font-size: var(--t-sm); color: var(--slate); }

/* ---------- 12. TEAM ---------- */

.team {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 48rem) { .team { grid-template-columns: repeat(2, 1fr); } }

.person__media { margin-bottom: 1.75rem; }
.person h3 { font-size: var(--t-lg); margin-bottom: 0.25em; }
.person__role {
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 1.25rem;
}
.person p { font-size: var(--t-sm); color: var(--slate); }
.person__creds {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 1.4rem 0 0;
  border-top: 1px solid var(--hairline);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  color: var(--slate-light);
}
.person__creds li + li { margin-top: 0.4rem; }

/* ---------- 13. REVIEWS ---------- */

.rating {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  flex-wrap: wrap;
}
.rating__score {
  font-family: var(--serif);
  font-size: var(--t-2xl);
  color: var(--ink);
  line-height: 1;
}
.rating__meta { font-size: var(--t-sm); color: var(--slate); }

.quotes {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
@media (min-width: 48rem) { .quotes { grid-template-columns: repeat(2, 1fr); } }

.quote { border-top: 1px solid var(--hairline); padding-top: 1.75rem; margin: 0; }
.quote blockquote {
  margin: 0 0 1.25rem;
  font-family: var(--serif);
  font-size: var(--t-md);
  line-height: 1.55;
  color: var(--ink);
}
.quote figcaption { font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate-light); }

/* ---------- 14. VISIT / DETAILS ---------- */

.details {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  margin-top: clamp(2.25rem, 4vw, 3rem);
}
@media (min-width: 48rem) { .details { grid-template-columns: repeat(3, 1fr); } }
.detail { border-top: 1px solid var(--hairline); padding-top: 1.4rem; }
.detail h3 {
  font-family: var(--sans);
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate);
  font-weight: 600;
  margin-bottom: 0.9rem;
}
.detail p { font-size: var(--t-sm); color: var(--ink-soft); }
.detail a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--hairline); }
.detail a:hover { border-color: var(--gold); color: var(--ink); }
/* Promoted from --t-xs and lightened less. This class carries the deposit
   amounts and the opening-hours caveats — information people act on, not
   footnotes. It should not be the faintest, smallest text on the page. */
.detail__note { color: var(--slate); font-size: var(--t-sm); margin-top: 0.7rem; }

/* ---------- 14b. LONG-FORM PAGE CONTENT ---------- */

/* A hero already carries generous bottom padding. Without this, the hero's
   padding and the next section's padding stack into a hole in the page. */
.hero + .section { padding-top: clamp(1rem, 2.5vw, 2rem); }

.section h2 {
  font-size: var(--t-lg);
  margin-top: 2.5em;
  max-width: 24ch;
}
.section h2:first-child { margin-top: 0; }
.section p,
.section ul { max-width: var(--measure); }
.section .lede { margin-bottom: 1.6em; }

/* Links inside running text. With the underline gone these need some other
   way of announcing themselves, or they are just body text that happens to be
   tappable. Colour plus weight does it without drawing a line. Links sitting
   in tables, cards, lists and the nav are left alone — there the surrounding
   context already makes it obvious. */
.section p a,
.section li a,
.faq div a {
  color: var(--gold-deep);
  font-weight: 600;
}
.section p a:hover,
.section li a:hover,
.faq div a:hover { color: var(--ink); }

.risk-list {
  list-style: none;
  margin: 0 0 1.15em;
  padding: 0;
  max-width: var(--measure);
}
.risk-list li {
  position: relative;
  padding: 0 0 1rem 1.4rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--hairline);
}
.risk-list li:last-child { border-bottom: 0; }
.risk-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
}

.table-wrap {
  overflow-x: auto;
  margin: 2rem 0;
  -webkit-overflow-scrolling: touch;
}
/* min-width used to be 34rem (544px) on every table. On a phone that pushed the
   Price column off the right-hand edge and made you scroll sideways to find it
   — on the pricing page, where the price is the entire point.
   A two-column table fits a phone perfectly well, so the floor only applies to
   tables that actually have a third column (the red-flag symptom table). */
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
}
table.data:has(th:nth-child(3)) { min-width: 34rem; }
table.data th,
table.data td {
  text-align: left;
  padding: 0.9rem 1rem 0.9rem 0;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}
table.data th {
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
  font-weight: 600;
  border-bottom-color: var(--ink);
}
table.data td:first-child { color: var(--ink); }

/* Two-column price tables on a phone: put the price hard right, keep the
   treatment name on the left, and let long names wrap rather than widen the
   table. Nothing scrolls sideways. */
@media (max-width: 40rem) {
  table.data:not(:has(th:nth-child(3))) th:last-child,
  table.data:not(:has(th:nth-child(3))) td:last-child {
    text-align: right;
    padding-right: 0;
    white-space: nowrap;
  }
  table.data:not(:has(th:nth-child(3))) td:first-child { padding-right: 0.75rem; }
  table.data th, table.data td { padding-top: 0.8rem; padding-bottom: 0.8rem; }
}

.site-nav a[aria-current="page"] { color: var(--gold-deep); }
@media (min-width: 62rem) {
  .site-nav a[aria-current="page"] {
    border-bottom: 1px solid var(--gold);
    padding-bottom: 2px;
  }
}

/* ---------- 14c. CONTACT FORM ---------- */

.form { max-width: 38rem; margin-top: 2rem; }
.form__row { margin-bottom: 1.5rem; }
.form__row--split { display: grid; gap: 1.5rem; }
@media (min-width: 40rem) { .form__row--split { grid-template-columns: 1fr 1fr; } }

.form label {
  display: block;
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--slate);
  margin-bottom: 0.6rem;
}
.form label span { color: var(--gold-deep); }

.form input[type="text"],
.form input[type="tel"],
.form input[type="email"],
.form textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--porcelain);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  padding: 0.85rem 1rem;
  transition: border-color 0.25s var(--ease);
}
.form textarea { resize: vertical; min-height: 8rem; }
.form input:focus, .form textarea:focus { border-color: var(--ink); outline-offset: 1px; }

.form__hint {
  font-size: var(--t-xs);
  color: var(--slate);
  margin: 0.7rem 0 0;
  line-height: 1.6;
}

.form__row--check {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.form__row--check input { margin-top: 0.35rem; width: 1rem; height: 1rem; accent-color: var(--ink); }
.form__row--check label {
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--t-sm);
  font-weight: 400;
  color: var(--ink-soft);
  margin: 0;
}

/* Honeypot: present for bots, invisible and unreachable for people */
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__status {
  margin-top: 1.25rem;
  font-size: var(--t-sm);
  min-height: 1.5em;
}
.form__status[data-state="error"] { color: var(--gold-deep); }
.form__status[data-state="ok"] { color: var(--ink); font-weight: 600; }

/* ---------- 14d. BOOKING ---------- */

.booking { max-width: 52rem; }

.booking__panel[hidden] { display: none; }

.booking__notice {
  border-left: 3px solid var(--gold);
  background: var(--bone);
  padding: 1rem 1.25rem;
  margin: 0 0 2rem;
  font-size: var(--t-sm);
  color: var(--ink);
}
.booking__notice[data-kind="warn"] { border-left-color: var(--gold-deep); }

.booking__muted { color: var(--slate); font-size: var(--t-sm); }

.booking__step { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.booking__step > h2 {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  font-size: var(--t-lg);
  margin-bottom: 1.5rem;
}

.booking__num {
  flex: none;
  width: 1.9rem;
  height: 1.9rem;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--gold-deep);
  align-self: center;
}

/* --- service picker --- */

.booking__services {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) {
  .booking__services { grid-template-columns: 1fr 1fr; }
}

.svc {
  text-align: left;
  cursor: pointer;
  background: var(--porcelain);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  padding: 1rem 1.15rem;
  display: block;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.svc:hover { border-color: var(--slate-light); }
.svc.is-on {
  border-color: var(--ink);
  background: var(--bone);
}
.svc__name {
  display: block;
  font-family: var(--serif);
  font-size: var(--t-md);
  color: var(--ink);
  line-height: 1.25;
}
.svc__meta {
  display: block;
  margin-top: 0.4rem;
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate);
}

/* --- week navigation --- */

.booking__weeknav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-block: 1px solid var(--hairline);
  padding-block: 0.85rem;
  margin-bottom: 1.75rem;
}
.booking__range {
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
  text-align: center;
}
.btn--sm { padding: 0.55rem 1.1rem; font-size: var(--t-xs); }
.btn[disabled] { opacity: 0.35; cursor: not-allowed; }

/* --- day + slot grid --- */

.booking__days[aria-busy="true"] { opacity: 0.5; }

.day { margin-bottom: 1.75rem; }
.day__label {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-family: var(--sans);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.75rem;
}
.day__date { color: var(--slate); font-weight: 400; }

.day__slots { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.slot {
  cursor: pointer;
  min-width: 4.75rem;
  background: var(--porcelain);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  padding: 0.6rem 0.85rem;
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease);
}
.slot:hover { border-color: var(--ink); }
.slot.is-on {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--porcelain);
}

/* --- chosen-slot summary --- */

.booking__summary {
  background: var(--bone);
  border-left: 3px solid var(--gold);
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
}
.booking__summary p { margin: 0 0 0.35rem; }
.booking__summary p:last-child { margin-bottom: 0; }
.booking__when {
  font-family: var(--serif);
  font-size: var(--t-md);
  color: var(--ink);
}
.booking__what { font-size: var(--t-sm); color: var(--ink-soft); }
.booking__dep { font-size: var(--t-xs); color: var(--slate); }

.booking__summary--big {
  max-width: 38rem;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.booking__summary--big .booking__when { font-size: var(--t-lg); }
.booking__ref {
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
  margin-top: 0.85rem !important;
}
.booking__ref strong {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2em;
}

.booking .form { margin-top: 0; }

/* ---------- 15. FAQ ---------- */

.faq { margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--hairline); }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.4rem 2.5rem 1.4rem 0;
  font-family: var(--serif);
  font-size: var(--t-md);
  color: var(--ink);
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold-deep);
  font-family: var(--sans);
  font-size: 1.2rem;
}
.faq details[open] summary::after { content: "\2013"; }
.faq details > div { padding: 0 0 1.6rem; max-width: 46rem; font-size: var(--t-sm); color: var(--slate); }

/* ---------- 16. CTA BAND ---------- */

.cta-band {
  background: var(--ink-deep);
  color: var(--linen);
  text-align: center;
}
.cta-band h2 { color: var(--porcelain); font-size: var(--t-2xl); max-width: 18ch; margin-inline: auto; }
.cta-band p { color: rgba(231, 224, 212, 0.76); max-width: 36rem; margin-inline: auto; font-size: var(--t-sm); }
.cta-band .eyebrow { color: var(--gold); }
.cta-band .btn-row { justify-content: center; }
.cta-band .btn--primary { background: var(--porcelain); color: var(--ink); }
.cta-band .btn--primary:hover { background: var(--gold); color: var(--ink-deep); }
.cta-band .btn--ghost { color: var(--linen); border-color: rgba(194, 165, 74, 0.45); }
.cta-band .btn--ghost:hover { color: var(--gold); border-color: var(--gold); }

/* ---------- 17. FOOTER ---------- */

.site-footer {
  background: var(--bone);
  padding-block: clamp(3.5rem, 7vw, 5.5rem) 2.5rem;
  font-size: var(--t-sm);
  color: var(--slate);
}
.footer-grid {
  display: grid;
  gap: clamp(2.25rem, 5vw, 3rem);
}
@media (min-width: 48rem) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }

.site-footer h3 {
  font-family: var(--sans);
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 1.1rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li + li { margin-top: 0.55rem; }
.site-footer a { color: var(--slate); text-decoration: none; }
.site-footer a:hover { color: var(--ink); }

.footer-legal {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--hairline);
  font-size: var(--t-xs);
  line-height: 1.75;
  color: var(--slate-light);
  display: grid;
  gap: 1rem;
}
@media (min-width: 48rem) {
  .footer-legal { grid-template-columns: 1fr auto; align-items: end; }
}
.footer-legal p { margin: 0; max-width: 60ch; }

/* ---------- 18. UTILITIES ---------- */

.u-center { text-align: center; }
.u-measure { max-width: var(--measure); }
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 19. MOTION ---------- */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- 20. PRINT ---------- */

@media print {
  .site-header, .cta-band, .btn-row { display: none; }
  body { background: #fff; color: #000; }
}

/* Build stamp. Small, quiet, and the fastest way to answer
   "is the version I just deployed actually the one that's live?" */
.build {
  font-size: 0.7em;
  letter-spacing: 0.08em;
  color: var(--slate-light);
  margin-left: 0.5em;
}