/* =========================================================================
   Rm.S. Pusaliammal Nursing Home — landing page styles
   Palette sampled directly from the hospital logo:
     red #EE1C25 · blue #2E3094 · green #71BF47
   Layout, grid and components come from Bootstrap 5.3; this file only adds
   the brand layer on top.
   ------------------------------------------------------------------------
   1.  Tokens
   2.  Base & helpers
   3.  Top bar & navigation
   4.  Hero
   5.  Trust strip
   6.  Section furniture
   7.  About
   8.  Legacy / Since 1977
   9.  Specialities
   10. Facilities & schemes
   11. Why choose us
   12. Appointment form
   13. Contact & map
   14. Footer & floating controls
   15. Motion & responsive
   ========================================================================= */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  --red: #EE1C25;
  --red-dark: #C4141C;
  --red-strong: #D4161E;   /* 5.3:1 with white — for red behind/as normal-size text */
  --blue: #2E3094;
  --blue-deep: #1B1D63;
  --navy: #12143F;
  --green: #71BF47;
  --green-dark: #5AA134;

  --ink: #16193A;
  --body: #4E5473;
  --muted: #666C8A;        /* darkened: #7B819B gave only 3.6-3.9:1, under AA 4.5 */
  --line: #E4E7F2;
  --tint: #F5F7FC;
  --white: #FFFFFF;

  --grad-brand: linear-gradient(120deg, var(--blue) 0%, var(--red) 100%);
  --grad-dark: linear-gradient(155deg, #191C52 0%, var(--navy) 55%, #0D0F30 100%);

  --shadow-sm: 0 2px 10px rgba(18, 20, 63, .06);
  --shadow-md: 0 12px 30px rgba(18, 20, 63, .09);
  --shadow-lg: 0 26px 60px rgba(18, 20, 63, .16);

  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 34px;

  --ease: cubic-bezier(.22, .68, .28, 1);
  --nav-h: 78px;

  /* Single source of truth for vertical rhythm.
     ~44px on phones, ~68px on desktop — so the gap between two adjacent
     sections lands around 88px / 136px rather than doubling into a void. */
  --sp-section: clamp(2.75rem, 4.5vw, 4.25rem);
  --sp-head: clamp(1.75rem, 3vw, 2.5rem);   /* section heading -> its content */
  --sp-block: clamp(1.5rem, 2.5vw, 2rem);   /* stacked blocks inside a section */
}

/* ---------- 2. Base & helpers -------------------------------------------- */
* { scroll-margin-top: calc(var(--nav-h) + 14px); }

html { scroll-behavior: smooth; }

body {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--body);
  background: var(--white);
  font-size: 1rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  /* `clip`, not `hidden`: `hidden` would make overflow-y compute to `auto`,
     turning <body> into a scroll container and breaking Bootstrap ScrollSpy. */
  overflow-x: clip;
}
body:focus { outline: none; }

h1, h2, h3, h4, .h1, .h2, .h3 {
  color: var(--ink);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -.02em;
}

p { margin-bottom: 1.05rem; }

a { color: var(--blue); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--red); }

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

[lang="ta"] {
  font-family: "Noto Sans Tamil", "Plus Jakarta Sans", sans-serif;
  line-height: 1.9;
}

::selection { background: var(--red); color: #fff; }

:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: absolute;
  left: 50%;
  top: -80px;
  transform: translateX(-50%);
  z-index: 2000;
  background: var(--navy);
  color: #fff;
  padding: .7rem 1.4rem;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-weight: 600;
  transition: top .25s var(--ease);
}
.skip-link:focus { top: 0; color: #fff; }

.text-grad {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Scroll progress */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 1080;
  pointer-events: none;
}
.scroll-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--blue), var(--red) 60%, var(--green));
}

/* Buttons */
.btn {
  --bs-btn-padding-y: .72rem;
  --bs-btn-padding-x: 1.5rem;
  font-weight: 700;
  letter-spacing: .01em;
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  border: 0;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn-brand {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 8px 20px rgba(46, 48, 148, .28);
}
.btn-brand:hover, .btn-brand:focus {
  background: var(--blue-deep);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(46, 48, 148, .34);
}

.btn-emergency {
  background: var(--red-strong);
  color: #fff;
  box-shadow: 0 10px 26px rgba(238, 28, 37, .34);
}
.btn-emergency:hover, .btn-emergency:focus {
  background: var(--red-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(238, 28, 37, .42);
}
.btn-emergency span { line-height: 1.3; }
.btn-emergency strong { font-weight: 800; letter-spacing: .01em; }

.btn-ghost {
  background: rgba(255, 255, 255, .08);
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, .3);
}
.btn-ghost:hover, .btn-ghost:focus {
  background: #fff;
  color: var(--navy);
  transform: translateY(-2px);
}

.btn-lg { --bs-btn-padding-y: .9rem; --bs-btn-padding-x: 1.8rem; font-size: 1rem; }

/* Halftone dot motif, echoing the logo's dot fade */
.dots-motif {
  position: absolute;
  width: 340px;
  height: 340px;
  right: -60px;
  top: 6%;
  background-image: radial-gradient(currentColor 2px, transparent 2.5px);
  background-size: 22px 22px;
  color: rgba(255, 255, 255, .16);
  -webkit-mask-image: linear-gradient(105deg, #000, transparent 78%);
  mask-image: linear-gradient(105deg, #000, transparent 78%);
  pointer-events: none;
}
.dots-motif--left { right: auto; left: -70px; top: auto; bottom: 5%; }
.dots-motif--footer { color: rgba(255, 255, 255, .1); top: -30px; right: 4%; }

/* ---------- 3. Top bar & navigation -------------------------------------- */
.topbar {
  background: var(--navy);
  color: rgba(255, 255, 255, .78);
  font-size: .845rem;
  padding: .55rem 0;
}
.topbar-list {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.topbar-list li { display: flex; align-items: center; gap: .45rem; }
.topbar-list i { color: var(--green); font-size: .95em; }
.topbar a { color: rgba(255, 255, 255, .78); }
.topbar a:hover { color: #fff; }

.topbar-badge i { color: var(--green); }
.topbar-emergency {
  background: var(--red-strong);
  color: #fff;
  padding: .3rem 1rem;
  border-radius: 100px;
  font-weight: 600;
}
.topbar-emergency i { color: #fff; }
.topbar-emergency a { color: #fff; font-weight: 800; letter-spacing: .02em; }
.topbar-emergency a:hover { color: #fff; text-decoration: underline; }

.site-nav {
  background: #fff;
  padding: .7rem 0;
  position: sticky;
  top: 0;
  z-index: 1030;
  border-bottom: 1px solid var(--line);
  transition: box-shadow .3s var(--ease), padding .3s var(--ease);
}
.site-nav.is-stuck {
  box-shadow: 0 8px 30px rgba(18, 20, 63, .1);
  padding: .45rem 0;
}

.brand-logo {
  height: 52px;
  width: auto;
  transition: height .3s var(--ease);
}
.site-nav.is-stuck .brand-logo { height: 44px; }

/* Three-part bar: logo left, links centred in the space between, CTA right —
   so the slack is shared instead of pooling into one gap beside the logo. */
.nav-cta { flex: none; }

.site-nav .nav-link {
  color: var(--ink);
  font-weight: 600;
  font-size: .955rem;
  padding: .5rem 1.05rem;
  border-radius: 100px;
  position: relative;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.site-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: .18rem;
  width: 0;
  height: 3px;
  border-radius: 3px;
  background: var(--red);
  transform: translateX(-50%);
  transition: width .28s var(--ease);
}
.site-nav .nav-link:hover { color: var(--blue); }
.site-nav .nav-link:hover::after,
.site-nav .nav-link.active::after { width: 22px; }
.site-nav .nav-link.active { color: var(--blue); }

.navbar-toggler {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: .35rem .6rem;
  font-size: 1.5rem;
  color: var(--blue);
  line-height: 1;
}
.navbar-toggler:focus { box-shadow: none; }

/* ---------- 4. Hero ------------------------------------------------------ */
.hero {
  position: relative;
  background: var(--grad-dark);
  color: rgba(255, 255, 255, .8);
  padding: clamp(2.5rem, 4vw, 3.5rem) 0 clamp(3.5rem, 6vw, 5.5rem);
  overflow: hidden;
}
.hero-dots {
  position: absolute;
  inset: 0 auto 0 -8%;
  width: 55%;
  background-image: radial-gradient(rgba(255, 255, 255, .2) 2px, transparent 2.5px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(circle at 10% 45%, #000, transparent 62%);
  mask-image: radial-gradient(circle at 10% 45%, #000, transparent 62%);
  pointer-events: none;
}
.hero-glow {
  position: absolute;
  width: 620px;
  height: 620px;
  right: -180px;
  top: -180px;
  background: radial-gradient(circle, rgba(238, 28, 37, .38), transparent 62%);
  filter: blur(20px);
  pointer-events: none;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  background: rgba(113, 191, 71, .16);
  border: 1px solid rgba(113, 191, 71, .38);
  color: #C7E9AF;
  padding: .42rem 1.1rem;
  border-radius: 100px;
  font-size: .83rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
}
.eyebrow i { color: var(--green); }

.hero h1 { color: #fff; margin-bottom: 1.4rem; }
.hero-name {
  display: block;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  font-weight: 700;
  /* Light tracking only: this line is mixed case, not caps, so the heavy
     letter-spacing that suits an uppercase label just reads as gappy here. */
  letter-spacing: .025em;
  color: rgba(255, 255, 255, .66);
  margin-bottom: .85rem;
}
/* Headline sizing steps with Bootstrap's container (960 / 1140 / 1320), because
   the usable line width is a step function — 456 / 534 / 624px. A pure vw size
   keeps growing between those steps and overflows into a one-word orphan.
   Each step sits ~8% under the width at which the phrase stops fitting. */
.hero-line {
  display: block;
  font-size: clamp(2rem, 6.5vw, 2.9rem);   /* stacked layout, below 992px */
  line-height: 1.14;
}
.hero-line b {
  display: block;
  font-weight: inherit;
  text-wrap: balance;      /* only bites on small screens, where it wraps */
}
.hero-line em {
  font-style: normal;
  display: block;
  text-wrap: balance;
  background: linear-gradient(100deg, #93E36C 0%, #D6F5BC 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-lead {
  font-size: clamp(1rem, 1.3vw, 1.08rem);
  max-width: 41rem;
  text-wrap: pretty;              /* no lone "since 1977." on its own line */
  color: rgba(255, 255, 255, .76);
  margin-bottom: 1.75rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-bottom: 2rem;
}

.hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem .5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.hero-chips li {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .8);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  padding: .42rem .95rem;
  border-radius: 100px;
}
.hero-chips i { color: var(--green); }

/* Hero visual */
.hero-visual { position: relative; padding: 0 0 2rem 1rem; }
.hero-img {
  width: 100%;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  border: 5px solid rgba(255, 255, 255, .1);
}

.jubilee {
  position: absolute;
  top: -22px;
  left: -14px;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: var(--grad-brand);
  color: #fff;
  display: grid;
  place-content: center;
  text-align: center;
  box-shadow: 0 16px 34px rgba(18, 20, 63, .35);
  border: 4px solid rgba(255, 255, 255, .22);
  animation: floaty 5s ease-in-out infinite;
}
.jubilee-num { display: block; font-size: 2.35rem; font-weight: 800; line-height: 1; }
.jubilee-cap {
  display: block;
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: .9;
}

.float-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: .8rem;
  background: rgba(255, 255, 255, .97);
  padding: .8rem 1.15rem;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  animation: floaty 6s ease-in-out infinite;
}
.float-card i { font-size: 1.5rem; }
.float-card strong { display: block; color: var(--ink); font-size: 1.02rem; line-height: 1.2; }
.float-card span { display: block; font-size: .78rem; color: var(--muted); line-height: 1.3; }

.float-card--emergency { right: -6px; bottom: 22%; animation-delay: .6s; }
.float-card--emergency i { color: var(--red); }
.float-card--since { left: -18px; bottom: 6px; animation-delay: 1.4s; }
.float-card--since i { color: var(--green); }

@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

/* ---------- 5. Trust strip ----------------------------------------------- */
.trust {
  background: #fff;
  margin-top: -2.6rem;
  position: relative;
  z-index: 5;
}
.trust-grid {
  list-style: none;
  margin: 0;
  padding: 2rem 1rem;
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--line);
  display: grid;
  /* The last cell holds "ISO 9001:2015" — far wider than a 2-4 digit figure,
     so give it extra track width instead of letting it crowd its divider. */
  grid-template-columns: repeat(4, 1fr) 1.25fr;
  gap: 1rem;
  text-align: center;
}
.trust-grid li { position: relative; padding: .25rem .6rem; }
.trust-grid li + li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12%;
  height: 76%;
  width: 1px;
  background: var(--line);
}
.trust-num {
  /* inline-block, not block: with a full-cell box the 120deg gradient is
     sampled across 220px while the text sits centred inside it, so short
     figures ("1977") picked up only the purple middle while the wide
     "ISO 9001:2015" spanned the full blue->red. Hugging the text makes every
     figure run the same ramp. */
  display: inline-block;
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
  font-weight: 800;
  line-height: 1.1;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.trust-num--sm { font-size: clamp(1.4rem, 2.2vw, 1.95rem); }
.trust-num--sm i { font-style: normal; font-size: .8em; }
.trust-cap {
  display: block;
  font-size: .82rem;
  color: var(--muted);
  font-weight: 600;
  margin-top: .3rem;
}

/* ---------- 6. Section furniture ----------------------------------------- */
.section { padding: var(--sp-section) 0; position: relative; }
.section--tint { background: var(--tint); }
.section--dark {
  background: var(--grad-dark);
  color: rgba(255, 255, 255, .74);
  overflow: hidden;
}
.section--dark h2, .section--dark h3 { color: #fff; }

.section-head { max-width: 46rem; margin: 0 auto var(--sp-head); text-align: center; }
.section-head--left { margin-left: 0; margin-right: 0; text-align: left; }

.kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 100%;
  gap: .6rem;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--red-strong);
  margin-bottom: .9rem;
}
.section-head--left .kicker { justify-content: flex-start; }
/* Only the first, empty span is the decorative rule — later spans hold text. */
.kicker > span:first-child {
  flex: none;
  width: 26px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--blue), var(--red), var(--green));
}
.kicker [lang="ta"] { letter-spacing: normal; text-transform: none; }
.section--dark .kicker { color: var(--green); }

.section-head h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.6rem);
  margin-bottom: .9rem;
  /* Six of seven headings were ending on a 21-40% stub line ("...one / hospital").
     These are short, centred and capped at 46rem, which is exactly the case
     `balance` is for — unlike the hero, whose phrases fill a single line. */
  text-wrap: balance;
}
.section-sub { font-size: 1.03rem; margin-bottom: 0; }
.section--dark .section-sub { color: rgba(255, 255, 255, .72); }

/* ---------- 7. About ------------------------------------------------------ */
.frame { position: relative; }
.frame img {
  width: 100%;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--line);
}
.frame--tilt::before {
  content: "";
  position: absolute;
  inset: 16px -16px -16px 16px;
  border-radius: var(--r-lg);
  background: var(--grad-brand);
  opacity: .12;
  z-index: -1;
}

/* Full-width band under the two columns. Kept inside the text column it was
   270px tall and made that column 406px taller than the image beside it,
   which centring turned into dead space above and below the picture. */
.motto {
  margin-top: var(--sp-head);
  padding: 1.5rem 1.75rem;
  background: var(--tint);
  border-left: 4px solid var(--red);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.motto-head {
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 1rem;
}
.motto-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem 1.75rem;
}
.motto-list li { position: relative; padding-left: 1.1rem; }
.motto-list li::before {          /* small tricolour tick, echoing the logo */
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
}
.motto-list li:nth-child(2)::before { background: var(--blue); }
.motto-list li:nth-child(3)::before { background: var(--red); }
.motto-list span {
  display: block;
  color: var(--ink);
  font-weight: 600;
  /* Sized so the longest promise still sits on one line once the band splits
     into three columns; at 1rem the third one wrapped while the others didn't. */
  font-size: .95rem;
}
.motto-list em {
  font-style: normal;
  font-size: .84rem;
  color: var(--muted);
}

@media (min-width: 768px) {
  .motto-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Only from 992px is there room to set the label as a rail beside the three
   promises without squeezing the Tamil lines; below that it stays stacked. */
@media (min-width: 992px) {
  .motto { display: flex; align-items: baseline; gap: 2.25rem; }
  .motto-head { flex: none; margin-bottom: 0; white-space: nowrap; }
  .motto-list { flex: 1; }
}

/* ---------- 8. Legacy ----------------------------------------------------- */
.legacy-card {
  position: relative;
  margin: 0;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-lg);
  overflow: hidden;
  height: 100%;
  transition: transform .35s var(--ease), border-color .35s var(--ease);
}
.legacy-card:hover { transform: translateY(-6px); border-color: rgba(255, 255, 255, .28); }
/* 1.85 sits between the two source ratios (1.84 and 1.93), so `cover` trims
   almost nothing. At 16/9 both were cropped inward and the Tamil signage on
   the right of the "today" photo was being clipped mid-word. */
.legacy-card img { width: 100%; aspect-ratio: 1.85; object-fit: cover; display: block; }

/* Then -> now connector, sitting in the gutter between the two cards. */
.legacy-row { position: relative; }
.legacy-link {
  display: none;
  position: absolute;
  left: 50%;
  top: 31%;
  transform: translate(-50%, -50%);
  /* Bootstrap's `.row > *` puts gutter padding and margin on every direct
     child; without resetting them this 40px dot inflates to the full 48px
     gutter and sits offset from where `top` places it. */
  padding: 0;
  margin: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  place-content: center;
  font-size: 1rem;
  z-index: 3;
  box-shadow: 0 8px 22px rgba(238, 28, 37, .45);
}
@media (min-width: 992px) { .legacy-link { display: grid; } }
.legacy-card figcaption { padding: 1.5rem 1.6rem 1.75rem; }
.legacy-card h3 { font-size: 1.2rem; margin-bottom: .55rem; }
.legacy-card p { margin: 0; font-size: .95rem; color: rgba(255, 255, 255, .7); }

.legacy-tag {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .35rem .9rem;
  border-radius: 100px;
  color: #fff;
  backdrop-filter: blur(4px);
}
.legacy-tag--then { background: rgba(46, 48, 148, .92); }
.legacy-tag--now { background: var(--red-strong); }

.jubilee-band {
  margin-top: var(--sp-head);
  padding: 1.9rem 2rem;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  gap: 1.75rem;
  flex-wrap: wrap;
}
.jubilee-band-mark {
  width: 84px;
  height: 84px;
  flex: none;
  border-radius: 50%;
  background: var(--grad-brand);
  display: grid;
  place-content: center;
  box-shadow: 0 12px 30px rgba(238, 28, 37, .3);
}
.jubilee-band-mark span { font-size: 1.9rem; font-weight: 800; color: #fff; line-height: 1; }
.jubilee-band-copy { flex: 1 1 18rem; }
.jubilee-band-copy h3 { font-size: 1.3rem; margin-bottom: .3rem; }
.jubilee-band-copy p { margin: 0; font-size: .95rem; color: rgba(255, 255, 255, .72); }

/* ---------- 9. Specialities ---------------------------------------------- */
/* A real grid rather than Bootstrap's flex row, so `grid-auto-rows: 1fr` can
   size EVERY row to the tallest card in the whole set. Flex rows only equalise
   within a row, which left the grid uneven from one row to the next. */
.spec-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  gap: 1rem;
}
@media (min-width: 576px)  { .spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px)  { .spec-grid { gap: 1.5rem; } }
@media (min-width: 992px)  { .spec-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1400px) { .spec-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.spec-card {
  height: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.5rem 1.35rem;
  position: relative;
  overflow: hidden;
  transition: transform .32s var(--ease), box-shadow .32s var(--ease), border-color .32s var(--ease);
}
.spec-card::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--grad-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
.spec-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}
.spec-card:hover::before { transform: scaleX(1); }

.spec-ico {
  display: grid;
  place-content: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: rgba(46, 48, 148, .09);
  color: var(--blue);
  font-size: 1.4rem;
  margin-bottom: 1.05rem;
  transition: background .32s var(--ease), color .32s var(--ease), transform .32s var(--ease);
}
.spec-card:hover .spec-ico {
  background: var(--blue);
  color: #fff;
  transform: rotate(-6deg) scale(1.05);
}
.spec-card--accent .spec-ico { background: rgba(238, 28, 37, .1); color: var(--red); }
.spec-card--accent:hover .spec-ico { background: var(--red); color: #fff; }

.spec-card h3 { font-size: 1.02rem; margin: 0 0 .45rem; line-height: 1.35; }
/* Tighter leading than the global 1.9 for Tamil: with every card locked to the
   tallest one, trimming the 3-line Tamil entries pulls all 20 cards down. */
.spec-card p { font-size: .84rem; color: var(--muted); margin: 0; line-height: 1.62; }

/* ---------- 10. Facilities & schemes -------------------------------------- */
/* Same treatment as the specialities grid: a real grid so `grid-auto-rows: 1fr`
   equalises every card across the whole set, not just within its own row. */
.fac-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  gap: 1rem;
}
@media (min-width: 768px) { .fac-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } }
@media (min-width: 992px) { .fac-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.fac-card {
  height: 100%;
  display: flex;
  gap: 1.1rem;
  background: var(--tint);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  padding: 1.5rem 1.4rem;
  transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.fac-card:hover {
  background: #fff;
  border-color: var(--line);
  transform: translateY(-4px);
  box-shadow: var(--shadow-sm);
}
.fac-ico {
  flex: none;
  display: grid;
  place-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--green-dark);
  font-size: 1.28rem;
}
.fac-card:hover .fac-ico { background: var(--green); color: #fff; border-color: var(--green); }
.fac-card h3 { font-size: 1.02rem; margin-bottom: .35rem; }
.fac-card p { font-size: .88rem; margin: 0; color: var(--muted); }

.schemes {
  margin-top: var(--sp-head);
  background: var(--grad-dark);
  color: rgba(255, 255, 255, .76);
  border-radius: var(--r-lg);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  position: relative;
  overflow: hidden;
}
/* Head sits full width above the three approvals rather than in a side column.
   Centred in a 4/8 split it left ~110px of empty band above and below itself. */
.schemes-head { max-width: 44rem; margin-bottom: var(--sp-block); }
.schemes-title { color: #fff; font-size: 1.35rem; display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.schemes-title i { color: var(--green); }
.schemes-sub { font-size: .93rem; margin: 0; color: rgba(255, 255, 255, .66); }
.schemes-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-rows: 1fr;
  gap: 1rem;
}
/* Not until 992px: at 768 the three tracks are only 210px wide and the long
   scheme names stack into 275px-tall blocks. */
@media (min-width: 992px) { .schemes-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.schemes-list li {
  display: flex;
  gap: .85rem;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--r-sm);
  padding: .95rem 1.15rem;
}
.schemes-list i { color: var(--green); font-size: 1.1rem; margin-top: .2rem; flex: none; }
.schemes-list strong { display: block; color: #fff; font-size: .96rem; line-height: 1.45; }
.schemes-list span { display: block; font-size: .84rem; color: rgba(255, 255, 255, .6); }

/* ---------- 11. Why choose us --------------------------------------------- */
.why-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  gap: 1rem;
}
@media (min-width: 768px) { .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } }
@media (min-width: 992px) { .why-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.why-card {
  height: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 2.1rem 1.6rem 1.7rem;
  position: relative;
  transition: transform .32s var(--ease), box-shadow .32s var(--ease);
}
.why-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.why-num {
  position: absolute;
  top: 1.1rem;
  right: 1.3rem;
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  color: rgba(46, 48, 148, .08);
  transition: color .32s var(--ease);
}
.why-card:hover .why-num { color: rgba(238, 28, 37, .14); }
/* The ghost numeral is ~55px wide sitting 1.3rem from the card edge, so the
   heading needs to clear roughly 3.2rem — at 2.5rem all six titles ran under
   it ("Emergencies answered at any hour" reached right into the 03). */
.why-card h3 { font-size: 1.1rem; margin-bottom: .55rem; padding-right: 3.75rem; }
.why-card p { font-size: .91rem; margin: 0; color: var(--muted); }

/* ---------- 12. Appointment form ------------------------------------------ */
.contact-quick { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: .7rem; }
.contact-quick > li > a,
.contact-quick .cq-row {
  display: flex;
  align-items: center;
  gap: .95rem;
  padding: .85rem 1.1rem;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-sm);
  color: #fff;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.contact-quick > li > a:hover { background: rgba(255, 255, 255, .13); transform: translateX(4px); color: #fff; }

/* The source lists two landlines with no roles attached, so they share one row
   rather than being split under invented labels. */
.cq-nums { display: flex; flex-wrap: wrap; gap: 0 1.1rem; }
.cq-nums a { color: #fff; font-weight: 800; font-size: .98rem; white-space: nowrap; }
.cq-nums a:hover { color: #C7E9AF; }
.cq-ico {
  flex: none;
  display: grid;
  place-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(46, 48, 148, .14);
  color: var(--blue);
  font-size: 1.05rem;
}
.section--dark .cq-ico { background: rgba(255, 255, 255, .12); color: #fff; }
.cq-ico--red { background: rgba(238, 28, 37, .14); color: var(--red); }
.section--dark .cq-ico--red { background: var(--red); color: #fff; }
.cq-ico--green { background: rgba(113, 191, 71, .16); color: var(--green-dark); }
.section--dark .cq-ico--green { background: rgba(113, 191, 71, .9); color: #fff; }
.cq-body { min-width: 0; }
.cq-body small { display: block; font-size: .74rem; color: rgba(255, 255, 255, .6); letter-spacing: .05em; text-transform: uppercase; }
.cq-body strong { display: block; font-size: .98rem; word-break: break-word; }

.form-card {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 2.4rem);
  backdrop-filter: blur(6px);
}
.form-card-title { font-size: 1.4rem; margin-bottom: .5rem; }
.form-card-note { font-size: .88rem; color: rgba(255, 255, 255, .64); margin-bottom: 1.5rem; }
.form-card-note a { color: #fff; font-weight: 700; text-decoration: underline; }

.form-card .form-label {
  font-size: .82rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .82);
  letter-spacing: .03em;
  margin-bottom: .35rem;
}
.form-card .req { color: var(--red); }

.form-card .form-control,
.form-card .form-select {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #fff;
  border-radius: var(--r-sm);
  padding: .75rem 1rem;
  font-size: .95rem;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.form-card .form-control::placeholder { color: rgba(255, 255, 255, .4); }
.form-card .form-control:focus,
.form-card .form-select:focus {
  background: rgba(255, 255, 255, .12);
  border-color: var(--green);
  box-shadow: 0 0 0 .2rem rgba(113, 191, 71, .2);
  color: #fff;
}
.form-card .form-select option { background: var(--navy); color: #fff; }
.form-card .form-control::-webkit-calendar-picker-indicator { filter: invert(1) opacity(.7); cursor: pointer; }
.form-card .invalid-feedback { font-size: .8rem; color: #FF9AA0; }
.form-card .was-validated .form-control:invalid,
.form-card .form-control.is-invalid { border-color: #FF9AA0; background-image: none; }
.form-card .was-validated .form-control:valid,
.form-card .form-control.is-valid { border-color: rgba(113, 191, 71, .6); background-image: none; }

/* Honeypot. Kept out of view without display:none or hidden, both of which
   bots skip — and off the tab order and the accessibility tree. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  display: none;
  align-items: flex-start;
  gap: .6rem;
  font-size: .9rem;
  padding: .85rem 1.1rem;
  border-radius: var(--r-sm);
  background: rgba(113, 191, 71, .15);
  border: 1px solid rgba(113, 191, 71, .4);
  color: #D8F0C6;
}
.form-status.is-shown { display: flex; }
.form-status--error {
  background: rgba(238, 28, 37, .16);
  border-color: rgba(255, 154, 160, .55);
  color: #FFD7D9;
}
.form-status a { color: #fff; font-weight: 700; text-decoration: underline; }
.form-status i { margin-top: .15rem; }

/* Server-side field errors reuse Bootstrap's invalid styling. */
.form-card .invalid-feedback.is-shown { display: block; }

.spin { display: inline-block; animation: spin 900ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 13. Contact & map --------------------------------------------- */
.contact-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.9rem 1.7rem;
  box-shadow: var(--shadow-sm);
  height: 100%;
}
.contact-block {
  display: flex;
  gap: 1rem;
  padding-bottom: 1.2rem;
  margin-bottom: 1.2rem;
  border-bottom: 1px dashed var(--line);
  font-style: normal;
}
.contact-block h3 {
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .35rem;
}
/* `break-word`, not `anywhere`: `anywhere` lets the browser break mid-domain
   when that fills the line better, ignoring the <wbr> placed after the "@". */
.contact-block p { font-size: .97rem; margin: 0; color: var(--ink); line-height: 1.7; overflow-wrap: break-word; }
.contact-block a { color: var(--ink); font-weight: 600; }
/* Sized so "rmspusaliammalnursinghome@" fits the 198px column at 320px —
   with break-word that segment is kept whole, so it must not overflow. */
.contact-block a[href^="mailto"] { font-size: .92rem; }
.contact-block a:hover { color: var(--red); }

.map-wrap {
  height: 100%;
  min-height: 420px;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  background: var(--tint);
}
.map-wrap iframe { display: block; width: 100%; height: 100%; min-height: 420px; border: 0; }

/* Brand panel rather than a blurred photograph: the facade is a consent
   placeholder, and a 3px-blurred, upscaled building shot read as a failed
   image load. The dot motif ties it to the hero and footer instead. */
.map-facade {
  position: relative;
  height: 100%;
  min-height: 420px;
  background: var(--grad-dark);
  overflow: hidden;
}
.dots-motif--map { right: -80px; top: -40px; color: rgba(255, 255, 255, .13); }
.map-facade-body {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 2rem 1.5rem;
  gap: .35rem;
}
.map-pin {
  justify-self: center;
  display: grid;
  place-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 1.1rem;
  border-radius: 50%;
  background: rgba(238, 28, 37, .16);
  border: 1px solid rgba(238, 28, 37, .4);
  color: #FF7A80;
  font-size: 1.6rem;
}
.map-facade-body p { color: #fff; font-weight: 700; font-size: 1.05rem; margin-bottom: .9rem; }
.map-facade-body .btn { justify-self: center; }
.map-facade-body small {
  color: rgba(255, 255, 255, .72);
  font-size: .8rem;
  margin-top: .9rem;
  max-width: 26rem;   /* wide enough to keep the sentence off a third line */
}

/* ---------- 14. Footer & floating controls -------------------------------- */
.site-footer {
  background: var(--navy);
  color: rgba(255, 255, 255, .66);
  padding: clamp(2.5rem, 4vw, 3.5rem) 0 1.25rem;
  position: relative;
  overflow: hidden;
  font-size: .93rem;
}
.footer-logo {
  background: #fff;
  border-radius: var(--r-md);
  padding: .9rem 1.2rem;
  display: inline-block;
  margin-bottom: 1.25rem;
}
.footer-logo img { height: 48px; width: auto; }
.footer-about { margin-bottom: 1rem; }
/* Separated by spacing rather than middots, so no stray dot sits beside the
   Tamil puḷḷi that already ends each phrase. */
.footer-motto {
  color: var(--green);
  font-size: .88rem;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .1rem 1.4rem;
}

.footer-head {
  color: #fff;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 1.15rem;
}
.footer-links, .footer-contact { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: .55rem; }
.footer-links a { color: rgba(255, 255, 255, .66); }
.footer-links a:hover { color: #fff; padding-left: 4px; }
.footer-links a { transition: color .2s var(--ease), padding-left .2s var(--ease); display: inline-block; }

.footer-contact li { display: flex; gap: .7rem; margin-bottom: .75rem; line-height: 1.6; }
.footer-contact i { color: var(--green); margin-top: .3rem; flex: none; }
.footer-contact a { color: rgba(255, 255, 255, .78); overflow-wrap: break-word; }
/* Long enough to break mid-domain at this column width — step it down so it fits on one line. */
.footer-contact a[href^="mailto"] { font-size: .84rem; }
.footer-contact a:hover { color: #fff; }

.footer-iso {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin: .5rem 0 0;
  font-size: .8rem;
  font-weight: 700;
  color: #fff;
  background: rgba(113, 191, 71, .18);
  border: 1px solid rgba(113, 191, 71, .35);
  padding: .35rem .9rem;
  border-radius: 100px;
}
.footer-iso i { color: var(--green); }

.footer-bottom {
  margin-top: var(--sp-block);
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: space-between;
  align-items: center;
  font-size: .85rem;
}
.footer-bottom p { margin: 0; }
.footer-emergency i { color: var(--red); margin-right: .3rem; }
.footer-emergency a { color: #fff; font-weight: 700; }

.to-top {
  position: fixed;
  right: 20px;
  bottom: 24px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 0;
  background: var(--blue);
  color: #fff;
  font-size: 1.15rem;
  box-shadow: var(--shadow-md);
  display: grid;
  place-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: all .3s var(--ease);
  z-index: 1040;
}
.to-top.is-shown { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--red); }

.mobile-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1050;
  display: flex;
  background: #fff;
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 24px rgba(18, 20, 63, .1);
  padding-bottom: env(safe-area-inset-bottom);
}
.mb-item {
  flex: 1;
  text-align: center;
  padding: .7rem .3rem;
  font-size: .74rem;
  font-weight: 700;
  color: var(--ink);
  border-right: 1px solid var(--line);
}
.mb-item:last-child { border-right: 0; }
.mb-item i { display: block; font-size: 1.15rem; margin-bottom: .15rem; color: var(--blue); }
.mb-item--red { color: var(--red-strong); }
.mb-item--red i { color: var(--red-strong); }

/* ---------- Golden Jubilee page-load invitation ------------------------- */
.jubilee-modal { --bs-modal-width: min(92vw, 560px); }
.jubilee-modal .modal-content {
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  background: #fffaf0;
  box-shadow: 0 24px 80px rgba(11, 18, 54, .35);
}
.jubilee-modal .modal-header {
  position: relative;
  align-items: flex-start;
  gap: 1rem;
  padding: .85rem 3.5rem .85rem 1rem;
  border-bottom: 1px solid rgba(176, 126, 23, .22);
}
.jubilee-modal .modal-title {
  margin: 0;
  color: var(--blue);
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  font-weight: 800;
}
.jubilee-modal .modal-header p {
  margin: .15rem 0 0;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.4;
}
.jubilee-modal .btn-close {
  position: absolute;
  top: .75rem;
  right: .75rem;
  margin: 0;
  padding: .65rem;
}
.jubilee-modal .modal-body {
  display: flex;
  justify-content: center;
  padding: 0;
  background: #f4ead6;
}
.jubilee-invitation-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100vh - 105px);
  max-height: calc(100dvh - 105px);
  object-fit: contain;
}

@media (max-width: 575.98px) {
  .jubilee-modal { --bs-modal-margin: .5rem; }
  .jubilee-modal .modal-content { border-radius: 13px; }
  .jubilee-modal .modal-header { padding: .65rem 3rem .65rem .75rem; }
  .jubilee-modal .btn-close { top: .55rem; right: .55rem; }
  .jubilee-invitation-img {
    max-height: calc(100vh - 105px);
    max-height: calc(100dvh - 105px);
  }
}

/* ---------- 15. Motion & responsive --------------------------------------- */
/* Scoped to .js so that content is never hidden if scripts fail to load.
   Uses the standalone `translate` property rather than `transform`: where an
   element is both a reveal target and a hover target (.spec-card, .legacy-card)
   the `.is-visible` rule outranks `:hover` and would reset its lift to none.
   `translate` and `transform` compose independently, so both survive. */
.js [data-reveal] {
  opacity: 0;
  translate: 0 26px;
  transition: opacity .7s var(--ease), translate .7s var(--ease);
  will-change: opacity, translate;
}
.js [data-reveal].is-visible { opacity: 1; translate: none; will-change: auto; }
[data-reveal-delay="1"] { transition-delay: .08s; }
[data-reveal-delay="2"] { transition-delay: .16s; }
[data-reveal-delay="3"] { transition-delay: .24s; }
[data-reveal-delay="4"] { transition-delay: .32s; }

/* The four chips total 717px and never fit one 624px row. Below 1200px flex
   already wraps them 2+2; from 1200px up it goes 3+1, so pin a 2x2 grid that
   squares off the block instead. */
@media (min-width: 1200px) {
  .hero-chips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
  }
  .hero-chips li { justify-content: flex-start; }
}

/* Hero headline steps, matched to the container widths above. */
@media (min-width: 992px)  { .hero-line { font-size: 2.15rem; } }   /* line box 456px */
@media (min-width: 1200px) { .hero-line { font-size: 2.6rem; } }    /* line box 534px */
@media (min-width: 1400px) { .hero-line { font-size: 3rem; } }      /* line box 624px */

@media (max-width: 1399.98px) {
  .float-card--emergency { right: 0; }
}

@media (max-width: 1199.98px) {
  .site-nav .navbar-collapse {
    margin-top: .85rem;
    padding: .6rem .4rem 1rem;
    border-top: 1px solid var(--line);
    max-height: 74vh;
    overflow-y: auto;
  }
  .site-nav .nav-link { padding: .65rem .9rem; border-radius: 12px; }
  .site-nav .nav-link::after { display: none; }
  .site-nav .nav-link.active {
    background: var(--tint);
    color: var(--blue);
    box-shadow: inset 3px 0 0 var(--red);
  }
  .trust-grid { grid-template-columns: repeat(3, 1fr); gap: 1.4rem .5rem; }
  .trust-grid li:nth-child(3n + 1)::before { display: none; }
  /* 5 items over 3 columns leaves an empty cell on the second row — let the
     last item span it so the row reads as full rather than broken. */
  .trust-grid li:last-child { grid-column: span 2; }
}

@media (max-width: 991.98px) {
  /* Inline contact links sat at 17-19px tall — under the 24px minimum target.
     Padding the inline box lifts them without changing the desktop layout. */
  .contact-block p a,
  .footer-contact a,
  .footer-emergency a { display: inline-block; padding-block: .25rem; }

  .hero { padding-bottom: clamp(3rem, 6vw, 4.5rem); }
  /* The glow fills too much of a narrow viewport — pull it back so text stays crisp. */
  .hero-glow { width: 380px; height: 380px; right: -140px; top: -140px; opacity: .55; }
  .hero-visual { padding: 0; margin-top: 2.5rem; }
  .jubilee { width: 88px; height: 88px; top: -18px; left: -6px; }
  .jubilee-num { font-size: 1.9rem; }
  .float-card--since { left: 0; bottom: -14px; }
  .float-card--emergency { bottom: 26%; }
  .frame--tilt::before { inset: 12px -12px -12px 12px; }
  .map-wrap, .map-facade, .map-wrap iframe { min-height: 340px; }
  /* iOS Safari zooms the viewport when a focused field is under 16px. */
  .form-card .form-control,
  .form-card .form-select { font-size: 1rem; }
  /* The action bar measures 79px, so reserve that plus the notch inset —
     at 62px the last 17px of the footer sat underneath it. */
  body { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .to-top { bottom: calc(94px + env(safe-area-inset-bottom)); }
}

@media (max-width: 575.98px) {
  :root { --nav-h: 68px; }
  /* Wrapped onto 3 lines a pill radius looks like a stretched lozenge —
     tighten the type and square it off into a tag instead. */
  .eyebrow {
    font-size: .74rem;
    letter-spacing: .02em;
    border-radius: var(--r-md);
    padding: .5rem .9rem;
    align-items: flex-start;
    text-wrap: balance;      /* avoids "HOSPITAL" alone on the second line */
  }
  .eyebrow i { margin-top: .15rem; }
  .brand-logo { height: 42px; }
  .site-nav.is-stuck .brand-logo { height: 38px; }
  .trust { margin-top: -1.75rem; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); padding: 1.5rem .75rem; }
  .trust-grid li:nth-child(3n + 1)::before { display: block; }
  .trust-grid li:nth-child(2n + 1)::before { display: none; }
  .trust-grid li:last-child { grid-column: 1 / -1; }
  .hero-actions .btn { width: 100%; }
  .float-card { padding: .65rem .9rem; }
  .float-card i { font-size: 1.25rem; }
  .float-card strong { font-size: .92rem; }
  .float-card span { font-size: .72rem; }
  .float-card--emergency { right: -4px; bottom: 30%; }
  .jubilee-band { padding: 1.4rem 1.3rem; gap: 1.1rem; }
  .contact-panel, .form-card { padding: 1.4rem 1.2rem; }
  .footer-bottom { justify-content: flex-start; }
}

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

@media print {
  .topbar, .site-nav, .mobile-bar, .to-top, .scroll-progress, .hero-dots, .hero-glow, .dots-motif, .jubilee-modal { display: none !important; }
  .hero, .section--dark, .site-footer { background: #fff !important; color: #000 !important; }
  .hero h1, .section--dark h2, .section--dark h3 { color: #000 !important; }
  a { text-decoration: underline; }
}