/* ==========================================================================
   Dr. ND's Diabetes Reversal Clinic
   Hand-authored stylesheet — no framework.
   Order: tokens → reset → layout → typography → icons → components →
          sections → utilities
   ========================================================================== */

/* --------------------------------------------------------------- 1. Tokens */
/* The palette is taken from the clinic's own wordmark: deep navy for
   structure and authority, antique gold for emphasis. Nothing here is
   decorative — gold marks the one thing you should act on. */
:root{
  /* Brand — navy */
  --brand-50:#f2f4fb;  --brand-100:#e3e7f6; --brand-200:#c5cdea; --brand-300:#96a2d4;
  --brand-400:#6274b8; --brand-500:#3b4b95; --brand-600:#283573; --brand-700:#1d2860;
  --brand-800:#141c48; --brand-900:#0d1433; --brand-950:#070b21;

  /* Accent — antique gold (the rule in the wordmark) */
  --gold-800:#6f5316; --gold-700:#8a6a1e; --gold-600:#a4832f; --gold-500:#c2a059;
  --gold-400:#d6b774; --gold-300:#e4cd9c; --gold-200:#efdfbe; --gold-50:#fbf6ea;

  /* Neutrals — body copy clears 7:1 on white, headings far more */
  --ink:#0f1424;
  --cream:#f5f7fc;
  --body:#4b5468;
  --muted:#66708a;
  --line:#e3e6f0;
  --line-soft:#eef0f7;
  --white:#ffffff;

  /* Semantic tints */
  --tint-amber:#fdf6e9;
  --tint-indigo:#f1f3ff;
  --tint-sky:#ecf6fb;
  --tint-red:#fdf0f0;

  /* Radius */
  --r-xs:8px;   --r-sm:10px;  --r-md:14px;
  --r-lg:20px;  --r-xl:26px;  --r-pill:999px;

  /* Elevation */
  --shadow-card:0 6px 24px rgba(13,20,51,.07);
  --shadow-soft:0 14px 44px rgba(29,40,96,.13);
  --shadow-lift:0 18px 50px rgba(13,20,51,.18);
  --shadow-hover:0 16px 38px rgba(13,20,51,.13);
  --shadow-media:0 26px 64px rgba(13,20,51,.20);

  /* Metrics */
  --maxw:1180px;
  --gutter:20px;
  --header-h:70px;
  --bar-h:calc(66px + env(safe-area-inset-bottom));
  --tap:48px;
}

@media (max-width:767px){
  :root{ --header-h:76px; --bar-h:calc(76px + env(safe-area-inset-bottom)); }
}

@media (min-width:768px){
  :root{ --header-h:72px; --bar-h:0px; --gutter:16px; }
}

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

html{
  background:var(--cream);
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:17px;
  line-height:1.65;
  color:var(--ink);
  background:var(--cream);
  overflow-x:hidden;
  overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  padding-bottom:var(--bar-h);      /* clears the sticky mobile action bar */
}
@media (min-width:768px){ body{font-size:16px;padding-bottom:0} }

h1,h2,h3,h4,p,blockquote,figure,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea,button{font-family:inherit;font-size:16px} /* 16px stops iOS zoom */

*{-webkit-tap-highlight-color:transparent}

:focus-visible{
  outline:3px solid var(--brand-600);
  outline-offset:2px;
  border-radius:var(--r-sm);
}

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

.skip-link{
  position:fixed;left:16px;top:-100px;z-index:200;
  background:var(--brand-700);color:#fff;
  padding:12px 20px;border-radius:var(--r-sm);
  font-size:14px;font-weight:800;
  transition:top .2s ease;
}
.skip-link:focus{top:16px}

/* --------------------------------------------------------------- 3. Layout */
.wrap{
  width:min(var(--maxw), calc(100% - (var(--gutter) * 2)));
  margin-inline:auto;
}

.section{position:relative;padding-block:56px}
@media (min-width:768px){ .section{padding-block:80px} }

.section--white{background:var(--white)}
.section--cream{background:var(--cream)}
.section--dark{background:var(--brand-900);color:#fff}

/* Faint dot field — gives flat sections some texture without noise */
.section--dotted::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(currentColor 1px, transparent 1px);
  background-size:22px 22px;
  color:var(--brand-700);
  opacity:.05;
  mask-image:linear-gradient(to bottom, #000, transparent 60%);
  -webkit-mask-image:linear-gradient(to bottom, #000, transparent 60%);
}
.section--dark.section--dotted::before{color:#fff;opacity:.07}

.section > .wrap{position:relative;z-index:1}

/* Aurora wash on the dark sections */
.section--dark::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60% 55% at 12% 0%, rgba(74,88,181,.28), transparent 70%),
    radial-gradient(45% 50% at 92% 100%, rgba(43,56,146,.24), transparent 70%);
}

.section-head{max-width:56ch}
.section-head--wide{max-width:68ch}
.section-head--center{margin-inline:auto;text-align:center}

/* Card grids */
.cards{display:grid;gap:14px;margin-top:36px}
@media (min-width:768px){ .cards{gap:18px;margin-top:44px} }

@media (min-width:600px){ .cards--2,.cards--4{grid-template-columns:repeat(2,1fr)} }
@media (min-width:768px){ .cards--3{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1024px){ .cards--4{grid-template-columns:repeat(4,1fr)} }

.split{display:grid;gap:28px}
@media (min-width:1024px){
  .split{gap:36px;align-items:start}
  .split--sidebar-left{grid-template-columns:.9fr 1.1fr}
  .split--panel-left{grid-template-columns:.8fr 1.2fr}
  .split--faq{grid-template-columns:.75fr 1.25fr;gap:40px}
  .split--booking{grid-template-columns:.82fr 1.18fr;gap:20px}
  .split--hero{grid-template-columns:1.05fr .95fr}
}

.sticky-col{position:static}
@media (min-width:1024px){ .sticky-col{position:sticky;top:104px} }

.stack{display:grid;gap:14px}
@media (min-width:768px){ .stack{gap:18px} }

/* Grid and flex children default to min-width:auto, which lets wide content
   (the swipe rails, long strings) push a column past the viewport. */
.split > *,
.hero__inner > *,
.cards > *,
.stack > *,
.form > *,
.feature > *,
.header-inner > *,
.story__person > *,
.info-list > li > *{min-width:0}

/* ----------------------------------------------------------- 4. Typography */
.h1{
  font-size:clamp(2.5rem, 10.2vw, 4.5rem);
  line-height:1.03;
  letter-spacing:-.042em;
  font-weight:800;
  max-width:19ch;
  text-wrap:balance;
}
.h2{
  font-size:clamp(1.9rem, 7vw, 3rem);
  line-height:1.1;
  letter-spacing:-.034em;
  font-weight:800;
  margin-top:14px;
  text-wrap:balance;
}
.h3{font-size:1.125rem;font-weight:800;line-height:1.35;letter-spacing:-.012em}
@media (min-width:640px){ .h3{font-size:1.1875rem} }

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.75rem;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--brand-600);
}
.eyebrow::before{
  content:"";height:2px;width:22px;border-radius:2px;
  background:currentColor;opacity:.55;
}
.section--dark .eyebrow{color:var(--brand-300)}
.section-head--center .eyebrow::before{display:none}

.lede{
  margin-top:18px;
  font-size:1.0625rem;
  font-weight:500;
  line-height:1.72;
  color:var(--body);
  max-width:62ch;
  text-wrap:pretty;
}
@media (min-width:768px){ .lede{font-size:1.0625rem;line-height:1.8} }
.section--dark .lede,
.panel--dark .lede{color:#cfd2e9}

.lede--hero{margin-top:22px;font-size:1.125rem;line-height:1.7}
@media (min-width:768px){ .lede--hero{font-size:1.1875rem;line-height:1.75} }

.prose{margin-top:20px;font-size:1rem;line-height:1.78;color:var(--body);text-wrap:pretty}
.prose + .prose{margin-top:16px}

.fine{margin-top:16px;font-size:.9375rem;line-height:1.75;color:var(--muted);text-wrap:pretty}

/* ------------------------------------------------------------------ 5. Icons */
.i{
  width:1em;height:1em;flex:0 0 auto;
  fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.i--fill{fill:currentColor;stroke:none}

.icon-tile{
  display:grid;place-items:center;
  height:52px;width:52px;flex:0 0 52px;
  border-radius:var(--r-md);
  font-size:26px;
  color:var(--brand-700);
  background:linear-gradient(150deg, var(--brand-50), #e0e3f2);
  box-shadow:inset 0 0 0 1px rgba(27,36,95,.10);
}
.icon-tile--amber{color:#a56a12;background:linear-gradient(150deg,#fff6e4,#ffeecb);box-shadow:inset 0 0 0 1px rgba(165,106,18,.12)}
.icon-tile--indigo{color:#4c53a8;background:linear-gradient(150deg,#eef0ff,#e2e6ff);box-shadow:inset 0 0 0 1px rgba(76,83,168,.12)}
.icon-tile--sky{color:#1f6f96;background:linear-gradient(150deg,#e9f6ff,#d9eeff);box-shadow:inset 0 0 0 1px rgba(31,111,150,.12)}
.icon-tile--red{color:#b04a4a;background:linear-gradient(150deg,#fdefef,#fbe2e2);box-shadow:inset 0 0 0 1px rgba(176,74,74,.12)}

.section--dark .icon-tile{
  color:var(--brand-200);
  background:rgba(255,255,255,.10);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}

.icon-inline{
  display:inline-grid;place-items:center;
  height:26px;width:26px;flex:0 0 26px;
  border-radius:var(--r-xs);
  font-size:15px;
  color:var(--brand-700);
  background:var(--brand-50);
}
.doc-facts .icon-inline,
.info-label .icon-inline{color:var(--brand-200);background:rgba(255,255,255,.12)}

/* ----------------------------------------------------------- 6. Components */

/* 6.1 Buttons -------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:var(--tap);
  padding:0 22px;
  border-radius:var(--r-md);
  font-size:.9375rem;font-weight:800;letter-spacing:-.005em;
  text-align:center;
  transition:background-color .2s ease, transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.btn .i{font-size:18px}
.btn--primary{
  color:#fff;
  background:linear-gradient(180deg, var(--brand-600), var(--brand-700));
  box-shadow:0 6px 18px rgba(27,36,95,.24);
}
.btn--primary:hover{background:linear-gradient(180deg, var(--brand-700), var(--brand-800))}
.btn--lift:hover{transform:translateY(-2px);box-shadow:var(--shadow-soft)}
.btn--outline{background:var(--white);color:var(--brand-800);border:1px solid var(--brand-200)}
.btn--outline:hover{background:var(--brand-50);border-color:var(--brand-300)}
.btn--soft{background:var(--brand-50);color:var(--brand-800);border:1px solid var(--brand-200)}
.btn--soft:hover{background:var(--brand-100)}
.btn--quiet{border:1px solid var(--line);color:var(--body)}
.btn--quiet:hover{background:var(--brand-50)}
.btn--block{display:flex;width:100%}
.btn--sm{min-height:40px;padding:0 16px;font-size:.8125rem;border-radius:var(--r-sm)}

.btn-icon{
  display:grid;place-items:center;
  height:44px;width:44px;flex:0 0 44px;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--white);
  font-size:20px;
}

.link-more{
  display:inline-flex;align-items:center;gap:7px;
  min-height:44px;
  margin-top:10px;
  font-size:.9375rem;font-weight:800;
  color:var(--brand-700);
}
.link-more .i{font-size:16px;transition:transform .2s ease}
.link-more:hover .i{transform:translateX(3px)}

.inline-link{font-weight:800;color:var(--brand-700);text-decoration:underline;text-underline-offset:2px}

/* 6.2 Header --------------------------------------------------------------- */
.site-header{
  position:fixed;inset-inline:0;top:0;z-index:50;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid rgba(0,0,0,.06);
  padding-top:env(safe-area-inset-top);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  height:var(--header-h);
}
.brand{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 auto;min-height:44px}
.brand-mark{
  display:grid;place-items:center;
  height:42px;width:42px;flex:0 0 42px;
  border-radius:var(--r-md);
  background:linear-gradient(150deg, var(--brand-600), var(--brand-800));
  color:#fff;
  box-shadow:0 4px 12px rgba(27,36,95,.28);
}
.brand-mark svg{width:26px;height:26px}
.brand-text{min-width:0}
.brand-name{
  display:block;font-size:.875rem;font-weight:800;line-height:1.25;letter-spacing:-.015em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.brand-tag{
  display:block;font-size:.6875rem;font-weight:600;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* Header wordmark logo (replaces the icon + text lockup). Sized to sit
   comfortably inside the 64/72px header with breathing room. */
.brand-logo{display:block;height:48px;width:auto;max-width:230px;object-fit:contain}
@media (min-width:768px){ .brand-logo{height:48px;max-width:230px} }

/* Mobile (<768px): nav and header CTA are hidden, so the header is just
   [logo][menu]. A 3-column grid with a phantom left column the same width as
   the menu button centres the logo optically and makes overlap impossible. */
@media (max-width:767px){
  .header-inner{
    display:grid;
    grid-template-columns:var(--tap-btn) minmax(0,1fr) var(--tap-btn);
    align-items:center;gap:8px;
    --tap-btn:44px;
  }
  .brand{grid-column:2;justify-content:center;flex:0 1 auto;min-width:0}
  .menu-btn{grid-column:3;margin-left:0}
  .brand-logo{
    height:auto;width:auto;
    max-width:100%;
    max-height:calc(var(--header-h) - 22px);
  }
}

.nav{display:none}
@media (min-width:1200px){
  .nav{display:flex;flex:0 0 auto;align-items:center;gap:17px;font-size:.8125rem;font-weight:700;color:#3d3f4e}
  .nav a{white-space:nowrap;padding-block:6px;border-bottom:2px solid transparent}
  .nav a:hover{color:var(--brand-700)}
  .nav a[aria-current="page"]{color:var(--brand-700);border-bottom-color:var(--brand-500)}
}

.header-cta{display:none}
@media (min-width:768px){ .header-cta{display:inline-flex;flex:0 0 auto;white-space:nowrap;padding-inline:16px;font-size:.875rem} }

.menu-btn{display:grid;place-items:center;height:44px;width:44px;flex:0 0 44px;
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--white);font-size:22px;margin-left:auto}
@media (min-width:1200px){ .menu-btn{display:none} }

/* 6.3 Drawer --------------------------------------------------------------- */
.drawer{position:fixed;inset:0;z-index:60}
.drawer[hidden]{display:none}
@media (min-width:1200px){ .drawer{display:none} }

.drawer__backdrop{
  position:absolute;inset:0;
  background:rgba(16,18,28,.55);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  opacity:0;transition:opacity .3s ease;
}
.drawer.is-open .drawer__backdrop{opacity:1}

.drawer__panel{
  position:absolute;right:0;top:0;
  display:flex;flex-direction:column;
  height:100%;width:87%;max-width:380px;
  background:var(--white);
  box-shadow:var(--shadow-lift);
  transform:translateX(100%);
  transition:transform .3s cubic-bezier(.32,.72,0,1);
  padding-top:env(safe-area-inset-top);
}
.drawer.is-open .drawer__panel{transform:none}

.drawer__head{
  display:flex;align-items:center;justify-content:space-between;
  height:var(--header-h);flex:0 0 auto;
  padding-inline:18px;
  border-bottom:1px solid var(--line-soft);
  font-size:.9375rem;font-weight:800;
}
.drawer__body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:18px}
.drawer__links{display:grid;gap:2px;margin-bottom:18px}
.drawer__links a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:52px;
  padding-inline:14px;
  border-radius:var(--r-md);
  font-size:1rem;font-weight:700;
}
.drawer__links a .i{font-size:16px;color:var(--brand-400);opacity:0;transition:opacity .2s ease, transform .2s ease}
.drawer__links a:hover{background:var(--brand-50)}
.drawer__links a:hover .i{opacity:1;transform:translateX(2px)}
.drawer__actions{display:grid;gap:8px}
.drawer__hours{
  margin-top:22px;padding-top:18px;
  border-top:1px solid var(--line-soft);
  font-size:.8125rem;font-weight:600;line-height:1.7;color:var(--muted);
}
body.is-locked{overflow:hidden}

/* 6.4 Cards ---------------------------------------------------------------- */
.card{
  position:relative;
  background:var(--white);
  border-radius:var(--r-lg);
  padding:22px;
  transition:transform .25s ease, box-shadow .25s ease;
}
@media (min-width:640px){ .card{padding:26px} }

.card--bordered{border:1px solid var(--line-soft);box-shadow:var(--shadow-card)}
.card--shadow{box-shadow:var(--shadow-card)}
.card--brand{background:linear-gradient(155deg, #f3f4fa, #e3e5f3)}
.card--amber{background:linear-gradient(155deg,#fffaf0,#fdf0d9)}
.card--indigo{background:linear-gradient(155deg,#f5f6ff,#e8ebff)}
.card--sky{background:linear-gradient(155deg,#f0faff,#dff1fd)}
.card--solid{
  color:#fff;
  background:linear-gradient(155deg, var(--brand-600), var(--brand-800));
}
.card--glass{
  background:rgba(255,255,255,.07);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}

@media (hover:hover){
  .card--hover:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover)}
}

.card .h3{margin-top:18px}
.card__text{margin-top:10px;font-size:1rem;line-height:1.72;color:var(--body);text-wrap:pretty}
.section--dark .card__text{color:#cfd2e9}
.card--solid .card__text{color:var(--brand-100)}

.feature{display:flex;gap:16px}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.chip{
  background:var(--brand-50);color:var(--brand-800);
  padding:7px 12px;border-radius:var(--r-sm);
  font-size:.75rem;font-weight:700;
  box-shadow:inset 0 0 0 1px rgba(27,36,95,.08);
}

.tag-cat{
  display:inline-flex;align-items:center;
  margin-top:18px;
  padding:5px 10px;
  border-radius:var(--r-xs);
  background:var(--brand-50);
  font-size:.6875rem;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;
  color:var(--brand-700);
}

/* Journey steps */
.step-head{display:flex;align-items:center;gap:12px}
.step-num{
  display:grid;place-items:center;
  height:44px;width:44px;flex:0 0 44px;
  border-radius:var(--r-md);
  background:linear-gradient(150deg, var(--brand-300), var(--brand-500));
  color:var(--brand-950);
  font-size:1.125rem;font-weight:800;
}
.step-rule{flex:1;height:2px;border-radius:2px;background:repeating-linear-gradient(90deg, rgba(255,255,255,.30) 0 6px, transparent 6px 12px)}

.stat-figure{font-size:2.5rem;font-weight:800;line-height:1.05;letter-spacing:-.03em}
.stat-label{margin-top:10px;font-weight:800;font-size:1rem}
.stat-note{margin-top:8px;font-size:.875rem;line-height:1.65;color:var(--muted)}
.card--solid .stat-note{color:var(--brand-100)}
.stat-source{
  display:inline-flex;align-items:center;gap:7px;
  margin-top:18px;font-size:.75rem;font-weight:800;color:var(--brand-700);
}
.stat-source .i{font-size:14px}
.card--solid .stat-source{color:#fff}
.card--shadow .stat-figure{color:var(--brand-700)}
.stat-spark{margin-top:16px;width:100%;height:38px;color:var(--brand-400)}
.card--shadow .stat-spark{color:var(--brand-300)}

/* 6.5 Hero ----------------------------------------------------------------- */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(120% 80% at 85% -10%, #ced2ed 0%, transparent 55%),
    radial-gradient(90% 70% at 0% 5%, #e8eaf5 0%, transparent 60%),
    linear-gradient(to bottom, var(--brand-50), var(--cream) 78%);
}
.hero__art{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;color:var(--brand-500);
}
.hero__inner{
  position:relative;z-index:1;
  display:grid;gap:40px;align-items:center;
  padding-block:44px 52px;
}
@media (min-width:768px){ .hero__inner{padding-block:76px} }
@media (min-width:1024px){ .hero__inner{padding-block:92px} }

.badge{
  display:inline-flex;align-items:center;gap:9px;
  margin-bottom:22px;
  padding:9px 15px;
  border:1px solid var(--brand-200);
  border-radius:var(--r-sm);
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-size:.75rem;font-weight:800;letter-spacing:.01em;color:var(--brand-800);
  box-shadow:0 2px 10px rgba(27,36,95,.08);
}
.badge__dot{
  height:8px;width:8px;border-radius:50%;background:var(--brand-500);
  box-shadow:0 0 0 4px rgba(43,56,146,.18);
}

.hero__accent{
  color:var(--brand-700);
  background:linear-gradient(100deg, var(--brand-700), var(--brand-500) 55%, var(--brand-600));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}

.hero__actions{display:flex;flex-direction:column;gap:12px;margin-top:30px}
@media (min-width:640px){ .hero__actions{flex-direction:row} }

.doc-panel{
  position:relative;overflow:hidden;
  color:#fff;
  border-radius:var(--r-lg);
  padding:24px;
  background:linear-gradient(158deg, #1d2765 0%, var(--brand-800) 45%, var(--brand-950) 100%);
  box-shadow:var(--shadow-soft);
}
@media (min-width:640px){ .doc-panel{padding:32px} }
@media (min-width:1024px){ .doc-panel{justify-self:end} }
.doc-panel__art{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.5}
.doc-panel__body{position:relative;z-index:1}

.doc-head{display:flex;align-items:flex-start;gap:18px;margin-bottom:24px}
.doc-head > div{min-width:0;flex:1}
.doc-name{line-height:1.25}
.doc-avatar{
  display:grid;place-items:center;
  height:64px;width:64px;flex:0 0 64px;
  border-radius:var(--r-md);
  background:rgba(255,255,255,.10);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
  overflow:hidden;
}
.doc-avatar svg{width:100%;height:100%}
.doc-quals{margin-top:5px;font-size:.875rem;font-weight:600;color:var(--brand-100)}
.doc-role{font-size:.875rem;font-weight:600;color:var(--brand-300)}

.doc-facts{display:grid;gap:10px;font-size:.875rem;font-weight:600}
@media (min-width:640px){ .doc-facts{grid-template-columns:1fr 1fr;gap:12px} }
.doc-facts li{
  display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.08);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  border-radius:var(--r-md);padding:13px;
  line-height:1.4;
}
.doc-facts .is-wide{grid-column:1/-1}
.doc-note{
  display:flex;align-items:center;justify-content:center;gap:9px;
  margin-top:20px;padding:13px 16px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.16);
  border-radius:var(--r-md);
  font-size:.8125rem;font-weight:700;color:var(--brand-100);
}

/* 6.6 Swipe rails ---------------------------------------------------------- */
.rail-wrap{margin-top:34px;margin-inline:calc(var(--gutter) * -1)}
@media (min-width:640px){ .rail-wrap{margin-inline:0} }

.rail{
  display:flex;gap:12px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  padding-inline:var(--gutter);
  padding-bottom:8px;
  scroll-padding-inline:var(--gutter);
  scrollbar-width:none;-ms-overflow-style:none;
}
.rail::-webkit-scrollbar{display:none}
.rail > *{flex:0 0 auto;scroll-snap-align:center}

.rail--stats > *{width:52%;min-width:168px}
.rail--stories > *{width:86%;max-width:380px}

@media (min-width:640px){
  .rail--stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;overflow:visible;padding-inline:0}
  .rail--stats > *{width:auto;min-width:0}
}
@media (min-width:768px){
  .rail--stories{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;overflow:visible;padding-inline:0}
  .rail--stories > *{width:auto;max-width:none}
}

.stat-card{
  position:relative;overflow:hidden;
  background:var(--white);
  border-radius:var(--r-lg);
  padding:18px;
  box-shadow:var(--shadow-card);
}
.stat-card__figure{
  display:block;
  font-size:1.75rem;font-weight:800;line-height:1.15;letter-spacing:-.03em;
  color:var(--brand-700);
}
.stat-card__label{display:block;margin-top:8px;font-size:.8125rem;font-weight:600;line-height:1.5;color:var(--muted)}
.stat-card__bar{margin-top:14px;height:5px;border-radius:3px;background:var(--brand-100);overflow:hidden}
.stat-card__bar > span{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg, var(--brand-400), var(--brand-600))}

.dots{display:flex;justify-content:center;gap:6px;margin-top:6px}
@media (min-width:768px){ .dots{display:none} }
.dot{height:5px;width:5px;border-radius:2px;background:#cbccd5;transition:width .25s ease, background-color .25s ease}
.dot.is-active{width:20px;background:var(--brand-700)}

.tag-rail{
  display:flex;gap:8px;
  margin-top:22px;margin-inline:calc(var(--gutter) * -1);
  padding-inline:var(--gutter);padding-bottom:8px;
  overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none;
}
.tag-rail::-webkit-scrollbar{display:none}
.tag-rail li{
  display:inline-flex;align-items:center;gap:7px;
  flex:0 0 auto;white-space:nowrap;
  background:var(--brand-50);color:var(--brand-800);
  border-radius:var(--r-sm);
  padding:10px 14px;
  font-size:.75rem;font-weight:800;
  box-shadow:inset 0 0 0 1px rgba(27,36,95,.08);
}
.tag-rail .i{font-size:14px;color:var(--brand-500)}
@media (min-width:640px){
  .tag-rail{flex-wrap:wrap;margin-inline:0;padding-inline:0;overflow:visible}
}

/* 6.7 Stories -------------------------------------------------------------- */
.story{overflow:hidden}
.story__mark{
  position:absolute;top:-6px;right:10px;
  font-size:96px;line-height:1;
  color:var(--brand-700);opacity:.08;
  pointer-events:none;
}
.stars{display:flex;gap:3px;color:var(--brand-600)}
.stars .i{font-size:17px}
.story__quote{margin-top:16px;font-size:1rem;line-height:1.75;color:var(--body);text-wrap:pretty}
.story__person{display:flex;align-items:center;gap:12px;margin-top:22px}
.avatar{
  display:grid;place-items:center;
  height:46px;width:46px;flex:0 0 46px;
  border-radius:var(--r-md);
  background:linear-gradient(150deg, var(--brand-600), var(--brand-800));
  color:#fff;
  font-weight:800;font-size:1.0625rem;
}
.story__name{font-size:.9375rem;font-weight:800}
.story__meta{font-size:.8125rem;color:var(--muted)}

/* 6.8 Doctor panel --------------------------------------------------------- */
.bio-panel{
  position:relative;overflow:hidden;
  background:linear-gradient(160deg, #f3f4fa, #e5e7f4);
  border-radius:var(--r-lg);
  padding:24px;
}
@media (min-width:640px){ .bio-panel{padding:32px} }
.bio-avatar{
  display:grid;place-items:center;
  height:88px;width:88px;
  border-radius:var(--r-lg);
  background:var(--white);
  box-shadow:var(--shadow-card);
  overflow:hidden;
}
.bio-avatar svg{width:100%;height:100%}
.bio-name{margin-top:22px;font-size:1.625rem;font-weight:800;letter-spacing:-.025em}
.bio-quals{margin-top:6px;font-size:.9375rem;font-weight:700;color:var(--brand-700)}
.bio-role{margin-top:4px;font-size:.9375rem;font-weight:700;color:var(--muted)}
.bio-facts{display:grid;gap:10px;margin-top:22px;font-size:.9375rem;font-weight:600;color:#3a3c4b}
.bio-facts li{
  display:flex;align-items:flex-start;gap:11px;
  background:var(--white);border-radius:var(--r-md);padding:15px;line-height:1.55;
  box-shadow:0 1px 2px rgba(15,18,35,.04);
}

.pullquote{
  position:relative;
  margin-top:22px;padding:24px;
  background:linear-gradient(155deg, #f3f4fa, #e5e7f4);
  border-left:4px solid var(--brand-500);
  border-radius:var(--r-md);
  font-size:1.125rem;font-weight:700;line-height:1.7;color:var(--brand-900);
  text-wrap:pretty;
}
.pullquote footer{margin-top:14px;font-size:.9375rem;font-weight:800;color:var(--brand-700)}

.checklist{display:grid;gap:11px;margin-top:22px;font-size:.9375rem;font-weight:700}
@media (min-width:640px){ .checklist{grid-template-columns:1fr 1fr;gap:12px} }
.checklist li{display:flex;align-items:flex-start;gap:10px;line-height:1.5}
.checklist .i{font-size:19px;color:var(--brand-500);margin-top:1px}

.pill-note{
  display:inline-flex;align-items:center;gap:9px;
  margin-top:22px;
  background:var(--brand-100);color:var(--brand-800);
  border-radius:var(--r-sm);
  padding:11px 16px;
  font-size:.8125rem;font-weight:800;
}
.pill-note .i{font-size:17px;color:var(--brand-600)}

/* 6.9 FAQ ------------------------------------------------------------------ */
.faq-aside{
  margin-top:26px;
  background:linear-gradient(160deg, #f3f4fa, #e5e7f4);
  border-radius:var(--r-lg);
  padding:24px;
}
.faq-aside .btn{margin-top:12px}
.faq-aside__hours{
  margin-top:22px;padding-top:20px;
  border-top:1px solid var(--brand-200);
  font-size:.8125rem;font-weight:600;line-height:1.75;color:var(--body);
}

.faq-list{display:grid;gap:12px}
.faq-item{
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--white);
  overflow:hidden;
  transition:border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.faq-item.is-open{border-color:var(--brand-200);background:#f8f9fc;box-shadow:var(--shadow-card)}
.faq-btn{
  display:flex;width:100%;
  align-items:flex-start;justify-content:space-between;gap:16px;
  padding:20px;
  text-align:left;
  font-size:1.0625rem;font-weight:800;line-height:1.45;letter-spacing:-.012em;
}
@media (min-width:640px){ .faq-btn{padding:22px 24px} }
.faq-sign{
  display:grid;place-items:center;
  height:28px;width:28px;flex:0 0 28px;
  border-radius:var(--r-xs);
  background:var(--brand-50);
  color:var(--brand-700);font-size:17px;
  transition:transform .25s ease, background-color .2s ease;
}
.faq-item.is-open .faq-sign{transform:rotate(45deg);background:var(--brand-200)}
.faq-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s ease}
.faq-panel > div{overflow:hidden}
.faq-item.is-open .faq-panel{grid-template-rows:1fr}
.faq-panel p{padding:0 20px 24px;font-size:1rem;line-height:1.78;color:var(--body);text-wrap:pretty}
@media (min-width:640px){ .faq-panel p{padding-inline:24px} }

/* 6.10 Booking ------------------------------------------------------------- */

/* On a phone the form is the action, so it leads; the clinic details are
   reference material and follow it. Side-by-side layout is unaffected. */
.split--booking .form-card{order:1}
.split--booking .info-panel{order:2}
@media (min-width:1024px){
  .split--booking .info-panel,
  .split--booking .form-card{order:0}
}

.info-panel{
  background:rgba(255,255,255,.07);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border-radius:var(--r-lg);
  padding:24px;
}
@media (min-width:640px){ .info-panel{padding:28px} }
.info-list{display:grid;gap:0;margin-top:18px;font-size:.9375rem}
.info-list > li{
  background:none;box-shadow:none;border-radius:0;
  padding:15px 0;
  border-top:1px solid rgba(255,255,255,.13);
}
.info-list > li:first-child{border-top:0;padding-top:2px}
.info-list > li.info-map{
  margin-top:18px;padding:0;border-top:0;
  border-radius:var(--r-md);
  background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.info-label{display:flex;align-items:center;gap:10px;font-weight:800}
.info-body{margin-top:9px;line-height:1.6;color:var(--brand-100)}
.info-phone{display:inline-block;margin-top:5px;padding-block:8px;font-size:1.1875rem;font-weight:800;letter-spacing:-.01em}
.info-email{display:inline-block;margin-top:5px;padding-block:11px;font-weight:700;word-break:break-word}
.info-map{
  position:relative;overflow:hidden;
  display:grid;place-items:center;gap:8px;
  min-height:176px;
  text-align:center;color:var(--brand-100);font-size:.875rem;
}
.privacy-note{
  display:flex;gap:11px;
  margin-top:22px;padding:16px;
  background:rgba(255,255,255,.08);
  border-radius:var(--r-md);
  font-size:.8125rem;line-height:1.7;color:var(--brand-100);
}
.privacy-note .i{font-size:18px;flex:0 0 auto;margin-top:2px;color:var(--brand-300)}

.form-card{
  background:var(--white);color:var(--ink);
  border-radius:var(--r-lg);
  padding:24px;
  box-shadow:var(--shadow-soft);
}
@media (min-width:640px){ .form-card{padding:32px} }
.form-card__title{font-size:1.5rem;font-weight:800;letter-spacing:-.025em}
.form-card__sub{margin-top:9px;font-size:.9375rem;line-height:1.65;color:var(--muted)}

.form{display:grid;gap:16px;margin-top:26px}
@media (min-width:640px){ .form{grid-template-columns:1fr 1fr;margin-top:28px} }
.field{display:block;font-size:.8125rem;font-weight:800;color:#3a3c4b}
.field--wide{grid-column:1/-1}
.control{
  display:block;width:100%;
  margin-top:9px;
  height:48px;padding:0 14px;
  background:#f6f6f9;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  font-weight:500;color:var(--ink);
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
@media (min-width:640px){ .control{height:50px} }
textarea.control{height:auto;padding:14px;resize:vertical;line-height:1.6}
.control:focus{
  border-color:var(--brand-500);
  box-shadow:0 0 0 4px var(--brand-100);
  background:var(--white);
}
.control.is-invalid{border-color:#d97676;background:#fdf3f3}
.form-consent{
  grid-column:1/-1;display:flex;gap:9px;
  font-size:.75rem;line-height:1.6;color:var(--muted);
}
.form-consent .i{font-size:16px;flex:0 0 auto;margin-top:1px}
.form .btn{grid-column:1/-1}

.success{
  margin-top:24px;padding:26px;
  background:linear-gradient(155deg, #f3f4fa, #e5e7f4);
  border-radius:var(--r-md);
  text-align:center;
}
.success__icon{display:grid;place-items:center;margin-inline:auto;height:52px;width:52px;border-radius:var(--r-md);background:var(--brand-600);color:#fff;font-size:28px}
.success h4{margin-top:16px;font-size:1.1875rem;font-weight:800;color:var(--brand-900)}
.success p{margin-top:9px;font-size:.9375rem;line-height:1.65;color:var(--body)}

/* ---- Two-step booking form ---- */
.stepper{grid-column:1/-1;display:flex;gap:10px;margin:0 0 4px;padding:0;list-style:none}
.stepper__item{display:flex;align-items:center;gap:9px;flex:1;font-size:.8125rem;font-weight:800;color:var(--muted);
  padding-bottom:12px;border-bottom:2px solid var(--line)}
.stepper__dot{display:grid;place-items:center;height:26px;width:26px;flex:0 0 26px;border-radius:50%;
  background:var(--brand-100);color:var(--brand-700);font-size:.8125rem;font-weight:800}
.stepper__item.is-active{color:var(--brand-800);border-bottom-color:var(--brand-600)}
.stepper__item.is-active .stepper__dot{background:var(--brand-600);color:#fff}
.stepper__item.is-done{color:var(--brand-700);border-bottom-color:var(--brand-400)}
.stepper__item.is-done .stepper__dot{background:var(--brand-500);color:#fff}
.form-step{grid-column:1/-1;display:none;gap:16px}
.form-step.is-active{display:grid}
@media (min-width:640px){ .form-step.is-active{grid-template-columns:1fr 1fr} }
@media (max-width:639px){ .form-step.is-active{gap:12px} }
.form-nav{grid-column:1/-1;display:flex;gap:12px;margin-top:8px}
.form-nav .btn{flex:1;margin:0;padding:14px 16px;min-height:50px}
@media (max-width:639px){ .form-nav{flex-direction:column-reverse} }
.form-step [data-next]{grid-column:1/-1;padding:16px;margin-top:8px;min-height:50px}
.field-hint{display:block;margin-top:7px;font-size:.75rem;font-weight:600;color:var(--muted)}

/* Consultation-mode radios */
.radio-group{border:0;margin:0;padding:0;min-width:0}
.radio-group legend{padding:0;margin-bottom:9px;font-size:.8125rem;font-weight:800;color:#3a3c4b}
.radio-row{display:flex;gap:10px;flex-wrap:wrap}
.radio{flex:1 1 160px;display:flex;align-items:center;gap:11px;min-height:50px;padding:0 14px;
  background:#f6f6f9;border:1px solid var(--line);border-radius:var(--r-md);
  font-weight:600;color:var(--ink);cursor:pointer;font-size:.9375rem;transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease}
.radio span{display:inline-flex;align-items:center;gap:8px}
.radio span .i{color:var(--brand-600)}
.radio input{width:18px;height:18px;accent-color:var(--brand-600);flex:0 0 18px}
.radio:has(input:checked){border-color:var(--brand-500);background:var(--white);box-shadow:0 0 0 3px var(--brand-100)}
.radio-group.is-invalid .radio{border-color:#d97676;background:#fdf3f3}

/* File upload control */
.control--file{height:auto;min-height:50px;padding:12px 14px;line-height:1.4;font-weight:600;color:var(--body);
  max-width:100%;overflow:hidden;text-overflow:ellipsis}
.control--file::file-selector-button{margin-right:12px;padding:9px 13px;border:1px solid var(--brand-200);
  background:var(--brand-50);color:var(--brand-800);font-weight:700;border-radius:var(--r-sm);cursor:pointer}
.control--file::-webkit-file-upload-button{margin-right:12px;padding:9px 13px;border:1px solid var(--brand-200);
  background:var(--brand-50);color:var(--brand-800);font-weight:700;border-radius:var(--r-sm);cursor:pointer}

/* ---- Floating WhatsApp / booking widget ---- */
.wa-fab{position:fixed;right:16px;z-index:45;bottom:calc(20px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;align-items:flex-end;gap:12px}
@media (max-width:767px){ .wa-fab{bottom:calc(86px + env(safe-area-inset-bottom))} }
.wa-fab{--fab:64px}
@media (max-width:767px){ .wa-fab{--fab:60px} }
.wa-fab__btn{position:relative;height:var(--fab);width:var(--fab);border:0;border-radius:50%;cursor:pointer;
  background:#25D366;padding:0;display:grid;place-items:center;overflow:visible;
  box-shadow:0 12px 26px rgba(37,211,102,.42), 0 4px 10px rgba(0,0,0,.16);
  transition:box-shadow .15s ease, transform .15s ease}
.wa-fab__btn:active{transform:scale(.94)}
.wa-fab__btn:hover{box-shadow:0 16px 30px rgba(37,211,102,.5), 0 6px 12px rgba(0,0,0,.18)}
.wa-fab__btn:focus-visible{outline:3px solid var(--brand-600);outline-offset:3px}
.wa-fab__glyph{display:block;width:100%;height:100%;border-radius:50%;
  animation:waWave 6s ease-in-out infinite;transform-origin:center center}
.wa-fab__btn::after{content:"";position:absolute;inset:0;border-radius:50%;
  box-shadow:0 0 0 0 rgba(37,211,102,.5);animation:waPulse 2.6s ease-out infinite}
@keyframes waPulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 18px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
@keyframes waWave{0%,86%,100%{transform:rotate(0)}90%{transform:rotate(-9deg)}94%{transform:rotate(9deg)}97%{transform:rotate(-4deg)}}
@keyframes waBadgePop{0%{transform:scale(0);opacity:0}50%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion: reduce){
  .wa-fab__btn::after,.wa-fab__glyph,.wa-fab__badge,.wa-pop,.wa-pop__item{animation:none}
}
.wa-fab__badge{--badge:calc(var(--fab) * .38);
  position:absolute;top:calc(var(--badge) * -.28);right:calc(var(--badge) * -.28);
  min-width:var(--badge);height:var(--badge);padding:0 calc(var(--badge) * .18);
  display:grid;place-items:center;border-radius:999px;background:#E53935;color:#fff;
  font-size:calc(var(--badge) * .58);font-weight:800;line-height:1;font-variant-numeric:tabular-nums;
  border:2px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.28);
  animation:waBadgePop .4s cubic-bezier(.34,1.56,.64,1);z-index:10;pointer-events:none}
.wa-fab.is-open .wa-fab__badge{display:none}

.wa-pop{width:264px;padding:8px;background:var(--white);border-radius:var(--r-lg);
  box-shadow:0 20px 48px rgba(14,18,48,.22);display:flex;flex-direction:column;gap:4px;
  transform-origin:bottom right;animation:waPop .24s cubic-bezier(.34,.46,.68,1.56)}
.wa-pop[hidden]{display:none}
@keyframes waPop{from{opacity:0;transform:translateY(8px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}
.wa-pop__item{animation:waPopItem .3s cubic-bezier(.34,.46,.68,1.56)}
.wa-pop__item:nth-child(1){animation-delay:.04s}
.wa-pop__item:nth-child(2){animation-delay:.08s}
@keyframes waPopItem{from{opacity:0;transform:translateY(6px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
.wa-pop__item{display:flex;align-items:center;gap:12px;padding:11px;border-radius:var(--r-md);
  text-decoration:none;color:var(--ink)}
.wa-pop__item:nth-child(1){animation-delay:.04s}
.wa-pop__item:nth-child(2){animation-delay:.08s}
.wa-pop__item:focus-visible{outline:3px solid var(--brand-600);outline-offset:-1px}
.wa-pop__ic{display:grid;place-items:center;height:48px;width:48px;flex:0 0 48px;border-radius:50%;padding:0;z-index:5}
.wa-pop__item--chat .wa-pop__ic{background:transparent}
.wa-pop__item--chat .wa-pop__ic svg{width:48px;height:48px}
.wa-pop__item--book .wa-pop__ic{background:var(--brand-600);color:#fff}
.wa-pop__item--book .wa-pop__ic svg{width:20px;height:20px}
.wa-pop__tx{display:flex;flex-direction:column;line-height:1.3}
.wa-pop__tx b{font-size:.9375rem;font-weight:800}
.wa-pop__tx small{font-size:.75rem;color:var(--muted);font-weight:600}

/* ---- WhatsApp capture modal ---- */
.modal{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-start;justify-content:center;
  padding:16px 16px calc(16px + env(safe-area-inset-bottom));overflow-y:auto;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scroll-behavior:smooth}
.modal[hidden]{display:none}
@media (min-width:640px){ .modal{align-items:center} }
.modal__backdrop{position:fixed;inset:0;background:rgba(8,11,28,.55);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.modal__panel{position:relative;z-index:1;width:100%;max-width:520px;max-height:none;overflow-y:auto;
  background:var(--white);border-radius:var(--r-lg);padding:18px;box-shadow:0 30px 70px rgba(8,11,28,.4);animation:waPop .18s ease;margin:20px 0}
@media (min-width:640px){ .modal__panel{padding:28px;max-height:90vh;margin:0} }
.modal__close{position:absolute;top:8px;right:8px;height:44px;width:44px;border:0;border-radius:50%;
  background:transparent;color:var(--muted);font-size:26px;line-height:1;cursor:pointer}
.modal__close:hover{background:var(--brand-50);color:var(--ink)}
.modal__close:focus-visible{outline:3px solid var(--brand-600);outline-offset:2px}
.modal__head{display:flex;align-items:center;gap:12px;padding-right:44px}
.modal__wa{display:grid;place-items:center;height:56px;width:56px;flex:0 0 56px;border-radius:50%;background:#fff;color:#25d366;overflow:hidden;z-index:10}
.modal__wa svg{display:block;width:56px;height:56px}
.modal__head h3{font-size:1.25rem;font-weight:800;letter-spacing:-.02em}
.modal__head p{margin-top:3px;font-size:.875rem;color:var(--muted);line-height:1.5}
.modal .form{margin-top:16px;gap:14px}
@media (min-width:640px){ .modal .form{margin-top:20px;gap:16px} }
.modal .success{margin-top:20px}

/* WhatsApp-green submit button + its filled glyph */
.btn--wa{background:#25d366;color:#fff}
.btn--wa:hover{background:#1fbe5b;color:#fff}
.i--wa{width:20px;height:20px;fill:currentColor;stroke:none}

/* 6.11 Site footer --------------------------------------------------------- */
.site-footer{
  position:relative;overflow:hidden;
  background:var(--brand-950);color:#fff;
  padding-block:48px 26px;
}
.site-footer::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 100% at 50% 0%, rgba(74,88,181,.20), transparent 70%);
}
.site-footer > .wrap{position:relative;z-index:1}

.footer-top{display:grid;gap:32px}
@media (min-width:700px){ .footer-top{grid-template-columns:1fr 1fr} }
@media (min-width:1024px){ .footer-top{grid-template-columns:1.6fr .9fr 1.15fr 1fr;gap:40px} }
.footer-top > *{min-width:0}

.footer-brand{display:flex;align-items:center;gap:11px;font-size:1rem;font-weight:800;color:#fff;letter-spacing:-.015em}
.footer-brand svg{width:34px;height:34px;flex:0 0 34px;color:var(--brand-300)}
.footer-about{margin-top:14px;max-width:40ch;font-size:.9375rem;line-height:1.72;color:#bdc1d9}

.footer-h{font-size:.75rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--brand-300)}

.footer-links{display:grid;gap:1px;margin-top:12px}
.footer-links a{
  display:inline-flex;align-items:center;
  min-height:40px;
  font-size:.9375rem;font-weight:600;color:#cfd2e4;
  transition:color .2s ease;
}
.footer-links a:hover{color:#fff}

.footer-contact{display:grid;gap:13px;margin-top:14px;font-size:.9375rem;color:#cfd2e4}
.footer-contact li{display:flex;align-items:flex-start;gap:11px;line-height:1.6;min-width:0}
.footer-contact .i{font-size:18px;flex:0 0 auto;margin-top:2px;color:var(--brand-300)}
.footer-contact a{overflow-wrap:anywhere;word-break:break-word}
.footer-contact li > span{min-width:0}
.footer-contact a:hover{color:#fff;text-decoration:underline;text-underline-offset:2px}

.footer-hours{margin-top:14px;font-size:.9375rem;line-height:1.85;color:#cfd2e4}
.footer-hours b{color:#fff}
.footer-top .btn{margin-top:18px}

.socials{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.social{
  display:grid;place-items:center;
  height:46px;width:46px;
  border-radius:var(--r-md);
  background:rgba(255,255,255,.08);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  color:#fff;font-size:21px;
  transition:background-color .2s ease, transform .2s ease;
}
.social:hover{background:var(--brand-600);transform:translateY(-2px)}

.footer-bottom{
  display:grid;gap:14px;
  margin-top:38px;padding-top:24px;
  border-top:1px solid rgba(255,255,255,.13);
  font-size:.8125rem;line-height:1.7;color:#a6aac5;
}
@media (min-width:900px){ .footer-bottom{grid-template-columns:1fr auto;align-items:start;gap:32px} }
.footer-disclaimer{max-width:86ch}
.footer-legal{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center}
.footer-legal a:hover{color:#fff;text-decoration:underline;text-underline-offset:2px}

.actionbar{
  position:fixed;inset-inline:0;bottom:0;z-index:40;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid rgba(0,0,0,.06);
  padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
}
@media (min-width:768px){ .actionbar{display:none} }
.actionbar__inner{display:flex;gap:10px;max-width:576px;margin-inline:auto}
.actionbar .btn{flex:1}
.actionbar .btn-icon{height:48px;width:48px;flex-basis:48px}

.install-card{
  position:fixed;z-index:40;
  inset-inline:var(--gutter);
  bottom:calc(78px + env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:12px;
  background:var(--white);
  border:1px solid var(--brand-200);
  border-radius:var(--r-lg);
  padding:14px;
  box-shadow:var(--shadow-soft);
}
.install-card[hidden]{display:none}
@media (min-width:768px){ .install-card{display:none} }
.install-card__mark{
  display:grid;place-items:center;
  height:44px;width:44px;flex:0 0 44px;
  border-radius:var(--r-md);
  background:linear-gradient(150deg, var(--brand-600), var(--brand-800));color:#fff;
}
.install-card__mark svg{width:26px;height:26px}
.install-card__text{flex:1;min-width:0}
.install-card__title{font-size:.9375rem;font-weight:800}
.install-card__sub{font-size:.8125rem;color:var(--muted)}
.install-card__close{flex:0 0 auto;padding:6px;color:#9496a4;font-size:18px}

.toast{
  position:fixed;z-index:70;left:50%;
  bottom:calc(86px + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(12px);
  padding:13px 20px;
  background:var(--ink);color:#fff;
  border-radius:var(--r-md);
  font-size:.8125rem;font-weight:700;
  box-shadow:var(--shadow-soft);
  opacity:0;pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
}
.toast[hidden]{display:none}
.toast.is-visible{opacity:1;transform:translateX(-50%)}

/* ------------------------------------------------------------ 7. Utilities */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .55s ease, transform .55s ease}
.reveal.is-visible{opacity:1;transform:none}

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

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

@media print{
  .site-header,.actionbar,.install-card,.drawer,.toast,.hero__art,.wa-fab{display:none !important}
  body{padding:0}
  .reveal{opacity:1;transform:none}
}

/* ==========================================================================
   8. Sub-pages: About Dr. Das + Patient Video Resources
   ========================================================================== */

/* 8.1 Compact page hero ----------------------------------------------------- */
.page-hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(110% 80% at 88% -20%, #ced2ed 0%, transparent 55%),
    linear-gradient(to bottom, var(--brand-50), var(--cream) 85%);
}
.page-hero__art{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.page-hero__inner{position:relative;z-index:1;padding-block:28px 44px}
@media (min-width:768px){ .page-hero__inner{padding-block:36px 64px} }

.back-link{
  display:inline-flex;align-items:center;gap:8px;
  min-height:44px;
  font-size:.8125rem;font-weight:800;color:var(--brand-700);
}
.back-link .i{font-size:16px;transition:transform .2s ease}
.back-link:hover .i{transform:translateX(-3px)}

.h1--page{font-size:clamp(2.25rem, 9vw, 3.9rem);max-width:22ch}

/* 8.2 Doctor profile card (About page) -------------------------------------- */
.profile-frame{
  position:relative;overflow:hidden;
  border:1px solid var(--brand-100);
  background:var(--white);
  border-radius:var(--r-lg);
  padding:20px;
  box-shadow:var(--shadow-soft);
}
@media (min-width:640px){ .profile-frame{padding:26px} }
@media (min-width:1024px){ .profile-frame{justify-self:end;max-width:460px} }
.profile-card{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;
  min-height:340px;
  padding:24px;
  border-radius:var(--r-lg);
  color:#fff;
  background:linear-gradient(158deg, #1d2765 0%, var(--brand-800) 50%, var(--brand-950) 100%);
}
@media (min-width:640px){ .profile-card{min-height:400px;padding:28px} }
.profile-card__art{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.55}
.profile-card__mark{
  position:relative;
  display:grid;place-items:center;
  height:96px;width:96px;
  border-radius:var(--r-lg);
  background:rgba(255,255,255,.12);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);
}
.profile-card__mark svg{width:60px;height:60px}

/* ---- Doctor portrait as a full-bleed card with overlaid info ---- */
.profile-card--photo{min-height:420px;justify-content:flex-end;padding:0}
@media (min-width:640px){ .profile-card--photo{min-height:480px} }
.profile-card__photo{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;
  object-fit:cover;object-position:50% 20%;
  display:block;
}
/* Dark scrim at the bottom keeps the white text readable over the photo. */
.profile-card--photo::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(10,13,35,0) 34%,
    rgba(10,13,35,.55) 64%,
    rgba(7,10,26,.94) 100%);
}
.profile-card--photo .profile-card__meta{
  position:relative;z-index:2;margin-top:0;padding:24px;
}
@media (min-width:640px){ .profile-card--photo .profile-card__meta{padding:28px} }
.profile-card__meta{position:relative;margin-top:auto;padding-top:28px}
.profile-card__kicker{font-size:.75rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-200)}
.profile-card__name{margin-top:9px;font-size:1.5rem;font-weight:800;letter-spacing:-.025em}
.profile-card__line{margin-top:9px;font-size:.9375rem;font-weight:600;line-height:1.6;color:var(--brand-100)}

.hero-quals{margin-top:14px;font-size:1.0625rem;font-weight:800;color:var(--brand-700)}
.hero-role{margin-top:5px;font-size:1rem;font-weight:700;color:var(--muted)}

/* Two-up call-to-action panels */
.panel{border-radius:var(--r-lg);padding:24px}
@media (min-width:640px){ .panel{padding:32px} }
.panel--light{background:var(--white);box-shadow:var(--shadow-card)}
.panel--dark{
  position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(158deg, #1d2765, var(--brand-800) 60%, var(--brand-950));
  box-shadow:var(--shadow-soft);
}
.panel--dark .eyebrow{color:var(--brand-200)}
.panel__title{margin-top:12px;font-size:1.5rem;font-weight:800;letter-spacing:-.028em}
@media (min-width:640px){ .panel__title{font-size:1.75rem} }
.panel-list{display:grid;gap:11px;margin-top:22px;font-size:.9375rem;font-weight:600;color:#3a3c4b}
.panel-list li{
  display:flex;align-items:center;gap:11px;
  background:#f5f5f8;border-radius:var(--r-md);padding:15px;line-height:1.5;
}

/* 8.3 Video library --------------------------------------------------------- */
.toolbar{
  position:sticky;top:calc(var(--header-h) + env(safe-area-inset-top));z-index:30;
  margin-inline:calc(var(--gutter) * -1);
  padding:14px var(--gutter);
  background:rgba(248,249,252,.96);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-block:1px solid var(--line);
}
@media (min-width:768px){
  .toolbar{
    position:static;margin-inline:0;padding:16px;
    background:var(--white);border:1px solid var(--line-soft);
    border-radius:var(--r-lg);box-shadow:var(--shadow-card);
  }
}
.toolbar__row{display:flex;flex-direction:column;gap:12px}
@media (min-width:768px){ .toolbar__row{flex-direction:row;align-items:center;justify-content:space-between} }

.catbar{
  display:flex;gap:8px;
  overflow-x:auto;padding-bottom:2px;
  scrollbar-width:none;-ms-overflow-style:none;
  margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);
}
.catbar::-webkit-scrollbar{display:none}
@media (min-width:768px){ .catbar{flex-wrap:wrap;overflow:visible;margin-inline:0;padding-inline:0} }
.cat-btn{
  flex:0 0 auto;
  min-height:44px;padding:0 16px;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--white);
  font-size:.8125rem;font-weight:800;color:#3d3f4e;
  white-space:nowrap;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
.cat-btn:hover{background:var(--brand-50);border-color:var(--brand-200)}
.cat-btn.is-active{background:var(--brand-700);border-color:var(--brand-700);color:#fff}

.search-field{position:relative;flex:0 0 auto}
@media (min-width:768px){ .search-field{width:280px} }
.search-field .i{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  font-size:18px;color:#9496a4;pointer-events:none;
}
.search-input{
  width:100%;height:46px;
  padding:0 14px 0 42px;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:#f6f6f9;
  font-size:16px;font-weight:600;color:var(--ink);
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.search-input:focus{border-color:var(--brand-500);box-shadow:0 0 0 4px var(--brand-100);background:var(--white)}

.video-layout{display:grid;gap:22px;margin-top:22px}
@media (min-width:1024px){
  .video-layout{grid-template-columns:.8fr 1.2fr;align-items:start;gap:26px}
}
.video-layout > *{min-width:0}
.video-aside{order:2}
.video-main{order:1}
@media (min-width:1024px){
  .video-aside{order:1;position:sticky;top:calc(var(--header-h) + 24px)}
  .video-main{order:2}
}

.aside-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.aside-head h2{font-size:.9375rem;font-weight:800}
.aside-count{font-size:.8125rem;font-weight:700;color:var(--muted)}

.video-list{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  margin-inline:calc(var(--gutter) * -1);padding:0 var(--gutter) 8px;
  scrollbar-width:none;-ms-overflow-style:none}
.video-list::-webkit-scrollbar{display:none}
.video-list > *{flex:0 0 auto;width:84%;max-width:340px;scroll-snap-align:center}
@media (min-width:768px){
  .video-list{display:grid;gap:12px;overflow:visible;margin-inline:0;padding:0}
  .video-list > *{width:auto;max-width:none}
}
@media (min-width:1024px){ .video-list{max-height:640px;overflow-y:auto;padding-right:6px} }

.video-card{
  display:grid;grid-template-columns:112px 1fr;
  width:100%;
  overflow:hidden;text-align:left;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--white);
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
@media (min-width:1024px){ .video-card{grid-template-columns:128px 1fr} }
@media (hover:hover){ .video-card:hover{transform:translateY(-2px);border-color:var(--brand-300);box-shadow:var(--shadow-card)} }
.video-card.is-active{border-color:var(--brand-500);background:var(--brand-50);box-shadow:var(--shadow-card)}

.thumb{
  position:relative;
  aspect-ratio:16/9;
  background:linear-gradient(135deg,#dbdef0,#f0f1f9);
  overflow:hidden;
}
.thumb__art{position:absolute;inset:0;width:100%;height:100%;color:var(--brand-400);opacity:.7}
.thumb__play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:grid;place-items:center;
  height:40px;width:40px;
  border-radius:50%;
  background:rgba(255,255,255,.94);
  color:var(--brand-700);font-size:17px;
  box-shadow:0 6px 18px rgba(0,0,0,.14);
  transition:background-color .2s ease, color .2s ease;
}
.video-card.is-active .thumb__play{background:var(--brand-700);color:#fff}
.video-card__body{padding:14px}
.video-card__meta{
  display:flex;align-items:center;gap:7px;
  margin-bottom:7px;
  font-size:.6875rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--brand-700);
}
.video-card__meta span:last-child{color:var(--muted)}
.video-card__dot{color:#c6c8d2}
.video-card__title{font-size:.9375rem;font-weight:800;line-height:1.4;color:var(--ink)}

.player-frame{
  overflow:hidden;
  border-radius:var(--r-lg);
  background:#000;
  box-shadow:var(--shadow-soft);
}
.player-frame > div{aspect-ratio:16/9}
.player-frame iframe{width:100%;height:100%;border:0;display:block}

.video-meta{
  margin-top:18px;
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  background:var(--white);
  padding:22px;
  box-shadow:var(--shadow-card);
}
@media (min-width:640px){ .video-meta{padding:28px} }
.video-meta__tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.tag{padding:7px 12px;border-radius:var(--r-sm);font-size:.6875rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
.tag--brand{background:var(--brand-50);color:var(--brand-700)}
.tag--muted{background:#f1f1f4;color:var(--muted)}
.video-meta__title{margin-top:16px;font-size:1.5rem;font-weight:800;letter-spacing:-.03em;line-height:1.2}
@media (min-width:640px){ .video-meta__title{font-size:1.75rem} }
.video-meta__desc{margin-top:12px;font-size:1rem;line-height:1.75;color:var(--body);text-wrap:pretty}

.share-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}

.video-cta{
  display:grid;gap:16px;
  margin-top:22px;padding:20px;
  border-radius:var(--r-lg);
  background:linear-gradient(150deg, var(--brand-50), var(--white));
  box-shadow:inset 0 0 0 1px rgba(27,36,95,.10);
}
@media (min-width:640px){ .video-cta{grid-template-columns:1fr auto;align-items:center;gap:20px;padding:22px} }
.video-cta__title{font-size:.9375rem;font-weight:800;color:var(--brand-900)}
.video-cta__text{margin-top:6px;font-size:.875rem;line-height:1.65;color:var(--body)}

.empty-state{
  border:1px dashed var(--line);
  border-radius:var(--r-lg);
  background:var(--white);
  padding:32px;
  text-align:center;
  font-size:.9375rem;font-weight:600;color:var(--muted);
}


/* ==========================================================================
   12. Redesign layer
   Identity: the clinic wordmark (deep navy + antique gold).
   Structure: BrightSmile philosophy — photo-led, generous space, and one
   obvious booking path visible on every screen.
   ========================================================================== */

/* 12.1 Typography ---------------------------------------------------------- */
/* IBM Plex Sans for reading: clinical, open, and its figures stay legible in
   the HbA1c numbers and phone numbers this site is full of.
   Figtree for headings: warmer and rounder, so the doctor's voice sounds
   human while the evidence underneath it reads precise. */
body{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:17px;
  line-height:1.7;
  color:var(--ink);
  background:var(--white);
}
@media (min-width:768px){ body{font-size:16.5px} }

h1,h2,h3,h4,
.h1,.h2,.h3,
.brand-name,.footer-h,.panel__title,.bio-name,.doc-name,
.stat-card__figure,.stat-figure,.video-meta__title,.story__name,
.profile-card__name,.success h3{
  font-family:"Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

.h1{font-size:clamp(2.48rem,9.02vw,4.29rem);line-height:1.06;letter-spacing:-.032em;font-weight:800;max-width:17ch}
.h2{font-size:clamp(1.75rem,5.4vw,2.6rem);line-height:1.13;letter-spacing:-.026em;font-weight:800;margin-top:12px}
.h3{font-size:1.125rem;font-weight:700;letter-spacing:-.008em;line-height:1.42}
@media (min-width:640px){ .h3{font-size:1.1875rem} }

.lede{margin-top:18px;font-size:1.0625rem;font-weight:400;line-height:1.76;color:var(--body);max-width:60ch}
@media (min-width:768px){ .lede{font-size:1.125rem;line-height:1.78} }
.lede--hero{margin-top:22px}
@media (min-width:768px){ .lede--hero{font-size:1.1875rem;line-height:1.72} }
.prose{font-size:1rem;line-height:1.8;max-width:66ch}
.card__text{line-height:1.7}

/* Sentence case reads faster than tracked-out capitals, and the gold rule
   already does the labelling work. */
.eyebrow{
  text-transform:none;
  font-size:.875rem;
  font-weight:700;
  letter-spacing:.005em;
  color:var(--gold-700);
}
.eyebrow::before{background:var(--gold-500);opacity:1;height:2px;width:13px;border-radius:2px}
.section--dark .eyebrow,
.page-hero .eyebrow{color:var(--gold-400)}
.section--dark .eyebrow::before,
.page-hero .eyebrow::before{background:var(--gold-400)}

/* 12.2 Buttons ------------------------------------------------------------- */
.btn{border-radius:var(--r-pill);font-weight:700;letter-spacing:0;padding-inline:26px}
.btn--sm{border-radius:var(--r-pill);padding-inline:18px}
.btn--primary{
  background:var(--brand-600);
  box-shadow:0 6px 18px rgba(29,40,96,.26);
}
.btn--primary:hover{background:var(--brand-700)}
.btn--gold{background:var(--gold-500);color:var(--brand-950);box-shadow:0 6px 18px rgba(194,160,89,.34)}
.btn--gold:hover{background:var(--gold-400);color:var(--brand-950)}
.btn--outline{border:1.5px solid var(--brand-200);color:var(--brand-700);background:var(--white)}
.btn--outline:hover{background:var(--brand-50);border-color:var(--brand-400)}
.btn-icon{border-radius:var(--r-pill)}
.link-more{color:var(--brand-700)}
.inline-link{color:var(--brand-700)}

/* Gold outline is legible on both the white sections and the navy ones. */
:focus-visible{outline:3px solid var(--gold-500);outline-offset:3px}

/* 12.3 Header — dark, so the wordmark and the booking button lead ---------- */
@media (max-width:767px){ :root{--header-h:70px;--bar-h:calc(68px + env(safe-area-inset-bottom))} }
@media (min-width:768px){ :root{--header-h:84px;--bar-h:0px;--gutter:24px} }

.site-header{
  background:var(--brand-900);
  border-bottom:0;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:inset 0 -1px 0 rgba(194,160,89,.45), 0 8px 28px rgba(7,11,33,.18);
}
.header-inner{gap:18px}
.brand-logo{height:51px;max-width:min(238px, 72vw)}
@media (min-width:768px){ .brand-logo{height:56px;max-width:262px} }
@media (max-width:767px){ .brand-logo{max-height:calc(var(--header-h) - 20px)} }

.menu-btn{
  border:1px solid rgba(255,255,255,.26);
  background:rgba(255,255,255,.08);
  color:#fff;
  border-radius:var(--r-pill);
}
.menu-btn:hover{background:rgba(255,255,255,.16)}

/* Full navigation appears at 1024px instead of 1200px — laptop users were
   being pushed into the hamburger for no reason. */
@media (min-width:1024px){
  .nav{
    display:flex;flex:0 0 auto;align-items:center;gap:20px;
    font-size:.875rem;font-weight:600;color:#c3cbe6;
  }
  .nav a{white-space:nowrap;padding-block:8px;border-bottom:2px solid transparent;transition:color .2s ease,border-color .2s ease}
  .nav a:hover{color:#fff;border-bottom-color:rgba(194,160,89,.55)}
  .nav a[aria-current="page"]{color:#fff;border-bottom-color:var(--gold-500)}
  .menu-btn{display:none}
}
@media (min-width:768px){ .header-cta{display:inline-flex;font-size:.875rem;padding-inline:20px} }

.header-cta.btn--primary{
  background:var(--gold-500);color:var(--brand-950);
  box-shadow:0 6px 16px rgba(194,160,89,.30);
}
.header-cta.btn--primary:hover{background:var(--gold-400);color:var(--brand-950)}

/* 12.4 Section rhythm ------------------------------------------------------ */
.section{padding-block:64px}
@media (min-width:768px){ .section{padding-block:104px} }
.section--cream{background:var(--cream)}
.section--dark{background:var(--brand-900)}
.section--dark::after{
  background:
    radial-gradient(60% 55% at 10% 0%, rgba(59,75,149,.45), transparent 70%),
    radial-gradient(48% 55% at 92% 100%, rgba(194,160,89,.15), transparent 72%);
}
.section-head{max-width:58ch}
.cards{margin-top:40px;gap:16px}
@media (min-width:768px){ .cards{margin-top:52px;gap:22px} }
.split{gap:32px}
@media (min-width:1024px){ .split{gap:52px} }

/* 12.5 Cards --------------------------------------------------------------- */
.card{border-radius:var(--r-xl);padding:26px}
.card--bordered{border:1px solid var(--line)}
.card--hover:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
.icon-tile{height:54px;width:54px;flex-basis:54px;border-radius:16px}

/* 12.6 Imagery — the part the old build was missing entirely --------------- */
.media{
  position:relative;display:block;overflow:hidden;
  border-radius:var(--r-xl);
  background:var(--brand-100);
}
.media img{display:block;width:100%;height:100%;object-fit:cover}
.media--3x2{aspect-ratio:3/2}
.media--4x3{aspect-ratio:4/3}
.media--16x10{aspect-ratio:16/10}
.media--square{aspect-ratio:1/1}
.media--portrait{aspect-ratio:4/5}
.media--frame{box-shadow:var(--shadow-media)}
.media--frame::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(13,20,51,.12), inset 0 0 0 7px rgba(255,255,255,.55);
}
.media--tint::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(200deg, rgba(13,20,51,.04), rgba(13,20,51,.30));
}

.figure{margin:0}
.figure__cap{
  display:flex;align-items:flex-start;gap:11px;
  margin-top:14px;font-size:.8125rem;line-height:1.6;color:var(--muted);
}
.figure__cap::before{content:"";flex:0 0 11px;height:2px;margin-top:9px;border-radius:2px;background:var(--gold-500)}
.section--dark .figure__cap{color:var(--brand-200)}

/* Media card: photo sits flush at the top, copy below */
.card--media{padding:0;overflow:hidden}
.card--media .media{border-radius:0}
.card--media .card__body{padding:24px}

/* 12.7 Hero ---------------------------------------------------------------- */
.hero{
  position:relative;
  background-color:#fbfdf9;
  background-image:url("images/diabetes-hero-background.png");
  background-repeat:no-repeat;
  background-position:right top;
  background-size:42% auto;
}
.hero__art{opacity:0}
@media (max-width:767px){
  .hero{background-size:100% auto;background-position:center top;}
}

/* A gold rule under the promise, rather than a second colour in the headline */
.hero__accent{
  color:var(--brand-700);
  background:none;-webkit-text-fill-color:currentColor;
  box-shadow:inset 0 -.14em 0 var(--gold-300);
}
.hero-figure{position:relative}
.hero-figure .media{aspect-ratio:4/3}
@media (min-width:1024px){ .hero-figure .media{aspect-ratio:1/1} }
.hero-figure .doc-panel{position:relative;z-index:2;margin:-56px 14px 0}
@media (min-width:1024px){ .hero-figure .doc-panel{margin:-68px 24px 0} }

/* 12.8 Photographic bands -------------------------------------------------- */
/* Each band sets --band-img inline so the photo lives with the page, not
   buried in the stylesheet. */
.section--photo{
  background-color:var(--brand-950);
  background-image:
    linear-gradient(180deg, rgba(7,11,33,.93) 0%, rgba(7,11,33,.96) 100%),
    var(--band-img);
  background-size:auto, cover;
  background-position:center, center;
  background-repeat:no-repeat;
}

.page-hero{
  background-color:var(--brand-900);
  background-image:
    linear-gradient(100deg, rgba(7,11,33,.95) 0%, rgba(13,20,51,.88) 48%, rgba(13,20,51,.58) 100%),
    var(--band-img);
  background-size:auto, cover;
  background-position:center, center 30%;
  color:#fff;
}
.page-hero__art{opacity:.12}
.page-hero__inner{padding-block:36px 52px}
@media (min-width:768px){ .page-hero__inner{padding-block:56px 76px} }
.page-hero .h1,.page-hero .h1--page,.page-hero .hero-quals{color:#fff}
.page-hero .lede{color:#ccd3ea}
.page-hero .hero-role{color:var(--gold-400)}
.page-hero .back-link{color:#b9c2de}
.page-hero .back-link:hover{color:#fff}
.page-hero .btn--outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.38)}
.page-hero .btn--outline:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.6)}

/* 12.9 Footer — darker than the header, with the same gold hairline -------- */
.site-footer{
  background:var(--brand-950);
  padding-block:64px 28px;
  border-top:1px solid rgba(194,160,89,.38);
}
.site-footer::before{
  background:radial-gradient(75% 110% at 50% 0%, rgba(59,75,149,.30), transparent 72%);
}
@media (min-width:700px){ .footer-top{grid-template-columns:1fr 1fr} }
@media (min-width:1024px){ .footer-top{grid-template-columns:1.5fr 1.05fr 1fr;gap:52px} }
.footer-h{
  text-transform:none;
  font-size:1rem;font-weight:700;letter-spacing:-.01em;
  color:var(--gold-400);
}
.footer-logo-img{width:236px;max-width:100%;height:auto;display:block;margin-bottom:20px}
.footer-about{color:#b8c1dd;max-width:42ch}
.footer-contact,.footer-hours{color:#ccd3ea}
.footer-contact .i{color:var(--gold-400)}
.footer-bottom{color:#98a2c2;border-top-color:rgba(255,255,255,.14)}
.social{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);border-radius:var(--r-pill)}
.social:hover{background:var(--gold-500);color:var(--brand-950)}
.site-footer .btn--primary{background:var(--gold-500);color:var(--brand-950);box-shadow:none}
.site-footer .btn--primary:hover{background:var(--gold-400);color:var(--brand-950)}

/* 12.10 Sticky mobile bar — the booking button is the brightest thing on a
   phone screen, which is the whole point of the page. */
.actionbar{
  background:rgba(13,20,51,.97);
  border-top:1px solid rgba(194,160,89,.38);
}
.actionbar .btn-icon{border-color:rgba(255,255,255,.26);background:rgba(255,255,255,.08);color:#fff}
.actionbar .btn--primary{background:var(--gold-500);color:var(--brand-950)}
.actionbar .btn--primary:hover{background:var(--gold-400);color:var(--brand-950)}

/* 12.11 Drawer ------------------------------------------------------------- */
.drawer__head{border-bottom:1px solid var(--line)}
.drawer__links a{border-bottom:1px solid var(--line-soft)}
.drawer__actions .btn--primary{background:var(--gold-500);color:var(--brand-950)}
.drawer__actions .btn--primary:hover{background:var(--gold-400);color:var(--brand-950)}

/* 12.12 Forms -------------------------------------------------------------- */
.field{color:var(--brand-800)}
input,select,textarea{border-radius:var(--r-md)}

/* 12.13 Profile card ------------------------------------------------------- */
.profile-card--photo{border-radius:var(--r-xl);overflow:hidden}
.profile-card__photo{width:100%;height:100%;object-fit:cover}
.profile-card__kicker{color:var(--gold-400)}

/* 12.14 Final calibration -------------------------------------------------- */
/* The hero headline was running to four lines on a laptop. Slightly smaller
   type on a slightly wider measure lands it on three. */
.h1{font-size:clamp(2.15rem,6.6vw,3.35rem);max-width:21ch}
.h1--page{max-width:18ch}
@media (min-width:1024px){ .lede--hero{max-width:52ch} }

.footer-logo-img{width:250px}
@media (max-width:699px){ .footer-logo-img{width:220px} }

/* Keep long clinical words (hyperinsulinaemia, drnddiabetesreversalclinic)
   from pushing a column wider than its grid track on small screens. */
.footer-contact a,.card__text,.prose{overflow-wrap:break-word}

/* The portrait card carries text over the photo, so it needs a scrim —
   otherwise the credentials disappear the moment a real photo goes in. */
.profile-card--photo{display:flex;flex-direction:column;justify-content:flex-end;position:relative}
.profile-card__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.profile-card--photo .profile-card__meta{
  position:relative;z-index:2;padding:26px;
  background:linear-gradient(to top, rgba(7,11,33,.94) 18%, rgba(7,11,33,.60) 68%, rgba(7,11,33,0));
}
.profile-card__kicker{text-transform:none;letter-spacing:.005em;font-size:.8125rem;font-weight:700}

/* ==========================================================================
   13. BLOG — carousel, article layout, sidebar widgets
   ========================================================================== */

/* ---- 13.1 Card carousel (home page resources) ---------------------------- */
.carousel{position:relative}
.carousel__head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
}
.carousel__nav{display:flex;gap:10px;flex:0 0 auto}
.carousel__btn{
  width:46px;height:46px;flex:0 0 auto;
  display:grid;place-items:center;
  border:0;border-radius:var(--r-pill);cursor:pointer;
  background:var(--white);color:var(--brand-600);
  box-shadow:inset 0 0 0 1px var(--line), var(--shadow-card);
  transition:background .2s ease,color .2s ease,transform .2s ease,opacity .2s ease;
}
.carousel__btn .i{font-size:20px}
.carousel__btn:hover:not(:disabled){background:var(--brand-600);color:var(--white);transform:translateY(-2px)}
.carousel__btn:focus-visible{outline:2px solid var(--gold-500);outline-offset:3px}
.carousel__btn:disabled{opacity:.3;cursor:default;box-shadow:inset 0 0 0 1px var(--line)}
.carousel__btn--prev .i{transform:rotate(180deg)}

.carousel__track{
  display:grid;grid-auto-flow:column;grid-auto-columns:86%;
  gap:22px;margin-top:28px;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:6px 4px 14px;margin-inline:-4px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.carousel__track::-webkit-scrollbar{display:none}
.carousel__track > *{scroll-snap-align:start;height:100%;min-width:0}
@media (min-width:640px){ .carousel__track{grid-auto-columns:calc((100% - 22px) / 2)} }
@media (min-width:1024px){ .carousel__track{grid-auto-columns:calc((100% - 44px) / 3)} }
@media (prefers-reduced-motion:reduce){ .carousel__track{scroll-behavior:auto} }

/* ---- 13.2 Blog article + sidebar shell ---------------------------------- */
.blog-layout{display:grid;gap:40px;align-items:start}
@media (min-width:1024px){
  .blog-layout{grid-template-columns:minmax(0,1fr) 336px;gap:48px}
}
.blog-side{display:grid;gap:22px;min-width:0}
@media (min-width:1024px){
  .blog-side{position:sticky;top:calc(var(--header-h) + 20px)}
}

.breadcrumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-size:.875rem;color:var(--muted);
}
.breadcrumb a{color:var(--brand-600);font-weight:600}
.breadcrumb a:hover{color:var(--brand-800)}
.breadcrumb span[aria-current]{color:var(--body)}
.breadcrumb__sep{color:var(--line);font-weight:700}

.article__title{margin-top:14px}
.article-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;
  margin-top:18px;padding-bottom:22px;
  border-bottom:1px solid var(--line-soft);
  font-size:.875rem;color:var(--muted);
}
.article-meta__item{display:flex;align-items:center;gap:8px}
.article-meta__item .i{font-size:16px;color:var(--gold-600)}
.article-meta__author{font-weight:700;color:var(--ink)}

.article-hero{
  margin-top:26px;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow-media);background:var(--cream);
}
.article-hero img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.article-hero__cap{
  display:flex;gap:11px;padding:14px 18px;
  background:var(--brand-900);color:var(--brand-200);
  font-size:.8125rem;line-height:1.6;
}
.article-hero__cap::before{
  content:"";flex:0 0 11px;height:2px;margin-top:9px;
  border-radius:2px;background:var(--gold-500);
}

/* ---- 13.3 Article prose ------------------------------------------------- */
.prose-article{margin-top:30px;color:var(--body);font-size:1.0625rem;line-height:1.78}
.prose-article > * + *{margin-top:20px}
.prose-article h2{
  font-family:"Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:clamp(1.375rem,1.1rem + 1.1vw,1.75rem);
  font-weight:800;line-height:1.25;letter-spacing:-.015em;
  color:var(--ink);margin-top:40px;
}
.prose-article h3{
  font-family:"Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:1.1875rem;font-weight:800;color:var(--ink);margin-top:30px;
}
.prose-article ul,.prose-article ol{padding-left:22px;display:grid;gap:10px}
.prose-article li::marker{color:var(--gold-600);font-weight:700}
.prose-article a{color:var(--brand-600);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.prose-article a:hover{color:var(--brand-800)}
.prose-article strong{color:var(--ink);font-weight:700}

.callout{
  display:flex;gap:14px;padding:20px;
  border-radius:var(--r-md);background:var(--tint-amber);
  box-shadow:inset 0 0 0 1px rgba(194,160,89,.30);
  font-size:1rem;line-height:1.7;
}
.callout .i{font-size:21px;flex:0 0 auto;margin-top:2px;color:var(--gold-700)}
.callout b{color:var(--ink)}

.takeaways{
  padding:24px;border-radius:var(--r-lg);
  background:var(--brand-900);color:var(--brand-100);
}
.takeaways h2{color:var(--white);margin-top:0;font-size:1.25rem}
.takeaways ul{margin-top:14px;padding-left:20px;display:grid;gap:10px}
.takeaways li::marker{color:var(--gold-400)}

.video-block{margin-top:44px}
.video-wrap{
  position:relative;aspect-ratio:16/9;
  border-radius:var(--r-lg);overflow:hidden;
  background:var(--brand-900);box-shadow:var(--shadow-media);
}
.video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.author-card{
  display:grid;gap:16px;align-items:center;
  margin-top:44px;padding:22px;
  border-radius:var(--r-lg);background:var(--cream);
  box-shadow:inset 0 0 0 1px var(--line);
}
@media (min-width:560px){ .author-card{grid-template-columns:82px minmax(0,1fr)} }
.author-card__pic{
  width:82px;height:82px;border-radius:var(--r-pill);overflow:hidden;
  background:var(--brand-800);box-shadow:0 0 0 3px var(--white),0 0 0 5px var(--gold-500);
}
.author-card__pic img{width:100%;height:100%;object-fit:cover;object-position:top center}
.author-card__name{font-weight:800;color:var(--ink);font-size:1.0625rem}
.author-card__role{font-size:.875rem;color:var(--gold-700);font-weight:700;margin-top:2px}
.author-card__bio{font-size:.9375rem;line-height:1.7;margin-top:9px}

.post-nav{
  display:grid;gap:14px;margin-top:40px;
  padding-top:28px;border-top:1px solid var(--line-soft);
}
@media (min-width:640px){ .post-nav{grid-template-columns:1fr 1fr} }
.post-nav__link{
  display:grid;gap:5px;padding:18px;
  border-radius:var(--r-md);background:var(--white);
  box-shadow:inset 0 0 0 1px var(--line);
  transition:box-shadow .2s ease,transform .2s ease;
}
.post-nav__link:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--brand-300),var(--shadow-card)}
.post-nav__dir{font-size:.75rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--gold-700)}
.post-nav__t{font-weight:700;color:var(--ink);line-height:1.45}
.post-nav__link--next{text-align:right}

/* ---- 13.4 Sidebar widgets ---------------------------------------------- */
.widget{
  background:var(--white);border-radius:var(--r-lg);
  padding:22px;box-shadow:var(--shadow-card);
}
.widget__title{
  display:flex;align-items:center;gap:9px;
  font-family:"Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:1.0625rem;font-weight:800;color:var(--ink);
}
.widget__title::before{content:"";flex:0 0 11px;height:2px;border-radius:2px;background:var(--gold-500)}

/* search */
.side-search{position:relative;margin-top:14px}
.side-search input{
  width:100%;padding:14px 52px 14px 17px;
  border:0;border-radius:var(--r-pill);
  background:var(--cream);color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--line);
}
.side-search input::placeholder{color:var(--muted)}
.side-search input:focus{outline:2px solid var(--gold-500);outline-offset:2px}
.side-search__btn{
  position:absolute;right:5px;top:50%;transform:translateY(-50%);
  width:40px;height:40px;border:0;border-radius:var(--r-pill);cursor:pointer;
  display:grid;place-items:center;
  background:var(--brand-600);color:var(--white);
}
.side-search__btn:hover{background:var(--brand-800)}
.side-search__btn:focus-visible{outline:2px solid var(--gold-500);outline-offset:2px}

/* expandable categories */
.cat-list{display:grid;margin-top:8px}
.cat-item{border-top:1px solid var(--line-soft)}
.cat-item:first-child{border-top:0}
.cat-btn{
  width:100%;display:flex;align-items:center;gap:12px;
  padding:14px 0;background:none;border:0;cursor:pointer;
  font:inherit;font-weight:700;color:var(--ink);text-align:left;
}
.cat-btn:focus-visible{outline:2px solid var(--gold-500);outline-offset:2px}
.cat-btn__label{flex:1 1 auto;min-width:0}
.cat-count{
  flex:0 0 auto;min-width:28px;padding:3px 9px;
  border-radius:var(--r-pill);background:var(--cream);
  font-size:.75rem;font-weight:800;color:var(--muted);text-align:center;
}
.cat-sign{
  flex:0 0 auto;width:20px;height:20px;display:grid;place-items:center;
  color:var(--gold-600);font-weight:800;font-size:1.05rem;line-height:1;
  transition:transform .25s ease;
}
.cat-item.is-open .cat-sign{transform:rotate(45deg)}
.cat-item.is-open .cat-btn{color:var(--brand-600)}
.cat-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.cat-item.is-open .cat-panel{grid-template-rows:1fr}
.cat-panel > div{overflow:hidden}
.cat-panel a{
  display:block;margin-left:2px;padding:9px 0 9px 15px;
  border-left:2px solid var(--line);
  font-size:.9375rem;line-height:1.5;color:var(--body);
}
.cat-panel a:hover{color:var(--brand-600);border-left-color:var(--gold-500)}
.cat-panel a:last-child{padding-bottom:14px}
@media (prefers-reduced-motion:reduce){ .cat-panel{transition:none} }

/* clickable post headers */
.post-list{display:grid;margin-top:8px}
.post-link{
  display:grid;grid-template-columns:62px minmax(0,1fr);gap:13px;align-items:center;
  padding:13px 0;border-top:1px solid var(--line-soft);
}
.post-link:first-child{border-top:0}
.post-link__thumb{
  aspect-ratio:1/1;border-radius:var(--r-sm);overflow:hidden;background:var(--cream);
}
.post-link__thumb img{width:100%;height:100%;object-fit:cover}
.post-link__t{font-weight:700;font-size:.9375rem;line-height:1.42;color:var(--ink)}
.post-link:hover .post-link__t{color:var(--brand-600)}
.post-link__d{font-size:.8125rem;color:var(--muted);margin-top:4px}
.post-link[hidden]{display:none}
.post-list__empty{padding:16px 0 4px;font-size:.9375rem;color:var(--muted)}

/* ad slot */
.ad-slot{
  display:grid;place-items:center;align-content:center;gap:7px;
  padding:18px;text-align:center;border-radius:var(--r-lg);
  background:repeating-linear-gradient(135deg,var(--cream),var(--cream) 11px,#eaeefa 11px,#eaeefa 22px);
  box-shadow:inset 0 0 0 1px var(--line);
  color:var(--muted);font-size:.8125rem;line-height:1.6;
}
.ad-slot--mpu{min-height:250px}
.ad-slot--tall{min-height:420px}
.ad-slot__tag{
  font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:800;color:var(--brand-400);
}
.ad-slot__size{font-weight:700;color:var(--brand-600)}

/* sidebar booking CTA */
.widget--cta{background:var(--brand-900);color:var(--brand-100)}
.widget--cta .widget__title{color:var(--white)}
.widget--cta p{font-size:.9375rem;line-height:1.7;margin-top:11px}
.widget--cta .btn{margin-top:16px}

/* ---- 13.5 Small corrections -------------------------------------------- */
.carousel__nav[hidden]{display:none}
.card__body h3 a{color:inherit}
.card--hover:hover .card__body h3 a,
.card__body h3 a:hover{color:var(--brand-600)}
.post-link[aria-current="page"] .post-link__t{color:var(--brand-600)}
.post-link[aria-current="page"] .post-link__d::after{content:" · reading now";color:var(--gold-700);font-weight:700}

/* ---- 13.6 Live clinic map ---------------------------------------------- */
.info-map{
  position:relative;overflow:hidden;
  display:block;min-height:0;gap:0;place-items:stretch;text-align:left;
}
.info-map__frame{
  display:block;width:100%;height:220px;border:0;
  background:var(--brand-800);
}
@media (min-width:640px){ .info-map__frame{height:250px} }
.info-map__link{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 16px;
  border-top:1px solid rgba(255,255,255,.14);
  font-size:.9375rem;font-weight:700;color:var(--gold-400);
  transition:background .2s ease,color .2s ease;
}
.info-map__link:hover{background:rgba(255,255,255,.07);color:var(--gold-300)}
.info-map__link:focus-visible{outline:2px solid var(--gold-500);outline-offset:-3px}
.info-map__ext{font-size:15px;transform:rotate(-45deg)}

/* ==========================================================================
   14. REVISION 2.5 — logo, step numbers, image outlines, mobile polish
   Appended last so it wins over the earlier rules without editing them.
   ========================================================================== */

/* --- 14.1 Header: logo hard left on phones, 10% larger --------------------
   The mobile header used a 3-column grid with a phantom left spacer, which
   optically centred the logo. Two columns instead: logo left, menu right.  */
@media (max-width:767px){
  .site-header .wrap{width:calc(100% - 20px)}
  .header-inner{
    grid-template-columns:minmax(0,1fr) var(--tap-btn);
    gap:8px;
  }
  .brand{grid-column:1;justify-content:flex-start;flex:1 1 auto;min-width:0}
  .menu-btn{grid-column:2;margin-left:0}
  .brand-logo{
    height:51px;width:auto;
    max-width:min(238px, 72vw);
    max-height:calc(var(--header-h) - 12px);
  }
}

/* --- 14.2 Step numbers: dashed connector removed -------------------------
   The dash ran across a responsive grid, so it broke at every column wrap,
   and the 4th card never had one. The number now stands on its own with a
   gold hairline ring tying it back to the logo palette.                    */
.step-rule{display:none}
.step-head{
  display:flex;align-items:center;gap:12px;
  margin-bottom:16px;
}
.step-num{
  height:46px;width:46px;flex:0 0 46px;
  border-radius:14px;
  background:linear-gradient(150deg, var(--brand-200), var(--brand-300));
  box-shadow:
    inset 0 0 0 1px rgba(194,160,89,.55),
    0 6px 16px -8px rgba(7,11,33,.7);
  font-size:1.18rem;
  letter-spacing:-.01em;
}

/* --- 14.3 Images: no ring, no outline, anywhere --------------------------
   .media--frame painted a 7px white inner ring plus a 1px dark edge, which
   read as a grey outline around every framed photo. The soft drop shadow is
   kept so images still lift off the page.                                  */
.media--frame::after{content:none}
.media,
.media--frame,
.media--tint,
.media--16x10,
.media--4x3,
.media img{outline:none;border:0}

/* --- 14.4 Mobile polish --------------------------------------------------
   overflow-x:clip replaces the earlier overflow-x:hidden on body. hidden
   quietly turns the page into a scroll container and breaks position:sticky;
   clip does not.                                                           */
html,body{overflow-x:clip}

@media (max-width:767px){
  /* every button and icon button comfortably thumb-sized */
  .btn{min-height:48px}
  .btn-icon{min-height:48px;min-width:48px}

  /* the hero headline is 10% bigger now, so give it room to breathe */
  .hero__inner{padding-block:34px 44px}
  .h1{max-width:100%;text-wrap:balance}
  .lede--hero{max-width:100%}

  /* long medical terms and URLs must not push the page sideways */
  .h1,.h2,.h3,.lede,.card__text{overflow-wrap:break-word}

  /* respect the home-indicator area on notched phones */
  .actionbar__inner{padding-bottom:max(10px, env(safe-area-inset-bottom))}
}

@media (max-width:400px){
  .stat-card{min-width:min(80vw,260px)}
  .step-num{height:42px;width:42px;flex:0 0 42px;font-size:1.06rem}
}

/* ==========================================================================
   15. REVISION 2.6 — services slider + hero background slideshow
   ========================================================================== */

/* --- 15.1 Services cards: swipe on phones, grid from 640px ---------------
   Below 640px the three cards behave like the patient stories rail - one
   card per screen, snap scrolling, dots underneath. From 640px they go back
   to a normal grid and the dots disappear.                                 */
.rail--services > *{
  flex:0 0 min(82vw, 340px);
  scroll-snap-align:center;
}
.rail-wrap--services{margin-top:34px}

@media (min-width:640px){
  .rail-wrap--services{margin-inline:0}
  .rail--services{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
    overflow:visible;
    padding-inline:0;padding-bottom:0;
    scroll-snap-type:none;
  }
  .rail--services > *{flex:initial}
  .dots[data-dots="services"]{display:none}
}
@media (min-width:768px){
  .rail--services{grid-template-columns:repeat(3,1fr)}
}

/* --- 15.2 Hero background slideshow --------------------------------------
   Three photographs cross-fade behind the hero, one every 30 seconds. A
   scrim sits on top so the headline and body copy keep their contrast - the
   photos read as texture, not as the main event.

   To make the photos stronger or weaker, change the alpha values in
   .hero__scrim below. Lower alpha = more photo, less contrast.            */
.hero__bg{
  position:absolute;inset:0;z-index:0;
  overflow:hidden;pointer-events:none;
}
.hero__bg-img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  opacity:0;
  transition:opacity 1400ms ease-in-out;
}
.hero__bg-img.is-active{opacity:1}

/* Default (phones and tablets): the hero is a single stacked column, so the
   copy can sit anywhere. The scrim stays even and strong across the whole
   area - worst case, over a pure black photo, body text still measures
   4.9:1 and headings 11.8:1, both clear of WCAG AA. */
.hero__scrim{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(245,247,252,.94) 0%,
    rgba(245,247,252,.91) 55%,
    rgba(245,247,252,.84) 100%);
}

/* From 1024px the hero splits into text-left / figure-right, so the scrim can
   ease off towards the right where only the photo card sits. The text column
   never sees weaker than .88, which holds body copy at 5.4:1. */
@media (min-width:1024px){
  .hero__scrim{
    background:linear-gradient(103deg,
      rgba(245,247,252,.95) 0%,
      rgba(245,247,252,.88) 52%,
      rgba(245,247,252,.70) 100%);
  }
}
@media (prefers-reduced-motion: reduce){
  .hero__bg-img{transition:none}
}

/* ==========================================================================
   15. REVISION 2.7 — photo-forward hero
   The photos now read as photographs, not a wash. That means flipping the
   hero to light-on-dark: full-strength image, navy overlay, white copy.
   Scoped to .hero--photo so the About page hero is untouched.
   ========================================================================== */

.hero--photo{
  background:var(--brand-950);          /* holds the dark while photos load */
  color:#fff;
}
.hero--photo .hero__art{display:none}   /* ribbons only added noise over a photo */

/* --- 15.1 The overlay ----------------------------------------------------
   Phones stack into one column, so the copy can sit anywhere and the overlay
   has to stay strong everywhere. Worst case - a pure white photo underneath -
   white body copy still measures 7.3:1.                                    */
.hero--photo .hero__scrim{
  background:linear-gradient(180deg,
    rgba(7,11,33,.86)  0%,
    rgba(10,16,42,.78) 50%,
    rgba(13,20,51,.72) 100%);
}

/* From 1024px the hero splits 52.5% copy / 47.5% figure, so the overlay holds
   full strength across the copy column and eases off over the figure, where
   the photograph gets to show through properly. */
@media (min-width:1024px){
  .hero--photo .hero__scrim{
    background:linear-gradient(100deg,
      rgba(7,11,33,.90)  0%,
      rgba(10,16,42,.84) 46%,
      rgba(13,20,51,.60) 68%,
      rgba(13,20,51,.42) 100%);
  }
}

/* --- 15.2 Copy on the overlay ------------------------------------------- */
.hero--photo .h1{color:#fff}
.hero--photo .hero__accent{
  background:linear-gradient(96deg, var(--gold-300), var(--gold-500) 55%, var(--gold-300));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero--photo .lede--hero{color:rgba(255,255,255,.85)}
.hero--photo .badge{
  border-color:rgba(194,160,89,.45);
  background:rgba(10,16,42,.42);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:var(--gold-300);
}
.hero--photo .badge__dot{background:var(--gold-400)}

/* --- 15.3 Buttons --------------------------------------------------------
   The navy primary button would vanish into a navy overlay, so it goes gold.
   The outline button becomes a white ghost.                                */
.hero--photo .btn--primary{
  background:linear-gradient(180deg, var(--gold-400), var(--gold-600));
  color:#241a07;border-color:transparent;
  box-shadow:0 12px 26px -12px rgba(194,160,89,.85);
}
.hero--photo .btn--primary:hover{
  background:linear-gradient(180deg, var(--gold-300), var(--gold-500));
  color:#241a07;
}
.hero--photo .btn--outline{
  background:rgba(255,255,255,.10);color:#fff;
  border-color:rgba(255,255,255,.42);
}
.hero--photo .btn--outline:hover{
  background:rgba(255,255,255,.2);color:#fff;
  border-color:rgba(255,255,255,.6);
}
.hero--photo .btn:focus-visible{outline:3px solid var(--gold-300);outline-offset:3px}

/* --- 15.4 Cards floating over the photo ---------------------------------
   Deeper shadows so the white stat cards, the figure and the doctor panel
   read as layers above the image rather than sitting flat on it. No rings -
   image outlines stay removed, per the earlier pass.                       */
.hero--photo .stat-card{box-shadow:0 20px 44px -22px rgba(0,0,0,.72)}
.hero--photo .hero-figure .media{box-shadow:0 34px 74px -32px rgba(0,0,0,.85)}
.hero--photo .doc-panel{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.12),
    0 30px 66px -30px rgba(0,0,0,.8);
}

/* ==========================================================================
   16. REVISION 2.8 — render fixes found by screenshotting the built page
   ========================================================================== */

/* --- 16.1 The doubled gold headline -------------------------------------
   An earlier revision drew a gold rule under the promise line with an inset
   box-shadow. Rev 2.7 then made the same words a gold gradient, so the line
   rendered as well - gold text sitting on a gold bar. Text wins; bar goes.  */
.hero--photo .hero__accent{
  box-shadow:none;
  -webkit-text-fill-color:transparent;
}

/* --- 16.2 Hero height ---------------------------------------------------
   Measured at 1142px on a 1440x950 desktop and 1740px on a 390px phone, so
   the hero never fit one screen. The duplicate framed photo is gone from the
   markup; these reclaim the rest.                                          */
.hero--photo .hero__inner{padding-block:34px 40px}
@media (min-width:768px){ .hero--photo .hero__inner{padding-block:56px} }
@media (min-width:1024px){ .hero--photo .hero__inner{padding-block:64px} }

/* the panel used to ride up over the photo that is no longer there */
.hero--photo .hero-figure .doc-panel{margin:0}

/* --- 16.3 Doctor panel: tighter, and two columns of facts on phones ------ */
.hero--photo .doc-panel{padding:20px}
/* two columns from the smallest phone up - five stacked rows was the single
   biggest block in the mobile hero */
.hero--photo .doc-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.hero--photo .doc-facts li{font-size:.82rem;line-height:1.4}

/* the credentials paragraph ran to eight lines on a 390px screen */
@media (max-width:767px){
  .hero--photo .lede--hero{font-size:1.0625rem;line-height:1.6;margin-top:18px}
  .hero--photo .hero__actions{margin-top:24px}
}
@media (min-width:1024px){ .hero--photo .doc-panel{padding:24px} }

/* --- 16.4 Header sits on a dark hero now --------------------------------
   The gold hairline under the header is the only thing separating two very
   similar navies. Give it a little more presence.                          */
.hero--photo + *, .site-header{
  --header-edge:rgba(194,160,89,.55);
}
.site-header{
  box-shadow:inset 0 -1px 0 var(--header-edge), 0 10px 30px rgba(7,11,33,.28);
}

/* --- 16.5 .cat-btn collision --------------------------------------------
   Two unrelated components share the class .cat-btn: the pill tabs in the
   video library (section 13) and the accordion header in the blog sidebar
   (section 14). The blog rules are declared later in this file, so they were
   winning everywhere - the video tabs rendered as full-width stacked blocks
   instead of a row of pills. Scoping the pills to #categoryBar wins on id
   specificity without touching the blog sidebar.                           */
#categoryBar .cat-btn{
  width:auto;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 16px;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--white);
  font-size:.8125rem;font-weight:800;color:#3d3f4e;
  text-align:center;white-space:nowrap;
}
#categoryBar .cat-btn:hover{background:var(--brand-50);border-color:var(--brand-200)}
#categoryBar .cat-btn.is-active{
  background:var(--brand-700);border-color:var(--brand-700);color:#fff;
}

/* ==========================================================================
   17. REVISION 3.0 — overlay direction, sticky bar on scroll-up
   ========================================================================== */

/* --- 17.1 Overlay now reads light at the top, dark at the foot -----------
   Requested so more of the photograph survives at the top of the frame.
   Alphas are chosen against the worst case - a pure white photo underneath.
   At the lightest point white body copy still measures 5.5:1 on phones and
   4.8:1 on desktop against AA's 4.5:1, and the gold headline 5.6:1. Real
   photographs are darker than white, so live figures beat these.          */
.hero--photo .hero__scrim{
  background:linear-gradient(180deg,
    rgba(7,11,33,.20)  0%,
    rgba(9,14,38,.45)  35%,
    rgba(11,17,45,.75) 70%,
    rgba(13,20,51,1)   100%);
}
@media (min-width:1024px){
  .hero--photo .hero__scrim{
    background:linear-gradient(180deg,
      rgba(7,11,33,.20)  0%,
      rgba(9,14,38,.45)  40%,
      rgba(11,17,45,.75) 74%,
      rgba(13,20,51,1)   100%);
  }
}

/* --- 17.2 The sticky bar waits until it is wanted ------------------------
   The hero already carries a "Book Free Consultation" button, so a second
   one pinned to the bottom of the first screen is just noise. The bar now
   starts hidden and slides up only when the reader scrolls back up, and
   only once they are past the hero's own button. visibility:hidden keeps
   it out of the tab order while it is away.                               */
@media (max-width:767px){
  .actionbar{
    transform:translateY(calc(100% + 18px));
    opacity:0;visibility:hidden;
    transition:transform .3s cubic-bezier(.4,0,.2,1), opacity .24s ease,
               visibility 0s linear .3s;
  }
  .actionbar.is-visible{
    transform:none;opacity:1;visibility:visible;
    transition:transform .3s cubic-bezier(.4,0,.2,1), opacity .24s ease,
               visibility 0s linear 0s;
  }

  /* The WhatsApp button and the install prompt were parked above the bar.
     With the bar away they drop to the bottom, and ride back up with it. */
  .wa-fab{
    bottom:calc(20px + env(safe-area-inset-bottom));
    transition:bottom .3s cubic-bezier(.4,0,.2,1);
  }
  body.actionbar-on .wa-fab{bottom:calc(86px + env(safe-area-inset-bottom))}

  .install-card{
    bottom:calc(16px + env(safe-area-inset-bottom));
    transition:bottom .3s cubic-bezier(.4,0,.2,1);
  }
  body.actionbar-on .install-card{bottom:calc(78px + env(safe-area-inset-bottom))}
}

@media (prefers-reduced-motion: reduce){
  .actionbar, .actionbar.is-visible{
    transform:none;
    transition:opacity .01s linear, visibility 0s linear;
  }
  .wa-fab, .install-card{transition:none}
}

/* ==========================================================================
   18. REVISION 3.1 — doctor photo slot, calmer credential list
   ========================================================================== */

/* --- 18.1 The panel avatar is a photo slot now --------------------------
   It held a generic person icon. It now takes the real portrait, so
   replacing images/dr-nityanand-das-portrait.jpg updates the hero panel,
   the blog author cards and the About page in one go.                     */
.doc-avatar{height:68px;width:68px;flex:0 0 68px}
.doc-avatar img{
  width:100%;height:100%;
  object-fit:cover;object-position:top center;
  display:block;
}
.hero--photo .doc-avatar{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),
             0 0 0 1px rgba(194,160,89,.30);
}

/* --- 18.2 Five boxes become one quiet list ------------------------------
   Five filled tiles competed with each other and with the panel they sat
   in. Three facts, grouped inside a single container with hairline rules,
   read as one block instead of five.                                      */
.hero--photo .doc-facts{
  display:block;
  padding:2px 14px;
  border-radius:var(--r-md);
  background:rgba(255,255,255,.055);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
}
.hero--photo .doc-facts li{
  background:none;box-shadow:none;border-radius:0;
  padding:12px 0;
  font-size:.875rem;line-height:1.4;
  border-top:1px solid rgba(255,255,255,.10);
}
.hero--photo .doc-facts li:first-child{border-top:0}

/* ==========================================================================
   19. REVISION 3.1 — footer gap, logo alignment, calmer credential list
   (section 18 already existed; these rules refine it rather than repeat it)
   ========================================================================== */

/* --- 19.1 The white band under the footer -------------------------------
   body carried padding-bottom:var(--bar-h) to reserve room for the sticky
   action bar. Rev 3.0 made that bar hidden until you scroll up, so the
   reserve was left showing as 68px of cream below the dark footer. The
   reserve moves inside the footer: it now reads as footer padding, and it
   still keeps the copyright clear of the bar when the bar does appear.    */
@media (max-width:767px){
  body{padding-bottom:0}
  .site-footer{padding-bottom:calc(26px + var(--bar-h))}
}

/* --- 19.2 Footer logo to the same left edge as the header ----------------
   The header pulls its wrap in to a 10px gutter so the logo sits hard left.
   The footer keeps a 20px gutter for readable body text, so only the logo
   is pulled across to line up with the header mark above it.              */
/* superseded by --edge-gutter in section 21 */

/* --- 19.3 Credentials: a list, not a grid of chips -----------------------
   Five filled boxes read as five competing buttons. The panel already sits
   on a photograph, so more boxed surfaces just add noise. One column, no
   chrome, hairline between rows, gold glyphs to tie back to the logo.     */
.hero--photo .doc-facts{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  margin-top:16px;
  /* the earlier pass wrapped the list in its own tinted card. The panel is
     already a card; a card inside a card is the boxiness being complained
     about. Hairlines alone separate the rows. */
  background:none;
  box-shadow:none;
  padding:0;
  border-radius:0;
}
.hero--photo .doc-facts li{
  background:none;
  box-shadow:none;
  border-radius:0;
  padding:10px 0;
  gap:12px;
  font-size:.9rem;
  line-height:1.45;
  border-top:1px solid rgba(255,255,255,.12);
}
.hero--photo .doc-facts li:first-child{border-top:0;padding-top:2px}
.hero--photo .doc-facts li:last-child{padding-bottom:2px}
.hero--photo .doc-facts .icon-inline{
  height:20px;width:20px;flex:0 0 20px;
  background:none;
  border-radius:0;
  color:var(--gold-400);
  font-size:18px;
}

/* --- 19.4 Room for a real photograph of Dr. Das --------------------------
   Both slots are already <img> elements pointing at
   images/dr-nityanand-das-portrait.jpg - they were just too small for a
   face to read. Bigger, with a gold hairline so the portrait sits as a
   deliberate element rather than an avatar chip.                          */
.hero--photo .doc-avatar{
  height:92px;width:92px;flex:0 0 92px;
  border-radius:16px;
  background:rgba(255,255,255,.08);
  box-shadow:inset 0 0 0 1px rgba(194,160,89,.45);
}
.hero--photo .doc-avatar img{
  width:100%;height:100%;
  object-fit:cover;object-position:top center;
  display:block;
}
@media (max-width:479px){
  .hero--photo .doc-avatar{height:78px;width:78px;flex:0 0 78px}
}
.author-card__pic{width:96px;height:96px}
@media (max-width:479px){ .author-card__pic{width:84px;height:84px} }

/* ==========================================================================
   20. REVISION 3.2 — logos hard to the edge, third photo slot, bigger hero
   ========================================================================== */

/* --- 20.1 Logo flush to the left edge on phones --------------------------
   Rev 3.1 pulled both logos to a 10px gutter. The logo PNG has no built-in
   transparent margin, so 10px reads as 10px. Header and footer logos now
   start at 0. The menu button keeps its own right-hand breathing room, and
   the footer text keeps the 20px gutter so it stays readable.             */
:root{
  /* One number controls the phone edge spacing. 0 = flush to the screen
     edge. Raise it (e.g. 12px) and the logo and the menu button move in
     together, staying mirrored. */
  --edge-gutter:20px;
}
@media (max-width:767px){
  .site-header .wrap{width:100%}
  .header-inner{
    padding-left:var(--edge-gutter);
    padding-right:var(--edge-gutter);
  }
  .brand-logo{margin-left:0}
  /* footer text keeps the readable 20px gutter, the logo alone moves out */
  .footer-logo-img{margin-left:calc(var(--edge-gutter) - var(--gutter))}
}

/* --- 20.2 The About panel had an icon, not a photo -----------------------
   .bio-avatar held an inline SVG, which is why swapping the portrait file
   never changed it. It is an <img> now, pointing at the same portrait as
   the hero panel and the blog author cards - one file drives all three.   */
.bio-avatar{
  height:104px;width:104px;
  box-shadow:var(--shadow-card), 0 0 0 1px rgba(194,160,89,.45);
}
.bio-avatar img{
  width:100%;height:100%;
  object-fit:cover;object-position:top center;
  display:block;
}
@media (max-width:479px){ .bio-avatar{height:92px;width:92px} }

/* --- 20.3 Hero headline +20% on phones -----------------------------------
   Was clamp(2.15rem, 6.6vw, 3.35rem), which resolved to 34.4px on a 390px
   screen. Each stop is multiplied by 1.2.                                 */
@media (max-width:767px){
  .hero .h1{font-size:clamp(2.58rem, 7.92vw, 4.02rem)}
}

/* --- 20.4 About panel: same five-box problem, same fix -------------------
   .bio-facts used the identical treatment to the hero credential list -
   five filled tiles stacked inside a panel that is already a card. Matched
   to section 19.3 so both panels read the same way: hairline rows, gold
   glyphs, no nested boxes.                                                */
.bio-facts{gap:0;margin-top:20px}
.bio-facts li{
  background:none;
  box-shadow:none;
  border-radius:0;
  padding:12px 0;
  border-top:1px solid var(--line-soft);
}
.bio-facts li:first-child{border-top:0}
.bio-facts .icon-inline{
  height:20px;width:20px;flex:0 0 20px;
  margin-top:2px;
  background:none;
  border-radius:0;
  color:var(--gold-600);
  font-size:18px;
}

/* ==========================================================================
   21. REVISION 3.4 — logo scale on phones, hero overlay re-balanced
   ========================================================================== */

/* --- 21.1 Phone logos 10% smaller ---------------------------------------
   Measured before the change: header 141.9 x 51.0, footer 220 x 79.
   Header height 51px -> 45.9px, footer width 220px -> 198px. Width and
   height both follow because each logo keeps its aspect ratio.            */
@media (max-width:767px){
  .brand-logo{height:45.9px}
  .footer-logo-img{width:198px}
}

/* --- 21.2 Hero overlay: 80% light at the top, fully dark at the foot -----
   Read as perceived lightness, so the dark navy overlay runs at 20% alpha
   at the top and 100% at the foot.

   The whole ramp is driven by --scrim-top. The two middle stops are that
   value plus .28 and plus .56, so raising one number lifts the entire
   gradient while the bottom stays fully dark.

     --scrim-top:.20   as requested - 80% light at the top
     --scrim-top:.38   the readable setting - see the note in CHANGES.md   */
.hero--photo .hero__scrim{
  --scrim-top:.20;
  background:linear-gradient(180deg,
    rgba(7,11,33,var(--scrim-top))                0%,
    rgba(9,14,38,calc(var(--scrim-top) + .28))   35%,
    rgba(11,17,45,calc(var(--scrim-top) + .56))  70%,
    rgba(13,20,51,1)                            100%);
}

/* ==========================================================================
   21. REVISION 3.4 — 20px edges, smaller phone logo, lighter hero top
   ========================================================================== */

/* --- 21.1 Logo 10% smaller on phones, header and footer ------------------ */
@media (max-width:767px){
  .brand-logo{
    height:46px;                        /* was 51px */
    max-width:min(214px, 65vw);         /* was min(238px, 72vw) */
    max-height:calc(var(--header-h) - 16px);
  }
}
@media (max-width:699px){
  .footer-logo-img{width:198px}         /* was 220px */
}
@media (min-width:700px) and (max-width:767px){
  .footer-logo-img{width:225px}         /* was 250px */
}

/* --- 21.2 Hero scrim: as requested -------------------------------------
   Live values are set in sections 15/17: light at the very top (alpha .20)
   ramping to solid navy (alpha 1) at the foot.

   MEASURED WARNING. Against the worst case - a photograph that is pure
   white behind the headline - the white part of the headline falls to
   1.80:1 and the paragraph under it to 2.55:1, on a 390px screen. WCAG AA
   wants 3:1 for large text and 4.5:1 for body. The gold half of the
   headline is fine (11.6:1) because gold is dark against a light photo; it
   is the white words that disappear.

   To fix it without losing the intent, delete the two comment markers
   below. The top stays clearly lighter than it was before this revision
   (.50 against the old .62) and the foot stays fully dark at 1, but the
   headline measures 4.20:1 and the paragraph 5.69:1 - both pass.        */
/*
.hero--photo .hero__scrim{
  background:linear-gradient(180deg,
    rgba(7,11,33,.50)  0%,
    rgba(9,14,38,.68)  35%,
    rgba(11,17,45,.86) 70%,
    rgba(13,20,51,1)   100%);
}
@media (min-width:1024px){
  .hero--photo .hero__scrim{
    background:linear-gradient(180deg,
      rgba(7,11,33,.50)  0%,
      rgba(9,14,38,.68)  40%,
      rgba(11,17,45,.86) 74%,
      rgba(13,20,51,1)   100%);
  }
}
*/

/* ==========================================================================
   22. REVISION 4.0 — Medical typography system
   A single scale for the whole site, in two ranges split at the 768px
   breakpoint so the phone and desktop bands are exact rather than implied.

   ROLE                 DESKTOP      MOBILE       WEIGHT  LH    COLOUR
   Hero headline (H1)   32-36px      26-30px      700     1.25  #111
   Hero sub-headline    20-24px      18-20px      600     1.40  #333
   Supporting copy      16-18px      16-18px      400     1.50  #444
   Sub-text / tagline   15px         15px         400     1.45  #333
   Body copy            17px         17px         400     1.50  #222
   Captions / notes     14px         13px         300     1.45  #555

   Every size is rem, so the scale follows the reader's own browser text
   size instead of ignoring it. The vw term inside each clamp() only
   supplies the slope between the two rem endpoints.

   Fonts: Source Sans 3 carries the headings, Inter carries everything
   read at length. Inter's tall x-height keeps 15px sub-text legible and
   its tabular figures keep HbA1c values and phone numbers aligned.
   ========================================================================== */

/* --- 22.1 Root: rem now means what the reader set ------------------------ */
html{
  font-size:100%;                 /* 16px default, honours browser text size */
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

/* --- 22.2 Colour tokens --------------------------------------------------
   Replaces the navy-tinted neutrals with the specified greys. The old
   --muted (#66708a) measured 4.61:1 on the cream sections - technically
   AA, but it was the light grey the brief asks us to drop. Measured on
   #ffffff / #f5f7fc:
     #111  18.88 / 17.62      #222  15.91 / 14.84
     #333  12.63 / 11.79      #444   9.74 /  9.09
     #555   7.46 /  6.96
   All clear AA (4.5:1); all but #555 clear AAA (7:1) on both grounds. */
:root{
  --t-headline:#111111;   /* H1, H2, card titles */
  --t-subhead:#333333;    /* hero sub-headline, sub-text, taglines */
  --t-support:#444444;    /* supporting copy, ledes, card body */
  --t-body:#222222;       /* body copy, article prose */
  --t-caption:#555555;    /* captions, notes, field hints, meta */

  /* Legacy tokens repointed so every existing component inherits the
     system without touching hundreds of selectors. */
  --ink:var(--t-headline);
  --body:var(--t-support);
  --muted:var(--t-caption);
}

/* --- 22.3 Base ----------------------------------------------------------- */
body{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:1.0625rem;            /* 17px - inside the 16-18px body band */
  font-weight:400;
  line-height:1.5;
  color:var(--t-body);
  font-synthesis-weight:none;     /* no faux bold if a weight fails to load */
}
@media (min-width:768px){ body{font-size:1.0625rem} }

/* 1rem keeps the iOS zoom-on-focus guard while still scaling up for a
   reader who has raised their default text size. */
input,select,textarea,button{font-family:inherit;font-size:max(1rem,16px)}

/* --- 22.4 Hero headline (H1) --------------------------------------------
   Mobile  26px @360 -> 30px @767
   Desktop 32px @768 -> 36px @1200 and up                               */
h1,.h1,.page-hero h1{
  font-family:"Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:clamp(1.625rem, 1.404rem + 0.98vw, 1.875rem);
  font-weight:700;
  line-height:1.25;
  letter-spacing:-.015em;
  color:var(--t-headline);
  max-width:24ch;
  text-wrap:balance;
}
@media (min-width:768px){
  h1,.h1,.page-hero h1{
    font-size:clamp(2rem, 1.556rem + 0.926vw, 2.25rem);
  }
}

/* --- 22.5 Section headings ----------------------------------------------
   The brief specifies six roles but no H2/H3, and the site needs both.
   These are derived from the same scale so the ladder stays unbroken:
   H1 36 > H2 28 > hero sub-head 24 > H3 20 > body 17.                   */
h2,.h2{
  font-family:"Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:clamp(1.375rem, 1.209rem + 0.74vw, 1.5rem);   /* 22 -> 24px */
  font-weight:700;
  line-height:1.28;
  letter-spacing:-.012em;
  color:var(--t-headline);
  margin-top:12px;
  text-wrap:balance;
}
@media (min-width:768px){
  h2,.h2{ font-size:clamp(1.5rem, 1.222rem + 0.579vw, 1.75rem); }  /* 24 -> 28px */
}

h3,.h3{
  font-family:"Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:1.125rem;             /* 18px */
  font-weight:600;
  line-height:1.4;
  letter-spacing:-.006em;
  color:var(--t-headline);
}
@media (min-width:768px){ h3,.h3{font-size:1.25rem} }   /* 20px */

h4,.h4{
  font-family:"Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:1.0625rem;font-weight:600;line-height:1.4;color:var(--t-headline);
}

/* --- 22.6 Hero sub-headline ---------------------------------------------
   Mobile 18 -> 20px, desktop 20 -> 24px.                                */
.lede--hero,
.page-hero .lede,
.hero__sub{
  font-size:clamp(1.125rem, 1.014rem + 0.49vw, 1.25rem);
  font-weight:600;
  line-height:1.4;
  color:var(--t-subhead);
  max-width:56ch;
  text-wrap:pretty;
}
@media (min-width:768px){
  .lede--hero,
  .page-hero .lede,
  .hero__sub{
    font-size:clamp(1.25rem, 0.972rem + 0.579vw, 1.5rem);
    line-height:1.4;
  }
}

/* --- 22.7 Supporting copy ------------------------------------------------
   16 -> 18px on both, the intro paragraph under a section heading and the
   body of every card.                                                    */
.lede,
.prose,
.card__text,
.panel__text,
.faq-a,
.info-list p,
.feature p{
  font-size:clamp(1rem, 0.958rem + 0.19vw, 1.125rem);
  font-weight:400;
  line-height:1.5;
  color:var(--t-support);
  text-wrap:pretty;
}
.lede{margin-top:16px;max-width:64ch}
.prose{margin-top:18px;max-width:68ch}

/* --- 22.8 Sub-text / tagline --------------------------------------------
   15px on both bands - inside the 14-16px desktop range and at or above
   the 15px mobile floor, so one value serves both.                       */
.eyebrow,
.brand-tag,
.badge,
.article-meta,
.article-meta__item,
.stat-card__label,
.stat-note,
.bio-role,
.hero-role,
.story__meta,
.form-card__sub,
.post-nav__t,
.aside-count,
.tag,
.tag-rail{
  font-size:.9375rem;
  font-weight:400;
  line-height:1.45;
  letter-spacing:0;
}
.eyebrow,
.brand-tag,
.article-meta,
.article-meta__item,
.stat-card__label,
.bio-role,
.hero-role{ color:var(--t-subhead) }

/* The eyebrow stays gold - it is brand, not decoration - but moves from
   --gold-700 (4.71:1 on cream, a thin pass) to --gold-800 (6.70:1). */
.eyebrow{ color:var(--gold-800); font-weight:600 }
.section--dark .eyebrow,
.page-hero .eyebrow,
.hero--photo .eyebrow{ color:var(--gold-300) }

/* --- 22.9 Body copy ------------------------------------------------------
   Article prose and any long-form running text.                          */
.prose-article,
.prose-article p,
.prose-article li,
.callout,
.takeaways li{
  font-size:1.0625rem;            /* 17px */
  font-weight:400;
  line-height:1.5;
}
.prose-article,
.prose-article p,
.prose-article li{ color:var(--t-body) }
.prose-article > * + *{margin-top:18px}
.prose-article strong{color:var(--t-headline);font-weight:700}

.prose-article h2{
  font-size:clamp(1.375rem, 1.209rem + 0.74vw, 1.75rem);
  font-weight:700;line-height:1.28;color:var(--t-headline);margin-top:36px;
}
.prose-article h3{
  font-size:1.25rem;font-weight:600;line-height:1.4;
  color:var(--t-headline);margin-top:28px;
}

/* --- 22.10 Captions / notes ---------------------------------------------
   Light 300 at 14px desktop / 13px mobile, as specified. The desktop size
   is set at the top of the 12-14px range on purpose: this audience skews
   older and diabetic retinopathy is a complication of the condition the
   clinic treats, so the smallest permitted size is the wrong end of the
   range to sit at. See the note in CHANGES.md about the 300 weight.      */
.fine,
.caption,
.field-hint,
.form-consent,
.privacy-note,
.stat-source,
.footer-fine,
.post-link__d,
.install-card__sub,
.wa-pop__tx small,
.post-list__empty{
  font-size:.8125rem;             /* 13px - mobile floor */
  font-weight:300;
  line-height:1.45;
  color:var(--t-caption);
}
@media (min-width:768px){
  .fine,
  .caption,
  .field-hint,
  .form-consent,
  .privacy-note,
  .stat-source,
  .footer-fine,
  .post-link__d,
  .install-card__sub,
  .wa-pop__tx small,
  .post-list__empty{ font-size:.875rem }   /* 14px */
}
.fine{margin-top:14px;max-width:62ch}

/* --- 22.11 Weight normalisation -----------------------------------------
   The stylesheet carried 62 instances of font-weight:800 from earlier
   revisions. The system tops out at 700, and 800 is no longer loaded, so
   these would otherwise be synthesised. Brought down to the system's
   bold.                                                                  */
.h1,.h2,.h3,
.brand-name,.footer-h,.panel__title,.bio-name,.doc-name,
.stat-card__figure,.stat-figure,.video-meta__title,.story__name,
.profile-card__name,.success h3,
.btn,.btn--sm,.link-more,.inline-link,
.skip-link,.stepper__item,.post-nav__dir,.widget__title,
.cat-btn,.side-cta__t,.author-card__name,
.takeaways h2,.prose-article strong{ font-weight:700 }

.btn,.btn--sm,.link-more{ letter-spacing:0 }

/* --- 22.12 Dark grounds --------------------------------------------------
   The grey scale is for light backgrounds. Anything sitting on navy or on
   the hero photograph keeps its light treatment - these selectors are more
   specific than the role rules above, so they win on their own, but they
   are restated here so the intent is visible in one place.               */
.section--dark h1,.section--dark h2,.section--dark h3,
.section--dark .h1,.section--dark .h2,.section--dark .h3,
.panel--dark h3,.panel--dark .h3{ color:#fff }
.section--dark .lede,
.panel--dark .lede,
.section--dark .prose{ color:#e3e7f6 }      /* 14.62:1 on --brand-900 */
.section--dark .fine,
.section--dark .caption{ color:#c5cdea }    /* 11.41:1 on --brand-900 */

.hero--photo .h1,.hero--photo h1{ color:#fff }
.hero--photo .lede--hero{ color:rgba(255,255,255,.92) }

.takeaways h2{color:#fff}
.takeaways li{color:var(--brand-100)}

/* --- 22.13 Figures -------------------------------------------------------
   Inter's tabular figures stop HbA1c readings, doses and phone numbers
   from shifting width between digits.                                    */
.stat-card__figure,.stat-figure,
.article-meta,.post-link__d,
.info-list,.doc-facts,.bio-facts,
input[type="tel"],input[type="number"],
table,.table{ font-variant-numeric:tabular-nums }

/* --- 22.14 Long-form measure --------------------------------------------
   Line length is half of legibility. Nothing read at length runs past
   about 70 characters.                                                    */
.prose-article{max-width:70ch}
.section-head{max-width:60ch}
.section-head--wide{max-width:70ch}

/* --- 22.15 Respect reduced motion on text transitions ------------------- */
@media (prefers-reduced-motion:reduce){
  .link-more .i,.back-link .i{transition:none}
}

/* --- 22.16 Corrections found while mapping the scale onto the markup -----
   Three things the audit turned up that the role rules above do not reach
   on their own.                                                           */

/* (a) .h1--page (the About/Video page hero) carried its own
   clamp(2.25rem, 9vw, 3.9rem) - up to 62px, nearly double the 36px cap.
   It sits on the same 0,1,0 specificity as .h1, so source order alone was
   deciding it. Named explicitly so it cannot drift back. */
.h1--page,
.article__title{
  font-family:"Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:clamp(1.625rem, 1.404rem + 0.98vw, 1.875rem);
  font-weight:700;line-height:1.25;letter-spacing:-.015em;
  max-width:24ch;
}
@media (min-width:768px){
  .h1--page,
  .article__title{ font-size:clamp(2rem, 1.556rem + 0.926vw, 2.25rem) }
}

/* (b) MEASURED FAILURE, now fixed. .ad-slot__tag used --brand-400
   (#6274b8): 4.46:1 on white and 4.16:1 on the cream sections. WCAG AA
   wants 4.5:1 for normal text, so it failed on both grounds. Moved to
   --brand-600 (11.37:1 / 10.61:1). .author-card__role sits on a cream
   card at --gold-700 (4.71:1, a pass by 0.21) and moves to --gold-800
   (6.70:1) for the same reason the eyebrow did. */
.ad-slot__tag{ color:var(--brand-600) }
.author-card__role{ color:var(--gold-800) }

/* (c) The micro-labels ran at .6875rem (11px), under the 12px floor the
   scale sets for the smallest text on the page. */
.ad-slot__tag,
.tag-cat,
.post-nav__dir,
.aside-kicker{
  font-size:.8125rem;             /* 13px on phones, per the mobile floor */
  letter-spacing:.06em;
}
@media (min-width:768px){
  .ad-slot__tag,
  .tag-cat,
  .post-nav__dir,
  .aside-kicker{ font-size:.75rem }   /* 12px */
}

/* (d) Remaining text classes slotted into their role. */
.card__body p,
.story__quote,
.info-body,
.drawer__body p,
.video-meta__desc{
  font-size:1rem;font-weight:400;line-height:1.5;
}
.stat-label,
.info-label,
.article-meta__author,
.author-card__role,
.install-card__title,
.form-card__title,
.video-meta__tags,
.cat-btn__label{
  font-size:.9375rem;font-weight:600;line-height:1.45;
}
.note,.hint,.doc-note,.install-card__sub,.profile-card__meta{
  font-size:.8125rem;font-weight:300;line-height:1.45;color:var(--t-caption);
}
@media (min-width:768px){
  .note,.hint,.doc-note,.install-card__sub,.profile-card__meta{font-size:.875rem}
}
.pullquote{font-size:1.125rem;font-weight:600;line-height:1.5}
.pullquote footer{font-weight:600;font-size:.9375rem}

/* .info-label / .info-body live on the navy consultation band. */
.section--dark .info-label{color:#fff}
.section--dark .info-body{color:var(--brand-100)}

/* --- 22.17 Specificity fixes found by measuring the rendered pages -------
   Both of these were caught by reading computed styles out of a headless
   browser at 390px and 1440px rather than by reading the CSS.             */

/* (a) Revision 20.3 set `.hero .h1` to clamp(2.58rem, 7.92vw, 4.02rem) on
   phones - 41.3px measured on a 390px screen against the scale's 26-30px
   band. At 0,2,0 it outranks the `h1,.h1` role rule, so the role rule was
   never applying to the home page hero. Matched here at equal specificity
   and later in source order. */
.hero .h1,
.hero h1,
.page-hero .h1,
.page-hero .h1--page{
  font-size:clamp(1.625rem, 1.404rem + 0.98vw, 1.875rem);
  line-height:1.25;
  font-weight:700;
  letter-spacing:-.015em;
  max-width:24ch;
}
@media (min-width:768px){
  .hero .h1,
  .hero h1,
  .page-hero .h1,
  .page-hero .h1--page{
    font-size:clamp(2rem, 1.556rem + 0.926vw, 2.25rem);
  }
}

/* (b) The home page hero paragraph carries `class="lede lede--hero"`, so
   the supporting-copy rule in 22.7 and the hero sub-headline rule in 22.6
   both matched at 0,1,0 - and 22.7 sits later, so supporting copy won and
   the sub-headline rendered 17px/400 instead of 18-20px/600. Raised above
   a single class so the more specific role wins regardless of order. */
.lede.lede--hero,
.hero .lede--hero,
.page-hero .lede{
  font-size:clamp(1.125rem, 1.014rem + 0.49vw, 1.25rem);
  font-weight:600;
  line-height:1.4;
  color:var(--t-subhead);
  max-width:56ch;
}
@media (min-width:768px){
  .lede.lede--hero,
  .hero .lede--hero,
  .page-hero .lede{
    font-size:clamp(1.25rem, 0.972rem + 0.579vw, 1.5rem);
    line-height:1.4;
  }
}
.hero--photo .lede.lede--hero{color:rgba(255,255,255,.92)}
.section--dark .lede.lede--hero{color:#e3e7f6}

/* --- 22.18 Dark-ground corrections --------------------------------------
   The contrast sweep (1,143 text nodes, two viewports, five pages) caught
   three places where the role rules above landed on the wrong ground.
   All three were introduced by this revision.                             */

/* (a) .page-hero is navy (rgb 13,20,51), not the light gradient its
   original rule declared - a later revision repainted it. The hero
   sub-headline rule was putting #333 on it: 1.43:1 measured. */
.page-hero .lede,
.page-hero .lede--hero,
.page-hero .lede.lede--hero,
.page-hero .prose{ color:#e3e7f6 }          /* 14.62:1 on navy */
.page-hero .fine,
.page-hero .caption{ color:#c5cdea }        /* 11.41:1 on navy */

/* (b) White cards live inside the dark sections - the booking form, the
   stat cards, the profile frame. The blanket `.section--dark h1,h2,h3
   {color:#fff}` in 22.12 turned their titles white on white: 1.00:1
   measured on .form-card__title. Light cards get the light-ground scale
   back, at a higher specificity than the blanket rule. */
.section--dark .form-card,
.section--dark .stat-card,
.section--dark .profile-frame,
.hero--photo .form-card,
.hero--photo .stat-card{ color:var(--t-body) }

.section--dark .form-card h1,.section--dark .form-card h2,
.section--dark .form-card h3,.section--dark .form-card h4,
.section--dark .form-card .h1,.section--dark .form-card .h2,
.section--dark .form-card .h3,.section--dark .form-card__title,
.section--dark .stat-card h1,.section--dark .stat-card h2,
.section--dark .stat-card h3,.section--dark .stat-card .h3,
.section--dark .stat-card__figure,.section--dark .stat-figure,
.section--dark .profile-frame h3,.section--dark .profile-card__name,
.hero--photo .stat-card__figure,.hero--photo .stat-figure{
  color:var(--t-headline);
}
.section--dark .form-card .form-card__sub,
.section--dark .form-card .field-hint,
.section--dark .form-card .form-consent,
.section--dark .stat-card__label,
.hero--photo .stat-card__label{ color:var(--t-caption) }

.section--dark .form-card label,
.section--dark .form-card .control,
.section--dark .form-card .radio{ color:var(--t-body) }

/* (c) .privacy-note and the consent line sit in the translucent .info-panel
   over navy, where the caption grey measured 2.61:1. They keep the light
   treatment they had before this revision. */
.info-panel .privacy-note,
.info-panel .form-consent,
.info-panel p,
.info-panel li,
.section--dark .info-panel .fine{ color:var(--brand-100) }
.info-panel .privacy-note .i{ color:var(--brand-300) }

/* (d) The two other dark blocks: the article takeaways panel and the dark
   sidebar CTA widget. */
.takeaways,.takeaways li,.takeaways p{color:var(--brand-100)}
.takeaways h2,.takeaways h3{color:#fff}
.widget--cta,.widget--cta p,.widget--cta li{color:var(--brand-100)}
.widget--cta .widget__title{color:#fff}

/* --- 22.19 Hero copy over photographs -----------------------------------
   The one contrast case the sweep has to exclude, because the ground is a
   photograph that changes every 30 seconds.

   Revision 21.2 left a measured note in this file: against the worst-case
   photograph - one that is pure white behind the copy - the white headline
   fell to 1.80:1 and the paragraph to 2.55:1. AA wants 3:1 for large text
   and 4.5:1 for normal. The fix offered at the time was to darken the whole
   scrim from .20 to .50, which would have undone the "80% light at the top"
   the hero was asked for.

   This does it locally instead. The page-wide scrim stays at .20, so the
   photograph keeps its brightness everywhere the eye actually looks at it;
   a feathered navy pad sits behind the copy block only. Measured over a
   pure-white photo, combined alpha .70:

     white headline   7.36:1   (needs 3:1,   large text)
     white paragraph  7.36:1   (needs 4.5:1, 18px/600 is not "large")
     gold accent      4.74:1   (needs 3:1)

   To remove it, delete this block - nothing else depends on it.          */
.hero--photo .hero__inner > .reveal:first-child{ position:relative }

.hero--photo .hero__inner > .reveal:first-child::before{
  content:"";
  position:absolute;
  inset:-36px -22px;
  z-index:-1;
  border-radius:var(--r-xl);
  pointer-events:none;
  /* Feathered top and bottom only: the 0-9% and 91-100% bands are the
     36px margins, so the copy itself always sits on the full .62. */
  background:linear-gradient(180deg,
    rgba(7,11,33,0)    0%,
    rgba(7,11,33,.66)  4%,
    rgba(7,11,33,.66) 96%,
    rgba(7,11,33,0)  100%);
}

/* From 1024px the copy is the left column, so the pad feathers out to the
   right instead and lets the photograph read clean on the figure side. */
@media (min-width:1024px){
  .hero--photo .hero__inner > .reveal:first-child::before{
    /* MEASURED FIX. This was `inset:-40px -18% -40px -28px` with the solid
       stop at 58%. Percentage insets resolve against the containing block -
       the 592px copy column - not the viewport, so the pad came out 727px
       wide and the 58% stop landed at x=523, mid-headline. The gold half of
       the H1 was sitting in the feather and measured 2.52:1 against a 3:1
       bar. Fixed inset, and the solid zone now runs to 86% so the whole
       feather falls to the right of the text. */
    inset:-40px -150px -40px -28px;
    border-radius:var(--r-xl);
    background:
      linear-gradient(90deg,
        rgba(7,11,33,.66)  0%,
        rgba(7,11,33,.66) 86%,
        rgba(7,11,33,0)  100%);
  }
}

/* The paragraph was rgba(255,255,255,.92); solid white so the measured
   ratio above is the ratio that actually ships. */
.hero--photo .lede--hero,
.hero--photo .lede.lede--hero{ color:#fff }


/* --- 22.20 The hero badge ------------------------------------------------
   MEASURED FIX. The badge chip was rgba(10,16,42,.42) with gold-300 ink at
   15px/400 - normal text, so it needs 4.5:1. Sampled against a pure-white
   photograph with the chip painted and only its ink hidden, it measured
   3.10:1 at 360px through 4.28:1 at 1440px. It failed at every width.

   The .42 chip was never opaque enough to carry gold on a bright ground on
   its own, and it sits at the very top of the copy block where the pad in
   22.19 used to feather out. Chip raised to .82; the pad's feather now
   finishes inside its own margin so the badge sits on full strength.      */
.hero--photo .badge{
  background:rgba(7,11,33,.82);
  border-color:rgba(194,160,89,.55);
  color:var(--gold-200);
}
.hero--photo .badge__dot{background:var(--gold-300)}

/* --- 22.21 Caption classes that live on dark panels ----------------------
   MEASURED FIX. 22.16(d) gave .doc-note the caption grey (#555). On the
   home page that element is the "ADA-Endorsed Low-Carb Protocol" chip
   inside .doc-panel, which is a translucent navy panel floating on the
   hero photograph - it measured 1.61:1 there. The caption grey is for
   light grounds only; on any dark panel these revert to the light scale. */
.doc-panel .doc-note,
.doc-panel .note,
.doc-panel .fine,
.doc-panel .caption,
.hero--photo .doc-note,
.hero--photo .fine,
.hero--photo .caption,
.section--dark .doc-note,
.panel--dark .doc-note,
.panel--dark .fine,
.panel--dark .caption{
  color:var(--brand-200);          /* 11.41:1 on --brand-900 */
  font-weight:400;                 /* 300 is too thin to survive on navy */
}
.doc-panel .pill-note,
.hero--photo .pill-note{ color:var(--gold-200) }

/* --- 22.22 Two hierarchy slips the render audit turned up ---------------
   Neither is a contrast failure - both measured fine - but both sit
   outside the scale.                                                     */

/* (a) .profile-card__name is a 24px/700 person's name, i.e. a heading. It
   was inheriting the caption grey (#555, 7.46:1 on white - legible, but
   the wrong role). Headings take the headline colour. */
.profile-card__name,
.profile-frame .profile-card__name{ color:var(--t-headline) }

/* (b) #categoryBar .cat-btn declares font-weight:800 at 0,1,1, so the
   weight normalisation in 22.11 (0,1,0) never reached it. The system tops
   out at 700 and 800 is not loaded, so this was being synthesised. */
#categoryBar .cat-btn,
#categoryBar .cat-btn__label,
.cat-btn,
.cat-btn__label{ font-weight:700 }

/* ==========================================================================
   23. REVISION 4.1 — hero emphasis
   Hero text up 15% in size and 20% in weight; every other heading up 20% in
   weight only. Body, supporting copy, sub-text and captions are untouched.

                        BEFORE (4.0)              AFTER (4.1)
   H1 desktop           32-36px  / 700            36.8-41.4px / 840
   H1 mobile            26-30px  / 700            29.9-34.5px / 840
   Hero sub desktop     20-24px  / 600            23-27.6px   / 720
   Hero sub mobile      18-20px  / 600            20.7-23px   / 720
   H2 / prose h2        unchanged size / 700       unchanged  / 840
   H3 / H4 / prose h3   unchanged size / 600       unchanged  / 720

   840 and 720 are not static weights. Both families are now loaded on their
   variable wght axis (300..900) so these resolve exactly rather than being
   rounded down to 700 and 600 - which is what would have happened under 4.0,
   where only fixed weights were requested and font-synthesis is off.
   ========================================================================== */

/* --- 23.1 Hero headline: +15% size, +20% weight ------------------------- */
h1,.h1,.page-hero h1,.h1--page,.article__title,
.hero .h1,.hero h1,.page-hero .h1,.page-hero .h1--page{
  font-size:clamp(1.869rem, 1.614rem + 1.13vw, 2.156rem);   /* 29.9 -> 34.5px */
  font-weight:840;
  line-height:1.24;              /* a shade tighter so the taller type keeps
                                    the same optical block height */
  letter-spacing:-.018em;        /* heavier weight needs marginally more pull */
}
@media (min-width:768px){
  h1,.h1,.page-hero h1,.h1--page,.article__title,
  .hero .h1,.hero h1,.page-hero .h1,.page-hero .h1--page{
    font-size:clamp(2.3rem, 1.789rem + 1.065vw, 2.5875rem); /* 36.8 -> 41.4px */
  }
}

/* --- 23.2 Hero sub-headline: +15% size, +20% weight --------------------- */
.lede--hero,.hero__sub,
.lede.lede--hero,.hero .lede--hero,.page-hero .lede{
  font-size:clamp(1.294rem, 1.167rem + 0.565vw, 1.4375rem); /* 20.7 -> 23px */
  font-weight:720;
  line-height:1.38;
}
@media (min-width:768px){
  .lede--hero,.hero__sub,
  .lede.lede--hero,.hero .lede--hero,.page-hero .lede{
    font-size:clamp(1.4375rem, 0.926rem + 1.065vw, 1.725rem); /* 23 -> 27.6px */
    line-height:1.38;
  }
}

/* --- 23.3 Every other heading: +20% weight, same size -------------------- */
h2,.h2,.prose-article h2,.takeaways h2,
.panel__title,.form-card__title,.section--dark .form-card__title{
  font-weight:840;
}
h3,.h3,h4,.h4,.prose-article h3,
.widget__title,.doc-name,.bio-name,.profile-card__name,
.video-meta__title,.story__name,.author-card__name,.success h3{
  font-weight:720;
}

/* --- 23.4 Keep the numerals in step -------------------------------------
   The stat figures read as headings, so they follow the heading bump.     */
.stat-card__figure,.stat-figure{font-weight:840}

/* --- 23.5 Compound selectors the weight passes never reached -------------
   Six rules declare font-weight:800 with a descendant selector, so they
   outrank the single-class normalisation in 22.11 and the heading bump in
   23.3. Under 4.0 this was invisible: only 300-700 were loaded, so the
   browser matched them down to the nearest available face, 700. Now that
   both families load on a 300..900 variable axis, 800 resolves for real -
   so without this block, moving to variable fonts would quietly make these
   six heavier than they shipped.

   Headings take the 23.3 bump; everything else returns to the system's 700. */
.modal__head h3{ font-weight:720; font-size:1.125rem }
@media (min-width:768px){ .modal__head h3{ font-size:1.25rem } }
.aside-head h2{ font-weight:840 }
.success h4{ font-weight:720 }

.tag-rail li,
.radio-group legend,
.wa-pop__tx b{ font-weight:700 }

/* --- 23.6 Weight floor after the move to variable fonts ------------------
   Under 4.0 only 300-700 were loaded, so every `font-weight:800` in this
   file was matched down by the browser to 700 and rendered as 700. Loading
   the 300..900 variable axis in 4.1 makes 800 resolve for real, which would
   have silently thickened 60 selectors nobody asked to change - and it
   did: the WhatsApp FAB badge grew 8px wider and started clipping.

   Every selector that still declares 800/900 is pulled back to the system's
   700 here, and the headings that are supposed to be heavier are restated
   in 23.7 below so they win on source order. */
.skip-link,
.h1,
.h2,
.h3,
.eyebrow,
.btn,
.link-more,
.inline-link,
.brand-name,
.drawer__head,
.tag-cat,
.step-num,
.stat-figure,
.stat-label,
.stat-source,
.badge,
.doc-name,
.stat-card__figure,
.tag-rail li,
.avatar,
.story__name,
.bio-name,
.pullquote footer,
.pill-note,
.faq-btn,
.info-label,
.info-phone,
.form-card__title,
.field,
.success h4,
.stepper__item,
.stepper__dot,
.radio-group legend,
.wa-fab__badge,
.wa-pop__tx b,
.modal__head h3,
.footer-brand,
.footer-h,
.install-card__title,
.back-link,
.profile-card__kicker,
.profile-card__name,
.hero-quals,
.panel__title,
.cat-btn,
.aside-head h2,
.video-card__meta,
.video-card__title,
.tag,
.video-meta__title,
.video-cta__title,
.prose-article h2,
.prose-article h3,
.author-card__name,
.post-nav__dir,
.widget__title,
.cat-count,
.cat-sign,
.ad-slot__tag,
#categoryBar .cat-btn{ font-weight:700 }

/* --- 23.7 Heading weights restated after the floor ----------------------- */
h1,.h1,.page-hero h1,.h1--page,.article__title,
.hero .h1,.hero h1,.page-hero .h1,.page-hero .h1--page,
h2,.h2,.prose-article h2,.takeaways h2,.aside-head h2,
.panel__title,.form-card__title,.section--dark .form-card__title,
.stat-card__figure,.stat-figure{ font-weight:840 }

.lede--hero,.hero__sub,.lede.lede--hero,.hero .lede--hero,.page-hero .lede,
h3,.h3,h4,.h4,.prose-article h3,.modal__head h3,.success h4,
.widget__title,.doc-name,.bio-name,.profile-card__name,
.video-meta__title,.story__name,.author-card__name,.success h3{ font-weight:720 }


/* ========================================================================== 
   20. PREMIUM HERO TYPOGRAPHY + RESPONSIVE HIERARCHY — 2026-09-24
   ========================================================================== */
.hero--photo,
.hero--photo *{
  font-family:'Inter',sans-serif;
}

.hero--photo .hero__scrim{
  background:linear-gradient(180deg,rgba(5,10,25,.82) 0%,rgba(8,15,35,.78) 100%);
}

.hero--photo .hero__inner{
  padding-top:70px;
  padding-bottom:70px;
}

.hero--photo .split--hero{
  align-items:center;
}

.hero--photo .split--hero > :first-child{
  max-width:900px;
}

.hero--photo .badge{
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  padding:10px 18px;
  margin:0;
  border:1px solid rgba(214,181,107,.35);
  border-radius:999px;
  background:rgba(214,181,107,.12);
  color:#D6B56B;
  font-size:13px;
  font-weight:600;
  line-height:1.3;
  letter-spacing:0;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}

.hero--photo .h1{
  margin-top:24px;
  max-width:900px;
  font-size:clamp(36px,5.5vw,64px);
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.03em;
  color:#fff;
  text-wrap:balance;
}

.hero--photo .hero__accent{
  display:inline;
  color:#D6B56B;
  background:none;
  -webkit-background-clip:initial;
  background-clip:initial;
  -webkit-text-fill-color:#D6B56B;
}

.hero--photo .lede--hero{
  max-width:850px;
  margin-top:28px;
  font-size:clamp(18px,2vw,24px);
  font-weight:500;
  line-height:1.6;
  color:rgba(255,255,255,.92);
}

.hero--photo .hero__actions{
  margin-top:40px;
}

@media (min-width:768px){
  .hero--photo .hero__inner{
    padding-top:90px;
    padding-bottom:90px;
  }
  .hero--photo .badge{font-size:14px}
}

@media (min-width:1024px){
  .hero--photo .hero__inner{
    padding-top:120px;
    padding-bottom:110px;
  }
  .hero--photo .badge{font-size:15px}
  .hero--photo .split--hero{
    grid-template-columns:minmax(0,1.12fr) minmax(320px,.88fr);
    gap:clamp(32px,5vw,76px);
  }
}

@media (max-width:767px){
  .hero--photo .hero__inner{
    padding-inline:20px;
  }
  .hero--photo .h1{
    font-size:clamp(34px,9.4vw,36px);
    line-height:1.08;
    letter-spacing:-.035em;
    text-wrap:pretty;
  }
  .hero--photo .lede--hero{
    margin-top:24px;
    font-size:18px;
    line-height:1.55;
    font-weight:500;
  }
  .hero--photo .hero__actions{
    margin-top:32px;
    gap:10px;
  }
  .hero--photo .hero__actions .btn{
    min-height:50px;
  }
}

/* ========================================================================== 
   24. HERO TYPOGRAPHY REFINEMENT — 2026-09-24
   Keeps the approved homepage H1 size, aligns its heading typeface with the
   About Dr. Das hero, and reduces long hero descriptions for better hierarchy.
   ========================================================================== */

/* Homepage: preserve the existing 36–64px size, but use the same display
   family as the About Dr. Das hero heading. */
.hero--photo .h1{
  font-family:"Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

/* The homepage description is intentionally smaller than the earlier
   18–24px treatment because it is a long two-sentence paragraph. */
.hero--photo .lede--hero{
  max-width:780px;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:17px;
  font-weight:500;
  line-height:1.62;
  letter-spacing:0;
}
@media (min-width:768px){
  .hero--photo .lede--hero{font-size:18px;line-height:1.62}
}
@media (min-width:1200px){
  .hero--photo .lede--hero{font-size:19px;line-height:1.62}
}

/* About + Patient Resources: consistent internal-page hero hierarchy.
   Source Sans 3 is reserved for hero titles; Inter carries supporting text. */
.page-hero--about .h1--page,
.page-hero--resources .h1--page{
  font-family:"Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:clamp(36px,4.2vw,52px);
  font-weight:800;
  line-height:1.08;
  letter-spacing:-.025em;
  max-width:20ch;
  text-wrap:balance;
}

.page-hero--about .lede--hero,
.page-hero--resources .lede--hero{
  margin-top:18px;
  max-width:720px;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:16px;
  font-weight:500;
  line-height:1.62;
  letter-spacing:0;
  color:#d8def0;
  text-wrap:pretty;
}
@media (min-width:768px){
  .page-hero--about .lede--hero,
  .page-hero--resources .lede--hero{
    font-size:18px;
    line-height:1.62;
  }
}
@media (min-width:1200px){
  .page-hero--about .lede--hero,
  .page-hero--resources .lede--hero{font-size:19px}
}

/* About-page supporting credential lines sit below the H1, so they should
   remain clearly secondary to the name while still reading comfortably. */
.page-hero--about .hero-quals{
  margin-top:14px;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:16px;
  font-weight:700;
  line-height:1.45;
}
.page-hero--about .hero-role{
  margin-top:5px;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:15px;
  font-weight:600;
  line-height:1.45;
}
@media (min-width:768px){
  .page-hero--about .hero-quals{font-size:17px}
  .page-hero--about .hero-role{font-size:16px}
}


/* ==========================================================================
   25. HERO / DOCTOR VISIBILITY REFINEMENTS — 2026-09-24
   Requested adjustments: homepage subheader treatment, doctor-page title
   visibility, and updated doctor image treatment across the website.
   ========================================================================== */

/* Homepage: move the 90-day promise into a true subheader, ~20% smaller than
   the hero H1 while keeping the same premium visual language. */
.hero--photo .hero__sub{
  margin-top:12px;
  max-width:18ch;
  font-family:"Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:clamp(29px,4.4vw,51px);
  font-weight:700;
  line-height:1.12;
  letter-spacing:-.024em;
  color:#D6B56B;
  text-wrap:balance;
}
.hero--photo .h1{max-width:16ch}
.hero--photo .lede--hero{margin-top:22px}
@media (max-width:767px){
  .hero--photo .hero__sub{
    margin-top:10px;
    font-size:clamp(27px,7.4vw,29px);
    line-height:1.1;
  }
}

/* About page: stronger readability for the doctor name and resource title. */
.page-hero--about .h1--page{
  color:#fff;
  text-shadow:0 8px 26px rgba(5,10,25,.30);
}
.page-hero--about .profile-card--photo::after{
  background:linear-gradient(180deg, rgba(10,13,35,0) 26%, rgba(10,13,35,.56) 60%, rgba(7,10,26,.96) 100%);
}
.page-hero--about .profile-card__meta{
  background:linear-gradient(to top, rgba(7,11,33,.96) 24%, rgba(7,11,33,.76) 68%, rgba(7,11,33,.08));
}
.page-hero--about .profile-card__name,
.page-hero--about .profile-card__line,
.page-hero--about .profile-card__kicker{
  color:#fff;
  text-shadow:0 4px 18px rgba(5,10,25,.35);
}
.page-hero--about .profile-card__kicker{color:var(--gold-300)}
.panel--dark .panel__title{color:#fff}
.panel--dark .panel__title--gold{color:var(--gold-300)}

/* New doctor image is square; center it consistently in every usage. */
.doc-avatar img,
.bio-avatar img,
.author-card__pic img,
.profile-card__photo{
  object-position:center 16%;
}
.profile-card--photo{min-height:460px}
@media (min-width:640px){ .profile-card--photo{min-height:520px} }
.author-card__pic{overflow:hidden;border-radius:16px}


/* ==========================================================================
   26. FINAL HERO / DOCTOR IMAGE REFINEMENTS — 2026-09-24
   User-requested polish for homepage subheader, about-page visibility,
   patient-resource callout contrast, and sitewide doctor-image alignment.
   ========================================================================== */

/* Homepage: keep the 90-day promise as a clear subheader, but scale it down
   by roughly 20% from the previous revision so it reads secondary to the H1. */
.hero--photo .hero__sub{
  margin-top:12px;
  max-width:18ch;
  font-family:"Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:clamp(23px,3.55vw,41px);
  font-weight:700;
  line-height:1.14;
  letter-spacing:-.022em;
  color:#D6B56B;
  text-wrap:balance;
}
@media (max-width:767px){
  .hero--photo .hero__sub{
    margin-top:10px;
    font-size:clamp(21px,6vw,24px);
    line-height:1.12;
  }
}

/* About page: make the doctor's name and the profile-card name unmistakably
   readable against the image band. */
.page-hero--about .h1--page{
  color:#fff;
  text-shadow:0 10px 28px rgba(5,10,25,.42);
}
.page-hero--about .profile-card__meta{
  background:linear-gradient(to top, rgba(6,10,28,.98) 16%, rgba(6,10,28,.88) 54%, rgba(6,10,28,.18) 100%);
}
.page-hero--about .profile-card__kicker{
  color:#f1d894;
  text-shadow:0 4px 18px rgba(5,10,25,.4);
}
.page-hero--about .profile-card__name{
  color:#fff;
  font-size:clamp(28px,4vw,34px);
  font-weight:800;
  line-height:1.08;
  text-shadow:0 4px 18px rgba(5,10,25,.46);
}
.page-hero--about .profile-card__line{
  color:rgba(255,255,255,.96);
  text-shadow:0 3px 14px rgba(5,10,25,.36);
}

/* Dark information panel: brighten the heading so “Watch patient video
   resources.” is clearly visible. */
.panel--dark .panel__title--gold{
  color:#ffe29a;
  text-shadow:0 2px 10px rgba(0,0,0,.18);
}
.panel--dark .lede{color:rgba(255,255,255,.86)}
.panel--dark .btn--outline{
  color:#fff;
  border-color:rgba(255,255,255,.45);
  background:rgba(255,255,255,.04);
}
.panel--dark .btn--outline:hover{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.72);
}

/* Sitewide doctor-image treatment: use the updated portrait consistently and
   crop it around the face so every avatar/card feels intentional. */
.doc-avatar img,
.bio-avatar img,
.author-card__pic img,
.profile-card__photo{
  object-fit:cover;
  object-position:center 18%;
}
.profile-card--photo{min-height:480px}
@media (min-width:640px){ .profile-card--photo{min-height:540px} }
.author-card__pic img,
.doc-avatar img,
.bio-avatar img{background:#eef3fb}


/* ==========================================================================
   27. FINAL PORTRAIT SIZING / CROPPING — 2026-09-24
   Uses the refreshed clinic-background portrait consistently across the
   homepage, About page and article author cards. The image is 4:5, so each
   slot now crops around the face/stethoscope rather than assuming a square.
   ========================================================================== */

.hero--photo .doc-avatar{
  width:96px;
  height:96px;
  flex:0 0 96px;
}
.hero--photo .doc-avatar img,
.bio-avatar img,
.author-card__pic img{
  object-fit:cover;
  object-position:center 16%;
}

.bio-avatar{
  width:112px;
  height:112px;
}

.author-card__pic{
  width:104px;
  height:104px;
  flex:0 0 104px;
}

.page-hero--about .profile-card--photo{
  min-height:500px;
}
.page-hero--about .profile-card__photo{
  object-fit:cover;
  object-position:center 18%;
}

@media (min-width:640px){
  .page-hero--about .profile-card--photo{min-height:560px}
}

@media (max-width:479px){
  .hero--photo .doc-avatar{
    width:80px;
    height:80px;
    flex-basis:80px;
  }
  .bio-avatar{
    width:96px;
    height:96px;
  }
  .author-card__pic{
    width:88px;
    height:88px;
    flex-basis:88px;
  }
  .page-hero--about .profile-card--photo{min-height:455px}
}

/* Mobile SaaS healthcare hero conversion layout */
@media (max-width: 767px){
.hero--photo{min-height:auto;padding-bottom:28px}
.split--hero{display:flex;flex-direction:column}
.hero__inner{gap:18px}
.hero__sub{font-size:1.05rem}
.lede--hero{font-size:.98rem;line-height:1.55}
.hero__actions{display:grid;grid-template-columns:1fr;gap:10px}
.hero__actions .btn{width:100%;justify-content:center}
.hero-figure{order:-1;margin-bottom:4px}
.doc-panel{border-radius:28px;box-shadow:0 18px 45px rgba(0,0,0,.12)}
.doc-panel__body{padding:16px}
.doc-facts{font-size:.88rem}
.rail--stories .story{min-width:88vw}
}

/* Mobile-first hero refinement: premium healthcare SaaS feel */
.hero .h1{font-size:clamp(2rem,8vw,4.25rem);line-height:1.05;letter-spacing:-0.035em}
.lede--hero{font-size:clamp(1rem,3.8vw,1.1875rem);line-height:1.65;max-width:62ch}
.hero__sub{font-size:clamp(.9rem,3.2vw,1.05rem);font-weight:700}
.hero__actions .btn{min-height:52px;border-radius:14px}
.hero__inner{padding-block:34px}
.hero-figure{margin-top:20px}
@media(min-width:768px){
 .hero__inner{padding-block:76px}
 .hero-figure{margin-top:0}
}
@media(max-width:480px){
 .hero .h1{font-size:2.05rem}
 .hero__sub{margin-bottom:12px}
 .lede--hero{font-size:1rem}
}

/* Premium responsive hero update */
.hero--photo .hero__scrim{background:linear-gradient(90deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.72) 45%,rgba(255,255,255,.12) 100%)}
.hero__inner{min-height:680px}
.hero__sub{font-size:clamp(1.35rem,2vw,2rem);font-weight:700;color:#15803d;letter-spacing:-.02em}
.lede--hero{max-width:650px;font-size:clamp(1rem,1.2vw,1.2rem);line-height:1.65}
@media(max-width:767px){.hero__inner{min-height:auto;padding-top:3rem;padding-bottom:3rem}.hero h1{font-size:clamp(2.2rem,10vw,3.1rem);line-height:1.05}.hero__sub{font-size:1.35rem}.lede--hero{font-size:1rem;line-height:1.55}.hero--photo .hero__scrim{background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.75))}}


/* ==========================================================================
   27. REVISION 4.0 — bright split hero with wellness image (no overlay)
   ========================================================================== */
.hero--wellness{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(64% 72% at 0% 18%, rgba(72,166,118,.12) 0%, transparent 62%),
    radial-gradient(42% 48% at 96% 8%, rgba(34,108,84,.10) 0%, transparent 62%),
    linear-gradient(180deg, #f7fcf8 0%, #ffffff 78%);
}
.hero--wellness::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url('images/diabetes-hero-background.png');
  background-size:560px auto;
  background-repeat:no-repeat;
  background-position:left -120px top -70px;
  opacity:.08;
  pointer-events:none;
}
.hero--wellness .hero__inner{
  position:relative;
  z-index:1;
  gap:28px;
  padding-block:24px 38px;
}
@media (min-width:768px){
  .hero--wellness .hero__inner{padding-block:48px 56px;gap:36px}
}
@media (min-width:1024px){
  .hero--wellness .hero__inner{
    grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr);
    gap:48px;
    padding-block:52px 64px;
  }
}
.hero--wellness .hero-copy{max-width:640px}
.hero--wellness .hero__eyebrow{
  margin-bottom:16px;
  color:#2f7c4d;
  font-size:.8125rem;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.hero--wellness .h1{
  color:#132c26;
  font-size:clamp(2.3rem, 6vw, 4rem);
  line-height:1.03;
  max-width:11ch;
}
.hero--wellness .hero__sub{
  margin-top:18px;
  font-size:clamp(1.25rem,2.2vw,1.9rem);
  line-height:1.2;
  font-weight:800;
  color:#25a45a;
}
.hero--wellness .lede--hero{
  margin-top:18px;
  max-width:60ch;
  color:#42574d;
  font-size:1.0625rem;
  line-height:1.72;
}
@media (min-width:768px){
  .hero--wellness .lede--hero{font-size:1.1rem}
}
.hero--wellness .hero__actions{margin-top:28px;gap:14px}
.hero--wellness .btn--outline{
  background:#fff;
  border-color:rgba(19,44,38,.14);
  color:#18342d;
}
.hero--wellness .btn--outline:hover{
  background:#f4f8f5;
  border-color:rgba(19,44,38,.24);
}
.hero-highlights{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:28px;
}
@media (min-width:1024px){
  .hero-highlights{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
}
.hero-highlights li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  min-width:0;
  padding:12px 10px;
  border-radius:18px;
  background:rgba(255,255,255,.84);
  box-shadow:0 10px 26px rgba(16,32,22,.06), inset 0 0 0 1px rgba(34,108,84,.08);
  color:#284036;
  font-size:.8rem;
  line-height:1.4;
  font-weight:700;
}
@media (max-width:399px){
  .hero-highlights{grid-template-columns:1fr}
}
.hero-highlights__icon{
  display:grid;
  place-items:center;
  flex:0 0 38px;
  width:38px;
  height:38px;
  border-radius:999px;
  background:#eef8f1;
  color:#2f7c4d;
  box-shadow:inset 0 0 0 1px rgba(47,124,77,.12);
}
.hero-highlights .i{font-size:18px}
.hero-visual--wellness{
  aspect-ratio:16/14;
  background:#ddebdc;
  border-radius:28px;
  box-shadow:0 28px 64px rgba(16,32,22,.14);
}
.hero-visual--wellness img{
  object-position:center;
}
@media (min-width:768px){
  .hero-visual--wellness{aspect-ratio:15/14}
}
@media (min-width:1024px){
  .hero-visual--wellness{aspect-ratio:11/12}
}
.hero--wellness .hero-figure{
  position:relative;
  align-self:center;
  max-width:640px;
  margin-inline:auto;
}
@media (min-width:1024px){
  .hero--wellness .hero-figure{max-width:none}
}
.hero-doc-card{
  position:relative;
  z-index:2;
  margin:-42px 18px 0 auto;
  max-width:410px;
  padding:18px 18px 16px;
  border-radius:24px;
  box-shadow:0 22px 44px rgba(12,24,21,.18);
}
@media (min-width:768px){
  .hero-doc-card{margin:-56px 24px 0 auto;padding:22px 22px 18px}
}
@media (min-width:1024px){
  .hero-doc-card{max-width:430px}
}
.hero-doc-card .doc-head{align-items:center;margin-bottom:16px}
.hero-doc-card .doc-avatar{
  height:72px;
  width:72px;
  flex:0 0 72px;
  border-radius:18px;
}
.hero-doc-card .doc-avatar img{object-position:top center}
.hero-doc-card .doc-name{font-size:1.12rem}
.hero-doc-card .doc-role{
  margin-top:4px;
  color:#fff;
  font-size:.95rem;
}
.hero-doc-card .doc-quals{
  margin-top:6px;
  color:rgba(255,255,255,.72);
  font-size:.8125rem;
  font-weight:700;
}
.hero-doc-card .doc-facts{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  margin-top:12px;
  padding:0;
  background:none;
  box-shadow:none;
}
.hero-doc-card .doc-facts li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:11px 0;
  border-top:1px solid rgba(255,255,255,.12);
  background:none;
  box-shadow:none;
  border-radius:0;
  font-size:.875rem;
  line-height:1.45;
}
.hero-doc-card .doc-facts li:first-child{border-top:0;padding-top:2px}
.hero-doc-card .icon-inline{
  display:grid;
  place-items:center;
  flex:0 0 20px;
  width:20px;
  height:20px;
  color:var(--gold-400);
  background:none;
  border-radius:0;
}
@media (max-width:767px){
  .hero--wellness .hero__actions .btn{width:100%;justify-content:center}
}
@media (max-width:479px){
  .hero--wellness .hero__inner{padding-block:18px 32px}
  .hero--wellness .h1{max-width:12ch;font-size:clamp(2rem,9vw,2.55rem)}
  .hero--wellness .hero__sub{margin-top:14px;font-size:1.2rem}
  .hero--wellness .lede--hero{font-size:1rem;line-height:1.65}
  .hero-doc-card{margin:-28px 12px 0 12px;padding:18px 16px 15px}
  .hero-doc-card .doc-head{gap:12px}
  .hero-doc-card .doc-avatar{height:62px;width:62px;flex-basis:62px}
  .hero-doc-card .doc-name{font-size:1rem}
  .hero-doc-card .doc-role{font-size:.88rem}
  .hero-doc-card .doc-quals{font-size:.78rem}
}

/* Art direction refinements: balanced clinical + lifestyle hero */
.hero-visual--wellness img{
  width:100%;height:100%;object-fit:cover;
  object-position:center;
}
@media (max-width:767px){
  .hero__inner{gap:24px;padding-top:32px;}
  .hero-copy .h1{font-size:2.05rem;line-height:1.12;}
  .hero-figure .media{aspect-ratio:16/11;}
  .hero-figure .doc-panel{margin:-34px 10px 0;}
  .doc-panel{padding:20px;}
  .hero-highlights{grid-template-columns:1fr 1fr;gap:14px;}
}
@media (min-width:768px){
  .hero-figure{max-width:620px;margin-left:auto;}
}


/* ========================================================================== 
   25. HERO FIX — clinical background + improved image framing
   Keeps the no-overlay requirement while making the lifestyle hero image read
   properly on desktop and mobile.
   ========================================================================== */
.hero--wellness{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background-color:#f6f4ee;
  background-image:url("images/hero-clinic-bg.png");
  background-position:left center;
  background-repeat:no-repeat;
  background-size:cover;
}
.hero--wellness .hero__inner{
  position:relative;
  align-items:center;
  gap:26px;
  padding-top:28px;
  padding-bottom:42px;
}
.hero--wellness .split--hero{
  grid-template-columns:minmax(0,1fr);
}
.hero--wellness .hero-copy{
  position:relative;
  z-index:2;
  max-width:660px;
}
.hero--wellness .hero-copy .h1{
  max-width:12ch;
  text-wrap:balance;
}
.hero--wellness .lede--hero{
  max-width:62ch;
}
.hero--wellness .hero-figure{
  position:relative;
  width:100%;
  max-width:640px;
  margin-inline:auto;
}
.hero--wellness .hero-visual--wellness{
  aspect-ratio: 16 / 11;
  border-radius:30px;
  overflow:hidden;
  background:#e6eedf;
  box-shadow:0 28px 60px rgba(18,33,22,.15);
}
.hero--wellness .hero-visual--wellness img,
.hero--wellness .hero-main-image{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:74% center;
}
.hero--wellness .hero-doc-card{
  position:relative;
  z-index:3;
  max-width:400px;
  margin:-36px 12px 0 auto;
  background:rgba(255,255,255,.95);
  box-shadow:0 18px 42px rgba(13,31,23,.18);
  border:1px solid rgba(32,74,59,.08);
}
.hero--wellness .hero-doc-card .doc-panel__art{opacity:.16}
.hero--wellness .hero-doc-card .doc-role{color:#34584b}
.hero--wellness .hero-doc-card .doc-quals{color:#597268}
.hero--wellness .hero-doc-card .doc-facts li{border-top:1px solid rgba(30,71,58,.08); color:#234136}
.hero--wellness .hero-doc-card .icon-inline{color:#2f7c4d}

@media (min-width:768px){
  .hero--wellness .hero__inner{
    padding-top:42px;
    padding-bottom:54px;
    gap:30px;
  }
  .hero--wellness .hero-visual--wellness{
    aspect-ratio: 4 / 3;
  }
  .hero--wellness .hero-doc-card{
    margin:-56px 24px 0 auto;
  }
}

@media (min-width:1024px){
  .hero--wellness .split--hero{
    grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
    gap:clamp(30px,4vw,56px);
  }
  .hero--wellness .hero__inner{
    padding-top:58px;
    padding-bottom:66px;
  }
  .hero--wellness .hero-figure{
    max-width:none;
    margin-left:auto;
  }
  .hero--wellness .hero-visual--wellness{
    aspect-ratio: 10 / 11;
  }
  .hero--wellness .hero-visual--wellness img,
  .hero--wellness .hero-main-image{
    object-position:76% center;
  }
}

@media (max-width:767px){
  .hero--wellness .hero__inner{
    gap:22px;
    padding-top:24px;
    padding-bottom:34px;
  }
  .hero--wellness .hero-copy .h1{
    font-size:clamp(2.05rem,9vw,2.65rem);
    line-height:1.08;
  }
  .hero--wellness .hero__sub{
    margin-top:12px;
    font-size:1.18rem;
  }
  .hero--wellness .lede--hero{
    font-size:1rem;
    line-height:1.62;
  }
  .hero--wellness .hero__actions{
    gap:12px;
  }
  .hero--wellness .hero__actions .btn{
    width:100%;
    justify-content:center;
  }
  .hero--wellness .hero-highlights{
    grid-template-columns:1fr 1fr;
    gap:12px;
  }
  .hero--wellness .hero-highlights li{
    min-height:100%;
  }
  .hero--wellness .hero-visual--wellness{
    aspect-ratio: 16 / 10;
  }
  .hero--wellness .hero-visual--wellness img,
  .hero--wellness .hero-main-image{
    object-position:68% center;
  }
  .hero--wellness .hero-doc-card{
    max-width:none;
    margin:-28px 10px 0;
    padding:18px 16px 15px;
    border-radius:22px;
  }
  .hero--wellness .hero-doc-card .doc-head{
    gap:12px;
    margin-bottom:12px;
  }
  .hero--wellness .hero-doc-card .doc-avatar{
    width:60px;
    height:60px;
    flex:0 0 60px;
    border-radius:16px;
  }
}

@media (max-width:399px){
  .hero--wellness .hero-highlights{grid-template-columns:1fr}
}

/* ========================================================================== 
   28. REVISION 4.2 — darker left-side clinical hero banner
   Matches the approved banner direction: clinical background, darker text side,
   strong readability, preserved right-side lifestyle image + doctor card.
   ========================================================================== */
.hero--wellness{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background-color:#10231d;
  background-image:
    linear-gradient(90deg,
      rgba(9,24,19,.86) 0%,
      rgba(9,24,19,.80) 22%,
      rgba(9,24,19,.64) 40%,
      rgba(9,24,19,.28) 58%,
      rgba(9,24,19,.08) 72%,
      rgba(9,24,19,0) 84%),
    url("images/hero-clinic-bg.png");
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center center;
}
.hero--wellness::before{display:none !important}
.hero--wellness .hero-copy{
  position:relative;
  z-index:2;
  max-width:670px;
}
.hero--wellness .hero__eyebrow{
  color:#8fe3ad;
}
.hero--wellness .h1,
.hero--wellness .hero-copy .h1{
  color:#ffffff;
  text-shadow:0 4px 18px rgba(0,0,0,.18);
  max-width:12ch;
}
.hero--wellness .hero__sub{
  color:#8ff0a8;
  text-shadow:0 2px 12px rgba(0,0,0,.14);
}
.hero--wellness .lede--hero{
  color:rgba(255,255,255,.94);
  max-width:62ch;
}
.hero--wellness .btn--primary{
  box-shadow:0 18px 32px rgba(16,67,40,.30);
}
.hero--wellness .btn--outline{
  background:rgba(255,255,255,.94);
  border-color:rgba(255,255,255,.84);
  color:#17342c;
}
.hero--wellness .btn--outline:hover{
  background:#ffffff;
  border-color:#ffffff;
}
.hero--wellness .hero-highlights li{
  background:rgba(255,255,255,.96);
  box-shadow:0 14px 32px rgba(0,0,0,.12);
}
.hero--wellness .hero-visual--wellness{
  border-radius:30px;
  box-shadow:0 28px 60px rgba(8,18,15,.22);
  background:#dce9df;
}
.hero--wellness .hero-visual--wellness img,
.hero--wellness .hero-main-image{
  object-fit:cover;
  object-position:74% center;
}
.hero--wellness .hero-doc-card{
  background:rgba(255,255,255,.97);
  backdrop-filter:saturate(1.1) blur(2px);
  border:1px solid rgba(27,74,58,.08);
  box-shadow:0 22px 46px rgba(0,0,0,.16);
}

@media (min-width:1024px){
  .hero--wellness .hero__inner{
    padding-top:56px;
    padding-bottom:68px;
  }
  .hero--wellness .split--hero{
    grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
    gap:clamp(28px,4vw,54px);
  }
  .hero--wellness .hero-copy{padding-right:10px}
  .hero--wellness .hero-visual--wellness{
    aspect-ratio:10/11;
  }
  .hero--wellness .hero-figure{
    align-self:end;
  }
}

@media (max-width:767px){
  .hero--wellness{
    background-position:left 62% top 50%;
    background-image:
      linear-gradient(180deg,
        rgba(9,24,19,.84) 0%,
        rgba(9,24,19,.78) 26%,
        rgba(9,24,19,.58) 48%,
        rgba(9,24,19,.22) 68%,
        rgba(9,24,19,.04) 100%),
      url("images/hero-clinic-bg.png");
  }
  .hero--wellness .hero__inner{
    padding-top:24px;
    padding-bottom:34px;
  }
  .hero--wellness .hero-copy .h1{
    font-size:clamp(2.05rem,9vw,2.7rem);
    line-height:1.07;
  }
  .hero--wellness .lede--hero{
    font-size:1rem;
    line-height:1.62;
  }
  .hero--wellness .hero-highlights{
    grid-template-columns:1fr 1fr;
  }
  .hero--wellness .hero-visual--wellness{
    aspect-ratio:16/10;
  }
  .hero--wellness .hero-visual--wellness img,
  .hero--wellness .hero-main-image{
    object-position:68% center;
  }
}

@media (max-width:399px){
  .hero--wellness .hero-highlights{grid-template-columns:1fr}
}

/* Final hero: single full background image */
.hero{
 position:relative;
 background-image:linear-gradient(90deg,rgba(4,25,24,.82) 0%,rgba(4,25,24,.62) 42%,rgba(4,25,24,.08) 70%),url("images/hero-home-final-background.png");
 background-size:cover;
 background-position:center;
 color:#fff;
}
.hero .hero__inner{position:relative;z-index:2;}
.hero .hero__eyebrow{color:#b8f5c8;}
.hero .h1,.hero h1{color:#fff;font-weight:800;letter-spacing:-.035em;}
.hero .hero__sub{color:#7ff0a1;font-weight:800;}
.hero .lede--hero{color:rgba(255,255,255,.92);font-size:clamp(1rem,1.4vw,1.18rem);line-height:1.7;max-width:56ch;}
.hero-highlights{color:#fff;}
.hero-highlights__icon{background:#fff;}
.hero__actions .btn--outline{background:#fff;color:#123;border-color:#fff;}
@media(max-width:767px){
 .hero{background-position:65% center;background-image:linear-gradient(180deg,rgba(4,25,24,.78),rgba(4,25,24,.9)),url("images/hero-home-final-background.png");}
 .hero .h1,.hero h1{font-size:clamp(2rem,9vw,2.8rem);line-height:1.08;}
 .hero .lede--hero{font-size:1rem;line-height:1.55;}
}

/* Final responsive refinements */
@media (max-width: 767px){
  .hero__inner{padding-top:22px;padding-bottom:44px;}
  .hero-copy{text-align:center;}
  .hero-copy .hero__actions{align-items:center;}
  .hero-highlights{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:12px;
    margin-inline:calc(var(--gutter) * -1);
    padding-inline:var(--gutter);
    padding-bottom:8px;
    scrollbar-width:none;
  }
  .hero-highlights::-webkit-scrollbar{display:none}
  .hero-highlights li{
    flex:0 0 82%;
    scroll-snap-align:center;
    background:transparent;
    box-shadow:none;
    border:0;
    padding:8px 6px;
    justify-content:center;
  }
}

/* Patient stories carousel controls */
.rail-wrap--stories{position:relative;}
.rail-arrow{
  display:none;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:3;
  width:42px;height:42px;
  border-radius:50%;
  border:1px solid var(--brand-200);
  background:#fff;
  color:var(--brand-700);
  font-size:28px;
  line-height:1;
  cursor:pointer;
  box-shadow:var(--shadow-card);
}
.rail-arrow--prev{left:-18px}
.rail-arrow--next{right:-18px}
@media (min-width:768px){
  .rail--stories{
    display:flex;
    overflow-x:auto;
    padding-inline:0;
    scroll-padding-inline:0;
    scroll-snap-type:x mandatory;
  }
  .rail--stories > *{
    width:calc((100% - 36px) / 3);
    max-width:none;
  }
  .rail-arrow{display:grid;place-items:center;}
}


/* Remove boxed styling from hero highlight items */
.hero-highlights li{
  background:transparent;
  box-shadow:none;
}

/* Requested hero refinements: spacing and highlight text color */
.hero-copy{margin-right:18px;}
.hero-side{margin-left:12px;}
.hero-doc-card .doc-avatar{margin-right:6px;}
.hero-highlights li > span:last-child{color:#fff;}

/* Author card spacing refinement: prevents portrait overlap on single post pages */
.author-card{
  grid-template-columns:96px minmax(0,1fr);
  gap:22px;
  align-items:start;
  padding:24px;
}
.author-card__pic{
  width:96px;
  height:96px;
  flex-shrink:0;
}
.author-card__name,
.author-card__role,
.author-card__bio{
  position:relative;
  z-index:1;
}
.author-card__bio{
  margin-top:12px;
  line-height:1.65;
}
@media (max-width:559px){
  .author-card{
    grid-template-columns:1fr;
    gap:16px;
  }
}

/* Final mobile hero alignment and global section subheading size update */
@media (max-width:767px){
  .hero-copy,
  .hero .hero-copy,
  .hero .h1,
  .hero h1,
  .hero .hero__sub,
  .hero .lede--hero{
    text-align:center;
  }

  .hero .hero__actions{
    justify-content:center;
  }
}

/* Mobile only: increase H2 headings site-wide by exactly 15%.
   Base mobile H2 scale was 22-24px; this becomes 25.3-27.6px. */
@media (max-width:767px){
  main h2,
  main .h2,
  .prose-article h2,
  .takeaways h2{
    font-size:clamp(1.58125rem, 1.39035rem + 0.851vw, 1.725rem);
  }
}

/* ========================================================================== 
   MOBILE HERO MATCH — 2026-09-27
   Mobile-only presentation update. Desktop/tablet and all non-hero sections
   remain unchanged.
   ========================================================================== */
@media (max-width:767px){
  /* Bright, premium landing-page treatment using the existing hero artwork. */
  .hero.hero--bg-single{
    min-height:auto;
    color:#0b1738;
    background-color:#f1f9ed;
    background-image:
      linear-gradient(180deg,
        rgba(244,251,240,0) 0%,
        rgba(244,251,240,.04) 38%,
        rgba(244,251,240,.72) 58%,
        #f1f9ed 72%,
        #eef8ea 100%),
      linear-gradient(90deg,
        rgba(251,255,249,.99) 0%,
        rgba(251,255,249,.96) 34%,
        rgba(251,255,249,.82) 50%,
        rgba(251,255,249,.34) 72%,
        rgba(251,255,249,.08) 100%),
      url("images/hero-home-mobile-background.webp?v=2");
    background-repeat:no-repeat;
    background-size:100% 100%,100% 100%,cover;
    background-position:center,center,center top;
  }

  .hero.hero--bg-single .hero__inner{
    min-height:auto;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:24px;
    padding-top:28px;
    padding-bottom:34px;
  }

  .hero.hero--bg-single .hero-copy,
  .hero.hero--bg-single .hero-copy *{
    text-align:left;
  }

  .hero.hero--bg-single .hero-copy{
    width:100%;
    max-width:none;
    margin:0;
  }

  .hero.hero--bg-single .hero__eyebrow{
    display:inline-flex;
    width:auto;
    max-width:285px;
    margin:0 0 16px;
    color:#08704e;
    font-size:1rem;
    font-weight:800;
    line-height:1.3;
    letter-spacing:0;
  }

  .hero.hero--bg-single .hero__eyebrow::before{
    width:24px;
    height:3px;
    flex:0 0 24px;
    margin-top:.62em;
    background:#dfaa24;
    opacity:1;
  }

  .hero.hero--bg-single .h1,
  .hero.hero--bg-single h1{
    max-width:none;
    margin:0;
    color:#08153b;
    text-shadow:none;
    font-family:"Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
    font-size:clamp(2.38rem,10.2vw,2.7rem);
    font-weight:800;
    line-height:1.025;
    letter-spacing:-.04em;
    text-wrap:balance;
  }

  .hero.hero--bg-single .hero-title-line{
    display:block;
    white-space:nowrap;
  }

  .hero.hero--bg-single .hero__sub{
    max-width:none;
    margin:14px 0 0;
    color:#087e4f;
    text-shadow:none;
    font-family:"Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
    font-size:clamp(1.48rem,6.2vw,1.72rem);
    font-weight:800;
    line-height:1.08;
    letter-spacing:-.025em;
  }

  .hero.hero--bg-single .hero-sub-line{
    display:block;
    white-space:nowrap;
  }

  .hero.hero--bg-single .lede--hero{
    max-width:34ch;
    margin:20px 0 0;
    color:#182642;
    font-size:1rem;
    font-weight:600;
    line-height:1.57;
    text-shadow:none;
  }

  .hero.hero--bg-single .hero__actions{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    width:100%;
    margin-top:26px;
    align-items:stretch;
    justify-content:stretch;
  }

  .hero.hero--bg-single .hero__actions .btn{
    width:100%;
    min-height:62px;
    justify-content:center;
    border-radius:18px;
    padding-inline:18px;
    font-size:1rem;
    font-weight:800;
    line-height:1.2;
    text-align:center;
  }

  .hero.hero--bg-single .hero__actions .btn--primary{
    color:#fff;
    background:linear-gradient(135deg,#173886 0%,#1d3b89 100%);
    box-shadow:0 12px 26px rgba(16,43,112,.22);
  }

  .hero.hero--bg-single .hero__actions .btn--outline{
    color:#0c1737;
    background:rgba(255,255,255,.96);
    border:1px solid rgba(12,23,55,.68);
    box-shadow:0 8px 20px rgba(16,43,60,.06);
  }

  /* Four benefits: open layout with icon circles only — no boxed cards. */
  .hero.hero--bg-single .hero-highlights{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px 14px;
    width:100%;
    margin:26px 0 0;
    padding:0;
    overflow:visible;
    scroll-snap-type:none;
  }

  .hero.hero--bg-single .hero-highlights li{
    min-width:0;
    min-height:0;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:11px;
    padding:0;
    color:#112941;
    background:transparent;
    border:0;
    border-radius:0;
    box-shadow:none;
    scroll-snap-align:none;
  }

  .hero.hero--bg-single .hero-highlights__icon{
    width:52px;
    height:52px;
    flex:0 0 52px;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:#0b7c4e;
    background:rgba(223,246,226,.94);
    box-shadow:none;
  }

  .hero.hero--bg-single .hero-highlights__icon .i{
    width:25px;
    height:25px;
    font-size:25px;
  }

  .hero.hero--bg-single .hero-highlights li > span:last-child{
    min-width:0;
    color:#112941;
    font-size:.80rem;
    font-weight:800;
    line-height:1.24;
    text-align:left;
  }

  /* Compact doctor strip at the bottom of the hero, matching the reference. */
  .hero.hero--bg-single .hero-side{
    width:100%;
    margin:2px 0 0;
  }

  .hero.hero--bg-single .hero-doc-card{
    width:100%;
    max-width:none;
    margin:0;
    padding:18px 18px 16px;
    border:0;
    border-radius:0 0 26px 26px;
    color:#fff;
    background:linear-gradient(135deg,#15347f 0%,#0b245f 100%);
    box-shadow:0 18px 34px rgba(12,35,91,.18);
    overflow:hidden;
  }

  .hero.hero--bg-single .hero-doc-card .doc-panel__art{
    display:block;
    opacity:.42;
  }

  .hero.hero--bg-single .hero-doc-card .doc-head{
    align-items:flex-start;
    gap:14px;
    margin:0 0 12px;
  }

  .hero.hero--bg-single .hero-doc-card .doc-avatar{
    width:72px;
    height:72px;
    flex:0 0 72px;
    margin:0;
    border:2px solid rgba(255,255,255,.62);
    border-radius:18px;
    background:#fff;
    box-shadow:none;
  }

  .hero.hero--bg-single .hero-doc-card .doc-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 16%;
  }

  .hero.hero--bg-single .hero-doc-card .doc-name{
    color:#fff;
    font-size:1.12rem;
    font-weight:800;
    line-height:1.2;
  }

  .hero.hero--bg-single .hero-doc-card .doc-role{
    margin-top:5px;
    color:#fff;
    font-size:.96rem;
    font-weight:700;
    line-height:1.25;
  }

  .hero.hero--bg-single .hero-doc-card .doc-quals{
    display:block;
    margin-top:6px;
    color:rgba(232,239,255,.86);
    font-size:.83rem;
    font-weight:700;
    line-height:1.35;
  }

  .hero.hero--bg-single .hero-doc-card .doc-facts{
    display:grid;
    grid-template-columns:1fr;
    gap:0;
    margin-top:10px;
    padding:0;
    background:none;
    box-shadow:none;
  }

  .hero.hero--bg-single .hero-doc-card .doc-facts li{
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:12px 0;
    border-top:1px solid rgba(255,255,255,.14);
    color:#fff;
    background:none;
    border-radius:0;
    box-shadow:none;
    font-size:.91rem;
    font-weight:700;
    line-height:1.42;
  }

  .hero.hero--bg-single .hero-doc-card .doc-facts li:first-child{
    padding-top:10px;
  }

  .hero.hero--bg-single .hero-doc-card .icon-inline{
    display:grid;
    place-items:center;
    flex:0 0 20px;
    width:20px;
    height:20px;
    color:var(--gold-300);
    background:none;
    border-radius:0;
  }
}

@media (max-width:379px){
  .hero.hero--bg-single .hero__eyebrow{padding:6px 7px;gap:5px;font-size:.9rem;}
  .hero.hero--bg-single .hero__eyebrow::before{width:11px;flex-basis:11px;}
  .hero.hero--bg-single .h1,
  .hero.hero--bg-single h1{font-size:2.24rem}
  .hero.hero--bg-single .hero__sub{font-size:1.4rem}
  .hero.hero--bg-single .hero-highlights{gap:20px 10px}
  .hero.hero--bg-single .hero-highlights__icon{width:46px;height:46px;flex-basis:46px}
  .hero.hero--bg-single .hero-highlights li > span:last-child{font-size:.76rem}
}


@media (max-width:379px){
  .hero.hero--bg-single .hero-doc-card{padding:16px 15px 14px}
  .hero.hero--bg-single .hero-doc-card .doc-avatar{width:64px;height:64px;flex-basis:64px}
  .hero.hero--bg-single .hero-doc-card .doc-name{font-size:1.03rem}
  .hero.hero--bg-single .hero-doc-card .doc-role{font-size:.9rem}
  .hero.hero--bg-single .hero-doc-card .doc-quals{font-size:.78rem}
  .hero.hero--bg-single .hero-doc-card .doc-facts li{font-size:.86rem;padding:11px 0}
}

/* Desktop hero refinement — lower the doctor card slightly so the background
   lifestyle image remains visible around the upper-right focal area. */
@media (min-width:1024px){
  .hero.hero--bg-single .hero-doc-card{
    margin:18px 0 0 auto;
    max-width:410px;
  }
}


/* Hero line wrappers only force breaks on mobile. */
@media (min-width:768px){
  .hero-title-line,
  .hero-sub-line{display:inline;white-space:normal}
}


/* ========================================================================== 
   MOBILE HERO REFERENCE LOCK — 2026-09-28
   Locks the home hero copy to the supplied mobile reference. These rules are
   intentionally mobile-only; desktop/tablet presentation remains unchanged.
   ========================================================================== */
@media (max-width:767px){
  .hero.hero--bg-single .hero__inner{
    padding-top:24px;
    gap:24px;
  }

  .hero.hero--bg-single .hero__eyebrow{
    width:max-content;
    max-width:100%;
    margin-bottom:14px;
    padding:7px 9px;
    gap:6px;
    background:linear-gradient(105deg,rgba(230,248,233,.97) 0%,rgba(249,252,233,.96) 55%,rgba(255,246,207,.94) 100%);
    border:1px solid rgba(8,112,78,.13);
    border-radius:12px;
    box-shadow:0 4px 14px rgba(8,58,47,.07);
    font-size:.9rem; /* 10% smaller than the previous 1rem mobile treatment */
    line-height:1.2;
    white-space:nowrap;
  }

  .hero.hero--bg-single .hero__eyebrow::before{
    width:14px;
    flex-basis:14px;
    margin-top:0;
  }

  .hero.hero--bg-single .hero-eyebrow-copy{
    display:inline;
    white-space:nowrap;
  }

  .hero.hero--bg-single .hero-eyebrow-line{
    display:inline;
    white-space:nowrap;
  }

  .hero.hero--bg-single .hero-title-line,
  .hero.hero--bg-single .hero-sub-line,
  .hero.hero--bg-single .hero-lede-line{
    display:block;
    white-space:nowrap;
  }

  .hero.hero--bg-single .h1,
  .hero.hero--bg-single h1{
    max-width:none;
    font-size:2.34rem;
    line-height:1.03;
    letter-spacing:-.038em;
    text-wrap:auto;
  }

  .hero.hero--bg-single .hero__sub{
    margin-top:12px;
    font-size:1.5rem;
    line-height:1.06;
    letter-spacing:-.024em;
  }

  .hero.hero--bg-single .lede--hero{
    max-width:none;
    margin-top:16px;
    font-size:.95rem;
    font-weight:600;
    line-height:1.42;
    letter-spacing:0;
  }

  .hero.hero--bg-single .hero__actions{
    margin-top:24px;
  }

  .hero.hero--bg-single .hero-highlights li > span:last-child{
    font-size:.80rem;
    line-height:1.25;
  }

  .hero.hero--bg-single br.hero-mobile-only-break{display:block;}
}

/* Keep the inserted line wrappers semantically continuous off mobile. */
@media (min-width:768px){
  .hero-eyebrow-line,
  .hero-title-line,
  .hero-sub-line,
  .hero-lede-line{
    display:inline;
    white-space:normal;
  }
  br.hero-mobile-only-break{display:none;}
}

/* Narrow-phone safety: preserve the exact line grouping without overflow. */
@media (max-width:379px){
  .hero.hero--bg-single .hero__eyebrow{padding:6px 7px;gap:5px;font-size:.9rem;}
  .hero.hero--bg-single .hero__eyebrow::before{width:11px;flex-basis:11px;}
  .hero.hero--bg-single .h1,
  .hero.hero--bg-single h1{
    font-size:2.12rem;
  }
  .hero.hero--bg-single .hero__sub{
    font-size:1.38rem;
  }
  .hero.hero--bg-single .lede--hero{
    font-size:.875rem;
  }
}

/* ==========================================================================
   WHATSAPP POPUP SPACING PARITY — 2026-09-28
   Keep the button-based Chat item and link-based Book item aligned identically.
   ========================================================================== */
.wa-pop__item{
  width:100%;
  box-sizing:border-box;
  text-align:left;
}
.wa-pop__tx{
  flex:1 1 auto;
  min-width:0;
  align-items:flex-start;
  margin:0;
}
.wa-pop__tx b,
.wa-pop__tx small{
  display:block;
  margin:0;
  padding:0;
}
.wa-pop__tx small{
  margin-top:3px;
}