/* ==========================================================================
   Dr. Zulfu Sertkaya (Hardrock Clinic) — design system
   --------------------------------------------------------------------------
   One spacing scale, one grid, one card. Every section uses the same vertical
   rhythm and the same header pattern; every card grid uses a column count
   that divides its item count so no row is ever left with an orphan. Nothing
   in this file overrides section spacing locally — that is deliberate.

   Type is a single family (Coloplast Sans) across the whole site; hierarchy
   comes from weight, size and tracking rather than from a second typeface.
   Colour is turquoise and orange: turquoise carries structure and navigation,
   orange carries action and emphasis. Text-bearing shades of both are the
   dark ones, so every label clears 4.5:1 on paper and on ink.
   ========================================================================== */

/* --- Typeface ------------------------------------------------------------
   Coloplast Sans is a licensed corporate typeface and is deliberately not
   committed to this repository. Drop the licensed files into
   static/assets/fonts/ using the names below and every page picks them up on
   the next build — no other change needed. Until they are present (or on a
   machine where the font is installed locally) the stack falls through to
   Figtree, which shares the same humanist-geometric proportions, so the
   layout is metrically stable either way.
   ------------------------------------------------------------------------ */
@font-face {
  font-family: "Coloplast Sans";
  src: local("Coloplast Sans"), local("ColoplastSans-Regular"),
       url("/assets/fonts/coloplast-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Coloplast Sans";
  src: local("Coloplast Sans Medium"), local("ColoplastSans-Medium"),
       url("/assets/fonts/coloplast-sans-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Coloplast Sans";
  src: local("Coloplast Sans SemiBold"), local("ColoplastSans-SemiBold"),
       url("/assets/fonts/coloplast-sans-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Coloplast Sans";
  src: local("Coloplast Sans Bold"), local("ColoplastSans-Bold"),
       url("/assets/fonts/coloplast-sans-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --- Tokens -------------------------------------------------------------- */
:root {
  /* One family, three roles. */
  --font-sans: "Coloplast Sans", "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: var(--font-sans);
  --font-label: var(--font-sans);

  /* Ink & paper — both carry a turquoise cast so nothing reads as neutral grey */
  --ink: #062730;
  --ink-mid: #14535f;
  --ink-soft: #4d7480;
  --paper: #f5fbfc;
  --paper-deep: #e7f4f7;
  --paper-card: #ffffff;
  --rule: #d3e8ec;
  --rule-strong: #a5d4dc;

  /* Turquoise — structure, navigation, labels. --accent is the text-safe tone. */
  --accent: #06758a;
  --accent-bright: #12b4c9;
  --accent-glow: #22d3e6;
  --accent-soft: #8fe0ec;
  --accent-deep: #045260;

  /* Orange — action and emphasis. --flame-ink is the text-safe tone. */
  --flame: #d4570f;
  --flame-ink: #b8460f;
  --flame-bright: #ff9036;
  --flame-soft: #ffd2ab;

  --warn: #b3271b;

  /* Gradients. Every gradient that carries text stays inside the dark tones. */
  --grad-cool: linear-gradient(135deg, #06758a 0%, #045260 100%);
  --grad-hot: linear-gradient(135deg, #c2500c 0%, #b8460f 100%);
  --grad-duo: linear-gradient(100deg, #06758a 0%, #0d93a8 45%, #b8460f 100%);
  --grad-bar: linear-gradient(90deg, var(--accent-bright) 0%, var(--accent) 45%, var(--flame) 100%);

  /* One spacing scale. Nothing outside it. */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;

  /* Rhythm: identical for every section on every page */
  --section-y: clamp(3.75rem, 7vw, 6rem);
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --container: 74rem;
  --measure: 66ch;
  --gap: var(--sp-5);
  --radius: 10px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --shadow-card: 0 1px 2px rgba(6, 39, 48, 0.05);
  --shadow-lift: 0 18px 40px -18px rgba(6, 39, 48, 0.28);
  --shadow-glow: 0 12px 26px -12px rgba(6, 117, 138, 0.55);
  --shadow-glow-hot: 0 12px 26px -12px rgba(212, 87, 15, 0.5);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-back: cubic-bezier(0.34, 1.32, 0.64, 1);
}

/* --- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* keeps anchor targets clear of the sticky masthead */
  scroll-padding-top: 6rem;
}
body {
  background:
    radial-gradient(64rem 40rem at 88% -6%, rgba(18, 180, 201, 0.09), transparent 62%),
    radial-gradient(50rem 34rem at -8% 6%, rgba(212, 87, 15, 0.06), transparent 66%),
    var(--paper);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--accent-soft); color: var(--ink); }
img, svg { display: block; max-width: 100%; }
svg { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--ink); text-decoration-color: var(--accent-bright); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--flame); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* --- Type scale ---------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.25rem, 5.2vw, 3.75rem); }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.4rem); line-height: 1.25; letter-spacing: -0.015em; }
h4 { font-size: 1.0625rem; line-height: 1.35; font-weight: 600; letter-spacing: -0.01em; }
p { text-wrap: pretty; }

/* Eyebrow: label type plus a short gradient dash, so every section head
   opens on the same visual beat. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-label);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 1.75rem;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--grad-bar);
}
.lead { font-size: clamp(1.0625rem, 1.6vw, 1.2rem); color: var(--ink-mid); }
.small { font-size: 0.875rem; }
.note { font-size: 0.8125rem; line-height: 1.6; color: var(--ink-soft); }
.note--light { color: #9dbcc4; }
.num { font-variant-numeric: tabular-nums; }

/* --- Layout primitives --------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section-y); border-top: 1px solid var(--rule); }
.section--deep {
  background:
    radial-gradient(46rem 26rem at 92% 0%, rgba(18, 180, 201, 0.14), transparent 68%),
    var(--paper-deep);
}
.section--ink {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(44rem 26rem at 88% -12%, rgba(18, 180, 201, 0.22), transparent 62%),
    radial-gradient(38rem 24rem at 4% 112%, rgba(212, 87, 15, 0.18), transparent 66%),
    linear-gradient(165deg, #072f3a 0%, var(--ink) 58%, #04202a 100%);
  color: var(--paper);
  border-top-color: rgba(143, 224, 236, 0.28);
}
.section--ink h2, .section--ink h3 { color: var(--paper); }
.section--ink .eyebrow { color: var(--accent-soft); }
.section--ink .lead, .section--ink p { color: #cfe6ec; }
.section--flush { border-top: 0; }
.section--ink .eyebrow::before,
.panel .eyebrow::before,
.footer .eyebrow::before {
  background: linear-gradient(90deg, var(--accent-glow), var(--flame-bright));
}
.section--ink .stats dd,
.section--ink .price-card__price {
  background: linear-gradient(100deg, var(--accent-glow), var(--flame-bright));
  -webkit-background-clip: text;
  background-clip: text;
}
.section--ink .card--hover:hover { border-color: var(--accent-glow); }

/* Section header: same shape, same alignment, on every section */
.section__head { display: grid; gap: var(--sp-3); max-width: var(--measure); }
.section__head + * { margin-top: var(--sp-7); }
.section__head .lead { margin-top: var(--sp-1); }

.prose { max-width: var(--measure); display: grid; gap: var(--sp-4); }
.prose p { color: var(--ink-mid); }
.stack { display: grid; gap: var(--sp-5); }
.stack--tight { gap: var(--sp-4); }

/* The one grid. data-cols divides the item count exactly, so rows stay full. */
.grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  align-items: stretch;
}
.grid--tight { --gap: var(--sp-3); }
.grid[data-cols="2"] { --cols: 2; }
.grid[data-cols="3"] { --cols: 3; }
.grid[data-cols="4"] { --cols: 4; }
.grid[data-cols="5"] { --cols: 5; }

@media (max-width: 62rem) {
  .grid[data-cols="3"], .grid[data-cols="4"], .grid[data-cols="5"] { --cols: 2; }
  /* An odd number of cards would leave the last row half empty at two
     columns, so those grids go straight to one. */
  .grid[data-odd="true"] { --cols: 1; }
}
@media (max-width: 40rem) {
  .grid { --cols: 1 !important; }
}

/* --- Short answer callout ------------------------------------------------ */
.answer {
  position: relative;
  display: grid;
  gap: var(--sp-2);
  max-width: var(--measure);
  padding: var(--sp-5);
  background: linear-gradient(120deg, rgba(18, 180, 201, 0.08), rgba(255, 255, 255, 0.9) 55%);
  border: 1px solid var(--rule);
  border-left: 0;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.answer::before {
  content: "";
  position: absolute;
  inset: -1px auto -1px 0;
  width: 4px;
  background: var(--grad-bar);
}
.answer__label {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.answer p { font-size: 1.0625rem; color: var(--ink); }
.section--ink .answer { background: rgba(245, 251, 252, 0.05); border-color: rgba(143, 224, 236, 0.3); }
.section--ink .answer p { color: var(--paper); }

/* --- Card ---------------------------------------------------------------- */
.card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  height: 100%;
  padding: var(--sp-5);
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--grad-bar);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.card p { color: var(--ink-soft); font-size: 0.9375rem; }
.card--hover:hover { border-color: var(--accent-bright); transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.card--hover:hover::before { transform: scaleX(1); }
.card__foot { margin-top: auto; padding-top: var(--sp-3); }
.card__rule { margin-top: auto; padding-top: var(--sp-4); border-top: 1px solid var(--rule); }
.section--deep .card { background: var(--paper); }
.section--ink .card {
  background: rgba(245, 251, 252, 0.045);
  border-color: rgba(143, 224, 236, 0.22);
  box-shadow: none;
}
.section--ink .card p { color: #b7d6de; }
.section--ink .card h3, .section--ink .card h4 { color: var(--paper); }

/* Numbered step card — the index sits in a fixed square so every heading
   in the row starts on the same optical line. */
.step__index {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  font-family: var(--font-label);
  font-size: 0.8125rem;
  font-weight: 700;
  color: #fff;
  background: var(--grad-cool);
  border: 0;
  border-radius: 34% 66% 60% 40% / 55% 45% 55% 45%;
  box-shadow: var(--shadow-glow);
  font-variant-numeric: tabular-nums;
  transition: transform 0.4s var(--ease-back), box-shadow 0.3s var(--ease);
}
.card:hover .step__index { transform: rotate(-6deg) scale(1.08); box-shadow: var(--shadow-glow-hot); background: var(--grad-hot); }
.section--deep .step__index { background: var(--grad-cool); color: #fff; }
.section--ink .step__index {
  background: linear-gradient(135deg, var(--accent-bright), var(--accent-glow));
  color: var(--ink);
}

/* --- Stat tiles ---------------------------------------------------------- */
.stats { display: grid; gap: var(--gap); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stats > div {
  position: relative;
  display: grid;
  gap: var(--sp-2);
  align-content: start;
  padding: var(--sp-5);
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.stats > div:hover { transform: translateY(-3px); border-color: var(--accent-bright); }
.stats dt { font-size: 0.8125rem; line-height: 1.45; color: var(--ink-soft); order: 2; }
.stats dd {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  order: 1;
  font-variant-numeric: tabular-nums;
  background: var(--grad-duo);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.section--deep .stats > div { background: var(--paper); }
@media (max-width: 62rem) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 26rem) { .stats { grid-template-columns: 1fr; } }

/* --- Buttons ------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 3rem;
  padding: 0 var(--sp-6);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--grad-cool);
  color: #fff;
  cursor: pointer;
  box-shadow: var(--shadow-glow);
  isolation: isolate;
  overflow: hidden;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--grad-hot);
  opacity: 0;
  transform: translateX(-30%);
  transition: opacity 0.3s var(--ease), transform 0.35s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow-hot); }
.btn:hover::before { opacity: 1; transform: none; }
.btn--ghost {
  background: var(--paper-card);
  color: var(--accent-deep);
  box-shadow: inset 0 0 0 1.5px var(--rule-strong);
}
.btn--ghost:hover { color: #fff; box-shadow: var(--shadow-glow); }
.btn--ghost::before { background: var(--grad-cool); }
.btn--light { background: #fff; color: var(--accent-deep); box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.6); }
.btn--light:hover { color: #fff; }
.btn--outline-light {
  background: transparent;
  color: var(--paper);
  box-shadow: inset 0 0 0 1.5px rgba(143, 224, 236, 0.5);
}
.btn--outline-light:hover { color: #fff; box-shadow: inset 0 0 0 1.5px var(--accent-soft); }
.btn--outline-light::before { background: var(--grad-cool); }
.btn--block { width: 100%; }

/* Action row: buttons share one row, equal height, wrap together */
.actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.actions .btn { flex: 0 1 auto; }
@media (max-width: 30rem) { .actions .btn { flex: 1 1 100%; } }

/* --- Header -------------------------------------------------------------- */
.topbar {
  background: linear-gradient(90deg, var(--ink) 0%, #08313d 55%, #1b3a35 100%);
  color: #c2dee5;
  font-size: 0.8125rem;
}
.topbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 2.5rem;
}
.topbar a { color: var(--accent-soft); text-decoration: none; }
.topbar a:hover { text-decoration: underline; }
@media (max-width: 48rem) { .topbar__meta { display: none; } .topbar .container { justify-content: center; } }

.masthead {
  position: sticky;
  top: 0;
  --progress: 0;
  /* Lockup scale. Phones and tablets keep the compact size; the full-width
     desktop header can afford the larger one. The middle stage is set in the
     62rem-to-74rem rule further down, where the row is at its tightest. */
  --brand-size: 2.5rem;
  z-index: 50;
  background: rgba(245, 251, 252, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
  transition: box-shadow 0.25s var(--ease);
}
.masthead[data-scrolled="true"] { box-shadow: 0 6px 24px -14px rgba(6, 39, 48, 0.35); }
.masthead::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px 0;
  height: 2px;
  background: var(--grad-bar);
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
}
.masthead .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: 4.5rem;
}
.wordmark { display: inline-flex; align-items: baseline; gap: var(--sp-2); text-decoration: none; }
.wordmark strong { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; letter-spacing: -0.025em; }
.wordmark span {
  font-family: var(--font-label);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--flame-ink);
  white-space: nowrap;
}
@media (max-width: 26rem) { .wordmark { flex-direction: column; align-items: flex-start; gap: 0; } }

/* Header brand lockup ------------------------------------------------------
   One custom property, --brand-size, drives the whole lockup: the mark is
   that size square, and both lines of type are fractions of it. That is what
   keeps the corner of the page in proportion at every width — there is no
   second size to keep in step, and nothing here depends on a file arriving or
   on a measurement taken at runtime. Resizing the lockup means changing
   --brand-size and nothing else; the four declarations of it, on .masthead
   and in the three width rules below, are the whole story.

   The footer states the same brand with .wordmark, which is set on its own
   scale for a much wider column; that is why these are separate rules rather
   than one shared one.

   The lockup is also the one item in the header row allowed to give way — the
   navigation and the consultation button are pinned so that it is. The sizes
   below already fit every width this site is read at; that only decides what
   happens if a wider fallback typeface ever makes them not, and the answer is
   that the strapline shortens rather than the row overflowing or the menu
   button being pushed off the edge of the screen. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  text-decoration: none;
  color: inherit;
}

/* The mark. Square by declaration rather than by luck: the box is set from
   --brand-size with aspect-ratio holding the shape, and the artwork inside is
   a 32-unit viewBox that scales to fill it, so the mark is the same shape at
   every header size and on every screen. */
.brand__mark {
  flex: none;
  display: block;
  width: var(--brand-size);
  aspect-ratio: 1;
  border-radius: 25%;
  box-shadow: var(--shadow-glow);
}
.brand__mark svg { display: block; width: 100%; height: 100%; }

.brand__text { display: grid; gap: 0.1rem; min-width: 0; }
.brand__name, .brand__clinic { overflow: hidden; text-overflow: ellipsis; }
.brand__name {
  font-family: var(--font-display);
  font-size: calc(var(--brand-size) * 0.45);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--ink);
  white-space: nowrap;
}
.brand__clinic {
  font-family: var(--font-label);
  font-size: calc(var(--brand-size) * 0.235);
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--flame-ink);
  white-space: nowrap;
}
/* The city drops off the strapline on phones, where the brand and the menu
   button share one row and the extra word is what would push them into each
   other. */
@media (max-width: 48rem) { .brand__city { display: none; } }

/* Artwork variant: used when a logo file is configured in src/content/site.mjs.
   The image is sized from its height with width:auto so its own proportions
   decide the width, max-width stops a wide lockup from crowding the
   navigation, and object-fit means that if that cap ever binds the artwork is
   fitted inside the box rather than squashed to it. The width and height
   attributes carry the same ratio before the file lands, so the header does
   not reflow around it. */
.brand--art { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
.brand__logo {
  display: block;
  flex: none;
  height: var(--brand-size);
  width: auto;
  max-width: min(56vw, 14rem);
  object-fit: contain;
  object-position: left center;
}
.brand--art .brand__clinic { font-size: calc(var(--brand-size) * 0.22); letter-spacing: 0.22em; }
@media (max-width: 26rem) { .brand__clinic { letter-spacing: 0.14em; } }
.nav { display: flex; align-items: center; flex: none; gap: var(--sp-5); }
.nav a {
  position: relative;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink-mid);
  padding-block: var(--sp-2);
  transition: color 0.2s var(--ease);
}
.nav a::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--grad-bar);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--accent-deep); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.masthead__cta { flex: none; }
.masthead .btn { min-height: 2.75rem; font-size: 0.875rem; }
/* Seven links plus the consultation button fit the full 74rem container. In
   the band between the mobile breakpoint and that width they do not, so the
   spacing closes up rather than letting a label wrap or the row overflow. */
@media (min-width: 62.0625rem) and (max-width: 74rem) {
  .masthead .container { gap: var(--sp-4); }
  /* Everything in this band gives up a little so that nothing has to wrap:
     the lockup takes its compact size and drops the city from its strapline,
     and the navigation closes up its spacing and its type. */
  .masthead { --brand-size: 2.2rem; }
  .nav { gap: var(--sp-3); }
  .nav a { font-size: 0.8rem; }
  .brand__city { display: none; }
}
/* Past the container width the row has room to spare, so the lockup takes the
   full size and keeps the whole strapline. */
@media (min-width: 74.0625rem) { .masthead { --brand-size: 2.6rem; } }
@media (max-width: 26rem) { .masthead { --brand-size: 2.2rem; } }
/* The nav carries its own CTA for the mobile panel; on desktop the one in
   .masthead__cta is the only one shown. */
.masthead__nav > .btn { display: none; }
.nav-toggle { display: none; }

/* Dimmer behind the open mobile panel. It lives outside .masthead in the
   markup on purpose: .masthead carries a backdrop-filter, which makes it the
   containing block for fixed descendants, so a scrim nested inside it could
   never reach the edges of the viewport. */
.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(6, 39, 48, 0.44);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s var(--ease), visibility 0.25s var(--ease);
}
.nav-scrim[data-open="true"] { opacity: 1; visibility: visible; }
@media (min-width: 62.0625rem) { .nav-scrim { display: none; } }

/* Scroll lock while the panel is open. It goes on the root element and
   nowhere else, which matters more than it looks:

   `overflow` on the root element propagates to the viewport and the root's own
   used value stays `visible`, so the page stops scrolling while the viewport
   remains the scroll container the sticky masthead sticks to.

   Locking body as well — which is what this rule used to do — is not the same
   thing. body is not the root, so `overflow: hidden` made it a scroll
   container in its own right, and a scroll container that never scrolls. The
   sticky masthead then had that box to stick to instead of the viewport, so
   the moment the menu opened the header snapped back to its static position
   at the top of the document, taking the panel hanging off its bottom edge
   with it. On a page scrolled past the fold both were then far above the
   viewport: the button toggled, the dimmer appeared, and the menu itself was
   nowhere to be seen. */
html.nav-locked { overflow: hidden; overscroll-behavior: none; }

@media (max-width: 62rem) {
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: 2.75rem;
    padding: 0 var(--sp-4);
    background: var(--paper-card);
    border: 1.5px solid var(--rule-strong);
    border-radius: var(--radius-pill);
    font-family: var(--font-label);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-deep);
    cursor: pointer;
    /* A menu button that flashes a grey box or double-fires on tap is half
       the reason a mobile menu feels broken. */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: background 0.2s var(--ease), border-color 0.2s var(--ease),
      color 0.2s var(--ease), box-shadow 0.25s var(--ease);
  }
  .nav-toggle:hover { border-color: var(--accent-bright); color: var(--accent); }
  .nav-toggle:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; }
  /* Open state is unmistakable: the pill inverts and the bars become a cross. */
  .nav-toggle[aria-expanded="true"] {
    background: var(--grad-cool);
    border-color: transparent;
    color: #ffffff;
    box-shadow: var(--shadow-glow);
  }

  .nav-toggle__bars { position: relative; display: block; flex: none; width: 1.0625rem; height: 0.6875rem; }
  .nav-toggle__bars span {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: top 0.26s var(--ease), transform 0.26s var(--ease), opacity 0.16s var(--ease);
  }
  .nav-toggle__bars span:nth-child(1) { top: 0; }
  .nav-toggle__bars span:nth-child(2) { top: calc(50% - 1px); }
  .nav-toggle__bars span:nth-child(3) { top: calc(100% - 2px); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { top: calc(50% - 1px); transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; transform: scaleX(0.3); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { top: calc(50% - 1px); transform: rotate(-45deg); }

  /* Menu and Close are stacked in one grid cell rather than swapped in and
     out of the flow, so the pill is as wide as the longer of the two words in
     both states and does not resize under the finger that just tapped it. */
  .nav-toggle__label { display: grid; place-items: center; }
  .nav-toggle__label > span {
    grid-area: 1 / 1;
    transition: opacity 0.18s var(--ease);
  }
  .nav-toggle__label > [data-label="open"] { opacity: 0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__label > [data-label="closed"] { opacity: 0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__label > [data-label="open"] { opacity: 1; }

  /* The panel hangs off the bottom edge of the masthead. It is positioned
     absolutely rather than fixed because .masthead has a backdrop-filter and
     is therefore the containing block for fixed descendants too — the panel
     used to resolve `top: <masthead height + 40px>` against `bottom: 0`
     inside a 72px-tall box and collapse to nothing, so tapping Menu appeared
     to do nothing at all. Anchoring to `top: 100%` says what was meant, needs
     no measurement from JavaScript, and stays glued to the masthead even if
     the page behind it moves. */
  .masthead__nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--sp-2) var(--gutter) var(--sp-6);
    background: var(--paper);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 26px 44px -26px rgba(6, 39, 48, 0.5);
    /* Long menus scroll inside the panel instead of pushing the last item
       off-screen. --masthead-bottom is the header's real distance from the top
       of the viewport, published by site.js, so the panel claims exactly the
       space below the header whether or not the topbar has scrolled away. The
       7.5rem fallback is the worst case — topbar plus masthead — and is what
       applies with that file blocked. dvh keeps both honest under mobile
       browser chrome. */
    max-height: calc(100vh - var(--masthead-bottom, 7.5rem));
    max-height: calc(100dvh - var(--masthead-bottom, 7.5rem));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /* Closed with visibility rather than display:none, so the panel can
       animate and its links stay out of the tab order while hidden. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.5rem);
    transition: opacity 0.2s var(--ease), transform 0.26s var(--ease), visibility 0.26s var(--ease);
  }
  .masthead__nav[data-open="true"] { opacity: 1; visibility: visible; transform: none; }

  .masthead__nav a {
    display: flex;
    align-items: center;
    min-height: 3rem;
    padding-block: var(--sp-3);
    border-bottom: 1px solid var(--rule);
    font-size: 1.0625rem;
    color: var(--ink);
    -webkit-tap-highlight-color: transparent;
  }
  /* The desktop sliding underline would sit on top of the row divider here,
     so it becomes a dot that marks the current page instead. */
  .masthead__nav a::after {
    inset: 50% var(--sp-1) auto auto;
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 50%;
    transform-origin: center;
    transform: translateY(-50%) scale(0);
    transition: transform 0.25s var(--ease-back);
  }
  .masthead__nav a:hover::after { transform: translateY(-50%) scale(0); }
  .masthead__nav a[aria-current="page"] { color: var(--accent-deep); font-weight: 600; }
  .masthead__nav a[aria-current="page"]::after { transform: translateY(-50%) scale(1); }
  .masthead__nav > .btn { display: inline-flex; margin-top: var(--sp-5); }
  .masthead__cta { display: none; }

  /* On the narrowest phones the brand lockup and the button share a 280px
     row, and the word is the part that can go: the pill becomes a square icon
     target of the same height, so the tap area is unchanged and the lockup is
     not the thing that gets squeezed. The button's aria-label already carries
     "Open menu" and "Close menu", so nothing is lost by dropping the visible
     word. This sits at the end of the block because it overrides the label
     rules above it at the same specificity. */
  @media (max-width: 26rem) {
    .nav-toggle { width: 2.75rem; padding: 0; gap: 0; justify-content: center; }
    .nav-toggle__label { display: none; }
  }
}

/* Rows fade in behind the panel so the menu reads as one movement. Guarded by
   the motion query: with reduced motion the panel simply appears. */
@media (max-width: 62rem) and (prefers-reduced-motion: no-preference) {
  .masthead__nav > * { opacity: 0; transform: translateY(-0.375rem); transition: opacity 0.28s var(--ease), transform 0.28s var(--ease); }
  .masthead__nav[data-open="true"] > * { opacity: 1; transform: none; }
  .masthead__nav[data-open="true"] > *:nth-child(1) { transition-delay: 0.04s; }
  .masthead__nav[data-open="true"] > *:nth-child(2) { transition-delay: 0.08s; }
  .masthead__nav[data-open="true"] > *:nth-child(3) { transition-delay: 0.12s; }
  .masthead__nav[data-open="true"] > *:nth-child(4) { transition-delay: 0.16s; }
  .masthead__nav[data-open="true"] > *:nth-child(5) { transition-delay: 0.2s; }
  .masthead__nav[data-open="true"] > *:nth-child(6) { transition-delay: 0.24s; }
  .masthead__nav[data-open="true"] > *:nth-child(n + 7) { transition-delay: 0.28s; }
}

/* --- Hero ---------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(155deg, #ffffff 0%, var(--paper-deep) 55%, #e2f2f0 100%);
  border-bottom: 1px solid var(--rule);
}
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
.hero::before {
  inset: -20% -10% auto auto;
  width: 46rem;
  height: 40rem;
  background: radial-gradient(closest-side, rgba(18, 180, 201, 0.3), transparent 72%);
  filter: blur(6px);
}
.hero::after {
  inset: auto auto -28% -14%;
  width: 40rem;
  height: 34rem;
  background: radial-gradient(closest-side, rgba(255, 144, 54, 0.26), transparent 72%);
  filter: blur(6px);
}
.hero__edge {
  position: absolute;
  z-index: 2;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--grad-bar);
}
@media (prefers-reduced-motion: no-preference) {
  .hero::before { animation: drift-a 22s var(--ease) infinite alternate; }
  .hero::after { animation: drift-b 26s var(--ease) infinite alternate; }
  @keyframes drift-a {
    to { transform: translate3d(-4rem, 2.5rem, 0) scale(1.12); }
  }
  @keyframes drift-b {
    to { transform: translate3d(3.5rem, -2rem, 0) scale(1.14); }
  }
}
.hero .container { position: relative; z-index: 1; padding-block: clamp(3rem, 6vw, 5.5rem); }
.hero__grid { display: grid; gap: clamp(var(--sp-7), 5vw, var(--sp-9)); grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; }
@media (max-width: 62rem) { .hero__grid { grid-template-columns: 1fr; } }
.hero__copy { display: grid; gap: var(--sp-5); max-width: 40rem; }
.hero__copy p { color: var(--ink-mid); }
.hero__copy h1 em {
  font-style: normal;
  background: var(--grad-duo);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__figure { display: grid; gap: var(--sp-4); justify-items: center; }
/* The hero photograph is a 424px-wide source, so its box is capped just under
   that width: any wider and the browser upscales the only file there is. The
   caps match the `sizes` attribute the hero portrait ships with. */
.hero__figure .portrait { width: 100%; max-width: 26rem; }
@media (max-width: 62rem) { .hero__figure .portrait { max-width: 20rem; } }

/* Credential strip: even columns, centred content, one shared divider */
.credentials {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid var(--rule);
  border-top: 0;
  border-radius: var(--radius);
  background: var(--paper-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.credentials::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--grad-bar);
}
.credentials li {
  display: grid;
  place-items: center;
  gap: var(--sp-1);
  padding: var(--sp-4) var(--sp-3);
  text-align: center;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--ink-mid);
  border-right: 1px solid var(--rule);
}
.credentials li { transition: background 0.25s var(--ease), color 0.25s var(--ease); }
.credentials li:hover { background: rgba(18, 180, 201, 0.09); color: var(--accent-deep); }
.credentials li:last-child { border-right: 0; }
@media (max-width: 62rem) {
  .credentials { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .credentials li:nth-child(2n) { border-right: 0; }
  .credentials li { border-bottom: 1px solid var(--rule); }
  .credentials li:last-child { grid-column: 1 / -1; border-bottom: 0; }
}

/* --- Figure / diagram ---------------------------------------------------- */
.figure {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-6);
  background: linear-gradient(160deg, #ffffff, rgba(231, 244, 247, 0.85));
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
}
.figure svg { margin-inline: auto; }
.figure figcaption { font-size: 0.8125rem; line-height: 1.6; color: var(--ink-soft); max-width: 44ch; margin-inline: auto; text-align: center; }
.split { display: grid; gap: clamp(var(--sp-6), 4vw, var(--sp-8)); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
/* Photograph beside prose. The image column is deliberately the narrower of
   the two so a portrait crop introduces the text rather than towering over it. */
.split--aside { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr); }
@media (max-width: 62rem) { .split, .split--aside { grid-template-columns: 1fr; } }

/* --- Portrait ------------------------------------------------------------
   Photograph with the name plate laid over the foot of the image, so the
   caption cannot separate from the face it identifies.
   ------------------------------------------------------------------------ */
.portrait {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, #ffffff, var(--paper-deep));
  box-shadow: var(--shadow-lift);
}
.portrait::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--grad-bar);
}
.portrait img {
  width: 100%;
  /* The global img rule caps max-width only; without this the width and
     height attributes would hold the box at full pixel height and squash it. */
  height: auto;
}
.portrait figcaption {
  position: absolute;
  inset: auto 0 0 0;
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-8) var(--sp-5) var(--sp-4);
  /* A white coat against a pale wall gives a caption nothing to sit on, so
     the plate brings its own gradient. */
  background: linear-gradient(to top, rgba(6, 39, 48, 0.94) 0%, rgba(6, 39, 48, 0.78) 42%, rgba(6, 39, 48, 0) 100%);
  color: var(--paper);
}
.portrait figcaption strong {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
}
.portrait figcaption span {
  font-family: var(--font-label);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-soft);
}
.section--ink .portrait { border-color: rgba(143, 224, 236, 0.28); background: rgba(245, 251, 252, 0.05); }
/* Stacked on one column a 2:3 crop would run most of a phone screen tall. */
@media (max-width: 62rem) { .portrait { max-width: 22rem; margin-inline: auto; } }

/* --- Clinic gallery -----------------------------------------------------
   Photograph tiles with the caption plate below the image rather than over it:
   these are rooms, not faces, and a gradient laid over the foot of a dim
   interior shot hides the part of the room worth showing.
   The last cell of the grid is a card rather than a photograph, which is what
   keeps both rows of the three-column layout full.
   ------------------------------------------------------------------------ */
.gallery {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.shot {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.shot:hover { transform: translateY(-4px); border-color: var(--accent-bright); box-shadow: var(--shadow-lift); }
.shot img {
  display: block;
  width: 100%;
  /* The sources are 275 to 500 pixels wide, so the box is set by the ratio
     rather than by the file: every tile crops to the same 3:2 and the rows
     stay level whichever photograph lands in them. */
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--paper-deep);
}
.shot figcaption {
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  border-top: 1px solid var(--rule);
}
.shot figcaption strong {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--ink);
}
.shot figcaption span { font-size: 0.8125rem; line-height: 1.6; color: var(--ink-soft); }
/* The gallery sits on the pale section, so its tiles take the same lift the
   cards do there. */
.section--deep .shot { background: var(--paper); }
/* The last cell is a card, and a card carries the smaller corner radius
   everywhere else on the site. Beside a photograph tile in the same row that
   difference is visible, so in this grid the card takes the tile's radius. */
.gallery .card { border-radius: var(--radius-lg); }

@media (max-width: 62rem) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .gallery { grid-template-columns: 1fr; } }

/* --- Table --------------------------------------------------------------- */
.table-wrap { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper-card); overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 42rem; }
thead th {
  font-family: var(--font-label);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent);
  text-align: left;
  padding: var(--sp-4) var(--sp-5);
  background: var(--paper-deep);
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
tbody td { padding: var(--sp-4) var(--sp-5); font-size: 0.9375rem; color: var(--ink-mid); border-bottom: 1px solid var(--rule); vertical-align: top; }
tbody tr { transition: background 0.2s var(--ease); }
tbody tr:hover { background: rgba(18, 180, 201, 0.07); }
tbody tr:last-child td { border-bottom: 0; }
tbody td:first-child { color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
tbody td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.section--deep .table-wrap { background: var(--paper); }
.section--deep thead th { background: var(--paper-card); }

/* --- Pricing ------------------------------------------------------------- */
.price-card { position: relative; }
.price-card__badge {
  align-self: start;
  font-family: var(--font-label);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.35rem var(--sp-4);
  border-radius: var(--radius-pill);
  background: var(--grad-hot);
  color: #fff;
}
/* Empty badge keeps its space so all three cards align on the same lines. */
.price-card__badge[data-empty="true"] { visibility: hidden; }
.price-card__price {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: var(--grad-duo);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.price-card--featured {
  border-color: transparent;
  box-shadow: var(--shadow-lift), 0 0 0 2px var(--accent-bright);
}
.price-card--featured::before { transform: scaleX(1); }
.checklist { display: grid; gap: var(--sp-2); }
.checklist li { position: relative; padding-left: var(--sp-5); font-size: 0.9375rem; color: var(--ink-mid); }
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--grad-bar);
  border-radius: 50%;
}
.section--ink .checklist li { color: #c2dee5; }
.terms { display: grid; gap: var(--sp-4); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.terms dt { font-family: var(--font-label); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--sp-2); }
.terms dd { font-size: 0.875rem; color: var(--ink-soft); }
@media (max-width: 62rem) { .terms { grid-template-columns: 1fr; } }

/* --- Risk ledger --------------------------------------------------------- */
.ledger { display: grid; gap: 0; border: 1px solid rgba(143, 224, 236, 0.24); border-radius: var(--radius); overflow: hidden; }
.ledger li {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr);
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  font-size: 0.9375rem;
  border-bottom: 1px solid rgba(143, 224, 236, 0.18);
}
.ledger li { transition: background 0.2s var(--ease); }
.ledger li:hover { background: rgba(143, 224, 236, 0.07); }
.ledger li:last-child { border-bottom: 0; }
.ledger b {
  font-family: var(--font-label);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-soft);
  padding-top: 0.28rem;
}
.ledger span { color: #c2dee5; }
.ledger--never b { color: #ffbb8a; }
@media (max-width: 48rem) { .ledger li { grid-template-columns: 1fr; gap: var(--sp-1); } }

/* --- FAQ ----------------------------------------------------------------- */
.faq { display: grid; gap: 0; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper-card); overflow: hidden; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq details:last-child { border-bottom: 0; }
.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  font-size: 1.0625rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  margin-top: 0.45rem;
  border-right: 2px solid var(--flame);
  border-bottom: 2px solid var(--flame);
  transform: rotate(45deg);
  transition: transform 0.3s var(--ease-back);
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq summary { position: relative; transition: background 0.25s var(--ease); }
.faq summary::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--grad-bar);
  transform: scaleY(0);
  transition: transform 0.3s var(--ease);
}
.faq summary:hover { background: rgba(18, 180, 201, 0.07); }
.faq summary:hover::before, .faq details[open] summary::before { transform: scaleY(1); }
.faq details[open] summary { color: var(--accent-deep); }
.faq .faq__body { padding: 0 var(--sp-5) var(--sp-5); max-width: var(--measure); }
.faq .faq__body p { color: var(--ink-mid); font-size: 0.9375rem; }
.section--deep .faq { background: var(--paper); }

/* --- Enquiry panel ------------------------------------------------------- */
.panel {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: var(--sp-5);
  padding: clamp(var(--sp-6), 4vw, var(--sp-8));
  background:
    radial-gradient(32rem 20rem at 92% 6%, rgba(255, 144, 54, 0.22), transparent 66%),
    radial-gradient(30rem 20rem at 4% 96%, rgba(18, 180, 201, 0.22), transparent 68%),
    linear-gradient(150deg, #08313d 0%, var(--ink) 62%, #04202a 100%);
  color: var(--paper);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
}
.panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--grad-bar);
}
.panel h3 { color: var(--paper); }
.panel p { color: #c2dee5; max-width: 56ch; }
.panel .eyebrow { color: var(--accent-soft); }

/* --- Form ---------------------------------------------------------------- */
.form { display: grid; gap: var(--sp-5); }
.form__row { display: grid; gap: var(--sp-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 48rem) { .form__row { grid-template-columns: 1fr; } }
.field { display: grid; gap: var(--sp-2); }
.field > label { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; color: var(--accent-deep); }
.field input:not([type="checkbox"]), .field select, .field textarea {
  width: 100%;
  min-height: 3rem;
  padding: var(--sp-3) var(--sp-4);
  background: var(--paper-card);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field textarea { min-height: 9rem; resize: vertical; line-height: 1.6; }
.field input:not([type="checkbox"]):hover, .field select:hover, .field textarea:hover { border-color: var(--accent-bright); }
.field input:not([type="checkbox"]):focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(18, 180, 201, 0.22); outline: none; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--warn); }
.consent { display: grid; grid-template-columns: 1.15rem minmax(0, 1fr); gap: var(--sp-3); align-items: start; }
.consent input { width: 1.15rem; height: 1.15rem; margin-top: 0.28rem; accent-color: var(--accent); }
.consent label { font-size: 0.875rem; line-height: 1.55; color: var(--ink-mid); }
.field__error { font-size: 0.8125rem; color: var(--warn); min-height: 1.2rem; }
.field__error:empty { min-height: 0; }
.form__status { font-size: 0.9375rem; padding: var(--sp-4) var(--sp-5); border-radius: var(--radius); border: 1px solid var(--rule); background: var(--paper-card); }
.form__status[hidden] { display: none; }
.form__status[data-state="error"] { border-color: var(--warn); color: var(--warn); }
.form__status[data-state="ok"] { border-color: var(--accent-bright); color: var(--accent-deep); }
.hp { position: absolute; left: -9999px; }
.btn[aria-busy="true"] { opacity: 0.65; pointer-events: none; }

/* --- Contact rows -------------------------------------------------------- */
.rows { display: grid; gap: 0; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper-card); overflow: hidden; }
.rows > div {
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr);
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--rule);
  font-size: 0.9375rem;
}
.rows > div { transition: background 0.2s var(--ease); }
.rows > div:hover { background: rgba(18, 180, 201, 0.06); }
.rows > div:last-child { border-bottom: 0; }
.rows dt { font-family: var(--font-label); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); padding-top: 0.3rem; }
.rows dd { color: var(--ink-mid); }
@media (max-width: 48rem) { .rows > div { grid-template-columns: 1fr; gap: var(--sp-1); } }

/* --- Read next ----------------------------------------------------------- */
.readnext { display: grid; gap: var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.readnext a {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  height: 100%;
  padding: var(--sp-5);
  text-decoration: none;
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.readnext a:hover { border-color: var(--accent-bright); transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.readnext a::after {
  content: "→";
  margin-top: auto;
  padding-top: var(--sp-3);
  font-size: 1.1rem;
  color: var(--flame-ink);
  transition: transform 0.3s var(--ease);
}
.readnext a:hover::after { transform: translateX(5px); }
.readnext strong { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; color: var(--accent-deep); }
.readnext span { font-size: 0.875rem; color: var(--ink-soft); }
@media (max-width: 62rem) { .readnext { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .readnext { grid-template-columns: 1fr; } }

/* --- Patient statements: the scrolling wall -------------------------------
   Three lanes of quote cards that drift in alternating directions. The lanes
   run to the edge of the container by negative gutter margins rather than by
   100vw, which is the same width without the horizontal scrollbar that
   100vw invites, and a mask fades both ends so cards enter and leave rather
   than being sliced off at a hard border.

   The default state in this block is the still one: the row is a swipeable,
   keyboard-scrollable, snapping scroller and the duplicate pass of each lane
   is not rendered. The marquee is then added on top inside a
   prefers-reduced-motion: no-preference block. Written the other way round,
   a browser that does not understand the media feature would show a clipped
   row with two thirds of the statements unreachable; written this way the
   worst case is a row you scroll yourself. Same reasoning as the reveal
   animations further down this file.
   ------------------------------------------------------------------------ */
.wall {
  display: grid;
  gap: var(--gap);
  /* Out to the container's own padding — no wider, so this can never be the
     thing that makes the page scroll sideways. */
  margin-inline: calc(var(--gutter) * -1);
  --wall-fade: clamp(1.25rem, 6vw, 5rem);
}
.wall__row {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  border-radius: var(--radius);
}
/* The row is a tab stop so the lane can be paused, and scrolled, from the
   keyboard; it therefore needs a focus ring of its own. */
.wall__row:focus-visible { outline: 3px solid var(--accent-glow); outline-offset: 3px; }
.wall__track { display: flex; align-items: stretch; width: max-content; }

/* Cards carry their own trailing gap. This is what makes the -50% loop below
   exact — see the note on testimonialWall in layout.mjs — so it must stay a
   margin on the card and never become `gap` on the track. */
.quote {
  flex: 0 0 clamp(16rem, 78vw, 21.5rem);
  margin-right: var(--gap);
  scroll-snap-align: start;
  gap: var(--sp-4);
  /* Motion under the cursor plus a lift on hover reads as a link; there is
     nothing to click in a quote card, so it stays still. */
  cursor: default;
}
.quote[data-clone="true"] { display: none; }

/* Decorative, and painted underneath the words: an absolutely positioned
   element outranks in-flow content in paint order, so without the z-index
   pair below the glyph would sit on top of the first line of the quote. */
.quote__mark {
  position: absolute;
  z-index: 0;
  top: 0;
  right: var(--sp-4);
  font-family: var(--font-display);
  font-size: 4.5rem;
  font-weight: 700;
  line-height: 0.9;
  color: var(--accent-soft);
  opacity: 0.4;
  pointer-events: none;
}
.quote blockquote { position: relative; z-index: 1; margin: 0; }
.quote blockquote p { font-size: 0.9375rem; line-height: 1.7; color: var(--ink-mid); }

.quote__by {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: auto;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--rule);
}
/* The initial in a disc, not a stock photograph: this site publishes no
   patient images, and a purchased face beside a patient's words would be the
   one dishonest element on the page. */
.quote__monogram {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.375rem;
  height: 2.375rem;
  border-radius: 50%;
  background: var(--grad-cool);
  font-family: var(--font-label);
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
}
.quote__id { display: grid; gap: 0.0625rem; min-width: 0; }
.quote__id strong {
  font-family: var(--font-label);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.quote__id small { font-size: 0.75rem; letter-spacing: 0.02em; color: var(--ink-soft); }

/* On ink, where this section actually sits. */
.section--ink .quote blockquote p { color: #e2f1f5; }
.section--ink .quote__mark { color: var(--accent-glow); opacity: 0.3; }
.section--ink .quote__by { border-top-color: rgba(143, 224, 236, 0.22); }
.section--ink .quote__id strong { color: var(--paper); }
.section--ink .quote__id small { color: var(--accent-soft); }

@media (prefers-reduced-motion: no-preference) {
  /* Clipping and scrolling move from the row to the inner viewport, so the
     row keeps an unmasked focus ring and the page cannot be dragged sideways
     by a lane that is now moving on its own. */
  .wall__row { overflow: visible; scroll-snap-type: none; }
  .wall__view {
    overflow: hidden;
    border-radius: var(--radius);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--wall-fade), #000 calc(100% - var(--wall-fade)), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 var(--wall-fade), #000 calc(100% - var(--wall-fade)), transparent);
  }
  .quote[data-clone="true"] { display: flex; }

  /* Duration arrives per row as --wall-duration, seven seconds per card, so
     every lane moves at one pace whatever its length. */
  .wall__track { animation: wall-drift var(--wall-duration, 60s) linear infinite; }
  .wall__row[data-dir="right"] .wall__track { animation-direction: reverse; }
  /* WCAG 2.2.2: moving content that starts by itself needs a way to stop it.
     Hover covers a pointer, focus-within covers the keyboard — the row is
     itself the tab stop — and the surrounding media query covers everyone who
     has already asked their system for less motion. */
  .wall__row:hover .wall__track,
  .wall__row:focus-within .wall__track { animation-play-state: paused; }

  @keyframes wall-drift {
    to { transform: translate3d(-50%, 0, 0); }
  }
}

/* Print: no lanes, no duplicates — just the statements, three to a row.
   The ink-tone colours have to be undone by name here: they are set on
   .section--ink descendants and would otherwise beat the blanket black the
   print block at the foot of this file puts on the section. */
@media print {
  .wall__row { overflow: visible; }
  /* The no-preference block above still applies on paper — the media type is
     print but the motion preference is unchanged — so its clip, its mask and
     its animation all have to be lifted here. */
  .wall__view { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .wall__track { display: grid; grid-template-columns: repeat(3, 1fr); width: auto; animation: none; }
  .quote { margin-right: 0; break-inside: avoid; }
  .quote[data-clone="true"] { display: none; }
  .quote__mark { display: none; }
  .section--ink .quote blockquote p,
  .section--ink .quote__id strong,
  .section--ink .quote__id small { color: #000; }
  .quote__monogram { background: none; color: #000; box-shadow: inset 0 0 0 1px #999; }
}

/* --- Footer -------------------------------------------------------------- */
.footer {
  position: relative;
  background:
    radial-gradient(40rem 24rem at 84% 0%, rgba(18, 180, 201, 0.16), transparent 66%),
    radial-gradient(34rem 22rem at 6% 100%, rgba(212, 87, 15, 0.14), transparent 70%),
    linear-gradient(175deg, #08313d 0%, var(--ink) 60%, #04202a 100%);
  color: #b7d6de;
  padding-block: var(--sp-9) var(--sp-6);
}
.footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--grad-bar);
}
.footer__grid { display: grid; gap: clamp(var(--sp-6), 4vw, var(--sp-8)); grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); }
@media (max-width: 62rem) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .footer__grid { grid-template-columns: 1fr; } }
.footer .wordmark strong { color: var(--paper); }
.footer .wordmark span { color: var(--flame-bright); }
.footer p { font-size: 0.875rem; color: #9dbcc4; max-width: 34ch; }
.footer h4 {
  font-family: var(--font-label);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-soft);
  margin-bottom: var(--sp-4);
}
.footer nav { display: grid; gap: var(--sp-3); }
.footer a { color: #b7d6de; font-size: 0.9rem; text-decoration: none; }
.footer a:hover { color: var(--paper); text-decoration: underline; text-decoration-color: var(--accent-soft); }
.footer__legal { margin-top: var(--sp-8); padding-top: var(--sp-6); border-top: 1px solid rgba(143, 224, 236, 0.2); display: grid; gap: var(--sp-4); }
.footer__legal p { font-size: 0.8125rem; color: #86a9b2; max-width: 92ch; }
.footer__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4); font-size: 0.8125rem; color: #86a9b2; }
.footer__meta nav { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
.footer__meta a { font-size: 0.8125rem; }

/* --- Skip link ----------------------------------------------------------- */
.skip {
  position: absolute;
  left: var(--sp-4);
  top: var(--sp-4);
  z-index: 100;
  padding: var(--sp-2) var(--sp-4);
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius);
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.2s var(--ease);
}
.skip:focus-visible { transform: translateY(0); color: var(--paper); }

/* --- Page header (interior pages) ---------------------------------------- */
.pagehead {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(38rem 22rem at 88% -30%, rgba(18, 180, 201, 0.22), transparent 66%),
    radial-gradient(30rem 20rem at -6% 130%, rgba(255, 144, 54, 0.16), transparent 70%),
    linear-gradient(150deg, #ffffff, var(--paper-deep));
  border-bottom: 1px solid var(--rule);
}
.pagehead::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--grad-bar);
}
.pagehead h1 { letter-spacing: -0.03em; }
.pagehead .container { padding-block: clamp(2.75rem, 5vw, 4.5rem); }
.pagehead__inner { display: grid; gap: var(--sp-4); max-width: var(--measure); }
.breadcrumb { font-size: 0.8125rem; color: var(--ink-soft); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; }
.breadcrumb a { color: var(--ink-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); text-decoration: underline; }
.breadcrumb li:not(:last-child)::after { content: "/"; margin-left: var(--sp-2); color: var(--rule-strong); }

/* --- Entrance motion (once, on load, staggered) -------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(12px); animation: rise 0.7s var(--ease) forwards; }
  .reveal:nth-child(1) { animation-delay: 0.05s; }
  .reveal:nth-child(2) { animation-delay: 0.13s; }
  .reveal:nth-child(3) { animation-delay: 0.21s; }
  .reveal:nth-child(4) { animation-delay: 0.29s; }
  .reveal:nth-child(5) { animation-delay: 0.37s; }
  .reveal:nth-child(6) { animation-delay: 0.45s; }
  @keyframes rise { to { opacity: 1; transform: none; } }

  [data-anim="pending"] { opacity: 0; transform: translateY(18px); }
  [data-anim="in"] {
    opacity: 1;
    transform: none;
    transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
    transition-delay: var(--anim-delay, 0s);
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

/* --- Gradient text fallback ---------------------------------------------- */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .stats dd,
  .price-card__price,
  .hero__copy h1 em,
  .section--ink .stats dd,
  .section--ink .price-card__price {
    background: none;
    color: var(--accent-deep);
  }
  .section--ink .stats dd,
  .section--ink .price-card__price { color: var(--accent-soft); }
}

/* --- Floating WhatsApp button --------------------------------------------
   Deliberately WhatsApp's own colours rather than the site palette: the whole
   point of this control is to be recognised in a glance, and the brand disc
   does that faster than any turquoise button could. The pill behind it is the
   dark WhatsApp teal, not the bright green, because white text clears 7:1 on
   the dark tone and around 2:1 on the bright one. On phones and tablets it is
   a labelled pill; from 62rem up the label collapses and only the disc is
   left, since the topbar WhatsApp link is still on screen there.
   z-index sits below the nav scrim (40) and the masthead (50), and the button
   is pulled out of the way entirely while the mobile panel is open.
   ------------------------------------------------------------------------ */
.wa-float {
  position: fixed;
  z-index: 30;
  /* Plain values first, then the inset-aware pair, so a browser that does not
     understand env() still places the button instead of dropping the offsets
     and leaving it wherever it happened to fall in the flow. */
  right: var(--sp-4);
  right: max(var(--sp-4), env(safe-area-inset-right, 0px));
  bottom: var(--sp-4);
  bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0.3125rem var(--sp-5) 0.3125rem 0.3125rem;
  background: #075e54;
  border-radius: var(--radius-pill);
  box-shadow: 0 14px 30px -10px rgba(4, 60, 54, 0.55), 0 2px 6px rgba(6, 39, 48, 0.2);
  color: #ffffff;
  text-decoration: none;
  /* A tap target that flashes a grey box or double-fires is the fastest way
     to make a floating button feel like a banner ad. */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform 0.25s var(--ease-back), box-shadow 0.25s var(--ease);
}
.wa-float:hover { color: #ffffff; transform: translateY(-2px); box-shadow: 0 18px 36px -10px rgba(4, 60, 54, 0.6), 0 2px 6px rgba(6, 39, 48, 0.22); }
.wa-float:active { transform: translateY(0) scale(0.98); }
.wa-float:focus-visible { outline: 3px solid var(--accent-glow); outline-offset: 3px; }

.wa-float__icon {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: #25d366;
  color: #ffffff;
}
.wa-float__icon svg { display: block; }

.wa-float__text {
  display: grid;
  gap: 0.0625rem;
  font-family: var(--font-label);
  line-height: 1.2;
}
.wa-float__text strong { font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; }
.wa-float__text small { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #a7dfd6; }

/* The open mobile panel dims and scroll-locks the page behind it; the button
   goes away with the rest of the page instead of glowing under the dimmer.
   display rather than opacity on purpose — the entrance animation below fills
   opacity and transform forwards, and a filled animation outranks both. */
html.nav-locked .wa-float { display: none; }

/* Desktop: label off, disc only, and no attention pulse — the topbar already
   carries the number in words up here. */
@media (min-width: 62.0625rem) {
  .wa-float {
    right: var(--sp-5);
    bottom: var(--sp-5);
    padding: 0.3125rem;
    gap: 0;
  }
  .wa-float__text { display: none; }
}

/* Very narrow phones: keep the pill from crowding the right edge of the text
   column by dropping the second line, not by shrinking the tap target. */
@media (max-width: 22.5rem) {
  .wa-float { padding-right: var(--sp-4); }
  .wa-float__text small { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Arrives after the first screen has settled, then pings three times so it
     is noticed once and then left alone. An indefinite pulse on a fixed
     element reads as advertising. */
  .wa-float {
    opacity: 0;
    transform: translateY(0.75rem) scale(0.96);
    animation: wa-enter 0.5s var(--ease-back) 0.7s forwards;
  }
  .wa-float__icon::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6);
    animation: wa-ping 2.4s var(--ease) 1.6s 3;
  }
  /* Desktop keeps the entrance but not the ping: the topbar already states the
     number in words up there, so a pulsing disc would only be noise. */
  @media (min-width: 62.0625rem) {
    .wa-float__icon::after { animation: none; }
  }
  @keyframes wa-enter { to { opacity: 1; transform: none; } }
  @keyframes wa-ping {
    0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55); }
    70% { box-shadow: 0 0 0 0.9rem rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
  }
}

/* --- Print --------------------------------------------------------------- */
@media print {
  .masthead, .topbar, .footer, .panel, .nav-toggle, .nav-scrim, .wa-float { display: none; }
  body { background: #fff; }
  .hero, .pagehead, .section--deep, .section--ink { background: #fff !important; color: #000; }
  .hero::before, .hero::after, .hero__edge, .pagehead::after, .card::before, .credentials::before { display: none; }
  .stats dd, .price-card__price { background: none; color: #000; -webkit-text-fill-color: #000; }
  .shot { break-inside: avoid; box-shadow: none; }
  .section { padding-block: 1.5rem; border-top: 1px solid #ccc; }
}