@charset "UTF-8";
/* ==========================================================================
   Dr. Khandaker ABM Abdullah Al Hasan — design system
   Cancer Surgeon & Laparoscopic Surgery Specialist, Dhaka

   Layer order matters. Sections are appended after this foundation.
   Tokens derive from the Claude Design artifact (see design-reference/DESIGN-SPEC.md).
   Mobile-first: base styles are the phone; min-width queries scale up.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand — teal
     The artifact's #0E9F91 is only 3.13:1 on cream and 3.29:1 under white text,
     so it FAILS WCAG AA wherever it carries small text. Roles are therefore split:
     teal-500 is a SURFACE colour (large fills, dots, borders, decorative strokes),
     teal-600/700 are the INK colours (any text, link, icon, or button fill).
     Verified ratios are in the --brand-* aliases below. */
  --teal-700: #09665D;   /* button hover      — white on it: 6.84:1 */
  --teal-600: #0B7F74;   /* text / links / button fill — 4.64:1 on cream, white on it 4.88:1 */
  --teal-500: #0E9F91;   /* large surfaces only — never behind small text */
  --teal-400: #12B7A7;
  --mint-300: #7FD8CE;   /* accent on dark — 10.03:1 on navy-700 */

  /* Surfaces — navy */
  --navy-900: #0A1235;
  --navy-800: #0B1436;
  --navy-700: #0E1A47;
  --navy-600: #16265F;
  --navy-500: #1B2C6E;

  /* Surfaces — cream */
  --cream-50:  #FBF9F5;
  --cream-100: #F2EFE8;
  --cream-200: #F5F3EE;

  /* Text on light — ink-400/300 darkened from the artifact's #6C7392/#8A90AB,
     which measured 4.43:1 and 3.00:1 (both below the 4.5:1 AA floor). */
  --ink-900: #0E1530;   /* 17.09:1 on cream */
  --ink-700: #232C50;   /* 12.35:1 on cream — sits between 900 and 600 */
  --ink-600: #333B5C;
  --ink-500: #4A5273;   /*  7.27:1 on cream */
  --ink-400: #6A718F;   /*  4.57:1 on cream */
  --ink-300: #6D7596;   /*  4.53:1 on white — placeholders must be legible too */

  /* Blue — serial/call actions, kept distinct from the teal brand.
     White on --blue-600 measures 7.45:1. */
  --blue-600: #164FB5;
  --blue-700: #103C8C;

  /* Status */
  --amber-500: #E0A93C;  /* "closed" indicator only */
  --danger-600: #B4232B;

  /* Semantic aliases — prefer these in component rules */
  --bg:            var(--cream-50);
  --bg-alt:        var(--cream-100);
  --bg-well:       var(--cream-200);
  --bg-invert:     var(--navy-700);
  --text:          var(--ink-900);
  --text-muted:    var(--ink-500);
  --text-subtle:   var(--ink-400);
  --brand:         var(--teal-600);   /* ink role — safe under/over text */
  --brand-hover:   var(--teal-700);
  --brand-surface: var(--teal-500);   /* fill role — decorative only */
  --on-invert:     #fff;
  --on-invert-mut: rgba(255, 255, 255, .72);

  /* Borders */
  --hairline:       rgba(14, 26, 71, .07);
  --border:         rgba(14, 26, 71, .14);
  --hairline-dark:  rgba(255, 255, 255, .10);
  --border-dark:    rgba(255, 255, 255, .18);

  /* Type */
  --font-en: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-bn: "Noto Sans Bengali", "Hind Siliguri", var(--font-en);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Fluid type scale — min is the phone value, max the desktop value */
  --fs-eyebrow: 11.5px;
  --fs-micro:   clamp(10.5px, .9vw,  11.5px);
  --fs-sm:      clamp(13px,  1.15vw, 14px);
  --fs-base:    clamp(15px,  1.2vw,  16.5px);
  --fs-lg:      clamp(16px,  1.5vw,  19px);
  --fs-h4:      clamp(17px,  1.7vw,  20px);
  --fs-h3:      clamp(20px,  2.2vw,  26px);
  --fs-h2:      clamp(26px,  3.4vw,  46px);
  --fs-h1:      clamp(28px,  4.2vw,  56px);
  --fs-display: clamp(64px, 16vw, 270px);   /* decorative watermark numerals */

  --lh-tight: 1.12;
  --lh-snug:  1.3;
  --lh-body:  1.65;

  /* Spacing — 4px base */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-7: 28px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  /* Section rhythm — grows with viewport */
  --section-y: clamp(32px, 3.6vw, 56px); /* two adjacent sections = 2x this */
  --gutter:    clamp(16px, 4vw, 28px);
  --maxw:      1240px;
  --maxw-prose: 68ch;

  /* Shape */
  --r-sm:   8px;
  --r-md:   12px;   /* controls */
  --r-lg:   18px;   /* cards */
  --r-xl:   22px;
  --r-2xl:  26px;
  --r-pill: 99px;

  /* Elevation */
  --shadow-sm: 0 14px 34px rgba(14, 26, 71, .06);
  --shadow-md: 0 18px 44px rgba(14, 26, 71, .07);
  --shadow-lg: 0 20px 44px rgba(14, 26, 71, .10);
  --shadow-xl: 0 30px 70px rgba(14, 26, 71, .18);
  --shadow-brand: 0 10px 26px rgba(14, 159, 145, .35);
  --shadow-modal: 0 16px 40px rgba(0, 0, 0, .40);

  /* Motion — one easing curve across the whole site */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-fast:   .2s;
  --dur-mid:    .35s;
  --dur-slow:   .5s;
  --dur-reveal: .75s;

  /* Focus */
  --focus-ring: 0 0 0 3px rgba(14, 159, 145, .45);

  /* Layers */
  --z-base: 1;
  --z-sticky: 100;
  /* above --z-overlay: the mobile nav drawer is fixed and full-height, so a
     lower header would be painted over — taking the close button with it. */
  --z-header: 950;
  --z-overlay: 900;
  --z-modal: 1000;
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* The browser default is [hidden] { display: none }, but any component that
   sets its own display (.btn is inline-flex) wins on specificity and the
   element stays visible. This makes the hidden attribute mean what it says. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* offset for the sticky header when jumping to #anchors */
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-en);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;   /* belt-and-braces against a rogue wide child */
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: -.02em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-weight: 700; letter-spacing: -.01em; }

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--brand-hover); }

ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
li { margin-bottom: .35em; }

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

button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}
button { background: none; border: 0; cursor: pointer; }

table { border-collapse: collapse; width: 100%; }

address { font-style: normal; }

hr { border: 0; border-top: 1px solid var(--hairline); margin: var(--sp-8) 0; }

/* --------------------------------------------------------------------------
   Horizontal overflow guard
   Nothing may make the page wider than the viewport — on a phone that shows up
   as the whole layout sliding sideways under your finger.

   `clip` rather than `hidden`: hidden turns the root into a scroll container,
   which silently breaks every `position: sticky` descendant (the FAQ portrait,
   the header). `clip` contains the overflow without that side effect.
   -------------------------------------------------------------------------- */
html { overflow-x: clip; }
@supports not (overflow: clip) { html { overflow-x: hidden; } }
body { max-width: 100%; overflow-x: clip; }
@supports not (overflow: clip) { body { overflow-x: hidden; } }

/* replaced elements must never dictate a width wider than their column */
img, svg, video, canvas, iframe, embed, object { max-width: 100%; }

/* long unbroken strings — Bangla compounds, URLs, emails — wrap instead of
   pushing the layout sideways */
p, li, dd, dt, h1, h2, h3, h4, h5, h6, td, th, summary, figcaption, label, a {
  overflow-wrap: break-word;
}

/* Bangla text — applied per element, not globally */
:lang(bn), .bn { font-family: var(--font-bn); line-height: 1.8; }

/* 1.8 is right for Bangla body copy but far too airy for display type, and
   :lang(bn) outranks the h1–h6 rule above, so headings need it back. Bangla
   still needs more room than Latin for the vowel signs above and below. */
:lang(bn) h1, :lang(bn) h2, :lang(bn) h3, :lang(bn) h4, :lang(bn) h5, :lang(bn) h6,
h1:lang(bn), h2:lang(bn), h3:lang(bn), h4:lang(bn), h5:lang(bn), h6:lang(bn) {
  line-height: 1.34;
}
.pagehead__title:lang(bn) { line-height: 1.28; }

/* --------------------------------------------------------------------------
   3. Accessibility
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 3px;
}
/* On dark sections the teal ring lacks contrast — switch to mint */
.on-dark :focus-visible { outline-color: var(--mint-300); }

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -100%;
  z-index: var(--z-modal);
  padding: var(--sp-3) var(--sp-5);
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  border-radius: var(--r-md);
  text-decoration: none;
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus { top: var(--sp-4); color: #fff; }

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

/* Minimum touch target — WCAG 2.5.8 */
a, button, [role="button"], label, input, select {
  min-height: 24px;
}
.btn, .nav-link, .pill, .icon-btn {
  min-height: 44px;
  min-width: 44px;
}

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.prose { max-width: var(--maxw-prose); }
/* must come after .container — same specificity, so source order decides */
.container--narrow { max-width: 880px; }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(24px, 2.6vw, 40px); }
.section--alt   { background: var(--bg-alt); border-top: 1px solid var(--hairline); }
.section--dark  { background: var(--navy-700); color: var(--on-invert); }
.section--deep  { background: var(--navy-800); color: var(--on-invert); }

.section--dark h1, .section--dark h2, .section--dark h3,
.section--deep h1, .section--deep h2, .section--deep h3 { color: var(--on-invert); }
.section--dark p, .section--deep p { color: var(--on-invert-mut); }

/* Auto-fitting card grid — no media queries needed */
.grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.grid--wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.grid--tight { gap: var(--sp-4); }

.stack > * + * { margin-top: var(--sp-4); }
.stack--lg > * + * { margin-top: var(--sp-8); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}

/* Two-column split that collapses on small screens */
.split {
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--media-first > :first-child { order: -1; }
  .split--60-40 { grid-template-columns: 6fr 4fr; }
}

/* --------------------------------------------------------------------------
   5. Typographic components
   -------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand);
}
.section--dark .eyebrow, .section--deep .eyebrow { color: var(--mint-300); }

.section-title { margin-bottom: var(--sp-4); }
.section-lead {
  max-width: 62ch;
  font-size: var(--fs-lg);
  color: var(--text-muted);
}
/* a notch smaller — for leads that sit directly under a large H2 */
.section-lead--sm { font-size: clamp(14.5px, 1.15vw, 16px); max-width: 58ch; }
.section--dark .section-lead, .section--deep .section-lead { color: var(--on-invert-mut); }

.meta {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .04em;
  color: var(--text-subtle);
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 14px var(--sp-6);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--brand);
  color: #fff;
  box-shadow: var(--shadow-brand);
}
.btn--primary:hover { background: var(--brand-hover); color: #fff; }

.btn--secondary {
  background: #fff;
  color: var(--ink-900);
  border-color: var(--border);
}
.btn--secondary:hover { border-color: var(--brand); color: var(--brand); }

.btn--ghost {
  background: transparent;
  color: var(--on-invert);
  border-color: var(--border-dark);
}
.btn--ghost:hover { background: rgba(255, 255, 255, .08); color: var(--on-invert); }

.btn--block { width: 100%; }

/* Filter / tab pills */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 10px var(--sp-5);
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: #fff;
  color: var(--ink-400);
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  transition: all var(--dur-fast) var(--ease);
}
.pill:hover { border-color: var(--brand); color: var(--brand); }
/* bilingual filter labels: one subject, both scripts, separated by a hairline */
.pill__en { position: relative; margin-left: 9px; padding-left: 10px; opacity: .72; font-weight: 600; }
.pill__en::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 12px; background: currentColor; opacity: .35;
}
.pill[aria-pressed="true"] .pill__en { opacity: .85; }
.pill[aria-selected="true"], .pill[aria-pressed="true"] {
  background: var(--navy-700);
  border-color: var(--navy-700);
  color: #fff;
}
.section--dark .pill, .section--deep .pill {
  background: transparent;
  border-color: var(--border-dark);
  color: var(--on-invert-mut);
}
.section--dark .pill[aria-selected="true"], .section--deep .pill[aria-selected="true"],
.section--dark .pill[aria-pressed="true"], .section--deep .pill[aria-pressed="true"] {
  background: #fff;
  color: var(--navy-800);
  border-color: #fff;
}

/* --------------------------------------------------------------------------
   7. Cards & surfaces
   -------------------------------------------------------------------------- */
.card {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-mid) var(--ease),
              box-shadow var(--dur-mid) var(--ease);
}
.card--interactive:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.card--well { background: var(--bg-well); box-shadow: none; }
.card--dark {
  background: rgba(255, 255, 255, .04);
  border-color: var(--border-dark);
  box-shadow: none;
  color: var(--on-invert);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px var(--sp-3);
  border-radius: var(--r-pill);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.badge--open   { background: var(--teal-600); color: #fff; }   /* 4.88:1 — teal-500 would fail here */
.badge--today  { background: rgba(255, 255, 255, .92); color: var(--navy-700); }
.badge--closed { background: rgba(11, 20, 54, .72); color: rgba(255, 255, 255, .85); }

/* Live status dot */
.dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex: none;
  /* Non-text UI element — needs 3:1, and teal-500 gives 3.13:1 on cream,
     so the brighter surface tone is allowed (and preferred) here. */
  background: var(--brand-surface);
}
.dot--closed { background: var(--amber-500); }
.dot--pulse { animation: pulse 2.4s var(--ease) infinite; }

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(14, 159, 145, .5); }
  70%  { box-shadow: 0 0 0 10px rgba(14, 159, 145, 0); }
  100% { box-shadow: 0 0 0 0 rgba(14, 159, 145, 0); }
}

/* --------------------------------------------------------------------------
   8. Forms
   -------------------------------------------------------------------------- */
.field { margin-bottom: var(--sp-4); }
.field label {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-600);
}
.field .req { color: var(--danger-600); }

.input, .select, .textarea {
  width: 100%;
  padding: 13px var(--sp-4);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: var(--fs-base);
  color: var(--ink-900);
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-300); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: var(--focus-ring);
}
.input[aria-invalid="true"] { border-color: var(--danger-600); }

.field-error {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--danger-600);
}
.field-hint {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--text-subtle);
}

/* --------------------------------------------------------------------------
   9. Motion utilities
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-reveal) var(--ease),
              transform var(--dur-reveal) var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* Failsafe: if JS never runs, content must still be visible.
   .js is set on <html> by an inline snippet in <head>. */
html:not(.js) [data-reveal] { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   10. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .dot--pulse { animation: none; }
}

/* --------------------------------------------------------------------------
   11. Print
   -------------------------------------------------------------------------- */
@media print {
  .no-print, .site-header, .site-footer nav, .whatsapp-fab { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .section { padding-block: 12pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  /* Chamber addresses and phone numbers are the reason someone prints this */
  .chamber-card { break-inside: avoid; }
}

/* --------------------------------------------------------------------------
   12. Forced colors / high contrast
   -------------------------------------------------------------------------- */
@media (forced-colors: active) {
  .btn, .pill, .card { border: 1px solid ButtonBorder; }
  .dot { forced-color-adjust: none; }
}

/* ==========================================================================
   13. Site chrome
   ========================================================================== */
.scroll-progress {
  position: fixed; inset-block-start: 0; inset-inline-start: 0;
  height: 3px; width: 0;
  background: linear-gradient(90deg, var(--teal-500), var(--mint-300));
  z-index: var(--z-modal);
}

.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  border-bottom: 1px solid var(--hairline);
}
/* The frosted background lives on a pseudo-element, NOT on .site-header
   itself. An element with a backdrop-filter becomes the containing block for
   its position:fixed descendants — and the mobile nav drawer is exactly that.
   With the filter on the header, `inset: 0` sized the drawer to the 69px
   header instead of the viewport, so it opened as a small white box with the
   menu items scrolled out of sight. */
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(251,249,245,.88);
  backdrop-filter: saturate(180%) blur(14px);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding-block: var(--sp-3); }

.brand { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; color: var(--ink-900); }
.brand img { width: 44px; height: 44px; object-fit: contain; }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__text strong { font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.brand__text small { font-size: 10.5px; color: var(--text-subtle); }

.nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 11px; border-radius: var(--r-md); border: 1px solid var(--border); }
.nav-toggle__bar { display: block; height: 2px; background: var(--ink-900); border-radius: 2px; transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.site-nav {
  position: fixed; inset: 0 0 0 auto; width: min(320px, 86vw);
  padding: 96px var(--sp-6) var(--sp-6);
  background: var(--cream-50); border-left: 1px solid var(--hairline);
  box-shadow: var(--shadow-xl); transform: translateX(100%);
  transition: transform var(--dur-mid) var(--ease);
  overflow-y: auto; z-index: var(--z-overlay);
}
.site-nav.is-open { transform: none; }

/* dimmed backdrop — gives the drawer visual separation and somewhere to tap
   to dismiss it */
.nav-scrim {
  position: fixed; inset: 0; z-index: calc(var(--z-overlay) - 1);
  background: rgba(10,18,53,.45); backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-mid) var(--ease), visibility var(--dur-mid) var(--ease);
}
body.nav-open .nav-scrim { opacity: 1; visibility: visible; }
@media (min-width: 980px) { .nav-scrim { display: none; } }
@media (prefers-reduced-motion: reduce) { .nav-scrim { transition: none; } }
.site-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.nav-link { display: flex; align-items: center; padding: var(--sp-3) var(--sp-2); border-radius: var(--r-md); color: var(--ink-600); font-size: var(--fs-sm); font-weight: 700; text-decoration: none; }
.nav-link { position: relative; transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.nav-link:hover { background: var(--bg-well); color: var(--brand); }
.nav-link.is-current { color: var(--brand); }

@media (min-width: 980px) {
  .nav-link { background: none; padding-inline: var(--sp-3); }
  .nav-link:hover { background: none; }

  /* underline grows from the centre on hover, and stays put on the current page */
  .nav-link::after {
    content: ""; position: absolute; left: 50%; bottom: 4px;
    width: 0; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, var(--teal-500), var(--mint-300));
    transform: translateX(-50%);
    transition: width var(--dur-mid) var(--ease);
  }
  .nav-link:hover::after,
  .nav-link:focus-visible::after { width: calc(100% - 24px); }
  .nav-link.is-current::after { width: calc(100% - 24px); }

  /* a small dot lifts in above the label on hover */
  .nav-link::before {
    content: ""; position: absolute; left: 50%; top: 2px;
    width: 4px; height: 4px; border-radius: 50%;
    background: var(--brand);
    opacity: 0; transform: translate(-50%, 4px);
    transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  }
  .nav-link:hover::before { opacity: 1; transform: translate(-50%, 0); }
}

/* Mobile drawer: links stagger in as the panel slides open. */
@media (max-width: 979px) {
  .site-nav__list > li {
    opacity: 0; transform: translateX(14px);
    transition: opacity .32s var(--ease), transform .32s var(--ease);
  }
  .site-nav.is-open .site-nav__list > li { opacity: 1; transform: none; }
  .site-nav.is-open .site-nav__list > li:nth-child(1) { transition-delay: .06s; }
  .site-nav.is-open .site-nav__list > li:nth-child(2) { transition-delay: .10s; }
  .site-nav.is-open .site-nav__list > li:nth-child(3) { transition-delay: .14s; }
  .site-nav.is-open .site-nav__list > li:nth-child(4) { transition-delay: .18s; }
  .site-nav.is-open .site-nav__list > li:nth-child(5) { transition-delay: .22s; }
  .site-nav.is-open .site-nav__list > li:nth-child(6) { transition-delay: .26s; }
}

/* ---- header CTA: transparent, animated, fills on hover -----------------
   Lives on the cream header, so the resting state is a teal outline with a
   faint tint. Teal-600 on cream is 4.64:1, and the filled hover state puts
   white on teal-600 at 4.88:1 — both past AA.
   ----------------------------------------------------------------------- */
.btn--outline {
  position: relative; overflow: hidden;
  background: rgba(14, 159, 145, .07);
  border: 1.5px solid rgba(14, 159, 145, .45);
  color: var(--brand);
  box-shadow: 0 0 0 0 rgba(14, 159, 145, .35);
  animation: outlinePulse 3.4s var(--ease) infinite;
}
.btn--outline .btn__label,
.btn--outline svg { position: relative; z-index: 1; }
/* the shared white sweep is invisible on a light button — tint it teal */
.btn--outline .btn__shine {
  background: linear-gradient(100deg, transparent, rgba(14, 159, 145, .30), transparent);
}
.btn--outline:hover .btn__shine { opacity: 0; }
.btn--outline svg { transition: transform var(--dur-fast) var(--ease); }

/* teal wipes in from the left on hover */
.btn--outline::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--teal-600), var(--teal-500));
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-mid) var(--ease);
}
.btn--outline:hover { color: #fff; border-color: var(--teal-600); animation: none; }
.btn--outline:hover::after { transform: scaleX(1); }
.btn--outline:hover svg { transform: translateX(3px); }

@keyframes outlinePulse {
  0%   { box-shadow: 0 0 0 0 rgba(14, 159, 145, .35); }
  70%  { box-shadow: 0 0 0 10px rgba(14, 159, 145, 0); }
  100% { box-shadow: 0 0 0 0 rgba(14, 159, 145, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .btn--outline { animation: none; }
  .btn--outline::after { transition: none; }
  .site-nav__list > li { opacity: 1; transform: none; }
}
.nav-cta { margin-top: var(--sp-3); }
body.nav-open { overflow: hidden; }

@media (min-width: 980px) {
  .nav-toggle { display: none; }
  .site-nav { position: static; width: auto; padding: 0; background: none; border: 0; box-shadow: none; transform: none; overflow: visible; }
  .site-nav__list { flex-direction: row; align-items: center; gap: 2px; }
  .nav-cta { margin-top: 0; margin-left: var(--sp-3); }
  body.nav-open { overflow: auto; }
}

.site-footer { background: var(--navy-900); color: rgba(255,255,255,.7); padding-block: var(--section-y) var(--sp-8); }
.site-footer__grid { display: grid; gap: var(--sp-8) var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
@media (min-width: 1000px) {
  .site-footer__grid { grid-template-columns: 1.5fr 1fr 1.2fr 1.4fr; }
}
.site-footer__brand { max-width: 34ch; }
.site-footer__name { color: #fff; font-weight: 800; font-size: var(--fs-h4); margin-bottom: var(--sp-3); }
.site-footer__bio { font-size: var(--fs-sm); max-width: 42ch; }
.site-footer__h { color: #fff; font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; margin-bottom: var(--sp-4); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: var(--sp-2); }
.site-footer a { color: rgba(255,255,255,.8); text-decoration: none; font-size: var(--fs-sm); }
.site-footer a:hover { color: var(--mint-300); text-decoration: underline; }
.site-footer address { font-size: var(--fs-sm); margin-bottom: var(--sp-4); }
.site-footer address strong { color: #fff; }
/* icon buttons rather than text labels */
.social { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-5); }
.social li { margin: 0; }
.social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.82);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.social a:hover {
  background: var(--teal-600); border-color: var(--teal-600);
  color: #fff; transform: translateY(-3px); text-decoration: none;
}
/* three-part bottom bar: copyright | legal links | credit */
.site-footer__legal {
  margin-top: var(--sp-10);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255,255,255,.12);
  display: grid; gap: var(--sp-3);
  align-items: center;
  font-size: var(--fs-sm);
  color: rgba(255,255,255,.62);
  text-align: center;
}
@media (min-width: 860px) {
  .site-footer__legal { grid-template-columns: 1fr auto 1fr; text-align: left; }
  .site-footer__legal-links { justify-self: center; }
  .site-footer__credit { justify-self: end; }
}
.site-footer__legal-links { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3); }
.site-footer__legal-links span { color: rgba(255,255,255,.28); }
.site-footer__credit { color: rgba(255,255,255,.48); }
.site-footer__legal p { margin: 0; }

.whatsapp-fab {
  position: fixed; right: var(--sp-4); bottom: var(--sp-4); z-index: var(--z-sticky);
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: 50%;
  background: #25D366; color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.25);
  transition: transform var(--dur-fast) var(--ease);
}
.whatsapp-fab:hover { transform: scale(1.06); color: #fff; }
@media (min-width: 900px) { .whatsapp-fab { right: var(--sp-6); bottom: var(--sp-6); } }

/* ==========================================================================
   14. Hero
   The portrait is bottom-anchored so it lands exactly on the marquee rule,
   with a soft ground shadow + a short bottom fade so the square crop reads
   as "standing behind the line" rather than as a cut-off photo.
   ========================================================================== */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--navy-900); color: #fff;
  padding-top: clamp(28px, 4vw, 52px);
  padding-bottom: 0;
  --mx: 70%; --my: 30%;            /* mouse spotlight, updated by JS */
}

/* Operating-theatre photograph, held well back behind the copy and slowly
   breathing in and out. Two layers: the image itself, then a navy scrim so
   text contrast never depends on which part of the photo is showing. */
.hero__bg {
  position: absolute; inset: 0; z-index: -4; overflow: hidden;
}
.hero__bg::before {
  content: ""; position: absolute; inset: -4%;
  /* Fallback first, then image-set — the later declaration wins wherever
     image-set is supported, which is the whole point of the pair. */
  background-image: url("../img/hero-bg-1920w.webp");
  background-image: image-set(
    url("../img/hero-bg-1920w.avif") type("image/avif"),
    url("../img/hero-bg-1920w.webp") type("image/webp"));
  background-size: cover;
  background-position: 50% 42%;
  opacity: .24;
  /* Not `alternate` — a 4-point loop pans as well as zooms, so the motion
     never simply retraces itself. */
  animation: heroZoom 16s ease-in-out infinite;
}
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--navy-900) 6%, rgba(10,18,53,.82) 42%, rgba(10,18,53,.55) 100%),
    linear-gradient(180deg, rgba(10,18,53,.55), transparent 30%, rgba(10,18,53,.85));
}
@keyframes heroZoom {
  0%   { transform: scale(1.04) translate3d(0, 0, 0); }
  25%  { transform: scale(1.16) translate3d(-2.2%, 1.2%, 0); }
  50%  { transform: scale(1.22) translate3d(1.6%, -1.4%, 0); }
  75%  { transform: scale(1.12) translate3d(2.2%, 1.6%, 0); }
  100% { transform: scale(1.04) translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) { .hero__bg::before { animation: none; } }

/* Soft light that trails the cursor. Nothing translates — only light moves,
   which reads as atmosphere rather than as elements being dragged about. */
.hero__lamp {
  position: absolute; left: 70%; top: 30%;
  width: 420px; height: 420px; margin: -210px 0 0 -210px;
  z-index: -2; pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(127, 216, 206, .20) 0%,
    rgba(14, 159, 145, .13) 38%,
    transparent 68%);
  filter: blur(18px);
  mix-blend-mode: screen;
}
@media (prefers-reduced-motion: reduce) { .hero__lamp { display: none; } }

/* dot-grid texture */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -3;
  background-image: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent 75%);
  mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent 75%);
  opacity: .5;
}

/* Pointer spotlight + slow drifting aurora.
   The spotlight tracks --mx/--my (written by the parallax module); the
   aurora keeps the panel alive on touch devices, where there is no pointer. */
.hero__glow {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(38% 46% at var(--mx) var(--my), rgba(14,159,145,.30), transparent 68%),
    radial-gradient(60% 55% at 12% 8%, rgba(27,44,110,.55), transparent 70%);
}
.hero__aurora {
  position: absolute; inset: -25%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(28% 34% at 22% 30%, rgba(14,159,145,.30), transparent 62%),
    radial-gradient(24% 30% at 74% 22%, rgba(127,216,206,.20), transparent 64%),
    radial-gradient(30% 36% at 58% 76%, rgba(27,44,110,.55), transparent 66%);
  filter: blur(42px);
  opacity: .85;
  animation: aurora 26s ease-in-out infinite;
}
@keyframes aurora {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33%      { transform: translate3d(3%, -2%, 0) scale(1.08); }
  66%      { transform: translate3d(-3%, 2%, 0) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) { .hero__aurora { animation: none; } }

.hero__inner {
  display: grid; gap: clamp(20px, 3vw, 40px);
  align-items: center;
  padding-bottom: 0;
}

.eyebrow--chip {
  padding: 7px 15px 7px 11px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.15);
  color: var(--mint-300); letter-spacing: .1em;
  backdrop-filter: blur(6px);
}
/* One line on desktop; wraps naturally only when the viewport is too narrow. */
.hero__title {
  font-size: var(--fs-h1); color: #fff; margin-bottom: var(--sp-4);
  text-wrap: balance;
}
@media (min-width: 640px) { .hero__title { white-space: nowrap; } }
/* Solid mint, NOT a background-clip gradient.
   The typing effect wraps every character in its own inline-block <span>,
   and a parent's clipped background does not paint through those children —
   which rendered "in Dhaka" fully transparent (i.e. invisible). Solid colour
   is immune to that, and the glow below keeps it feeling alive. */
.hero__title-accent {
  color: var(--mint-300);
  text-shadow: 0 0 22px rgba(127, 216, 206, .35);
  animation: accentGlow 5s var(--ease) infinite;
}
@keyframes accentGlow {
  0%, 100% { text-shadow: 0 0 18px rgba(127, 216, 206, .28); }
  50%      { text-shadow: 0 0 30px rgba(127, 216, 206, .55); }
}

.hero__name { font-size: var(--fs-h4); font-weight: 700; color: #fff; margin-bottom: 2px; }
.hero__quals { font-size: var(--fs-sm); color: rgba(255,255,255,.6); margin-bottom: var(--sp-6); }
.hero__cta { margin-bottom: clamp(24px, 4vw, 44px); }

/* ---- animated glass button ------------------------------------------- */
.btn--lg { padding: 16px var(--sp-8); font-size: var(--fs-base); }

.btn--glass {
  position: relative; overflow: hidden;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(127,216,206,.45);
  color: #fff;
  backdrop-filter: blur(10px);
  box-shadow: 0 0 0 0 rgba(14,159,145,.45);
  animation: glassPulse 3.2s var(--ease) infinite;
}
.btn--glass:hover {
  color: #fff;
  background: rgba(14,159,145,.18);
  border-color: var(--mint-300);
}
.btn--glass .btn__label, .btn--glass svg { position: relative; z-index: 1; }

/* sweeping highlight */
.btn__shine {
  position: absolute; top: 0; left: -60%; width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent);
  transform: skewX(-18deg);
  animation: shine 3.6s var(--ease) infinite;
}
@keyframes shine { 0% { left: -60%; } 55%, 100% { left: 125%; } }
@keyframes glassPulse {
  0%   { box-shadow: 0 0 0 0 rgba(14,159,145,.42); }
  70%  { box-shadow: 0 0 0 14px rgba(14,159,145,0); }
  100% { box-shadow: 0 0 0 0 rgba(14,159,145,0); }
}

/* ---- portrait --------------------------------------------------------- */
.hero__media {
  position: relative;
  justify-self: center;
  align-self: end;
  width: min(520px, 88%);
  margin-bottom: 0;
}

.hero__ring {
  position: absolute; left: 50%; top: 46%;
  width: 78%; aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%; border: 1px solid rgba(127,216,206,.26);
  z-index: -1; animation: drift 18s var(--ease) infinite;
}
.hero__ring--2 { width: 94%; border-color: rgba(14,159,145,.18); animation-duration: 24s; animation-direction: reverse; }
.hero__ring--3 { width: 110%; border-color: rgba(255,255,255,.07); animation-duration: 30s; }
@keyframes drift {
  0%,100% { transform: scale(1) rotate(0deg); }
  50%     { transform: scale(1.045) rotate(180deg); }
}

.hero__orb {
  position: absolute; border-radius: 50%; z-index: -1;
  filter: blur(34px); opacity: .55;
}
.hero__orb--1 { width: 190px; height: 190px; left: -8%; top: 16%; background: radial-gradient(circle, rgba(14,159,145,.85), transparent 70%); animation: float1 11s ease-in-out infinite; }
.hero__orb--2 { width: 150px; height: 150px; right: -6%; top: 52%; background: radial-gradient(circle, rgba(127,216,206,.55), transparent 70%); animation: float2 14s ease-in-out infinite; }
@keyframes float1 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(18px,-26px); } }
@keyframes float2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-22px,20px); } }

.hero__portrait {
  position: relative;
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 26px 46px rgba(0,0,0,.55));
  /* soften the square crop into the marquee rule below */
  -webkit-mask-image: linear-gradient(to bottom, #000 92%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 92%, transparent 100%);
}

/* Elliptical shadow so he reads as standing on the line.
   Must sit BEHIND the portrait — at z-index 0 it paints over his legs
   (later in DOM order) and reads as a smudge rather than a shadow. */
.hero__ground {
  position: absolute; left: 50%; bottom: -10px; translate: -50% 0;
  width: min(560px, 96%); height: 78px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.66), transparent 72%);
  filter: blur(9px);
  z-index: -1; pointer-events: none;
}

/* Floating glass stat card — drifts, breathes a teal glow, and carries a
   slow light sweep across the glass. Three staggered loops so the motion
   never lands on an obvious beat. */
.hero__badge {
  position: absolute; left: 0; bottom: 16%; z-index: 2;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r-lg);
  background: rgba(10,18,53,.55); border: 1px solid rgba(255,255,255,.20);
  backdrop-filter: blur(12px);
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
  overflow: hidden;
  animation: badgeFloat 6s ease-in-out infinite, badgeGlow 4.5s ease-in-out infinite;
  transition: transform var(--dur-mid) var(--ease), border-color var(--dur-mid) var(--ease);
}
.hero__badge::after {
  content: ""; position: absolute; top: 0; left: -70%;
  width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent);
  transform: skewX(-18deg);
  animation: badgeSweep 5.5s var(--ease) infinite;
}
/* `scale`, not `transform` — the parallax module writes an inline
   `transform` on [data-par] nodes, which would win over this rule. */
.hero__badge:hover {
  scale: 1.04;
  border-color: rgba(127,216,206,.6);
}
.hero__badge-num {
  font-size: 30px; font-weight: 800; line-height: 1; color: #fff;
  position: relative; z-index: 1;
}
.hero__badge-num sup { font-size: .5em; color: var(--mint-300); }
.hero__badge-label {
  font-size: var(--fs-micro); font-weight: 700; color: var(--mint-300);
  line-height: 1.25; position: relative; z-index: 1;
}

@keyframes badgeFloat {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -10px; }
}
@keyframes badgeGlow {
  0%, 100% { box-shadow: 0 14px 34px rgba(0,0,0,.35), 0 0 0 0 rgba(14,159,145,.35); }
  50%      { box-shadow: 0 18px 40px rgba(0,0,0,.42), 0 0 26px 3px rgba(14,159,145,.32); }
}
@keyframes badgeSweep {
  0%       { left: -70%; }
  60%, 100% { left: 130%; }
}

@media (min-width: 900px) {
  .hero__inner { grid-template-columns: 1.16fr .84fr; }
  .hero__media { width: 100%; }
  .hero__copy { padding-bottom: clamp(32px, 5vw, 72px); }
}

/* ---- marquee: glassy, continuously moving ----------------------------- */
.marquee {
  position: relative; z-index: 3;
  border-top: 1px solid rgba(127,216,206,.22);
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(90deg, rgba(14,159,145,.10), rgba(255,255,255,.05) 50%, rgba(14,159,145,.10));
  backdrop-filter: blur(10px);
  overflow: hidden; padding-block: var(--sp-4);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee__track {
  display: flex; align-items: center; gap: var(--sp-6);
  width: max-content;
  animation: marquee 38s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track span {
  font-size: var(--fs-sm); font-weight: 700; white-space: nowrap;
  color: rgba(255,255,255,.72);
}
.marquee__track i { color: var(--mint-300); font-style: normal; font-size: 9px; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .marquee__track, .hero__ring, .hero__orb, .hero__title-accent,
  .btn__shine, .btn--glass, .hero__badge, .hero__badge::after { animation: none; }
  .btn__shine, .hero__badge::after { display: none; }
  .hero__badge { translate: 0 0; }
}

/* ==========================================================================
   15. Stats band
   ========================================================================== */
.stats { background: var(--cream-50); border-bottom: 1px solid var(--hairline); padding-block: clamp(28px, 3.4vw, 44px); }
.stats__grid { display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }
.stat { display: flex; flex-direction: column; gap: 6px; }
.stat__num { font-size: clamp(30px, 4vw, 46px); font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--ink-900); }
.stat__num sup { font-size: .45em; color: var(--brand); }
.stat__label { font-size: var(--fs-sm); color: var(--text-subtle); }

/* ==========================================================================
   16. About
   ========================================================================== */
/* Sections that share the cream background need less separation than
   sections that change colour — the colour change does the separating. */
.stats + .chambers,
.chambers + .about { padding-top: clamp(28px, 3.5vw, 48px); }
.chambers { padding-bottom: clamp(28px, 3.5vw, 48px); }

.about__grid { display: grid; gap: clamp(32px, 5vw, 64px); align-items: center; }
@media (min-width: 900px) { .about__grid { grid-template-columns: .85fr 1.15fr; } }

.about__media { position: relative; justify-self: center; width: min(420px, 88%); }

/* soft teal halo behind the portrait, echoing the hero's rings */
.about__media::before {
  content: ""; position: absolute;
  left: 50%; top: 48%; translate: -50% -50%;
  width: 108%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(14, 159, 145, .16), transparent 66%);
  filter: blur(20px);
  z-index: 0;
  animation: aboutHalo 12s ease-in-out infinite;
}
@keyframes aboutHalo {
  0%, 100% { scale: 1;    opacity: .8; }
  50%      { scale: 1.07; opacity: 1; }
}

.about__frame {
  position: absolute; inset: 24px -18px -18px 24px;
  border: 1px solid rgba(14,159,145,.35); border-radius: var(--r-2xl);
  z-index: 0;
}
.about__media img {
  position: relative; z-index: 1;
  border-radius: var(--r-2xl); box-shadow: var(--shadow-xl);
  background: var(--cream-100);
  transition: scale var(--dur-slow) var(--ease);
}
.about__media:hover img { scale: 1.015; }

@media (prefers-reduced-motion: reduce) {
  .about__media::before { animation: none; }
  .about__media:hover img { scale: 1; }
}
/* Floating credential tag — same treatment as the hero's 15+ badge:
   drifts on a 3-point path, breathes a teal glow, and a light sweeps
   across it. Uses `translate`/`scale` rather than `transform` for the
   same reason the hero badge does — they compose independently. */
.about__tag {
  position: absolute; left: -6px; bottom: 18px; z-index: 2;
  display: flex; flex-direction: column;
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r-md);
  background: #fff;
  border: 1px solid rgba(14, 159, 145, .18);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: tagFloat 9s ease-in-out infinite, tagGlow 7s ease-in-out infinite;
  transition: scale var(--dur-mid) var(--ease), border-color var(--dur-mid) var(--ease);
}
.about__tag::after {
  content: ""; position: absolute; top: 0; left: -70%;
  width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(14, 159, 145, .16), transparent);
  transform: skewX(-18deg);
  animation: tagSweep 5.5s var(--ease) infinite;
}
.about__tag:hover { scale: 1.04; border-color: rgba(14, 159, 145, .45); }
.about__tag-label { font-size: var(--fs-micro); color: var(--text-subtle); position: relative; z-index: 1; }
.about__tag-name { font-size: var(--fs-sm); font-weight: 800; color: var(--ink-900); position: relative; z-index: 1; }

@keyframes tagFloat {
  0%, 100% { translate: 0 0;      rotate: 0deg; }
  33%      { translate: 3px -7px; rotate: .5deg; }
  66%      { translate: -3px -4px; rotate: -.4deg; }
}
@keyframes tagGlow {
  0%, 100% { box-shadow: var(--shadow-lg), 0 0 0 0 rgba(14, 159, 145, .28); }
  50%      { box-shadow: var(--shadow-lg), 0 0 24px 3px rgba(14, 159, 145, .26); }
}
@keyframes tagSweep {
  0%        { left: -70%; }
  60%, 100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
  .about__tag, .about__tag::after { animation: none; }
  .about__tag::after { display: none; }
  .about__tag { translate: 0 0; }
}

.about__sub { margin: var(--sp-8) 0 var(--sp-4); font-size: var(--fs-eyebrow); letter-spacing: .16em; text-transform: uppercase; color: var(--text-subtle); font-weight: 700; }
.about__actions { margin-top: var(--sp-8); }

.tabs__list { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.tabs__panel { padding: var(--sp-5); background: var(--bg-well); border-radius: var(--r-lg); border: 1px solid var(--hairline); }
.tabs__org { font-size: var(--fs-sm); font-weight: 800; color: var(--brand); margin-bottom: var(--sp-2); }
.tabs__panel p:last-child { color: var(--text-muted); font-size: var(--fs-sm); margin: 0; }

/* ==========================================================================
   18. Chambers — photo/map panel + ruled fact list
   ========================================================================== */
.section__head { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: flex-end; justify-content: space-between; margin-bottom: var(--sp-6); }
.section__head .section-title { margin-bottom: 0; }
.live-pill { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 8px 16px; border-radius: var(--r-pill); background: #fff; border: 1px solid var(--border); font-size: var(--fs-sm); font-weight: 700; color: var(--ink-600); margin: 0; }
.section--dark .live-pill, .section--deep .live-pill { background: rgba(255,255,255,.06); border-color: var(--border-dark); color: var(--on-invert-mut); }

.chambers { background: var(--cream-50); }
.chamber-list { display: grid; gap: var(--sp-6); }
@media (min-width: 1000px) { .chamber-list { grid-template-columns: 1fr 1fr; } }

/* Animated outline.
   A conic gradient rotates around the card edge, masked to a 1.5px ring so
   only the border shows. @property makes the angle animatable; browsers
   without it simply keep the static hairline below, which is a fine
   fallback rather than a broken one. */
@property --edge {
  syntax: "<angle>";
  initial-value: 0turn;
  inherits: false;
}

.chamber {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--hairline);
  border-radius: var(--r-xl); overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease);
}
.chamber::before {
  content: ""; position: absolute; inset: -1px; z-index: 2;
  border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--edge),
    transparent 0turn,
    rgba(14,159,145,.15) .06turn,
    var(--teal-500) .13turn,
    var(--mint-300) .17turn,
    rgba(14,159,145,.15) .24turn,
    transparent .32turn,
    transparent 1turn);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  animation: edgeSpin 7s linear infinite;
  pointer-events: none;
}
.chamber:nth-child(2)::before { animation-delay: -3.5s; }
.chamber:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.chamber:hover::before { animation-duration: 3s; }

@keyframes edgeSpin { to { --edge: 1turn; } }
@media (prefers-reduced-motion: reduce) { .chamber::before { animation: none; } }

/* ---- media panel: live Google Map -------------------------------------
   The iframe is created when the card scrolls into view, not on page load.
   Two eager Maps embeds would add roughly 2 MB before anything is visible.
   ----------------------------------------------------------------------- */
.chamber__media { position: relative; aspect-ratio: 16 / 10; background: var(--navy-700); overflow: hidden; }
.chamber__status { position: absolute; top: var(--sp-4); left: var(--sp-4); z-index: 3; }

.chamber__map { position: absolute; inset: 0; }
.chamber__map iframe {
  width: 100%; height: 100%; border: 0; display: block;
  opacity: 0; transition: opacity var(--dur-slow) var(--ease);
  filter: saturate(1.05) contrast(1.02);
}
.chamber__map iframe.is-ready { opacity: 1; }

/* placeholder shown until the map arrives */
.chamber__map-load {
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
  background:
    radial-gradient(70% 70% at 50% 45%, rgba(14,159,145,.28), transparent 70%),
    linear-gradient(160deg, var(--navy-700), var(--navy-900));
}
.chamber__map-load::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent 80%);
  mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent 80%);
}
.chamber__map-pin {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--teal-600); color: #fff;
  animation: pinPulse 2.4s var(--ease) infinite;
}
@keyframes pinPulse {
  0%   { box-shadow: 0 0 0 0 rgba(14,159,145,.55); }
  70%  { box-shadow: 0 0 0 20px rgba(14,159,145,0); }
  100% { box-shadow: 0 0 0 0 rgba(14,159,145,0); }
}

/* scrim keeps the status badge legible over the map */
.chamber__media::after {
  content: ""; position: absolute; inset: 0 0 auto; height: 78px; z-index: 2;
  background: linear-gradient(180deg, rgba(10,18,53,.5), transparent);
  pointer-events: none;
}

/* ---- ruled fact list --------------------------------------------------- */
.chamber__body { display: flex; flex-direction: column; flex: 1; padding: clamp(20px, 2.6vw, 28px); }
.chamber__tag {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--brand); margin-bottom: var(--sp-2);
}
.chamber__no {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 22px; padding: 0 6px;
  border-radius: 6px; background: rgba(14,159,145,.12);
  font-size: 11px; letter-spacing: .06em;
}
.chamber__body h3 { font-size: var(--fs-h3); margin-bottom: var(--sp-5); }

.chamber__facts { margin: 0 0 var(--sp-6); padding: 0; border-top: 1px solid var(--hairline); }
.chamber__facts .fact {
  display: grid; grid-template-columns: 108px 1fr; gap: var(--sp-4);
  align-items: start;
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--hairline);
}
.chamber__facts dt {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-subtle);
}
.chamber__facts dt svg { color: var(--brand); flex: none; }
.chamber__facts dd {
  margin: 0; font-size: var(--fs-sm); font-weight: 600;
  color: var(--ink-900); line-height: 1.5;
}
.chamber__facts dd a { font-weight: 700; text-decoration: none; }
.chamber__facts dd a:hover { text-decoration: underline; }
.chamber__sub {
  display: block; margin-top: 3px;
  font-size: var(--fs-micro); font-weight: 500; color: var(--text-subtle);
}

.chamber__actions { margin-top: auto; }

/* ---- dynamic bits ------------------------------------------------------ */

/* Blue serial button. #164FB5 carries white text at 7.45:1 — comfortably
   past AA, and distinct from the teal used everywhere else. */
.btn--blue {
  background: var(--blue-600);
  color: #fff;
  box-shadow: 0 10px 26px rgba(22, 79, 181, .30);
}
.btn--blue:hover { background: var(--blue-700); color: #fff; }

/* Day strip — the open days are filled, today gets a ring. Written by JS
   from the card's own data-days, so markup and behaviour can't drift apart. */
.daystrip { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.daystrip button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border-radius: 9px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  background: var(--cream-200); color: var(--ink-300);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.daystrip button:hover { transform: translateY(-2px); }
.daystrip button.is-open { background: rgba(22, 79, 181, .12); color: var(--blue-600); }
.daystrip button.is-today {
  background: var(--blue-600); color: #fff;
  box-shadow: 0 0 0 3px rgba(22, 79, 181, .18);
}
/* the day the visitor tapped */
.daystrip button.is-picked {
  box-shadow: 0 0 0 2px var(--ink-900);
  transform: translateY(-2px);
}

.dayinfo {
  display: none; margin-top: var(--sp-2);
  padding: 4px 10px; border-radius: var(--r-pill);
  font-size: var(--fs-micro); font-weight: 700;
}
.dayinfo.is-shown { display: inline-block; }
.dayinfo.is-open { background: rgba(22, 79, 181, .10); color: var(--blue-600); }
.dayinfo.is-closed { background: var(--cream-200); color: var(--text-subtle); }

/* Live countdown to the next open/close moment */
.countdown {
  display: inline-block; margin-left: 6px; padding: 3px 9px;
  border-radius: var(--r-pill);
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .02em;
  background: rgba(14, 159, 145, .12); color: var(--teal-600);
  vertical-align: 1px;
}
.countdown:empty { display: none; }
.countdown.is-soon { background: rgba(224, 169, 60, .16); color: #8A5D00; }
.countdown.is-open { background: rgba(14, 159, 145, .16); color: var(--teal-700); }

@media (max-width: 420px) {
  .chamber__facts .fact { grid-template-columns: 1fr; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .chamber__map-pin { animation: none; }
}

/* ==========================================================================
   19. Treatments — 42 procedures in three groups
   Compact tiles rather than descriptive cards: at this count, prose per item
   would make the section enormous. Each tile is a link to its future page.
   ========================================================================== */
.filters { margin-block: var(--sp-6) var(--sp-8); }
.section--dark .pill[aria-pressed="true"] { background: var(--mint-300); border-color: var(--mint-300); color: var(--navy-900); }

.treat-group { margin-bottom: var(--sp-8); }
.treat-group:last-of-type { margin-bottom: 0; }

/* revealed tiles fade in, staggered by the --d the expand handler writes */
.treat.is-extra:not([hidden]) {
  animation: tileIn .34s var(--ease) both;
  animation-delay: var(--d, 0ms);
}
@keyframes tileIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.treat-group__more {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-3) var(--sp-5);
  margin-top: var(--sp-5);
}
.btn--sm { padding: 9px var(--sp-5); font-size: var(--fs-sm); min-height: 40px; }
[data-expand] svg { transition: transform var(--dur-fast) var(--ease); }
[data-expand][aria-expanded="true"] svg { transform: rotate(180deg); }

.treat-group__link {
  font-size: var(--fs-sm); font-weight: 700;
  color: var(--mint-300); text-decoration: none;
}
.treat-group__link:hover { color: #fff; text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .treat.is-extra:not([hidden]) { animation: none; }
}
.treat-group[hidden] { display: none; }
.treat-group__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-4);
  padding-bottom: var(--sp-3); margin-bottom: var(--sp-5);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.treat-group__head h3 { font-size: var(--fs-h4); color: #fff; }
.treat-group__meta { font-size: var(--fs-micro); color: rgba(255,255,255,.55); letter-spacing: .02em; }

.treat-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
.treat { margin: 0; }
.treat[hidden] { display: none; }

.treat a {
  position: relative; display: flex; align-items: center; gap: var(--sp-3);
  height: 100%; padding: 14px var(--sp-4) 14px var(--sp-3);
  border-radius: var(--r-md);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  text-decoration: none; color: inherit;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.treat a::after {
  content: "↗"; margin-left: auto; flex: none;
  color: var(--mint-300); opacity: 0;
  transform: translate(-4px, 4px);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.treat a:hover {
  background: rgba(255,255,255,.09);
  border-color: rgba(127,216,206,.55);
  transform: translateY(-3px);
}
.treat a:hover::after { opacity: 1; transform: translate(0, 0); }

.treat__no {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 26px; border-radius: 7px;
  background: rgba(14,159,145,.20); color: var(--mint-300);
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
}
.treat__name {
  font-size: var(--fs-sm); font-weight: 600; line-height: 1.35;
  color: rgba(255,255,255,.90);
}

/* ==========================================================================
   19b. Treatment submenu (header)
   ========================================================================== */
.has-submenu { position: relative; }
.nav-link--toggle {
  display: flex; align-items: center; gap: 6px;
  width: 100%; text-align: left;
  font: inherit; font-size: var(--fs-sm); font-weight: 700;
  color: var(--ink-600); cursor: pointer;
  padding: var(--sp-3) var(--sp-2); border-radius: var(--r-md);
}
.nav-link--toggle svg { transition: transform var(--dur-fast) var(--ease); }
.nav-link--toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-link--toggle[aria-expanded="true"] { color: var(--brand); }

.submenu__inner { display: grid; gap: var(--sp-6); }
.submenu__title {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--brand);
  margin-bottom: var(--sp-3); padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--hairline);
}
.submenu ul { list-style: none; margin: 0; padding: 0; }
.submenu li { margin: 0; }
.submenu li { border-bottom: 1px solid var(--hairline); }
.submenu li:last-child { border-bottom: 0; }

.submenu li a {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 8px var(--sp-2); border-radius: 8px;
  font-size: 13px; font-weight: 500; color: var(--ink-500);
  text-decoration: none; line-height: 1.35;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              padding-left var(--dur-fast) var(--ease);
}
/* small teal marker, grows into a bar on hover */
.submenu li a::before {
  content: ""; flex: none;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--teal-500); opacity: .45;
  transition: all var(--dur-fast) var(--ease);
}
.submenu li a:hover {
  background: var(--bg-well); color: var(--brand);
  padding-left: var(--sp-3);
}
.submenu li a:hover::before {
  width: 12px; height: 2px; border-radius: 2px; opacity: 1;
}
.submenu__all {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--sp-4); padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm); font-weight: 700; text-decoration: none;
}
.submenu__all:hover { text-decoration: underline; }

/* --- mobile: inline accordion inside the drawer --- */
@media (max-width: 979px) {
  .submenu { padding: var(--sp-2) 0 var(--sp-3) var(--sp-3); }
  .submenu__col { margin-bottom: var(--sp-4); }
  .submenu ul { max-height: 210px; overflow-y: auto; }
}

/* --- desktop: floating mega panel --- */
@media (min-width: 980px) {
  .nav-link--toggle { width: auto; padding-inline: var(--sp-3); }

  .submenu {
    position: absolute; top: calc(100% + 10px); left: 50%;
    translate: -50% 0;
    width: min(860px, 92vw);
    padding: var(--sp-6);
    /* solid white — a translucent panel let the page show through and made
       42 small links hard to read */
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    box-shadow: 0 24px 60px rgba(14, 26, 71, .18), 0 2px 8px rgba(14, 26, 71, .06);
    z-index: var(--z-overlay);
  }
  /* Invisible bridge across the 10px gap between the button and the panel.
     Without it, moving the pointer down fires mouseleave and the menu shuts
     before it can be reached. */
  .submenu::before {
    content: ""; position: absolute;
    left: 0; right: 0; top: -14px; height: 16px;
  }
  /* animate in — [hidden] is removed by JS one frame before .is-open */
  .submenu:not(.is-open) { opacity: 0; transform: translateY(-6px); pointer-events: none; }
  .submenu.is-open { opacity: 1; transform: none; }
  .submenu { transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }

  .submenu__inner { grid-template-columns: 1fr 1fr 1fr; gap: 0; }
  /* hairline rules between columns instead of relying on gap alone */
  .submenu__col { padding-inline: var(--sp-5); }
  .submenu__col:first-child { padding-left: 0; }
  .submenu__col:last-child { padding-right: 0; }
  .submenu__col + .submenu__col { border-left: 1px solid var(--hairline); }
  .submenu ul { max-height: 46vh; overflow-y: auto; scrollbar-width: thin; }
}

@media (prefers-reduced-motion: reduce) {
  .submenu { transition: none; }
  .treat a:hover { transform: none; }
}

/* ==========================================================================
   20. Video library — YouTube-style player + up-next rail, plus Reels
   ========================================================================== */
.videos { background: #fff; padding-top: clamp(28px, 3.5vw, 48px); }

.vtabs__list { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-6); }

.vgrid { display: grid; gap: var(--sp-6); }
@media (min-width: 900px) { .vgrid { grid-template-columns: 1.7fr 1fr; align-items: stretch; } }

/* ---- featured player ---- */
/* Curved card. The thumbnail clips to a slightly smaller radius than the
   wrapper so it reads as inset rather than flush. */
.vplayer {
  padding: 6px;
  border-radius: 26px;
  background: var(--cream-50);
  border: 1px solid var(--hairline);
  box-shadow: 0 18px 44px rgba(14, 26, 71, .10);
  transition: box-shadow var(--dur-mid) var(--ease);
}
.vplayer:hover { box-shadow: 0 22px 54px rgba(14, 26, 71, .14); }

.vplayer__facade {
  position: relative; display: block; width: 100%; padding: 0;
  aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 20px;
  background: var(--navy-800);
  cursor: pointer;
}
.vplayer__facade img { width: 100%; height: 100%; object-fit: cover; }
.vplayer__facade::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(10,18,53,.35));
  opacity: 0; transition: opacity var(--dur-fast) var(--ease);
}
.vplayer__facade:hover::after { opacity: 1; }

.vplayer__play {
  position: absolute; inset: 50% auto auto 50%; translate: -50% -50%;
  display: flex; align-items: center; justify-content: center;
  width: 66px; height: 46px; border-radius: 12px;
  background: #FF0000; color: #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,.32);
  transition: scale var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.vplayer__facade:hover .vplayer__play { scale: 1.08; background: #e60000; }

.vplayer iframe {
  width: 100%; aspect-ratio: 16 / 9; border: 0;
  border-radius: 20px; display: block;
}
.vplayer__meta { padding: var(--sp-4) var(--sp-3) var(--sp-2); }
/* The global heading rule sets `text-wrap: balance`, which evens out line
   lengths — good for short display headings, wrong for a video title, where
   it leaves an obvious gap at the end of line one. Fill each line instead. */
.vplayer__meta h3 {
  font-size: var(--fs-h4);
  margin-bottom: 4px;
  text-wrap: pretty;
  max-width: 46ch;
}
.vplayer__meta .meta { color: var(--text-subtle); }

/* ---- up-next rail ---- */
.vlist__head {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-subtle);
  padding-bottom: var(--sp-2); margin-bottom: var(--sp-3);
  border-bottom: 1px solid var(--hairline);
  flex: none;
}
.vlist { display: flex; flex-direction: column; }
/* the rail distributes its rows so the column ends level with the player */
.vlist ul {
  list-style: none; margin: 0; padding: 0;
  flex: 1; display: flex; flex-direction: column; justify-content: space-between;
}
.vlist li { display: flex; align-items: center; }
.vlist__item { flex: 1; align-items: center; }
.vlist li { margin: 0; border-bottom: 1px solid var(--hairline); }
.vlist li:last-child { border-bottom: 0; }

.vlist__item {
  display: grid; grid-template-columns: 128px 1fr; gap: var(--sp-3);
  width: 100%; padding: var(--sp-3) var(--sp-2); text-align: left;
  border-radius: var(--r-md); cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.vlist__item:hover { background: var(--bg-well); }
.vlist__item.is-playing { background: rgba(14,159,145,.10); }

.vlist__thumb {
  position: relative; display: block;
  aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden;
  background: var(--navy-800);
}
.vlist__thumb img { width: 100%; height: 100%; object-fit: cover; }
.vlist__play {
  position: absolute; inset: 50% auto auto 50%; translate: -50% -50%;
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 22px; border-radius: 6px;
  background: rgba(255,0,0,.92); color: #fff;
  opacity: 0; transition: opacity var(--dur-fast) var(--ease);
}
.vlist__item:hover .vlist__play { opacity: 1; }

.vlist__meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vlist__title {
  font-size: 13.5px; font-weight: 700; line-height: 1.35; color: var(--ink-900);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.vlist__views { font-size: var(--fs-micro); color: var(--text-subtle); }

/* ---- reels ---- */
.shorts-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.shorts-track {
  list-style: none; margin: 0; padding: var(--sp-1) 0 var(--sp-2);
  display: flex; gap: var(--sp-4); width: max-content;
  animation: shortsScroll 52s linear infinite;
}
.shorts-marquee:hover .shorts-track,
.shorts-marquee:focus-within .shorts-track { animation-play-state: paused; }
.shorts-track li { margin: 0; width: 172px; flex: none; }
@keyframes shortsScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .shorts-track { animation: none; }
  .shorts-marquee { overflow-x: auto; scrollbar-width: thin; }
}

.short { display: flex; flex-direction: column; gap: var(--sp-2); text-decoration: none; }
.short__thumb {
  position: relative; display: block;
  aspect-ratio: 9 / 16; border-radius: var(--r-md); overflow: hidden;
  background: var(--navy-800);
}
.short__thumb img { width: 100%; height: 100%; object-fit: cover; }
.short__play {
  position: absolute; inset: 50% auto auto 50%; translate: -50% -50%;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(0,0,0,.55); color: #fff;
  backdrop-filter: blur(4px);
  transition: scale var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.short:hover .short__play { scale: 1.1; background: #FF0000; }
.short__thumb::after {
  content: ""; position: absolute; inset: 0;
  box-shadow: inset 0 0 0 0 var(--teal-500);
  transition: box-shadow var(--dur-fast) var(--ease);
  border-radius: inherit;
}
.short:hover .short__thumb::after { box-shadow: inset 0 0 0 2px var(--teal-500); }

.short__title {
  font-size: 12.5px; font-weight: 700; line-height: 1.35; color: var(--ink-900);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

@media (prefers-reduced-motion: reduce) {
  .vplayer__facade:hover .vplayer__play,
  .short:hover .short__play { scale: 1; }
}

/* ==========================================================================
   21. CTA band
   ========================================================================== */
.cta-band { text-align: center; background: var(--cream-100); }
.cta-band .eyebrow, .cta-band .section-title { justify-content: center; }
.cta-band .section-lead { margin-inline: auto; }
.cta-band__actions { justify-content: center; margin-top: var(--sp-8); }

/* ==========================================================================
   22. Typing headline
   The full text stays in the DOM — JS only wraps each character in a span
   and staggers its fade-in. Crawlers and screen readers see the real
   heading; only the reveal is animated.
   ========================================================================== */
.hero__title .ch { display: inline-block; white-space: pre; }
html.js .hero__title[data-type] .ch { opacity: 0; }
html.js .hero__title[data-type].is-typing .ch {
  animation: chIn .01s linear forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes chIn { to { opacity: 1; } }

.hero__title .caret {
  display: inline-block; width: 3px; height: .82em;
  margin-left: 4px; vertical-align: -.06em;
  background: var(--mint-300); border-radius: 2px;
  animation: caretBlink 1s steps(1) infinite;
}
@keyframes caretBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.hero__title.is-done .caret { animation: caretBlink 1s steps(1) 6; opacity: 0; }

/* ==========================================================================
   23. Motion refinements
   ========================================================================== */

/* --- glass button: add a travelling reflection over the shine ---------- */
.btn--glass::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.20), transparent 46%);
  pointer-events: none;
}
.btn--glass::after {
  content: ""; position: absolute; top: -120%; left: -30%;
  width: 60%; height: 340%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.30), transparent);
  transform: rotate(18deg);
  animation: reflect 4.4s var(--ease) infinite;
  pointer-events: none;
}
@keyframes reflect {
  0%       { left: -40%; opacity: 0; }
  12%      { opacity: 1; }
  45%      { opacity: 1; }
  60%, 100% { left: 120%; opacity: 0; }
}

/* --- 15+ badge: slower, gentler, with a subtle tilt -------------------- */
.hero__badge { animation: badgeFloat 9s ease-in-out infinite, badgeGlow 7s ease-in-out infinite; }
@keyframes badgeFloat {
  0%, 100% { translate: 0 0;      rotate: 0deg; }
  33%      { translate: 3px -7px; rotate: .5deg; }
  66%      { translate: -3px -4px; rotate: -.4deg; }
}

/* --- marquee: a touch quicker so the motion is obvious ----------------- */
.marquee__track { animation-duration: 30s; }

/* --- stats: lift each tile as its number counts ------------------------ */
.stat { transition: transform var(--dur-mid) var(--ease); }
.stat__num { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .btn--glass::after, .map-facade__pin, .hero__title .caret { animation: none; }
  .btn--glass::after, .hero__title .caret { display: none; }
  html.js .hero__title[data-type] .ch { opacity: 1; }
}

/* ==========================================================================
   24. FAQ
   Built on <details name="faq">, so the accordion is single-open natively
   and still works with JS disabled. JS only adds the height animation.
   ========================================================================== */
.faqs { background: var(--cream-100); }
.faqs__grid { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (min-width: 940px) {
  .faqs__grid { grid-template-columns: .8fr 1.2fr; }
  .faqs__intro { position: sticky; top: 96px; }
}
.faqs__cta { margin-top: var(--sp-6); }

.faq {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  margin-bottom: var(--sp-3);
  overflow: hidden;
  transition: border-color var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease);
}
.faq:hover { border-color: rgba(14, 159, 145, .35); }
.faq[open] {
  border-color: rgba(14, 159, 145, .45);
  box-shadow: var(--shadow-sm);
}

.faq summary {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

.faq__no {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 28px; border-radius: 8px;
  background: var(--bg-well); color: var(--text-subtle);
  font-size: 11px; font-weight: 700; letter-spacing: .05em;
  transition: background var(--dur-mid) var(--ease), color var(--dur-mid) var(--ease);
}
.faq[open] .faq__no { background: var(--brand); color: #fff; }

.faq__q {
  flex: 1;
  font-size: var(--fs-base); font-weight: 700; line-height: 1.4;
  color: var(--ink-900);
}

/* plus that rotates into a minus */
.faq__icon {
  flex: none; position: relative;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--bg-well);
  transition: background var(--dur-mid) var(--ease), rotate var(--dur-mid) var(--ease);
}
.faq__icon::before,
.faq__icon::after {
  content: ""; position: absolute; inset: 50% auto auto 50%;
  background: var(--ink-600); border-radius: 2px;
  translate: -50% -50%;
  transition: opacity var(--dur-mid) var(--ease), background var(--dur-mid) var(--ease);
}
.faq__icon::before { width: 10px; height: 2px; }
.faq__icon::after  { width: 2px; height: 10px; }
.faq[open] .faq__icon { background: var(--brand); rotate: 180deg; }
.faq[open] .faq__icon::before { background: #fff; }
.faq[open] .faq__icon::after { opacity: 0; }

.faq__body {
  padding: 0 var(--sp-5) var(--sp-5) calc(var(--sp-5) + 32px + var(--sp-4));
}
.faq__body p {
  font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--sp-3);
}
.faq__tag {
  display: inline-block; padding: 4px 11px; border-radius: var(--r-pill);
  background: rgba(14, 159, 145, .10); color: var(--teal-700);
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .03em;
}

/* JS animates this wrapper's height; without JS the body is simply shown */
.faq__body { overflow: hidden; }
html.js .faq[open] .faq__body { animation: faqOpen .32s var(--ease); }
@keyframes faqOpen {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 520px) {
  .faq summary { gap: var(--sp-3); padding: var(--sp-4); }
  .faq__body { padding-left: var(--sp-4); padding-right: var(--sp-4); }
}
@media (prefers-reduced-motion: reduce) {
  html.js .faq[open] .faq__body { animation: none; }
  .faq__icon { transition: none; }
}

/* ==========================================================================
   25. Responsive hardening
   Applies across every section. Ordered small -> large.
   ========================================================================== */

/* --- 25.1 Universal overflow guards -------------------------------------
   Grid and flex children default to min-width:auto, which refuses to shrink
   below their content. That is the single most common cause of a page that
   scrolls sideways on a phone. Long unbroken Bangla compounds and URLs are
   the other. Both are handled here rather than patched per component. */
.container, .grid, .split, .cluster,
.vgrid, .vlist, .vlist__meta, .about__grid, .faqs__grid,
.chamber, .chamber__body, .treat-grid, .site-footer__grid,
.stats__grid, .hero__inner, .hero__copy { min-width: 0; }

.container > *, .grid > *, .vgrid > *, .faqs__grid > *,
.about__grid > *, .site-footer__grid > * { min-width: 0; }

p, li, dd, address, summary, h1, h2, h3, h4,
.treat__name, .vlist__title, .short__title,
.faq__q, .chamber__facts dd { overflow-wrap: anywhere; }

/* Bangla has few break opportunities — allow breaking inside a word rather
   than letting a long compound push the layout wide. */
:lang(bn) { word-break: normal; overflow-wrap: anywhere; }

img, picture, svg, video, iframe, table { max-width: 100%; }

/* --- 25.2 Small phones (<= 400px) --------------------------------------- */
@media (max-width: 400px) {
  :root { --gutter: 16px; }

  .brand__text small { display: none; }        /* two lines is too tall here */
  .hero__cta .btn { width: 100%; }             /* full-width taps */
  .hero__badge { padding: var(--sp-2) var(--sp-4); }
  .hero__badge-num { font-size: 24px; }

  .stats__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-5); }

  /* thumbnail shrinks so the title keeps a usable column */
  .vlist__item { grid-template-columns: 104px 1fr; gap: var(--sp-3); }
  .vlist__title { white-space: normal; display: -webkit-box;
                  -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

  .shorts-track li { width: 148px; }
  .treat-group__more { flex-direction: column; align-items: flex-start; }
  .btn--lg { padding: 14px var(--sp-6); }
}

/* --- 25.3 Phones (<= 600px) --------------------------------------------- */
@media (max-width: 600px) {
  .section__head { align-items: flex-start; }
  .live-pill { order: -1; }

  .cluster .btn { flex: 1 1 auto; }
  .cta-band__actions .btn { width: 100%; }

  .chamber__actions .btn { flex: 1 1 100%; }
  .faqs__cta .btn { flex: 1 1 100%; }

  /* filter pills scroll rather than stacking into a tall block */
  .filters {
    /* was nowrap + overflow-x:auto — the last categories sat off-screen with
       no visible cue that the row scrolled. Wrapping shows all of them. */
    flex-wrap: wrap; row-gap: var(--sp-2); padding-bottom: 0;
  }
  .filters::-webkit-scrollbar { display: none; }
  .filters .pill { flex: none; }
}

/* --- 25.4 Landscape phones ---------------------------------------------
   Short viewports: the hero must not consume the whole screen. */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { padding-top: var(--sp-5); }
  .hero__media { max-width: 300px; }
  .hero__badge { display: none; }
  .site-nav { padding-top: 72px; }
}

/* --- 25.5 Tablet (601-899px) -------------------------------------------- */
@media (min-width: 601px) and (max-width: 899px) {
  .hero__media { width: min(420px, 70%); }
  .vgrid { grid-template-columns: 1fr; }
  .vlist__item { grid-template-columns: 160px 1fr; }
  .chamber-list { grid-template-columns: 1fr; }
}

/* --- 25.6 Touch devices -------------------------------------------------
   Hover-only affordances must not be the sole way to reach anything. */
@media (hover: none) {
  .treat a::after,
  .vlist__play,
  .video-facade__play { opacity: 1; }
  .shorts-track { animation-play-state: running; }
  .chamber:hover, .card--interactive:hover, .treat a:hover { transform: none; }
}

/* --- 25.7 Large screens ------------------------------------------------- */
@media (min-width: 1600px) {
  :root { --maxw: 1320px; }
  .hero__inner { gap: clamp(40px, 4vw, 72px); }
}

/* --- 25.8 Print --------------------------------------------------------- */
@media print {
  .hero__bg, .hero__aurora, .hero__glow, .hero__lamp,
  .marquee, .videos, .scroll-progress { display: none !important; }
  .chamber, .faq { break-inside: avoid; }
  .faq[open] .faq__body, .faq__body { display: block !important; }
}

/* ==========================================================================
   26. Inner-page head (shared by all sub-pages)
   ========================================================================== */
.pagehead {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--navy-900); color: #fff;
  padding-block: clamp(28px, 4vw, 52px) clamp(36px, 5vw, 64px);
}
.pagehead__aurora {
  position: absolute; inset: -30% -10% auto -10%; height: 150%; z-index: -1;
  background:
    radial-gradient(30% 40% at 18% 30%, rgba(14,159,145,.30), transparent 64%),
    radial-gradient(26% 34% at 78% 20%, rgba(127,216,206,.16), transparent 66%),
    radial-gradient(34% 40% at 55% 84%, rgba(27,44,110,.55), transparent 68%);
  filter: blur(44px);
  animation: aurora 26s ease-in-out infinite;
}
.pagehead__title { font-size: clamp(30px, 4.4vw, 54px); color: #fff; margin-bottom: var(--sp-4); }
.pagehead__lead { max-width: 60ch; color: rgba(255,255,255,.80); font-size: clamp(14.5px, 1.15vw, 16px); }
.pagehead__points {
  list-style: none; margin: var(--sp-6) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6);
}
.pagehead__points li {
  display: inline-flex; align-items: center; gap: 7px; margin: 0;
  font-size: var(--fs-sm); font-weight: 600; color: rgba(255,255,255,.78);
}
.pagehead__points svg { color: var(--mint-300); flex: none; }

.crumbs { margin-bottom: var(--sp-5); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.crumbs li { margin: 0; font-size: var(--fs-micro); color: rgba(255,255,255,.55); }
.crumbs li + li::before { content: "/"; margin-right: var(--sp-2); color: rgba(255,255,255,.28); }
.crumbs a { color: rgba(255,255,255,.78); text-decoration: none; }
.crumbs a:hover { color: var(--mint-300); text-decoration: underline; }

/* ==========================================================================
   27. Appointment wizard
   ========================================================================== */
.booking { background: var(--cream-50); }
.booking__grid { display: grid; gap: clamp(24px, 3vw, 40px); align-items: start; }
@media (min-width: 1000px) { .booking__grid { grid-template-columns: 1.55fr .85fr; } }

.wizard {
  background: #fff; border: 1px solid var(--hairline);
  border-radius: var(--r-xl); box-shadow: var(--shadow-sm);
  padding: clamp(20px, 3vw, 34px);
  min-width: 0;
}
.wizard.is-sent { display: none; }

/* ---- stepper ---- */
.stepper { list-style: none; margin: 0 0 var(--sp-3); padding: 0; display: flex; gap: var(--sp-2); }
.stepper__item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0; min-width: 0; }
.stepper__dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--cream-200); color: var(--text-subtle);
  font-size: 13px; font-weight: 800;
  transition: background var(--dur-mid) var(--ease), color var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease);
}
.stepper__label { font-size: var(--fs-micro); font-weight: 700; color: var(--text-subtle); text-align: center; }
.stepper__item.is-active .stepper__dot { background: var(--blue-600); color: #fff; box-shadow: 0 0 0 4px rgba(22,79,181,.16); }
.stepper__item.is-active .stepper__label { color: var(--ink-900); }
.stepper__item.is-done .stepper__dot { background: var(--teal-600); color: #fff; font-size: 0; }
.stepper__item.is-done .stepper__dot::after { content: "\2713"; font-size: 15px; }

.stepper__bar { height: 4px; border-radius: 99px; background: var(--cream-200); overflow: hidden; margin-bottom: var(--sp-8); }
.stepper__bar span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--teal-600), var(--blue-600));
  transition: width var(--dur-slow) var(--ease);
}

/* ---- steps ---- */
.step { display: none; border: 0; padding: 0; margin: 0; min-width: 0; }
.step.is-active { display: block; animation: stepIn .32s var(--ease); }
@keyframes stepIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
.step__title { font-size: var(--fs-h3); font-weight: 800; letter-spacing: -.02em; padding: 0; margin-bottom: var(--sp-2); }
.step__hint { font-size: var(--fs-sm); color: var(--text-subtle); margin-bottom: var(--sp-6); }

/* ---- chamber chooser ---- */
.chooser { display: grid; gap: var(--sp-3); }
@media (min-width: 620px) { .chooser { grid-template-columns: 1fr 1fr; } }
.chooser__opt { position: relative; display: block; cursor: pointer; }
.chooser__opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.chooser__body {
  display: flex; flex-direction: column; gap: 6px; height: 100%;
  padding: var(--sp-5); border-radius: var(--r-lg);
  border: 1.5px solid var(--border); background: #fff;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.chooser__opt:hover .chooser__body { border-color: rgba(14,159,145,.5); transform: translateY(-2px); }
.chooser__opt input:checked + .chooser__body {
  border-color: var(--teal-600); background: rgba(14,159,145,.05);
  box-shadow: 0 0 0 3px rgba(14,159,145,.14);
}
.chooser__opt input:focus-visible + .chooser__body { outline: 2px solid var(--brand); outline-offset: 2px; }
/* nowrap + a shrinkable tag keeps the status badge pinned top-right on both
   cards; wrapping made it drop below the longer "NORTH BADDA" label. */
.chooser__top { display: flex; flex-wrap: nowrap; gap: var(--sp-3); align-items: flex-start; justify-content: space-between; }
.chooser__tag { flex: 1 1 auto; min-width: 0; padding-top: 4px; }
.chooser__top .badge { flex: none; }
.chooser__tag { font-size: var(--fs-micro); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); }
.chooser__name { font-size: var(--fs-h4); font-weight: 800; color: var(--ink-900); }
.chooser__meta { font-size: var(--fs-sm); color: var(--text-muted); }
.chooser__hours { font-size: var(--fs-sm); font-weight: 700; color: var(--ink-900); margin-top: auto; padding-top: var(--sp-2); }

/* ---- fields ---- */
.field-row { display: grid; gap: var(--sp-4); }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 120px; } }
.field-legend { display: block; margin-bottom: var(--sp-2); font-size: var(--fs-sm); font-weight: 700; color: var(--ink-600); }
.field-opt { font-weight: 400; color: var(--text-subtle); }

.segmented { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.segmented label { position: relative; }
.segmented input { position: absolute; opacity: 0; width: 0; height: 0; }
.segmented span {
  display: inline-flex; align-items: center; min-height: 42px;
  padding: 9px var(--sp-5); border-radius: var(--r-pill);
  border: 1px solid var(--border); background: #fff;
  font-size: var(--fs-sm); font-weight: 700; color: var(--ink-600);
  cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.segmented input:checked + span { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }
.segmented input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }

.callout {
  margin-top: var(--sp-5); padding: var(--sp-4);
  border-radius: var(--r-md); background: var(--bg-well);
  font-size: var(--fs-sm); color: var(--text-muted);
}
.callout--warn { background: rgba(224,169,60,.14); color: #6b4700; border: 1px solid rgba(224,169,60,.4); }
.callout--warn a { color: #6b4700; font-weight: 800; }

/* ---- calendar ---- */
.cal { margin-bottom: var(--sp-6); }
.cal__month {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-subtle);
  margin: var(--sp-4) 0 var(--sp-3);
}
.cal__month:first-child { margin-top: 0; }
.cal__row { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); }
.cal__day {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 56px; padding: 6px 2px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: #fff; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.cal__dow { font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--text-subtle); }
.cal__num { font-size: 15px; font-weight: 800; color: var(--ink-900); }
.cal__day:hover:not(:disabled) { border-color: var(--teal-600); transform: translateY(-2px); }
.cal__day.is-today { border-style: dashed; }
.cal__day.is-off { opacity: .38; cursor: not-allowed; background: var(--cream-200); }
.cal__day.is-off .cal__num { text-decoration: line-through; }
.cal__day.is-picked {
  background: var(--blue-600); border-color: var(--blue-600);
  box-shadow: 0 0 0 3px rgba(22,79,181,.18);
}
.cal__day.is-picked .cal__dow, .cal__day.is-picked .cal__num { color: #fff; }

/* ---- time slots ---- */
.slots { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.slots__empty { font-size: var(--fs-sm); color: var(--text-subtle); margin: 0; }
.slot {
  min-height: 42px; padding: 9px var(--sp-4); border-radius: var(--r-pill);
  border: 1px solid var(--border); background: #fff;
  font-size: var(--fs-sm); font-weight: 700; color: var(--ink-600);
  cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.slot:hover { border-color: var(--teal-600); color: var(--brand); }
.slot.is-picked { background: var(--teal-600); border-color: var(--teal-600); color: #fff; }
.slot--any { border-style: dashed; }

/* ---- nav ---- */
.wizard__nav {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  margin-top: var(--sp-8); padding-top: var(--sp-6);
  border-top: 1px solid var(--hairline);
}
.wizard__nav [data-next], .wizard__nav [data-send] { margin-left: auto; }
.btn--wa { background: #1da851; color: #fff; box-shadow: 0 10px 26px rgba(29,168,81,.30); }
.btn--wa:hover { background: #17853f; color: #fff; }

/* ---- summary ---- */
@media (min-width: 1000px) { .summary { position: sticky; top: 96px; } }
.summary__card {
  background: var(--navy-700); color: #fff;
  border-radius: var(--r-xl); padding: var(--sp-6);
  box-shadow: var(--shadow-lg);
}
.summary__head {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--mint-300);
  padding-bottom: var(--sp-3); margin-bottom: var(--sp-2);
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.summary__list { margin: 0; }
.summary__row {
  display: grid; grid-template-columns: 90px 1fr; gap: var(--sp-3);
  padding: var(--sp-3) 0; border-bottom: 1px solid rgba(255,255,255,.09);
}
.summary__row:last-child { border-bottom: 0; }
.summary__row dt { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.5); }
.summary__row dd {
  margin: 0; font-size: var(--fs-sm); font-weight: 700; color: rgba(255,255,255,.45);
  transition: color var(--dur-mid) var(--ease);
}
.summary__row dd.is-set { color: #fff; }
.summary__foot { margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid rgba(255,255,255,.14); }
.summary__foot .meta { color: rgba(255,255,255,.55); margin-bottom: var(--sp-3); }

/* ---- sent ---- */
.sent {
  background: #fff; border: 1px solid rgba(29,168,81,.4);
  border-radius: var(--r-xl); padding: clamp(28px, 4vw, 44px);
  text-align: center; box-shadow: var(--shadow-md);
  animation: stepIn .4s var(--ease);
}
.sent:focus { outline: none; }
.sent__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(29,168,81,.14); color: #17853f;
  margin-bottom: var(--sp-5);
}
.sent h3 { font-size: var(--fs-h3); margin-bottom: var(--sp-3); }
.sent p { font-size: var(--fs-sm); color: var(--text-muted); max-width: 46ch; margin-inline: auto; }
.sent__fallback { margin-top: var(--sp-4); }
.sent .btn { margin-top: var(--sp-6); }

/* ---- prep cards ---- */
.prep__no {
  display: inline-block; margin-bottom: var(--sp-3);
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .14em; color: var(--brand);
}
.prep h3 { font-size: var(--fs-h4); margin-bottom: var(--sp-2); }
.prep p { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; }

@media (max-width: 520px) {
  .stepper__label { display: none; }
  .wizard__nav .btn { flex: 1 1 100%; }
  .wizard__nav [data-next], .wizard__nav [data-send] { margin-left: 0; }
  .cal__row { grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); }
  .summary__row { grid-template-columns: 1fr; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .step.is-active, .sent { animation: none; }
  .pagehead__aurora { animation: none; }
  .cal__day:hover:not(:disabled), .chooser__opt:hover .chooser__body { transform: none; }
}


/* ==========================================================================
   28. "What to bring" — an animated infographic, nothing to click
   A connected timeline. The line draws itself as the section scrolls into
   view, cards stagger in behind it, and a highlight walks from item to item
   on a loop so the block is never static.
   ========================================================================== */
.bring { background: var(--cream-100); }

ol.bring {
  position: relative;
  list-style: none; margin: var(--sp-10) 0 0; padding: 0;
  display: grid; gap: var(--sp-4);
  counter-reset: bring;
}
@media (min-width: 800px) {
  ol.bring { grid-template-columns: repeat(5, 1fr); gap: var(--sp-3); }
}

/* the connecting rail, drawn once on reveal */
.bring__line {
  display: none;
  position: absolute; top: 34px; left: 10%; right: 10%; height: 2px;
  background: rgba(14, 26, 71, .10); border-radius: 2px; overflow: hidden;
}
.bring__line i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--teal-600), var(--mint-300));
  transition: width 1.6s var(--ease);
}
ol.bring.is-drawn .bring__line i { width: 100%; }
@media (min-width: 800px) { .bring__line { display: block; } }

.bring__item {
  position: relative; z-index: 1; margin: 0; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: var(--sp-5);
  background: #fff; border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  /* revealed by JS; visible by default if JS never runs */
  transition: transform var(--dur-mid) var(--ease),
              box-shadow var(--dur-mid) var(--ease),
              border-color var(--dur-mid) var(--ease),
              opacity .5s var(--ease);
}
@media (min-width: 800px) {
  .bring__item { align-items: center; text-align: center; padding: var(--sp-5) var(--sp-4); }
}
html.js ol.bring:not(.is-drawn) .bring__item { opacity: 0; transform: translateY(14px); }

.bring__node {
  display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--cream-200); color: var(--ink-600);
  margin-bottom: var(--sp-2);
  transition: background var(--dur-mid) var(--ease), color var(--dur-mid) var(--ease),
              box-shadow var(--dur-mid) var(--ease), scale var(--dur-mid) var(--ease);
}
.bring__no { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; color: var(--brand); }
.bring__title { font-size: var(--fs-sm); font-weight: 800; color: var(--ink-900); line-height: 1.3; }
.bring__desc { font-size: var(--fs-micro); color: var(--text-muted); line-height: 1.5; margin: 0; }

/* the walking highlight */
.bring__item.is-lit {
  border-color: rgba(14, 159, 145, .4);
  box-shadow: 0 14px 34px rgba(14, 26, 71, .08);
  transform: translateY(-5px);
}
.bring__item.is-lit .bring__node {
  background: var(--teal-600); color: #fff;
  box-shadow: 0 0 0 6px rgba(14, 159, 145, .14);
  scale: 1.06;
}

/* hover takes over from the loop */
.bring__item:hover { border-color: rgba(14, 159, 145, .4); transform: translateY(-5px); }
.bring__item:hover .bring__node { background: var(--teal-600); color: #fff; scale: 1.06; }

@media (prefers-reduced-motion: reduce) {
  html.js ol.bring:not(.is-drawn) .bring__item { opacity: 1; transform: none; }
  .bring__line i { transition: none; width: 100%; }
  .bring__item, .bring__item.is-lit, .bring__item:hover { transform: none; }
  .bring__node { transition: none; }
}

@media print {
  .bring { background: #fff; }
  .bring__line { display: none; }
  ol.bring { display: block; }
  .bring__item { border: 0; border-bottom: 1px solid #ccc; border-radius: 0; padding: 10pt 0; }
}

/* ==========================================================================
   29. Contact page
   ========================================================================== */
.quick { background: var(--cream-50); padding-bottom: clamp(28px, 3.5vw, 48px); }
.quick__grid {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}
.quick__note {
  margin-top: var(--sp-6); padding: var(--sp-4);
  border-radius: var(--r-md);
  background: rgba(224, 169, 60, .12); border: 1px solid rgba(224, 169, 60, .35);
  font-size: var(--fs-sm); color: #6b4700;
}

.qcard {
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--sp-5); border-radius: var(--r-lg);
  background: #fff; border: 1px solid var(--hairline);
  text-decoration: none; min-width: 0;
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.qcard:hover { border-color: rgba(14, 159, 145, .4); box-shadow: var(--shadow-sm); transform: translateY(-3px); }
.qcard__icon {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: var(--r-md);
  background: var(--bg-well); color: var(--brand);
  margin-bottom: var(--sp-2);
}
.qcard__label { font-size: var(--fs-micro); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-subtle); }
.qcard__value {
  font-size: var(--fs-sm); font-weight: 800; color: var(--ink-900);
  text-decoration: none; overflow-wrap: anywhere;
}
a.qcard__value:hover { color: var(--brand); }
.qcard__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-top: auto; padding-top: var(--sp-3); }
.qcard__go { font-size: var(--fs-micro); font-weight: 700; color: var(--brand); text-decoration: none; margin-top: auto; padding-top: var(--sp-3); }
.qcard__row .qcard__go { margin-top: 0; padding-top: 0; }
.qcard:hover .qcard__go { text-decoration: underline; }

/* WhatsApp card reads green */
.qcard--wa { background: linear-gradient(160deg, rgba(29,168,81,.10), #fff 60%); border-color: rgba(29,168,81,.32); }
.qcard--wa .qcard__icon { background: rgba(29,168,81,.14); color: #17853f; }
.qcard--wa .qcard__go { color: #17853f; }
.qcard--wa:hover { border-color: rgba(29,168,81,.6); }

/* copy button */
.copy {
  display: inline-grid; place-items: center; flex: none;
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--bg-well); color: var(--text-subtle);
  cursor: pointer; vertical-align: middle; margin-left: 6px;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.copy:hover { background: rgba(14,159,145,.14); color: var(--brand); }
.copy.is-copied { background: var(--teal-600); color: #fff; }
.copy.is-copied svg { display: none; }
.copy.is-copied::after { content: "\2713"; font-size: 13px; font-weight: 800; }

/* ---- message composer ---- */
.msg__grid { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (min-width: 940px) { .msg__grid { grid-template-columns: .85fr 1.15fr; } }
.msg__points { list-style: none; margin: var(--sp-6) 0 0; padding: 0; }
.msg__points li {
  position: relative; padding-left: 22px; margin-bottom: var(--sp-3);
  font-size: var(--fs-sm); color: var(--text-muted);
}
.msg__points li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--teal-500);
}
.msg__form {
  background: #fff; border: 1px solid var(--hairline);
  border-radius: var(--r-xl); padding: clamp(20px, 3vw, 32px);
  box-shadow: var(--shadow-sm); min-width: 0;
}
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.msg__sent {
  margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: rgba(29,168,81,.12); color: #17853f;
  font-size: var(--fs-sm); font-weight: 700;
}
.msg__sent a { color: #17853f; }

/* ---- follow ---- */
.follow { background: var(--cream-50); text-align: center; }
.follow .eyebrow { justify-content: center; }
.follow .section-lead { margin-inline: auto; }
.follow__row {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--sp-3); margin-top: var(--sp-6);
}
.fcard {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-6); border-radius: var(--r-lg);
  background: #fff; border: 1px solid var(--hairline);
  font-size: var(--fs-sm); font-weight: 800; color: var(--ink-900);
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.fcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.fcard--yt { color: #c4302b; border-color: rgba(196,48,43,.28); }
.fcard--yt:hover { border-color: #c4302b; }
.fcard--fb { color: #1668c8; border-color: rgba(22,104,200,.28); }
.fcard--fb:hover { border-color: #1668c8; }
.fcard--tt { color: var(--ink-900); border-color: var(--border); }
.fcard--tt:hover { border-color: var(--ink-900); }

@media (prefers-reduced-motion: reduce) {
  .qcard:hover, .fcard:hover { transform: none; }
}

/* ==========================================================================
   30. Sub-page responsive tiers (appointment + contact)
   Mirrors the homepage tiers in section 25.
   ========================================================================== */

/* --- overflow guards, same reasoning as 25.1 --- */
.booking__grid, .wizard, .summary, .msg__grid, .msg__form,
.quick__grid, .chooser, .field-row, ol.bring { min-width: 0; }
.booking__grid > *, .msg__grid > *, .quick__grid > *, .chooser > * { min-width: 0; }
.step__title, .chooser__name, .chooser__meta, .qcard__value,
.bring__title, .bring__desc, .summary__row dd { overflow-wrap: anywhere; }

/* --- small phones --- */
@media (max-width: 400px) {
  .pagehead__points { gap: var(--sp-2) var(--sp-4); }
  .pagehead__points li { font-size: var(--fs-micro); }

  .wizard { padding: var(--sp-4); border-radius: var(--r-lg); }
  .stepper__dot { width: 30px; height: 30px; font-size: 12px; }
  .segmented span { padding: 9px var(--sp-4); }
  .slot { padding: 9px var(--sp-3); }
  .cal__row { grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 5px; }
  .cal__day { min-height: 50px; }
  .cal__num { font-size: 14px; }

  .qcard { padding: var(--sp-4); }
  .fcard { flex: 1 1 100%; justify-content: center; }
  .msg__form { padding: var(--sp-4); }
}

/* --- phones --- */
@media (max-width: 600px) {
  .chooser__body { padding: var(--sp-4); }
  .chooser__top { flex-wrap: wrap; }
  .chooser__tag { flex-basis: 100%; }

  .segmented { display: grid; grid-template-columns: 1fr; }
  .segmented span { justify-content: center; }

  .field-row { grid-template-columns: 1fr; }
  .msg__form .btn--block { width: 100%; }

  /* the summary is a recap, so it belongs after the form on a phone */
  .booking__grid { grid-template-columns: 1fr; }
  .summary { order: 2; }
  .wizard { order: 1; }
}

/* --- tablet --- */
@media (min-width: 601px) and (max-width: 999px) {
  .chooser { grid-template-columns: 1fr 1fr; }
  .summary__card { display: grid; gap: var(--sp-5); grid-template-columns: 1fr 240px; align-items: start; }
  .summary__foot { margin-top: 0; padding-top: 0; border-top: 0; }
}

/* --- landscape phones --- */
@media (max-height: 520px) and (orientation: landscape) {
  .pagehead { padding-block: var(--sp-4) var(--sp-6); }
  .pagehead__points { display: none; }
}

/* --- touch --- */
@media (hover: none) {
  .qcard:hover, .fcard:hover, .cal__day:hover:not(:disabled),
  .chooser__opt:hover .chooser__body, .bring__item:hover { transform: none; }
  .qcard__go { text-decoration: underline; }
}

/* --- print --- */
@media print {
  .wizard__nav, .msg__form, .quick__note, .follow, .chamber__map { display: none !important; }
  .pagehead { background: #fff; color: #000; }
  .pagehead__title, .pagehead__lead { color: #000; }
  .pagehead__aurora, .crumbs { display: none !important; }
  .summary__card { background: #fff; color: #000; border: 1px solid #999; }
  .summary__row dt, .summary__row dd { color: #000 !important; }
  .qcard, .chamber { break-inside: avoid; border: 1px solid #ccc; }
}

/* ==========================================================================
   31. About page
   ========================================================================== */
.prohead__grid { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (min-width: 900px) { .prohead__grid { grid-template-columns: 1.25fr .75fr; } }

.prohead__role { font-size: var(--fs-h4); font-weight: 700; color: #fff; margin-bottom: 4px; }
.prohead__quals { font-size: var(--fs-sm); color: var(--mint-300); font-weight: 600; margin-bottom: var(--sp-6); }
.prohead__cta { margin-bottom: 0; }

.prohead__media { margin: 0; position: relative; justify-self: center; width: min(380px, 78%); }
.prohead__media::before {
  content: ""; position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: 112%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(14,159,145,.28), transparent 66%);
  filter: blur(26px);
  animation: aboutHalo 12s ease-in-out infinite;
}
.prohead__media img {
  position: relative; border-radius: var(--r-2xl);
  box-shadow: 0 30px 70px rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.14);
}

/* ---- at a glance ---- */
.glance { background: var(--cream-50); padding-block: clamp(28px, 3.4vw, 44px); border-bottom: 1px solid var(--hairline); }
.glance__grid { display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }
.glance__item { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.glance__num { font-size: clamp(28px, 3.6vw, 42px); font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.glance__num sup { font-size: .45em; color: var(--brand); }
.glance__label { font-size: var(--fs-sm); color: var(--text-subtle); }

/* ---- credentials ---- */
.creds__grid { display: grid; gap: var(--sp-4); margin-top: var(--sp-8); }
@media (min-width: 700px) { .creds__grid { grid-template-columns: 1fr 1fr; } }
.cred {
  position: relative; padding: var(--sp-6);
  background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-lg);
  min-width: 0;
  transition: border-color var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease), transform var(--dur-mid) var(--ease);
}
.cred:hover { border-color: rgba(14,159,145,.4); box-shadow: var(--shadow-sm); transform: translateY(-3px); }
.cred__no { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; color: var(--brand); }
.cred__name { font-size: var(--fs-h4); margin: var(--sp-2) 0 2px; }
.cred__sub { font-size: var(--fs-micro); font-weight: 700; color: var(--text-subtle); margin-bottom: var(--sp-3); text-transform: uppercase; letter-spacing: .06em; }
.cred__body { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; }

/* ---- practice ---- */
.practice__icon {
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: var(--r-md);
  background: var(--bg-well); color: var(--brand);
  margin-bottom: var(--sp-4);
}
.practice__grid h3 { font-size: var(--fs-h4); margin-bottom: var(--sp-2); }
.practice__grid h3 a { color: var(--ink-900); text-decoration: none; }
.practice__grid h3 a:hover { color: var(--brand); }
.practice__grid p { font-size: var(--fs-sm); color: var(--text-muted); }

/* ---- approach ---- */

/* ---- bangla block ---- */

/* chambers without a map panel */
.chamber--plain .chamber__body { padding: clamp(20px, 2.6vw, 28px); }
.chamber--plain .chamber__tag { flex-wrap: wrap; }
.chamber--plain .chamber__facts dt { min-width: 0; }

/* ---- media strip ---- */
.media-strip { background: var(--cream-50); }
.media-strip__inner { display: grid; gap: var(--sp-6); align-items: center; }
@media (min-width: 860px) { .media-strip__inner { grid-template-columns: 1.4fr auto; } }

.cta-band__updated { margin-top: var(--sp-6); color: var(--text-subtle); }

@media (prefers-reduced-motion: reduce) {
  .cred:hover { transform: none; }
  .prohead__media::before { animation: none; }
}

/* ==========================================================================
   32. Treatment options index
   ========================================================================== */

/* ---- live search in the page head ---- */
.svsearch {
  position: relative; display: flex; align-items: center;
  max-width: 520px; margin-top: var(--sp-6);
}
.svsearch__icon {
  position: absolute; left: 16px; display: grid; place-items: center;
  color: rgba(255,255,255,.55); pointer-events: none;
}
.svsearch__input {
  width: 100%; padding: 15px 46px 15px 46px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff; font-size: var(--fs-base);
  backdrop-filter: blur(8px);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.svsearch__input::placeholder { color: rgba(255,255,255,.5); }
.svsearch__input:focus {
  outline: none;
  border-color: var(--mint-300);
  background: rgba(255,255,255,.12);
  box-shadow: 0 0 0 4px rgba(127,216,206,.18);
}
.svsearch__input::-webkit-search-cancel-button { display: none; }
.svsearch__clear {
  position: absolute; right: 12px;
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,.14); color: #fff; cursor: pointer;
}
.svsearch__clear:hover { background: rgba(255,255,255,.26); }
.svsearch__status { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--mint-300); font-weight: 700; min-height: 1.2em; }

/* ---- category cards ---- */
.svcats { background: var(--cream-50); padding-block: clamp(28px, 3.5vw, 52px); }
.svcats__grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.scat {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--sp-6); border-radius: var(--r-xl);
  background: #fff; border: 1px solid var(--hairline);
  text-decoration: none; min-width: 0;
  transition: border-color var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease), transform var(--dur-mid) var(--ease);
}
.scat::after {
  content: ""; position: absolute; inset: auto -30% -60% auto;
  width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle, rgba(14,159,145,.14), transparent 68%);
  transition: transform var(--dur-slow) var(--ease);
}
.scat:hover { border-color: rgba(14,159,145,.45); box-shadow: var(--shadow-lg); transform: translateY(-5px); }
.scat:hover::after { transform: scale(1.5); }
.scat__icon {
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: var(--r-md);
  background: var(--bg-well); color: var(--brand); margin-bottom: var(--sp-3);
}
.scat__count {
  position: absolute; top: var(--sp-5); right: var(--sp-6);
  font-size: clamp(30px, 3.4vw, 44px); font-weight: 800;
  color: rgba(14,26,71,.08); line-height: 1;
}
.scat__name { position: relative; font-size: var(--fs-h4); color: var(--ink-900); }
.scat__desc { position: relative; font-size: var(--fs-sm); color: var(--text-muted); margin: 0; }
.scat__go { position: relative; margin-top: var(--sp-4); font-size: var(--fs-sm); font-weight: 700; color: var(--brand); }

/* ---- symptom router ---- */
.router__grid { display: grid; gap: var(--sp-6); margin-top: var(--sp-8); align-items: start; }
@media (min-width: 900px) { .router__grid { grid-template-columns: 1fr 1fr; } }

.router__symptoms { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-content: flex-start; }
.sym {
  padding: 10px var(--sp-4); border-radius: var(--r-pill);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.82); font-size: var(--fs-sm); font-weight: 600;
  cursor: pointer; text-align: left;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.sym:hover { background: rgba(255,255,255,.12); border-color: var(--mint-300); color: #fff; transform: translateY(-2px); }
.sym[aria-pressed="true"] { background: var(--mint-300); border-color: var(--mint-300); color: var(--navy-900); font-weight: 800; }

.router__out {
  min-height: 220px; padding: var(--sp-6);
  border-radius: var(--r-xl);
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14);
}
.router__empty { display: grid; place-items: center; gap: var(--sp-3); min-height: 176px; text-align: center; }
.router__empty-icon {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,.07); color: var(--mint-300);
}
.router__empty p { font-size: var(--fs-sm); color: rgba(255,255,255,.6); margin: 0; max-width: 30ch; }

.router__result { animation: routerIn .34s var(--ease); }
@keyframes routerIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.router__lead { font-size: var(--fs-sm); color: rgba(255,255,255,.72); margin-bottom: var(--sp-4); }
.router__lead strong { color: var(--mint-300); }
.router__links { list-style: none; margin: 0 0 var(--sp-5); padding: 0; display: grid; gap: var(--sp-2); }
.router__links li { margin: 0; animation: routerIn .36s var(--ease) both; animation-delay: var(--d, 0ms); }
.router__links a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  color: #fff; font-size: var(--fs-sm); font-weight: 700; text-decoration: none;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), padding-left var(--dur-fast) var(--ease);
}
.router__links a:hover { background: rgba(127,216,206,.16); border-color: var(--mint-300); padding-left: var(--sp-5); color: #fff; }
.router__arrow { color: var(--mint-300); }
.router__cta { font-size: var(--fs-sm); color: rgba(255,255,255,.6); margin: 0; }
.router__cta a { color: var(--mint-300); }
.router__note {
  margin-top: var(--sp-8); padding: var(--sp-4);
  border-radius: var(--r-md);
  background: rgba(224,169,60,.14); border: 1px solid rgba(224,169,60,.34);
  font-size: var(--fs-sm); color: #ffdda1;
}
.router__note a { color: #fff; font-weight: 800; }

/* ---- directory ---- */
.directory { background: var(--cream-50); }
.sgroup { margin-bottom: var(--sp-10); }
.sgroup[hidden] { display: none; }
.sgroup:last-child { margin-bottom: 0; }
.sgroup__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-4);
  padding-bottom: var(--sp-3); margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--hairline);
}
.sgroup__head h3 { font-size: var(--fs-h4); }
.sgroup__meta { font-size: var(--fs-micro); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); }

.stiles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.stile { margin: 0; min-width: 0; }
.stile[hidden] { display: none; }
.stile a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  height: 100%; padding: var(--sp-4);
  border-radius: var(--r-md); background: #fff; border: 1px solid var(--hairline);
  color: var(--ink-600); font-size: var(--fs-sm); font-weight: 600;
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.stile a:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.stile__go { color: var(--brand); opacity: 0; transform: translateX(-4px); transition: all var(--dur-fast) var(--ease); }
.stile a:hover .stile__go { opacity: 1; transform: none; }
.directory__none { margin-top: var(--sp-6); padding: var(--sp-5); border-radius: var(--r-md); background: var(--bg-well); font-size: var(--fs-sm); color: var(--text-muted); }

/* ---- compare ---- */
.compare__switch { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-6) 0 var(--sp-5); }
.compare__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
@media (min-width: 760px) { .compare__list { grid-template-columns: 1fr 1fr; } }
.compare__list li {
  margin: 0; padding: var(--sp-5); border-radius: var(--r-lg);
  background: #fff; border: 1px solid var(--hairline);
  animation: routerIn .3s var(--ease) both;
}
.compare__list li:nth-child(2) { animation-delay: 60ms; }
.compare__list li:nth-child(3) { animation-delay: 120ms; }
.compare__list li:nth-child(4) { animation-delay: 180ms; }
.compare__list strong { display: block; font-size: var(--fs-sm); font-weight: 800; color: var(--ink-900); margin-bottom: 4px; }
.compare__list span { font-size: var(--fs-sm); color: var(--text-muted); }

/* ---- responsive + motion ---- */
.svcats__grid, .router__grid, .stiles, .compare__list, .directory__body { min-width: 0; }
.scat__name, .scat__desc, .stile a, .sym, .router__links a { overflow-wrap: anywhere; }

@media (max-width: 600px) {
  .svsearch__input { padding: 13px 42px; font-size: var(--fs-sm); }
  .scat__count { font-size: 30px; top: var(--sp-4); right: var(--sp-5); }
  .router__out { padding: var(--sp-4); min-height: 0; }
  .router__symptoms { max-height: 232px; overflow-y: auto; padding-right: 4px; }
  .filters { flex-wrap: wrap; row-gap: var(--sp-2); }
}
@media (hover: none) {
  .scat:hover, .stile a:hover, .sym:hover { transform: none; }
  .stile__go { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .router__result, .router__links li, .compare__list li { animation: none; }
  .scat:hover, .stile a:hover, .sym:hover { transform: none; }
  .scat::after { transition: none; }
}
@media print {
  .svsearch, .router, .compare__switch, .filters { display: none !important; }
  .stile a { border: 0; border-bottom: 1px solid #ccc; border-radius: 0; }
}

/* ==========================================================================
   33. Search results panel (treatment index combobox)
   ========================================================================== */
.svsearch { position: relative; }

.svresults {
  position: absolute; top: calc(100% + 10px); left: 0; right: 0;
  z-index: var(--z-overlay);
  padding: var(--sp-2);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 60px rgba(10, 18, 53, .34);
  animation: routerIn .18s var(--ease);
}
.svresults__list { list-style: none; margin: 0; padding: 0; max-height: 46vh; overflow-y: auto; scrollbar-width: thin; }
.svresults__list li { margin: 0; }

.svresults__list a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: 11px var(--sp-3); border-radius: var(--r-md);
  color: var(--ink-900); text-decoration: none;
  transition: background var(--dur-fast) var(--ease);
}
.svresults__list li.is-active a,
.svresults__list a:hover { background: rgba(14, 159, 145, .10); }

.svresults__name { font-size: var(--fs-sm); font-weight: 700; line-height: 1.3; min-width: 0; }
.svresults__name mark {
  background: rgba(14, 159, 145, .22); color: inherit;
  border-radius: 3px; padding: 0 1px;
}
.svresults__cat {
  flex: none; font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: .04em; color: var(--text-subtle);
  padding: 3px 9px; border-radius: var(--r-pill); background: var(--bg-well);
}
.svresults__empty { padding: var(--sp-4) var(--sp-3); font-size: var(--fs-sm); color: var(--text-subtle); }

.svresults__all {
  width: 100%; margin-top: var(--sp-2); padding: 10px;
  border-radius: var(--r-md); border-top: 1px solid var(--hairline);
  background: none; color: var(--brand);
  font-size: var(--fs-sm); font-weight: 700; cursor: pointer;
}
.svresults__all:hover { background: var(--bg-well); }

@media (max-width: 600px) {
  .svresults__cat { display: none; }
  .svresults__list { max-height: 52vh; }
}
@media (prefers-reduced-motion: reduce) { .svresults { animation: none; } }

/* ==========================================================================
   34. Treatment-index page head — let the search panel escape
   .pagehead sets `overflow: hidden` (to contain the blurred aurora) and
   `isolation: isolate`. Together those trap the combobox panel inside the
   section, so it was being clipped at the section boundary.

   Both are lifted here. The aurora is instead held inside its own box and
   masked so its blur fades out before the edge — no bleed into the next
   section, and nothing clipping the dropdown.
   ========================================================================== */
.svchead {
  overflow: visible;
  isolation: auto;
  z-index: 30;               /* sits above the sections that follow */
}
.svchead .pagehead__aurora {
  inset: 0;
  height: 100%;
  -webkit-mask-image: radial-gradient(78% 86% at 50% 42%, #000 48%, transparent 100%);
          mask-image: radial-gradient(78% 86% at 50% 42%, #000 48%, transparent 100%);
}

/* The panel must clear the following section, which has no z-index of its own. */
.svresults { z-index: 60; }

/* Keep the search field above the aurora once the parent is no longer isolated */
.svchead .container { position: relative; z-index: 1; }

/* ==========================================================================
   35. Category hub pages
   ========================================================================== */
.hubintro { background: var(--cream-50); }
.hubintro__grid { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (min-width: 940px) { .hubintro__grid { grid-template-columns: 1.35fr .65fr; } }
.hubintro .prose p { font-size: var(--fs-base); color: var(--text-muted); margin-bottom: var(--sp-4); }

.hpoints { display: grid; gap: var(--sp-3); }
.hpoint {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-5); border-radius: var(--r-lg);
  background: #fff; border: 1px solid var(--hairline);
  transition: border-color var(--dur-mid) var(--ease), transform var(--dur-mid) var(--ease);
}
.hpoint:hover { border-color: rgba(14,159,145,.4); transform: translateY(-3px); }
.hpoint__tick {
  flex: none; display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(14,159,145,.12); color: var(--brand);
}
.hpoint strong { display: block; font-size: var(--fs-sm); font-weight: 800; color: var(--ink-900); margin-bottom: 3px; }
.hpoint span { font-size: var(--fs-micro); color: var(--text-muted); line-height: 1.5; }

/* group -> hub link on the index */
.sgroup__head { position: relative; }
.sgroup__hub {
  margin-left: auto; font-size: var(--fs-micro); font-weight: 700;
  color: var(--brand); text-decoration: none; white-space: nowrap;
}
.sgroup__hub:hover { text-decoration: underline; }

/* ---- steps ---- */
.hsteps {
  list-style: none; margin: var(--sp-8) 0 0; padding: 0;
  display: grid; gap: var(--sp-4);
}
@media (min-width: 820px) { .hsteps { grid-template-columns: repeat(4, 1fr); } }
.hstep {
  position: relative; margin: 0; padding: var(--sp-5);
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  transition: background var(--dur-mid) var(--ease), border-color var(--dur-mid) var(--ease), transform var(--dur-mid) var(--ease);
}
.hstep:hover { background: rgba(255,255,255,.09); border-color: var(--mint-300); transform: translateY(-4px); }
.hstep__no {
  display: inline-block; margin-bottom: var(--sp-3);
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em; color: var(--mint-300);
}
.hstep h3 { font-size: var(--fs-sm); color: #fff; margin-bottom: var(--sp-2); }
.hstep p { font-size: var(--fs-micro); color: rgba(255,255,255,.66); line-height: 1.55; margin: 0; }

@media (hover: none) {
  .hpoint:hover, .hstep:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hpoint:hover, .hstep:hover { transform: none; }
}

/* ==========================================================================
   36. Menu: "Treatment Options" is a link AND a dropdown
   The label navigates to the index; the caret opens the panel. Previously
   the whole thing was a button, so there was no way to reach the page.
   ========================================================================== */
.nav-split { display: flex; align-items: center; gap: 2px; }

.nav-link--parent { flex: 1; }

.nav-caret {
  display: inline-grid; place-items: center; flex: none;
  width: 30px; height: 30px; border-radius: 8px;
  color: var(--ink-400); cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nav-caret:hover { background: var(--bg-well); color: var(--brand); }
.nav-caret svg { transition: transform var(--dur-fast) var(--ease); }
.nav-caret[aria-expanded="true"] { color: var(--brand); }
.nav-caret[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-caret:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* mobile: caret sits at the far right of the drawer row */
@media (max-width: 979px) {
  .nav-split { justify-content: space-between; }
  .nav-caret { width: 40px; height: 40px; }
}

/* clickable column headings inside the panel */
.submenu__title--link {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.submenu__title--link span { transition: transform var(--dur-fast) var(--ease); }
.submenu__title--link:hover { color: var(--brand-hover); }
.submenu__title--link:hover span { transform: translateX(3px); }

/* ==========================================================================
   37. Responsive tiers — treatment index + category hubs
   Mirrors section 25 (home) and section 30 (appointment/contact).
   ========================================================================== */

/* --- 37.1 overflow guards ------------------------------------------------ */
.svcats__grid, .router__grid, .router__out, .directory__body, .sgroup,
.stiles, .compare__list, .hubintro__grid, .hpoints, .hsteps,
.svresults, .svresults__list { min-width: 0; }
.svcats__grid > *, .router__grid > *, .hubintro__grid > *, .hsteps > * { min-width: 0; }
.sgroup__head h3, .hstep h3, .hpoint strong, .compare__list strong,
.svresults__name, .router__links a { overflow-wrap: anywhere; }

/* --- 37.2 small phones --------------------------------------------------- */
@media (max-width: 400px) {
  .pagehead__title { font-size: clamp(26px, 8vw, 34px); }

  .svsearch__input { padding: 12px 40px; }
  .svsearch__icon { left: 13px; }
  .svsearch__clear { right: 9px; width: 26px; height: 26px; }

  .scat { padding: var(--sp-5); }
  .scat__count { font-size: 26px; top: var(--sp-4); right: var(--sp-4); }
  .scat__icon { width: 42px; height: 42px; }

  .sym { padding: 9px var(--sp-3); font-size: var(--fs-micro); }
  .router__out { padding: var(--sp-3); }
  .router__links a { padding: var(--sp-3); }

  .stile a { padding: var(--sp-3) var(--sp-4); }
  .sgroup { margin-bottom: var(--sp-8); }

  .hpoint { padding: var(--sp-4); }
  .hstep { padding: var(--sp-4); }
  .compare__list li { padding: var(--sp-4); }
}

/* --- 37.3 phones --------------------------------------------------------- */
@media (max-width: 600px) {
  /* the group heading, count and hub link need to stack rather than squeeze */
  .sgroup__head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .sgroup__hub { margin-left: 0; }

  .section__head { flex-direction: column; align-items: flex-start; }
  .section__head .btn { width: 100%; justify-content: center; }

  .compare__switch { display: grid; grid-template-columns: 1fr; }
  .compare__switch .pill { justify-content: center; }

  .prohead__cta .btn, .cta-band__actions .btn { width: 100%; }

  /* symptom list gets its own scroll so the panel stays reachable */
  .router__symptoms { max-height: 210px; overflow-y: auto; padding-right: 4px; }
  .router__note { font-size: var(--fs-micro); }
}

/* --- 37.4 tablet --------------------------------------------------------- */
@media (min-width: 601px) and (max-width: 899px) {
  .svcats__grid { grid-template-columns: 1fr 1fr; }
  .svcats__grid > :last-child { grid-column: 1 / -1; }
  .hubintro__grid { grid-template-columns: 1fr; }
  .hpoints { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
}

/* Four steps across is too narrow between 820 and 1100 — two rows of two. */
@media (min-width: 820px) and (max-width: 1099px) {
  .hsteps { grid-template-columns: 1fr 1fr; }
}

/* --- 37.5 landscape phones ---------------------------------------------- */
@media (max-height: 520px) and (orientation: landscape) {
  .svsearch { margin-top: var(--sp-4); }
  .router__symptoms { max-height: 160px; overflow-y: auto; }
  .router__out { min-height: 0; }
}

/* --- 37.6 touch ---------------------------------------------------------- */
@media (hover: none) {
  .scat:hover, .stile a:hover, .sym:hover,
  .hpoint:hover, .hstep:hover { transform: none; }
  .stile__go { opacity: 1; transform: none; }
  .submenu__title--link:hover span { transform: none; }
  /* a tap should not need a second tap to reveal an affordance */
  .scat__go, .sgroup__hub { text-decoration: underline; }
}

/* --- 37.7 wide ----------------------------------------------------------- */
@media (min-width: 1600px) {
  .stiles { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
}

/* --- 37.8 print ---------------------------------------------------------- */
@media print {
  .svsearch, .svsearch__status, .router, .compare__switch,
  .filters, .sgroup__hub, .scat__go { display: none !important; }
  .pagehead { background: #fff; color: #000; }
  .pagehead__title, .pagehead__lead, .crumbs { color: #000; }
  .pagehead__aurora { display: none !important; }
  .scat, .hpoint, .hstep, .compare__list li { border: 1px solid #ccc; break-inside: avoid; }
  .hstep, .hstep h3, .hstep p { color: #000 !important; background: #fff !important; }
  .stiles { display: block; }
  .stile a { border: 0; border-bottom: 1px solid #ddd; border-radius: 0; padding: 6pt 0; }
}

/* ==========================================================================
   38. Procedure pages
   ========================================================================== */
.procwhat { background: var(--cream-50); }
.procwhat__grid { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (min-width: 940px) { .procwhat__grid { grid-template-columns: 1.4fr .6fr; } }
.procwhat .prose p { font-size: var(--fs-base); color: var(--text-muted); margin-bottom: var(--sp-4); }

/* at-a-glance card */
.proccard {
  position: sticky; top: 96px;
  padding: var(--sp-6); border-radius: var(--r-xl);
  background: var(--navy-700); color: #fff;
  box-shadow: var(--shadow-lg);
}
@media (max-width: 939px) { .proccard { position: static; } }
.proccard__head {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--mint-300);
  padding-bottom: var(--sp-3); margin-bottom: var(--sp-2);
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.proccard__list { margin: 0 0 var(--sp-5); }
.proccard__list > div { padding: var(--sp-3) 0; border-bottom: 1px solid rgba(255,255,255,.09); }
.proccard__list > div:last-child { border-bottom: 0; }
.proccard__list dt { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.5); margin-bottom: 3px; }
.proccard__list dd { margin: 0; font-size: var(--fs-sm); font-weight: 700; color: #fff; }
.proccard__list dd span { display: block; font-size: var(--fs-micro); font-weight: 500; color: rgba(255,255,255,.6); margin-top: 2px; }

/* who it is for */
.procwhen__grid { display: grid; gap: var(--sp-6); align-items: start; margin-top: var(--sp-6); }
@media (min-width: 880px) { .procwhen__grid { grid-template-columns: 1.25fr .75fr; } }
.ticklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.ticklist li {
  display: grid; grid-template-columns: 26px 1fr; gap: var(--sp-2);
  align-items: start; margin: 0;
  padding: var(--sp-4); border-radius: var(--r-md);
  background: #fff; border: 1px solid var(--hairline);
  font-size: var(--fs-sm); color: var(--ink-600); line-height: 1.5;
}
.ticklist svg { color: var(--brand); margin-top: 3px; }
.procwhen__note { margin-top: 0; }

/* recovery */
.procrec { background: var(--cream-50); }
.procrec__grid { display: grid; gap: clamp(24px, 3vw, 48px); align-items: start; }
@media (min-width: 880px) { .procrec__grid { grid-template-columns: .8fr 1.2fr; } }
.reclist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.reclist li {
  position: relative; margin: 0; padding: var(--sp-4) var(--sp-5) var(--sp-4) var(--sp-8);
  border-radius: var(--r-md); background: #fff; border: 1px solid var(--hairline);
  font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.6;
}
.reclist li::before {
  content: ""; position: absolute; left: var(--sp-5); top: 22px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--teal-500);
}

/* urgent band */
.urgentband { background: var(--cream-100); padding-block: clamp(28px, 3.4vw, 44px); }
.urgentband__inner {
  display: grid; gap: var(--sp-4); align-items: center;
  padding: var(--sp-6); border-radius: var(--r-xl);
  background: rgba(224, 169, 60, .12);
  border: 1px solid rgba(224, 169, 60, .40);
}
@media (min-width: 820px) { .urgentband__inner { grid-template-columns: auto 1fr auto; gap: var(--sp-6); } }
.urgentband__icon {
  display: grid; place-items: center; flex: none;
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(224, 169, 60, .22); color: #8a5d00;
}
.urgentband__title { font-size: var(--fs-h4); color: #6b4700; margin-bottom: 4px; }
.urgentband p { font-size: var(--fs-sm); color: #6b4700; margin: 0; }

.related { background: var(--cream-50); }

/* --- responsive --- */
.procwhat__grid, .procwhen__grid, .procrec__grid, .proccard, .ticklist, .reclist { min-width: 0; }
.proccard__list dd, .ticklist li, .reclist li { overflow-wrap: anywhere; }

@media (max-width: 600px) {
  .urgentband__inner { padding: var(--sp-5); }
  .urgentband .btn { width: 100%; justify-content: center; }
  .reclist li { padding-left: var(--sp-7, 28px); }
  .reclist li::before { left: var(--sp-4); }
}
@media (max-width: 400px) {
  .proccard { padding: var(--sp-4); }
  .ticklist li { padding: var(--sp-3); grid-template-columns: 22px 1fr; }
}
@media print {
  .proccard { background: #fff; color: #000; border: 1px solid #999; position: static; }
  .proccard__list dt, .proccard__list dd, .proccard__head { color: #000 !important; }
  .urgentband__inner { border: 1px solid #999; background: #fff; }
  .urgentband__title, .urgentband p { color: #000 !important; }
  .related { display: none !important; }
}

/* ==========================================================================
   39. Responsive tiers — procedure pages
   Completes sections 25 / 30 / 37 for the deepest page type.
   ========================================================================== */

/* --- overflow guards --- */
.procwhat__grid, .procwhen__grid, .procrec__grid, .urgentband__inner,
.proccard, .proccard__list, .ticklist, .reclist, .related .stiles { min-width: 0; }
.procwhat__grid > *, .procwhen__grid > *, .procrec__grid > *,
.urgentband__inner > * { min-width: 0; }
.urgentband__title, .urgentband p, .proccard__list dd { overflow-wrap: anywhere; }

/* --- small phones --- */
@media (max-width: 400px) {
  .pagehead__title { font-size: clamp(25px, 7.6vw, 32px); }
  .prohead__cta .btn { width: 100%; }
  .procwhat .prose p { font-size: var(--fs-sm); }
  .reclist li { padding-block: var(--sp-3); }
  .urgentband__icon { width: 44px; height: 44px; }
  .related .stiles { gap: 6px; }
}

/* --- phones --- */
@media (max-width: 600px) {
  /* the at-a-glance card is reference material, so it follows the explanation */
  .procwhat__grid { grid-template-columns: 1fr; }
  .proccard { order: 2; }

  .procwhen__grid, .procrec__grid { grid-template-columns: 1fr; }
  .ticklist li { grid-template-columns: 20px 1fr; padding: var(--sp-3) var(--sp-4); }

  .urgentband__inner { text-align: left; }
  .related .section__head .btn { width: 100%; justify-content: center; }
  .cta-band__updated { font-size: var(--fs-micro); }
}

/* --- tablet --- */
@media (min-width: 601px) and (max-width: 939px) {
  .procwhat__grid { grid-template-columns: 1fr; }
  .proccard__list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-5); }
  .proccard__list > div:nth-last-child(-n+2) { border-bottom: 0; }
  .ticklist { grid-template-columns: 1fr 1fr; }
}

/* --- landscape phones --- */
@media (max-height: 520px) and (orientation: landscape) {
  .proccard { position: static; }
}

/* --- touch --- */
@media (hover: none) {
  .ticklist li, .reclist li { transform: none; }
}

/* --- print --- */
@media print {
  .procwhat__grid, .procwhen__grid, .procrec__grid { display: block; }
  .proccard, .ticklist li, .reclist li { break-inside: avoid; }
  .urgentband { break-inside: avoid; }
  .prohead__cta, .cta-band__actions { display: none !important; }
}

/* ==========================================================================
   40. Legal pages
   ========================================================================== */
.legal { background: var(--cream-50); }
.legal__block { margin-bottom: var(--sp-10); }
.legal__block:last-of-type { margin-bottom: var(--sp-8); }
.legal__block h2 {
  font-size: var(--fs-h3); margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3); border-bottom: 1px solid var(--hairline);
}
.legal__block p { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--sp-4); line-height: 1.7; }
.legal__block ul { margin: 0 0 var(--sp-4); padding-left: 0; list-style: none; }
.legal__block li {
  position: relative; padding-left: 22px; margin-bottom: var(--sp-3);
  font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.65;
}
.legal__block li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--teal-500);
}
.legal__block strong { color: var(--ink-900); }
.legal__updated {
  padding-top: var(--sp-5); border-top: 1px solid var(--hairline);
  color: var(--text-subtle);
}
@media (max-width: 600px) {
  .legal__block { margin-bottom: var(--sp-8); }
  .legal__block h2 { font-size: var(--fs-h4); }
}
@media print {
  .legal { background: #fff; }
  .legal__block { break-inside: avoid; }
}

/* ==========================================================================
   41. Blog
   ========================================================================== */
.bloglist { background: var(--cream-50); }
.bposts { list-style: none; margin: var(--sp-6) 0 0; padding: 0;
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.bpost { margin: 0; min-width: 0; }
.bpost[hidden] { display: none; }
.bpost a {
  display: flex; flex-direction: column; gap: var(--sp-2);
  height: 100%; padding: var(--sp-5);
  background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-lg);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.bpost a:hover { border-color: rgba(14,159,145,.42); box-shadow: var(--shadow-sm); transform: translateY(-3px); }

/* card artwork */
.bpost a { padding: 0; overflow: hidden; }
.bpost__art { position: relative; display: block; background: var(--navy-900); }
.bpost__art img {
  display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover;
  transition: transform var(--dur-mid) var(--ease);
}
.bpost a:hover .bpost__art img { transform: scale(1.045); }
.bpost__in { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: var(--sp-5); }
.bpost__lang { font-size: var(--fs-micro); color: var(--text-subtle); }
.bpost__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.bpost__cat { position: absolute; left: 12px; bottom: 12px;
  padding: 5px 11px; border-radius: 999px; backdrop-filter: blur(6px);
  background: rgba(10,18,53,.72); border: 1px solid rgba(255,255,255,.18); color: #7FE3D6;
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .06em; }
.bpost__title { font-size: var(--fs-h4); color: var(--ink-900); line-height: 1.35; overflow-wrap: anywhere; }
.bpost__lead { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; overflow-wrap: anywhere; }
.bpost__go { margin-top: auto; padding-top: var(--sp-3); font-size: var(--fs-sm); font-weight: 700; color: var(--brand); }

/* ---- post: centred header ---- */
.posthead .container { position: relative; z-index: 1; text-align: center; }
/* Authored break that puts the shorter half of the title on the first line.
   Below this width the heading wraps to three lines anyway, so it is dropped
   and normal wrapping takes over. */
.h1br { display: none; }
@media (min-width: 760px) { .posthead .h1br { display: inline; } }
.posthead .pagehead__title { text-wrap: balance; margin-bottom: var(--sp-5); }
/* the header gets more room than the reading column so the title and lead
   are not forced to break early */
.posthead .container--narrow { max-width: 1020px; }
.posthead .pagehead__lead { max-width: 72ch; text-wrap: balance; }
.posthead .crumbs ol { justify-content: center; }
.posthead .eyebrow--chip { margin-left: auto; margin-right: auto; }
.posthead .pagehead__lead { margin-left: auto; margin-right: auto; }

.byline { margin-top: var(--sp-6); display: flex; flex-direction: column;
  align-items: center; gap: var(--sp-3); }
.byline__avatar {
  width: 72px; height: 72px; border-radius: 50%;
  /* the source is a cut-out on white — keep that white inside the circle */
  background: #fff; object-fit: cover; object-position: 50% 18%;
  border: 3px solid rgba(255,255,255,.9);
  box-shadow: 0 6px 22px rgba(0,0,0,.35), 0 0 0 6px rgba(14,159,145,.16);
}
.byline__meta { margin: 0; font-size: var(--fs-micro); color: rgba(255,255,255,.66);
  display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; justify-content: center; }
.byline__sep { color: rgba(255,255,255,.34); }

.post__body { background: var(--cream-50); }

/* ---- featured artwork ---- */
.post__figure {
  margin: 0 0 var(--sp-8); border-radius: var(--r-xl); overflow: hidden;
  border: 1px solid var(--hairline); background: var(--navy-900);
  box-shadow: var(--shadow-sm);
}
.post__figure img { display: block; width: 100%; height: auto; }

/* ---- interactive table of contents ---- */
.ptoc {
  margin-bottom: var(--sp-8); background: #fff;
  border: 1px solid var(--hairline); border-radius: var(--r-lg); overflow: hidden;
}
.ptoc__bar { display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); padding: var(--sp-4) var(--sp-5) 0; }
.ptoc__h { font-size: var(--fs-micro); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-subtle); margin: 0; }
.ptoc__toggle { display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 4px 6px; margin: -4px -6px; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: var(--fs-micro); color: var(--text-subtle); border-radius: var(--r-sm); }
.ptoc__toggle:hover { color: var(--teal-700); }
.ptoc__chev { width: 9px; height: 9px; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px,-2px);
  transition: transform var(--dur-fast) var(--ease); }
.ptoc.is-collapsed .ptoc__chev { transform: rotate(-135deg) translate(-2px,-2px); }

.ptoc__list { list-style: none; margin: 0; padding: var(--sp-3) var(--sp-3) var(--sp-3); counter-reset: toc;
  display: grid; gap: 2px; }
.ptoc.is-collapsed .ptoc__list { display: none; }
.ptoc__list li { counter-increment: toc; margin: 0; }
.ptoc__list a {
  position: relative; display: flex; align-items: baseline; gap: var(--sp-3);
  padding: 10px var(--sp-3) 10px 12px; border-radius: var(--r-md);
  font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-600);
  text-decoration: none; overflow-wrap: anywhere;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.ptoc__list a::before {
  content: counter(toc); flex: none;
  display: inline-grid; place-items: center; width: 22px; height: 22px;
  border-radius: 50%; background: var(--bg-well); color: var(--text-subtle);
  font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.ptoc__list a::after {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
  border-radius: 3px; background: var(--teal-600);
  transform: scaleY(0); transform-origin: 50% 50%;
  transition: transform var(--dur-mid) var(--ease);
}
.ptoc__list a:hover { background: var(--bg-well); color: var(--ink-900); }
.ptoc__list a:hover::before { background: rgba(14,159,145,.16); color: var(--teal-700); }

.ptoc__list .is-active > a { background: rgba(14,159,145,.09); color: var(--ink-900); font-weight: 700; }
.ptoc__list .is-active > a::before { background: var(--teal-600); color: #fff; }
.ptoc__list .is-active > a::after { transform: scaleY(1); }
.ptoc__list .is-done > a { color: var(--text-subtle); }
.ptoc__list .is-done > a::before {
  content: "\2713"; background: rgba(14,159,145,.14); color: var(--teal-700); font-size: 12px;
}

/* ---- prose ---- */
/* the narrow container already sets the measure; a second cap on .prose would
   leave dead space on the right, which is very visible in Bangla */
.post__prose { max-width: none; }

/* each section reveals as it comes into view, with an accent rule that
   draws itself across the heading */
.pslice { position: relative; }
.pslice + .pslice { margin-top: var(--sp-10); }
.post__prose h2 { font-size: var(--fs-h3); margin: 0 0 var(--sp-4); scroll-margin-top: 96px;
  position: relative; padding-top: var(--sp-4); }
.post__prose h2::before {
  content: ""; position: absolute; top: 0; left: 0; height: 3px; width: 56px;
  border-radius: 3px; background: linear-gradient(90deg, var(--teal-600), var(--mint-300));
  transform: scaleX(0); transform-origin: left center;
  transition: transform .55s var(--ease) .1s;
}
.pslice.is-visible h2::before { transform: scaleX(1); }
.pslice:first-child h2 { padding-top: 0; }
.pslice:first-child h2::before { display: none; }
.post__prose h3 { font-size: var(--fs-h4); margin: var(--sp-7) 0 var(--sp-3); color: var(--ink-900); }
.post__prose p { font-size: var(--fs-base); color: var(--text-muted); line-height: 1.75; margin-bottom: var(--sp-4); }
.post__prose strong { color: var(--ink-900); font-weight: 700; }
.post__prose ul, .post__prose ol { margin: 0 0 var(--sp-5); padding-left: 0; list-style: none; }
.post__prose ol { counter-reset: pl; }
.post__prose li { position: relative; padding-left: 30px; margin-bottom: var(--sp-3);
  font-size: var(--fs-base); color: var(--text-muted); line-height: 1.7; }
.post__prose ul > li::before {
  content: ""; position: absolute; left: 8px; top: .62em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--teal-500);
}
.post__prose ol > li { counter-increment: pl; }
.post__prose ol > li::before {
  content: counter(pl) "."; position: absolute; left: 0; top: 0;
  color: var(--teal-700); font-weight: 800; font-variant-numeric: tabular-nums;
}

/* pull-quote style note from the surgeon */
.post__note {
  position: relative; margin: var(--sp-7) 0; padding: var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-6);
  background: #fff; border: 1px solid var(--hairline); border-left: 4px solid var(--teal-600);
  border-radius: var(--r-md); box-shadow: var(--shadow-sm);
}
.post__note p { margin: 0; font-size: var(--fs-base); color: var(--ink-700); line-height: 1.7; }
.post__note p + p { margin-top: var(--sp-3); }
.post__note-h { display: block; font-size: var(--fs-micro); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--teal-700); margin-bottom: var(--sp-2); }

/* red-flag warning block */
.post__warn {
  margin: var(--sp-7) 0; padding: var(--sp-5); border-radius: var(--r-md);
  background: rgba(200,45,45,.05); border: 1px solid rgba(200,45,45,.26);
}
.post__warn-h { display: block; font-size: var(--fs-micro); font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: #A32020; margin-bottom: var(--sp-3); }
.post__warn ul { margin: 0; }
.post__warn li { color: var(--ink-700); }
.post__warn ul > li::before { background: #C82D2D; }

/* comparison / fact table */
.post__table { margin: var(--sp-6) 0; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--hairline); border-radius: var(--r-md); background: #fff; }
.post__table table { width: 100%; min-width: 460px; border-collapse: collapse; }
.post__table th, .post__table td {
  padding: var(--sp-3) var(--sp-4); text-align: left; font-size: var(--fs-sm);
  border-bottom: 1px solid var(--hairline); vertical-align: top; line-height: 1.6;
}
.post__table thead th { background: var(--bg-well); color: var(--ink-900);
  font-size: var(--fs-micro); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.post__table tbody th { color: var(--ink-900); font-weight: 700; }
.post__table td { color: var(--text-muted); }
.post__table tr:last-child th, .post__table tr:last-child td { border-bottom: 0; }
.post__table tbody tr { transition: background var(--dur-fast) var(--ease); }
.post__table tbody tr:hover { background: rgba(14,159,145,.06); }

/* the warning block gets a slow pulse on its rule so the eye catches it */
.post__warn { position: relative; overflow: hidden; }
.post__warn::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: #C82D2D; transform: scaleY(0); transform-origin: top;
  transition: transform .6s var(--ease);
}
.pslice.is-visible .post__warn::before { transform: scaleY(1); }
html:not(.js) .post__warn::before { transform: scaleY(1); }
.post__note { transition: box-shadow var(--dur-mid) var(--ease); }
.post__note:hover { box-shadow: 0 8px 26px rgba(11,127,116,.14); }

.post__take {
  margin: var(--sp-10) 0; padding: var(--sp-6);
  background: rgba(14,159,145,.07); border: 1px solid rgba(14,159,145,.28);
  border-radius: var(--r-lg);
}
.post__take-h { font-size: var(--fs-micro); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--teal-700); margin-bottom: var(--sp-3); }
.post__take ul { list-style: none; margin: 0; padding: 0; }
.post__take li { position: relative; padding-left: 32px; margin-bottom: var(--sp-3);
  font-size: var(--fs-sm); color: var(--ink-600); line-height: 1.6; }
.post__take li::before {
  content: "\2713"; position: absolute; left: 0; top: 1px;
  display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%;
  background: var(--teal-600); color: #fff; font-size: 12px; font-weight: 800; line-height: 1;
  transform: scale(0); transition: transform .38s cubic-bezier(.34,1.56,.64,1);
}
/* the ticks land one after another rather than all at once */
.post__take.is-visible li:nth-child(1)::before { transition-delay: .10s; }
.post__take.is-visible li:nth-child(2)::before { transition-delay: .22s; }
.post__take.is-visible li:nth-child(3)::before { transition-delay: .34s; }
.post__take.is-visible li:nth-child(4)::before { transition-delay: .46s; }
.post__take.is-visible li:nth-child(5)::before { transition-delay: .58s; }
.post__take.is-visible li::before { transform: scale(1); }
html:not(.js) .post__take li::before { transform: scale(1); }

.post__faq { margin: var(--sp-10) 0; }
.post__faq h2 { font-size: var(--fs-h3); margin-bottom: var(--sp-4); }
.post__faq .faq summary { gap: var(--sp-3); }

.post__disclaimer {
  padding: var(--sp-4); border-radius: var(--r-md);
  background: var(--bg-well); font-size: var(--fs-sm); color: var(--text-subtle);
}
.post__cta {
  display: grid; gap: var(--sp-4); align-items: center;
  margin-top: var(--sp-8); padding: var(--sp-6);
  background: var(--navy-700); color: #fff; border-radius: var(--r-xl);
}
@media (min-width: 720px) { .post__cta { grid-template-columns: 1fr auto; } }
.post__cta-h { font-size: var(--fs-h4); color: #fff; margin-bottom: 4px; }
.post__cta p { font-size: var(--fs-sm); color: rgba(255,255,255,.72); margin: 0; }

/* ---- share row ---- */
.post__share {
  margin-top: var(--sp-8); padding: var(--sp-5);
  background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-lg);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4);
}
.post__share-h { font-size: var(--fs-sm); font-weight: 700; color: var(--ink-900); }
.sharebtn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: var(--fs-sm); font-weight: 700; text-decoration: none;
  border: 1px solid var(--hairline); background: var(--bg-well); color: var(--ink-700);
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.sharebtn:hover { transform: translateY(-2px); }
.sharebtn--wa:hover { background: #1D9F55; border-color: #1D9F55; color: #fff; }
.sharebtn--fb:hover { background: #1B54B8; border-color: #1B54B8; color: #fff; }
.sharebtn--copy:hover { background: var(--teal-700); border-color: var(--teal-700); color: #fff; }
.sharebtn.is-done { background: var(--teal-700); border-color: var(--teal-700); color: #fff; }

.rposts { list-style: none; margin: var(--sp-6) 0 0; padding: 0; display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.rposts li { margin: 0; min-width: 0; }
.rposts a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: var(--sp-5);
  background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-lg);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease); }
.rposts a:hover { border-color: rgba(14,159,145,.45); transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.rpost__cat { font-size: var(--fs-micro); font-weight: 700; letter-spacing: .05em; color: var(--brand); }
.rpost__title { font-size: var(--fs-sm); font-weight: 700; color: var(--ink-900);
  line-height: 1.45; overflow-wrap: anywhere; }
.rpost__go { margin-top: auto; padding-top: var(--sp-3);
  font-size: var(--fs-micro); font-weight: 700; color: var(--teal-700); }
@media (hover: none) { .rposts a:hover { transform: none; } }

@media (max-width: 600px) {
  .post__take, .post__cta, .post__share, .post__note, .post__warn { padding: var(--sp-4); }
  .ptoc__bar { padding: var(--sp-4) var(--sp-4) 0; }
  .ptoc__list { padding: var(--sp-2); }
  .post__cta .btn { width: 100%; justify-content: center; }
  .bpost__in { padding: var(--sp-4); }
  .byline__avatar { width: 62px; height: 62px; }
  .post__share { justify-content: center; text-align: center; }
  .post__share .cluster { justify-content: center; }
  .post__figure { margin-bottom: var(--sp-6); }
}
@media (hover: none) {
  .bpost a:hover, .sharebtn:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bpost a:hover, .sharebtn:hover { transform: none; }
  .ptoc__chev, .ptoc__list a, .ptoc__list a::before, .ptoc__list a::after { transition: none; }
}
@media print {
  .ptoc, .post__cta, .post__share, .related, .svsearch, .filters { display: none !important; }
  .post__take, .post__note, .post__warn, .post__table { break-inside: avoid; }
  .post__figure { display: none !important; }
  .byline__avatar { display: none !important; }
}

/* ==========================================================================
   42. About page — hero variant, credentials, focus cards, approach
   ========================================================================== */

/* the About hero carries a longer name, so let it wrap to two lines */
.hero--about .hero__title { font-size: clamp(28px, 3.6vw, 46px); line-height: 1.14; }
.hero--about .hero__name { font-size: clamp(15px, 1.5vw, 19px); color: var(--mint-300); font-weight: 700; }

/* key credentials under the hero copy */
/* .hero__cta carries only a bottom margin — on the homepage its top gap comes
   from .hero__quals. Inserting the chips between them means the chips must
   supply that gap themselves, or the buttons collide with them. */
.credchips { list-style: none; margin: var(--sp-5) 0 var(--sp-6); padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.hero--about .hero__cta { margin-top: var(--sp-2); }
.credchips li {
  margin: 0; padding: 7px 12px; min-width: 0;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-sm); backdrop-filter: blur(6px);
  display: flex; flex-direction: column; gap: 1px;
}
.credchips__k { font-size: 10px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--mint-300); }
.credchips__v { font-size: 12.5px; line-height: 1.35; color: rgba(255,255,255,.75);
  overflow-wrap: anywhere; }

.ticks { list-style: none; margin: var(--sp-5) 0 0; padding: 0; }
.ticks li { position: relative; padding-left: 30px; margin-bottom: var(--sp-3);
  color: var(--ink-600); font-size: var(--fs-sm); line-height: 1.6; }
.ticks li::before { content: "\2713"; position: absolute; left: 0; top: 0;
  display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%;
  background: var(--teal-600); color: #fff; font-size: 12px; font-weight: 800; }

/* focus cards */
.focus__grid { display: grid; gap: var(--sp-4); margin-top: var(--sp-7);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.focus__card {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  padding: var(--sp-6); background: #fff; border: 1px solid var(--hairline);
  border-radius: var(--r-xl); text-decoration: none; overflow: hidden;
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.focus__card::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--teal-600), var(--mint-300));
  transform: scaleX(0); transform-origin: left; transition: transform var(--dur-mid) var(--ease);
}
.focus__card:hover { transform: translateY(-4px); border-color: rgba(14,159,145,.4); box-shadow: var(--shadow-md); }
.focus__card:hover::after { transform: scaleX(1); }
.focus__no { font-size: 34px; font-weight: 800; line-height: 1; color: rgba(14,159,145,.24);
  font-variant-numeric: tabular-nums; }
.focus__card h3 { font-size: var(--fs-h4); color: var(--ink-900); }
.focus__card p { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.65; margin: 0; }
.focus__go { margin-top: auto; padding-top: var(--sp-4);
  font-size: var(--fs-sm); font-weight: 700; color: var(--teal-700); }

/* public education — brand-indigo band, taken from the logo */
.pubed {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(44px, 5vw, 68px);
  background: linear-gradient(160deg, #303E79 0%, #2A3768 55%, #252F5C 100%);
}
.pubed__aurora {
  position: absolute; inset: -20% -10% auto -10%; height: 130%;
  background: radial-gradient(42% 40% at 20% 22%, rgba(14,159,145,.30), transparent 68%),
              radial-gradient(38% 38% at 86% 80%, rgba(127,227,214,.16), transparent 70%);
  filter: blur(10px); animation: pubDrift 24s ease-in-out infinite alternate;
}
@keyframes pubDrift { from { transform: translate3d(-2%,-1%,0) scale(1); }
                      to   { transform: translate3d(3%,2%,0) scale(1.06); } }
.pubed__grid { position: relative; z-index: 1; display: grid; gap: var(--sp-8); align-items: center; }
@media (min-width: 900px) { .pubed__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-10); } }
.pubed .eyebrow { color: var(--mint-300); }
.pubed .section-title { color: #fff; }
/* deliberately a step smaller than .section-lead */
.pubed__lead { max-width: 52ch; margin: 0 0 var(--sp-6);
  font-size: clamp(13.5px, 1.05vw, 15px); line-height: 1.65; color: rgba(255,255,255,.74); }

.pubed__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.pubed__list li { margin: 0; }
.pubed__list a {
  position: relative; display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md);
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(8px); text-decoration: none; overflow: hidden;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.pubed__list a::before {                 /* accent bar grows on hover */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--mint-300); transform: scaleY(0); transform-origin: center;
  transition: transform var(--dur-mid) var(--ease);
}
.pubed__list a:hover, .pubed__list a:focus-visible {
  transform: translateX(5px); background: rgba(255,255,255,.13);
  border-color: rgba(127,227,214,.5); box-shadow: 0 10px 26px rgba(0,0,0,.22);
}
.pubed__list a:hover::before, .pubed__list a:focus-visible::before { transform: scaleY(1); }
.pubed__cat {
  flex: none; padding: 5px 12px; border-radius: 999px;
  background: var(--mint-300); border: 1px solid var(--mint-300);
  font-size: var(--fs-micro); font-weight: 800; color: #12224E;
  line-height: 1.5; white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.pubed__list a:hover .pubed__cat { transform: scale(1.04); box-shadow: 0 4px 12px rgba(127,227,214,.35); }
.pubed__list a .pubed__t { flex: 1; min-width: 0; font-size: var(--fs-sm); font-weight: 700;
  line-height: 1.45; color: #fff; overflow-wrap: anywhere; }
.pubed__go {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px;
  border-radius: 50%; background: rgba(255,255,255,.16); color: #fff;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.pubed__list a:hover .pubed__go { transform: translateX(3px); background: var(--mint-300); color: #12224E; }
@media (hover: none) { .pubed__list a:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .pubed__aurora { animation: none; }
  .pubed__list a:hover, .pubed__list a:hover .pubed__go { transform: none; }
}

@media (max-width: 600px) {
  .credchips li, .focus__card { padding: var(--sp-4); }
  .pubed__list a { padding: var(--sp-4); }
}
@media (hover: none) {
  .focus__card:hover, .pubed__list a:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .focus__card:hover, .pubed__list a:hover { transform: none; }
  .focus__card::after { transition: none; }
}

/* ---- academic post ----------------------------------------------------- */
.acad { background: var(--cream-50); }
.acad__grid { display: grid; gap: var(--sp-8); align-items: center; }
@media (min-width: 900px) { .acad__grid { grid-template-columns: 1.08fr .92fr; gap: var(--sp-10); } }

.acad__title { font-size: clamp(26px, 3.2vw, 40px); line-height: 1.16;
  color: var(--ink-900); margin: var(--sp-3) 0 var(--sp-4); }
.acad__title-accent { color: var(--teal-600); }
.acad__lead { max-width: 56ch; color: var(--text-muted); font-size: var(--fs-base); line-height: 1.72; }

/* three facets of the post */
.acad__facets { display: grid; gap: var(--sp-3); margin-top: var(--sp-7); }
@media (min-width: 560px) and (max-width: 899px) { .acad__facets { grid-template-columns: 1fr 1fr; } }
.facet {
  position: relative; padding: var(--sp-5) var(--sp-5) var(--sp-5) 66px;
  background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-lg);
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.facet:hover { transform: translateX(4px); border-color: rgba(14,159,145,.4); box-shadow: var(--shadow-sm); }
.facet__ico {
  position: absolute; left: var(--sp-5); top: var(--sp-5);
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  background: rgba(14,159,145,.12); border: 1px solid rgba(14,159,145,.26); color: var(--teal-700);
  transition: transform var(--dur-mid) var(--ease), background var(--dur-fast) var(--ease);
}
.facet:hover .facet__ico { transform: rotate(-6deg) scale(1.08); background: rgba(14,159,145,.2); }
.facet h3 { font-size: 15.5px; font-weight: 800; color: var(--ink-900); margin-bottom: 4px; }
.facet p { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.6; margin: 0; }

/* framed portrait — the cutout is bottom-cropped, so it must sit *inside*
   a panel with a defined floor rather than float against the page */
.acad__media { margin: 0; }
.acad__frame {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl); border: 1px solid rgba(14,159,145,.26);
  background: linear-gradient(168deg, #EAF7F4 0%, #F4FAFF 55%, #E7F0FB 100%);
  box-shadow: var(--shadow-sm);
  display: grid; place-items: end center;
  padding: var(--sp-6) var(--sp-6) 0;
}
.acad__frame::after {                      /* soft floor so the crop reads as framing */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%;
  background: linear-gradient(to top, rgba(14,159,145,.16), transparent);
  pointer-events: none;
}
.acad__rings {
  position: absolute; left: 50%; bottom: -18%; width: 86%; aspect-ratio: 1;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(14,159,145,.18), transparent 70%);
  animation: acadPulse 8s ease-in-out infinite;
}
@keyframes acadPulse { 0%,100% { transform: translateX(-50%) scale(1); opacity: .9; }
                       50%     { transform: translateX(-50%) scale(1.06); opacity: .6; } }
.acad__portrait { position: relative; z-index: 1; display: block;
  width: 100%; max-width: 420px; height: auto; }

.acad__badge {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-top: var(--sp-4); padding: 11px var(--sp-4);
  background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.acad__logo {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  background: #fff; padding: 3px; object-fit: contain; border: 1px solid var(--hairline);
}
.acad__badge-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.acad__badge-k { font-size: 13.5px; font-weight: 800; letter-spacing: .08em; color: var(--teal-700); }
.acad__badge-v { font-size: 11.5px; line-height: 1.4; color: var(--text-subtle); overflow-wrap: anywhere; }

@media (max-width: 600px) {
  .facet { padding: var(--sp-4) var(--sp-4) var(--sp-4) 58px; }
  .facet__ico { left: var(--sp-4); top: var(--sp-4); width: 30px; height: 30px; }
  .acad__frame { padding: var(--sp-5) var(--sp-4) 0; }
}
@media (hover: none) { .facet:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .acad__rings { animation: none; }
  .facet:hover, .facet:hover .facet__ico { transform: none; }
}

/* ---- stacked section head ---------------------------------------------
   The base .section__head is space-between, which is right when a live-pill
   sits opposite the title. Where the head is just eyebrow + title + lead it
   pushes the title to the far right, so those sections stack instead. */
.section__head--stack { display: block; }
.section__head--stack .section-title { margin-bottom: var(--sp-3); }
.section__head--stack .section-lead { max-width: 62ch; margin: 0; }
/* this one is a single short sentence and reads better unbroken — the 62ch
   measure would split it in two. It still wraps normally on narrow screens. */
.creds .section__head--stack .section-lead { max-width: none; text-wrap: pretty; }

/* ---- credentials: interactive degree selector -------------------------- */
.creds__tabs .tabs__list { gap: var(--sp-3); margin-bottom: var(--sp-6); }
.creds__tabs .pill {
  position: relative; padding: 11px var(--sp-5); overflow: hidden;
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
/* A pseudo-element wash would need z-index:-1 to sit behind the label, which
   also puts it behind the pill's own white background — invisible. Animate the
   background directly instead. */
.creds__tabs .pill:hover {
  transform: translateY(-2px); border-color: var(--teal-600);
  background: rgba(14,159,145,.10); color: var(--teal-700);
  box-shadow: var(--shadow-sm);
}
.creds__tabs .pill[aria-selected="true"] {
  transform: translateY(-2px); box-shadow: 0 8px 20px rgba(10,18,53,.22);
}
.creds__tabs .pill[aria-selected="true"]::after {
  content: ""; position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%);
  width: 18px; height: 2px; border-radius: 2px; background: var(--mint-300);
}

/* panel reveals rather than snapping when the selection changes */
.creds__tabs .tabs__panel {
  /* left padding must clear the 3px accent rule with room to spare */
  position: relative; padding: var(--sp-6) var(--sp-6) var(--sp-6) var(--sp-8);
  background: #fff; border-color: var(--hairline);
}
.creds__tabs .tabs__panel::before {
  content: ""; position: absolute; left: 0; top: var(--sp-6); bottom: var(--sp-6); width: 3px;
  border-radius: 3px; background: linear-gradient(180deg, var(--teal-600), var(--mint-300));
}
.creds__tabs .tabs__panel:not([hidden]) { animation: credIn .38s var(--ease) both; }
@keyframes credIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.creds__tabs .tabs__org { font-size: var(--fs-base); }

@media (hover: none) { .creds__tabs .pill:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .creds__tabs .pill, .creds__tabs .pill::before { transition: none; }
  .creds__tabs .pill:hover, .creds__tabs .pill[aria-selected="true"] { transform: none; }
  .creds__tabs .tabs__panel:not([hidden]) { animation: none; }
}

/* ---- FAQ split layout: portrait beside the questions ------------------- */
.faqs__grid { display: grid; gap: var(--sp-8); align-items: start; }
@media (min-width: 900px) {
  .faqs__grid { grid-template-columns: .82fr 1.18fr; gap: var(--sp-10); }
  /* the questions scroll past a portrait that stays with you */
  .faqs__aside { position: sticky; top: 96px; }
}
.faqs__figure { position: relative; margin: 0; line-height: 0; }
.faqs__figure img {
  display: block; width: 100%; height: auto; border-radius: var(--r-xl);
  border: 1px solid var(--hairline); box-shadow: var(--shadow-md);
}
/* compact card, tucked into the bottom-right of the portrait and fully clickable */
.faqs__card {
  position: absolute; right: var(--sp-4); bottom: var(--sp-4); left: var(--sp-4);
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 13px 15px; border-radius: var(--r-md);
  background: rgba(255,255,255,.94); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.7); box-shadow: 0 12px 30px rgba(10,18,53,.24);
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.faqs__card:hover, .faqs__card:focus-visible {
  transform: translateY(-3px); background: #fff; box-shadow: 0 16px 38px rgba(10,18,53,.3);
}
.faqs__card-ico {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 10px; background: rgba(14,159,145,.13); color: var(--teal-700);
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.faqs__card:hover .faqs__card-ico { background: var(--teal-600); color: #fff; transform: rotate(-6deg); }
.faqs__card-t { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.faqs__card-k { font-size: 10px; font-weight: 800; letter-spacing: .09em; line-height: 1;
  text-transform: uppercase; color: var(--teal-700); }
.faqs__card-v { font-size: 14px; font-weight: 800; color: var(--ink-900); line-height: 1.35; }
.faqs__card-go {
  flex: none; display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: 50%; background: var(--bg-well); color: var(--ink-600);
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.faqs__card:hover .faqs__card-go { transform: translateX(3px); background: var(--teal-600); color: #fff; }

/* the questions themselves */
.faqs--split .faqs__list { display: grid; gap: var(--sp-3); }
.faqs--split .faq {
  background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-lg);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.faqs--split .faq:hover { border-color: rgba(14,159,145,.42); transform: translateX(3px); }
.faqs--split .faq[open] {
  border-color: rgba(14,159,145,.5); box-shadow: var(--shadow-sm);
}
.faqs--split .faq[open] .faq__q { color: var(--teal-700); }
.faqs--split .faq__body { animation: faqIn .3s var(--ease) both; }
@keyframes faqIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

@media (max-width: 899px) {
  .faqs__aside { max-width: 460px; margin-inline: auto; }
}
@media (hover: none) { .faqs--split .faq:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .faqs--split .faq:hover { transform: none; }
  .faqs--split .faq__body { animation: none; }
  .faqs__card-cta:hover svg { transform: none; }
}

/* On a phone the Subscribe button was a full-width block of its own, eating
   vertical space above the videos. Sit it on the right of the heading row
   instead, compact, so the section starts higher up the screen. */
@media (max-width: 600px) {
  .videos .section__head {
    flex-direction: row; flex-wrap: nowrap;
    align-items: center; justify-content: space-between;
    gap: var(--sp-3); margin-bottom: var(--sp-5);
  }
  .videos .section__head > div { min-width: 0; }          /* let the title ellipsis-free wrap */
  .videos .section__head .section-title { margin-bottom: 0; }
  .videos .section__head .btn {
    width: auto; flex: none; gap: 5px;
    padding: 8px clamp(9px, 3vw, 13px);
    font-size: clamp(11.5px, 3.1vw, 12.5px);
  }
}

/* Two labels per filter pill: the full name on wider screens, a short one on
   phones so all four categories fit without a hidden scroll. Only one is ever
   rendered, so screen readers announce a single label. */
.pill__narrow { display: none; }
@media (max-width: 600px) {
  .pill__wide { display: none; }
  .pill__narrow { display: inline; }
}

/* Four category pills on a single line on phones.
   Scoped to .filters--fit: the blog index has five bilingual pills that
   genuinely cannot fit one line and must keep wrapping. Padding and type
   scale with the viewport so this holds from 320px up. */
/* phones AND tablets — above 600px the pills used to snap back to
   content width with a 99px radius, which put the round "All" and the
   dead space on the right straight back */
@media (max-width: 899px) {
  .filters--fit { flex-wrap: nowrap; gap: clamp(6px, 2vw, 9px); }
  .filters--fit .pill {
    /* grow to share the row so there is no dead space on the right, and use a
       fixed radius — at pill radius a 3-letter label like "All" renders as a
       circle while the longer ones stay stadium-shaped, so they look mismatched */
    flex: 1 1 auto; min-width: 0;
    justify-content: center;
    border-radius: var(--r-md);
    padding: 9px clamp(8px, 2.6vw, 14px);
    font-size: clamp(11.5px, 3.4vw, 13.5px);
    letter-spacing: -.01em;
  }
}

/* Video tabs row: the tab strip on the left, Subscribe on the right.
   Only one Subscribe is ever rendered — the header one on desktop, this one on
   phones — so the accessibility tree never sees a duplicate link. */
.vtabs__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.vtabs__bar .vtabs__list { margin-bottom: 0; }
.vtabs__sub { display: none; }
@media (max-width: 600px) {
  .vtabs__bar { margin-bottom: var(--sp-5); gap: var(--sp-3); flex-wrap: nowrap; }
  .vtabs__list { gap: 6px; }
  .vtabs__list .pill {
    flex: 0 1 auto; min-width: 0;
    padding: 9px clamp(10px, 3.2vw, 16px);
    font-size: clamp(11.5px, 3.4vw, 13.5px);
  }
  .vtabs__sub {
    display: inline-flex; flex: none; gap: 5px;
    padding: 8px clamp(10px, 3vw, 14px);
    font-size: clamp(11.5px, 3.1vw, 12.5px);
  }
  /* the header copy steps aside so there is only ever one on screen */
  .videos .section__head .btn { display: none; }
  .videos .section__head { display: block; }
  .videos .section__head .section-title { margin-bottom: 0; }
}