/* ==========================================================================
   CUBE Dental Clinic — Theme: MODERN
   Same brand palette, entirely new design language.
   ========================================================================== */

:root {
  --teal:      #02b8bf;
  --teal-600:  #039aa0;
  --teal-700:  #017b7f;
  --teal-100:  #d9f5f6;
  --teal-050:  #f1fbfc;
  --blue:      #116089;
  --navy:      #072f45;
  --navy-800:  #0b3d58;
  --navy-900:  #04222f;
  --green:     #07bc83;

  --ink:       #10202b;
  --body:      #4d5f6b;
  --muted:     #86949e;
  --line:      #e2eaee;
  --line-dark: rgba(255, 255, 255, .14);
  --paper:     #ffffff;
  --tint:      #f4f9fa;

  --font-head: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Open Sans', 'Segoe UI', system-ui, sans-serif;

  --fs-micro: .7rem;
  --fs-sm:    .8125rem;
  --fs-base:  1.0625rem;
  --fs-lead:  clamp(1.05rem, .5vw + .95rem, 1.28rem);
  --fs-h3:    clamp(1.1rem, .6vw + .95rem, 1.35rem);
  --fs-h2:    clamp(1.85rem, 2.6vw + .8rem, 3.1rem);
  --fs-h1:    clamp(2.4rem, 5vw + .5rem, 4.6rem);

  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 2.75rem; --sp-8: 3.5rem;
  --sp-9: 4.5rem; --sp-10: 6rem; --sp-11: 8rem;

  --wrap: 1240px;
  --r: 4px;
  --r-lg: 8px;

  --shadow-sm: 0 1px 3px rgba(7, 47, 69, .07);
  --shadow:    0 10px 40px rgba(7, 47, 69, .10);
  --shadow-lg: 0 30px 80px rgba(7, 47, 69, .18);

  --hex: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
  --ease: cubic-bezier(.2, .7, .3, 1);
  --header-h: 104px;

  /* entrance motion — see motionBoot() in src/lib.js */
  --m-dur: .95s;
  --m-dur-slow: 1.25s;
  --m-ease: cubic-bezier(.2, .7, .3, 1);
  --m-rise: 52px;
  --m-slide: 60px;
  --m-scale: .92;
}

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  /* Always reserve the scrollbar's width, so hiding the page's overflow for a
     dialog cannot widen the layout and shunt the sticky header sideways. */
  scrollbar-gutter: stable;
}
body {
  margin: 0; font-family: var(--font-body); font-size: var(--fs-base); line-height: 1.75;
  color: var(--body); background: var(--paper); -webkit-font-smoothing: antialiased;
  /* `clip`, not `hidden`: hidden makes the viewport a scroll container, which
     is what makes sticky headers stutter in Chrome. */
  overflow-x: clip;
}
img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { font-family: var(--font-head); color: var(--navy); margin: 0 0 var(--sp-4); line-height: 1.1; font-weight: 800; letter-spacing: -.025em; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -.01em; }
p { margin: 0 0 var(--sp-4); }
ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.3em; }
li { margin-bottom: .45em; }
a { color: var(--teal-600); text-decoration: none; transition: color .18s var(--ease); }
a:hover { color: var(--navy); }
button { font: inherit; color: inherit; }
em { font-style: normal; color: var(--teal); }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 300; background: var(--navy); color: #fff; padding: .9rem 1.3rem; }
.skip:focus { left: 0; color: #fff; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
/* Narrow screens get a wider gutter, not a thinner one: 14px of margin reads
   as text glued to the bezel, and there is no second column to protect. */
@media (max-width: 540px) { .wrap { width: min(100% - 3rem, var(--wrap)); } }
.center { text-align: center; }

/* --- Eyebrow ------------------------------------------------------------ */
.eyebrow {
  display: flex; align-items: center; gap: .7em; margin: 0 0 var(--sp-4);
  font-family: var(--font-head); font-weight: 700; font-size: var(--fs-micro);
  letter-spacing: .24em; text-transform: uppercase; color: var(--teal-600);
}
.eyebrow span { display: block; width: 26px; height: 2px; background: currentColor; flex: none; }
.eyebrow--light { color: var(--teal); }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  --bg: var(--teal); --fg: #fff; --bd: var(--teal);
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  padding: .95em 1.7em; border: 1px solid var(--bd); background: var(--bg); color: var(--fg);
  font-family: var(--font-head); font-weight: 700; font-size: .78rem;
  letter-spacing: .1em; text-transform: uppercase; cursor: pointer; white-space: nowrap;
  border-radius: var(--r); position: relative; overflow: hidden;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.btn svg { width: 1.2em; height: 1.2em; flex: none; }
/* A long label must never grow wider than the column it sits in — on a phone
   "More interviews — watch on YouTube" is wider than the screen. */
.btn { max-width: 100%; }
@media (max-width: 640px) { .btn { white-space: normal; } }
.btn:hover { color: var(--fg); transform: translateY(-2px); box-shadow: var(--shadow); }
.btn:active { transform: none; }
.btn--lg { padding: 1.05em 2.1em; font-size: .82rem; }
.btn--block { display: flex; width: 100%; }
.btn--accent { --bg: var(--teal); --bd: var(--teal); }
.btn--accent:hover { --bg: var(--teal-700); --bd: var(--teal-700); }
.btn--line { --bg: transparent; --fg: var(--navy); --bd: var(--line); }
.btn--line:hover { --bd: var(--navy); --bg: var(--navy); --fg: #fff; }
.btn--ghost-light { --bg: transparent; --fg: #fff; --bd: rgba(255,255,255,.4); }
.btn--ghost-light:hover { --bg: #fff; --fg: var(--navy); --bd: #fff; }
.btn--white { --bg: #fff; --fg: var(--navy); --bd: #fff; }
.btn--white:hover { --bg: var(--navy); --fg: #fff; --bd: var(--navy); }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: var(--sp-5); }
.btn-row--center { justify-content: center; }

/* --- Header ------------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 100; background: #fff; transition: box-shadow .25s var(--ease); }
.site-header.is-stuck { box-shadow: 0 1px 0 var(--line), 0 8px 30px rgba(7,47,69,.07); }

.ribbon { background: var(--navy); color: rgba(255,255,255,.78); font-size: var(--fs-sm); }
/* Fixed height, never wrapping: a ribbon that grows to two lines at some
   widths makes the whole sticky header change size as the viewport moves. */
.ribbon__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); height: 40px; flex-wrap: nowrap; min-width: 0; }
.ribbon__msg { display: flex; align-items: center; gap: .6em; margin: 0; font-weight: 600; color: rgba(255,255,255,.9); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 0 rgba(2,184,191,.6); animation: pulse 2.4s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(2,184,191,0); } 100% { box-shadow: 0 0 0 0 rgba(2,184,191,0); } }
.ribbon__links { display: flex; align-items: center; gap: var(--sp-5); flex: none; white-space: nowrap; }
.ribbon__links a, .ribbon__hours { display: inline-flex; align-items: center; gap: .45em; color: inherit; }
.ribbon__links a:hover { color: var(--teal); }

/* Language switcher.
   Two-letter codes rather than flag emoji: a flag names a country, not a
   language, and there is no flag that means "German" to an Austrian or
   "French" to a Belgian. The current language stays visible and unlinked so
   the control reads as a set of four rather than three alternatives to
   something unnamed. */
.lang { flex: none; }
.lang ul { display: flex; align-items: center; gap: .1rem; margin: 0; padding: 0; list-style: none; }
.lang__item {
  display: block; padding: .15rem .4rem; border-radius: 4px;
  font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  color: inherit; opacity: .68;
}
.lang__item:hover { opacity: 1; }
.lang__item.is-on { opacity: 1; background: rgba(255,255,255,.14); }
.ribbon__links svg { width: 14px; height: 14px; opacity: .75; }

.navbar { background: #fff; border-bottom: 1px solid var(--line); }
.navbar__inner { display: flex; align-items: center; gap: var(--sp-5); min-height: 64px; }
/* flex: none, or the nav squeezes the brand box when the row runs tight and
   `max-width: 100%` drags the logo out of shape with it. */
.brand { flex: none; display: block; }
.brand img { height: 44px; width: auto; max-width: none; }
.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav__list li { margin: 0; }
/* Sized to fit: brand + nav + actions come to ~1195px, and --wrap caps the
   row at 1240px, so these are the values the bar actually has room for at
   every width. Anything larger and the flex row squeezes whatever will give
   — which used to be the logo. */
.nav__link {
  display: inline-flex; align-items: center; gap: .35em; padding: .75em .6em;
  border: 0; background: none; cursor: pointer; position: relative;
  font-family: var(--font-head); font-weight: 600; font-size: .72rem;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink); white-space: nowrap;
  transition: color .18s var(--ease);
}
.nav__link svg { width: 12px; height: 12px; transition: transform .22s var(--ease); }
.nav__link::after {
  content: ''; position: absolute; left: .6em; right: .6em; bottom: .5em; height: 2px;
  background: var(--teal); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease);
}
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); }
.nav__link:hover, .nav__link.is-active { color: var(--teal-600); }

.nav__item--has-sub { position: static; }
.nav__sub {
  position: absolute; left: 0; right: 0; top: 100%;
  background: #fff; border-top: 1px solid var(--line); box-shadow: 0 24px 50px rgba(7,47,69,.14);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.nav__item--has-sub:hover .nav__sub,
.nav__item--has-sub:focus-within .nav__sub,
.nav__toggle[aria-expanded="true"] + .nav__sub { opacity: 1; visibility: visible; transform: none; }
.nav__item--has-sub:hover .nav__toggle svg { transform: rotate(180deg); }
.nav__sub-inner { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; padding: var(--sp-6) 0 var(--sp-7); }
.nav__sub-title { font-family: var(--font-head); font-size: var(--fs-micro); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); margin: 0 0 var(--sp-4); }
.nav__sub ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: .1rem 2rem; list-style: none; margin: 0 0 var(--sp-5); padding: 0; }
.nav__sub a { display: flex; align-items: baseline; gap: .8em; padding: .55rem 0; color: var(--ink); font-size: .93rem; border-bottom: 1px solid transparent; }
.nav__sub a:hover, .nav__sub a[aria-current="page"] { color: var(--teal-600); border-bottom-color: var(--teal-100); }
.nav__num { font-family: var(--font-head); font-size: .68rem; font-weight: 700; color: var(--teal); letter-spacing: .1em; }
.nav__sub-all { display: inline-flex; align-items: center; gap: .5em; font-family: var(--font-head); font-weight: 700; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; }
.nav__sub-all svg { width: 15px; height: 15px; }

.navbar__actions { display: flex; align-items: center; gap: .6rem; flex: none; }
.navbar__call { padding: .8em 1.1em; font-size: .72rem; }
.burger { display: none; border: 1px solid var(--line); background: #fff; padding: .5rem; cursor: pointer; color: var(--navy); border-radius: var(--r); }
.burger svg { width: 24px; height: 24px; }

.mobile-nav {
  position: fixed; inset: 0; z-index: 200; background: #fff; display: flex; flex-direction: column;
  padding: var(--sp-4); overflow-y: auto; overscroll-behavior: contain;
}
.mobile-nav[hidden] { display: none; }
.mobile-nav__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-5); }
.mobile-nav__head img { height: 40px; width: auto; }
.mobile-nav__close { border: 1px solid var(--line); background: #fff; padding: .5rem; cursor: pointer; color: var(--navy); border-radius: var(--r); }
.mobile-nav__close svg { width: 22px; height: 22px; }
.mobile-nav .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
.mobile-nav .nav__item { border-bottom: 1px solid var(--line); }
.mobile-nav .nav__link { width: 100%; justify-content: space-between; padding: 1.05rem .2rem; font-size: .86rem; }
.mobile-nav .nav__link::after { display: none; }
.mobile-nav .nav__sub {
  position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none;
  border: 0; display: none; background: var(--tint);
}
.mobile-nav .nav__toggle[aria-expanded="true"] + .nav__sub { display: block; }
.mobile-nav .nav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.mobile-nav .nav__sub-inner { width: auto; padding: var(--sp-3) var(--sp-4); }
.mobile-nav .nav__sub ul { grid-template-columns: 1fr; margin-bottom: var(--sp-3); }
.mobile-nav__foot { margin-top: auto; padding-top: var(--sp-6); display: grid; gap: .6rem; }
.mobile-nav__foot p { font-size: .85rem; color: var(--muted); margin: .5rem 0 0; }
/* Rehomed from the top ribbon, which phones no longer render. */
.mobile-nav__social { display: flex; gap: .5rem; margin-top: .25rem; }
.mobile-nav__social a {
  display: grid; place-items: center; width: 38px; height: 38px;
  background: var(--teal-050, rgba(2,184,191,.1)); color: var(--navy);
  clip-path: var(--hex); transition: background .2s, color .2s;
}
.mobile-nav__social a:hover { background: var(--teal); color: #fff; }
.mobile-nav__social svg { width: 17px; height: 17px; }

/* Shed the widest pieces before the row runs out of room, not after. */
/* One of these is always hidden. The pair exists so a button can carry a full
   label and a short one in every language — see the note in index.js. */
.only-narrow { display: none; }
@media (max-width: 1280px) {
  .only-wide { display: none; }
  .only-narrow { display: inline; }
}
@media (max-width: 1150px) { .navbar__call span { display: none; } .navbar__call { padding: .8em; } }
/* The nav's pixel budget above was measured against the English labels, and
   "LEISTUNGEN · BEWERTUNGEN · ONLINE BUCHEN" does not fit where "SERVICE ·
   REVIEW · BOOK ONLINE" did — German runs roughly a third longer. Rather
   than shrink the type for everyone or push every language to the burger
   early, the translated pages collapse sooner. `lang` is already on <html>,
   so the stylesheet can read the one fact that decides this. */
@media (max-width: 1150px) {
  html:not([lang='en']) .nav,
  html:not([lang='en']) .navbar__actions { display: none; }
  html:not([lang='en']) .burger { display: block; margin-left: auto; }
}
@media (max-width: 1024px) {
  .nav, .navbar__actions { display: none; }
  .burger { display: block; margin-left: auto; }
  .ribbon__hours { display: none; }
}
@media (max-width: 700px) { .ribbon__msg { display: none; } .ribbon__inner { justify-content: center; } }
/* By this width the ribbon has had its message, hours and address stripped
   out and is a 40px bar holding a phone number and two icons with half its
   width empty. Drop it: the phone and the socials move into the menu drawer,
   and the actions that matter live in the call bar pinned to the bottom. */
@media (max-width: 640px) { .ribbon { display: none; } }
/* .ribbon__links is not styled here any more: the ribbon is display:none from
   640 down, so anything inside it at 480 could never apply. */
@media (max-width: 480px) { .brand img { height: 38px; } }

/* --- Hero --------------------------------------------------------------- */
.hero { position: relative; background: var(--navy); color: #fff; overflow: hidden; isolation: isolate; }
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(96deg, rgba(4,34,47,.96) 0%, rgba(7,47,69,.9) 42%, rgba(1,123,127,.62) 100%);
}
/* The cutout column was a flat 400px while the copy column kept every pixel
   --wrap could give it — 769px against 400px at full width, and a 365px-tall
   figure floating in a 543px-tall row. The right third read as empty. Let the
   figure scale with the viewport instead so the two columns stay in
   proportion; the lead is capped at 52ch and the tag strip fits in ~540px, so
   the copy column has room to give. */
.hero__inner {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) clamp(320px, 32vw, 500px);
  gap: var(--sp-8); align-items: center;
  padding: clamp(3.5rem, 9vw, 8rem) 0 clamp(5rem, 8vw, 7.5rem);
}
.hero h1 { color: #fff; margin-bottom: var(--sp-5); text-wrap: balance; }
.hero__lead { font-size: var(--fs-lead); color: rgba(255,255,255,.82); max-width: 52ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: var(--sp-6); }
.hero__tags { display: flex; flex-wrap: wrap; gap: .5rem clamp(.9rem, 2vw, 1.6rem); list-style: none; margin: var(--sp-7) 0 0; padding: 0; }
.hero__tags li {
  margin: 0; font-family: var(--font-head); font-weight: 700; font-size: var(--fs-micro);
  letter-spacing: .18em; color: rgba(255,255,255,.62); display: flex; align-items: center; gap: .8em;
}
.hero__tags li + li::before { content: ''; width: 5px; height: 5px; background: var(--teal); rotate: 45deg; }
/* No bottom margin: it was fighting align-items:center — the row centred the
   figure's margin box, so the picture itself sat ~25px above the copy's
   optical centre and lined up with nothing. */
.hero__cut { margin: 0; }
.hero__cut img { width: 100%; filter: drop-shadow(0 30px 60px rgba(0,0,0,.4)); }
.hero__hex {
  position: absolute; right: -6%; top: -14%; width: 34vw; height: 34vw; max-width: 480px; max-height: 480px;
  clip-path: var(--hex); background: rgba(2,184,191,.16); z-index: -1;
}
/* minmax(0, 1fr), not 1fr: the track's automatic minimum is min-content, and
   the tag strip below is deliberately unwrappable — a plain 1fr would let it
   stretch the column past the viewport. */
@media (max-width: 1100px) { .hero__inner { grid-template-columns: minmax(0, 1fr); } .hero__cut { display: none; } }

/* Short viewports — in practice a phone turned sideways, which is 850px wide
   and so escapes every max-width rule in this file while having barely a
   third of the height to spend. A sticky header costs a quarter of the screen
   there and the hero's vertical padding costs another quarter. */
@media (max-height: 520px) {
  .site-header { position: static; }
  .hero__inner { padding: 1.75rem 0 2.25rem; }
}

/* Phones. The desktop hero is 730px tall here, which pushes the whole page
   below the fold and leaves nothing peeking up to say "keep scrolling". The
   padding clamps bottom out at their floor on a narrow screen, so they need
   a real value; the lead is retuned so it stops out-shouting the headline;
   and the tag list scrolls sideways rather than wrapping one item onto a
   lonely second row. */
@media (max-width: 560px) {
  .hero__inner { padding: 2.5rem 0 3rem; }
  .hero__lead { font-size: 1rem; line-height: 1.55; }
  .hero__actions { flex-direction: column; align-items: stretch; gap: .625rem; margin-top: var(--sp-5); }
  .hero__actions .btn { width: 100%; }
  .hero__copy { min-width: 0; }
  .hero__tags {
    flex-wrap: nowrap; overflow-x: auto; min-width: 0; margin-top: var(--sp-5);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .hero__tags::-webkit-scrollbar { display: none; }
  .hero__tags li { white-space: nowrap; flex: none; }
}

/* --- Info card ---------------------------------------------------------- */
.infocard-wrap { position: relative; margin-top: clamp(-4rem, -5vw, -3rem); z-index: 5; }
.infocard {
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: #fff; box-shadow: var(--shadow-lg); border-radius: var(--r-lg); overflow: hidden;
}
.infocard__item { display: flex; gap: var(--sp-4); padding: var(--sp-6); border-right: 1px solid var(--line); }
.infocard__item:last-child { border-right: 0; }
.infocard__icon { display: grid; place-items: center; width: 44px; height: 44px; flex: none; background: var(--teal-050); color: var(--teal-600); clip-path: var(--hex); }
.infocard__icon svg { width: 20px; height: 20px; }
.infocard h2 { font-size: var(--fs-micro); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin: 0 0 .35rem; font-weight: 700; }
.infocard p { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--ink); }
@media (max-width: 860px) {
  .infocard { grid-template-columns: 1fr; }
  .infocard__item { border-right: 0; border-bottom: 1px solid var(--line); }
  .infocard__item:last-child { border-bottom: 0; }
  .infocard-wrap { margin-top: -2.5rem; }
}

/* --- Sections ----------------------------------------------------------- */
.section { padding: clamp(3.5rem, 8vw, 7rem) 0; }
.section--first { padding-top: clamp(3rem, 6vw, 5rem); }
.section--tint { background: var(--tint); }
.section--dark { background: var(--navy); color: rgba(255,255,255,.75); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }
.section--dark a { color: var(--teal); }
.section--dark a:hover { color: #fff; }
/* buttons keep their own colours inside dark sections */
.section--dark a.btn, .section--dark a.btn:hover { color: var(--fg); }
.section--flushmap { padding: 0; }

.head { max-width: 62ch; margin-bottom: clamp(2.2rem, 4vw, 3.5rem); }
.head--split { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--sp-6); align-items: end; max-width: none; }
.head--split h2 { margin: 0; }
.head__lead { font-size: var(--fs-lead); margin: 0; color: var(--body); }
.head--light .head__lead { color: rgba(255,255,255,.7); }
@media (max-width: 820px) { .head--split { grid-template-columns: 1fr; align-items: start; } }

/* The link that closes a section — "Open the full gallery", "More interviews".
   It lives in a <p>, whose reset margin-top is 0, so the button was drawn
   hard against the bottom row of the grid above it with not a pixel between
   them; centred, it landed on the middle photo and read as stuck to it. */
.section__foot { margin: clamp(2rem, 4vw, 3.25rem) 0 0; }

/* --- Split section ------------------------------------------------------ */
.split__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.split--reverse .split__inner { grid-template-columns: 1fr; }
.split__media { position: relative; padding-bottom: 3.5rem; padding-right: 3rem; }
.frame { margin: 0; overflow: hidden; }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame--hex { border-radius: var(--r-lg); box-shadow: var(--shadow); }
.frame--float {
  position: absolute; right: 0; bottom: 0; width: 52%; border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); border: 6px solid #fff;
}
.split__copy h2 { margin-bottom: var(--sp-5); }
@media (max-width: 900px) {
  .split__inner { grid-template-columns: 1fr; }
  .split__media { padding-right: 2rem; padding-bottom: 2.5rem; }
}

/* --- Stat band ---------------------------------------------------------- */
.band { background: var(--navy-900); color: #fff; }
.band__inner { display: grid; grid-template-columns: repeat(3, auto) 1fr; gap: var(--sp-7); align-items: center; padding: clamp(2rem, 4vw, 3.2rem) 0; }
.band__stat span { display: block; font-family: var(--font-head); font-weight: 800; font-size: clamp(2.4rem, 4vw, 3.6rem); line-height: 1; color: var(--teal); letter-spacing: -.04em; }
.band__stat i { font-style: normal; font-size: .5em; }
.band__stat p { margin: .5rem 0 0; font-size: var(--fs-sm); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); font-family: var(--font-head); font-weight: 600; }
.band__claim { justify-self: end; text-align: right; border-left: 1px solid var(--line-dark); padding-left: var(--sp-7); }
.band__claim p { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.05rem, 1.5vw, 1.5rem); color: #fff; margin: 0 0 .4rem; }
.band__claim cite { font-style: normal; font-size: var(--fs-sm); color: rgba(255,255,255,.55); }
@media (max-width: 980px) {
  .band__inner { grid-template-columns: repeat(3, 1fr); }
  .band__claim { grid-column: 1 / -1; justify-self: stretch; text-align: left; border-left: 0; border-top: 1px solid var(--line-dark); padding: var(--sp-5) 0 0; }
}
/* Three stats in two columns leaves the third one alone on its own row with a
   column-wide hole beside it. Keep all three on one row and shrink the type. */
@media (max-width: 560px) {
  .band__inner { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5) var(--sp-4); }
  .band__stat span { font-size: 1.85rem; }
  .band__stat p { font-size: .6rem; letter-spacing: .06em; }
}

/* --- Treatment index ---------------------------------------------------- */
.tindex { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); counter-reset: t; }
.tindex__group { margin: var(--sp-8) 0 var(--sp-5); font-size: clamp(1.2rem, 1.4vw, 1.6rem); }
.tindex__group:first-child { margin-top: 0; }
.tindex__row { margin: 0; border-bottom: 1px solid var(--line); }
.tindex__row a {
  position: relative; display: grid; grid-template-columns: 4rem minmax(180px, 1.05fr) 1.5fr 3rem;
  gap: var(--sp-4); align-items: center; padding: 1.5rem .25rem;
  color: var(--ink); transition: padding .3s var(--ease), background .3s var(--ease);
}
.tindex__row a::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, var(--teal-050), transparent 70%);
  opacity: 0; transition: opacity .3s var(--ease);
}
.tindex__row a:hover { padding-left: 1.25rem; }
.tindex__row a:hover::before { opacity: 1; }
.tindex__n { position: relative; font-family: var(--font-head); font-weight: 700; font-size: .8rem; letter-spacing: .12em; color: var(--teal); }
.tindex__name { position: relative; font-family: var(--font-head); font-weight: 700; font-size: clamp(1.05rem, 1.2vw, 1.32rem); color: var(--navy); letter-spacing: -.015em; line-height: 1.25; }
.tindex__desc {
  position: relative; font-size: .92rem; color: var(--body); line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tindex__go { position: relative; justify-self: end; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; color: var(--navy); transition: background .25s var(--ease), color .25s, border-color .25s, transform .25s var(--ease); }
.tindex__go svg { width: 17px; height: 17px; }
.tindex__row a:hover .tindex__go { background: var(--teal); border-color: var(--teal); color: #fff; transform: translateX(3px); }
.tindex__peek {
  position: absolute; right: 5rem; top: 50%; translate: 0 -50%;
  width: 132px; height: 92px; overflow: hidden; border-radius: var(--r);
  opacity: 0; scale: .9; pointer-events: none; box-shadow: var(--shadow);
  transition: opacity .3s var(--ease), scale .3s var(--ease);
}
.tindex__peek img { width: 100%; height: 100%; object-fit: cover; }
.tindex__row a:hover .tindex__peek { opacity: 1; scale: 1; }
@media (max-width: 900px) {
  .tindex__row a { grid-template-columns: 3rem 1fr 2.5rem; padding: 1.15rem .25rem; }
  .tindex__desc { grid-column: 2 / 4; -webkit-line-clamp: 3; line-clamp: 3; }
  .tindex__peek { display: none; }
}

/* --- Reasons ------------------------------------------------------------ */
.reasons { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-dark); border: 1px solid var(--line-dark); }
.reason { margin: 0; padding: clamp(1.6rem, 3vw, 2.5rem); background: var(--navy); transition: background .3s var(--ease); }
.reason:hover { background: var(--navy-800); }
.reason__n { display: block; font-family: var(--font-head); font-weight: 800; font-size: 1.6rem; color: var(--teal); letter-spacing: -.03em; margin-bottom: var(--sp-4); }
.reason h3 { color: #fff; font-size: 1.08rem; margin-bottom: var(--sp-3); }
.reason p { margin: 0; font-size: .92rem; color: rgba(255,255,255,.66); }
@media (max-width: 900px) { .reasons { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .reasons { grid-template-columns: 1fr; } }

/* --- Media / video ------------------------------------------------------ */
.media-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--sp-5); align-items: start; }
.media-grid--reviews { margin-top: clamp(2.5rem, 5vw, 4rem); }
@media (max-width: 900px) { .media-grid { grid-template-columns: 1fr; } }
.video { position: relative; background: #000; overflow: hidden; border-radius: var(--r-lg); box-shadow: var(--shadow); }
.video__btn { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.video__btn img { width: 100%; aspect-ratio: 16/9; object-fit: cover; transition: transform .6s var(--ease), opacity .3s; }
.video:hover .video__btn img { transform: scale(1.04); opacity: .8; }
.video__play {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: 84px; height: 84px; display: grid; place-items: center;
  background: var(--teal); color: #fff; clip-path: var(--hex);
  transition: scale .25s var(--ease), background .25s;
}
.video:hover .video__play { scale: 1.1; background: #fff; color: var(--teal-700); }
.video__play svg { width: 28px; height: 28px; margin-left: 3px; }
.video__label {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 2.5rem 1.4rem 1.2rem; text-align: left;
  background: linear-gradient(transparent, rgba(4,34,47,.9));
  color: #fff; font-family: var(--font-head); font-weight: 700; font-size: .98rem;
}
.video iframe { width: 100%; aspect-ratio: 16/9; border: 0; }

/* --- Film (the clinic's own video, served from this domain) -------------- */
.film-sec__head { max-width: 52ch; margin-inline: auto; text-align: center; }
.film-sec__head .eyebrow { justify-content: center; }
.film {
  position: relative; margin: 0 auto; max-width: 1000px;
  background: #000; border-radius: var(--r-lg); overflow: hidden;
  box-shadow: 0 34px 70px rgba(0, 0, 0, .45);
}
.film__btn { display: block; position: relative; }
.film__btn img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; transition: transform .8s var(--ease), opacity .35s; }
.film:hover .film__btn img { transform: scale(1.03); opacity: .82; }
.film__play {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: 96px; height: 96px; display: grid; place-items: center;
  background: var(--teal); color: #fff; clip-path: var(--hex);
  transition: scale .25s var(--ease), background .25s;
}
.film:hover .film__play { scale: 1.08; background: #fff; color: var(--teal-700); }
.film__play svg { width: 32px; height: 32px; margin-left: 4px; }
/* The label sits on the poster, so it goes when the poster does. */
.film__meta {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 4rem 1.6rem 1.3rem;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .9rem;
  background: linear-gradient(transparent, rgba(4, 34, 47, .92));
  color: #fff; text-align: left;
}
.film__meta b { font-family: var(--font-head); font-weight: 800; font-size: 1.05rem; }
.film__meta span { font-size: var(--fs-micro); letter-spacing: .16em; text-transform: uppercase; color: var(--teal); }
/* Same box as the poster it replaces, so pressing play shifts nothing. */
.film video { display: block; width: 100%; aspect-ratio: 16/9; background: #000; }
@media (max-width: 640px) {
  .film__play { width: 68px; height: 68px; }
  .film__play svg { width: 24px; height: 24px; }
  .film__meta { padding: 3rem 1.1rem 1rem; }
}

.reel { border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-4); background: #fff; }
.section--dark .reel { background: var(--navy-800); border-color: var(--line-dark); }
.reel__title { font-size: var(--fs-micro); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin: 0 0 var(--sp-3); font-weight: 700; }
.reel ul { list-style: none; margin: 0; padding: 0; max-height: 400px; overflow-y: auto; }
.reel li { margin: 0; border-bottom: 1px solid var(--line); }
.reel li:last-child { border-bottom: 0; }
.reel a { display: grid; grid-template-columns: 1.8rem 96px 1fr; gap: .8rem; align-items: center; padding: .7rem .3rem; color: var(--ink); }
.reel a:hover { color: var(--teal-600); }
.reel__n { font-family: var(--font-head); font-weight: 700; font-size: .7rem; color: var(--teal); letter-spacing: .1em; }
.reel__thumb { position: relative; overflow: hidden; border-radius: var(--r); }
.reel__thumb img { width: 96px; aspect-ratio: 16/9; object-fit: cover; }
.reel__play { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(7,47,69,.4); color: #fff; opacity: 0; transition: opacity .2s; }
.reel a:hover .reel__play { opacity: 1; }
.reel__play svg { width: 18px; height: 18px; }
.reel__meta { display: flex; flex-direction: column; min-width: 0; }
.reel__name { font-size: .86rem; font-weight: 600; line-height: 1.35; }
.reel__dur { font-size: .74rem; color: var(--muted); }

/* --- Doctor ------------------------------------------------------------- */
.doctor { display: grid; grid-template-columns: 440px 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.doctor__media { position: relative; }
.doctor__media img { width: 100%; border-radius: var(--r-lg); box-shadow: var(--shadow); }
.doctor__badge {
  position: absolute; right: -18px; bottom: 28px; background: var(--teal); color: #fff;
  padding: 1rem 1.2rem; border-radius: var(--r); text-align: center; box-shadow: var(--shadow);
  max-width: 140px;
}
.doctor__badge strong { display: block; font-family: var(--font-head); font-size: 2rem; line-height: 1; font-weight: 800; }
.doctor__badge span { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; line-height: 1.3; display: block; margin-top: .3rem; }
.doctor__copy h2 { margin-bottom: .3rem; }
.doctor__role { font-family: var(--font-head); font-weight: 600; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--teal-600); margin-bottom: var(--sp-5); }
.doctor--dark .doctor__role { color: var(--teal); }
.doctor__note { font-size: .9rem; color: var(--muted); border-left: 2px solid var(--teal); padding-left: 1rem; }
.section--dark .doctor__note { color: rgba(255,255,255,.6); }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: var(--sp-5) 0 0; }
.chips li { margin: 0; padding: .45em 1em; border: 1px solid var(--line); border-radius: 999px; font-size: .8rem; color: var(--navy); }
.section--dark .chips li { border-color: var(--line-dark); color: rgba(255,255,255,.8); }
@media (max-width: 900px) { .doctor { grid-template-columns: 1fr; } .doctor__media { max-width: 420px; } .doctor__badge { right: 12px; } }

/* --- Slider ------------------------------------------------------------- */
.slider__viewport { overflow: hidden; }
.slider__track {
  display: flex; gap: var(--sp-4); list-style: none; margin: 0; padding: 0;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
}
.slider__track::-webkit-scrollbar { display: none; }
.slider__slide { flex: 0 0 calc((100% - var(--sp-4) * 3) / 4); scroll-snap-align: start; margin: 0; }
.slider__slide .lightbox-open {
  display: block; width: 100%; padding: 0; cursor: zoom-in; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  transition: box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s;
}
.slider__slide .lightbox-open:hover { box-shadow: var(--shadow); transform: translateY(-4px); border-color: var(--teal-100); }
.slider__slide img { width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: top center; }
.slider__controls { display: flex; align-items: center; justify-content: center; gap: var(--sp-4); margin-top: var(--sp-5); }
.slider__nav { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--line); background: #fff; color: var(--navy); cursor: pointer; border-radius: 50%; transition: background .2s, color .2s, border-color .2s, opacity .2s; }
.slider__nav:hover { background: var(--teal); border-color: var(--teal); color: #fff; }
.slider__nav[disabled] { opacity: .3; cursor: default; }
.slider__nav svg { width: 18px; height: 18px; }
.slider__counter { margin: 0; font-family: var(--font-head); font-weight: 700; font-size: .82rem; letter-spacing: .12em; color: var(--muted); min-width: 4.5em; text-align: center; }
@media (max-width: 1000px) { .slider__slide { flex-basis: calc((100% - var(--sp-4) * 2) / 3); } }
@media (max-width: 700px) { .slider__slide { flex-basis: calc((100% - var(--sp-4)) / 2); } }

/* --- CTA band ----------------------------------------------------------- */
.cta { position: relative; background: linear-gradient(100deg, var(--teal-700), var(--teal)); color: #fff; overflow: hidden; }
.cta__inner { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-6); padding: clamp(2.5rem, 5vw, 4.5rem) 0; }
.cta h2 { color: #fff; margin: 0; max-width: 22ch; }
.cta .eyebrow--light { color: rgba(255,255,255,.8); }
.cta__hex { position: absolute; right: 4%; top: -30%; width: 26vw; height: 26vw; max-width: 340px; max-height: 340px; clip-path: var(--hex); background: rgba(255,255,255,.1); }

/* --- Visit / map -------------------------------------------------------- */
.visit { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.visit__facts { margin: var(--sp-5) 0; display: grid; grid-template-columns: 5.5rem 1fr; gap: .35rem 1rem; font-size: .93rem; }
.visit__facts dt { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-micro); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); padding-top: .3em; }
.visit__facts dd { margin: 0; color: var(--ink); }
.visit__map { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); }
.map { height: clamp(320px, 42vw, 480px); background: var(--tint); }
.map iframe { width: 100%; height: 100%; border: 0; }
.section--flushmap .map { height: clamp(320px, 40vw, 440px); }
@media (max-width: 900px) { .visit { grid-template-columns: 1fr; } }

/* --- Mast (inner page hero) --------------------------------------------- */
.mast { position: relative; background: var(--navy); color: #fff; overflow: hidden; isolation: isolate; }
.mast__bg { position: absolute; inset: 0; z-index: -2; }
/* The masthead is a wide, short box, so `cover` throws away most of the
   photo's height — at 1440 only the middle 41% of it survives. Centred, that
   band lands on chests and equipment and slices the heads off the top. Each
   page passes the height its faces actually sit at (see pageMast); 50% is
   only the fallback for photos nobody has framed yet. */
.mast__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--mast-focus, 50%); }
.mast::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(4,34,47,.95), rgba(7,47,69,.86) 50%, rgba(1,123,127,.6)); }
/* .mast__inner is the .wrap that sets the page gutter as well as the box that
   holds the title, so a max-width here shrank the box and .wrap's
   `margin-inline: auto` then centred what was left: the page title started
   210px further in than every section below it at desktop width, by 94px at
   tablet width, and by nothing on a phone — the same page appearing to have
   three different left margins. Cap the title's line length instead and leave
   the box sitting on the gutter with everything else. */
.mast__inner { position: relative; padding: clamp(2.5rem, 6vw, 5.5rem) 0 clamp(3rem, 6vw, 5rem); }
.mast h1 { color: #fff; margin: 0; text-wrap: balance; max-width: 820px; }
.mast__lead { margin: var(--sp-5) 0 0; font-size: var(--fs-lead); color: rgba(255,255,255,.78); max-width: 58ch; }
.mast__num { font-family: var(--font-head); font-weight: 800; font-size: 1rem; letter-spacing: .2em; color: var(--teal); margin: 0 0 var(--sp-3); }
.mast--article h1 { font-size: clamp(1.9rem, 3.4vw + .6rem, 3.4rem); }
.mast__hex { position: absolute; right: -4%; bottom: -45%; width: 26vw; height: 26vw; max-width: 340px; max-height: 340px; clip-path: var(--hex); background: rgba(2,184,191,.16); z-index: -1; }

.crumbs { margin-bottom: var(--sp-5); font-size: var(--fs-sm); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.crumbs li { margin: 0; display: flex; align-items: center; gap: .5rem; color: rgba(255,255,255,.55); }
.crumbs li + li::before { content: '/'; color: rgba(255,255,255,.3); }
.crumbs a { color: rgba(255,255,255,.75); }
.crumbs a:hover { color: var(--teal); }
.crumbs [aria-current] { color: #fff; }

/* --- Article ------------------------------------------------------------ */
.article { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 1000px) { .article { grid-template-columns: 1fr; } .article__rail { order: 2; } }
.article__rail { position: sticky; top: calc(var(--header-h) + 20px); display: grid; gap: var(--sp-4); }
@media (max-width: 1000px) { .article__rail { position: static; } }
.rail-card { background: var(--tint); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-5); }
.rail-card h2 { font-size: 1.05rem; margin-bottom: var(--sp-3); }
.rail-card p { font-size: .9rem; }
.rail-card .btn { margin-bottom: .5rem; }
.rail-facts { margin: var(--sp-4) 0 0; font-size: .85rem; }
.rail-facts dt { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-micro); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-top: .9rem; }
.rail-facts dd { margin: .15rem 0 0; color: var(--ink); }
.rail-nav { border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-5); }
.rail-nav h2 { font-size: 1.05rem; margin-bottom: var(--sp-3); }
.rail-nav ul { list-style: none; margin: 0 0 var(--sp-4); padding: 0; }
.rail-nav li { margin: 0; border-bottom: 1px solid var(--line); }
.rail-nav li:last-child { border-bottom: 0; }
.rail-nav a { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem 0; font-size: .9rem; color: var(--ink); }
.rail-nav a svg { width: 15px; height: 15px; color: var(--teal); opacity: 0; transition: opacity .2s, transform .2s var(--ease); }
.rail-nav a:hover { color: var(--teal-600); }
.rail-nav a:hover svg { opacity: 1; transform: translateX(3px); }
.rail-nav__all { display: inline-flex; align-items: center; gap: .45em; font-family: var(--font-head); font-weight: 700; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; }
.rail-nav__all svg { width: 15px; height: 15px; }

.prose { max-width: 72ch; }
.prose h2 { margin-top: var(--sp-8); font-size: clamp(1.4rem, 1.6vw + .9rem, 2rem); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: var(--sp-6); color: var(--teal-600); font-size: 1.1rem; }
.prose p { font-size: 1.0625rem; }
.prose ul { list-style: none; padding: 0; }
.prose ul > li { position: relative; padding-left: 1.8em; margin-bottom: .65em; }
.prose ul > li::before { content: ''; position: absolute; left: .3em; top: .68em; width: .45em; height: .45em; background: var(--teal); rotate: 45deg; }
.prose ol { counter-reset: n; list-style: none; padding: 0; }
.prose ol > li { position: relative; padding-left: 2.4em; margin-bottom: .75em; counter-increment: n; }
.prose ol > li::before { content: counter(n, decimal-leading-zero); position: absolute; left: 0; top: 0; font-family: var(--font-head); font-weight: 800; font-size: .82em; color: var(--teal); letter-spacing: .06em; }
.prose-figure { margin: var(--sp-7) 0; }
.prose-figure img { width: 100%; border-radius: var(--r-lg); }
.prose-figure figcaption { margin-top: .7rem; font-size: var(--fs-sm); color: var(--muted); }
.prose-figure-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); margin: var(--sp-7) 0; }
.prose-figure-row figure { margin: 0; }
.prose-figure-row img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r); }
@media (max-width: 620px) { .prose-figure-row { grid-template-columns: 1fr; } }
.prose-note { margin: var(--sp-7) 0; padding: var(--sp-5) var(--sp-6); background: var(--tint); border-left: 3px solid var(--teal); }
.prose-note p { margin: 0; font-family: var(--font-head); font-weight: 600; color: var(--navy); font-size: 1rem; }
.prose-steps { counter-reset: step; list-style: none; padding: 0; margin: var(--sp-7) 0; }
.prose-steps > li { counter-increment: step; position: relative; padding: 0 0 var(--sp-6) 3.6rem; border-left: 1px solid var(--line); margin-left: 1.1rem; }
.prose-steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.prose-steps > li::before {
  content: counter(step, decimal-leading-zero); position: absolute; left: -1.1rem; top: -.1rem;
  width: 2.2rem; height: 2.2rem; display: grid; place-items: center; background: var(--teal); color: #fff;
  clip-path: var(--hex); font-family: var(--font-head); font-weight: 800; font-size: .72rem;
}
.prose-steps h3 { margin: 0 0 .3rem; color: var(--navy); font-size: 1.05rem; }
.prose-steps p { margin: 0; font-size: .96rem; }
.prose-faq { margin: var(--sp-7) 0; border-top: 1px solid var(--line); }
.prose-faq details { border-bottom: 1px solid var(--line); }
.prose-faq summary {
  cursor: pointer; list-style: none; padding: 1.15rem 2.5rem 1.15rem 0; position: relative;
  font-family: var(--font-head); font-weight: 700; color: var(--navy); font-size: 1rem;
}
.prose-faq summary::-webkit-details-marker { display: none; }
.prose-faq summary::after { content: ''; position: absolute; right: .4rem; top: 1.55rem; width: 12px; height: 2px; background: var(--teal); }
.prose-faq summary::before { content: ''; position: absolute; right: 0.95rem; top: 1.05rem; width: 2px; height: 12px; background: var(--teal); transition: opacity .2s; }
.prose-faq details[open] summary::before { opacity: 0; }
.prose-faq summary:hover { color: var(--teal-600); }
.prose-faq-body { padding: 0 0 1.15rem; }
.prose-faq-body p { margin: 0; font-size: .96rem; }

.article__end { margin-top: var(--sp-8); padding: var(--sp-6); background: var(--tint); border-radius: var(--r-lg); }
.article__end h2 { margin-top: 0; font-size: 1.4rem; }
.article__end p { margin-bottom: 0; }
/* Below 1000px the rail stops being a sidebar and drops in under the article
   (see .article__rail order: 2), which landed "Book this treatment" 356px
   below "Ready to start?" — same ask, same button, twice in one scroll. The
   rail card is the one that survives: it carries the phone number, address
   and opening hours as well. */
@media (max-width: 1000px) { .article__end { display: none; } }

/* --- Tiles / masonry ---------------------------------------------------- */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
@media (max-width: 900px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
.tile { display: block; padding: 0; border: 0; background: var(--tint); cursor: zoom-in; overflow: hidden; border-radius: var(--r); }
.tile img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .5s var(--ease); }
.tile:hover img { transform: scale(1.08); }

/* Grid masonry: JS gives each tile a row span from the image's aspect ratio.
   Without JS it degrades to a plain equal-height grid. */
.masonry {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  grid-auto-rows: 10px; column-gap: var(--sp-3); align-items: start;
}
.masonry__item {
  position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--tint);
  cursor: zoom-in; overflow: hidden; border-radius: var(--r); grid-row-end: span 24;
  margin-bottom: var(--sp-3);
}
.masonry__item img { width: 100%; height: auto; display: block; transition: transform .5s var(--ease), filter .3s; }
.masonry.is-measured .masonry__item { margin-bottom: 0; }
.masonry__item:hover img { transform: scale(1.05); filter: brightness(.82); }
.masonry__zoom {
  position: absolute; inset: 0; margin: auto; width: 46px; height: 46px;
  display: grid; place-items: center; background: var(--teal); color: #fff;
  clip-path: var(--hex); font-size: 1.4rem; line-height: 1; opacity: 0; scale: .7;
  transition: opacity .25s var(--ease), scale .25s var(--ease);
}
.masonry__item:hover .masonry__zoom { opacity: 1; scale: 1; }

/* --- Gallery filters ---------------------------------------------------- */
[hidden] { display: none !important; }

.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--sp-4); }
.filters__btn {
  display: inline-flex; align-items: center; gap: .55em;
  padding: .7em 1.2em; border: 1px solid var(--line); background: #fff; cursor: pointer;
  border-radius: var(--r); font-family: var(--font-head); font-weight: 600; font-size: .78rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink);
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.filters__btn span { font-size: .68rem; color: var(--muted); letter-spacing: .04em; }
.filters__btn:hover { border-color: var(--navy); }
.filters__btn.is-on { background: var(--navy); border-color: var(--navy); color: #fff; }
.filters__btn.is-on span { color: var(--teal); }
.filters__status { font-size: var(--fs-sm); color: var(--muted); margin: 0 0 var(--sp-5); min-height: 1.4em; }

/* --- Stars -------------------------------------------------------------- */
.stars { display: inline-flex; gap: 2px; vertical-align: middle; }
.star { width: 1.05em; height: 1.05em; flex: none; }
.star--full { fill: #fbbc05; }
.star--empty { fill: rgba(255,255,255,.22); }
.star--part .star__bg { fill: rgba(255,255,255,.22); }
.star--part .star__fg { fill: #fbbc05; }
.g-mark { width: 1.15em; height: 1.15em; flex: none; }
.grev-card .star--empty { fill: #dfe6ea; }

/* --- Google reviews ----------------------------------------------------- */
.grev-sec { position: relative; overflow: hidden; }
.grev { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 980px) { .grev { grid-template-columns: 1fr; } }

.grev__summary h2 { margin-bottom: var(--sp-5); }
.grev__score { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.grev__num { font-family: var(--font-head); font-weight: 800; font-size: clamp(3rem, 6vw, 4.6rem); line-height: .9; color: var(--teal); letter-spacing: -.04em; }
.grev__score > span:last-child { display: flex; flex-direction: column; gap: .4rem; }
.grev__score .stars { font-size: 1.35rem; }
.grev__count { font-family: var(--font-head); font-weight: 600; font-size: var(--fs-sm); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.grev__lead { color: rgba(255,255,255,.72); max-width: 46ch; }
.grev__topics { list-style: none; margin: 0 0 var(--sp-5); padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.grev__topics li {
  display: inline-flex; align-items: center; gap: .5em; margin: 0;
  padding: .45em 1em; border: 1px solid var(--line-dark); border-radius: 999px;
  font-size: .78rem; color: rgba(255,255,255,.82);
}
.grev__topics li span { color: var(--teal); font-weight: 700; }
.grev-sec .btn--accent .g-mark { background: #fff; border-radius: 50%; padding: 1px; }

.grev__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--sp-4); }
.grev-card {
  background: #fff; border-radius: var(--r-lg); padding: var(--sp-5);
  display: grid; grid-template-columns: 42px 1fr; grid-template-areas: 'av head' 'st st' 'q q' 'more more';
  gap: .5rem .8rem; align-content: start;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.grev-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
/* Completes the row when the number of quoted reviews is odd. Deliberately
   not shaped like a review — it is a link, and must not read as one. */
.grev-card--all {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: .7rem;
  background: rgba(255,255,255,.05); border: 1px dashed var(--line-dark); color: #fff;
}
.grev-card--all:hover { background: rgba(255,255,255,.1); color: #fff; box-shadow: none; }
.grev-card--all .g-mark { width: 30px; height: 30px; background: #fff; border-radius: 50%; padding: 3px; }
.grev-card--all strong { font-family: var(--font-head); font-weight: 800; font-size: 1.15rem; line-height: 1.25; }
.grev-card--all > span {
  display: inline-flex; align-items: center; gap: .45em;
  font-family: var(--font-head); font-weight: 700; font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--teal);
}
.grev-card--all > span svg { width: 1.2em; height: 1.2em; }
.grev-card__avatar {
  grid-area: av; width: 42px; height: 42px; display: grid; place-items: center;
  background: var(--teal); color: #fff; clip-path: var(--hex);
  font-family: var(--font-head); font-weight: 800; font-size: 1.05rem;
}
.grev-card__head { grid-area: head; align-self: center; min-width: 0; }
.grev-card__name { margin: 0; font-family: var(--font-head); font-weight: 700; color: var(--navy); font-size: .95rem; }
.grev-card__when { margin: 0; font-size: .76rem; color: var(--muted); }
.grev-card .stars { grid-area: st; font-size: 1rem; }
/* Reviews are quoted in full, and a thorough patient can write several
   hundred words. Cap what the card shows so the grid keeps its shape — the
   link underneath goes to the whole thing on Google. */
.grev-card blockquote {
  grid-area: q; margin: 0; font-size: .93rem; line-height: 1.65; color: var(--body);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 9; overflow: hidden;
}
.grev-card__ell { color: var(--muted); }
.grev-card__more {
  grid-area: more; display: inline-flex; align-items: center; gap: .4em; margin-top: .3rem;
  font-family: var(--font-head); font-weight: 700; font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--teal-600);
}
.grev-card__more svg { width: 1.1em; height: 1.1em; transition: transform .2s var(--ease); }
.grev-card__more:hover svg { transform: translateX(3px); }

/* --- Lightbox ----------------------------------------------------------- */
.lightbox { position: fixed; inset: 0; z-index: 300; background: rgba(4,34,47,.96); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; padding: clamp(1rem, 4vw, 3rem); }
.lightbox[hidden] { display: none; }
.lightbox__figure { margin: 0; display: grid; place-items: center; gap: .9rem; min-width: 0; }
.lightbox__figure img { max-width: 100%; max-height: 78vh; object-fit: contain; border-radius: var(--r); }
.lightbox__figure figcaption { color: rgba(255,255,255,.75); font-size: var(--fs-sm); text-align: center; }
.lightbox__close, .lightbox__nav { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.07); color: #fff; cursor: pointer; border-radius: 50%; transition: background .2s; }
.lightbox__close:hover, .lightbox__nav:hover { background: var(--teal); border-color: var(--teal); }
.lightbox__close { position: absolute; top: 1rem; right: 1rem; z-index: 2; }
.lightbox__close svg, .lightbox__nav svg { width: 22px; height: 22px; }
@media (max-width: 640px) {
  .lightbox { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .lightbox__nav--prev { grid-row: 2; justify-self: start; }
  .lightbox__nav--next { grid-row: 2; justify-self: end; margin-top: -48px; }
}

/* --- Forms -------------------------------------------------------------- */
.field { display: block; margin-bottom: var(--sp-4); }
.field--full { grid-column: 1 / -1; }
.field__label { display: block; margin-bottom: .4rem; font-family: var(--font-head); font-weight: 600; font-size: var(--fs-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.field input, .field textarea, .field select {
  width: 100%; padding: .85rem 1rem; font: inherit; font-size: .98rem; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field textarea:focus, .field select:focus { outline: 0; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-100); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #e05a4f; box-shadow: 0 0 0 3px rgba(224,90,79,.15); }
.field__error { display: block; margin-top: .35rem; font-size: var(--fs-sm); color: #d0453a; }
.cform__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-4); }
@media (max-width: 560px) { .cform__grid { grid-template-columns: 1fr; } }
.form-status { margin: var(--sp-3) 0 0; font-size: .92rem; min-height: 1.4em; }
.form-status.is-ok { color: var(--green); font-weight: 600; }
.form-status.is-err { color: #d0453a; font-weight: 600; }

.section--dark .field__label { color: rgba(255,255,255,.6); }
.cform--dark input, .cform--dark textarea, .section--dark select {
  background: rgba(255,255,255,.06); border-color: var(--line-dark); color: #fff;
}
.cform--dark input::placeholder, .cform--dark textarea::placeholder { color: rgba(255,255,255,.4); }
.cform--dark input:focus, .cform--dark textarea:focus, .section--dark select:focus { background: rgba(255,255,255,.1); border-color: var(--teal); box-shadow: 0 0 0 3px rgba(2,184,191,.25); }
.section--dark select option { color: var(--ink); }

/* Two columns that finish together. `align-items: start` let each side stop
   wherever its content ran out: on the consultation page the copy plus a
   340×510 portrait ran 400px past the bottom of the form, so the form sat in
   the top half of the row with a dark void under it and the portrait had
   244px of empty column beside it. Now the form is a card that fills the row
   height, its phone line is pinned to the card's bottom edge, and the
   portrait is a doctor card sitting on the copy's baseline. */
.panel { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: stretch; }
@media (max-width: 880px) { .panel { grid-template-columns: 1fr; } }
.panel__intro { display: flex; flex-direction: column; }
.panel__intro h1 { font-size: clamp(1.8rem, 3vw + .7rem, 3rem); }

/* Face, name and credential together — a portrait on its own said nothing
   about who the visitor is about to meet. */
.panel__doctor {
  display: flex; align-items: center; gap: var(--sp-5);
  margin: auto 0 0; padding-top: var(--sp-6);
  border-top: 1px solid var(--line-dark);
}
.panel__doctor img {
  flex: none; width: 168px; height: 208px; object-fit: cover; object-position: center 22%;
  border-radius: var(--r-lg);
}
.panel__doctor figcaption { min-width: 0; }
.panel__doctor b {
  display: block; font-family: var(--font-head); font-weight: 800; font-size: 1.05rem;
  line-height: 1.25; color: #fff; letter-spacing: -.015em;
}
.panel__doctor span { display: block; margin-top: .35rem; font-size: .9rem; color: rgba(255,255,255,.6); }

.panel__form {
  display: flex; flex-direction: column;
  padding: clamp(1.4rem, 2.4vw, 2.25rem);
  background: rgba(255,255,255,.045); border: 1px solid var(--line-dark); border-radius: var(--r-lg);
}
/* Pinned to the bottom of the card rather than trailing the last field. */
.panel__alt { margin: auto 0 0; padding-top: var(--sp-5); font-size: .9rem; color: var(--muted); }
.section--dark .panel__alt { color: rgba(255,255,255,.55); }

/* Below the two-column break the card's own padding is enough gutter, and the
   portrait shrinks so the caption keeps a readable measure beside it. */
@media (max-width: 520px) {
  .panel__doctor { gap: var(--sp-4); }
  .panel__doctor img { width: 124px; height: 155px; }
}
.ticks { list-style: none; padding: 0; margin: 0 0 var(--sp-5); }
.ticks li { display: flex; align-items: flex-start; gap: .65em; margin-bottom: .55em; font-size: .96rem; }
.ticks svg { width: 18px; height: 18px; color: var(--teal); flex: none; margin-top: .3em; }
.ticks--light li { color: rgba(255,255,255,.82); }

.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.5rem, 3vw, 2.5rem); box-shadow: var(--shadow-sm); }
.form-card h2 { font-size: 1.5rem; margin-bottom: var(--sp-5); }

.callout { margin-top: var(--sp-6); padding: var(--sp-5); background: var(--tint); border-left: 3px solid var(--teal); }
.callout h3 { margin-bottom: var(--sp-2); font-size: 1.05rem; }
.callout p { font-size: .94rem; margin-bottom: 0; }
.callout--accent { background: var(--teal-050); }
.callout--accent .btn { margin-top: var(--sp-4); }

/* --- Price table -------------------------------------------------------- */
.price-table { border-top: 1px solid var(--line); }
.price-table__head {
  display: grid; grid-template-columns: minmax(0, 2.2fr) 8rem 10rem 7rem; gap: var(--sp-4);
  padding: .8rem .25rem; border-bottom: 1px solid var(--line);
  font-family: var(--font-head); font-weight: 700; font-size: var(--fs-micro);
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}
.price-row {
  display: grid; grid-template-columns: minmax(0, 2.2fr) 8rem 10rem 7rem; gap: var(--sp-4);
  align-items: center; padding: 1.35rem .25rem; border-bottom: 1px solid var(--line);
  transition: background .25s var(--ease);
}
.price-row:hover { background: var(--teal-050); }
.price-row h3 { margin: 0 0 .2rem; font-size: 1.05rem; }
.price-row p { margin: 0; font-size: .88rem; color: var(--body); }
.price-row__dur, .price-row__price { font-family: var(--font-head); font-weight: 600; color: var(--navy); font-size: .92rem; }
.price-row__price { color: var(--teal-700); }
.price-row__lbl { display: none; font-family: var(--font-head); font-size: var(--fs-micro); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-right: .5em; }
.price-row__act { justify-self: end; }
@media (max-width: 860px) {
  .price-table__head { display: none; }
  .price-row { grid-template-columns: 1fr auto; gap: .5rem 1rem; padding: 1.2rem .25rem; }
  .price-row__main { grid-column: 1 / -1; }
  .price-row__lbl { display: inline; }
  .price-row__act { grid-column: 2; grid-row: 2; }
  .price-row__dur { grid-column: 1; grid-row: 2; }
  .price-row__price { grid-column: 1; grid-row: 3; }
}

/* --- Contact ------------------------------------------------------------ */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }
.contact__photo { margin: var(--sp-5) 0; border-radius: var(--r-lg); }
.contact__blocks { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: var(--sp-6); }
.contact__blocks h3, .contact__h3 { display: flex; align-items: center; gap: .5em; font-size: var(--fs-micro); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: .5rem; font-weight: 700; }
.contact__blocks svg, .contact__h3 svg { width: 15px; height: 15px; color: var(--teal); }
.contact__blocks p { margin: 0; font-size: .94rem; color: var(--ink); }
.hours { list-style: none; padding: 0; margin: 0 0 var(--sp-6); font-size: .93rem; }
.hours li { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--line); margin: 0; }
.hours li:last-child { border-bottom: 0; }
.hours li span:first-child { color: var(--ink); font-weight: 600; }

/* --- Tables in body copy ------------------------------------------------ */
.prose-table { overflow-x: auto; margin: var(--sp-6) 0; border: 1px solid var(--line); border-radius: var(--r-lg); }
.prose-table table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.prose-table th, .prose-table td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--line); }
.prose-table thead th {
  font-family: var(--font-head); font-weight: 700; font-size: var(--fs-micro);
  letter-spacing: .14em; text-transform: uppercase; color: var(--navy); background: var(--tint); white-space: nowrap;
}
.prose-table tbody th { font-weight: 600; color: var(--ink); }
.prose-table tbody tr:last-child th, .prose-table tbody tr:last-child td { border-bottom: 0; }

/* --- Guide library ------------------------------------------------------
   The index groups articles under a heading per category rather than behind
   a filter control. Two reasons: every article is then a link in the page's
   own HTML, and a category is an address (#c-dental-implants) that can be
   sent to somebody.
   ------------------------------------------------------------------------ */
.section--tight { padding-block: clamp(2rem, 4vw, 3.25rem); }

.mast__kicker {
  font-family: var(--font-head); font-weight: 700; font-size: var(--fs-micro);
  letter-spacing: .18em; text-transform: uppercase; color: var(--teal);
  margin: 0 0 var(--sp-3);
}
.mast__kicker span { color: rgba(255,255,255,.4); margin-inline: .35em; }

.guide-intro { font-size: var(--fs-lead); color: var(--body); margin: 0; }

.guide-jump { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: var(--sp-6); }
.guide-jump a {
  display: inline-flex; align-items: baseline; gap: .5rem;
  padding: .5rem .95rem; border: 1px solid var(--line); border-radius: 999px;
  font-family: var(--font-head); font-weight: 600; font-size: .85rem; color: var(--navy);
  transition: background .22s var(--ease), border-color .22s, color .22s;
}
.guide-jump a:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.guide-jump span { font-size: var(--fs-micro); color: var(--muted); }
.guide-jump a:hover span { color: rgba(255,255,255,.6); }

.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-5); }

.guide-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.guide-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--teal-100); }
.guide-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--tint); }
.guide-card__media img { width: 100%; height: 100%; object-fit: cover; transition: scale .5s var(--ease); }
.guide-card:hover .guide-card__media img { scale: 1.04; }
.guide-card__body { display: flex; flex-direction: column; flex: 1; padding: var(--sp-5); }
.guide-card__meta {
  font-family: var(--font-head); font-weight: 700; font-size: var(--fs-micro);
  letter-spacing: .14em; text-transform: uppercase; color: var(--teal); margin: 0 0 var(--sp-3);
}
.guide-card__meta span { color: var(--line); margin-inline: .3em; }
.guide-card h3 { font-size: var(--fs-h3); line-height: 1.3; margin: 0 0 var(--sp-3); }
.guide-card h3 a { color: var(--navy); }
/* The whole card is the link target; the heading's anchor is simply the one
   that carries the accessible name, so the rest of the card is decorative. */
.guide-card h3 a::after { content: ''; position: absolute; inset: 0; }
.guide-card { position: relative; }
.guide-card h3 a:hover { color: var(--teal-600); }
.guide-card__excerpt { font-size: .93rem; margin: 0 0 var(--sp-4); }
.guide-card__go {
  margin-top: auto; display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-head); font-weight: 700; font-size: var(--fs-sm);
  letter-spacing: .04em; color: var(--teal-600);
}
.guide-card__go svg { width: 1.05em; height: 1.05em; transition: transform .25s var(--ease); }
.guide-card:hover .guide-card__go svg { transform: translateX(4px); }

/* --- Empty -------------------------------------------------------------- */
.empty { text-align: center; max-width: 640px; margin-inline: auto; padding: var(--sp-8) 0; }
.empty--404 { padding-block: clamp(3rem, 8vw, 6rem); }
.empty--404 .mast__num { font-size: 1.1rem; }

/* --- Footer ------------------------------------------------------------- */
.site-footer { background: var(--navy-900); color: rgba(255,255,255,.66); font-size: .93rem; }
.site-footer__top {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-6);
  padding: clamp(2.5rem, 5vw, 4.5rem) 0; border-bottom: 1px solid var(--line-dark);
}
.site-footer__top h2 { color: #fff; margin: 0; font-size: clamp(1.5rem, 2.4vw, 2.4rem); }
.site-footer__cta { display: flex; flex-wrap: wrap; gap: .75rem; }
.site-footer__grid { display: grid; grid-template-columns: 1.2fr .7fr 1.4fr 1fr; gap: clamp(1.5rem, 3vw, 3rem); padding: clamp(2.5rem, 5vw, 4rem) 0; }
@media (max-width: 1000px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .site-footer__grid { grid-template-columns: 1fr; } }
.site-footer h3 { color: #fff; font-size: var(--fs-micro); letter-spacing: .22em; text-transform: uppercase; margin-bottom: var(--sp-4); }
.site-footer a { color: rgba(255,255,255,.72); }
.site-footer a:hover { color: var(--teal); }
.site-footer__brand img { width: 180px; margin-bottom: var(--sp-4); }
.site-footer__brand p { font-size: .88rem; line-height: 1.7; }
.site-footer__social { display: flex; gap: .5rem; margin-top: var(--sp-4); }
.site-footer__social a { display: grid; place-items: center; width: 38px; height: 38px; background: rgba(255,255,255,.08); clip-path: var(--hex); transition: background .2s; }
.site-footer__social a:hover { background: var(--teal); color: #fff; }
.site-footer__social svg { width: 17px; height: 17px; }
.site-footer__col ul { list-style: none; margin: 0; padding: 0; }
.site-footer__col li { margin: 0 0 .5rem; font-size: .88rem; }
/* The nav labels are inconsistent in the source data — HOME and ABOUT US came
   through shouting, Gallery and Review did not. Settle it in presentation so
   the list reads as one set whatever the content says. */
.site-footer__caps a { text-transform: uppercase; letter-spacing: .06em; font-size: .82rem; }
.site-footer__two { columns: 2 140px; column-gap: 1.5rem; }
.site-footer address { font-style: normal; margin-bottom: var(--sp-4); line-height: 1.7; font-size: .88rem; }
.site-footer__hours { color: var(--teal); font-weight: 600; }
.site-footer__bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; padding: var(--sp-4) 0; border-top: 1px solid var(--line-dark); font-size: .8rem; }
.site-footer__bar p { margin: 0; }

/* --- Mobile call bar -----------------------------------------------------
   Phones only. Replaces the top ribbon: the same three things a visitor
   actually wants from a clinic — reach us, find us, book — pinned where the
   thumb already is instead of parked above the fold where nobody taps.
   ------------------------------------------------------------------------ */
.callbar { display: none; }
@media (max-width: 640px) {
  .callbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    /* Four doors now. "Book now" keeps the widest column because it is the
       one the page is trying to produce; the other three are equal because
       ranking Call above WhatsApp assumes something about the visitor that
       a clinic full of tourists cannot assume. */
    display: grid; grid-template-columns: 1fr 1fr 1fr 1.35fr;
    height: calc(60px + env(safe-area-inset-bottom));
    background: #fff; border-top: 1px solid var(--line);
    box-shadow: 0 -6px 24px rgba(7,47,69,.14);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .callbar__item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem;
    height: 100%; padding: .5rem .3rem; color: var(--navy);
    font-family: var(--font-head); font-weight: 700; font-size: .64rem;
    letter-spacing: .1em; text-transform: uppercase; text-align: center;
  }
  .callbar__item + .callbar__item { border-left: 1px solid var(--line); }
  .callbar__item svg { width: 19px; height: 19px; }
  .callbar__item--primary { background: var(--teal); border-left-color: var(--teal); }
  .callbar__item--primary, .callbar__item--primary:hover { color: #fff; }
  /* Only the glyph carries WhatsApp's green. The mark is what people
     recognise; a whole green button would compete with "Book now" for the
     one action this bar is trying to produce, and #25D366 is too light to
     carry 10px uppercase label text at readable contrast anyway. */
  .callbar__item--wa svg { color: #25d366; }

  /* Nothing at the end of the page may hide behind the bar. */
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
}

/* --- Chat ----------------------------------------------------------------
   Ours, not a vendor's: no embedded iframe, so it inherits the type, the
   palette and the hexagon motif like everything else on the page.
   ------------------------------------------------------------------------ */
/* z-index below .site-header's 100 on purpose. The header is sticky with a
   z-index of its own, which makes it a stacking context, so the mobile menu
   sheet inside it can never rise above 100 however high its own value goes.
   Anything fixed to a corner therefore has to sit underneath, or it punches
   through the open menu. The panel is sized to clear the header instead. */
.chat { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 90; }

/* A labelled pill, not the hexagon the rest of the site uses for round
   controls: this is the one button on the page whose job is to be recognised
   by someone who has used the clinic's old Wix widget, and "Let's Chat!" is
   what they are looking for. Two grid columns — the icons stack in the first
   (both are placed at 1 / 1), the label sits in the second. */
.chat__launcher {
  position: relative; display: inline-grid; grid-template-columns: 26px auto;
  align-items: center; gap: .6rem; min-height: 56px; padding: 0 1.4rem 0 1.15rem;
  border: 0; cursor: pointer; color: #fff; background: var(--teal);
  border-radius: 10px; box-shadow: var(--shadow);
  font: inherit; font-size: 1.06rem; font-weight: 600; line-height: 1;
  transition: background .2s var(--ease), transform .2s var(--ease), padding .2s var(--ease);
}
.chat__launcher:hover { background: var(--navy); transform: translateY(-2px); }
.chat__launcher svg { width: 26px; height: 26px; }
.chat__launcher-label { grid-column: 2; white-space: nowrap; }
/* Open: drop the label so the pill stops inviting a conversation the visitor
   has already started, and stops crowding the panel it belongs to. Clipped
   rather than removed — it is the button's accessible name. */
.chat.is-expanded .chat__launcher { grid-template-columns: 26px; padding: 0 1.15rem; }
.chat.is-expanded .chat__launcher-label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
}
.chat__launcher-open, .chat__launcher-close { display: grid; place-items: center; grid-area: 1 / 1; }
.chat__launcher-close { opacity: 0; transform: rotate(-90deg) scale(.6); transition: opacity .2s var(--ease), transform .2s var(--ease); }
.chat__launcher-open { transition: opacity .2s var(--ease), transform .2s var(--ease); }
.chat.is-expanded .chat__launcher-open { opacity: 0; transform: rotate(90deg) scale(.6); }
.chat.is-expanded .chat__launcher-close { opacity: 1; transform: none; }

/* One unread reply is worth a dot, not a number nobody reads. It hangs off
   .chat rather than the launcher because clip-path clips an element's
   pseudo-elements and its box-shadow too — on the hexagon the dot came out
   with its corners shaved and no ring at all. */
.chat.has-unread::after {
  content: ''; position: absolute; top: 0; right: 2px; width: 12px; height: 12px;
  border-radius: 50%; background: #ff5a5f; box-shadow: 0 0 0 2px #fff;
}

.chat__panel {
  position: absolute; right: 0; bottom: calc(60px + .75rem);
  display: flex; flex-direction: column; width: 370px;
  height: min(520px, calc(100vh - var(--header-h) - 6rem));
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.chat__panel[hidden] { display: none; }

.chat__head { display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem; background: var(--navy); color: #fff; }
.chat__avatar { display: grid; place-items: center; width: 38px; height: 38px; flex: none; background: var(--teal); clip-path: var(--hex); }
.chat__avatar svg { width: 19px; height: 19px; }
.chat__ident { min-width: 0; }
.chat__name { margin: 0; font-family: var(--font-head); font-weight: 700; font-size: .88rem; }
.chat__status { display: flex; align-items: center; gap: .4em; margin: .1rem 0 0; font-size: .72rem; color: rgba(255,255,255,.7); }
.chat__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex: none; }
.chat__dot.is-on { background: var(--green); }
.chat__close { margin-left: auto; border: 0; background: none; color: rgba(255,255,255,.75); cursor: pointer; padding: .25rem; }
.chat__close:hover { color: #fff; }
.chat__close svg { width: 18px; height: 18px; }

/* min-height:0 so the log is what gives when the panel is short — a flex item
   defaults to its content as a floor and would otherwise push the composer
   out of the panel's hidden overflow. */
.chat__log { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .55rem; background: var(--tint); }
.chat__msg { display: flex; flex-direction: column; max-width: 82%; }
.chat__msg--me { align-self: flex-end; align-items: flex-end; }
.chat__msg--them { align-self: flex-start; }
.chat__msg--sys { align-self: center; max-width: 100%; }
.chat__bubble {
  margin: 0; padding: .6rem .8rem; font-size: .88rem; line-height: 1.5;
  border-radius: 12px; white-space: pre-wrap; overflow-wrap: anywhere;
}
.chat__msg--them .chat__bubble { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 3px; color: var(--ink); }
.chat__msg--me .chat__bubble { background: var(--teal); color: #fff; border-bottom-right-radius: 3px; }
.chat__msg--sys .chat__bubble { background: none; color: var(--muted); font-size: .76rem; text-align: center; padding: .2rem 0; }
.chat__time { margin-top: .15rem; font-size: .65rem; color: var(--muted); }

.chat__typing .chat__bubble { display: flex; gap: 4px; padding: .75rem .8rem; }
.chat__typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: chat-blink 1.2s infinite; }
.chat__typing i:nth-child(2) { animation-delay: .18s; }
.chat__typing i:nth-child(3) { animation-delay: .36s; }
@keyframes chat-blink { 0%, 60%, 100% { opacity: .28; } 30% { opacity: 1; } }

.chat__quick { display: flex; flex-wrap: wrap; gap: .4rem; padding: .6rem 1rem 0; background: #fff; }
.chat__chip {
  border: 1px solid var(--line); background: #fff; color: var(--navy); cursor: pointer;
  padding: .35rem .7rem; border-radius: 999px; font: inherit; font-size: .74rem;
  transition: border-color .18s, color .18s;
}
.chat__chip:hover { border-color: var(--teal); color: var(--teal-600); }

/* initChat swaps the intake form for the composer with the `hidden`
   attribute. A display value set by class beats the UA sheet's [hidden]
   rule, so every one of these blocks has to opt back out explicitly or the
   panel shows both halves at once. */
.chat__intake[hidden], .chat__form[hidden], .chat__quick[hidden] { display: none; }

/* While the intake is up there is no conversation yet — only the greeting —
   so the transcript gives most of the panel back to the form. Without this
   the log keeps its flex:1 share and the fields are squeezed into a strip
   the visitor has to scroll to fill in. */
.chat.is-intake .chat__log { flex: 0 1 auto; max-height: 40%; }

/* The extra height is guarded by min-height, and the guard is the point: the
   short-screen rule further down switches the panel to top/bottom anchoring
   with `height: auto`, and an unguarded `.chat.is-intake .chat__panel` beats
   it on specificity — which pins a 600px panel inside a 400px landscape
   phone and cuts the submit button off the bottom of the screen. */
@media (min-height: 521px) {
  .chat.is-intake .chat__panel { height: min(600px, calc(100vh - var(--header-h) - 6rem)); }
}

/* ── Intake ──────────────────────────────────────────────────────────────
   Shown once, between the greeting and the first message. It scrolls on its
   own rather than growing the panel: on a short screen the send button has
   to stay reachable without the whole page moving. */
.chat__intake {
  display: flex; flex-direction: column; gap: .5rem;
  padding: .75rem 1rem .9rem; background: #fff;
  overflow-y: auto; flex: 0 1 auto; min-height: 0;
  border-top: 1px solid var(--line);
}
.chat__intake-lead { margin: 0 0 .1rem; font-size: .78rem; line-height: 1.5; color: var(--muted); }
.chat__field { display: flex; flex-direction: column; gap: .2rem; }
.chat__field > span { font-size: .72rem; font-weight: 600; color: var(--navy); letter-spacing: .01em; }
.chat__field > span i { font-style: normal; font-weight: 400; color: var(--muted); }
.chat__field input,
.chat__field select,
.chat__field textarea {
  font: inherit; font-size: .85rem; color: var(--ink); background: #fff;
  padding: .45rem .6rem; border: 1px solid var(--line); border-radius: var(--r-lg);
  width: 100%; resize: none;
}
.chat__field input:focus,
.chat__field select:focus,
.chat__field textarea:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color: transparent; }
.chat__intake-send {
  margin-top: .15rem; border: 0; background: var(--teal); color: #fff; cursor: pointer;
  font: inherit; font-size: .85rem; font-weight: 700; padding: .6rem 1rem;
  border-radius: var(--r-lg); transition: background .18s;
}
.chat__intake-send:hover { background: var(--navy); }
.chat__intake.is-busy .chat__intake-send { opacity: .6; pointer-events: none; }
.chat__intake-error { margin: 0; font-size: .76rem; color: #c0392b; }
.chat__intake-error[hidden] { display: none; }
.chat__intake-note { margin: 0; font-size: .68rem; color: var(--muted); text-align: center; }

/* The honeypot. Off-screen rather than display:none, because a bot worth
   worrying about skips fields that are not rendered at all. aria-hidden and
   tabindex="-1" in the markup keep it away from assistive tech and the tab
   order, so no human ever meets it. */
.chat__hp {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; opacity: 0; pointer-events: none;
}

.chat__form { display: flex; align-items: flex-end; gap: .5rem; padding: .6rem 1rem .5rem; background: #fff; }
.chat__input {
  flex: 1 1 auto; min-width: 0; resize: none; font: inherit; font-size: .88rem; line-height: 1.45;
  padding: .55rem .7rem; border: 1px solid var(--line); border-radius: var(--r-lg); color: var(--ink);
  max-height: 120px;
}
.chat__input:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color: transparent; }
.chat__send {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px;
  border: 0; background: var(--teal); color: #fff; cursor: pointer; border-radius: var(--r-lg);
  transition: background .18s;
}
.chat__send:hover { background: var(--navy); }
.chat__send svg { width: 18px; height: 18px; }
.chat__foot { margin: 0; padding: 0 1rem .8rem; font-size: .72rem; color: var(--muted); background: #fff; }
.chat__foot a { color: var(--teal-600); font-weight: 600; }
.chat__foot-sep { margin: 0 .4rem; opacity: .5; }
/* inline-flex, not inline: the glyph and the word have to sit on one line
   and stay together when the panel is narrow. */
.chat__foot-wa { display: inline-flex; align-items: center; gap: .28rem; }
.chat__foot-wa svg { width: 14px; height: 14px; color: #25d366; }
.contact__wa { display: inline-flex; align-items: center; gap: .4rem; }

@media (max-width: 640px) {
  /* Clear of the call bar, and the panel becomes a sheet rather than a card. */
  .chat { right: .9rem; bottom: calc(60px + env(safe-area-inset-bottom) + .75rem); }
  .chat__panel {
    position: fixed; left: .6rem; right: .6rem; width: auto;
    bottom: calc(60px + env(safe-area-inset-bottom) + .75rem);
    height: min(70vh, calc(100vh - var(--header-h) - 7rem));
  }
}
@supports (height: 100dvh) {
  @media (max-width: 640px) {
    .chat__panel { height: min(70dvh, calc(100dvh - var(--header-h) - 7rem)); }
  }
}

/* A phone held sideways is 850px WIDE and 390px TALL, so every max-width rule
   above misses it while the vertical budget collapses. Bottom-anchoring a
   card there leaves less room than the head, chips, composer and footer need,
   and overflow:hidden then eats the composer — you can read the chat but not
   answer it. Above this height the bottom-anchored card always fits. */
@media (max-height: 520px) {
  .chat__panel {
    position: fixed; top: .5rem; bottom: .5rem; height: auto;
    right: 1.2rem; left: auto; width: min(370px, calc(100vw - 2.4rem));
  }
  /* The chips are the one part worth its space only when there is space. */
  .chat__quick { display: none; }
}
@media (max-height: 520px) and (max-width: 640px) {
  .chat__panel { left: .6rem; right: .6rem; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .chat__launcher, .chat__launcher-open, .chat__launcher-close { transition: none; }
  .chat__typing i { animation: none; opacity: .5; }
}

/* --- Back to top -------------------------------------------------------- */
.to-top {
  position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 70; width: 48px; height: 48px;
  display: grid; place-items: center; background: var(--teal); color: #fff; clip-path: var(--hex);
  rotate: -90deg; opacity: 0; pointer-events: none; transition: opacity .25s var(--ease), background .2s;
}
.to-top.is-visible { opacity: 1; pointer-events: auto; }
.to-top:hover { background: var(--navy); color: #fff; }
.to-top svg { width: 20px; height: 20px; }
/* Stacked above the chat launcher so the two never sit on top of each other. */
.to-top { bottom: calc(1.2rem + 60px + .7rem); }
/* On a phone there is a call bar as well, so this one moves to the far side
   rather than making a three-high tower in the corner. */
@media (max-width: 640px) {
  .to-top { left: 1rem; right: auto; bottom: calc(60px + env(safe-area-inset-bottom) + 1rem); }
}

/* Shorter travel on phones: a block sliding half a screen width reads as a
   glitch rather than as motion, and it costs more to paint. */
@media (max-width: 700px) {
  :root { --m-dur: .75s; --m-dur-slow: .95s; --m-rise: 30px; --m-slide: 24px; --m-scale: .96; }
}
/* No sideways travel on a phone. A full-width block starting 24px to the
   right is 24px wider than the viewport until it reveals, and the page can be
   dragged horizontally for as long as that lasts. */
@media (max-width: 560px) { :root { --m-slide: 0px; } }

/* --- Entrance motion ----------------------------------------------------
   Starting states and transitions are written into <head> by motionBoot() in
   src/lib.js — before the first paint, and only when the animation can run at
   all. The --m-* tokens at the top of this file tune them for this theme.
   ------------------------------------------------------------------------ */
[data-anim] { backface-visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  [data-anim] { opacity: 1 !important; transform: none !important; }
}

@media print {
  .site-header, .site-footer, .to-top, .callbar, .chat, .cta, .video, .map, .mast__bg { display: none !important; }
  body { color: #000; }
}