/* ==========================================================================
   VIP — shared design system
   Two brands, one skeleton. Everything that differs is a custom property,
   so the clinic and the salon read as siblings without looking identical.
   Palette is drawn from the real shopfront: black fascia, gold lettering,
   marble floor, gold crown.
   ========================================================================== */

/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: inherit; }
ul, ol { list-style: none; padding: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ------------------------------------------------------------- tokens */
:root {
  --gold:        #C59D5F;
  --gold-lift:   #E0BE86;
  --gold-deep:   #9E7A42;

  --ink:         #0C0C0E;
  --ink-soft:    #16161A;
  --ink-line:    #24242A;

  --paper:       #FBF9F6;
  --paper-warm:  #F4EFE8;
  --paper-line:  #E4DCD1;

  --text:        #1A1A1E;
  --text-muted:  #6E6960;
  --text-invert: #F3EFE9;
  --text-invert-muted: #A29B90;

  --accent:      #1D4E48;   /* the teal velvet chair in reception */

  --shell:       min(1240px, 100% - 3rem);
  --shell-narrow:min(760px, 100% - 3rem);
  /* Header height drives the logo size and the mobile nav's drop position —
     keep them tied together so changing one never desynchronises the other. */
  --header-h:    8.4rem;
  --logo-h:      calc(var(--header-h) - 1rem);
  --radius:      2px;
  --radius-lg:   4px;

  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --step--1: clamp(.78rem, .76rem + .1vw, .84rem);
  --step-0:  clamp(1rem, .97rem + .15vw, 1.06rem);
  --step-1:  clamp(1.2rem, 1.12rem + .4vw, 1.45rem);
  --step-2:  clamp(1.55rem, 1.35rem + .95vw, 2.15rem);
  --step-3:  clamp(2rem, 1.6rem + 1.9vw, 3.2rem);
  --step-4:  clamp(2.5rem, 1.8rem + 3.4vw, 4.6rem);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* Tanning runs warmer, tighter and louder — it sells on price and convenience,
   not on restraint. */
[data-theme='tanning'] {
  --ink:        #100E0C;
  --ink-soft:   #1A1613;
  --ink-line:   #2C2520;
  --paper:      #FBF7F1;
  --paper-warm: #F6EDE1;
  --paper-line: #E8DBC9;
  --accent:     #E2683C;
  --glow-a:     #FF8A4C;
  --glow-b:     #E8A33D;
}

/* --------------------------------------------------------------- base */
body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--text);
  background: var(--paper);
}

/* text-wrap keeps a single word off the last line. `balance` evens the lines of
   a heading; `pretty` only pulls a word down to avoid an orphan, which is what
   body copy wants — balancing a long paragraph would ragged it unnecessarily.
   Browsers that do not know the values ignore them, so this is additive. */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 300; line-height: 1.1; letter-spacing: -.01em; text-wrap: balance; }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
[data-theme='tanning'] h1,
[data-theme='tanning'] h2,
[data-theme='tanning'] h3 { font-weight: 500; letter-spacing: -.02em; }

p { max-width: 68ch; }
/* The reset zeroes every margin, so stacked paragraphs outside .prose would
   otherwise run together. */
p + p { margin-top: 1rem; }
strong { font-weight: 600; }

.shell { width: var(--shell); margin-inline: auto; }
.shell-narrow { width: var(--shell-narrow); margin-inline: auto; }

section { padding-block: clamp(3.5rem, 7vw, 7rem); }
.section-tight { padding-block: clamp(2.5rem, 4vw, 4rem); }

/* --------------------------------------------------------- typography bits */
.eyebrow {
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-bottom: 1.1rem;
}
.eyebrow::before {
  content: '';
  width: 2.2rem; height: 1px;
  background: var(--gold);
  flex: none;
}
.eyebrow-center { justify-content: center; }
.eyebrow-center::after {
  content: ''; width: 2.2rem; height: 1px; background: var(--gold); flex: none;
}

/* balance, not pretty: pretty only guarantees two words on the last line, which
   still left "is no." stranded. A lede is short enough to even out properly.
   Browsers cap balancing at a handful of lines, so long ledes are untouched. */
.lede { font-size: var(--step-1); line-height: 1.5; color: var(--text-muted); font-weight: 300; text-wrap: balance; }
p, li, blockquote, figcaption { text-wrap: pretty; }
.muted { color: var(--text-muted); }
.center { text-align: center; }
.center p, .center .lede { margin-inline: auto; }

.rule { height: 1px; background: var(--paper-line); border: 0; margin-block: 2.5rem; }
.rule-gold { height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); border: 0; }

/* ------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .95rem 2rem;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: background-color .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease), transform .3s var(--ease);
}
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.btn-gold { background: var(--gold); color: #17130C; border-color: var(--gold); }
.btn-gold:hover { background: var(--gold-lift); border-color: var(--gold-lift); }

.btn-outline { border-color: currentColor; color: var(--text); }
.btn-outline:hover { background: var(--text); color: var(--paper); }

.btn-ghost-light { border-color: rgba(243,239,233,.4); color: var(--text-invert); }
.btn-ghost-light:hover { background: var(--text-invert); color: var(--ink); border-color: var(--text-invert); }

.btn-lg { padding: 1.15rem 2.6rem; }
.btn-sm { padding: .6rem 1.2rem; letter-spacing: .1em; }

[data-theme='tanning'] .btn { border-radius: 999px; font-weight: 600; }
[data-theme='tanning'] .btn-glow {
  background: linear-gradient(100deg, var(--glow-a), var(--glow-b));
  color: #17130C; border: 0;
}
[data-theme='tanning'] .btn-glow:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* -------------------------------------------------------------- header */
.topbar {
  background: var(--ink);
  color: var(--text-invert-muted);
  font-size: var(--step--1);
  letter-spacing: .05em;
}
.topbar .shell {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 2.6rem; flex-wrap: wrap;
}
.topbar a { text-decoration: none; }
.topbar a:hover { color: var(--gold-lift); }
.topbar-stars { color: var(--gold); letter-spacing: .1em; }

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--paper-line);
}
.site-header .shell {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; min-height: var(--header-h);
}
.brandmark { display: flex; align-items: center; text-decoration: none; flex: none; }
/* The logo is the wordmark — no adjacent text, so it carries the header alone
   and is sized to fill most of it. Bleeds slightly past the bar for presence. */
.brandmark img { height: var(--logo-h); width: auto; }

.nav { display: flex; align-items: center; gap: 2rem; }
.nav a {
  text-decoration: none; font-size: var(--step--1); letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-muted); position: relative; padding-block: .4rem;
  transition: color .25s var(--ease);
}
.nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav a:hover, .nav a[aria-current='page'] { color: var(--text); }
.nav a:hover::after, .nav a[aria-current='page']::after { transform: scaleX(1); }

.header-cta { display: flex; align-items: center; gap: .8rem; }
.acct-link { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .6rem; color: var(--text); text-decoration: none; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; transition: color .25s var(--ease); }
.acct-link svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: var(--gold-deep); stroke-width: 1.5; }
.acct-link:hover { color: var(--gold-deep); }
@media (max-width: 80rem) { .acct-link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }

.nav-toggle { display: none; width: 2.6rem; height: 2.6rem; align-items: center; justify-content: center; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ''; display: block; width: 1.4rem; height: 1px; background: var(--text);
  transition: transform .3s var(--ease), opacity .2s;
}
.nav-toggle span::before { transform: translateY(-6px); }
.nav-toggle span::after { transform: translateY(5px); }
.nav-open .nav-toggle span { background: transparent; }
.nav-open .nav-toggle span::before { transform: rotate(45deg); }
.nav-open .nav-toggle span::after { transform: rotate(-45deg); }

@media (max-width: 940px) {
  :root { --header-h: 6.2rem; }
  .nav-toggle { display: flex; }
  /* The closed panel used to be hidden by translateY(-120%) alone, which only
     works while the panel is more than five times the header height. It never
     was: at six nav items the last 90-odd pixels of it — Journal and Contact —
     sat above the header, over the topbar, looking like two stray links at the
     top of every page. Visibility is what hides it now; the transform is only
     the animation. */
  .nav {
    position: fixed; inset: var(--header-h) 0 auto; z-index: 55;
    flex-direction: column; align-items: stretch;
    gap: 0; background: var(--paper); border-bottom: 1px solid var(--paper-line);
    padding: 1rem 1.5rem 2rem; overflow-y: auto;
    max-height: calc(100dvh - var(--header-h));
    transform: translateY(-100%);
    visibility: hidden; pointer-events: none;
    transition: transform .4s var(--ease), visibility 0s linear .4s;
  }
  .nav-open .nav {
    transform: translateY(0); visibility: visible; pointer-events: auto;
    transition: transform .4s var(--ease);
  }
  .nav a { padding-block: .95rem; border-bottom: 1px solid var(--paper-line); font-size: var(--step-0); }
  .header-cta .btn { display: none; }
}

/* The treatment page hero. The home page opens on a statement and earns display
   size for it; a treatment page opens on information — what it is, what it
   costs, how long it takes — and at the full display scale the device name alone
   pushed the price and the buttons off the first screen. */
.treatment-hero h1 { font-size: var(--step-3); }
.treatment-hero .lede { font-size: var(--step-0); line-height: 1.65; max-width: 34rem; }
.treatment-hero .split-media img { max-height: 27rem; }
@media (min-width: 900px) {
  /* Not a half each: the text column has to hold the two hero buttons side by
     side, and at an even split they wrapped by four pixels.

     `.split.treatment-hero`, not `.treatment-hero` — the `.split` rule that
     sets the even columns lives further down this file and would otherwise win
     on source order at equal specificity. */
  .split.treatment-hero { grid-template-columns: 1fr .72fr; }
}

/* ---------------------------------------------------------------- hero */
.hero { position: relative; background: var(--ink); color: var(--text-invert); overflow: hidden; }
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; opacity: .62; }
.hero-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(12,12,14,.92) 0%, rgba(12,12,14,.64) 46%, rgba(12,12,14,.28) 100%);
}
/* Tanning's hero is the lamp shot, and its whole character is the electric blue.
   Let more of the image through and weight the scrim harder to the left, so the
   headline keeps its contrast while the lamps still glow on the right. */
[data-theme='tanning'] .hero-media img { opacity: .68; }
[data-theme='tanning'] .hero-media::after {
  background: linear-gradient(100deg, rgba(16,14,12,.93) 0%, rgba(16,14,12,.74) 38%, rgba(16,14,12,.30) 100%);
}
.hero-inner {
  position: relative; z-index: 1;
  padding-block: clamp(5rem, 13vw, 10.5rem);
  max-width: 46rem;
}
.hero h1 { color: var(--text-invert); margin-bottom: 1.4rem; }
.hero h1 em { font-style: italic; color: var(--gold); }
.hero .lede { color: var(--text-invert-muted); margin-bottom: 2.4rem; max-width: 34rem; }
.hero .eyebrow { color: var(--gold); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; }
.hero-trust {
  display: flex; flex-wrap: wrap; gap: 1.6rem 2.6rem; align-items: center;
  margin-top: 3rem; padding-top: 2rem; border-top: 1px solid rgba(197,157,95,.28);
}
.hero-trust-item { display: flex; flex-direction: column; gap: .15rem; }
.hero-trust-item b { font-family: var(--font-display); font-size: var(--step-2); color: var(--gold); font-weight: 400; }
.hero-trust-item span { font-size: var(--step--1); letter-spacing: .12em; text-transform: uppercase; color: var(--text-invert-muted); }

/* --------------------------------------------------------------- cards */
.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
/* auto-fill, not auto-fit: a category with only two treatments should leave the
   third track empty rather than stretching two cards across the full width. */
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

.card {
  position: relative;
  background: #fff;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.card:hover { border-color: var(--gold); transform: translateY(-3px); box-shadow: 0 18px 40px -28px rgba(30,20,5,.5); }

/* The whole card is the click target, image included. Done by stretching the
   existing "Read more" link over the card rather than wrapping the image in a
   second anchor — two links to the same page would be read out twice by a
   screen reader and split the signal Google gets from the anchor text.

   READ THIS BEFORE USING .card-link ANYWHERE NEW. The overlay is absolute, so
   it resolves against the nearest POSITIONED ancestor. Put a .card-link in a
   block that is not positioned and there is no ancestor to catch it: the box
   resolves against the initial containing block instead and covers the entire
   page, sitting above the header on z-index 1. Every click on the page then
   opens that one link. It is invisible, so nothing looks wrong — the site just
   stops working. That is precisely what the footer's sister-brand card did:
   every click anywhere on the clinic site opened the tanning site, header,
   hero and buttons included. Any container holding a .card-link must establish
   a containing block, which is what the rule below is for. */
.card-link::before { content: ''; position: absolute; inset: 0; z-index: 1; }

/* Containers that carry a .card-link but are not .card. Being positioned is
   not decoration here, it is what keeps the overlay inside the box. */
.sister, .author-box { position: relative; }
.card:focus-within { border-color: var(--gold); }
.card:has(.card-link:focus-visible) { outline: 2px solid var(--gold); outline-offset: 3px; }
.card-link:focus-visible { outline: none; }

.card-media { aspect-ratio: 4 / 3; background: var(--paper-warm); overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.card:hover .card-media img { transform: scale(1.05); }
.card-body { padding: 1.6rem 1.6rem 1.8rem; display: flex; flex-direction: column; gap: .7rem; flex: 1; }
.card-body h3 { font-size: var(--step-1); }
.card-body p { font-size: .95rem; color: var(--text-muted); flex: 1; }
.card-link {
  text-decoration: none; font-size: var(--step--1); letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold-deep); display: inline-flex; gap: .5rem; align-items: center;
}
.card-link::after { content: '→'; transition: transform .3s var(--ease); }
.card:hover .card-link::after { transform: translateX(4px); }
.card-price { font-family: var(--font-display); font-size: var(--step-1); color: var(--text); }
.card-price small { font-family: var(--font-body); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }

.card-flag {
  align-self: flex-start; font-size: .6rem; letter-spacing: .18em; text-transform: uppercase;
  padding: .3rem .65rem; border: 1px solid var(--gold); color: var(--gold-deep); border-radius: 999px;
}

/* The category, on the card rather than as a heading above a half-empty row.
   Quiet enough to be read after the treatment name, not before it. */
.card-cat {
  font-size: .62rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: -.35rem;
}

/* ------------------------------------------------------------- dark band */
.band-dark { background: var(--ink); color: var(--text-invert); }
.band-dark h2, .band-dark h3 { color: var(--text-invert); }
.band-dark p { color: var(--text-invert-muted); }
.band-dark .eyebrow { color: var(--gold); }
.band-warm { background: var(--paper-warm); }

/* --------------------------------------------------------------- prices */
.price-table { width: 100%; border-collapse: collapse; }
.price-table caption {
  text-align: left; font-family: var(--font-display); font-size: var(--step-2);
  padding-bottom: 1rem;
}
.price-table th, .price-table td { padding: .95rem 1rem; text-align: left; border-bottom: 1px solid var(--paper-line); }
.price-table th { font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); font-weight: 500; }
.price-table td:last-child, .price-table th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.price-table tbody tr:hover { background: var(--paper-warm); }
.price-amount { font-family: var(--font-display); font-size: var(--step-1); }

.price-card {
  background: #fff; border: 1px solid var(--paper-line); border-radius: var(--radius-lg);
  padding: 2rem 1.8rem; display: flex; flex-direction: column; gap: .8rem; position: relative;
}
.price-card.featured { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.price-card .price-badge {
  position: absolute; top: -.7rem; left: 1.6rem; background: var(--gold); color: #17130C;
  font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; padding: .3rem .7rem; border-radius: 999px;
}
.price-card .amount { font-family: var(--font-display); font-size: var(--step-3); line-height: 1; }
.price-card .amount small { font-family: var(--font-body); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.price-card ul { display: flex; flex-direction: column; gap: .5rem; font-size: .92rem; color: var(--text-muted); }
.price-card ul li { display: flex; gap: .6rem; }
.price-card ul li::before { content: '—'; color: var(--gold); flex: none; }

/* ----------------------------------------------------------------- FAQ */
.faq { border-top: 1px solid var(--paper-line); }
.faq details { border-bottom: 1px solid var(--paper-line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 1.4rem 2.5rem 1.4rem 0;
  font-family: var(--font-display); font-size: var(--step-1); position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; position: absolute; right: .4rem; top: 50%; transform: translateY(-50%);
  color: var(--gold); font-family: var(--font-body); font-size: 1.4rem; font-weight: 200;
  transition: transform .3s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details > div { padding-bottom: 1.6rem; color: var(--text-muted); }

/* ------------------------------------------------------------ reviews */
.review-strip { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.review {
  border-left: 2px solid var(--gold); padding: .3rem 0 .3rem 1.4rem;
  display: flex; flex-direction: column; gap: .7rem;
}
.review .stars { color: var(--gold); letter-spacing: .14em; font-size: .9rem; }
.review blockquote { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.4; font-style: italic; }
.review cite { font-style: normal; font-size: var(--step--1); letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }

.rating-badge { display: inline-flex; align-items: center; gap: .8rem; }
.rating-badge .score { font-family: var(--font-display); font-size: var(--step-2); color: var(--gold); }
.rating-badge .meta { font-size: var(--step--1); letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); line-height: 1.4; }

/* ------------------------------------------------------------ split rows */
.split { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; grid-template-columns: 1fr; }
/* Columns whose headings must line up — centring pushes the shorter column
   down and the two headings stop agreeing with each other. */
.split.split-top { align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } .split-media-right .split-media { order: 2; } }
.split-media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--radius-lg); }
.split-media.wide img { aspect-ratio: 4/3; }
.split-media.square img { aspect-ratio: 1; }

.stat-row { display: flex; flex-wrap: wrap; gap: 2rem 3.5rem; }
.stat b { display: block; font-family: var(--font-display); font-size: var(--step-3); color: var(--gold-deep); font-weight: 400; line-height: 1; }
.stat span { font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }

/* -------------------------------------------------------------- prose */
.prose { max-width: 42rem; }
.prose > * + * { margin-top: 1.2rem; }
.prose h2 { font-size: var(--step-2); margin-top: 2.8rem; }
.prose h3 { font-size: var(--step-1); margin-top: 2rem; }
.prose ul, .prose ol { display: flex; flex-direction: column; gap: .6rem; padding-left: 1.2rem; }
.prose ul li { list-style: none; position: relative; }
.prose ul li::before { content: '—'; position: absolute; left: -1.2rem; color: var(--gold); }
.prose ol { list-style: decimal; }
.prose ol li { list-style: decimal; }
.prose blockquote {
  border-left: 2px solid var(--gold); padding-left: 1.4rem;
  font-family: var(--font-display); font-size: var(--step-1); font-style: italic;
}
.prose a { color: var(--gold-deep); text-underline-offset: 3px; }
.prose img { border-radius: var(--radius-lg); margin-block: 2rem; }
.prose table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.prose th, .prose td { border-bottom: 1px solid var(--paper-line); padding: .7rem .6rem; text-align: left; }

/* --------------------------------------------------------------- forms */
.form-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.field { display: flex; flex-direction: column; gap: .45rem; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: var(--step--1); letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.field input, .field textarea, .field select {
  padding: .85rem 1rem; border: 1px solid var(--paper-line); background: #fff;
  border-radius: var(--radius); transition: border-color .25s var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(197,157,95,.16);
}
.field textarea { min-height: 8rem; resize: vertical; }
.consent { display: flex; gap: .7rem; align-items: flex-start; font-size: .88rem; color: var(--text-muted); }
.consent input { margin-top: .25rem; accent-color: var(--gold); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.notice { padding: 1rem 1.2rem; border-radius: var(--radius); font-size: .95rem; border: 1px solid; }
.notice-ok { background: #F1F7F2; border-color: #BEDCC5; color: #1F5130; }
.notice-err { background: #FCF2F2; border-color: #EBC7C7; color: #8A2C2C; }
.notice-info { background: var(--paper-warm); border-color: var(--paper-line); color: var(--text-muted); }

/* ------------------------------------------------------------- offer bar */
.offer-bar {
  background: linear-gradient(100deg, var(--gold-deep), var(--gold));
  color: #17130C; text-align: center; font-size: var(--step--1);
  letter-spacing: .08em; padding: .7rem 1rem;
}
.offer-bar a { font-weight: 600; text-underline-offset: 3px; }

/* -------------------------------------------------------------- footer */
.site-footer { background: var(--ink); color: var(--text-invert-muted); padding-block: clamp(3rem, 6vw, 5rem) 2rem; }
.footer-grid { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.site-footer h4 {
  font-family: var(--font-body); font-size: var(--step--1); letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 1.1rem; font-weight: 500;
}
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--gold-lift); }
.site-footer ul { display: flex; flex-direction: column; gap: .6rem; font-size: .93rem; }
/* width:auto matters — the <img> carries width/height attributes for layout
   stability, and without it the fixed height squashes the logo out of shape. */
.footer-logo img { height: var(--logo-h); width: auto; margin-bottom: 1.2rem; }
.footer-bottom {
  margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--ink-line);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: .82rem; color: #6D675E;
}
.footer-bottom a { color: #8C857A; }

/* Company registration and, when it is switched on, the insurer. These sit
   under the legal strip rather than in it: they are sentences, and squeezing a
   sentence into a flex row beside four short links breaks it across lines at a
   different point on every viewport. */
.footer-legal {
  margin-top: .9rem; font-size: .78rem; color: #6D675E; max-width: 68ch; line-height: 1.6;
}
.footer-legal + .footer-legal { margin-top: .4rem; }
.footer-legal a { color: #8C857A; }

.sister {
  border: 1px solid var(--ink-line); border-radius: var(--radius-lg); padding: 1.4rem;
  display: flex; flex-direction: column; gap: .7rem;
}
.sister strong { color: var(--gold); font-family: var(--font-display); font-size: var(--step-1); font-weight: 400; }
.sister p { font-size: .88rem; }

/* --------------------------------------------------------- sticky actions */
.sticky-actions { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 70; display: flex; flex-direction: column; gap: .6rem; }
.fab {
  width: 3.3rem; height: 3.3rem; border-radius: 50%; display: grid; place-items: center;
  box-shadow: 0 10px 26px -10px rgba(0,0,0,.45); text-decoration: none;
  transition: transform .25s var(--ease);
}
.fab:hover { transform: translateY(-2px) scale(1.04); }
.fab-whatsapp { background: #25D366; color: #fff; }
.fab-phone { background: var(--gold); color: #17130C; }
.fab svg { width: 1.4rem; height: 1.4rem; }
@media (min-width: 941px) { .fab-phone { display: none; } }

/* ------------------------------------------------------------- utilities */
.skip-link {
  position: absolute; left: .5rem; top: -4rem; z-index: 100; background: var(--gold);
  color: #17130C; padding: .7rem 1.2rem; border-radius: var(--radius); transition: top .2s;
}
.skip-link:focus { top: .5rem; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.stack { display: flex; flex-direction: column; }
.gap-sm { gap: .8rem; } .gap-md { gap: 1.5rem; } .gap-lg { gap: 2.5rem; }
.mt-sm { margin-top: 1rem; } .mt-md { margin-top: 2rem; } .mt-lg { margin-top: 3.5rem; }
.mb-md { margin-bottom: 2rem; }
.flex-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

.breadcrumbs { font-size: var(--step--1); color: var(--text-muted); padding-block: 1.4rem; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .5rem; }
.breadcrumbs li + li::before { content: '/'; margin-right: .5rem; color: var(--paper-line); }
.breadcrumbs a { text-decoration: none; }
.breadcrumbs a:hover { color: var(--gold-deep); }

/* Interior page headers, matched to the treatment hero above. The same argument
   applies: only the home page opens on a statement and earns display size for it.
   Every page carrying .page-head — prices, contact, results, loyalty, the journal,
   the protocols, the area and legal pages — opens on information, and at the full
   step-4 the heading alone filled the first screen. The About page had already
   been hand-patched to step-3 inline, one page at a time, which is the tell. */
.page-head { padding-block: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 3vw, 2.5rem); }
.page-head h1 { font-size: var(--step-3); margin-bottom: 1rem; }
.page-head .lede { font-size: var(--step-0); line-height: 1.65; }

.embed-frame {
  position: relative; border: 1px solid var(--paper-line); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--paper-warm); aspect-ratio: 9 / 16;
}
.embed-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.embed-placeholder {
  display: grid; place-items: center; height: 100%; padding: 1.5rem; text-align: center;
  font-size: .85rem; color: var(--text-muted);
}

/* Staging watermark so nobody mistakes the dev box for the live site. */
.staging-flag {
  background: #2B2118; color: var(--gold); text-align: center;
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; padding: .4rem;
}

/* ------------------------------------------------------------ review feed */
.reviews-head {
  display: flex; flex-wrap: wrap; gap: 1.5rem 2rem;
  align-items: flex-end; justify-content: space-between; margin-bottom: 2.5rem;
}
.google-score { display: flex; align-items: center; gap: .9rem; }
.google-score .g-mark { width: 2.1rem; height: 2.1rem; flex: none; }
.google-score > div { display: flex; flex-direction: column; gap: .1rem; }
.google-score .stars { color: var(--gold); letter-spacing: .16em; font-size: 1.05rem; }
.g-meta { font-size: var(--step--1); letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.g-meta strong { color: var(--text); }
.band-dark .g-meta { color: var(--text-invert-muted); }
.band-dark .g-meta strong { color: var(--text-invert); }

.review-feed {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}
.review-card {
  background: #fff; border: 1px solid var(--paper-line); border-radius: var(--radius-lg);
  padding: 1.5rem; display: flex; flex-direction: column; gap: .85rem; margin: 0;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.review-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.review-card-top { display: flex; align-items: center; gap: .75rem; }
.review-card-top > div { display: flex; flex-direction: column; line-height: 1.25; flex: 1; min-width: 0; }
.review-card-top .g-mark { width: 1.05rem; height: 1.05rem; flex: none; opacity: .85; }
.review-avatar {
  width: 2.6rem; height: 2.6rem; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  color: #17130C; font-family: var(--font-display); font-size: 1.2rem;
}
.review-card cite {
  font-style: normal; font-weight: 500; font-size: .95rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.review-when { font-size: .78rem; color: var(--text-muted); }
.review-card .stars { color: var(--gold); letter-spacing: .1em; font-size: .95rem; }
.review-card blockquote {
  font-size: .95rem; line-height: 1.6; color: var(--text-muted); margin: 0;
  /* Long reviews are clamped so the row of cards stays even. The full text is
     one click away on Google. */
  display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --------------------------------------------------------- at a glance */
.glance-grid {
  display: grid; gap: 1px; background: var(--paper-line);
  border: 1px solid var(--paper-line); border-radius: var(--radius-lg);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  overflow: hidden;
}
.glance-item { background: #fff; padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .25rem; }
.glance-label {
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep);
}
.glance-value { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.2; }

/* Collapsible in-depth sections reuse the FAQ styling but need room for prose. */
.faq details > .prose { max-width: none; }
.faq details[open] summary { color: var(--gold-deep); }

/* --------------------------------------------- contact-page explainer */
.explainer {
  border: 1px solid var(--gold); border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--gold) 6%, #fff);
}
.explainer > details > summary {
  list-style: none; cursor: pointer; padding: 1.3rem 3.2rem 1.3rem 1.6rem;
  position: relative; display: flex; flex-direction: column; gap: .2rem;
}
.explainer > details > summary::-webkit-details-marker { display: none; }
.explainer > details > summary::after {
  content: '+'; position: absolute; right: 1.4rem; top: 50%; transform: translateY(-50%);
  color: var(--gold-deep); font-size: 1.6rem; font-weight: 200; line-height: 1;
  transition: transform .3s var(--ease);
}
.explainer > details[open] > summary::after { transform: translateY(-50%) rotate(45deg); }
.explainer-kicker {
  font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-deep);
}
.explainer-title { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.25; }
.explainer-body { padding: 0 1.6rem 1.6rem; }
.explainer-body .faq { border-top-color: color-mix(in srgb, var(--gold) 35%, transparent); }
.explainer-body .faq details { border-bottom-color: color-mix(in srgb, var(--gold) 35%, transparent); }
.explainer-body .faq summary { font-size: var(--step-0); padding-block: 1rem; }

/* ------------------------------------------------- floated prose images
   Convention: a markdown image with a "right" or "left" title floats to that
   side —  ![alt](/img/x.webp "right")  — so the client can control layout from
   the admin panel without touching CSS. Floats drop away on narrow screens. */
@media (min-width: 720px) {
  .prose img[title='right'],
  .prose img[title='left'] {
    width: min(46%, 22rem);
    margin-block: .4rem 1.2rem;
  }
  .prose img[title='right'] { float: right; margin-left: 2rem; }
  .prose img[title='left']  { float: left;  margin-right: 2rem; }
}
/* Stop a float escaping its section and shunting the next block sideways. */
.prose::after, .faq details > .prose::after { content: ''; display: block; clear: both; }

/* ------------------------------------------------ treatment page layout */
.treatment-layout { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 1000px) {
  .treatment-layout { grid-template-columns: minmax(0, 46rem) minmax(17rem, 1fr); }
  /* Offset by the sticky header so the card never tucks underneath it. */
  .treatment-aside { position: sticky; top: calc(var(--header-h) + 1.5rem); }
}
.treatment-main { min-width: 0; }

.booking-card {
  border: 1px solid var(--paper-line); border-radius: var(--radius-lg);
  background: #fff; padding: 1.6rem;
  box-shadow: 0 20px 44px -34px rgba(30,20,5,.45);
}
.booking-card .eyebrow { margin-bottom: .6rem; }
.booking-card-name {
  font-size: var(--step-1); line-height: 1.2; margin-bottom: 1.1rem;
}
.booking-card-facts { display: flex; flex-direction: column; gap: 0; margin-bottom: 1.3rem; }
.booking-card-facts > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .6rem 0; border-bottom: 1px solid var(--paper-line);
}
.booking-card-facts dt {
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted);
}
.booking-card-facts dd {
  font-family: var(--font-display); font-size: var(--step-1); text-align: right;
}
.booking-card-cta { width: 100%; margin-bottom: .6rem; }
.booking-card-note {
  font-size: .82rem; color: var(--text-muted); margin-top: .8rem; max-width: none;
}
.booking-card-trust {
  margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid var(--paper-line);
  display: flex; flex-direction: column; gap: .2rem;
  font-size: .82rem; color: var(--text-muted);
}
.booking-card-trust .stars { color: var(--gold); letter-spacing: .12em; }
.booking-card-trust strong { color: var(--text); }

.booking-card-loyalty {
  margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--paper-line);
}
.booking-card-loyalty a {
  display: flex; align-items: center; gap: .6rem; text-decoration: none;
  font-size: .88rem; color: var(--gold-deep); font-weight: 500;
}
.booking-card-loyalty a::before { content: '✦'; font-size: 1rem; }
.booking-card-loyalty a:hover { color: var(--text); }
.booking-card-loyalty p { font-size: .8rem; color: var(--text-muted); margin-top: .3rem; max-width: none; }

/* Compact enquiry form inside the sticky card. */
.booking-card-form { display: flex; flex-direction: column; gap: .6rem; margin-bottom: .4rem; }
.booking-card-form input[type=text],
.booking-card-form input[type=email],
.booking-card-form textarea {
  width: 100%; padding: .7rem .85rem; font-size: .92rem;
  border: 1px solid var(--paper-line); border-radius: var(--radius); background: #fff;
}
.booking-card-form textarea { resize: vertical; min-height: 4.5rem; }
.booking-card-form input:focus, .booking-card-form textarea:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(197,157,95,.16);
}
.booking-card-form .consent { font-size: .78rem; line-height: 1.45; margin-block: .2rem .3rem; }
.booking-card-note a { color: var(--gold-deep); }

/* ------------------------------------------------------- promises grid */
.promises { gap: 2rem 2.5rem; }
.promise { display: flex; flex-direction: column; gap: .6rem; position: relative; padding-top: 2.4rem; }
.promise::before {
  content: ''; position: absolute; top: 0; left: 0; width: 2.4rem; height: 1px;
  background: var(--gold);
}
.promise-mark {
  position: absolute; top: .55rem; left: 0;
  font-family: var(--font-display); font-size: .95rem; letter-spacing: .1em;
  color: var(--gold-deep);
}
.promise h3 { font-size: var(--step-1); line-height: 1.25; }
.promise p { font-size: .93rem; color: var(--text-muted); }
.promise a { color: var(--gold-deep); text-underline-offset: 3px; }

/* --------------------------------------------------------- nav dropdown */
.nav-item { position: relative; display: flex; align-items: center; gap: .3rem; }
.nav-caret {
  display: flex; align-items: center; padding: .35rem .1rem; color: var(--text-muted);
  transition: color .25s var(--ease), transform .25s var(--ease);
}
.nav-caret svg { width: .6rem; height: .6rem; }
.nav-caret:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.nav-item.open .nav-caret { transform: rotate(180deg); color: var(--text); }

.nav-dropdown {
  position: absolute; top: 100%; left: -1rem; z-index: 70; min-width: 17rem;
  background: var(--paper); border: 1px solid var(--paper-line);
  border-radius: var(--radius-lg); padding: .5rem;
  box-shadow: 0 24px 48px -28px rgba(30,20,5,.5);
  opacity: 0; visibility: hidden; transform: translateY(-.4rem);
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  /* While closed it must not take the mouse. The active preview card inside is
     marked visibility: visible, which beats the closed parent's hidden, so without
     this an invisible card sat over the page under the header and swallowed clicks
     on anything there (found 27 Oct 2026 on the booking page). */
  pointer-events: none;
}
.nav-item.open .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(.35rem); pointer-events: auto; }
.nav-dropdown ul { display: flex; flex-direction: column; }
.nav-dropdown a {
  display: block; padding: .6rem .85rem; border-radius: var(--radius);
  font-size: .9rem; letter-spacing: .02em; text-transform: none; color: var(--text);
}
.nav-dropdown a::after { display: none; }
.nav-dropdown a:hover { background: var(--paper-warm); color: var(--gold-deep); }
.nav-dropdown-all { border-top: 1px solid var(--paper-line); margin-top: .35rem; padding-top: .35rem; }
.nav-dropdown-all a { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); }

/* Opening on hover is handled in JS with an intent delay, not here — a bare
   :hover fires the instant the pointer crosses the trigger, so simply moving up
   the page opened the menu. Focus still opens it immediately, which is correct
   for the keyboard: focus is always deliberate. */
@media (min-width: 941px) {
  .nav-item:focus-within .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(.35rem); pointer-events: auto; }
}

@media (max-width: 940px) {
  .nav-item { flex-wrap: wrap; border-bottom: 1px solid var(--paper-line); }
  .nav-item > a { flex: 1; border-bottom: 0; }
  .nav-caret { padding: .95rem .6rem; }
  .nav-dropdown {
    position: static; width: 100%; min-width: 0; border: 0; box-shadow: none;
    background: transparent; padding: 0 0 .6rem .8rem;
    display: none; opacity: 1; visibility: visible; transform: none;
  }
  .nav-item.open .nav-dropdown { display: block; transform: none; pointer-events: auto; }
  .nav-dropdown a { padding: .6rem .4rem; }
}

/* ------------------------------------------- wide nav dropdown + preview */
.nav-dropdown-wide { min-width: 0; width: min(46rem, calc(100vw - 3rem)); padding: 0; overflow: hidden; }
.nav-dd-inner { display: grid; grid-template-columns: minmax(14rem, 17rem) 1fr; }
.nav-dd-list { padding: .6rem; }
.nav-dd-list > li > a.on { background: var(--paper-warm); color: var(--gold-deep); }

/* The gold panel. Warm tint rather than solid gold so the photography still
   reads — a full-strength gold behind an image turns everything muddy. */
.nav-dd-preview {
  position: relative; min-height: 18.25rem;
  background:
    linear-gradient(150deg,
      color-mix(in srgb, var(--gold) 78%, #fff) 0%,
      color-mix(in srgb, var(--gold) 58%, #fff) 55%,
      color-mix(in srgb, var(--gold) 72%, #fff) 100%);
  border-left: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
}
.nav-dd-card {
  position: absolute; inset: 0; padding: 1.1rem;
  /* Image to the right and full height: a wide letterbox crop was cutting the
     subject out of most of these photographs. A tall portrait crop keeps it. */
  display: flex; flex-direction: row; align-items: stretch; gap: 1rem;
  opacity: 0; visibility: hidden; transform: translateY(.3rem);
  transition: opacity .12s var(--ease), transform .18s var(--ease), visibility .12s;
}
.nav-dd-card.on {
  opacity: 1; visibility: visible; transform: none;
  /* Incoming card fades in slightly after the outgoing one has gone, so the two
     are never both legible at the same time. */
  transition-delay: .06s;
}
.nav-dd-card-media {
  order: 2; width: 10.5rem; flex: none; align-self: stretch;
  border-radius: var(--radius); overflow: hidden;
  background: color-mix(in srgb, var(--gold) 40%, #fff);
}
.nav-dd-card-media img { width: 100%; height: 100%; object-fit: cover; }
.nav-dd-card-body { order: 1; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .4rem; }
.nav-dd-card h3 {
  font-family: var(--font-display); font-size: var(--step-1); line-height: 1.2; color: #241a09;
}
.nav-dd-card p {
  font-size: .85rem; line-height: 1.5; color: #3a2d13; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
  padding-bottom: .15rem;
}
.nav-dd-card-meta {
  display: flex; gap: 1.1rem; margin-top: auto; padding-top: .55rem;
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: #4a3812; font-weight: 500;
  border-top: 1px solid rgba(74,56,18,.28);
}

@media (max-width: 940px) {
  /* The preview is a pointer affordance — on mobile it is just weight. */
  .nav-dropdown-wide { width: 100%; }
  .nav-dd-inner { grid-template-columns: 1fr; }
  .nav-dd-preview { display: none; }
  .nav-dd-list { padding: 0; }
}

/* Opt-out: image full width above the text, for photographs that survive a
   letterbox crop. Set per treatment with services.nav_preview_wide. */
.nav-dd-card.is-wide { flex-direction: column; align-items: stretch; gap: .8rem; }
.nav-dd-card.is-wide .nav-dd-card-media { order: 1; width: auto; height: 8rem; align-self: auto; }
.nav-dd-card.is-wide .nav-dd-card-body { order: 2; flex: 1; }
.nav-dd-card.is-wide .nav-dd-card-body p { -webkit-line-clamp: 3; }

/* ------------------------------------------------- "ask a question" block */
.ask { margin-top: 1.6rem; }
.ask-centre { display: flex; flex-direction: column; align-items: center; }
.ask > details { width: min(34rem, 100%); }
.ask summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--step--1); letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold-deep); padding: .5rem 0;
}
.ask summary::-webkit-details-marker { display: none; }
.ask summary::after { content: '+'; font-size: 1.1rem; line-height: 1; transition: transform .25s var(--ease); }
.ask details[open] summary::after { transform: rotate(45deg); }
.ask summary:hover { color: var(--text); }

.ask-body {
  margin-top: .9rem; padding: 1.2rem; text-align: left;
  border: 1px solid var(--paper-line); border-radius: var(--radius-lg); background: #fff;
}
.ask-intro { font-size: .88rem; color: var(--text-muted); margin-bottom: .9rem; max-width: none; }
.ask-form { display: flex; flex-direction: column; gap: .6rem; }
.ask-row { display: grid; gap: .6rem; grid-template-columns: 1fr; }
@media (min-width: 520px) { .ask-row { grid-template-columns: 1fr 1fr; } }
.ask-form input[type=text], .ask-form input[type=email], .ask-form textarea {
  width: 100%; padding: .7rem .85rem; font-size: .92rem;
  border: 1px solid var(--paper-line); border-radius: var(--radius); background: #fff;
}
.ask-form textarea { resize: vertical; min-height: 3.6rem; }
.ask-form input:focus, .ask-form textarea:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(197,157,95,.16);
}
.ask-form .consent { font-size: .78rem; line-height: 1.45; }
.ask-form .btn { align-self: flex-start; }
.ask-done {
  display: inline-block; padding: .9rem 1.2rem; border-radius: var(--radius-lg);
  background: #F1F7F2; border: 1px solid #BEDCC5; color: #1F5130; font-size: .92rem;
  max-width: none;
}

/* On the dark bands the summary needs to lift off the background, and the open
   panel keeps its light card so the inputs stay legible. */
.band-dark .ask summary { color: var(--gold); }
.band-dark .ask summary:hover { color: var(--text-invert); }
.band-dark .ask-body { border-color: var(--ink-line); }

/* ------------------------------------------------------------ author box */
.author-box {
  display: flex; gap: 1.4rem; align-items: flex-start; max-width: 44rem;
  padding: 1.4rem; border: 1px solid var(--paper-line); border-radius: var(--radius-lg);
  background: #fff;
}
.author-box img {
  width: 5.5rem; height: 5.5rem; border-radius: 50%; object-fit: cover;
  object-position: top center; flex: none;
}
.author-box .eyebrow { margin-bottom: .4rem; }
.author-box p { font-size: .92rem; margin-block: .4rem .7rem; }
@media (max-width: 560px) { .author-box { flex-direction: column; } }

/* ---------------------------------------------------- journal + newswire */
.journal-layout { display: grid; gap: clamp(2rem, 4vw, 3rem); align-items: start; }
@media (min-width: 1000px) {
  .journal-layout { grid-template-columns: minmax(0, 1fr) minmax(17rem, 21rem); }
  .journal-aside { position: sticky; top: calc(var(--header-h) + 1.5rem); }
}
.journal-main { min-width: 0; }

/* Contrasting column — dark against the light page, so it reads as a separate
   kind of content rather than more of the same. */
.newswire {
  background: var(--ink); color: var(--text-invert-muted);
  border-radius: var(--radius-lg); padding: 1.6rem;
}
.newswire .eyebrow { color: var(--gold); }
.newswire-title {
  font-family: var(--font-display); font-size: var(--step-2); line-height: 1.15;
  color: var(--text-invert); margin-bottom: .7rem;
}
.newswire-intro { font-size: .85rem; line-height: 1.55; margin: 0 0 1.2rem; max-width: none; }
.newswire-empty {
  font-size: .85rem; line-height: 1.55; max-width: none;
  padding: .9rem 1rem; border: 1px dashed var(--ink-line); border-radius: var(--radius);
}
.newswire-empty strong { color: var(--gold); }

.newswire-list { display: flex; flex-direction: column; }
.newswire-list li { border-top: 1px solid var(--ink-line); }
.newswire-list li:last-child { border-bottom: 1px solid var(--ink-line); }
.newswire-list a {
  display: flex; flex-direction: column; gap: .3rem; padding: .95rem 0;
  text-decoration: none; transition: color .25s var(--ease);
}
.newswire-item-title {
  font-family: var(--font-display); font-size: 1.05rem; line-height: 1.3; color: var(--text-invert);
}
.newswire-list a:hover .newswire-item-title { color: var(--gold-lift); }
.newswire-meta { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #857d70; }

.newswire-foot {
  margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--ink-line);
  display: flex; flex-direction: column; gap: .7rem; align-items: flex-start;
}
.newswire-foot p { font-size: .85rem; margin: 0; max-width: none; }

/* Business name ahead of the address in the top bar — the name/address/phone
   trio should read as one consistent NAP block, which also matches the Google
   Business Profile. */
.topbar-nap { display: inline-flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.topbar-nap strong { color: var(--gold); font-weight: 500; letter-spacing: .06em; }
.topbar-sep { color: #5C554B; }
@media (max-width: 620px) { .topbar-nap .topbar-sep { display: none; } }

/* ------------------------------------------------------- logo watermark
   Crown mark set faintly behind the text column of a split section. The
   `--watermark` custom property is declared on the section (.watermark) but the
   mark itself is drawn by the column carrying .watermark-mark, so it centres on
   the copy rather than on the section. Hidden from assistive tech and from
   print, and it never intercepts the pointer. */
.watermark { position: relative; overflow: hidden; isolation: isolate; }
.watermark-mark { position: relative; }
.watermark-mark::before {
  content: '';
  position: absolute; z-index: 0; pointer-events: none;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(28rem, 100%); aspect-ratio: 1;
  background-image: var(--watermark);
  background-repeat: no-repeat; background-position: center; background-size: contain;
  opacity: .11;
}
.watermark-mark > * { position: relative; z-index: 1; }
.band-dark .watermark-mark::before { opacity: .13; }
@media (max-width: 900px) {
  /* Narrower and lighter on a single column — a centred mark sits directly
     under the body text there, where it competes rather than decorates. */
  .watermark-mark::before { width: min(20rem, 80%); opacity: .07; }
}
@media print { .watermark-mark::before { display: none; } }

/* ------------------------------------------------------ welcome band
   Copy | portrait | review. The portrait column is the widest and the only
   one that is not text, so it carries the middle and the two text columns
   read as a pair either side of it. */
.welcome { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1000px) {
  .welcome { grid-template-columns: 1fr 1.15fr 1fr; gap: 3rem; }
}
.welcome-copy h2 { font-size: var(--step-3); line-height: 1.1; }
.welcome-copy h2 em { color: var(--gold-deep); }
.welcome-copy p { margin-top: 1rem; color: var(--text-muted); }

/* The portrait is a transparent cut-out, so it gets no frame, no crop and no
   corner radius — it sits straight on the warm band. Cropping it to a fixed
   ratio would only lop the shoulders off a composition that is already
   balanced. */
/* Allowed to spill a little into the column gaps. The subject is centred with
   clear space either side, so the overspill lands on empty pixels and buys the
   portrait the presence it needs to hold the middle. */
.welcome-portrait img {
  display: block; height: auto; margin-inline: auto;
  width: calc(100% + 5rem); max-width: 32rem;
}
/* Stacked, there are no gaps to spill into and the overspill would push the
   page sideways on a narrow phone. */
@media (max-width: 999px) { .welcome-portrait img { width: 100%; } }
/* Placeholder frame, so the layout is legible before the artwork lands. */
.welcome-portrait-empty {
  aspect-ratio: 2/3; display: flex; flex-direction: column; justify-content: center;
  gap: .6rem; padding: 2rem; text-align: center;
  border: 1px dashed var(--paper-line); border-radius: var(--radius-lg);
  color: var(--text-muted); font-size: .88rem;
}
.welcome-portrait-empty code { font-size: .82rem; color: var(--gold-deep); }

.welcome-stars { color: var(--gold); letter-spacing: .35em; font-size: 1.6rem; line-height: 1; }
/* The oversized quote mark is decoration, so it sits in its own block rather
   than behind the text, and is hidden from assistive tech. */
.welcome-mark {
  font-family: var(--font-display); font-size: 5rem; line-height: .55;
  height: 2rem; color: var(--gold); opacity: .3; margin-top: 1.6rem;
}
.welcome-quote figure { margin-top: 1.2rem; }
.welcome-quote blockquote p {
  font-family: var(--font-display); font-style: italic;
  font-size: var(--step-1); line-height: 1.5; color: var(--text);
}
.welcome-quote figcaption {
  margin-top: 1.1rem; font-size: .82rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-muted);
}
.welcome-quote figcaption span { display: block; color: var(--gold-deep); margin-top: .25rem; }

/* In-page anchor targets clear the sticky header, which would otherwise cover
   the top of the section you just jumped to. */
section[id] { scroll-margin-top: calc(var(--header-h) + 1.5rem); }

/* ------------------------------------------------- ask card in a treatment grid
   Fills the empty slot left by an odd number of treatments. Deliberately does
   not look like a treatment: warm ground, gold edge, no image. */
.card-ask {
  background: var(--paper-warm);
  border-color: var(--gold);
  border-style: dashed;
}
.card-ask:hover { transform: none; box-shadow: none; }
.card-ask .card-body { justify-content: center; gap: 1rem; }
.card-ask .eyebrow { margin: 0; }
/* The form is the card's content, so it takes the height the other cards get
   from their image, rather than sitting in a disclosure. */
.card-ask .ask { flex: 1; display: flex; }
.card-ask .ask-body { display: flex; flex-direction: column; gap: .8rem; width: 100%; }
.card-ask .ask-form { flex: 1; display: flex; flex-direction: column; gap: .7rem; }
.card-ask .ask-form textarea { flex: 1; }

/* On a listing the ask card closes the grid off, so it takes whatever is left
   of the final row instead of leaving a hole beside it. Only once the grid is
   genuinely three across: below 1008px the shell fits one or two tracks, and a
   span there would push cards out of the row rather than fill it. */
@media (min-width: 1008px) {
  .card-ask-span2 { grid-column: span 2; }
}

/* THE HOUSE CREDIT — the same component every site we build carries, in the
   same place: its own block at the foot, under the legal line.
   Only size and position are decided here; the artwork, the animation, the word
   on it and that word's colour are all served from red4digital, so one change
   there reaches every site at once. */
.built-by {
  position: relative; display: inline-flex; flex-direction: column;
  align-items: center; gap: 0; margin: 1.6rem auto 0;
  text-decoration: none; --r4-red: #b91e24;
}
.built-by, .built-by:hover { text-decoration: none; }
.built-by-label {
  font-size: 0.52rem; letter-spacing: 0.13em; text-transform: uppercase;
  line-height: 1; margin-bottom: 7px; white-space: nowrap;
  color: var(--r4-credit-label, #c9a227);
}
.r4-mark-slot { width: var(--r4-mark-h, 76px); height: var(--r4-mark-h, 76px); display: block; flex: none; }
.r4-mark-slot > svg, .r4-mark-slot > span { width: 100%; height: 100%; display: block; }
.r4-mark { height: 100%; width: 100%; display: block; }
.r4-px rect { fill: var(--r4-red); transition: fill 0.2s ease; }
.built-by:hover .r4-px rect { fill: currentColor; }
.built-by-name {
  position: absolute; left: 50%; bottom: -0.85rem; transform: translate(-50%, 2px);
  font-size: 0.54rem; letter-spacing: 0.11em; text-transform: uppercase;
  line-height: 1; white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.built-by:hover .built-by-name, .built-by:focus-visible .built-by-name {
  opacity: 1; transform: translate(-50%, 0);
}
@media (prefers-reduced-motion: reduce) { .built-by-name { transition: none; } }

/* ---------------------------------------------------- clinical protocols */
/* Restrained on purpose. This is the one part of the site that is a clinical
   document rather than marketing, and it should read like one — no cards, no
   gold flourishes, just hierarchy and room to read. */
.protocol-journey { font-size: 1.02rem; line-height: 1.75; }

.protocol-scope {
  border-left: 3px solid var(--gold); background: var(--paper-warm);
  padding: 1.1rem 1.3rem; border-radius: 0 var(--radius-sm, 6px) var(--radius-sm, 6px) 0;
}
.protocol-scope p { font-size: .93rem; color: var(--text-muted); }

/* The clinic-wide standard. Same disclosure pattern as the FAQ accordion below
   it, but at body size rather than display size — these are five headings in a
   row, and at .faq's scale they would read as five more sections of the page
   rather than one collapsed block. */
.protocol-standard { border-top: 1px solid var(--paper-line); }
.protocol-point { border-bottom: 1px solid var(--paper-line); }
.protocol-point summary {
  list-style: none; cursor: pointer; position: relative;
  padding: .95rem 2.2rem .95rem 0;
  font-family: var(--font-body); font-size: .95rem; font-weight: 600;
}
.protocol-point summary::-webkit-details-marker { display: none; }
.protocol-point summary::after {
  content: '+'; position: absolute; right: .4rem; top: 50%; transform: translateY(-50%);
  color: var(--gold); font-size: 1.25rem; font-weight: 200;
  transition: transform .3s var(--ease);
}
.protocol-point[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.protocol-point summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.protocol-point p {
  font-size: .92rem; color: var(--text-muted); padding-bottom: 1.2rem; max-width: 44rem;
}

.protocol-list { display: flex; flex-direction: column; gap: .85rem; }
.protocol-list li {
  font-size: .93rem; color: var(--text-muted); line-height: 1.65;
  padding-left: 1.3rem; position: relative; list-style: none;
}
.protocol-list li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: .42rem; height: 1px; background: var(--gold);
}
.protocol-list li strong, .protocol-list li b { color: var(--text); font-weight: 500; }

/* -------------------------------------------------- the full document page */
.protocol-layout { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 62rem) {
  .protocol-layout { grid-template-columns: minmax(14rem, 17rem) minmax(0, 1fr); gap: 3.5rem; }
  .protocol-nav { position: sticky; top: 6.5rem; }
}
.protocol-nav ol { display: flex; flex-direction: column; gap: .1rem; list-style: none; }
.protocol-nav a {
  display: flex; gap: .7rem; padding: .5rem 0; font-size: .9rem;
  color: var(--text-muted); text-decoration: none; border-bottom: 1px solid var(--paper-line);
}
.protocol-nav a:hover { color: var(--gold-deep); }
.protocol-nav a span {
  font-variant-numeric: tabular-nums; color: var(--gold-deep); flex: none; min-width: 1.1rem;
}

.protocol-body { max-width: 44rem; }
.protocol-provenance {
  border: 1px solid var(--paper-line); border-radius: var(--radius-lg);
  padding: 1.5rem 1.6rem; background: #fff;
}
.protocol-doc-title { font-family: var(--font-display); font-size: var(--step-1); margin-bottom: 1rem; }
.protocol-provenance dl { display: flex; flex-direction: column; gap: .55rem; }
.protocol-provenance dl > div { display: flex; gap: 1rem; font-size: .88rem; }
.protocol-provenance dt {
  flex: none; width: 6rem; font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-muted); padding-top: .18rem;
}
.protocol-provenance dd { color: var(--text); }

.protocol-section { margin-top: 3rem; scroll-margin-top: 6.5rem; }
.protocol-section h2 {
  font-size: var(--step-2); display: flex; gap: .9rem; align-items: baseline;
  padding-bottom: .8rem; border-bottom: 1px solid var(--gold);
}
.protocol-section h3 {
  font-family: var(--font-body); font-size: .95rem; font-weight: 600;
  display: flex; gap: .9rem; align-items: baseline; margin-bottom: .7rem;
}
.protocol-num {
  font-family: var(--font-body); font-size: .72rem; letter-spacing: .1em;
  color: var(--gold-deep); flex: none; font-weight: 500;
}
.protocol-part { margin-top: 1.6rem; }
.protocol-part p { font-size: .93rem; color: var(--text-muted); line-height: 1.7; }
.protocol-part p + p { margin-top: .8rem; }
.protocol-part .protocol-list { margin-top: .9rem; }
.protocol-part .protocol-list + p { margin-top: 1rem; }

.protocol-status {
  border-left: 3px solid var(--gold); background: var(--paper-warm);
  padding: 1rem 1.2rem; margin-top: 1rem;
}
.protocol-refs { display: flex; flex-direction: column; gap: .8rem; margin-top: .9rem; list-style: none; }
.protocol-refs li { display: flex; flex-direction: column; gap: .15rem; font-size: .88rem; }
.protocol-refs span { color: var(--text-muted); font-size: .85rem; }

/* Two manufacturers on one page, so the contents list is grouped by document. */
.protocol-nav-doc {
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text); font-weight: 500; margin: 1.6rem 0 .4rem;
}
.protocol-nav ol:first-of-type + .protocol-nav-doc,
.protocol-nav .eyebrow + .protocol-nav-doc { margin-top: .4rem; }
.protocol-provenance + .protocol-section { margin-top: 2.2rem; }
.protocol-body > .protocol-provenance ~ .protocol-provenance { margin-top: 4.5rem; }

/* The Timely booking widget. It sizes itself, so the only job here is to stop
   it sitting flush against the text above and to keep a wide widget from
   pushing the page sideways on a phone. */
.booking-embed { margin: 1.5rem 0; overflow-x: auto; }
.booking-embed iframe { max-width: 100%; border: 0; }

/* ---- Card slider (the minute cards on /book and /prices) ---- */
.bk-prices { margin-top: 1.1rem; padding: 1rem 1.25rem; background: #fff; border: 1px solid #e5e0d8; border-radius: 14px; }
.bk-ptitle { margin: 0 0 .9rem; font-weight: 600; }
.bk-scale { margin: 0 0 .4rem; }
.bk-scale[hidden] { display: none; }
.bk-scale-label { display: block; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted, #7a736a); margin-bottom: .4rem; }
.bk-range { width: 100%; accent-color: var(--glow, #f08a3c); }
.bk-ticks { display: flex; justify-content: space-between; font-size: .78rem; color: var(--text-muted, #7a736a); margin-top: .1rem; }
.bk-out { margin: .9rem 0 0; }
.bk-out-main { display: block; font-size: 1.2rem; font-family: var(--font-display, inherit); }
.bk-est { margin-left: .9rem; font-family: var(--font-body, inherit); font-size: .95rem; font-weight: 600; color: var(--gold-deep, #a97a28); white-space: nowrap; }
.bk-out-sub { display: block; margin-top: .15rem; font-size: .92rem; color: var(--text-muted, #7a736a); }
.bk-prices .bk-note { margin: .85rem 0 0; font-size: .88rem; color: var(--text-muted, #7a736a); }
.bk-prices .bk-note a { text-underline-offset: 2px; }

/* ---- /sunbeds: white photo panels and the four bed boxes ---- */
.card-media-white { background: #fff; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.card-media-white img { width: auto; max-width: 100%; height: 100%; max-height: 100%; object-fit: contain; }
.card:hover .card-media-white img { transform: none; }
.bed-box { position: relative; }
.bed-box-media { display: flex; align-items: center; justify-content: center; background: #fff; height: 12rem; padding: .9rem; border-radius: var(--radius-lg, 12px) var(--radius-lg, 12px) 0 0; }
.bed-box-media img { max-height: 100%; max-width: 100%; width: auto; height: auto; }
.bed-box .card-body { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.bed-box h3 { margin: 0; font-size: 1.25rem; }
.bed-box h3 a { text-decoration: none; color: inherit; }
.bed-box h3 a:hover { text-decoration: underline; }
.split-media-white { background: #fff; border-radius: var(--radius-lg, 12px); padding: 1.25rem; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.split-media .split-media-white img, .split-media-white img { max-height: 26rem; width: auto; max-width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; border-radius: 0; }

/* ---- Bed type pages: the model list and the photo slideshow ---- */
.bshow-list { list-style: none; margin: 1.2rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; max-width: 24rem; }
.bshow-item { display: block; padding: .75rem 1rem; border: 1px solid currentColor; border-radius: 12px; background: #fff; color: inherit; text-decoration: none; font-weight: 600; font-size: .95rem; }
.bshow-item:hover { filter: brightness(.97); }
.bshow-item.on { background: var(--glow, #f08a3c); border-color: transparent; color: #1c1209; }
.bshow { width: 100%; }
.bshow-window { position: relative; background: #fff; border: 1px solid #e5e0d8; border-radius: 14px; height: 30rem; overflow: hidden; }
.bshow-slide { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; padding: 1.5rem 1.5rem 3.6rem; color: inherit; text-decoration: none; }
.bshow-slide.on { display: flex; animation: bshow-in .5s ease; }
.bshow-slide img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 0; aspect-ratio: auto; }
.bshow-more { position: absolute; left: 0; right: 0; bottom: 0; padding: .8rem; text-align: center; font-size: .92rem; font-weight: 600; border-top: 1px solid #efe9df; background: #fff; }
.bshow-slide:hover .bshow-more { text-decoration: underline; }
.bshow-dots { display: flex; justify-content: center; gap: .55rem; margin-top: .8rem; }
.bshow-dot { width: .7rem; height: .7rem; padding: 0; border-radius: 50%; border: 1px solid currentColor; background: transparent; cursor: pointer; }
.bshow-dot.on { background: var(--glow, #f08a3c); border-color: transparent; }
.bshow-credit { margin: .6rem 0 0; text-align: center; font-size: .78rem; color: var(--text-muted, #7a736a); }
@keyframes bshow-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .bshow-slide.on { animation: none; } }
@media (max-width: 900px) { .bshow-window { height: 24rem; } }

/* The equipment menu jumps to a section under the sticky header, so leave room. */
#lay-down, #stand-up { scroll-margin-top: 6.5rem; }

/* Home: the bed type cards, centred whatever their number. */
.kit-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; }
.kit-grid .card { flex: 1 1 19rem; max-width: 26rem; }
.kit-grid .card h3 { color: var(--text, #1c1a17); }

/* The menu preview card for a bed type: the manufacturer's photo on white, not cropped. */
.nav-dd-card-media-white { background: #fff; display: flex; align-items: center; justify-content: center; padding: .5rem; }
.nav-dd-card-media-white img { width: 100%; height: 100%; object-fit: contain; }

/* A disabled button on the booking form: clearly off, not just dimmer. */
.btn[disabled], .btn:disabled { opacity: .4; cursor: not-allowed; filter: grayscale(.4); pointer-events: auto; }
.btn[disabled]:hover, .btn:disabled:hover { transform: none; filter: grayscale(.4); }
.bk-hint { margin: .5rem 0 0; font-size: .88rem; color: var(--text-muted, #7a736a); }