/* =========================================================
   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-line is a HAIRLINE for dividers and card edges: 1.26:1, which is
     correct for decoration and wrong for anything you can click. WCAG
     1.4.11 wants 3:1 for the boundary of a user-interface component.
     Measured across all four themes, 0.55 is the lowest alpha that clears
     3:1 against BOTH the white card and the tint band it may sit on
     (0.50 lands on 3.03 and leaves no headroom). Use this on any control
     whose only edge is a border. */
  --c-control-edge: rgba(var(--c-ink-rgb), 0.55);
  --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)) was deleted on
     18 Aug. It was the old section rhythm and nothing uses it now; a
     spare 120px token sitting in the scale is something the next person
     reaches for by accident. There is one section rhythm and it is
     --c-section-y. */

  /* ── SECTION RHYTHM — the one number that spaces the whole site ──
     Every band's vertical padding comes from here and nowhere else.
     Before 18 Aug this was a 56px -> 120px token, and three
     sections set their own padding on top of that.

     Two adjacent sections each contribute their padding, so the gap a
     visitor sees is TWICE this value. That is correct when the
     backgrounds differ — the space belongs to two different bands —
     and wrong when they match, which is handled below.

     Scales with the viewport but far more gently than the old 6vw:
     vertical space costs more on a 640px phone than on a 1080px
     monitor, so the phone gets the floor and the desktop earns the
     rest.  360:40  768:46  1024:52  1920:72                        */
  --c-section-y: clamp(2.5rem, 1.6rem + 2.6vw, 4.5rem);

  /* Gap under a section heading before its content. Was a flat 4rem. */
  --c-section-head: clamp(1.75rem, 1.2rem + 1.6vw, 3rem);

  --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-section-y); }

/* ── DOUBLED PADDING, AND WHEN IT IS ACTUALLY A BUG ─────────────────
   A section's bottom padding plus the next section's top padding is
   two gaps, not one. Where the backgrounds differ that is right: each
   band owns the breathing room inside its own colour, and the seam
   between them is visible.

   Where the backgrounds MATCH there is no seam. The two paddings merge
   into one uninterrupted expanse of the same colour with nothing in
   it, and it reads as a hole in the page rather than as spacing.

   That is exactly what happened under "Ready to be seen?" on the home
   page. The booking CTA painted itself --c-tint through a bespoke
   rule, and the reels section that follows it is c-section--tint. Same
   colour, no seam, 120px + 120px = 240px of empty tint at 1920. It was
   never a min-height or a stray grid cell; it was two invisible edges
   touching.

   So: when the background repeats, the pair collapses to 1.4x one
   section's padding instead of 2x. Still a clear break between two
   blocks of content, but read as one band rather than as a gap.

   This is a rule and not a hand-placed fix because section order is
   data-driven. A client with no blog posts, or no testimonials, gets a
   different sequence of bands on every page, and any two of them can
   end up adjacent. Patching this one instance would leave the next
   client to find the next one.                                       */
.c-section:not(.c-section--tint):not(.c-section--ink) + .c-section:not(.c-section--tint):not(.c-section--ink),
.c-section--tint + .c-section--tint,
.c-section--ink  + .c-section--ink {
  padding-top: calc(var(--c-section-y) * 0.4);
}

/* The jump nav on /about-us/ is a band in its own right — tinted, with a
   rule above and below — so the sections either side of it should not
   also contribute a full gap.

   :has() is doing the "section immediately before the nav" half. Where a
   browser does not support it the rule is simply ignored and that one gap
   stays at its old width; nothing breaks and nothing overlaps. */
.c-section:has(+ .c-pagenav) { padding-bottom: calc(var(--c-section-y) * 0.5); }
.c-pagenav + .c-section       { padding-top:    calc(var(--c-section-y) * 0.5); }
.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;
  /* NO margin-top. There used to be one, worth 120px at 1920, and it was
     the worst gap on the site: the last section's bottom padding (120px
     at 1920) plus this margin (120px) plus the footer grid's own top
     padding (120px) = 360px between the chamber cards and the first line
     of the footer. Three separate rules, none of them wrong on its own.
     The footer's own padding is the gap. */
  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));
  /* Same scale as every band. The footer is dense, so it takes the
     section rhythm on top and a little less underneath. */
  padding-block: var(--c-section-y) calc(var(--c-section-y) * 0.75);
}
.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 {
  display: flex;
  gap: 0.6rem;
  /* Icon on the FIRST LINE of the text, not centred against a block that
     has wrapped to three lines. */
  align-items: flex-start;
  padding-block: 0.4rem;
}

/* CHAMBER DAYS — a fixed two-line structure, whatever the name's length.
   This was display:flex with flex-wrap, so the name and its days shared a
   line until they did not fit: a short clinic name stayed inline, a long
   one dropped to a second line, and two rows of the same list looked like
   two different components. No two clinics have names of the same length,
   so every client hit it.

   Grid fixes the shape instead of nudging the spacing — the icon holds
   column 1, and both spans are pinned to column 2 on their own rows. */
.c-footer__hours li {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.6rem;
  row-gap: 0.1rem;
  align-items: start;
  padding-block: 0.4rem;
}
.c-footer__chamber,
.c-footer__chamber-days { grid-column: 2; overflow-wrap: anywhere; }

.c-footer__contact .c-icon,
.c-footer__hours .c-icon { margin-top: 0.45em; color: var(--c-accent-on-dark); }

.c-footer__chamber { color: #fff; font-weight: 600; }
.c-footer__chamber-days { font-size: var(--c-fs-sm); }

.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-section-head); 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-section-y);
}
.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
   ========================================================= */

/* padding + background now come from .c-section / .c-section--ink */
.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; } }

/* The media column MATCHES THE TEXT COLUMN'S HEIGHT.
   The grid was align-items:center with an aspect-ratio box, so the photo
   was always shorter than the text beside it and the section read as
   lopsided. Now the row stretches and the media fills it.

   Nothing is distorted: every slide is object-fit:cover inside the same
   box, so the seven files (which vary from 1147 to 1200 tall) all crop
   identically and the section never changes height between slides. */
.c-specialist__media { justify-self: stretch; }

/* Mobile: a portrait box, capped so a 3:4 photo does not eat the screen. */
.c-docslider,
.c-docslider__single {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: 62vh;
  margin-inline: auto;
  overflow: hidden;
  border-radius: var(--c-radius-md);
  box-shadow: var(--c-shadow-lg);
}
.c-docslider__single { object-fit: cover; display: block; }

.c-docslider__track {
  display: flex;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.c-docslider__track::-webkit-scrollbar { display: none; }

.c-docslider__slide { flex: 0 0 100%; height: 100%; scroll-snap-align: start; }
.c-docslider__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Dots sit ON the photo — there is no room beneath it once the column
   height is dictated by the text. */
.c-docslider__dots {
  position: absolute;
  inset: auto 0 0.75rem 0;
  z-index: 2;
  margin-top: 0;
}
.c-docslider__dots button { background: rgba(255,255,255,0.55); }
.c-docslider__dots button[aria-selected="true"] { background: #fff; }

.c-docslider .c-carousel__arrow { width: 40px; height: 40px; }
@media (max-width: 767px) { .c-docslider .c-carousel__arrow { display: grid; } }

@media (min-width: 900px) {
  /* THE FIX: stretch the row, and let the media fill whatever height the
     text column ends up being. All slides share that height, so there is
     no jump — the "fixed container" the brief asked for, sized by the
     content next to it rather than by a hardcoded number. */
  .c-specialist__grid { align-items: stretch; }
  .c-specialist__media { display: flex; }
  .c-docslider,
  .c-docslider__single {
    aspect-ratio: auto;
    max-height: none;
    height: 100%;
    /* a floor, in case a client's bio is only a line or two */
    min-height: 26rem;
  }
}


/* Pause control for any autoplaying carousel — WCAG 2.2.2.
   Injected by main.js next to the dots, only when autoplay is on and
   the visitor has not asked for reduced motion. */
.c-carousel__pause {
  display: block;
  margin: 0.6rem auto 0;
  padding: 0.3rem 0.7rem;
  font-size: var(--c-fs-xs);
  line-height: 1;
  letter-spacing: 0.1em;
  color: var(--c-ink);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--c-radius-pill);
  cursor: pointer;
}
.c-carousel__pause:hover { border-color: var(--c-accent-text); }

/* On the doctor slider the control sits over the photograph. */
.c-docslider .c-carousel__pause {
  position: absolute;
  z-index: 2;
  right: 0.6rem;
  bottom: 0.6rem;
  margin: 0;
}

.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
   ========================================================= */

/* padding + background now come from .c-section / .c-section--ink */
.c-testimonials__heading { margin-bottom: var(--c-section-head); 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.
   ========================================================= */

/* Deterministic column counts rather than auto-fill. auto-fill decides
   for itself and gave 3-across-in-a-4-wide-row, which reads as a missing
   card. These are the counts the design actually wants. */
.c-reels__grid {
  display: grid;
  gap: var(--c-space-sm);
  /* PHONES: 2x2, so four videos are roughly one screen instead of four
     full-height vertical cards and a lot of scrolling. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 600px) { .c-reels__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) {
  .c-reels__grid {
    gap: var(--c-space-md);
    grid-template-columns: repeat(4, minmax(0, 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__media,
.c-reel__frame {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  border: 0;
}
.c-reels__item--wide .c-reel__media,
.c-reels__item--wide .c-reel__frame { aspect-ratio: 16 / 9; }

/* NOT positioned — that is deliberate. Its ::after below is what makes
   the whole card clickable, and it must resolve against .c-reel. */
.c-reel__facade {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.c-reel__media {
  position: relative;
  overflow: hidden;
  background: var(--c-ink);
}
.c-reel__thumb {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 600ms ease;
}
.c-reel: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%);
}

/* THE PLAY BUTTON.

   ── the oval bug ──────────────────────────────────────────────
   This was `width: clamp(44px, 20%, 62px)` and the same value for
   height. A percentage resolves against the containing block's WIDTH
   for `width` and its HEIGHT for `height` — and the facade is 9:16, so
   the two resolved 10-18px apart and the circle came out an egg.
   One axis is sized now; aspect-ratio does the other.

   ── out of the centre ─────────────────────────────────────────
   A disc in the middle of the thumbnail lands on the speaker's face in
   all four videos, which is the one thing the thumbnail is for. It sits
   bottom-left now, inset from the edge, and reads as a control rather
   than a lid.

   ── contrast, measured not guessed ────────────────────────────
   Sampled the lower-left of all four real thumbnails: they contain
   near-black rgb(5,8,15) AND near-white rgb(254,253,255), so the
   button cannot rely on the photo behind it. A white triangle on
   black at 62% scores 20.62:1 on the darkest pixel and 6.26:1 on the
   lightest. Solid gold was heavy; gold is now the hover and focus
   state, where it also passes at 7.67:1. */
.c-reel__play {
  position: absolute;
  top: auto;
  left: clamp(0.5rem, 4%, 0.9rem);
  bottom: clamp(0.5rem, 4%, 0.9rem);
  display: grid;
  place-items: center;

  /* ONE axis sized. aspect-ratio keeps it a true circle at every
     width, and 44px is the accessibility floor, not a preference. */
  width: clamp(44px, 3.6vw, 52px);
  aspect-ratio: 1;
  height: auto;
  flex: none;

  color: #fff;
  background: rgba(0, 0, 0, 0.62);
  /* A hairline so the disc still has an edge on a dark photograph,
     where a dark disc alone would have none (WCAG 1.4.11). */
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  transform: none;
  transition: background var(--c-transition), transform var(--c-transition);
}
.c-reel__play .c-icon { width: 42%; height: 42%; margin-left: 8%; }

/* Gold earns its place on interaction rather than sitting on the face. */
.c-reel:hover .c-reel__play,
.c-reel__facade:focus-visible .c-reel__play {
  color: var(--c-on-accent);
  background: var(--c-accent);
  transform: scale(1.08);
}

/* Keyboard focus has to be visible over a photograph of any colour, so
   it is a dark ring AND a white ring — one of the two always shows. */
.c-reel__facade:focus-visible {
  outline: 3px solid var(--c-accent-text);
  outline-offset: -3px;
  box-shadow: inset 0 0 0 6px rgba(255, 255, 255, 0.9);
}

/* THE WHOLE CARD IS THE TARGET, not just the thumbnail. Because the
   button is unpositioned, this pseudo-element resolves against .c-reel
   and covers the title too — one control in the accessibility tree, a
   hit area the size of the card. */
.c-reel { position: relative; }
.c-reel__facade::after { content: ""; position: absolute; inset: 0; z-index: 0; }

/* "Watch on ..." stays independently clickable above that hit area. */
.c-reel__source { position: relative; z-index: 1; }

.c-reel__body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: clamp(0.6rem, 1.1vw, 1rem);
}
/* Four across means narrower cards, so the title scales down with them —
   but never below 0.8125rem (13px), which is the floor for comfortable
   reading on a phone.

   Titles here are Banglish and long ("Acne Marks, Open Pores, Scars –
   কোনটার জন্য কোন Treatment?"). overflow-wrap:anywhere stops a long
   unbroken run pushing the card wider than its column; line-clamp keeps
   the grid tidy. The clamp is CSS ONLY — the full title stays in the
   HTML, unlike DFH which cut its text server-side (defect m10). */
.c-reel__title {
  margin: 0;
  font-size: clamp(0.8125rem, 1.15vw, 1rem);
  line-height: 1.35;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.c-reel__source {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: auto;
  font-size: clamp(0.625rem, 0.85vw, 0.75rem);
  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.
   ========================================================= */

/* padding now comes from .c-section */

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


/* =========================================================
   33. BOOKING CTA  (home page prompt)

   Deliberately a call to action, not a second form — see D57.
   Two columns on desktop so it stays a compact band rather than
   another tall centred block; stacked on a phone.
   ========================================================= */

/* background now comes from .c-section--tint — a bespoke background
   here is what hid the same-colour adjacency described above. */

.c-bookcta__inner {
  display: grid;
  gap: var(--c-space-md);
  align-items: center;
}
@media (min-width: 820px) {
  .c-bookcta__inner { grid-template-columns: 1fr auto; gap: var(--c-space-lg); }
}

.c-bookcta__copy { max-width: 52ch; }
.c-bookcta__heading { margin: 0 0 0.5rem; }
.c-bookcta__body { margin: 0; font-size: 1.0625rem; }

.c-bookcta__actions {
  display: grid;
  gap: 0.6rem;
  justify-items: stretch;
}
@media (min-width: 820px) {
  .c-bookcta__actions { justify-items: end; min-width: 17rem; }
}

/* Full-width taps on a phone; natural width once there is room. */
.c-bookcta__actions .c-btn { justify-content: center; }
@media (min-width: 820px) {
  .c-bookcta__actions .c-btn { width: 100%; }
}

.c-bookcta__note {
  margin: 0.15rem 0 0;
  max-width: 34ch;
  font-size: var(--c-fs-xs);
  line-height: 1.5;
}
@media (min-width: 820px) { .c-bookcta__note { text-align: right; } }


/* =========================================================
   34. ABOUT THE DOCTOR  (/about-us/)

   Nine sections on one page. Everything here is layout for
   the four new blocks — intro, designations, expertise,
   certificates — plus the jump nav and two small wrappers
   that let existing partials sit full-width instead of in
   a grid cell.
   ========================================================= */

/* An optional line under a section heading. */
.c-sectionhead__note {
  margin: 0.5rem 0 0;
  font-size: var(--c-fs-sm);
  line-height: 1.6;
}

/* --- 34.1 Intro ----------------------------------------- */

.c-docintro__grid { display: grid; gap: var(--c-space-md); align-items: start; }
@media (min-width: 860px) {
  .c-docintro__grid { grid-template-columns: 22rem 1fr; gap: var(--c-space-lg); }
}

/* Square, like the home page portrait. A 1:1 box with cover means a
   client can supply any crop and never get a squashed face. */
.c-docintro__photo {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--c-radius-md);
  box-shadow: var(--c-shadow-lg);
}
/* Capped on a phone so the portrait does not fill the first screen
   before a single word about her is visible. */
@media (max-width: 859px) {
  .c-docintro__media { max-width: 20rem; margin-inline: auto; }
}

.c-docintro__name { margin: 0 0 0.15rem; }
.c-docintro__role {
  margin: 0 0 var(--c-space-sm);
  font-size: 1.0625rem;
  color: var(--c-accent-text);
}
.c-docintro__quote {
  font-family: var(--c-font-heading);
  font-size: 1.125rem;
  color: var(--c-ink);
}
.c-docintro__bio { max-width: 62ch; }

/* --- 34.2 Jump links ------------------------------------ */

/* Sits once under the intro and scrolls away. Not sticky: a bar pinned
   under the already-sticky header would cost ~44px of a 640px phone
   viewport on every screen of a nine-section page. */
.c-pagenav {
  padding-block: var(--c-space-sm);
  background: var(--c-tint);
  border-block: 1px solid var(--c-line);
}
.c-pagenav__label {
  margin: 0 0 0.5rem;
  font-size: var(--c-fs-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-ink);
}
.c-pagenav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.c-pagenav__link {
  /* min-height, NOT padding arithmetic. The first version of this rule used
     0.55rem of padding and a comment claiming it cleared 44px; it measured
     35.7px, because 8.8 + 8.8 + 16.1 + 2 is not 44. Padding maths silently
     breaks the moment a client's theme changes the font size. A declared
     min-height cannot. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.35rem 0.9rem;
  font-size: var(--c-fs-sm);
  line-height: 1.15;
  text-decoration: none;
  color: var(--c-ink);
  background: var(--c-surface);
  border: 1px solid var(--c-control-edge);
  border-radius: var(--c-radius-pill);
}
.c-pagenav__link:hover,
.c-pagenav__link:focus-visible {
  color: var(--c-on-accent);
  background: var(--c-accent);
  border-color: var(--c-accent);
}

/* Anchor jumps land clear of the sticky header rather than underneath it.
   scroll-behavior is set globally and already respects
   prefers-reduced-motion, so this adds no motion of its own. */
[id="photos"], [id="credentials"], [id="designations"],
[id="expertise"], [id="certificates"], [id="videos"],
[id="follow"], [id="booking"] { scroll-margin-top: 5.5rem; }

/* --- 34.3 Photo slider wrapper -------------------------- */

/* specialist-photos.njk is built to fill a grid cell next to text. Run
   full-width it would stretch a 3:4 portrait across 1920px. This caps it
   and centres it so the same partial works in both places unchanged. */
.c-docgallery { max-width: 30rem; margin-inline: auto; }
@media (min-width: 900px) {
  .c-docgallery .c-docslider,
  .c-docgallery .c-docslider__single {
    aspect-ratio: 3 / 4;
    height: auto;
    min-height: 0;
    max-height: none;
  }
}

/* --- 34.4 Credentials ----------------------------------- */

.c-doccreds__inner { max-width: 52rem; margin-inline: auto; }

/* --- 34.5 Designations ---------------------------------- */

/* Three roles that are three DIFFERENT KINDS of role. Cards, not a list,
   because a list makes them look interchangeable — which is the one
   thing a patient reading them needs them not to be. */
.c-desig {
  display: grid;
  gap: var(--c-space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 720px) { .c-desig { grid-template-columns: repeat(3, 1fr); } }

.c-desig__item {
  padding: var(--c-space-sm);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--c-radius-md);
  border-top: 3px solid var(--c-accent-text);
}

/* THE FIRST VERSION OF THIS GAVE EACH KIND ITS OWN BAR COLOUR — accent,
   base, translucent ink. Measured against white across the four themes
   those came out at 1.98, 2.37 and 2.70:1: on blush the "clinical" bar
   was very nearly invisible, on gold it was bold. A distinction that
   only exists on some themes is not a distinction, and --c-base is not
   audited for contrast because nothing else uses it as a mark.

   The kind is carried by the things that always work: a distinct icon,
   the kind spelled out in words, and — for the chamber — a different
   card fill, because a chamber is a PLACE she consults rather than a
   post she holds. The bar is now one audited colour on all three and
   carries no meaning at all. */
.c-desig__item--chamber {
  background: var(--c-tint);
  border-top-style: dotted;
}

.c-desig__kind {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.6rem;
  font-size: var(--c-fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-accent-text);
}
.c-desig__kind .c-icon { width: 18px; height: 18px; flex: none; }

.c-desig__role {
  margin: 0 0 0.1rem;
  font-family: var(--c-font-heading);
  font-size: 1.125rem;
  color: var(--c-ink);
}
.c-desig__org   { margin: 0; font-size: var(--c-fs-sm); }
.c-desig__org a { color: var(--c-accent-text); }
.c-desig__unit  { margin: 0.15rem 0 0; font-size: var(--c-fs-sm); }
.c-desig__note  { margin: 0.45rem 0 0; font-size: var(--c-fs-xs); }

/* --- 34.6 Areas of expertise ---------------------------- */

.c-expertise {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.c-expertise__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  /* Same declared minimum as the jump links — these are taps too wherever
     a service page exists behind them. */
  min-height: 44px;
  padding: 0.35rem 0.95rem;
  font-size: var(--c-fs-sm);
  line-height: 1.15;
  color: var(--c-ink);
  background: var(--c-surface);
  /* A chip with a service page behind it is a link, and a link whose only
     edge is this border. --c-line would leave it at 1.26:1. */
  border: 1px solid var(--c-control-edge);
  border-radius: var(--c-radius-pill);
}
.c-expertise__chip .c-icon {
  width: 15px; height: 15px; flex: none;
  color: var(--c-accent-text);
}
.c-expertise__chip--link { text-decoration: none; }
.c-expertise__chip--link:hover,
.c-expertise__chip--link:focus-visible {
  color: var(--c-on-accent);
  background: var(--c-accent);
  border-color: var(--c-accent);
}
.c-expertise__chip--link:hover .c-icon,
.c-expertise__chip--link:focus-visible .c-icon { color: inherit; }

/* --- 34.7 Certificates ---------------------------------- */

/* One grid holding two kinds of card: with a scan and without. A client
   who has typed the list but not photographed the frames still gets a
   complete, non-broken section. */
.c-certs {
  display: grid;
  gap: var(--c-space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.c-certs__item {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--c-radius-md);
}

.c-certs__thumb {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--c-tint);
}
.c-certs__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.c-certs__zoom {
  position: absolute;
  right: 0.6rem;
  bottom: 0.6rem;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--c-on-accent);
  background: var(--c-accent);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.c-certs__thumb:hover .c-certs__zoom,
.c-certs__thumb:focus-visible .c-certs__zoom { opacity: 1; }
/* Touch has no hover, so the affordance must be there from the start. */
@media (hover: none) { .c-certs__zoom { opacity: 1; } }

/* The text-only card gets a mark where the scan would be, so the two
   kinds sit in one grid without one looking like a loading failure. */
.c-certs__mark {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  color: var(--c-accent-text);
  background: var(--c-tint);
}
.c-certs__mark .c-icon { width: 40px; height: 40px; }

.c-certs__body { padding: 0.9rem var(--c-space-sm) var(--c-space-sm); }
.c-certs__title {
  margin: 0;
  font-family: var(--c-font-heading);
  font-size: 1.0625rem;
  line-height: 1.35;
  color: var(--c-ink);
}
.c-certs__issuer { margin: 0.3rem 0 0; font-size: var(--c-fs-sm); }
.c-certs__year   { margin: 0.2rem 0 0; font-size: var(--c-fs-xs); }

/* --- 34.8 Follow ---------------------------------------- */

.c-follow__inner { max-width: 42rem; margin-inline: auto; text-align: center; }
.c-follow__heading { margin: 0 0 0.5rem; }
.c-follow__note { margin: 0 0 var(--c-space-sm); font-size: var(--c-fs-sm); }

/* Bigger than the header and footer instances — this is the point of the
   section rather than a row of furniture at the edge of the page. */
.c-follow .c-social { justify-content: center; gap: 0.75rem; }
.c-follow .c-social a {
  width: 48px;
  height: 48px;
  color: var(--c-on-accent);
  background: var(--c-accent);
  border-radius: 50%;
}
.c-follow .c-social a:hover,
.c-follow .c-social a:focus-visible { background: var(--c-accent-text); }
.c-follow .c-social .c-icon { width: 22px; height: 22px; }