/* ============================================================
   Hårtransplantation.dk — premium design system (v2)
   ============================================================ */
:root {
  /* Editorial Medical Authority — Danish-flag red on warm white */
  --ink: #22262B;         /* headlines, primary text */
  --ink-soft: #4A535C;    /* secondary text, lead */
  --muted: #666C74;       /* meta, captions. Darkened from #7C838C 2026-09-28: measured 3.35-3.83:1
                              on white/--bg-soft/--bg-cream (its actual usage sites), all under the
                              4.5:1 minimum. This clears 4.5:1 on all three with margin (4.64 on
                              --bg-cream, the hardest case). */
  --brand: #E4002B;       /* Danish flag red — brand, links, primary CTA */
  --brand-2: #C0001F;     /* deep red — text-on-tint, hover */
  --brand-dark: #9E0019;  /* deepest red — active, headings on tint */
  --brand-tint: #FDECEF;  /* section wash */
  --brand-tint-2: #FBD3DA;/* tint fills, hairline-on-tint */
  /* Editorial accent — a red-tinted rose for hairlines/info touches only, never a
     CTA fill. The old teal + amber are retired so the chrome speaks one language. */
  --accent: #C0001F;
  --accent-dark: #9E0019;
  --accent-tint: #FBD3DA;
  --accent-wash: #FDECEF;
  --gold: #C8A24B;        /* warm brass — award/medal accent (matches the shadow rgba these badges already used) */
  --gold-light: #E3C583;  /* lighter brass, gradient light-end for award badges/pills */
  --gold-wash: #F2E3C6;   /* soft sand — announcement bar ground, a light tint of --gold-light */
  --gold-2: #F77E93;      /* lighter rose for on-dark eyebrows/marks (unrelated to the gold/medal accent).
                              Lightened from #F5334F 2026-09-28: measured 3.96:1 on --slate and 4.45:1
                              on --slate-dark, both under 4.5:1 -- every documented use of this token is
                              on-dark, so the token itself was fixed rather than patching each site.
                              Now 6.06:1 / 6.81:1. */
  --slate: #22262B;       /* dark editorial bands */
  --slate-2: #2F353C;
  --slate-dark: #191C20;
  --bg: #ffffff;
  --bg-soft: #FBF6F5;     /* warm near-white section tint */
  --bg-cream: #F6EEED;    /* deeper warm tint / table header */
  --line: #E7E1DC;
  --line-2: #D8D1CA;
  --radius: 10px;         /* down from 16 — precision over softness */
  --radius-sm: 6px;       /* down from 10 */
  --radius-lg: 14px;      /* down from 26 */
  --shadow-s: 0 1px 2px rgba(23, 32, 40, .06);   /* resting cards → hairline+flat */
  --shadow-m: 0 6px 20px rgba(23, 32, 40, .08);  /* dropdowns */
  --shadow-l: 0 14px 34px rgba(23, 32, 40, .12); /* modals, genuine floats */
  --max: 1200px;
  /* The single frame every Blog & Articles image is cropped to — listing cards and article
     heroes alike. Change it here and the whole section follows. */
  --blog-img-ratio: 16 / 9;
  --blog-img-focus: 50% 35%;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-kicker: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font-body); color: var(--ink);
  background: var(--bg); line-height: 1.7; font-size: 17px;
  font-weight: 400; overflow-x: hidden;
}
p, li, td, th, .lead, .hero-text, .faq-answer, .clinic-highlight { font-weight: 400; }
strong, b { font-weight: 700; }
[dir="rtl"] { font-family: var(--font-body); }
/* height:auto is required now that every <img> carries width/height attributes for CLS:
   without it the attribute height survives max-width shrinking and squashes the picture. */
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand-2); text-decoration: none; text-underline-offset: .14em; }
a:hover { text-decoration: underline; text-decoration-thickness: 1.5px; }
/* Consistent, accessible keyboard focus ring in the secondary accent (zero-specificity
   so it never overrides component styling; form inputs keep their own brand ring). */
:where(a, button, summary, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
/* Serif display on all headings; sans body. Serifs carry authority at 500–600 —
   never heavier (heavy weights read as a system fallback). */
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); line-height: 1.15; font-weight: 500; letter-spacing: -.014em; }
h1, h2, h3 { text-wrap: balance; }
h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); line-height: 1.05; letter-spacing: -.02em; margin: .3em 0 .5em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.35rem); line-height: 1.12; margin: 0 0 .5em; }
h3 { font-size: 1.375rem; line-height: 1.25; letter-spacing: -.01em; font-weight: 600; }
.container { max-width: var(--max); margin: 0 auto; padding: 0 22px; }
.section { padding: clamp(64px, 9vw, 104px) 0; }
.center { text-align: center; }
/* Mono "kicker" eyebrow — a quiet clinical-data signature */
/* --brand-dark, not --brand: the base eyebrow sits on white/--bg-soft/--bg-cream depending on
   section, and --brand measured 4.24:1 on --bg-cream, under the 4.5:1 minimum (it passed on white
   and --bg-soft). --brand-dark is already documented for exactly this "text on tint" case and
   clears all three with margin (7.44:1 on --bg-cream) -- more specific .eyebrow rules elsewhere
   override this safely where a different color is actually wanted. */
.eyebrow { display: inline-block; font-family: var(--font-kicker); font-weight: 500; font-size: .72rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--brand-dark); margin-bottom: 12px; }
.eyebrow.light { color: var(--gold-2); }
/* Left-aligned editorial section heads: kicker → short red rule → serif H2 */
.section-head { max-width: 680px; margin: 0 0 40px; text-align: start; }
.section-head .eyebrow { display: block; margin-bottom: 0; }
.section-head .eyebrow::after { content: ""; display: block; width: 30px; height: 2px; background: var(--brand); margin: 12px 0 16px; }
.section-head p { color: var(--ink-soft); font-size: 1.06rem; }
.section-head p, .lead, .hero-text { text-wrap: pretty; }
.lead { font-size: 1.14rem; color: var(--ink-soft); max-width: 720px; }
.skip-link { position: absolute; left: auto; inset-inline-start: -999px; }
.skip-link:focus { inset-inline-start: 12px; top: 12px; z-index: 200; background: #fff; padding: 10px 16px; border-radius: 8px; box-shadow: var(--shadow-m); }

/* ---------- buttons ---------- */
.btn-cta, .btn-ghost, .btn-outline, .btn-wa {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: 600; font-size: .96rem;
  padding: 12px 24px; border-radius: var(--radius-sm); cursor: pointer; border: 1.5px solid transparent;
  transition: background .18s ease, border-color .18s ease, color .18s ease; text-decoration: none;
}
.btn-cta { background: var(--brand); color: #fff; }
.btn-cta:hover { background: var(--brand-2); text-decoration: none; }
.btn-ghost { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.4); }
.btn-ghost:hover { background: rgba(255,255,255,.22); text-decoration: none; }
.btn-ghost.dark { color: #fff; }
.btn-outline { background: #fff; color: var(--brand-2); border-color: var(--line-2); }
.btn-outline:hover { border-color: var(--brand); color: var(--brand-dark); text-decoration: none; background: var(--brand-tint); }
.btn-wa { background: #fff; color: #1c7a43; border-color: #cfe9d8; box-shadow: 0 4px 14px rgba(28,122,67,.12); }
/* WhatsApp's own green, for WhatsApp CTAs. The brand-red .btn-cta was invisible
   against the red cta-banner and did not read as WhatsApp anywhere else. */
.btn-wa-solid { background: #25d366; color: #fff; border-color: #25d366; }
.btn-wa-solid:hover { background: #1fbf5b; border-color: #1fbf5b; color: #fff; text-decoration: none; }
.btn-wa-solid .ic { color: #fff; }
.btn-wa:hover { background: #eefaf1; border-color: #25d366; text-decoration: none; box-shadow: var(--shadow-s); }
.btn-cta.lg, .btn-ghost.lg, .btn-outline.lg, .btn-wa.lg { padding: 15px 32px; font-size: 1.02rem; }
.btn-cta.sm, .btn-outline.sm, .btn-wa.sm { padding: 9px 16px; font-size: .86rem; }
.btn-cta.full, .btn-outline.full, .btn-wa.full { width: 100%; }
.full.sm { margin-top: 8px; }

/* ---------- header ---------- */
/* ---------- announcement bar ----------------------------------------------------------
   Sits above the sticky header in normal flow: it scrolls away, the header still pins to
   top:0, and nothing that measures header height changes. Messages are stacked in one grid
   cell so the bar keeps a single height whichever message is showing — no reflow on
   rotation, and the tallest message (which wraps on mobile) sets the box up front. */
.announce-bar { display: block; background: var(--gold-wash); color: var(--ink);
  border-bottom: 1px solid rgba(34,38,43,.10); text-decoration: none; }
.announce-bar:hover { background: #EEDCB9; text-decoration: none; }
.announce-bar:focus-visible { outline: 3px solid var(--brand); outline-offset: -3px; }
.ab-inner { max-width: var(--max); margin: 0 auto; min-height: 64px; padding: 12px 20px;
  display: flex; align-items: center; justify-content: center; gap: 12px; }
.ab-ic { width: 20px; height: 20px; flex: none; color: var(--brand); }
.ab-track { display: grid; }
.ab-msg { grid-area: 1 / 1; text-align: center; font-weight: 700; font-size: 1.02rem;
  line-height: 1.35; letter-spacing: -.005em; opacity: 0; visibility: hidden;
  transition: opacity .45s ease, transform .45s ease; transform: translateY(4px); }
.ab-msg.is-on { opacity: 1; visibility: visible; transform: none; }
@media (max-width: 900px) { .ab-msg { font-size: .96rem; } .ab-inner { min-height: 58px; } }
@media (max-width: 620px) {
  .ab-inner { min-height: 0; padding: 11px 16px; gap: 9px; }
  .ab-msg { font-size: .95rem; }        /* ~15px, wraps to two lines rather than clipping */
  .ab-ic { width: 18px; height: 18px; }
}
@media (prefers-reduced-motion: reduce) { .ab-msg { transition: none; transform: none; } }

.site-header { position: sticky; top: 0; z-index: 90; background: rgba(255,255,255,.9);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.site-header.scrolled { box-shadow: var(--shadow-s); }
/* The body column is deliberately capped at --max (1200px) for a readable line length, but
   a full-width nav bar has no such reason to share that cap, and several languages' translated
   nav labels genuinely need more than 1200px to lay out on one row without wrapping or
   overflowing. Let the header's own container grow with the viewport instead. */
.site-header .container { max-width: 1700px; }
.header-inner { display: flex; align-items: center; gap: 14px; min-height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--ink); }
.brand:hover { text-decoration: none; }
.logo-mark { width: 38px; height: 38px; flex: none; }
.brand-name { font-family: var(--font-display); font-size: 1.12rem; font-weight: 600; letter-spacing: -.02em; }
.brand-tld { color: var(--brand); }
.main-nav { margin-inline-start: auto; }
.main-nav > ul { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.main-nav a, .drop-toggle { display: inline-flex; align-items: center; gap: 5px; padding: 9px 8px; border-radius: 9px; white-space: nowrap;
  color: var(--ink-soft); font-size: .92rem; font-weight: 500; background: none; border: 0; cursor: pointer; font-family: var(--font-body); }
.main-nav a:hover, .drop-toggle:hover { background: var(--brand-tint); color: var(--brand-dark); text-decoration: none; }
.main-nav li.active > a, .main-nav li.active > .drop-toggle { color: var(--brand-dark); font-weight: 600; }
.has-drop { position: relative; }
.caret { font-size: .7rem; }
.drop-menu { position: absolute; top: calc(100% + 6px); inset-inline-start: 0; min-width: 240px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-m);
  list-style: none; margin: 0; padding: 8px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: .16s; }
.has-drop:hover .drop-menu, .has-drop.open .drop-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.drop-menu a { display: block; padding: 9px 12px; font-size: .9rem; color: var(--ink); }
.header-actions { display: flex; align-items: center; gap: 10px; }
.lang-switcher { position: relative; }
.lang-toggle { border: 1px solid var(--line-2); background: #fff; border-radius: 999px; padding: 7px 10px; font-size: .85rem; cursor: pointer; color: var(--ink-soft); font-family: var(--font-body); }
/* The desktop header's content (8 nav items + lang switcher + CTA) doesn't fit the site's
   1200px container even at wide viewports - it never gets wider than that, so there's no
   width to grow into. Dropping the language name and keeping only the flag (still a clear,
   common pattern for a language switcher) recovers the room, worst case in Arabic where
   translated nav labels run longest. */
.lang-toggle .lang-name { display: none; }
.lang-menu { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); min-width: 150px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-m); list-style: none; margin: 0; padding: 6px;
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: .16s; }
.lang-switcher.open .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-menu a { display: block; padding: 7px 12px; border-radius: 7px; font-size: .88rem; color: var(--ink); }
.lang-menu a:hover { background: var(--brand-tint); text-decoration: none; }
.lang-menu li.active a { font-weight: 700; color: var(--brand-dark); }
.flag { font-size: 1.05em; line-height: 1; }
.flag-svg { display: inline-block; width: 1.3em; height: calc(1.3em * 0.667); vertical-align: -0.15em; overflow: hidden; border-radius: 2px; border: 1px solid rgba(0,0,0,.08); background: #eee; }
.flag-svg svg { display: block; width: 100%; height: 100%; }
.rk-flag .flag-svg { width: 20px; height: 13px; margin-inline-end: 2px; vertical-align: -2px; }
.rk-flag .flag-svg + .flag-svg { margin-inline-start: 2px; }
.brand-name { font-weight: 700; letter-spacing: .01em; }
.lang-menu a { display: flex; align-items: center; gap: 8px; }
.header-cta { white-space: nowrap; padding: 10px 16px; font-size: .88rem; }
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { width: 24px; height: 2px; background: var(--ink); border-radius: 2px; transition: .2s; }

/* ---------- hero ---------- */
.hero { position: relative; background: var(--bg); color: var(--ink); overflow: hidden; border-bottom: 1px solid var(--line); }
.hero::before { content: none; }

/* ---- Hero background photograph -----------------------------------------------------
   Only active when .has-bg is present, which build.js adds solely when the image file
   exists. The photo lives in a right-hand layer rather than across the whole hero, so a
   near-square source is never stretched over a wide, short band. A white gradient sits in
   the same background shorthand ahead of the photo: opaque where the headline is, clearing
   to fully transparent by the middle of the panel. That keeps the left column pure white
   without darkening or fading the picture itself.
   Two knobs, both overridable per-page: --hero-focus (desktop crop) and --hero-focus-m. */
/* Focal point, set against the actual photograph: the surgeon sits just left of centre in
   the frame, so showing a slice biased toward the image's left places his face in the
   clear right-hand part of the panel rather than under the gradient, and pushes the
   blurred assistant out to the edge. */
.hero.has-bg { --hero-focus: 34% 30%; --hero-focus-m: 46% 26%; }
/* The photograph and its veil are two layers rather than one background shorthand, so the
   moving version can sit between them: still photo, then video, then the same white veil
   over both. Geometry is shared; only what each layer paints differs. */
.hero.has-bg::after,
.hero.has-bg .hero-veil,
.hero .hero-video {
  position: absolute; inset-block: 0; inset-inline-end: 0;
  width: min(54%, 780px); pointer-events: none;
}
.hero.has-bg::after {
  content: ""; z-index: 0;
  background-image: var(--hero-img);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: var(--hero-focus);
}
.hero.has-bg .hero-veil {
  z-index: 2;
  background-image:
    linear-gradient(to right, #fff 0%, rgba(255,255,255,.94) 16%, rgba(255,255,255,.55) 34%, rgba(255,255,255,0) 56%);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
/* Hidden (opacity 0) until site.js decides the visit qualifies, then faded in over the
   still so the switch reads as the photograph coming to life rather than a swap. Shown
   on every viewport now, including phones (owner request 2026-09-23) — reduced-motion
   is still respected below via display:none!important, since that's a stated visitor
   preference, not a device-class assumption. */
.hero .hero-video {
  z-index: 1; display: block; height: 100%; width: min(54%, 780px);
  object-fit: cover; object-position: var(--hero-focus);
  border: 0; opacity: 0; transition: opacity .9s ease;
}
.hero .hero-video.is-live { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero .hero-video { display: none !important; } }
/* Keep the copy clear of the picture so nothing important sits behind the headline.
   Type sizes are untouched — only the column the text wraps in. */
@media (min-width: 901px) { .hero.has-bg .hero-copy { max-width: 600px; } }
/* Between the two-column threshold and roughly 1180px the panel takes a larger share of a
   narrower container, so the photo starts creeping under the copy's right edge. Hold the
   white further across and trim the panel to keep the text on clean ground. */
@media (min-width: 901px) and (max-width: 1180px) {
  .hero.has-bg::after,
  .hero.has-bg .hero-veil,
  .hero .hero-video { width: 46%; }
  .hero.has-bg .hero-veil {
    background-image:
      linear-gradient(to right, #fff 0%, rgba(255,255,255,.97) 26%, rgba(255,255,255,.6) 46%, rgba(255,255,255,0) 70%);
  }
  .hero.has-bg .hero-copy { max-width: 520px; }
}

/* Below the two-column threshold the photo becomes a full-bleed wash behind the whole
   hero, veiled heavily enough that the headline keeps its contrast. The veil is held
   further down than a dim interior would need: the harbour photo is bright and busy,
   and the body copy's last lines were landing on rooftops. No band, no extra
   padding, so the hero is exactly as tall as it is today. */
@media (max-width: 900px) {
  /* The photo is full-bleed but the veil clears downward, so the picture reads properly in
     the space below the CTA row while the copy above it sits on solid white. A little extra
     bottom padding gives that band somewhere to live — ~100px, not a screen-filling hero.
     The video gets the same full-bleed + mobile-focus treatment as the still, so playback
     doesn't jump to a different crop than the poster it fades in over. */
  .hero.has-bg::after,
  .hero.has-bg .hero-veil,
  .hero .hero-video { inset: 0; width: auto; }
  .hero.has-bg::after,
  .hero .hero-video { background-position: var(--hero-focus-m); object-position: var(--hero-focus-m); }
  .hero.has-bg .hero-veil {
    background-image:
      linear-gradient(to bottom, #fff 0%, rgba(255,255,255,.98) 46%, rgba(255,255,255,.84) 62%,
                      rgba(255,255,255,.22) 80%, rgba(255,255,255,0) 94%);
    background-position: center;
  }
  .hero.has-bg .hero-grid { padding-bottom: 190px; }
}
.hero-grid { position: relative; z-index: 3; display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; padding: 76px 22px 84px; }
.hero h1 { color: var(--ink); }
.hero-text { font-size: 1.16rem; color: var(--ink-soft); max-width: 540px; }
.hero-cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin: 26px 0 30px; }
.hero-cta-row.center { justify-content: center; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 10px; }
.hero-trust { border-top: 1px solid var(--line); padding-top: 22px; }
.trust-item { display: flex; flex-direction: column; }
.trust-stat { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; color: var(--brand); }
.trust-label { font-size: .82rem; color: var(--muted); }
.hero-visual { position: relative; }
.hero-visual img { width: 100%; height: auto; filter: drop-shadow(0 30px 50px rgba(0,0,0,.35)); }
.hero-badge { position: absolute; bottom: 10px; inset-inline-start: -10px; background: #fff; color: var(--ink); border-radius: 14px;
  padding: 12px 16px; display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow-l); max-width: 260px; }
.hero-badge span { font-size: 1.6rem; }
.hero-badge strong { display: block; font-family: var(--font-display); }
.hero-badge small { color: var(--muted); font-size: .8rem; }

/* objectivity strip */
.objectivity-strip { background: var(--slate); color: #e7e9ec; }
.objectivity-strip .container { padding-top: 16px; padding-bottom: 16px; text-align: center; font-size: .96rem; }
/* Rotating variant. Same stacked-grid crossfade as the announcement bar: every slide
   occupies the same cell, so the tallest sets the band height once and rotation never
   reflows the page below it. min-height holds the band steady before fonts settle. */
.objectivity-strip[data-objectivity] .container { display: flex; align-items: center; justify-content: center; min-height: 24px; }
.obj-track { display: grid; width: 100%; }
.obj-msg { grid-area: 1 / 1; text-align: center; opacity: 0; visibility: hidden;
  transition: opacity .5s ease, transform .5s ease; transform: translateY(4px); }
.obj-msg.is-on { opacity: 1; visibility: visible; transform: none; }
@media (prefers-reduced-motion: reduce) { .obj-msg { transition: none; transform: none; } }

/* why */
.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px; }
.why-card { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 24px; transition: .18s; }
.why-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-m); border-color: var(--brand-tint-2); }
.why-ico { font-size: 1.9rem; display: inline-block; margin-bottom: 8px; }
.why-card h3 { margin: 4px 0 8px; }
.why-card p { color: var(--ink-soft); font-size: .95rem; margin: 0; }

/* detail blocks */
.detail-section { background: var(--bg-soft); }
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.detail-card { display: flex; align-items: center; gap: 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; color: var(--ink); transition: .16s; }
.detail-card:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--shadow-m); border-color: var(--brand-tint-2); }
.detail-ico { font-size: 1.7rem; flex: none; }
.detail-card h3 { margin: 0 0 3px; font-size: 1.08rem; }
.detail-card p { margin: 0; color: var(--ink-soft); font-size: .9rem; }
.detail-arrow { margin-inline-start: auto; color: var(--brand); font-weight: 700; }

/* process steps */
.process-steps { list-style: none; counter-reset: ps; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.process-step { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 22px 22px; }
.process-step::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; border-radius: var(--radius) var(--radius) 0 0; background: linear-gradient(90deg, var(--brand), var(--brand-dark)); }
.ps-num { position: absolute; top: -16px; inset-inline-start: 22px; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; box-shadow: var(--shadow-s); }
.ps-ico { font-size: 1.6rem; display: block; margin: 6px 0 8px; }
.process-step h3 { margin: 0 0 6px; font-size: 1.12rem; }
.process-step p { margin: 0; color: var(--ink-soft); font-size: .92rem; }

/* ---- Journey band -------------------------------------------------------------------
   Dark editorial band: three columns separated by hairlines rather than cards, a large
   ghost numeral sitting behind each step, and a small mono "Step N" kicker. Uses the
   site's own slate ground and brass accent; the numeral is a plain tint of white so it
   never competes with the copy. Overrides the light card treatment above. */
.process-section.is-journey { background: var(--slate); color: #D6DAE0; }
/* Harbour photograph behind the band. The scrim is painted in the same background
   shorthand, above the photo and below the content, so no extra element and no z-index
   games. It is heavy on purpose: the photo's sky is near-white, and white body copy over
   that would fail contrast. The slate colour underneath stays as the fallback, so the
   band looks exactly as it did if the image ever fails to load. */
.process-section.is-journey {
  background-image:
    linear-gradient(rgba(25,28,32,.90), rgba(25,28,32,.90)),
    url('/assets/img/journey-bg.webp');
  background-size: auto, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  /* Black-and-white like every other photograph on the site: the photo layer takes only its
     luminosity, the (near-neutral) slate underneath supplies the hue. */
  background-blend-mode: normal, luminosity;
}
.is-journey .section-head { text-align: center; max-width: 720px; margin-inline: auto; }
.is-journey .section-head h2 { color: var(--gold-light); }
.is-journey .section-head p { color: #AEB5BE; }
.is-journey .process-steps { grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 8px; }
.is-journey .process-step { position: relative; background: none; border: 0; border-radius: 0;
  padding: 34px 30px; overflow: hidden; }
.is-journey .process-step::before { display: none; }
/* Hairline grid: a right edge on every step, removed on the last of each row, and a top
   edge on everything past the first row. */
.is-journey .process-step { border-inline-end: 1px solid rgba(255,255,255,.12); }
.is-journey .process-step:nth-child(3n) { border-inline-end: 0; }
.is-journey .process-step:nth-child(n+4) { border-top: 1px solid rgba(255,255,255,.12); }
.is-journey .ps-big { position: absolute; top: 4px; inset-inline-end: 14px; z-index: 0;
  font-family: var(--font-display); font-size: 7.5rem; line-height: 1; font-weight: 700;
  color: rgba(255,255,255,.07); pointer-events: none; user-select: none; }
.is-journey .ps-kicker { position: relative; z-index: 1; display: block;
  font-family: var(--font-kicker); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.is-journey .process-step h3 { position: relative; z-index: 1; color: #fff;
  font-size: 1.42rem; line-height: 1.2; margin: 0 0 12px; max-width: 15ch; }
.is-journey .process-step p { position: relative; z-index: 1; color: #AEB5BE;
  font-size: .95rem; line-height: 1.65; }
.is-journey .ps-num, .is-journey .ps-ico { display: none; }
@media (max-width: 900px) {
  .is-journey .process-steps { grid-template-columns: repeat(2, 1fr); }
  .is-journey .process-step:nth-child(3n) { border-inline-end: 1px solid rgba(255,255,255,.12); }
  .is-journey .process-step:nth-child(2n) { border-inline-end: 0; }
  .is-journey .process-step:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.12); }
  .is-journey .ps-big { font-size: 6rem; }
}
@media (max-width: 620px) {
  .is-journey .process-steps { grid-template-columns: 1fr; }
  .is-journey .process-step { padding: 26px 4px; border-inline-end: 0 !important; }
  .is-journey .process-step + .process-step { border-top: 1px solid rgba(255,255,255,.12); }
  .is-journey .process-step h3 { font-size: 1.26rem; max-width: none; }
  .is-journey .ps-big { font-size: 5rem; top: 10px; }
}

/* cost */
.cost-section { background: var(--bg-cream); color: var(--ink); }
.cost-section .section-head p { color: var(--ink-soft); }
.cost-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.cost-item { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.cost-item strong { display: block; font-family: var(--font-display); font-size: 1.1rem; color: var(--ink); margin-bottom: 6px; }
.cost-item p { margin: 0; color: var(--ink-soft); font-size: .92rem; }
.cost-disclaimer { text-align: center; margin-top: 22px; color: var(--muted); font-size: .88rem; max-width: 760px; margin-inline: auto; }

/* faq teaser */
.faqteaser-section { background: var(--bg-cream); }
.faqteaser-list { max-width: 820px; margin: 0 auto 26px; }

/* pillars */
.pillars-section { background: var(--bg-cream); }
.pillar-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }
.pillar-card { position: relative; display: flex; flex-direction: column; gap: 8px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px 26px; color: var(--ink); overflow: hidden; transition: .18s; }
.pillar-card::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--brand), var(--gold)); transform: scaleX(0); transform-origin: left; transition: .25s; }
.pillar-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-m); border-color: var(--brand-tint-2); text-decoration: none; }
.pillar-card:hover::after { transform: scaleX(1); }
.pillar-num { font-family: var(--font-display); font-weight: 700; color: var(--gold); font-size: 1.05rem; }
.pillar-card h3 { margin: 0; }
.pillar-card p { margin: 0; color: var(--ink-soft); font-size: .93rem; flex: 1; }
.card-cta { color: var(--brand-dark); font-weight: 600; font-size: .9rem; }

/* before/after */
.ba-section { background: linear-gradient(160deg, var(--slate), var(--slate-dark)); color: #e7e9ec; }
.ba-section h2 { color: #fff; } .ba-section .eyebrow { color: var(--gold-2); } .ba-section .section-head p { color: #c3c8ce; }
.ba-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.ba-slider { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-l); aspect-ratio: 4/3; background: #123; }
.ba-slider img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-before { position: absolute; inset: 0; width: 50%; overflow: hidden; border-inline-end: 2px solid #fff; }
.ba-before img { width: 200%; max-width: none; }
.ba-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.ba-handle { position: absolute; top: 0; bottom: 0; inset-inline-start: 50%; width: 40px; transform: translateX(-50%); pointer-events: none;
  display: flex; align-items: center; justify-content: center; }
.ba-handle::before { content: "⟺"; background: #fff; color: var(--brand-2); width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-m); font-size: 1rem; }
.ba-tag { position: absolute; bottom: 12px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: rgba(0,0,0,.55); color: #fff; padding: 4px 10px; border-radius: 999px; }
.ba-tag-before { inset-inline-start: 12px; } .ba-tag-after { inset-inline-end: 12px; }
.ba-note { text-align: center; margin-top: 22px; font-size: .82rem; color: #a9c6bd; }

/* Homepage results teaser. Six featured cases from data.results.cases on the dark slate
   band: 3 columns on desktop, 2 on tablet, 1 on mobile. Card image boxes share one 4:3
   ratio with object-fit: contain so nothing is cropped into either half of a before|after
   frame, and every card is the same height regardless of source aspect ratio. */
/* Light band. Cards follow the site's light-section convention — hairline border, flat
   resting shadow — rather than the heavy drop shadow they needed to lift off the old
   dark ground. */
.results-teaser { background: var(--bg); color: var(--ink); }
.results-teaser h2 { color: var(--ink); }
.results-teaser .eyebrow { color: var(--brand); }
.results-teaser .section-head p { color: var(--ink-soft); }
.rc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.rc-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-s);
  color: var(--ink); text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
.rc-card:hover, .rc-card:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-m);
  border-color: var(--line-2); }
.rc-shot { position: relative; display: block; background: #f3eeee; }
.rc-shot img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 30%; background: #f3eeee; }
.rc-tags { position: absolute; inset-inline: 0; bottom: 0; display: block; pointer-events: none; }
.rc-body { display: block; padding: 16px 18px 18px; border-top: 1px solid var(--line); }
.rc-name { display: block; font-family: var(--font-serif); font-size: 1.08rem; line-height: 1.3; color: var(--ink); }
.rc-meta { display: block; margin-top: 4px; font-size: .88rem; color: var(--muted); }
.results-teaser .center { margin-top: 30px; }
.results-teaser .ba-note { max-width: 760px; margin-inline: auto; line-height: 1.6; color: var(--muted); }
@media (max-width: 1000px) { .rc-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (max-width: 620px)  { .rc-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .rc-card { transition: none; } .rc-card:hover { transform: none; } }

/* clinics teaser */
.clinics-teaser { background: var(--bg-soft); }
.mini-clinics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 26px; }
@media (max-width: 900px) { .mini-clinics { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .mini-clinics { grid-template-columns: 1fr; } }
.mini-clinic { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 18px; display: flex; flex-direction: column; gap: 4px; }
.mini-clinic.featured { border-color: var(--gold); box-shadow: 0 8px 22px rgba(200,162,75,.18); }
.mini-clinic .rank { font-family: var(--font-display); font-weight: 700; color: var(--gold); }
.mini-clinic strong { font-size: 1.05rem; }
.mini-clinic span:last-child { color: var(--muted); font-size: .85rem; }

/* clinic finder */
.finder { background: linear-gradient(135deg, var(--slate-2), var(--slate-dark)); color: #fff; }
.finder:not(.embedded) { padding: 66px 0; }
.finder .finder-inner { max-width: var(--max); margin: 0 auto; padding: 0 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.finder.embedded { background: none; color: var(--ink); }
.finder.embedded .finder-inner { grid-template-columns: 1fr; padding: 0; gap: 0; }
.finder.embedded .finder-copy { display: none; }
.finder-copy h2 { color: #fff; }
.finder-copy p { color: #cdd2d8; }
.finder-usps { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 8px; }
.finder-usps li { color: #e7e9ec; font-size: .95rem; }
.finder-form { background: #fff; border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-l); color: var(--ink); }
.finder.embedded .finder-form { box-shadow: var(--shadow-m); }

/* forms */
.lead-form label { display: block; font-size: .82rem; font-weight: 600; color: var(--ink-soft); margin: 12px 0 5px; }
.lead-form .opt { font-weight: 400; color: var(--muted); }
.lead-form input, .lead-form select, .lead-form textarea {
  width: 100%; padding: 11px 13px; border: 1.5px solid var(--line-2); border-radius: 10px; font: inherit; font-size: .95rem; background: #fff; color: var(--ink);
}
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.lead-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lead-form .row2 label { margin-top: 12px; }
.lead-form button[type=submit] { margin-top: 18px; }
.lead-form .upload { border: 1.5px dashed var(--line-2); border-radius: 10px; padding: 12px; margin-top: 14px; cursor: pointer; }

/* Photo upload, shared by all three lead forms. The urge line leads with the reason, so the
   ask reads as helpful rather than as one more optional field at the bottom of the form. */
.photo-field { margin-top: 16px; }
.photo-urge { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 10px;
  background: color-mix(in srgb, var(--gold-light) 26%, transparent);
  border-inline-start: 3px solid var(--gold); border-radius: 8px;
  padding: 10px 12px; font-size: .92rem; line-height: 1.5; color: var(--ink); }
.photo-urge .ic { width: 18px; height: 18px; color: var(--gold); flex: none; margin-top: 1px; }
.photo-field .upload { display: block; margin-top: 0; text-align: center; transition: border-color .15s, background .15s; }
.photo-field .upload:hover { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 4%, transparent); }
/* The input is hidden but still focusable and still wrapped by the label, so click and keyboard
   both work; the ring is drawn on the box instead of on the invisible input. */
.photo-field .upload:focus-within { border-color: var(--brand); outline: 2px solid var(--brand); outline-offset: 2px; }
.photo-field .upload input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.upload-btn { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--brand); font-size: .95rem; }
.upload-btn .ic { width: 17px; height: 17px; color: currentColor; margin: 0; }
.upload-hint { display: block; margin-top: 5px; font-size: .82rem; color: var(--muted); line-height: 1.45; }
.upload-picked { margin: 8px 0 0; font-size: .85rem; color: var(--ink-soft); word-break: break-word; }
.upload-picked strong { font-weight: 600; color: var(--ink); }
/* On the dark plan band the dashed box and helper text need to lift off the background. */
.plan-band .photo-urge { background: rgba(255,255,255,.09); color: #F2ECE8; }
.plan-band .photo-field .upload { border-color: rgba(255,255,255,.32); }
.plan-band .photo-field .upload:hover { border-color: #fff; background: rgba(255,255,255,.06); }
.plan-band .upload-btn { color: #fff; }
.plan-band .upload-hint, .plan-band .upload-picked { color: rgba(255,255,255,.72); }
.plan-band .upload-picked strong { color: #fff; }
.consent { font-size: .74rem; color: var(--muted); margin: 10px 0 0; }
/* submit result. Replaces the old WhatsApp tab-open as the only "it worked" signal, so it has
   to be visible on both the light forms and the dark .plan-band. */
.form-status { margin: 12px 0 0; font-size: .88rem; line-height: 1.5; }
.form-status[hidden] { display: none !important; }
.form-status.is-ok { color: #1B7A4B; font-weight: 600; }
.form-status.is-err { color: var(--brand-dark); font-weight: 600; }
.form-status a { color: inherit; text-decoration: underline; }
.plan-band .form-status.is-ok { color: #7BD8A6; }
.plan-band .form-status.is-err { color: #FF9BA8; }
.finder .form-status.is-ok { color: #1B7A4B; }
.finder .form-status.is-err { color: var(--brand-dark); }

/* homepage lead-capture band -- dark ground, copy left, short form right.
   Sits after the generic .lead-form rules on purpose: it re-skins the same form
   component for a dark background, so every override is scoped to .plan-band. */
.plan-band { background: var(--slate); color: #D6DAE0; }
/* Consultation photograph behind the band. The scrim is painted in the same background
   shorthand, above the photo and below the content. It is graded across the width rather
   than flat: the copy sits on the left, so the picture is allowed to read there, while the
   right side — where the form's inputs, dropzone and consent line live — is held close to
   solid slate. The slate colour underneath stays as the fallback, so the band renders
   exactly as before if the image fails to load. */
.plan-band {
  background-image:
    linear-gradient(to right, rgba(25,28,32,.84) 0%, rgba(25,28,32,.88) 38%,
                    rgba(25,28,32,.95) 62%, rgba(25,28,32,.96) 100%),
    url('/assets/img/plan-bg.webp');
  /* The band is ~1.53 and the photograph 1.50, so cover barely crops and the subject lands
     squarely behind the form. Scaled to 125% and shifted instead, which brings him into the
     gap between the copy and the form panel where the scrim is lightest. */
  background-size: auto, 125% auto;
  background-position: center, 72% 34%;
  background-repeat: no-repeat, no-repeat;
  /* Black-and-white, same as the journey band above. */
  background-blend-mode: normal, luminosity;
}
/* One column below 900px: the form no longer sits to the right, so the graded scrim would
   veil the wrong half. Flat and heavier instead, since the form spans the full width. */
@media (max-width: 900px) {
  .plan-band {
    background-image:
      linear-gradient(rgba(25,28,32,.93), rgba(25,28,32,.93)),
      url('/assets/img/plan-bg.webp');
    background-size: auto, cover;
    background-position: center, 58% 30%;
  }
}
.plan-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.plan-copy .eyebrow { color: var(--gold); }
.plan-copy h2 { color: #fff; margin: 6px 0 0; }
.plan-rule { display: block; width: 74px; height: 2px; background: var(--gold); margin: 20px 0 22px; }
.plan-copy p { color: #AEB5BE; font-size: 1rem; line-height: 1.7; margin: 0 0 14px; }
.plan-copy p:last-child { margin-bottom: 0; }

.plan-band .plan-form { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius-lg); padding: 30px; }
.plan-band .plan-form label { font-size: .84rem; font-weight: 500; color: #AEB5BE; margin: 16px 0 6px; }
.plan-band .plan-form > label:first-of-type { margin-top: 0; }
.plan-band .plan-form input, .plan-band .plan-form select {
  background: rgba(255,255,255,.07); border: 1.5px solid rgba(255,255,255,.14); color: #fff; }
.plan-band .plan-form option { color: var(--ink); background: #fff; }
.plan-band .plan-form input:focus, .plan-band .plan-form select:focus {
  border-color: var(--gold); box-shadow: 0 0 0 3px rgba(200,162,75,.28); }
.plan-tel { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 12px; }
.plan-tel label { margin-top: 16px; }

.plan-band .plan-consent { display: flex; align-items: flex-start; gap: 10px; font-size: .84rem;
  font-weight: 400; line-height: 1.55; color: #AEB5BE; margin: 20px 0 0; }
.plan-band .plan-consent input { width: auto; flex: none; margin-top: 2px; padding: 0;
  accent-color: var(--brand); }
.plan-band .plan-consent a { color: var(--gold-light); }
.plan-band .plan-form button[type=submit] { width: 100%; margin-top: 20px; }
.plan-fine { margin: 14px 0 0; font-size: .8rem; line-height: 1.5; color: #8A929B; text-align: center; }
/* Nudged up from #8A929B. That read 4.83:1 on the flat slate band; behind the photograph
   it measured 4.45:1, just under AA, because this line sits inside the form panel and picks
   up its 4% white tint on top of the scrim. #9AA2AB puts it back at 5.4:1. */
.plan-band .plan-fine { color: #9AA2AB; }

@media (max-width: 900px) {
  .plan-inner { grid-template-columns: 1fr; gap: 32px; }
  .plan-band .plan-form { padding: 24px; }
}
@media (max-width: 460px) { .plan-tel { grid-template-columns: 1fr; } }

/* cta banner */
.cta-banner { background: var(--brand); color: #fff; text-align: center; padding: 60px 0; border-block: 1px solid var(--brand-dark); }

/* ---------- CTA card (homepage, under "why us") ----------
   A single warm wash rather than the reference's metallic gradient: the site's
   locked direction is flat editorial cards, so this stays inside the existing
   cream/rose tints and keeps the hairline border. */
.cta-card-section { padding-top: 0; }
.cta-card {
  position: relative; text-align: center; border-radius: 18px; overflow: hidden;
  padding: 56px 30px 52px;
  background: linear-gradient(135deg, var(--bg-cream) 0%, var(--brand-tint) 62%, var(--brand-tint-2) 100%);
  border: 1px solid var(--line-2); box-shadow: var(--shadow-s);
}
.cta-card .eyebrow { color: var(--brand-2); margin-bottom: 14px; }
.cta-card h2 { margin: 0 0 14px; color: var(--ink); font-size: clamp(1.6rem, 1.05rem + 2.2vw, 2.55rem); line-height: 1.14; }
.cta-card p { margin: 0 auto; max-width: 600px; color: var(--ink-soft); font-size: 1.06rem; text-wrap: pretty; }
.cta-card .cta-card-btn { margin-top: 28px; border-radius: 999px; padding-inline: 38px; }
.cta-card .cta-card-fine { margin-top: 18px; font-size: .84rem; color: var(--muted); }
@media (max-width: 640px) {
  .cta-card { padding: 40px 20px 38px; border-radius: 14px; }
  .cta-card .cta-card-btn { width: 100%; padding-inline: 20px; }
}
.cta-banner h2 { color: #fff; } .cta-banner p { color: #f3dede; max-width: 620px; margin: 0 auto 22px; }

/* ---------- article layout ---------- */
.page-layout { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 52px; padding-top: 34px; padding-bottom: 72px; }
.page-article { max-width: 800px; }
.breadcrumb { font-size: .84rem; color: var(--muted); margin-bottom: 14px; }
.breadcrumb a { color: var(--muted); } .breadcrumb span { margin: 0 6px; }
/* Body copy in the brand ink. It was #2f3f3a, a green-grey left over from the retired teal
   palette, which read muddy against the warm red and white. */
.page-article p { color: var(--ink); }
.content-section h2 { border-top: 1px solid var(--line); padding-top: 26px; margin-top: 2em; }
.content-section:first-of-type h2 { border-top: 0; padding-top: 0; margin-top: 1em; }
.content-section ul { padding-inline-start: 22px; } .content-section li { margin: 5px 0; }
.page-article table { width: 100%; border-collapse: collapse; margin: 22px 0; font-size: .92rem; box-shadow: var(--shadow-s); border-radius: 12px; overflow: hidden; table-layout: auto; }
/* Mobile: shrink padding and let cells wrap so 2- and 3-column tables fit at 375px
   without horizontal scroll. Wider tables (5+ cols) should be wrapped in .tbl-wrap
   to opt into a scrollable container. */
@media (max-width: 640px) {
  .page-article table { font-size: .84rem; }
  .page-article table th, .page-article table td { padding: 8px 10px; min-width: 0; word-break: normal; overflow-wrap: anywhere; }
  .tbl-wrap table { min-width: 0; }
}
.page-article thead { background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; }
.page-article th, .page-article td { padding: 12px 14px; text-align: start; border-bottom: 1px solid var(--line); min-width: 120px; }
.page-article tbody tr:nth-child(even) { background: var(--bg-soft); }
.page-article tbody tr { transition: background .12s ease; }
.page-article tbody tr:hover td { background: var(--accent-wash); }
/* Arabic: cursive script must not be letterspaced/uppercased monospace */
[dir="rtl"] .eyebrow, [dir="rtl"] .section-nav a, [dir="rtl"] .spoke-label, [dir="rtl"] .drop-group-label,
[dir="rtl"] .key-takeaways > strong:first-child, [dir="rtl"] .deep-dive strong, [dir="rtl"] .re-abstract strong,
[dir="rtl"] .re-article > .re-tags .re-tag { font-family: var(--font-body); letter-spacing: 0; text-transform: none; }
/* Long-form readability: cap the text measure in article columns */
.page-article p, .page-article li { max-width: 68ch; }
/* "Other well-known clinics" reference directory on the clinics page */
.cr-others { border-top: 1px solid var(--line); }
.cr-note { color: var(--muted); font-size: .92rem; max-width: 68ch; margin: 6px 0 22px; }
.cr-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px 26px; }
.cr-entry { border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; scroll-margin-top: 126px; }
.cr-entry h3 { font-size: 1.05rem; margin: 0 0 2px; }
.cr-loc { font-family: var(--font-kicker); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 8px; }
.cr-entry p { font-size: .92rem; line-height: 1.55; margin: 0 0 8px; }
.cr-entry p:last-child { margin-bottom: 0; }
[dir="rtl"] .cr-loc { font-family: var(--font-body); letter-spacing: 0; text-transform: none; }
/* Parent -> child guide links (spoke rows) */
.spoke-links { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 4px 0 22px; padding: 12px 0 10px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.spoke-label { font-family: var(--font-kicker); font-weight: 500; font-size: .66rem; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); white-space: nowrap; }
.spoke-links ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 0; padding: 0; }
.spoke-links a { display: inline-block; padding: 5px 11px; border: 1px solid var(--line-2); border-radius: 999px; font-size: .84rem; color: var(--ink-soft); text-decoration: none; }
.spoke-links a:hover { border-color: var(--brand); color: var(--brand-dark); background: var(--brand-tint); }
/* On-page section nav: one shared bar under the heading of every content template */
.section-nav { position: sticky; top: 73px; z-index: 40; background: rgba(255,255,255,.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 16px 0 26px; }
.section-nav { display: flex; align-items: stretch; gap: 4px; }
.section-nav ul { list-style: none; display: flex; flex-wrap: nowrap; gap: 2px; margin: 0; padding: 0; flex: 1 1 auto; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.section-nav ul::-webkit-scrollbar { display: none; }
/* Opened: the full list wraps, so every name is readable at once. */
.section-nav.is-open ul { flex-wrap: wrap; overflow: visible; }
/* Closed shows the short name; opened shows the complete heading. */
.sn-full { display: none; }
.section-nav.is-open .sn-short { display: none; }
.section-nav.is-open .sn-full { display: inline; }
/* Opened, an item must be allowed to shrink and wrap, or a long heading runs past the edge on a
   narrow screen — the very clipping this control exists to avoid. */
.section-nav.is-open a { white-space: normal; }
.section-nav.is-open li { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.section-nav-toggle { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; margin-top: 7px;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 999px; margin-inline-start: 6px;
  padding: 4px 8px 4px 9px; cursor: pointer; color: var(--ink-soft); font-family: var(--font-kicker); }
.section-nav-toggle:hover { border-color: var(--brand); color: var(--brand); }
.section-nav-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.section-nav-toggle .ic { width: 15px; height: 15px; transition: transform .18s; }
.section-nav.is-open .section-nav-toggle .ic { transform: rotate(180deg); }
.sn-count { font-size: .68rem; font-weight: 600; letter-spacing: .04em; }
.section-nav ul::-webkit-scrollbar { display: none; }
.section-nav li { flex: 0 0 auto; }
.section-nav a { display: block; padding: 11px 12px 9px; font-family: var(--font-kicker); font-weight: 500; font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-soft); white-space: nowrap; text-decoration: none; border-bottom: 2px solid transparent; }
.section-nav a:hover { color: var(--brand); border-bottom-color: var(--brand); }
.section-nav a.is-active { color: var(--brand); border-bottom-color: var(--brand); }
/* The fade marks genuinely off-screen content and nothing else: only while the row is closed AND
   actually scrolled away from that edge. It used to be painted unconditionally, which dimmed the
   last item on every page even when the whole row fitted. */
.section-nav:not(.is-open).has-more-end ul { -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent); mask-image: linear-gradient(90deg, #000 90%, transparent); }
.section-nav:not(.is-open).has-more-start ul { -webkit-mask-image: linear-gradient(270deg, #000 90%, transparent); mask-image: linear-gradient(270deg, #000 90%, transparent); }
.section-nav:not(.is-open).has-more-start.has-more-end ul { -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
[dir="rtl"] .section-nav:not(.is-open).has-more-end ul { -webkit-mask-image: linear-gradient(270deg, #000 90%, transparent); mask-image: linear-gradient(270deg, #000 90%, transparent); }
[dir="rtl"] .section-nav:not(.is-open).has-more-start ul { -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent); mask-image: linear-gradient(90deg, #000 90%, transparent); }
.page-toc { position: sticky; top: 96px; align-self: start; font-size: .9rem; }
.toc-title { font-weight: 700; text-transform: uppercase; font-size: .72rem; letter-spacing: .12em; color: var(--muted); margin: 0 0 10px; }
.page-toc > ul { list-style: none; margin: 0 0 20px; padding: 0 0 0 14px; border-inline-start: 2px solid var(--brand-tint-2); }
.page-toc li { margin: 7px 0; } .page-toc a { color: var(--ink-soft); }
.page-toc .btn-cta, .page-toc .btn-cta:hover { color: #fff; }
.toc-cta { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.toc-cta p { font-weight: 600; margin: 0 0 10px; font-size: .92rem; }

/* faq */
.faq-section { margin-top: 44px; } .faq-section > h2 { border-top: 2px solid var(--brand); padding-top: 20px; }
/* FAQ as hairline rows, not a stack of boxed cards (redesign 2026-09-24): questions read as a
   list you can scan, set in the display serif like every other question on the page. */
.faq-item { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; margin: 0; background: none; overflow: hidden; }
.faq-section > h2 + .faq-item, .faq-group > h2 + .faq-item { border-top: 1px solid var(--line); }
.faq-item summary { cursor: pointer; padding-block: 18px; padding-inline: 0 44px; font-family: var(--font-display); font-weight: 600;
  font-size: 1.1rem; line-height: 1.35; color: var(--ink); position: relative; list-style: none; }
.faq-item summary:hover { color: var(--brand-2); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%); font-family: var(--font-body); font-size: 1.5rem; color: var(--brand); font-weight: 300; }
.faq-item[open] summary::after { content: "−"; }
.faq-answer { padding: 0 0 20px; color: var(--ink-soft); font-size: 1rem; max-width: 66ch; }
.faq-page .faq-group { margin-bottom: 34px; }
.faq-page .faq-group > h2 { font-size: 1.4rem; }
/* Closing call to action: flat warm ground with the red rule on top, no gradient (brand rule). */
.inline-cta { display: flex; align-items: center; gap: 18px; justify-content: space-between; flex-wrap: wrap;
  background: var(--bg-soft); border: 1px solid var(--line); border-top: 3px solid var(--brand); border-radius: var(--radius); padding: 24px 26px; margin: 44px 0 0; }
.inline-cta strong { font-family: var(--font-display); font-size: 1.15rem; } .inline-cta p { margin: 4px 0 0; color: var(--ink-soft); font-size: .92rem; }

/* page hero (secondary) - flat tint, no gradient (brand rule); matches .hub-hero's own flat override below */
.page-hero { background: var(--bg-soft); border-bottom: 1px solid var(--line); padding: 44px 0 40px; }
.page-hero h1 { margin: 6px 0 12px; }

/* clinics page */
.clinics-list { display: grid; gap: 18px; max-width: 900px; margin: 0 auto; }
.clinic-card { position: relative; display: grid; grid-template-columns: 84px 1fr; gap: 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-s); }
.clinic-card.featured { border: 2px solid var(--gold); background: linear-gradient(135deg, #fffdf6, #fff); box-shadow: 0 14px 40px rgba(200,162,75,.22); }
.clinic-flag { position: absolute; top: -12px; inset-inline-start: 26px; background: linear-gradient(135deg, var(--gold-light), var(--gold)); color: #2a220e; font-weight: 700; font-size: .78rem; padding: 5px 14px; border-radius: 999px; }
.clinic-rank { font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; color: var(--gold); }
.clinic-card:not(.featured) .clinic-rank { color: var(--line-2); }
.clinic-body h3 { margin: 0 0 4px; }
.clinic-highlight { color: var(--ink-soft); font-size: .95rem; margin: 0 0 12px; }
.clinic-criteria { list-style: none; padding: 0; margin: 0 0 14px; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 4px 16px; }
.clinic-criteria li { font-size: .86rem; color: var(--ink-soft); }
.clinic-pending { font-size: .84rem; color: var(--muted); font-style: italic; }
.clinic-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.clinic-logo { flex: none; width: 84px; height: 56px; border-radius: 10px; border: 1px solid var(--line); background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.clinic-card.featured .clinic-logo { width: 132px; height: 54px; border-color: var(--brand-tint-2); background: #fff; padding: 6px; }
.clinic-logo-img { max-width: 100%; max-height: 100%; object-fit: contain; }
.clinic-wordmark { font-family: var(--font-display); font-weight: 700; font-size: .82rem; line-height: 1.05; text-align: center; color: var(--brand-2); padding: 4px; }
.clinic-head-text h3 { margin: 0; }
.clinic-tagline { font-size: .82rem; color: var(--muted); }
.clinic-photo { width: 100%; height: 180px; object-fit: cover; border-radius: 12px; margin: 4px 0 14px; }
.clinic-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.clinic-price { margin-inline-start: auto; text-align: end; flex: none; min-width: 0; }
.clinic-price span { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.clinic-price strong { font-family: var(--font-display); font-size: 1.05rem; color: var(--brand-dark); overflow-wrap: anywhere; }
.clinic-card.featured .clinic-price strong { color: var(--brand); }

/* Mobile: long price strings ("~$13,400 (est. €2,3-2,9 per graft)") were pushing out of the
   .clinic-head flex row on narrow viewports. Stack price below the logo+name pair, let it wrap. */
@media (max-width: 640px) {
  .clinic-head { flex-wrap: wrap; row-gap: 10px; }
  .clinic-head-text { flex: 1 1 auto; min-width: 0; }
  .clinic-head-text h3 { overflow-wrap: anywhere; }
  .clinic-price { margin-inline-start: 0; text-align: start; flex: 1 1 100%; }
  .clinic-price strong { font-size: 1rem; }
}

/* 3D consultation widget */
.consult { padding: 34px 0; }
.consult-inner { display: grid; grid-template-columns: 1.55fr 1fr; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-m); max-width: 1060px; margin: 0 auto; }
.consult-form-wrap { padding: 26px 30px; }
.consult-form-wrap > h2 { font-size: 1.28rem; margin: 0 0 16px; }
.consult-steps { display: flex; align-items: flex-start; list-style: none; padding: 0; margin: 0 0 18px; }
.consult-steps li { display: flex; flex-direction: column; align-items: center; gap: 5px; position: relative; flex: 1; color: var(--muted); font-size: .76rem; text-align: center; }
.consult-steps li span { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--line-2); display: flex; align-items: center; justify-content: center; font-weight: 700; background: #fff; color: var(--muted); z-index: 1; font-size: .9rem; }
.consult-steps li.active { color: var(--brand); }
.consult-steps li.active span { border-color: var(--brand); color: var(--brand); background: var(--brand); }
.consult-steps li.active span { color: #fff; }
.consult-steps li:not(:last-child)::after { content: ""; position: absolute; top: 15px; inset-inline-start: calc(50% + 20px); inset-inline-end: calc(-50% + 20px); height: 2px; background: var(--line-2); }
.consult-steps li.active:not(:last-child)::after { background: var(--brand); }
.consult-nav { display: flex; gap: 12px; margin-top: 18px; }
.consult-nav.end { justify-content: flex-end; }
.consult-nav button { flex: 1; }
.consult-nav.end button { flex: none; min-width: 200px; }
.consult-panel { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--brand), var(--brand-dark)); color: #fff; padding: 26px; display: flex; flex-direction: column; }
/* clinic photo behind the brand gradient; kept low so the white text stays legible */
.cp-bg { position: absolute; inset: 0; background-image: url('/assets/img/clinic-bg-panel.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; opacity: .22; filter: grayscale(.4); pointer-events: none; z-index: 0; }
/* The full-width panel is roughly 2.8:1, so the 1.29 crop would lose half the
   photo. It gets a crop cut to its own shape instead. */
.in-article-consult .cp-bg { background-image: url('/assets/img/clinic-bg-wide.jpg'); }
.consult-panel > *:not(.cp-bg) { position: relative; z-index: 1; }
.consult-panel h3 { font-size: 1.2rem; }
.consult-wa, .consult-ms { padding: 12px; }
.consult-panel h3 { color: #fff; text-align: center; margin: 0 0 16px; }
.consult-online { text-align: center; color: #fff; margin: 0 0 20px; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; }
.consult-online .dot { width: 10px; height: 10px; border-radius: 50%; background: #3ee06e; box-shadow: 0 0 0 4px rgba(62,224,110,.25); }
.consult-referral { text-align: center; color: #fff; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18); border-radius: 10px; padding: 10px 12px; margin: 0 0 16px; font-size: .82rem; line-height: 1.45; }
.consult-wa, .consult-ms { display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 700; padding: 14px; border-radius: 12px; color: #fff; margin-bottom: 12px; }
.consult-wa { background: #25d366; } .consult-wa:hover { background: #1fbf5b; text-decoration: none; }
.consult-ms { background: #0084ff; } .consult-ms:hover { background: #0072db; text-decoration: none; }
.consult-wa .ic, .consult-ms .ic { width: 20px; height: 20px; color: #fff; }
.consult-apps { display: flex; gap: 10px; justify-content: center; margin: 8px 0; }
.app-badge { background: #14171b; color: #fff; padding: 9px 14px; border-radius: 9px; font-size: .85rem; font-weight: 600; }
.app-badge:hover { text-decoration: none; opacity: .9; }
.consult-note { text-align: center; color: rgba(255,255,255,.9); font-size: .84rem; margin-top: auto; padding-top: 14px; }
.in-article-consult { margin: 30px 0; }
.in-article-consult .consult { padding: 0; }
.in-article-consult .consult-inner { grid-template-columns: 1fr; max-width: none; }
/* Full width, so the stack is centred in the frame and held to a readable
   measure rather than stretching the whole way across. */
.in-article-consult .consult-panel { align-items: center; justify-content: center; padding-block: 32px; }
.in-article-consult .consult-panel > *:not(.cp-bg) { width: 100%; max-width: 520px; }
.in-article-consult .consult .container { padding: 0; }

/* awards */
.awards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.award-card { display: flex; gap: 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-s); }
.award-badge { flex: none; width: 62px; height: 62px; border-radius: 50%; background: linear-gradient(135deg, var(--gold-light), var(--gold)); color: #2a220e; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 1.5rem; box-shadow: var(--shadow-s); }
.award-badge span { font-family: var(--font-body); font-size: .6rem; font-weight: 700; }
.award-card h3 { margin: 0 0 2px; font-size: 1.1rem; }
.award-org { color: var(--brand); font-weight: 600; font-size: .85rem; margin: 0 0 6px; }
.award-card p { margin: 0; color: var(--ink-soft); font-size: .9rem; }

/* contact */
.contact-grid { display: grid; grid-template-columns: 340px 1fr; gap: 40px; align-items: start; }
.contact-channels { display: grid; gap: 12px; }
.channel { display: flex; gap: 14px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px 18px; color: var(--ink); }
.channel:hover { border-color: var(--brand-tint-2); box-shadow: var(--shadow-s); text-decoration: none; }
.channel span { font-size: 1.5rem; } .channel strong { display: block; } .channel small { color: var(--muted); }
.channel.info { cursor: default; }
.contact-form-wrap h2 { margin-bottom: 16px; }
.finder.embedded.contact .finder-form { max-width: 640px; }

/* forum */
.forum-list { display: grid; gap: 14px; max-width: 900px; margin: 0 auto; }
.forum-cat { display: grid; grid-template-columns: 56px 1fr auto; gap: 18px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px; box-shadow: var(--shadow-s); }
.forum-ico { font-size: 1.8rem; text-align: center; }
.forum-cat h3 { margin: 0 0 3px; } .forum-cat p { margin: 0; color: var(--ink-soft); font-size: .9rem; }
.forum-meta { margin-top: 6px; font-size: .8rem; color: var(--muted); }
.forum-note { text-align: center; margin-top: 26px; color: var(--muted); font-size: .88rem; }

/* blog */
.blog-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.blog-chip { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--line-2); border-radius: 999px; padding: 7px 14px; font-size: .86rem; font-weight: 600; color: var(--ink-soft); }
.blog-chip:hover { border-color: var(--brand); color: var(--brand-dark); text-decoration: none; }
.blog-chip span { background: var(--brand-tint); color: var(--brand-dark); border-radius: 999px; padding: 0 7px; font-size: .75rem; }
.blog-cat { margin-bottom: 44px; scroll-margin-top: 90px; }
.blog-cat-head { display: flex; align-items: center; gap: 10px; font-size: 1.5rem; padding-bottom: 12px; border-bottom: 2px solid var(--brand-tint-2); margin-bottom: 22px; }
.blog-cat-count { font-family: var(--font-body); font-size: .8rem; font-weight: 700; background: var(--brand-tint); color: var(--brand-dark); border-radius: 999px; padding: 2px 10px; }
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.blog-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; color: var(--ink); box-shadow: var(--shadow-s); transition: .18s; }
.blog-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-m); text-decoration: none; }
/* ---- Blog & Articles image standard ------------------------------------------------
   Every image in this section is framed at one ratio, --blog-img-ratio (16/9), whatever
   the source file's own proportions are. The 94 cover files run from 0.56 (portrait) to
   3.04 (ultra-wide), so the ratio is set on the <img> itself and object-fit crops to it.
   Putting it on the img rather than the wrapper matters: a wrapper ratio plus height:100%
   on the child is a cyclic size, which browsers resolve to the image's own ratio — that is
   exactly what used to make the cards different heights once they lazy-loaded in.
   object-position sits slightly above centre because faces and hairlines, the subject of
   nearly every cover here, sit in the upper half of the frame. */
.blog-cover { aspect-ratio: var(--blog-img-ratio); background: linear-gradient(135deg, var(--c), var(--brand-dark)); display: flex; align-items: center; justify-content: center; }
.blog-cover span { font-size: 3rem; }
.blog-cover.has-img { background: none; display: block; overflow: hidden; }
.blog-cover.has-img img { display: block; width: 100%; height: auto; aspect-ratio: var(--blog-img-ratio); object-fit: cover; object-position: var(--blog-img-focus); }
.blog-card-body { padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.blog-date { font-size: .78rem; color: var(--gold); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.blog-card-body h3 { margin: 0; } .blog-card-body p { margin: 0; color: var(--ink-soft); font-size: .92rem; flex: 1; }
.blog-post-cover { aspect-ratio: var(--blog-img-ratio); border-radius: var(--radius); background: linear-gradient(135deg, var(--c), var(--brand-dark)); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.blog-post-cover span { font-size: 3.4rem; }

/* ---------- floating contact ---------- */
.floating-contact { position: fixed; inset-inline-end: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 80; }
/* Lift the floating button on pages that render a consult form, so its 25% viewport
   footprint doesn't sit over the Send/Prev row on 375px devices. */
body.has-consult .floating-contact { bottom: calc(96px + env(safe-area-inset-bottom)); }
@media (min-width: 720px) {
  body.has-consult .floating-contact { bottom: calc(20px + env(safe-area-inset-bottom)); }
}
/* Same idea, for the cookie bar (shown/hidden client-side, so its class is toggled by
   site.js rather than baked in at build time like has-consult is). Taller on narrow
   screens because the bar itself stacks to two rows there (see .cookie-bar's own
   max-width: 560px rule). The combined state stacks both offsets. */
body.has-cookie-bar .floating-contact { bottom: calc(86px + env(safe-area-inset-bottom)); }
body.has-consult.has-cookie-bar .floating-contact { bottom: calc(160px + env(safe-area-inset-bottom)); }
@media (max-width: 560px) {
  body.has-cookie-bar .floating-contact { bottom: calc(150px + env(safe-area-inset-bottom)); }
  body.has-consult.has-cookie-bar .floating-contact { bottom: calc(230px + env(safe-area-inset-bottom)); }
}
.fc-wrap { }
.fc-main { list-style: none; display: inline-flex; align-items: center; gap: 8px; background: #25d366; color: #fff; font-weight: 600;
  padding: 12px 18px; border-radius: 999px; box-shadow: var(--shadow-l); cursor: pointer; font-size: .92rem; }
.fc-main::-webkit-details-marker { display: none; }
.fc-icon { font-size: 1.15rem; }
.fc-menu { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; align-items: flex-end; }
.fc-btn { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--ink); padding: 10px 16px; border-radius: 999px; box-shadow: var(--shadow-m); font-weight: 600; font-size: .88rem; }
.fc-btn:hover { text-decoration: none; transform: translateX(-3px); }
[dir="rtl"] .fc-btn:hover { transform: translateX(3px); }

/* ---------- modals ---------- */
.modal-overlay { position: fixed; inset: 0; z-index: 120; background: rgba(20,12,6,.62); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity .25s; }
.modal-overlay[hidden] { display: none !important; }
.modal-overlay.show { opacity: 1; }
.modal { position: relative; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-l); max-width: 560px; width: 100%;
  max-height: 92vh; overflow: auto; transform: translateY(14px) scale(.98); transition: transform .28s; }
.modal-overlay.show .modal { transform: none; }
.modal-close { position: absolute; top: 12px; inset-inline-end: 14px; z-index: 2; background: rgba(0,0,0,.05); border: 0; width: 34px; height: 34px; border-radius: 50%; font-size: 1.4rem; cursor: pointer; color: var(--ink-soft); }
.modal-close:hover { background: rgba(0,0,0,.1); }

/* ---------- hair-analysis prompt modal ----------------------------------------------
   Reuses .modal-overlay/.modal for the shell, so the fade+scale, overlay click and ESC
   behaviour are the ones the rest of the site already uses. Two columns on desktop
   (45/55), stacked on mobile with the modal itself scrolling and the close button
   pinned so it is always reachable. The side panel uses the site's slate band rather
   than a red fill, keeping brand red for the CTA alone. */
.hp-modal { max-width: 960px; padding: 0; overflow: hidden; }
.hp-grid { display: grid; grid-template-columns: 45fr 55fr; align-items: stretch; }
.hp-main { padding: 44px 40px 38px; }
.hp-main h2 { font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2rem); line-height: 1.16; letter-spacing: -.01em;
  text-transform: uppercase; margin: 0 0 14px; }
.hp-accent { color: var(--brand); display: block; }
.hp-lead { color: var(--ink-soft); font-size: .98rem; line-height: 1.6; margin: 0 0 20px; }
.hp-points { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 10px; }
.hp-points li { display: flex; align-items: center; gap: 10px; font-size: .9rem; font-weight: 600;
  letter-spacing: .02em; text-transform: uppercase; color: var(--ink); }
.hp-points .ic { flex: none; width: 20px; height: 20px; color: var(--brand); }
.hp-cta { display: inline-flex; justify-content: center; width: 100%; }
.hp-fine { margin: 12px 0 0; font-size: .78rem; line-height: 1.5; color: var(--muted); }
.hp-side { background: var(--slate); color: #fff; padding: 40px 34px; display: flex; flex-direction: column; justify-content: center; }
.hp-side-title { font-family: var(--font-kicker); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-2); margin: 0 0 18px; }
.hp-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hp-card { background: #fff; color: var(--ink); border-radius: var(--radius); padding: 18px 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 10px;
  text-align: center; font-size: .84rem; font-weight: 600; line-height: 1.35; }
.hp-card .ic { width: 26px; height: 26px; color: var(--brand); flex: none; }
/* The dialog takes focus on open so screen readers land inside it; it is not a control,
   so it should not paint a ring. Every real control inside keeps its own focus style. */
.hp-modal:focus { outline: none; }
.hp-close { top: 14px; inset-inline-end: 16px; background: #fff; color: var(--ink); box-shadow: var(--shadow-s); }
.hp-close:hover { background: var(--bg-cream); }
@media (max-width: 860px) {
  .hp-grid { grid-template-columns: 1fr; }
  .hp-main { padding: 38px 24px 26px; }
  .hp-side { padding: 26px 24px 30px; justify-content: flex-start; }
  .hp-modal { max-height: 90vh; }
  /* Keep the close button reachable while the modal body scrolls underneath it. */
  .hp-close { position: sticky; top: 10px; float: inline-end; inset-inline-end: 10px; margin-inline-end: 10px; }
}
@media (max-width: 380px) { .hp-cards { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .modal-overlay, .modal-overlay .modal { transition: none; }
}
.entry-modal { max-width: 800px; padding: 0; overflow: hidden; }
.entry-grid { display: grid; grid-template-columns: 1fr 1fr; }
.entry-visual { background: linear-gradient(158deg, var(--brand) 0%, var(--brand-dark) 78%); color: #fff; padding: 36px 32px; position: relative; }
.entry-visual::after { content: none; }
.entry-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; position: relative; }
.entry-logo .logo-mark { width: 40px; height: 40px; }
.entry-logo .brand-name { color: #fff; font-size: 1.2rem; }
.entry-logo .brand-tld { color: #fff; opacity: .8; }
.entry-visual h2 { color: #fff; font-size: 1.55rem; position: relative; }
.entry-intro { color: rgba(255,255,255,.9); font-size: .95rem; position: relative; }
.entry-points { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 11px; position: relative; }
.entry-points li { display: flex; align-items: center; gap: 10px; font-size: .93rem; color: #fff; }
.entry-points li span { font-size: 1.15rem; width: 24px; text-align: center; }
.entry-langs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 22px; position: relative; }
.lang-chip { background: rgba(255,255,255,.16); border-radius: 7px; padding: 3px 8px; font-size: .92rem; }
.entry-body { padding: 34px 32px; }
.entry-body .eyebrow { margin-bottom: 8px; }
.entry-objectivity { background: var(--brand-tint); border: 1px solid var(--brand-tint-2); border-radius: var(--radius-sm); padding: 11px 14px; font-size: .84rem; color: var(--brand-dark); margin: 4px 0 6px; }
.entry-skip { display: block; width: 100%; margin-top: 10px; background: none; border: 0; color: var(--muted); cursor: pointer; font-size: .85rem; text-decoration: underline; }
.newsletter-modal { max-width: 720px; }
.nl-grid { display: grid; grid-template-columns: 240px 1fr; }
.nl-visual { background: linear-gradient(160deg, var(--brand-2), var(--brand-dark)); display: flex; align-items: center; justify-content: center; padding: 26px; }
.nl-visual img { filter: drop-shadow(0 16px 30px rgba(0,0,0,.4)); }
.nl-body { padding: 30px 30px 28px; }
.nl-body h2 { margin: 4px 0 8px; } .nl-body > p { color: var(--ink-soft); font-size: .95rem; margin: 0; }

/* ---------- footer ---------- */
/* One 4-column grid shared by every tier (masthead, the two directory rows, legal), so the
   Explore groups sit exactly over Tools / Navigation / Contact. It replaces a grid that put
   five children into four tracks (Contact wrapped alone under a ~900px gap) and styled `h4`
   after the heading-order pass had moved the markup to h3, which left every column heading
   --ink on --ink: 1:1, invisible.
   On-dark colours are the ones the journey and plan bands already use, not new ones. Measured
   on --ink: headings #fff 15.2:1 · text/links #AEB5BE 7.3:1 · fine print #9AA2AB 5.9:1 ·
   kickers, step numbers and focus ring --gold-2 6.1:1 · legal links --gold-light 9.1:1. They
   replace #B8C9C3/#93A8A1/#7F9891, green-greys left over from the retired teal palette. */
.site-footer { background: var(--ink); color: #AEB5BE; padding: 60px 0 32px; font-size: .9rem; margin-top: 20px; }
.footer-top, .footer-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 32px; }
/* Masthead: the brand name is nowrap and wider than one track, so it takes two and the about
   copy the other two. Source order stays brand > about > social for the stacked layouts. */
.footer-top { grid-template-rows: auto 1fr; row-gap: 18px; padding-bottom: 40px; }
.footer-brand { grid-column: 1 / span 2; grid-row: 1; justify-self: start; color: #fff; }
.footer-brand .brand-tld { color: var(--gold-2); }
.footer-about { grid-column: 3 / -1; grid-row: 1 / span 2; margin: 0; max-width: 64ch; line-height: 1.65; }
.footer-social { grid-column: 1 / span 2; grid-row: 2; display: flex; flex-wrap: wrap; gap: 10px; }
.footer-main { border-top: 1px solid rgba(255,255,255,.12); padding-top: 40px; }
.footer-util { margin-top: 44px; }
.footer-col h2 { font-family: var(--font-display); color: #fff; font-size: 1.04rem; font-weight: 600; line-height: 1.3;
  letter-spacing: -.005em; margin: 0 0 12px; padding-bottom: 11px; border-bottom: 1px solid rgba(255,255,255,.12); }
.footer-col ul, .footer-col ol { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin: 0; break-inside: avoid; }
/* Block-level flex, shrink-wrapped: every row (plain, numbered, icon) is then exactly padding +
   one line box, so the four lists step in lockstep, and the 4px padding makes each link a target
   over 24px tall (WCAG 2.5.8) without loosening the leading. */
.footer-col li > a { display: flex; width: fit-content; max-width: 100%; padding: 4px 0; line-height: 1.45; color: #AEB5BE; overflow-wrap: anywhere; hyphens: auto; }
.footer-col li > a:hover { color: #fff; }
/* Knowledge guide: numbered like the guide index's own .gb-num, in the on-dark accent. */
.footer-steps li > a { align-items: baseline; gap: 10px; }
.footer-step { flex: none; min-width: 2ch; font-family: var(--font-kicker); font-size: .7rem; letter-spacing: .06em; color: var(--gold-2); }
.footer-more { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; color: #fff; font-weight: 600; font-size: .86rem; }
.footer-arrow { display: inline-block; transition: transform .18s ease; }
.footer-more:hover .footer-arrow { transform: translateX(3px); }
/* Explore: the header dropdown's own grouped markup (.drop-group), re-skinned for a dark ground.
   Its tracks and gap equal the outer grid's, so each group lines up with a column of the row
   below. Mono/uppercase/tracking still come from the shared .drop-group-label rule, which keeps
   that rule's Arabic override working here too. */
.footer-explore { grid-column: 2 / -1; }
.footer-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; }
.footer-groups > li:not(.drop-group) { grid-column: 1 / -1; } /* a future hub not yet given a group */
.site-footer .drop-group-label { color: var(--gold-2); font-size: .68rem; padding: 0; border: 0; margin: 2px 0 8px; }
.footer-contact li > a, .footer-addr { display: flex; align-items: center; gap: 9px; }
.footer-addr { padding: 4px 0; line-height: 1.45; }
.footer-contact .ic { width: 16px; height: 16px; }
/* The global ring is --accent, a dark red that measures 2.4:1 on --ink, under the 3:1 a focus
   indicator needs (WCAG 1.4.11). */
.site-footer :where(a, button, summary, [tabindex]):focus-visible { outline-color: var(--gold-2); }
.footer-legal { display: grid; gap: 10px; margin-top: 52px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.12); }
.footer-legal p { margin: 0; }
.footer-legal .footer-copy { padding-top: 8px; font-size: .8rem; }
/* .disclaimer sits outside .footer-col, so it never got that selector's link-color override and
   fell through to the global `a` rule (--brand-2, a dark red meant for text on light tint
   backgrounds) -- on this dark footer that measured ~2.4:1, well under the 4.5:1 minimum.
   --gold-light is the same token the plan-band already uses for a link in dark-background
   consent/legal text (9:1+ against --ink), reused here for the same reason. */
.disclaimer { font-size: .78rem; line-height: 1.6; color: #9AA2AB; max-width: 88ch; }
.disclaimer a { color: var(--gold-light); }
.disclaimer a:hover { color: #fff; }
/* The disclosure stays the smallest line, by size alone. It used to be dimmed with opacity:.55,
   which measured 2.48:1 for its text and cut the --gold-light links above to 3.79:1 on screen,
   so the link fix never actually reached the rendered page. */
.affiliate-note { font-size: .74rem; }
[dir="rtl"] .footer-col h2 { letter-spacing: 0; }
[dir="rtl"] .site-footer .drop-group-label { font-size: .8rem; }
[dir="rtl"] .footer-arrow { transform: scaleX(-1); }
[dir="rtl"] .footer-more:hover .footer-arrow { transform: scaleX(-1) translateX(3px); }
/* Tablet: the masthead and the guide/Explore row stack. Explore keeps its three groups side by
   side and the guide's six steps flow into the same three tracks above them. The extra bottom
   padding lets the last legal line scroll clear of the floating WhatsApp button. */
@media (max-width: 1023px) {
  .site-footer { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .footer-top { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .footer-brand, .footer-about, .footer-social { grid-column: auto; grid-row: auto; }
  .footer-main { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  .footer-explore { grid-column: auto; }
  .footer-steps { columns: 3; column-gap: 32px; }
  .footer-util { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
}
/* Phone: one group per row, each list in two columns. That roughly halves the height of one long
   column of 50+ links, with nothing hidden behind a toggle. Contact stays single-column because
   the email address needs the full width. */
@media (max-width: 719px) {
  .site-footer { padding-top: 44px; }
  /* Pages with a consult form lift the floating button to 96px on phones (body.has-consult
     .floating-contact), which parked it over the last legal lines; clear its full height. */
  body.has-consult .site-footer { padding-bottom: calc(168px + env(safe-area-inset-bottom)); }
  .footer-groups, .footer-util { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .footer-steps, .footer-groups .drop-group > ul, .footer-util .footer-col:not(.footer-contact) ul { columns: 2; column-gap: 20px; }
  .footer-col li > a, .footer-addr { padding: 6px 0; }
}

/* ---------- responsive ---------- */
/* Raised from 1080px: at any narrower desktop width the header's nav + lang switcher + CTA
   cannot lay out on one row without overflowing in the longer-label languages (Norwegian,
   Swedish, German measured worst) even after tightening spacing and widening the header's
   own container above. Below this, the hamburger menu is the correct layout, not a fallback. */
@media (max-width: 1380px) {
  .main-nav { position: fixed; inset: 72px 0 auto 0; background: #fff; border-bottom: 1px solid var(--line);
    max-height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain;
    padding: 12px 22px 20px; box-shadow: var(--shadow-m); display: none; margin: 0; }
  .site-header.nav-open .main-nav { display: block; }
  .main-nav > ul { flex-direction: column; align-items: stretch; gap: 2px; }
  .main-nav a, .drop-toggle { width: 100%; }
  .drop-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding-inline-start: 14px; display: none; }
  .has-drop.open .drop-menu { display: block; }
  .nav-toggle { display: flex; }
  .header-cta { display: none; }
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero-cta-row, .hero-trust { justify-content: center; }
  .hero-visual { max-width: 420px; margin: 0 auto; }
  .page-layout { grid-template-columns: minmax(0, 1fr); } .page-toc { display: none; }
  .finder .finder-inner { grid-template-columns: 1fr; gap: 26px; }
  .contact-grid { grid-template-columns: 1fr; }
  .feature-row { grid-template-columns: 1fr; gap: 22px; } .feature-row.reverse .feature-media { order: 0; }
  .consult-inner { grid-template-columns: 1fr; } .consult-nav.end button { min-width: 0; flex: 1; }
  .cp-bg { background-image: url('/assets/img/clinic-bg-wide.jpg'); }
  .consult-panel { align-items: center; justify-content: center; }
  .consult-panel > *:not(.cp-bg) { width: 100%; max-width: 520px; }
  .nl-grid { grid-template-columns: 1fr; } .nl-visual { display: none; }
  .entry-grid { grid-template-columns: 1fr; } .entry-visual { padding: 26px 26px 22px; } .entry-points { display: none; } .entry-langs { margin-top: 14px; }
  .clinic-card { grid-template-columns: 1fr; } .clinic-rank { font-size: 1.6rem; }
  .forum-cat { grid-template-columns: 1fr; text-align: center; } .forum-cat .btn-outline { justify-self: center; }
}
@media (max-width: 560px) {
  /* The panel's WhatsApp button is hidden here, so the frame goes tall again
     (roughly 1.66) and the 2.8 wide crop would start losing the sides. */
  .cp-bg, .in-article-consult .cp-bg { background-image: url('/assets/img/clinic-bg.jpg'); }
  body { font-size: 16px; }
  .section { padding: 46px 0; }
  .lead-form .row2 { grid-template-columns: 1fr; }
  .fc-label { display: none; }
  .hero-cta-row { flex-direction: column; } .hero-cta-row .btn-cta, .hero-cta-row .btn-ghost { width: 100%; }
}
/* ============ feedback round: icons, hero bg, caps name, myths, social ============ */
.ic { width: 1.1em; height: 1.1em; display: inline-block; vertical-align: -0.16em; flex: none; }

/* brand name in caps, full */
.brand-name { text-transform: uppercase; letter-spacing: .02em; font-weight: 800; font-size: clamp(.82rem, 1.1vw, 1rem); white-space: nowrap; }
.footer-brand .brand-name { font-size: 1.18rem; }

.hero-copy { position: relative; z-index: 1; max-width: 820px; }

/* icon color contexts */
.why-ico { display: inline-flex; width: 52px; height: 52px; border-radius: 14px; align-items: center; justify-content: center; background: var(--brand-tint); color: var(--brand); }
.why-ico .ic { width: 26px; height: 26px; }
.ps-ico { color: var(--brand); }
.ps-ico .ic { width: 26px; height: 26px; }
.entry-points .ic { width: 20px; height: 20px; color: #fff; }
.fc-main .ic { width: 20px; height: 20px; color: #fff; }
.fc-btn .ic { width: 18px; height: 18px; }
.fc-btn.wa .ic { color: #1fae54; } .fc-btn.ms .ic { color: #0084ff; } .fc-btn.ml .ic { color: var(--ink-soft); }
.channel-ic { display: inline-flex; }
.channel-ic .ic { width: 26px; height: 26px; }
.channel.wa .channel-ic .ic { color: #1fae54; } .channel.ms .channel-ic .ic { color: #0084ff; } .channel.ml .channel-ic .ic { color: var(--brand); } .channel.info .channel-ic .ic { color: var(--muted); }
.clinic-flag .ic { width: 15px; height: 15px; }
.blog-cover .ic { width: 46px; height: 46px; color: #fff; }
.blog-chip .ic { width: 16px; height: 16px; }
.blog-cat-head .ic { width: 24px; height: 24px; color: var(--brand); }
.btn-wa .ic { color: #1c7a43; } .btn-cta .ic, .btn-ghost .ic { color: currentColor; }
.upload .ic { width: 18px; height: 18px; color: var(--brand); vertical-align: -.22em; margin-inline-end: 6px; }

/* footer social icons */
.soc-link { display: inline-flex; width: 38px; height: 38px; border-radius: 10px; align-items: center; justify-content: center; background: rgba(255,255,255,.06); color: #AEB5BE; border: 1px solid rgba(255,255,255,.12); }
.soc-link:hover { background: var(--brand); color: #fff; border-color: var(--brand); text-decoration: none; }
.soc-link .ic { width: 19px; height: 19px; }

/* myths vs facts */
.myths-section { background: linear-gradient(180deg, var(--bg-soft), #ffffff); }
.myths-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.myth-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-s); }
.myth-row { display: flex; gap: 12px; padding: 16px 18px; }
.myth-row.is-myth { background: #fdf4f4; border-bottom: 1px solid var(--line); }
.myth-mark { flex: none; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.myth-mark .ic { width: 16px; height: 16px; }
.myth-mark.x { background: #f3d6d6; color: #a6352f; }
.myth-mark.c { background: #d8ead9; color: #2c7a43; }
.myth-label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); display: block; margin-bottom: 2px; }
.myth-row p { margin: 0; font-size: .92rem; }
.myth-row.is-myth p { color: var(--ink-soft); }

/* image + text feature rows */
.features-section { background: linear-gradient(180deg, #ffffff, var(--bg-soft)); }
.feature-rows { display: grid; gap: 40px; }
.feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.feature-row.reverse .feature-media { order: 2; }
.feature-media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-m); background: var(--bg-cream); }
.feature-media img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4/3; }
.feature-tag { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); background: var(--brand-tint); padding: 4px 12px; border-radius: 999px; margin-bottom: 12px; }
.feature-text h3 { font-size: 1.55rem; margin: 0 0 10px; }
.feature-text p { color: var(--ink-soft); margin: 0 0 12px; }
.feature-text .card-cta { color: var(--brand-dark); font-weight: 600; }

/* price comparison table */
.cost-compare { max-width: 640px; margin: 34px auto 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-s); }
.cost-compare h3 { color: var(--ink); margin: 0 0 14px; font-size: 1.15rem; text-align: center; }
.cost-compare table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.cost-compare th { text-align: start; color: var(--brand); font-weight: 700; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.cost-compare th:last-child, .cost-compare td:last-child { text-align: end; }
.cost-compare td { padding: 10px; color: var(--ink-soft); border-bottom: 1px solid var(--line); }
.cost-compare tr.is-highlight td { color: var(--brand-dark); font-weight: 700; background: var(--brand-tint); }
.cost-compare tr.is-highlight td:first-child { border-radius: 8px 0 0 8px; }
.cost-compare tr.is-highlight td:last-child { border-radius: 0 8px 8px 0; }
.cost-compare-note { text-align: center; color: var(--muted); font-size: .82rem; margin: 14px 0 0; }

/* clinic card social chips */
.clinic-socials { display: flex; gap: 8px; margin-top: 14px; }
.soc-chip { display: inline-flex; width: 34px; height: 34px; border-radius: 9px; align-items: center; justify-content: center; background: var(--bg-soft); border: 1px solid var(--line); color: var(--ink-soft); }
.soc-chip:hover { background: var(--brand); border-color: var(--brand); color: #fff; text-decoration: none; }
.soc-chip .ic { width: 17px; height: 17px; }

/* reasons to choose us */
.reasons-section { background: linear-gradient(180deg, #ffffff, var(--bg-cream)); }
.reasons-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.reason-card { text-align: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 36px 26px; box-shadow: var(--shadow-s); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.reason-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-m); border-color: var(--brand-tint-2); }
.reason-ico { display: inline-flex; width: 66px; height: 66px; align-items: center; justify-content: center; color: var(--brand); background: var(--brand-tint); border-radius: 18px; margin-bottom: 14px; }
.reason-ico .ic { width: 36px; height: 36px; }
.reason-card h3 { margin: 0 0 8px; }
.reason-card p { margin: 0; color: var(--ink-soft); font-size: .95rem; }

/* price world map -- the map itself stays a dark "viewport" frame (like an embedded
   map widget); only the surrounding section switches to the site's light palette. */
.pricemap-section { background: var(--bg-cream); color: var(--ink); }
.pricemap-section .eyebrow.light { color: var(--brand); }
.pricemap-section .section-head p { color: var(--ink-soft); }
.pricemap-wrap { position: relative; max-width: 980px; margin: 0 auto; background: radial-gradient(120% 100% at 30% 8%, #2f3e4e, #1b232c 72%); border-radius: 22px; padding: 20px; box-shadow: inset 0 0 70px rgba(0,0,0,.5), var(--shadow-l); }
.pricemap-svg { width: 100%; height: auto; display: block; }
.pricemap-svg path { fill: #414a54; stroke: #232a31; stroke-width: .5; transition: fill .15s; }
.pricemap-svg .pm-c { cursor: pointer; outline: none; }
.pricemap-svg .pm-c, .pricemap-svg .pm-c path { fill: #b56b6d !important; }
.pricemap-svg .pm-c.hot, .pricemap-svg .pm-c.hot path { fill: #23c552 !important; }
.pricemap-svg .pm-c:hover, .pricemap-svg .pm-c:hover path, .pricemap-svg .pm-c:focus, .pricemap-svg .pm-c:focus path, .pricemap-svg .pm-c.on, .pricemap-svg .pm-c.on path { fill: var(--gold-2) !important; }
.pm-tip2 { position: fixed; z-index: 130; background: #fff; color: var(--ink); border-radius: 10px; padding: 8px 12px; box-shadow: var(--shadow-l); pointer-events: none; white-space: nowrap; transform: translate(-50%, -135%); }
.pm-tip2 .flag { font-size: 1.15em; margin-inline-end: 4px; }
.pm-tip2 strong { display: block; font-size: .92rem; } .pm-tip2 em { display: block; font-style: normal; color: var(--brand); font-weight: 700; margin-top: 2px; }
.pm-tip2::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #fff; }
.pricemap-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: center; margin-top: 22px; }
.pm-leg { font-size: .85rem; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 5px; } .pm-leg strong { color: var(--ink); } .pm-leg.hot strong { color: #1a9c42; }
.pricemap-note { text-align: center; color: var(--muted); font-size: .82rem; margin-top: 14px; }
.pricemap-attr { text-align: center; color: #7f8894; font-size: .72rem; margin-top: 8px; } .pricemap-attr a { color: #9aa3ad; }
.drop-menu .drop-all a { font-weight: 700; color: var(--brand-dark); border-bottom: 1px solid var(--line); margin-bottom: 4px; border-radius: 8px 8px 0 0; }
/* Wide grouped dropdown (the Overview menu): one column per group */
.has-drop.drop-wide .drop-menu { display: flex; align-items: flex-start; gap: 14px; min-width: 720px; padding: 14px 12px; }
.has-drop.drop-wide:hover .drop-menu, .has-drop.drop-wide.open .drop-menu { display: flex; }
.drop-menu .drop-group { flex: 1 1 0; margin: 0; }
.drop-menu .drop-group > ul { list-style: none; margin: 0; padding: 0; }
.drop-group-label { display: block; font-family: var(--font-kicker); font-weight: 500; font-size: .62rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); padding: 8px 12px 5px; border-bottom: 1px solid var(--line); margin: 0 0 5px; }
.drop-group-label:empty { display: none; }
@media (max-width: 1380px) { .has-drop.drop-wide .drop-menu { min-width: 0; flex-direction: column; align-items: stretch; gap: 4px; padding: 4px 0 8px; padding-inline-start: 14px; } .has-drop.drop-wide .drop-menu { display: none; } .has-drop.drop-wide.open .drop-menu { display: flex; } }

/* homepage intro text + mid-article consult */
.intro-section { background: #fff; padding-bottom: 26px; }
.intro-text { max-width: 780px; margin: 0 auto; text-align: center; }
.intro-text .eyebrow { display: block; }
.intro-text p { font-size: 1.14rem; color: var(--ink-soft); }
.intro-text p:first-of-type { font-size: 1.2rem; }
.in-article-consult { margin: 40px 0; }
.in-article-consult .consult { padding: 0; }
.in-article-consult .consult-inner { box-shadow: var(--shadow-s); }

/* subtle background gradient transitions */
.pillars-section { background: linear-gradient(180deg, var(--bg-cream), #ffffff); }
.clinics-teaser { background: linear-gradient(180deg, #ffffff, var(--bg-soft)); }
.faqteaser-section { background: linear-gradient(180deg, var(--bg-cream), #ffffff); }
.detail-section { background: linear-gradient(180deg, #ffffff, var(--bg-soft)); }

@media (max-width: 1200px) { .brand-name { font-size: .84rem; } }
@media (max-width: 560px) { .brand-name { font-size: .78rem; } .logo-mark { width: 32px; height: 32px; } }
@media (max-width: 400px) {
  .header-inner .brand-tld { display: none; }
  .header-inner { gap: 4px; }
  .lang-toggle { padding: 7px 8px; font-size: .8rem; }
  .site-header .container { padding-inline: 10px; }
  .logo-mark { width: 28px; height: 28px; }
}
/* prefers-reduced-motion: kill real motion (animations, transforms), keep sub-200ms color/opacity
   state feedback so hover, focus and press still register visibly. A global transition:none was
   stripping the causality signals users with reduced-motion still need. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  html { scroll-behavior: auto; }
  .pillar-card:hover, .why-card:hover, .reason-card:hover { transform: none; }
}

/* results gallery (3 photos + 3 videos) */
.gallery-section{background:linear-gradient(180deg,var(--slate),var(--slate-dark));color:#fff;}
.gallery-section h2{color:#fff;}.gallery-section .eyebrow{color:var(--gold-2);}.gallery-section .section-head p{color:#c3c8ce;}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.gallery-item{margin:0;border-radius:var(--radius);overflow:hidden;background:#0f1318;box-shadow:var(--shadow-l);aspect-ratio:4/3;position:relative;}
.gallery-item img,.gallery-item video{width:100%;height:100%;object-fit:cover;display:block;}
.gallery-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;pointer-events:none;}
.gallery-play .ic{width:60px;height:60px;opacity:.92;}
.gallery-note{text-align:center;color:#aeb6be;font-size:.84rem;margin-top:22px;}
@media (max-width:820px){.gallery-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.gallery-grid{grid-template-columns:1fr;}}

/* ============ Mobile polish (responsiveness refinements) ============ */
/* Any wide table stays usable: horizontal scroll instead of squeeze/overflow */
.cost-compare, .page-content table { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.page-content table { min-width: 480px; }
@media (min-width: 641px) { .cost-compare table { min-width: 480px; } }
@media (max-width: 640px) {
  .cost-compare { padding: 16px; }
  .cost-compare table { min-width: 0; font-size: .82rem; }
  .cost-compare th, .cost-compare td { padding: 6px 8px; overflow-wrap: anywhere; }
}

@media (max-width: 720px) {
  /* comfortable reading + spacing */
  .container { padding-inline: 18px; }
  h1 { font-size: clamp(1.8rem, 7.4vw, 2.4rem); line-height: 1.14; }
  h2 { font-size: clamp(1.4rem, 5.6vw, 1.9rem); line-height: 1.18; }
  .section-head p, .lead { font-size: 1.02rem; }
  /* generous tap targets for links, buttons & nav items */
  .btn-cta, .btn-outline, .btn-ghost, .main-nav a, .drop-toggle, .fc-btn, .card-cta,
  .pm-pin, .pm-leg, .footer-links a { min-height: 44px; }
  .main-nav a, .drop-toggle { display: flex; align-items: center; }
  /* The floating WhatsApp FAB is already visible on every page; the panel's own
     WhatsApp button next to it is a redundant second "message us" CTA on mobile. */
  .consult-panel { padding: 20px; }
  .consult-panel h3 { font-size: 1rem; margin-bottom: 10px; }
  .consult-wa, .consult-ms { display: none; }
}

@media (max-width: 560px) {
  .section { padding: 40px 0; }
  .section-head { margin-bottom: 26px; }
  /* stack any 2-up footer back to comfortable single column already handled;
     tighten oversized numbers/stats */
  .trust-stat { font-size: 1.5rem; }
  /* price map: bigger, easier-to-tap pins on touch screens */
  .pm-pin { transform: scale(1.25); }
  .pm-pin .pm-tip { font-size: .82rem; }
  /* before/after slider gets a little more height to be legible */
  .ba-slider { aspect-ratio: 4/3; }
}

/* Touch devices: reveal price-map tooltips on tap/focus, not just hover */
@media (hover: none) {
  .pm-pin:focus .pm-tip, .pm-pin:active .pm-tip { opacity: 1; visibility: visible; transform: none; }
}

/* Knowledge-hub long-form prose */
.guide-longform { max-width: 820px; }
.guide-longform h2 { margin-top: 2.2em; font-size: clamp(1.4rem, 3vw, 1.9rem); }
.guide-longform h3 { margin-top: 1.6em; }
.guide-longform p, .guide-longform li { line-height: 1.75; }
.guide-longform table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: .95rem; }
.guide-longform th, .guide-longform td { border: 1px solid var(--line); padding: 10px 12px; text-align: start; }
.guide-longform th { background: var(--bg-soft); }

/* yearly award winner card */
.award-winner-section { background: linear-gradient(180deg, var(--bg-cream), #fff); }
.award-winner { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: start; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-l); padding: 34px; }
.aw-badge { font-size: 2.6rem; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.aw-badge span { font-size: 1rem; font-weight: 800; color: var(--brand); letter-spacing: .06em; }
.aw-name { font-size: 1.5rem; font-weight: 800; color: var(--brand); margin: .2em 0 .6em; }
.aw-points { margin-top: 12px; padding-inline-start: 20px; }
.aw-points li { margin: 5px 0; }
@media (max-width: 640px) { .award-winner { grid-template-columns: 1fr; text-align: center; } .aw-badge { flex-direction: row; justify-content: center; } .aw-points { text-align: start; } }

/* knowledge-guide prominence */
.pillars-section.is-primary { padding-top: 34px; }
.pillars-cta { margin-top: 26px; }
/* The area-specific procedures band follows the knowledge grid directly, so it drops the
   gradient (which would read as a seam under the one above) and tightens the gap. */
.pillars-section.is-other { background: #ffffff; padding-top: 10px; }
.pillars-section.is-other .section-head { margin-bottom: 26px; }
.pillar-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .pillar-grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } }
.detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.detail-card { display: block; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; text-decoration: none; color: inherit; box-shadow: var(--shadow-s); transition: transform .15s ease, box-shadow .15s ease; }
.detail-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-m); }
.detail-ico { font-size: 1.6rem; display: inline-block; margin-bottom: 8px; }
.detail-card h3 { margin: 0 0 6px; font-size: 1.05rem; }
.detail-card p { margin: 0; font-size: .92rem; color: var(--ink-soft); }
@media (max-width: 900px) { .detail-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .detail-grid { grid-template-columns: 1fr; } }

/* knowledge-guide diagrams/figures */
.guide-figure { margin: 1.8em 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; box-shadow: var(--shadow-s); }
.guide-figure svg { display: block; width: 100%; height: auto; }
.guide-figure figcaption { font-size: .85rem; color: var(--ink-soft); padding: 12px 16px; border-top: 1px solid var(--line); border-inline-start: 3px solid var(--accent); background: var(--bg-soft); line-height: 1.5; }
.content-section .guide-figure, .page-article .guide-figure { max-width: 760px; }

/* myths & facts: collapsed to first 8 with CSS toggle */
.myths-toggle-cb ~ .myths-grid .myth-card:nth-child(n+9){display:none}
.myths-toggle-cb:checked ~ .myths-grid .myth-card{display:block}
.myths-toggle-btn{cursor:pointer}
.myths-toggle-btn .myths-less{display:none}
.myths-toggle-cb:checked ~ .myths-toggle-wrap .myths-toggle-btn .myths-more{display:none}
.myths-toggle-cb:checked ~ .myths-toggle-wrap .myths-toggle-btn .myths-less{display:inline}

/* clinic ranking: criteria band */
.criteria-band { background: var(--bg-soft); border-block: 1px solid var(--line); }
.criteria-band .container { max-width: 860px; }
.criteria-band h2 { font-size: clamp(1.2rem, 3vw, 1.6rem); margin: 0 0 10px; }
.criteria-band p { color: var(--ink-soft); line-height: 1.7; margin: 0; }

/* graft calculator */
.gc-wrap { max-width: 760px; margin-inline: auto; }
.gc-stages { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 22px; }
.gc-stage { padding: 10px 16px; border: 1px solid var(--line); background: #fff; border-radius: 999px; cursor: pointer; font-weight: 600; font-size: .92rem; color: var(--ink); transition: all .12s ease; min-height: 44px; }
.gc-stage:hover { border-color: var(--brand); }
.gc-stage.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }
.gc-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-m); padding: 26px; }
.gc-h { font-size: 1.05rem; margin: 0 0 14px; }
.gc-areas { display: flex; flex-direction: column; gap: 10px; }
.gc-area { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.gc-area:hover { border-color: var(--brand); }
.gc-area .gc-name { flex: 1; font-weight: 600; }
.gc-area .gc-val { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.gc-area.is-zero { opacity: .45; cursor: not-allowed; }
.gc-total { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; padding: 18px 20px; background: var(--brand-tint); border-radius: 14px; }
.gc-total span { font-weight: 600; }
.gc-total strong { font-size: clamp(1.4rem, 4vw, 1.9rem); color: var(--brand); font-variant-numeric: tabular-nums; }
.gc-note { max-width: 760px; margin: 20px auto 0; font-size: .85rem; color: var(--ink-soft); text-align: center; line-height: 1.6; }
@media (max-width: 560px) { .gc-total { flex-direction: column; align-items: flex-start; gap: 6px; } }

/* statistics page */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stat-grid.sm { grid-template-columns: repeat(4, 1fr); }
.stat-tile { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 20px; text-align: center; box-shadow: var(--shadow-s); }
.stat-tile strong { display: block; font-size: clamp(1.5rem, 4vw, 2.1rem); color: var(--brand); font-weight: 800; line-height: 1.1; }
.stat-tile span { display: block; margin-top: 8px; color: var(--ink-soft); font-size: .9rem; line-height: 1.45; }
.stat-tile.sm strong { font-size: clamp(1.2rem, 3vw, 1.5rem); }
.stats-block { max-width: 860px; }
.stats-block h2 { margin-top: 1.8em; font-size: clamp(1.3rem, 3vw, 1.7rem); }
.stat-list { line-height: 1.75; padding-inline-start: 20px; }
.stat-list li { margin: 7px 0; }
/* Horizontal bar chart (methods, market share). Same palette as the figure it replaced —
   warm-bone panel, brand red for the leading row, muted rose for the rest — but built from
   real text so it stays legible at any width instead of scaling down with an SVG viewBox. */
.bar-chart { background: #faf7f7; padding: 20px 22px; }
.bar-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.bar-row { display: grid; grid-template-columns: minmax(90px, 168px) minmax(80px, 1fr) auto; gap: 14px; align-items: center; font-size: .88rem; line-height: 1.4; }
.bar-label { text-align: end; color: var(--ink); }
.bar-track { background: #eee2e2; border-radius: 6px; height: 19px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: #d98a8a; border-radius: 6px; }
.bar-fill.is-lead { background: var(--brand); }
.bar-value { color: var(--ink-soft); white-space: nowrap; }
.bar-value strong { color: var(--ink); font-weight: 600; }
@media (max-width: 620px) {
  /* Stack label over bar over value — nothing shrinks, nothing scrolls sideways. */
  .bar-row { grid-template-columns: 1fr; gap: 5px; }
  .bar-label { text-align: start; font-weight: 600; }
  .bar-value { white-space: normal; }
  .bar-note { color: var(--muted); }
}
/* Six-item rows (decision drivers, trends) read as two clean rows of three rather than
   a four-wide row with a two-tile orphan underneath. */
.stat-grid.trio { grid-template-columns: repeat(3, 1fr); }
.stats-block .stat-grid { margin-top: 22px; }
/* Explanatory prose under a statistics block. Held to the article measure so the text
   stays readable even where the tiles above it run the full container width. */
.stat-note { max-width: 760px; margin-top: 22px; }
.stat-note p { margin: 0 0 15px; }
.stat-note p:last-child { margin-bottom: 0; }
.stat-source { margin-top: 26px; font-size: .84rem; color: var(--ink-soft); line-height: 1.6; }
@media (max-width: 900px) { .stat-grid, .stat-grid.sm, .stat-grid.trio { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .stat-grid, .stat-grid.sm, .stat-grid.trio { grid-template-columns: 1fr; } }

/* glossary */
.gl-list { max-width: 820px; margin-inline: auto; display: flex; flex-direction: column; gap: 0; }
.gl-item { padding: 18px 0; border-bottom: 1px solid var(--line); }
.gl-item:last-child { border-bottom: 0; }
.gl-item dt { font-weight: 800; font-size: 1.05rem; color: var(--brand); margin: 0 0 6px; }
.gl-item dd { margin: 0; color: var(--ink-soft); line-height: 1.7; }

/* Norwood illustrations in the graft calculator */
.gc-art { display: flex; justify-content: center; margin: 0 0 20px; min-height: 275px; }
.gc-fig { display: none; }
.gc-fig.is-on { display: block; }
.gc-fig svg { width: 205px; height: auto; max-width: 100%; display: block; }
.gc-shot { margin: 0; width: 205px; max-width: 100%; }
/* the artwork ships with an English caption baked into the bottom; crop it away */
.gc-shot-crop { display: block; width: 100%; aspect-ratio: 512 / 492; overflow: hidden; }
.gc-shot-crop img { width: 100%; height: auto; display: block; }
.gc-shot figcaption { text-align: center; font-size: 14px; font-weight: 700; color: #6b7280; margin-top: 6px; }

/* Norwood scale strip inside the knowledge guide */
/* white ground so the artwork's own white background blends into the card */
.norwood-strip { background: #fff; border: 1px solid #ececec; border-radius: 14px; padding: 18px 16px; }
.norwood-strip .ns-title { display: block; font-weight: 700; color: #2b2f36; font-size: 15px; margin: 0 0 14px; }
.norwood-strip .ns-row { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; }
.norwood-strip .ns-item { display: block; }
.norwood-strip .ns-crop { display: block; width: 100%; aspect-ratio: 512 / 492; overflow: hidden; }
.norwood-strip .ns-crop img { width: 100%; height: auto; display: block; }
.norwood-strip .ns-cap { display: block; text-align: center; font-size: 12px; font-weight: 700; color: #6b7280; margin-top: 5px; }
@media (max-width: 760px) { .norwood-strip .ns-row { grid-template-columns: repeat(4, 1fr); row-gap: 14px; } }
@media (max-width: 400px) { .norwood-strip .ns-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) {
  .gc-fig svg, .gc-shot { width: 170px; }
  .gc-art { min-height: 230px; }
}

/* Composite before/after: one clinic frame holding both states, so no wipe slider */
.ba-composite { margin: 0; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow-s); }
.ba-composite img { display: block; width: 100%; height: auto; }
.ba-composite figcaption { display: flex; gap: 8px; justify-content: space-between; padding: 10px 14px; }
.ba-composite .ba-tag { position: static; }

/* ---- Interactive comparison charts (Turkey vs world) ---- */
.compare-section { background: linear-gradient(180deg, #fff, #faf7f7); }
.cmp-legend { display: flex; align-items: center; gap: 8px; justify-content: center; font-size: .86rem; color: var(--muted); margin: 0 0 22px; flex-wrap: wrap; }
.cmp-key { width: 16px; height: 12px; border-radius: 3px; display: inline-block; }
.cmp-key-turkey { background: var(--brand); }
.cmp-key-other { background: #d98a8a; margin-inline-start: 14px; }
.cmp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.cmp-fig { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px 18px 16px; box-shadow: var(--shadow-s); }
.cmp-title { font-weight: 700; font-size: 1.02rem; color: #2b2f36; margin: 0 0 12px; }
.cmp-scroll { overflow-x: auto; }
.cmp-svg { width: 100%; height: auto; min-width: 460px; display: block; font-family: system-ui, sans-serif; }
.cmp-lbl { font-size: 13px; fill: #2b2f36; }
.cmp-val { font-size: 12.5px; fill: #6b7280; }
.cmp-val-turkey { fill: var(--brand-dark); font-weight: 700; }
.cmp-badge { font-size: 11px; fill: var(--brand); font-weight: 700; }
.cmp-bar { fill: #d98a8a; transition: fill .15s ease, filter .15s ease; cursor: default; }
.cmp-row.is-turkey .cmp-bar { fill: var(--brand); }
.cmp-bar:hover { filter: brightness(1.08) saturate(1.15); }
.cmp-row:hover .cmp-lbl { font-weight: 700; }
.cmp-take { font-size: .88rem; color: var(--muted); line-height: 1.55; margin: 12px 0 0; padding-block-start: 12px; padding-inline-start: 12px; border-top: 1px dashed var(--line-2); border-inline-start: 3px solid var(--accent); }
.cmp-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.cmp-table th, .cmp-table td { padding: 9px 12px; text-align: start; border-bottom: 1px solid var(--line); }
.cmp-table th[scope="row"] { font-weight: 600; color: #2b2f36; }
.cmp-table tr.is-turkey { background: rgba(178,58,58,.06); }
.cmp-table tr.is-turkey th { color: var(--brand-dark); }
.cmp-yes { color: #1c7a43; font-weight: 600; }
/* The bar charts are now decoration over a real table, so the numbers reach screen readers.
   The table is quieter than the binary comparison tables so it reads as a companion to the
   chart above it rather than a second chart. */
.cmp-data { font-size: .88rem; margin-top: 2px; }
.cmp-data th, .cmp-data td { padding: 7px 12px; }
.cmp-best { color: var(--brand-dark); font-weight: 600; white-space: nowrap; }
/* Graft counts per Norwood stage: the same eight rows the chart draws. */
.gc-stage-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.gc-stage-table th, .gc-stage-table td { padding: 9px 12px; text-align: start; border-bottom: 1px solid var(--line); }
.gc-stage-table thead th { font-weight: 700; color: #2b2f36; border-bottom: 2px solid var(--line); }
.gc-stage-table th[scope="row"] { font-weight: 600; }
.gc-stage-table td { font-variant-numeric: tabular-nums; }
.hub-fig .tbl-wrap { margin: 14px 0 0; }
.hub-fig .tbl-wrap table { min-width: 0; }
.cmp-no { color: var(--muted); }
.cmp-yes .ic, .cmp-no .ic { width: 14px; height: 14px; vertical-align: -2px; }
.cmp-note { font-size: .82rem; color: var(--muted); text-align: center; margin: 22px auto 0; max-width: 680px; }
@media (max-width: 720px) { .cmp-grid { grid-template-columns: 1fr; } }

/* ---- Research & Reports library ---- */
.re-toolbar { display: grid; gap: 16px; margin: 0 0 26px; padding: 18px; background: #faf7f7; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.re-search { width: 100%; padding: 12px 16px; border: 1.5px solid var(--line-2); border-radius: 999px; font: inherit; font-size: .96rem; }
.re-search:focus { outline: none; border-color: var(--brand); }
.re-filter-group { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.re-filter-label { font-size: .8rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.re-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.re-chip { padding: 6px 14px; border: 1.5px solid var(--line-2); background: #fff; border-radius: 999px; font: inherit; font-size: .84rem; cursor: pointer; transition: all .15s ease; }
.re-chip:hover { border-color: var(--brand); color: var(--brand-dark); }
.re-chip.is-on { background: var(--brand); color: #fff; border-color: var(--brand); }
.re-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.re-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-s); transition: transform .15s ease, box-shadow .15s ease; }
.re-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-m); }
.re-card-cover { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #f3eeee; }
.re-card-cover img { width: 100%; height: 100%; object-fit: cover; }
.re-cover-ic { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 2.4rem; color: #fff; background: var(--c, #b23a3a); }
.re-cover-ic .ic { width: 44px; height: 44px; }
.re-card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.re-tags { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; }
.re-tag { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--brand-dark); background: rgba(178,58,58,.08); padding: 3px 9px; border-radius: 6px; }
.re-card h3 { font-size: 1.14rem; margin: 0 0 8px; line-height: 1.3; }
.re-card h3 a { color: inherit; }
.re-meta { font-size: .8rem; color: var(--muted); margin: 0 0 10px; }
.re-dot { opacity: .5; }
.re-summary { font-size: .92rem; color: var(--text); line-height: 1.55; margin: 0 0 12px; }
.re-findings-label, .re-findings { font-size: .86rem; }
.re-findings-label { font-weight: 700; color: #2b2f36; margin: 0 0 4px; }
.re-findings { margin: 0 0 14px; padding-inline-start: 18px; color: var(--muted); }
.re-btn { align-self: flex-start; margin-top: auto; }
/* "Showing X of Y" readout above the grid. A research library of this size needs a visible
   result count so a filter or search has an obvious effect. */
.re-cat { margin-bottom: 44px; scroll-margin-top: 90px; }
/* .re-card sets display:flex, which outranks the UA [hidden] rule — the filter needs this to hide cards. */
.re-card[hidden], .re-cat[hidden], .re-part[hidden] { display: none !important; }

/* The library splits into two parts: original studies, then the long-form explainers. The part
   heading has to outrank the topic headings inside it, hence the rule above it and the larger type. */
.re-part + .re-part { margin-top: 54px; }
.re-part-head { border-top: 3px solid var(--brand); padding-top: 16px; margin-bottom: 22px; }
.re-part-head h2 { font-size: 1.72rem; margin: 0; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.re-part-count { font-family: var(--font-kicker); font-size: .74rem; font-weight: 500; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; }
.re-part-head p { margin: 8px 0 0; color: var(--ink-soft); font-size: .98rem; line-height: 1.65; max-width: 78ch; }
.re-part .re-cat + .re-cat { margin-top: 34px; }
@media (max-width: 620px) { .re-part-head h2 { font-size: 1.42rem; } .re-part + .re-part { margin-top: 40px; } }
.re-cat:last-child { margin-bottom: 0; }
.re-count { margin: 0 0 18px; font-size: .88rem; color: var(--muted); }
.re-empty { text-align: center; color: var(--muted); padding: 40px 0; }
/* article */
/* Article header (redesign 2026-09-24): topic tags as the mono kicker the hubs use for their
   eyebrow, and the subtitle as a calm standfirst — it was bold brand-red, shouting under an H1
   that already carries the page. */
.re-article > .re-tags { gap: 6px 16px; margin: 4px 0 8px; }
.re-article > .re-tags .re-tag { background: none; padding: 0; border-radius: 0; font-family: var(--font-kicker); font-size: .72rem;
  font-weight: 500; letter-spacing: .2em; color: var(--brand); }
.re-article > h1 { margin: 4px 0 14px; max-width: 24ch; }
.re-article .re-subtitle { font-size: 1.22rem; color: var(--ink-soft); font-weight: 400; margin: 0 0 20px; line-height: 1.5; max-width: 60ch; text-wrap: pretty; }
.re-byline { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: .9rem; color: var(--muted); margin: 0 0 26px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
/* The summary shares the fact-box treatment of the hub key takeaways. */
.re-abstract { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 26px 22px; margin: 0 0 30px; }
.re-abstract strong { display: block; font-family: var(--font-kicker); font-weight: 500; text-transform: uppercase; font-size: .74rem; letter-spacing: .2em; color: var(--brand); margin: 0 0 10px; }
.re-abstract p { margin: 0; font-size: 1.04rem; line-height: 1.65; max-width: 66ch; }
.re-author-note { font-size: .84rem; line-height: 1.6; color: var(--muted); background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; margin: 0 0 30px; }
@media (max-width: 620px) { .re-article .re-subtitle { font-size: 1.1rem; } .re-abstract { padding: 18px 18px 20px; } }
/* Numbered reference list closing a research article, plus the scope note under it. Set a
   step smaller than body copy so the citations read as apparatus rather than argument. */
.re-sources { margin: 0; padding-inline-start: 22px; font-size: .92rem; line-height: 1.6; }
.re-sources li { margin: 0 0 10px; color: var(--ink-soft); }
.re-sources li:last-child { margin-bottom: 0; }
.re-sources a { overflow-wrap: anywhere; }
.re-disclaimer { margin: 22px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: .84rem; line-height: 1.6; color: var(--muted); }
.re-data-table { width: 100%; border-collapse: collapse; font-size: .92rem; margin: 6px 0; }
.re-data-table caption { text-align: start; font-weight: 700; color: var(--ink); padding: 0 0 8px; }
.re-data-table th, .re-data-table td { padding: 9px 14px; border-bottom: 1px solid var(--line); text-align: start; }
.re-data-table thead th { background: var(--bg-cream); font-weight: 700; }
.re-data-table tr.hl { background: rgba(178,58,58,.07); }
.re-data-table tr.hl td, .re-data-table tr.hl th { font-weight: 700; color: var(--brand-dark); }
.re-related { margin: 40px 0 0; padding-top: 26px; border-top: 1px solid var(--line); }
.re-related-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.re-related-card { display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; transition: all .15s ease; }
.re-related-card:hover { border-color: var(--brand); box-shadow: var(--shadow-s); text-decoration: none; }
.re-related-card strong { color: #2b2f36; font-size: .98rem; line-height: 1.35; }
.re-dot-cta { font-size: .82rem; color: var(--brand-dark); font-weight: 600; }
@media (max-width: 720px) { .re-grid, .re-related-grid { grid-template-columns: 1fr; } }
/* research spotlight teaser embedded on related guide pages */
.re-teaser { display: grid; grid-template-columns: 132px 1fr; gap: 20px; align-items: stretch;
  margin: 32px 0; padding: 0; border: 1px solid var(--line-2); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #fff, var(--brand-tint)); overflow: hidden; box-shadow: var(--shadow-s); }
.re-teaser-thumb { display: block; }
.re-teaser-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.re-teaser-ic { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  min-height: 132px; background: var(--c, var(--brand)); color: #fff; }
.re-teaser-ic svg { width: 42px; height: 42px; }
.re-teaser-body { padding: 20px 22px 20px 4px; display: flex; flex-direction: column; gap: 8px; }
.re-teaser-eyebrow { font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); }
.re-teaser-body h3 { font-size: 1.16rem; line-height: 1.25; margin: 0; }
.re-teaser-body h3 a { color: var(--ink); }
.re-teaser-body h3 a:hover { color: var(--brand-dark); text-decoration: none; }
.re-teaser-sum { color: var(--ink-soft); font-size: .96rem; line-height: 1.55; margin: 0; }
.re-teaser-find { font-size: .9rem; color: var(--ink); margin: 0; }
.re-teaser-find strong { color: var(--brand-dark); }
.re-teaser-btn { align-self: flex-start; margin-top: 4px; }
@media (max-width: 620px) { .re-teaser { grid-template-columns: 1fr; }
  .re-teaser-thumb img, .re-teaser-ic { height: 150px; min-height: 0; }
  .re-teaser-body { padding: 18px 18px 20px; } }
/* ---- Item 2: reusable visual components ---- */
.fig { margin: 26px 0; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow-s); }
.fig img { display: block; width: 100%; height: auto; }
.fig figcaption { padding: 10px 16px; font-size: .88rem; color: var(--ink-soft); background: #fff; border-top: 1px solid var(--line); }
.fig.fig-wide { margin-left: calc(-1 * clamp(0px, 3vw, 40px)); margin-right: calc(-1 * clamp(0px, 3vw, 40px)); }
.fig.fig-float { max-width: 340px; }
@media (min-width: 860px) { .fig.fig-float { float: right; width: 340px; margin: 6px 0 18px 28px; } }
.stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin: 26px 0; }
.stat-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px;
  background: linear-gradient(180deg, #fff, var(--brand-tint)); box-shadow: var(--shadow-s); }
.stat-ic { color: var(--brand); } .stat-ic svg { width: 26px; height: 26px; }
.stat-n { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; color: var(--ink); line-height: 1; letter-spacing: -.02em; }
.stat-l { font-size: .9rem; color: var(--ink-soft); line-height: 1.35; }
.proc { list-style: none; counter-reset: none; margin: 26px 0; padding: 0; display: grid; gap: 2px; }
.proc-step { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px dashed var(--line); align-items: start; }
.proc-step:last-child { border-bottom: 0; }
.proc-num { display: none; }
.proc-step { counter-increment: proc; }
.proc-step::before { content: counter(proc); grid-column: 1; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 50%; background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #fff; font-family: var(--font-display); font-weight: 700; box-shadow: 0 4px 12px rgba(178,58,58,.28); }
.proc { counter-reset: proc; }
.proc-ic { display: none; }
.proc-body strong { display: block; color: var(--ink); font-size: 1.02rem; margin-bottom: 3px; }
.proc-body p { margin: 0; color: var(--ink-soft); font-size: .96rem; line-height: 1.55; }
.ifacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 26px 0; }
.ifact { display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow-s); }
.ifact-ic { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--brand-tint); color: var(--brand); }
.ifact-ic svg { width: 22px; height: 22px; }
.ifact-tx strong { display: block; color: var(--ink); margin-bottom: 2px; font-size: 1rem; }
.ifact-tx p { margin: 0; color: var(--ink-soft); font-size: .92rem; line-height: 1.5; }
/* Two shapes share this box. The icon form (built by calloutBox) is a two-column grid;
   callouts written inline in the content are ordinary prose and must stay in normal flow —
   as a grid their single child landed in the 30px icon column and broke one word per line. */
.callout { margin: 24px 0; padding: 16px 20px; border-radius: 12px;
  border: 1px solid var(--line-2); background: var(--brand-tint); border-left: 4px solid var(--brand); }
.callout-withic { display: grid; grid-template-columns: 30px 1fr; gap: 14px; }
p.callout { line-height: 1.6; color: var(--ink-soft); }
p.callout > a { color: var(--brand-dark); text-decoration: none; font-weight: 600; }
p.callout > a:hover { text-decoration: underline; }
p.callout strong { color: var(--ink); }
p.callout > a strong { color: inherit; }
.callout-warn { background: #fbf2e9; border-left-color: #c98a2e; } .callout-warn .callout-ic { color: #c98a2e; }
.callout-tip { background: var(--accent-wash); border-left-color: var(--accent); } .callout-tip .callout-ic { color: var(--accent-dark); }
.callout-ic { color: var(--brand); margin-top: 2px; } .callout-ic svg { width: 24px; height: 24px; }
.callout-body strong { display: block; margin-bottom: 3px; color: var(--ink); }
.callout-body p { margin: 0; color: var(--ink-soft); line-height: 1.55; }
.tbl-wrap { margin: 26px 0; overflow-x: auto; }
.tbl-wrap table { min-width: 520px; }
.lead-fig { margin: 0 0 30px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-m, var(--shadow-s)); background: #fff; }
.lead-fig img { display: block; width: 100%; height: clamp(220px, 34vw, 380px); object-fit: cover; }
.lead-fig figcaption { padding: 11px 18px; font-size: .9rem; color: var(--ink-soft); border-top: 1px solid var(--line); }
@media (max-width: 620px) { .fig.fig-float { float: none; width: auto; max-width: none; margin: 26px 0; }
  .proc-step { grid-template-columns: 36px 1fr; gap: 12px; } .proc-step::before { width: 34px; height: 34px; }
  .lead-fig img { height: 200px; } }
/* ---- Nordic ranking page + clinic comparison page ---- */
.tbl-scroll { position: relative; overflow-x: auto; margin: 22px 0; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 12px; }
.tbl-scroll table { width: 100%; border-collapse: collapse; min-width: 520px; font-size: .95rem; }
.tbl-scroll th, .tbl-scroll td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl-scroll thead th { background: var(--brand-tint); color: var(--ink); font-weight: 600; white-space: nowrap; }
.tbl-scroll::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 24px;
  background: linear-gradient(90deg, transparent, #fff); pointer-events: none; border-radius: 0 12px 12px 0; }
[dir="rtl"] .tbl-scroll::after { right: auto; left: 0; background: linear-gradient(270deg, transparent, #fff); border-radius: 12px 0 0 12px; }
@media (max-width: 640px) {
  .tbl-scroll table { min-width: 0; font-size: .84rem; }
  .tbl-scroll th, .tbl-scroll td { padding: 8px 10px; word-break: normal; overflow-wrap: anywhere; }
  .tbl-scroll thead th { white-space: normal; }
}
.tbl-scroll tbody tr:last-child th, .tbl-scroll tbody tr:last-child td { border-bottom: 0; }
.rank-wrap { max-width: 900px; }
.rank-crit td.rc-w { text-align: center; font-weight: 700; color: var(--brand-dark); width: 70px; }
.rank-top { }
.rank-top .rk-n { width: 46px; text-align: center; font-weight: 700; color: var(--ink-soft); }
.rank-top .rk-name a { font-weight: 600; }
.rank-top .rk-flag { white-space: nowrap; font-size: 1.05rem; }
.rank-top .rk-name .rk-flag-inline { display: none; }
.rank-top .rk-sc { text-align: center; font-weight: 800; color: var(--brand-dark); width: 70px; }
.rank-top tbody tr:first-child { background: linear-gradient(90deg, var(--brand-tint), transparent); }
@media (max-width: 640px) {
  /* Score is the reason anyone opens this table; Country as its own column pushes
     it off-screen. Fold the flag into the clinic-name cell instead of losing it. */
  .tbl-scroll .rank-top { min-width: 0; font-size: .88rem; }
  .rank-top th:nth-child(3), .rank-top td.rk-flag { display: none; }
  .rank-top .rk-name .rk-flag-inline { display: inline-block; margin-inline-end: 6px; }
}
.rank-note { margin: 18px 0; padding: 14px 18px; border-left: 4px solid var(--brand); background: var(--brand-tint); border-radius: 0 10px 10px 0; }
.rank-note p { margin: 0 0 8px; } .rank-note p:last-child { margin: 0; }
.rank-note strong { color: var(--brand-dark); }
.rank-profiles .container { max-width: 900px; }
.rank-clinic { padding: 26px 0; border-top: 1px solid var(--line); scroll-margin-top: 126px; }
.rank-clinic:first-child { border-top: 0; }
.rank-clinic h2 { display: flex; align-items: center; gap: 12px; font-size: 1.5rem; }
.rk-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 10px; border-radius: 10px;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #fff; font-size: 1rem; font-weight: 700; flex: none; }
.rk-meta { color: var(--ink-soft); font-weight: 600; margin: 2px 0 14px; }
.rank-clinic p { line-height: 1.7; }
.rk-basis { font-size: .92rem; color: var(--ink-soft); background: var(--wash, #faf8f5); border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; }
.rk-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 16px; }
.rk-vs { font-weight: 600; }
.vs-wrap { max-width: 920px; }
.vs-howto { margin: 18px 0 30px; padding: 16px 20px; background: var(--brand-tint); border-radius: 12px; }
.vs-howto p { margin: 0 0 8px; } .vs-howto p:last-child { margin: 0; }
.vs-section { padding: 30px 0; border-top: 1px solid var(--line); scroll-margin-top: 126px; }
.vs-section h2 { font-size: 1.5rem; margin-bottom: 12px; padding-left: 14px; border-left: 5px solid var(--brand); }
.vs-accent-1 h2 { border-left-color: var(--brand); } .vs-accent-2 h2 { border-left-color: var(--accent); }
.vs-accent-3 h2 { border-left-color: #1c7a43; } .vs-accent-4 h2 { border-left-color: #7a5c9e; }
.vs-accent-5 h2 { border-left-color: #c98a2e; }
.vs-box { margin: 0 0 18px; padding: 16px 20px; border: 1px solid var(--line-2); border-radius: 12px; background: linear-gradient(180deg, #fff, var(--brand-tint)); }
.vs-box p { margin: 0 0 8px; } .vs-box p:last-child { margin: 0; }
.vs-table td:last-child, .vs-table th:last-child { background: rgba(178,58,58,.05); }
.vs-table thead th:last-child { background: var(--brand); color: #fff; }
.vs-note { margin: 18px 0; padding: 12px 18px; border-left: 4px solid var(--brand); background: var(--brand-tint); border-radius: 0 10px 10px 0; font-style: normal; }
.vs-summary { background: var(--wash, #faf8f5); border: 1px solid var(--line); border-radius: 10px; padding: 14px 18px; margin: 18px 0 6px; }
.vs-summary strong, .vs-note strong { color: var(--brand-dark); }
.vs-back { font-weight: 600; margin-top: 10px; }
@media (max-width: 620px) { .rank-clinic h2, .vs-section h2 { font-size: 1.28rem; } }
/* ---- Hub / service pages (Turkey, Women, Beard) ---- */
/* Hero (redesign 2026-09-24). Flat warm ground instead of the old cream-to-pink gradient (the
   brand rules out gradients). The markup runs headline, standfirst, CTA, lead plate, which is
   also the desktop order: the pitch and its button read as one unit and the plate follows as
   the feature image. On a phone the plate moves up under the H1 so both images sit inside the
   first screen, where the deks run to eight lines. Grid areas, so an absent eyebrow, dek or
   plate simply collapses; spacing lives on the items because grid margins do not collapse. */
.page-hero.hub-hero { background: var(--bg-soft); padding: 30px 0 44px; }
.hub-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "crumb" "kicker" "title" "visual" "dek" "meta" "cta"; }
.hub-hero-grid > .breadcrumb { grid-area: crumb; margin-bottom: 10px; }
.hub-hero-grid > .eyebrow { grid-area: kicker; justify-self: start; margin-bottom: 8px; }
.hub-hero-grid > h1 { grid-area: title; margin: 4px 0 14px; }
.hub-hero-grid > .fig-pair { grid-area: visual; }
.hub-hero-grid > .hub-dek { grid-area: dek; }
.hub-hero-grid > .hub-reviewed { grid-area: meta; }
.hub-hero-grid > .hub-hero-cta { grid-area: cta; }
.hub-hero .hub-dek { font-size: 1.14rem; color: var(--ink-soft); max-width: 70ch; margin: 0 0 20px; line-height: 1.55; text-wrap: pretty; }
.hub-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.ha-cta-sub { font-size: .86rem; line-height: 1.5; color: var(--ink-soft); max-width: 46ch; }
@media (min-width: 900px) {
  .hub-hero-grid { grid-template-areas: "crumb" "kicker" "title" "dek" "meta" "cta" "visual"; }
  /* Measures kept loose on purpose: the plate has to clear the fold under the longest German
     and Finnish headlines, so a line saved here is worth more than a narrower column. */
  .hub-hero-grid > h1 { max-width: 34ch; margin-bottom: 14px; }
  .hub-hero .hub-dek { font-size: 1.18rem; margin-bottom: 22px; }
}
@media (max-width: 620px) { .hub-hero .hub-dek { font-size: 1.06rem; } }
.hub-article { max-width: 760px; }
.hub-intro { font-size: 1.06rem; line-height: 1.7; color: var(--ink); margin-bottom: 8px; }
.hub-intro p { margin: 0 0 16px; }
/* The intro opens with the page's direct answer; set it as a lede so the article has an entry
   point instead of starting on body copy. */
.hub-intro > p:first-child { font-size: 1.24rem; line-height: 1.55; color: var(--ink); margin-bottom: 20px; }
@media (max-width: 620px) { .hub-intro > p:first-child { font-size: 1.12rem; } }
/* ---- Photograph attached to one section ----------------------------------------------
   Sits beside the prose on desktop so the section keeps its rhythm, and drops to a plain
   block on narrow screens. flow-root on the section contains the float so the next
   heading's rule never rides up alongside the picture. */
.fig-sec { margin: 4px auto 18px; max-width: 300px; }
.fig-sec img { display: block; width: 100%; height: auto; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg-cream); }
.fig-sec-wide { float: none !important; width: auto !important; margin-inline: 0 !important; }
@media (min-width: 760px) {
  .fig-sec { float: right; width: 252px; max-width: none; margin: 6px 0 14px 26px; }
  [dir="rtl"] .fig-sec { float: left; margin: 6px 26px 14px 0; }
}
/* Contain the float with a clearing pseudo-element rather than a block formatting context:
   flow-root would also stop the h2's top margin collapsing out of the section, which silently
   added ~27px between every section on the guide pages. */
.content-section::after, .hub-section::after { content: ""; display: block; clear: both; }
/* Boxed blocks need their own formatting context, or their background slides under the
   floated picture instead of sitting beside it. */
.content-section .ha-answer, .hub-section .ha-answer,
.content-section .callout, .hub-section .callout,
.content-section .hub-check, .hub-section .hub-check,
.content-section .tbl-wrap, .hub-section .tbl-wrap,
.content-section .inline-cta, .hub-section .inline-cta { display: flow-root; }
/* Tables cannot form one, so keep them clear of the picture entirely. */
.content-section table, .hub-section table { clear: both; }

.hub-section { padding: 22px 0; border-top: 1px solid var(--line); scroll-margin-top: 126px; }
.hub-section:first-child { border-top: 0; }
.hub-section h2 { font-size: clamp(1.5rem, 2.2vw, 1.9rem); margin-bottom: 12px; }
.hub-section p { line-height: 1.7; }
/* ---- Long-form chapters: hub sections + research sections (redesign 2026-09-24) ----------
   Twelve sections in a row had one shared anatomy and nothing between them but a hairline, and
   the H3s (serif 600) out-weighed the H2s (serif 500). Now each numbered section opens as a
   chapter: hairline with a short red tab (the site's rule signature), a mono section number,
   then a clearly larger H2; sub-heads step down. The number is CSS-generated from the section
   ids (hs0… / rs0…), so it is language-neutral, skips non-content blocks such as Sources, and
   is marked presentational where the alt-text syntax is supported. */
.hub-article { counter-reset: hsec; }
.re-article { counter-reset: rsec; }
.hub-article .hub-section,
.re-article .content-section[id^="rs"] { position: relative; border-top: 1px solid var(--line); padding: 44px 0 28px; margin: 0; }
.hub-article .hub-section::before,
.re-article .content-section[id^="rs"]::before { content: ""; position: absolute; top: -1px; inset-inline-start: 0; width: 44px; height: 3px; background: var(--brand); }
.hub-article .hub-section[id^="hs"] { counter-increment: hsec; }
.re-article .content-section[id^="rs"] { counter-increment: rsec; }
.hub-article .hub-section > h2,
.re-article .content-section[id^="rs"] > h2 { font-size: clamp(1.55rem, 1rem + 1.8vw, 2.2rem); line-height: 1.14; letter-spacing: -.016em;
  margin: 0 0 18px; padding: 0; border: 0; max-width: 34ch; }
.hub-article .hub-section[id^="hs"] > h2::before,
.re-article .content-section[id^="rs"] > h2::before { display: block; margin: 0 0 12px; font-family: var(--font-kicker); font-size: .74rem;
  font-weight: 500; letter-spacing: .2em; line-height: 1; color: var(--brand); }
.hub-article .hub-section[id^="hs"] > h2::before { content: counter(hsec, decimal-leading-zero); content: counter(hsec, decimal-leading-zero) / ""; }
.re-article .content-section[id^="rs"] > h2::before { content: counter(rsec, decimal-leading-zero); content: counter(rsec, decimal-leading-zero) / ""; }
/* The reference list is authored as the last section of 266 of the 270 articles: apparatus,
   not a chapter — no number, no red tab, a smaller head. */
.re-article .content-section[id^="rs"]:has(> .re-sources) { counter-increment: none; }
.re-article .content-section[id^="rs"]:has(> .re-sources)::before { display: none; }
.re-article .content-section[id^="rs"]:has(> .re-sources) > h2 { font-size: 1.3rem; margin-bottom: 14px; }
.re-article .content-section[id^="rs"]:has(> .re-sources) > h2::before { content: none; }
.hub-article .hub-section h3,
.re-article .content-section h3 { font-size: 1.22rem; font-weight: 600; line-height: 1.3; letter-spacing: -.008em; margin: 32px 0 8px; }
/* Bullets and numbers in the brand red: a quiet signature in long lists of body copy. */
.hub-article .hub-section :is(ul, ol):not([class]) > li::marker,
.re-article .content-section :is(ul, ol):not([class]) > li::marker { color: var(--brand); }
.hub-article .hub-section :is(ul, ol):not([class]) > li,
.re-article .content-section :is(ul, ol):not([class]) > li { margin: 6px 0; padding-inline-start: 4px; }
@media (max-width: 620px) {
  .hub-article .hub-section, .re-article .content-section[id^="rs"] { padding: 34px 0 22px; }
  .hub-article .hub-section h3, .re-article .content-section h3 { font-size: 1.14rem; margin-top: 26px; }
}
/* The direct answer every section opens with (the AEO mechanic) — set as a standfirst with a
   red rule, not a bold pink slab: it stays the first thing read in each section without a dozen
   filled boxes stacking down the page. The content wraps it in <strong>; medium, not bold. */
.ha-answer { font-size: 1.14rem; line-height: 1.6; font-weight: 500; color: var(--ink); background: none;
  border: 0; border-inline-start: 3px solid var(--brand); border-radius: 0; padding-block: 2px; padding-inline: 20px 0; margin: 0 0 24px; max-width: 64ch; }
.ha-answer strong { font-weight: 500; }
.ha-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 22px 0 4px; padding: 16px 18px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-soft); }
.hub-closing { margin-top: 26px; }
.hub-updated { margin-top: 22px; font-size: .84rem; color: var(--muted, var(--ink-soft)); }
.hub-consult-anchor { scroll-margin-top: 74px; }
.hub-section table { width: 100%; max-width: 100%; border-collapse: collapse; margin: 16px 0; font-size: .95rem; }
.hub-section table th, .hub-section table td { padding: 9px 12px; border: 1px solid var(--line); text-align: left; }
.hub-section table thead th { background: var(--brand-tint); }
@media (max-width: 640px) {
  .hub-section table { font-size: .84rem; table-layout: fixed; }
  .hub-section table th, .hub-section table td { padding: 7px 9px; word-break: normal; overflow-wrap: anywhere; }
}
/* Check lists: hub sections and article sections alike (research used to fall back to plain
   black bullets). Logical offsets so the tick sits on the right in Arabic. */
:is(.hub-section, .content-section) .hub-check { list-style: none; padding: 0; margin: 18px 0; display: grid; gap: 10px; }
:is(.hub-section, .content-section) .hub-check li { position: relative; padding-inline-start: 30px; line-height: 1.55; }
:is(.hub-section, .content-section) .hub-check li::before { content: "✓"; position: absolute; inset-inline-start: 0; top: 0; color: var(--brand); font-weight: 800; }
@media (max-width: 620px) { .ha-answer { font-size: 1.06rem; padding-inline-start: 16px; } }
.prices-narrow { max-width: 820px; }
.page-hero .ha-answer { margin-top: 16px; }
.prices-hook { color: var(--ink-soft); font-size: 1.05rem; line-height: 1.6; margin: 4px 0 18px; max-width: 760px; }
.prices-hook p { margin: 0 0 12px; }
.prices-extra .hub-section:first-child { border-top: 1px solid var(--line); }
/* matched cover photos on blog posts + the two hubs */
/* Article hero: same ratio as the cards, so a cover reads identically in the listing and
   on the article itself. The old rule paired a 3/1 wrapper with a clamp()-height image,
   which overflowed the wrapper and let overflow:hidden shave up to 153px off the bottom
   of every article cover. One ratio on the image removes both the mismatch and the clip. */
.blog-post-cover.has-img { padding: 0; background: none; min-height: 0; display: block; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-s); margin: 0 0 10px; }
.blog-post-cover.has-img img { display: block; width: 100%; height: auto; aspect-ratio: var(--blog-img-ratio); object-fit: cover; object-position: var(--blog-img-focus); }
.blog-credit { font-size: .82rem; color: var(--muted); margin: 24px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }
.blog-credit-intro { font-size: .88rem; color: var(--ink-soft); max-width: 720px; margin: 10px 0 0; }

/* ---- SEO listicle hub ---- */
.li-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.li-card { display: flex; gap: 16px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-s); transition: transform .15s ease, box-shadow .15s ease; }
.li-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-m); }
.li-badge { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 14px; background: var(--c, #b23a3a); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.35rem; }
.li-card-body h3 { font-size: 1.1rem; margin: 0 0 6px; line-height: 1.3; }
.li-card-body p { font-size: .9rem; color: var(--muted); margin: 0 0 10px; line-height: 1.5; }
@media (max-width: 720px) { .li-grid { grid-template-columns: 1fr; } }

/* ---- Candidacy page (Am I a candidate) ---- */
/* Fact box — the one quiet tinted block a long page gets (hub key takeaways, research summary),
   redesign 2026-09-24. It used to share the pink fill and red side-bar of every answer and
   "go deeper" link, so nothing stood out. Label as a mono kicker, list set with red dashes. */
.key-takeaways { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 26px 24px; margin: 28px 0; }
.key-takeaways > strong:first-child { display: block; margin: 0 0 14px; font-family: var(--font-kicker); font-size: .74rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--brand); }
.key-takeaways ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.key-takeaways li { position: relative; margin: 0; padding-inline-start: 24px; line-height: 1.6; max-width: 66ch; }
.key-takeaways li::before { content: ""; position: absolute; inset-inline-start: 0; top: .8em; width: 12px; height: 2px; background: var(--brand); }
@media (max-width: 620px) { .key-takeaways { padding: 18px 18px 20px; } }
.hub-reviewed { color: #5a6472; font-size: .9rem; margin: 6px 0 0; }
.cand-glance td:nth-child(2) { background: rgba(46,204,113,.12); }
.cand-glance td:nth-child(3) { background: rgba(241,196,15,.14); }
.cand-glance td:nth-child(4) { background: rgba(231,76,60,.10); }
.cand-quiz { background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius); padding: 24px; margin: 22px 0; }
.cand-quiz-note { color: #5a6472; font-size: .88rem; margin: 0 0 16px; }
.cand-quiz-list { list-style: none; margin: 0 0 18px; padding: 0; }
.cq-item { padding: 14px 0; border-bottom: 1px solid var(--line); }
.cq-item:last-child { border-bottom: 0; }
.cq-q { margin: 0 0 10px; font-weight: 600; }
.cq-opts { display: flex; gap: 18px; flex-wrap: wrap; }
.cq-opts label { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; color: #39424f; }
.cand-quiz-warn { color: #c0392b; font-size: .9rem; margin: 0 0 12px; }
.cand-quiz-result { margin-top: 20px; }
.cqr { border-radius: 14px; padding: 20px 22px; }
.cqr[data-cqr="strong"] { background: rgba(46,204,113,.10); border: 1px solid rgba(46,204,113,.35); }
.cqr[data-cqr="likely"] { background: rgba(241,196,15,.10); border: 1px solid rgba(241,196,15,.40); }
.cqr[data-cqr="notyet"] { background: rgba(231,76,60,.08); border: 1px solid rgba(231,76,60,.30); }
.cqr h3 { margin: 0 0 8px; }
.cqr .btn-cta { margin-top: 14px; }

/* ---- Exclusion callout (red-flags / methodology) ---- */
.exclude-note { background: #fbf7f2; border: 1px solid #e8dcc9; border-left: 4px solid #b23a3a; border-radius: 12px; padding: 18px 22px; margin: 22px 0; }
.exclude-note strong { display: block; margin-bottom: 8px; }
.exclude-note p { margin: 0; }

/* ---- Figure component: SVG charts, diagrams & editorial illustrations ----
   The SVG bakes its own warm-bone #F5F2EC canvas (radius 16); the page card
   here supplies the hairline, elevation and caption per docs/visual-system.md.
   RTL-safe (logical `text-align:start` + symmetric margins). */
.hub-fig {
  margin: 32px auto;
  max-width: 760px;               /* sits within the ~800px article measure */
}
.hub-fig img,
.hub-fig svg {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);   /* 16 — matches the SVG canvas radius, clips media */
  border: 1px solid var(--line);
  background: #f5f2ec;            /* warm figure canvas — seamless under the SVG */
  box-shadow: var(--shadow-s);
}
/* Tap target for the pinch-zoom link (build.js inlineHubFigSvgs) — the icon only signals
   that the figure opens larger; pointer-events stays off it so the whole figure is tappable,
   not just the small badge. */
.hub-fig-zoom { position: relative; display: block; }
/* Beats the earlier ".hub-fig svg { width:100% }" rule on specificity (two classes vs.
   one class + element) rather than relying on source order to win. */
.hub-fig-zoom .hub-fig-zoom-ic {
  position: absolute; inset-block-end: 10px; inset-inline-end: 10px;
  width: 30px; height: 30px; padding: 6px; box-sizing: border-box;
  background: rgba(255,255,255,.92); border: 1px solid var(--line); border-radius: 50%;
  color: var(--ink-soft); pointer-events: none;
}
.hub-fig figcaption {
  margin: 12px 4px 0;
  font-size: .82rem;              /* ~13px caption */
  line-height: 1.5;
  font-style: italic;
  color: var(--muted);           /* #8a8f98 */
  text-align: start;             /* RTL-correct */
}
.hub-fig figcaption strong { color: var(--accent-dark); font-weight: 600; font-style: normal; }
/* source / credit line variant */
.hub-fig .src {
  display: block;
  margin-top: 3px;
  font-style: normal;
  font-size: .72rem;
  letter-spacing: .01em;
  color: var(--muted);
}
/* wide charts may break slightly past the text measure */
.hub-fig--wide { max-width: 940px; }
/* inlined <svg> instead of <img> — never let a min-width chart break the page */
.hub-fig--inline-svg { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.hub-fig--inline-svg svg { min-width: 0; }
@media (max-width: 560px) { .hub-fig { margin: 22px auto; } }
/* ---- Photography: full colour ---------------------------------------------------
   Owner-directed 2026-09-24, reversing the black-and-white pass made earlier the same
   day: photographs render in their own colour everywhere. The pass had routed every
   photo slot (lead-fig, fig-sec, fig-pair photo, blog and research covers, clinic
   photos, blog photos reused in hub-fig) through a --photo-filter set to grayscale(1),
   with a by-file opt-out for before/after and progression shots. Both the filter and
   the opt-out list are gone rather than set to none, so there is no dormant rule to
   re-enable by accident; the slots below are documented here only so the next person
   knows which ones a future treatment would have to cover:
   .lead-fig, .fig-sec, .fig-pair-photo, .blog-cover, .blog-post-cover, .re-card-cover,
   .rr-cover, .re-teaser-thumb, img.clinic-photo, and blog photos inside .hub-fig. */

/* ---- Lead pair: a page's photograph + its key diagram as one plate (build.js figPair) ----
   Owner, 2026-09-24: the two had been stacked as full-width blocks ("like amateur"), and both
   must be visible without scrolling. So they share one hairline frame: a photo strip over the
   figure on a phone, side by side from 700px, where the figure sets the row height and the
   photo crops to fill it. The diagram's own title and deck are lifted out of the artwork into
   this caption (build.js __splitSvgHeader), so the point stays legible at preview size, and
   the whole figure panel opens the full-size, pinch-zoomable SVG. Flat: hairline, warm figure
   canvas, no gradient or lift. Sits after .hub-fig so the equal-specificity resets win. */
.fig-pair {
  display: grid; grid-template-columns: minmax(0, 1fr);
  margin: 0 0 26px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-s);
}
/* In the hub hero it sits under the H1 on a phone and under the CTA from 900px (see
   .hub-hero-grid). Capped so that on a wide screen it keeps the scale it has in the ~800px
   research column instead of stretching across the container. */
.hub-hero .fig-pair { margin: 6px 0 22px; max-width: 980px; }
@media (min-width: 900px) { .hub-hero .fig-pair { margin: 26px 0 0; } }
.fig-pair-photo { position: relative; margin: 0; background: var(--bg-cream); }
.fig-pair-photo img { display: block; width: 100%; height: auto; aspect-ratio: 12 / 5; object-fit: cover; object-position: 50% 35%; }
.hub-fig.fig-pair-fig { position: relative; display: flex; flex-direction: column; margin: 0; max-width: none;
  background: #f5f2ec; border-top: 1px solid var(--line); }
/* Two classes, to outrank the italic ".hub-fig figcaption" credit-line style above. */
.fig-pair-fig .fig-pair-cap { display: block; margin: 0; padding-block: 14px 8px; padding-inline: 16px 56px;
  font-style: normal; font-size: inherit; line-height: inherit; color: var(--ink); text-align: start; }
.fig-pair-cap::before { content: ""; display: block; width: 28px; height: 2px; margin: 0 0 9px; background: var(--brand); }
.fig-pair-title { display: block; font-family: var(--font-display); font-size: 1.06rem; font-weight: 600; line-height: 1.28;
  letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.fig-pair-deck { display: none; margin-top: 5px; font-size: .86rem; line-height: 1.5; color: var(--ink-soft); text-wrap: pretty; }
/* The chart link is stretched over the whole panel, caption included, so the tap target is
   the figure and not only the artwork; the zoom badge moves up beside the caption, where it
   covers no data. The focus ring follows the stretched area. */
.fig-pair-fig .hub-fig-zoom { position: static; }
.fig-pair-fig .hub-fig-zoom::after { content: ""; position: absolute; inset: 0; }
.fig-pair-fig .hub-fig-zoom:focus-visible { outline: none; }
.fig-pair-fig .hub-fig-zoom:focus-visible::after { outline: 2px solid var(--accent); outline-offset: -3px; }
.fig-pair-fig .hub-fig-svg { border: 0; border-radius: 0; box-shadow: none; background: transparent; padding: 0; }
.fig-pair-fig .hub-fig-zoom .hub-fig-zoom-ic { inset-block: 12px auto; inset-inline-end: 12px; width: 32px; height: 32px; padding: 7px; }
.fig-pair-fig .hub-fig-zoom:hover .hub-fig-zoom-ic { color: var(--brand); border-color: var(--brand-tint-2); }
@media (max-width: 699px) {
  /* Hub banners are shot at ~21:8; at that ratio a phone shows them uncropped, and shorter. */
  .hub-hero .fig-pair-photo img { aspect-ratio: 21 / 8; }
  /* Only the cost-by-country chart is taller than this at phone width (237px). Capped, it
     scales down on its own matching canvas, so the pair still ends inside the first screen
     under a four-line German H1. */
  .fig-pair-fig .hub-fig-svg { max-height: 190px; }
}
@media (min-width: 700px) {
  /* Equal halves: every photo here is landscape (1.4:1 to 2.6:1), and a narrower photo column
     cut the two-heads comparison shots through both heads. The chart is a preview at any of
     these widths — its point is in the caption, its detail one tap away. */
  .fig-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* Out of flow so the photo never sets the row height: the figure does, and the photo crops
     to match. The min-height keeps a short chart (the 4:1 timeline) from squeezing it. */
  .fig-pair-photo { min-height: 240px; }
  .fig-pair-photo img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; object-position: 50% 40%; }
  /* A text graphic, not a photograph: cropping it to the panel cuts its words in half. */
  .fig-pair-photo img[src$="/post-fue-vs-dhi.jpg"] { object-fit: contain; }
  .hub-fig.fig-pair-fig { border-top: 0; border-inline-start: 1px solid var(--line); }
  .fig-pair-fig .fig-pair-cap { padding-block: 20px 10px; padding-inline: 22px 60px; }
  .fig-pair-title { font-size: 1.22rem; }
  .fig-pair-deck { display: block; }
  /* When that min-height makes the row taller than the figure, the chart settles to the foot
     of the panel rather than leaving a gap under it. */
  .fig-pair-fig .hub-fig-zoom { margin-top: auto; }
}
/* The photo alone in the frame: a page with no diagram (figPair marks it --solo), or Arabic
   where the diagram has no .ar.svg. :only-child is the safety net if a diagram is ever dropped
   after the markup is written. Hub banners keep their shot ratio, ~21:8, at every width. */
.fig-pair > .fig-pair-photo--solo, .fig-pair > .fig-pair-photo:only-child { grid-column: 1 / -1; min-height: 0; }
.fig-pair > .fig-pair-photo--solo img, .fig-pair > .fig-pair-photo:only-child img { position: static; height: auto; aspect-ratio: 12 / 5; }
.hub-hero .fig-pair > .fig-pair-photo--solo img, .hub-hero .fig-pair > .fig-pair-photo:only-child img { aspect-ratio: 21 / 8; }

/* Dark mode: the site has no global dark theme, so this rule is scoped to the
   figure only. The warm-bone SVG canvas would otherwise float as a bright plate
   on a dark page — mount it in a light bone mat so it reads as intentional. */
@media (prefers-color-scheme: dark) {
  .hub-fig img,
  .hub-fig svg {
    padding: 10px;
    background: #efeae2;                    /* light bone mat around the canvas */
    border-color: rgba(255, 255, 255, .16);
    box-shadow: 0 10px 34px rgba(0, 0, 0, .5);
  }
}

/* Pillar -> sub-page deep-dive link */
/* A link out to the full sub-guide: a plain hairline card with a mono label, not another pink
   box competing with the section's answer (redesign 2026-09-24). */
.deep-dive { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px 15px; margin: 24px 0 4px;
  color: var(--brand-2); transition: border-color .15s ease; }
.deep-dive:hover { border-color: var(--brand); }
.deep-dive strong { display: block; margin: 0 0 4px; font-family: var(--font-kicker); font-size: .7rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.deep-dive a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--brand-tint-2); text-underline-offset: .2em; }
.deep-dive a:hover { color: var(--brand-2); text-decoration-color: currentColor; }

/* ============================================================
   Editorial Medical Authority — flatten pass
   Solid red brand, flat hairline cards, no lift / no glow / no top-bars.
   Appended last so equal-specificity rules win by source order. CSS only —
   every existing class name and selector is preserved.
   ============================================================ */

/* Cards: interaction reads via border + wash cross-fade, never a translateY lift. */
.why-card, .detail-card, .pillar-card, .reason-card, .blog-card,
.re-card, .li-card, .re-related-card, .process-step {
  transition: border-color .18s ease, background-color .18s ease;
}
.why-card:hover, .detail-card:hover, .pillar-card:hover, .reason-card:hover,
.blog-card:hover, .re-card:hover, .li-card:hover, .re-related-card:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--brand);
  background-color: var(--brand-tint);
}

/* Drop the coloured 4px top-bars / animated accent bars on cards. */
.process-step::before, .pillar-card::after { display: none; }
.process-step { padding-top: 22px; }

/* Numbered brand furniture → solid red, no gradient, no coloured glow.
   (Per-category badges keeping their own inline --c hue are left untouched.) */
.ps-num, .proc-step::before, .rk-badge {
  background: var(--brand);
  box-shadow: none;
}

/* Featured clinic cards: keep the red edge, drop the amber-tinted glow → flat shadow. */
.mini-clinic.featured, .clinic-card.featured { box-shadow: var(--shadow-s); }

/* Red-flags / exclusion callout: align the rule to the brand red. */
.exclude-note { border-left-color: var(--brand); }

/* Tables: quiet warm header with ink text (was a red gradient). */
.page-article thead { background: var(--bg-cream); color: var(--ink); }
.page-article thead th { color: var(--ink); }

/* Hero PNG: retire the heavy drop-shadow "float"; keep the badge on a flat shadow. */
.hero-visual img { filter: none; }
.hero-badge { box-shadow: var(--shadow-m); }

/* Gallery: full-width item (e.g. a multi-panel result progression) + caption */
.gallery-grid .gallery-item.is-wide{grid-column:1 / -1;max-width:660px;margin:10px auto;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px}
.gallery-item.is-wide img{width:100%;height:auto;border-radius:8px;display:block}
.gallery-item.is-wide figcaption{color:#4A535C}
.gallery-item figcaption{margin-top:.65rem;font-size:.92rem;line-height:1.5;color:rgba(255,255,255,.74);font-style:italic;text-align:center}

/* Featured real-result band (under the hero) */
.featured-result{text-align:center}
.featured-result .fr-head{max-width:56ch;margin:0 auto 30px}
.fr-figure{max-width:600px;margin:0 auto;background:#fff;border:1px solid var(--line,#e4dfd6);border-radius:14px;padding:14px}
.fr-figure img{width:100%;height:auto;border-radius:8px;display:block}
.fr-figure figcaption{margin-top:.75rem;font-size:.92rem;line-height:1.5;color:#4A535C;font-style:italic}
.fr-cta{margin-top:26px}
/* Before/after results page: gallery reuse on light article background + future case cards */
.page-article .gallery-grid{grid-template-columns:repeat(2,1fr);margin-top:6px}
@media (max-width:520px){.page-article .gallery-grid{grid-template-columns:1fr}}
/* Scoped to article-context only. The homepage's .ba-note sits inside the dark .ba-section
   and inherits the lighter #a9c6bd defined near :237; overriding globally would render it
   near-invisible against the navy band. */
.page-article .ba-note{margin-top:14px;font-size:.9rem;line-height:1.55;color:#4A535C}
.ba-cases{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:20px;margin-top:6px}
.ba-case{background:#fff;border:1px solid var(--line,#e4dfd6);border-radius:14px;padding:12px}
.ba-imgs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ba-case .ba-meta{margin:10px 2px 2px;font-size:.88rem;color:#4A535C}
/* Before & after case gallery. One shared 4:3 frame filled with object-fit: cover, so
   every card is the same size and no bands show. Position is biased above centre to keep
   the hairline when a tall picture has to lose its top and bottom. */
.ba-case{display:flex;flex-direction:column}
.ba-shot{margin:0;border:1px solid var(--line,#e4dfd6);border-radius:10px;overflow:hidden;background:#faf7f7}
.ba-shot img{display:block;width:100%;height:auto;aspect-ratio:4 / 3;object-fit:cover;object-position:50% 30%;background:#faf7f7}
.ba-shot figcaption{display:flex;gap:8px;justify-content:space-between;padding:8px 10px;border-top:1px solid var(--line,#e4dfd6)}
.ba-shot .ba-tag{position:static;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase}
.ba-case .ba-name{margin:12px 2px 0;font-size:1.02rem;line-height:1.3}
.ba-case .ba-meta{margin:4px 2px 2px}
@media (max-width:520px){.ba-cases{grid-template-columns:1fr}}


/* ---------- homepage research & rationale teaser ---------- */
/* Two rows: the studies read as the heavier item, the rationale row as a lighter scan. */
.rr-teaser { background: linear-gradient(180deg, #fff, var(--bg-soft)); }
.rr-part + .rr-part { margin-top: 34px; }
.rr-part-head { font-family: var(--font-kicker); font-size: .78rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 14px;
  padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.rr-grid { display: grid; gap: 16px; }
.rr-cols-2 { grid-template-columns: repeat(2, 1fr); }
.rr-cols-3 { grid-template-columns: repeat(3, 1fr); }
.rr-cols-4 { grid-template-columns: repeat(4, 1fr); }
.rr-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-s); transition: box-shadow .16s, transform .16s; }
.rr-card:hover { box-shadow: var(--shadow-m); transform: translateY(-2px); }
.rr-cover { display: block; aspect-ratio: 16 / 9; background: var(--bg-cream); overflow: hidden; }
.rr-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rr-cover .re-cover-ic { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.rr-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.rr-tag { font-family: var(--font-kicker); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); }
.rr-card h4 { margin: 0; font-size: 1.01rem; line-height: 1.34; }
.rr-card h4 a { color: var(--ink); text-decoration: none; }
.rr-card h4 a:hover { color: var(--brand); }
.rr-by { margin: 0; font-size: .76rem; color: var(--gold); font-weight: 600; }
.rr-sum { margin: 0; font-size: .87rem; line-height: 1.55; color: var(--ink-soft);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rr-study .rr-sum { -webkit-line-clamp: 4; }
.rr-cta { margin-top: 30px; }
@media (max-width: 960px) { .rr-cols-3, .rr-cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .rr-cols-2, .rr-cols-3, .rr-cols-4 { grid-template-columns: 1fr; } }


/* ---------- knowledge guide: one block per pillar ---------- */
/* Replaces the row of teaser cards. Each block presents what a guide actually contains, so the
   reader can see the depth and jump straight to the part they came for. */
.guide-blocks { display: flex; flex-direction: column; gap: 30px; }
.guide-block { background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 28px 24px; box-shadow: var(--shadow-s); position: relative; }
.gb-head { border-bottom: 1px solid var(--line); padding-bottom: 16px; margin-bottom: 18px; }
.gb-num { font-family: var(--font-kicker); font-size: .72rem; letter-spacing: .16em; color: var(--brand); }
.guide-block h2 { font-size: 1.5rem; margin: 4px 0 8px; line-height: 1.25; }
.guide-block h2 a { color: var(--ink); text-decoration: none; }
.guide-block h2 a:hover { color: var(--brand); }
.gb-lead { margin: 0 0 10px; color: var(--ink-soft); line-height: 1.62; max-width: 80ch; }
.gb-meta { margin: 0; font-family: var(--font-kicker); font-size: .74rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); }
.gb-dot { opacity: .5; margin: 0 2px; }
.gb-cols { display: grid; grid-template-columns: 1.35fr 1fr; gap: 26px; }
.gb-col h3 { font-family: var(--font-kicker); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 9px; }
.gb-list { list-style: none; margin: 0; padding: 0; }
.gb-list li { margin: 0 0 6px; line-height: 1.5; }
.gb-list a { color: var(--ink-soft); text-decoration: none; font-size: .93rem;
  border-bottom: 1px solid transparent; }
.gb-list a:hover { color: var(--brand); border-bottom-color: var(--brand); }
.gb-ask a::before { content: "?"; color: var(--gold); font-weight: 700; margin-inline-end: 7px; }
.gb-cta { margin-top: 20px; display: inline-block; }
@media (max-width: 820px) { .gb-cols { grid-template-columns: 1fr; gap: 18px; }
  .guide-block { padding: 22px 20px 20px; } .guide-block h2 { font-size: 1.3rem; } }


/* ---------- statistics: numbered source list ---------- */
/* Every figure on the page traces to an entry here, so the list is part of the argument
   rather than a footnote nobody reads. */
.stat-sources { margin: 0; padding-inline-start: 22px; max-width: 88ch; }
.stat-sources li { margin: 0 0 12px; line-height: 1.6; font-size: .93rem; color: var(--ink-soft); }
.stat-sources a { display: inline-block; word-break: break-word; font-size: .86rem; color: var(--brand); }


/* A hub's optional lead image, sitting between the hero CTA and the intro copy. */
.hub-lead { margin: 26px 0 4px; }
.hub-lead img { width: 100%; height: auto; border-radius: var(--radius); display: block; }

/* Consent checkbox under a lead form (consult widget, clinic finder) — same shape as
   .plan-band .plan-consent but for a light card instead of the dark band. */
.form-consent-check { display: flex; align-items: flex-start; gap: 10px; margin: 12px 2px 0;
  font-size: .82rem; font-weight: 400; line-height: 1.5; color: var(--muted); }
.form-consent-check input { width: auto; flex: none; margin-top: 3px; padding: 0; accent-color: var(--brand); }
.form-consent-check a { color: var(--brand); }

/* Cookie notice: a slim bar, not a modal, so it never competes with the hair-analysis popup
   for the visitor's attention. Hidden by default in markup; site.js reveals it only when no
   choice has been recorded yet (localStorage, so the choice persists across visits). */
.cookie-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--ink);
  color: #b8c9c3; padding: 14px 20px; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: 12px 24px; box-shadow: 0 -2px 16px rgba(0,0,0,.18); }
.cookie-bar[hidden] { display: none; }
.cookie-bar p { margin: 0; font-size: .84rem; line-height: 1.5; max-width: 640px; flex: 1 1 320px; color: #b8c9c3; }
.cookie-bar a { color: #fff; }
.cookie-bar .cookie-actions { display: flex; gap: 10px; flex: 0 0 auto; }
.cookie-bar .btn-outline { background: transparent; border-color: rgba(255,255,255,.4); color: #fff; }
.cookie-bar .btn-outline:hover { background: rgba(255,255,255,.08); border-color: #fff; color: #fff; }
@media (max-width: 560px) {
  .cookie-bar { flex-direction: column; align-items: stretch; text-align: center; }
  .cookie-bar .cookie-actions { justify-content: center; }
}

/* ---- Per-criterion score breakdown under each clinic profile ----------------------------
   Collapsed by default so the ranking still scans, but present in the DOM so it is
   crawlable and quotable. Every row is a criterion; the total is their sum. */
.rk-breakdown { margin: 14px 0 4px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.rk-breakdown > summary { cursor: pointer; padding: 11px 14px; font-family: var(--font-kicker);
  font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.rk-breakdown > summary:hover { color: var(--brand); }
.rk-breakdown[open] > summary { border-bottom: 1px solid var(--line); }
.rank-breakdown { width: 100%; border-collapse: collapse; font-size: .92rem; }
.rank-breakdown th, .rank-breakdown td { padding: 8px 12px; border-bottom: 1px solid var(--line); text-align: start; }
.rank-breakdown thead th { background: var(--bg-cream); font-size: .8rem; }
.rank-breakdown .rb-w, .rank-breakdown .rb-s { text-align: end; white-space: nowrap; }
.rank-breakdown .rb-zero th, .rank-breakdown .rb-zero td { color: var(--muted); }
.rank-breakdown .rb-nd { font-size: .78rem; font-style: italic; }
.rank-breakdown .rb-total th, .rank-breakdown .rb-total td { font-weight: 700; color: var(--ink);
  border-top: 2px solid var(--line-2); border-bottom: 0; background: var(--bg-soft); }
.rb-note { margin: 10px 14px 14px; font-size: .85rem; line-height: 1.55; color: var(--ink-soft); }

/* Shown on any clinic scoring under 50: the score measures what is published, not care given. */
.rk-lownote { margin: 12px 0 4px; padding: 13px 16px; border-radius: 10px;
  background: var(--gold-wash, #F2E3C6); border-inline-start: 4px solid var(--gold, #C8A24B);
  font-size: .9rem; line-height: 1.6; color: var(--ink); }
.rk-lownote strong { color: var(--ink); }

/* A clinic that has stopped trading: stated before the write-up, so nobody reads the
   assessment as a live recommendation. */
.rk-discontinued { margin: 10px 0 16px; padding: 13px 16px; border-radius: 10px;
  background: var(--brand-tint); border-inline-start: 4px solid var(--brand);
  font-size: .92rem; line-height: 1.6; color: var(--ink); }