/* ============================================================
   Maruti Hospital design system.
   Warm, friendly, accessible. Multi-script (Latin/Devanagari/Gujarati).
   ============================================================ */

:root {
  /* Palette: warm hospital tones */
  --c-bg:           #FFF8F1;   /* cream surface */
  --c-bg-alt:       #FFEFDF;   /* slightly warmer band */
  --c-surface:      #FFFFFF;
  --c-ink:          #2B2118;   /* warm near-black */
  --c-ink-soft:     #5B4A3A;
  --c-muted:        #8A7766;

  --c-primary:      #0E7C66;   /* deep teal: calm, health */
  --c-primary-dark: #0A5C4C;
  --c-primary-soft: #D6EFE7;

  --c-accent:       #E0623A;   /* warm terracotta, friendly */
  --c-accent-soft:  #FBE3D7;

  --c-gold:         #E9A52E;   /* golden highlight */
  --c-success:      #2E7D32;
  --c-danger:       #C0392B;

  --c-border:       #EADBC8;
  --c-shadow:       0 4px 16px rgba(64, 38, 16, 0.08);
  --c-shadow-lg:    0 12px 32px rgba(64, 38, 16, 0.12);

  /* Typography */
  --f-body:    "Nunito", "Mukta", "Mukta Vaani", system-ui, -apple-system, sans-serif;
  --f-heading: "Mukta", "Nunito", system-ui, sans-serif;

  /* Scale (generous for readability) */
  --fs-xs:   0.875rem;
  --fs-sm:   1rem;
  --fs-base: 1.125rem;  /* 18px base */
  --fs-md:   1.25rem;
  --fs-lg:   1.5rem;
  --fs-xl:   2rem;
  --fs-2xl:  2.5rem;
  --fs-3xl:  3.25rem;

  /* Spacing */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;

  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --container: 1180px;
}

/* Devanagari / Gujarati glyph metrics tend to need slightly larger line-height */
html[lang="hi"], html[lang="gu"] {
  --f-body: "Mukta", "Nunito", system-ui, sans-serif;
  --f-heading: "Mukta", "Nunito", system-ui, sans-serif;
}

/* ===== Reset / base ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--f-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--c-primary-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  font-family: var(--f-heading);
  color: var(--c-ink);
  line-height: 1.2;
  margin: 0 0 var(--s-4);
  font-weight: 700;
}
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
p  { margin: 0 0 var(--s-4); }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--s-5); }

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-6);
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: var(--fs-base);
  font-family: var(--f-body);
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease;
  line-height: 1.1;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary {
  background: var(--c-primary);
  color: #fff;
  box-shadow: var(--c-shadow);
}
.btn-primary:hover { background: var(--c-primary-dark); }
.btn-accent {
  background: var(--c-accent);
  color: #fff;
  box-shadow: var(--c-shadow);
}
.btn-accent:hover { background: #C24E2A; }
.btn-ghost {
  background: var(--c-surface);
  color: var(--c-ink);
  border-color: var(--c-border);
}
.btn-ghost:hover { background: var(--c-bg-alt); }

.btn .icon { width: 1.25em; height: 1.25em; }

/* ===== Header ===== */
.site-header {
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  position: sticky;
  top: 0;
  z-index: 50;
}
.site-header .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  max-width: var(--container);
  margin: 0 auto;
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  text-decoration: none;
  color: var(--c-ink);
}
.brand img, .brand .brand-logo {
  width: 54px;
  height: 54px;
  border-radius: 12px;
  background: var(--c-primary-soft);
  display: grid;
  place-items: center;
  color: var(--c-primary-dark);
  font-weight: 800;
  font-size: 1.4rem;
}
.brand-name {
  font-family: var(--f-heading);
  font-weight: 800;
  font-size: 1.15rem;
  line-height: 1.15;
  display: block;
}
.brand-sub {
  font-size: 0.85rem;
  color: var(--c-muted);
  display: block;
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.primary-nav a {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius-pill);
  font-weight: 600;
  color: var(--c-ink);
}
.primary-nav a:hover { background: var(--c-bg-alt); text-decoration: none; }
.primary-nav a.is-active { background: var(--c-primary-soft); color: var(--c-primary-dark); }

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

/* Language switcher */
.lang-switch {
  display: inline-flex;
  background: var(--c-bg-alt);
  border-radius: var(--radius-pill);
  padding: 4px;
  gap: 2px;
}
.lang-switch button {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  color: var(--c-ink-soft);
  font-family: var(--f-body);
}
.lang-switch button[aria-pressed="true"] {
  background: var(--c-primary);
  color: #fff;
}

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  appearance: none;
  background: var(--c-bg-alt);
  border: 0;
  padding: var(--s-3);
  border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle svg { width: 28px; height: 28px; color: var(--c-ink); }

/* ===== Hero ===== */
.hero {
  background:
    radial-gradient(circle at 80% 0%, var(--c-accent-soft) 0%, transparent 55%),
    radial-gradient(circle at 0% 80%, var(--c-primary-soft) 0%, transparent 50%),
    var(--c-bg);
  padding: var(--s-8) 0 var(--s-9);
}
.hero .inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--s-8);
  align-items: center;
}
.hero h1 {
  font-size: clamp(2rem, 4.5vw, var(--fs-3xl));
  margin-bottom: var(--s-5);
}
.hero p.lead {
  font-size: var(--fs-md);
  color: var(--c-ink-soft);
  margin-bottom: var(--s-6);
  max-width: 38ch;
}
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}
.hero-trust {
  margin-top: var(--s-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  color: var(--c-ink-soft);
  font-weight: 600;
}
.hero-trust span { display: inline-flex; align-items: center; gap: var(--s-2); }
.hero-trust .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-primary);
}

.hero-art {
  background: var(--c-surface);
  border-radius: var(--radius-lg);
  padding: var(--s-6);
  box-shadow: var(--c-shadow-lg);
  border: 1px solid var(--c-border);
}
.hero-art .placeholder {
  aspect-ratio: 4/3;
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, var(--c-primary-soft), var(--c-accent-soft));
  display: grid;
  place-items: center;
  color: var(--c-primary-dark);
  font-weight: 700;
  font-family: var(--f-heading);
}

/* ===== Sections ===== */
section { padding: var(--s-8) 0; }
.section-head { text-align: center; margin-bottom: var(--s-7); }
.section-head .eyebrow {
  display: inline-block;
  font-weight: 700;
  color: var(--c-primary-dark);
  background: var(--c-primary-soft);
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  font-size: 0.9rem;
  margin-bottom: var(--s-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.section-head h2 { margin-bottom: var(--s-3); }
.section-head p {
  color: var(--c-ink-soft);
  max-width: 60ch;
  margin: 0 auto;
}

.band-alt { background: var(--c-bg-alt); }

/* ===== Cards ===== */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-5);
}
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: var(--s-6);
  box-shadow: var(--c-shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--c-shadow-lg); }
.card .card-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--c-primary-soft);
  color: var(--c-primary-dark);
  display: grid; place-items: center;
  margin-bottom: var(--s-4);
}
.card .card-icon svg { width: 28px; height: 28px; }
.card h3 { font-size: var(--fs-lg); margin-bottom: var(--s-2); }
.card p { color: var(--c-ink-soft); margin: 0; }

.card.accent .card-icon { background: var(--c-accent-soft); color: var(--c-accent); }
.card.gold .card-icon  { background: #FBEFCF; color: #A77410; }

/* ===== Doctor cards ===== */
.doctor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-6);
}
.doctor {
  background: var(--c-surface);
  border-radius: var(--radius);
  padding: var(--s-6);
  border: 1px solid var(--c-border);
  text-align: center;
  box-shadow: var(--c-shadow);
}
.doctor .avatar {
  width: 140px;
  height: 140px;
  margin: 0 auto var(--s-5);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-primary-soft), var(--c-accent-soft));
  display: grid; place-items: center;
  font-family: var(--f-heading);
  font-size: 3rem;
  color: var(--c-primary-dark);
  font-weight: 800;
  border: 4px solid var(--c-surface);
  box-shadow: var(--c-shadow);
}
.doctor h3 { margin-bottom: var(--s-2); }
.doctor .role {
  display: inline-block;
  font-weight: 700;
  color: var(--c-accent);
  margin-bottom: var(--s-3);
}
.doctor .creds {
  color: var(--c-ink-soft);
  font-size: var(--fs-sm);
  margin: 0;
}

/* ===== Info row (hours / contact strip) ===== */
.info-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-5);
}
.info-tile {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: var(--s-5);
  display: flex;
  gap: var(--s-4);
  align-items: flex-start;
}
.info-tile .info-icon {
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--c-primary-soft);
  color: var(--c-primary-dark);
  display: grid; place-items: center;
}
.info-tile .info-icon svg { width: 24px; height: 24px; }
.info-tile .info-label {
  font-size: var(--fs-sm);
  color: var(--c-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}
.info-tile .info-value {
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--c-ink);
  margin: 0;
}
.info-tile a { color: var(--c-primary-dark); }

/* ===== Call-out emergency / call strip ===== */
.callstrip {
  background: linear-gradient(135deg, var(--c-primary), var(--c-primary-dark));
  color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--s-7);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
}
.callstrip h2 { color: #fff; margin: 0 0 var(--s-2); }
.callstrip p { margin: 0; opacity: 0.92; }
.callstrip .btn-accent { background: #fff; color: var(--c-primary-dark); }
.callstrip .btn-accent:hover { background: var(--c-bg); }

/* ===== Gallery: masonry collage (no crop, natural aspect ratios) ===== */
.gallery {
  column-count: 3;
  column-gap: var(--s-4);
}
@media (max-width: 960px) { .gallery { column-count: 2; } }
@media (max-width: 560px) { .gallery { column-count: 1; } }

.gallery-item {
  break-inside: avoid;
  margin: 0 0 var(--s-4);
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(135deg, var(--c-primary-soft), var(--c-accent-soft));
  border: 1px solid var(--c-border);
  display: block;
  box-shadow: var(--c-shadow);
  /* Fallback look for placeholder/text items only */
  text-align: center;
  color: var(--c-primary-dark);
  font-weight: 700;
  font-family: var(--f-heading);
}
.gallery-item > span {
  display: block;
  padding: var(--s-7) var(--s-4);
}
.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
}

/* ===== Facilities list ===== */
.facility-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s-3);
  list-style: none;
  padding: 0;
  margin: 0;
}
.facility-list li {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: var(--s-4) var(--s-5);
  display: flex;
  align-items: center;
  gap: var(--s-4);
  font-weight: 600;
  color: var(--c-ink);
  transition: transform .12s ease, box-shadow .12s ease;
}
.facility-list li:hover {
  transform: translateY(-1px);
  box-shadow: var(--c-shadow);
}
.facility-list .check {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--c-primary-soft);
  color: var(--c-primary-dark);
  display: grid; place-items: center;
}
.facility-list .check svg { width: 18px; height: 18px; }

/* ===== Condition tag pills (psychiatry conditions) ===== */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  justify-content: center;
  margin-top: var(--s-5);
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--c-surface);
  color: var(--c-ink);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  font-weight: 600;
  font-size: 0.95rem;
  box-shadow: var(--c-shadow);
}
.tag::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-accent);
  flex-shrink: 0;
}
.tag:nth-child(3n+1)::before { background: var(--c-primary); }
.tag:nth-child(3n+2)::before { background: var(--c-accent); }
.tag:nth-child(3n+3)::before { background: var(--c-gold); }

/* ===== Doctor photo (replaces initials avatar when photo provided) ===== */
.doctor .avatar.has-photo {
  background: none;
  padding: 0;
  overflow: hidden;
}
.doctor .avatar.has-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===== Hero with banner image (full background) ===== */
.hero.has-banner {
  position: relative;
  isolation: isolate;
  background: var(--c-ink);
  padding: var(--s-9) 0;
  overflow: hidden;
}
.hero.has-banner .hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero.has-banner .hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.78) saturate(1.05);
}
.hero.has-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(135deg,
      rgba(14, 60, 50, 0.78) 0%,
      rgba(14, 60, 50, 0.55) 45%,
      rgba(224, 98, 58, 0.35) 100%);
}
.hero.has-banner .inner {
  grid-template-columns: 1fr;
  max-width: 820px;
  text-align: center;
  align-items: center;
}
.hero.has-banner h1,
.hero.has-banner p.lead,
.hero.has-banner .hero-trust,
.hero.has-banner .eyebrow {
  color: #fff;
}
.hero.has-banner p.lead { color: rgba(255, 248, 241, 0.92); max-width: 56ch; margin-left: auto; margin-right: auto; }
.hero.has-banner .eyebrow {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  backdrop-filter: blur(4px);
}
.hero.has-banner .hero-ctas { justify-content: center; }
.hero.has-banner .hero-trust { justify-content: center; }
.hero.has-banner .hero-trust .dot { background: var(--c-gold); }
.hero.has-banner .btn-ghost {
  background: rgba(255, 255, 255, 0.95);
  border-color: transparent;
}
.hero.has-banner .btn-ghost:hover { background: #fff; }

/* ===== Gallery photo items (in masonry collage) ===== */
.gallery-item.photo { background: var(--c-bg-alt); padding: 0; }
.gallery-item.photo img { transition: transform .35s ease; }
.gallery-item.photo:hover img { transform: scale(1.03); }

/* ===== FAQ ===== */
.faq-topic {
  max-width: 780px;
  margin: 0 auto;
}
.faq-topic-head {
  text-align: center;
  margin-bottom: var(--s-6);
}
.faq-topic-head h2 {
  display: inline-block;
  background: var(--c-primary-soft);
  color: var(--c-primary-dark);
  padding: 8px 22px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xl);
  margin-bottom: var(--s-4);
}
.faq-topic-head p {
  color: var(--c-ink-soft);
  max-width: 60ch;
  margin: 0 auto;
}
.faq-list {
  display: grid;
  gap: var(--s-4);
}
.faq-item {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: var(--s-6);
  box-shadow: var(--c-shadow);
}
.faq-item .q {
  font-family: var(--f-heading);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--c-primary-dark);
  margin: 0 0 var(--s-3);
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
}
.faq-item .q::before {
  content: "Q";
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--c-primary);
  color: #fff;
  display: grid; place-items: center;
  font-family: var(--f-heading);
  font-size: 1rem;
  font-weight: 800;
  margin-top: 2px;
}
.faq-item .a {
  color: var(--c-ink-soft);
  margin: 0;
  padding-left: calc(32px + var(--s-3));
  line-height: 1.7;
}
.faq-coming {
  background: var(--c-accent-soft);
  border-radius: var(--radius);
  padding: var(--s-6);
  text-align: center;
  margin-top: var(--s-7);
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid var(--c-border);
}
.faq-coming h3 {
  color: var(--c-accent);
  margin-bottom: var(--s-3);
}
.faq-coming p {
  color: var(--c-ink);
  margin: 0;
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}

/* ===== Hours table ===== */
.hours-table {
  width: 100%;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
}
.hours-table th, .hours-table td {
  padding: var(--s-4) var(--s-5);
  text-align: left;
  border-bottom: 1px solid var(--c-border);
}
.hours-table tr:last-child th, .hours-table tr:last-child td { border-bottom: 0; }
.hours-table th { font-family: var(--f-heading); color: var(--c-ink); font-weight: 700; }
.hours-table td { color: var(--c-ink-soft); text-align: right; }
.hours-table tr.closed td { color: var(--c-accent); font-weight: 700; }

/* ===== Map ===== */
.map-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--c-border);
  box-shadow: var(--c-shadow);
  background: var(--c-bg-alt);
}
.map-wrap iframe {
  width: 100%;
  height: 420px;
  border: 0;
  display: block;
}

/* ===== Footer ===== */
.site-footer {
  background: var(--c-ink);
  color: #F5E9D8;
  padding: var(--s-8) 0 var(--s-5);
  margin-top: var(--s-9);
}
.site-footer .inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--s-6);
}
.site-footer h4 {
  color: #fff;
  font-size: var(--fs-md);
  margin-bottom: var(--s-3);
}
.site-footer a { color: #F5E9D8; }
.site-footer a:hover { color: #fff; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
.site-footer p { color: #D7C5AD; margin: 0 0 var(--s-3); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  margin-top: var(--s-7);
  padding-top: var(--s-4);
  text-align: center;
  font-size: var(--fs-sm);
  color: #B6A28A;
}

/* ===== Page header (non-home pages) ===== */
.page-header {
  background:
    radial-gradient(circle at 90% 0%, var(--c-accent-soft) 0%, transparent 60%),
    radial-gradient(circle at 0% 100%, var(--c-primary-soft) 0%, transparent 50%),
    var(--c-bg);
  padding: var(--s-8) 0 var(--s-7);
  text-align: center;
}
.page-header h1 { font-size: clamp(2rem, 4vw, var(--fs-2xl)); margin-bottom: var(--s-3); }
.page-header p { color: var(--c-ink-soft); max-width: 60ch; margin: 0 auto; font-size: var(--fs-md); }

/* ===== Prose blocks ===== */
.prose {
  max-width: 70ch;
  margin: 0 auto;
}
.prose p { font-size: var(--fs-md); color: var(--c-ink-soft); }
.prose h2, .prose h3 { margin-top: var(--s-7); }

/* ===== Responsive ===== */
@media (max-width: 960px) {
  .hero .inner { grid-template-columns: 1fr; }
  .site-footer .inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  :root { --fs-base: 1.0625rem; }
  .nav-toggle { display: inline-grid; place-items: center; }
  .primary-nav {
    position: fixed;
    inset: 76px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--c-surface);
    padding: var(--s-4);
    gap: var(--s-2);
    border-bottom: 1px solid var(--c-border);
    box-shadow: var(--c-shadow);
    transform: translateY(-200%);
    transition: transform .25s ease;
  }
  .primary-nav.is-open { transform: translateY(0); }
  .primary-nav a { padding: var(--s-4); font-size: var(--fs-md); }
  .header-actions { gap: var(--s-2); }
  .callstrip { flex-direction: column; text-align: center; }
  .site-footer .inner { grid-template-columns: 1fr; }
  .hero { padding-top: var(--s-7); padding-bottom: var(--s-7); }
}

/* ===== Utility ===== */
.text-center { text-align: center; }
.mt-0 { margin-top: 0 !important; }
.mt-6 { margin-top: var(--s-6); }
.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;
}

/* Focus visibility */
:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: 4px;
}