/* HIMG Clinic — premium redesign ("European medical maison")
   Palette and type from the HIMG 2027 brand boards: navy, ivory, champagne, walnut, stone;
   Playfair Display for headings, Inter for reading and UI.
   The component rules below are the original site's; the "Premium layer" at the end of this
   file restyles them. Legacy token names (--yellow, --cream, --mist, --blue) are kept so the
   existing components pick up the new palette; their meaning is noted beside each. */

:root {
  /* brand palette */
  --navy: #0B2A4A;        /* HIMG Navy: hero, header accents, footer, primary buttons */
  --ivory: #F7F3EA;       /* page background */
  --champagne: #D4C1A3;   /* highlights, hairlines, accents on navy */
  --walnut: #5A4636;      /* restrained accents and small labels on light backgrounds */
  --stone: #9AA0A6;       /* separators and decorative details only (too light for text) */
  --white: #FFFFFF;       /* cards, tables, form fields */

  /* derived, checked for contrast */
  --ink: #0B2A4A;         /* headings: navy on ivory 13:1 */
  --text: #3D4652;        /* body text: 8.6:1 on ivory */
  --muted: #5E646C;       /* captions: 5.4:1 on ivory, 4.8:1 on sand */
  --bronze: #8B7355;      /* line icons on light backgrounds (non-text, 4.2:1) */
  --line: #E4D9C7;        /* champagne hairline */
  --sand: #EFE8DB;        /* tinted sections and panels */

  /* legacy names used by the original components, mapped to the new palette */
  --yellow: var(--champagne); /* was the yellow accent: now champagne */
  --cream: #F2EBDD;           /* notes and warm panels */
  --mist: var(--sand);        /* light panels and tinted sections */
  --blue: var(--walnut);      /* small labels, roles and kickers */

  /* square-cornered, as in the reference board; pills and circles keep their own radius */
  --radius-l: 0px;
  --radius-m: 0px;
  --radius-s: 2px;

  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --section: clamp(72px, 9vw, 136px);

  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;

  --step--1: 0.875rem;
  --step-0: 1rem;
  --step-1: 1.125rem;
  --step-2: 1.375rem;
  --step-3: 1.75rem;
  --step-4: clamp(1.9rem, 3.6vw, 2.75rem);
  --step-5: clamp(2.4rem, 5vw, 3.75rem);
}

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

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

body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.6;
  font-stretch: 100%;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-underline-offset: 3px; }
a:hover { color: var(--navy); }
p { margin: 0 0 1em; max-width: 68ch; }

h1, h2, h3, h4 {
  color: var(--ink);
  margin: 0 0 0.5em;
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.015em;
}
h2 { font-size: var(--step-5); font-stretch: 112%; font-weight: 650; }
h3 { font-size: var(--step-3); font-stretch: 106%; font-weight: 650; }
h4 { font-size: var(--step-1); }

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

.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;
}

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--yellow); color: var(--ink); padding: 10px 16px; border-radius: var(--radius-s);
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 16px; }

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

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px;
  border-radius: 999px; border: 1.5px solid transparent;
  font: inherit; font-weight: 600; font-size: var(--step-0);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn-primary { background: var(--yellow); color: var(--ink); }
.btn-primary:hover { background: #FFD266; color: var(--ink); }
.btn:active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) { .btn:active { transform: none; } }
.btn-dark { background: var(--navy); color: var(--white); }
.btn-dark:hover { background: var(--ink); color: var(--white); }
.btn-outline { border-color: currentColor; color: var(--navy); background: transparent; }
.btn-outline:hover { background: var(--navy); border-color: var(--navy); color: var(--white); }
.btn-light { background: var(--white); color: var(--ink); }
.btn-light:hover { background: var(--cream); color: var(--ink); }

.text-link { font-weight: 600; color: var(--navy); }

/* ---------- Header ---------- */

.site-header { position: relative; z-index: 20; background: var(--white); border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 84px; }
.brand img { width: 128px; height: auto; }

.site-nav { display: flex; align-items: center; gap: 32px; }
.site-nav ul { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
.site-nav ul a {
  color: var(--ink); text-decoration: none; font-weight: 500; padding: 6px 0;
  border-bottom: 2px solid transparent; white-space: nowrap;
}
@media (max-width: 1240px) { .site-nav { gap: 24px; } .site-nav ul { gap: 20px; } }
.site-nav ul a:hover { border-bottom-color: var(--yellow); }
.site-nav ul a[aria-current="page"] { border-bottom-color: var(--navy); }

.nav-toggle {
  display: none; width: 48px; height: 48px; border-radius: 999px;
  border: 1.5px solid var(--line); background: var(--white); cursor: pointer;
  align-items: center; justify-content: center;
}
.nav-toggle .bars, .nav-toggle .bars::before, .nav-toggle .bars::after {
  display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; position: relative;
  transition: transform .2s ease, background-color .2s ease;
}
.nav-toggle .bars::before, .nav-toggle .bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle .bars::before { top: -6px; }
.nav-toggle .bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars::after { transform: translateY(-6px) rotate(-45deg); }

/* Header laid over the home hero photo */
.site-header.over { position: absolute; inset: 0 0 auto; background: transparent; border-bottom: 0; }
.site-header.over .brand img { filter: brightness(0) invert(1); }
.site-header.over .site-nav ul a { color: var(--white); }
.site-header.over .site-nav ul a:hover { border-bottom-color: var(--yellow); }

@media (max-width: 1080px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 16px;
    background: var(--white); padding: 16px var(--gutter) 24px;
    border-bottom: 1px solid var(--line); box-shadow: 0 16px 32px rgba(12, 53, 106, .12);
  }
  .site-nav.open { display: flex; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav ul a { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .site-header.over .site-nav ul a { color: var(--ink); }
  .site-header.over .nav-toggle { background: rgba(255,255,255,.92); border-color: transparent; }
}

/* ---------- Home hero ---------- */

.hero {
  position: relative; overflow: hidden;
  margin: 12px; border-radius: var(--radius-l);
  min-height: min(92vh, 860px);
  display: flex; flex-direction: column; justify-content: flex-end;
  color: var(--white); background: var(--navy);
}
.hero-media { position: absolute; inset: 0; overflow: hidden; }
.hero-media video { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; display: block; }
/* Overlay: keeps the video visible top-right while giving the text area a deep, even navy
   (white headline stays at about 9:1 contrast over the brightest part of the video) */
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,37,71,.55) 0%, rgba(10,37,71,0) 30%),
    linear-gradient(0deg, rgba(10,37,71,.94) 0%, rgba(10,37,71,.72) 38%, rgba(10,37,71,.25) 62%, rgba(10,37,71,0) 85%),
    linear-gradient(90deg, rgba(10,37,71,.8) 0%, rgba(10,37,71,.52) 42%, rgba(10,37,71,0) 75%);
}

.video-toggle {
  position: absolute; z-index: 3; right: clamp(20px, 4vw, 48px); bottom: calc(clamp(40px, 6vw, 80px) + 4px); /* level with the hero buttons */
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  border: 1.5px solid rgba(255,255,255,.6); background: rgba(10,37,71,.45);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7v10M15 7v10' stroke='white' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-position: center; background-size: 22px; background-repeat: no-repeat;
}
.video-toggle[aria-pressed="true"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='white'/%3E%3C/svg%3E");
}
.video-toggle:hover { background-color: rgba(10,37,71,.75); }

/* hero text sits on the same left edge as the logo and the page content below */
.hero-body {
  position: relative; width: 100%; max-width: var(--wrap); margin-inline: auto;
  padding: 140px var(--gutter) clamp(40px, 6vw, 80px);
}
/* once the hero card is narrower than the content column, take its 12px inset off the padding */
@media (max-width: 1264px) { .hero-body { padding-inline: calc(var(--gutter) - 12px); } }
/* small Google rating badge above the hero text */
.google-badge {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 22px;
  padding: 5px 10px 5px 6px; border-radius: 999px;
  background: rgba(255,255,255,.95); color: var(--ink); text-decoration: none;
  box-shadow: 0 4px 14px rgba(10,37,71,.2);
  transition: background-color .2s ease;
}
.google-badge:hover { background: var(--white); color: var(--ink); }
.google-badge .g-logo { width: 16px; height: 16px; flex: none; }
.gb-score { font-weight: 700; font-size: var(--step--1); line-height: 1; }

/* supporting headline: a short yellow rule, then the text */
.hero-kicker {
  display: flex; align-items: center; gap: 12px; margin: 0 0 18px;
  color: var(--yellow); font-weight: 700; font-size: var(--step-1); line-height: 1.3; letter-spacing: .01em;
}
.hero-kicker::before { content: ""; flex: none; width: 32px; height: 2px; border-radius: 2px; background: currentColor; }
.hero-title {
  margin: 0 0 24px; max-width: 16ch; color: var(--white);
  font-size: clamp(2.75rem, 6vw, 5.5rem);
  font-stretch: 125%; font-weight: 800; line-height: .96; letter-spacing: -0.03em;
  text-wrap: balance; text-shadow: 0 2px 30px rgba(10,37,71,.35);
}
.hero-title span { display: block; }
.hero-lede {
  max-width: 52ch; margin: 0 0 32px;
  font-size: var(--step-2); line-height: 1.45; color: rgba(255,255,255,.92); text-wrap: balance;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero .hero-actions .btn { min-height: 52px; padding-inline: 28px; }
/* secondary hero button: outlined, so the yellow quote button stays the clear first choice */
.btn-ghost { background: rgba(255,255,255,.06); color: var(--white); border-color: rgba(255,255,255,.75); }
.btn-ghost:hover { background: var(--white); color: var(--ink); border-color: var(--white); }

@media (max-width: 760px) {
  .hero { margin: 8px; min-height: 620px; }
  .hero-media video { object-position: 58% 30%; }
  .hero-media::after {
    background:
      linear-gradient(180deg, rgba(10,37,71,.55) 0%, rgba(10,37,71,0) 30%),
      linear-gradient(0deg, rgba(10,37,71,.96) 0%, rgba(10,37,71,.8) 45%, rgba(10,37,71,.3) 70%, rgba(10,37,71,0) 90%);
  }
  .hero-body { padding: 120px max(calc(var(--gutter) - 8px), 8px) 32px; }
  .video-toggle { top: 84px; bottom: auto; right: 18px; }
  .google-badge { margin-bottom: 18px; }
  .hero-kicker { font-size: var(--step-0); gap: 10px; margin-bottom: 14px; }
  .hero-kicker::before { display: none; }
  .hero-title { font-size: clamp(1.85rem, 9.6vw, 3rem); font-stretch: 100%; line-height: 1; margin-bottom: 18px; }
  .hero-lede { font-size: var(--step-1); margin-bottom: 26px; }
  .hero .hero-actions { flex-direction: column; align-items: stretch; }
  .hero .hero-actions .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .google-badge, .btn-ghost { transition: none; } }

/* ---------- Trust bar (home, directly under the hero) ---------- */

.trust-bar { padding-top: clamp(28px, 4vw, 48px); }
.trust-list {
  list-style: none; margin: 0; padding: 0 0 clamp(28px, 4vw, 44px);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
}
.trust-item { display: flex; align-items: flex-start; gap: 12px; padding: 4px clamp(12px, 1.6vw, 24px); }
.trust-item:first-child { padding-left: 0; }
.trust-item:last-child { padding-right: 0; }
.trust-item + .trust-item { border-left: 1px solid var(--line); }
.trust-icon { flex: none; width: 28px; height: 28px; margin-top: 2px; fill: none; stroke: var(--blue); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.trust-item p { margin: 0; line-height: 1.3; }
.trust-item b {
  display: block; color: var(--navy);
  font-size: clamp(1.1rem, 1.45vw, 1.3rem); font-weight: 750; letter-spacing: -0.01em; line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.trust-item p > span { display: block; margin-top: 4px; color: var(--muted); font-size: var(--step--1); }
@media (max-width: 1100px) {
  .trust-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
  .trust-item, .trust-item:first-child, .trust-item:last-child { padding: 0; }
  .trust-item + .trust-item { border-left: 0; }
}
@media (max-width: 420px) {
  .trust-list { gap: 24px 16px; }
  .trust-item { flex-direction: column; gap: 8px; }
  .trust-icon { width: 26px; height: 26px; }
}

/* ---------- Eyebrow (small label above a section heading) ---------- */

.eyebrow, .section-head .eyebrow {
  display: flex; align-items: center; gap: 12px; margin: 0 0 14px;
  color: var(--blue); font-size: var(--step--1); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.eyebrow::before { content: ""; flex: none; width: 28px; height: 2px; border-radius: 2px; background: var(--navy); }

/* ---------- Doctors (home): portrait cards and who does what, on navy ---------- */

.section.navy .eyebrow { color: var(--yellow); }
.section.navy .eyebrow::before { background: var(--yellow); }
.section.navy .section-head p { color: rgba(255,255,255,.86); }

.doc-cards {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px;
}
.doc-card > article { position: relative; height: 100%; display: flex; flex-direction: column; } /* keeps the hidden link text inside the card */
.doc-card img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 12%;
  margin-bottom: 16px; border-radius: var(--radius-m); background: #E5DDD1;
}
.doc-card h3 { margin: 0; color: var(--white); font-size: var(--step-1); line-height: 1.25; }
.doc-role { margin: 4px 0 12px; color: var(--yellow); font-size: var(--step--1); font-weight: 600; }
.doc-facts { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; }
.doc-facts li { color: rgba(255,255,255,.8); font-size: var(--step--1); line-height: 1.45; }
.doc-facts .doc-lang { color: var(--white); }
.doc-link { margin-top: auto; color: var(--white); font-weight: 600; font-size: var(--step--1); text-underline-offset: 3px; }
.doc-link::after { content: " \2192"; }
.doc-link:hover { color: var(--yellow); }

.care-team { margin-top: clamp(48px, 6vw, 72px); padding-top: clamp(32px, 4vw, 44px); border-top: 1px solid rgba(255,255,255,.18); }
.care-team h3 { margin: 0 0 24px; color: var(--white); font-size: var(--step-3); }
.care-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; counter-reset: care; }
.care-steps li { counter-increment: care; }
.care-steps li::before {
  content: counter(care, decimal-leading-zero); display: block; margin-bottom: 10px;
  color: var(--yellow); font-weight: 800; font-stretch: 112%; font-size: var(--step--1); letter-spacing: .08em;
}
.care-steps h4 { margin: 0 0 8px; color: var(--white); font-size: var(--step-1); line-height: 1.3; }
.care-steps p { margin: 0; color: rgba(255,255,255,.8); font-size: var(--step--1); line-height: 1.55; }

.team-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; margin-top: clamp(40px, 5vw, 56px); }
.team-note { margin: 0; max-width: 60ch; padding-left: 16px; border-left: 2px solid var(--yellow); color: var(--white); font-size: var(--step-1); line-height: 1.5; }

@media (max-width: 1100px) {
  .doc-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 20px; }
  .care-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .doc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
  .care-steps { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
/* doctors on phones: one swipeable row (same pattern as the prices carousel), next card peeking in */
.pkg-controls.doc-controls { display: none; }
@media (max-width: 640px) {
  .pkg-controls.doc-controls { display: flex; }
  .doc-scroller {
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain;
    margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 8px; scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .doc-scroller::-webkit-scrollbar { display: none; }
  .doc-scroller:focus-visible { outline: 3px solid var(--yellow); outline-offset: -3px; }
  .doc-cards { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 72%; gap: 16px; }
  .doc-card { scroll-snap-align: start; }
}
@media (max-width: 640px) and (prefers-reduced-motion: reduce) { .doc-scroller { scroll-behavior: auto; } }

/* ---------- Patient journey (home): four numbered steps on a restrained timeline, line icon beside each title ---------- */

.journey {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 32px;
}
.journey li { position: relative; }
/* step title with a bare line icon beside it, like the trust bar */
.journey-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.journey-icon { flex: none; width: 30px; height: 30px; margin-top: 1px; fill: none; stroke: var(--blue); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.journey-marker { position: relative; margin-bottom: 20px; }
.journey-num {
  position: relative; z-index: 1; display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--navy); color: var(--yellow);
  font-weight: 800; font-stretch: 112%; font-size: var(--step-1);
}
/* connecting line from each number towards the next step */
.journey li:not(:last-child) .journey-marker::after {
  content: ""; position: absolute; top: 24px; left: 64px; right: -16px;
  border-top: 1.5px solid rgba(12, 53, 106, .22);
}
.journey h3 { margin: 0; font-size: var(--step-2); line-height: 1.2; }
.journey p { margin: 0; color: var(--text); }
.journey-cta { margin: clamp(36px, 4vw, 48px) 0 0; }
/* tablet: two by two, so only steps 1 and 3 connect sideways */
@media (max-width: 1100px) {
  .journey { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 32px; }
  .journey li:nth-child(2n) .journey-marker::after { display: none; }
}
/* phones: a vertical timeline, numbers on the left, photo and text on the right */
@media (max-width: 640px) {
  .journey { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .journey li { padding-left: 64px; }
  .journey-head { padding-top: 10px; }
  .journey-icon { width: 26px; height: 26px; }
  .journey-marker { position: absolute; left: 0; top: 0; margin: 0; }
  .journey li:not(:last-child) .journey-marker::after { display: none; }
  .journey li:not(:last-child)::after {
    content: ""; position: absolute; top: 60px; bottom: -24px; left: 23px;
    border-left: 1.5px solid rgba(12, 53, 106, .22);
  }
}

/* ---------- Inner page hero ---------- */

.page-hero { padding: clamp(48px, 7vw, 96px) 0 clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--line); }
.page-hero h1 {
  font-size: clamp(2.6rem, 7vw, 5.75rem); font-stretch: 125%; font-weight: 800;
  line-height: .95; letter-spacing: -0.03em; max-width: 14ch; margin-bottom: 24px;
}
.page-hero p { font-size: var(--step-2); line-height: 1.45; color: var(--text); max-width: 46ch; }
.page-hero .grid-2 { align-items: end; }
/* page hero call to action (e.g. prices): primary button plus a jump link */
.page-hero-actions { align-items: center; gap: 12px 24px; margin: 28px 0 18px; }
/* "What affects your price" cards sit above the included / extra-costs columns */
.price-factors { margin: 0 0 clamp(48px, 6vw, 80px); }
.price-factors + .grid-2 h2 { font-size: var(--step-4); } /* sub-parts of the same section */
.price-factors + .grid-2 .article-img { margin: 28px 0 0; } /* photo under the included / extra-costs lists */
.faq-photo { display: block; width: 100%; height: auto; margin: 8px 0 28px; }

/* ---------- Layout helpers ---------- */

.section { padding-block: var(--section); }
.section.tint { background: var(--mist); }
.section.cream { background: var(--cream); }

/* S.H.E. feature on the home page */
.she-feature { align-items: center; }
.she-feature h2 { max-width: 14ch; }
.award {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px;
  padding: 8px 16px 8px 10px; border-radius: 999px; background: var(--navy); color: var(--white);
  font-weight: 600; font-size: var(--step--1); line-height: 1.3;
}
.award svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--yellow); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.section.navy { background: var(--navy); color: rgba(255,255,255,.86); }
.section.navy h2, .section.navy h3 { color: var(--white); }

.section-head { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px 64px; align-items: end; margin-bottom: clamp(32px, 5vw, 56px); }
.section-head h2 { margin: 0; max-width: 16ch; }
.section-head p { margin: 0; font-size: var(--step-1); }

/* Home page heading scale (main.home only; other pages keep the default h2):
   major sections 32 → 56px, supporting sections (.h2-support) 28 → 40px, both fluid.
   Wider, balanced headings so most wrap onto one or two lines. */
.home h2 { font-size: clamp(2rem, 1.45rem + 2.35vw, 3.5rem); text-wrap: balance; }
.home h2.h2-support { font-size: clamp(1.75rem, 1.15rem + 1.6vw, 2.5rem); }
.home .section-head h2, .home .intro h2, .home .she-feature h2 { max-width: 22ch; }
@media (min-width: 861px) { .home .section-head { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 32px 56px; } }
.home .grid-2 > div > .list-title:first-child { margin-top: 0; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 72px); }
.grid-2 > * { min-width: 0; } /* lets wide content such as price tables scroll inside its column instead of widening the page */
.grid-2 .table-wrap:not(.wide) table { min-width: 0; } /* short tables fit their half-width column instead of scrolling */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

@media (max-width: 860px) {
  .section-head, .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .grid-3 { grid-template-columns: 1fr; }
}

/* ---------- Intro split (home) ---------- */

.intro { display: grid; grid-template-columns: 1fr 1.4fr; border-bottom: 1px solid var(--line); }
.intro > div { padding: clamp(32px, 5vw, 56px) var(--gutter); }
.intro > div + div { border-left: 1px solid var(--line); }
.intro > div:first-child { padding-left: 0; }
.intro > div:last-child { padding-right: 0; }
.intro h2 { margin: 0; max-width: 18ch; }
.intro p { font-size: var(--step-1); }
@media (max-width: 860px) {
  .intro { grid-template-columns: minmax(0, 1fr); }
  .intro > div { padding-inline: 0; }
  .intro > div + div { border-left: 0; border-top: 1px solid var(--line); }
}

/* ---------- Stats ---------- */

.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.stat { padding: 28px 24px 8px 0; }
.stat + .stat { padding-left: 24px; border-left: 1px solid var(--line); }
.stat b {
  display: block; color: var(--navy);
  font-size: clamp(2.2rem, 4.4vw, 3.5rem); font-stretch: 120%; font-weight: 750; line-height: 1; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.stat > span { display: block; margin-top: 10px; color: var(--muted); font-size: var(--step--1); max-width: 22ch; }
@media (max-width: 420px) {
  h1, h2 { hyphens: manual; overflow-wrap: break-word; } /* whole words move to the next line; no automatic "Pa-tients" splits */
  .intro > div { padding-inline: 0; }
  .stat b { font-size: 1.9rem; }
}
@media (max-width: 760px) {
  .stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .stat:nth-child(3) { padding-left: 0; border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* ---------- Photo cards ---------- */

.photo-card {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  min-height: 440px; padding: 24px; border-radius: var(--radius-m); overflow: hidden;
  color: var(--white); text-decoration: none; background: var(--navy);
}
.photo-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.photo-card::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(10,37,71,.9) 0%, rgba(10,37,71,.72) 32%, rgba(10,37,71,.25) 52%, rgba(10,37,71,.22) 66%, rgba(10,37,71,.88) 100%);
}
.photo-card > *:not(img) { position: relative; z-index: 2; }
.photo-card h3 { color: var(--white); margin: 0 0 6px; font-size: var(--step-3); }
.photo-card .sub { font-size: var(--step--1); color: rgba(255,255,255,.92); border-bottom: 1px solid rgba(255,255,255,.3); padding-bottom: 14px; }
.photo-card .foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: var(--step-1); font-weight: 600; }
.photo-card .foot::after {
  content: ""; flex: none; width: 40px; height: 40px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.7);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
  transition: background-color .2s ease, border-color .2s ease;
}
.photo-card:hover .foot::after, .photo-card:focus-visible .foot::after {
  border-color: var(--yellow);
  background: var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6' fill='none' stroke='%230A2547' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.photo-card:hover { color: var(--white); }
.photo-card:hover img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .photo-card img, .photo-card .foot::after { transition: none; } .photo-card:hover img { transform: none; } }
/* Tablet widths: the photos are only slightly cropped there, so keep the printed HIMG logo whole by anchoring to its corner */
.photo-card img.logo-left { object-position: 62% center; }
@media (min-width: 601px) and (max-width: 860px) { .photo-card img.logo-right { object-position: 100% 50%; } .photo-card img.logo-left { object-position: 0% 50%; } }

/* ---------- Steps (real sequences only) ---------- */

.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: step; }
.steps li { counter-increment: step; padding: 24px; border-radius: var(--radius-m); background: var(--white); border: 1px solid var(--line); }
.steps li::before {
  content: counter(step); display: inline-grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%; background: var(--navy); color: var(--white);
  font-weight: 700; margin-bottom: 18px;
}
/* steps with a round photo: the step number sits on the photo's corner */
.steps.with-pics li { position: relative; }
.steps.with-pics img { display: block; width: 112px; height: 112px; margin-bottom: 18px; border-radius: 50%; object-fit: cover; } /* square photos become circles; the home step images are already round */
.steps.with-pics li::before { position: absolute; top: 20px; left: 112px; margin: 0; box-shadow: 0 0 0 3px var(--white); }
.steps h3 { font-size: var(--step-1); margin-bottom: 8px; font-stretch: 100%; }
.steps p { margin: 0; font-size: var(--step--1); }
@media (max-width: 960px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
/* three-step variant (home: how to request an assessment) */
.steps.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .steps.three { grid-template-columns: 1fr; } }

/* ---------- Before / after comparison ---------- */

.compare {
  --pos: 50%;
  position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius-m); overflow: hidden;
  background: var(--mist); user-select: none; touch-action: pan-y;
}
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare .before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compare .divider {
  position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px;
  background: var(--white); pointer-events: none;
}
.compare .divider::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px;
  border-radius: 50%; box-shadow: 0 4px 14px rgba(10,37,71,.3);
  background: var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5' fill='none' stroke='%230A2547' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 24px no-repeat;
}
.compare input[type="range"] {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: ew-resize;
}
.compare input[type="range"]:focus-visible + .divider::after { outline: 3px solid var(--white); outline-offset: 3px; }
.compare .tag {
  position: absolute; bottom: 14px; z-index: 1; pointer-events: none;
  padding: 4px 12px; border-radius: 999px; font-size: var(--step--1); font-weight: 600;
  background: rgba(10,37,71,.8); color: var(--white);
}
.compare .tag.b { left: 14px; }
.compare .tag.a { right: 14px; background: var(--yellow); color: var(--ink); }

/* results grid: three compact sliders per row from tablet width up, capped so each stays small */
.cases {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px clamp(12px, 2vw, 24px); max-width: 1040px;
}
.cases .case-meta { flex-wrap: wrap; row-gap: 2px; }
.cases .case-meta h2, .cases .case-meta h3, .cases .case-meta b { font-size: var(--step-1) !important; margin: 0; }
@media (max-width: 640px) { .cases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 400px) { .cases { grid-template-columns: minmax(0, 1fr); } }
/* home: four results — one row of four on desktop, two by two on tablets */
.home .cases { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; }
/* every card uses the same rows (photo, name + hair count, caption), shared across the row with subgrid,
   so names, hair counts and captions line up even when a name or caption wraps */
.home .cases .case { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 14px; }
.home .cases .case-meta { flex-direction: column; align-items: flex-start; gap: 2px; }
@media (max-width: 1100px) { .home .cases { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; } }
/* home, phones: one large result at a time, switched with patient-name buttons (added by main.js) */
.angle-switch.case-switch { display: none; }
@media (max-width: 640px) {
  .angle-switch.case-switch { display: flex; flex-wrap: wrap; margin-bottom: 18px; }
  .cases.has-switch { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
  .cases.has-switch > .case:not(.is-active) { display: none; }
}
/* results page (14 cases): two featured results, then rows of four, so no card is left alone;
   two columns on tablets, one large result per row on phones. Every card shares the same rows
   (photo, name + hair count, caption, angle buttons) with its neighbours through subgrid. */
.cases.results-cases { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 24px; max-width: none; margin-bottom: -56px; }
.results-cases > .case:nth-child(-n+2) { grid-column: span 2; }
.results-cases .case { display: grid; grid-row: span 4; grid-template-rows: subgrid; gap: 0; margin-bottom: 56px; }
.results-cases .compare { margin-bottom: 18px; }
.results-cases .case-meta { flex-direction: column; align-items: flex-start; gap: 2px; }
.cases.results-cases .case-meta h2 { font-size: var(--step-2) !important; line-height: 1.15; }
.cases.results-cases .case-meta b { font-size: var(--step-0) !important; font-stretch: 100%; }
.results-cases .case p { margin-top: 6px; font-size: var(--step-0); }
.results-cases .angle-switch { align-self: start; margin-top: 16px; }
.results-cases .angle-switch button { min-height: 44px; padding: 0 18px; }
@media (min-width: 1100px) {
  .results-cases > .case:nth-child(n+3) .case-meta h2 { font-size: var(--step-1) !important; }
  .results-cases > .case:nth-child(n+3) p { font-size: var(--step--1); }
}
@media (max-width: 1099px) {
  .cases.results-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .results-cases > .case:nth-child(-n+2) { grid-column: auto; }
}
@media (max-width: 640px) {
  .cases.results-cases { grid-template-columns: minmax(0, 1fr); }
  .cases.results-cases { margin-bottom: -44px; }
  .results-cases .case { margin-bottom: 44px; }
}
.case { display: flex; flex-direction: column; gap: 14px; }
.case-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.case-meta h3 { margin: 0; font-size: var(--step-2); }
.case-meta b { color: var(--navy); font-size: var(--step-2); font-stretch: 115%; white-space: nowrap; }
.case p { margin: 0; font-size: var(--step--1); color: var(--muted); }

.angle-switch { display: inline-flex; gap: 6px; }
.angle-switch button {
  font: inherit; font-size: var(--step--1); font-weight: 600; cursor: pointer;
  min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--white); color: var(--ink);
}
.angle-switch button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--white); }

/* ---------- Quote ---------- */

.pull-quote { margin: 0; }
.pull-quote p {
  font-size: clamp(1.6rem, 3.4vw, 2.75rem); font-stretch: 108%; font-weight: 500;
  line-height: 1.2; color: var(--white); max-width: 26ch; letter-spacing: -0.01em;
}
.pull-quote footer { display: flex; align-items: center; gap: 16px; margin-top: 32px; }
.pull-quote footer img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: 50% 15%; }
.pull-quote cite { font-style: normal; color: var(--white); font-weight: 600; display: block; }
.pull-quote small { color: rgba(255,255,255,.7); font-size: var(--step--1); }

/* ---------- Doctors ---------- */

.doctors { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.doctor figure { margin: 0; }
.doctor img {
  aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 12%;
  border-radius: var(--radius-m); background: var(--mist); width: 100%;
}
.doctor h3 { font-size: var(--step-1); font-stretch: 100%; margin: 14px 0 2px; }
.doctor .role { color: var(--muted); font-size: var(--step--1); margin: 0; }
@media (max-width: 1000px) { .doctors { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .doctors { grid-template-columns: 1fr 1fr; } }

/* doctors page: portrait beside the profile; the same portrait size for every doctor */
.doctor-row {
  display: grid; grid-template-columns: clamp(300px, 27vw, 360px) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px);
  padding-block: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line); align-items: center;
}
.doctor-row:first-child { border-top: 0; padding-top: 0; }
.doctor-row:last-child { padding-bottom: 0; }
.doctor-row img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 12%; border-radius: var(--radius-m); background: var(--mist); }
.doctor-row h2 { font-size: var(--step-4); margin-bottom: 6px; }
.doctor-row .role { color: var(--blue); font-weight: 600; margin-bottom: 20px; }
.doctor-row > div > p:not(.role) { font-size: var(--step-1); line-height: 1.6; max-width: 60ch; }
.doctor-row .approach { margin: 24px 0 0; padding-left: 20px; border-left: 3px solid var(--yellow); font-size: var(--step-2); line-height: 1.4; color: var(--ink); max-width: 40ch; }
.doctor-row > div { min-width: 0; }
@media (max-width: 700px) {
  .doctor-row { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-block: 44px; }
  .doctor-row img { max-width: 320px; }
  .doctor-row > div > p:not(.role) { font-size: var(--step-0); }
}

/* key facts as a spec list: label left, value right, hairline rows (any number of facts, no orphan tiles) */
.credentials { list-style: none; margin: 28px 0 0; padding: 0; max-width: 560px; border-bottom: 1px solid var(--line); }
.credentials li { display: grid; grid-template-columns: minmax(120px, 38%) minmax(0, 1fr); gap: 4px 20px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--line); }
.credentials span { font-size: var(--step--1); color: var(--muted); }
.credentials b { color: var(--ink); font-weight: 650; }

.staff { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 24px; }
.staff li { padding: 16px 0; border-top: 1px solid var(--line); }
.staff b { display: block; color: var(--ink); }
.staff span { color: var(--muted); font-size: var(--step--1); }
@media (max-width: 860px) { .staff { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .staff { grid-template-columns: 1fr; } }

/* ---------- Gallery ---------- */

.gallery { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.gallery figure { margin: 0; position: relative; border-radius: var(--radius-m); overflow: hidden; }
.gallery img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10; }
.gallery figcaption {
  position: absolute; left: 12px; bottom: 12px; padding: 4px 12px; border-radius: 999px;
  background: rgba(255,255,255,.92); color: var(--ink); font-size: var(--step--1); font-weight: 600;
}
.gallery .wide { grid-column: span 4; }
.gallery .narrow { grid-column: span 2; }
.gallery .half { grid-column: span 3; }
.gallery .wide img { aspect-ratio: auto; height: 100%; }
@media (max-width: 760px) { .gallery { grid-template-columns: 1fr; } .gallery .wide, .gallery .narrow, .gallery .half { grid-column: auto; } .gallery img { aspect-ratio: 16 / 9; } }

/* ---------- Methods ---------- */

.method { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 72px); padding-block: clamp(48px, 6vw, 80px); border-top: 1px solid var(--line); align-items: center; }
.method:first-of-type { border-top: 0; }
.method .media img { border-radius: var(--radius-m); width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.method h2 { font-size: var(--step-4); }
.method .kicker { color: var(--blue); font-weight: 600; margin-bottom: 10px; }
.method.flip .media { order: 2; }
@media (max-width: 860px) { .method { grid-template-columns: 1fr; } .method.flip .media { order: 0; } }

/* treatments page: overview cards for the four methods (S.H.E. highlighted as the clinic's own method) */
.method-nav { padding-top: clamp(40px, 5vw, 64px); }
.method-nav ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.mn-card {
  display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 20px 22px;
  border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--white); color: var(--ink); text-decoration: none;
  transition: border-color .2s ease;
}
.mn-card:hover { border-color: var(--navy); color: var(--ink); }
.mn-card b { font-size: var(--step-2); font-stretch: 108%; line-height: 1.2; }
.mn-kicker { font-size: var(--step--1); font-weight: 600; color: var(--blue); }
.mn-spec { margin-top: auto; padding-top: 6px; font-size: var(--step--1); color: var(--muted); }
.mn-featured { background: var(--navy); border-color: var(--navy); color: var(--white); }
.mn-featured:hover { border-color: var(--yellow); color: var(--white); }
.mn-featured .mn-kicker { color: var(--yellow); }
.mn-featured .mn-spec { color: rgba(255,255,255,.82); }
.mn-links, .method-links { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.mn-links { margin: 20px 0 0; }
@media (max-width: 1000px) { .method-nav ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .method-nav ul { grid-template-columns: minmax(0, 1fr); } .mn-card { padding: 14px 18px; } }
@media (prefers-reduced-motion: reduce) { .mn-card { transition: none; } }
/* S.H.E. and the Zero Touch Method (used with S.H.E.) share one cream panel; full-bleed band on phones */
.method-group { margin-top: clamp(40px, 5vw, 64px); padding: 0 clamp(20px, 3vw, 40px); border-radius: var(--radius-l); background: var(--cream); }
.method-group .method { border-top-color: rgba(10,37,71,.12); }
.method-group #ztm h2 { font-size: var(--step-3); }
@media (max-width: 600px) { .method-group { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); border-radius: 0; } }
.method-compare td:nth-child(2) { white-space: nowrap; }

.checks { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; }
.checks li { position: relative; padding-left: 32px; }
.checks li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23FFC436' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.checks.on-navy li { color: rgba(255,255,255,.9); }
.checks.on-navy li::before { background-color: var(--yellow); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%230C356A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.checks.minus li::before {
  background: var(--mist) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10h8' fill='none' stroke='%235B6B80' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}

/* ---------- Tables ---------- */

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--white); }
table { width: 100%; border-collapse: collapse; min-width: 560px; }
caption { text-align: left; padding: 20px 24px 0; font-weight: 700; color: var(--ink); font-size: var(--step-2); font-stretch: 110%; }
th, td { padding: 16px 24px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
thead th { font-size: var(--step--1); color: var(--muted); font-weight: 600; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
tbody th { color: var(--ink); font-weight: 700; }
tbody th small { display: block; font-weight: 400; color: var(--muted); font-size: var(--step--1); }
.price { font-size: var(--step-2); font-weight: 700; color: var(--navy); font-stretch: 112%; white-space: nowrap; }
.price s { display: block; font-size: var(--step--1); color: var(--muted); font-weight: 400; font-stretch: 100%; }
td.featured, th.featured { background: #FFF8E6; }
/* prices: detailed tables grouped in <details> (FAQ accordion look); collapsed on phones by main.js */
.price-group > .table-wrap { max-width: none; padding: 0; margin-bottom: 24px; }
.price-group summary { font-size: var(--step-2); font-weight: 700; }
.price-group-hint { margin-left: 8px; color: var(--muted); font-size: var(--step--1); font-weight: 500; }
.price-group caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* the summary names the table */
/* phones: let narrow tables fit instead of forcing a sideways scroll; wide ones still scroll inside .table-wrap */
@media (max-width: 600px) {
  table { min-width: 0; }
  th, td { padding: 12px 10px; }
  caption { padding: 16px 12px 0; }
  .price { font-size: var(--step-1); white-space: normal; }
  .price s, .price small { white-space: nowrap; }
  .table-wrap.wide table { min-width: 560px; }
}
@media (max-width: 400px) { th, td { padding: 10px 8px; } }
.table-hint { margin: 0 0 6px; font-size: var(--step--1); color: var(--muted); text-align: right; }
.na { color: var(--muted); }

/* ---------- Plan cards (prices) ---------- */

.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.plan { padding: 28px 24px; border-radius: var(--radius-m); border: 1px solid var(--line); background: var(--white); display: flex; flex-direction: column; }
.plan h3 { font-size: var(--step-2); margin-bottom: 4px; }
.plan .spec { color: var(--blue); font-weight: 600; font-size: var(--step--1); margin-bottom: 16px; }
.plan p { font-size: var(--step--1); }
.plan.highlight { background: var(--navy); border-color: var(--navy); color: rgba(255,255,255,.86); }
.plan.highlight h3 { color: var(--white); }
.plan.highlight .spec { color: var(--yellow); }
@media (max-width: 1000px) { .plans { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .plans { grid-template-columns: 1fr; } }
.plans.plans-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .plans.plans-2 { grid-template-columns: 1fr; } }

/* ---------- Photo guide (UK patients) and photo fields (contact form) ---------- */

.photo-guide { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 16px; }
.photo-guide figure { margin: 0; }
.pg-img { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-m); background: var(--mist); }
.pg-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pg-num {
  position: absolute; top: 10px; left: 10px; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; background: var(--navy); color: var(--yellow);
  font-weight: 800; font-stretch: 112%; box-shadow: 0 0 0 3px rgba(255, 255, 255, .9);
}
.photo-guide figcaption { margin-top: 10px; }
.photo-guide figcaption b { display: block; color: var(--ink); }
.photo-guide figcaption span { display: block; margin-top: 2px; color: var(--muted); font-size: var(--step--1); line-height: 1.45; }
.photo-tips { margin-top: 28px; padding: 20px 24px; border-radius: var(--radius-m); background: var(--mist); }
.photo-tips h4 { margin: 0; color: var(--ink); font-size: var(--step-1); }
.photo-tips .checks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; margin-top: 14px; }
@media (max-width: 560px) {
  .photo-guide { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .photo-tips { padding: 18px; }
  .photo-tips .checks { grid-template-columns: 1fr; }
}

/* ---------- Package comparison (prices) ---------- */

/* Apple-style comparison: one column per package, rows lined up across columns with subgrid,
   in one sliding row at every width (swipe, scroll or arrow buttons) */
.pkg-scroller {
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain;
  margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 12px; scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.pkg-scroller::-webkit-scrollbar { display: none; }
.pkg-scroller:focus-visible { outline: 3px solid var(--yellow); outline-offset: -3px; }
.pkg-grid {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 40px) / 4);
  grid-template-rows: repeat(8, auto); column-gap: 40px;
}
@media (max-width: 1100px) { .pkg-grid { grid-auto-columns: calc((100% - 2 * 40px) / 3); } }
@media (max-width: 820px) { .pkg-grid { grid-auto-columns: calc((100% - 40px) / 2); } }
.pkg {
  grid-row: span 8; display: grid; grid-template-rows: subgrid; row-gap: 0;
  position: relative; scroll-snap-align: start; text-align: center;
}
/* thin divider between columns, like a table */
.pkg + .pkg::before { content: ""; position: absolute; top: 24px; bottom: 0; left: -20px; border-left: 1px solid var(--line); }

.pkg-controls { display: flex; justify-content: flex-end; gap: 10px; margin: -8px 0 16px; }
.pkg-arrow {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  border: 1.5px solid var(--line); background: var(--white); color: var(--navy);
  transition: background-color .2s ease, border-color .2s ease, opacity .2s ease;
}
.pkg-arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pkg-arrow:hover:not(:disabled) { background: var(--yellow); border-color: var(--yellow); }
.pkg-arrow:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.pkg-arrow:disabled { opacity: .35; cursor: default; }

.pkg-head { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-bottom: 20px; }
.pkg-flag { min-height: 1.4em; color: #B45309; font-size: var(--step--1); font-weight: 700; }
.pkg-badge {
  width: 84px; height: 84px; margin: 6px 0 10px; border-radius: 50%; display: grid; place-items: center;
  background: var(--navy); color: var(--yellow); font-weight: 800; font-stretch: 112%; font-size: 1.6rem;
  box-shadow: 0 0 0 6px var(--mist);
}
.pkg-badge.is-small { font-size: 1.3rem; }
.pkg.is-featured .pkg-badge { box-shadow: 0 0 0 6px var(--cream), 0 0 0 7px var(--yellow); }
.pkg-head h3 { margin: 0; font-size: var(--step-2); line-height: 1.15; }
.pkg-head p { margin: 0; max-width: 24ch; color: var(--muted); font-size: var(--step--1); line-height: 1.4; }

.pkg-buy { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-bottom: 28px; }
.pkg-price { margin: 0; color: var(--text); font-size: var(--step-0); }
.pkg-price b { color: var(--ink); }
.pkg-price small { display: block; margin-top: 2px; color: var(--muted); font-size: var(--step--1); }
.pkg-price s { margin-left: 4px; }
.pkg-cta { min-width: 0; padding-inline: 22px; }

.pkg-spec {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 22px 4px; border-top: 1px solid var(--line);
}
.pkg-spec p { margin: 0; line-height: 1.4; }
.pkg-spec b { display: block; color: var(--ink); font-size: var(--step-1); font-weight: 700; }
.pkg-spec b small { font-size: var(--step--1); color: var(--muted); font-weight: 400; }
.pkg-spec b .na { color: var(--muted); font-weight: 500; }
.pkg-spec span { display: block; margin-top: 2px; color: var(--muted); font-size: var(--step--1); }
.pkg-for p { font-size: var(--step--1); color: var(--text); max-width: 28ch; }
.pkg-icon { width: 32px; height: 32px; fill: none; stroke: var(--blue); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.pkg-note { margin: 16px 0 0; font-size: var(--step--1); color: var(--muted); max-width: 80ch; }
@media (max-width: 640px) {
  .pkg-grid { grid-auto-columns: 78%; column-gap: 28px; }
  .pkg + .pkg::before { left: -14px; }
  .pkg-arrow { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .pkg-arrow { transition: none; } .pkg-scroller { scroll-behavior: auto; } }

.note { padding: 20px 24px; border-radius: var(--radius-m); background: var(--cream); color: var(--ink); }
.note p:last-child { margin-bottom: 0; }

/* ---------- Timeline (procedure day / recovery) ---------- */

.timeline { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.timeline li { position: relative; padding: 0 0 32px 32px; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--yellow); border: 2px solid var(--navy); }
.timeline li:last-child { padding-bottom: 0; }
.timeline time, .timeline .when { display: block; font-weight: 700; color: var(--navy); font-stretch: 112%; }
.timeline p { margin: 4px 0 0; }

/* ---------- FAQ ---------- */

.faq-group + .faq-group { margin-top: 56px; }
.faq-group h2 { font-size: var(--step-4); }
details { border-top: 1px solid var(--line); }
details:last-of-type { border-bottom: 1px solid var(--line); }
summary {
  list-style: none; cursor: pointer; padding: 22px 48px 22px 0; position: relative;
  font-weight: 600; font-size: var(--step-1); color: var(--ink);
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: ""; position: absolute; right: 4px; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%;
  background: var(--mist) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 5v10M5 10h10' fill='none' stroke='%230C356A' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 16px no-repeat;
  transition: transform .2s ease;
}
details[open] summary::after { transform: rotate(45deg); background-color: var(--yellow); }
details > div { padding: 0 0 24px; max-width: 70ch; }
@media (prefers-reduced-motion: reduce) { summary::after { transition: none; } }

/* ---------- Forms ---------- */

.form { display: grid; gap: 20px; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 600px) { .form .row { grid-template-columns: 1fr; } }
label, legend { display: block; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.hint { display: block; font-weight: 400; color: var(--muted); font-size: var(--step--1); margin-top: 2px; }
input[type="text"], input[type="email"], input[type="tel"], select, textarea, input[type="file"] {
  width: 100%; font: inherit; color: var(--ink);
  padding: 12px 14px; min-height: 48px;
  border: 1.5px solid var(--line); border-radius: var(--radius-s); background: var(--white);
}
textarea { min-height: 120px; resize: vertical; }
input[type="text"], input[type="email"], input[type="tel"], select { line-height: 1.25; } /* text fields and dropdowns the same 48px height */
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--yellow); outline-offset: 1px; border-color: var(--navy); }
fieldset { border: 0; padding: 0; margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { margin: 0; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1.5px solid var(--line); border-radius: 999px; cursor: pointer; }
.chips input { accent-color: var(--navy); width: 18px; height: 18px; }
.consent { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; color: var(--text); font-size: var(--step--1); }
.consent input { accent-color: var(--navy); width: 20px; height: 20px; margin-top: 2px; flex: none; }
.form-status { padding: 14px 18px; border-radius: var(--radius-s); background: var(--cream); color: var(--ink); border-left: 4px solid var(--muted); }
.form-status[hidden] { display: none; }
.form-status.is-success { background: #E8F5EC; border-left-color: #1E7B3C; }
.form-status.is-error { background: #FDECEC; border-left-color: #B42318; }
.form-status a { color: var(--navy); font-weight: 600; }
.form-step { display: grid; gap: 16px; padding-top: 20px; border-top: 1px solid var(--line); }
.form-step legend { font-size: var(--step-1); padding: 0; margin-bottom: 0; float: left; width: 100%; }
.form-step legend + * { clear: both; }
.req-mark { font-weight: 400; color: var(--muted); font-size: var(--step--1); }
.field-error { margin: 6px 0 0; color: #B42318; font-weight: 600; font-size: var(--step--1); }
.field-error[hidden] { display: none; }
[aria-invalid="true"] { border-color: #B42318 !important; border-width: 2px !important; }
.photo-grid-note { margin: -4px 0 0; font-size: var(--step--1); color: var(--muted); }
/* the 5 example angles, above the one upload field; thumbnails large enough to read the angle */
.photo-guide { display: flex; flex-wrap: wrap; gap: 12px 16px; margin: 0; padding: 0; list-style: none; }
.photo-guide li { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 84px; text-align: center; font-size: var(--step--1); line-height: 1.3; color: var(--text); }
.pf-thumb { width: 72px; height: 72px; border-radius: 14px; object-fit: cover; background: var(--mist); }
@media (max-width: 480px) {
  .photo-guide { gap: 10px; }
  .photo-guide li { width: calc((100% - 20px) / 3); }
  .pf-thumb { width: 56px; height: 56px; border-radius: 12px; }
}
/* one upload field for up to 5 photos, the chosen photos listed underneath with a "Remove" button */
.photo-upload label { margin-bottom: 4px; }
.photo-upload .hint { margin: 0 0 10px; }
.photo-upload input[type="file"] { width: 100%; padding: 10px; font-size: var(--step--1); }
.photo-count { margin: 10px 0 0; font-size: var(--step--1); font-weight: 600; color: var(--navy); }
.photo-list { display: grid; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.photo-list[hidden], .photo-count[hidden] { display: none; }
.photo-list li { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 6px 8px 6px 6px; background: var(--white); border: 1px solid var(--line); }
.photo-list img { width: 48px; height: 48px; object-fit: cover; background: var(--mist); }
.pl-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--step--1); }
.pl-remove { padding: 6px 12px; border: 1px solid var(--line); background: none; color: var(--navy); font: inherit; font-size: var(--step--1); font-weight: 600; cursor: pointer; }
.pl-remove:hover, .pl-remove:focus-visible { border-color: var(--navy); }
.privacy-note { margin: 0; padding: 12px 16px; border-radius: var(--radius-s); background: var(--mist); font-size: var(--step--1); color: var(--text); }
.hidden-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
button:disabled { opacity: .7; cursor: progress; }

.contact-card { padding: clamp(24px, 4vw, 40px); border-radius: var(--radius-l); background: var(--navy); color: rgba(255,255,255,.86); }
.contact-card h2 { color: var(--white); font-size: var(--step-4); }
.contact-card dl { margin: 0; display: grid; gap: 20px; }
.contact-card dt { font-size: var(--step--1); color: rgba(255,255,255,.7); }
.contact-card dd { margin: 2px 0 0; font-size: var(--step-2); color: var(--white); font-weight: 600; }
.contact-card a { color: var(--white); }
.contact-card a:hover { color: var(--yellow); }

/* ---------- Contact methods (phone, WhatsApp, Viber, email) ---------- */

.contact-methods { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.contact-methods a {
  display: flex; flex-direction: column; gap: 4px; height: 100%;
  padding: 24px; border-radius: var(--radius-m);
  background: var(--white); border: 1px solid var(--line);
  color: var(--ink); text-decoration: none;
  transition: border-color .2s ease, background-color .2s ease;
}
.contact-methods a:hover { border-color: var(--navy); color: var(--ink); }
.cm-icon { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 16px; background: var(--navy); color: var(--yellow); }
.cm-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cm-label { font-weight: 650; font-size: var(--step-1); }
.cm-value { color: var(--muted); font-size: var(--step--1); overflow-wrap: anywhere; }

.contact-methods.on-navy a { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.2); color: var(--white); }
.contact-methods.on-navy a:hover { background: rgba(255,255,255,.12); border-color: var(--yellow); }
.contact-methods.on-navy .cm-icon { background: var(--yellow); color: var(--ink); }
.contact-methods.on-navy .cm-value { color: rgba(255,255,255,.78); }

@media (max-width: 900px) { .contact-methods { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .contact-methods { grid-template-columns: minmax(0, 1fr); } .contact-methods a { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 16px; padding: 16px 20px; } .cm-icon { margin-bottom: 0; } .contact-methods a > span:not(.cm-icon) { flex: 1 1 60%; } }

.visit { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.visit .panel { padding: 28px; border-radius: var(--radius-m); background: var(--mist); }
.visit .panel h3 { font-size: var(--step-2); margin-bottom: 8px; }
.visit .panel p { margin-bottom: 16px; }
.visit dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; font-size: var(--step--1); }
.visit dt { color: var(--muted); }
.visit dd { margin: 0; color: var(--ink); }
@media (max-width: 760px) { .visit { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .visit dl { grid-template-columns: 1fr; gap: 0; } .visit dd { margin-bottom: 10px; } }

.map-box { margin-top: 12px; border-radius: var(--radius-m); overflow: hidden; border: 1px solid var(--line); background: var(--mist); height: clamp(300px, 40vw, 440px); }
.map-box iframe { display: block; width: 100%; height: 100%; border: 0; }

/* small brand icons (Simple Icons, CC0) above the footer */
.social-strip { padding: 40px 0 0; }
.social-strip .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.social-strip h2 { margin: 0; font-size: var(--step-1); font-stretch: 100%; font-weight: 600; }
.social-icons { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.social-icons a {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--mist); color: var(--navy); transition: background-color .2s ease, color .2s ease;
}
.social-icons a:hover { background: var(--navy); color: var(--white); }
.social-icons svg { width: 18px; height: 18px; fill: currentColor; }
@media (prefers-reduced-motion: reduce) { .social-icons a { transition: none; } }

.social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.social a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 500; }
.social a:hover { border-color: var(--navy); color: var(--navy); }

.callback { padding: clamp(24px, 4vw, 36px); border-radius: var(--radius-l); background: var(--white); border: 1px solid var(--line); }
.callback h3 { font-size: var(--step-3); }
/* contact page: the quote form takes the wide column, the short callback form sits beside it (stays in view on desktop) */
.quote-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: clamp(16px, 2vw, 24px); align-items: start; }
.quote-layout > .callback:last-child { position: sticky; top: 24px; }
@media (max-width: 960px) { .quote-layout { grid-template-columns: minmax(0, 1fr); } .quote-layout > .callback:last-child { position: static; } }
@media (max-width: 480px) { .callback { padding: 22px 18px; } }
.form-step legend { font-size: var(--step-2); }

/* ---------- Article page (e.g. UK patients) ---------- */

.page-hero.long h1 { max-width: 20ch; font-size: clamp(2.2rem, 5vw, 4.25rem); }

.article-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(32px, 5vw, 72px);
  align-items: start; padding-block: clamp(40px, 6vw, 80px);
}
.article { max-width: 720px; }
.article > section { margin-top: clamp(48px, 6vw, 72px); }
.article h2 { font-size: var(--step-4); }
.article p { font-size: var(--step-1); line-height: 1.65; }
.article .note p, .article .muted, .article details p { font-size: var(--step-0); }
.article .stats { margin-top: 24px; }
.article .stat b { font-size: clamp(1.8rem, 3vw, 2.4rem); }

.list-title { margin: 28px 0 0; font-size: var(--step-1); line-height: 1.3; }
.list-title + .checks { margin-top: 12px; }
.article .list-title { font-size: var(--step-2); font-stretch: 105%; margin: 28px 0 4px; }
.article-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin: 8px 0 24px; }
.source-note { margin-top: 12px; font-size: var(--step--1) !important; line-height: 1.5 !important; color: var(--muted); }
.price.uk { color: var(--text); font-stretch: 105%; }
.price > small { display: block; font-size: var(--step--1); color: var(--muted); font-weight: 400; font-stretch: 100%; }

/* Google reviews block (home and results pages) */
.reviews-band { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.reviews-score {
  display: grid; justify-items: center; gap: 8px; padding: 36px 24px; border-radius: var(--radius-m);
  background: var(--white); border: 1px solid var(--line); color: var(--ink); text-decoration: none; text-align: center;
  transition: border-color .2s ease;
}
.reviews-score:hover { border-color: var(--navy); color: var(--ink); }
.reviews-score .g-logo { width: 40px; height: 40px; }
.rs-number { font-size: clamp(3rem, 6vw, 4.5rem); font-weight: 800; font-stretch: 120%; line-height: 1; color: var(--navy); }
.rs-stars {
  width: 140px; height: 26px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FBBC05' d='M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.3l-5.9 3.3 1.3-6.6-4.9-4.6 6.6-.8z'/%3E%3C/svg%3E") left center / 28px 26px repeat-x;
}
.rs-count { color: var(--muted); font-size: var(--step--1); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) { .reviews-band { grid-template-columns: minmax(0, 1fr); } .reviews-score { max-width: 320px; } }
@media (prefers-reduced-motion: reduce) { .reviews-score { transition: none; } }

/* "Travelling from the UK?" cards on the home page */
.uk-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.uk-card {
  display: flex; flex-direction: column; border-radius: var(--radius-m); overflow: hidden;
  border: 1px solid var(--line); background: var(--white); color: var(--ink); text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.uk-card:hover { border-color: var(--navy); box-shadow: 0 10px 28px rgba(10,37,71,.12); color: var(--ink); }
.uk-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.uk-card-body { display: flex; flex-direction: column; gap: 12px; padding: 20px 22px 22px; flex: 1; }
.uk-card-title { font-size: var(--step-2); font-weight: 700; font-stretch: 108%; line-height: 1.2; }
.uk-card-facts { display: grid; gap: 4px; color: var(--muted); font-size: var(--step--1); }
.uk-card-link { margin-top: auto; font-weight: 600; color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.uk-card:hover .uk-card-link { color: var(--navy); }
@media (max-width: 860px) { .uk-cards { grid-template-columns: minmax(0, 1fr); } .uk-card { flex-direction: row; } .uk-card img { width: 38%; aspect-ratio: auto; min-height: 100%; } }
@media (max-width: 480px) { .uk-card { flex-direction: column; } .uk-card img { width: 100%; aspect-ratio: 16 / 9; } }
@media (prefers-reduced-motion: reduce) { .uk-card { transition: none; } }

/* Budapest photo gallery on the UK pages */
.city-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 8px 0 24px; }
.city-gallery figure { margin: 0; }
.city-gallery .wide { grid-column: 1 / -1; }
.city-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-m); background: var(--mist); }
.city-gallery .wide img { aspect-ratio: 16 / 9; }
.city-gallery figcaption { margin-top: 8px; }
.city-gallery figcaption span { display: block; font-weight: 600; color: var(--ink); font-size: var(--step--1); }
.city-gallery figcaption small { display: block; font-size: 0.75rem; color: var(--muted); line-height: 1.4; }
.city-gallery figcaption small a { color: inherit; }
@media (max-width: 480px) { .city-gallery { grid-template-columns: minmax(0, 1fr); } }

/* city landing page (London): two results side by side, team cut-out on a panel, pointer to the other city pages */
/* side by side only when each result can be at least 340px; stacked results stay at most 420px, as before */
.city-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 20px; }
.city-results figure { margin: 0; max-width: 420px; }
.city-results figcaption { margin-top: 12px; }
.city-results figcaption b { display: block; color: var(--ink); font-size: var(--step-1); }
.city-results figcaption span { display: block; font-size: var(--step--1); color: var(--muted); }
.team-photo { display: block; width: 100%; height: auto; padding-top: 16px; border-radius: var(--radius-m); background: var(--mist); }
.note.city-switch { margin-top: clamp(48px, 6vw, 72px); }

/* London to Budapest route map */
.map-figure { margin: 8px 0 24px; }
.route-map { display: block; width: 100%; height: auto; border-radius: var(--radius-m); border: 1px solid var(--line); }
.route-map .sea { fill: #EAF1F8; }
.route-map .land { fill: #FFFFFF; stroke: #C9D4E2; stroke-width: 1; }
.route-map .country { fill: var(--blue); stroke: var(--navy); stroke-width: 1; }
.route-map .route { fill: none; stroke: var(--navy); stroke-width: 3; stroke-dasharray: 8 8; stroke-linecap: round; }
.route-map .city { fill: var(--yellow); stroke: var(--navy); stroke-width: 3; }
.route-map .city-label { font: 700 22px var(--font); fill: var(--ink); paint-order: stroke; stroke: #FFFFFF; stroke-width: 5px; stroke-linejoin: round; }
.route-map .plane path { fill: var(--navy); }
.route-map .map-badge rect { fill: var(--navy); }
.route-map .map-badge text { font: 600 17px var(--font); fill: #FFFFFF; }
.map-figure figcaption { margin-top: 8px; font-size: var(--step--1); color: var(--muted); }

/* UK patients guide (uk-patients.html only) */
.uk-steps {
  list-style: none; counter-reset: uk-step; margin: 20px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); grid-auto-flow: column;
  column-gap: 32px; border-bottom: 1px solid var(--line);
}
.uk-steps li { counter-increment: uk-step; border-top: 1px solid var(--line); }
.uk-steps a { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-items: center; padding: 14px 0; color: var(--ink); text-decoration: none; }
.uk-steps a::before {
  content: counter(uk-step); grid-row: span 2; display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: 50%; background: var(--navy); color: var(--white); font-weight: 700; font-size: var(--step--1);
}
.uk-steps b { font-size: var(--step-1); line-height: 1.3; }
.uk-steps span { font-size: var(--step--1); color: var(--muted); line-height: 1.45; }
.uk-steps a:hover b, .uk-steps a:focus-visible b { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 600px) { .uk-steps { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; } }
.uk-before-booking { margin-top: 32px; padding: clamp(20px, 3vw, 28px); border-radius: var(--radius-m); background: var(--cream); }
.uk-before-booking h3 { margin: 0 0 4px; font-size: var(--step-2); }
.uk-before-booking p { margin: 0 0 12px; font-size: var(--step-0); }
.uk-guide .contact-methods { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 16px; }
@media (max-width: 480px) { .uk-guide .contact-methods { grid-template-columns: minmax(0, 1fr); } }
.uk-reviews { margin: 24px 0 0; }
/* the doctors' group photo is a wide cut-out: show all five, standing on a light panel, instead of cropping the outer two */
.uk-trust .uk-card img.uk-card-group { object-fit: contain; object-position: 50% 100%; background: var(--mist); padding-top: 12px; }
/* trust cards: keep the photo on top at every width (the home cards' side-by-side tablet layout lets a portrait stretch its card) */
@media (max-width: 860px) {
  .uk-trust .uk-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .uk-trust .uk-card { flex-direction: column; }
  .uk-trust .uk-card img { width: 100%; min-height: 0; aspect-ratio: 16 / 10; }
}
@media (max-width: 640px) {
  .uk-trust .uk-cards { grid-template-columns: minmax(0, 1fr); }
  .uk-trust .uk-card img { aspect-ratio: 16 / 9; }
}

.article-aside { position: sticky; top: 24px; }
.aside-card { padding: 28px; border-radius: var(--radius-l); background: var(--navy); color: rgba(255,255,255,.86); display: grid; gap: 12px; }
.aside-card h2 { color: var(--white); font-size: var(--step-2); margin-bottom: 4px; }
.aside-card dl { margin: 0 0 8px; display: grid; gap: 14px; }
.aside-card dt { font-size: var(--step--1); color: rgba(255,255,255,.7); }
.aside-card dd { margin: 2px 0 0; color: var(--white); font-weight: 650; font-size: var(--step-1); }

@media (max-width: 960px) {
  .article-layout { grid-template-columns: minmax(0, 1fr); }
  .article-aside { position: static; }
}

/* ---------- Videos (thumbnail first, YouTube player loads on click) ---------- */

.video-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px clamp(16px, 2.5vw, 28px); }
.shorts-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px clamp(12px, 2vw, 24px); max-width: 1040px; }
@media (max-width: 760px) { .video-grid { grid-template-columns: minmax(0, 1fr); } .shorts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.video-item { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.video-frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-m); overflow: hidden; background: var(--ink); }
.shorts-grid .video-frame { aspect-ratio: 9 / 16; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-facade { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer; background: var(--ink); }
.video-facade img { width: 100%; height: 100%; object-fit: cover; opacity: .9; transition: opacity .2s ease; }
.video-facade:hover img { opacity: 1; }
.video-facade .play {
  position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
  background: var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='%230A2547'/%3E%3C/svg%3E") 55% center / 30px no-repeat;
  box-shadow: 0 6px 20px rgba(10,37,71,.35); transition: transform .2s ease;
}
.video-facade:hover .play { transform: scale(1.06); }
.shorts-grid .video-facade .play { width: 52px; height: 52px; margin: -26px 0 0 -26px; background-size: 24px; }
@media (prefers-reduced-motion: reduce) { .video-facade img, .video-facade .play { transition: none; } .video-facade:hover .play { transform: none; } }

.video-item figcaption { color: var(--ink); font-weight: 600; line-height: 1.35; }
.video-item figcaption small { display: block; margin-top: 4px; color: var(--muted); font-weight: 400; font-size: var(--step--1); }
.shorts-grid figcaption { font-size: var(--step--1); }

/* ---------- CTA band ---------- */

.cta-band {
  position: relative; overflow: hidden;
  margin: 12px; border-radius: var(--radius-l); background: var(--navy); color: rgba(255,255,255,.86);
  padding: clamp(48px, 7vw, 96px) 0;
}
.cta-band h2 { color: var(--white); max-width: 18ch; }
.cta-band p { font-size: var(--step-1); max-width: 46ch; }
.cta-band .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.cta-band .contact-methods { margin-top: 36px; position: relative; }
.cta-band > svg { position: absolute; right: -40px; top: 0; height: 100%; width: auto; pointer-events: none; }
.cta-band > svg path { fill: none; stroke: var(--yellow); stroke-width: 3; stroke-linecap: round; opacity: .9; }
@media (max-width: 760px) { .cta-band { margin: 8px; } .cta-band > svg { opacity: .35; } }

/* ---------- Footer ---------- */

.site-footer { padding: 72px 0 32px; color: var(--muted); font-size: var(--step--1); }
.updated { margin-top: 12px; font-size: var(--step--1) !important; color: var(--muted) !important; }
.guarantee-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.g-card { padding: clamp(24px, 3vw, 32px); border-radius: var(--radius-m); background: var(--mist); }
.g-card h2 { font-size: var(--step-3); }
.g-card p { margin: 0; }
.why-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.why-grid .g-card h3 { font-size: var(--step-2); }
@media (max-width: 1000px) { .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .why-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .guarantee-grid { grid-template-columns: minmax(0, 1fr); } }

.footer-grid { display: grid; grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr)); gap: 32px; padding-bottom: 48px; border-bottom: 1px solid var(--line); }
.footer-grid h3 { font-size: var(--step-0); font-stretch: 100%; color: var(--ink); margin-bottom: 14px; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer-grid a { color: var(--text); text-decoration: none; }
.footer-grid a:hover { color: var(--navy); text-decoration: underline; }
.footer-grid .brand img { width: 120px; margin-bottom: 16px; }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 24px; }
@media (max-width: 1100px) { .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- Misc ---------- */

.lead { font-size: var(--step-2); line-height: 1.45; color: var(--ink); }
.muted { color: var(--muted); }
.mt-0 { margin-top: 0; }
.mt-l { margin-top: clamp(32px, 5vw, 56px); }
.center { text-align: center; }
.figure-round { border-radius: var(--radius-m); width: 100%; object-fit: cover; }

/* =====================================================================================
   PREMIUM LAYER — HIMG "European medical maison" (brand boards 2027)
   Restyles the components above: editorial serif headings, ivory pages, navy bands,
   champagne hairlines, restrained radii and no heavy shadows. Content and markup unchanged.
   ===================================================================================== */

/* ---------- Base and typography ---------- */

body { background: var(--ivory); color: var(--text); font-size: 1rem; line-height: 1.7; -webkit-font-smoothing: antialiased; }
a { color: var(--navy); text-decoration-color: rgba(11, 42, 74, .35); text-underline-offset: 4px; }
a:hover { color: var(--walnut); text-decoration-color: currentColor; }

h1, h2, h3 {
  font-family: var(--serif); font-weight: 400; font-stretch: normal;
  letter-spacing: -0.01em; line-height: 1.12; color: var(--ink);
}
h2 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); font-weight: 400; }
h3 { font-size: clamp(1.35rem, 1.2rem + .6vw, 1.65rem); font-weight: 500; }
h4 { font-family: var(--font); font-weight: 600; letter-spacing: 0; }
.lead { font-family: var(--serif); font-size: clamp(1.3rem, 1.15rem + .6vw, 1.6rem); line-height: 1.45; color: var(--ink); }

/* focus: navy on light backgrounds, champagne on navy ones */
:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; border-radius: 2px; }
.hero :focus-visible, .cta-band :focus-visible, .section.navy :focus-visible, .aside-card :focus-visible,
.site-footer :focus-visible, .page-hero :focus-visible, .mn-featured:focus-visible, .photo-card:focus-visible { outline-color: var(--champagne); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; border-color: var(--navy); }
.pkg-scroller:focus-visible, .doc-scroller:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }
.pkg-arrow:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.skip-link { background: var(--navy); color: var(--ivory); border-radius: var(--radius-s); }

/* eyebrow: small uppercase label with a thin champagne rule */
.eyebrow, .section-head .eyebrow {
  gap: 14px; margin-bottom: 18px; color: var(--walnut);
  font-size: .75rem; font-weight: 500; letter-spacing: .2em;
}
.eyebrow::before { width: 36px; height: 1px; border-radius: 0; background: var(--champagne); }
.section.navy .eyebrow { color: var(--champagne); }

/* ---------- Buttons: filled primary (assessment only) and outlined secondary ---------- */

.btn {
  min-height: 50px; padding: 0 28px; border-width: 1px;
  font-family: var(--font); font-weight: 500; font-size: .9375rem; letter-spacing: .02em;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
/* primary = start an assessment: navy on light backgrounds, champagne on navy ones */
.btn-primary { background: var(--navy); color: var(--ivory); border-color: var(--navy); }
.btn-primary:hover { background: #12375E; border-color: #12375E; color: var(--white); }
.hero .btn-primary, .cta-band .btn-primary, .section.navy .btn-primary, .aside-card .btn-primary, .cmp-cta .btn-primary, .page-hero .btn-primary {
  background: var(--champagne); border-color: var(--champagne); color: var(--navy);
}
.hero .btn-primary:hover, .cta-band .btn-primary:hover, .section.navy .btn-primary:hover, .aside-card .btn-primary:hover, .cmp-cta .btn-primary:hover, .page-hero .btn-primary:hover {
  background: #E2D3BA; border-color: #E2D3BA; color: var(--navy);
}
/* secondary actions: outlined (the old solid navy button becomes the outline style) */
.btn-dark, .btn-outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-dark:hover, .btn-outline:hover { background: var(--navy); border-color: var(--navy); color: var(--ivory); }
.btn-light, .btn-ghost { background: transparent; color: var(--ivory); border-color: rgba(247, 243, 234, .7); }
.btn-light:hover, .btn-ghost:hover { background: var(--ivory); border-color: var(--ivory); color: var(--navy); }
.text-link { font-weight: 500; color: var(--navy); text-decoration: underline; text-decoration-color: var(--champagne); text-decoration-thickness: 1px; text-underline-offset: 5px; }
.text-link:hover { color: var(--walnut); text-decoration-color: var(--walnut); }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }

/* ---------- Header ---------- */

.site-header { background: var(--ivory); border-bottom: 1px solid var(--line); }
.header-inner { min-height: 88px; }
.site-nav ul a { color: var(--navy); font-weight: 400; font-size: .9375rem; letter-spacing: .02em; border-bottom-width: 1px; }
.site-nav ul a:hover { border-bottom-color: var(--champagne); color: var(--navy); }
.site-nav ul a[aria-current="page"] { border-bottom-color: var(--navy); }
.site-nav .btn { min-height: 44px; padding: 0 22px; }
.nav-toggle { border: 1px solid var(--line); background: var(--white); }
.nav-toggle .bars, .nav-toggle .bars::before, .nav-toggle .bars::after { height: 1.5px; background: var(--navy); }
.site-header.over .site-nav ul a { color: var(--ivory); }
.site-header.over .site-nav ul a:hover { border-bottom-color: var(--champagne); }
.site-header.over .site-nav .btn-primary { background: var(--champagne); border-color: var(--champagne); color: var(--navy); }
@media (max-width: 1080px) {
  .site-nav { background: var(--ivory); box-shadow: 0 18px 30px rgba(11, 42, 74, .08); }
  .site-nav ul a { border-bottom-color: var(--line); }
  .site-header.over .site-nav ul a { color: var(--navy); }
  .site-header.over .site-nav .btn-primary { background: var(--navy); border-color: var(--navy); color: var(--ivory); }
}

/* ---------- Home hero: full-bleed navy band over the clinic video ---------- */

.hero { margin: 0; border-radius: 0; min-height: min(94vh, 880px); background: var(--navy); }
.hero-media::after {
  background:
    linear-gradient(180deg, rgba(11,42,74,.6) 0%, rgba(11,42,74,0) 28%),
    linear-gradient(0deg, rgba(11,42,74,.95) 0%, rgba(11,42,74,.74) 38%, rgba(11,42,74,.25) 64%, rgba(11,42,74,0) 86%),
    linear-gradient(90deg, rgba(11,42,74,.86) 0%, rgba(11,42,74,.55) 44%, rgba(11,42,74,0) 76%);
}
.hero-body { padding-bottom: clamp(48px, 7vw, 96px); }
@media (max-width: 1264px) { .hero-body { padding-inline: var(--gutter); } }
.hero-kicker {
  gap: 16px; color: var(--champagne);
  font-family: var(--font); font-weight: 500; font-size: .8125rem; letter-spacing: .22em; text-transform: uppercase;
}
.hero-kicker::before { width: 40px; height: 1px; border-radius: 0; }
.hero-title {
  font-family: var(--serif); font-weight: 400; font-stretch: normal; letter-spacing: -0.015em; line-height: 1.04;
  font-size: clamp(2.75rem, 1.6rem + 4.6vw, 5.5rem); max-width: 15ch; text-shadow: none;
}
.hero-lede { color: rgba(247, 243, 234, .9); font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); line-height: 1.6; }
.google-badge { box-shadow: none; background: rgba(247, 243, 234, .95); }
.video-toggle { border-width: 1px; border-color: rgba(212, 193, 163, .7); background-color: rgba(11, 42, 74, .45); }
@media (max-width: 760px) {
  .hero { margin: 0; min-height: 640px; }
  .hero-media::after {
    background:
      linear-gradient(180deg, rgba(11,42,74,.6) 0%, rgba(11,42,74,0) 30%),
      linear-gradient(0deg, rgba(11,42,74,.97) 0%, rgba(11,42,74,.82) 46%, rgba(11,42,74,.3) 72%, rgba(11,42,74,0) 92%);
  }
  .hero-body { padding-inline: var(--gutter); }
  .hero-title { font-size: clamp(2.1rem, 1.4rem + 5vw, 3rem); line-height: 1.08; }
  .hero-kicker { font-size: .75rem; letter-spacing: .18em; }
}

/* ---------- Inner page hero: navy band, serif title, champagne rule ---------- */

.page-hero { background: var(--navy); color: rgba(247, 243, 234, .88); border-bottom: 0; padding: clamp(56px, 8vw, 112px) 0 clamp(48px, 6vw, 80px); }
.page-hero h1 {
  color: var(--ivory); font-family: var(--serif); font-weight: 400; font-stretch: normal;
  font-size: clamp(2.5rem, 1.6rem + 3.8vw, 4.75rem); line-height: 1.04; letter-spacing: -0.015em; max-width: 16ch;
}
.page-hero h1::after { content: ""; display: block; width: 56px; height: 1px; margin-top: 28px; background: var(--champagne); }
.page-hero.long h1 { font-size: clamp(2.2rem, 1.5rem + 3vw, 4rem); max-width: 20ch; }
.page-hero p { color: rgba(247, 243, 234, .88); font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); line-height: 1.6; }
.page-hero .updated { color: rgba(247, 243, 234, .62) !important; }
.page-hero .text-link, .page-hero a:not(.btn) { color: var(--ivory); text-decoration-color: var(--champagne); }
.page-hero .text-link:hover, .page-hero a:not(.btn):hover { color: var(--champagne); }

/* ---------- Sections, headings and panels ---------- */

.section.tint { background: var(--sand); }
.section.cream { background: var(--cream); }
.section.navy { background: var(--navy); color: rgba(247, 243, 234, .86); }
.section.navy h2, .section.navy h3 { color: var(--ivory); }
.section-head { gap: 28px 72px; margin-bottom: clamp(36px, 5vw, 64px); }
.section-head p { color: var(--text); font-size: 1.0625rem; line-height: 1.7; }
.section.navy .section-head p { color: rgba(247, 243, 234, .86); }
.home h2 { font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.5rem); }
.home h2.h2-support { font-size: clamp(1.8rem, 1.3rem + 1.7vw, 2.6rem); }
.article h2, .method h2, .doctor-row h2, .faq-group h2 { font-size: clamp(1.75rem, 1.35rem + 1.5vw, 2.5rem); }
.note { background: var(--cream); border-left: 2px solid var(--champagne); border-radius: 0 var(--radius-m) var(--radius-m) 0; }
.g-card { background: var(--white); border: 1px solid var(--line); }
.g-card h2, .g-card h3 { font-size: clamp(1.3rem, 1.15rem + .5vw, 1.6rem); }
.plan, .mn-card, .steps li, .callback, .contact-methods a, .uk-card, .reviews-score, .table-wrap, .visit .panel { border-color: var(--line); }
.plan.highlight, .mn-featured { background: var(--navy); border-color: var(--navy); }
.plan .spec, .mn-kicker, .method .kicker, .doctor-row .role {
  color: var(--walnut); font-size: .75rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
}
.plan.highlight .spec, .mn-featured .mn-kicker { color: var(--champagne); }
.mn-card b, .uk-card-title { font-family: var(--serif); font-weight: 500; font-stretch: normal; }
.award { background: transparent; color: var(--walnut); border: 1px solid var(--champagne); padding: 7px 16px 7px 12px; font-weight: 500; letter-spacing: .02em; }
.award svg { stroke: var(--bronze); }
.list-title, .article .list-title { font-family: var(--serif); font-weight: 500; }

/* intro split and stats: serif numerals between champagne hairlines */
.intro, .intro > div + div, .stats, .stat + .stat, .stat:nth-child(n+3), .trust-list, .trust-item + .trust-item { border-color: var(--line); }
.stat b, .trust-item b, .rs-number {
  font-family: var(--serif); font-weight: 400; font-stretch: normal; letter-spacing: -0.01em; color: var(--navy);
}
.trust-item b { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.55rem); }
.trust-icon, .journey-icon, .pkg-icon { stroke: var(--bronze); stroke-width: 1.4; }

/* ---------- Doctors band (home) ---------- */

.doc-card img { border-radius: var(--radius-m); background: #1A3A5C; }
.doc-card h3 { font-family: var(--serif); font-size: 1.25rem; font-weight: 500; }
.doc-role { color: var(--champagne); font-weight: 500; letter-spacing: .02em; }
.doc-link:hover { color: var(--champagne); }
.care-team { border-top-color: rgba(212, 193, 163, .28); }
.care-steps li::before { color: var(--champagne); font-family: var(--serif); font-weight: 400; font-size: 1.5rem; letter-spacing: 0; }
.care-steps h4 { font-family: var(--serif); font-weight: 500; font-size: 1.2rem; }
.team-note { border-left: 1px solid var(--champagne); font-family: var(--serif); font-size: 1.25rem; }

/* ---------- Patient journey (home) ---------- */

.journey-num { background: var(--navy); color: var(--champagne); font-family: var(--serif); font-weight: 400; font-size: 1.3rem; }
.journey li:not(:last-child) .journey-marker::after, .journey li:not(:last-child)::after { border-color: var(--champagne); border-top-width: 1px; border-left-width: 1px; }
.journey h3 { font-size: 1.4rem; }

/* ---------- Steps: champagne rule and serif numerals instead of boxes ---------- */

.steps { gap: 28px; }
.steps li { background: transparent; border: 0; border-top: 1px solid var(--champagne); border-radius: 0; padding: 24px 0 0; }
.steps li::before {
  content: counter(step, decimal-leading-zero); display: block; width: auto; height: auto; border-radius: 0;
  background: none; color: var(--walnut); font-family: var(--serif); font-size: 1.75rem; font-weight: 400; line-height: 1; margin-bottom: 16px;
}
.steps.with-pics li::before {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--navy); color: var(--champagne); font-size: 1.05rem; box-shadow: 0 0 0 3px var(--ivory);
}
.section.tint .steps.with-pics li::before { box-shadow: 0 0 0 3px var(--sand); }
.steps h3 { font-size: 1.3rem; }
.steps p { font-size: .9375rem; }

/* ---------- Photo cards ---------- */

.photo-card { border-radius: var(--radius-m); }
.photo-card::before { background: linear-gradient(180deg, rgba(11,42,74,.9) 0%, rgba(11,42,74,.7) 32%, rgba(11,42,74,.25) 52%, rgba(11,42,74,.22) 66%, rgba(11,42,74,.9) 100%); }
.photo-card h3 { font-size: clamp(1.5rem, 1.3rem + .7vw, 1.9rem); }
.photo-card .sub { border-bottom-color: rgba(212, 193, 163, .45); }
.photo-card .foot { font-weight: 500; font-size: 1rem; }
.photo-card .foot::after { border-width: 1px; border-color: rgba(212, 193, 163, .8); }
.photo-card:hover .foot::after, .photo-card:focus-visible .foot::after {
  border-color: var(--champagne);
  background: var(--champagne) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6' fill='none' stroke='%230B2A4A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}

/* ---------- Before / after results ---------- */

.compare { border-radius: var(--radius-m); background: var(--sand); }
.compare .divider { width: 2px; margin-left: -1px; }
.compare .divider::after {
  box-shadow: 0 2px 10px rgba(11, 42, 74, .25);
  background: var(--champagne) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5' fill='none' stroke='%230B2A4A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px no-repeat;
}
.compare .tag { font-size: .6875rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; padding: 5px 12px; background: rgba(11, 42, 74, .82); }
.compare .tag.a { background: var(--champagne); color: var(--navy); }
.case-meta h2, .case-meta h3 { font-family: var(--serif); font-weight: 500; }
.case-meta b, .cases .case-meta b { font-family: var(--font); color: var(--walnut); font-weight: 500; font-stretch: normal; letter-spacing: .02em; }
.angle-switch button { border-width: 1px; border-color: var(--line); background: var(--white); font-weight: 500; }
.angle-switch button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--ivory); }

/* ---------- Doctors page ---------- */

.doctor-row, .credentials, .credentials li, .staff li { border-color: var(--line); }
.doctor-row img { border-radius: var(--radius-m); background: var(--sand); }
.doctor-row h2 { margin-bottom: 10px; }
.credentials b { font-weight: 500; color: var(--navy); }
.staff b { font-family: var(--serif); font-weight: 500; font-size: 1.1rem; }
.gallery figure { border-radius: var(--radius-m); }
.gallery figcaption { border-radius: 2px; background: rgba(247, 243, 234, .94); font-weight: 500; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; }

/* ---------- Methods (treatments page) ---------- */

.method { border-top-color: var(--line); }
.method .media img { border-radius: var(--radius-m); }
.method-group { border-radius: var(--radius-l); background: var(--cream); }
.mn-card:hover { border-color: var(--navy); }
.mn-featured:hover { border-color: var(--champagne); }

/* ---------- Check lists ---------- */

.checks li::before {
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9.25' fill='none' stroke='%23B8A27F' stroke-width='1'/%3E%3Cpath d='M6 10.4l2.7 2.7 5.3-6' fill='none' stroke='%230B2A4A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.checks.on-navy li::before {
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9.25' fill='none' stroke='%23D4C1A3' stroke-width='1'/%3E%3Cpath d='M6 10.4l2.7 2.7 5.3-6' fill='none' stroke='%23D4C1A3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.checks.minus li::before {
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9.25' fill='none' stroke='%239AA0A6' stroke-width='1'/%3E%3Cpath d='M6.5 10h7' fill='none' stroke='%235E646C' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}

/* ---------- Tables and prices ---------- */

.table-wrap { border-radius: var(--radius-m); background: var(--white); }
caption { font-family: var(--serif); font-weight: 500; font-stretch: normal; }
th, td { border-bottom-color: var(--line); }
thead th { color: var(--walnut); font-size: .6875rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
tbody th { font-weight: 500; }
.price { font-family: var(--serif); font-weight: 500; font-stretch: normal; color: var(--navy); }
.price s, .price > small { font-family: var(--font); }
.price.uk { color: var(--text); }
td.featured, th.featured { background: #F6EFE2; }
.price-group summary { font-family: var(--serif); font-weight: 500; }

/* package comparison */
.pkg-flag { color: var(--walnut); font-size: .6875rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.pkg-badge { background: var(--navy); color: var(--champagne); font-family: var(--serif); font-weight: 400; font-stretch: normal; box-shadow: 0 0 0 6px var(--sand); }
.pkg.is-featured .pkg-badge { box-shadow: 0 0 0 6px var(--ivory), 0 0 0 7px var(--champagne); }
.pkg-head h3 { font-size: 1.35rem; }
.pkg-price b { font-family: var(--serif); font-weight: 500; font-size: 1.15rem; }
.pkg-spec b { font-family: var(--serif); font-weight: 500; }
.pkg-arrow { border-width: 1px; border-color: var(--line); background: var(--white); }
.pkg-arrow:hover:not(:disabled) { background: var(--navy); border-color: var(--navy); color: var(--ivory); }

/* ---------- Timeline and FAQ ---------- */

.timeline { border-left: 1px solid var(--champagne); }
.timeline li::before { left: -6px; width: 11px; height: 11px; background: var(--ivory); border: 1px solid var(--walnut); }
.timeline time, .timeline .when { font-family: var(--serif); font-weight: 500; font-size: 1.15rem; font-stretch: normal; }
details { border-top-color: var(--line); }
details:last-of-type { border-bottom-color: var(--line); }
summary { font-family: var(--serif); font-weight: 500; font-size: clamp(1.1rem, 1.02rem + .3vw, 1.25rem); color: var(--navy); }
summary::after {
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 5v10M5 10h10' fill='none' stroke='%230B2A4A' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 16px no-repeat;
  border: 1px solid var(--champagne);
}
details[open] summary::after { background-color: var(--champagne); border-color: var(--champagne); }

/* ---------- Forms ---------- */

label, legend { font-weight: 500; }
input[type="text"], input[type="email"], input[type="tel"], select, textarea, input[type="file"] { border-width: 1px; border-color: #D9CCB7; border-radius: var(--radius-s); }
.form-step { border-top-color: var(--line); }
.form-step legend { font-family: var(--serif); font-weight: 500; }
.callback { border-radius: var(--radius-l); }
.callback h3, #form-title { font-size: clamp(1.5rem, 1.3rem + .8vw, 2rem); }
.chips label { border-width: 1px; border-color: #D9CCB7; background: var(--white); }
.pf-thumb { border-radius: var(--radius-s); }
.form-status { border-radius: var(--radius-s); }
.privacy-note { background: var(--sand); }

/* ---------- Contact methods, cards and asides ---------- */

.contact-methods a:hover { border-color: var(--navy); }
.cm-icon { background: transparent; color: var(--navy); border: 1px solid var(--champagne); }
.cm-label { font-weight: 500; }
.contact-methods.on-navy .cm-icon { background: transparent; color: var(--champagne); border-color: rgba(212, 193, 163, .6); }
.contact-methods.on-navy a:hover { border-color: var(--champagne); }
.uk-card:hover { box-shadow: none; border-color: var(--navy); }
.uk-card-link { color: var(--navy); text-decoration-color: var(--champagne); font-weight: 500; }
.uk-card-title { font-size: 1.4rem; }
.aside-card { border-radius: var(--radius-l); }
.aside-card h2 { font-size: 1.5rem; }
.aside-card dt { color: rgba(247, 243, 234, .66); font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; }
.aside-card dd { font-family: var(--serif); font-weight: 400; font-size: 1.2rem; color: var(--ivory); }
.reviews-score { border-radius: var(--radius-m); }
.reviews-score:hover { border-color: var(--navy); }
.visit .panel { background: var(--white); border: 1px solid var(--line); }
.uk-steps, .uk-steps li { border-color: var(--line); }
.uk-steps a::before { background: transparent; color: var(--walnut); border: 1px solid var(--champagne); font-family: var(--serif); font-weight: 400; font-size: 1rem; }
.uk-steps b { font-family: var(--serif); font-weight: 500; }
.uk-before-booking { background: var(--cream); border-left: 2px solid var(--champagne); border-radius: 0 var(--radius-m) var(--radius-m) 0; }
.photo-tips { background: var(--white); border: 1px solid var(--line); }
.pg-num { background: var(--navy); color: var(--champagne); font-family: var(--serif); font-weight: 400; font-stretch: normal; box-shadow: 0 0 0 3px rgba(247, 243, 234, .9); }
.photo-guide figcaption b { font-family: var(--serif); font-weight: 500; font-size: 1.05rem; }
.team-photo { background: none; padding-top: 0; max-width: 760px; margin-inline: auto; } /* transparent PNG cut-out, centred and narrower than the text width */
/* ALTCHA spam check in the contact forms: a bordered "I'm not a robot" box with its status beside it */
.altcha-box { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 18px 0 6px; padding: 12px 16px; border: 1px solid var(--line); background: var(--white); }
.altcha-label { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 500; cursor: pointer; }
.altcha-check { width: 20px; height: 20px; margin: 0; accent-color: var(--navy); flex: none; }
.altcha-state { color: var(--muted); font-size: var(--step--1); }
.altcha-box.is-busy .altcha-check { opacity: .45; }
.altcha-box.is-done .altcha-state { color: var(--navy); font-weight: 600; }

/* women's section: heading and intro beside a half-width photo, like the men and women section above it */
.women-intro { align-items: center; margin-bottom: clamp(32px, 5vw, 56px); }
.women-intro p { font-size: 1.0625rem; line-height: 1.7; }

/* route map (London page) */
.route-map { border-color: var(--line); }
.route-map .sea { fill: #EDE6D8; }
.route-map .land { fill: #FBF8F2; stroke: #D9CCB7; }
.route-map .country { fill: var(--walnut); stroke: var(--navy); }
.route-map .city { fill: var(--champagne); stroke: var(--navy); }
.route-map .city-label { font-family: var(--font); font-weight: 600; stroke: #FBF8F2; }
.route-map .map-badge text { font-family: var(--font); }

/* ---------- Videos ---------- */

.video-frame, .video-facade { background: var(--navy); }
.video-facade .play {
  background: var(--champagne) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='%230B2A4A'/%3E%3C/svg%3E") 55% center / 28px no-repeat;
  box-shadow: 0 4px 16px rgba(11, 42, 74, .3);
}
.video-item figcaption { font-family: var(--serif); font-weight: 500; font-size: 1.1rem; }
.video-item figcaption small { font-family: var(--font); }

/* ---------- CTA band: full-bleed navy with a thin champagne curve ---------- */

.cta-band { margin: 0; border-radius: 0; padding: clamp(64px, 9vw, 128px) 0; }
.cta-band h2 { color: var(--ivory); font-size: clamp(2.1rem, 1.4rem + 2.8vw, 3.75rem); }
.cta-band p { color: rgba(247, 243, 234, .86); }
.cta-band > svg path { stroke: var(--champagne); stroke-width: 1.5; opacity: .7; }
@media (max-width: 760px) { .cta-band { margin: 0; } }

/* ---------- Social strip and footer (navy) ---------- */

.social-icons a { background: transparent; border: 1px solid var(--champagne); color: var(--navy); }
.social-icons a:hover { background: var(--navy); border-color: var(--navy); color: var(--ivory); }
.social-strip h2 { font-family: var(--serif); font-weight: 500; font-size: 1.25rem; }
.social a { border-width: 1px; border-color: var(--champagne); }

.site-footer { background: var(--navy); color: rgba(247, 243, 234, .72); padding: 80px 0 36px; margin-top: clamp(56px, 8vw, 96px); }
main + .site-footer, .cta-band + .site-footer { margin-top: 0; }
.footer-grid { border-bottom-color: rgba(212, 193, 163, .25); }
.footer-grid h3 { font-family: var(--font); color: var(--champagne); font-size: .75rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
.footer-grid a { color: rgba(247, 243, 234, .82); }
.footer-grid a:hover { color: var(--champagne); }
.footer-grid li { color: rgba(247, 243, 234, .72); }
.footer-grid .brand img { filter: brightness(0) invert(1); opacity: .95; }
.footer-grid p { color: rgba(247, 243, 234, .72); }
.footer-base { color: rgba(247, 243, 234, .6); }

/* ---------- Misc ---------- */

.figure-round, .article-img { border-radius: var(--radius-m); }
.muted, .source-note, .updated { color: var(--muted); }
.price-factors .g-card h3 { font-size: 1.3rem; }

/* =====================================================================================
   REFERENCE REFINEMENT — follows the brand board's "Website hero concept",
   "Buttons & UI elements", "Before & after style" and footer strip as closely as the
   existing content allows. Presentation only: no text or media changes.
   ===================================================================================== */

/* ---------- Header: navy bar, white logo, small navigation, ivory pill CTA ---------- */

.site-header { background: var(--navy); border-bottom: 1px solid rgba(212, 193, 163, .18); }
/* the champagne logo (Media/himg_logo_nagy_2.png) is shown as supplied: no colour filter */
.site-header .brand img, .site-header.over .brand img, .footer-grid .brand img { filter: none; opacity: 1; }
.site-header .brand img { width: 136px; }
.site-nav ul a { color: rgba(247, 243, 234, .88); font-size: .875rem; letter-spacing: .03em; }
.site-nav ul a:hover { color: var(--ivory); border-bottom-color: var(--champagne); }
.site-nav ul a[aria-current="page"] { color: var(--ivory); border-bottom-color: var(--champagne); }
.site-header .site-nav .btn-primary,
.site-header.over .site-nav .btn-primary { background: var(--ivory); border-color: var(--ivory); color: var(--navy); min-height: 42px; padding: 0 22px; font-size: .875rem; }
.site-header .site-nav .btn-primary:hover { background: var(--champagne); border-color: var(--champagne); color: var(--navy); }
.nav-toggle { background: transparent; border-color: rgba(212, 193, 163, .55); }
.nav-toggle .bars, .nav-toggle .bars::before, .nav-toggle .bars::after { background: var(--ivory); }
.nav-toggle[aria-expanded="true"] .bars { background: transparent; }
.site-header.over .nav-toggle { background: rgba(11, 42, 74, .35); border-color: rgba(212, 193, 163, .55); }
.site-header :focus-visible { outline-color: var(--champagne); }
@media (max-width: 1080px) {
  .site-nav { background: var(--navy); border-bottom: 1px solid rgba(212, 193, 163, .25); box-shadow: none; }
  .site-nav ul a, .site-header.over .site-nav ul a { color: var(--ivory); border-bottom-color: rgba(247, 243, 234, .14); font-size: 1rem; }
  .site-header.over .site-nav .btn-primary { background: var(--ivory); border-color: var(--ivory); color: var(--navy); }
}

/* ---------- Home hero: text centred on a solid navy left side, video on the right ---------- */

.hero { justify-content: center; }
.hero-media::after {
  background:
    linear-gradient(180deg, rgba(11,42,74,.9) 0%, rgba(11,42,74,.55) 12%, rgba(11,42,74,0) 26%), /* keeps the champagne logo legible over the video */
    linear-gradient(90deg, rgba(11,42,74,1) 0%, rgba(11,42,74,.97) 34%, rgba(11,42,74,.78) 48%, rgba(11,42,74,.25) 68%, rgba(11,42,74,0) 84%);
}
.hero-body { padding-top: 150px; padding-bottom: clamp(56px, 8vw, 110px); }
/* secondary hero action as in "Watch Our Story": round outlined icon, then the label */
.hero .btn-ghost { background: transparent; border-color: transparent; padding-left: 0; gap: 14px; color: var(--ivory); }
.hero .btn-ghost::before {
  content: ""; flex: none; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(247, 243, 234, .75);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6' fill='none' stroke='%23F7F3EA' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
  transition: background-color .25s ease, border-color .25s ease;
}
.hero .btn-ghost:hover { background: transparent; color: var(--champagne); border-color: transparent; }
.hero .btn-ghost:hover::before { border-color: var(--champagne); background-color: rgba(212, 193, 163, .14); }
@media (max-width: 760px) {
  .hero { justify-content: flex-end; }
  .hero-media::after {
    background:
      linear-gradient(180deg, rgba(11,42,74,.6) 0%, rgba(11,42,74,0) 30%),
      linear-gradient(0deg, rgba(11,42,74,1) 0%, rgba(11,42,74,.88) 48%, rgba(11,42,74,.3) 74%, rgba(11,42,74,0) 92%);
  }
  .hero .hero-actions .btn-ghost { width: auto; justify-content: flex-start; }
  .hero-media::after {
    background:
      linear-gradient(180deg, rgba(11,42,74,.97) 0%, rgba(11,42,74,.85) 14%, rgba(11,42,74,0) 32%),
      linear-gradient(0deg, rgba(11,42,74,1) 0%, rgba(11,42,74,.88) 48%, rgba(11,42,74,.3) 74%, rgba(11,42,74,0) 92%);
  }
}
@media (prefers-reduced-motion: reduce) { .hero .btn-ghost::before { transition: none; } }

/* ---------- Buttons: primary navy pill with an arrow (as in "Book a Consultation →") ---------- */

.btn-primary::after {
  content: ""; flex: none; width: 14px; height: 10px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M0 5h12.5M8.5 1l4 4-4 4' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M0 5h12.5M8.5 1l4 4-4 4' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* the champagne and ivory pills on navy have no arrow, as in the hero concept */
.site-header .btn-primary::after, .hero .btn-primary::after, .page-hero .btn-primary::after { content: none; }

/* ---------- Square media and panels ---------- */

.compare, .doc-card img, .doctor-row img, .figure-round, .article-img, .method .media img, .photo-card, .gallery figure,
.pg-img, .city-gallery img, .uk-card, .video-frame, .table-wrap, .route-map, .map-box, .team-photo { border-radius: 0; }

/* ---------- Before & after, as on the board: plain uppercase labels and a light round handle ---------- */

.compare .divider { width: 1.5px; margin-left: -.75px; background: rgba(255, 255, 255, .95); }
.compare .divider::after {
  width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 1px solid rgba(11, 42, 74, .18); box-shadow: 0 2px 10px rgba(11, 42, 74, .18);
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 7.5l-4.5 4.5 4.5 4.5M14.5 7.5l4.5 4.5-4.5 4.5' fill='none' stroke='%230B2A4A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.compare .tag, .compare .tag.a {
  bottom: 12px; padding: 0; background: none; color: var(--white);
  font-size: .6875rem; font-weight: 600; letter-spacing: .16em; text-shadow: 0 1px 6px rgba(11, 42, 74, .85), 0 0 2px rgba(11, 42, 74, .6);
}
.compare .tag.b { left: 14px; }
.compare .tag.a { right: 14px; }

/* ---------- Thin navy line icons ---------- */

.trust-icon, .journey-icon, .pkg-icon { stroke: var(--navy); stroke-width: 1.2; }
.cm-icon { color: var(--navy); }

/* ---------- "Why" and price-factor columns: divided by fine lines instead of boxed cards ---------- */

.why-grid { gap: 32px 0; }
.why-grid .g-card { background: transparent; border: 0; border-left: 1px solid var(--line); padding: 4px 28px; }
.why-grid .g-card:nth-child(4n+1) { border-left: 0; padding-left: 0; }
@media (max-width: 1000px) {
  .why-grid .g-card:nth-child(4n+1) { border-left: 1px solid var(--line); padding-left: 28px; }
  .why-grid .g-card:nth-child(2n+1) { border-left: 0; padding-left: 0; }
}
@media (max-width: 560px) {
  .why-grid { gap: 0; }
  .why-grid .g-card, .why-grid .g-card:nth-child(2n+1), .why-grid .g-card:nth-child(4n+1) { border-left: 0; padding: 20px 0; border-top: 1px solid var(--line); }
}

/* ---------- Trust card: champagne-gold stars ---------- */

.rs-stars { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23C2A272' d='M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.3l-5.9 3.3 1.3-6.6-4.9-4.6 6.6-.8z'/%3E%3C/svg%3E"); }
.reviews-score { background: var(--white); }

/* ---------- Italic serif accents (as "Confidence Looks Good On You") ---------- */

.team-note, .pull-quote p { font-family: var(--serif); font-style: italic; font-weight: 400; }

/* ---------- Footer strip: champagne hairline, uppercase tracked base line ---------- */

.site-footer { border-top: 1px solid rgba(212, 193, 163, .22); }
.footer-base { font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; gap: 12px 32px; }
.footer-base > span:last-child { letter-spacing: .08em; }

/* ---------- Home hero: video on the right half, a narrow navy fade on its left edge ----------
   On desktop the video fills exactly the right half of the screen, from the middle to the right edge, at its
   own 16:9 shape (nothing cropped); navy fades over only its left ~10% so about 90% of the picture stays clear.
   Text sits on solid navy in the left half, aligned with the page content.
   Tablets and phones: the full-width video on top, fading into navy at its bottom edge, then the text.
   The header is an ordinary navy bar instead of floating over the video. */

.site-header.over { position: relative; inset: auto; background: var(--navy); border-bottom: 1px solid rgba(212, 193, 163, .18); }
.hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 0;
  min-height: 0; padding: 0;
}
.hero-media { position: relative; inset: auto; grid-column: 2; grid-row: 1; align-self: center; width: 100%; height: auto; aspect-ratio: 16 / 9; overflow: hidden; background: #08203A; }
.hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(11,42,74,1) 0%, rgba(11,42,74,.8) 3%, rgba(11,42,74,.32) 7%, rgba(11,42,74,0) 11%);
}
.video-toggle { position: relative; inset: auto; grid-column: 2; grid-row: 1; align-self: start; justify-self: end; margin: 18px 18px 0 0; }
.hero-body {
  grid-column: 1; grid-row: 1; max-width: none; margin: 0;
  padding: 24px clamp(24px, 3vw, 40px) 24px max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
}
.hero-title { font-size: clamp(2rem, 1.2rem + 1.9vw, 2.9rem); line-height: 1.1; max-width: none; margin-bottom: 18px; }
.hero-lede { font-size: 1.0625rem; margin-bottom: 26px; }
.hero .hero-actions .btn-ghost { padding-right: 6px; }
.google-badge { margin-bottom: 18px; }
/* tablets, small laptops and phones: full-width video first, then the text */
@media (max-width: 1199px) {
  .hero { grid-template-columns: minmax(0, 1fr); padding: 0 0 48px; }
  .hero-media, .video-toggle { grid-row: 1; grid-column: 1; }
  .hero-media::after { background: linear-gradient(0deg, rgba(11,42,74,1) 0%, rgba(11,42,74,.7) 4%, rgba(11,42,74,0) 10%); }
  .video-toggle { align-self: start; margin: 12px 12px 0 0; }
  .hero-body { grid-row: 2; grid-column: 1; padding: 8px var(--gutter) 0; }
}
@media (max-width: 760px) {
  .hero { margin: 0; min-height: 0; justify-content: initial; }
  .hero-media::after { background: linear-gradient(0deg, rgba(11,42,74,1) 0%, rgba(11,42,74,.7) 4%, rgba(11,42,74,0) 10%); }
  .video-toggle { top: auto; right: auto; bottom: auto; }
  .hero-title { font-size: clamp(1.75rem, 1.3rem + 2.4vw, 2.25rem); }
  .hero-lede { font-size: 1rem; }
}

/* =====================================================================================
   VISUAL QA PASS — layout corrections and the HIMG curve (Media/logo-3.png) as a brand accent
   ===================================================================================== */

/* ---------- Home "Follow us" row: part of the navy footer, not a thin ivory strip ----------
   It sat between the navy CTA band and the navy footer with 40px above and nothing below, so the icons
   touched the footer's top edge. It now opens the footer: same navy, same content edge (.wrap), a champagne
   hairline above (separating it from the CTA band) and below (separating it from the link columns). */
.social-strip { background: var(--navy); padding: clamp(36px, 4vw, 52px) 0 0; border-top: 1px solid rgba(212, 193, 163, .22); }
.social-strip .wrap { gap: 14px 24px; }
.social-strip .wrap::after { content: ""; flex-basis: 100%; height: 1px; margin-top: clamp(24px, 3vw, 36px); background: rgba(212, 193, 163, .22); }
.social-strip h2 { margin: 0; color: var(--champagne); font-family: var(--font); font-size: .75rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
.social-icons { gap: 10px; }
.social-icons a { width: 40px; height: 40px; background: transparent; border: 1px solid rgba(212, 193, 163, .55); color: var(--ivory); }
.social-icons a:hover { background: var(--champagne); border-color: var(--champagne); color: var(--navy); }
.social-strip :focus-visible { outline-color: var(--champagne); }
main:has(> .social-strip:last-child) + .site-footer { border-top: 0; padding-top: clamp(40px, 5vw, 56px); }

/* ---------- Spacing between sections ---------- */
/* two sections with the same tint in a row (e.g. recovery: timeline then FAQ) shared a doubled gap */
.section.tint + .section.tint, .section.cream + .section.cream { padding-top: 0; }
/* UK patients: the article's own bottom padding already separates it from "Get to know the clinic" */
.section + .section.uk-trust { padding-top: 0; }

/* ---------- Home doctors on tablets: five cards as 3 + 2 centred, instead of a ragged second row ---------- */
@media (min-width: 641px) and (max-width: 1100px) {
  .doc-cards { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .doc-card { grid-column: span 2; }
  .doc-card:nth-child(4):nth-last-child(2) { grid-column: 2 / span 2; }
}

/* ---------- Header links: centred on the same line as the logo and button (the 1px hover rule counts) ---------- */
.site-nav ul a { padding: 6px 0 5px; }

/* ---------- The HIMG curve (logo-3) as a restrained brand accent on navy ----------
   Light variants in assets/img/brand/ (logo-3-champagne.png, logo-3-ivory.png) recoloured from the original
   with its exact transparency; the original is kept unchanged as assets/img/brand/logo-3.png.
   Used in two places only: the closing CTA band and inner page heroes (removed from the footer). Decorative (CSS
   backgrounds, so screen readers ignore them), behind the content and never over body text. */
.cta-band > svg { display: none; } /* the hand-drawn curve is replaced by the brand's own curve */
.cta-band > .wrap { position: relative; z-index: 1; }
.cta-band::after {
  content: ""; position: absolute; top: 0; right: clamp(-200px, -8vw, -40px); height: 100%; aspect-ratio: 1 / 1;
  background: url("../img/brand/logo-3-champagne.png") center / contain no-repeat; opacity: .4; pointer-events: none;
}
/* home: the band also holds the contact cards, which the curve passes behind; keep it a faint watermark there */
.cta-band:has(.contact-methods)::after { opacity: .14; }
.page-hero { position: relative; overflow: hidden; }
.page-hero > .wrap { position: relative; z-index: 1; }
/* Subpage top band: one HIMG curve on the right, running the full height of the band from bottom to top
   (the curve is the middle 24–62% of the square image, so a square as tall as the band shows all of it).
   From 1600px it sits in the margin beyond the text; on narrower screens it passes faintly behind the right of
   the text, kept light enough that the ivory text stays at 7:1 contrast or better. */
.page-hero::after {
  content: ""; position: absolute; top: 0; right: 0; height: 100%; aspect-ratio: 1 / 1; transform: translateX(35%);
  background: url("../img/brand/logo-3-champagne.png") center / contain no-repeat; opacity: .42; pointer-events: none;
}
@media (max-width: 1599px) { .page-hero::after { opacity: .26; } }
@media (max-width: 760px) { .page-hero::after { opacity: .16; } }
/* phones: the CTA band text spans the full width, so its curve is left out there */
@media (max-width: 760px) {
  .cta-band::after { display: none; }
}

/* ---------- Home "Meet the doctors" (navy section): a tapered champagne sweep from the bottom to the top ----------
   A vector shape in the spirit of the HIMG curve (not the logo file): a full base at the bottom, curving up and
   narrowing to a fine point at the top right, across the right-hand third of the section and stretched to its full
   height (so its proportions stay close to the logo curve's). It is a quiet watermark: the content sits on a layer
   above it, so the doctor photos cover it where they overlap, and text over it keeps at least 6.3:1 contrast (WCAG AA). */
.section.navy { position: relative; overflow: hidden; }
.section.navy > .wrap { position: relative; z-index: 1; }
.section.navy::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: clamp(160px, 34vw, 620px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 1000' preserveAspectRatio='none'%3E%3Cpath d='M2 1000 L12 1000 C54 760 85 420 93 0 L92.4 0 C83 420 48 760 2 1000 Z' fill='%23D4C1A3'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  opacity: .22; pointer-events: none;
}
@media (max-width: 760px) { .section.navy::after { width: 60vw; opacity: .14; } }

/* ---------- Google reviews score (home and results): no white box, the logo, score and stars sit directly
   on the section background; the link and its hover/focus cue stay ---------- */
.reviews-score, .reviews-score:hover { background: transparent; border: 0; padding: 8px 0; }
.reviews-score:hover .rs-count, .reviews-score:focus-visible .rs-count { color: var(--navy); text-decoration-color: var(--navy); }

/* ---------- 360° clinic tour (contact page, assets/js/tour.js) ----------
   Same width and frame as the Google map below it, but taller (up to 800px, never more than 88% of the screen height) so more of each room shows. Starts as a still preview with a "Start" button; the viewer,
   step markers (labelled with the room they lead to) and the room list appear once started. */
/* short heading + description directly above the tour (after the visit / company panels) */
.tour-intro { margin-top: clamp(40px, 5vw, 64px); margin-bottom: clamp(16px, 2vw, 22px); }
.tour-intro h3 { margin: 0; font-size: clamp(1.6rem, 1.3rem + 1.1vw, 2.2rem); line-height: 1.15; }
.tour-intro p { margin: 8px 0 0; max-width: 60ch; color: var(--text); font-size: 1.0625rem; line-height: 1.6; }
.tour-intro + .tour-box, .map-intro + .map-box { margin-top: 0; }
/* the same heading style above the Google map ("Find Us in Budapest") */
.tour-box {
  position: relative; margin-top: 12px; height: clamp(480px, 64vw, min(800px, 88vh)); overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--navy); color: var(--ivory);
}
.tour-box:fullscreen { height: 100%; border: 0; }
.tour-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.tour-start-wrap {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: linear-gradient(180deg, rgba(11,42,74,.25), rgba(11,42,74,.6));
}
.tour-start-wrap .tour-kicker { margin: 0; }
.tour-start {
  display: inline-flex; align-items: center; gap: 12px; min-height: 50px; padding: 0 28px 0 12px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--ivory); color: var(--navy); font: 500 .9375rem/1 var(--font); letter-spacing: .02em;
}
.tour-start::before {
  content: ""; width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='%23D4C1A3'/%3E%3C/svg%3E") 55% center / 16px no-repeat;
}
.tour-start:hover { background: var(--champagne); }
.tour-start:disabled { cursor: progress; opacity: .85; }
.tour-start-wrap[hidden], .tour-preview[hidden] { display: none; } /* the layout rules above would otherwise keep them showing */
.tour-box :focus-visible { outline: 2px solid var(--champagne); outline-offset: 3px; }

.tour-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; transition: opacity .25s ease; }
.tour-canvas.is-dragging { cursor: grabbing; }
.tour-canvas:focus-visible { outline-offset: -4px; }
.tour-box.is-switching .tour-canvas { opacity: 0; }
.tour-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

/* kicker + room name, top left; full-screen button top right */
.tour-kicker { color: var(--champagne); font: 500 .6875rem/1.2 var(--font); letter-spacing: .2em; text-transform: uppercase; }
.tour-top {
  position: absolute; top: 0; left: 0; right: 0; display: flex; flex-direction: column; gap: 4px; padding: 16px 70px 28px 18px; pointer-events: none;
  background: linear-gradient(180deg, rgba(11,42,74,.75), rgba(11,42,74,0));
}
.tour-title { font-family: var(--serif); font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); line-height: 1.2; color: var(--ivory); }
.tour-fullscreen {
  position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(212, 193, 163, .7); background: rgba(11, 42, 74, .55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F7F3EA' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.tour-fullscreen:hover { background-color: rgba(11, 42, 74, .85); border-color: var(--champagne); }

/* step markers: champagne ring with an upward chevron and the name of the room it leads to */
.tour-hotspot {
  position: absolute; top: 0; left: 0; display: flex; flex-direction: column; align-items: center; gap: 6px;
  margin: -20px 0 0 -80px; width: 160px; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; color: var(--ivory);
}
.th-ring {
  width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--champagne); box-shadow: 0 2px 12px rgba(11, 42, 74, .45);
  background: rgba(11, 42, 74, .55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4C1A3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 14l5-5 5 5'/%3E%3C/svg%3E") center / 20px no-repeat;
  transition: transform .2s ease, background-color .2s ease;
}
.th-label {
  max-width: 160px; padding: 4px 10px; border-radius: 999px; background: rgba(11, 42, 74, .82);
  font: 500 .75rem/1.25 var(--font); letter-spacing: .02em; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tour-hotspot:hover .th-ring, .tour-hotspot:focus-visible .th-ring { transform: scale(1.1); background-color: var(--champagne); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B2A4A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 14l5-5 5 5'/%3E%3C/svg%3E"); }

/* hint and room list along the bottom */
.tour-hint {
  position: absolute; left: 0; right: 0; bottom: 52px; margin: 0; padding: 0 18px; text-align: center; pointer-events: none;
  color: rgba(247, 243, 234, .85); font-size: .75rem; text-shadow: 0 1px 6px rgba(11, 42, 74, .9);
}
.tour-rooms {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 10px 10px;
  background: linear-gradient(0deg, rgba(11,42,74,.88), rgba(11,42,74,0));
}
.tour-rooms ul { display: flex; gap: 6px; margin: 0; padding: 0 4px; list-style: none; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.tour-rooms ul::-webkit-scrollbar { display: none; }
.tour-rooms li { flex: none; scroll-snap-align: start; }
.tour-rooms button {
  min-height: 32px; padding: 0 14px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  border: 1px solid rgba(212, 193, 163, .55); background: rgba(11, 42, 74, .55); color: var(--ivory); font: 500 .8125rem/1 var(--font);
}
.tour-rooms button:hover { border-color: var(--champagne); }
.tour-rooms button[aria-current="true"] { background: var(--champagne); border-color: var(--champagne); color: var(--navy); }
@media (max-width: 600px) {
  .tour-hint { display: none; }
  .tour-hotspot { width: 132px; margin-left: -66px; }
  .th-label { max-width: 132px; font-size: .6875rem; }
}
@media (prefers-reduced-motion: reduce) { .tour-canvas, .th-ring { transition: none; } }

/* =====================================================================================
   SEO v2 — six-page structure (tools/v2_consolidate.py)
   ===================================================================================== */

/* ---------- "On this page" links under a long page's hero (treatments) ---------- */
.page-toc { border-bottom: 1px solid var(--line); background: var(--ivory); }
.page-toc ul { display: flex; flex-wrap: wrap; gap: 6px 26px; margin: 0; padding: 16px 0; list-style: none; }
.page-toc a { color: var(--navy); font-size: .875rem; letter-spacing: .02em; text-decoration: none; border-bottom: 1px solid transparent; }
.page-toc a:hover, .page-toc a:focus-visible { border-bottom-color: var(--champagne); }
@media (max-width: 600px) {
  .page-toc ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 22px; }
  .page-toc ul::-webkit-scrollbar { display: none; }
  .page-toc li { flex: none; }
}

/* ---------- Home "Why Choose HIMG Clinic?": six points in three columns ---------- */
.why-grid.why-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 0; }
.why-6 .g-card { display: flex; flex-direction: column; gap: 12px; }
.why-6 .g-card .text-link { margin-top: auto; align-self: flex-start; }
.why-6 .g-card:nth-child(4n+1) { border-left: 1px solid var(--line); padding-left: 28px; }
.why-6 .g-card:nth-child(3n+1) { border-left: 0; padding-left: 0; }
@media (max-width: 1000px) {
  .why-grid.why-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why-6 .g-card:nth-child(3n+1) { border-left: 1px solid var(--line); padding-left: 28px; }
  .why-6 .g-card:nth-child(2n+1) { border-left: 0; padding-left: 0; }
}
@media (max-width: 560px) {
  .why-grid.why-6 { grid-template-columns: 1fr; gap: 0; }
  .why-6 .g-card, .why-6 .g-card:nth-child(n) { border-left: 0; padding: 20px 0; border-top: 1px solid var(--line); }
}

/* ---------- Treatments: method detail and the women's section ---------- */
.method-more { margin-top: clamp(40px, 5vw, 64px); gap: clamp(32px, 5vw, 64px); }
.method-more h3 { font-size: clamp(1.3rem, 1.15rem + .5vw, 1.6rem); }
.text-cols { gap: clamp(28px, 4vw, 48px); margin-top: 32px; }
.text-cols h3 { font-size: clamp(1.2rem, 1.1rem + .4vw, 1.4rem); }
@media (max-width: 900px) { .grid-3.text-cols { grid-template-columns: minmax(0, 1fr); } }

/* ---------- UK patients: one flight map with a city switch ----------
   The three city routes share the same map; the selected route is drawn in full with its plane and flight time,
   the other two stay as faint dashed lines. Without JavaScript, London is shown. */
.flight-map { margin-top: 20px; }
.map-switch { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.map-switch button {
  min-height: 40px; padding: 0 18px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
  background: var(--white); color: var(--navy); font: 500 .875rem/1 var(--font); letter-spacing: .02em;
}
.map-switch button:hover { border-color: var(--champagne); }
.map-switch button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--ivory); }
@media (max-width: 420px) { .map-switch { gap: 6px; } .map-switch button { padding: 0 12px; font-size: .8125rem; } }
/* eleven UK airports sit close together: the others show as faint lines and dots, only the chosen one is named */
.route-map.multi .route-group:not(.is-active) .route { opacity: .2; stroke-width: 2; }
.route-map.multi .route-group:not(.is-active) .city { opacity: .55; }
.route-map.multi .route-group.is-active .city { r: 8; }
.route-map.multi .route-group:not(.is-active) .city-label,
.route-map.multi .route-group:not(.is-active) .plane,
.route-map.multi .route-group:not(.is-active) .map-badge { display: none; }
.city-travel { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); scroll-margin-top: 90px; }
.city-travel h3 { margin-top: 0; }
/* ---------- Navigation tiles: square "gallery frame" links to the six pages ----------
   One tile design and size everywhere: Home shows five (after the trust bar), the other pages five without the
   current page (before the closing band). Five in a row on desktop, three on tablets, two on phones; a short
   last row is centred. Each tile is a photo inside a thin champagne inner frame, with the page name centred at
   the bottom in small tracked capitals. Photos are decorative (alt=""); the label is the link text. */
.nav-tiles { --nt-gap: 16px; list-style: none; margin: clamp(28px, 3vw, 40px) 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--nt-gap); }
.nav-tiles > li { display: flex; flex: 0 0 calc((100% - 4 * var(--nt-gap)) / 5); min-width: 0; }
.nav-tile {
  --frame: 10px;
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; width: 100%;
  aspect-ratio: 1 / 1; padding: 0 calc(var(--frame) + 12px) calc(var(--frame) + 20px); overflow: hidden; isolation: isolate;
  background: var(--navy); color: var(--ivory); text-decoration: none; text-align: center;
}
.nav-tile img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
/* a soft navy fade at the bottom so the label reads on any photo */
.nav-tile::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(11,42,74,.08) 0%, rgba(11,42,74,0) 40%, rgba(11,42,74,.7) 100%);
  transition: background-color .4s ease;
}
/* the champagne inner frame */
.nav-tile::after {
  content: ""; position: absolute; inset: var(--frame); border: 1px solid rgba(212, 193, 163, .8); pointer-events: none;
  transition: inset .4s ease, border-color .4s ease;
}
.nt-body { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.nt-body::before { content: ""; width: 22px; height: 1px; background: var(--champagne); transition: width .4s ease; }
.nt-label { font-family: var(--font); font-size: .75rem; font-weight: 500; line-height: 1.4; letter-spacing: .22em; text-transform: uppercase; color: var(--ivory); }
.nt-text, .nt-arrow, .nt-icon { display: none; }
.nav-tile:hover, .nav-tile:focus-visible { color: var(--ivory); }
.nav-tile:hover img, .nav-tile:focus-visible img { transform: scale(1.06); }
.nav-tile:hover::before, .nav-tile:focus-visible::before { background-color: rgba(11, 42, 74, .18); }
.nav-tile:hover::after, .nav-tile:focus-visible::after { inset: calc(var(--frame) + 4px); border-color: var(--champagne); }
.nav-tile:hover .nt-body::before, .nav-tile:focus-visible .nt-body::before { width: 44px; }
.nav-tile:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
@media (max-width: 1000px) { .nav-tiles > li { flex-basis: calc((100% - 2 * var(--nt-gap)) / 3); } }
@media (max-width: 640px) {
  .nav-tiles { --nt-gap: 10px; }
  .nav-tiles > li { flex-basis: calc((100% - var(--nt-gap)) / 2); }
  .nav-tile { --frame: 8px; padding-bottom: calc(var(--frame) + 14px); }
  .nt-label { font-size: .6875rem; letter-spacing: .18em; }
}
/* the closing "Explore more" block on the other pages: same tiles, smaller heading */
.nav-tiles-section.compact { padding-block: clamp(48px, 6vw, 80px); border-top: 1px solid var(--line); }
.nt-heading { margin: 0; font-size: clamp(1.5rem, 1.25rem + .9vw, 2rem); }
.nav-tiles.compact { margin-top: 24px; }
@media (prefers-reduced-motion: reduce) {
  .nav-tile img, .nav-tile::before, .nav-tile::after, .nt-body::before { transition: none; }
  .nav-tile:hover img, .nav-tile:focus-visible img { transform: none; }
}
/* Results tile: Gergő before | after, drawn like the Results page slider at its midpoint (white line, round
   handle, BEFORE / AFTER tags). Purely visual; the whole tile is still one link. */
.nt-compare { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.nt-compare::before { content: ""; position: absolute; top: 0; bottom: calc(var(--frame) + 60px); left: 50%; width: 1.5px; margin-left: -.75px; background: rgba(255, 255, 255, .95); }
.nt-compare::after {
  content: ""; position: absolute; top: 46%; left: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px; border-radius: 50%;
  border: 1px solid rgba(11, 42, 74, .18); box-shadow: 0 2px 10px rgba(11, 42, 74, .18);
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 7.5l-4.5 4.5 4.5 4.5M14.5 7.5l4.5 4.5-4.5 4.5' fill='none' stroke='%230B2A4A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.nt-tag {
  position: absolute; top: calc(var(--frame) + 10px); color: var(--white); font-size: .5625rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  text-shadow: 0 1px 6px rgba(11, 42, 74, .85), 0 0 2px rgba(11, 42, 74, .6);
}
.nt-tag.b { left: calc(var(--frame) + 10px); }
.nt-tag.a { right: calc(var(--frame) + 10px); }
/* the label sits on a navy fade, so the slider line stops above it instead of crossing it */
.is-compare .nt-body { position: relative; z-index: 1; }
.is-compare::before { background: linear-gradient(180deg, rgba(11,42,74,0) 0%, rgba(11,42,74,0) 62%, rgba(11,42,74,.88) 100%); }
/* ---------- Home "Why Choose HIMG Clinic?": six navy cards ----------
   Navy cards with ivory text and champagne accents, three across (two on tablets, one on phones). Each card
   opens with the same 132px media area: a champagne line icon in a fine ring, or (S.H.E., patient results) an
   existing photo fading into the navy. Only the text link is clickable. */
.why-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: clamp(32px, 4vw, 48px); }
.why-card {
  position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  background: var(--navy); color: rgba(247, 243, 234, .84); border: 1px solid rgba(212, 193, 163, .28);
  box-shadow: 0 18px 40px -24px rgba(11, 42, 74, .55); transition: border-color .3s ease, transform .3s ease;
}
.why-card:hover { border-color: rgba(212, 193, 163, .7); transform: translateY(-3px); }
.wc-media { position: relative; height: 132px; flex: none; padding: 28px 28px 0; }
.wc-icon { display: grid; place-items: center; width: 60px; height: 60px; border: 1px solid rgba(212, 193, 163, .55); border-radius: 50%; }
.wc-icon svg { width: 30px; height: 30px; fill: none; stroke: var(--champagne); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.has-photo .wc-media { padding: 0; height: 140px; margin-bottom: -8px; }
.has-photo .wc-media img { width: 100%; height: 100%; object-fit: cover; }
.has-photo .wc-media { container-type: inline-size; } /* lets the photo position use cqw to keep the printed logo fully out of the strip */
.has-photo .wc-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,42,74,0) 45%, var(--navy) 100%); }
.why-card h3 { position: relative; margin: 0 28px 10px; color: var(--ivory); font-size: clamp(1.3rem, 1.15rem + .5vw, 1.6rem); line-height: 1.2; }
.why-card h3::before { content: ""; display: block; width: 28px; height: 1px; margin-bottom: 14px; background: var(--champagne); }
.why-card p { margin: 0 28px 20px; font-size: .9375rem; line-height: 1.6; }
.wc-link {
  display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; margin: auto 28px 28px;
  color: var(--champagne); font-size: .8125rem; font-weight: 500; letter-spacing: .08em; text-decoration: none;
  border-bottom: 1px solid rgba(212, 193, 163, .45); padding-bottom: 3px;
}
.wc-link::after { content: "\2192"; transition: transform .25s ease; }
.wc-link:hover, .wc-link:focus-visible { color: var(--ivory); border-bottom-color: var(--ivory); }
.wc-link:hover::after { transform: translateX(3px); }
.wc-link:focus-visible { outline: 2px solid var(--champagne); outline-offset: 4px; }
@media (max-width: 1000px) { .why-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .why-cards { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .wc-media { height: auto; padding: 22px 22px 18px; }
  .has-photo .wc-media { height: 150px; padding: 0; margin-bottom: -4px; }
  .why-card h3 { margin-inline: 22px; }
  .why-card p { margin-inline: 22px; }
  .wc-link { margin: auto 22px 22px; }
}
@media (prefers-reduced-motion: reduce) { .why-card, .wc-link::after { transition: none; } .why-card:hover { transform: none; } }
/* ---------- Home "What to Look for When Choosing a Hair Transplant Clinic": seven navy icon cards ----------
   Same card as "Why Choose HIMG Clinic?" (.why-card, icons only): the criterion, the question to ask any clinic
   and HIMG's own answer, each labelled in small champagne capitals. A lone last card is centred. */
.crit-card .cc-label { margin: 0 28px 4px; color: var(--champagne); font-size: .6875rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.why-card.crit-card p.cc-q { margin-bottom: 18px; color: var(--ivory); font-family: var(--serif); font-size: 1.0625rem; line-height: 1.45; }
@media (min-width: 1001px) { .crit-cards > .crit-card:last-child:nth-child(3n+1) { grid-column: 2; } }
@media (min-width: 601px) and (max-width: 1000px) {
  .crit-cards > .crit-card:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 10px); }
}
@media (max-width: 600px) { .crit-card .cc-label { margin-inline: 22px; } }
/* the criteria cards hold more text, so their icon area is a little shorter */
.crit-card .wc-media { height: 108px; padding-top: 24px; }
@media (max-width: 600px) { .crit-card .wc-media { height: auto; } }
.crit-cards + .source-note { margin-top: 28px; }

/* ---------- Home: tighter rhythm between sections (the site-wide --section spacing left a ~260px gap between two sections on the long home page) ---------- */
.home { --section: clamp(40px, 4.25vw, 64px); }
.home > .cta-band { padding-block: clamp(48px, 5vw, 76px); }

/* photo with a caption inside an article (UK patients: result photo after the follow-up text) */
.article-figure { margin: 28px 0 0; }
.article-figure .article-img { margin: 0; }
.article-figure figcaption { margin-top: 10px; font-size: var(--step--1); line-height: 1.5; color: var(--muted); }

/* ---------- Contextual links on the subpages (.ctx-link) ----------
   A compact navy card placed after a related section: a small framed photo (the same photo as that page's
   navigation tile), a champagne kicker, a serif title, one line of text and the circled arrow. The whole card
   is the link. Inside a two-column section it spans both columns. */
.ctx-link {
  position: relative; display: flex; align-items: center; gap: clamp(14px, 2vw, 22px); max-width: 760px;
  margin-top: clamp(32px, 4vw, 44px); padding: 14px clamp(16px, 2.4vw, 26px) 14px 14px;
  background: var(--navy); color: var(--ivory); text-decoration: none;
  border: 1px solid rgba(212, 193, 163, .3); box-shadow: 0 16px 34px -24px rgba(11, 42, 74, .6);
  transition: border-color .25s ease, transform .25s ease;
}
.grid-2 > .ctx-link { grid-column: 1 / -1; }
.ctx-thumb { position: relative; flex: none; width: 96px; height: 96px; overflow: hidden; background: #08203A; }
.ctx-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.ctx-thumb::after { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(212, 193, 163, .8); pointer-events: none; }
.ctx-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.ctx-kicker { color: var(--champagne); font-size: .6875rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.ctx-title { font-family: var(--serif); font-size: clamp(1.15rem, 1.05rem + .4vw, 1.35rem); line-height: 1.25; color: var(--ivory); }
.ctx-text { font-size: .875rem; line-height: 1.5; color: rgba(247, 243, 234, .82); }
.ctx-arrow {
  flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(212, 193, 163, .7);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6' fill='none' stroke='%23F7F3EA' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
  transition: background-color .25s ease, border-color .25s ease;
}
.ctx-link:hover, .ctx-link:focus-visible { color: var(--ivory); border-color: var(--champagne); transform: translateY(-2px); }
.ctx-link:hover .ctx-thumb img, .ctx-link:focus-visible .ctx-thumb img { transform: scale(1.06); }
.ctx-link:hover .ctx-arrow, .ctx-link:focus-visible .ctx-arrow {
  border-color: var(--champagne);
  background: var(--champagne) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6' fill='none' stroke='%230B2A4A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.ctx-link:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
@media (max-width: 560px) {
  .ctx-link { align-items: flex-start; padding: 12px; }
  .ctx-thumb { width: 72px; height: 72px; }
  .ctx-arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ctx-link, .ctx-thumb img, .ctx-arrow { transition: none; } .ctx-link:hover { transform: none; } }/* contextual cards: centred within their section (on phones they are full width anyway) */
.ctx-link { margin-inline: auto; }
.grid-2 > .ctx-link { justify-self: center; width: 100%; }
/* contextual cards span the full text width of their section (left edge to right edge of the content) */
.ctx-link { max-width: none; width: 100%; }
/* contextual cards: photo stays on the left, the text is centred (the right margin balances the photo against the arrow, so the text sits in the middle of the card) */
.ctx-body { align-items: center; text-align: center; }
@media (min-width: 561px) { .ctx-body { margin-right: 58px; } }

/* Prices: pricing disclaimer note above the price tables */
.pricing-disclaimer h3 { margin: 0 0 8px; font-size: 1.15rem; }
.pricing-disclaimer p + p { margin-top: 8px; }

/* Results: a single featured video, wider than one column of the two-column video grid */
.video-grid.video-featured { grid-template-columns: minmax(0, 1fr); max-width: 880px; }
/* the 'Explore More Videos on YouTube' label wraps instead of overflowing on the narrowest phones */
@media (max-width: 400px) { #videos .btn { white-space: normal; max-width: 100%; text-align: center; } }
/* Results: the featured video, its caption and the YouTube button are centred */
.video-grid.video-featured { margin-inline: auto; }
.video-featured figcaption { text-align: center; }
.video-featured + .mt-l { text-align: center; max-width: none; }

/* UK Patients: Gergo's two before/after sliders under 'Follow-up once you are home', styled as on the Results page */
.uk-results .case-meta h4 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: var(--step-2); line-height: 1.15; }
.uk-results .case-meta h4 { font-size: var(--step-1); }
.uk-results-caption { margin-top: 24px; text-align: center; }
.uk-results-caption p { margin: 0 auto; max-width: none; }
.uk-results-caption .urc-name { font-family: var(--serif); font-size: var(--step-2); line-height: 1.2; color: var(--navy); }
.uk-results-caption .urc-name span { display: block; margin-top: 4px; font-family: var(--font); font-size: var(--step-0); color: var(--walnut); font-weight: 500; letter-spacing: .02em; }
.uk-results-caption .urc-name + p { margin-top: 6px; color: var(--muted); font-size: var(--step--1); }
/* the caption sits close under Gergo's two photos */
.uk-results .compare { margin-bottom: 0; }
.uk-results-caption { margin-top: 14px; }
/* Home hero: "500+ reviews" under the Google 4.9 badge */
.google-badge.has-count { margin-bottom: 0; }
.gb-reviews { margin: 6px 0 20px 4px; color: rgba(247, 243, 234, .78); font-size: .75rem; letter-spacing: .04em; }
/* ---------- UK Patients "Why choose HIMG Clinic over other…?" comparison ----------
   White table like the Turkey one; the HIMG column is the focal point: navy with ivory text and champagne links.
   On phones it scrolls sideways like the Turkey table. */
.cmp-table tbody th { font-weight: 600; width: 22%; }
.cmp-table td { width: 33%; color: var(--muted); }
.cmp-table td.cmp-himg { width: 45%; background: var(--navy); color: rgba(247, 243, 234, .9); border-bottom-color: rgba(212, 193, 163, .22); }
.cmp-table thead th.cmp-himg { background: var(--navy); color: var(--champagne); }
.cmp-table td.cmp-himg a { color: var(--champagne); text-decoration: underline; text-decoration-color: rgba(212, 193, 163, .55); text-underline-offset: 4px; white-space: nowrap; }
.cmp-table td.cmp-himg a:hover { color: var(--ivory); }
.cmp-close { margin-top: 24px; }
.cmp-cta { margin-top: 24px; padding: clamp(22px, 3vw, 30px); background: var(--navy); color: rgba(247, 243, 234, .88); border-top: 2px solid var(--champagne); }
.cmp-cta h3 { margin: 0 0 8px; color: var(--ivory); }
.cmp-cta p { margin: 0 0 18px; }
@media (max-width: 600px) { .cmp-cta .btn { width: 100%; justify-content: center; white-space: normal; text-align: center; padding-inline: 18px; } }
/* the doctors photo at the top of the box, fading into the navy (as on the Home "Specialist doctors" card) */
.cmp-cta { padding: 0; overflow: hidden; }
.cmp-cta-media { position: relative; height: clamp(150px, 22vw, 210px); }
.cmp-cta-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.cmp-cta-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,42,74,0) 45%, var(--navy) 100%); }
.cmp-cta-body { padding: 4px clamp(22px, 3vw, 30px) clamp(22px, 3vw, 30px); }
/* Thank You page (thank-you/): the next steps in a readable column, then the way back to the site */
.thank-you-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 32px; }
/* the next steps centred in a wide column, the doctors cut-out underneath */
.thank-you-body { max-width: 980px; margin-inline: auto; text-align: center; }
.thank-you-body p { max-width: none; }
.thank-you-body .checks { width: fit-content; max-width: 100%; margin-inline: auto; text-align: left; }
.thank-you-actions { justify-content: center; }
.thank-you-team { display: block; width: 100%; max-width: 760px; height: auto; margin: clamp(32px, 5vw, 56px) auto 0; } /* transparent cut-out of the five doctors */
/* Thank You heading: a champagne icon in a fine ring, beside the heading (two lines tall). On load the envelope flies off ("sent")
   and a checkmark draws in its place; with reduced motion only the checkmark is shown. */
.ty-hero { max-width: 980px; margin-inline: auto; } /* the heading block as wide as the "What happens next?" column below, text left-aligned */
.thank-you-hero h1, .thank-you-hero p { max-width: none; }
/* the heading on one line at every width, sized so the icon and text span the same width as the sentence below
   (icon + text measure about 15.15 times the font size; the column is 980px or the screen minus its margins) */
.thank-you-hero h1 { font-size: calc(min(980px, 100vw - 2 * var(--gutter)) / 15.4); white-space: nowrap; }
.thank-you-title { display: flex; align-items: center; gap: .3em; }
.ty-check { flex: none; width: 1.8em; height: 1.8em; overflow: visible; fill: none; stroke: var(--champagne); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ty-mail { transform-box: fill-box; transform-origin: center; animation: ty-send 1.5s cubic-bezier(.5, 0, .75, .4) .5s both; }
.ty-done { stroke-width: 2.6; stroke-dasharray: 32; stroke-dashoffset: 32; animation: ty-draw .6s ease-out 1.75s forwards; }
@keyframes ty-send {
  0% { opacity: 0; transform: scale(.7); }
  25% { opacity: 1; transform: scale(1); }
  45% { opacity: 1; transform: translate(-2px, 1px) rotate(4deg); }
  100% { opacity: 0; transform: translate(26px, -26px) rotate(-14deg) scale(.45); }
}
@keyframes ty-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .ty-mail { display: none; }
  .ty-done { animation: none; stroke-dashoffset: 0; }
}
/* the doctors stand on the footer: no space below the picture */
.thank-you-next { padding-bottom: 0; }
.thank-you-next .thank-you-team { margin-bottom: 0; }
/* Thank You heading area centred, without the short decorative lines (beside the label and under the heading) */
.thank-you-hero .ty-hero { text-align: center; }
.thank-you-hero .eyebrow { justify-content: center; }
.thank-you-hero .eyebrow::before, .thank-you-hero h1::after { display: none; }
.thank-you-hero .thank-you-title { justify-content: center; }

/* Cookie consent banner (built by main.js), fixed to the bottom of the screen. Accept and Reject look the same on purpose. */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  max-height: 85vh; overflow-y: auto;
  padding: 22px 0 calc(22px + env(safe-area-inset-bottom, 0px));
  background: var(--navy); color: rgba(247, 243, 234, .85);
  border-top: 1px solid rgba(212, 193, 163, .35); box-shadow: 0 -12px 32px rgba(11, 42, 74, .2);
}
.cookie-inner { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 40px; }
.cookie-text { flex: 1 1 480px; min-width: 0; }
.cookie-banner h2 { margin: 0 0 6px; font-size: var(--step-1); color: var(--white); }
.cookie-banner p { margin: 0; max-width: 78ch; font-size: var(--step--1); }
.cookie-banner a { color: var(--champagne); }
.cookie-options { display: grid; gap: 10px; margin-top: 16px; }
.cookie-options[hidden] { display: none; }
.cookie-options label { display: flex; align-items: flex-start; gap: 10px; font-size: var(--step--1); cursor: pointer; }
.cookie-options input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--champagne); }
.cookie-options span { color: rgba(247, 243, 234, .85); font-weight: 400; line-height: 1.5; }
.cookie-options b { display: block; color: var(--white); font-weight: 600; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-banner :focus-visible { outline: 2px solid var(--champagne); outline-offset: 2px; }
.cookie-banner h2:focus { outline: none; } /* focused by script when reopened from the footer, not a control */
@media (max-width: 600px) { .cookie-actions, .cookie-actions .btn { width: 100%; } }

/* Footer: privacy notice link and the button that reopens the cookie settings */
.footer-legal { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.footer-legal a, .cookie-settings {
  padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit;
  color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.footer-legal a:hover, .cookie-settings:hover { color: var(--champagne); }

/* Google Maps placeholder until the visitor chooses to show the map */
.embed-consent { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; height: 100%; padding: 24px; text-align: center; }
.embed-consent p { max-width: 46ch; margin: 0; color: var(--text); }
.embed-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.embed-note { margin-top: 12px; font-size: var(--step--1); color: var(--muted); }