/* ==========================================================================
   Bhagwat Children's & Multispeciality Hospital — Chandrapur
   Design system + components. No frameworks, no external requests.
   ========================================================================== */

/* --------------------------------------------------------------- tokens */
:root {
  /* Brand teal, sampled from the hospital logo and building signage. */
  --teal-900: #06302f;
  --teal-800: #0a4a48;
  --teal-700: #0d6e68;
  --teal-600: #12897f;
  --teal-500: #17a396;
  --teal-100: #cdf2ec;
  --teal-50: #f0fbf9;

  /* Warm gold from the logo's caduceus — used very sparingly. */
  --gold-600: #a97f1f;
  --gold-100: #f6ecd2;

  --ink: #0d1b2a;
  --body: #4a5a6b;
  --muted: #7c8b9c;
  --line: #e4ecef;
  --line-strong: #cfdde2;
  --surface: #ffffff;
  --surface-soft: #f6fafb;
  --surface-mint: #f2fbf9;

  /* Emergency red — the only colour on the site that is not brand teal, and it
     is kept for the emergency affordances alone. Spread it any wider and it
     stops reading as a signal. */
  --red-700: #b42318;
  --red-600: #d92d20;
  --red-300: #fda29b;  /* for the dark teal strips, where the deep red goes muddy */
  --red-100: #fecdca;
  --red-50: #fef3f2;

  --danger: var(--red-700);

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --pill: 999px;

  --shadow-xs: 0 1px 2px rgba(13, 27, 42, 0.05);
  --shadow-sm: 0 1px 3px rgba(13, 27, 42, 0.06), 0 4px 10px -4px rgba(13, 27, 42, 0.08);
  --shadow-md: 0 4px 12px -2px rgba(13, 27, 42, 0.07), 0 12px 28px -8px rgba(13, 27, 42, 0.1);
  --shadow-lg: 0 18px 44px -16px rgba(13, 27, 42, 0.22);

  --container: 1200px;
  --gutter: clamp(16px, 4vw, 24px);
  --section-y: clamp(56px, 8vw, 104px);
  --header-h: 76px;

  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--body);
  background: var(--surface);
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--teal-700); text-decoration: none; }
a:hover { color: var(--teal-800); }

h1, h2, h3, h4 {
  margin: 0 0 0.5em;
  color: var(--ink);
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.05rem, 5.4vw, 3.5rem); line-height: 1.08; }
h2 { font-size: clamp(1.65rem, 3.6vw, 2.5rem); }
h3 { font-size: clamp(1.05rem, 1.7vw, 1.22rem); font-weight: 700; letter-spacing: -0.01em; }
h4 { font-size: 1rem; font-weight: 700; }
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding: 0; }

:focus-visible {
  outline: 3px solid var(--teal-500);
  outline-offset: 2px;
  border-radius: 4px;
}

[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

.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: absolute; left: 16px; top: -100px; z-index: 200;
  background: var(--teal-700); color: #fff;
  padding: 12px 20px; border-radius: var(--radius-sm);
  font-weight: 600; transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 16px; color: #fff; }

/* ---------------------------------------------------------------- layout */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--soft { background: var(--surface-soft); }
.section--mint { background: var(--surface-mint); }
.section--tight { padding-block: clamp(44px, 6vw, 72px); }

.section__head { max-width: 760px; margin-bottom: clamp(32px, 4.5vw, 56px); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head p { font-size: 1.06rem; color: var(--body); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--teal-700);
}
.eyebrow::before {
  content: "";
  width: 22px; height: 2px;
  background: var(--teal-500);
  border-radius: 2px;
}
.eyebrow--center::before { display: none; }

.grid { display: grid; gap: clamp(18px, 2.4vw, 26px); }
/* These grids hold a fixed number of cards, so the column counts are stated
   outright. `auto-fit` sized tracks to whatever the viewport allowed, which gave
   a long speciality list four cramped columns and left odd lists with a stranded
   final card. */
.grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }

@media (min-width: 560px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 940px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1060px) {
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* A card left alone on the last row is placed deliberately rather than left
   hanging beside empty tracks. Only .grid--3 needs this: its counts of 3, 7 and
   9 are odd, so it strands a card at both column widths. */
@media (min-width: 560px) and (max-width: 939px) {
  .grid--3 > :last-child:nth-child(odd) { grid-column: span 2; }
}

@media (min-width: 940px) {
  .grid--3 > :last-child:nth-child(3n + 1) { grid-column: 2; }
}

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 13px 26px;
  border: 1.5px solid transparent;
  border-radius: var(--pill);
  font-family: inherit;
  font-size: 0.97rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease),
              background-color 0.18s var(--ease), color 0.18s var(--ease),
              border-color 0.18s var(--ease);
}
.btn svg { flex: none; }

.btn--primary {
  background: var(--teal-700);
  color: #fff;
  box-shadow: 0 6px 16px -6px rgba(13, 110, 104, 0.55);
}
.btn--primary:hover {
  background: var(--teal-800);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -8px rgba(13, 110, 104, 0.5);
}
.btn--outline {
  background: var(--surface);
  color: var(--teal-800);
  border-color: var(--line-strong);
}
.btn--outline:hover {
  border-color: var(--teal-600);
  color: var(--teal-800);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.btn--ghost-light {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}
.btn--ghost-light:hover { background: rgba(255, 255, 255, 0.2); color: #fff; }
.btn--light { background: #fff; color: var(--teal-800); }
.btn--light:hover { background: #fff; color: var(--teal-900); transform: translateY(-2px); }
.btn--block { width: 100%; }
.btn--sm { min-height: 42px; padding: 10px 20px; font-size: 0.9rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ------------------------------------------------------ emergency accent */
/* Marks an emergency affordance and nothing else: the topbar line, the footer
   line, and the emergency icons on the Facilities and Contact pages. The list
   items and chips that merely mention emergency stay teal — they describe what
   the hospital offers rather than asking anyone to act. */
.is-emergency,
.is-emergency svg { color: var(--red-700); }

/* Against teal-900 the deep red loses its punch, so the dark strips take the
   lighter tint instead. */
.topbar .is-emergency,
.topbar .is-emergency svg,
.footer .is-emergency,
.footer .is-emergency svg { color: var(--red-300); }

/* ---------------------------------------------------------------- topbar */
.topbar {
  background: var(--teal-900);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.83rem;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 40px;
}
.topbar__item { display: inline-flex; align-items: center; gap: 8px; }
.topbar__item svg { color: var(--teal-100); flex: none; }
.topbar__meta { display: flex; align-items: center; gap: 22px; }
.topbar a { color: rgba(255, 255, 255, 0.85); }
.topbar a:hover { color: #fff; }

/* The certification leads the strip, so it lands directly above the emblem.
   A hairline pill marks it as a credential without shouting across the bar. */
.topbar__cert {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}
.topbar__cert svg { color: var(--teal-100); flex: none; }

/* Below this the strip's three items start to crowd. The emergency line also
   appears in the hero and the footer, so it is the one that steps aside. */
@media (max-width: 1120px) { .topbar__item--emergency { display: none; } }

@media (max-width: 860px) { .topbar { display: none; } }

/* ---------------------------------------------------------------- header */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.25s var(--ease), background-color 0.25s var(--ease);
}
.header.is-stuck { box-shadow: var(--shadow-sm); background: rgba(255, 255, 255, 0.97); }

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: var(--header-h);
}

.brand { display: inline-flex; align-items: center; gap: 14px; color: inherit; }
.brand:hover { color: inherit; }
.brand__mark { width: 50px; height: 50px; flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1.12; }
/* The hospital's own wordmark, sliced out of the logo file with the baked-in
   "Multispeciality Hospital" tagline removed — the line below it carries the
   full name instead, so the tagline would only repeat itself. */
.brand__wordmark { width: 200px; height: auto; display: block; }
/* The descriptor matches the logo's own tagline. It is centred against the
   wordmark: the column is as wide as the 200px artwork, and the shorter line
   would otherwise hang off its left edge. */
.brand__text small {
  text-align: center;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.nav { display: flex; align-items: center; gap: 2px; }
.nav__link {
  position: relative;
  display: inline-block;
  padding: 10px 13px;
  border-radius: var(--radius-sm);
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  transition: color 0.16s var(--ease), background-color 0.16s var(--ease);
}
.nav__link:hover { color: var(--teal-700); background: var(--teal-50); }
.nav__link[aria-current="page"] { color: var(--teal-700); }
.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 13px; right: 13px; bottom: 4px;
  height: 2px;
  background: var(--teal-500);
  border-radius: 2px;
}

.header__actions { display: flex; align-items: center; gap: 10px; }

.nav-toggle {
  display: none;
  width: 46px; height: 46px;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1.5px solid var(--line-strong);
  border-radius: 12px;
  cursor: pointer;
  color: var(--ink);
}
.nav-toggle:hover { border-color: var(--teal-600); }
.nav-toggle__bars { position: relative; width: 19px; height: 13px; }
.nav-toggle__bars span {
  position: absolute;
  left: 0;
  width: 100%; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 5.5px; }
.nav-toggle__bars span:nth-child(3) { top: 11px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 1080px) {
  .brand__mark { width: 44px; height: 44px; }
  .brand__wordmark { width: 168px; }
  .brand__text small { font-size: 0.62rem; }
  /* The footer's brand column is at its narrowest just above the 900px
     two-column switch, so it steps down with the header rather than wrapping. */
  .footer__brand-mark { width: 44px; height: 44px; }
  .footer__brand-wordmark { width: 140px; }
  .footer__brand small { font-size: 0.62rem; }
  .nav-toggle { display: inline-flex; }
  .header__actions .btn { display: none; }

  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(340px, 88vw);
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 88px 20px 28px;
    background: var(--surface);
    box-shadow: -16px 0 48px -20px rgba(13, 27, 42, 0.3);
    transform: translateX(102%);
    visibility: hidden;
    transition: transform 0.3s var(--ease), visibility 0.3s;
    overflow-y: auto;
    /* Below the header (z-index 100) so the close button stays clickable,
       above the scrim (90) so the panel itself is never dimmed. */
    z-index: 95;
  }
  .nav.is-open { transform: translateX(0); visibility: visible; }
  .nav__link {
    padding: 15px 16px;
    border-radius: var(--radius-sm);
    font-size: 1.02rem;
    border-bottom: 1px solid var(--line);
  }
  .nav__link[aria-current="page"] { background: var(--teal-50); }
  .nav__link[aria-current="page"]::after { display: none; }
  .nav__cta { margin-top: 18px; }
  .nav__cta .btn { display: inline-flex; width: 100%; }
}

.nav-scrim {
  position: fixed;
  inset: 0;
  background: rgba(13, 27, 42, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0.3s;
  z-index: 90;
}
.nav-scrim.is-open { opacity: 1; visibility: visible; }

@media (min-width: 1081px) { .nav__cta { display: none; } }

/* ------------------------------------------------------------------ hero */
.hero {
  position: relative;
  padding-block: clamp(48px, 7vw, 88px) clamp(56px, 8vw, 96px);
  background:
    radial-gradient(1000px 520px at 88% -12%, var(--teal-100) 0%, rgba(205, 242, 236, 0) 62%),
    radial-gradient(760px 420px at 4% 8%, var(--surface-mint) 0%, rgba(242, 251, 249, 0) 60%),
    var(--surface);
  overflow: hidden;
}
.hero__inner {
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.hero__content { max-width: 620px; }
.hero h1 { margin-bottom: 18px; }
.hero__lead {
  font-size: clamp(1.04rem, 1.5vw, 1.16rem);
  color: var(--body);
  margin-bottom: 28px;
  max-width: 54ch;
}

.hero__points {
  display: grid;
  gap: 10px;
  margin-top: 30px;
  list-style: none;
}
.hero__points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
}
.hero__points svg { flex: none; margin-top: 2px; color: var(--teal-600); }

.hero__media { position: relative; }
.hero__frame {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 4.6;
  background: var(--surface-soft);
}
.hero__frame img { width: 100%; height: 100%; object-fit: cover; }

.hero__badge {
  position: absolute;
  left: -14px;
  bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--line);
  /* The callout is the link itself rather than a card holding one, so the whole
     thing is a single tap target on a phone. */
  text-decoration: none;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
a.hero__badge:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
/* The hero callout is the one emergency affordance given a filled red surface,
   so it carries from across the page. */
.hero__badge-icon {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 11px;
  background: var(--red-600);
  color: #fff;
  flex: none;
}
.hero__badge strong { display: block; font-size: 0.95rem; color: var(--red-700); line-height: 1.25; }
.hero__badge span { font-size: 0.8rem; color: var(--muted); }
/* "Call Now" reads as the action, not as a caption under the heading. */
.hero__badge-cta { color: var(--red-700) !important; font-weight: 700; }
.hero__badge-chevron { flex: none; color: var(--red-700); }

@media (max-width: 940px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__content { max-width: none; }
  .hero__media { max-width: 460px; margin-inline: auto; width: 100%; }
  .hero__badge { left: 12px; }
}

/* --------------------------------------------------------------- trustbar */
.trustbar {
  border-block: 1px solid var(--line);
  background: var(--surface);
}
.trustbar__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
}
@media (min-width: 760px) { .trustbar__inner { grid-template-columns: repeat(3, 1fr); } }
.trustbar__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 26px clamp(16px, 3vw, 28px);
  background: var(--surface);
}
.trustbar__icon {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  flex: none;
  border-radius: 13px;
  background: var(--teal-50);
  color: var(--teal-700);
}
.trustbar__item h3 { margin-bottom: 3px; font-size: 1rem; }
.trustbar__item p { font-size: 0.88rem; color: var(--muted); margin: 0; }

/* -------------------------------------------------------------- about/intro */
.split {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(32px, 5vw, 68px);
  align-items: center;
}
.split--reverse .split__media { order: 2; }

.split__media { position: relative; }
.split__media img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 3.4;
  object-fit: cover;
}
.split__media--tall img { aspect-ratio: 4 / 4.4; }

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
}

.stat-chip {
  position: absolute;
  right: -12px;
  bottom: -18px;
  padding: 16px 20px;
  background: var(--teal-800);
  color: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  max-width: 220px;
}
.stat-chip strong { display: block; font-size: 1.3rem; line-height: 1.1; }
.stat-chip span { font-size: 0.82rem; opacity: 0.85; }
@media (max-width: 520px) { .stat-chip { right: 0; bottom: -14px; max-width: 190px; padding: 13px 16px; } }

/* ----------------------------------------------------------------- cards */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 2.6vw, 30px);
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease),
              border-color 0.22s var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-strong);
}
.card h3 { margin-bottom: 8px; }
.card p { font-size: 0.94rem; color: var(--body); margin: 0; }

.card__icon {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  margin-bottom: 18px;
  border-radius: 15px;
  background: var(--teal-50);
  color: var(--teal-700);
  transition: background-color 0.22s var(--ease), color 0.22s var(--ease);
}
.card:hover .card__icon { background: var(--teal-700); color: #fff; }
/* The emergency card stays red on hover rather than following the others. */
.card__icon.is-emergency { background: var(--red-50); color: var(--red-700); }
.card:hover .card__icon.is-emergency { background: var(--red-600); color: #fff; }

.card--plain:hover { transform: none; box-shadow: var(--shadow-sm); }
.card--plain:hover .card__icon { background: var(--teal-50); color: var(--teal-700); }

.card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--teal-700);
}
.card__link svg { transition: transform 0.2s var(--ease); }
.card:hover .card__link svg { transform: translateX(3px); }

/* ------------------------------------------------------------------ video */
/* The walkthrough animation stands in for the four steps it illustrates, so it
   gets the width of the section rather than a column, and a soft frame so the
   clip's own white ground reads as deliberate against the page. */
.visit-video { margin: 0; }
.visit-video__player {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  background: #fff;
}
.visit-video figcaption {
  max-width: 62ch;
  margin: 16px auto 0;
  text-align: center;
  font-size: 0.88rem;
  color: var(--muted);
}


/* ----------------------------------------------------------------- doctor */
.doctor {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: clamp(28px, 4.5vw, 60px);
  align-items: center;
}
.doctor__media img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 4.8;
  object-fit: cover;
  object-position: top center;
}
.doctor__role {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px;
  margin-bottom: 16px;
  border-radius: var(--pill);
  background: var(--teal-50);
  color: var(--teal-800);
  font-size: 0.83rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.doctor__note {
  display: flex;
  gap: 12px;
  margin-top: 22px;
  padding: 16px 18px;
  border-radius: var(--radius);
  background: var(--surface-soft);
  border: 1px solid var(--line);
  font-size: 0.9rem;
  color: var(--body);
}
.doctor__note svg { flex: none; color: var(--teal-600); margin-top: 3px; }

@media (max-width: 900px) {
  .doctor { grid-template-columns: 1fr; }
  .doctor__media { max-width: 380px; margin-inline: auto; width: 100%; }
}

/* -------------------------------------------------------------------- faq */
.faq { max-width: 840px; margin-inline: auto; }
.faq__item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.faq__item[open] { border-color: var(--teal-100); box-shadow: var(--shadow-sm); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 19px clamp(18px, 2.4vw, 24px);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--teal-700); }
.faq__mark {
  position: relative;
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--teal-50);
}
.faq__mark::before,
.faq__mark::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 10px; height: 2px;
  border-radius: 2px;
  background: var(--teal-700);
  transform: translate(-50%, -50%);
  transition: transform 0.24s var(--ease), opacity 0.24s var(--ease);
}
.faq__mark::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item[open] .faq__mark::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }
.faq__a {
  padding: 0 clamp(18px, 2.4vw, 24px) 20px;
  font-size: 0.95rem;
  color: var(--body);
}
.faq__a p { margin: 0; }

/* -------------------------------------------------------------------- cta */
.cta {
  position: relative;
  background: linear-gradient(135deg, var(--teal-800) 0%, var(--teal-900) 100%);
  color: #fff;
  border-radius: var(--radius-xl);
  padding: clamp(34px, 5vw, 64px);
  overflow: hidden;
}
.cta::after {
  content: "";
  position: absolute;
  right: -120px; top: -120px;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(23, 163, 150, 0.4) 0%, rgba(23, 163, 150, 0) 68%);
  pointer-events: none;
}
.cta__inner { position: relative; z-index: 1; max-width: 640px; }
.cta h2 { color: #fff; }
.cta p { color: rgba(255, 255, 255, 0.88); font-size: 1.06rem; margin-bottom: 26px; }

/* -------------------------------------------------------------- commitment */
.commitment {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.commitment__list { list-style: none; display: grid; gap: 18px; }
.commitment__list li { display: flex; gap: 14px; align-items: flex-start; }
.commitment__list svg { flex: none; margin-top: 4px; color: var(--teal-600); }
.commitment__list strong { display: block; color: var(--ink); font-size: 1rem; margin-bottom: 2px; }
.commitment__list span { font-size: 0.92rem; }

@media (max-width: 880px) { .commitment { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- gallery */
.gallery {
  display: grid;
  /* Five tiles: one wide plus four single. Two columns stack them as a full
     wide row then two rows of two; three columns give a tidy 3 + 3. */
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(14px, 2vw, 20px);
}
@media (min-width: 1024px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
.gallery__item {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-soft);
  box-shadow: var(--shadow-xs);
}
.gallery__item img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3.2;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.gallery__item:hover img { transform: scale(1.045); }
.gallery__item--wide { grid-column: span 2; }
.gallery__item--wide img { aspect-ratio: 8 / 3.4; }
.gallery__cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: 30px 18px 14px;
  background: linear-gradient(to top, rgba(6, 48, 47, 0.82), rgba(6, 48, 47, 0));
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
}
@media (max-width: 640px) {
  .gallery { gap: 12px; }
  .gallery__item--wide { grid-column: span 2; }
  .gallery__item img { aspect-ratio: 1 / 1; }
  .gallery__item--wide img { aspect-ratio: 16 / 9; }
  .gallery__cap { padding: 22px 12px 10px; font-size: 0.8rem; }
}

/* ---------------------------------------------------------------- contact */
.contact {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(28px, 4vw, 52px);
  align-items: start;
}
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }
/* Grid items default to a min-content floor. Letting them shrink is what keeps
   a long word or a form control from widening the column past the viewport. */
.contact > * { min-width: 0; }

.contact-list { list-style: none; display: grid; gap: 14px; margin-top: 26px; }
/* The website address is one unbreakable token about 255px wide. On a 320px
   screen that single word was setting the list item's min-content floor and
   holding the whole section wider than the viewport, which cut off the Get
   Directions button beside it. Let the token break rather than the layout. */
.contact-list > li { min-width: 0; }
.contact-list { overflow-wrap: anywhere; }
.contact-list li {
  display: flex;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.contact-list__icon {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  flex: none;
  border-radius: 12px;
  background: var(--teal-50);
  color: var(--teal-700);
}
.contact-list__icon.is-emergency { background: var(--red-50); color: var(--red-700); }
.contact-list h3 { font-size: 0.96rem; margin-bottom: 3px; }
.contact-list p { font-size: 0.92rem; margin: 0; color: var(--body); }
.contact-list a { font-weight: 600; }

.placeholder {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--gold-100);
  color: var(--gold-600);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ------------------------------------------------------------------ form */
.form-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3.4vw, 38px);
  box-shadow: var(--shadow-sm);
}
/* auto-fit with a min() track lets the pair fall back to one column when the
   card is narrow. A plain `1fr 1fr` cannot: a form control carries an intrinsic
   default width, `1fr` means minmax(auto, 1fr), and that auto floor is the
   input's own width -- so two fields held the column open at ~351px and the
   whole contact section overflowed a 320px screen. */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 18px;
}
.form-field { display: flex; flex-direction: column; gap: 7px; }
.form-field--full { grid-column: 1 / -1; }
.form-field label { font-size: 0.88rem; font-weight: 700; color: var(--ink); }
.form-field .opt { font-weight: 500; color: var(--muted); }
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  /* Without this the control's intrinsic width is a floor the grid track cannot
     shrink past, which pushes the whole card wider than a narrow screen. */
  min-width: 0;
  min-height: 48px;
  padding: 12px 15px;
  font-family: inherit;
  font-size: 0.96rem;
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.form-field textarea { min-height: 118px; resize: vertical; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--teal-600);
  box-shadow: 0 0 0 4px rgba(23, 163, 150, 0.14);
}
/* Flag a field only once the visitor has engaged with it. Plain :invalid lit up
   the required date field on load, because date inputs never match
   :placeholder-shown — so they are excluded here and rely on :user-invalid.
   Kept as two rules so a browser without :user-invalid drops only the second. */
.form-field input:invalid:not(:placeholder-shown):not([type="date"]) { border-color: var(--danger); }
.form-field input:user-invalid { border-color: var(--danger); }
.form-note {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  border: 1px solid var(--line);
  font-size: 0.86rem;
  color: var(--muted);
}
.form-note svg { flex: none; margin-top: 3px; color: var(--teal-600); }
.form-status {
  margin-top: 16px;
  padding: 15px 17px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  border: 1px solid var(--line-strong);
  background: var(--surface-soft);
  color: var(--ink);
}
.form-status[hidden] { display: none; }
.form-status strong { display: block; margin-bottom: 4px; }

@media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- page hero */
.page-hero {
  position: relative;
  padding-block: clamp(38px, 5vw, 62px);
  background:
    radial-gradient(760px 320px at 82% -30%, var(--teal-100) 0%, rgba(205, 242, 236, 0) 66%),
    var(--surface-mint);
  border-bottom: 1px solid var(--line);
}
.page-hero h1 { margin-bottom: 10px; max-width: 22ch; }
.page-hero p { font-size: 1.05rem; max-width: 62ch; margin: 0; }

.crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 0.85rem; color: var(--muted); margin-bottom: 14px; }
.crumbs a { color: var(--muted); font-weight: 600; }
.crumbs a:hover { color: var(--teal-700); }
.crumbs li { list-style: none; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; list-style: none; }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--line-strong); }

/* ------------------------------------------------------------------ misc */
.note-box {
  display: flex;
  gap: 14px;
  padding: 20px;
  border-radius: var(--radius);
  background: var(--surface-mint);
  border: 1px solid var(--teal-100);
  font-size: 0.94rem;
}
.note-box svg { flex: none; color: var(--teal-700); margin-top: 3px; }
.note-box--emergency { background: var(--red-50); border-color: var(--red-100); }
.note-box--emergency svg { color: var(--red-700); }
.note-box h3 { font-size: 1rem; margin-bottom: 4px; }
.note-box p { margin: 0; }

.chip-list { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border-radius: var(--pill);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
}
.chip svg { color: var(--teal-600); flex: none; }

/* ---------------------------------------------------------------- footer */
.footer {
  background: var(--teal-900);
  color: rgba(255, 255, 255, 0.72);
  padding-top: clamp(48px, 6vw, 72px);
  font-size: 0.93rem;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
  gap: clamp(28px, 4vw, 48px);
  padding-bottom: 44px;
}
.footer h3 {
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.footer a { color: rgba(255, 255, 255, 0.72); }
.footer a:hover { color: #fff; }
.footer p { color: rgba(255, 255, 255, 0.72); }

/* The same lockup as the header: the emblem, the hospital's own wordmark, and
   the descriptor centred beneath it. The wordmark is smaller than the header's
   because this column is a fraction of the footer grid rather than a full bar. */
.footer__brand { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
.footer__brand span { display: flex; flex-direction: column; line-height: 1.12; text-align: center; }
.footer__brand-mark { width: 50px; height: 50px; flex: none; }
/* The wordmark's navy and teal go to mud on the footer's dark strip, so this
   one placement flattens it to white. The header's copy sits on light ground
   and keeps the original colour. */
.footer__brand-wordmark { width: 168px; height: auto; display: block; filter: brightness(0) invert(1); }
.footer__brand small { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.footer__cert {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 15px;
  padding: 6px 14px 6px 11px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}
.footer__cert svg { color: var(--teal-100); flex: none; }

.footer__links { list-style: none; display: grid; gap: 11px; }
.footer__links a { display: inline-block; }
.footer__links a:hover { transform: translateX(2px); }

.footer__contact { list-style: none; display: grid; gap: 14px; }
.footer__contact li { display: flex; gap: 11px; align-items: flex-start; }
.footer__contact svg { flex: none; margin-top: 3px; color: var(--teal-500); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-block: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  font-size: 0.86rem;
}
.footer__bottom p { margin: 0; }

/* ------------------------------------------------- footer: social + credit */
/* The hospital has not published a social account anywhere in this project, so
   the four marks below render as inert badges -- there is no <a> to hover or
   focus, because pointing them at a guessed profile would misrepresent the
   hospital. When a verified URL arrives, wrapping the span in an anchor is the
   whole change: a.footer__social-mark is already styled. */
.footer h3.footer__social-title { margin: 26px 0 15px; }
.footer__social { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.footer__social-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.78);
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
a.footer__social-mark:hover,
a.footer__social-mark:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.42);
  color: #fff;
}
.footer__social svg { display: block; }

/* Sits below the copyright rule, quieter than everything above it. */
.footer__credit {
  padding-bottom: 26px;
  text-align: center;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
}
.footer__credit p { margin: 0; color: inherit; }
/* The registered company name is 239px unbroken and the narrowest container is
   288px, so it is held together and wraps as a unit. A forced <br> would break
   the line on desktop too; this only removes the break opportunity. */
.footer__credit a { color: rgba(255, 255, 255, 0.68); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.footer__credit a:hover { color: #fff; }

@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .footer__bottom { justify-content: flex-start; }
}

/* =================================================== added components ====
   Built for the brochure content: doctor cards, the location / QR card, the
   emergency band, registration details and the mobile action bar. They use the
   tokens above; nothing before this point is altered. */

/* --------------------------------------------------- topbar, on narrow */
/* The strip already drops the emergency line first. The address goes next, so
   the phone number — the one item that maps to a tap — is the last to stand. */
@media (max-width: 1120px) { .topbar__item--addr { display: none; } }

/* ------------------------------------------------------ footer details */
.footer .footer__legacy {
  margin: 0 0 12px;
  font-size: 0.86rem;
  font-style: italic;
  color: var(--teal-100);
}
.footer .footer__reg { text-align: right; line-height: 1.55; }

/* ------------------------------------------------------- mobile action bar */
/* The topbar carrying the phone number is hidden below 860px, so on a phone the
   two things a visitor most needs — calling and booking — get a bar of their
   own. The body is padded by its height so it never covers the page's end. */
.actionbar { display: none; }

@media (max-width: 860px) {
  .actionbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 20px -12px rgba(13, 27, 42, 0.35);
  }
  .actionbar__btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 54px;
    padding: 8px 6px;
    border: 1.5px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--teal-800);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
  }
  /* Three buttons at 320px leave roughly 88px each, and "Book Appointment" is
     wider than that on one line -- the label wraps to two rather than clipping. */
  .actionbar__btn span { display: block; }
  .actionbar__btn--call {
    background: var(--teal-700);
    border-color: var(--teal-700);
    color: #fff;
  }
  /* The one red surface on the bar, so emergency is found without reading. */
  .actionbar__btn--emergency {
    background: var(--red-50);
    border-color: var(--red-100);
    color: var(--red-700);
  }
  body { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------------------------------------------------------- doctor cards */
/* Portraits are real or they are an obvious placeholder. The hospital has
   supplied a photograph of Dr. Tushar M. Bhagwat only; every other doctor gets
   a featureless silhouette whose alt text says outright that it is a
   placeholder. Neither a stock face nor a generated one may stand in for a
   named doctor. */
.doc-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: clamp(20px, 2.4vw, 26px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease),
              border-color 0.2s var(--ease);
}
.doc-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--teal-100);
}
/* The photo area. Swapping a placeholder for a real photograph is an asset
   replacement alone -- the box, its ratio and the badge stay put. */
.doc-card__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  margin-bottom: 15px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--teal-50);
}
.doc-card__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* The specialty mark: the one cue that says what field the doctor is in before
   the specialty line is read. */
.doc-card__badges {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: flex;
  gap: 6px;
}
.doc-card__badge {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--teal-100);
  color: var(--teal-700);
}
.doc-card h3 { font-size: 1.04rem; margin-bottom: 5px; }
.doc-card__qual {
  margin: 0 0 7px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--teal-700);
}
/* Inline rather than flex: one consultant's specialty runs to a second line, and
   a flex container would turn the <br> into a stray flex item. */
.doc-card__spec { margin: 0; font-size: 0.9rem; color: var(--body); }
.doc-card__spec svg {
  vertical-align: -3px;
  margin-right: 6px;
  color: var(--teal-600);
}

/* ------------------------------------------------------ hospital leadership */
/* The two consultants who practise at the hospital, set apart from the visiting
   specialists by size rather than by decoration. */
.lead-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: clamp(20px, 3vw, 34px);
  max-width: 920px;
  margin-inline: auto;
}
.leader {
  display: flex;
  flex-direction: column;
  padding: clamp(18px, 2.2vw, 26px);
  background: var(--surface);
  border: 1px solid var(--teal-100);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.leader__media {
  position: relative;
  aspect-ratio: 4 / 5;
  margin-bottom: 20px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--teal-50);
}
.leader__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Portraits are framed head-and-shoulders, so bias the crop upward rather
     than centring it on the chest. */
  object-position: 50% 22%;
}
.leader__badge {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--teal-100);
  color: var(--teal-700);
  box-shadow: var(--shadow-sm);
}
/* The designation sits above the name and carries the weight of the title. The
   homepage profile uses the same treatment, so the two read as one hierarchy. */
.leader__role,
.doctor__designation {
  display: block;
  margin: 0 0 9px;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal-700);
}
.doctor__designation { margin-top: 14px; }
.leader h3 { font-size: clamp(1.15rem, 2vw, 1.32rem); margin: 0 0 7px; }
.leader__qual {
  margin: 0 0 9px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--teal-700);
}
.leader__spec { margin: 0; font-size: 0.95rem; color: var(--body); }
.leader__spec svg {
  vertical-align: -3px;
  margin-right: 7px;
  color: var(--teal-600);
}

/* ------------------------------------------------------ location / QR card */
.qr-card {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.6vw, 26px);
  padding: clamp(20px, 2.6vw, 26px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.qr-card__img {
  flex: none;
  width: 152px;
  height: 152px;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.qr-card__label {
  margin: 0 0 6px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal-700);
}
.qr-card h3 { margin-bottom: 7px; }
.qr-card p { margin-bottom: 16px; font-size: 0.92rem; }
@media (max-width: 560px) {
  .qr-card { flex-direction: column; align-items: stretch; text-align: center; }
  .qr-card__img { align-self: center; }
  .qr-card .btn-row { justify-content: center; }
}

/* --------------------------------------------------------- emergency band */
/* The one place outside the topbar and footer where red is spent: it is the one
   place asking a visitor to act, rather than describing what the hospital has. */
.emergency-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: clamp(22px, 3vw, 30px);
  background: var(--red-50);
  border: 1px solid var(--red-100);
  border-radius: var(--radius-lg);
}
.emergency-band__text { display: flex; align-items: flex-start; gap: 15px; }
.emergency-band__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--red-600);
  color: #fff;
}
.emergency-band h2,
.emergency-band h3 { margin-bottom: 5px; color: var(--red-700); }
.emergency-band p { margin: 0; font-size: 0.94rem; color: var(--body); }

.btn--danger { background: var(--red-700); color: #fff; }
.btn--danger:hover {
  background: #8f1c12;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -10px rgba(180, 35, 24, 0.6);
}

/* ---------------------------------------------------- registration details */
.reg-list {
  list-style: none;
  margin-top: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.reg-list li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 18px;
  padding: 13px 18px;
  background: var(--surface);
  font-size: 0.92rem;
}
.reg-list li + li { border-top: 1px solid var(--line); }
.reg-list__k { color: var(--muted); font-weight: 600; }
.reg-list__v { color: var(--ink); font-weight: 700; }

/* ----------------------------------------------------------------- legacy */
.legacy {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  background: var(--teal-50);
  border-left: 3px solid var(--teal-600);
  border-radius: var(--radius-sm);
}
.legacy svg { flex: none; color: var(--teal-600); }
.legacy strong { display: block; color: var(--ink); }
.legacy span { font-size: 0.9rem; font-style: italic; color: var(--body); }

/* -------------------------------------------------------------- reveal fx */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

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