/* ============ Cyprus Hair Center ============ */
:root {
  /* header: resting size, and the size it shrinks to on scroll */
  --nav-tall: 96px;
  --nav-short: 76px;
  --logo-tall: 66px;
  --logo-short: 50px;
  --petrol: #1D5468;
  --petrol-dark: #143D4D;
  --petrol-deep: #0E2E3B;
  --petrol-light: #2A6E87;
  --accent: #17739B;
  --accent-dark: #115C7D;
  /* The accent above is dark enough to carry white text on a light section,
     but that leaves it close in value to the deep petrol panels, where a
     button would sink into its own section. Those get the lighter tone with
     deep-petrol text instead. */
  --accent-light: #5FBEDF;
  --ink: #16323E;
  --muted: #5B7280;
  --line: #DCE6EA;
  --tint: #F1F6F8;
  --white: #FFFFFF;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(14, 46, 59, .12);
  --font-body: 'Poppins', system-ui, sans-serif;
  --font-display: 'Playfair Display', 'Times New Roman', serif;
  /* light-sheen wave pattern, drawn inline so it costs no request;
     echoes the wave ribbons in the treatment artwork */
  --waves: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 640' preserveAspectRatio='xMidYMid slice'%3E %3Cpath fill='%23ffffff' fill-opacity='.05' d='M0 470 C 260 380 520 500 820 430 C 1090 368 1280 420 1440 350 L1440 640 L0 640 Z'/%3E %3Cpath fill='%23ffffff' fill-opacity='.04' d='M0 560 C 300 480 620 590 940 515 C 1180 460 1330 505 1440 465 L1440 640 L0 640 Z'/%3E %3Cpath fill='%23ffffff' fill-opacity='.035' d='M0 150 C 280 70 620 190 950 120 C 1180 72 1330 105 1440 55 L1440 0 L0 0 Z'/%3E %3C/svg%3E");
  --waves-tint: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 640' preserveAspectRatio='xMidYMid slice'%3E %3Cpath fill='%231D5468' fill-opacity='.04' d='M0 470 C 260 380 520 500 820 430 C 1090 368 1280 420 1440 350 L1440 640 L0 640 Z'/%3E %3Cpath fill='%231D5468' fill-opacity='.03' d='M0 560 C 300 480 620 590 940 515 C 1180 460 1330 505 1440 465 L1440 640 L0 640 Z'/%3E %3Cpath fill='%231D5468' fill-opacity='.025' d='M0 150 C 280 70 620 190 950 120 C 1180 72 1330 105 1440 55 L1440 0 L0 0 Z'/%3E %3C/svg%3E");
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* belt and braces: nothing may widen the page sideways on a phone; clip (not
   hidden) so position: sticky keeps working */
html, body { overflow-x: clip; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.65;
  font-size: 16px;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 15px; }

.container { width: min(1180px, 92%); margin: 0 auto; }
.container--narrow { width: min(860px, 92%); }
.center { text-align: center; margin-top: 40px; }

/* ---------- placeholders (dummy images) ---------- */
.ph {
  position: relative;
  background:
    repeating-linear-gradient(45deg, transparent 0 22px, rgba(29,84,104,.05) 22px 44px),
    linear-gradient(160deg, #E4EDF1, #CBDAE1);
  border: 1px dashed #A9C0CA;
  border-radius: 10px;
  overflow: hidden;
}
.ph::before {
  content: "🖼 " attr(data-label);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7E97A2;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
  text-align: center;
  padding: 8px;
}
.ph--hero { height: 340px; border-color: rgba(255,255,255,.35); background: repeating-linear-gradient(45deg, transparent 0 22px, rgba(255,255,255,.05) 22px 44px), linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.04)); }
.ph--hero::before { color: rgba(255,255,255,.65); }

/* The hero banner takes a real clinic photo once one is supplied; it keeps the
   placeholder's height so the section does not jump when the photo lands. */

.ph--logo { width: 84px; height: 30px; border-radius: 6px; }
.ph--logo::before { content: attr(data-label); font-size: 11px; }
.ph--card { height: 150px; border-radius: 10px 10px 0 0; border-bottom: none; }

/* Real card images take the placeholders' box exactly, so nothing shifts when a
   photo lands. Cropping is centred: a treatment shot has no single anchor point
   the way a portrait does. */
.post-card__img {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
  object-position: center;
}

/* A related card whose target has no image of its own. Rather than a grey
   frame that reads as a failed load, the body fills the card and centres, so
   the row still lines up. The class comes off automatically once an image is
   delivered for that page. */
.post-card--text { display: flex; }
.post-card--text .post-card__body { justify-content: center; min-height: 180px; }
.post-card--text .post-card__cat { color: var(--accent); }
.post-featured__img {
  display: block;
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: center;
}
.ph--about { height: 380px; }
.ph--gallery { height: 200px; }
.ph--tall { grid-row: span 2; height: auto; min-height: 420px; }
.ph--wide { grid-column: span 2; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  padding: 13px 30px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  border: 2px solid transparent;
  transition: transform .15s ease, background .2s ease, color .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-dark); }
.section--dark .btn--primary { background: var(--accent-light); color: var(--petrol-deep); }
.section--dark .btn--primary:hover { background: #7CCEE9; }
.btn--outline { border-color: var(--petrol); color: var(--petrol); background: transparent; }
.btn--outline:hover { background: var(--petrol); color: #fff; }
.btn--outline-light { border-color: rgba(255,255,255,.7); color: #fff; background: transparent; }
.btn--outline-light:hover { background: #fff; color: var(--petrol-dark); }
.btn--block { width: 100%; text-align: center; }
/* The header call to action. Light on the dark bar, so it reads as the one
   thing to press without shouting in a clinic's colours. */
.btn--cta { background: var(--accent-light); color: var(--petrol-deep); font-weight: 600; }
.btn--cta:hover { background: #fff; color: var(--petrol-deep); }

/* ---------- topbar ---------- */
.topbar {
  background: transparent;
  color: rgba(255,255,255,.85);
  font-size: 13px;
  position: relative;
  z-index: 101;
}
/* pages without a photo hero keep the solid bar */
body:not(.has-hero-photo) .topbar { background: var(--petrol-deep); }
body:not(.has-hero-photo) .nav::before { background: var(--petrol); box-shadow: 0 2px 14px rgba(14,46,59,.25); }
body:not(.has-hero-photo) .hero { margin-top: 0; padding-top: 70px; }
.topbar__inner { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; flex-wrap: wrap; gap: 6px; }
.topbar__links { align-items: center; }
.topbar__links { display: flex; gap: 22px; }
.topbar__links a:hover { color: #fff; }
.topbar__social { display: flex; align-items: center; gap: 9px; padding-inline-start: 22px; border-inline-start: 1px solid rgba(255,255,255,.22); }
/* brand-coloured round badges with the white glyph inside */
.topbar__social a {
  display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%;
  color: #fff;
  transition: transform .15s ease;
}
.topbar__social a:hover { color: #fff; transform: scale(1.12); }
.topbar__social svg { width: 13px; height: 13px; fill: currentColor; display: block; }
.topbar__social a[aria-label="Instagram"] { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.topbar__social a[aria-label="Facebook"]  { background: #1877F2; }
.topbar__social a[aria-label="YouTube"]   { background: #FF0000; }
.topbar__social a[aria-label="WhatsApp"]  { background: #25D366; }
.topbar__social a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- nav ---------- */
/* The bar is generous at the top of the page and shrinks once you scroll, so
   the logo and the menu are legible on arrival without eating a fifth of every
   later screen.

   The catch is that .nav is sticky, which means it keeps its place in the flow:
   shrinking its height would pull the whole page up under the reader's eyes
   mid-scroll. So the element itself never changes height. It is a fixed-height
   slot holding two things that do change -- ::before, which paints the bar, and
   .nav__inner, which holds the contents. Content scrolls under the unpainted
   remainder exactly as it scrolls under the bar, so nothing about it shows. */
.nav {
  --nav-now: var(--nav-tall);
  background: transparent;
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-tall);
  /* the unpainted strip must not swallow clicks meant for the page under it */
  pointer-events: none;
}
.nav.is-stuck { --nav-now: var(--nav-short); }
.nav::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: var(--nav-now);
  background: transparent;
  box-shadow: none;
  transition: height .28s ease, background .3s ease, box-shadow .3s ease;
}
.nav.is-stuck::before {
  background: var(--petrol);
  box-shadow: 0 2px 14px rgba(14,46,59,.25);
}
/* the hero starts under the transparent bar, so it reclaims that height */
.nav__inner {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  height: var(--nav-now);
  transition: height .28s ease;
  pointer-events: auto;
}
.nav__brand { display: flex; align-items: center; color: #fff; }
/* real logo asset (square lockup, mark over wordmark) — never redraw */
.nav__logo { width: auto; height: var(--logo-tall); transition: height .28s ease; }
.nav.is-stuck .nav__logo { height: var(--logo-short); }
.nav__links { display: flex; gap: clamp(15px, 1.7vw, 26px);
  font-size: clamp(16.5px, 1.45vw, 18.5px); font-weight: 500;
  transition: font-size .28s ease; }
.nav.is-stuck .nav__links { font-size: clamp(15.5px, 1.3vw, 17px); }
.nav__links > a, .has-drop__btn { white-space: nowrap; }   /* a menu item never breaks in two */
.nav__links a { opacity: .9; padding: 6px 0; border-bottom: 2px solid transparent; }
.nav__links a:hover { opacity: 1; border-bottom-color: var(--accent); }
.nav__actions { display: flex; align-items: center; gap: 14px; }
.nav__contact { padding: 11px 26px; font-size: 16.5px; transition: padding .28s ease, font-size .28s ease; }
.nav__cta { padding: 11px 22px; font-size: 16.5px; white-space: nowrap; transition: padding .28s ease, font-size .28s ease; }
.nav.is-stuck .nav__contact,
.nav.is-stuck .nav__cta { padding: 10px 24px; font-size: 15.5px; }
/* The drawer copy. Only one of the two is ever on screen -- see the 900px
   and 1024px blocks below. */
.nav__cta-m { display: none; }
.nav__lang { background: none; border: none; color: #fff; font-size: 15px; opacity: .85; }
.nav__burger { display: none; background: none; border: none; flex-direction: column; gap: 5px; padding: 6px; }
.nav__burger span { width: 24px; height: 2px; background: #fff; display: block; }

/* ---------- hero ---------- */
.hero {
  /* The clinic photo (.hero__bg) sits behind everything; this gradient stays
     as the ground under it while it loads. The legibility overlay lives on
     ::before -- heavy on the text side, thin on the far side so the room
     stays visible. */
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(165deg, var(--petrol-dark), var(--petrol) 55%, var(--petrol-light));
  color: #fff;
  /* pulled up under the transparent header, then padded back past it */
  margin-top: calc(-1 * var(--nav-h, 113px));
  padding: calc(64px + var(--nav-h, 113px)) 0 50px;
}
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -2;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    var(--waves) center / cover no-repeat,
    linear-gradient(90deg, rgba(14,46,59,.72) 0%, rgba(14,46,59,.55) 45%, rgba(14,46,59,.14) 100%);
}
.is-rtl .hero::before {
  background:
    var(--waves) center / cover no-repeat,
    linear-gradient(270deg, rgba(14,46,59,.72) 0%, rgba(14,46,59,.55) 45%, rgba(14,46,59,.14) 100%);
}
.hero__copy { max-width: 580px; }
.hero__copy h1 { text-shadow: 0 2px 18px rgba(8,28,37,.5); font-family: var(--font-display); font-size: clamp(34px, 4.6vw, 56px); line-height: 1.12; font-weight: 700; }
.hero__sub { text-shadow: 0 1px 10px rgba(8,28,37,.45); margin-top: 14px; font-size: 18px; font-weight: 300; opacity: .92; max-width: 520px; }
/* Badges: one line only. js/main.js shows two at a time (one on phones) and rotates through
   the four; with reduced motion, or without JS, all four simply wrap. */
.hero__badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 28px; min-height: 25px; }
.hero__badges.is-rotating { flex-wrap: nowrap; }
.hero__badges.is-rotating .badge { transition: opacity .35s ease; white-space: nowrap; }
.hero__badges.is-rotating .badge.is-off { display: none; }
.hero__badges.is-rotating .badge.is-fading { opacity: 0; }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  padding: 4px 12px 4px 9px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
}
.badge__ico { width: 14px; height: 14px; flex: none; opacity: .9; }
/* Copy on the left, the consultation card on the right (mirrored under .is-rtl by the
   direction rule below). On phones and small tablets the card drops under the copy. */
.hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 48px; align-items: center; }
.hero__form-card { width: 100%; max-width: 400px; justify-self: end; }
@media (max-width: 900px) {
  /* minmax(0, 1fr), not 1fr: a bare 1fr track is minmax(auto, 1fr), and its
     minimum is the widest thing inside it. On an iPhone the track grew past the
     phone, the headline stopped wrapping and the form card ran off the right
     edge, clipped by the hero's overflow:hidden so nothing measured as
     overflowing (2026-09-21). With a 0 minimum the track can never be wider
     than the hero, whatever a field or a badge asks for. */
  .hero__inner { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .hero__copy, .hero__form-card { min-width: 0; max-width: 100%; }
  .hero__form-card { justify-self: stretch; max-width: 460px; margin: 0 auto; }
  .hero__badges { max-width: 100%; overflow: hidden; }
  /* Once the form drops below the copy the hero is taller than it is wide, so
     `cover` throws away most of the photo's width. Centred, what survives is the
     middle of the sign -- two-metre letters behind the headline. Biased left it
     keeps the glass front, which reads as a backdrop instead of a second title. */
  .hero__bg { object-position: 18% center; }
}
.hero__form-card {
  background: #fff;
  color: var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 38px 30px 34px;
}
.hero__form-card h2 { text-align: center; color: var(--petrol); font-size: 19px; letter-spacing: .06em; margin-bottom: 28px; }
.field { display: flex; align-items: center; gap: 10px; border-bottom: 1.5px solid var(--line); padding: 15px 2px; margin-bottom: 20px; }
.field__icon { opacity: .55; font-size: 15px; }
.field input { border: none; outline: none; flex: 1; background: none; min-width: 0; width: 100%; }
/* min-width: 0 on both: a flex item's automatic minimum is its intrinsic width, and
   an iOS text field or select can ask for more than a phone row has */
.field select { min-width: 0; }
.field--phone { gap: 8px; }
.field--phone select { border: none; outline: none; background: none; font-size: 14px; color: var(--muted); max-width: 110px; }
.checkline { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--muted); margin: 16px 0 18px; cursor: pointer; }
.checkline input { margin-top: 3px; accent-color: var(--accent); }
.checkline a { color: var(--petrol); text-decoration: underline; }
.checkline--light { color: rgba(255,255,255,.75); }
.checkline--light a { color: #fff; }
.form-note { font-size: 13px; margin-top: 10px; text-align: center; color: var(--petrol); min-height: 1em; }

.hero__reviews { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 54px; }
.review-pill {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}
.review-pill { transition: background .2s ease, transform .15s ease; }
/* the pill links to the Google listing, so the 4.4 is one click from being checked */
.review-pill { color: inherit; text-decoration: none; }
.review-pill:hover, .review-pill:focus-visible {
  background: rgba(255,255,255,.18);
  transform: translateY(-2px);
}
.review-pill:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.review-pill strong { font-size: 20px; line-height: 1; }
.review-pill span { opacity: .8; }
.review-pill__g { width: 22px; height: 22px; flex: none; display: block; }
.review-pill__top { display: flex; align-items: center; gap: 10px; }

/* 4.4 of 5 rendered as a precise partial fill */
.stars { position: relative; display: inline-block; font-size: 15px; letter-spacing: 2px; line-height: 1; }
.stars::before { content: "★★★★★"; color: rgba(255,255,255,.3); }
.stars__fill {
  position: absolute;
  inset: 0;
  width: 88%;           /* 4.4 / 5, the clinic's Google rating */
  overflow: hidden;
  white-space: nowrap;
  color: #F5B301;
}
.stars__fill::before { content: "★★★★★"; }

/* ---------- stats ---------- */
.stats { background: #fff; border-bottom: 1px solid var(--line); }
.stats__inner { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; padding: 64px 0; gap: 24px; }
/* the about page carries the same three figures as a white card inside a tinted section */
.stats--about { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 48px 24px; }
.stat__num, .stat__plus {
  font-family: var(--font-display);
  font-size: clamp(24px, 6.5vw, 70px);
  font-weight: 700;
  color: var(--petrol);
}
.stat__plus { color: var(--accent); }
.stat p { color: var(--muted); font-size: 15.5px; margin-top: 8px; line-height: 1.45; }

/* ---------- sections ---------- */
.section { padding: 84px 0; }
.section--tint { background: var(--waves-tint) center / cover no-repeat var(--tint); }
.section--dark {
  background:
    var(--waves) center / cover no-repeat,
    linear-gradient(165deg, var(--petrol-deep), var(--petrol-dark));
  color: #fff;
}
.eyebrow {
  color: var(--petrol-light);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 13px;
  margin-bottom: 8px;
}
.eyebrow--light { color: #9CC4D4; }
.section__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 700;
  color: var(--petrol-deep);
  margin-bottom: 18px;
  line-height: 1.2;
}
.section__title--light { color: #fff; }
.section__lead { max-width: 720px; color: var(--muted); margin-bottom: 40px; }
.section__lead--light { color: rgba(255,255,255,.8); }

/* ---------- before / after ---------- */
.results-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; margin-top: 36px; }
/* Framed card: dark petrol frame, white inset for the pair, a divider band
   with the clinic badge at the foot. No caption -- the photographs speak. */
.result-card {
  background: var(--waves) center / cover no-repeat, var(--petrol-deep);
  border-radius: 22px;
  padding: 20px 20px 0;
  box-shadow: 0 12px 32px rgba(14,46,59,.18);
  margin: 0;
}
.frame__inset { background: #fff; border-radius: 14px; padding: 8px; }
.frame__foot {
  position: relative;
  height: 84px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 4px 0;
  gap: 12px;
}
/* technique on one side of the badge, graft count on the other */
.frame__fact { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.frame__fact:last-child { text-align: end; }
.frame__k {
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(255,255,255,.62);
}
.frame__v { font-size: 20px; font-weight: 600; color: #fff; line-height: 1.15; white-space: nowrap; }
/* the badge straddles the bottom edge of the white panel */
.frame__badge {
  position: absolute; top: 0; left: 50%;
  transform: translate(-50%, -50%);
  width: 115px; height: 115px; border-radius: 50%;
  background: var(--petrol);
  border: 4px solid #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,.28);
  display: grid; place-items: center;
}
.frame__badge img { width: 72px; height: auto; display: block; }

/* before/after: two photos side by side */
.ba { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; position: relative; }
/* the line between the two photographs */
.ba::after {
  content: '';
  position: absolute; top: 5%; bottom: 5%; left: 50%;
  width: 1px; transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, rgba(14,46,59,.28) 15%, rgba(14,46,59,.28) 85%, transparent);
}

.ba__item { position: relative; }
.ph--ba { height: 230px; border-radius: 8px; }

/* Real result photos sit where the .ph placeholders were.
   The box follows the photos' own 6:7 ratio rather than a fixed height: with a
   fixed height the card widens on large screens while the height stays put, and
   cover then eats the bottom third of every face. object-fit/position stay as a
   safety net for any future photo shot at a different ratio — a mismatch then
   crops from the chin, never from the hairline. */
.ba__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 6 / 7;
  object-fit: cover;
  object-position: center top;
  border-radius: 9px;
  background: var(--ph-bg, #e8eef1);
}
/* Bigger result photos: the results area breaks out to a wider container than
   the rest of the page, the card padding shrinks, and the gap between the pair
   tightens -- all of it handed to the images. */
.results-wide { width: min(1420px, 94%); }
.results-grid { gap: 30px; }
/* The dedicated page shows one case per row, so each photo is roughly a third
   wider again than on the homepage grid. Capped, because cases 1-4 were
   delivered at 300x350 and stretching them past that only softens them. */
/* ---------- patient gallery ---------- */
/* One case per row. The reference gallery puts three or four abreast, but each
   of its cards holds a single photograph -- ours holds a before and an after
   side by side, so two abreast drops each photo from 435px to 326px, undoing
   the earlier request to make these bigger. Change to repeat(2, 1fr) to trade
   that size for more cases on screen at once. */
.results-grid--gallery { grid-template-columns: 1fr; max-width: 900px; margin-inline: auto; gap: 34px; }
.results-grid--all {
  grid-template-columns: 1fr;
  max-width: 900px;
  margin: 36px auto 0;
  gap: 26px;
}
.ba-note {
  margin-top: 34px;
  text-align: center;
  font-size: 14px;
  color: var(--muted);
  max-width: 60ch;
  margin-inline: auto;
}
@media (max-width: 860px) {
  .results-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .result-card { border-radius: 16px; padding: 12px 12px 0; }
  .frame__inset { padding: 5px; border-radius: 10px; }
  .ba { gap: 5px; }
  .ba__img { border-radius: 6px; }
  .frame__foot { height: 66px; padding-top: 8px; }
  .frame__k { font-size: 10px; }
  .frame__v { font-size: 16px; }
  .frame__badge { width: 90px; height: 90px; border-width: 3px; }
  .frame__badge img { width: 56px; }
}
.ba__tag {
  position: absolute;
  top: 10px; left: 10px;
  background: rgba(14,46,59,.75);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 4px 13px;
}
.ba__tag--after { background: var(--accent); }

/* ---------- accordion (shared) ---------- */
.accordion__item { border-bottom: 1px solid var(--line); }
.accordion__head {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  font-size: 17px;
  font-weight: 600;
  color: var(--petrol-deep);
  padding: 18px 40px 18px 18px;
  position: relative;
}
.accordion__head::after {
  content: "+";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent);
  font-size: 22px;
  font-weight: 400;
  transition: transform .2s ease;
}
.accordion__item.is-open .accordion__head::after { content: "–"; }
.accordion__body { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.accordion__item.is-open .accordion__body { max-height: 400px; }
.accordion__body p { padding: 0 18px 20px; color: var(--muted); font-size: 15px; }

/* ---------- why ---------- */
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 14px; }
.why-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius);
  padding: 26px 22px;
}
.why-card h3 { font-size: 17px; margin-bottom: 10px; color: #fff; }
.why-card p { font-size: 14px; color: rgba(255,255,255,.75); }
.why-grid--7 { grid-template-columns: repeat(3, 1fr); }   /* six cards: two even rows of three */

/* mission / vision under the about copy */
.mv { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 44px; }
.mv__card {
  background: var(--tint);
  border: 1px solid rgba(14,46,59,.08);
  border-radius: var(--radius);
  padding: 28px 26px;
}
.mv__card h3 { font-size: 18px; margin-bottom: 10px; color: var(--petrol-deep); }
.mv__card p { font-size: 15px; color: var(--muted); margin: 0; }

/* ---------- treatments ---------- */
/* Image-led treatment cards: the photo IS the card, the title sits on a petrol
   gradient over its lower edge. The first two cards (Sapphire — the house
   technique — and the women's protocol) are featured at double width. */
.treat-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; margin-top: 36px; }
.treat-card {
  position: relative;
  grid-column: span 2;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--petrol-deep);
  box-shadow: 0 4px 16px rgba(14,46,59,.10);
  transition: box-shadow .25s ease, transform .25s ease;
}
.treat-grid .treat-card:nth-child(-n+2) { grid-column: span 3; }
.treat-card__img {
  display: block;
  width: 100%;
  height: 260px;
  object-fit: cover;
  object-position: center;
  transition: transform .5s ease;
}
.treat-grid .treat-card:nth-child(-n+2) .treat-card__img { height: 340px; }
.treat-card:hover { box-shadow: var(--shadow); transform: translateY(-4px); }
.treat-card:hover .treat-card__img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
  .treat-card, .treat-card__img { transition: none; }
  .treat-card:hover .treat-card__img { transform: none; }
}
.treat-card h3 {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  margin: 0;
  padding: 44px 18px 15px;
  font-size: 16.5px;
  color: #fff;
  text-align: start;
  background: linear-gradient(180deg, rgba(14,46,59,0) 0%, rgba(14,46,59,.82) 78%);
}
.treat-grid .treat-card:nth-child(-n+2) h3 { font-size: 20px; padding-bottom: 18px; }

/* ---------- gallery ---------- */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 36px; }

/* ---------- guide ---------- */
/* Patient guide: photo with the step buttons beneath it on the left, the step text on the right;
   on phones the photo, then the buttons, then the text. */
.guide-tabs { margin-top: 36px; display: grid; grid-template-columns: 1fr 1.2fr; gap: 36px; align-items: center; }
.guide-tabs__nav { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.guide-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1.5px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  transition: all .2s ease;
}
.guide-tab__num {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--tint);
  color: var(--petrol);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;
}
.guide-tab.is-active { background: var(--petrol); border-color: var(--petrol); color: #fff; }
.guide-tab.is-active .guide-tab__num { background: var(--accent); color: #fff; }
.guide-panel { display: none; }
.guide-panel.is-active { display: block; }
.guide-panel p { color: var(--muted); }
.guide-panel > p + p { margin-top: 14px; }
.guide-panel__img { display: none; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.guide-panel__img.is-active { display: block; }

/* ---------- clinic slider ---------- */
/* One big rotating photo band. Slides are stacked and cross-fade; the dots
   both indicate and drive position. Auto-rotation lives in main.js and stands
   down under prefers-reduced-motion. */
.clinic-slider {
  position: relative;
  margin-top: 36px;
  height: 520px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(8,28,37,.35);
}
.clinic-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .9s ease;
}
.clinic-slide.is-active { opacity: 1; }
.clinic-slide .ph,
.clinic-slide img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.clinic-slide .ph {
  border-radius: 0;
  border-color: rgba(255,255,255,.3);
  background: repeating-linear-gradient(45deg, transparent 0 22px, rgba(255,255,255,.05) 22px 44px), linear-gradient(160deg, rgba(255,255,255,.1), rgba(255,255,255,.03));
}
.clinic-slide .ph::before { color: rgba(255,255,255,.6); }
.clinic-slider__dots {
  position: absolute;
  bottom: 18px;
  inset-inline: 0;
  display: flex;
  justify-content: center;
  gap: 10px;
  z-index: 2;
}
.clinic-slider__dots button {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.65);
  background: rgba(255,255,255,.25);
  padding: 0;
  transition: background .25s ease, transform .25s ease;
}
.clinic-slider__dots button.is-active { background: #fff; transform: scale(1.25); }
.clinic-slider__dots button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .clinic-slide { transition: none; }
}

/* ---------- about ---------- */
.about { display: grid; grid-template-columns: 1.45fr 1fr; gap: 52px; align-items: center; }
.about__copy p { color: var(--muted); margin-bottom: 16px; }
.about__copy .btn { margin-top: 10px; }

/* ---------- contact ---------- */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.contact__list { margin-top: 26px; display: grid; gap: 12px; color: rgba(255,255,255,.85); font-size: 15px; }
.contact__form { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius); padding: 30px; display: grid; gap: 14px; }
.contact__form input, .contact__form textarea {
  background: rgba(255,255,255,.95);
  border: none;
  border-radius: 8px;
  padding: 13px 16px;
  outline: none;
  resize: vertical;
}
.contact .form-note { color: #FBD3B4; }

/* ---------- footer ---------- */
.footer { background: var(--waves) center / cover no-repeat var(--petrol-deep); color: rgba(255,255,255,.75); padding: 64px 0 30px; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 40px; }
.footer__logo { width: 160px; height: auto; margin-bottom: 18px; }
.footer__brand p { font-size: 14px; max-width: 260px; }
.footer h4 { color: #fff; font-size: 15px; margin-bottom: 14px; letter-spacing: .04em; }
.footer__grid a { display: block; font-size: 14px; padding: 5px 0; opacity: .8; }
.footer__grid a:hover { opacity: 1; color: var(--accent); }
/* Google review badge. Carries the same 4.7 / 500+ as the hero pill, on the
   clinic's instruction. NOTE: this badge names Google, so those figures must
   match what the Google listing actually shows -- an earlier project note put
   the listing at 4.4 / 65. Confirm before the site goes live. */
.footer__reviews .gbadge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  opacity: 1;
}
.gbadge__score { font-family: var(--font-display); font-size: 22px; font-weight: 700; line-height: 1; }
.gbadge__stars { color: #F5B301; font-size: 14px; letter-spacing: 1px; }
.gbadge__label { width: 100%; font-size: 12.5px; opacity: .75; }

/* A training certificate under the brand column: small, framed, opens full size in a new tab. */
.footer__cert { display: block; max-width: 200px; margin-top: 22px; text-decoration: none; }
.footer__cert img {
  display: block; width: 100%; height: auto;
  border-radius: 8px; border: 1px solid rgba(255,255,255,.18);
  transition: transform .18s, border-color .18s;
}
.footer__cert:hover img { transform: translateY(-2px); border-color: rgba(255,255,255,.45); }
.footer__cert span { display: block; margin-top: 8px; font-size: 12.5px; line-height: 1.4; opacity: .7; }

.footer__bottom { border-top: 1px solid rgba(255,255,255,.14); margin-top: 46px; padding-top: 22px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12.5px; }
.footer__disclaimer { opacity: .6; }

/* ---------- clinic video ---------- */
/* A still with a play button. The real player is only fetched when someone
   presses it -- see tools/set_video.py for why. */
.video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--waves-tint) center / cover no-repeat var(--tint);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
}
.video__poster { width: 100%; height: 100%; object-fit: cover; }
.video__wait { color: var(--muted); font-size: 13px; }
.video__btn {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; padding: 0;
  background: rgba(14,46,59,.18);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .18s;
}
.video__btn:hover, .video__btn:focus-visible { background: rgba(14,46,59,.3); }
.video__play {
  width: 76px; height: 54px;
  border-radius: 14px;
  background: #E62117;
  box-shadow: 0 4px 18px rgba(0,0,0,.3);
  position: relative;
  transition: transform .18s;
}
.video__play::after {
  content: '';
  position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent #fff;
}
/* The glyph is a triangle drawn with borders, so it has to be flipped by hand
   when the page does; the box around it is symmetrical and needs nothing. */
.is-rtl .video__play::after { transform: translate(50%, -50%) scaleX(-1); }
.video__btn:hover .video__play { transform: scale(1.08); }
.video iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- photo guide ---------- */
/* Five photographs, each with its own caption, rather than one picture with the
   words baked in. The artwork arrives as a single transparent PNG and
   tools/import_photo_guide.py cuts it up, so the captions can be translated --
   and, because every caption is a child of the photograph it describes, it
   cannot end up under the wrong one when the grid mirrors itself on an
   Arabic, Hebrew or Persian page. Grid columns follow the writing direction,
   so that mirroring needs no rules of its own. */
.guide {
  display: grid;
  grid-template-columns: 1fr 0.86fr 1fr;
  gap: 26px 30px;
  align-items: start;
  margin-top: 32px;
  padding: 34px 30px;
  border-radius: var(--radius);
  background: var(--waves-tint) center / cover no-repeat var(--tint);
  border: 1px solid var(--line);
}
.guide__shot { margin: 0; }
/* The cuts keep their soft corners as transparency, so nothing is painted
   behind them. */
.guide__shot img { width: 100%; height: auto; display: block; }
.guide__shot figcaption { margin-top: 12px; text-align: center; }
.guide__shot strong { display: block; font-size: 15px; color: var(--petrol-deep); margin-bottom: 4px; }
.guide__shot span { display: block; font-size: 13.5px; color: var(--muted); line-height: 1.5; }

.guide__shot--crown { grid-column: 1; grid-row: 1; }
.guide__shot--left  { grid-column: 1; grid-row: 2; }
.guide__shot--right { grid-column: 3; grid-row: 1; }
.guide__shot--donor { grid-column: 3; grid-row: 2; }
/* The front shot is the portrait one and stands between the other four. */
.guide__shot--front { grid-column: 2; grid-row: 1 / span 2; align-self: center; }

/* ---------- photo uploader ---------- */
/* Sits inside the dark contact form, so everything here is light on dark.
   The real <input type=file> stays in the page for keyboard and no-JavaScript
   use; the label is what people see. */
.uploader { margin: 4px 0 2px; }
.uploader__input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.uploader__btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 18px;
  border: 1.5px dashed rgba(255,255,255,.38);
  border-radius: var(--radius);
  color: #fff; font-size: 15px;
  cursor: pointer;
  transition: border-color .18s, background .18s;
}
.uploader__btn:hover { border-color: var(--accent-light); background: rgba(255,255,255,.05); }
.uploader__input:focus-visible + .uploader__btn { outline: 2px solid var(--accent-light); outline-offset: 2px; }
.uploader__plus { width: 18px; height: 18px; position: relative; flex: none; }
.uploader__plus::before, .uploader__plus::after {
  content: ''; position: absolute; background: var(--accent-light);
  inset-block-start: 50%; inset-inline-start: 50%;
  transform: translate(-50%, -50%);
}
.uploader__plus::before { width: 18px; height: 2px; }
.uploader__plus::after { width: 2px; height: 18px; }
.uploader__hint { font-size: 12.5px; color: rgba(255,255,255,.62); margin-top: 8px; line-height: 1.5; }
.uploader__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.uploader__list:empty { display: none; }
.uploader__item { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: rgba(0,0,0,.25); }
.uploader__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.uploader__drop {
  position: absolute; inset-block-start: 4px; inset-inline-end: 4px;
  width: 24px; height: 24px;
  border: 0; border-radius: 50%;
  background: rgba(14,46,59,.78); color: #fff;
  font-size: 15px; line-height: 1;
  cursor: pointer;
  display: grid; place-items: center;
}
.uploader__drop:hover { background: #B3261E; }
.uploader__size { position: absolute; inset-block-end: 0; inset-inline: 0; font-size: 10.5px; text-align: center; padding: 3px 2px; background: rgba(14,46,59,.7); color: #fff; }

/* ---------- what happens next ---------- */
.nextup { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 34px; }
.nextup__step { padding-top: 6px; }
.nextup__n {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--accent); color: #fff;
  font-family: var(--font-display); font-size: 19px;
  margin-bottom: 14px;
}
.nextup__step h3 { font-size: 17px; color: var(--petrol-deep); margin-bottom: 8px; }
.nextup__step p { font-size: 14.5px; color: var(--muted); }

@media (max-width: 900px) {
  /* The three-column composition stops fitting: the front shot goes on top
     and the four angles pair off underneath. DOM order already puts the front
     one first, so nothing has to be reordered. */
  .guide { grid-template-columns: 1fr 1fr; gap: 20px; padding: 22px 18px; }
  .guide__shot--crown, .guide__shot--left,
  .guide__shot--right, .guide__shot--donor { grid-column: auto; grid-row: auto; }
  .guide__shot--front { grid-column: 1 / -1; grid-row: auto; max-width: 240px; margin-inline: auto; }
  .nextup { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 380px) {
  /* Still two columns: one per row would put roughly a screen and a half of
     photographs between the reader and the form they came for. The caption
     carries the instruction; the picture only has to show the pose. */
  .guide { gap: 14px; padding: 18px 14px; }
}

/* ---------- patient stories ---------- */
/* Three portrait videos, Instagram-reel shaped, served from our own server. A
   still with a play button until pressed; the <video> element is created on
   the click -- see tools/build_stories.py. */
.stories {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  max-width: 1040px;
  margin: 36px auto 0;
}
.story-card { margin: 0; }
.story {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--waves-tint) center / cover no-repeat var(--petrol-deep);
  border: 1px solid var(--line);
  box-shadow: 0 4px 16px rgba(14,46,59,.09);
  display: flex; align-items: center; justify-content: center;
}
.story--empty { background: var(--waves-tint) center / cover no-repeat var(--tint); }
.story__wait { color: var(--muted); font-size: 13px; }
.story__poster { width: 100%; height: 100%; object-fit: cover; }
.story__btn {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; padding: 0;
  background: linear-gradient(to top, rgba(14,46,59,.45), rgba(14,46,59,.05) 45%);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .18s;
}
.story__btn:hover, .story__btn:focus-visible { background: linear-gradient(to top, rgba(14,46,59,.55), rgba(14,46,59,.15) 45%); }
.story__play {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  box-shadow: 0 4px 18px rgba(0,0,0,.28);
  position: relative;
  transition: transform .18s;
}
.story__play::after {
  content: '';
  position: absolute; top: 50%; left: 50%;
  transform: translate(-42%, -50%);
  border-style: solid;
  border-width: 11px 0 11px 19px;
  border-color: transparent transparent transparent var(--petrol-deep);
}
.story__btn:hover .story__play { transform: scale(1.08); }
.story video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.story__cap { text-align: center; font-size: 13.5px; color: var(--muted); margin-top: 12px; }
@media (max-width: 760px) {
  .stories { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 100%; }
  .story__play { width: 46px; height: 46px; }
  .story__play::after { border-width: 8px 0 8px 14px; }
}
@media (max-width: 480px) {
  .stories {
    display: flex; gap: 14px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    /* .container is 92% wide, so the bleed is the 4% either side */
    margin-inline: -4vw;
    padding-inline: 4vw;
  }
  .story-card { flex: 0 0 72%; scroll-snap-align: center; }
}

/* ---------- google reviews ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.reviews__inner {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}
.reviews__summary { position: relative; text-align: center; }
.reviews__grade {
  font-family: var(--font-display);
  font-size: 30px; font-weight: 700; letter-spacing: .5px;
  color: var(--petrol-deep);
  margin: 0 0 10px;
}
/* The gold row is clipped to the score, so 4.7 does not read as a clean five. */
.rev-rating { position: relative; display: inline-block; line-height: 1; }
.rev-rating__base, .rev-rating__fill { font-size: 26px; letter-spacing: 0; }
.rev-rating__base { color: #DCE3E6; }
.rev-rating__fill {
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  overflow: hidden; white-space: nowrap;
  color: #F5B301;
}
.reviews__based { font-size: 13.5px; color: var(--muted); margin: 12px 0 14px; }
.reviews__summary .rev-g { width: 32px; height: 32px; margin-inline: auto; }
.rev-g { width: 20px; height: 20px; flex: none; }
/* the card mark opens the review it attributes */
.rev-card__src { display: block; line-height: 0; border-radius: 50%; opacity: .85; }
.rev-card__src:hover, .rev-card__src:focus-visible { opacity: 1; }
.rev-card__src:focus-visible { outline: 2px solid var(--petrol); outline-offset: 3px; }

.reviews__scroller { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; }
.rev-nav {
  flex: none;
  width: 38px; height: 38px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--petrol);
  font-size: 22px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .15s, border-color .15s, opacity .15s;
}
.rev-nav:hover:not(:disabled) { background: var(--tint); border-color: var(--petrol-light); }
.rev-nav:disabled { opacity: .3; cursor: default; }
/* The chevrons are literal characters, so they must be mirrored by hand when
   the page flips; the buttons themselves are reordered by the flex container. */
.is-rtl .rev-nav span[aria-hidden] { display: inline-block; transform: scaleX(-1); }
.reviews__track:focus-visible { outline: 2px solid var(--petrol-light); outline-offset: 4px; }
.reviews__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.reviews__track.is-dragging .rev-card { pointer-events: none; }

.reviews__track {
  display: flex;
  min-width: 0;
  scroll-behavior: smooth;
  gap: 20px;
  overflow-x: auto;
  padding: 4px 2px 14px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.reviews__track::-webkit-scrollbar { height: 6px; }
.reviews__track::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.rev-card {
  /* Anchors the visually-hidden rating text. Without a positioned ancestor it
     resolves against the document instead of the card, so it escaped the
     track's clipping and stretched the page into a horizontal scrollbar --
     the fourth card's hidden span sat 1,400px out. */
  position: relative;
  flex: 0 0 340px;
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: 0 4px 16px rgba(14,46,59,.06);
}
.rev-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.rev-av {
  width: 42px; height: 42px; flex: none;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 600; font-size: 17px;
}
.rev-card__who { flex: 1; min-width: 0; }
.rev-card__name {
  display: block; font-weight: 600; font-size: 14.5px;
  color: var(--petrol-deep);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rev-card__when { font-size: 12.5px; color: var(--muted); }
.rev-stars { color: #F5B301; font-size: 15px; letter-spacing: 2px; }
.rev-card__text {
  font-size: 14px; line-height: 1.6; color: var(--muted);
  margin: 10px 0 0;
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;
  overflow: hidden;
}
.rev-card.is-open .rev-card__text { -webkit-line-clamp: unset; }
.rev-more {
  background: none; border: 0; padding: 8px 0 0;
  font: inherit; font-size: 13px; font-weight: 600;
  color: var(--accent-dark); cursor: pointer;
}
.rev-more:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .reviews__inner { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  /* No room beside the track on a phone; swipe carries it there. */
  .rev-nav { display: none; }
  .rev-card { flex-basis: 84%; }
}

/* ---------- lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(14,46,59,.92);
  display: flex; align-items: center; justify-content: center;
  padding: 40px;
}
.lightbox img {
  max-width: min(1100px, 92vw); max-height: 88vh;
  width: auto; height: auto;
  border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.5);
  background: #fff;
}
.lightbox__close {
  position: absolute; inset-block-start: 18px; inset-inline-end: 22px;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.12);
  color: #fff; font-size: 30px; line-height: 1; cursor: pointer;
}
.lightbox__close:hover, .lightbox__close:focus-visible { background: rgba(255,255,255,.28); outline: none; }

/* ---------- whatsapp ---------- */
.wa-float {
  position: fixed;
  right: 22px; bottom: 22px;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  z-index: 90;
  transition: transform .15s ease;
}
.wa-float:hover { transform: scale(1.08); }
/* the official WhatsApp glyph (same path as the footer icon) instead of an emoji */
.wa-float svg { width: 32px; height: 32px; fill: #fff; }

/* ---------- WhatsApp chat popup ---------- */
/* Opens above the float. The float itself stays a real wa.me link, so with
   JavaScript off the click still lands in WhatsApp directly. */
.wa-pop {
  position: fixed;
  right: 22px;
  bottom: 94px;
  width: min(330px, calc(100vw - 44px));
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(8,28,37,.4);
  z-index: 95;
  background: var(--tint);
  animation: wa-pop-in .28s ease;
}
@keyframes wa-pop-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wa-pop { animation: none; }
}
.wa-pop__head {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--petrol-deep);
  color: #fff;
  padding: 14px 16px;
}
.wa-pop__head img { border-radius: 50%; background: var(--petrol); padding: 3px; flex: none; }
.wa-pop__who { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.wa-pop__who strong { font-size: 15px; }
.wa-pop__who span { font-size: 12px; opacity: .75; }
.wa-pop__close {
  margin-inline-start: auto;
  background: none;
  border: none;
  color: rgba(255,255,255,.8);
  font-size: 22px;
  line-height: 1;
  padding: 2px 6px;
}
.wa-pop__close:hover { color: #fff; }
.wa-pop__body { padding: 16px; }
.wa-pop__msg {
  background: #fff;
  border-radius: 12px;
  border-start-start-radius: 4px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(14,46,59,.08);
}
.wa-pop__btn {
  display: block;
  margin-top: 14px;
  text-align: center;
  background: #25D366;
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  border-radius: 999px;
  padding: 11px 18px;
  transition: filter .15s ease;
}
.wa-pop__btn:hover { filter: brightness(1.07); }
.is-rtl .wa-pop { right: auto; left: 22px; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  /* two cards per row; the featured pair stays slightly taller */
  .treat-grid .treat-card { grid-column: span 3; }
  .treat-card__img { height: 240px; }
  .treat-grid .treat-card:nth-child(-n+2) .treat-card__img { height: 280px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .about, .contact { grid-template-columns: 1fr; gap: 36px; }
  .mv { grid-template-columns: 1fr; gap: 16px; margin-top: 32px; }
  .clinic-slider { height: 340px; }
}
/* Between the drawer breakpoint and a comfortable desktop the bar has room for
   one button, not two. The call to action keeps it; Contact is a scroll away on
   every page and sits in the footer besides. With the Aesthetics menu added
   (2026-09-11) the band reaches 1220px. */
@media (min-width: 901px) and (max-width: 1220px) {
  .nav__contact { display: none; }
  /* Not enough width to grow into: at the resting size the five menu items
     wrap onto a second line here, so this band stays compact throughout and
     only the bar's height still changes on scroll. */
  .nav { --nav-tall: 86px; --logo-tall: 58px; }
  .nav__links,
  .nav.is-stuck .nav__links { font-size: clamp(15.5px, 1.3vw, 17px); }
  .nav__cta { font-size: 15.5px; padding: 10px 20px; }
}
/* Six menu items with Turkish/German/Russian labels need a tighter fit in the
   narrowest part of that band. */
@media (min-width: 901px) and (max-width: 1024px) {
  .nav__links,
  .nav.is-stuck .nav__links { font-size: 14.5px; gap: 13px; }
  .nav__cta { font-size: 14.5px; padding: 9px 15px; }
  .nav__inner { gap: 14px; }
}
@media (max-width: 900px) {
  .nav__links {
    display: none;
    position: absolute;
    top: var(--nav-now); left: 0; right: 0;
    background: var(--petrol-dark);
    flex-direction: column;
    gap: 0;
    padding: 12px 6%;
    box-shadow: 0 12px 24px rgba(0,0,0,.25);
  }
  .nav__links.is-open { display: flex; }
  .nav__links a { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .nav__burger { display: flex; }
  .nav__contact { display: none; }
  /* less to spare on a phone, so the bar starts lower and shrinks less */
  .nav { --nav-tall: 84px; --nav-short: 68px; --logo-tall: 58px; --logo-short: 46px; }
  /* The header button goes with it; the drawer copy takes over. */
  .nav__cta { display: none; }
  .nav__cta-m { display: block; }
  .hero__copy { max-width: none; }
  /* text spans the full width here, so the side-weighted overlay would leave
     the headline over the photo's bright half -- go uniform instead */
  .hero::before,
  .is-rtl .hero::before {
    background:
      var(--waves) center / cover no-repeat,
      linear-gradient(180deg, rgba(14,46,59,.78), rgba(14,46,59,.7));
  }
  .stats__inner { padding: 48px 0; gap: 16px; }
  .results-grid { grid-template-columns: 1fr; }
  .guide-tabs { grid-template-columns: 1fr; gap: 24px; }
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .ph--tall { grid-row: auto; min-height: 200px; }
  .ph--wide { grid-column: auto; }
}
@media (max-width: 560px) {
  .why-grid, .gallery-grid { grid-template-columns: 1fr; }
  /* the featured-pair selector is more specific than the base card rule, so
     it must be repeated here or the first two cards stay half-width */
  .treat-grid .treat-card,
  .treat-grid .treat-card:nth-child(-n+2) { grid-column: span 6; }
  .treat-card__img,
  .treat-grid .treat-card:nth-child(-n+2) .treat-card__img { height: 230px; }
  .stats__inner { padding: 38px 0; gap: 10px; }
  .stat p { font-size: 13px; }
  .footer__grid { grid-template-columns: 1fr; }
  .topbar { display: none; }
}

/* ============================================================
   SUB-PAGES: blog index, articles, treatment detail
   ============================================================ */

/* ---------- breadcrumb ---------- */
.crumb { background: var(--tint); border-bottom: 1px solid var(--line); }
.crumb__inner { padding: 14px 0; font-size: 13.5px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px; }
.crumb a:hover { color: var(--petrol); text-decoration: underline; }
.crumb span[aria-current] { color: var(--petrol-deep); font-weight: 600; }

/* ---------- page hero (compact, for sub-pages) ---------- */
.page-hero {
  background:
    var(--waves) center / cover no-repeat,
    radial-gradient(900px 400px at 80% -20%, rgba(42,110,135,.5), transparent 60%),
    linear-gradient(165deg, var(--petrol-dark), var(--petrol) 60%, var(--petrol-light));
  color: #fff;
  padding: 60px 0;
}
.page-hero h1 { font-family: var(--font-display); font-size: clamp(30px, 4vw, 46px); line-height: 1.15; max-width: 900px; }
.page-hero__sub { margin-top: 14px; font-size: 17px; font-weight: 300; opacity: .9; max-width: 720px; }

/* Treatment detail heroes carry the treatment's own photo on the inline-end
   side. The container reserves the space with padding, so the text can never
   run underneath it, and the photo stays inside the hero band -- the factstrip
   below pulls itself up 40px and must not be touched. */
.page-hero--img .container { position: relative; }
@media (min-width: 981px) {
  /* extra bottom padding opens a lane between the photo and the factstrip,
     which pulls itself 40px up into the hero */
  .page-hero--img { padding-bottom: 104px; }
  .page-hero--img .container { padding-inline-end: 480px; }
  .page-hero__img {
    position: absolute;
    inset-inline-end: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 430px;
    aspect-ratio: 500 / 296;
    object-fit: cover;
    border-radius: var(--radius);
    border: 5px solid rgba(255,255,255,.16);
    box-shadow: 0 24px 60px rgba(8,28,37,.45);
  }
}
@media (max-width: 980px) {
  /* below the text, full width, still clear of the factstrip */
  .page-hero__img {
    display: block;
    width: 100%;
    max-width: 460px;
    margin-top: 26px;
    aspect-ratio: 500 / 296;
    object-fit: cover;
    border-radius: var(--radius);
    border: 4px solid rgba(255,255,255,.16);
    box-shadow: 0 14px 36px rgba(8,28,37,.4);
  }
}
.page-hero__chip {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 5px 14px;
  margin-bottom: 16px;
}

/* ---------- article byline ---------- */
.byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.2);
  font-size: 13.5px;
  color: rgba(255,255,255,.82);
}
.byline .ph--avatar { width: 46px; height: 46px; border-radius: 50%; flex: none; border-color: rgba(255,255,255,.4); }
.byline .ph--avatar::before { content: attr(data-label); font-size: 9px; color: rgba(255,255,255,.6); }
/* The clinic logo standing in for an author portrait. The mark is white, so it
   needs the brand navy behind it (assets/LOGO-README.md). */
.avatar-logo {
  width: 46px; height: 46px; flex: none;
  border-radius: 50%;
  background: var(--petrol-deep);
  object-fit: contain;
  padding: 7px;
}
.avatar-logo--lg { width: 88px; height: 88px; padding: 13px; }
.byline__name { color: #fff; font-weight: 600; font-size: 15px; display: block; }
.byline__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; }

/* ---------- article layout ---------- */
/* ---------- article sidebar ---------- */
/* Article on the left, a sticky column on the right carrying the consultation
   form and recent posts. Below 980px the column drops under the article. */
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 48px;
  align-items: start;
}
.article-side {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.side-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 22px;
  box-shadow: 0 4px 16px rgba(14,46,59,.06);
}
.side-card h3 {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--petrol-deep);
  margin: 0 0 16px;
}
.side-card--form input[type="text"],
.side-card--form input[type="email"],
.side-card--form input[type="tel"],
.side-card--form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 12px;
  margin-bottom: 11px;
  font: inherit;
  font-size: 14px;
  background: var(--tint);
}
.side-card--form textarea { resize: vertical; }
.side-card--form input:focus, .side-card--form textarea:focus {
  outline: none; border-color: var(--petrol-light); background: #fff;
}
.side-card--form .checkline { font-size: 12.5px; margin: 6px 0 14px; }
.side-posts { display: flex; flex-direction: column; }
.side-posts a {
  display: block;
  font-size: 14px;
  line-height: 1.45;
  padding: 11px 0;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.side-posts a:last-child { border-bottom: none; padding-bottom: 0; }
.side-posts a:hover { color: var(--accent); }

@media (max-width: 980px) {
  .article-layout { grid-template-columns: 1fr; gap: 34px; }
  .article-side { position: static; }
}

.article-wrap { display: grid; grid-template-columns: 260px 1fr; gap: 54px; align-items: start; padding: 64px 0; }

.toc {
  position: sticky;
  top: 100px;
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 20px;
}
.toc h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--petrol); margin-bottom: 14px; }
.toc a {
  display: block;
  font-size: 14px;
  color: var(--muted);
  padding: 7px 0 7px 14px;
  border-left: 2px solid var(--line);
  line-height: 1.4;
}
.toc a:hover { color: var(--petrol); }
.toc a.is-current { color: var(--petrol-deep); font-weight: 600; border-left-color: var(--accent); }
.toc__toggle { display: none; }

.article { max-width: 780px; font-size: 16.5px; }
.article h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 32px);
  color: var(--petrol-deep);
  margin: 44px 0 16px;
  line-height: 1.25;
  scroll-margin-top: 110px;
}
.article h2:first-child { margin-top: 0; }
.article h3 { font-size: 19px; color: var(--petrol); margin: 30px 0 10px; }
.article p { margin-bottom: 18px; color: #35505E; }
/* the markers are drawn by ::before below, so the browser's own are off */
.article ul, .article ol { margin: 0 0 20px 0; padding: 0; list-style: none; }
.article ul li, .article ol li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 10px;
  color: #35505E;
}
.article ul li::before {
  content: "";
  position: absolute;
  left: 8px; top: 11px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.article ol { counter-reset: n; }
.article ol li { counter-increment: n; }
.article ol li::before {
  content: counter(n);
  position: absolute;
  left: 0; top: 1px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--petrol);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.article a:not(.btn) { color: var(--accent-dark); text-decoration: underline; }
.article strong { color: var(--petrol-deep); }
.article .ph { margin: 26px 0; height: 300px; }
.article figure { margin: 26px 0; }
.article figure .ph { margin: 0 0 10px; }
.article figcaption { font-size: 13px; color: var(--muted); text-align: center; }

/* callouts */
.callout {
  border-left: 4px solid var(--accent);
  background: #FEF3EA;
  border-radius: 0 10px 10px 0;
  padding: 20px 24px;
  margin: 28px 0;
}
.callout h3 { margin: 0 0 8px; color: var(--accent-dark); font-size: 16px; }
.callout p:last-child { margin-bottom: 0; }
.callout--info { border-left-color: var(--petrol); background: var(--tint); }
.callout--info h3 { color: var(--petrol); }

.takeaways {
  background: var(--petrol-deep);
  color: #fff;
  border-radius: var(--radius);
  padding: 28px 30px;
  margin: 32px 0;
}
.takeaways h3 { color: #fff; margin: 0 0 14px; font-size: 17px; }
.takeaways ul li { color: rgba(255,255,255,.85); }
.takeaways ul li::before { background: var(--accent); }

.disclaimer {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 18px 22px;
  font-size: 13.5px;
  color: var(--muted);
  margin: 34px 0 0;
}

.author-box {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  margin-top: 40px;
}
.author-box .ph { width: 88px; height: 88px; border-radius: 50%; flex: none; margin: 0; }
.author-box .ph::before { content: attr(data-label); font-size: 10px; }
.author-box h3 { margin: 0 0 4px; font-size: 18px; color: var(--petrol-deep); }
.author-box .author-box__role { font-size: 13px; color: var(--accent-dark); font-weight: 600; margin-bottom: 10px; }
.author-box p { font-size: 14.5px; color: var(--muted); margin: 0; }

/* ---------- blog index ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 36px; }
.filter-chip {
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--muted);
  border-radius: 999px;
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 500;
  transition: all .2s ease;
}
.filter-chip:hover { border-color: var(--petrol-light); color: var(--petrol); }
.filter-chip.is-active { background: var(--petrol); border-color: var(--petrol); color: #fff; }

.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.post-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}
.post-card:hover { box-shadow: var(--shadow); transform: translateY(-4px); }
.post-card .ph { height: 180px; border-radius: 0; border: none; border-bottom: 1px dashed #A9C0CA; }
.post-card__body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.post-card__cat {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: 8px;
}
.post-card h3 { font-size: 17.5px; color: var(--petrol-deep); line-height: 1.35; margin-bottom: 10px; }
.post-card p { font-size: 14px; color: var(--muted); flex: 1; margin-bottom: 14px; }
/* The category label is a <p> too, so the rule above was making it grow and
   push the heading down the card -- the shorter the excerpt, the wider the
   gap, which is why it showed worst next to a two-word treatment blurb. */
.post-card .post-card__cat { flex: none; }
/* A blog excerpt runs three or four times the length of a treatment blurb.
   Held to three lines so one long card does not set the height for the row. */
.related .post-card p:not(.post-card__cat) {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-card__meta { font-size: 12.5px; color: var(--muted); display: flex; gap: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.post-card.is-hidden { display: none; }

.post-featured {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 40px;
  transition: box-shadow .2s ease;
}
.post-featured:hover { box-shadow: var(--shadow); }
.post-featured .ph { height: 100%; min-height: 300px; border-radius: 0; border: none; }
.post-featured__body { padding: 40px; display: flex; flex-direction: column; justify-content: center; }
.post-featured h2 { font-family: var(--font-display); font-size: clamp(22px, 2.6vw, 32px); color: var(--petrol-deep); line-height: 1.25; margin-bottom: 14px; }
.post-featured p { color: var(--muted); margin-bottom: 18px; }

.empty-note { color: var(--muted); font-size: 15px; padding: 30px 0; display: none; }
.empty-note.is-visible { display: block; }

.related { border-top: 1px solid var(--line); padding-top: 44px; margin-top: 50px; }
.related h2 { font-family: var(--font-display); font-size: 26px; color: var(--petrol-deep); margin-bottom: 24px; }

/* ---------- treatment detail ---------- */
.factstrip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: -40px;
  position: relative;
  z-index: 5;
  box-shadow: var(--shadow);
}
.fact { background: #fff; padding: 22px 20px; text-align: center; }
.fact__label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: 6px; }
.fact__value { font-size: 17px; font-weight: 600; color: var(--petrol-deep); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; }
.split--reverse .split__media { order: 2; }
.split__copy p { color: var(--muted); margin-bottom: 16px; }
.section--dark .split__copy p { color: rgba(255,255,255,.8); }

.checklist li {
  position: relative;
  padding-left: 34px;
  margin-bottom: 14px;
  color: var(--muted);
}
.checklist li::before {
  content: "\2713";
  position: absolute;
  left: 0; top: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.checklist--muted li::before { background: var(--muted); content: "\2013"; }
.section--dark .checklist li { color: rgba(255,255,255,.8); }

.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 40px; }
.tl-step { position: relative; padding-top: 46px; }
.tl-step::before {
  content: attr(data-step);
  position: absolute;
  top: 0; left: 0;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tl-step::after {
  content: "";
  position: absolute;
  top: 17px; left: 44px; right: -24px;
  height: 2px;
  background: var(--line);
}
.tl-step:last-child::after { display: none; }
.tl-step h3 { font-size: 16.5px; color: var(--petrol-deep); margin-bottom: 8px; }
.tl-step p { font-size: 14px; color: var(--muted); }
.section--dark .tl-step h3 { color: #fff; }
.section--dark .tl-step p { color: rgba(255,255,255,.75); }
.section--dark .tl-step::after { background: rgba(255,255,255,.2); }

.xlinks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 34px; }
.xlink {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: var(--radius);
  padding: 18px 20px;
  font-weight: 600;
  color: var(--petrol-deep);
  font-size: 15px;
  transition: all .2s ease;
}
.xlink:hover { border-color: var(--accent); color: var(--accent-dark); transform: translateY(-3px); }
.xlink span { display: block; font-weight: 400; font-size: 13px; color: var(--muted); margin-top: 4px; }

/* ---------- sub-page responsive ---------- */
@media (max-width: 1024px) {
  .article-wrap { grid-template-columns: 1fr; gap: 30px; padding: 44px 0; }
  .toc { position: static; }
  .toc__toggle {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--petrol);
    font-weight: 600;
  }
  .toc h2 { display: none; }
  .toc__list { display: none; margin-top: 12px; }
  .toc.is-open .toc__list { display: block; }
  .post-grid { grid-template-columns: repeat(2, 1fr); }
  .factstrip { grid-template-columns: repeat(2, 1fr); }
  .timeline { grid-template-columns: repeat(2, 1fr); }
  .tl-step:nth-child(2)::after { display: none; }
  .split, .post-featured { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .split { gap: 30px; }
  .xlinks { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .post-grid { grid-template-columns: 1fr; }
  .factstrip { grid-template-columns: 1fr; margin-top: 0; }
  .timeline { grid-template-columns: 1fr; }
  .tl-step::after { display: none; }
  .xlinks { grid-template-columns: 1fr; }
  .author-box { flex-direction: column; }
  .post-featured__body { padding: 26px; }
}

/* ---------- nav dropdown (Treatments) ---------- */
.nav__links { align-items: center; }
.has-drop { position: relative; }
.has-drop__btn {
  background: none;
  border: none;
  color: #fff;
  font: inherit;
  font-size: 14.5px;
  font-weight: 500;
  opacity: .9;
  padding: 6px 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-bottom: 2px solid transparent;
}
.has-drop__btn:hover,
.has-drop.is-open .has-drop__btn { opacity: 1; border-bottom-color: var(--accent); }
.has-drop__btn::after {
  content: "";
  width: 6px; height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s ease;
}
.has-drop.is-open .has-drop__btn::after { transform: rotate(-135deg) translateY(-2px); }

.dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 520px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 18px 44px rgba(14,46,59,.28);
  padding: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 120;
}
.has-drop.is-open .dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.dropdown::before {
  content: "";
  position: absolute;
  top: -7px; left: 50%;
  width: 14px; height: 14px;
  background: #fff;
  transform: translateX(-50%) rotate(45deg);
}
.dropdown a {
  position: relative;
  display: block;
  padding: 11px 14px;
  border-radius: 9px;
  color: var(--petrol-deep);
  font-size: 14.5px;
  font-weight: 600;
  opacity: 1;
  border: none;
  line-height: 1.3;
}
.dropdown a span {
  display: block;
  font-weight: 400;
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 2px;
}
.dropdown a:hover { background: var(--tint); color: var(--accent-dark); border: none; }
/* two items do not need the two-column, 520px treatment menu */
.dropdown--narrow { min-width: 280px; grid-template-columns: 1fr; }
.dropdown__all {
  grid-column: 1 / -1;
  margin-top: 6px;
  border-top: 1px solid var(--line) !important;
  border-radius: 0 0 9px 9px !important;
  color: var(--accent-dark) !important;
  font-size: 13.5px !important;
}

@media (max-width: 900px) {
  /* the desktop align-items:center would centre these in the column menu */
  .nav__links { align-items: stretch; }
  .nav__links > a { text-align: left; }
  .has-drop { width: 100%; }
  .has-drop__btn { width: 100%; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .dropdown {
    position: static;
    transform: none;
    min-width: 0;
    grid-template-columns: 1fr;
    background: rgba(0,0,0,.16);
    box-shadow: none;
    padding: 4px 0 8px;
    display: none;
    opacity: 1;
    visibility: visible;
  }
  .has-drop.is-open .dropdown { display: block; transform: none; }
  .dropdown::before { display: none; }
  .dropdown a { color: rgba(255,255,255,.9); padding: 10px 14px; font-weight: 500; }
  .dropdown a span { color: rgba(255,255,255,.55); }
  .dropdown a:hover { background: rgba(255,255,255,.08); color: #fff; }
  .dropdown__all { border-top-color: rgba(255,255,255,.15) !important; color: #fff !important; }
}

/* ---------- location / map ---------- */
.location { display: grid; grid-template-columns: 1fr 1.35fr; gap: 40px; align-items: stretch; }
.location__card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.addr { display: grid; gap: 18px; }
.addr__row { display: flex; gap: 14px; align-items: flex-start; }
.addr__icon {
  width: 38px; height: 38px;
  flex: none;
  border-radius: 50%;
  background: var(--tint);
  color: var(--petrol);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.addr__label {
  display: block;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  margin-bottom: 3px;
}
.addr__value { font-size: 15px; color: var(--petrol-deep); font-weight: 500; line-height: 1.5; }
.addr__value a:hover { color: var(--accent-dark); text-decoration: underline; }

.map-frame {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  min-height: 420px;
  background: var(--tint);
}
.map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

@media (max-width: 900px) {
  .location { grid-template-columns: 1fr; gap: 26px; }
  .map-frame { min-height: 320px; }
}

.footer__contact { font-size: 13.5px; line-height: 1.7; margin-top: 14px; opacity: .8; }
.footer__contact a { display: inline; padding: 0; opacity: 1; }
.footer__contact a:hover { color: var(--accent); }

/* ---------- language switcher ---------- */
.lang { position: relative; }
.nav__lang { display: inline-flex; align-items: center; gap: 5px; }
.lang__menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 170px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(14,46,59,.28);
  padding: 8px;
  display: grid;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 130;
}
.lang.is-open .lang__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.lang__menu a {
  background: none;
  border: none;
  text-align: left;
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--petrol-deep);
  width: 100%;
}
.lang__menu a:hover { background: var(--tint); color: var(--accent-dark); }
.lang__menu a.is-active { background: var(--petrol); color: #fff; }

/* ---------- RTL (Farsi / Hebrew) ---------- */
.is-rtl .hero__inner,
.is-rtl .split,
.is-rtl .location,
.is-rtl .article-wrap,
.is-rtl .about,
.is-rtl .contact { direction: rtl; }
.is-rtl .hero__sub,
.is-rtl .section__lead,
.is-rtl .page-hero__sub { margin-left: auto; margin-right: 0; }
.is-rtl .article ul li,
.is-rtl .article ol li,
.is-rtl .checklist li,
.is-rtl .package li { padding-left: 0; padding-right: 28px; }
.is-rtl .article ul li::before { left: auto; right: 8px; }
.is-rtl .article ol li::before,
.is-rtl .checklist li::before { left: auto; right: 0; }
.is-rtl .callout { border-left: none; border-right: 4px solid var(--accent); border-radius: 10px 0 0 10px; }
.is-rtl .toc a { border-left: none; border-right: 2px solid var(--line); padding: 7px 14px 7px 0; }
.is-rtl .toc a.is-current { border-right-color: var(--accent); }
.is-rtl .accordion__head { padding: 18px 18px 18px 40px; text-align: right; }
.is-rtl .accordion__head::after { right: auto; left: 14px; }
.is-rtl .lang__menu { right: auto; left: 0; }
.is-rtl .dropdown { text-align: right; }
.is-rtl .ba__tag { left: auto; right: 10px; }
.is-rtl .tl-step { padding-left: 0; }
.is-rtl .tl-step::before { left: auto; right: 0; }
.is-rtl .tl-step::after { left: auto; right: 44px; }
.is-rtl .addr__row { text-align: right; }
.is-rtl .wa-float { right: auto; left: 22px; }

/* latin-script runs (phone, e-mail, brand) keep their own direction inside RTL */
.is-rtl a[href^="tel:"],
.is-rtl a[href^="mailto:"],
.is-rtl .review-pill__top { direction: ltr; unicode-bidi: isolate; }
.is-rtl .footer__contact a[href^="tel:"] { display: inline-block; }

/* ---------- language flags ----------
   Inline SVG data URIs, not emoji: Windows ships no colour flag glyphs, so
   emoji flags render as bare letter pairs ("TR") on most Windows browsers. */
.flag {
  display: inline-block;
  width: 20px;
  height: 14px;
  flex: none;
  border-radius: 2px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 0 1px rgba(0,0,0,.12) inset;
  vertical-align: -2px;
}
.flag--en { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3Cpath fill='%23012169' d='M0 0h60v30H0z'/%3E%3Cpath stroke='%23fff' stroke-width='6' d='M0 0l60 30m0-30L0 30'/%3E%3Cpath stroke='%23C8102E' stroke-width='4' d='M0 0l60 30m0-30L0 30'/%3E%3Cpath stroke='%23fff' stroke-width='10' d='M30 0v30M0 15h60'/%3E%3Cpath stroke='%23C8102E' stroke-width='6' d='M30 0v30M0 15h60'/%3E%3C/svg%3E"); }
.flag--tr { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Cpath fill='%23E30A17' d='M0 0h60v40H0z'/%3E%3Ccircle cx='23' cy='20' r='10' fill='%23fff'/%3E%3Ccircle cx='27' cy='20' r='8' fill='%23E30A17'/%3E%3Cpath fill='%23fff' d='M37 20l8.5-2.8-5.3 7.2v-8.8l5.3 7.2z'/%3E%3C/svg%3E"); }
.flag--de { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 3'%3E%3Cpath fill='%23000' d='M0 0h5v1H0z'/%3E%3Cpath fill='%23D00' d='M0 1h5v1H0z'/%3E%3Cpath fill='%23FFCE00' d='M0 2h5v1H0z'/%3E%3C/svg%3E"); }
.flag--fr { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Cpath fill='%23002395' d='M0 0h1v2H0z'/%3E%3Cpath fill='%23fff' d='M1 0h1v2H1z'/%3E%3Cpath fill='%23ED2939' d='M2 0h1v2H2z'/%3E%3C/svg%3E"); }
.flag--ru { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6'%3E%3Cpath fill='%23fff' d='M0 0h9v3H0z'/%3E%3Cpath fill='%230039A6' d='M0 2h9v2H0z'/%3E%3Cpath fill='%23D52B1E' d='M0 4h9v2H0z'/%3E%3C/svg%3E"); }
.flag--fa { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6'%3E%3Cpath fill='%23239F40' d='M0 0h9v2H0z'/%3E%3Cpath fill='%23fff' d='M0 2h9v2H0z'/%3E%3Cpath fill='%23DA0000' d='M0 4h9v2H0z'/%3E%3C/svg%3E"); }
.flag--he { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 66 48'%3E%3Cpath fill='%23fff' d='M0 0h66v48H0z'/%3E%3Cpath fill='%230038B8' d='M0 6h66v6H0zM0 36h66v6H0z'/%3E%3Cpath stroke='%230038B8' stroke-width='2' fill='none' d='M27 19h12l-6 10zM27 29h12l-6-10z'/%3E%3C/svg%3E"); }

.lang__menu a { display: flex; align-items: center; gap: 10px; }
.nav__lang .flag { margin-right: 2px; }
/* RTL labels sit in an LTR row: isolate so the word itself still renders correctly */
.lang__menu a { unicode-bidi: isolate; }

/* Icon-only social row. The labels live in aria-label/title so the icons stay
   readable to screen readers and on hover without printing the words. */
.footer__social { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0 0; }
.footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.07);
  opacity: 1;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.footer__social a:hover {
  background: var(--accent);
  border-color: var(--accent);
  transform: translateY(-2px);
}
.footer__social svg { width: 17px; height: 17px; fill: currentColor; display: block; }
.footer__social a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .footer__social a { transition: none; } }

.flag--ar { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Crect width='30' height='20' fill='%231D5468'/%3E%3Ctext x='15' y='14.5' font-family='Arial,sans-serif' font-size='11' font-weight='bold' fill='%23fff' text-anchor='middle'%3EAR%3C/text%3E%3C/svg%3E"); }
.flag--el { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 18'%3E %3Crect width='27' height='18' fill='%230D5EAF'/%3E %3Cpath fill='%23fff' d='M0 2h27v2H0zM0 6h27v2H0zM0 10h27v2H0zM0 14h27v2H0z'/%3E %3Crect width='10' height='10' fill='%230D5EAF'/%3E %3Cpath fill='%23fff' d='M4 0h2v10H4zM0 4h10v2H0z'/%3E%3C/svg%3E"); }
.flag--ar { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 6'%3E %3Crect width='3' height='6' fill='%23FF0000'/%3E %3Crect x='3' width='9' height='2' fill='%2300732F'/%3E %3Crect x='3' y='2' width='9' height='2' fill='%23fff'/%3E %3Crect x='3' y='4' width='9' height='2' fill='%23000'/%3E%3C/svg%3E"); }

/* Honeypot: off-screen rather than display:none, because some bots skip fields
   that are display:none and would sail past the trap. */
.hp {
  /* Parked off-layout rather than off-screen. left:-9999px is invisible in a
     left-to-right page but in Arabic, Farsi and Hebrew the inline start is on
     the right, so the same offset stretched every one of those pages ten
     thousand pixels wide and gave them a horizontal scrollbar. Clipping to a
     single pixel hides the field in both directions while leaving it in the
     form for a bot to fill.
     The size, padding, border and margin are !important because form rules
     such as `.side-card--form input[type="text"] { width: 100% }` outrank a
     single class: the field grew as wide as the screen and pushed every blog
     article 38px past a phone's edge. */
  position: absolute !important;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  margin: 0 !important;
  opacity: 0;
  pointer-events: none;
}
.form-note.is-ok { color: #1E7A4A; }
.form-note.is-err { color: #C0392B; }
/* On a dark section (contact block, hair-analysis form) the petrol note and the
   deep green/red states vanish into the background -- 'Sending...' was invisible
   on the live analysis page (2026-09-21). Light tints, same meaning. */
.section--dark .form-note, .contact .form-note { color: #FBD3B4; }
.section--dark .form-note.is-ok, .contact .form-note.is-ok { color: #9FE3B8; }
.section--dark .form-note.is-err, .contact .form-note.is-err { color: #FFB4A8; }

/* Cookie consent bar. Hidden until js/tracking.js has a tracker to ask about
   and no choice is stored; see tools/build_tracking.py. */
.consent {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 140;
  max-width: 760px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
  padding: 16px 20px; border-radius: 14px;
  background: #fff; color: #1D5468;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .28);
  font-size: .93rem; line-height: 1.5;
}
.consent[hidden] { display: none; }
.consent p { margin: 0; flex: 1 1 320px; }
.consent a { color: #17739B; text-decoration: underline; }
.consent__actions { display: flex; gap: 8px; flex: 0 0 auto; }
.consent__btn {
  border: 0; border-radius: 999px; padding: 10px 20px;
  font: inherit; font-weight: 600; cursor: pointer;
  background: #17739B; color: #fff;
}
.consent__btn--no { background: #E7EEF1; color: #1D5468; }
.consent__btn:hover { filter: brightness(1.08); }