/* ==========================================================================
   Bluebell Hospital — homepage
   Continues the header's system: Source Serif 4 for display, IBM Plex Sans
   for reading, IBM Plex Mono for labels; indigo primary, periwinkle rules,
   green reserved for the booking action.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared section furniture
   -------------------------------------------------------------------------- */

.section        { padding-block: clamp(34px, 4.2vw, 56px); }
.section-tight  { padding-block: clamp(26px, 3.2vw, 42px); }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.eyebrow--rule::after {
  content: "";
  width: 44px;
  height: 1px;
  background: var(--rule-firm);
}

.eyebrow--light        { color: rgba(255, 255, 255, .7); }
.eyebrow--light::after { background: rgba(141, 135, 215, .7); }

.section__title {
  margin: 0 0 20px;
  font-family: var(--serif);
  font-size: clamp(32px, 4.2vw, 50px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.025em;
  color: var(--ink);
  text-wrap: balance;
}

.section__lead {
  margin: 0 0 24px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 54ch;
}

.section__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  gap: 32px 56px;
  align-items: end;
  margin-bottom: clamp(24px, 2.8vw, 36px);
  padding-bottom: 28px;
  border-bottom: 1px solid var(--rule);
}

.section__head .section__title { margin-bottom: 0; }

.section__aside {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
}

.section__aside p { margin: 0 0 14px; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--indigo);
  transition: gap .22s var(--ease-out);
}

.link-arrow svg { width: 15px; height: 15px; flex: none; }
.link-arrow:hover { gap: 14px; }

.link-arrow--light { color: #fff; }

.btn--lg { height: 52px; padding-inline: 26px; font-size: 15px; }

.btn--line {
  background: var(--green-700);
  color: #fff;
  border: 1px solid var(--green-700);
  box-shadow: 0 4px 12px rgba(0, 128, 61, 0.15);
}

.btn--line:hover {
  border-color: var(--green-800);
  color: #fff;
  background: var(--green-800);
  box-shadow: 0 6px 18px rgba(0, 128, 61, 0.25);
  transform: translateY(-2px);
}

/* Reveal — a single small lift, disabled wholesale under reduced motion. */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}

.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   1. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(40px, 4.6vw, 68px) clamp(28px, 3vw, 44px);
  background: var(--ground);
  overflow: hidden;
}

/* --- backdrop ------------------------------------------------------------
   The photograph and its wash are pushed behind the content on their own
   stacking layer. Everything else stays in normal flow, so no amount of text
   reflow can make two elements collide. */

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.hero__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}

/* Near-opaque over the copy, clearing toward the right so the photograph is
   visible where nothing has to be read on top of it. This is what keeps body
   text at full contrast instead of relying on a text shadow. */
.hero__bg-wash {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(102deg,
      rgba(247, 247, 253, .972) 0%,
      rgba(243, 242, 252, .950) 34%,
      rgba(232, 230, 249, .895) 58%,
      rgba(209, 206, 240, .800) 80%,
      rgba(180, 175, 224, .740) 100%);
}

.hero__body { position: relative; }

/* Copy and trust card share a row; the card is a fixed column so the copy
   measure never depends on how long the trust labels are. */
.hero__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: clamp(36px, 4.5vw, 72px);
  align-items: center;
}

.hero__copy { max-width: 580px; }

/* --- eyebrow --- */

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 24px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--indigo);
}

.hero__eyebrow-rule {
  flex: none;
  width: 46px;
  height: 2px;
  background: var(--indigo-400);
}

/* --- headline --- */

.hero__title {
  margin: 0 0 22px;
  font-family: var(--serif);
  /* Sized so "Where every life matters." holds on one line, keeping the
     three-line structure of the reference. */
  font-size: clamp(30px, 3.3vw, 46px);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.024em;
  color: var(--ink);
}

/* Green, echoing the logo: "Bluebell" in indigo above "HOSPITAL" in green.
   #00803D on this ground clears AA at 5.05:1; the brighter logo green would
   only reach 2.6:1 and is kept for marks, never for text. */
.hero__title-accent { color: var(--green-700); }

.hero__lead {
  margin: 0 0 32px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-2);
  max-width: 44ch;
}

/* --- buttons --- */

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 50px;
  padding-inline: 22px;
  border-radius: 6px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -.005em;
  white-space: nowrap;
  transition: background-color .2s var(--ease), border-color .2s var(--ease),
              color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}

.hero-btn svg { width: 17px; height: 17px; flex: none; }

/* Booking is the page's one commitment, so it wears the brand's action
   colour. Green also separates it from the indigo structure around it. */
.hero-btn--primary {
  background: var(--green-700);
  color: #fff;
  box-shadow: 0 1px 2px rgba(0, 107, 49, .22);
}

.hero-btn--primary:hover {
  background: var(--green-800);
  box-shadow: 0 8px 20px -8px rgba(0, 128, 61, .55);
}

.hero-btn--primary:active { transform: translateY(1px); }

.hero-btn--ghost {
  background: var(--green-700);
  color: #fff;
  border: 1px solid var(--green-700);
  box-shadow: 0 4px 12px rgba(0, 128, 61, 0.15);
}

.hero-btn--ghost:hover {
  border-color: var(--green-800);
  background: var(--green-800);
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 128, 61, 0.25);
  transform: translateY(-2px);
}

.hero-btn--ghost:hover svg { transform: translateX(3px); }
.hero-btn--ghost svg { transition: transform .22s var(--ease-out); }

/* --- trust panel --- */

/* A single card of stacked rows, floating over the photograph. */
.hero__trust {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--ground);
  border: 1px solid var(--rule-soft);
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(20, 19, 43, .04),
    0 26px 56px -26px rgba(27, 25, 80, .42);
}

.hero__trust-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-top: 1px solid var(--rule-soft);
  transition: background-color .22s var(--ease);
}

.hero__trust-item:first-child { border-top: 0; }

/* Hover lives on background and on the icon — never on the row's transform,
   which the entrance animation owns while its fill is active. */
.hero__trust-item:hover { background: var(--indigo-50); }

.hero__trust-icon { transition: transform .28s var(--ease-out); }
.hero__trust-item:hover .hero__trust-icon { transform: scale(1.09); }

.hero__trust-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 8px;
  background: var(--indigo-50);
  color: var(--indigo);
}

.hero__trust-icon svg { width: 20px; height: 20px; }

/* Green marks the one item that is live right now — the emergency line. */
.hero__trust-icon--live {
  background: var(--green-50);
  color: var(--green-700);
}

.hero__trust-text { min-width: 0; }

.hero__trust-value {
  display: block;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.2;
  color: var(--ink);
}

.hero__trust-label {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--ink-3);
}

/* --- emergency bar --- */

.hero__bar {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  margin-top: clamp(28px, 3.2vw, 44px);
  padding: 18px clamp(20px, 2.4vw, 34px);
  background: var(--indigo);
  border-radius: 12px;
  color: #fff;
  box-shadow: 0 20px 44px -26px rgba(27, 25, 80, .6);
}

.hero__bar-side {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.hero__bar-side:first-child { flex: 1 1 auto; }

.hero__bar-side--call {
  flex: none;
  transition: opacity .18s var(--ease);
}

.hero__bar-side--call:hover { opacity: .85; }

.hero__bar-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .13);
}

.hero__bar-icon svg { width: 19px; height: 19px; }

/* The call action, so it takes the action colour even on the indigo ground. */
.hero__bar-icon--go {
  background: var(--green-700);
  color: #fff;
}

.hero__bar-side--call:hover .hero__bar-icon--go { background: var(--green); }

/* A live indicator, not decoration: it says the line is answered now. */
.hero__bar-pulse {
  position: relative;
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-inline-end: 9px;
  background: var(--green);
  border-radius: 50%;
  vertical-align: middle;
}

.hero__bar-pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--green);
  animation: heroPulse 2.4s var(--ease-out) infinite;
}

@keyframes heroPulse {
  0%        { transform: scale(1);   opacity: .6; }
  70%, 100% { transform: scale(2.8); opacity: 0; }
}

.hero__bar-title {
  display: block;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.012em;
  line-height: 1.25;
}

.hero__bar-title--num {
  font-size: 19px;
  font-variant-numeric: tabular-nums;
}

.hero__bar-note {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255, 255, 255, .72);
}

.hero__bar-divider {
  align-self: stretch;
  width: 1px;
  flex: none;
  background: rgba(255, 255, 255, .22);
}

/* --- entrance --- */

@keyframes heroRise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@keyframes heroFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.hero__eyebrow { animation: heroRise .65s var(--ease-out) .02s both; }
.hero__title   { animation: heroRise .65s var(--ease-out) .10s both; }
.hero__lead    { animation: heroRise .65s var(--ease-out) .18s both; }
.hero__actions { animation: heroRise .65s var(--ease-out) .26s both; }
.hero__bar     { animation: heroRise .65s var(--ease-out) .62s both; }
.hero__bg      { animation: heroFade 1.1s var(--ease) both; }

/* The card arrives from the right, then its rows settle one after another. */
@keyframes heroCard {
  from { opacity: 0; transform: translateX(26px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

@keyframes heroRow {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.hero__trust { animation: heroCard .8s var(--ease-out) .22s both; }

.hero__trust-item { animation: heroRow .5s var(--ease-out) both; }
.hero__trust-item:nth-child(1) { animation-delay: .40s; }
.hero__trust-item:nth-child(2) { animation-delay: .48s; }
.hero__trust-item:nth-child(3) { animation-delay: .56s; }
.hero__trust-item:nth-child(4) { animation-delay: .64s; }

/* --- hero responsive --- */

@media (max-width: 1240px) {
  .hero__main { grid-template-columns: minmax(0, 1fr) 310px; }
  .hero__copy { max-width: 520px; }
}

@media (max-width: 940px) {
  .hero { padding-bottom: clamp(24px, 4vw, 36px); }

  /* Card drops below the copy and lays its rows out two-up. */
  .hero__main {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(30px, 5vw, 44px);
  }

  .hero__copy { max-width: 620px; }

  /* With the copy centred over more of the frame, the wash has to cover the
     whole width rather than clearing to the right. */
  .hero__bg-wash {
    background:
      linear-gradient(180deg,
        rgba(255, 255, 255, .97) 0%,
        rgba(250, 249, 254, .945) 45%,
        rgba(226, 224, 246, .88) 100%);
  }

  .hero__trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Back to a grid, so the dividers become column rules plus one row rule. */
  .hero__trust-item { border-top: 0; border-inline-start: 1px solid var(--rule-soft); }
  .hero__trust-item:nth-child(odd)   { border-inline-start: 0; }
  .hero__trust-item:nth-child(n + 3) { border-top: 1px solid var(--rule-soft); }
}

@media (max-width: 620px) {
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero-btn { width: 100%; }

  .hero__bar {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 20px;
  }

  .hero__bar-divider {
    align-self: auto;
    width: auto;
    height: 1px;
  }

  .hero__bar-side--call { justify-content: flex-start; }
}

/* Stays 2 x 2 rather than collapsing to a single column — four stacked rows
   push the emergency bar too far down the first screen. */
@media (max-width: 420px) {
  .hero__trust-item { padding: 14px 11px; gap: 9px; }
  .hero__trust-icon { width: 32px; height: 32px; border-radius: 7px; }
  .hero__trust-icon svg { width: 17px; height: 17px; }
  .hero__trust-value { font-size: 14.5px; }
  .hero__trust-label { font-size: 10.5px; }
}

/* --------------------------------------------------------------------------
   2. Trust strip
   -------------------------------------------------------------------------- */

.trust {
  border-block: 1px solid var(--rule);
  background: var(--ground-2);
}

.trust__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.trust__item {
  padding: 26px 24px;
  border-inline-start: 1px solid var(--rule);
}

.trust__item:first-child {
  border-inline-start: 0;
  padding-inline-start: 0;
}

.trust__value {
  display: block;
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--indigo);
}

.trust__value em {
  font-style: normal;
  font-size: .6em;
  color: var(--indigo-400);
  margin-inline-start: 1px;
}

.trust__label {
  display: block;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   3. About
   -------------------------------------------------------------------------- */

.about__inner {
  display: grid;
  grid-template-columns: minmax(0, 600px) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
}

.about .section__title {
  margin-bottom: 12px;
}

.about .section__lead {
  margin-bottom: 16px;
}

/* Highlight text */
.highlight-text {
  color: var(--indigo);
  position: relative;
  z-index: 1;
  font-weight: 700;
}

.highlight-text::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 0;
  width: 100%;
  height: 6px;
  background: var(--indigo-100);
  z-index: -1;
  border-radius: 2px;
}

/* Collage & decorative backdrop */
.about__media {
  position: relative;
  padding-bottom: 78px;
}

.about__media-accent {
  position: absolute;
  top: -24px;
  left: -24px;
  width: 140px;
  height: 140px;
  background-image: radial-gradient(var(--indigo-200) 1.5px, transparent 1.5px);
  background-size: 12px 12px;
  opacity: 0.75;
  z-index: 0;
  pointer-events: none;
}

.about__media figure {
  margin: 0;
}

.about__media-main {
  position: relative;
  z-index: 1;
}

.about__media-main img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--rule-soft);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.about__media-main:hover img {
  transform: translateY(-4px);
  box-shadow: 0 32px 64px -20px rgba(27, 25, 80, 0.3);
}

.about__media-inset {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  width: 52%;
  padding: 8px;
  background: var(--ground);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--rule-soft);
  z-index: 2;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.about__media-inset img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
}

.about__media-inset:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 40px 70px -15px rgba(27, 25, 80, 0.4);
}

/* Floating Accreditation Badge */
.about__floating-badge {
  position: absolute;
  bottom: 32px;
  left: -28px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: 0 20px 40px -10px rgba(27, 25, 80, 0.12), var(--shadow-md);
  z-index: 3;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.about__floating-badge:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 24px 44px -8px rgba(20, 19, 43, 0.18), var(--shadow-lg);
}

.about__floating-badge-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  background: var(--green-50);
  color: var(--green-700);
  border-radius: 50%;
  flex: none;
  box-shadow: 0 4px 10px rgba(0, 182, 87, 0.12);
}

.about__floating-badge-icon svg {
  width: 19px;
  height: 19px;
}

.about__floating-badge-content {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.about__badge-title {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.05em;
  line-height: 1.2;
}

.about__badge-subtitle {
  font-size: 12px;
  color: var(--ink-2);
  font-weight: 500;
  line-height: 1.2;
}

/* Eyebrow & Status Wrapper */
.about__eyebrow-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.about__eyebrow-wrapper .eyebrow {
  margin: 0;
}

.about__eyebrow-wrapper .eyebrow::after {
  display: none;
}

.about__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  background: var(--green-50);
  border: 1px solid rgba(0, 182, 87, 0.14);
  border-radius: 30px;
}

.about__status-pulse {
  width: 6px;
  height: 6px;
  background: var(--green);
  border-radius: 50%;
  position: relative;
}

.about__status-pulse::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--green);
  opacity: 0;
  animation: aboutPulse 2s cubic-bezier(0.24, 0, 0.38, 1) infinite;
}

@keyframes aboutPulse {
  0% { transform: scale(0.5); opacity: 0; }
  50% { opacity: 0.6; }
  100% { transform: scale(1.6); opacity: 0; }
}

.about__status-text {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green-800);
  line-height: 1;
}

/* Quotes */
.about__quote {
  position: relative;
  margin: 0 0 24px;
  padding: 16px 20px 16px 36px;
  background: var(--indigo-50);
  border-inline-start: 4px solid var(--indigo);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  border-right: 1px solid var(--rule-soft);
}

.about__quote p {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(17px, 1.8vw, 19.5px);
  font-style: italic;
  line-height: 1.45;
  color: var(--indigo-900);
  position: relative;
  z-index: 1;
}

.about__quote .quote-icon {
  position: absolute;
  top: 2px;
  left: 8px;
  font-size: 64px;
  font-family: var(--serif);
  color: var(--indigo-200);
  line-height: 1;
  font-weight: 700;
  opacity: 0.35;
  z-index: 0;
  user-select: none;
  pointer-events: none;
}



/* Premium arrow link CTA */
.about__action {
  margin-top: 10px;
}

.btn--about {
  background: var(--green-700);
  color: #fff;
  border: 1px solid var(--green-700);
  box-shadow: 0 4px 12px rgba(27, 25, 80, 0.15);
}

.btn--about:hover {
  background: var(--green-800);
  border-color: var(--green-800);
  box-shadow: 0 8px 24px -6px rgba(27, 25, 80, 0.35);
  transform: translateY(-2px);
}

.btn--about:active {
  transform: translateY(1px);
}

.btn--about svg {
  stroke: #fff;
  width: 16px;
  height: 16px;
}

/* --------------------------------------------------------------------------
   4. Departments
   -------------------------------------------------------------------------- */

.dept__head-centered {
  text-align: center;
  margin-bottom: clamp(22px, 3vw, 34px);
}

.dept__head-centered .eyebrow {
  justify-content: center;
  margin-bottom: 12px;
}

.dept__head-centered .eyebrow::after {
  display: none !important;
}

.dept__head-centered .section__title {
  margin-bottom: 0;
}

.dept {
  display: grid;
  grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
}

.dept__panel {
  position: relative;
  padding: 36px 36px 34px;
  background: var(--indigo-50);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  min-height: 320px;
}

.dept__detail {
  display: none;
}

.dept__detail.is-active {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.dept__index {
  position: absolute;
  top: 4px;
  inset-inline-end: 18px;
  margin: 0;
  font-family: var(--serif);
  font-size: 96px;
  font-weight: 700;
  line-height: 1;
  color: var(--indigo-400);
  opacity: .14;
  pointer-events: none;
  user-select: none;
}

.dept__group {
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--green-700);
}

.dept__name {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.022em;
  color: var(--ink);
  text-wrap: balance;
}

.dept__desc {
  margin: 0 0 28px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
  flex-grow: 1;
}

.dept__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin-top: auto;
}

.dept__actions .btn--book {
  background: var(--green-700);
  border-color: var(--green-700);
  color: #fff;
  box-shadow: 0 4px 10px rgba(0, 128, 61, 0.15);
}

.dept__actions .btn--book:hover {
  background: var(--green-800);
  border-color: var(--green-800);
  box-shadow: 0 6px 14px rgba(0, 128, 61, 0.25);
  transform: translateY(-1px);
}

.dept__list-wrapper {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.dept__index-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dept__link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--ink-2);
  border-radius: var(--radius-lg);
  transition: all .25s var(--ease);
}

.dept__link:hover,
.dept__link.is-active {
  color: var(--indigo);
  background: var(--indigo-50);
  border-bottom-color: transparent;
}

.dept__num {
  flex: none;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--indigo-400);
  transition: color .2s var(--ease);
}

.dept__link:hover .dept__num,
.dept__link.is-active .dept__num {
  color: var(--green);
}

.dept__label {
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.35;
  transition: font-weight .2s var(--ease);
}

.dept__link.is-active .dept__label {
  font-weight: 600;
}

.dept__more-action {
  padding-inline-start: 16px;
}

.btn--more-services {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--green-700);
  color: #fff;
  border: 1px solid var(--green-700);
  padding: 10px 20px;
  border-radius: var(--radius-lg);
  font-weight: 600;
  font-size: 14px;
  transition: all 0.25s var(--ease);
  box-shadow: 0 4px 12px rgba(0, 128, 61, 0.15);
}

.btn--more-services:hover {
  background: var(--green-800);
  border-color: var(--green-800);
  color: #fff;
  box-shadow: 0 6px 16px rgba(0, 128, 61, 0.2);
  transform: translateY(-2px);
}

.btn--more-services:active {
  transform: translateY(1px);
}

.btn--more-services svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  transition: transform 0.2s var(--ease);
}

.btn--more-services:hover svg {
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   4b. Stats Section
   -------------------------------------------------------------------------- */

.stats-section {
  background: var(--indigo-900);
  color: #fff;
  padding-block: 34px;
  position: relative;
  overflow: hidden;
}

.stats-section::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -20%;
  width: 60%;
  height: 200%;
  background: radial-gradient(circle, rgba(141, 135, 215, 0.15) 0%, transparent 60%);
  pointer-events: none;
}

.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
}

.stats__item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-inline: 32px;
  position: relative;
}

.stats__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 5%;
  right: 0;
  height: 90%;
  width: 1px;
  background: rgba(255, 255, 255, 0.15);
}

.stats__item:first-child {
  padding-inline-start: 0;
}

.stats__item:last-child {
  padding-inline-end: 0;
}

.stats__icon-wrapper {
  flex: none;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  background: rgba(0, 182, 87, 0.15);
  color: var(--green);
  border-radius: 50%;
  border: 1.5px solid rgba(0, 182, 87, 0.3);
  box-shadow: 0 0 12px rgba(0, 182, 87, 0.1);
  transition: transform 0.3s var(--ease), background-color 0.3s var(--ease);
}

.stats__item:hover .stats__icon-wrapper {
  transform: scale(1.08);
  background: rgba(0, 182, 87, 0.25);
  border-color: rgba(0, 182, 87, 0.5);
}

.stats__icon-wrapper svg {
  width: 24px;
  height: 24px;
}

.stats__content {
  display: flex;
  flex-direction: column;
}

.stats__number {
  font-size: clamp(28px, 2.5vw, 36px);
  font-weight: 700;
  line-height: 1.1;
  color: #ffffff;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 2px;
}

.stats__label {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: -0.01em;
}

/* --------------------------------------------------------------------------
   4c. Future Plans Section (Sticky Timeline / Ruled List Layout)
   -------------------------------------------------------------------------- */

.plans {
  padding-block: clamp(38px, 4.6vw, 62px);
  background: var(--ground-2);
  border-bottom: 1px solid var(--rule-soft);
}

.plans__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: clamp(48px, 6vw, 80px);
  align-items: start;
}

.plans__sticky-sidebar {
  position: sticky;
  top: 120px;
}

.plans__sticky-content .eyebrow {
  margin-bottom: 16px;
}

.plans__sticky-content .section__title {
  margin-bottom: 20px;
}

.plans__intro {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-2);
  margin-bottom: 32px;
}

.plans__indicator-dots {
  display: flex;
  gap: 8px;
}

.plans__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rule-soft);
  transition: all 0.3s var(--ease);
}

.plans__dot.is-active {
  background: var(--green);
  width: 24px;
  border-radius: 4px;
}

.plans__stream {
  display: flex;
  flex-direction: column;
}

.plans__item {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 24px;
  padding-block: 26px;
  border-top: 1px solid var(--rule-soft);
  transition: border-color 0.3s var(--ease);
}

.plans__item:last-child {
  border-bottom: 1px solid var(--rule-soft);
}

.plans__item-meta {
  display: flex;
  align-items: center;
  gap: 16px;
}

.plans__item-num {
  font-family: var(--serif);
  font-size: clamp(24px, 3.5vw, 36px);
  font-weight: 700;
  line-height: 1;
  color: var(--indigo-200);
  transition: color 0.3s var(--ease);
}

.plans__item-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: rgba(0, 182, 87, 0.08);
  color: var(--green-700);
  border-radius: 6px;
  border: 1px solid rgba(0, 182, 87, 0.2);
  opacity: 0.85;
  transition: all 0.3s var(--ease);
}

.plans__item-icon svg {
  width: 18px;
  height: 18px;
}

.plans__item-title {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  transition: color 0.3s var(--ease);
}

.plans__item-text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-2);
  transition: color 0.3s var(--ease);
}

/* Hover effects */
.plans__item:hover {
  border-top-color: var(--green);
}

.plans__item:hover .plans__item-num {
  color: var(--green);
}

.plans__item:hover .plans__item-icon {
  background: var(--green-700);
  color: #fff;
  border-color: var(--green-700);
  opacity: 1;
  transform: scale(1.05);
}

.plans__item:hover .plans__item-title {
  color: var(--indigo);
}

.plans__item:hover .plans__item-text {
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   5. Consultants
   -------------------------------------------------------------------------- */

.doctors {
  padding-bottom: clamp(24px, 3vw, 36px);
}

.doctors__inner {
  /* Spans full container width */
}

.doctors__grid-three {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 300px));
  justify-content: center;
  gap: clamp(20px, 3vw, 32px);
  margin: 0 auto clamp(36px, 5vw, 48px);
  padding: 0;
  list-style: none;
}

.doctor-card {
  display: flex;
  flex-direction: column;
}

.doctor-card__photo {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--indigo-50);
  border: none;
}

.doctor-card__photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform .6s var(--ease-out), filter .4s var(--ease);
  filter: saturate(.92);
}

.doctor-card__link:hover .doctor-card__photo img {
  transform: scale(1.04);
  filter: saturate(1);
}

.doctor-card__specialty {
  display: block;
  margin: 16px 0 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--green);
  font-weight: 600;
}

.doctor-card__name {
  display: block;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--indigo-900);
  transition: color .2s var(--ease);
}

.doctor-card__link:hover .doctor-card__name {
  color: var(--indigo);
}

.doctors__action {
  display: flex;
  justify-content: center;
}

.btn--doctors {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--green-700);
  color: #fff;
  border: 1px solid var(--green-700);
  padding: 12px 28px;
  border-radius: var(--radius-lg);
  font-weight: 600;
  font-size: 14.5px;
  transition: all 0.25s var(--ease);
  box-shadow: 0 4px 12px rgba(0, 128, 61, 0.15);
  cursor: pointer;
}

.btn--doctors:hover {
  background: var(--green-800);
  border-color: var(--green-800);
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 128, 61, 0.25);
  transform: translateY(-2px);
}

.btn--doctors:active {
  transform: translateY(1px);
}

.btn--doctors svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  transition: transform 0.2s var(--ease);
}

.btn--doctors:hover svg {
  transform: translateX(4px);
}

.quotes__controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
}

.rail-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: 1px solid var(--rule-firm);
  border-radius: 50%;
  color: var(--ink);
  transition: border-color .18s var(--ease), color .18s var(--ease), background-color .18s var(--ease);
}

.rail-btn svg { width: 17px; height: 17px; }

.rail-btn:hover:not(:disabled) {
  border-color: var(--indigo);
  color: var(--indigo);
  background: var(--indigo-50);
}

.rail-btn:disabled { opacity: .32; cursor: default; }

/* --------------------------------------------------------------------------
   6. Facilities
   -------------------------------------------------------------------------- */

.facilities { background: var(--ground-2); border-block: 1px solid var(--rule); }

.facilities__feature { margin: 0 0 20px; }

.facilities__feature img {
  width: 100%;
  height: auto;
  aspect-ratio: 1040 / 468;
  object-fit: cover;
  border-radius: 2px;
}

.facilities__feature figcaption,
.facilities__shot figcaption {
  margin-top: 12px;
  font-size: 13.5px;
  color: var(--ink-2);
}

.facilities__cap-label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 3px;
}

.facilities__shot figcaption {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.facilities__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: clamp(26px, 3.2vw, 40px);
}

.facilities__shot { margin: 0; }

.facilities__shot img {
  width: 100%;
  height: auto;
  aspect-ratio: 500 / 403;
  object-fit: cover;
  border-radius: 2px;
}

.facilities__index {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 32px;
  padding-block: clamp(32px, 4vw, 44px);
  border-top: 1px solid var(--rule);
  margin-bottom: 32px;
}

.facilities__group-head {
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.facilities__group ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   7. Patient care band
   -------------------------------------------------------------------------- */

.care {
  padding-block: clamp(56px, 7vw, 88px);
  background: var(--indigo-900);
  color: #fff;
}

.care__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 620px);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}

.care__title {
  margin: 0 0 20px;
  font-family: var(--serif);
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.026em;
  color: #fff;
  text-wrap: balance;
}

.care__text {
  margin: 0 0 26px;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .74);
  max-width: 52ch;
}

.care__points {
  display: grid;
  gap: 10px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
  font-size: 14.5px;
  color: rgba(255, 255, 255, .74);
}

.care__points li {
  padding-inline-start: 20px;
  border-inline-start: 1px solid rgba(141, 135, 215, .45);
}

.care__points strong { color: #fff; font-weight: 600; }

.care__media { margin: 0; }

.care__media img {
  width: 100%;
  height: auto;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   8. Feedback
   -------------------------------------------------------------------------- */

.quotes__stage { position: relative; min-height: 210px; }

.quote { margin: 0; max-width: 30ch; }

.quote__text {
  margin: 0 0 24px;
  font-family: var(--serif);
  font-size: clamp(22px, 2.9vw, 34px);
  font-weight: 400;
  line-height: 1.32;
  letter-spacing: -.018em;
  color: var(--ink);
  max-width: 24ch;
}

.quote__text::before { content: "\201C"; }
.quote__text::after  { content: "\201D"; }

.quote { max-width: none; }

.quote__by { display: flex; align-items: baseline; gap: 12px; }

.quote__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.quote__role {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.quotes__count {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.quotes__count span { color: var(--ink); }

.quotes__all { margin-inline-start: auto; }

/* --------------------------------------------------------------------------
   9. Booking routes
   -------------------------------------------------------------------------- */

.book__inner {
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  gap: clamp(36px, 4vw, 64px);
  align-items: start;
}

.book__routes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}

.route {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 26px 24px 28px;
  border-inline-start: 1px solid var(--rule);
}

.route:first-child { border-inline-start: 0; padding-inline-start: 0; }

.route__label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.route--urgent .route__label { color: var(--green-700); }

.route__value {
  margin: 0;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.25;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

a.route__value { transition: color .18s var(--ease); }
a.route__value:hover { color: var(--indigo); }

.route__value--sm { font-size: 15px; font-weight: 500; letter-spacing: 0; word-break: break-word; }

.route__note {
  margin: 0;
  font-size: 13px;
  color: var(--ink-3);
}

.route .btn { margin-top: 6px; }

/* --------------------------------------------------------------------------
   10. Location
   -------------------------------------------------------------------------- */

.location__inner {
  display: grid;
  grid-template-columns: minmax(0, 640px) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}

.location__media { margin: 0; }

.location__media img {
  width: 100%;
  height: auto;
  border-radius: 2px;
}

.location__details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 32px;
  margin: 0 0 30px;
}

.location__details dt {
  margin-bottom: 6px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.location__details dd {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
}

.location__details a { color: var(--indigo); font-weight: 500; }

/* --------------------------------------------------------------------------
   11. Closing line
   -------------------------------------------------------------------------- */

.closer {
  padding-block: clamp(48px, 6vw, 76px);
  border-top: 1px solid var(--rule);
  background:
    radial-gradient(700px 300px at 50% 130%, var(--indigo-50), transparent 70%);
}

.closer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
}

.closer__line {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.026em;
  color: var(--ink);
}

.closer__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  padding-top: clamp(48px, 6vw, 72px);
  background: var(--indigo-900);
  color: rgba(255, 255, 255, .68);
  font-size: 14px;
}

.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 40px;
  padding-bottom: clamp(36px, 4vw, 52px);
}

.site-footer__brand img {
  height: 44px;
  width: auto;
  /* The lockup is dark-on-transparent; lift it onto its own light plate
     rather than inverting the brand colours. */
  padding: 8px 12px;
  background: #fff;
  border-radius: 3px;
}

.site-footer__blurb {
  margin: 18px 0;
  line-height: 1.6;
  max-width: 38ch;
}

.site-footer__accredit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 8px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(141, 135, 215, .28);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #fff;
}

.site-footer__accredit img { height: 26px; width: auto; }

.site-footer__col h2 {
  margin: 0 0 16px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}

.site-footer__col ul {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer a { transition: color .18s var(--ease); }
.site-footer a:hover { color: #fff; }

.site-footer__col .is-more { color: var(--indigo-400); font-weight: 500; }

.site-footer__emergency {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}

.site-footer__phone {
  display: block;
  margin-bottom: 18px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: #fff;
}

.site-footer address {
  font-style: normal;
  line-height: 1.6;
  margin-bottom: 14px;
}

.site-footer__social {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}

.site-footer__social svg { width: 17px; height: 17px; }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 32px;
  padding-block: 22px;
  border-top: 1px solid rgba(141, 135, 215, .22);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
}

/* --------------------------------------------------------------------------
   5b. Healthcare Challenges & Solutions
   -------------------------------------------------------------------------- */

.challenges {
  padding-block: clamp(24px, 3vw, 36px) clamp(48px, 6vw, 76px);
  background: var(--ground);
}

.comparison-flow {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 40px;
}

.comparison-row {
  display: grid;
  grid-template-columns: 1fr 100px 1fr;
  align-items: center;
  gap: 32px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--rule-soft);
  transition: border-color 0.3s var(--ease);
}

.comparison-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.comparison-row:hover {
  border-bottom-color: var(--rule-firm);
}

.comparison-col {
  display: flex;
  flex-direction: column;
  transition: transform 0.3s var(--ease);
}

.comparison-col--challenge {
  padding-inline-end: 16px;
}

.comparison-col--solution {
  padding-inline-start: 16px;
}

.comparison-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.comparison-badge {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
}

.comparison-badge--challenge {
  background: rgba(220, 38, 38, 0.07);
  color: #d32f2f;
  border: 1px solid rgba(220, 38, 38, 0.15);
}

.comparison-badge--solution {
  background: rgba(0, 182, 87, 0.08);
  color: var(--green-700);
  border: 1px solid rgba(0, 182, 87, 0.15);
}

.comparison-title {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 600;
  margin: 0;
  color: var(--ink);
  transition: color 0.3s var(--ease);
}

.comparison-text {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0;
}

.comparison-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 100%;
}

.connector-line {
  position: absolute;
  width: 2px;
  height: 120%;
  background: var(--rule-soft);
  z-index: 1;
}

.connector-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  background: var(--ground);
  border: 1px solid var(--rule-firm);
  border-radius: 50%;
  color: var(--ink-3);
  z-index: 2;
  transition: all 0.3s var(--ease);
}

.connector-icon svg {
  width: 15px;
  height: 15px;
  stroke-width: 2.5px;
  transition: transform 0.3s var(--ease);
}

/* Hover effects */
.comparison-row:hover .connector-icon {
  border-color: var(--green);
  color: var(--green);
  background: #fff;
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 182, 87, 0.2);
}

.comparison-row:hover .connector-icon svg {
  transform: translateX(2px);
}

.comparison-row:hover .comparison-col--solution .comparison-title {
  color: var(--green-700);
}

/* --------------------------------------------------------------------------
   5c. Floating Feature Cards
   -------------------------------------------------------------------------- */

.floating-features {
  padding-block: clamp(36px, 4vw, 56px);
  background: var(--ground-2);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 2.5vw, 32px);
}

.feature-card {
  position: relative;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  box-shadow: 0 10px 30px -10px rgba(27, 25, 80, 0.05);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  transform: skewX(-20deg);
  transition: none;
  z-index: 2;
  pointer-events: none;
}

.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -15px rgba(27, 25, 80, 0.12);
  border-color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.95);
}

.feature-card:hover::before {
  left: 150%;
  transition: left 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

.feature-card__icon-wrapper {
  margin-bottom: 20px;
}

.feature-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: rgba(0, 182, 87, 0.08);
  color: var(--green-700);
  transition: all 0.35s var(--ease);
}

.feature-card__icon svg {
  width: 22px;
  height: 22px;
}

.feature-card:hover .feature-card__icon {
  background: var(--green-700);
  color: #ffffff;
}

.feature-card__title {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--ink);
}

.feature-card__text {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
}

/* --------------------------------------------------------------------------
   5d. Patient Testimonials Sliding Card (Mock Design Match)
   -------------------------------------------------------------------------- */

.section__head-centered {
  text-align: center;
  margin-bottom: clamp(24px, 4vw, 36px);
}

.section__head-centered .eyebrow {
  justify-content: center;
  margin-bottom: 12px;
}

.section__head-centered .eyebrow::after {
  display: none !important;
}

.section__head-centered .section__title {
  margin-bottom: 0;
}

.quotes {
  background: var(--ground);
}

.quotes__stage {
  position: relative;
  margin-top: 24px;
}

.quote {
  margin: 0;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
}

/* Smooth active state transitions */
.quote.is-active {
  animation: slideFadeIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.quote-card {
  position: relative;
  background: #ffffff;
  border-top: 5px solid var(--green-700);
  border-left: 1px solid var(--rule-soft);
  border-right: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  border-radius: var(--radius-xl);
  padding: clamp(28px, 4vw, 44px);
  box-shadow: 0 12px 40px -15px rgba(27, 25, 80, 0.05);
}

/* Top Row: Quote Icon & Stars */
.quote-card__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.quote-card__icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  background: rgba(27, 25, 80, 0.03);
  color: var(--indigo);
}

.quote-card__icon-box svg {
  width: 18px;
  height: 18px;
}

.quote-card__rating {
  display: flex;
  gap: 3px;
}

.quote-card__rating svg {
  width: 17px;
  height: 17px;
  color: #FBBF24;
}

/* Middle Row: Quote Text */
.quote-card__quote-text {
  font-family: var(--font-sans);
  font-size: clamp(15.5px, 2vw, 17px);
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0 0 28px;
  font-style: normal;
  text-wrap: pretty;
  font-weight: 400;
}

/* Bottom Row: Footer Divider & Layout */
.quote-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--rule-soft);
  padding-top: 24px;
}

/* Left side profile */
.quote-card__profile {
  display: flex;
  align-items: center;
  gap: 14px;
}

.quote-card__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
}

.quote-card__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.quote-card__name {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  color: var(--indigo);
  margin: 0;
}

.quote-card__role {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--green-700);
  letter-spacing: .05em;
}

/* Right side controls */
.quote-card__controls {
  display: flex;
  align-items: center;
  gap: 24px;
}

/* Stepper dots */
.quote-card__stepper {
  display: flex;
  align-items: center;
  gap: 6px;
}

.quote-card__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rule);
  transition: all 0.3s var(--ease);
}

.quote-card__dot.is-active {
  width: 18px;
  border-radius: 3px;
  background: var(--green-700);
}

/* Arrow controls */
.quote-card__arrows {
  display: flex;
  align-items: center;
  gap: 10px;
}

.quote-card__arrow-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--rule-firm);
  background: transparent;
  color: var(--indigo);
  cursor: pointer;
  transition: all 0.22s var(--ease);
}

.quote-card__arrow-btn:hover {
  background: var(--green-700);
  border-color: var(--green-700);
  color: #ffffff;
}

.quote-card__arrow-btn svg {
  width: 16px;
  height: 16px;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
  .hero__inner        { grid-template-columns: minmax(0, 1fr) 380px; }
  .hero__media img    { width: 380px; }
  .facilities__index  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__top   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 999px) {
  .section__head {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 20px;
  }

  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .hero__media { justify-self: start; max-width: 438px; width: 100%; }
  .hero__media img { width: 100%; }
  .hero__frame { inset: 16px -16px -16px 16px; }

  .trust__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .trust__item:nth-child(4) { border-inline-start: 0; padding-inline-start: 0; }
  .trust__item:nth-child(n + 4) { border-top: 1px solid var(--rule); }

  .about__inner,
  .care__inner,
  .location__inner,
  .book__inner,
  .dept {
    grid-template-columns: minmax(0, 1fr);
  }

  .about__media { max-width: 640px; }
  .about__floating-badge {
    left: 12px;
    bottom: 20px;
  }
  .facilities__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .doctors__grid-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }

  .stats__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 0;
  }
  
  .stats__item {
    padding-inline: 24px;
  }
  
  .stats__item:nth-child(even)::after {
    display: none;
  }
  
  .stats__item:first-child {
    padding-inline-start: 24px;
  }
  
  .stats__item:last-child {
    padding-inline-end: 24px;
  }

  .plans__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .plans__sticky-sidebar {
    position: static;
  }

  .plans__indicator-dots {
    display: none;
  }

  .features-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
}

@media (max-width: 720px) {
  .dept__panel {
    padding: 26px 22px 24px;
    min-height: auto;
  }

  .dept__desc {
    min-height: 0;
  }

  .dept__more-action {
    padding-inline-start: 0;
  }

  .book__routes { grid-template-columns: minmax(0, 1fr); }

  .route {
    border-inline-start: 0;
    padding-inline: 0;
    border-bottom: 1px solid var(--rule);
  }

  .route:last-child { border-bottom: 0; }

  .location__details { grid-template-columns: minmax(0, 1fr); }
  .site-footer__top { grid-template-columns: minmax(0, 1fr); gap: 32px; }

  .stats__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px 0;
  }
  
  .stats__item::after {
    display: none !important;
  }
  
  .stats__item {
    padding-inline: 16px !important;
    justify-content: flex-start;
  }

  .plans__item {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding-block: 24px;
  }

  .plans__item-meta {
    justify-content: flex-start;
    gap: 12px;
  }

  .doctors__grid-three {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    max-width: 300px;
    margin-inline: auto;
  }

  .comparison-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    padding-bottom: 32px;
  }
  .comparison-col--challenge {
    padding-inline-end: 0;
  }
  .comparison-col--solution {
    padding-inline-start: 0;
    border-top: 1px dashed var(--rule-soft);
    padding-top: 20px;
  }
  .comparison-connector {
    display: none;
  }
}

@media (max-width: 560px) {
  .trust__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .trust__item {
    padding: 18px 16px;
    border-inline-start: 1px solid var(--rule);
    border-top: 1px solid var(--rule);
  }

  .trust__item:nth-child(odd) { border-inline-start: 0; padding-inline-start: 0; }
  .trust__item:nth-child(-n + 2) { border-top: 0; }
  .trust__item:nth-child(4) { border-inline-start: 1px solid var(--rule); padding-inline-start: 16px; }

  .facilities__grid { grid-template-columns: minmax(0, 1fr); }
  .facilities__index { grid-template-columns: minmax(0, 1fr); }

  .about__media { padding-bottom: 0; }
  .about__media-inset { display: none; }
  .about__floating-badge {
    position: relative;
    left: 0;
    bottom: 0;
    margin-top: 16px;
    box-shadow: var(--shadow-sm);
  }
  .about__eyebrow-wrapper {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }


  .hero__actions .btn,
  .closer__actions .btn { width: 100%; }

  .quotes__all { width: 100%; margin: 8px 0 0; }
  
  .quote-card__footer {
    flex-direction: column;
    gap: 20px;
    align-items: stretch;
  }
  
  .quote-card__controls {
    justify-content: space-between;
  }

  .features-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .feature-card {
    padding: 24px;
  }
}

/* --------------------------------------------------------------------------
   5e. Booking & Facilities Scope
   -------------------------------------------------------------------------- */

.booking-facilities {
  background: var(--indigo-50);
}

.booking-facilities .section__title {
  white-space: nowrap;
}

@media (max-width: 360px) {
  .booking-facilities .section__title {
    white-space: normal;
  }
}

.booking-facilities__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

/* Left Side: Form Card */
.appointment-card {
  background: #ffffff;
  border-top: 5px solid var(--green-700);
  border-left: 1px solid var(--rule-soft);
  border-right: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  border-radius: var(--radius-xl);
  padding: clamp(24px, 4vw, 40px);
  box-shadow: 0 20px 50px -20px rgba(27, 25, 80, 0.06);
}

.appointment-card__header {
  margin-bottom: 28px;
}

.eyebrow--green {
  color: var(--green-700);
}

.appointment-card__title {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 600;
  color: var(--indigo);
  margin: 4px 0 10px;
}

.appointment-card__subtitle {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0;
}

/* Form Fields */
.appointment-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.appointment-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.appointment-form__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.appointment-form__label {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--ink);
  letter-spacing: .05em;
}

.appointment-form__input,
.appointment-form__select,
.appointment-form__textarea {
  font-family: var(--font-sans);
  font-size: 14.5px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--indigo-200);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  transition: all 0.22s var(--ease);
  width: 100%;
}

.appointment-form__input:focus,
.appointment-form__select:focus,
.appointment-form__textarea:focus {
  border-color: var(--green-700);
  box-shadow: 0 0 0 3px rgba(0, 182, 87, 0.12);
  outline: none;
}

.appointment-form__select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%2300803D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
  padding-right: 40px;
}

.appointment-form__textarea {
  resize: vertical;
}

.appointment-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  padding-block: 14px;
  margin-top: 10px;
}

.appointment-form__submit svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s var(--ease);
}

.appointment-form__submit:hover svg {
  transform: translateX(4px);
}

/* Right Side: Facilities Checklist */
.booking-facilities__intro {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 28px;
}

.facilities-list-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 24px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.facility-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  transition: transform 0.25s var(--ease);
}

.facility-item:hover {
  transform: translateX(4px);
}

.facility-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(141, 135, 215, 0.15);
  color: var(--green-700);
  flex-shrink: 0;
  margin-top: 2px;
  transition: all 0.25s var(--ease);
}

.facility-item__icon svg {
  width: 10px;
  height: 10px;
}

.facility-item:hover .facility-item__icon {
  background: var(--green-700);
  color: #ffffff;
}

.facility-item__text {
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-2);
  font-weight: 500;
  transition: color 0.25s var(--ease);
}

.facility-item:hover .facility-item__text {
  color: var(--indigo);
}

/* Responsive Overrides */
@media (max-width: 999px) {
  .booking-facilities__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }
}

@media (max-width: 560px) {
  .appointment-form__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  
  .facilities-list-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
}


/* ==========================================================================
   Section entrance animations
   --------------------------------------------------------------------------
   Real @keyframes rather than a transition, so each block has its own easing
   curve and delay. Sections are marked and staggered by home.js, which also
   means nothing is hidden when JavaScript is unavailable — the hiding rule
   only applies under .sec-reveal, and that class is added by script.
   ========================================================================== */

@keyframes secRise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

@keyframes secRiseLeft {
  from { opacity: 0; transform: translateX(-26px); }
  to   { opacity: 1; transform: none; }
}

@keyframes secRiseRight {
  from { opacity: 0; transform: translateX(26px); }
  to   { opacity: 1; transform: none; }
}

@keyframes secScale {
  from { opacity: 0; transform: scale(.965); }
  to   { opacity: 1; transform: none; }
}

/* Hidden only once JS has claimed the section. */
.sec-reveal .anim-item { opacity: 0; }

.sec-reveal.is-in .anim-item {
  animation: secRise .72s var(--ease-out) var(--anim-delay, 0ms) both;
}

/* Two-column blocks read better arriving from their own side. */
.sec-reveal.is-in .anim-item--left  { animation-name: secRiseLeft; }
.sec-reveal.is-in .anim-item--right { animation-name: secRiseRight; }
.sec-reveal.is-in .anim-item--scale { animation-name: secScale; }

/* The older .reveal hook, upgraded from a transition to the same keyframe so
   both systems move identically. */
.reveal {
  opacity: 0;
  transform: none;
  transition: none;
}

.reveal.is-in {
  opacity: 0;
  animation: secRise .72s var(--ease-out) var(--anim-delay, 0ms) both;
}

/* Motion here is decoration; under reduced-motion everything is simply present. */
@media (prefers-reduced-motion: reduce) {
  .sec-reveal .anim-item,
  .sec-reveal.is-in .anim-item,
  .reveal,
  .reveal.is-in {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* Initials plate for a consultant with no photograph on file. Matches the
   photo's square so the grid keeps its rhythm whether a picture exists. */
.doctor-card__initials {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  font-family: var(--serif);
  font-size: clamp(38px, 6vw, 56px);
  font-weight: 700;
  letter-spacing: -.03em;
  color: rgb(69 65 146 / .22);
}

/* Feedback on the homepage booking form. The form used to alert a fake
   success and send nothing; these are the real outcomes. */
.appointment-form__notice {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.55;
}
.appointment-form__notice--ok {
  background: rgba(1, 191, 102, .1);
  color: var(--green-700, #095435);
}
.appointment-form__notice--bad {
  background: rgba(220, 91, 78, .1);
  color: #8f3227;
}
.appointment-form__optional {
  font-weight: 400;
  opacity: .7;
}