/* =========================================================
   Clinic Site Product — main stylesheet
   Mango Media Digital. Original work.

   REPLACES mellis.css. No rule, value or class name is copied
   from the Mellis theme. Layout ideas are fine; their code is
   not. Colour and type values come from
   _reference/AC_Design_Tokens.md, which records what the
   BROWSER computed — facts about a rendered page, not source.

   Class naming: c-<block>__<element>--<modifier>   (D5)

   ONE stylesheet. DFH loaded 24 (defect M9) and Font Awesome
   twice (M10). Budget: max 5 CSS files. Currently 1.

   CONTENTS
     1. Tokens
     2. Reset & base
     3. Layout primitives  (shell, section, grid)
     4. Utilities          (visually-hidden, skip link, icon)
     5. Buttons
     6. Social row
     7. Header + nav + dropdown
     8. Mobile nav panel
     9. Breadcrumb
    10. Footer
    11. Floating WhatsApp
    12. Scroll reveal / motion
   ========================================================= */


/* 1. TOKENS ----------------------------------------------- */

:root {
  /* Colour — overridden per client from theme.json, injected in base.njk.
     NOTE: --c-accent is what the eye reads as the brand (buttons, taglines,
     icons, counters). --c-base is the supporting tint. On the DFH source the
     accent is gold and the base is dusty rose; matching the hex values but
     swapping these two roles produces a site that is technically correct and
     visually wrong. */
  --c-base: #de968d;
  --c-base-rgb: 222, 150, 141;
  /* FOUR accent roles, not one. Overridden per client from theme.json.
       --c-accent          FILL only: buttons, badges, icon discs
       --c-accent-text     the same hue darkened, for text on white / tint
       --c-accent-on-dark  the same hue lightened, for text on the ink band
       --c-on-accent       the text colour that sits ON an accent fill
     Using --c-accent as text failed WCAG at 1.98:1 against a 4.5:1
     requirement, on all four themes. Never write `color: var(--c-accent)`. */
  --c-accent: #e2b146;
  --c-accent-rgb: 226, 177, 70;
  --c-accent-text: #916a17;
  --c-accent-text-rgb: 145, 106, 23;
  --c-accent-on-dark: #e2b146;
  --c-accent-on-dark-rgb: 226, 177, 70;
  --c-on-accent: #27252a;
  --c-ink: #27252a;
  --c-ink-rgb: 39, 37, 42;
  --c-surface: #ffffff;
  --c-tint: #fcf5f5;
  --c-field: #fdf4dc;

  /* Derived */
  --c-body: #5f5c63;
  --c-line: rgba(var(--c-ink-rgb), 0.12);
  --c-base-soft: rgba(var(--c-base-rgb), 0.12);
  --c-accent-soft: rgba(var(--c-accent-rgb), 0.16);

  /* Typography */
  --c-font-body: "Manrope", system-ui, -apple-system, sans-serif;
  --c-font-heading: "Libre Baskerville", Georgia, serif;
  --c-font-accent: "Parisienne", cursive;

  /* Fluid type scale — clamp() so phones never get desktop sizes */
  --c-fs-display: clamp(2.25rem, 1.4rem + 3.6vw, 4rem);
  --c-fs-h1:      clamp(1.9rem, 1.3rem + 2.4vw, 2.5rem);
  --c-fs-h2:      clamp(1.6rem, 1.2rem + 1.6vw, 2rem);
  --c-fs-h3:      clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  --c-fs-body:    1rem;
  --c-fs-sm:      0.875rem;
  --c-fs-xs:      0.75rem;

  /* Space */
  --c-space-xs: 0.5rem;
  --c-space-sm: 1rem;
  --c-space-md: 2rem;
  --c-space-lg: 4rem;
  --c-space-xl: clamp(3.5rem, 2rem + 6vw, 7.5rem);

  --c-shell: 1200px;
  --c-gutter: clamp(1rem, 0.5rem + 2vw, 2rem);

  --c-radius-sm: 4px;
  --c-radius-md: 12px;
  --c-radius-pill: 999px;

  --c-shadow-sm: 0 2px 8px rgba(var(--c-ink-rgb), 0.06);
  --c-shadow-md: 0 10px 30px rgba(var(--c-ink-rgb), 0.10);
  --c-shadow-lg: 0 10px 60px rgba(var(--c-ink-rgb), 0.14);

  --c-transition: 300ms ease;
  /* Logo display height. The header bar grows to fit it. Raised 50% on
     18 Aug (52px -> 78px) at Masud's request. */
  --c-logo-h: 78px;
  --c-header-h: 104px;
}


/* 2. RESET & BASE ----------------------------------------- */

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

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

body {
  margin: 0;
  font-family: var(--c-font-body);
  font-size: var(--c-fs-body);
  color: var(--c-body);
  background: var(--c-surface);
  line-height: 1.7;
  overflow-x: hidden;
}

body.is-nav-open { overflow: hidden; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--c-font-heading);
  color: var(--c-ink);
  line-height: 1.25;
  margin: 0 0 var(--c-space-sm);
  font-weight: 700;
}

h1 { font-size: var(--c-fs-h1); }
h2 { font-size: var(--c-fs-h2); }
h3 { font-size: var(--c-fs-h3); }

p  { margin: 0 0 var(--c-space-sm); }

img, svg, video, iframe { max-width: 100%; display: block; }
img { height: auto; }

a { color: var(--c-accent-text); text-decoration: none; transition: color var(--c-transition); }
a:hover { color: var(--c-ink); }

ul, ol { margin: 0; padding: 0; list-style: none; }

address { font-style: normal; }

/* Visible focus everywhere. The DFH original had none. */
:focus-visible {
  outline: 3px solid var(--c-accent-text);
  outline-offset: 3px;
  border-radius: var(--c-radius-sm);
}


/* 3. LAYOUT PRIMITIVES ------------------------------------ */

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

.c-section { padding-block: var(--c-space-xl); }
.c-section--tint { background: var(--c-tint); }
.c-section--ink  { background: var(--c-ink); color: rgba(255,255,255,0.75); }
.c-section--ink h1, .c-section--ink h2, .c-section--ink h3 { color: #fff; }


/* 4. UTILITIES -------------------------------------------- */

.c-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.c-skiplink {
  position: absolute;
  left: var(--c-space-sm);
  top: -100px;
  z-index: 200;
  background: var(--c-ink);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: var(--c-radius-sm);
  transition: top var(--c-transition);
}
.c-skiplink:focus { top: var(--c-space-sm); color: #fff; }

/* The icon sprite itself must never render */
.c-sprite { display: none; }

.c-icon {
  width: 1em; height: 1em;
  flex: none;
  fill: currentColor;
  stroke-width: inherit;
}


/* 5. BUTTONS ---------------------------------------------- */

.c-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.85rem 1.6rem;
  font-family: var(--c-font-body);
  font-size: var(--c-fs-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: var(--c-on-accent);
  background: var(--c-accent);
  border: 1px solid var(--c-accent);
  border-radius: var(--c-radius-pill);
  cursor: pointer;
  transition: background var(--c-transition), color var(--c-transition),
              border-color var(--c-transition), transform var(--c-transition);
}
.c-btn:hover {
  color: #fff;
  background: var(--c-ink);
  border-color: var(--c-ink);
  transform: translateY(-2px);
}
.c-btn .c-icon { font-size: 1.15em; }

.c-btn--ghost {
  color: var(--c-ink);
  background: transparent;
  border-color: currentColor;
}
.c-btn--ghost:hover { color: var(--c-on-accent); background: var(--c-accent); border-color: var(--c-accent); }

.c-btn--sm    { padding: 0.55rem 1.1rem; font-size: var(--c-fs-xs); }
.c-btn--block { display: flex; width: 100%; justify-content: center; }


/* 6. SOCIAL ROW ------------------------------------------- */

.c-social { display: flex; align-items: center; gap: 0.35rem; }

.c-social a {
  display: grid;
  place-items: center;
  width: 2rem; height: 2rem;
  font-size: 0.95rem;
  color: inherit;
  border-radius: 50%;
  transition: background var(--c-transition), color var(--c-transition);
}
.c-social a:hover { color: var(--c-on-accent); background: var(--c-accent); }


/* 7. HEADER ----------------------------------------------- */

.c-header__bar {
  background: var(--c-ink);
  color: rgba(255,255,255,0.72);
  font-size: var(--c-fs-xs);
}
.c-header__bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--c-space-sm);
  min-height: 44px;
  flex-wrap: wrap;
}
.c-header__meta { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.c-header__meta a {
  display: inline-flex; align-items: center; gap: 0.45em;
  color: inherit;
}
.c-header__meta a:hover { color: var(--c-accent-on-dark); }
.c-header__bar-end { display: flex; align-items: center; gap: 0.75rem; }
.c-header__bar-end .c-btn--ghost { color: #fff; border-color: rgba(255,255,255,0.35); }

/* Sticky is pure CSS — no scroll listener, no layout jank.
   JS only toggles .is-stuck for the shadow. */
.c-header__main {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-line);
  transition: box-shadow var(--c-transition);
}
.c-header.is-stuck .c-header__main { box-shadow: var(--c-shadow-md); }

.c-header__main-inner {
  display: flex;
  align-items: center;
  gap: var(--c-space-md);
  min-height: var(--c-header-h);
}

/* height, not max-height: the logo must be exactly this tall whatever its
   aspect ratio, so the header does not resize between clients. */
.c-header__logo img { width: auto; height: var(--c-logo-h); }

.c-header__actions { display: flex; align-items: center; gap: 0.75rem; margin-left: auto; }

.c-header__toggle {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  font-size: 1.5rem;
  color: var(--c-ink);
  background: transparent;
  border: 1px solid var(--c-line);
  border-radius: var(--c-radius-sm);
  cursor: pointer;
}


/* Desktop nav */

.c-nav { margin-left: auto; }
.c-nav__list { display: flex; align-items: center; gap: clamp(0.75rem, 1.6vw, 1.75rem); }

.c-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding-block: 1.5rem;
  font-size: var(--c-fs-sm);
  font-weight: 600;
  color: var(--c-ink);
  white-space: nowrap;
}
.c-nav__link:hover,
.c-nav__link[aria-current="page"] { color: var(--c-accent-text); }

.c-nav__item { position: relative; }
.c-nav__caret { font-size: 0.85em; transition: transform var(--c-transition); }

.c-nav__sub {
  position: absolute;
  top: 100%; left: -1rem;
  min-width: 250px;
  padding: 0.5rem 0;
  background: var(--c-surface);
  border-radius: var(--c-radius-md);
  box-shadow: var(--c-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--c-transition), transform var(--c-transition), visibility var(--c-transition);
}
.c-nav__item--has-sub:hover  .c-nav__sub,
.c-nav__item--has-sub:focus-within .c-nav__sub {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.c-nav__item--has-sub:hover .c-nav__caret { transform: rotate(180deg); }

.c-nav__sub a {
  display: block;
  padding: 0.55rem 1.25rem;
  font-size: var(--c-fs-sm);
  color: var(--c-ink);
}
.c-nav__sub a:hover { color: var(--c-accent-text); background: var(--c-tint); }

/* Below 1024px the desktop nav and top bar give way to the panel */
@media (max-width: 1023px) {
  .c-nav,
  .c-header__call,
  .c-header__bar { display: none; }
}
@media (min-width: 1024px) {
  .c-header__toggle { display: none; }
}

/* The 50% logo increase is a DESKTOP decision. At 78px the header bar has
   to be 104px tall, which is 16% of a 640px phone viewport — permanently,
   because the bar is sticky. Below the desktop breakpoint the logo is
   capped so the patient keeps their screen.
   Desktop 78px / 104px bar · mobile 62px / 88px bar (still 19% larger
   than the 52px it was). Raise the mobile value here if the bigger mark
   matters more than the screen space. */
@media (max-width: 1023px) {
  :root { --c-logo-h: 62px; --c-header-h: 88px; }
}


/* 8. MOBILE NAV PANEL ------------------------------------- */

.c-mobilenav { position: fixed; inset: 0; z-index: 300; }
.c-mobilenav[hidden] { display: none; }

.c-mobilenav__backdrop {
  position: absolute; inset: 0;
  background: rgba(var(--c-ink-rgb), 0.55);
  opacity: 0;
  transition: opacity var(--c-transition);
}
.c-mobilenav.is-open .c-mobilenav__backdrop { opacity: 1; }

.c-mobilenav__panel {
  position: absolute;
  inset-block: 0;
  right: 0;
  width: min(330px, 88vw);
  display: flex;
  flex-direction: column;
  gap: var(--c-space-md);
  padding: var(--c-space-md) var(--c-space-md) var(--c-space-lg);
  background: var(--c-surface);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform var(--c-transition);
}
.c-mobilenav.is-open .c-mobilenav__panel { transform: translateX(0); }

.c-mobilenav__head { display: flex; align-items: center; justify-content: space-between; }
.c-mobilenav__logo { height: calc(var(--c-logo-h) * 0.8); width: auto; }

.c-mobilenav__close {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  font-size: 1.35rem;
  color: var(--c-ink);
  background: var(--c-tint);
  border: 0; border-radius: 50%;
  cursor: pointer;
}

.c-mobilenav__list > li { border-bottom: 1px solid var(--c-line); }
.c-mobilenav__list > li > a {
  display: block;
  padding: 0.85rem 0;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--c-ink);
}
.c-mobilenav__list a[aria-current="page"] { color: var(--c-accent-text); }

.c-mobilenav__sub { padding: 0 0 0.85rem 0.9rem; border-left: 2px solid var(--c-accent-soft); }
.c-mobilenav__sub a { display: block; padding: 0.35rem 0; font-size: var(--c-fs-sm); color: var(--c-body); }

.c-mobilenav__foot { display: grid; gap: 0.6rem; margin-top: auto; }
.c-mobilenav__foot .c-social { justify-content: center; margin-top: 0.5rem; }


/* 9. BREADCRUMB ------------------------------------------- */

.c-breadcrumb { background: var(--c-tint); padding-block: 0.9rem; }
.c-breadcrumb__list {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.5rem;
  font-size: var(--c-fs-sm);
}
.c-breadcrumb__list li { display: flex; align-items: center; gap: 0.5rem; }
.c-breadcrumb__list li + li::before {
  content: "/";
  color: var(--c-line);
}
.c-breadcrumb__list a { color: var(--c-body); }
.c-breadcrumb__list a:hover { color: var(--c-accent-text); }
.c-breadcrumb__list [aria-current="page"] { color: var(--c-ink); font-weight: 600; }


/* 10. FOOTER ---------------------------------------------- */

.c-footer {
  position: relative;
  margin-top: var(--c-space-xl);
  background: var(--c-ink);
  color: rgba(255,255,255,0.68);
  font-size: var(--c-fs-sm);
  overflow: hidden;
}

/* Decorative shapes as CSS gradients — the theme shipped PNGs; we do not use them. */
.c-footer__shape {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(38rem 22rem at 8% -10%,  rgba(var(--c-base-rgb), 0.20), transparent 70%),
    radial-gradient(30rem 20rem at 104% 108%, rgba(var(--c-base-rgb), 0.14), transparent 70%);
}

.c-footer__grid {
  position: relative;
  display: grid;
  gap: var(--c-space-md);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  padding-block: var(--c-space-xl) var(--c-space-lg);
}
.c-footer__col--brand { max-width: 34ch; }
.c-footer__logo img { height: var(--c-logo-h); width: auto; margin-bottom: var(--c-space-sm); }

/* The footer sits on the ink band, and this client's logo is dark ink
   (measured luminance 48/255) — invisible there. With no light variant in
   client.json, render the mark as solid white. Any colour in the logo is
   lost, which is why clinic.logoLight exists as the better answer. */
.c-footer__logo--invert img { filter: brightness(0) invert(1); }
.c-footer__blurb { margin-bottom: var(--c-space-sm); }

.c-footer__heading {
  margin-bottom: var(--c-space-sm);
  font-size: 1.125rem;
  color: #fff;
}

.c-footer__links a,
.c-footer__contact a,
.c-footer .c-social a { color: rgba(255,255,255,0.68); }
.c-footer__links a:hover,
.c-footer__contact a:hover { color: var(--c-accent-on-dark); }
.c-footer__links li { padding-block: 0.3rem; }
.c-footer__links a[aria-current="page"] { color: var(--c-accent-on-dark); }

.c-footer__contact li,
.c-footer__hours li {
  display: flex;
  gap: 0.6rem;
  padding-block: 0.4rem;
}
.c-footer__contact .c-icon,
.c-footer__hours .c-icon { margin-top: 0.45em; color: var(--c-accent-on-dark); }

.c-footer__hours li { flex-wrap: wrap; }
.c-footer__days { flex: 1 1 auto; }
.c-footer__time { color: #fff; font-weight: 600; }

.c-footer__bottom {
  position: relative;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.c-footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem var(--c-space-md);
  align-items: center;
  justify-content: space-between;
  padding-block: var(--c-space-sm);
  font-size: var(--c-fs-xs);
}
.c-footer__bottom p { margin: 0; }
.c-footer__credit a { color: rgba(255,255,255,0.68); }
.c-footer__credit a:hover { color: var(--c-accent-on-dark); }


/* 11. FLOATING WHATSAPP ----------------------------------- */

.c-whatsapp {
  position: fixed;
  right: clamp(0.75rem, 2vw, 1.5rem);
  bottom: clamp(0.75rem, 2vw, 1.5rem);
  z-index: 90;
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  font-size: 1.85rem;
  color: #fff;
  background: #25d366;
  border-radius: 50%;
  box-shadow: var(--c-shadow-md);
  transition: transform var(--c-transition);
}
.c-whatsapp:hover { color: #fff; transform: scale(1.08); }


/* 12. MOTION ---------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms ease, transform 700ms ease;
}
[data-reveal].is-revealed { opacity: 1; transform: none; }

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


/* --- component styles still to come ---------------------- */
/* c-hero, c-about, c-services, c-counters, c-specialist,
   c-results, c-testimonials, c-blog, c-gallery, c-map,
   c-form, c-page-header                                    */


/* =========================================================
   13. SHARED SECTION FURNITURE
   ========================================================= */

.c-eyebrow {
  margin: 0 0 0.35rem;
  font-family: var(--c-font-accent);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--c-accent-text);
  letter-spacing: 0.02em;
}

.c-sectionhead { max-width: 46rem; margin: 0 auto var(--c-space-lg); text-align: center; }
.c-sectionhead h2 { margin: 0; }

.c-cardgrid {
  display: grid;
  gap: var(--c-space-md);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}


/* =========================================================
   14. CAROUSEL  — one controller, four uses
   CSS scroll-snap. Replaces Swiper, Owl, BxSlider, Tiny
   Slider and Vegas (defect M9). With JS off it stays a
   swipeable strip; it never becomes an empty box.
   ========================================================= */

[data-carousel] { position: relative; }

[data-carousel-track] {
  display: flex;
  gap: var(--c-space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
[data-carousel-track]::-webkit-scrollbar { display: none; }
[data-carousel-slide] { scroll-snap-align: start; flex: none; }

@media (prefers-reduced-motion: reduce) {
  [data-carousel-track] { scroll-behavior: auto; }
}

.c-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: var(--c-space-md);
}
.c-carousel__dots button {
  width: 10px; height: 10px;
  padding: 0;
  background: rgba(var(--c-ink-rgb), 0.38);
  border: 0; border-radius: 50%;
  cursor: pointer;
  transition: background var(--c-transition), width var(--c-transition);
}
.c-carousel__dots button[aria-selected="true"] {
  width: 26px;
  background: var(--c-accent-text);
  border-radius: var(--c-radius-pill);
}

.c-carousel__arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: grid; place-items: center;
  width: 46px; height: 46px;
  font-size: 1.25rem;
  color: var(--c-ink);
  background: rgba(255,255,255,0.9);
  border: 0; border-radius: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  transition: background var(--c-transition), color var(--c-transition);
}
.c-carousel__arrow:hover { color: var(--c-on-accent); background: var(--c-accent); }
.c-carousel__arrow--prev { left: var(--c-gutter); }
.c-carousel__arrow--prev .c-icon { transform: rotate(180deg); }
.c-carousel__arrow--next { right: var(--c-gutter); }
@media (max-width: 767px) { .c-carousel__arrow { display: none; } }


/* =========================================================
   15. HERO
   ========================================================= */

.c-hero { position: relative; }

.c-hero__slide {
  position: relative;
  width: 100%;
  min-height: clamp(420px, 62vh, 660px);
  display: grid;
}
.c-hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.c-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(var(--c-ink-rgb), 0.55) 0%,
    rgba(var(--c-ink-rgb), 0.35) 45%,
    rgba(var(--c-ink-rgb), 0.60) 100%);
}
.c-hero__content {
  position: relative;
  z-index: 2;
  align-self: center;
  text-align: center;
  padding-block: var(--c-space-lg);
  color: #fff;
}
.c-hero__eyebrow {
  margin: 0 0 0.75rem;
  font-size: var(--c-fs-sm);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.9);
}
.c-hero__title {
  max-width: 18ch;
  margin: 0 auto var(--c-space-md);
  font-size: var(--c-fs-display);
  color: #fff;
  font-weight: 400;
}

/* --- showcase variant: the hero image IS the content -------------
   For clients whose hero is a designed graphic with its own text baked
   in — a before/after grid, a treatment menu, a poster.

   MOBILE  (<768px): copy stacked ABOVE the image. The portrait crop has
   no empty band; its cards start near the top, so overlaying would sit
   on the first panel.

   DESKTOP (>=768px): copy sits INSIDE the graphic's own empty band.
   That band was measured, not guessed — the top 20.9% of the desktop
   file, above the five cards. The image scales proportionally, so the
   band is always that same share of it and the copy can never reach
   the cards at any width.

   No black scrim anywhere. The artwork is light blush (#f9ece2); a dark
   wash turned it to mud. A white veil lifts only the band. */

.c-hero__slide--showcase {
  min-height: 0;
  display: block;
  background: var(--c-tint);
  padding-block: var(--c-space-lg);
}

.c-hero__showcase-media { position: relative; }

.c-hero__showcase-copy { text-align: center; margin-bottom: var(--c-space-md); }
.c-hero__slide--showcase .c-hero__title { color: var(--c-ink); margin-inline: auto; }

/* Ink, NOT the gold accent. Measured against the darkest pixel in the
   band (rgb 190,162,150 — the decorative swirl): ink scores 6.36:1,
   the gold only 2.06:1. Both lines are ink so the worst case passes. */
.c-hero__slide--showcase .c-hero__eyebrow {
  color: var(--c-ink);
  opacity: 0.75;
  font-family: var(--c-font-body);
  font-size: var(--c-fs-sm);
  letter-spacing: 0.08em;
  text-transform: none;
}

/* The CTA sits on pale blush, and a gold pill on pale blush has almost no
   edge — measured 1.57:1 where WCAG 1.4.11 wants 3:1 for a control's
   boundary. The label itself is fine (7.67:1 on the fill); it is the
   BUTTON that stops reading as a button. A thin ink border restores the
   edge on every theme without touching the brand fill. */
.c-hero__slide--showcase .c-btn { border-color: var(--c-ink); }

.c-hero__showcase-img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 78vh;
  margin-inline: auto;
  border-radius: var(--c-radius-md);
}

.c-hero__showcase-veil { display: none; }

@media (min-width: 768px) {
  .c-hero__slide--showcase { padding-block: var(--c-space-md); }

  /* The image now fills the width, so the band keeps a predictable height.
     max-height is dropped here: the desktop crop is landscape and the
     78vh cap would shrink it and take the band with it. */
  .c-hero__showcase-img { width: 100%; max-height: none; }

  /* THE BAND. 20.9% of the image height, pinned to its top. The copy is
     centred inside it and cannot extend past it, so the five cards below
     stay untouched at every width from 768 to 1920. */
  .c-hero__showcase-copy {
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 2;
    height: var(--c-showcase-band, 20.9%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    margin-bottom: 0;
    padding-inline: var(--c-gutter);
  }

  /* Type scaled so the whole block fits the band at its SHORTEST — 85px
     at 768px wide. Values verified at 768, 1024, 1280 and 1920. */
  .c-hero__slide--showcase .c-hero__title {
    margin: 0;
    font-size: clamp(1.125rem, 2.6vw, 2.25rem);
    line-height: 1.15;
    white-space: nowrap;
  }
  .c-hero__slide--showcase .c-hero__eyebrow {
    margin: 0;
    font-size: clamp(0.6875rem, 1.05vw, 0.875rem);
    /* A subtitle long enough to wrap would push the block out of the band
       and onto the cards. One line, and it shrinks to fit the width. */
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
  }
  .c-hero__slide--showcase .c-btn--lg {
    padding: clamp(0.4rem, 0.7vw, 0.7rem) clamp(0.9rem, 1.6vw, 1.5rem);
    font-size: clamp(0.6875rem, 0.95vw, 0.8125rem);
  }

  /* White, fading to nothing well before the cards begin. */
  .c-hero__showcase-veil {
    display: block;
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 1;
    height: calc(var(--c-showcase-band, 20.9%) + 5%);
    border-radius: var(--c-radius-md) var(--c-radius-md) 0 0;
    background: linear-gradient(180deg,
      rgba(255,255,255,0.78) 0%,
      rgba(255,255,255,0.62) 55%,
      rgba(255,255,255,0) 100%);
  }
}

/* static-split variant — same data, no motion */
.c-hero--split { background: var(--c-tint); }
.c-hero__split-inner {
  display: grid;
  gap: var(--c-space-lg);
  align-items: center;
  padding-block: var(--c-space-xl);
}
.c-hero__split-copy .c-hero__title { margin-inline: 0; color: var(--c-ink); text-align: left; }
.c-hero__split-media img { border-radius: var(--c-radius-md); box-shadow: var(--c-shadow-lg); }
@media (min-width: 900px) {
  .c-hero__split-inner { grid-template-columns: 1fr 1fr; }
}


/* =========================================================
   16. ABOUT + CHECKLIST
   ========================================================= */

.c-about__grid { display: grid; gap: var(--c-space-lg); align-items: center; }
@media (min-width: 900px) { .c-about__grid { grid-template-columns: 0.85fr 1fr; } }

.c-about__media img {
  border-radius: var(--c-radius-md);
  box-shadow: var(--c-shadow-lg);
}
.c-about__title { margin-bottom: var(--c-space-sm); }
.c-about__lead { font-size: 1.0625rem; }
.c-about__sub { margin: var(--c-space-md) 0 var(--c-space-sm); font-size: 1.125rem; }

.c-checklist {
  display: grid;
  gap: 0.4rem var(--c-space-md);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin-bottom: var(--c-space-md);
}
.c-checklist li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: var(--c-fs-sm); }
.c-checklist .c-icon {
  margin-top: 0.45em;
  padding: 3px;
  font-size: 0.7rem;
  color: var(--c-on-accent);
  background: var(--c-accent);
  border-radius: 50%;
}

.c-about__actions,
.c-specialist__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--c-space-md);
}

.c-callout { display: inline-flex; align-items: center; gap: 0.75rem; color: inherit; }
.c-callout__icon {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  font-size: 1.1rem;
  color: var(--c-accent-text);
  background: var(--c-accent-soft);
  border-radius: 50%;
}
.c-callout__text { display: grid; line-height: 1.35; }
.c-callout__label { font-size: var(--c-fs-xs); letter-spacing: 0.14em; text-transform: uppercase; }
.c-callout__value { font-family: var(--c-font-heading); font-size: 1.0625rem; color: var(--c-ink); }

.c-linkicon { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--c-ink); font-weight: 600; }
.c-linkicon .c-icon {
  display: grid; place-items: center;
  width: 2.2rem; height: 2.2rem;
  padding: 0.55rem;
  color: var(--c-accent-text);
  background: var(--c-accent-soft);
  border-radius: 50%;
  box-sizing: content-box;
}


/* =========================================================
   17. SERVICE CARD
   ========================================================= */

.c-services__cell { width: min(100%, 420px); }
.c-services__more { margin-top: var(--c-space-lg); text-align: center; }

.c-service-card { height: 100%; }
.c-service-card__link {
  position: relative;
  display: block;
  height: 100%;
  min-height: 300px;
  overflow: hidden;
  border-radius: var(--c-radius-md);
  color: #fff;
}
.c-service-card__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 600ms ease;
}
.c-service-card__link:hover .c-service-card__img { transform: scale(1.06); }
.c-service-card__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(var(--c-ink-rgb),0.15) 0%, rgba(var(--c-ink-rgb),0.85) 100%);
}
.c-service-card__body {
  position: relative;
  display: grid;
  gap: 0.5rem;
  align-content: end;
  height: 100%;
  padding: var(--c-space-md);
}
.c-service-card__title {
  font-family: var(--c-font-heading);
  font-size: 1.375rem;
  color: var(--c-accent-on-dark);
}
/* Truncation is CSS only. The full sentence stays in the HTML —
   DFH cut it server-side and shipped the "..." (defect m10). */
.c-service-card__text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--c-fs-sm);
  color: rgba(255,255,255,0.85);
}
.c-service-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  justify-self: start;
  margin-top: 0.5rem;
  padding: 0.6rem 1.2rem;
  font-size: var(--c-fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-ink);
  background: #fff;
  border-radius: var(--c-radius-pill);
  transition: background var(--c-transition), color var(--c-transition);
}
.c-service-card__link:hover .c-service-card__cta { color: var(--c-on-accent); background: var(--c-accent); }


/* =========================================================
   18. COUNTERS
   ========================================================= */

.c-counters { padding-block: var(--c-space-lg); background: var(--c-ink); color: #fff; }
.c-counters__grid {
  display: grid;
  gap: var(--c-space-md);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  text-align: center;
}
.c-counters__item + .c-counters__item { border-left: 1px solid rgba(255,255,255,0.14); }
@media (max-width: 640px) { .c-counters__item + .c-counters__item { border-left: 0; } }
.c-counters__icon { width: 2.25rem; height: 2.25rem; margin: 0 auto 0.5rem; color: var(--c-accent-on-dark); }
.c-counters__value {
  margin: 0;
  font-family: var(--c-font-heading);
  font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem);
  line-height: 1.1;
  color: #fff;
}
.c-counters__label { margin: 0; font-size: var(--c-fs-sm); color: rgba(255,255,255,0.7); }


/* =========================================================
   19. SPECIALIST
   ========================================================= */

.c-specialist__grid { display: grid; gap: var(--c-space-lg); align-items: center; }
@media (min-width: 900px) { .c-specialist__grid { grid-template-columns: 0.8fr 1fr; } }

/* Square with soft corners — the SAME treatment as the about-section
   image. One image style across the site, not an ellipse here and a
   rounded rectangle there. The blush blob behind it is gone with the
   circle; a shadow does that job for both. */
.c-specialist__media { justify-self: center; }
.c-specialist__media img {
  width: min(100%, 380px);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--c-radius-md);
  box-shadow: var(--c-shadow-lg);
}

.c-specialist__name { margin-bottom: 0.15rem; }
.c-specialist__role { margin-bottom: var(--c-space-sm); font-size: var(--c-fs-sm); }
.c-specialist__sub {
  margin-bottom: 0.25rem;
  font-size: var(--c-fs-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-ink);
}
.c-specialist__quote { font-family: var(--c-font-heading); font-size: 1.125rem; color: var(--c-ink); }


/* =========================================================
   20. RESULTS
   ========================================================= */

.c-results__item { width: min(100%, 340px); margin: 0; }
.c-results__item img { border-radius: var(--c-radius-md); box-shadow: var(--c-shadow-md); }
.c-results__item figcaption {
  padding-top: 0.75rem;
  font-size: var(--c-fs-sm);
  text-align: center;
}


/* =========================================================
   21. TESTIMONIALS
   ========================================================= */

.c-testimonials { padding-block: var(--c-space-xl); background: var(--c-ink); color: rgba(255,255,255,0.8); }
.c-testimonials__heading { margin-bottom: var(--c-space-lg); color: #fff; text-align: center; }
.c-testimonials__item {
  width: 100%;
  margin: 0;
  padding-inline: var(--c-gutter);
  text-align: center;
}
.c-testimonials__mark { width: 2.5rem; height: 2.5rem; margin: 0 auto 1rem; color: var(--c-accent-on-dark); opacity: 0.5; }
.c-testimonials__stars { display: flex; justify-content: center; gap: 0.2rem; margin-bottom: var(--c-space-sm); color: var(--c-accent-on-dark); }
.c-testimonials__stars .is-muted { color: rgba(255,255,255,0.25); }
.c-testimonials__quote {
  max-width: 52ch;
  margin: 0 auto var(--c-space-sm);
  font-family: var(--c-font-heading);
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.6;
  color: #fff;
}
.c-testimonials__who { display: grid; gap: 0.15rem; }
.c-testimonials__name { font-weight: 700; color: var(--c-accent-on-dark); }
.c-testimonials__role { font-size: var(--c-fs-xs); letter-spacing: 0.16em; text-transform: uppercase; }


/* =========================================================
   22. BLOG CARDS
   ========================================================= */

.c-bloglist__grid {
  display: grid;
  gap: var(--c-space-md);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

.c-blog-card {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--c-radius-md);
  overflow: hidden;
  transition: box-shadow var(--c-transition), transform var(--c-transition);
}
.c-blog-card:hover { box-shadow: var(--c-shadow-lg); transform: translateY(-4px); }
.c-blog-card__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.c-blog-card__date {
  position: absolute;
  top: calc(4 / 3 * 100% / 3);
  right: var(--c-space-sm);
  display: grid;
  place-items: center;
  padding: 0.5rem 0.75rem;
  line-height: 1.1;
  color: var(--c-on-accent);
  background: var(--c-accent);
  border-radius: var(--c-radius-sm);
  transform: translateY(-50%);
}
.c-blog-card__day { font-family: var(--c-font-heading); font-size: 1.125rem; }
.c-blog-card__month { font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; }

.c-blog-card__body { display: flex; flex-direction: column; gap: 0.5rem; padding: var(--c-space-md); }
.c-blog-card__title { margin: 0; font-size: 1.1875rem; }
.c-blog-card__title a { color: var(--c-ink); }
.c-blog-card__title a:hover { color: var(--c-accent-text); }
.c-blog-card__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  font-size: var(--c-fs-sm);
}
.c-blog-card__cta {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-top: auto;
  font-size: var(--c-fs-xs); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-accent-text);
}


/* =========================================================
   23. MAP + OPENING HOURS
   ========================================================= */

/* Superseded 18 Aug: the map + overlay-card band was replaced by the
   side-by-side chamber cards in section 31. Kept only for the plain map
   still used at the foot of the contact page. */
.c-maphours { position: relative; display: grid; }
.c-maphours__map {
  grid-area: 1 / 1;
  width: 100%;
  min-height: clamp(300px, 40vh, 440px);
  border: 0;
}


/* =========================================================
   24. PAGE HEADER (inner pages)
   ========================================================= */

.c-pagehead {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(220px, 30vh, 320px);
  text-align: center;
  color: #fff;
}
.c-pagehead__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.c-pagehead__scrim { position: absolute; inset: 0; background: rgba(var(--c-ink-rgb), 0.6); }
.c-pagehead__inner { position: relative; z-index: 2; padding: var(--c-space-md) var(--c-gutter); }
.c-pagehead__title { margin: 0; font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3rem); color: #fff; font-weight: 400; }

.c-pagehead__crumbs ol {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: var(--c-fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.c-pagehead__crumbs li { display: flex; align-items: center; gap: 0.5rem; }
.c-pagehead__crumbs li + li::before { content: "/"; color: rgba(255,255,255,0.45); }
.c-pagehead__crumbs a { color: rgba(255,255,255,0.8); }
.c-pagehead__crumbs a:hover { color: var(--c-accent-on-dark); }
.c-pagehead__crumbs [aria-current="page"] { color: var(--c-accent-on-dark); }


/* =========================================================
   25. ARTICLE (service + blog detail)
   ========================================================= */

.c-article__grid { display: grid; gap: var(--c-space-lg); align-items: start; }
@media (min-width: 900px) { .c-article__grid { grid-template-columns: minmax(0,1fr) 300px; } }

.c-article__hero { width: 100%; border-radius: var(--c-radius-md); margin-bottom: var(--c-space-md); }
.c-article__meta { font-size: var(--c-fs-sm); letter-spacing: 0.04em; }
.c-article__lead {
  font-family: var(--c-font-heading);
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--c-ink);
}
.c-article__body > p { max-width: 68ch; }

.c-article__cta {
  margin-top: var(--c-space-lg);
  padding: var(--c-space-md);
  background: var(--c-tint);
  border-radius: var(--c-radius-md);
}
.c-article__cta h2 { margin-top: 0; font-size: 1.375rem; }
.c-article__cta-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.c-factbox {
  padding: var(--c-space-md);
  background: var(--c-tint);
  border-radius: var(--c-radius-md);
  margin-bottom: var(--c-space-md);
}
.c-factbox__title { margin-top: 0; font-size: 1.125rem; }
.c-factbox dt { font-size: var(--c-fs-xs); letter-spacing: 0.14em; text-transform: uppercase; }
.c-factbox dd { margin: 0 0 0.75rem; font-weight: 600; color: var(--c-ink); }

.c-sidenav { padding: var(--c-space-md); border: 1px solid var(--c-line); border-radius: var(--c-radius-md); }
.c-sidenav__title { margin-top: 0; font-size: 1.125rem; }
.c-sidenav li { border-top: 1px solid var(--c-line); }
.c-sidenav li:first-child { border-top: 0; }
.c-sidenav a { display: block; padding: 0.55rem 0; font-size: var(--c-fs-sm); color: var(--c-body); }
.c-sidenav a:hover { color: var(--c-accent-text); }
.c-sidenav a[aria-current="page"] { color: var(--c-accent-text); font-weight: 700; }


/* =========================================================
   26. GALLERY + LIGHTBOX
   Replaces Magnific Popup. DFH linked straight to raw JPGs
   (defect M11).
   ========================================================= */

.c-gallery {
  display: grid;
  gap: var(--c-space-sm);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}
.c-gallery__link {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--c-radius-md);
}
.c-gallery__link img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 600ms ease; }
.c-gallery__link:hover img { transform: scale(1.07); }
.c-gallery__zoom {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 1.5rem;
  color: var(--c-on-accent);
  background: rgba(var(--c-accent-rgb), 0.9);
  opacity: 0;
  transition: opacity var(--c-transition);
}
.c-gallery__link:hover .c-gallery__zoom,
.c-gallery__link:focus-visible .c-gallery__zoom { opacity: 1; }

.c-lightbox {
  width: min(1100px, 94vw);
  max-width: none;
  padding: 0;
  background: transparent;
  border: 0;
  overflow: visible;
}
.c-lightbox::backdrop { background: rgba(0,0,0,0.86); }
.c-lightbox__figure { margin: 0; }
.c-lightbox__figure img {
  width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border-radius: var(--c-radius-md);
}
.c-lightbox__figure figcaption {
  padding-top: 0.75rem;
  font-size: var(--c-fs-sm);
  color: #fff;
  text-align: center;
}
.c-lightbox__close,
.c-lightbox__nav {
  position: absolute;
  display: grid; place-items: center;
  width: 46px; height: 46px;
  font-size: 1.25rem;
  color: var(--c-ink);
  background: #fff;
  border: 0; border-radius: 50%;
  cursor: pointer;
}
.c-lightbox__close { top: -58px; right: 0; }
.c-lightbox__nav { top: 50%; transform: translateY(-50%); }
.c-lightbox__nav--prev { left: -58px; }
.c-lightbox__nav--prev .c-icon { transform: rotate(180deg); }
.c-lightbox__nav--next { right: -58px; }
@media (max-width: 1220px) {
  .c-lightbox__nav--prev { left: 8px; }
  .c-lightbox__nav--next { right: 8px; }
}


/* =========================================================
   27. CONTACT + FORM
   DFH's form had no labels, no required attributes and no
   validation (defect C7).
   ========================================================= */

.c-contact__clinic { margin-bottom: var(--c-space-lg); text-align: center; }
.c-contact__grid { display: grid; gap: var(--c-space-lg); align-items: start; }
@media (min-width: 900px) { .c-contact__grid { grid-template-columns: 0.85fr 1.15fr; } }

.c-contact__title { margin-bottom: var(--c-space-sm); }
.c-contact__address { margin-bottom: var(--c-space-sm); }
.c-contact__email { margin-bottom: var(--c-space-md); }
.c-contact__hours { margin: var(--c-space-md) 0; }
.c-contact__hours dt { font-size: var(--c-fs-xs); letter-spacing: 0.14em; text-transform: uppercase; }
.c-contact__hours dd { margin: 0 0 0.6rem; font-weight: 600; color: var(--c-ink); }
.c-contact__details .c-social { margin-top: var(--c-space-sm); }
.c-contact__details .c-social a { background: var(--c-field); color: var(--c-ink); }
.c-contact__details .c-social a:hover { background: var(--c-accent); color: var(--c-on-accent); }

.c-form { display: grid; gap: var(--c-space-sm); }
.c-form__row { display: grid; gap: var(--c-space-sm); }
@media (min-width: 620px) { .c-form__row { grid-template-columns: 1fr 1fr; } }

.c-field { display: grid; gap: 0.3rem; }
.c-field--trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.c-field__label { font-size: var(--c-fs-sm); font-weight: 600; color: var(--c-ink); }
.c-field__input {
  width: 100%;
  padding: 0.9rem 1rem;
  font-family: inherit;
  font-size: var(--c-fs-body);
  color: var(--c-ink);
  background: var(--c-field);
  border: 1px solid transparent;
  border-radius: var(--c-radius-sm);
  transition: border-color var(--c-transition), background var(--c-transition);
}
.c-field__input:focus { border-color: var(--c-accent-text); outline-offset: 0; }
.c-field__input--area { resize: vertical; min-height: 9rem; }
.c-field__input[aria-invalid="true"] { border-color: #c0392b; background: #fdecea; }
.c-field__error { margin: 0; font-size: var(--c-fs-xs); font-weight: 600; color: #c0392b; }

.c-form__status { margin: 0; font-size: var(--c-fs-sm); font-weight: 600; }
.c-form__status.is-ok  { color: #1e7a45; }
.c-form__status.is-bad { color: #c0392b; }


/* =========================================================
   28. 404
   ========================================================= */

.c-notfound { text-align: center; }
.c-notfound__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }


/* =========================================================
   29. PRINT
   ========================================================= */

@media print {
  .c-header, .c-mobilenav, .c-whatsapp, .c-footer,
  .c-carousel__arrow, .c-carousel__dots, .c-maphours { display: none !important; }
  body { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}


/* =========================================================
   30. REELS / SOCIAL VIDEO  (click-to-load facade)

   No platform SDK, no third-party JS, no tracking pixel until
   the visitor presses play. The card is a local image and a
   button; main.js swaps in the iframe on click.
   Vertical 9:16 by default, since reels are shot vertically.
   ========================================================= */

.c-reels__grid {
  display: grid;
  gap: var(--c-space-md);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}

.c-reel {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--c-radius-md);
  transition: box-shadow var(--c-transition), transform var(--c-transition);
}
.c-reel:hover { box-shadow: var(--c-shadow-lg); transform: translateY(-4px); }

/* The facade and the iframe that replaces it must be the SAME size,
   or the page jumps when the visitor presses play. */
.c-reel__facade,
.c-reel__frame {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  border: 0;
}
.c-reels__item--wide .c-reel__facade,
.c-reels__item--wide .c-reel__frame { aspect-ratio: 16 / 9; }

.c-reel__facade {
  position: relative;
  padding: 0;
  background: var(--c-ink);
  cursor: pointer;
  overflow: hidden;
}
.c-reel__thumb {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 600ms ease;
}
.c-reel__facade:hover .c-reel__thumb { transform: scale(1.05); }

.c-reel__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(var(--c-ink-rgb), 0.10) 0%,
    rgba(var(--c-ink-rgb), 0.45) 100%);
}

.c-reel__play {
  position: absolute;
  top: 50%; left: 50%;
  display: grid; place-items: center;
  width: 62px; height: 62px;
  color: var(--c-on-accent);
  background: var(--c-accent);
  border-radius: 50%;
  box-shadow: var(--c-shadow-md);
  transform: translate(-50%, -50%);
  transition: transform var(--c-transition), background var(--c-transition);
}
.c-reel__play .c-icon { width: 1.75rem; height: 1.75rem; margin-left: 3px; }
.c-reel__facade:hover .c-reel__play { transform: translate(-50%, -50%) scale(1.1); }

.c-reel__body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: var(--c-space-sm);
}
.c-reel__title { margin: 0; font-size: 1rem; line-height: 1.4; }
.c-reel__source {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  font-size: var(--c-fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-accent-text);
}

.c-reels__more { margin-top: var(--c-space-lg); text-align: center; }

.c-reels__privacy {
  margin: var(--c-space-md) auto 0;
  max-width: 60ch;
  font-size: var(--c-fs-xs);
  text-align: center;
}

.c-reels__empty { max-width: 60ch; }


/* =========================================================
   31. CHAMBERS / LOCATIONS

   One card per chamber, side by side in a single row on
   desktop, stacked on a phone. Two chambers used to be two
   full-width bands — an enormous amount of homepage.

   The map sits ON TOP and the details UNDERNEATH. At half
   width an overlaid card covers most of the map it is sitting
   on; and the overlay was what broke originally, when a
   chamber with no map had nothing to sit inside. A card in
   normal flow cannot fall out of its container.
   ========================================================= */

.c-locations { padding-block: var(--c-space-xl); }

.c-locations__grid {
  display: grid;
  gap: var(--c-space-md);
  /* auto-fit: two chambers share the row, one chamber fills it,
     three wrap to a second row. No breakpoint per count. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.c-chambercard {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--c-radius-md);
  box-shadow: var(--c-shadow-sm);
  transition: box-shadow var(--c-transition);
}
.c-chambercard:hover { box-shadow: var(--c-shadow-md); }

.c-chambercard__map {
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 0;
  /* A map shorter than this is unreadable; taller wastes a phone screen. */
  min-height: 220px;
  max-height: 320px;
}

.c-chambercard__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: var(--c-space-md);
}
.c-chambercard__name { margin: 0; font-size: 1.25rem; overflow-wrap: anywhere; }

.c-chambercard__address {
  display: flex;
  gap: 0.5rem;
  font-size: var(--c-fs-sm);
}
.c-chambercard__address .c-icon { margin-top: 0.35em; color: var(--c-accent-text); }

.c-chambercard__meta { margin: 0; }
.c-chambercard__meta dt {
  font-size: var(--c-fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.c-chambercard__meta dd {
  margin: 0 0 0.6rem;
  font-weight: 600;
  color: var(--c-ink);
  overflow-wrap: anywhere;
}
.c-chambercard .c-btn { align-self: flex-start; margin-top: auto; }

@media (max-width: 400px) {
  /* 360px is what most Dhaka patients are on. Reclaim the padding. */
  .c-chambercard__body { padding: var(--c-space-sm); }
  .c-chambercard .c-btn { align-self: stretch; justify-content: center; }
}


/* =========================================================
   31b. CREDENTIALS

   Qualifications, appointments and fellowships as a scannable
   list rather than a paragraph. Someone checking whether a
   doctor is qualified should not have to read prose to find
   out. Used on the home section and on /specialist/.
   ========================================================= */

.c-creds { margin: 0 0 var(--c-space-md); }

.c-creds__item + .c-creds__item {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--c-line);
}

.c-creds__label {
  margin-bottom: 0.2rem;
  font-size: var(--c-fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-accent-text);
}
.c-creds__value {
  margin: 0;
  font-size: var(--c-fs-sm);
  color: var(--c-ink);
}

.c-creds__list { display: grid; gap: 0.35rem; }
.c-creds__list li { display: flex; gap: 0.55rem; align-items: flex-start; }
.c-creds__list .c-icon {
  margin-top: 0.4em;
  padding: 3px;
  font-size: 0.65rem;
  color: var(--c-on-accent);
  background: var(--c-accent);
  border-radius: 50%;
  box-sizing: content-box;
}


/* =========================================================
   32. BOOKING PAGE

   Health information is being typed into this page, so the
   layout has one job beyond looking right: make every field
   legible and every error obvious on a cheap phone.
   ========================================================= */

.c-booking__grid { display: grid; gap: var(--c-space-lg); align-items: start; }
@media (min-width: 900px) { .c-booking__grid { grid-template-columns: minmax(0,1fr) 300px; } }

.c-booking__form { margin-top: var(--c-space-md); }

/* --- grouped controls (patient type, concerns) --- */
.c-fieldset {
  margin: 0 0 var(--c-space-sm);
  padding: var(--c-space-sm) var(--c-space-md) var(--c-space-md);
  border: 1px solid var(--c-line);
  border-radius: var(--c-radius-md);
}
.c-fieldset__legend {
  padding-inline: 0.5rem;
  font-size: var(--c-fs-sm);
  font-weight: 700;
  color: var(--c-ink);
}

/* --- new / returning patient --- */
.c-choice { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.c-choice__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.1rem;
  font-size: var(--c-fs-sm);
  font-weight: 600;
  color: var(--c-ink);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--c-radius-pill);
  cursor: pointer;
  transition: border-color var(--c-transition), background var(--c-transition);
}
.c-choice__item:hover { border-color: var(--c-accent-text); }

/* The radio stays in the DOM and keeps its own focus ring — it is not
   hidden with display:none, which would take it out of the tab order. */
.c-choice__item input { accent-color: var(--c-accent-text); margin: 0; }
.c-choice__item:has(input:checked) {
  background: var(--c-tint);
  border-color: var(--c-accent-text);
}
.c-choice__item:has(input:focus-visible) {
  outline: 3px solid var(--c-accent-text);
  outline-offset: 2px;
}

/* --- repeatable concern rows --- */
.c-concern { display: flex; align-items: flex-end; gap: 0.5rem; }
.c-concern + .c-concern { margin-top: 0.6rem; }
.c-concern .c-field { flex: 1 1 auto; }

.c-concern__remove {
  flex: none;
  display: grid; place-items: center;
  width: 44px; height: 46px;
  font-size: 1rem;
  color: var(--c-body);
  background: var(--c-tint);
  border: 1px solid var(--c-line);
  border-radius: var(--c-radius-sm);
  cursor: pointer;
  transition: color var(--c-transition), background var(--c-transition);
}
.c-concern__remove:hover { color: #fff; background: #c0392b; border-color: #c0392b; }
.c-concern__remove[hidden] { display: none; }

.c-fieldset [data-concern-add] { margin-top: 0.75rem; }

/* --- hint text under a field --- */
.c-field__hint { margin: 0; font-size: var(--c-fs-xs); color: var(--c-body); }

/* Selects need the same treatment as inputs, plus a visible arrow —
   a bare select on Android renders almost invisibly on a tinted fill. */
select.c-field__input {
  appearance: none;
  padding-right: 2.5rem;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 1.15rem) calc(50% + 2px),
    calc(100% - 0.8rem)  calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* --- where the patient's information goes --- */
.c-booking__privacy {
  max-width: 62ch;
  margin: var(--c-space-sm) 0 0;
  padding-left: 0.9rem;
  border-left: 3px solid var(--c-accent);
  font-size: var(--c-fs-sm);
}

@media (max-width: 619px) {
  /* Full-width targets. Nobody fills a medical form one-handed on a
     bus with 44px controls squeezed into two columns. */
  .c-choice__item { flex: 1 1 100%; justify-content: center; }
}