/* =========================================================================
   Health at Home — design system
   Mobile-first, token-driven, no build step. Organised as:
   tokens · base · layout · header · buttons · cards · hero · forms ·
   badges · blog · footer · dashboard · calendar · utilities · responsive
   ========================================================================= */

/* --- Design tokens ------------------------------------------------------ */
:root {
  /* Palette: primary is sampled straight from the navy of the logo's cross, so
     the lockup in the header sits in the page rather than on top of it.

     The accent is deliberately NOT the logo's crimson. Every call to action —
     the Call button, the service card links, the step badges — is painted in
     it, and a saturated red on a clinic site reads as an alarm rather than an
     invitation. Teal carries the opposite meaning while staying harmonious
     next to the navy. The crimson still appears, but only in the logo itself,
     where it belongs. */
  --primary-900: #021c42;   /* deepest navy   footer dash sidebar hero end */
  --primary-700: #053371;   /* logo navy      brand colour links */
  --primary-600: #0a428c;   /* lifted navy    primary buttons */
  --primary-500: #1d5fb5;   /* mid navy       focus rings borders */
  --primary-100: #dde8f7;   /* pale navy      soft chip background */
  --primary-50:  #f1f6fc;   /* faintest navy  very pale background */

  --accent-600: #0f766e;    /* deep teal      primary CTAs — 5.5:1 on white */
  --accent-500: #12907f;    /* lighter teal   hover */

  --ink-900: #0f172a;
  --ink-700: #334155;
  --ink-500: #64748b;
  --ink-400: #94a3b8;
  --line:    #e2e8f0;
  --bg:      #f8fafc;
  --surface: #ffffff;

  --green:  #16a34a;
  --amber:  #d97706;
  --blue:   #2563eb;
  --red:    #dc2626;
  --slate:  #475569;

  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow:    0 6px 20px rgba(15, 23, 42, .08);
  --shadow-lg: 0 18px 40px rgba(15, 23, 42, .14);

  --container: 1160px;
  --space: 1rem;

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* --- Base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; scroll-behavior: smooth;
  /* Comfortable text rendering on Android Chrome and WebView. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink-900);
  background: var(--bg);
  line-height: 1.6;
  font-size: 16px;
}
@media (max-width: 720px) {
  /* Larger base font on phones for older patients with imperfect eyesight,
     and a generous line height so text doesn't feel cramped on Android. */
  body { font-size: 17px; line-height: 1.6; }
}
img { max-width: 100%; display: block; }
a { color: var(--primary-700); text-decoration: none; }
a:hover { color: var(--accent-600); }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; color: var(--ink-900); font-weight: 700; }
h1 { font-size: clamp(2.05rem, 5vw, 2.9rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.55rem, 3.4vw, 2.1rem); letter-spacing: -.01em; }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1rem; }
small { color: var(--ink-500); font-size: .9rem; }
@media (max-width: 720px) {
  /* Phone headings: keep impact without overflowing one line. */
  h1 { font-size: 2rem; line-height: 1.18; }
  h2 { font-size: 1.5rem; line-height: 1.22; }
  h3 { font-size: 1.15rem; }
  small { font-size: .92rem; }
}
:focus-visible { outline: 3px solid var(--primary-500); outline-offset: 2px; border-radius: 4px; }

/* --- Layout ------------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 1.1rem; }
.section { padding: 3rem 0; }
.section--tight { padding: 2rem 0; }
.section--alt { background: var(--surface); border-block: 1px solid var(--line); }
.section__head { text-align: center; max-width: 640px; margin: 0 auto 2rem; }
.section__head p { color: var(--ink-500); font-size: 1.05rem; }
.eyebrow {
  display: inline-block; text-transform: uppercase; letter-spacing: .12em;
  font-size: .82rem; font-weight: 700; color: var(--primary-600); margin-bottom: .6rem;
}
@media (max-width: 720px) {
  .eyebrow { font-size: .88rem; letter-spacing: .1em; }
}
.grid { display: grid; gap: 1.25rem; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.lead { font-size: 1.15rem; color: var(--ink-700); line-height: 1.55; }
@media (max-width: 720px) { .lead { font-size: 1.08rem; line-height: 1.5; } }

/* --- Header / nav ------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; gap: 1rem; min-height: 80px; }
.brand { display: flex; align-items: center; gap: .6rem; flex: none; }
.brand:hover { text-decoration: none; }
/* Width is derived from the height so the lockup never distorts, and the
   explicit height stops the header reflowing while the PNG loads. */
.brand__logo { height: 58px; width: auto; display: block; }

/* The lockup is navy + red, so on the dark footer and dash sidebar it needs
   a light backing to stay legible. */
.logo-chip {
  display: inline-flex; background: #fff; border-radius: var(--radius-sm);
  padding: .5rem .7rem;
}
.logo-chip img { height: 42px; width: auto; display: block; }
.logo-chip--sm { padding: .3rem; flex: none; }
.logo-chip--sm img { height: 26px; }
.footer-by { color: rgba(255,255,255,.7); font-size: .8rem; margin-top: .5rem; }
.nav__links { display: flex; align-items: center; gap: .35rem; margin-left: auto; }
.nav__cta { margin-left: .5rem; flex: none; }
.nav__links a {
  color: var(--ink-700); font-weight: 600; font-size: .95rem; padding: .5rem .7rem; border-radius: 8px;
}
.nav__links a:hover { background: var(--primary-50); color: var(--primary-700); text-decoration: none; }
.nav__toggle { display: none; }
.nav__burger {
  display: none; margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--line);
  border-radius: 10px; background: #fff; cursor: pointer; align-items: center; justify-content: center;
}
.nav__burger span, .nav__burger span::before, .nav__burger span::after {
  content: ""; display: block; width: 20px; height: 2px; background: var(--ink-900); position: relative;
}
.nav__burger span::before { position: absolute; top: -6px; }
.nav__burger span::after  { position: absolute; top: 6px; }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-weight: 700; font-size: .95rem; padding: .7rem 1.15rem; border-radius: 10px;
  border: 1px solid transparent; cursor: pointer; transition: transform .05s, box-shadow .2s, background .2s;
  text-decoration: none; line-height: 1; min-height: 44px;
}
@media (max-width: 720px) {
  /* Thumb-friendly touch targets on phones. */
  .btn { min-height: 52px; font-size: 1rem; padding: .85rem 1.2rem; }
  .btn--sm { min-height: 44px; font-size: .9rem; padding: .65rem .9rem; }
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--primary-600); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--primary-700); color: #fff; }
.btn--accent { background: var(--accent-600); color: #fff; }
.btn--accent:hover { background: var(--accent-500); color: #fff; }
.btn--whatsapp { background: #25d366; color: #fff; }
.btn--whatsapp:hover { background: #1ebe57; color: #fff; }
.btn--xl {
  font-size: 1.15rem; padding: 1rem 1.6rem; border-radius: 14px;
  box-shadow: 0 8px 22px rgba(15, 118, 110, .35);
}
.btn--lg { font-size: 1.02rem; padding: .9rem 1.4rem; border-radius: 12px; min-height: 50px; }

/* Icons sit in the text box, so they scale with the label rather than being
   pinned to a pixel size that only looks right at one font size. */
.icon { width: 1.05em; height: 1.05em; flex: none; }
.btn .icon { width: 1.1em; height: 1.1em; }
.btn--whatsapp.btn--xl { box-shadow: 0 8px 22px rgba(37, 211, 102, .35); }

/* Top-of-page call CTA cluster. */
.call-cta {
  display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap;
  margin-top: 1.1rem;
}
.call-cta__hint { font-size: .9rem; margin-top: .6rem; }

/* Two-tier nav CTA label: long ("Call 8308039888") on desktop,
   short ("Call now") on phones — same anchor, only the visible text changes. */
.nav__cta-label--short { display: none; }
.nav__cta-icon { display: inline-flex; align-items: center; }
@media (max-width: 720px) {
  .nav__cta-label { display: none; }
  .nav__cta-label--short { display: inline; }
}
.btn--ghost { background: #fff; color: var(--primary-700); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--primary-500); background: var(--primary-50); }
.btn--light { background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.4); }
.btn--light:hover { background: rgba(255,255,255,.26); color: #fff; }
.btn--block { width: 100%; }
.btn--sm { padding: .45rem .75rem; font-size: .85rem; border-radius: 8px; }
.btn--danger { background: var(--red); color: #fff; }

/* --- Cards -------------------------------------------------------------- */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 1.4rem;
}
.card--pad-lg { padding: 1.8rem; }

/* A plain card with an icon above the heading, so supporting sections share
   the service grid's visual language instead of reading as bare text. */
.feature__icon {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  margin-bottom: .9rem;
  background: linear-gradient(135deg, var(--primary-50), var(--primary-100));
  color: var(--primary-700);
}
.feature__icon .icon { width: 24px; height: 24px; }
.feature h3 { margin-bottom: .35rem; }

.service-card {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.6rem; box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  display: flex; flex-direction: column; height: 100%; color: var(--ink-900);
}
.service-card::after {
  content: ""; position: absolute; inset: auto -40% -40% auto;
  width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(15, 118, 110, .08), transparent 70%);
  pointer-events: none; transition: transform .3s ease;
}
.service-card:hover {
  transform: translateY(-4px); box-shadow: var(--shadow);
  border-color: var(--primary-100); text-decoration: none;
}
.service-card:hover::after { transform: scale(1.4); }
.service-card:active { transform: translateY(-1px); }
.service-card__icon {
  width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 1rem;
  background: linear-gradient(135deg, var(--primary-50), var(--primary-100));
  color: var(--primary-700); transition: transform .2s ease;
}
.service-card:hover .service-card__icon { transform: scale(1.05); }
.service-card__icon svg { width: 28px; height: 28px; }
.service-card h3 { margin-bottom: .35rem; color: var(--ink-900); }
.service-card p { color: var(--ink-500); font-size: .95rem; flex: 1; margin-bottom: .8rem; }
.service-card__cta {
  color: var(--accent-600); font-weight: 700; font-size: .9rem;
  margin-top: auto; display: inline-flex; gap: .35rem; align-items: center;
  transition: gap .2s ease;
}
.service-card:hover .service-card__cta { gap: .55rem; }

/* Compact section head, used above the services grid and How it works. */
.section__head--compact { margin-bottom: 1.4rem; }
.section__head--compact h2 { font-size: clamp(1.3rem, 3vw, 1.7rem); }

/* A section heading that carries the same weight as the hero h1. Used where a
   section makes a promise as big as the hero's — currently "Trusted Pathology"
   — so the two read as a matched pair. Kept as an h2 so the page still has
   exactly one h1. Selectors mirror the specificity of the
   .section__head--compact h2 rule above, which would otherwise win. */
.heading--hero,
.section__head h2.heading--hero,
.section__head--compact h2.heading--hero {
  font-size: clamp(2rem, 5vw, 2.8rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: .35rem 0 .7rem;
}
@media (max-width: 720px) {
  .heading--hero,
  .section__head h2.heading--hero,
  .section__head--compact h2.heading--hero { font-size: 1.75rem; }
}

/* --- How it works — numbered 3 step strip ------------------------------ */
.steps {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
}
.steps__item {
  position: relative;
  display: flex; gap: .9rem; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.2rem;
  box-shadow: var(--shadow-sm);
}
/* Hairline joining each card to the next, so the three read as one sequence.
   Drawn in the gutter between cards and hidden on the last item; suppressed
   once the grid stacks, where a horizontal rule would point nowhere. */
.steps__item:not(:last-child)::after {
  content: ""; position: absolute; top: 2.1rem; left: 100%; width: 1rem;
  border-top: 2px dotted var(--primary-100);
}
@media (max-width: 720px) {
  .steps__item:not(:last-child)::after { display: none; }
}
.steps__num {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  background: var(--accent-600); color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: 1.1rem;
  box-shadow: 0 4px 12px rgba(15, 118, 110, .35);
}
.steps__item h3 { margin: 0 0 .3rem; font-size: 1.1rem; }
.steps__item p { margin: 0; color: var(--ink-500); font-size: 1rem; line-height: 1.5; }
@media (max-width: 720px) {
  .steps__item h3 { font-size: 1.12rem; }
  .steps__item p { font-size: 1rem; }
}

@media (max-width: 720px) {
  .steps { grid-template-columns: 1fr; gap: .65rem; }
  .steps__item { padding: 1rem; }
}

/* --- Final CTA section -------------------------------------------------- */
.final-cta {
  background:
    radial-gradient(900px 320px at 50% -40%, rgba(15,118,110,.10), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f5f8fc 100%);
  border-top: 1px solid var(--line);
  padding: 3rem 0;
}
.final-cta h2 { font-size: clamp(1.5rem, 3.6vw, 2rem); margin-bottom: .6rem; }
.final-cta .lead { font-size: 1rem; margin-bottom: 1.5rem; }
.final-cta__actions {
  display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; margin-top: 1rem;
}

/* --- Page intro band (compact homepage header, kept for other pages) ---- */
.page-intro {
  background: linear-gradient(160deg, var(--primary-900), var(--primary-700));
  color: #fff; padding: 2.2rem 0 2rem;
  position: relative; overflow: hidden;
}
.page-intro::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(800px 280px at 80% -20%, rgba(15,118,110,.22), transparent 60%);
  pointer-events: none;
}
.page-intro .container { position: relative; z-index: 1; }
.page-intro h1 { color: #fff; margin: .15rem 0 .5rem; font-size: clamp(1.7rem, 4vw, 2.5rem); }
.page-intro .eyebrow { color: var(--primary-100); }
.page-intro .lead { color: rgba(255,255,255,.85); }

/* --- Hero (clean clinical, text only, centred) ------------------------- */
.hero-clean {
  position: relative; overflow: hidden;
  background:
    radial-gradient(900px 320px at 90% -10%, rgba(15,118,110,.10), transparent 60%),
    radial-gradient(700px 280px at 5% 110%, rgba(5,51,113,.08), transparent 60%),
    linear-gradient(180deg, #f5f8fc 0%, #ffffff 100%);
  /* Bottom padding leaves a clear band for the ECG watermark below the CTAs. */
  padding: 2.6rem 0 4.6rem;
  border-bottom: 1px solid var(--line);
}
/* Subtle heartbeat-line watermark drifting along the bottom of the hero. */
.hero-clean__decor {
  position: absolute; left: 0; right: 0; bottom: 10px;
  width: 100%; height: 30px; color: var(--accent-600);
  opacity: .16; pointer-events: none;
}
.hero-clean__copy { max-width: 620px; margin-inline: auto; position: relative; z-index: 1; }

/* Live "Available now" status pill — small green dot + label. */
.status-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  background: #fff; border: 1px solid var(--line);
  border-radius: 999px; padding: .35rem .85rem;
  font-size: .82rem; font-weight: 700; color: var(--ink-700);
  box-shadow: 0 1px 3px rgba(5, 51, 113, .06);
  letter-spacing: .01em;
}
.status-pill__dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #22c55e; box-shadow: 0 0 0 0 rgba(34, 197, 94, .6);
  animation: status-blink 2s ease-out infinite; flex: none;
}
@keyframes status-blink {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); }
  70%  { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
.hero-clean__copy .eyebrow { color: var(--primary-700); }
.hero-clean__copy h1 {
  font-size: clamp(2rem, 5vw, 2.8rem); line-height: 1.1; letter-spacing: -.02em;
  margin: .35rem 0 .7rem;
}
.hero-clean__accent { color: var(--accent-600); font-weight: 700; }
.hero-clean__copy .lead { font-size: 1.02rem; margin-bottom: 1.4rem; }
.hero-clean__actions {
  display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap;
}
@media (max-width: 520px) {
  /* Stack full width on small phones rather than letting the two buttons
     wrap into a ragged pair of different widths. */
  .hero-clean__actions { flex-direction: column; align-items: stretch; }
}
.hero-clean__sub {
  display: flex; align-items: center; justify-content: center;
  gap: .8rem; flex-wrap: wrap; margin-top: 1rem;
}
.hero-clean__or { font-size: .9rem; }

/* Inline trust pills shown directly under the hero CTA. */
.trust-pills {
  list-style: none; padding: 0; margin: 1.4rem 0 0;
  display: inline-flex; flex-wrap: wrap; justify-content: center;
  gap: .4rem .55rem;
}
.trust-pills li {
  display: inline-flex; align-items: center; gap: .45rem;
  background: #fff; border: 1px solid var(--line);
  border-radius: 999px; padding: .4rem .8rem;
  font-size: .88rem; font-weight: 600; color: var(--ink-700);
  box-shadow: 0 1px 2px rgba(5, 51, 113, .04);
}
@media (max-width: 720px) {
  .trust-pills li { font-size: .92rem; padding: .45rem .85rem; }
}
.trust-pills__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent-600); flex: none;
}

/* Big tap-to-call pill. */
.phone-cta {
  display: inline-flex; align-items: center; gap: 1rem;
  padding: .85rem 1.3rem .85rem 1rem; border-radius: 18px;
  background: var(--accent-600); color: #fff !important;
  box-shadow: 0 12px 28px rgba(15, 118, 110, .35);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.phone-cta:hover {
  background: var(--accent-500); color: #fff !important; text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 16px 32px rgba(15, 118, 110, .42);
}
.phone-cta__icon {
  width: 48px; height: 48px; border-radius: 14px;
  background: rgba(255,255,255,.18);
  display: grid; place-items: center; font-size: 1.4rem; flex: none;
}
.phone-cta__body { display: flex; flex-direction: column; line-height: 1.15; }
.phone-cta__body small { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.phone-cta__body strong { font-size: 1.55rem; letter-spacing: .02em; font-weight: 800; }

@media (max-width: 720px) {
  .hero-clean { padding: 1.8rem 0 3.6rem; }
  .hero-clean__copy h1 { font-size: 1.75rem; }
  .hero-clean__copy .lead { font-size: .98rem; }
  .phone-cta { width: 100%; justify-content: center; padding: .8rem 1rem; }
  .phone-cta__body strong { font-size: 1.3rem; }
}

/* --- Hero --------------------------------------------------------------- */
.hero {
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(238,108,77,.18), transparent 60%),
    linear-gradient(160deg, var(--primary-900), var(--primary-700));
  color: #fff; padding: 3.5rem 0 4rem;
}
.hero__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2rem; align-items: center; }
.hero h1 { color: #fff; }
.hero p { color: rgba(255,255,255,.9); font-size: 1.15rem; max-width: 40ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.4rem; }
.hero__card {
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--radius-lg); padding: 1.5rem; backdrop-filter: blur(6px);
}
.hero__stats { display: flex; gap: 1.5rem; margin-top: 1.6rem; flex-wrap: wrap; }
.hero__stat strong { display: block; font-size: 1.6rem; }
.hero__stat span { color: rgba(255,255,255,.8); font-size: .85rem; }
.trust-strip { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: center; color: var(--ink-500); font-weight: 600; }
.trust-strip span { display: inline-flex; align-items: center; gap: .4rem; }
.trust-strip svg { width: 18px; height: 18px; color: var(--primary-600); }

/* --- Forms -------------------------------------------------------------- */
.field { margin-bottom: 1.1rem; }
.field__label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: .35rem; color: var(--ink-700); }
@media (max-width: 720px) { .field__label { font-size: 1rem; } }
.field__label .req { color: var(--red); }
.field__input {
  width: 100%; padding: .7rem .85rem; border: 1px solid var(--line); border-radius: 10px;
  font: inherit; color: var(--ink-900); background: #fff; transition: border-color .15s, box-shadow .15s;
}
.field__input:focus { border-color: var(--primary-500); box-shadow: 0 0 0 3px rgba(238,108,77,.18); outline: none; }
.field__file { width: 100%; font: inherit; }
.field__hint { font-size: .9rem; color: var(--ink-500); margin-top: .3rem; }
.field__error { color: var(--red); font-size: .92rem; margin-top: .3rem; }
@media (max-width: 720px) {
  .field__hint { font-size: .95rem; }
  .field__error { font-size: 1rem; }
}
.field--invalid .field__input { border-color: var(--red); }
/* RadioSelect renders <div id="id_x"><div><label><input>…</label></div>…</div> */
.radio-row > div { display: flex; flex-wrap: wrap; gap: .5rem; }
.radio-row label {
  display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .8rem; border: 1px solid var(--line);
  border-radius: 10px; cursor: pointer; font-weight: 600; font-size: .9rem; background: #fff; margin: 0;
}
.radio-row label:hover { border-color: var(--primary-500); }
.radio-row input { accent-color: var(--primary-600); }
.radio-row input:checked + * , .radio-row label:has(input:checked) { color: var(--primary-700); }
.radio-row label:has(input:checked) { border-color: var(--primary-500); background: var(--primary-50); }
.checkbox-field { display: flex; gap: .6rem; align-items: flex-start; font-size: .92rem; color: var(--ink-700); }
.checkbox-field input { margin-top: .25rem; accent-color: var(--primary-600); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }

/* --- Badges / pills ----------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .6rem; border-radius: 999px;
  font-size: .78rem; font-weight: 700; line-height: 1;
}
.badge.is-new       { background: #dbeafe; color: #1d4ed8; }
.badge.is-contacted { background: #fef3c7; color: #b45309; }
.badge.is-scheduled { background: #e0e7ff; color: #4338ca; }
.badge.is-completed { background: #dcfce7; color: #15803d; }
.badge.is-cancelled { background: #fee2e2; color: #b91c1c; }
.pill {
  display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border-radius: 999px;
  background: var(--primary-50); color: var(--primary-700); font-weight: 600; font-size: .82rem;
}

/* --- Alerts / messages -------------------------------------------------- */
.alert { padding: .85rem 1.1rem; border-radius: 12px; margin-bottom: 1rem; font-weight: 600; border: 1px solid; }
.alert--success { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.alert--error   { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.alert--info    { background: var(--primary-50); border-color: var(--primary-100); color: var(--primary-700); }

/* --- Blog --------------------------------------------------------------- */
.post-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; }
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); text-decoration: none; }
.post-card__img { aspect-ratio: 16/9; object-fit: cover; width: 100%; background: var(--primary-50); }
.post-card__body { padding: 1.2rem; flex: 1; display: flex; flex-direction: column; }
.post-card__body h3 { margin-bottom: .4rem; }
.post-card__body p { color: var(--ink-500); font-size: .92rem; flex: 1; }
.post-meta { color: var(--ink-400); font-size: .82rem; display: flex; gap: .6rem; }
.article { max-width: 760px; margin-inline: auto; }
.article__body p { font-size: 1.08rem; color: var(--ink-700); }
.article__cover { border-radius: var(--radius); margin-bottom: 1.5rem; aspect-ratio: 16/8; object-fit: cover; width: 100%; }

/* --- Doctor profile ----------------------------------------------------- */
.profile-hero { display: grid; grid-template-columns: 280px 1fr; gap: 2rem; align-items: start; }
.profile-photo { border-radius: var(--radius-lg); aspect-ratio: 3/4; object-fit: cover; width: 100%; box-shadow: var(--shadow); background: var(--primary-50); }
.profile-photo--empty { display: grid; place-items: center; color: var(--primary-600); }
.cred-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.cred-list li { display: flex; gap: .6rem; align-items: flex-start; }
.cred-list svg { width: 20px; height: 20px; color: var(--primary-600); flex: none; margin-top: .15rem; }

/* --- Map / estimate ----------------------------------------------------- */
#map { height: 320px; border-radius: var(--radius); border: 1px solid var(--line); z-index: 1; }
.estimate {
  margin-top: 1rem; padding: 1.1rem; border-radius: var(--radius); border: 1px dashed var(--primary-500);
  background: var(--primary-50);
}
.estimate__price { font-size: 1.8rem; font-weight: 800; color: var(--primary-700); }
.estimate.is-out { border-color: var(--amber); background: #fffbeb; }

/* --- Footer ------------------------------------------------------------- */
.site-footer { background: var(--primary-900); color: rgba(255,255,255,.82); padding: 3rem 0 1.5rem; margin-top: 3rem; }
.site-footer h4 { color: #fff; font-size: .95rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 1rem; }
.site-footer a { color: rgba(255,255,255,.82); }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2rem; }
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; font-size: .92rem; }
/* Contact rows pair an icon with text that can wrap to two lines (the clinic
   address does), so the icon pins to the first line rather than centring
   against the whole block. */
.footer-links li, .footer-links li a { display: flex; gap: .5rem; align-items: flex-start; }
.footer-links .icon { margin-top: .2em; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.15); margin-top: 2rem; padding-top: 1.2rem; font-size: .85rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }

/* Floating action cluster (mobile only). Call is the primary action,
   WhatsApp is a smaller round secondary above it. Hidden on desktop where
   the header CTA already does the job. */
.fab-cluster {
  position: fixed; right: 14px; bottom: 14px; z-index: 60;
  display: none; flex-direction: column; align-items: flex-end; gap: .55rem;
}
.fab {
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; color: #fff !important;
  border-radius: 50%; box-shadow: 0 10px 24px rgba(5, 51, 113, .22);
  width: 52px; height: 52px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.fab:hover { text-decoration: none; transform: scale(1.05); }
.fab:active { transform: scale(.96); }
.fab--call { background: var(--accent-600); }
.fab--call::before {
  /* Soft live pulse so the call FAB feels active without being noisy. */
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  background: var(--accent-600); opacity: .35;
  animation: fab-pulse 2.4s ease-out infinite; z-index: -1;
}
.fab--call:hover { background: var(--accent-500); }
.fab--wa { background: #25d366; width: 44px; height: 44px; }
.fab--wa:hover { background: #1ebe57; }

@keyframes fab-pulse {
  0%   { transform: scale(.85); opacity: .4; }
  70%  { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(1.25); opacity: 0; }
}

/* Show the FAB only on phones — desktops use the header CTA. */
.fab--call { position: relative; }
@media (max-width: 880px) {
  .fab-cluster { display: flex; }
}

/* --- Dashboard ---------------------------------------------------------- */
.dash { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.dash__side { background: var(--primary-900); color: #fff; padding: 1.3rem 1rem; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.dash__brand { color: #fff; font-weight: 800; font-size: 1.1rem; display: flex; gap: .5rem; align-items: center; margin-bottom: 1.5rem; }
.dash__nav { list-style: none; padding: 0; margin: 0; display: grid; gap: .25rem; }
.dash__nav a {
  display: flex; align-items: center; gap: .65rem; padding: .6rem .8rem; border-radius: 10px;
  color: rgba(255,255,255,.82); font-weight: 600; font-size: .92rem;
}
.dash__nav a:hover { background: rgba(255,255,255,.1); color: #fff; text-decoration: none; }
.dash__nav a.is-active { background: var(--primary-600); color: #fff; }
.dash__nav svg { width: 18px; height: 18px; }
.dash__badge { margin-left: auto; background: var(--accent-600); color: #fff; border-radius: 999px; font-size: .72rem; padding: .1rem .45rem; }
.dash__main { padding: 1.6rem 1.8rem; min-width: 0; }
.dash__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; }
.dash__head h1 { font-size: 1.6rem; margin: 0; }

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem; box-shadow: var(--shadow-sm); }
.stat__num { font-size: 2rem; font-weight: 800; line-height: 1; }
.stat__label { color: var(--ink-500); font-size: .85rem; margin-top: .35rem; }
.stat--accent { border-left: 4px solid var(--accent-600); }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
table.data { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.data th, table.data td { padding: .8rem .9rem; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.data th { background: var(--bg); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-500); }
table.data tr:hover td { background: var(--primary-50); }
table.data td.wrap { white-space: normal; min-width: 220px; }

.toolbar { display: flex; flex-wrap: wrap; gap: .6rem; align-items: end; margin-bottom: 1.2rem; }
.toolbar .field { margin: 0; }

.detail-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.5rem; align-items: start; }
.kv { display: grid; grid-template-columns: 140px 1fr; gap: .5rem .8rem; font-size: .93rem; }
.kv dt { color: var(--ink-500); font-weight: 600; }
.kv dd { margin: 0; }
.note { border-left: 3px solid var(--primary-500); padding: .5rem .8rem; background: var(--bg); border-radius: 0 8px 8px 0; margin-bottom: .7rem; }
.note small { color: var(--ink-400); }

/* --- Calendar ----------------------------------------------------------- */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal__dow { text-align: center; font-weight: 700; color: var(--ink-500); font-size: .8rem; padding: .4rem 0; }
.cal__cell { background: #fff; border: 1px solid var(--line); border-radius: 10px; min-height: 96px; padding: .4rem; font-size: .8rem; }
.cal__cell.is-out { background: var(--bg); color: var(--ink-400); }
.cal__cell.is-today { border-color: var(--primary-500); box-shadow: 0 0 0 2px var(--primary-100); }
.cal__day { font-weight: 700; }
.cal__event { display: block; background: var(--primary-50); color: var(--primary-700); border-radius: 6px; padding: .15rem .35rem; margin-top: .25rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal__event:hover { text-decoration: none; background: var(--primary-100); }

/* --- Utilities ---------------------------------------------------------- */
.text-center { text-align: center; }
.muted { color: var(--ink-500); }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; }
.flex { display: flex; } .items-center { align-items: center; } .gap-1 { gap: .5rem; } .gap-2 { gap: 1rem; }
.between { justify-content: space-between; }
.wrap-flex { flex-wrap: wrap; }
.divider { height: 1px; background: var(--line); border: 0; margin: 1.3rem 0; }
.tag-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--ink-500); }
.list-check { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.list-check li { display: flex; gap: .5rem; align-items: flex-start; }
.list-check svg { width: 18px; height: 18px; color: var(--primary-600); flex: none; margin-top: .2rem; }

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 960px) {
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .hero__grid { grid-template-columns: 1fr; }
  .profile-hero { grid-template-columns: 1fr; }
  .profile-photo { max-width: 280px; }
  .detail-grid { grid-template-columns: 1fr; }
  /* On phones, sidebar (Call card) jumps above the form so calling is the
     first option a patient sees on a service page. */
  .detail-grid > aside { order: -1; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .dash { grid-template-columns: 1fr; }
  .dash__side { position: static; height: auto; display: flex; flex-direction: column; }
  .dash__nav { grid-auto-flow: column; overflow-x: auto; }
  .dash__nav a { white-space: nowrap; }
}
@media (max-width: 720px) {
  .nav__burger { display: inline-flex; margin-left: .25rem; }
  .nav { gap: .4rem; }
  .nav__links {
    position: absolute; top: 68px; left: 0; right: 0; background: #fff; flex-direction: column;
    align-items: stretch; padding: .8rem 1.1rem; border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
    display: none; margin-left: 0;
  }
  .nav__links a { padding: .7rem .6rem; }
  .nav__toggle:checked ~ .nav__links { display: flex; }
  /* CTA stays visible at all times on phones — pushed to the right edge. */
  .nav__cta { margin-left: auto; padding: .55rem .8rem; font-size: .82rem; }
  /* Shrink the lockup so the call CTA keeps its room on narrow phones. */
  .brand__logo { height: 44px; }
  .grid--2 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero__stats { gap: 1rem; }

  /* Compact service tiles so all six fit at a glance on a phone. */
  .grid--3 { grid-template-columns: repeat(2, 1fr); gap: .7rem; }
  .service-card { padding: 1rem .85rem; border-radius: 14px; text-align: center; align-items: center; }
  .service-card__icon { width: 52px; height: 52px; border-radius: 12px; margin: 0 auto .6rem; }
  .service-card__icon svg { width: 26px; height: 26px; }
  .service-card h3 { font-size: 1.02rem; margin-bottom: .25rem; line-height: 1.25; }
  .service-card p {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; font-size: .82rem; margin-bottom: 0; line-height: 1.35;
  }
  .service-card__cta { display: none; }
  .service-card .btn { padding: .45rem .6rem; font-size: .8rem; margin-top: .35rem; }
}
@media (max-width: 380px) {
  .grid--3 { gap: .5rem; }
  .service-card { padding: .7rem .55rem; }
  .service-card h3 { font-size: .9rem; }
}